/* ============================================================
   ЗНАНИЕ — дизайн-система. Природа Сочи: зелёный + янтарь.
   Светлая/тёмная тема, адаптив, телефон-first (макс. 520px).
   ============================================================ */

:root{
  --bg:#E7EEE4; --surface:#FFFFFF; --surface-2:#F2F6EE; --surface-3:#E8EEE2;
  --ink:#15241E; --muted:#4C5C54; --faint:#8494896b;
  --line:#DBE3D4; --line-2:#C9D3BF;
  --brand:#58CC02; --brand-ink:#3d8c10; --brand-soft:#E6F5D8; --brand-lip:#46a302;
  --accent:#B77D22; --accent-soft:#F3E6C7;
  --gold:#FFC800; --gold-lip:#e0a900;
  --danger:#BB4A31;
  --r-common:#7C8F73; --r-rare:#B77D22; --r-epic:#7A57B0;
  --shadow:0 1px 2px rgba(21,36,30,.05), 0 10px 24px rgba(21,36,30,.07);
  --radius:16px; --radius-sm:11px;
  --tap:44px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0D1714; --surface:#16211E; --surface-2:#1C2925; --surface-3:#22302B;
    --ink:#EAF1EA; --muted:#AEC1B8; --faint:#5c6f676b;
    --line:#273631; --line-2:#33453D;
    --brand:#58CC02; --brand-ink:#8BE84B; --brand-soft:#1C3A12; --brand-lip:#3f8a00;
    --accent:#E4B252; --accent-soft:#2A2312;
    --gold:#FFC800; --gold-lip:#c99e00;
    --danger:#E0714B;
    --r-common:#8AA08A; --r-rare:#E4B252; --r-epic:#B69BE0;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 28px rgba(0,0,0,.4);
  }
}
:root[data-theme="light"]{
  --bg:#E7EEE4; --surface:#FFFFFF; --surface-2:#F2F6EE; --surface-3:#E8EEE2;
  --ink:#15241E; --muted:#4C5C54; --line:#DBE3D4; --line-2:#C9D3BF;
  --brand:#58CC02; --brand-ink:#3d8c10; --brand-soft:#E6F5D8; --brand-lip:#46a302;
  --accent:#B77D22; --accent-soft:#F3E6C7; --danger:#BB4A31; --gold:#FFC800; --gold-lip:#e0a900;
  --r-common:#7C8F73; --r-rare:#B77D22; --r-epic:#7A57B0;
  --shadow:0 1px 2px rgba(21,36,30,.05), 0 10px 24px rgba(21,36,30,.07);
}
:root[data-theme="dark"]{
  --bg:#0D1714; --surface:#16211E; --surface-2:#1C2925; --surface-3:#22302B;
  --ink:#EAF1EA; --muted:#AEC1B8; --line:#273631; --line-2:#33453D;
  --brand:#58CC02; --brand-ink:#8BE84B; --brand-soft:#1C3A12; --brand-lip:#3f8a00;
  --accent:#E4B252; --accent-soft:#2A2312; --danger:#E0714B; --gold:#FFC800; --gold-lip:#c99e00;
  --r-common:#8AA08A; --r-rare:#E4B252; --r-epic:#B69BE0;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 28px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button{font-family:inherit}
h1,h2,h3{margin:0; line-height:1.15; letter-spacing:-.01em}
p{margin:0}
a{color:inherit; text-decoration:none}

/* ---- Оболочка ---- */
#app{display:flex; flex-direction:column; height:100dvh; max-width:520px; margin:0 auto; background:var(--bg); position:relative}
.topbar{
  flex-shrink:0; height:54px; display:flex; align-items:center; justify-content:space-between;
  padding:0 12px 0 14px; background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line); z-index:20;
}
.brand{display:flex; align-items:center; gap:8px; background:none; border:0; cursor:pointer; padding:6px}
.brand-mark{font-size:20px}
.brand-name{font-weight:800; letter-spacing:.14em; font-size:15px; color:var(--brand-ink)}
.top-actions{display:flex; align-items:center; gap:2px}
.app-main{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch}
.nav-host{flex-shrink:0}

.screen{padding:16px 16px 22px; display:flex; flex-direction:column; gap:14px; animation:fade .25s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.screen{animation:none}}

