/* Kantonesiska i Djup (2026-09-24). Samma rumskänsla som CHIKA-apparna,
   men i appens egna färger: jade och teal med tempelguld.
   Kit: kopia av ~/Code/chika-journal/design/djup-kit.*. */
:root {
  --dk-bas: #F4F2EA;
  --dk-a: rgba(15, 118, 110, .22);
  --dk-b: rgba(217, 119, 6, .16);
  --dk-c: rgba(20, 184, 166, .18);
  --dk-golv: rgba(15, 118, 110, .09);
  --dk-korn: .035;
  --dk-vinjett: rgba(0, 0, 0, .06);
  --dk-yta: rgba(255, 255, 255, .72);
  --dk-yta-hog: rgba(255, 255, 255, .92);
  --dk-kant: rgba(24, 24, 27, .08);
  --dk-ljus: rgba(255, 255, 255, .95);
  --dk-reflex: rgba(255, 255, 255, .6);
  --dk-glod: rgba(15, 118, 110, .25);
  --dk-guld: rgba(217, 119, 6, .28);
  --dk-skugga-1: 0 1px 1px rgba(0,0,0,.04), 0 2px 4px rgba(0,0,0,.04), 0 8px 18px -8px rgba(0,0,0,.14);
  --dk-skugga-3: 0 4px 6px rgba(0,0,0,.05), 0 22px 40px -12px rgba(0,0,0,.20), 0 60px 90px -40px rgba(0,0,0,.35);
}
[data-theme="dark"] {
  --dk-bas: #090D0E;
  --dk-a: rgba(45, 212, 191, .16);
  --dk-b: rgba(251, 191, 36, .10);
  --dk-c: rgba(20, 184, 166, .13);
  --dk-golv: rgba(45, 212, 191, .10);
  --dk-korn: .05;
  --dk-vinjett: rgba(0, 0, 0, .55);
  --dk-yta: rgba(26, 32, 34, .66);
  --dk-yta-hog: rgba(34, 42, 45, .86);
  --dk-kant: rgba(231, 229, 228, .07);
  --dk-ljus: rgba(255, 255, 255, .06);
  --dk-reflex: rgba(45, 212, 191, .13);
  --dk-glod: rgba(45, 212, 191, .28);
  --dk-guld: rgba(251, 191, 36, .26);
  --dk-skugga-1: 0 1px 1px rgba(0,0,0,.3), 0 4px 10px -2px rgba(0,0,0,.35), 0 14px 28px -14px rgba(0,0,0,.7);
  --dk-skugga-3: 0 4px 8px rgba(0,0,0,.4), 0 30px 60px -16px rgba(0,0,0,.7), 0 80px 120px -50px rgba(0,0,0,.95);
}
html { background: var(--dk-bas); }
body, [data-theme="dark"] body { background: transparent !important; }

.top {
  background: color-mix(in srgb, var(--color-card) 90%, transparent);
  border-bottom-color: var(--dk-kant);
  box-shadow: inset 0 -1px 0 var(--dk-ljus), 0 10px 30px -24px rgba(0,0,0,.5);
}
.nav button { transition: background .25s var(--dk-ease), color .2s, transform .3s var(--dk-spring); }
.nav button:hover { transform: translateY(-1px); }
.nav button.active {
  background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, #000));
  color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 20px -8px var(--dk-glod);
}
[data-theme="dark"] .nav button.active { color: #04201D; }

.hero h1 { text-shadow: 0 8px 30px var(--dk-glod); }

/* Statistikraden: fyra lika kort, aldrig ett hål i slutet av raden */
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

.gamify-home, .stat-card, .action-card, .method-card, .quiz-card, .srs-card, .lesson-card {
  border-color: var(--dk-kant);
}
.gamify-home, .quiz-card, .srs-card, .lesson-card, .method-card {
  background: linear-gradient(180deg, var(--dk-yta-hog), var(--dk-yta));
  box-shadow: inset 0 1px 0 var(--dk-ljus), var(--dk-skugga-1);
}
.stat-card .stat-value { text-shadow: 0 0 22px var(--dk-glod); }
.stat-card.urgent .stat-value { text-shadow: 0 0 22px var(--dk-guld); }
.action-card.highlight { box-shadow: inset 0 1px 0 var(--dk-ljus), 0 0 0 1px color-mix(in srgb, var(--color-primary) 60%, transparent), 0 14px 34px -16px var(--dk-glod); }
.action-card .ac-icon { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 18px -8px var(--dk-glod); transform: translateZ(24px); }
.goal-ring-fill { filter: drop-shadow(0 0 6px var(--dk-glod)); }
.level-bar-fill { box-shadow: 0 0 12px var(--dk-glod); }

.btn { position: relative; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 85%, #fff), var(--color-primary));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.15), 0 8px 20px -8px var(--dk-glod);
  transition: transform .25s var(--dk-spring), box-shadow .25s; }
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.15), 0 16px 30px -10px var(--dk-glod); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.secondary { background: linear-gradient(180deg, var(--dk-yta-hog), var(--dk-yta)); box-shadow: inset 0 1px 0 var(--dk-ljus), var(--dk-skugga-1); }
.quiz-option, .exercise-option { transition: transform .25s var(--dk-spring), border-color .2s, box-shadow .25s; }
.quiz-option:hover, .exercise-option:hover { transform: translateY(-2px); box-shadow: var(--dk-skugga-1); }

#djup-toggle { background: none; border: 1px solid var(--dk-kant); color: var(--color-muted); border-radius: 10px; width: 38px; height: 38px; cursor: pointer; font-size: 12px; }