/* ===== Дизайн-токены ===== */
/* Принцип: фон/панели/текст — нейтральный холодный уголь (БЕЗ зелёного подтона).
   Зелёный изумруд живёт ТОЛЬКО в акценте: кнопки, плеер, прогресс, активные состояния. */
:root{
  --bg: oklch(0.984 0.003 240);             /* чистый нейтральный, лёгкий холод */
  --bg-elev: oklch(0.997 0.002 240);
  --surface: #ffffff;
  --surface-2: oklch(0.965 0.004 240);
  --border: oklch(0.912 0.005 240);
  --border-strong: oklch(0.842 0.007 240);
  --text: oklch(0.235 0.012 240);
  --text-2: oklch(0.47 0.01 240);
  --text-3: oklch(0.62 0.009 240);
  --accent: oklch(0.52 0.085 183);          /* петроль-зелёный — акцент */
  --accent-hover: oklch(0.46 0.09 183);
  --accent-2: oklch(0.6 0.08 185);
  --accent-soft: oklch(0.95 0.028 185);
  --accent-fg: #ffffff;
  --glass-bg: rgba(255,255,255,.62);
  --glass-border: rgba(255,255,255,.55);
  --glass-blur: 22px;
  --shadow: 0 2px 6px rgba(15,23,42,.05), 0 14px 34px -14px rgba(15,23,42,.13);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06);
  --shadow-accent: 0 0 0 transparent;       /* тени кнопок убраны — плоско и чисто */
  --glow: 0 0 0 transparent;                /* свечения убраны — чистый плоский стиль */
  --accent-btn-1: #00665E;                  /* фирменный тёмно-зелёный (петроль) — плоский однотонный */
  --accent-btn-2: #00665E;
  --danger: #e0342a;                        /* насыщенный сигнальный красный (пропуски) */
  --r: 14px; --r-sm: 10px; --r-lg: 20px;
  /* единая типографика: SF Pro на Apple-устройствах (как в референсе), Inter — фолбэк */
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, sans-serif;
}
[data-theme="dark"]{
  --bg: oklch(0.121 0.014 256);             /* глубокий чёрно-синий — контраст с белым максимальный */
  --bg-elev: oklch(0.148 0.015 256);
  --surface: oklch(0.164 0.016 256);        /* панель лежит на фоне, шаг едва уловимый */
  --surface-2: oklch(0.203 0.017 256);
  --border: oklch(0.243 0.016 256);
  --border-strong: oklch(0.325 0.018 256);
  --text: oklch(0.995 0.002 260);           /* чистый белый */
  --text-2: oklch(0.845 0.008 258);         /* серебристый вторичный */
  --text-3: oklch(0.635 0.012 258);         /* подписи — читаемо-светлые */
  --accent: oklch(0.7 0.09 183);            /* приглушённый петроль-зелёный (в тон #00665E) */
  --accent-hover: oklch(0.75 0.09 183);
  --accent-2: oklch(0.76 0.085 186);
  --accent-soft: oklch(0.265 0.032 185);
  --accent-fg: #ffffff;
  --glass-bg: rgba(14,20,35,.55);
  --glass-border: rgba(255,255,255,.09);
  --glass-blur: 26px;
  --shadow: 0 1px 2px rgba(0,0,0,.25);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.22);
  --shadow-accent: 0 0 0 transparent;
  --glow: 0 0 0 transparent;
  --danger: #ff453a;                        /* сочный красный на тёмном (iOS) */
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:row; min-height:100vh;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ opacity:.82; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:5px; }
button{ font-family:inherit; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:8px; border:3px solid var(--bg); }
::-webkit-scrollbar-track{ background:transparent; }
@keyframes qFadeUp{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
@keyframes qPop{ from{ transform:scale(.6); opacity:0;} to{ transform:scale(1); opacity:1;} }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

.mono{ font-family:var(--font-ui); font-variant-numeric:tabular-nums; }
/* цифры выравниваются табличной шириной — без моноширинного шрифта */
.stat-value,.cal-cell,.ptime,.ring-value,.streak-num,.topbar-streak,.summary-meta,.task-meta{ font-variant-numeric:tabular-nums; }

/* ===== Сайдбар (десктоп) ===== */
.sidebar{
  width:250px; flex-shrink:0; height:100vh; position:sticky; top:0;
  border-right:1px solid var(--border); background:var(--surface);
  display:flex; flex-direction:column; padding:26px 18px;
}
.brand{ display:flex; align-items:center; gap:11px; padding:0 8px 8px; color:inherit; }
.brand:hover{ opacity:1; }
.brand-logo{
  width:38px; height:38px; border-radius:11px; color:#fff;
  background:var(--accent-btn-1);
  display:flex; align-items:center; justify-content:center;
}
.brand-logo svg{ width:22px; height:22px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-name{ font-family:var(--font-ui); font-weight:800; font-size:18px; letter-spacing:.14em; }
.brand-pro{ font-family:'Amiri',serif; font-size:12px; font-weight:400; letter-spacing:0; color:var(--accent); margin-top:1px; }

.sidebar nav{ display:flex; flex-direction:column; gap:4px; margin-top:26px; }
.nav-btn{
  display:flex; align-items:center; gap:11px; padding:11px 14px; width:100%;
  border-radius:var(--r); border:none; cursor:pointer; font-size:14px; font-weight:500;
  text-align:left; transition:background .15s ease, color .15s ease;
  background:transparent; color:var(--text-2);
}
.nav-btn:hover{ background:var(--surface-2); color:var(--text); opacity:1; }
.nav-btn.active{ background:var(--accent-soft); color:var(--accent); font-weight:600; }
.nav-btn.active:hover{ background:var(--accent-soft); }

/* иконки навигации: контур → заливка с пружинным «поп» (как в iOS) */
.nav-ic{ display:inline-flex; align-items:center; justify-content:center; }
.nav-ic .ic-o, .nav-ic .ic-f{ display:inline-flex; }
.nav-ic .ic-f{ display:none; }
.nav-btn.active .nav-ic .ic-o{ display:none; }
.nav-btn.active .nav-ic .ic-f{ display:inline-flex; animation:icPop .45s cubic-bezier(.34,1.56,.64,1); }
.nav-btn:active .nav-ic{ transform:scale(.86); transition:transform .1s; }
@keyframes icPop{ 0%{ transform:scale(.55); } 62%{ transform:scale(1.14); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion:reduce){ .nav-btn.active .nav-ic .ic-f{ animation:none; } }
.sidebar .nav-btn{ position:relative; }
.sidebar .nav-btn.active::before{ content:''; position:absolute; left:-18px; top:50%; transform:translateY(-50%);
  width:3px; height:20px; border-radius:0 3px 3px 0; background:linear-gradient(var(--accent-2),var(--accent)); }

.sidebar-bottom{ margin-top:auto; display:flex; flex-direction:column; gap:12px; }
.streak-card{
  display:flex; align-items:center; gap:11px; padding:13px 14px;
  border-radius:var(--r); background:var(--surface-2);
}
.streak-card svg{ color:var(--accent); }
.streak-num{ font-family:var(--font-ui); font-weight:600; font-size:15px; color:var(--text); line-height:1.15; }
.streak-sub{ font-size:11px; color:var(--text-2); line-height:1.15; }

.theme-btn{
  display:flex; align-items:center; gap:11px; padding:11px 14px;
  border-radius:var(--r); border:1px solid var(--border); background:transparent;
  color:var(--text-2); cursor:pointer; font-size:13px; font-weight:500;
  transition:background .15s ease, color .15s ease;
}
.theme-btn:hover{ background:var(--surface-2); color:var(--text); }
[data-theme="dark"] .only-light{ display:none !important; }
html:not([data-theme="dark"]) .only-dark{ display:none !important; }

/* ===== Мобильная шапка и нижняя навигация ===== */
.topbar{
  display:none; position:sticky; top:0; z-index:20;
  align-items:center; justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top,0px)) 18px 14px;
  background:var(--surface); border-bottom:1px solid var(--border);
}
.topbar .brand-logo{ width:32px; height:32px; border-radius:9px; }
.topbar-streak{
  display:flex; align-items:center; gap:6px; padding:7px 11px;
  border-radius:999px; background:var(--surface-2);
  font-family:var(--font-ui); font-weight:600; font-size:13px; color:var(--text);
}
.topbar-streak svg{ color:var(--accent); }
.topbar .theme-btn{ width:38px; height:38px; padding:0; justify-content:center; border-radius:10px; }

.bottomnav{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:20;
  background:color-mix(in srgb, var(--surface) 68%, transparent);
  backdrop-filter:saturate(1.7) blur(24px); -webkit-backdrop-filter:saturate(1.7) blur(24px);
  border-top:1px solid color-mix(in srgb, #ffffff 8%, transparent);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.bottomnav .nav-btn svg{ margin-bottom:1px; }
.bottomnav .nav-btn{
  position:relative;
  flex:1; flex-direction:column; gap:4px; padding:6px 0; align-items:center;
  background:transparent; border-radius:0; color:var(--text-3); font-size:10.5px;
  min-width:0;
}
.bottomnav .nav-btn span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bottomnav .nav-btn.active{ background:transparent; color:var(--accent); }
.bottomnav .nav-btn.active::before{ content:''; position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  width:24px; height:3px; border-radius:0 0 3px 3px; background:linear-gradient(90deg,var(--accent-2),var(--accent)); }

/* ===== Контент ===== */
main.content{ flex:1; min-width:0; height:100vh; overflow-y:auto; }
.container{
  max-width:1040px; margin:0 auto; padding:40px 44px;
}
/* вес + движение: элементы страницы «въезжают» ступенчато */
.container > *{ animation:qFadeUp .5s cubic-bezier(.2,.7,.2,1) both; }
.container > *:nth-child(2){ animation-delay:.05s; }
.container > *:nth-child(3){ animation-delay:.1s; }
.container > *:nth-child(4){ animation-delay:.15s; }
.container > *:nth-child(n+5){ animation-delay:.2s; }

.page-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:28px;
}
.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-2); margin-bottom:7px;
}
.eyebrow.accent{ color:var(--text-2); }
.eyebrow.accent svg{ color:var(--accent); }
h1.page-title{
  margin:0; font-family:var(--font-ui); font-weight:800; font-size:30px;
  letter-spacing:-.03em; line-height:1.08;
}

