:root{
      --red:#d71920;--red2:#b80f16;--ink:#172033;--text:#263044;--muted:#667085;--bg:#f5f7fb;--card:#fff;--line:#e5e8ef;--soft:#f2f4f8;--green:#0f9f6e;--amber:#b7791f;--blue:#1f66d1;--bad:#d92d20;--shadow:0 18px 50px rgba(20,30,55,.10);--r:22px
    }
    *{box-sizing:border-box} #course,#about{scroll-margin-top:84px} body{margin:0;font-family:Inter,Arial,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text)}.noscript{background:#fff1f2;border-bottom:1px solid #ffb6bd;color:#9f1118;font-weight:800;padding:12px 16px;text-align:center}
    .wrap{width:min(1180px,calc(100% - 32px));margin:auto}.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.topin{height:72px;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:12px;font-weight:900;color:var(--ink)}.mark{width:44px;height:34px;background:var(--red);border-radius:8px 8px 14px 8px;display:grid;place-items:center;color:white;font-weight:1000;letter-spacing:-.06em}.nav{display:flex;gap:18px;align-items:center}.nav a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:700}.btn{border:0;background:var(--red);color:white;border-radius:999px;padding:13px 19px;font-weight:850;cursor:pointer;box-shadow:0 12px 24px rgba(215,25,32,.18);transition:.18s}.btn:hover{transform:translateY(-1px)}.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
    .hero{padding:48px 0 24px;display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center}.label{display:inline-flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:#49566f;font-size:13px;font-weight:750}.h1{font-size:clamp(36px,5.4vw,66px);line-height:.98;letter-spacing:-.055em;margin:18px 0;color:var(--ink)}.lead{font-size:19px;line-height:1.58;color:#526078;max-width:720px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}.metric{background:white;border:1px solid var(--line);border-radius:18px;padding:17px;box-shadow:0 8px 24px rgba(20,30,55,.04)}.metric b{display:block;font-size:28px;color:var(--ink)}.metric span{font-size:13px;color:var(--muted)}
    .panelMock{background:#fff;border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow);overflow:hidden}.mockTop{height:54px;background:#fafbfe;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 18px}.dots{display:flex;gap:7px}.dot{width:10px;height:10px;border-radius:50%;background:#d0d5dd}.mockBody{display:grid;grid-template-columns:1fr;padding:18px;gap:12px}.chat{border:1px solid var(--line);border-radius:18px;padding:14px;background:#fbfcff}.from{font-size:12px;color:var(--muted);font-weight:800;margin-bottom:7px}.bubble{background:#f0f3f8;border-radius:16px 16px 16px 4px;padding:12px;line-height:1.45;color:#364154}.agent{background:#fff4f4;border-color:#ffd6d8}.agent .bubble{background:#fff;color:#344054;border:1px solid #ffd6d8}.ticket{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ticket div{background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:11px}.ticket small{display:block;color:var(--muted);font-weight:800}.ticket b{color:var(--ink)}
    section{padding:24px 0}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:0 10px 30px rgba(20,30,55,.04)}.card h3{margin:0 0 10px;color:var(--ink)}.card p,.muted{color:var(--muted);line-height:1.58}.course{display:grid;grid-template-columns:340px 1fr;gap:12px;align-items:start}.side{position:sticky;top:92px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:0 10px 30px rgba(20,30,55,.04)}.timer{font-size:36px;font-weight:950;color:var(--ink);margin:8px 0}.progress{height:12px;background:#eef1f6;border-radius:999px;overflow:hidden}.progress span{height:100%;display:block;width:0;background:linear-gradient(90deg,var(--red),#ff7b7f);transition:.35s}.steps{display:grid;gap:8px;margin-top:16px}.steps div{border:1px solid var(--line);border-radius:14px;padding:11px;background:#fbfcff;color:#536078;font-size:14px;font-weight:750}.steps div.active{border-color:#ffd0d2;background:#fff3f3;color:var(--red)}.work{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);min-height:620px}.lessonHero{border:1px solid #ffd7d9;background:linear-gradient(180deg,#fff7f7,#fff);border-radius:24px;padding:22px;margin-top:10px}.lessonHero h3{margin:0 0 10px;color:var(--ink)}.checklist{display:grid;gap:10px;margin:16px 0}.check{display:flex;gap:10px;align-items:flex-start;background:#f8fafc;border:1px solid var(--line);border-radius:16px;padding:13px}.check i{font-style:normal;color:var(--green);font-weight:1000}.scenarioHead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:10px}.badge{display:inline-flex;border-radius:999px;border:1px solid var(--line);background:#f8fafc;padding:7px 10px;color:#536078;font-size:12px;font-weight:850}.ticketBox{display:grid;grid-template-columns:1fr 320px;gap:16px;margin-top:12px}.dialog{border:1px solid var(--line);border-radius:22px;background:#fbfcff;padding:16px}.message{margin-bottom:12px}.message .name{font-size:12px;font-weight:900;color:#667085;margin-bottom:5px}.message .txt{background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px;line-height:1.48}.message.client .txt{border-radius:16px 16px 16px 4px}.message.operator .txt{background:#fff5f5;border-color:#ffd7d9;border-radius:16px 16px 4px 16px}.data{border:1px solid var(--line);border-radius:22px;padding:16px;background:#fff}.row{padding:11px 0;border-bottom:1px solid var(--line)}.row:last-child{border-bottom:0}.row small{display:block;color:var(--muted);font-weight:850;text-transform:uppercase;font-size:11px;letter-spacing:.04em;margin-bottom:4px}.row b{color:var(--ink)}.task{margin-top:10px;background:#f7f8fb;border:1px solid var(--line);border-radius:18px;padding:12px;line-height:1.5}.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.choice{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;text-align:left;cursor:pointer;font-weight:750;line-height:1.42;color:#344054}.choice:hover{border-color:#f3a4a8;transform:translateY(-1px)}.choice.correct{border-color:#7ad7b4;background:#eefbf6}.choice.wrong{border-color:#ff9aa2;background:#fff1f2}.feedback{display:none;margin-top:10px;border-radius:18px;padding:16px;line-height:1.58}.feedback.show{display:block}.feedback.good{background:#eefbf6;border:1px solid #a9e8d0}.feedback.no{background:#fff1f2;border:1px solid #ffb6bd}.writeBox{margin-top:10px;display:none}.writeBox.show{display:block}.writeBox textarea{width:100%;min-height:112px;border:1px solid var(--line);border-radius:16px;padding:14px;resize:vertical;color:#344054;background:#fff}.sample{margin-top:10px;background:#f8fafc;border:1px solid var(--line);border-radius:16px;padding:13px;color:#48546a;display:none}.sample.show{display:block}.result{display:none;text-align:center}.score{font-size:72px;font-weight:1000;color:var(--red);letter-spacing:-.05em}.breakdown{text-align:left;margin-top:18px}.barLine{display:grid;grid-template-columns:170px 1fr 52px;gap:10px;align-items:center;margin:10px 0}.miniBar{height:10px;background:#eef1f6;border-radius:999px;overflow:hidden}.miniBar span{display:block;height:100%;background:var(--red);border-radius:999px}.hidden{display:none!important}.footer{text-align:center;color:var(--muted);padding:34px 0 54px}@media(max-width:960px){.hero,.course,.ticketBox{grid-template-columns:1fr}.grid3,.metrics,.choices{grid-template-columns:1fr}.side{position:relative;top:auto}.nav a{display:none}.ticket{grid-template-columns:1fr}}


    @media (max-width:760px){
      :root{--r:18px;--shadow:0 10px 28px rgba(20,30,55,.08)}
      html,body{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
      body{padding-bottom:env(safe-area-inset-bottom)}
      .wrap{width:min(100% - 20px,1180px)}
      .top{z-index:60}
      .topin{height:58px;gap:10px}
      .logo{gap:8px;font-size:14px;min-width:0}.logo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mark{width:38px;height:30px;border-radius:7px 7px 12px 7px;font-size:13px;flex:0 0 auto}
      .nav{gap:8px}.nav .btn{padding:10px 13px;font-size:13px;box-shadow:none}.nav a{display:none!important}
      .hero{padding:30px 0 22px;gap:20px}.label{font-size:12px;line-height:1.35;border-radius:14px;align-items:flex-start}.h1{font-size:clamp(30px,10vw,42px);line-height:1.02;letter-spacing:-.04em;margin:14px 0}.lead{font-size:16px;line-height:1.5}.actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:18px}.actions .btn,.actions a.btn{width:100%;text-align:center;padding:15px 16px}
      .metrics{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}.metric{padding:12px 10px;border-radius:15px}.metric b{font-size:20px}.metric span{font-size:11px;line-height:1.25}
      .panelMock{border-radius:22px}.mockTop{height:46px;padding:0 14px}.mockBody{padding:12px}.ticket{grid-template-columns:1fr}.chat{padding:12px}.bubble{font-size:14px;padding:11px}
      section{padding:22px 0}.grid3{gap:10px}.card{padding:18px;border-radius:18px}.card h3{font-size:18px}.card p{font-size:14px}
      .course{gap:12px}.side{position:sticky;top:58px;z-index:45;border-radius:0 0 18px 18px;margin-left:-10px;margin-right:-10px;border-left:0;border-right:0;padding:10px 12px;box-shadow:0 10px 22px rgba(20,30,55,.08)}
      .side h2,.side p.muted{display:none}.timer{font-size:20px;margin:0;line-height:1}.progress{height:8px;margin-top:8px}.steps{display:flex;gap:6px;overflow-x:auto;margin-top:8px;padding-bottom:2px;scrollbar-width:none}.steps::-webkit-scrollbar{display:none}.steps div{white-space:nowrap;font-size:12px;padding:8px 10px;border-radius:999px;flex:0 0 auto}
      .work{min-height:auto;padding:16px;border-radius:18px}.work h2{font-size:22px;line-height:1.16;margin:0 0 10px}.lessonHero{padding:16px;border-radius:18px}.checklist{gap:8px}.check{padding:11px;border-radius:14px;font-size:14px}.scenarioHead{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:12px}.scenarioHead h2{font-size:22px;line-height:1.16}.badge{width:max-content;max-width:100%;font-size:11px;line-height:1.2}
      .ticketBox{gap:10px}.dialog,.data{border-radius:18px;padding:12px}.message{margin-bottom:10px}.message .txt{font-size:14px;line-height:1.45;padding:11px;border-radius:14px}.row{padding:10px 0}.row b{font-size:14px;line-height:1.35}.task{padding:13px;border-radius:15px;font-size:14px}.choices{grid-template-columns:1fr;gap:8px}.choice{min-height:54px;padding:14px 13px;border-radius:15px;font-size:15px;line-height:1.35;touch-action:manipulation}.choice:hover{transform:none}
      .feedback{padding:13px;border-radius:15px;font-size:14px}.writeBox textarea{min-height:120px;border-radius:15px;font-size:16px;line-height:1.45}.writeBox .btn,#nextBtn{width:100%;margin-top:8px;padding:15px 16px}.sample{font-size:14px;border-radius:15px}.result .score,.score{font-size:54px}.barLine{grid-template-columns:1fr;gap:6px;background:#fbfcff;border:1px solid var(--line);border-radius:14px;padding:10px}.barLine span{text-align:right}.footer{padding:24px 12px 34px;font-size:13px}
    }
    @media (max-width:420px){
      .wrap{width:min(100% - 16px,1180px)}.topin{height:54px}.nav .btn{padding:9px 11px;font-size:12px}.logo span{max-width:145px}.hero{padding-top:24px}.h1{font-size:30px}.lead{font-size:15px}.metrics{grid-template-columns:1fr}.metric{display:flex;justify-content:space-between;align-items:center;gap:12px}.metric b{font-size:22px}.metric span{text-align:right}.panelMock{display:none}.side{top:54px;margin-left:-8px;margin-right:-8px}.work{padding:14px}.data{order:-1}.ticketBox{display:flex;flex-direction:column}.choice{font-size:14px}.caseTop,.scenarioHead{gap:6px}
    }

    html{scroll-behavior:smooth}
    body{background:
      linear-gradient(180deg,#f7f9fd 0%,#eef2f8 44%,#f7f8fb 100%);
      text-rendering:optimizeLegibility}
    body:before{content:"";position:fixed;inset:0;pointer-events:none;background:
      linear-gradient(90deg,rgba(215,25,32,.035),transparent 38%,rgba(31,102,209,.045));
      z-index:-1}
    .top{box-shadow:0 6px 24px rgba(20,30,55,.05)}
    .topin{gap:18px}.logo span{letter-spacing:-.01em}
    .mark{box-shadow:inset 0 -10px 18px rgba(105,0,8,.16),0 9px 22px rgba(215,25,32,.18)}
    .nav a{position:relative;padding:8px 0}.nav a:after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--red);border-radius:9px;opacity:0;transform:scaleX(.6);transition:.18s}
    .nav a:hover{color:var(--ink)}.nav a:hover:after{opacity:1;transform:scaleX(1)}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;line-height:1;text-decoration:none}
    .btn:focus-visible,.choice:focus-visible,textarea:focus-visible{outline:3px solid rgba(31,102,209,.22);outline-offset:3px}
    .hero{min-height:auto;padding:42px 0 28px}
    .label{box-shadow:0 8px 26px rgba(20,30,55,.05)}
    .h1{max-width:780px}.lead{color:#465572}
    .metrics{max-width:720px}.metric{transition:transform .18s,box-shadow .18s,border-color .18s}
    .metric:hover{transform:translateY(-2px);border-color:#d7dce7;box-shadow:0 14px 34px rgba(20,30,55,.07)}
    .panelMock{position:relative;isolation:isolate}
    .panelMock:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(215,25,32,.055),transparent 42%,rgba(31,102,209,.05));z-index:-1}
    .mockTop b:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:8px;box-shadow:0 0 0 4px rgba(15,159,110,.12)}
    section{padding:34px 0}#about{padding-top:10px}.grid3{align-items:stretch}
    .card{display:flex;flex-direction:column;min-height:100%;transition:transform .18s,border-color .18s,box-shadow .18s}
    .card:hover{transform:translateY(-2px);border-color:#d7dce7;box-shadow:0 16px 36px rgba(20,30,55,.07)}
    .card h3{font-size:20px;letter-spacing:-.015em}.card h3:before{content:"";display:block;width:36px;height:4px;border-radius:99px;background:var(--red);margin-bottom:13px}
    .course{gap:18px}.sideMeta{display:flex;justify-content:space-between;gap:10px;margin:10px 0 0;color:var(--muted);font-size:12px;font-weight:850}
    .sideMeta span{background:#f7f8fb;border:1px solid var(--line);border-radius:999px;padding:6px 9px}
    .steps div{transition:.18s}.steps div.active{box-shadow:inset 3px 0 0 var(--red)}
    .work{padding:24px;min-width:0;overflow:hidden}.work h2{color:var(--ink);letter-spacing:-.025em}
    #intro>.btn,#lesson>.btn{margin-top:18px}
    .lessonHero{position:relative;overflow:hidden}.lessonHero:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--red)}
    .check i{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#eaf8f2}.check span{min-width:0;overflow-wrap:anywhere}
    .scenarioHead h2{margin-top:0;color:var(--ink)}
    .badge{white-space:nowrap}.dialog,.data,.task{box-shadow:0 8px 22px rgba(20,30,55,.035)}
    .message .txt,.row b,.choice{overflow-wrap:anywhere}.choices{align-items:stretch}
    .choice{min-height:72px;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}
    .choice:hover:not(:disabled){box-shadow:0 10px 24px rgba(20,30,55,.06)}
    .choice:disabled{cursor:default}.choice.correct{box-shadow:0 0 0 3px rgba(15,159,110,.10)}.choice.wrong{box-shadow:0 0 0 3px rgba(217,45,32,.10)}
    .feedback,.sample{box-shadow:0 8px 22px rgba(20,30,55,.035)}
    .writeBox textarea{font:inherit;line-height:1.5;transition:border-color .18s,box-shadow .18s}
    .writeBox textarea:focus{border-color:#9bb8ee;box-shadow:0 0 0 4px rgba(31,102,209,.10);outline:0}
    .barLine{padding:8px 0}.footer{border-top:1px solid var(--line);margin-top:20px}
    @media(max-width:960px){.hero{min-height:auto}.panelMock{max-width:720px}.course{gap:14px}.work{padding:18px}.badge{white-space:normal}}
    @media(max-width:760px){
      .hero{min-height:auto}.sideMeta{margin-top:8px}.sideMeta span{padding:5px 8px}.steps div.active{box-shadow:none}
      #intro,#lesson,#case{min-width:0}
      #intro>.btn,#lesson>.btn{width:min(100%,230px);max-width:100%;margin-top:16px}
      .lessonHero{margin-bottom:0}
      .card:hover,.metric:hover{transform:none}.choice{min-height:58px}.footer{margin-top:8px}
    }
    @media(max-width:760px){
      .wrap,.course,.side,.work,.dialog,.data,.ticketBox,.lessonHero,.checklist,.scenarioHead{min-width:0;max-width:100%}
      .course{width:100%;overflow:hidden}
      .side{position:relative;top:auto;z-index:auto;width:100%;margin-left:0;margin-right:0;border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:16px;padding:10px;overflow:hidden}
      .sideMeta{display:grid;grid-template-columns:auto auto;align-items:center}
      .steps{width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}
      .steps div{flex:0 0 calc((100% - 6px)/2);max-width:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
      .steps div.active{max-width:none}
      .work{width:100%;overflow:hidden;margin-top:12px}
      .scenarioHead,.ticketBox{width:100%}
      .badge{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    }
    @media(max-width:420px){
      .side{margin-left:0;margin-right:0}
      .steps div{flex-basis:calc((100% - 6px)/2)}
      .steps div.active{max-width:none}
    }

    :root{--r:8px;--shadow:0 10px 26px rgba(20,30,55,.08);--bg:#f3f5f8;--soft:#f6f7fa}
    body{background:#f3f5f8}
    body:before{display:none}
    .top{background:#fff;backdrop-filter:none}
    .mark{border-radius:6px;box-shadow:none}
    .btn{border-radius:8px;box-shadow:none}
    .btn:hover{transform:none;background:var(--red2)}
    .btn.ghost:hover{background:#f6f7fa;color:var(--ink)}
    .hero{padding-top:34px}
    .h1{letter-spacing:0}
    .label,.metric,.panelMock,.chat,.ticket div,.card,.side,.work,.lessonHero,.check,.dialog,.data,.task,.choice,.feedback,.writeBox textarea,.sample{border-radius:8px}
    .panelMock,.card,.side,.work{box-shadow:0 8px 22px rgba(20,30,55,.06)}
    .lessonHero{background:#fff;border-color:#e1e5ed}
    .lessonHero:before{width:4px}
    .progress span{background:var(--red)}
    .steps div{border-radius:8px;background:#fff}
    .steps div.active{background:#fff5f5;border-color:#f2b8bc}
    .ticketBox{grid-template-columns:minmax(0,1fr) 300px}
    .dialog{background:#f6f7fa}
    .message .txt{border-radius:8px}
    .message.client .txt{border-radius:8px 8px 8px 2px}
    .message.operator .txt{border-radius:8px 8px 2px 8px}
    .data{background:#fff}
    .badAnswer{display:grid;gap:6px;margin-top:12px;padding:13px 14px;border:1px solid #ffc4c8;border-left:4px solid var(--red);border-radius:8px;background:#fff5f5;color:#8f1218;line-height:1.45}
    .badAnswer b{color:#8f1218}
    .badAnswer span{color:#344054}
    .caseActions{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
    .caseActions .btn{min-width:128px}
    .lessonActions{justify-content:flex-start;flex-wrap:wrap}
    .resultStats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}
    .resultStats div{background:#f8fafc;border:1px solid var(--line);border-radius:8px;padding:12px;text-align:left}
    .resultStats small{display:block;color:var(--muted);font-size:11px;font-weight:850;text-transform:uppercase;margin-bottom:6px}
    .resultStats b{display:block;color:var(--ink);line-height:1.35}
    .barLine{border-top:1px solid var(--line);padding:12px 0}
    @media(max-width:960px){
      .ticketBox{grid-template-columns:1fr}
      .resultStats{grid-template-columns:1fr}
    }
    @media(max-width:760px){
      :root{--r:8px}
      .topin{height:56px}
      .hero{padding:24px 0 18px}
      .h1{font-size:30px;line-height:1.08}
      .lead{font-size:15px}
      .label,.metric,.card,.side,.work,.lessonHero,.check,.dialog,.data,.task,.choice,.feedback,.sample{border-radius:8px}
      .side{position:relative;top:auto;border-radius:8px;margin:0;padding:10px;background:#fff}
      .steps div{flex:0 0 auto;max-width:220px}
      .work{padding:14px;margin-top:10px}
      .scenarioHead h2{font-size:21px}
      .ticketBox{display:flex;flex-direction:column}
      .data{order:-1}
      .dialog{padding:10px}
      .message .txt{font-size:14px}
      .badAnswer{font-size:14px}
      .choices{gap:8px}
      .choice{min-height:52px}
      .caseActions{position:sticky;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 26%);padding-top:18px;margin:10px -2px -2px}
      .caseActions .btn{width:100%;min-width:0;padding:14px 10px}
      .lessonActions{position:static;background:transparent;padding-top:12px;margin:10px 0 0}
      .lessonActions .btn{width:100%}
      .resultStats{grid-template-columns:1fr}
	
	}

	  
/* ==============================
   INSTALL PAGE ONLY
============================== */

.install-wrap{
    width:min(900px, calc(100% - 32px));
    margin:0 auto;
}

/* =========================================================
   MAJOR UPDATE 2026-08-10 — SHARED UI, TRAINING AND THEMES
========================================================= */

:root{
    --surface:#ffffff;
    --surface-2:#f8fafc;
    --surface-3:#eef2f7;
    --overlay:rgba(16,24,40,.62);
    --focus:rgba(215,25,32,.22);
}

html[data-theme="dark"]{
    --ink:#f4f7fb;
    --text:#d5dbe5;
    --muted:#9da8ba;
    --bg:#0f141d;
    --card:#171e29;
    --surface:#171e29;
    --surface-2:#1d2633;
    --surface-3:#263140;
    --line:#303b4b;
    --soft:#1d2633;
    --overlay:rgba(2,6,12,.78);
    --shadow:0 18px 48px rgba(0,0,0,.34);
}

body{
    background:var(--bg);
    color:var(--text);
    transition:background-color .22s ease,color .22s ease;
}

.logo{
    color:var(--ink);
    text-decoration:none;
}

.theme-toggle{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--surface-2);
    color:var(--ink);
    font-size:21px;
    cursor:pointer;
    transition:background .18s ease,border-color .18s ease,transform .18s ease;
}

.theme-toggle:active{transform:scale(.94)}
.theme-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.training-hero{
    min-height:560px;
}

.resume-card{
    display:grid;
    grid-template-columns:52px minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    margin-top:18px;
    padding:16px;
    border:1px solid #f0b4b8;
    border-radius:18px;
    background:var(--surface);
    box-shadow:0 14px 34px rgba(20,30,55,.08);
}

.resume-card[hidden]{display:none!important}
.resume-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:15px;background:#fff0f1;color:var(--red);font-size:27px;font-weight:900}
.resume-copy span,.resume-copy b,.resume-copy small{display:block}
.resume-copy span{color:var(--red);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.resume-copy b{margin-top:4px;color:var(--ink);font-size:17px}
.resume-copy small{margin-top:5px;color:var(--muted);line-height:1.4}
.resume-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.resume-actions .btn{min-height:40px;padding:11px 14px}

.journey{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    margin-bottom:16px;
    padding:14px 18px;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--surface);
    box-shadow:0 8px 22px rgba(20,30,55,.05);
}

.journey>div{
    position:relative;
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--muted);
    font-size:13px;
    font-weight:800;
}

.journey>div:not(:last-child):after{
    content:"";
    position:absolute;
    left:40px;
    right:10px;
    top:16px;
    height:2px;
    background:var(--line);
    z-index:0;
}

.journey i{
    position:relative;
    z-index:1;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border:2px solid var(--line);
    border-radius:50%;
    background:var(--surface);
    color:var(--muted);
    font-style:normal;
}

.journey .active{color:var(--red)}
.journey .active i{border-color:var(--red);background:var(--red);color:#fff;box-shadow:0 0 0 5px rgba(215,25,32,.10)}
.journey .complete{color:var(--ink)}
.journey .complete i{border-color:var(--ink);background:var(--ink);color:var(--surface)}
.journey .complete i:before{content:"✓"}.journey .complete i{font-size:0}.journey .complete i:before{font-size:15px}
.journey .complete:after{background:var(--ink)!important}

.section-kicker{
    display:inline-block;
    margin-bottom:7px;
    color:var(--red);
    font-size:12px;
    font-weight:950;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.result-actions{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:18px;
}

.result-note{margin:16px 0 0}
.result-handoff{margin-top:18px;padding:20px;border:1px solid #a8ddca;border-radius:18px;background:#f2fbf7;text-align:left}
.result-handoff h3{margin:0 0 8px;color:#08724f}
.result-handoff p{margin:8px 0;color:var(--text);line-height:1.58}
.result-handoff a{color:var(--red);font-weight:900}
.result-handoff small{display:block;min-height:18px;margin-top:8px;color:#08724f;font-weight:750}
.result-handoff .result-next-step{margin-top:16px;padding-top:14px;border-top:1px solid #bfe5d6}
html[data-theme="dark"] .result-handoff{border-color:#327b61;background:#123026}
html[data-theme="dark"] .result-handoff h3,html[data-theme="dark"] .result-handoff small{color:#a8ecd3}
.work.view-enter{animation:workspaceEnter .28s ease both}
@keyframes workspaceEnter{from{opacity:.25;transform:translateY(7px)}to{opacity:1;transform:none}}

.confirm-modal{
    position:fixed;
    inset:0;
    z-index:12000;
    display:grid;
    place-items:center;
    padding:20px;
    background:var(--overlay);
    backdrop-filter:blur(8px);
}

.confirm-modal[hidden]{display:none!important}
.confirm-box{width:min(430px,100%);padding:24px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow);text-align:center}
.confirm-box h2{margin:14px 0 8px;color:var(--ink)}
.confirm-box p{margin:0;color:var(--muted);line-height:1.55}
.confirm-icon{width:58px;height:58px;display:grid;place-items:center;margin:auto;border-radius:18px;background:#fff0f1;color:var(--red);font-size:30px;font-weight:900}
.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.modal-open{overflow:hidden}

html[data-theme="dark"] body:before{display:none}
html[data-theme="dark"] .top{background:rgba(15,20,29,.92);border-color:var(--line);box-shadow:0 8px 26px rgba(0,0,0,.22)}
html[data-theme="dark"] .btn.ghost,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .panelMock,
html[data-theme="dark"] .card,
html[data-theme="dark"] .side,
html[data-theme="dark"] .work,
html[data-theme="dark"] .steps div,
html[data-theme="dark"] .dialog,
html[data-theme="dark"] .data,
html[data-theme="dark"] .choice,
html[data-theme="dark"] .writeBox textarea,
html[data-theme="dark"] .sample,
html[data-theme="dark"] .message .txt,
html[data-theme="dark"] .ticket div,
html[data-theme="dark"] .chat,
html[data-theme="dark"] .resultStats div{
    background:var(--surface);
    border-color:var(--line);
    color:var(--text);
}

html[data-theme="dark"] .mockTop,
html[data-theme="dark"] .task,
html[data-theme="dark"] .check,
html[data-theme="dark"] .dialog,
html[data-theme="dark"] .resultStats div,
html[data-theme="dark"] .sideMeta span{
    background:var(--surface-2);
}

html[data-theme="dark"] .agent,
html[data-theme="dark"] .message.operator .txt,
html[data-theme="dark"] .lessonHero{
    background:#261a20;
    border-color:#5a2a32;
}

html[data-theme="dark"] .choice.correct,
html[data-theme="dark"] .feedback.good{background:#112b24;border-color:#256d56;color:#d8f8ec}
html[data-theme="dark"] .choice.wrong,
html[data-theme="dark"] .feedback.no,
html[data-theme="dark"] .badAnswer{background:#32191e;border-color:#7b3039;color:#ffdce0}
html[data-theme="dark"] .progress,html[data-theme="dark"] .miniBar{background:var(--surface-3)}
html[data-theme="dark"] .resume-icon,html[data-theme="dark"] .confirm-icon{background:#32191e}

@media(max-width:760px){
    .training-hero{min-height:auto}
    .resume-card{grid-template-columns:44px minmax(0,1fr);padding:13px;border-radius:15px}
    .resume-icon{width:44px;height:44px;border-radius:13px}
    .resume-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;width:100%}
    .resume-actions .btn{width:100%}
    .journey{padding:11px 9px;border-radius:15px;overflow:hidden}
    .journey>div{display:grid;justify-items:center;gap:5px;text-align:center;font-size:10px}
    .journey>div:not(:last-child):after{left:calc(50% + 18px);right:calc(-50% + 18px);top:15px}
    .journey i{width:30px;height:30px}
    .result-actions{display:grid;grid-template-columns:1fr}
    .result-actions .btn{width:100%}
    .result-handoff .btn{width:100%}
    .confirm-actions{grid-template-columns:1fr}
    .caseActions:not(.lessonActions){padding-bottom:calc(4px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,var(--surface) 27%)}
}

@media(max-width:420px){
    .theme-toggle{width:38px;height:38px;border-radius:10px}
    .nav-start{display:none!important}
    .resume-actions{grid-template-columns:1fr}
}

/* =========================================================
   CANDIDATE QUESTIONNAIRE
========================================================= */
.questionnaire-page{min-height:100vh;background:var(--bg)}
.questionnaire-main{padding:34px 0 10px}
.questionnaire-shell{width:min(820px,calc(100% - 32px));margin:0 auto}
.questionnaire-intro,.questionnaire-section,.questionnaire-progress{border:1px solid var(--line);background:var(--surface);box-shadow:0 8px 22px rgba(20,30,55,.06)}
.questionnaire-intro{padding:28px;border-top:4px solid var(--red);border-radius:8px}
.questionnaire-intro h1{max-width:720px;margin:10px 0 14px;color:var(--ink);font-size:clamp(30px,5vw,46px);line-height:1.08;letter-spacing:-.025em}
.questionnaire-intro>p{margin:0;color:var(--text);line-height:1.62}
.questionnaire-note{display:grid;gap:5px;margin-top:20px;padding:15px 16px;border:1px solid #f0b4b8;border-left:4px solid var(--red);border-radius:8px;background:#fff7f7}
.questionnaire-note b{color:var(--ink)}
.questionnaire-note span{color:var(--text);line-height:1.5}
.questionnaire-note a{color:var(--red);font-weight:850}
.questionnaire-pay-note{border-color:#8bd6b9;border-left-color:var(--green);background:#f2fbf7}
.questionnaire-pay-note b{color:#08724f}
.questionnaire-intro .questionnaire-privacy{margin-top:18px;color:var(--muted);font-size:13px;line-height:1.5}
.questionnaire-progress{position:sticky;top:82px;z-index:18;margin:16px 0;padding:13px 16px;border-radius:8px}
.questionnaire-progress>div:first-child{display:flex;justify-content:space-between;gap:12px;align-items:center}
.questionnaire-progress b{color:var(--ink);font-size:13px}
.questionnaire-progress span{color:var(--muted);font-size:12px}
.questionnaire-progress-track{height:7px;margin-top:10px;overflow:hidden;border-radius:999px;background:var(--surface-3)}
.questionnaire-progress-track i{display:block;width:20%;height:100%;border-radius:inherit;background:var(--red);transition:width .2s ease}
.questionnaire-form{display:grid;gap:16px}
.questionnaire-section{min-width:0;margin:0;padding:24px;border-radius:8px}
.questionnaire-section legend{display:flex;align-items:center;gap:12px;width:100%;padding:0 0 18px;color:var(--ink)}
.questionnaire-section legend>.questionnaire-section-number{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;font-weight:950}
.questionnaire-section legend b,.questionnaire-section legend small{display:block}
.questionnaire-section legend b{font-size:20px;line-height:1.2}
.questionnaire-section legend small{margin-top:3px;color:var(--muted);font-size:12px;font-weight:650}
.questionnaire-field{position:relative;display:grid;gap:8px;margin-top:16px;color:var(--ink);font-size:14px;font-weight:800}
.questionnaire-field:first-of-type{margin-top:0}
.questionnaire-field>span small{color:var(--muted);font-weight:600}
.questionnaire-field input,.questionnaire-field textarea{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--ink);font:inherit;font-size:16px;font-weight:500;line-height:1.45;outline:0;transition:border-color .18s,box-shadow .18s,background .18s}
.questionnaire-field input{min-height:50px;padding:12px 13px}
.questionnaire-field textarea{min-height:126px;padding:13px;resize:vertical}
.questionnaire-field input:focus,.questionnaire-field textarea:focus{border-color:#e07e83;background:var(--surface);box-shadow:0 0 0 4px var(--focus)}
.questionnaire-field input::placeholder,.questionnaire-field textarea::placeholder{color:var(--muted);opacity:.76}
.questionnaire-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.questionnaire-question{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.questionnaire-section legend+.questionnaire-question{margin-top:0;padding-top:0;border-top:0}
.questionnaire-question>p{margin:0 0 11px;color:var(--ink);font-weight:850;line-height:1.45}
.questionnaire-form em{color:var(--red);font-style:normal}
.questionnaire-options{display:grid;gap:8px}
.questionnaire-options-grid{grid-template-columns:1fr 1fr}
.questionnaire-options label{position:relative;display:flex;align-items:flex-start;gap:11px;min-width:0;padding:13px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--text);cursor:pointer;line-height:1.4;transition:border-color .18s,background .18s,box-shadow .18s}
.questionnaire-options label:hover{border-color:#e3a0a4;background:var(--surface)}
.questionnaire-options label:has(input:checked){border-color:var(--red);background:#fff5f5;box-shadow:0 0 0 3px rgba(215,25,32,.08)}
.questionnaire-options input{width:19px;height:19px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--red)}
.questionnaire-options span{min-width:0;overflow-wrap:anywhere}
.questionnaire-counter{position:absolute;right:10px;bottom:9px;padding:3px 6px;border-radius:5px;background:var(--surface);color:var(--muted);font-size:11px;font-weight:700}
.questionnaire-consent{display:flex;align-items:flex-start;gap:11px;margin-top:20px;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--text);font-size:13px;line-height:1.5;cursor:pointer}
.questionnaire-consent input{width:20px;height:20px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--red)}
.questionnaire-submit{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.questionnaire-submit p{margin:0}
.questionnaire-submit p b,.questionnaire-submit p span{display:block}
.questionnaire-submit p b{color:var(--ink)}
.questionnaire-submit p span{margin-top:5px;color:var(--muted);font-size:12px}
.questionnaire-submit .btn{flex:0 0 auto;min-width:190px;padding:15px 20px}
.questionnaire-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.questionnaire-success{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;margin-top:18px;padding:13px 14px;border:1px solid #78d1ae;border-left:4px solid var(--green);border-radius:8px;background:#eefbf6;box-shadow:0 10px 26px rgba(20,30,55,.07)}
.questionnaire-success[hidden]{display:none!important}
.questionnaire-success>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--green);color:#fff;font-size:22px;font-weight:950}
.questionnaire-success b,.questionnaire-success small{display:block}
.questionnaire-success b{color:#0a6f4e}
.questionnaire-success small{margin-top:3px;color:#315f50}
.questionnaire-success button{border:0;background:transparent;color:#315f50;font-weight:800;cursor:pointer}
.questionnaire-error{min-height:100vh;display:grid;place-items:center;padding:24px}
.questionnaire-error-card{width:min(520px,100%);padding:28px;border:1px solid var(--line);border-top:4px solid var(--red);border-radius:8px;background:var(--surface);box-shadow:var(--shadow);text-align:center}
.questionnaire-error-icon{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 15px;border-radius:50%;background:#fff0f1;color:var(--red);font-size:30px;font-weight:950}
.questionnaire-error-card h1{margin:0;color:var(--ink);font-size:28px}
.questionnaire-error-card p{line-height:1.55}

html[data-theme="dark"] .questionnaire-note{background:#32191e;border-color:#7b3039}
html[data-theme="dark"] .questionnaire-pay-note{background:#123026;border-color:#327b61}
html[data-theme="dark"] .questionnaire-options label:has(input:checked){background:#32191e;border-color:#a9444f}
html[data-theme="dark"] .questionnaire-success{background:#123026;border-color:#327b61}
html[data-theme="dark"] .questionnaire-success b{color:#a8ecd3}
html[data-theme="dark"] .questionnaire-success small,html[data-theme="dark"] .questionnaire-success button{color:#b7d5ca}

@media(max-width:760px){
  .questionnaire-main{padding-top:18px}
  .questionnaire-shell{width:min(100% - 18px,820px)}
  .questionnaire-intro{padding:20px 17px}
  .questionnaire-intro h1{font-size:30px}
  .questionnaire-progress{top:66px;margin:10px 0;padding:11px 12px}
  .questionnaire-progress span{display:none}
  .questionnaire-form{gap:10px}
  .questionnaire-section{padding:18px 14px}
  .questionnaire-section legend{gap:10px;padding-bottom:14px}
  .questionnaire-section legend>.questionnaire-section-number{width:32px;height:32px;flex-basis:32px}
  .questionnaire-section legend b{font-size:18px}
  .questionnaire-grid,.questionnaire-options-grid{grid-template-columns:1fr}
  .questionnaire-options label{padding:12px}
  .questionnaire-submit{display:grid}
  .questionnaire-submit .btn{width:100%;min-width:0;padding:16px}
  .questionnaire-success{grid-template-columns:38px minmax(0,1fr);margin-top:10px}
  .questionnaire-success>span{width:36px;height:36px}
  .questionnaire-success button{grid-column:2;justify-self:start;padding:0}
}

#install{
    padding:40px 0;
}

.app-card{
    padding:36px;
}

.app-header{
    display:flex;
    align-items:center;
    gap:30px;
}

.app-icon{
    width:140px;
    height:140px;
    object-fit:contain;
    border-radius:24px;
    flex-shrink:0;
}

.app-info{
    flex:1;
}

.app-actions{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:30px;
}

.install-card{
    padding:30px;
}


/* VIDEO POPUP */

.video-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    z-index:9999;
    align-items:center;
    justify-content:center;
}

.video-modal.active{
    display:flex;
}

.video-box{
    position:relative;
    width:min(900px,90vw);
    background:#000;
    border-radius:18px;
    overflow:hidden;
}

.video-box video{
    width:100%;
    display:block;
}

.video-close{
    position:absolute;
    top:10px;
    right:10px;
    width:40px;
    height:40px;
    border:0;
    border-radius:50%;
    cursor:pointer;
}


@media(max-width:760px){

    .app-header{
        flex-direction:column;
        text-align:center;
    }

    .app-actions{
        flex-direction:column;
    }

    .app-actions .btn{
        width:100%;
    }

}
/* кнопка Смотреть пример */

.example-btn{

    border:none;
    background:none;
    color:#1976d2;
    font-size:16px;
    cursor:pointer;
    padding:0;
    margin-top:10px;
    text-decoration:underline;

}


.example-btn:hover{

    color:#0d47a1;

}



/* окно картинки */

.image-modal{

    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    z-index:9999;
    align-items:center;
    justify-content:center;
    padding:20px;

}


.image-modal.active{

    display:flex;

}



.image-box{

    position:relative;
    max-width:900px;
    max-height:90vh;

}


.image-box img{

    max-width:100%;
    max-height:90vh;
    border-radius:12px;
    box-shadow:0 20px 60px rgba(0,0,0,.4);

}



.image-close{

    position:absolute;
    right:-15px;
    top:-15px;

    width:40px;
    height:40px;

    border:none;
    border-radius:50%;

    background:#e30613;
    color:white;

    font-size:28px;
    cursor:pointer;

}

.region-help{
    display:block;
    width:100%;
    margin-top:20px;
    padding:14px 18px;

    background:#e30613;
    color:#fff;

    border:none;
    border-radius:8px;

    font-size:16px;
    font-weight:600;

    cursor:pointer;
    transition:.2s;
}

.region-help:hover{
    background:#c90511;
}

@media (max-width:760px){
    .region-help{
        font-size:15px;
        padding:14px;
    }
}

.test-mode-note{
    margin-bottom:18px;
    padding:12px 14px;
    border:1px solid #f5c76b;
    border-radius:14px;
    background:#fff8e8;
    color:#7a4b00;
    font-size:14px;
    font-weight:800;
}

.flow-modal{
    position:fixed;
    inset:0;
    z-index:1000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(10,18,34,.68);
    backdrop-filter:blur(8px);
}

.flow-modal.active{
    display:flex;
}

.flow-box{
    position:relative;
    width:min(520px,100%);
    max-height:90vh;
    overflow:auto;
    padding:28px;
    border-radius:24px;
    background:#fff;
    box-shadow:0 30px 90px rgba(0,0,0,.28);
}

.flow-box h2{
    margin:14px 42px 8px 0;
    color:var(--ink);
}

.flow-close{
    position:absolute;
    top:16px;
    right:16px;
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    background:#f1f3f7;
    color:var(--ink);
    font-size:25px;
    line-height:1;
    cursor:pointer;
}

.test-pill{
    display:inline-flex;
    padding:7px 10px;
    border-radius:999px;
    background:#fff3d6;
    color:#7a4b00;
    font-size:12px;
    font-weight:900;
}

.flow-label{
    display:block;
    margin:20px 0 8px;
    color:var(--ink);
    font-size:14px;
    font-weight:850;
}

.flow-input{
    width:100%;
    padding:14px 15px;
    border:1px solid var(--line);
    border-radius:14px;
    color:var(--ink);
    font:inherit;
    outline:none;
}

.flow-input:focus{
    border-color:#ef8d92;
    box-shadow:0 0 0 4px rgba(215,25,32,.09);
}

.contact-choice{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:20px;
}

.contact-option{
    position:relative;
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:10px;
    align-items:center;
    min-height:88px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#f8fafc;
    cursor:pointer;
    transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease;
}

.contact-option:hover{
    transform:translateY(-1px);
    border-color:#d9a1a5;
}

.contact-option.active{
    border-color:#e95860;
    background:#fff7f7;
    box-shadow:0 0 0 3px rgba(215,25,32,.08);
}

.contact-option input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.contact-option-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#fff;
    color:var(--red);
    box-shadow:0 4px 12px rgba(18,30,53,.08);
    font-size:20px;
    font-weight:950;
}

.contact-option-phone{
    font-size:18px;
}

.contact-option-copy b,
.contact-option-copy small{
    display:block;
}

.contact-option-copy b{
    color:var(--ink);
    font-size:14px;
    line-height:1.25;
}

.contact-option-copy small{
    margin-top:4px;
    color:var(--muted);
    font-size:11px;
    line-height:1.35;
}

.contact-hint{
    margin:8px 2px 0;
    color:var(--muted);
    font-size:12px;
    line-height:1.45;
}

.flow-submit{
    width:100%;
    margin-top:14px;
}

.flow-error{
    min-height:21px;
    margin-top:8px;
    color:var(--bad);
    font-size:13px;
    font-weight:750;
}

@media (max-width:520px){
    .contact-choice{
        grid-template-columns:1fr;
    }
    .contact-option{
        min-height:74px;
    }
}

.upload-zone{
    display:grid;
    gap:7px;
    margin-top:20px;
    padding:24px;
    border:2px dashed #cfd5df;
    border-radius:18px;
    background:#f8fafc;
    text-align:center;
    cursor:pointer;
}

.upload-zone span{
    color:var(--red);
    font-weight:900;
}

.upload-zone small{
    color:var(--muted);
    overflow-wrap:anywhere;
}

.request-status{
    display:none;
    width:100%;
    margin-top:14px;
    padding:13px 15px;
    border-radius:14px;
    font-size:14px;
    font-weight:750;
}

.request-status.pending,
.request-status.approved,
.request-status.rejected{
    display:block;
}

.request-status.pending{
    border:1px solid #b8cef5;
    background:#eff5ff;
    color:#174b9a;
}

.request-status.approved{
    border:1px solid #a9e8d0;
    background:#eefbf6;
    color:#08704c;
}

.request-status.rejected{
    border:1px solid #ffb6bd;
    background:#fff1f2;
    color:#a30f1a;
}

.credential-expiry{
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    gap:12px;
    align-items:center;
    margin:16px 0 14px;
    padding:13px;
    border:1px solid #f4c978;
    border-radius:16px;
    background:#fff8e8;
    color:#744600;
}

.expiry-clock{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:#fff;
    color:#b66a00;
    box-shadow:0 5px 14px rgba(130,82,0,.08);
}

.expiry-clock svg{
    width:25px;
    height:25px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.credential-expiry b,
.credential-expiry span{
    display:block;
}

.credential-expiry b{
    font-size:14px;
}

.credential-expiry span{
    margin-top:4px;
    font-size:13px;
    line-height:1.4;
}

.credential-expiry span strong{
    font-variant-numeric:tabular-nums;
}

.credential-expiry.expired{
    border-color:#ffb6bd;
    background:#fff1f2;
    color:#a30f1a;
}

.credential-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) 46px;
    gap:12px;
    align-items:center;
    margin-top:12px;
    padding:10px 10px 10px 14px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#f8fafc;
}

.credential-value{
    min-width:0;
}

.credential-value small{
    display:block;
    color:var(--muted);
    font-weight:800;
}

.credential-value strong{
    display:block;
    margin-top:5px;
    color:var(--ink);
    overflow-wrap:anywhere;
}

.credential-copy{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid #e1e5ec;
    border-radius:13px;
    background:#fff;
    color:#5d687d;
    box-shadow:0 5px 14px rgba(20,30,55,.06);
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease;
}

.credential-copy:active{
    transform:scale(.92);
}

.credential-copy:focus-visible{
    outline:3px solid rgba(215,25,32,.18);
    outline-offset:2px;
}

.credential-copy svg{
    width:22px;
    height:22px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.credential-copy .check-icon{
    display:none;
}

.credential-copy.copied{
    border-color:#94dfc3;
    background:#eafaf3;
    color:#078258;
}

.credential-copy.copied .copy-icon{
    display:none;
}

.credential-copy.copied .check-icon{
    display:block;
}

.credential-copy.copy-error{
    border-color:#ffb6bd;
    background:#fff1f2;
    color:var(--bad);
}

.credential-copy:disabled{
    border-color:#e4e7ec;
    background:#f1f3f6;
    color:#a1a8b4;
    box-shadow:none;
    cursor:not-allowed;
    transform:none;
}

.account-guide-button{
    width:100%;
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 22px;
    gap:12px;
    align-items:center;
    margin-top:14px;
    padding:12px;
    border:1px solid #ffd0d2;
    border-radius:16px;
    background:#fff5f5;
    color:var(--ink);
    text-align:left;
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}

.account-guide-button:active{
    transform:scale(.98);
}

.account-guide-button:focus-visible{
    outline:3px solid rgba(215,25,32,.18);
    outline-offset:2px;
}

.guide-button-icon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:var(--red);
    color:#fff;
    box-shadow:0 8px 18px rgba(215,25,32,.18);
}

.account-guide-button svg{
    width:23px;
    height:23px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.account-guide-button b,
.account-guide-button span{
    display:block;
}

.account-guide-button span span{
    margin-top:4px;
    color:var(--muted);
    font-size:13px;
    line-height:1.4;
}

.account-guide-button .guide-chevron{
    width:20px;
    height:20px;
    color:#9b1b21;
}

.account-security-note{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:11px;
    align-items:start;
    margin-top:12px;
    padding:13px;
    border:1px solid #ffb6bd;
    border-radius:16px;
    background:#fff1f2;
    color:#8e1219;
}

.security-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#fff;
    color:var(--red);
}

.account-security-note svg{
    width:21px;
    height:21px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.account-security-note b,
.account-security-note span{
    display:block;
}

.account-security-note span{
    margin-top:4px;
    font-size:13px;
    line-height:1.45;
}

.account-guide-modal{
    z-index:1100;
}

.account-guide-box{
    width:min(620px,100%);
}

.guide-steps{
    display:grid;
    gap:10px;
    margin:18px 0;
}

.guide-step{
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    gap:10px;
    align-items:start;
    padding:12px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#f8fafc;
}

.guide-step i{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--red);
    color:#fff;
    font-style:normal;
    font-weight:900;
}

.guide-step b,
.guide-step span{
    display:block;
}

.guide-step span{
    margin-top:3px;
    color:var(--muted);
    font-size:13px;
    line-height:1.45;
}

.guide-figure{
    margin:18px 0 0;
}

.guide-figure img{
    display:block;
    width:100%;
    height:auto;
    border:1px solid var(--line);
    border-radius:18px;
    background:#f8fafc;
}

.guide-figure figcaption{
    margin-top:10px;
    color:#526078;
    font-size:14px;
    line-height:1.55;
}

@media (hover:hover){
    .account-guide-button:hover{
        border-color:#ef9da2;
        box-shadow:0 10px 24px rgba(215,25,32,.08);
        transform:translateY(-1px);
    }
}

.data-warning-button{
    width:100%;
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 22px;
    gap:12px;
    align-items:center;
    margin-top:12px;
    padding:12px;
    border:1px solid #f4c978;
    border-radius:16px;
    background:#fff8e8;
    color:var(--ink);
    text-align:left;
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}

.data-warning-button:active{
    transform:scale(.98);
}

.data-warning-button:focus-visible{
    outline:3px solid rgba(183,106,0,.2);
    outline-offset:2px;
}

.warning-button-icon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:13px;
    background:#b66a00;
    color:#fff;
    box-shadow:0 8px 18px rgba(130,82,0,.16);
}

.data-warning-button svg{
    width:23px;
    height:23px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.data-warning-button b,
.data-warning-button span{
    display:block;
}

.data-warning-button span span{
    margin-top:4px;
    color:#735319;
    font-size:13px;
    line-height:1.4;
}

.data-warning-button .warning-chevron{
    width:20px;
    height:20px;
    color:#9b6507;
}

.data-warning-modal{
    z-index:1120;
}

.data-warning-box{
    width:min(620px,100%);
}

.warning-pill{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:6px 10px;
    border-radius:999px;
    background:#fff0c9;
    color:#795000;
    font-size:12px;
    font-weight:900;
    letter-spacing:.01em;
}

.data-warning-figure{
    margin:18px 0;
}

.data-warning-figure img{
    display:block;
    width:min(100%,360px);
    height:auto;
    margin:0 auto;
    border:1px solid #2b2b2f;
    border-radius:20px;
    background:#111;
    box-shadow:0 12px 28px rgba(18,22,33,.16);
}

.data-warning-figure figcaption{
    margin-top:10px;
    color:#526078;
    font-size:13px;
    line-height:1.5;
    text-align:center;
}

.warning-decision{
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    gap:11px;
    align-items:start;
    margin-top:12px;
    padding:13px;
    border:1px solid;
    border-radius:16px;
}

.warning-decision-icon{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#fff;
}

.warning-decision svg{
    width:22px;
    height:22px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.warning-decision b,
.warning-decision span{
    display:block;
}

.warning-decision span{
    margin-top:4px;
    font-size:13px;
    line-height:1.5;
}

.warning-continue{
    border-color:#9fdec5;
    background:#edf9f3;
    color:#126344;
}

.warning-stop{
    border-color:#ffb6bd;
    background:#fff1f2;
    color:#8e1219;
}

.warning-scope-note{
    margin:14px 0 0;
    padding:12px 13px;
    border-left:4px solid #b66a00;
    border-radius:0 12px 12px 0;
    background:#fff8e8;
    color:#654919;
    font-size:13px;
    line-height:1.55;
}

@media (hover:hover){
    .data-warning-button:hover{
        border-color:#d9a93f;
        box-shadow:0 10px 24px rgba(130,82,0,.09);
        transform:translateY(-1px);
    }
}

@media (hover:hover){
    .credential-copy:hover{
        border-color:#f1a9ad;
        color:var(--red);
        transform:translateY(-1px);
    }
}

.waiting-modal{
    background:rgba(10,18,34,.78);
}

.waiting-box{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:36px 30px 32px;
}

.waiting-box h2{
    margin:18px 0 8px;
}

.waiting-box .muted{
    max-width:400px;
    margin:0;
}

.waiting-spinner{
    width:72px;
    height:72px;
    margin-bottom:20px;
    border:7px solid #f3d3d5;
    border-top-color:var(--red);
    border-radius:50%;
    animation:waiting-spin .85s linear infinite;
    box-shadow:0 10px 30px rgba(215,25,32,.12);
}

.waiting-progress{
    display:flex;
    gap:8px;
    margin-top:22px;
}

.waiting-progress i{
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--red);
    animation:waiting-pulse 1.2s ease-in-out infinite;
}

.waiting-progress i:nth-child(2){
    animation-delay:.15s;
}

.waiting-progress i:nth-child(3){
    animation-delay:.3s;
}

@keyframes waiting-spin{
    to{transform:rotate(360deg)}
}

@keyframes waiting-pulse{
    0%,80%,100%{opacity:.25;transform:scale(.8)}
    40%{opacity:1;transform:scale(1)}
}

@media (prefers-reduced-motion:reduce){
    .waiting-spinner,
    .waiting-progress i{
        animation-duration:2.2s;
    }
}

@media (max-width:600px){
    .flow-box{
        padding:22px 18px;
        border-radius:20px;
    }
}

.video-modal {
    padding: 12px;
    box-sizing: border-box;
}

.video-box {
    position: relative;
    width: min(420px, calc(100vw - 24px));
    background: #000;
    border-radius: 22px;
    overflow: hidden;
}

.instruction-video-frame {
    width: 100%;
    aspect-ratio: 9 / 16;
    background: #000;
}

.instruction-video-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-close {
    z-index: 10;
    top: 12px;
    right: 12px;
}

/* Заметный выбор способа установки и статус рабочих часов */
.install-options{
    margin-top:22px;
    padding:16px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#f8fafc;
    text-align:left;
}

.install-options-title{
    margin:0 0 13px;
    color:var(--ink);
    font-size:15px;
    font-weight:900;
}

.app-store-option{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:11px;
    align-items:start;
    padding:13px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
}

.install-option-number{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    align-self:start;
    line-height:1;
    border-radius:50%;
    background:#eef1f6;
    color:#536078;
    font-weight:900;
}

.app-store-option b,
.app-store-option div>span{
    display:block;
}

.app-store-option .app-store-action-hint{margin-top:8px;color:var(--ink);font-weight:850}

.wrong-app-warning{display:grid;grid-template-columns:34px minmax(0,1fr);gap:11px;align-items:start;margin-top:12px;padding:13px;border:1px solid #efb1b5;border-radius:14px;background:#fff4f4}
.wrong-app-warning>span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;font-weight:950}
.wrong-app-warning b,.wrong-app-warning small{display:block}
.wrong-app-warning b{color:#94131a}
.wrong-app-warning small{margin-top:4px;color:#6b3a3e;line-height:1.45}

.install-choice-box{max-width:620px}
.choice-wrong-app{margin:15px 0;padding:13px;border-left:4px solid var(--red);border-radius:10px;background:#fff3f3}
.choice-wrong-app b,.choice-wrong-app span{display:block}
.choice-wrong-app b{color:#94131a}
.choice-wrong-app span{margin-top:4px;color:#6b3a3e;font-size:13px;line-height:1.45}
.instruction-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.instruction-choice{display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:15px;background:var(--surface-2);color:var(--ink);text-align:left;cursor:pointer}
.instruction-choice:hover,.instruction-choice:focus-visible{border-color:var(--red);background:#fff7f7;outline:0;box-shadow:0 0 0 3px rgba(215,25,32,.08)}
.instruction-choice-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--red);color:#fff;font-size:20px;font-weight:900}
.instruction-choice b,.instruction-choice small{display:block}
.instruction-choice small{margin-top:3px;color:var(--muted);line-height:1.35}
.instruction-choice.completed{border-color:#64cba4;background:#effaf6}
.instruction-choice.completed .instruction-choice-icon{background:var(--green)}
.instruction-choice.completed .instruction-choice-icon:after{content:"✓";position:absolute;display:grid;place-items:center;width:18px;height:18px;margin:26px 0 0 27px;border:2px solid var(--surface);border-radius:50%;background:var(--green);color:#fff;font-size:11px}
.instruction-choice-icon{position:relative}
.instruction-completion-hint{margin:12px 2px 0;color:var(--muted);font-size:13px;font-weight:750;line-height:1.45}
.choice-text-instruction{margin-top:14px;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);color:var(--text)}
.choice-text-instruction ol{margin:9px 0 0;padding-left:22px}
.choice-text-instruction li{margin:7px 0;line-height:1.45}
.choice-example-screenshot{margin:16px 0 0;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.choice-example-screenshot img{display:block;width:100%;max-height:440px;object-fit:contain;background:#eef1f6}
.choice-example-screenshot figcaption{display:block;padding:12px 13px}
.choice-example-screenshot b,.choice-example-screenshot span{display:block}
.choice-example-screenshot b{color:var(--ink)}
.choice-example-screenshot span{margin-top:4px;color:var(--muted);font-size:12px;line-height:1.45}
.choice-request-area{margin-top:15px;padding-top:15px;border-top:1px solid var(--line)}
.choice-request-area p{margin:0 0 10px;color:var(--muted);font-size:13px;line-height:1.45}
.choice-request-area>small{display:block;margin-top:8px;color:var(--muted);text-align:center}
html[data-theme="dark"] .wrong-app-warning,html[data-theme="dark"] .choice-wrong-app{background:#32191e;border-color:#7b3039}
html[data-theme="dark"] .wrong-app-warning b,html[data-theme="dark"] .choice-wrong-app b{color:#ffc4c7}
html[data-theme="dark"] .wrong-app-warning small,html[data-theme="dark"] .choice-wrong-app span{color:#e6b8bb}

.app-store-option b{
    color:var(--ink);
}

.app-store-option div>span{
    margin-top:3px;
    color:var(--muted);
    font-size:13px;
    line-height:1.4;
}

.app-store-option a{
    display:inline-block;
    margin-top:11px;
}

.app-store-badge{
    display:block;
    width:170px;
    max-width:100%;
    height:auto;
    border-radius:7px;
}

.region-option{
    margin-top:14px;
}

.region-option-label{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 10px;
    color:#8e1219;
    font-size:13px;
    font-weight:900;
}

.region-option-label:before,
.region-option-label:after{
    content:"";
    height:1px;
    flex:1;
    background:#f1c9cc;
}

.region-help{
    display:grid;
    grid-template-columns:48px minmax(0,1fr) 22px;
    gap:13px;
    align-items:center;
    width:100%;
    margin:0;
    padding:15px;
    border:1px solid #b80f16;
    border-radius:16px;
    background:linear-gradient(135deg,#d71920,#b80f16);
    color:#fff;
    text-align:left;
    box-shadow:0 14px 28px rgba(184,15,22,.22);
    cursor:pointer;
    touch-action:manipulation;
}

.region-help:hover{
    background:linear-gradient(135deg,#e21c24,#a70c13);
}

.region-help:focus-visible{
    outline:4px solid rgba(215,25,32,.2);
    outline-offset:3px;
}

.region-help-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:rgba(255,255,255,.16);
}

.region-help-icon svg,
.region-help-chevron{
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.region-help-icon svg{
    width:27px;
    height:27px;
}

.region-help-chevron{
    width:21px;
    height:21px;
}

.region-help-copy,
.region-help-copy b,
.region-help-copy>span,
.availability-badge{
    display:block;
}

.region-help-copy b{
    font-size:16px;
    line-height:1.3;
}

.region-help-copy>span{
    margin-top:4px;
    color:rgba(255,255,255,.86);
    font-size:13px;
    line-height:1.4;
}

.availability-badge{
    width:max-content;
    max-width:100%;
    margin-top:9px;
    padding:5px 8px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    color:#fff;
    font-size:11px;
    font-weight:900;
    line-height:1.25;
}

.availability-badge.available:before{
    content:"● ";
    color:#7ef0bd;
}

.availability-badge.unavailable:before{
    content:"● ";
    color:#ffd07a;
}

.region-help.is-unavailable{
    border-color:#5d6576;
    background:linear-gradient(135deg,#626b7c,#485162);
    box-shadow:0 12px 25px rgba(37,45,60,.18);
}

.availability-summary{
    min-height:18px;
    margin:9px 3px 0;
    color:var(--muted);
    font-size:12px;
    line-height:1.45;
}

.availability-summary.unavailable{
    color:#8e5511;
}

.application-limit-note{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:11px;
    align-items:center;
    margin-top:12px;
    padding:12px 13px;
    border:1px solid #f1d28e;
    border-radius:14px;
    background:#fff9eb;
    color:#6f4a05;
}
.application-limit-note[hidden]{display:none!important}

.application-limit-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:#fff;
    color:#b56b00;
}

.application-limit-icon svg{
    width:22px;
    height:22px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.application-limit-note b,
.application-limit-note small{
    display:block;
}

.application-limit-note b{
    font-size:13px;
    line-height:1.4;
}

.application-limit-note small{
    margin-top:3px;
    color:#7d622e;
    font-size:12px;
    line-height:1.45;
}

.application-limit-note a{
    color:#a5161c;
    font-weight:850;
    text-decoration:none;
}

.application-limit-note a:hover{
    text-decoration:underline;
}

.hr-contact{
    color:#a5161c;
    font-weight:850;
    text-decoration:none;
}

.hr-contact:hover{
    text-decoration:underline;
}

.submission-limit-inline{
    margin:12px 0 14px;
    padding:10px 12px;
    border:1px solid #f1d28e;
    border-radius:12px;
    background:#fff9eb;
    color:#76530e;
    font-size:12px;
    font-weight:750;
    line-height:1.5;
}

.new-application-button{
    width:100%;
    margin-top:16px;
}

.new-application-button:disabled{
    cursor:not-allowed;
    opacity:.7;
}

.availability-box{
    text-align:center;
}

.availability-clock{
    width:62px;
    height:62px;
    display:grid;
    place-items:center;
    margin:0 auto 15px;
    border-radius:19px;
    background:#fff4dd;
    color:#b66a00;
}

.availability-clock svg{
    width:34px;
    height:34px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.region-reminder{
    display:none;
}

.region-reminder[hidden]{
    display:none!important;
}

@media(max-width:760px){
    .install-options{
        margin-top:18px;
        padding:12px;
        border-radius:16px;
    }

    .app-store-option{
        padding:12px;
    }
    .instruction-choice-grid{grid-template-columns:1fr}

    .region-help{
        grid-template-columns:44px minmax(0,1fr) 18px;
        gap:10px;
        padding:13px;
        border-radius:14px;
    }

    .region-help-icon{
        width:44px;
        height:44px;
        border-radius:12px;
    }

    .region-help-copy b{
        font-size:15px;
    }

    .region-reminder{
        position:fixed;
        left:10px;
        right:10px;
        bottom:calc(10px + env(safe-area-inset-bottom));
        z-index:9800;
        display:grid;
        grid-template-columns:minmax(0,1fr) 42px;
        gap:8px;
        align-items:stretch;
        padding:8px;
        border:1px solid #f0a8ac;
        border-radius:16px;
        background:rgba(255,255,255,.97);
        box-shadow:0 18px 45px rgba(20,30,55,.24);
        backdrop-filter:blur(14px);
    }

    .region-reminder-main{
        display:block;
        min-width:0;
        padding:5px 8px;
        border:0;
        background:transparent;
        color:var(--ink);
        text-align:left;
    }

    .region-reminder-main span,
    .region-reminder-main b{
        display:block;
    }

    .region-reminder-main span{
        color:var(--muted);
        font-size:12px;
    }

    .region-reminder-main b{
        margin-top:3px;
        color:var(--red);
        font-size:14px;
    }

    .region-reminder-close{
        width:42px;
        border:0;
        border-radius:12px;
        background:#f1f3f7;
        color:#596579;
        font-size:22px;
        cursor:pointer;
    }
}

/* Major install wizard */
.install-page .app-card{border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:0 14px 36px rgba(20,30,55,.08)}
.install-page .app-info>.h1{margin-top:0}
.install-page .grid3{margin-top:18px}
.install-page .install-card{margin-top:18px;border-radius:24px;background:var(--surface)}
.install-page .flow-box{border:1px solid var(--line);background:var(--surface)}
.install-wizard{margin:0 0 24px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--surface-2)}
.install-wizard-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.install-wizard-head span{color:var(--red);font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.05em}
.install-wizard-head b{color:var(--ink);font-size:15px}
.install-wizard-track{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.install-wizard-track>div{position:relative;display:grid;justify-items:center;gap:6px;color:var(--muted);font-size:11px;font-weight:800;text-align:center}
.install-wizard-track>div:not(:last-child):after{content:"";position:absolute;left:calc(50% + 17px);right:calc(-50% + 17px);top:15px;height:2px;background:var(--line)}
.install-wizard-track i{position:relative;z-index:1;width:31px;height:31px;display:grid;place-items:center;border:2px solid var(--line);border-radius:50%;background:var(--surface);color:var(--muted);font-style:normal}
.install-wizard-track .active{color:var(--red)}
.install-wizard-track .active i{border-color:var(--red);background:var(--red);color:#fff;box-shadow:0 0 0 4px rgba(215,25,32,.10)}
.install-wizard-track .complete{color:var(--ink)}
.install-wizard-track .complete i{border-color:var(--green);background:var(--green);color:#fff}
.install-wizard-track .complete:after{background:var(--green)!important}

.screenshot-preview{display:grid;gap:12px;margin-top:16px;padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--surface-2)}
.screenshot-preview[hidden]{display:none!important}
.screenshot-preview img{display:block;width:100%;max-height:360px;object-fit:contain;border:1px solid var(--line);border-radius:14px;background:#0c1119}
.screenshot-preview-meta b,.screenshot-preview-meta span{display:block}
.screenshot-preview-meta b{color:var(--ink)}
.screenshot-preview-meta span{margin-top:5px;color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.screenshot-reselect{width:100%;cursor:pointer}
.upload-progress{margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.upload-progress[hidden]{display:none!important}
.upload-progress>div{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px;font-weight:800}
.upload-progress>i{display:block;height:8px;margin-top:9px;overflow:hidden;border-radius:999px;background:var(--surface-3)}
.upload-progress>i span{display:block;width:0;height:100%;border-radius:inherit;background:var(--red);transition:width .18s ease}

.connection-banner{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:13000;display:grid;grid-template-columns:12px minmax(0,1fr);gap:11px;align-items:center;width:min(430px,calc(100% - 24px));padding:13px 15px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 18px 45px rgba(20,30,55,.25);transform:translateX(-50%)}
.connection-banner[hidden]{display:none!important}
.connection-banner b,.connection-banner span{display:block}
.connection-banner b{color:var(--ink);font-size:14px}.connection-banner div span{margin-top:3px;color:var(--muted);font-size:12px;line-height:1.35}
.connection-dot{width:11px;height:11px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(183,121,31,.14)}
.connection-banner.offline{border-color:#efb0b5}.connection-banner.offline .connection-dot{background:var(--red);box-shadow:0 0 0 4px rgba(215,25,32,.14)}
.connection-banner.online{border-color:#98ddc3}.connection-banner.online .connection-dot{background:var(--green);box-shadow:0 0 0 4px rgba(15,159,110,.14)}

html[data-theme="dark"] #install .app-card,
html[data-theme="dark"] #install .install-card,
html[data-theme="dark"] .install-options,
html[data-theme="dark"] .app-store-option,
html[data-theme="dark"] .flow-box,
html[data-theme="dark"] .video-box,
html[data-theme="dark"] .image-box,
html[data-theme="dark"] .contact-option,
html[data-theme="dark"] .upload-zone,
html[data-theme="dark"] .credential-row,
html[data-theme="dark"] .account-guide-button,
html[data-theme="dark"] .guide-step,
html[data-theme="dark"] .warning-decision,
html[data-theme="dark"] .data-warning-button,
html[data-theme="dark"] .account-security-note{
    background:var(--surface);
    border-color:var(--line);
    color:var(--text);
}
html[data-theme="dark"] .flow-modal,html[data-theme="dark"] .video-modal,html[data-theme="dark"] .image-modal{background:var(--overlay)}
html[data-theme="dark"] .flow-input{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
html[data-theme="dark"] .contact-option.active{background:#32191e;border-color:#8b3943}
html[data-theme="dark"] .contact-option-icon,html[data-theme="dark"] .expiry-clock,html[data-theme="dark"] .security-icon{background:var(--surface-2)}
html[data-theme="dark"] .credential-expiry{background:#312816;border-color:#7c6429;color:#f4d58b}
html[data-theme="dark"] .credential-expiry.expired{background:#32191e;border-color:#7b3039;color:#ffdce0}
html[data-theme="dark"] .credential-copy{background:var(--surface-2)!important;border-color:var(--line)!important;color:var(--text)!important}
html[data-theme="dark"] .credential-row{background:var(--surface-2)!important;border-color:var(--line)!important}
html[data-theme="dark"] .credential-value strong{color:var(--ink)!important}
html[data-theme="dark"] .region-reminder{background:rgba(23,30,41,.97);border-color:var(--line)}
html[data-theme="dark"] .region-reminder-close{background:var(--surface-3);color:var(--text)}
html[data-theme="dark"] .availability-clock{background:#312816;color:#f0ba55}
html[data-theme="dark"] .availability-summary.unavailable{color:#f0ba55}
html[data-theme="dark"] .application-limit-note,
html[data-theme="dark"] .submission-limit-inline{background:#312816;border-color:#7c6429;color:#f4d58b}
html[data-theme="dark"] .application-limit-icon{background:#3b311d;color:#f0ba55}
html[data-theme="dark"] .application-limit-note small{color:#dbc58f}
html[data-theme="dark"] .application-limit-note a{color:#ffd47a}
html[data-theme="dark"] .hr-contact{color:#ffd47a}

@media(max-width:760px){
    .install-page .app-card{padding:18px;border-radius:18px}
    .install-page .app-header{align-items:flex-start}
    .install-page .install-card{padding:18px;border-radius:18px}
    .install-wizard{margin-bottom:18px;padding:13px 8px;border-radius:15px}
    .install-wizard-head{padding:0 5px}
    .install-wizard-track>div{font-size:9px}
    .install-wizard-track i{width:28px;height:28px}
    .install-wizard-track>div:not(:last-child):after{left:calc(50% + 15px);right:calc(-50% + 15px);top:14px}
    .screenshot-preview img{max-height:300px}
}

/* Telegram iOS WebView rendering fixes — stable controls without emoji/native button chrome. */
.theme-toggle{
    -webkit-appearance:none;
    appearance:none;
    min-width:42px;
    min-height:42px;
    max-width:42px;
    max-height:42px;
    padding:0;
    overflow:hidden;
    line-height:1;
}
.theme-toggle [data-theme-icon]{
    width:20px;
    height:20px;
    display:block;
    color:#667085;
    pointer-events:none;
}
.theme-toggle [data-theme-icon] svg{
    width:100%;
    height:100%;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}
html[data-theme="dark"] .theme-toggle [data-theme-icon]{color:#f3bd4f}

html[data-theme="dark"] .barLine{
    background:var(--surface-2)!important;
    border-color:var(--line)!important;
    color:var(--text)!important;
}
html[data-theme="dark"] .barLine>span,
html[data-theme="dark"] .barLine>b{
    color:var(--ink)!important;
}
html[data-theme="dark"] .barLine .miniBar{
    background:var(--surface-3)!important;
}

.app-store-option>.install-option-number{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    max-width:34px!important;
    max-height:34px!important;
    display:grid!important;
    place-items:center!important;
    align-self:start!important;
    padding:0!important;
    line-height:1!important;
    text-align:center!important;
    overflow:hidden;
}

.flow-close,
.video-close,
.image-close{
    -webkit-appearance:none!important;
    appearance:none!important;
    display:grid!important;
    place-items:center!important;
    flex:0 0 auto!important;
    aspect-ratio:1/1!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:50%!important;
    font-size:0!important;
    line-height:0!important;
    text-indent:-9999px;
    cursor:pointer;
    touch-action:manipulation;
}
.flow-close{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    max-width:40px!important;
    max-height:40px!important;
    top:14px!important;
    right:14px!important;
    background:var(--surface-3)!important;
    color:var(--ink)!important;
    z-index:20;
}
.video-close,
.image-close{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    max-width:44px!important;
    max-height:44px!important;
    top:12px!important;
    right:12px!important;
    background:var(--red)!important;
    color:#fff!important;
    z-index:20;
}
.flow-close::before,
.flow-close::after,
.video-close::before,
.video-close::after,
.image-close::before,
.image-close::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:17px;
    height:2.5px;
    border-radius:999px;
    background:currentColor;
    transform:translate(-50%,-50%) rotate(45deg);
}
.flow-close::after,
.video-close::after,
.image-close::after{
    transform:translate(-50%,-50%) rotate(-45deg);
}

@media(max-width:420px){
    .theme-toggle{
        min-width:38px;
        min-height:38px;
        max-width:38px;
        max-height:38px;
    }
    .theme-toggle [data-theme-icon]{width:19px;height:19px}
}