/* Дизайн-система трекера: спокойная база («ясный день») + игровые акценты для сына.
   Светлая/тёмная темы через prefers-color-scheme. Подключается на всех страницах. */

:root{
  --paper:#F2F5F9; --card:#FFFFFF; --row:#F4F7FB; --ink:#1F2A37; --muted:#5D6B7A;
  --accent:#4A5FD0; --accent-soft:#E9EEFA; --accent-border:#C9D4F2;
  --good:#4C9A63; --good-deep:#3B7A4D; --good-soft:#EAF4ED;
  --warn:#C25B5B; --warn-soft:#FBF2F1; --warn-border:#E3BFBF;
  --gold:#E9B23C; --gold-deep:#B98A24; --gold-soft:#FBF3DE;
  --line:#DFE5EE; --shadow:0 1px 3px rgba(31,42,55,.07);
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#141A22; --card:#1C242E; --row:#232C37; --ink:#E7ECF2; --muted:#93A2B1;
    --accent:#8CA2E8; --accent-soft:#26324D; --accent-border:#39496E;
    --good:#7FC494; --good-deep:#2E5C3E; --good-soft:#22382A;
    --warn:#E08A84; --warn-soft:#3A2A29; --warn-border:#5C3E3C;
    --gold:#D9B45C; --gold-deep:#8A6A22; --gold-soft:#3A3321;
    --line:#2A3542; --shadow:0 1px 3px rgba(0,0,0,.28);
  }
}

*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"Golos Text","Segoe UI",system-ui,sans-serif; font-size:15px; line-height:1.5}
h1{font-size:1.55rem; margin:0; letter-spacing:-.015em; font-weight:700}
h2{font-size:1.02rem; margin:30px 0 12px; color:var(--muted); font-weight:700; letter-spacing:.02em}
.sub{color:var(--muted); font-size:.86rem}

/* --- карточки --- */
.card{background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:16px 18px; box-shadow:var(--shadow)}

/* --- кнопки --- */
.btnlink{display:inline-flex; align-items:center; gap:8px; background:var(--card);
  border:1px solid var(--line); color:var(--ink); border-radius:999px; padding:10px 20px;
  text-decoration:none; font-size:.92rem; font-weight:600; box-shadow:var(--shadow)}
.btnlink:hover{border-color:var(--accent); color:var(--accent)}
.btnlink svg{flex:none}
.navpill{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px;
  border-radius:999px; background:var(--row); text-decoration:none; font-size:.9rem;
  font-weight:600; color:var(--ink)}
.navpill:hover{background:var(--accent-soft); color:var(--accent)}
.navpill svg{flex:none}
/* игровая «нажимающаяся» кнопка */
.gamebtn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  min-height:52px; border-radius:14px; border:none; cursor:pointer; font:inherit;
  font-weight:700; font-size:1.05rem; background:var(--good); color:#fff;
  box-shadow:0 4px 0 var(--good-deep); transition:transform .06s, box-shadow .06s}
.gamebtn:hover{filter:brightness(1.05)}
.gamebtn:active{transform:translateY(3px); box-shadow:0 1px 0 var(--good-deep)}
.gamebtn.on{background:var(--good-soft); color:var(--good); box-shadow:none;
  border:2px solid var(--good)}
.gamebtn:disabled{opacity:.7; cursor:wait}
.gamebtn[hidden]{display:none}
@media (prefers-color-scheme: dark){
  .gamebtn{background:#3E8B57; box-shadow:0 4px 0 #275C3A}
  .gamebtn:active{box-shadow:0 1px 0 #275C3A}
  .gamebtn.on{background:var(--good-soft); box-shadow:none}
}

/* --- статусные пилюли --- */
.pill{font-size:.72rem; font-weight:700; border-radius:999px; padding:3px 10px; white-space:nowrap}
.pill.ok{background:var(--good-soft); color:var(--good)}
.pill.run{background:var(--accent-soft); color:var(--accent)}
.pill.idle{background:var(--row); color:var(--muted)}

/* --- прогресс --- */
.bar{height:12px; background:var(--row); border-radius:999px; overflow:hidden; margin:8px 0 6px}
.bar i{display:block; height:100%; background:var(--accent); border-radius:999px;
  min-width:6px; transition:width .3s}
.bar.goodbar i{background:var(--good)}

/* --- метки предметов --- */
.tag{font-size:.68rem; font-weight:700; letter-spacing:.04em; padding:3px 8px;
  border-radius:999px; flex:none; color:var(--tagc, var(--muted));
  background:var(--row)}
@supports (background: color-mix(in srgb, red 10%, white)){
  .tag{background:color-mix(in srgb, var(--tagc, var(--muted)) 13%, var(--card))}
}
.tag-mat{--tagc:#4A5FD0} .tag-rus{--tagc:#A24A6B} .tag-eng{--tagc:#3A7CA5}
.tag-lit{--tagc:#8A5AA5} .tag-hist{--tagc:#A2703A} .tag-bio{--tagc:#3E8B52}
.tag-geo{--tagc:#2E8B8B} .tag-izo{--tagc:#C4573E} .tag-muz{--tagc:#7A5AC4}
.tag-tech{--tagc:#6E7A3A} .tag-phys{--tagc:#C28A3A}
@media (prefers-color-scheme: dark){
  .tag-mat{--tagc:#94A7EE} .tag-rus{--tagc:#D98BA8} .tag-eng{--tagc:#7FB6D9}
  .tag-lit{--tagc:#BC96D9} .tag-hist{--tagc:#D3A56E} .tag-bio{--tagc:#83C495}
  .tag-geo{--tagc:#6FC0C0} .tag-izo{--tagc:#E69580} .tag-muz{--tagc:#B29AE4}
  .tag-tech{--tagc:#AFC069} .tag-phys{--tagc:#DDB176}
}

/* --- круглые чекбоксы (игровой акцент) --- */
input.cbx{appearance:none; -webkit-appearance:none; width:24px; height:24px; margin:0;
  border:2px solid var(--line); border-radius:50%; background:var(--card); flex:none;
  cursor:pointer; display:inline-grid; place-content:center; transition:all .12s}
input.cbx:hover{border-color:var(--good)}
input.cbx:checked{background:var(--good); border-color:var(--good)}
input.cbx:checked::before{content:""; width:13px; height:13px;
  background:#fff; clip-path:polygon(14% 46%, 0 66%, 38% 100%, 100% 22%, 84% 6%, 37% 66%)}
input.cbx:disabled{opacity:.6; cursor:wait}

/* --- дроби (фильтр fractions) --- */
.frac{display:inline-flex; flex-direction:column; vertical-align:middle;
  text-align:center; line-height:1.05; font-size:.82em; margin:0 1px;
  font-variant-numeric:tabular-nums}
.frac .num{border-bottom:1px solid currentColor; padding:0 3px 1px}
.frac .den{padding:1px 3px 0}
.mixed{white-space:nowrap}

/* --- спойлеры (ответы/подсказки) --- */
.spoiler{margin:0; border:none; padding:0; display:inline-block}
.spoiler summary{font-size:.82rem; color:var(--accent); list-style:none; cursor:pointer}
.spoiler summary::before{content:"▸ "}
.spoiler[open] summary::before{content:"▾ "}
.flag{background:none; border:none; color:var(--muted); font-size:.75rem; padding:0;
  text-decoration:underline dotted; cursor:pointer}
.flag.on{color:var(--warn); text-decoration:none; font-weight:700}
.star{color:var(--gold-deep)}