.btn-accent{
  display:inline-flex; align-items:center; gap:8px; padding:12px 20px;
  border-radius:var(--r); color:#fff; border:none; cursor:pointer;
  font-size:14.5px; font-weight:800; letter-spacing:-.01em;
  background:var(--accent-btn-1);
  transition:filter .15s ease, transform .12s ease;
}
.btn-accent:hover{ filter:brightness(1.1); opacity:1; }
.btn-accent:active{ transform:scale(.985); filter:brightness(.96); }
.btn-secondary{
  display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:var(--r);
  background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)) saturate(1.5); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5);
  color:var(--text); border:1px solid var(--glass-border); cursor:pointer; font-size:14px; font-weight:600;
  transition:transform .16s cubic-bezier(.2,.7,.2,1), border-color .15s, background .15s;
}
.btn-secondary:hover{ border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); transform:translateY(-1px); opacity:1; }
.btn-secondary:active{ transform:translateY(0); }

.glass{ background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)) saturate(1.6);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.6); border:1px solid var(--glass-border); }

.card{
  position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:26px; margin-bottom:26px;
}
/* карточки-ссылки: текст белый, зелёный не перетекает в заголовки */
a.card{ color:var(--text); }
/* тонкая верхняя грань-подсветка — объём */
.card::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55); }
[data-theme="dark"] .card::after{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }

