/* ===================================================================
   Сєнялінго — темна тема з помаранчевим акцентом.
   Дизайн навмисно фіксований і не успадковує тему Telegram:
   у світлому варіанті помаранчевий на чорному втратив би контраст.
   =================================================================== */
:root{
  --bg:#0d0e10;
  --card:#17181b;
  --card-2:#1f2126;
  --line:#2a2c32;
  --ink:#f3f4f6;
  --ink-2:#8c8f98;
  --ink-3:#5d616b;

  --or:#ff9500;
  --or-d:#a35f00;
  --or-soft:rgba(255,149,0,.13);

  --ok:#3ddc72;
  --ok-soft:rgba(61,220,114,.13);
  --bad:#ff4d4d;
  --bad-soft:rgba(255,77,77,.13);
  --ice:#4aa8ff;

  --pad:18px;
  --tabh:74px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.45 -apple-system,"Segoe UI",system-ui,Roboto,sans-serif;font-weight:600;
  overscroll-behavior:none;-webkit-user-select:none;user-select:none;
}
.hidden{display:none !important}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;text-align:left}
b{font-weight:800}
.muted{color:var(--ink-2);font-weight:600}
.sm{font-size:12.5px}
.link{color:var(--or);font-size:12.5px;font-weight:700}

.screen{max-width:640px;margin:0 auto;padding:14px var(--pad) 40px;min-height:100%}
.screen.tabbed{padding-bottom:calc(var(--tabh) + 26px + env(safe-area-inset-bottom,0px))}
#lesson,#done,#intro{padding-bottom:160px}

/* ---------------- шапки ---------------- */
.apphead{display:flex;align-items:center;gap:12px;margin-bottom:16px;min-height:40px}
.brand{font-size:21px;font-weight:800;letter-spacing:-.3px}
.brand::first-letter{color:var(--or)}
.htitle{font-size:19px;font-weight:800;margin:0 auto}

/* кнопка вибору мови в шапці: прапор = рідна мова користувача */
.langbtn{display:flex;align-items:center;gap:3px;background:var(--card);border:0;
         border-radius:999px;padding:6px 10px;cursor:pointer;line-height:1}
.langbtn:active{transform:scale(.96)}
.langbtn .lfl{font-size:18px}
.langbtn .lcv{font-size:10px;color:var(--ink-2)}

/* рядок мови у шторці */
.langrow{display:flex;align-items:center;gap:12px;width:100%;background:var(--card);
         border:0;border-radius:14px;padding:14px 16px;margin-bottom:8px;cursor:pointer;
         color:inherit;font:inherit;text-align:left}
