/* Фирменный стиль УМНОШКОЛА · Оранжевая редакция 2026.
   Оранжевый — СРЕДА (фоны). Индиго #2E2A7C — ГОЛОС (весь текст). Жёлтый #FECE07 — CTA/акцент.
   Ваниль #FAEEDA — рабочий фон. Лаванда #CFCCEC — мягкие детали. Оранжевый #EC6707 — только в знаке.
   Шрифты: Oswald (замена Bebas Neue Cyrillic для заголовков) + Montserrat (текст). */
:root{
  --orange:#E28E39; --orange-hot:#EC6707; --orange-d:#C9711F;
  --vanilla:#FAEEDA; --soft:#fff6e6;
  --indigo:#2E2A7C; --indigo-d:#232063; --indigo-l:#3d388f;
  --yellow:#FECE07; --yellow-d:#e6b800;
  --lav:#CFCCEC; --lav-l:#e8e6f6;
  --ink:#2E2A7C; --muted:#6f6a95;
  --bg:#FAEEDA; --card:#ffffff;
  --green:#2fa46b; --red:#e2574c;
  --env:linear-gradient(135deg,#F2B24E,#E28E39,#C9711F);
  --shadow:0 10px 30px rgba(46,42,124,.10); --shadow-lg:0 18px 44px rgba(46,42,124,.16);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Montserrat',system-ui,sans-serif; background:var(--bg); color:var(--ink);
  min-height:100vh; display:flex; flex-direction:column; line-height:1.5;
}
h1,h2,h3,.display{font-family:'Oswald','Bebas Neue',sans-serif;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--indigo);line-height:1.1}
a{color:var(--indigo-l);text-decoration:none;font-weight:700}
b,strong{font-weight:700}

/* topbar: белый фон, полноцветный знак, жёлтая акцентная линия */
#topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 22px;background:#fff;border-bottom:4px solid var(--yellow);
  box-shadow:0 2px 14px rgba(46,42,124,.08); position:sticky;top:0;z-index:20
}
.brand{display:flex;align-items:center;gap:10px;cursor:pointer}
.brand-logo{height:36px;display:block}
.brand-mono{height:36px;display:none}
.logo{font-size:26px}
.brand-name{font-family:'Oswald',sans-serif;font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:1px;color:var(--indigo)}
.brand-name b{color:var(--orange-hot)}
#nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
#nav .chip{font-weight:700;color:var(--indigo);padding:8px 12px;border-radius:10px;cursor:pointer;font-size:14px}
#nav .chip:hover{background:var(--lav-l)}
#nav .who{font-size:14px;color:var(--muted);padding:8px 4px;font-weight:700}

main#app{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:26px 18px 60px}
#footer{text-align:center;color:var(--muted);font-size:13px;padding:18px;background:var(--soft)}
.loader{text-align:center;color:var(--muted);padding:60px}