/* ---- Типографика-утилиты ---- */
.muted{color:var(--muted)}
.small{font-size:13px}
.xsmall{font-size:11.5px}
.center{text-align:center}
.strong{font-weight:700}
.group-h{font-size:13px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin:6px 2px -2px; font-weight:700}

/* ---- Нижнее меню ---- */
.tabbar{display:flex; background:var(--surface); border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom)); z-index:20}
.tab{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px; border-radius:12px; color:var(--muted); font-size:0}
.tab-ic{font-size:20px; line-height:1; opacity:.7; transition:transform .15s}
.tab-lb{font-size:10.5px; font-weight:600}
.tab.active{color:var(--brand-ink)}
.tab.active .tab-ic{opacity:1; transform:translateY(-1px) scale(1.08)}
.tab.active .tab-lb{color:var(--brand-ink)}

/* ---- Кнопки ---- */
.btn{
  appearance:none; border:1px solid transparent; border-radius:12px; padding:11px 16px;
  font-size:15px; font-weight:650; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap); transition:transform .08s, background .15s, border-color .15s;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-ink)}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line-2)}
.btn-danger{background:transparent; color:var(--danger); border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.btn-lg{padding:14px 18px; font-size:16px; width:100%}
.btn.full,.full{width:100%}
.btn.sm{padding:8px 12px; min-height:36px; font-size:13px; border-radius:10px}
.row-btns{display:flex; gap:10px}
.row-btns .btn{flex:1}
.icon-btn{
  width:var(--tap); height:var(--tap); min-width:var(--tap); border-radius:12px; border:0; background:transparent;
  color:var(--ink); font-size:20px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn:active{transform:scale(.92)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 55%,transparent); outline-offset:2px}

/* ---- Карточка-контейнер ---- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.note{background:var(--brand-soft); border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line)); border-radius:var(--radius-sm); padding:12px 14px; font-size:13.5px; color:var(--ink)}
.sep{border:0; border-top:1px solid var(--line); margin:8px 0}

/* ---- Экранная шапка ---- */
.screen-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:-2px 0 2px}
.sh-left{display:flex; align-items:center; gap:6px; min-width:0}
.sh-right{display:flex; align-items:center; gap:2px}
.sh-title{font-size:22px; font-weight:800}
.sh-sub{font-size:12.5px; color:var(--muted)}

/* ---- Главная ---- */
.home-top{display:flex; align-items:center; gap:12px}
.avatar{width:52px; height:52px; border-radius:16px; border:1px solid var(--line-2); background:var(--surface); font-size:28px; cursor:pointer; display:flex; align-items:center; justify-content:center}
.home-hi{flex:1; min-width:0}
.home-name{font-size:22px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lvl-badge{background:var(--accent-soft); color:var(--accent); border-radius:12px; padding:8px 12px; font-weight:800; font-size:13px}
.xp-card{padding:12px 14px}
.xp-row{display:flex; justify-content:space-between; margin-bottom:7px}
.bar{height:10px; border-radius:99px; background:var(--surface-3); overflow:hidden}
.bar-fill{height:100%; border-radius:99px; background:linear-gradient(90deg,var(--brand),var(--accent)); transition:width .4s}

.field{display:flex; flex-direction:column; gap:6px}
.field-lb{font-size:12.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.select,.input{
  width:100%; background:var(--surface); border:1px solid var(--line-2); border-radius:11px; padding:11px 12px;
  font-size:15px; color:var(--ink); min-height:var(--tap);
}
.input.area{min-height:auto; resize:vertical; line-height:1.4}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}

.hero-quest{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  background:linear-gradient(135deg,var(--brand),var(--brand-ink)); color:#fff; border:0;
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
}
.hero-quest:active{transform:scale(.99)}
.hq-ic{font-size:32px}
.hq-body{flex:1; display:flex; flex-direction:column; gap:2px}
.hq-kicker{font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; opacity:.85}
.hq-title{font-size:18px; font-weight:800}
.hq-go{font-size:16px; opacity:.9}

.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 8px; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer}
.tile:active{transform:scale(.97)}
.tile-ic{font-size:22px}
.tile-val{font-size:19px; font-weight:800}
.tile-lb{font-size:10.5px; color:var(--muted); text-align:center; line-height:1.2}