.langrow.on{outline:2px solid var(--or)}
.langrow .lfl{font-size:26px}
.langrow b{font-size:16px;font-weight:700}
.langrow small{display:block;font-size:12px;color:var(--ink-2);font-weight:600;margin-top:2px}
.langrow .tick{margin-left:auto;color:var(--or);font-size:18px}
/* Крок вибору мови в онбордингу: великий і контрастний, щоб його не проґавити. */
.langrow.big{padding:20px 18px;margin-bottom:12px;border-radius:18px;outline:1px solid var(--line, rgba(255,255,255,.08))}
.langrow.big .lfl{font-size:34px}
.langrow.big b{font-size:19px}
.langrow.big small{font-size:13px}
.langrow.big.on{outline:2px solid var(--or)}
.streakbox{margin-left:auto;display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.streakbox .fl{font-size:17px}
.streakbox b{font-size:17px;color:var(--or)}
.streakbox small{width:100%;text-align:right;font-size:10.5px;color:var(--ink-2);font-weight:600}
.streakbox.sm small{display:none}

.sect{font-size:14px;font-weight:800;margin:22px 0 10px}

/* ---------------- картки ---------------- */
.card{background:var(--card);border-radius:18px;padding:16px;margin-bottom:12px}
.cardhead{display:flex;align-items:center;justify-content:space-between;font-size:13px;
          font-weight:800;color:var(--ink-2);margin-bottom:12px}
.chip{background:var(--card-2);border-radius:999px;padding:4px 10px;font-size:12px;
      font-weight:800;color:var(--ice)}
.note{font-size:12.5px;color:var(--ink-2);font-weight:600;line-height:1.5;margin:10px 0 0}

/* кільце XP */
.ringcard{display:flex;align-items:center;gap:18px}
.ringwrap{position:relative;width:112px;height:112px;flex:0 0 112px}
.ring{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring .rbg{stroke:var(--card-2)}
.ring .rfg{stroke:var(--or);stroke-dasharray:326.7;stroke-dashoffset:326.7;
           transition:stroke-dashoffset .7s cubic-bezier(.2,.8,.2,1)}
.ringtext{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
          justify-content:center;gap:1px}
.ringtext small{font-size:10px;color:var(--ink-2);letter-spacing:1.5px;font-weight:700}
.ringtext b{font-size:26px;font-weight:800;line-height:1}
.ringtext i{font-size:11px;color:var(--ink-2);font-style:normal;font-weight:700}
.ringinfo{flex:1;min-width:0}
.ringinfo .lvl{font-size:17px;font-weight:800;margin-bottom:2px}
.ringinfo .lvl b{color:var(--or)}
.lbar{height:7px;border-radius:999px;background:var(--card-2);overflow:hidden;margin:10px 0}
.lbar.big{height:9px;margin:0;flex:1}
.lbar i{display:block;height:100%;background:var(--or);border-radius:999px;
        transition:width .5s cubic-bezier(.2,.8,.2,1)}
.next{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);font-weight:700}
.next .star{color:var(--or)}

/* поточний урок */
.lessoncard{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden}
.lessoncard .cl-ic{position:absolute;right:14px;top:10px;font-size:46px;opacity:.13;filter:grayscale(1)}
.lessoncard .cl-title{font-size:22px;font-weight:800;margin:2px 0 3px}
.lessoncard .btn{margin-top:14px}

.btn{display:block;width:100%;text-align:center;border-radius:14px;padding:14px;
     font-size:15px;font-weight:800;transition:transform .06s}
.btn:active:not(:disabled){transform:scale(.985)}
.btn.primary{background:var(--or);color:#1a1200}
.btn.ghost{background:var(--card-2);color:var(--ink)}
.btn.bad{background:var(--bad);color:#fff}
.btn:disabled{background:var(--card-2);color:var(--ink-3);cursor:default}

/* плитки */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.tiles.wide{grid-template-columns:repeat(2,1fr)}
.tile{background:var(--card);border-radius:16px;padding:14px 12px;display:flex;flex-direction:column;
      align-items:flex-start;gap:3px}
.tile:active{transform:scale(.98)}
.tile .ti{color:var(--or);margin-bottom:6px}
.tile b{font-size:13.5px}
.tile small{font-size:11.5px;color:var(--ink-2);font-weight:600}
.ti svg{display:block;width:24px;height:24px}

/* ---------------- ланцюжок днів ---------------- */
.chain{display:flex;margin-bottom:14px}
.day{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.day:not(:first-child)::before{content:"";position:absolute;left:-50%;right:50%;top:15px;
  height:4px;background:var(--card-2);border-radius:2px;z-index:0}
.day.linked::before{background:var(--or)}
.day.linked.ice::before{background:var(--ice)}
.day .dot{position:relative;z-index:1;width:34px;height:34px;border-radius:12px;display:grid;
          place-items:center;font-size:14px;background:var(--card-2);border:2px solid transparent}
.day.done .dot{background:var(--or);color:#1a1200}
.day.frozen .dot{background:var(--ice);color:#00121f}
.day.miss .dot{background:transparent;border:2px dashed var(--line)}
.day.today .dot{background:transparent;border:2px solid var(--or);color:var(--or)}
.day.today.done .dot{background:var(--or);color:#1a1200}
.day .dw{font-size:10px;font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.6px}
.day.today .dw{color:var(--or)}
.goalrow{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.goalrow .met{color:var(--or)}

/* ---------------- шлях навчання ---------------- */
.pillseg{display:flex;gap:6px;background:var(--card);border-radius:999px;padding:5px;margin-bottom:16px}
.pillseg button{flex:1;text-align:center;border-radius:999px;padding:10px;font-size:13.5px;
                font-weight:800;color:var(--ink-2)}
.pillseg button.on{background:var(--or);color:#1a1200}

.blockhead{display:flex;align-items:baseline;justify-content:space-between;padding:16px 2px 12px}
.blockhead .bt{font-size:15px;font-weight:800}
.blockhead .bt.locked{color:var(--ink-3)}
.blockhead .bc{font-size:12.5px;color:var(--ink-2);font-weight:700}
.nodes{display:flex;align-items:flex-start}
.nodewrap{position:relative;flex:0 0 25%;display:flex;flex-direction:column;align-items:center;gap:6px}
.nodewrap:not(:first-child)::before{content:"";position:absolute;left:-50%;right:50%;top:25px;
  border-top:2px dashed var(--line);z-index:0}
.nodewrap.linked::before{border-color:var(--or-d)}
.node{position:relative;z-index:1;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
      font-size:19px;background:var(--card-2);color:var(--ink-3);border:2px solid transparent}
.node.done{background:var(--or);color:#1a1200}
.node.open{background:transparent;border-color:var(--or);color:var(--or)}
.node:active:not(.locked){transform:scale(.94)}
.nodewrap .stars{font-size:9px;color:var(--or);letter-spacing:1.5px;height:11px}
.nodewrap .stars.dim{color:var(--ink-3)}

.emptybox{background:var(--card);border-radius:18px;padding:28px 18px;text-align:center}
.emptybox .eic{font-size:34px;display:block;margin-bottom:10px}
.emptybox p{margin:0;font-size:13.5px;color:var(--ink-2);font-weight:600;line-height:1.5}

/* курси */
.coursecard{background:var(--card);border:2px solid transparent;border-radius:18px;padding:16px;
            margin-bottom:12px;display:flex;align-items:center;gap:14px;width:100%}
.coursecard .cic{width:52px;height:52px;flex:0 0 52px;border-radius:16px;background:var(--card-2);
                 display:grid;place-items:center;font-size:25px}
.coursecard.on{border-color:var(--or)}
.coursecard.on .cic{background:var(--or-soft)}
.coursecard .ct{font-size:16px;font-weight:800}
.coursecard .cs{font-size:12px;color:var(--ink-2);font-weight:600;margin-top:3px}

/* ---------------- урок ---------------- */
.lesshead{display:flex;align-items:center;gap:12px;margin-bottom:14px;min-height:36px}
.lesshead b{margin:0 auto;font-size:16px}
.x{font-size:21px;color:var(--ink-2);line-height:1;padding:2px 6px}
.hearts{color:var(--bad);font-size:14px;font-weight:800;display:flex;align-items:center;gap:4px}
.hearts .hoff{opacity:.22}
.progline{display:flex;align-items:center;gap:10px;margin-bottom:26px}

.ex{min-height:46vh}
.q{font-size:15px;font-weight:700;color:var(--ink-2);text-align:center;margin:0 0 18px}
.bigword{font-size:31px;font-weight:800;text-align:center;margin-bottom:16px;line-height:1.2}
.spk{width:56px;height:56px;border-radius:50%;border:2px solid var(--or);color:var(--or);
     display:grid;place-items:center;font-size:22px;margin:0 auto 26px}
.spk:active{background:var(--or-soft)}
.spk.inline{width:42px;height:42px;flex:0 0 42px;font-size:17px;margin:0}
.wordrow{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:22px}

.opts{display:grid;gap:11px}
.opt{background:var(--card);border:2px solid transparent;border-radius:14px;padding:15px 16px;
     font-size:16px;font-weight:700;text-align:center;transition:.12s}
.opt:active:not(:disabled){transform:scale(.985)}
.opt.sel{border-color:var(--or);color:var(--or);background:var(--or-soft)}
.opt.ok{border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}
.opt.bad{border-color:var(--bad);color:var(--bad);background:var(--bad-soft)}
.opt:disabled{cursor:default}

input.type{width:100%;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:16px;
           font:800 19px/1.3 inherit;color:var(--ink);outline:none;text-align:center;
           -webkit-user-select:text;user-select:text}
input.type:focus{border-color:var(--or)}
input.type::placeholder{color:var(--ink-3);font-weight:600}
.hintrow{margin-top:12px;font-size:12.5px;color:var(--ink-2);font-weight:600;text-align:center;line-height:1.5}

.pairs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pair{background:var(--card);border:2px solid transparent;border-radius:14px;padding:15px 8px;
      font-size:14.5px;font-weight:700;text-align:center}
.pair.sel{border-color:var(--or);color:var(--or);background:var(--or-soft)}
.pair.ok{border-color:var(--ok);color:var(--ok);opacity:.4;pointer-events:none}
.pair.bad{border-color:var(--bad);color:var(--bad)}

/* нижня панель дії */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:12;background:var(--bg);
      padding:12px var(--pad) calc(16px + env(safe-area-inset-bottom,0px));
      max-width:640px;margin:0 auto}
.dock.silent{display:none}
.dock.ok{background:var(--ok-soft)}
.dock.bad{background:var(--bad-soft)}
/* «майже» — між зарахованим і помилкою */
.dock.warn{background:var(--or-soft)}
body.main-btn #btn-check{display:none}
.fbmsg{display:flex;gap:10px;align-items:flex-start;font-size:15px;font-weight:800;margin-bottom:12px}
.dock.ok .fbmsg{color:var(--ok)} .dock.bad .fbmsg{color:var(--bad)}
.dock.warn .fbmsg{color:var(--or)}
.fbmsg .sub{display:block;font-size:13px;font-weight:600;margin-top:3px;color:var(--ink-2)}

/* ---------------- підсумок ---------------- */
.doneview{min-height:68vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
          text-align:center}
.bigemo{font-size:62px}
.doneview h2{font-size:22px;margin:8px 0 22px;font-weight:800;line-height:1.3}
.cards{display:flex;gap:10px;width:100%}
.card.mini{flex:1;margin:0;padding:14px 8px;text-align:center}
.card.mini small{display:block;font-size:11px;color:var(--ink-2);font-weight:700;margin-bottom:5px}
.card.mini b{font-size:19px;color:var(--or)}

/* ---------------- прогрес ---------------- */
.wchart{display:flex;align-items:flex-end;gap:8px;height:118px}
.wcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%}
.wbarwrap{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center}
.wbar{width:7px;border-radius:999px;background:var(--or);min-height:5px;
      transition:height .5s cubic-bezier(.2,.8,.2,1)}
.wbar.empty{background:var(--card-2)}
.wbar.today{box-shadow:0 0 0 3px var(--or-soft)}
.wcol .wl{font-size:10.5px;color:var(--ink-3);font-weight:700}
.wcol.met .wl{color:var(--or)}

.statrow{display:flex;gap:10px}
.statrow .card.stat{flex:1;margin-bottom:12px}
.card.stat .ti{color:var(--or);display:block;margin-bottom:8px}
.card.stat b{display:block;font-size:22px}
.card.stat small{font-size:11.5px;color:var(--ink-2);font-weight:600}

.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.badge{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.badge .bc{width:50px;height:50px;border-radius:50%;border:2px solid var(--or);color:var(--or);
           display:grid;place-items:center;font-size:16px;font-weight:800}
.badge.off .bc{border-color:var(--line);color:var(--ink-3)}
.badge small{font-size:10.5px;color:var(--ink-2);font-weight:700;line-height:1.25}

.lrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.lrow:last-child{border-bottom:0}
.lrow .pos{width:26px;font-size:15px;font-weight:800;color:var(--ink-2)}
.lrow .nm{flex:1;font-weight:700;font-size:14px}
.lrow .sc{font-size:12.5px;color:var(--ink-2);font-weight:700}
.lrow.me .nm{color:var(--or)}

/* ---------------- профіль ---------------- */
.prof{display:flex;align-items:center;gap:14px}
.avatar{width:54px;height:54px;flex:0 0 54px;border-radius:50%;border:2px solid var(--or);
        color:var(--or);display:grid;place-items:center}
.pf-main{flex:1;min-width:0}
.pf-main b{display:block;font-size:17px}
.lvlbadge{text-align:center}
.lvlbadge small{display:block;font-size:10px;color:var(--ink-2);font-weight:700;margin-bottom:4px}
.lvlbadge b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
            border:2px solid var(--or);color:var(--or);font-size:16px}

.seg{display:flex;gap:8px}
.seg button{flex:1;text-align:center;background:var(--card);border-radius:13px;padding:12px 6px;
            font-size:13.5px;font-weight:800;color:var(--ink-2)}
.seg button.on{background:var(--or);color:#1a1200}
.seg button:active{transform:scale(.98)}

.choices{display:flex;flex-direction:column;gap:10px}
.choices.two{flex-direction:row}
.choices.two .choice{flex:1;flex-direction:column;text-align:center;gap:7px}
.choice{display:flex;align-items:center;gap:13px;background:var(--card);border:2px solid transparent;
        border-radius:16px;padding:14px}
.choice:active{transform:scale(.985)}
.choice.on{border-color:var(--or);background:var(--or-soft)}
.choice .cic{font-size:25px;flex:0 0 auto}
.choice .ct{display:block;font-size:15.5px;font-weight:800}
.choice.on .ct{color:var(--or)}
.choice .cs{display:block;font-size:12.5px;color:var(--ink-2);font-weight:600;margin-top:3px;line-height:1.35}

.search{width:100%;background:var(--card);border:2px solid transparent;border-radius:14px;
        padding:13px 15px;font:700 14px inherit;color:var(--ink);outline:none;margin-bottom:12px;
        -webkit-user-select:text;user-select:text}
.search:focus{border-color:var(--or)}
.search::placeholder{color:var(--ink-3)}
.grp{font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-3);
     font-weight:800;margin:18px 0 8px}
.row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.row .ua{flex:1;font-weight:600;font-size:14px}
.row .de{font-weight:800;color:var(--or);font-size:14px}
.row .sp{font-size:15px;color:var(--ink-2);padding:2px 6px}
.dots{display:flex;gap:3px;width:30px;justify-content:flex-end}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--card-2)}
.dots i.on{background:var(--or)}

/* ---- вкладка героя ----
   Слідуємо переданому референсу: чорне тло, помаранчевий обідок навколо
   персонажа, картки з тонкою рамкою. Кольори беремо з наявних змінних —
   палітра застосунку вже така сама, вигадувати другу не треба. */
.herostage{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 0 18px;
}
.heroring{
  position:relative; width:190px; height:190px; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 45%, rgba(255,149,0,.20), transparent 62%);
}
.heroring::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--or); opacity:.55;
  box-shadow:0 0 26px rgba(255,149,0,.35), inset 0 0 22px rgba(255,149,0,.14);
}
.heroring img{
  max-width:82%; max-height:82%; object-fit:contain; position:relative; z-index:1;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.55));
}
.heroring.empty::after{ border-style:dashed; opacity:.35; }
.heroname{ font-size:19px; font-weight:700; }
.herosub{ font-size:13px; color:var(--ink-2); }

.skingrid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:10px; padding-bottom:8px;
}
.skincard{
  position:relative; border:1px solid var(--line); border-radius:14px;
  background:var(--card); padding:8px 8px 10px; text-align:center;
  display:flex; flex-direction:column; gap:5px; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.skincard .pic{
  height:86px; display:grid; place-items:center; overflow:hidden;
}
.skincard .pic img{ max-height:100%; max-width:100%; object-fit:contain; }
.skincard .pic.nopic{ font-size:42px; opacity:.30; }
.skincard .nm{ font-size:12px; font-weight:600; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.skincard .ph{ font-size:10.5px; color:var(--ink-3); }

/* Замкнений: сірий і притемнений, щоб було видно ЩО саме відкриється. */
.skincard.locked .pic img{ filter:grayscale(1) brightness(.42); }
.skincard.locked .nm{ color:var(--ink-2); }
.skincard .lock{
  position:absolute; top:7px; right:8px; font-size:12px; opacity:.75;
}
.skincard .bar{ height:4px; border-radius:3px; background:rgba(255,255,255,.10); overflow:hidden; }
.skincard .bar i{ display:block; height:100%; background:var(--or); }

.skincard.owned{ border-color:rgba(255,149,0,.35); }
.skincard.on{ border-color:var(--or); box-shadow:0 0 0 1px var(--or), 0 0 18px rgba(255,149,0,.20); }
.skincard .tick{ position:absolute; top:7px; right:8px; color:var(--or); font-size:13px; }
.skincard .cost{ font-size:11px; font-weight:700; color:var(--or); }

.rare-rare  .nm{ color:#7fd0ff; }
.rare-epic  .nm{ color:#c99bff; }
.rare-legend .nm{ color:#ffd34d; }

/* ---- вкладка «Друзі» ---- */
.frhero{ display:flex; flex-direction:column; gap:12px; }
.frtitle{ font-size:19px; font-weight:700; line-height:1.25; }
.frsub{ font-size:14px; opacity:.72; }
.frlink{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:14px; word-break:break-all; padding:11px 13px;
  background:var(--card2,rgba(127,127,127,.12)); border-radius:10px;
}
.frbtns{ display:flex; gap:8px; }
.frbtns .btn{ flex:1; }
.frshare{ display:flex; gap:8px; flex-wrap:wrap; }
.frshare a{
  flex:1; min-width:96px; text-align:center; text-decoration:none;
  padding:9px 10px; border-radius:10px; font-size:13px; font-weight:600;
  background:var(--card2,rgba(127,127,127,.12)); color:inherit;
}
.frstats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:10px; }
.frstat{ text-align:center; padding:10px 6px; border-radius:12px; background:var(--card2,rgba(127,127,127,.10)); }
.frstat b{ display:block; font-size:20px; line-height:1.15; }
.frstat span{ font-size:11.5px; opacity:.66; }
.frbar{ height:10px; border-radius:6px; background:rgba(127,127,127,.22); overflow:hidden; margin:9px 0 6px; }
.frbar i{ display:block; height:100%; background:var(--accent,#3b82f6); border-radius:6px; }
.frms{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid rgba(127,127,127,.16); }
.frms:last-child{ border-bottom:0; }
.frms .n{ flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
          font-size:12.5px; font-weight:700; background:rgba(127,127,127,.16); }
.frms.done .n{ background:var(--ok,#22c55e); color:#fff; }
.frms .tx{ flex:1; min-width:0; font-size:14px; }
.frms .tx small{ display:block; opacity:.6; font-size:11.5px; }
.frfriend{ display:flex; align-items:center; gap:9px; padding:8px 0; font-size:14px;
           border-bottom:1px solid rgba(127,127,127,.14); }
.frfriend:last-child{ border-bottom:0; }
.frfriend .st{ margin-left:auto; font-size:11.5px; padding:2px 8px; border-radius:20px;
               background:rgba(127,127,127,.16); }
.frfriend .st.q{ background:var(--ok,#22c55e); color:#fff; }
.refcfg{ display:flex; flex-direction:column; gap:8px; }
.refcfg label{ display:flex; align-items:center; gap:10px; font-size:13.5px; }
.refcfg input{ margin-left:auto; width:110px; padding:7px 9px; border-radius:8px;
  border:1px solid rgba(127,127,127,.3); background:transparent; color:inherit;
  font-variant-numeric:tabular-nums; text-align:right; }

.vrow{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.vrow .vn{flex:1;font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vrow .vg{font-size:11.5px;color:var(--ink-3);font-weight:700}
.vrow .vplay{font-size:15px;color:var(--ink-2);padding:2px 6px}
.vrow .vpick{background:var(--card-2);border-radius:10px;padding:6px 10px;font-size:11.5px;
             font-weight:800;color:var(--ink-2)}
.vrow.on .vpick{background:var(--or);color:#1a1200}

.foot-note{text-align:center;color:var(--ink-3);font-size:11.5px;font-weight:600;margin:26px 0 0}
.foot-note button{text-decoration:underline;color:inherit;font-size:11.5px}

/* ---------------- перший запуск ---------------- */
.intro{min-height:72vh;display:flex;flex-direction:column;justify-content:center}
.ilogo{font-size:52px;text-align:center;margin-bottom:12px}
.ih{font-size:22px;margin:0 0 8px;text-align:center;font-weight:800}
.isub{color:var(--ink-2);font-size:13.5px;font-weight:600;margin:0 0 24px;text-align:center;line-height:1.5}

/* ---------------- вкладки ---------------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;
        background:#111214;border-top:1px solid var(--line);
        padding:9px 4px calc(8px + env(safe-area-inset-bottom,0px))}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
               color:var(--ink-3);font-size:10.5px;font-weight:700;padding:2px;text-align:center}
.tabbar button.on{color:var(--or)}
.tabbar svg{width:23px;height:23px;display:block}
body.no-tabs .tabbar{display:none}

/* ---------------- дрібниці ---------------- */
.pop{position:fixed;left:50%;top:16px;transform:translateX(-50%);background:var(--card-2);color:var(--ink);
     padding:11px 17px;border-radius:13px;font-size:13.5px;font-weight:800;z-index:30;
     box-shadow:0 8px 26px rgba(0,0,0,.5);animation:drop .3s}
@keyframes drop{from{opacity:0;transform:translate(-50%,-14px)}}
.shake{animation:sh .4s}
@keyframes sh{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}

/* контурний замок замість кольорового емодзі */
.lk{display:inline-grid;place-items:center}
.lk svg{width:20px;height:20px}
.blockhead .lk svg{width:15px;height:15px}
.node .lk svg{width:21px;height:21px}

/* ---------------- магазин ---------------- */
.shopgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pcard{position:relative;background:var(--card);border:2px solid transparent;border-radius:14px;
       padding:11px 5px 9px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.pcard:active{transform:scale(.96)}
.pcard .pemo{font-size:25px;line-height:1.1}
.pcard b{font-size:10px;font-weight:800;line-height:1.15;hyphens:auto;overflow-wrap:anywhere}
.pcard small{font-size:9.5px;color:var(--ink-2);font-weight:700}
.pcard.owned{border-color:var(--ok)}
.pcard.owned small{color:var(--ok)}
.pcard .pbadge{position:absolute;top:4px;right:5px;font-size:10px;color:var(--ok);font-weight:800}
.chip.ok{color:var(--ok)}
.coursecard.locked{opacity:.75}
.coursecard.locked .cic{color:var(--ink-3)}
.coursecard .price{font-size:12.5px;font-weight:800;color:var(--or);white-space:nowrap}

/* ---------------- нижній аркуш ---------------- */
.sheetbg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:20}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:21;background:var(--card);
       border-radius:20px 20px 0 0;padding:16px var(--pad) calc(22px + env(safe-area-inset-bottom,0px));
       max-width:640px;margin:0 auto;max-height:76vh;overflow:auto;animation:up .22s}
@keyframes up{from{transform:translateY(30px);opacity:0}}
.sheethead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.sheethead b{font-size:17px}
.sheetrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.sheetrow:last-of-type{border-bottom:0}
.sheetrow b{flex:1;font-weight:700}
.sheetrow small{color:var(--ink-3);font-weight:700;font-size:12px}

/* шість пунктів у панелі — трохи дрібніший підпис */
.tabbar button{font-size:10px}

/* ---------------- згоди й документи ---------------- */
.check{display:flex;gap:10px;align-items:flex-start;background:var(--card);border-radius:14px;
       padding:13px;margin-bottom:9px;font-size:13px;font-weight:600;line-height:1.45;color:var(--ink-2)}
.check input{width:20px;height:20px;flex:0 0 20px;margin:1px 0 0;accent-color:var(--or)}
.check b{color:var(--ink)}
.check i{font-style:normal;color:var(--ink-3)}

.doclinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.doclink{background:var(--card-2);border-radius:10px;padding:7px 11px;font-size:12px;
         font-weight:800;color:var(--or)}
.doclink:active{transform:scale(.97)}

#legal{padding-bottom:40px}
.legalhead{font-size:14.5px;font-weight:800;color:var(--ink);margin:18px 0 6px}
.legalp{font-size:13.5px;font-weight:600;color:var(--ink-2);line-height:1.6;margin:0 0 10px}

/* строк доступу в checkout */
.sheet .seg{margin-bottom:12px}
.sheet .seg button{line-height:1.3;padding:10px 4px}
.sheet .seg button small{font-size:11px;opacity:.85}

/* реквізити виконавця — єдине місце, де текст можна виділити й скопіювати */
.merchrow{display:flex;gap:14px;justify-content:space-between;align-items:baseline;
          padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.merchrow:last-child{border-bottom:0;padding-bottom:0}
.merchrow span{color:var(--ink-2);font-weight:600;flex:0 0 auto}
.merchrow b{font-weight:700;text-align:right;word-break:break-word;
            -webkit-user-select:text;user-select:text}

/* ============ складання речень і вимова ============ */

/* Речення-підказка: більше за звичайний текст, але менше за .bigword —
   у нього кілька слів, і воно має вміщатися в два рядки на вузькому екрані. */
.prompt{font-size:21px;font-weight:800;text-align:center;line-height:1.3;margin-bottom:16px}

/* Поле відповіді тримає висоту навіть порожнім, інакше банк стрибає вгору
   на першому ж дотику. Дві лінійки — щоб було видно, куди класти слова. */
.answerbox{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;
           min-height:104px;padding:12px 6px;margin-bottom:18px;
           border-top:2px solid var(--line);border-bottom:2px solid var(--line)}
.bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}

.chip{background:var(--card);border:2px solid var(--line);border-bottom-width:4px;
      border-radius:12px;padding:10px 14px;font-size:15.5px;font-weight:700;
      transition:transform .06s}
.chip:active:not(:disabled){transform:translateY(1px)}
.chip.bad{border-color:var(--bad);color:var(--bad)}
/* Використана фішка не зникає, а стає невидимою: банк лишається на місці. */
.chip.used{visibility:hidden}

.saysub{text-align:center;font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:20px}
.saystatus{margin-top:14px;font-size:13.5px;font-weight:700;color:var(--ink-2);
           text-align:center;line-height:1.5;min-height:20px}
.saystatus .heard{display:block;font-size:12.5px;font-weight:600;color:var(--ink-3);margin-top:4px}

.mic{margin-top:12px}
.mic.on{background:var(--bad);color:#fff;animation:micpulse 1.1s ease-in-out infinite}
@keyframes micpulse{0%,100%{opacity:1}50%{opacity:.62}}

/* ============ словник картками ============ */
.dcard{display:flex;align-items:center;gap:14px;background:var(--card);
       border-radius:18px;padding:12px 14px;margin-bottom:10px}
/* Плитка зі значком тримає однакову висоту всіх карток — інакше довгий
   переклад у два рядки робив би список рваним. */
.dic{flex:0 0 62px;width:62px;height:62px;border-radius:15px;background:var(--card-2);
     display:grid;place-items:center;font-size:33px;line-height:1}
.dtext{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dde{font-size:17.5px;font-weight:800;line-height:1.2;word-break:break-word}
.dua{font-size:14px;font-weight:600;color:var(--ink-2);line-height:1.25}
.ddots{display:flex;gap:4px;margin-top:5px}
.ddots i{width:5px;height:5px;border-radius:50%;background:var(--card-2)}
.ddots i.on{background:var(--or)}
.dsp{flex:0 0 auto;font-size:19px;color:var(--ink-2);padding:10px 6px;align-self:center}
.dsp:active{color:var(--or)}

/* Картка-підпис у кінці списку — як у макеті. */
.dnote{display:flex;align-items:flex-start;gap:14px;background:var(--card);
       border-radius:18px;padding:16px;margin:14px 0 4px}
.dnote .dnic{font-size:26px;line-height:1.1}
.dnote b{display:block;font-size:16px;font-weight:800;margin-bottom:5px}
.dnote small{font-size:13.5px;font-weight:600;color:var(--ink-2);line-height:1.5}

/* ============ редактор тарифів (адмін) ============ */
.pricerow{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pricerow input{background:var(--card-2);border:2px solid transparent;border-radius:10px;
                padding:9px 10px;font:700 13.5px inherit;color:var(--ink);outline:none;
                -webkit-user-select:text;user-select:text;min-width:0}
.pricerow input:focus{border-color:var(--or)}
.pricerow .pname{flex:1 1 auto}
.pricerow .pdays,.pricerow .pprice{flex:0 0 66px;width:66px;text-align:right}
.pricerow .punit{font-size:12.5px;font-weight:700;color:var(--ink-2);flex:0 0 auto}

/* ============ розділ курсу (як глава в методичці) ============ */
.secthead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
          margin:26px 0 4px;padding:12px 14px;background:var(--card);border-radius:14px;
          border-left:4px solid var(--or)}
.secthead span{font-size:15.5px;font-weight:800}
.secthead small{font-size:12px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.secthead + .blockhead{padding-top:10px}

/* ============ ціна зі знижкою ============ */
.pnow{font-weight:800;color:var(--or)}
.pwas{text-decoration:line-through;color:var(--ink-3);margin-left:5px;font-weight:600}
.pcut{display:inline-block;margin-left:5px;padding:1px 5px;border-radius:6px;
      background:var(--bad);color:#fff;font-size:10.5px;font-weight:800;vertical-align:1px}
.seg small s{color:var(--ink-3);font-weight:600;margin-left:4px}

/* ============ пристрої ============ */
.devrow{display:flex;align-items:center;gap:12px;justify-content:space-between;
        padding:11px 0;border-bottom:1px solid var(--line)}
.devrow:last-of-type{border-bottom:0}
.devrow.me{color:var(--or)}
.dvn{display:flex;flex-direction:column;gap:2px;min-width:0}
.dvn b{font-size:14px;font-weight:800}
.dvn small{font-size:12px;color:var(--ink-2);font-weight:600}
.btn.small{width:auto;padding:8px 12px;font-size:12.5px;border-radius:10px;flex:0 0 auto}

/* ============ каталог магазину ============ */
.catcard{display:flex;align-items:center;gap:14px;width:100%;background:var(--card);
         border-radius:18px;padding:14px;margin-bottom:10px}
.catcard:active{transform:scale(.99)}

/* Головна магазину: три великі входи замість суцільного списку */
.shopbig{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;
         background:var(--card);border:0;border-radius:20px;padding:18px;margin-bottom:12px;
         color:inherit;font:inherit;text-align:left;cursor:pointer}
.shopbig:active{transform:scale(.99)}
.shopbig .sbic{font-size:34px;line-height:1}
.shopbig .sbt{font-size:19px;font-weight:800}
.shopbig .sbs{font-size:13.5px;color:var(--ink-2);font-weight:600}
.shopbig .sbm{font-size:12px;color:var(--or);font-weight:700}
.shopbig .sbcta{margin-top:8px;width:100%;text-align:center}
.catic{flex:0 0 52px;width:52px;height:52px;border-radius:14px;background:var(--card-2);
       display:grid;place-items:center;font-size:26px}
.catmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.catmain b{font-size:15.5px;font-weight:800}
.catmain small{font-size:12.5px;color:var(--ink-2);font-weight:600}
.catmain .catn{color:var(--ink-3);font-size:11.5px}

/* заняття з викладачем */
.svcrow{display:flex;align-items:center;gap:13px;width:100%;background:var(--card);
        border-radius:16px;padding:12px 14px;margin-bottom:9px}
.svcrow:active{transform:scale(.99)}
.svcrow.soon{opacity:.6}
.svcic{flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:var(--card-2);
       display:grid;place-items:center;font-size:21px}
.svcmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.svcmain b{font-size:14.5px;font-weight:800}
.svcmain small{font-size:12px;color:var(--ink-2);font-weight:600}
.svcprice{flex:0 0 auto;font-size:13px;font-weight:800;color:var(--or);text-align:right}
.pcard .pn{display:block;font-size:10.5px;color:var(--ink-3);font-weight:600;margin-top:2px}

/* ============ вибір курсів у пакет ============ */
.packlist{display:flex;flex-direction:column;gap:8px;margin:6px 0 16px;
          max-height:46vh;overflow-y:auto}
.packrow{display:flex;align-items:center;gap:12px;background:var(--card-2);
         border:2px solid transparent;border-radius:14px;padding:10px 12px}
.packrow.on{border-color:var(--or);background:var(--or-soft)}
.pkemo{flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:var(--card);
       display:grid;place-items:center;font-size:18px}
.pkmain{flex:1;min-width:0;display:flex;flex-direction:column}
.pkmain b{font-size:14px;font-weight:800}
.pkmain small{font-size:11.5px;color:var(--ink-2);font-weight:600}
.pkmark{flex:0 0 auto;font-size:17px;font-weight:800;color:var(--ink-3)}
.packrow.on .pkmark{color:var(--or)}

/* Розпізнавання триває на сервері й займає секунди — людина має бачити,
   що застосунок працює, а не думати, що кнопка не спрацювала. */
.mic.wait{background:var(--card-2);color:var(--ink-2);cursor:progress}
.mic:disabled{opacity:.85}
.mic.wait::after{content:'';display:inline-block;width:12px;height:12px;margin-left:8px;
  vertical-align:-1px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:micspin .7s linear infinite}
@keyframes micspin{to{transform:rotate(360deg)}}

/* ==================== ЯК КОРИСТУВАТИСЯ ====================
   Довідник читають, а не гортають, тому рядки просторіші за звичайні
   картки: значок ліворуч, назва й пояснення праворуч. */
.gd-lead{font-size:13.5px;color:var(--ink-2);font-weight:600;line-height:1.55;margin:2px 0 4px}

.gd-card{padding:6px 16px}
.gd-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.gd-row:last-child{border-bottom:0}
.gd-ic{flex:0 0 34px;height:34px;border-radius:11px;background:var(--card-2);
  display:grid;place-items:center;color:var(--or)}
.gd-ic svg{width:19px;height:19px}
.gd-txt{display:block;min-width:0}
.gd-txt b{display:block;font-size:14px;margin-bottom:3px}
.gd-txt small{display:block;font-size:12.5px;color:var(--ink-2);font-weight:600;line-height:1.5}

/* Вхід до інструкції в профілі — картка-кнопка, а не рядок серед налаштувань:
   людина шукає її, коли розгубилася, і має побачити одразу. */
.gd-open{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  border:1px solid var(--line);cursor:pointer}
.gd-open-ic{flex:0 0 34px;height:34px;border-radius:11px;background:var(--or-soft);
  display:grid;place-items:center;font-size:16px}
.gd-open-txt{flex:1;min-width:0}
.gd-open-txt b{display:block;font-size:14.5px}
.gd-open-txt small{display:block;font-size:12.5px;color:var(--ink-2);font-weight:600;margin-top:2px}
.gd-open-arr{color:var(--ink-3);font-size:20px;line-height:1}

/* ==================== ЕКСКУРСІЯ ІНТЕРФЕЙСОМ ====================
   Затемнення робимо не окремим шаром, а величезною тінню навколо «вікна»:
   так підсвічений елемент лишається справжнім, з власними кольорами, і його
   не доводиться перемальовувати копією. */
#tour{position:fixed;inset:0;z-index:60}
#tour.nohole{background:rgba(0,0,0,.74)}

#tour-hole{position:fixed;border-radius:16px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(0,0,0,.74), 0 0 0 2px var(--or) inset;
  transition:left .24s ease, top .24s ease, width .24s ease, height .24s ease}

#tour-tip{position:fixed;left:14px;right:14px;background:var(--card-2);
  border:1px solid var(--line);border-radius:18px;padding:16px 16px 12px;
  box-shadow:0 20px 50px rgba(0,0,0,.55);transition:top .24s ease}
#tour-tip.mid{top:50%!important;transform:translateY(-50%)}
#tour-tip b{display:block;font-size:15.5px;margin-bottom:6px}
#tour-tip p{margin:0;font-size:13.5px;color:var(--ink-2);font-weight:600;line-height:1.55}

.tour-foot{display:flex;align-items:center;gap:10px;margin-top:14px}
#tour-n{font-size:12.5px;color:var(--ink-3);font-weight:700;margin-right:auto}
.tour-foot button{font-size:14px;font-weight:800;padding:9px 16px;border-radius:12px;
  color:var(--ink-2);cursor:pointer}
.tour-foot button.prim{background:var(--or);color:#131313}

/* Повтор екскурсії — наприкінці довідника: спершу читають, потім вирішують. */
.gd-again{width:100%;margin-top:6px}

/* Позначка для чисел, яких немає серед клавіш-емодзі: 11 і далі.
   Свідомо повторює їхній вигляд — синій квадрат зі світлою цифрою, —
   щоб у списку 11 не вибивалося з ряду поруч із 9 та 10. */
.numic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:11px;
  background:#4176c4;color:#fff;font-size:21px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.numic.wide{font-size:17px;letter-spacing:-1px}

/* ==================== ЖИВІ ДІАЛОГИ ====================
   Розмова читається згори вниз, тому репліки — бульбашками: чужа ліворуч,
   своя праворуч. Кольори й заокруглення ті самі, що в решті застосунку. */

/* --- перелік --- */
.dlgcard{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  border:1px solid var(--line);cursor:pointer;padding:14px 16px}
.dlgic{flex:0 0 40px;height:40px;border-radius:12px;background:var(--card-2);
  display:grid;place-items:center;font-size:21px}
.dlgtx{flex:1;min-width:0}
.dlgtx b{display:block;font-size:15px}
.dlgtx small{display:block;font-size:12.5px;color:var(--ink-2);font-weight:600;margin-top:2px}
.dlglvl{flex:0 0 26px;height:26px;border-radius:9px;display:grid;place-items:center;
  font-size:13px;font-weight:800;background:var(--card-2);color:var(--ink-2)}
.dlglvl.l1{color:var(--ok);background:var(--ok-soft)}
.dlglvl.l2{color:var(--or);background:var(--or-soft)}
.dlglvl.l3{color:var(--bad);background:var(--bad-soft)}

/* --- картка ситуації --- */
.dlgscene{text-align:center}
.dlgsceneic{font-size:44px;line-height:1;margin-bottom:8px}
.dlgscenetx{margin:0 0 14px;font-size:14.5px;line-height:1.55}
.dlgroles{display:flex;gap:8px;text-align:left}
.dlgroles span{flex:1;background:var(--card-2);border-radius:12px;padding:9px 11px}
.dlgroles small{display:block;font-size:11px;color:var(--ink-3);font-weight:700}
.dlgroles b{display:block;font-size:13.5px;margin-top:2px}

/* --- розмова --- */
.dlgfeed{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.dlgbub{max-width:86%;padding:11px 14px;border-radius:16px;font-size:14.5px;line-height:1.5}
.dlgbub.them{align-self:flex-start;background:var(--card);border-bottom-left-radius:5px}
.dlgbub.me{align-self:flex-end;background:var(--ok-soft);color:var(--ok);
  border-bottom-right-radius:5px;font-weight:700}
.dlgbub.me.bad{background:var(--bad-soft);color:var(--bad)}
.dlgbub.now{position:relative;background:var(--card-2);max-width:100%;padding:14px 46px 14px 14px}
.dlgwho{display:block;font-size:11.5px;color:var(--ink-3);font-weight:700;margin-bottom:4px}
.dlgde{display:block;font-size:17px;font-weight:800;line-height:1.35}
.dlgua{display:block;font-size:13.5px;color:var(--ink-2);font-weight:600;margin-top:6px}
.dlgsay{position:absolute;right:10px;top:12px;font-size:19px;padding:4px}

.dlgtools{display:flex;gap:8px;margin:12px 0}
.dlgtools .btn{flex:1}
.btn.sm{padding:9px 12px;font-size:13.5px}

.dlgans{display:flex;flex-direction:column;gap:8px}
.dlgopt{width:100%}
.dlgline{min-height:52px;background:var(--card);border:2px dashed var(--line);
  border-radius:14px;padding:9px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dlgph{color:var(--ink-3);font-size:13.5px;font-weight:600;padding:0 4px}
.dlgbank{display:flex;flex-wrap:wrap;gap:6px}
.dlgsend{margin-top:2px}
.dlgmic{margin-top:2px}
.dlgdone{font-size:18px;font-weight:800;text-align:center;margin-bottom:12px}

/* На вузькому екрані три ролі поруч не влазять — перекладаємо їх. */
@media (max-width:359px){
  .dlgroles{flex-wrap:wrap}
  .dlgroles span{flex:1 1 45%}
}

/* Форма «мої дані»: три поля в одному вікні, тому підпис над полем —
   так на вузькому екрані нічого не тиснеться. */
.mefield{display:block;margin:12px 0}
.mefield span{display:block;font-size:12.5px;color:var(--ink-2);font-weight:700;margin-bottom:5px}
.mefield input{width:100%;background:var(--card-2);border:1px solid var(--line);
  border-radius:12px;padding:11px 13px;font-size:15.5px;font-weight:700;color:var(--ink)}
.mefield input:focus{outline:none;border-color:var(--or)}
.mesave{width:100%;margin-top:14px}

/* Попередження під полем, а не спливаюче: людина має бачити його, поки
   виправляє, а не встигати прочитати за дві секунди. */
.mewarn{margin-top:6px;font-size:12.5px;font-weight:700;color:var(--bad);line-height:1.4}
.mewarn.hidden{display:none}

/* Пропозиція на весь напрямок стоїть над сіткою курсів, тому виглядає як
   картка-кнопка з ціною праворуч — щоб її не сплутали з окремим курсом. */
.catoffer{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  border:1px solid var(--or-d);background:var(--or-soft);cursor:pointer;padding:13px 15px}
.catoffer.owned{border-color:var(--line);background:var(--card)}
.catoic{flex:0 0 38px;height:38px;border-radius:12px;background:rgba(0,0,0,.25);
  display:grid;place-items:center;font-size:20px}
.catotx{flex:1;min-width:0}
.catotx b{display:block;font-size:14.5px}
.catotx small{display:block;font-size:12.5px;color:var(--ink-2);font-weight:600;margin-top:2px}
.catopr{flex:0 0 auto;text-align:right;font-size:16px;font-weight:800;color:var(--or)}
.catoffer.owned .catopr{color:var(--ok);font-size:14px}
.catosave{display:block;font-size:11.5px;font-weight:700;color:var(--ok);margin-top:2px}
@media (max-width:359px){ .catotx small{font-size:11.5px} .catopr{font-size:14.5px} }

/* ---------- запис на заняття: анкета й вступний тест ---------- */

/* Чотири кроки видно завжди: людина має розуміти, скільки ще попереду,
   інакше двадцять вісім питань здаються нескінченними. */
.tstep{display:flex;gap:6px;margin:2px 0 14px}
.tstep-i{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:10.5px;font-weight:700;color:var(--ink-2);text-align:center;line-height:1.2}
.tstep-i i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:11px;font-weight:800;background:var(--card);
  border:1px solid var(--line);color:var(--ink-2)}
.tstep-i.on{color:var(--or)} .tstep-i.on i{background:var(--or);border-color:var(--or);color:#fff}
.tstep-i.ok{color:var(--ok)} .tstep-i.ok i{background:var(--ok);border-color:var(--ok);color:#fff}

.tform{display:flex;flex-direction:column;gap:13px;padding:15px}
.tfield{display:block}
.tfield>span{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:5px}
.tfield input,.tfield textarea{width:100%;box-sizing:border-box;padding:11px 12px;
  border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);
  font:inherit;font-size:15px}
.tfield textarea{min-height:66px;resize:vertical}
.tfield input:focus,.tfield textarea:focus{outline:none;border-color:var(--or)}
.terr{display:block;margin-top:5px;font-size:11.5px;font-weight:700;color:var(--bad)}

.tchips{display:flex;flex-wrap:wrap;gap:7px}
.tchip{padding:8px 13px;border-radius:999px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink-2);font-size:13px;font-weight:700;cursor:pointer}
.tchip.on{border-color:var(--or);background:var(--or-soft);color:var(--or)}

/* ---- тест ---- */
.tprog{display:flex;justify-content:space-between;font-size:12px;font-weight:700;
  color:var(--ink-2);margin-bottom:6px}
.tbar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:14px}
.tbar i{display:block;height:100%;background:var(--or);border-radius:99px;transition:width .25s}
.tq{padding:16px}
.tq-skill{margin:0 0 6px;font-size:11.5px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;color:var(--ink-2)}
.tq-text{margin:0 0 14px;font-size:18px;font-weight:700;line-height:1.4}
.tq-opt{display:block;width:100%;text-align:left;padding:13px 15px;margin-top:8px;
  border-radius:13px;border:1px solid var(--line);background:var(--bg);color:var(--ink);
  font:inherit;font-size:15.5px;font-weight:600;cursor:pointer}
.tq-opt:active{border-color:var(--or);background:var(--or-soft)}

/* ---- результат ---- */
.tlevel{text-align:center;padding:22px 16px}
.tlevel b{display:block;font-size:44px;font-weight:800;color:var(--or);line-height:1}
.tlevel small{display:block;margin-top:8px;font-size:14px;font-weight:700;color:var(--ink-2)}
.tscore{display:flex;gap:8px;margin-top:14px}
.tscore div{flex:1;text-align:center;padding:10px 4px;border-radius:12px;background:var(--card);
  border:1px solid var(--line)}
.tscore b{display:block;font-size:17px;font-weight:800}
.tscore small{display:block;font-size:11px;color:var(--ink-2);font-weight:700;margin-top:2px}
.tweak{margin:0;padding-left:18px}
.tweak li{font-size:13px;color:var(--ink-2);margin-top:5px;line-height:1.4}

/* Підказка встановити застосунок (лише в браузері, поки не встановлено) */
.installbar{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px}
.installbar .ib-ic{font-size:26px}
.installbar .ib-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.installbar .ib-txt b{font-size:14px;font-weight:800}
.installbar .ib-txt small{font-size:12px;color:var(--ink-2);font-weight:600}
.installbar .ib-x{background:none;border:0;color:var(--ink-3);font-size:16px;padding:4px;cursor:pointer}
.iossteps{margin:6px 0 0;padding-left:20px;line-height:1.6}
.iossteps li{margin-bottom:6px}

/* Банер на головній (за замовчуванням — «Запроси друзів») */
.homebanner{display:flex;align-items:center;gap:12px;width:100%;border:0;color:inherit;font:inherit;
            text-align:left;cursor:pointer;background:linear-gradient(135deg,rgba(255,153,0,.16),var(--card) 60%)}
.homebanner .hb-ic{font-size:26px}
.homebanner .hb-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.homebanner .hb-txt b{font-size:14.5px;font-weight:800}
.homebanner .hb-txt small{font-size:12px;color:var(--ink-2);font-weight:600}
/* Промо-вікно */
.promotext{font-size:16px;line-height:1.5;font-weight:600;margin:4px 0 16px}
/* Після безкоштовного уроку: похвала, темп і дві кнопки поруч */
.dpraise{font-size:16px;font-weight:700;line-height:1.45;margin:16px 4px 0;color:var(--ink)}
.dpace{width:100%;margin-top:12px;background:var(--card);border-radius:14px;padding:12px 14px;
       text-align:left;font-size:13.5px;font-weight:600;color:var(--ink-2);
       display:flex;flex-direction:column;gap:6px}
.dpace b{color:var(--ink)}
.dpace .fast{color:var(--ok);font-weight:800}
.drow{display:flex;gap:10px;width:100%;margin-top:18px}
.drow .btn{flex:1}

/* Шапка: строк доступу й заняття. На широкому екрані — між мовою й серією,
   на телефоні місця там немає, тож окремим рядком під шапкою. */
.apphead{flex-wrap:wrap}
.hinfo{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;
       background:none;border:0;padding:0;color:var(--ink);font:inherit;cursor:pointer;text-align:center}
.hinfo span{max-width:100%;font-size:11.5px;font-weight:800;line-height:1.3;
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hinfo .hi-end{color:var(--or)}
.hinfo .hi-end.soon{color:var(--bad)}
.hinfo .hi-les{color:var(--ink-2)}
@media (max-width:480px){
  .hinfo{order:3;flex-basis:100%;background:var(--card);border-radius:12px;padding:7px 10px;margin-top:-4px}
}
.hsched{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.hsched .row{display:flex;justify-content:space-between;gap:10px;background:var(--card-2);border-radius:12px;
             padding:10px 12px;font-size:14px;font-weight:700}
.hsched .row small{color:var(--ink-2);font-weight:600;text-align:right}
.hsched .row.soon small{color:var(--bad)}

/* Тест професій */
.qz-hero,.qz-res{text-align:center;margin:18px 0 20px}
.qz-emo{font-size:64px;line-height:1.1}
.qz-hero h2,.qz-res h2{font-size:22px;font-weight:800;margin:10px 0 8px;line-height:1.25}
.qz-hero p,.qz-res p{color:var(--ink-2);font-size:14.5px;font-weight:600;line-height:1.5;margin:0}
.qz-res small{color:var(--ink-2);font-weight:700;font-size:13px}
.qz-pct{display:inline-block;margin-top:12px;background:var(--or-soft);color:var(--or);
        border-radius:999px;padding:6px 14px;font-weight:800;font-size:14px}
.qz-q{font-size:19px;font-weight:800;line-height:1.35;margin:18px 0 16px}
.qz-last{margin-top:12px}
.qzcard .catic{background:var(--or-soft)}

/* Відеореклама на весь екран */
.advid{position:fixed;inset:0;z-index:40;background:#000;display:flex;align-items:center;justify-content:center}
.advid video{width:100%;height:100%;object-fit:contain;background:#000}
.advid-top{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));left:12px;right:12px;
           display:flex;align-items:center;gap:8px}
.advid-tag{flex:1;font-size:11px;font-weight:800;letter-spacing:.08em;color:rgba(255,255,255,.65)}
.advid-btn{background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.25);
           border-radius:999px;padding:8px 14px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.advid-btn:disabled{opacity:.7;cursor:default}
.advid-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.15)}
.advid-bar i{display:block;height:100%;width:0;background:var(--or);transition:width .25s linear}
.advid-cta{position:absolute;left:var(--pad);right:var(--pad);width:auto;max-width:600px;margin:0 auto;
           bottom:calc(22px + env(safe-area-inset-bottom,0px))}

/* Підтримка після уроку з багатьма помилками */
.dhelp{margin-top:14px;text-align:center}
.dhelp .note{margin-bottom:8px}

.sharebtn{width:100%;margin:4px 0 14px}
.dhelp .btn{display:inline-flex;width:auto;margin:0 auto;padding-left:18px;padding-right:18px}

/* Аватарка з гардероба поруч із вогником серії */
.streakbox .avatarmini{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 12%;
  background:var(--card-2);border:2px solid var(--or);margin-right:4px;flex:0 0 auto}
.streakbox .avatarmini.emblem{object-position:center;border-color:var(--line, rgba(255,255,255,.12))}
.streakbox:not(.sm) .avatarmini{order:-1}
#pf-avatar.hasimg{overflow:hidden;padding:0}
#pf-avatar.hasimg img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
#pf-avatar.hasimg .ti{display:none}

/* ===== Картинка → відповідь голосом =====
   Головне на екрані — картинка; під нею коротке питання й велика кругла
   кнопка мікрофона. Решта тексту — дрібно й лише за потреби. */
.pcpic{display:grid;place-items:center;margin:4px auto 14px;width:100%;max-width:340px;aspect-ratio:4/3;
       background:radial-gradient(circle at 50% 40%,rgba(255,153,0,.12),var(--card) 70%);border-radius:24px;overflow:hidden}
.pcpic.img{background:var(--card)}
.pcpic img{width:100%;height:100%;object-fit:contain}
.pcemoji{font-size:clamp(96px,32vw,150px);line-height:1}
.pcemoji.many{font-size:clamp(56px,17vw,84px);letter-spacing:.06em;text-align:center;padding:0 10px}
.pcq{font-size:22px;font-weight:800;text-align:center;margin:2px 0 4px}
.pcmic{display:block;margin:16px auto 6px;width:92px;height:92px;border-radius:50%;border:0;cursor:pointer;
       background:var(--or);color:#1a1200;font-size:40px;box-shadow:0 8px 24px rgba(255,153,0,.35);
       transition:transform .15s}
.pcmic:active{transform:scale(.95)}
.pcmic:disabled{cursor:default}
.pcmic.on{animation:pcpulse 1.1s ease-out infinite;background:#ff5a4d;color:#fff}
.pcmic.wait{opacity:.7;animation:pcspin 1.4s linear infinite}
@keyframes pcpulse{0%{box-shadow:0 0 0 0 rgba(255,90,77,.55)}100%{box-shadow:0 0 0 26px rgba(255,90,77,0)}}
@keyframes pcspin{50%{transform:scale(.94)}}
.pclab{text-align:center;font-size:14px;font-weight:700;color:var(--ink-2);margin-bottom:6px}
.pcnear{display:block;color:var(--or);font-size:16px}
.pcno{display:block;color:var(--bad);font-size:16px}
.pchear{margin-top:8px}