/* ===== Карта месяца ===== */
.month-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:22px;
}
.month-title{ margin:0; font-family:var(--font-ui); font-weight:700; font-size:22px; letter-spacing:-.01em; }
.month-sub{ margin:6px 0 0; font-size:13px; color:var(--text-2); }
.month-nav{ display:flex; align-items:center; gap:6px; }
.month-nav-btn{
  width:34px; height:34px; border-radius:9px; border:1px solid var(--border);
  background:transparent; color:var(--text-2); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .15s;
}
.month-nav-btn:hover{ background:var(--surface-2); opacity:1; }
.month-nav-btn[disabled]{ color:var(--text-3); cursor:not-allowed; }
.month-nav-btn[disabled]:hover{ background:transparent; }

.cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-bottom:10px; }
.cal-weekdays div{ text-align:center; font-size:11.5px; font-weight:700; color:var(--text-2); letter-spacing:.03em; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.cal-cell{
  aspect-ratio:1; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-ui); font-size:14px; font-weight:700;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1); user-select:none;
  color:var(--text); text-decoration:none; font-variant-numeric:tabular-nums;
  animation:qFadeUp .45s cubic-bezier(.2,.7,.2,1) both;
}
/* каскадное появление по неделям */
.cal-cell:nth-child(-n+7){ animation-delay:.02s; }
.cal-cell:nth-child(n+8):nth-child(-n+14){ animation-delay:.06s; }
.cal-cell:nth-child(n+15):nth-child(-n+21){ animation-delay:.1s; }
.cal-cell:nth-child(n+22):nth-child(-n+28){ animation-delay:.14s; }
.cal-cell:nth-child(n+29){ animation-delay:.18s; }
.cal-grid .cal-cell:hover{ transform:scale(1.1); opacity:1; }
.cal-cell.lv0{ background:var(--surface-2); }
.cal-cell.lv1{ background:color-mix(in srgb, var(--accent-btn-1) 34%, var(--surface)); color:var(--text); }
.cal-cell.lv2{ background:color-mix(in srgb, var(--accent-btn-1) 60%, var(--surface)); color:#fff; }
.cal-cell.lv3{ background:color-mix(in srgb, var(--accent-btn-1) 82%, var(--surface)); color:#fff; }
.cal-cell.lv4{ background:linear-gradient(150deg, color-mix(in srgb, var(--accent-btn-1) 86%, #fff), color-mix(in srgb, var(--accent-btn-1) 80%, #000)); color:#fff; }
.cal-cell.future{ background:color-mix(in srgb, var(--surface-2) 45%, transparent); color:var(--text-3); }
.cal-cell.today{ box-shadow:0 0 0 2.5px var(--bg), 0 0 0 5px var(--accent); font-weight:800; }
/* пропущенный день: сплошная красная плитка с белым крестом — как lv4, только провал */
.cal-cell{ position:relative; }
.cal-cell.miss{ color:transparent;
  background:linear-gradient(150deg, #a63229, #6e1d16); }
.cal-cell.miss .cal-x{ position:absolute; inset:0; margin:auto; width:44%; height:44%;
  color:#fff; animation:xPop .55s cubic-bezier(.34,1.56,.64,1) both; animation-delay:inherit;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1); }
.cal-cell.miss:hover .cal-x{ transform:scale(1.2) rotate(8deg); }
/* цель дня выполнена: парная петрольная плитка с белой галочкой */
.cal-cell.hit{ color:transparent;
  background:linear-gradient(150deg, color-mix(in srgb, var(--accent-btn-1) 86%, #fff), color-mix(in srgb, var(--accent-btn-1) 80%, #000)); }
.cal-cell.hit .cal-ok{ position:absolute; inset:0; margin:auto; width:46%; height:46%;
  color:#fff; animation:xPop .55s cubic-bezier(.34,1.56,.64,1) both; animation-delay:inherit;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1); }
.cal-cell.hit:hover .cal-ok{ transform:scale(1.2) rotate(-6deg); }
@keyframes xPop{ 0%{ transform:scale(.2); opacity:0; } 70%{ transform:scale(1.18); opacity:1; } 100%{ transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion:reduce){ .cal-cell.miss .cal-x{ animation:none; } }
.legend-miss{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--danger); font-weight:700; }

.cal-footer{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:20px; padding-top:18px; border-top:1px solid var(--border);
  font-size:12px; color:var(--text-2);
}
.legend{ display:flex; align-items:center; gap:9px; }
.legend-swatches{ display:flex; gap:4px; }
.legend-swatches span{ width:15px; height:15px; border-radius:5px; display:block; }
.legend-swatches .s0{ background:var(--surface-2); border:1px solid var(--border); }
.legend-swatches .s1{ background:color-mix(in srgb, var(--accent-btn-1) 34%, var(--surface)); }
.legend-swatches .s2{ background:color-mix(in srgb, var(--accent-btn-1) 60%, var(--surface)); }
.legend-swatches .s3{ background:color-mix(in srgb, var(--accent-btn-1) 82%, var(--surface)); }
.legend-swatches .s4{ background:var(--accent-btn-1); }
.legend-today{ display:flex; align-items:center; gap:7px; font-size:13px; }
.legend-today span{
  width:13px; height:13px; border-radius:5px; display:inline-block;
  box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent);
}

/* ===== Статкарты ===== */
.stat-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:14px; margin-bottom:22px;
}
.stat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow-sm); padding:18px;
}
.stat-head{ display:flex; align-items:center; gap:8px; color:var(--text-2); margin-bottom:14px; font-size:12.5px; font-weight:500; }
.stat-head svg{ color:var(--accent); }
.stat-value{ font-family:var(--font-ui); font-weight:600; font-size:26px; letter-spacing:-.01em; line-height:1; }
.stat-sub{ font-size:12px; color:var(--text-3); margin-top:6px; }
.stat-sub.up{ color:var(--text-2); display:flex; align-items:center; gap:4px; }
.stat-sub.up svg{ color:var(--accent); }

/* ===== Сводка дня / прогресс-кольцо ===== */
.summary{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding:24px; }
.ring{
  width:94px; height:94px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:conic-gradient(var(--accent) calc(var(--pct,0)*1%), var(--surface-2) 0);
  transition:background .5s cubic-bezier(.2,.7,.2,1);
}
.ring-inner{
  width:74px; height:74px; border-radius:50%; background:var(--surface);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.ring-value{ font-family:var(--font-ui); font-weight:600; font-size:19px; line-height:1; }
.ring-label{ font-size:10px; color:var(--text-3); margin-top:2px; }
.summary-body{ flex:1; min-width:180px; }
.summary-title{ font-family:var(--font-ui); font-weight:700; font-size:18px; margin-bottom:4px; }
.summary-meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--text-2); }
.summary-meta .xp{ display:inline-flex; align-items:center; gap:6px; color:var(--accent); }
.summary-meta span{ display:inline-flex; align-items:center; gap:6px; }

/* ===== Задания дня ===== */
.task-list{ display:flex; flex-direction:column; gap:12px; }
.task-card{
  display:flex; align-items:center; gap:16px; padding:18px 20px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); transition:border-color .15s ease, transform .12s ease, opacity .2s ease;
}
.task-card:hover{ transform:translateY(-1px); border-color:var(--border-strong); }
.task-card.done{ opacity:.72; }
.task-icon{
  width:44px; height:44px; border-radius:var(--r); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent);
}
.task-card.done .task-icon{ background:var(--surface-2); color:var(--text-3); }
.task-body{ flex:1; min-width:0; }
.task-kind{
  font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-2); margin-bottom:3px;
}
.task-title{
  font-family:var(--font-ui); font-weight:700; font-size:15.5px; letter-spacing:-.01em;
}
.task-card.done .task-title{ text-decoration:line-through; color:var(--text-2); }
.task-meta{
  display:flex; align-items:center; gap:12px; margin-top:7px;
  font-family:var(--font-ui); font-size:12px; color:var(--text-2);
}
.task-meta .xp{ color:var(--accent); }
.task-check{
  width:30px; height:30px; border-radius:9px; flex-shrink:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, border-color .15s ease;
  border:2px solid var(--border-strong); background:transparent; color:transparent;
}
.task-card.done .task-check{ border:none; background:var(--accent); color:var(--accent-fg); }
.task-check svg{ stroke-width:3; }

.banner{
  margin-top:16px; display:flex; align-items:center; flex-wrap:wrap; gap:13px; padding:18px 20px;
  border-radius:var(--r-lg); background:var(--surface-2);
  border:1px solid var(--border);
}
.banner .btn-accent{ flex-shrink:0; }
.banner.hidden{ display:none; }
.banner svg{ color:var(--accent); animation:qPop .4s cubic-bezier(.2,.9,.3,1.2); }
.banner-title{ font-family:var(--font-ui); font-weight:700; font-size:15px; color:var(--text); }
.banner-sub{ font-size:13px; color:var(--text-2); }

/* ===== Статистика ===== */
.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.section-title{ margin:0; font-family:var(--font-ui); font-weight:800; font-size:18px; letter-spacing:-.01em; }
.section-meta{ font-family:var(--font-ui); font-size:13px; color:var(--text-2); }

.bars{ display:flex; align-items:flex-end; gap:12px; height:150px; }
.bar-col{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:9px;
  height:100%; justify-content:flex-end;
}
.bar-min{ font-family:var(--font-ui); font-size:11px; color:var(--text-3); }
.bar{
  width:100%; border-radius:7px 7px 3px 3px;
  background:color-mix(in srgb, var(--accent) 30%, var(--surface));
  transition:height .5s cubic-bezier(.2,.7,.2,1);
}
.bar.today{ background:var(--accent); }
.bar-label{ font-size:11px; font-weight:500; color:var(--text-3); }
.bar-label.today{ color:var(--accent); }

.skill-list{ display:flex; flex-direction:column; gap:17px; }
.skill-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.skill-name{ font-size:14px; font-weight:500; }
.skill-pct{ font-family:var(--font-ui); font-size:13px; font-weight:500; color:var(--text-2); }
.skill-track{ height:9px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.skill-fill{
  height:100%; border-radius:999px; background:var(--accent);
  transition:width .6s cubic-bezier(.2,.7,.2,1);
}

.empty{ text-align:center; color:var(--text-2); font-size:14px; padding:34px 20px; }

/* ===== Кликабельные задания ===== */
.task-card{ position:relative; }
.task-link{ position:absolute; inset:0; z-index:1; border-radius:var(--r-lg); }
.task-check{ position:relative; z-index:2; }

/* ===== Чипы ===== */
.chip{
  display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px;
  border:1px solid var(--border); font-size:12px; font-weight:600; color:var(--text-2);
  font-family:var(--font-ui);
}
.chip-soft{ background:var(--surface-2); border-color:transparent; color:var(--text); font-family:var(--font-ui); }

/* ===== Онбординг ===== */
.word-grid{ display:flex; flex-wrap:wrap; gap:9px; }
.word-chip input{ position:absolute; opacity:0; pointer-events:none; }
.word-chip span{
  display:inline-block; padding:9px 15px; border-radius:999px; cursor:pointer;
  border:1px solid var(--border-strong); font-size:14.5px; user-select:none;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.word-chip span:hover{ background:var(--surface-2); }
.word-chip input:checked + span{
  background:linear-gradient(150deg,var(--accent-btn-1),var(--accent-btn-2)); border-color:transparent; color:#fff; font-weight:600;
}
.word-chip input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }

/* ===== SRS-дрилл ===== */
.drill-card{ text-align:center; padding:34px 26px; }
.drill-badges{ display:flex; justify-content:center; gap:8px; margin-bottom:18px; }
.drill-word{
  font-family:var(--font-ui); font-weight:800; font-size:38px; letter-spacing:-.02em;
  line-height:1.1; overflow-wrap:anywhere;
}
.drill-sub{
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  margin-top:10px; color:var(--text-2); font-size:14px;
}
.audio-btn{
  width:34px; height:34px; border-radius:9px; border:1px solid var(--border);
  background:transparent; color:var(--accent); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; transition:background .15s;
}
.audio-btn:hover{ background:var(--surface-2); }
.drill-answer{
  font-family:var(--font-ui); font-weight:700; font-size:22px; color:var(--text);
  margin-top:22px;
}
.drill-examples{ margin-top:14px; }
.drill-examples p{ margin:6px 0; font-size:14px; color:var(--text-2); font-style:italic; }
.drill-reveal{ margin-top:26px; }
.grade-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:26px; }
.grade-btn{
  padding:13px 8px; border-radius:var(--r); border:1px solid var(--border-strong);
  background:var(--surface); color:var(--text); cursor:pointer; font-size:14px; font-weight:600;
  transition:background .12s ease, transform .1s ease;
}
.grade-btn:hover{ background:var(--surface-2); }
.grade-btn:active{ transform:translateY(1px); }
.grade-again{ color:#c0564f; border-color:color-mix(in srgb, #c0564f 45%, var(--border)); }
.grade-easy{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); }
@media (max-width:520px){ .grade-row{ grid-template-columns:repeat(2,1fr); } }

/* ===== Страницы заданий ===== */
.example-list{ display:flex; flex-direction:column; gap:14px; }
.example-row{ padding:13px 16px; border-radius:var(--r); background:var(--surface-2); }
.example-en{ font-size:15px; font-weight:600; }
.example-ru{ font-size:13.5px; color:var(--text-2); margin-top:4px; }
.question-list{ margin:0; padding-left:22px; display:flex; flex-direction:column; gap:12px; }
.question-list li{ font-size:15.5px; font-weight:500; line-height:1.5; }
.phrase-row{ display:flex; flex-wrap:wrap; gap:8px; }
.qa-list{ display:flex; flex-direction:column; gap:10px; }
.qa-item{ border:1px solid var(--border); border-radius:var(--r); padding:13px 16px; }
.qa-item summary{ cursor:pointer; font-size:14.5px; font-weight:500; }
.qa-item p{ margin:10px 0 0; font-size:14px; color:var(--text); font-weight:500; }
.dialogue-list{ display:flex; flex-direction:column; gap:10px; }
.dialogue-line{ display:flex; gap:10px; font-size:14.5px; line-height:1.5; }
.dialogue-speaker{
  font-family:var(--font-ui); font-weight:600; color:var(--accent); flex-shrink:0;
}

/* ===== Экзамен ===== */
.exam-q-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.option-list{ display:flex; flex-direction:column; gap:9px; }
.option-row{
  display:flex; align-items:center; gap:12px; padding:12px 15px; border-radius:var(--r);
  border:1px solid var(--border); cursor:pointer; font-size:14.5px;
  transition:background .12s ease, border-color .12s ease;
}
.option-row:hover{ background:var(--surface-2); }
.option-row:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.option-row input{ accent-color:var(--accent); width:16px; height:16px; }

/* ===== Мобильная вёрстка ===== */
@media (max-width:859px){
  body{ flex-direction:column; }
  .sidebar{ display:none; }
  .topbar{ display:flex; }
  .bottomnav{ display:flex; }
  main.content{ height:auto; padding-bottom:84px; }
  .container{ max-width:100%; padding:20px 16px 10px; }
}

/* ===== Иконки интерфейса: белый монохром на нейтральных плитках (премиум) ===== */
.row-ic, .row-ic svg, .lm-ic, .lm-ic svg, .task-icon, .stat-head svg, .banner > svg,
.streak-card svg, .topbar-streak svg, .record-icon, .mstat-ic, .manage-ic, .ea-ic, .fld-ic,
.hero-flame svg, .eyebrow.accent svg, .u-eyebrow svg, .hod-badge svg, .u-virtue svg,
.h-benefit svg, .qwpop-add svg{ color:var(--text) !important; }
/* плитки под иконками — нейтральные, без зелени */
.row-ic, .task-icon, .record-icon, .mstat-ic, .manage-ic, .ea-ic, .fld-ic, .pstat-icon{
  background:var(--surface-2) !important; }

/* нижняя навигация: белые иконки, подписи ярче */
.bottomnav .nav-btn{ color:var(--text-2); font-weight:600; }
.bottomnav .nav-btn .nav-ic{ color:var(--text); }
.bottomnav .nav-btn.active, .bottomnav .nav-btn.active .nav-ic{ color:var(--accent); }
.sidebar .nav-btn .nav-ic{ color:var(--text); }
.sidebar .nav-btn.active .nav-ic{ color:var(--accent); }
.gring-icon{ color:var(--text-2); }
.gring.done .gring-icon{ color:var(--text); }
/* живость: плитка-иконка пружинит на наведении и тапе */
.row-ic, .task-icon, .record-icon, .lm-ic{ transition:transform .2s cubic-bezier(.34,1.56,.64,1); }
.rows .row:hover .row-ic{ transform:scale(1.1); }
.rows .row:active .row-ic{ transform:scale(.9); }
.task-card:hover .task-icon{ transform:scale(1.08); }

/* ===== Микро-движение: единый пружинный отклик (премиум, без шума) ===== */
/* кнопки и контролы: живой spring-пресс */
.btn-accent, .btn-secondary, .ztab, .ptog, .grade-btn, .apager, .fbtn, .month-nav-btn,
.theme-btn, .stepper button, .listen-cta, .acard-flip, .np-x, .qwpop-x,
.alesson-close, .rc-back, .switch, .avatar-edit, .photo-remove, .zreset{
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), filter .15s ease,
    background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.btn-secondary:hover, .ztab:hover, .ptog:hover, .month-nav-btn:hover,
.theme-btn:hover, .apager:hover, .fbtn:hover{ transform:translateY(-1px); }
.btn-accent:active, .btn-secondary:active, .ztab:active, .ptog:active, .grade-btn:active,
.apager:active, .fbtn:active, .month-nav-btn:active, .theme-btn:active, .stepper button:active,
.listen-cta:active, .acard-flip:active, .np-x:active, .qwpop-x:active, .alesson-close:active,
.rc-back:active, .switch:active, .avatar-edit:active{ transform:scale(.93); }

/* карточки-ссылки и строки: подъём на наведении, прижатие под пальцем */
a.card, .sec-link, .task-card, .zrow-head, .hitem-head, .rows .row, .learn-cta, .learn-review{
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), border-color .15s ease, background .15s ease;
}
a.card:hover, .sec-link:hover, .learn-cta:hover{ transform:translateY(-2px); }
.learn-review:hover{ transform:translateY(-1px); }
a.card:active, .sec-link:active, .task-card:active, .zrow-head:active,
.hitem-head:active, .rows .row:active, .learn-cta:active, .learn-review:active{ transform:scale(.985); }

/* шевроны указывают направление при наведении на строку */
.rows a.row:hover > svg:last-child, .sec-link:hover > svg:last-child,
.hitem-head:hover > svg:last-child{ transform:translateX(3px); }
.rows .row > svg:last-child, .sec-link > svg:last-child, .hitem-head svg:last-child{
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), color .15s ease; }

/* ===== Мини-плеер «сейчас играет» (Apple Music / Spotify) ===== */
.npbar{ position:fixed; z-index:19; left:12px; right:12px; margin:0 auto; max-width:640px;
  bottom:calc(90px + env(safe-area-inset-bottom, 0px)); overflow:hidden;
  display:flex; align-items:center; gap:13px; padding:11px 14px; border-radius:18px; color:var(--text);
  background:color-mix(in srgb, var(--surface) 68%, transparent);
  backdrop-filter:blur(34px) saturate(1.8); -webkit-backdrop-filter:blur(34px) saturate(1.8);
  border:1px solid color-mix(in srgb, #ffffff 9%, transparent);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.6);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
  animation:qFadeUp .4s cubic-bezier(.2,.7,.2,1); }
.npbar[hidden]{ display:none; }
.npbar:hover{ opacity:1; }
.npbar:active{ transform:scale(.985); }
@media (min-width:860px){ .npbar{ bottom:18px; left:calc(250px + 18px); right:18px; } }
/* прогресс-нить — сколько прослушано */
.np-prog{ position:absolute; left:14px; right:14px; bottom:0; height:2.5px; border-radius:999px;
  background:color-mix(in srgb, #ffffff 10%, transparent); }
.np-prog i{ display:block; height:100%; width:0; border-radius:999px; background:var(--accent); }
/* управление — живые глифы слева (играет прямо в баре) */
.np-btn{ border:none; background:transparent; color:var(--text); cursor:pointer; padding:0;
  width:34px; height:44px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  transition:transform .15s; }
.np-btn:hover{ transform:scale(1.12); }
.np-btn:active{ transform:scale(.88); }
.np-btn svg{ width:19px; height:19px; }
.np-btn-main svg{ width:24px; height:24px; }
.np-btn-main .ic-pause{ display:none; }
.np-btn-main.playing .ic-play{ display:none; }
.np-btn-main.playing .ic-pause{ display:block; }
/* тап по названию — полный плеер */
.np-open{ flex:1; min-width:0; display:flex; align-items:center; gap:12px; color:var(--text); }
.np-open:hover{ opacity:1; }
/* плитка суры — нейтральная, как везде */
.np-art{ width:44px; height:44px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--text);
  font-weight:800; font-size:16px; font-variant-numeric:tabular-nums; }
.np-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.np-info b{ font-size:15px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-info small{ font-size:12px; font-weight:500; color:var(--text-2); margin-top:2px; }
.np-x{ border:none; background:transparent; color:var(--text-3); cursor:pointer; padding:8px; flex-shrink:0; display:flex; }
.np-x svg{ width:14px; height:14px; }
.np-x:hover{ color:var(--text); }
@media (max-width:420px){ .np-btn{ width:30px; } .npbar{ gap:8px; padding:11px 10px; } }

/* ===== Компактные разделы: азкары / дуа (общий компонент-список) ===== */
.ztabs{ display:flex; gap:8px; overflow-x:auto; padding-bottom:10px; margin-bottom:16px; scrollbar-width:none; }
.ztabs::-webkit-scrollbar{ display:none; }
.ztab{ flex:0 0 auto; white-space:nowrap; padding:9px 16px; border-radius:999px; border:1.5px solid var(--border);
  background:var(--surface); color:var(--text-2); font-size:13.5px; font-weight:600; cursor:pointer; transition:.15s; }
.ztab:hover{ border-color:var(--border-strong); }
.ztab.active{ border-color:transparent; background:linear-gradient(150deg,var(--accent-btn-1),var(--accent-btn-2)); color:#fff; box-shadow:var(--shadow-accent); }

.zpanel-head{ display:flex; align-items:center; justify-content:space-between; margin:0 2px 12px; }
.zrun{ width:100%; justify-content:center; margin-bottom:14px; }
.zprog{ font-size:13px; color:var(--text-2); }
.zprog b{ color:var(--text); font-family:var(--font-ui); }
.zreset{ font-size:12.5px; color:var(--text-3); background:transparent; border:none; cursor:pointer; text-decoration:underline; }
.zreset:hover{ color:var(--accent); }

.zlist{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:6px 8px; margin-bottom:14px; }
.zrow{ border-top:1px solid var(--border); }
.zrow:first-child{ border-top:none; }
.zrow-head{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:16px 14px; border-radius:14px; transition:background .14s; }
.zrow-head::-webkit-details-marker{ display:none; }
.zrow-head:hover{ background:var(--surface-2); }
.zrow-chev{ color:var(--text-2); flex-shrink:0; transition:transform .28s cubic-bezier(.2,.7,.2,1); }
.zrow[open] > .zrow-head .zrow-chev{ transform:rotate(90deg); }
.zrow-title{ flex:1; min-width:0; font-size:15.5px; font-weight:600; line-height:1.45; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zrow[open] > .zrow-head .zrow-title{ white-space:normal; font-weight:700; }
.zrow.done > .zrow-head .zrow-title{ color:var(--text-2); }
.zrow-badge{ font-size:12px; font-weight:800; color:var(--text); background:var(--surface-2); padding:5px 11px; border-radius:999px; flex-shrink:0; font-family:var(--font-ui); font-variant-numeric:tabular-nums; }
.zrow-count{ position:relative; width:46px; height:46px; border-radius:50%; border:none;
  background:var(--surface-2); color:var(--text); font-family:var(--font-ui); font-weight:800; font-size:15.5px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-variant-numeric:tabular-nums;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), background .2s; -webkit-tap-highlight-color:transparent; }
.zrow-count:hover{ transform:scale(1.06); }
.zrow-count:active{ transform:scale(.88); }
.zrow-count .zc-ok{ display:none; width:19px; height:19px; }
.zrow.done .zrow-count{ background:var(--accent-btn-1); color:#fff; }
.zrow.done .zc-n{ display:none; }
.zrow.done .zc-ok{ display:block; }

.zrow-body{ padding:2px 12px 15px; animation:qFadeUp .26s ease; }
.zrow-ar{ font-family:'Amiri',serif; font-size:25px; line-height:2.1; color:var(--text); text-align:right; }
.zrow-tl{ font-size:14px; line-height:1.6; color:var(--text-2); font-style:italic; margin-top:12px; }
.zrow-tr{ font-size:14.5px; line-height:1.7; color:var(--text); margin-top:10px; }
.zrow-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
.zrow-note{ font-size:12.5px; color:var(--text-3); line-height:1.5; flex:1; min-width:180px; }
.zrow-src{ font-size:12px; color:var(--text-3); font-family:var(--font-ui); }
.zrow-play{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; border:1.5px solid var(--border);
  background:var(--surface); color:var(--accent); cursor:pointer; font-size:13px; font-weight:600; flex-shrink:0; transition:.15s; }
.zrow-play:hover{ border-color:var(--accent); background:var(--accent-soft); }
.zrow-play.playing{ background:var(--accent); color:#fff; border-color:var(--accent); }
.zrow-play svg{ width:14px; height:14px; }
.zrow-play .zp-pause{ display:none; }
.zrow-play.playing .zp-play{ display:none; }
.zrow-play.playing .zp-pause{ display:block; }

.app-note{ font-size:12.5px; color:var(--text-3); line-height:1.6; margin-top:14px; text-align:center; }
.ztoast{ position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:50;
  background:linear-gradient(150deg,var(--accent-btn-1),var(--accent-btn-2)); color:#fff; font-weight:700; font-size:14px;
  padding:12px 20px; border-radius:999px; box-shadow:var(--shadow-accent); animation:qPop .3s; }
@media (min-width:860px){ .ztoast{ bottom:28px; } }
@media (max-width:520px){ .zrow-ar{ font-size:23px; } }

/* ===== CTA «Изучение слов» на экране суры ===== */
.learn-cta{ display:flex; align-items:center; gap:14px; padding:16px 18px; margin:0 0 20px; border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--accent-btn-1),var(--accent-btn-2)); color:#fff; box-shadow:var(--shadow-accent); transition:transform .12s; }
.learn-cta:hover{ opacity:1; transform:translateY(-1px); }
.learn-cta-ic{ width:44px; height:44px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.2); color:#fff; }
.learn-cta-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.learn-cta-body b{ font-family:var(--font-ui); font-weight:800; font-size:16px; }
.learn-cta-body small{ font-size:12.5px; color:rgba(255,255,255,.88); margin-top:2px; }
.learn-cta > svg:last-child{ color:rgba(255,255,255,.9); flex-shrink:0; }
.learn-review{ display:inline-flex; align-items:center; gap:7px; margin:-8px 0 20px; padding:8px 14px; border-radius:999px;
  background:var(--surface-2); color:var(--text); font-size:13px; font-weight:600; }
.learn-review svg{ color:var(--accent); }
.learn-review:hover{ opacity:1; filter:brightness(.98); }

/* ===== Чистый плоский холст — без градиентов, свечений и ореолов ===== */
[data-theme="dark"] body{ background:var(--bg); }

/* ===== Панели: чистое спокойное стекло — ровная заливка, ничего лишнего ===== */
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .task-card,
[data-theme="dark"] .zlist,
[data-theme="dark"] .banner,
[data-theme="dark"] .drill-card{
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-color:color-mix(in srgb, #ffffff 8%, transparent);
  box-shadow:none;
}
[data-theme="dark"] .card::after{ box-shadow:none; }

/* матовая шапка на мобильном */
[data-theme="dark"] .topbar{
  background:color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-bottom-color:color-mix(in srgb, #ffffff 7%, transparent);
}