/* ---- Строки-списки (квесты и т.п.) ---- */
.row{display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px}
.row:active{transform:scale(.99)}
.row-ic{font-size:26px}
.row-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px}
.row-title{font-weight:700; display:flex; align-items:center; gap:6px}
.row-sub{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.row-status{font-size:12px; font-weight:700; color:var(--muted); white-space:nowrap}
.row-status.ok{color:var(--brand-ink)}
.mini-bar{height:5px; border-radius:99px; background:var(--surface-3); overflow:hidden; margin-top:2px}
.mini-fill{display:block; height:100%; background:var(--brand); border-radius:99px}
.chip-draft{font-size:10px; background:var(--accent-soft); color:var(--accent); padding:1px 7px; border-radius:99px; font-weight:700}

/* ---- Плеер квеста ---- */
.steps-dots{display:flex; gap:6px; justify-content:center; margin-top:2px}
.dot{width:9px; height:9px; border-radius:50%; background:var(--surface-3); border:1px solid var(--line-2)}
.dot.past{background:var(--brand)}
.dot.now{background:var(--accent); transform:scale(1.3)}
.step{display:flex; flex-direction:column; gap:14px}
.step-kicker{text-align:center; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); font-weight:800}
.find-box{background:var(--surface); border:1.5px dashed var(--line-2); border-radius:var(--radius); padding:20px 16px; text-align:center; display:flex; flex-direction:column; gap:8px; align-items:center}
.find-ic{font-size:44px}
.quiz-q{font-size:19px; font-weight:800; text-align:center; text-wrap:balance}
.quiz-opts{display:flex; flex-direction:column; gap:10px}
.quiz-opt{background:var(--surface); border:1.5px solid var(--line-2); border-radius:12px; padding:14px; font-size:15.5px; font-weight:600; cursor:pointer; text-align:left; min-height:var(--tap); color:var(--ink)}
.quiz-opt:hover{border-color:var(--brand)}
.quiz-opt.correct{background:var(--brand); color:#fff; border-color:var(--brand)}
.quiz-opt.wrong{background:color-mix(in srgb,var(--danger) 18%,transparent); border-color:var(--danger); animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.mini-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.mini-card{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 6px; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:22px; text-align:center}

.done-card{text-align:center; display:flex; flex-direction:column; gap:10px; align-items:center; padding:26px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.done-emoji{font-size:56px}
.done-ach{display:inline-flex; align-items:center; gap:8px; background:var(--accent-soft); color:var(--accent); padding:8px 14px; border-radius:99px; font-weight:700}
.row-btns{width:100%; margin-top:6px}
.celebrate{text-align:center; display:flex; flex-direction:column; gap:6px; align-items:center; padding:8px}
.cel-ic{font-size:64px; animation:pop .4s}
@keyframes pop{from{transform:scale(.3); opacity:0}to{transform:scale(1); opacity:1}}

/* ---- Большая карточка ---- */
.big-card{background:var(--surface); border:1px solid var(--line); border-top:5px solid var(--r-common); border-radius:var(--radius); padding:20px 18px; box-shadow:var(--shadow); text-align:center}
.big-card.r-rare{border-top-color:var(--r-rare)}
.big-card.r-epic{border-top-color:var(--r-epic)}
.bc-emoji{font-size:64px; line-height:1}
.bc-type{font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-top:6px}
.bc-title{font-size:24px; font-weight:800; margin-top:2px; text-wrap:balance}
.bc-sub{font-size:14px; margin-top:2px}
.bc-facts{text-align:left; display:flex; flex-direction:column; gap:8px; margin-top:14px}
.fact{font-size:14.5px; line-height:1.45}
.bc-tags{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:14px}
.tag{font-size:12px; background:var(--surface-2); border:1px solid var(--line); border-radius:99px; padding:4px 10px; color:var(--muted)}
.tag.r-common{color:var(--r-common)} .tag.r-rare{background:var(--accent-soft); color:var(--r-rare); border-color:transparent} .tag.r-epic{color:var(--r-epic)}

/* ---- Атлас ---- */
.chips{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch}
.chip-btn{white-space:nowrap; background:var(--surface); border:1px solid var(--line-2); border-radius:99px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer; color:var(--ink)}
.chip-btn.active{background:var(--brand); color:#fff; border-color:var(--brand)}
.atlas-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.atlas-cell{position:relative; aspect-ratio:1/1.15; background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--r-common); border-radius:var(--radius-sm); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer; padding:8px}
.atlas-cell.r-rare{border-top-color:var(--r-rare)} .atlas-cell.r-epic{border-top-color:var(--r-epic)}
.atlas-cell.locked{border-top-color:var(--line); opacity:.65}
.atlas-cell:active{transform:scale(.96)}
.ac-emoji{font-size:34px}
.ac-name{font-size:11.5px; font-weight:600; text-align:center; line-height:1.15}

/* ---- Успехи ---- */
.lvl-big{display:flex; align-items:baseline; gap:8px; justify-content:center; margin-bottom:10px}
.lvl-big-num{font-size:44px; font-weight:800; color:var(--brand-ink)}
.ach-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.ach-cell{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px; display:flex; flex-direction:column; gap:3px; align-items:flex-start; opacity:.6}
.ach-cell.got{opacity:1; border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.ach-ic{font-size:26px}
.ach-name{font-weight:700; font-size:14px}
.mastery{display:flex; flex-direction:column; gap:10px}
.mrow{display:grid; grid-template-columns:1fr 90px 38px; align-items:center; gap:8px}
.mrow-lb{font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mrow-bar{height:9px; border-radius:99px; background:var(--surface-3); overflow:hidden}
.mrow-fill{display:block; height:100%; border-radius:99px; transition:width .4s}
.mrow-pct{font-size:12.5px; font-weight:700; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums}

/* ---- Профиль / чек-листы ---- */
.avatar-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:8px}
.avatar-opt{aspect-ratio:1; border:1px solid var(--line-2); border-radius:12px; background:var(--surface); font-size:24px; cursor:pointer}
.avatar-opt.sel{border-color:var(--brand); background:var(--brand-soft)}
.check-list{display:flex; flex-direction:column; gap:6px; max-height:200px; overflow-y:auto; border:1px solid var(--line); border-radius:11px; padding:8px}
.check-item{display:flex; align-items:center; gap:10px; padding:6px; font-size:14px; cursor:pointer}
.check-item input{width:20px; height:20px; accent-color:var(--brand)}
.months{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; border:1px solid var(--line); border-radius:11px; padding:8px}
.months .check-item{padding:4px; font-size:13px}

/* ---- Модалка ---- */
.overlay{position:fixed; inset:0; background:rgba(10,18,15,.55); display:flex; align-items:flex-end; justify-content:center; z-index:50; opacity:0; transition:opacity .2s}
.overlay.show{opacity:1}
.modal{background:var(--surface); width:100%; max-width:520px; max-height:90dvh; overflow-y:auto; border-radius:20px 20px 0 0; box-shadow:0 -8px 40px rgba(0,0,0,.3); transform:translateY(20px); transition:transform .22s}
.overlay.show .modal{transform:none}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:16px 12px 8px 18px; position:sticky; top:0; background:var(--surface)}
.modal-head h3{font-size:18px; font-weight:800}
.modal-body{padding:4px 18px 8px; display:flex; flex-direction:column; gap:12px}
.modal-actions{display:flex; gap:10px; padding:12px 18px calc(16px + env(safe-area-inset-bottom))}
.modal-actions .btn{flex:1}
@media (min-width:560px){.overlay{align-items:center}.modal{border-radius:20px}}

/* ---- Тосты ---- */
.toast-host{position:fixed; left:0; right:0; bottom:88px; display:flex; flex-direction:column; align-items:center; gap:8px; z-index:60; pointer-events:none}
.toast{background:var(--ink); color:var(--bg); padding:11px 16px; border-radius:99px; font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; box-shadow:var(--shadow); opacity:0; transform:translateY(10px); transition:.28s; max-width:90%}
.toast.show{opacity:1; transform:none}
.toast-ic{font-size:16px}

/* ---- Пустое состояние ---- */
.empty{text-align:center; color:var(--muted); padding:30px 16px; display:flex; flex-direction:column; gap:8px; align-items:center}
.empty-ic{font-size:40px; opacity:.6}

/* ---- Админка ---- */
.sub-tabs{display:flex; gap:6px; overflow-x:auto; padding-bottom:4px}
.sub-tab{white-space:nowrap; background:var(--surface); border:1px solid var(--line-2); border-radius:99px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer; color:var(--ink)}
.sub-tab.active{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.admin-body{display:flex; flex-direction:column; gap:10px}
.admin-row{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px}
.ar-ic{font-size:24px}
.ar-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.ar-title{font-weight:700; display:flex; align-items:center; gap:6px}
.ar-sub{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.steps-edit{display:flex; flex-direction:column; gap:6px; margin:6px 0}
.step-edit-row{display:flex; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:6px 8px}
.se-num{width:22px; height:22px; border-radius:50%; background:var(--brand); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.se-desc{flex:1; font-size:13px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.add-step{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}

/* ---- Дневной стрик + находка дня ---- */
.daily{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px}
.daily.ready{border-color:color-mix(in srgb,var(--accent) 50%,var(--line)); background:linear-gradient(135deg,var(--surface),var(--accent-soft))}
.streak{display:flex; align-items:center; gap:6px}
.streak-fire{font-size:24px}
.streak-n{font-size:24px; font-weight:800; color:var(--accent)}
.streak-lb{margin-left:2px}
.reveal{display:flex; flex-direction:column; gap:10px; align-items:center; padding:6px 2px}
.reveal-kicker{font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--accent)}
.reveal .big-card{width:100%}

/* ---- Бейджи ранга/дублей на карточке в атласе ---- */
.rank-dot{position:absolute; top:6px; left:6px; width:11px; height:11px; border-radius:50%; box-shadow:0 0 0 2px var(--surface)}
.count-badge{position:absolute; top:5px; right:6px; font-size:10.5px; font-weight:800; background:var(--ink); color:var(--bg); border-radius:99px; padding:1px 6px}
.up-badge{position:absolute; bottom:6px; right:6px; font-size:12px; background:var(--accent); color:#1a1305; border-radius:50%; width:20px; height:20px; display:flex; align-items:center; justify-content:center; animation:bob 1.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.up-badge{animation:none}}

/* ---- Панель апгрейда карточки ---- */
.upgrade{display:flex; flex-direction:column; gap:10px}
.up-row{display:flex; align-items:center; justify-content:space-between; gap:8px}
.up-rank{font-weight:800; font-size:15px}

/* ---- Колоды ---- */
.decks{display:flex; flex-direction:column; gap:10px}
.deck-row{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px}
.deck-ic{font-size:26px}
.deck-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px}
.deck-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.deck-name{font-weight:700; font-size:14.5px}
.deck-power{font-size:13px; font-weight:800; color:var(--accent); white-space:nowrap}

/* ---- Призвание на главной ---- */
.calling-line{color:var(--brand-ink); font-weight:700}
.freeze-badge{margin-left:auto; font-size:12px; font-weight:700; color:var(--muted); background:var(--surface-2); border:1px solid var(--line); border-radius:99px; padding:2px 9px}

/* ---- Герой: ветки ---- */
.hero-card{display:flex; flex-direction:column; gap:10px}
.branch-row{display:flex; align-items:center; gap:10px; padding:8px; border-radius:12px; border:1px solid transparent}
.branch-row.is-calling{border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); background:var(--brand-soft)}
.branch-ic{font-size:26px}
.branch-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px}
.branch-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.branch-name{font-weight:700; font-size:14.5px}
.branch-rank{color:var(--muted); white-space:nowrap}
.call-btn{background:none; border:0; font-size:22px; cursor:pointer; color:var(--accent); width:36px; height:36px; border-radius:10px}
.call-btn:hover{background:var(--surface-2)}
.call-btn.on{color:var(--accent)}

/* ---- Сезонное событие (баннер) ---- */
.event-banner{display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:linear-gradient(135deg,#8a5c1c,#5d3d15); color:#fff; border:0; border-radius:var(--radius); padding:14px; box-shadow:var(--shadow)}
.event-banner:active{transform:scale(.99)}
.event-banner.claimed{background:var(--surface); color:var(--ink); border:1px solid var(--line)}
.ev-ic{font-size:30px}
.ev-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.ev-kicker{font-size:11px; text-transform:uppercase; letter-spacing:.07em; opacity:.9}
.ev-title{font-size:16px; font-weight:800}
.ev-sub{opacity:.95; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.event-banner.claimed .ev-sub,.event-banner.claimed .ev-kicker{color:var(--muted)}
.ev-go{font-size:20px}

/* ---- Экспедиции ---- */
.camp-row .row-ic{filter:saturate(1.1)}

/* ---- Профиль / облако ---- */
.acct{display:flex; align-items:center; gap:12px}
.acct-av{font-size:32px}
.acct-body{flex:1; min-width:0; display:flex; flex-direction:column}
.acct-name{font-weight:800; font-size:17px}
.role-pick{display:flex; gap:8px}
.role-btn{flex:1; padding:11px; border:1.5px solid var(--line-2); border-radius:11px; background:var(--surface); font-weight:600; cursor:pointer; color:var(--ink); min-height:var(--tap)}
.role-btn.on{border-color:var(--brand); background:var(--brand-soft); color:var(--brand-ink)}
.group-card{display:flex; flex-direction:column; gap:12px}
.gc-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.gc-name{font-weight:800; font-size:16px}
.gc-code{display:flex; align-items:center; gap:10px}
.rank-row{display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--surface-2); border-radius:9px}
.rank-pos{width:26px; text-align:center; font-weight:800}
.rank-name{flex:1; font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rank-xp{font-size:12.5px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums}
.rank-click{border:0; cursor:pointer; text-align:left; width:100%}
.rank-click:active{transform:scale(.99)}
.rank-go{color:var(--muted); font-size:18px; margin-left:2px}
.qstat{display:flex; align-items:center; gap:10px; padding:7px 10px; background:var(--surface-2); border-radius:8px}
.qstat-ic{font-size:18px}
.qstat-name{flex:1; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.qstat-n{font-size:13px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums}
.code-pill{display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line)); font-family:"SF Mono",ui-monospace,monospace; font-weight:800; letter-spacing:.14em; background:var(--accent-soft); color:var(--accent); padding:7px 12px; border-radius:9px; font-size:16px}
.code-pill:active{transform:scale(.97)}
.copy-ic{font-size:13px; letter-spacing:0}

/* Крупный код при создании группы */
.code-reveal{display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center}
.big-code{font-family:"SF Mono",ui-monospace,monospace; font-size:34px; font-weight:800; letter-spacing:.3em; padding:14px 22px 14px 30px; border-radius:14px; background:var(--accent-soft); color:var(--accent); border:2px dashed color-mix(in srgb,var(--accent) 50%,var(--line)); cursor:pointer}
.big-code:active{transform:scale(.98)}

/* Вертикальные стопки с воздухом (решает «кнопки слишком близко») */
.stack{display:flex; flex-direction:column; gap:12px}

/* ---- Задания дня ---- */
.missions{gap:10px}
.m-head{display:flex; align-items:center; justify-content:space-between}
.mission{display:flex; align-items:center; gap:11px}
.mission.claimed{opacity:.6}
.m-ic{font-size:22px; width:26px; text-align:center}
.m-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px}
.m-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.m-title{font-size:14px; font-weight:600}
.m-check{color:var(--brand-ink); font-weight:800; font-size:18px; width:36px; text-align:center}
.m-count{width:36px; text-align:center; font-variant-numeric:tabular-nums}

/* ---- Крафт ---- */
.craft-btn{border-style:dashed; font-size:14px}

/* ---- Онбординг ---- */
.onb-row{display:flex; align-items:flex-start; gap:12px}
.onb-ic{font-size:28px; width:34px; text-align:center; flex-shrink:0}
.onb-t{font-weight:700; font-size:15px}

/* ---- Фото на карточках ---- */
.bc-img{width:100%; max-width:220px; aspect-ratio:4/3; object-fit:cover; border-radius:12px; margin:0 auto; display:block}
.ac-img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px}
.atlas-cell:has(.ac-img){padding:5px}

/* ---- Хаб владельца (admin/1346) ---- */
.owner-bar{display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:color-mix(in srgb, var(--brand) 12%, var(--surface)); border:1px solid var(--line-2);
  border-radius:14px; padding:8px 10px; margin-bottom:12px; flex-wrap:wrap}
.owner-tag{font-weight:800; font-size:13px; color:var(--brand-ink); white-space:nowrap}
.owner-switch{display:flex; gap:6px; flex-wrap:wrap}

/* ============================================================
   DUOLINGO-СКИН: круглый шрифт, 3D-кнопки, тропинка уроков
   ============================================================ */
body{ font-family:'Nunito',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
h1,h2,h3,.sh-title,.home-name,.btn{ font-weight:800; letter-spacing:0; }
.brand-name{font-weight:900}

/* 3D-кнопки с «губой» и вдавливанием */
.btn{border-radius:16px; font-weight:800; text-transform:none;}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 4px 0 var(--brand-lip); border-color:transparent;}
.btn-primary:hover{background:var(--brand);}
.btn-primary:active{transform:translateY(3px); box-shadow:0 1px 0 var(--brand-lip);}
.btn-ghost{box-shadow:0 4px 0 var(--line-2);}
.btn-ghost:active{transform:translateY(3px); box-shadow:0 1px 0 var(--line-2);}
.btn-lg{border-radius:18px}
.card{border-radius:18px}

/* ---- Тропинка уроков (Duolingo path) ---- */
.lesson-path{display:flex; flex-direction:column; align-items:center; gap:16px; padding:10px 0 4px; overflow:visible}
.lnode-wrap{position:relative; display:flex; flex-direction:column; align-items:center}
.o0{transform:translateX(0)} .o1{transform:translateX(-52px)} .o2{transform:translateX(-80px)}
.o3{transform:translateX(-52px)} .o4{transform:translateX(0)} .o5{transform:translateX(52px)}
.o6{transform:translateX(80px)} .o7{transform:translateX(52px)}
.lnode{width:70px; height:70px; border-radius:50%; border:none; cursor:pointer; font-size:30px;
  display:flex; align-items:center; justify-content:center; color:#fff; position:relative; transition:transform .08s}
.lnode-ic{line-height:1}
.lnode.done{background:var(--brand); box-shadow:0 6px 0 var(--brand-lip)}
.lnode.done .lnode-ic{opacity:0}
.lnode.done::after{content:'✓'; position:absolute; font-size:30px; font-weight:900; color:#fff}
.lnode.current{background:var(--gold); box-shadow:0 6px 0 var(--gold-lip); color:#5a4600}
.lnode.locked{background:var(--line-2); box-shadow:0 6px 0 color-mix(in srgb,var(--line-2) 65%,#000); color:var(--muted)}
.lnode:active{transform:translateY(4px); box-shadow:0 2px 0 var(--brand-lip)}
.lnode.locked:active{box-shadow:0 2px 0 color-mix(in srgb,var(--line-2) 65%,#000)}
.lring{position:absolute; inset:-8px; border-radius:50%; border:4px solid var(--gold); opacity:.5; animation:lpulse 1.6s ease-out infinite}
@keyframes lpulse{0%{transform:scale(.9); opacity:.6} 100%{transform:scale(1.25); opacity:0}}
.lbubble{position:absolute; top:-42px; background:var(--surface); color:var(--brand-ink); font-weight:900; font-size:12px;
  padding:7px 12px; border-radius:12px; border:2px solid var(--line); box-shadow:0 3px 0 var(--line); white-space:nowrap; animation:lbob 1.1s ease-in-out infinite}
.lbubble::after{content:''; position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--surface)}
@keyframes lbob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)}}
.lnode-lb{margin-top:7px; font-size:11.5px; font-weight:800; color:var(--muted); max-width:112px; text-align:center; line-height:1.2}
@media (prefers-reduced-motion:reduce){ .lring,.lbubble{animation:none} }

/* Юнит-баннер программы (шапка «раздела») */
.unit-banner{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--brand);
  color:#fff; border-radius:16px; padding:13px 16px; box-shadow:0 4px 0 var(--brand-lip)}
.unit-banner .ub-sub{font-size:11px; font-weight:900; opacity:.9; letter-spacing:.05em}
.unit-banner .ub-title{font-size:16px; font-weight:900; margin-top:2px}

/* ---- HUD (серия/опыт/заморозки) ---- */
.hud{display:flex; align-items:center; justify-content:space-around; gap:8px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:10px 8px; box-shadow:0 3px 0 var(--line)}
.hud-stat{display:flex; align-items:center; gap:6px; font-weight:900; font-size:17px}
.hud-stat span{font-size:20px; line-height:1}
.hud-stat.streak{color:#FF9600} .hud-stat.gems{color:#1CB0F6} .hud-stat.freeze{color:#4bb3f6}

/* ---- Маскот-помощник ---- */
.mascot-card{display:flex; align-items:center; gap:12px; background:var(--brand-soft);
  border:2px solid color-mix(in srgb,var(--brand) 35%,var(--line)); border-radius:18px; padding:12px 14px}
.mascot-char{font-size:44px; line-height:1; flex-shrink:0; filter:drop-shadow(0 3px 2px rgba(0,0,0,.12));
  animation:mbob 2.6s ease-in-out infinite}
@keyframes mbob{0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-5px) rotate(3deg)}}
.mascot-say{font-size:13.5px; font-weight:800; color:var(--ink); line-height:1.35}
@media (prefers-reduced-motion:reduce){ .mascot-char{animation:none} }

/* ---- Конфетти ---- */
.confetti-piece{position:fixed; width:9px; height:14px; z-index:9999; pointer-events:none; border-radius:2px}

/* ============================================================
   DUOLINGO-СКИН · плеер квеста и списки
   ============================================================ */
/* Прогресс-бар квеста */
.quest-progress{height:16px; border-radius:99px; background:var(--surface-3); overflow:hidden; border:1px solid var(--line)}
.qp-fill{display:block; height:100%; border-radius:99px; background:var(--brand); box-shadow:inset 0 -3px 0 var(--brand-lip); transition:width .45s cubic-bezier(.34,1.4,.64,1)}

/* Кикер шага — фирменный зелёный */
.step-kicker{color:var(--brand-ink)}
.quiz-q{font-size:21px; font-weight:900}

/* Крупные 3D-варианты викторины */
.quiz-opts{gap:12px}
.quiz-opt{border:2px solid var(--line-2); border-radius:16px; box-shadow:0 4px 0 var(--line-2);
  font-weight:800; padding:16px 16px; transition:transform .06s, border-color .12s}
.quiz-opt:hover{border-color:var(--brand)}
.quiz-opt:active{transform:translateY(3px); box-shadow:0 1px 0 var(--line-2)}
.quiz-opt.correct{background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand); box-shadow:0 4px 0 var(--brand-lip)}
.quiz-opt.wrong{background:color-mix(in srgb,var(--danger) 15%,transparent); border-color:var(--danger);
  box-shadow:0 4px 0 color-mix(in srgb,var(--danger) 55%,var(--line))}

/* find-box — дружелюбнее */
.find-box{border-radius:18px; border-width:2px}
.find-ic{font-size:44px}

/* Списки (квесты/экспедиции/атлас-строки) — чанковые 3D-плитки */
.row{border-radius:16px; box-shadow:0 3px 0 var(--line); transition:transform .06s}
.row:active{transform:translateY(3px); box-shadow:0 0 0 var(--line)}

/* Итог квеста / празднование — крупнее */
.done-card{border-radius:20px}
.done-emoji{font-size:56px}
.cel-ic{font-size:56px}

/* Кнопки-крупно ещё чуть выше */
.btn-lg{padding:15px 18px; font-weight:900}

/* ---- Гео-режим «Что рядом» ---- */
.loc-card{background:var(--surface); border:2px solid var(--line); border-radius:16px; padding:12px 14px;
  display:flex; flex-direction:column; gap:10px; box-shadow:0 3px 0 var(--line)}
.loc-card.near{border-color:var(--brand); box-shadow:0 3px 0 var(--brand-lip); background:var(--brand-soft)}
.loc-top{display:flex; align-items:center; gap:12px}
.loc-ic{font-size:30px; line-height:1}
.loc-body{flex:1; min-width:0}
.loc-name{font-weight:800}
.loc-visited{color:var(--brand-ink); font-weight:900; font-size:20px}
.loc-cards{display:flex; flex-wrap:wrap; gap:6px}
.loc-chip{width:34px; height:34px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center; font-size:18px; filter:grayscale(1) opacity(.55)}
.loc-chip.owned{filter:none; border-color:var(--brand)}

/* ---- Рекомендации педагогу ---- */
.reco-box{background:var(--brand-soft); border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line));
  border-radius:12px; padding:10px 12px; margin-top:8px; display:flex; flex-direction:column; gap:4px}
.reco-item{color:var(--ink); line-height:1.35}
.reco-item b{color:var(--brand-ink)}

/* ---- Кооп-цель класса ---- */
.coop-goal{background:var(--brand-soft); border:2px solid color-mix(in srgb,var(--brand) 35%,var(--line));
  border-radius:16px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; box-shadow:0 3px 0 var(--brand-lip)}
.coop-head{display:flex; align-items:center; gap:12px}
.coop-ic{font-size:34px; line-height:1}
.coop-title{font-weight:900}