/* cards & buttons */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;border:1px solid var(--lav-l)}
.grid{display:grid;gap:18px}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
/* CTA — жёлтая плашка с индиго-текстом (главный акцент редакции) */
.btn{
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;border:none;cursor:pointer;
  background:var(--yellow);color:var(--indigo);padding:13px 22px;border-radius:12px;letter-spacing:.2px;
  box-shadow:0 6px 16px rgba(254,206,7,.35);transition:transform .06s, box-shadow .1s, background .1s
}
.btn:hover{transform:translateY(-1px);background:var(--yellow-d)}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:var(--indigo);color:var(--vanilla);box-shadow:0 6px 16px rgba(46,42,124,.25)}
.btn.secondary:hover{background:var(--indigo-d)}
.btn.green{background:var(--green);color:#fff;box-shadow:0 6px 16px rgba(47,164,107,.30)}
.btn.green:hover{background:#268a59}
.btn.ghost{background:transparent;color:var(--indigo);box-shadow:none}
.btn.ghost:hover{background:var(--lav-l)}
.btn.small{padding:8px 14px;font-size:14px;border-radius:10px}
.btn.danger{background:var(--red);color:#fff;box-shadow:none}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* hero */
.hero{text-align:center;padding:26px 10px 6px;position:relative}
.hero h1{font-size:44px;margin:.2em 0}
.hero h1 .accent{color:var(--orange-hot)}
.hero p{font-size:18px;color:#4b4780;max-width:660px;margin:0 auto;text-transform:none;font-family:'Montserrat',sans-serif}
.hero-mascots{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:14px 0 4px}
.hero-mascots img{height:96px;filter:drop-shadow(0 8px 14px rgba(46,42,124,.20))}

/* гостевой герой — ОРАНЖЕВАЯ СРЕДА, знак на ванильной подложке */
.guest-hero{position:relative;overflow:hidden;background:var(--env);border-radius:26px;padding:26px 16px 22px;margin-top:6px}
.guest-hero>*{position:relative;z-index:1}
.hero-card{background:var(--vanilla);border-radius:20px;padding:24px 22px;max-width:660px;margin:0 auto;box-shadow:var(--shadow-lg)}
.hero-logo{max-width:min(430px,86%);height:auto;margin:2px auto 12px;display:block}
.guest-hero .deco{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.deco-1{width:74px;height:74px;border:9px solid var(--yellow);opacity:.85;top:10px;left:5%}
.deco-2{width:34px;height:34px;background:var(--vanilla);opacity:.5;top:44px;right:11%}
.deco-3{width:100px;height:100px;border:10px solid var(--vanilla);opacity:.35;bottom:-30px;right:5%}
.deco-4{width:26px;height:26px;background:var(--yellow);opacity:.9;bottom:26px;left:14%}

/* forms */
.field{margin-bottom:14px}
.field label{display:block;font-weight:700;margin-bottom:6px;font-size:14px;color:var(--indigo-d)}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:16px;padding:12px 14px;border:2px solid var(--lav);
  border-radius:11px;background:#fffdf8;color:var(--ink)
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--indigo)}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>.field{flex:1;min-width:140px}
.narrow{max-width:460px;margin:0 auto}
.center{text-align:center}
.muted{color:var(--muted)}
.mt{margin-top:16px}.mb{margin-bottom:16px}

/* trainer / exercise cards */
.tcard{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;cursor:pointer;
  transition:transform .1s, box-shadow .1s;border:2px solid var(--lav-l);position:relative;overflow:hidden}
.tcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--yellow)}
.tcard .ic{font-size:40px}
.tcard h3{margin:.4em 0 .2em;font-size:20px}
.tcard p{color:#5b5788;font-size:14px;margin:0;text-transform:none}
.tcard .cardmascot{position:absolute;right:-10px;bottom:-10px;height:74px;opacity:.95;pointer-events:none}
.badge{display:inline-block;background:var(--lav-l);color:var(--indigo-d);font-weight:800;
  padding:3px 12px;border-radius:20px;font-size:12px;margin-top:10px}
.motto{font-size:12.5px;color:var(--indigo-l);font-style:italic;font-weight:600;margin:8px 0 2px;max-width:78%;line-height:1.35}
.mentor-img{height:120px;filter:drop-shadow(0 8px 14px rgba(46,42,124,.20))}
.mentor-motto{font-style:italic;color:var(--indigo-d);font-weight:700;font-size:15px;margin:6px auto 2px;max-width:340px;line-height:1.4}

/* exercise runner */
.runner{max-width:660px;margin:0 auto;text-align:center}
.progressbar{height:12px;background:var(--lav-l);border-radius:10px;overflow:hidden;margin:14px 0 6px}
.progressbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--indigo),var(--yellow));width:0;transition:width .25s}
.qwrap{background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:34px 26px;margin-top:14px;border:1px solid var(--lav-l)}
.expr{font-family:'Oswald',sans-serif;font-size:56px;font-weight:600;letter-spacing:2px;margin:10px 0;color:var(--indigo)}
.expr small{font-size:24px;color:var(--muted)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.opt{font-family:'Oswald',sans-serif;font-size:30px;font-weight:600;padding:20px;border-radius:14px;background:var(--lav-l);color:var(--indigo-d);
  cursor:pointer;border:3px solid transparent;transition:transform .06s}
.opt:hover{transform:translateY(-2px);border-color:var(--lav)}
.opt.right{background:#d7f2e3;color:var(--green);border-color:var(--green)}
.opt.wrong{background:#ffe0dd;color:var(--red);border-color:var(--red)}
.bigInput{font-family:'Oswald',sans-serif;font-size:44px;font-weight:600;text-align:center;width:190px;padding:10px;border:3px solid var(--lav);border-radius:14px;color:var(--indigo)}
.bigInput:focus{outline:none;border-color:var(--yellow-d)}
.apple-groups{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.apple-group{background:var(--soft);border:2px dashed var(--orange-hot);border-radius:14px;padding:8px 10px;font-size:30px;line-height:1.4}
.timer{font-family:'Oswald',sans-serif;font-weight:600;font-size:22px;color:var(--red)}
.timer.ok{color:var(--green)}
.yn{display:flex;gap:16px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.feedback{font-size:16px;margin-top:10px;min-height:24px;font-weight:800}
.feedback.ok{color:var(--green)}.feedback.no{color:var(--red)}

/* match */
.match-cols{display:flex;gap:30px;justify-content:center;margin-top:10px}
.match-col{display:flex;flex-direction:column;gap:10px}
.mtile{font-family:'Oswald',sans-serif;padding:14px 18px;border-radius:12px;background:var(--lav-l);font-weight:600;font-size:24px;cursor:pointer;border:3px solid transparent;min-width:90px;color:var(--indigo-d)}
.mtile.sel{border-color:var(--yellow-d)}
.mtile.done{background:#d7f2e3;color:var(--green);cursor:default;opacity:.7}
.mtile.wrong{border-color:var(--red)}

/* Таблица Шульте */
.schulte{display:grid;gap:8px;margin:16px auto}
.scell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:'Oswald',sans-serif;
  font-size:26px;font-weight:600;background:var(--lav-l);color:var(--indigo-d);border-radius:10px;cursor:pointer;
  user-select:none;border:3px solid transparent;transition:.1s}
.scell:hover{border-color:var(--lav)}
.scell.done{background:#d7f2e3;color:var(--green);cursor:default;border-color:var(--green)}
.scell.wrong{border-color:var(--red);background:#ffe0dd;color:var(--red)}
.schulte-status{font-family:'Oswald',sans-serif;font-weight:600;font-size:22px;color:var(--indigo);margin:10px 0}

/* Найди пару (мемори) */
.pairs-grid{display:grid;gap:10px;margin:16px auto}
.pcard{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:34px;
  background:var(--indigo);border-radius:12px;cursor:pointer;border:3px solid transparent;transition:.15s;
  box-shadow:0 4px 10px rgba(46,42,124,.20)}
.pcard::after{content:'?';color:rgba(255,255,255,.5);font-family:'Oswald',sans-serif;font-size:26px}
.pcard.up,.pcard.done{background:#fff}
.pcard.up::after,.pcard.done::after{content:''}
.pcard.up{border-color:var(--yellow)}
.pcard.done{background:#d7f2e3;border-color:var(--green)}

/* Умночтение */
.reading-text{text-align:left;font-size:18px;line-height:1.75;background:var(--soft);border-radius:14px;padding:18px 20px;margin:12px 0;color:var(--ink)}
.reading-timer{font-family:'Oswald',sans-serif;font-size:20px;font-weight:600;color:var(--indigo)}

/* Флеш-карточки */
.flashcard{background:var(--indigo);color:var(--vanilla);border-radius:18px;padding:36px 24px;font-family:'Oswald',sans-serif;
  font-size:40px;font-weight:600;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;box-shadow:var(--shadow);margin:8px 0}
.flashcard .flashback{font-family:'Montserrat',sans-serif;font-size:22px;font-weight:600;margin-top:16px;padding-top:16px;
  border-top:2px solid rgba(255,255,255,.25);color:var(--vanilla)}

/* Чтение: буквы / слоги / слова */
.read-target-row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:6px 0 10px}
.read-target{font-family:'Oswald',sans-serif;font-weight:600;font-size:76px;line-height:1;color:var(--indigo);letter-spacing:1px}
.read-target.read-hidden{color:var(--lav);font-size:56px}
.read-target.rt-small{font-size:36px;max-width:92%;line-height:1.15}
.build-slot{white-space:nowrap;padding:0 12px}
.build-tile{white-space:nowrap}
.opt.opt-big{font-size:40px;padding:22px}
.build-slots{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.build-slot{min-width:70px;height:64px;border:3px dashed var(--lav);border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-family:'Oswald',sans-serif;font-size:32px;font-weight:600;color:var(--indigo)}
.build-slot.filled{border-style:solid;border-color:var(--green);background:#d7f2e3}
.build-tiles{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.build-tile{font-family:'Oswald',sans-serif;font-size:30px;font-weight:600;padding:14px 20px;border-radius:12px;
  background:var(--lav-l);color:var(--indigo-d);cursor:pointer;border:3px solid transparent;user-select:none;transition:.1s}
.build-tile:hover{border-color:var(--lav);transform:translateY(-2px)}
.build-tile.used{opacity:.35;cursor:default;transform:none;border-color:transparent}
.build-tile.wrong{border-color:var(--red);background:#ffe0dd}

/* stroop */
.stroop-word{font-family:'Oswald',sans-serif;font-size:60px;font-weight:600;margin:14px 0}
.color-opts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.color-opt{padding:16px;border-radius:12px;color:#fff;font-weight:800;cursor:pointer;font-size:14px;border:3px solid rgba(0,0,0,.06);text-shadow:0 1px 2px rgba(0,0,0,.25)}

/* result */
.result{text-align:center}
.result .mascot-big{height:150px;filter:drop-shadow(0 10px 18px rgba(46,42,124,.2));margin-bottom:6px}
.level-pill{display:inline-block;padding:8px 20px;border-radius:30px;font-weight:800;font-size:17px;margin:10px;font-family:'Oswald',sans-serif;letter-spacing:.5px}
.level-Мастер{background:#d7f2e3;color:var(--green)}
.level-Уверенный{background:var(--lav-l);color:var(--indigo-d)}
.level-Новичок{background:#fff3cf;color:var(--orange-d)}

/* tables */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--lav-l)}
th{color:var(--indigo);font-size:12px;text-transform:uppercase;letter-spacing:.4px;font-weight:800}
tr:hover td{background:var(--soft)}
.tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:800}
.tag.g{background:#d7f2e3;color:var(--green)}.tag.y{background:#fff3cf;color:var(--orange-d)}.tag.r{background:#ffe0dd;color:var(--red)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:20px}
.stat{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:18px;text-align:center;border:1px solid var(--lav-l);border-top:4px solid var(--yellow)}
.stat .n{font-family:'Oswald',sans-serif;font-size:34px;font-weight:600;color:var(--indigo)}
.stat .l{color:var(--muted);font-size:13px;font-weight:700}

.tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.tab{padding:9px 16px;border-radius:10px;font-weight:800;cursor:pointer;background:var(--lav-l);color:var(--indigo-d);font-size:14px}
.tab.active{background:var(--indigo);color:var(--vanilla)}
.age-tabs{margin-bottom:6px}
.age-tabs .tab{font-size:13px;padding:7px 13px}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--indigo);color:#fff;padding:12px 22px;border-radius:12px;font-weight:700;opacity:0;
  transition:.25s;z-index:50;box-shadow:var(--shadow-lg)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.err{background:var(--red)}

.modal-bg{position:fixed;inset:0;background:rgba(35,32,99,.55);display:flex;align-items:center;justify-content:center;z-index:40;padding:16px}
.modal{background:#fff;border-radius:18px;padding:24px;max-width:560px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow-lg)}
.modal h3{margin-top:0}
.close-x{float:right;cursor:pointer;font-size:22px;color:var(--muted)}
code{background:var(--soft);padding:1px 6px;border-radius:6px;font-size:12px}

/* динамика (спарклайн) */
.spark{display:flex;align-items:flex-end;gap:3px;height:70px;margin:12px 0 6px;padding:6px;background:var(--soft);border-radius:10px;overflow-x:auto}
.sbar{width:9px;min-width:9px;border-radius:3px 3px 0 0}

/* ===== АДАПТИВ ===== */
/* планшеты */
@media(max-width:768px){
  main#app{padding:20px 14px 48px}
  .hero h1{font-size:38px}
  .card{padding:20px}
  .match-cols{gap:20px}
}

/* телефоны */
@media(max-width:560px){
  #topbar{padding:10px 14px}
  .brand-logo{display:none}
  .brand-mono{display:block;height:34px}
  #nav{gap:2px}
  #nav .chip{padding:7px 9px;font-size:13px}
  #nav .who{display:none}
  main#app{padding:16px 12px 44px}

  .hero{padding:16px 4px 4px}
  .hero h1{font-size:27px}
  .hero p{font-size:15px}
  .hero-mascots img{height:62px}
  .guest-hero{padding:18px 10px 16px;border-radius:20px}
  .hero-card{padding:18px 14px}
  .hero-logo{max-width:92%}

  .grid.cards{grid-template-columns:1fr;gap:14px}
  .card{padding:18px}
  .tcard{padding:18px}
  .tcard .cardmascot{height:58px}

  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .stat{padding:14px}
  .stat .n{font-size:26px}

  .qwrap{padding:22px 14px;border-radius:18px}
  .expr{font-size:38px}
  .expr small{font-size:17px}
  .opts{gap:10px}
  .opt{font-size:22px;padding:14px;word-break:break-word}
  .bigInput{font-size:38px;width:150px}
  .stroop-word{font-size:44px}
  .flashcard{font-size:30px;padding:28px 16px}
  .color-opts{gap:8px}
  .color-opt{font-size:12px;padding:13px 8px}

  /* сетки Шульте/мемори — вписать в экран */
  .schulte,.pairs-grid{max-width:94vw !important}
  .scell,.pcard{font-size:20px}
  .match-cols{gap:14px}
  .mtile{font-size:20px;padding:12px;min-width:66px}

  /* таблицы — горизонтальный скролл вместо разъезжания */
  table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  th,td{padding:8px 9px;font-size:12px}

  .btn{font-size:14px;padding:12px 18px}
  .btn.small{padding:7px 12px}
  .modal{padding:18px}
  .level-pill{font-size:15px;padding:7px 16px}
  .reading-text{font-size:16px;padding:14px 16px}
}

/* очень узкие телефоны */
@media(max-width:380px){
  .opts{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .hero h1{font-size:24px}
  .expr{font-size:32px}
}

/* печать отчёта педагога */
@media print{
  #topbar,#footer,#nav,.noprint{display:none !important}
  body{background:#fff}
  main#app{padding:0;max-width:100%}
  .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  .stat{box-shadow:none;border:1px solid #ccc}
  .spark{overflow:visible}
  table{font-size:12px}
  h2,h3{color:#000}
}