/* ==========================================================================
   Divine Sprouts (दिव्याङ्कुराः) — built on the Tamil Thinnai / Malayalam Kalari visual system
   (css/app.css), with a devotional layer: saffron dawn, lotus pink, sprout green and
   lamp-lit indigo nights. Devanagari leads verses; English supports.
   ========================================================================== */
:root {
  --f-deva: "Noto Serif Devanagari", "Noto Sans Devanagari", "Baloo 2", serif;
  --f-deva-ui: "Baloo 2", "Noto Sans Devanagari", sans-serif;
  --f-display: "Baloo 2", "Noto Sans Devanagari", system-ui, sans-serif;
  --f-kn: "Noto Sans Kannada", sans-serif; --f-ml-script: "Noto Sans Malayalam", sans-serif; --f-te: "Noto Sans Telugu", sans-serif;
  --ground: #FFF7EC; --ground-2: #FBEBD6;
  --lotus-1: #F3A6C0; --lotus-2: #E27AA0; --lotus-3: #FFE3EC; --pad: #3F8F5A;
  --leaf-1: #9BD66E; --leaf-2: #2E8B57; --leaf-vein: #E9FFD9;
  --flame: #FFB23E; --diya: #C8692A; --diya-rim: #8C3E12; --flag: #E8702A;
  --mirror-model: #F5A30F; --mirror-me: #0A6B73;
  --glow: 0 0 0 1px color-mix(in srgb, var(--zari) 30%, transparent), 0 10px 40px -12px color-mix(in srgb, var(--marigold) 55%, transparent);
  --glass: color-mix(in srgb, var(--surface) 72%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #120E22; --ground-2: #1A1530; --surface: #1F1936; --surface-2: #272043; --line: #352C55; --line-2: #463B6E;
    --lotus-1: #C9658B; --lotus-2: #A04A70; --lotus-3: #E79AB8; --pad: #1E4A33; --leaf-1: #4E9A4A; --leaf-2: #1E5E3A; --leaf-vein: #7FBF7A;
    --flame: #FFC24A; --diya: #7A3E1A; --diya-rim: #4E2410; --flag: #B8561E; --mirror-me: #56D0CB;
  }
}
:root[data-theme="dark"] {
  --ground: #120E22; --ground-2: #1A1530; --surface: #1F1936; --surface-2: #272043; --line: #352C55; --line-2: #463B6E;
  --lotus-1: #C9658B; --lotus-2: #A04A70; --lotus-3: #E79AB8; --pad: #1E4A33; --leaf-1: #4E9A4A; --leaf-2: #1E5E3A; --leaf-vein: #7FBF7A;
  --flame: #FFC24A; --diya: #7A3E1A; --diya-rim: #4E2410; --flag: #B8561E; --mirror-me: #56D0CB;
}
:root[data-contrast="high"] { --ground: #FFFFFF; --surface: #FFFFFF; }
:root[data-theme="dark"][data-contrast="high"] { --ground: #000; --surface: #0A0A0A; }

/* ---- Scripts ------------------------------------------------------------------------ */
[lang="sa"], [lang="hi"], .deva { font-family: var(--f-deva-ui); line-height: 1.5; }
[lang="kn"] { font-family: var(--f-kn); line-height: 1.6; }
[lang="ml"] { font-family: var(--f-ml-script); line-height: 1.6; }
[lang="te"] { font-family: var(--f-te); line-height: 1.6; }
[lang="ta"] { font-family: var(--f-ml); line-height: 1.6; }
.translit { font-style: italic; color: var(--ink-3); letter-spacing: .01em; }
.small { font-size: .85rem; }
h1 .deva, h2 .deva, .h-en.deva { font-family: var(--f-deva-ui); }
.chip--gold { background: var(--zari-soft); color: var(--zari-deep); }
.chip--silk { background: var(--silk-soft); color: var(--silk-deep); }
.btn--good-outline { background: transparent; color: var(--leaf); border-color: var(--leaf); }
.btn.is-rec, .btn--small.is-rec { background: var(--kumkum); color: #fff; animation: pulse-rec 1.2s ease-in-out infinite; }
@keyframes pulse-rec { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--kumkum) 25%, transparent); } }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.muted.small { font-size: .85rem; }

/* ---- Brand & navigation ------------------------------------------------------------------ */
.brand-name { font: 800 1.12rem/1.1 var(--f-display) !important; letter-spacing: .01em !important; text-transform: none !important; color: var(--leaf) !important; }
.brand-sa { font: 700 .82rem/1.2 var(--f-deva-ui); color: var(--zari-deep); }
.sprout-mark { filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--marigold) 40%, transparent)); }
.tab-link .nav-label .nav-en { display: block; font-size: .72rem; font-weight: 600; color: inherit; }
.rail-link .nav-label .nav-en { font-weight: 600; font-size: .98rem; color: inherit; }
.rail-link .nav-label .nav-sa { font-size: .78rem; color: var(--ink-3); }
.more-link .deva { font-weight: 700; }

/* ---- Landing -------------------------------------------------------------------------- */
.ds-hero .hero-veil { background: radial-gradient(ellipse 60% 70% at 24% 50%, color-mix(in srgb, var(--ground) 92%, transparent), color-mix(in srgb, var(--ground) 45%, transparent) 55%, transparent 78%); }
.hero-title { display: grid; gap: 0; }
.hero-title::after { display: none; }
.hero-title .hero-sa { text-shadow: none; filter: drop-shadow(0 2px 0 rgba(255,255,255,.7)); }
.hero-sa { font: 800 clamp(3rem, 1.8rem + 5.5vw, 6rem)/1.15 var(--f-deva-ui); color: var(--silk-deep); background: linear-gradient(100deg, var(--silk-deep), var(--kumkum) 45%, var(--marigold-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-top: .1em; }
.hero-en { font: 800 clamp(1.6rem, 1.1rem + 2vw, 2.6rem)/1.1 var(--f-display); color: var(--leaf); letter-spacing: .01em; }
.ds-hero .hero-sub { font: 600 clamp(1.1rem, .95rem + .6vw, 1.45rem)/1.4 var(--f-ui); color: var(--ink-2); max-width: 40ch; }
.ds-scene { width: 100%; height: 100%; display: block; }
.ds-scene .scene-stars circle { fill: var(--star); animation: twinkle 3.6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes twinkle { 50% { opacity: .25; } }
.ds-scene .halo { transform-box: fill-box; }
.ds-scene .halo circle:nth-child(2) { animation: spin 90s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes spin { to { transform: rotate(360deg); } }
.ds-scene .diya-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.8s ease-in-out infinite; animation-delay: var(--d); }
.ds-scene .diya-glow { opacity: calc(.35 + var(--lamp-on) * .65); animation: glow 2.6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes flicker { 30% { transform: scale(.92, 1.06) rotate(-3deg); } 60% { transform: scale(1.05, .95) rotate(2deg); } }
@keyframes glow { 50% { opacity: calc(.25 + var(--lamp-on) * .5); } }
.ds-scene .leaf { transform-box: fill-box; animation: sway 6s ease-in-out infinite; }
.ds-scene .leaf-l { transform-origin: 100% 50%; } .ds-scene .leaf-r { transform-origin: 0 100%; animation-delay: -2s; }
@keyframes sway { 50% { transform: rotate(-4deg); } }
.ds-scene .petals-float ellipse { animation: petal 14s linear infinite; animation-delay: calc(var(--d) * -1); opacity: .8; }
@keyframes petal { from { transform: translate(0, -60px) rotate(0); } to { transform: translate(var(--x), 900px) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) .ds-scene * { animation: none !important; } }
:root[data-motion="reduced"] .ds-scene * { animation: none !important; }
.fl { font-family: var(--f-deva-ui); }
.hero-scene .ds-scene, .greet-scene .ds-scene, .login-scene .ds-scene { position: absolute; inset: 0; width: 100%; height: 100%; }

.try-verse { display: grid; gap: 28px; align-items: start; }
@media (min-width: 960px) { .try-verse { grid-template-columns: .8fr 1.2fr; } }
.band--voice { background: linear-gradient(180deg, var(--ground), color-mix(in srgb, var(--peacock-soft) 70%, var(--ground)), var(--ground)); }
.band--gardens { background: var(--ground); padding-top: 0; }
.voice-grid { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.voice-card { padding: 20px; border-radius: 24px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(10px); box-shadow: var(--shadow-1); }
.voice-card h3 { font-size: 1.25rem; margin: 8px 0 4px; }
.voice-card p { color: var(--ink-2); }
.voice-ic { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(135deg, var(--peacock), var(--leaf)); color: #fff; box-shadow: var(--glow); }
.garden-strip { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.gchip { display: inline-flex; gap: 8px; align-items: center; padding: 10px 16px; border-radius: var(--r-pill); background: var(--h1, var(--surface)); color: var(--ink); text-decoration: none; font-weight: 600; border: 1px solid var(--line); }
.gchip:hover { box-shadow: var(--shadow-1); transform: translateY(-1px); }

/* The pathway as an orbit / constellation */
.orbit { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); position: relative; }
.orbit-stop a { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 18px 12px; border-radius: 26px; text-decoration: none; color: var(--ink); background: var(--glass); border: 1px solid var(--line); transition: transform .25s var(--spring); }
.orbit-stop a:hover { transform: translateY(-4px); }
.orbit-orb { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; font-size: 2.1rem; background: radial-gradient(circle at 35% 30%, #fff8, transparent 45%), var(--c); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 22%, transparent), 0 12px 30px -8px var(--c); animation: bob 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); }
@keyframes bob { 50% { transform: translateY(-6px); } }
.orbit-sa { font-size: 1.4rem; font-weight: 800; color: var(--c); }
.orbit-en { font-weight: 700; } .orbit-age { color: var(--ink-3); font-size: .85rem; }

/* ---- Verse sheet (Chant along) -------------------------------------------------------------- */
.verse-sheet { display: grid; gap: 14px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); position: relative; }
.verse-sheet::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--zari), transparent 40%, var(--lotus-2)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .7; }
.verse-top { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.verse-source { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-3); font-size: .9rem; }
.verse-lines { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.vl { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 18px; transition: background .3s, box-shadow .3s; }
.vl.is-singing { background: color-mix(in srgb, var(--zari-soft) 70%, transparent); box-shadow: inset 4px 0 0 var(--marigold); }
.vl-num { font: 700 .8rem var(--f-ui); color: var(--ink-3); padding-top: .9em; min-width: 1.4em; text-align: right; }
.vl-say { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--peacock-soft); color: var(--peacock); cursor: pointer; margin-top: 2px; }
.vl-say.is-playing, .vl.is-singing .vl-say { background: var(--marigold); color: var(--on-marigold); }
.vl-main { font: 600 clamp(1.35rem, 1.1rem + 1vw, 1.8rem)/1.55 var(--f-deva); color: var(--ink); margin: 0; }
.vl-main[lang="ta"], .vl-main[lang="ml"], .vl-main[lang="kn"], .vl-main[lang="te"] { font-weight: 600; font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem); }
.verse-lines--big .vl-main { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
.vl-main[lang="ta"] { font-family: var(--f-ml); } .vl-main[lang="ml"] { font-family: var(--f-ml-script); } .vl-main[lang="kn"] { font-family: var(--f-kn); } .vl-main[lang="te"] { font-family: var(--f-te); }
.vl-main .w, .vl-tr .w { border-radius: 8px; padding: 0 2px; transition: background .12s, color .12s, box-shadow .12s; }
.vl-main .w.is-now { background: var(--marigold); color: var(--on-marigold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marigold) 35%, transparent), 0 0 18px color-mix(in srgb, var(--marigold) 60%, transparent); }
.vl-tr .w.is-now { color: var(--kumkum); font-weight: 700; }
.vl-tr { margin: 2px 0 0; font-size: 1rem; }
.vl-en { margin: 4px 0 0; font-size: .95rem; }
.verse-tools { display: flex; flex-wrap: wrap; gap: 10px; }
.recite[data-hide="1"] .vl-main .w:nth-child(even):not(.is-peek), .recite[data-hide="2"] .vl-main .w:not(.is-peek) { color: transparent; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 10px); background-size: 100% 3px; background-repeat: no-repeat; background-position: bottom; cursor: pointer; }
.recite[data-hide] .vl-main .w.is-now { color: var(--on-marigold); background: var(--marigold); }
.recite[data-hide="1"] .vl-tr, .recite[data-hide="2"] .vl-tr, .recite[data-hide="2"] .vl-en { visibility: hidden; }

.script-switch { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 4px; border-radius: var(--r-pill); background: var(--ground-2); border: 1px solid var(--line); }
.ss-label { display: inline-flex; gap: 6px; align-items: center; padding: 0 8px 0 6px; font: 600 .82rem var(--f-ui); color: var(--ink-3); }
.ss-opt { min-height: 38px; padding: 2px 12px; border-radius: var(--r-pill); border: 0; background: none; cursor: pointer; font-weight: 700; color: var(--ink-2); }
.ss-opt[aria-checked="true"] { background: var(--surface); color: var(--peacock-deep); box-shadow: var(--shadow-1); }

/* ---- Repeat after me --------------------------------------------------------------------- */
.echo { display: grid; gap: 16px; justify-items: center; }
.echo-stage { position: relative; width: 100%; max-width: 720px; min-height: 280px; display: grid; justify-items: center; align-content: center; gap: 8px; padding: 28px 20px; border-radius: var(--r-xl); background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--zari-soft) 80%, var(--surface)), var(--surface) 70%); border: 1px solid var(--line); overflow: hidden; text-align: center; }
.echo-halo { position: absolute; inset: auto; width: 360px; height: 360px; border-radius: 50%; top: 50%; left: 50%; translate: -50% -50%; background: radial-gradient(circle, color-mix(in srgb, var(--marigold) 30%, transparent), transparent 65%); opacity: .4; transition: opacity .4s, background .4s; pointer-events: none; }
.echo-stage.is-voice .echo-halo { opacity: 1; animation: breathe 1.6s ease-in-out infinite; }
.echo-stage.is-yours .echo-halo { opacity: 1; background: radial-gradient(circle, color-mix(in srgb, var(--leaf) 30%, transparent), transparent 65%); }
@keyframes breathe { 50% { transform: scale(1.08); } }
.echo-text { position: relative; font: 700 clamp(1.8rem, 1.2rem + 2.4vw, 3rem)/1.4 var(--f-deva); margin: 0; }
.echo-tr { position: relative; font-size: 1.15rem; }
.echo-status { position: relative; display: inline-flex; gap: 8px; align-items: center; font-weight: 700; color: var(--peacock-deep); min-height: 1.6em; }
.echo-stage.is-yours .echo-status { color: var(--leaf); }
.turn-ring { position: relative; width: 64px; height: 64px; opacity: 0; transition: opacity .2s; }
.echo-stage.is-yours .turn-ring { opacity: 1; }
.turn-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tr-track { fill: none; stroke: var(--line); stroke-width: 6; } .tr-fill { fill: none; stroke: var(--leaf); stroke-width: 6; stroke-linecap: round; }
.echo-dots { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.echo-dots li { width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
.echo-dots li.is-done { background: var(--leaf); } .echo-dots li.is-now { background: var(--marigold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marigold) 30%, transparent); }
.echo-tools, .mirror-tools { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.echo-mine { position: relative; display: flex; gap: 8px; }
.echo-rec { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }

/* ---- Record & compare ------------------------------------------------------------------------ */
.mirror { display: grid; gap: 14px; justify-items: center; }
.mirror-card { width: 100%; max-width: 760px; padding: 22px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 6px; text-align: center; box-shadow: var(--shadow-1); }
.mirror-line { font: 700 clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem)/1.4 var(--f-deva); margin: 0; }
.mirror-canvas { width: 100%; height: 150px; border-radius: 18px; background: linear-gradient(var(--ground-2), var(--ground-2)) center / 100% 1px no-repeat, repeating-linear-gradient(90deg, transparent 0 39px, color-mix(in srgb, var(--line) 60%, transparent) 39px 40px), var(--surface-2); }
.mirror-legend { display: flex; gap: 16px; justify-content: center; font-weight: 600; font-size: .9rem; }
.lg-model::before, .lg-me::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.lg-model::before { background: var(--mirror-model); } .lg-me::before { background: var(--mirror-me); }
.mirror-status { font-weight: 600; color: var(--ink-2); text-align: center; }
.mirror-nav { display: flex; gap: 10px; align-items: center; }
.mirror-pager { font-weight: 700; color: var(--ink-3); }

/* ---- Cards, gardens, pathway --------------------------------------------------------------- */
.lcard-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.lcard { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 16px; border-radius: 24px; text-decoration: none; color: var(--ink); background: linear-gradient(150deg, var(--h1, var(--surface)), var(--surface) 70%); border: 1px solid var(--line); transition: transform .25s var(--spring), box-shadow .25s; }
.lcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.lcard.is-done { border-color: color-mix(in srgb, var(--leaf) 45%, var(--line)); }
.lcard-emoji { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--surface); font-size: 1.9rem; box-shadow: var(--shadow-1); }
.lcard-body { display: grid; gap: 3px; min-width: 0; }
.lcard-title { font: 700 1.1rem/1.25 var(--f-display); }
.lcard-sa { color: var(--hi, var(--silk-deep)); font-weight: 700; }
.lcard-sub { color: var(--ink-2); font-size: .92rem; }
.lcard-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lcard-state { display: inline-flex; gap: 4px; align-items: center; font: 700 .78rem var(--f-ui); color: var(--zari-deep); white-space: nowrap; }
.lcard-state.is-done { color: var(--leaf); }
.lcard-go { color: var(--ink-3); }
.lcard--compact { padding: 12px; } .lcard--compact .lcard-emoji { width: 44px; height: 44px; font-size: 1.5rem; }

.garden-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.garden-tile { position: relative; display: grid; gap: 4px; align-content: start; min-height: 200px; padding: 18px; border-radius: 28px; text-decoration: none; color: var(--ink); background: linear-gradient(160deg, var(--h1), var(--surface) 75%); border: 1px solid var(--line); overflow: hidden; transition: transform .25s var(--spring), box-shadow .25s; }
.garden-tile::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--h2) 30%, transparent), transparent 70%); }
.garden-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.garden-tile.is-growing { opacity: .78; }
.garden-num { font: 800 .75rem var(--f-ui); color: var(--hi); letter-spacing: .1em; }
.garden-emoji { font-size: 2.4rem; }
.garden-name { font: 700 1.1rem/1.2 var(--f-display); }
.garden-sa { color: var(--hi); font-weight: 700; }
.garden-blurb { color: var(--ink-2); font-size: .9rem; }
.garden-count { margin-top: auto; padding-top: 6px; font: 700 .82rem var(--f-ui); color: var(--hi); display: inline-flex; gap: 4px; align-items: center; }
.age-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }

.constellation { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 18px; position: relative; }
.constellation::before { content: ""; position: absolute; left: 44px; top: 30px; bottom: 30px; width: 3px; border-radius: 3px; background: linear-gradient(#E8A33D, #6BAF4B, #2F9E8F, #C2477A, #7A5CC7); opacity: .5; }
.star-card { position: relative; display: grid; grid-template-columns: 90px 1fr; column-gap: 16px; row-gap: 2px; padding: 18px 20px 18px 0; border-radius: 28px; text-decoration: none; color: var(--ink); background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(8px); transition: transform .25s var(--spring), box-shadow .25s; }
.star-card > :not(.star-orb) { grid-column: 2; }
.star-card:hover { transform: translateX(4px); box-shadow: var(--shadow-2); }
.star-orb { grid-row: 1 / span 7; justify-self: center; align-self: center; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; font-size: 1.8rem; background: radial-gradient(circle at 35% 30%, #fff9, transparent 45%), var(--c); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 20%, transparent), 0 0 30px -4px var(--c); }
.is-mine .star-card { border-color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 40%, transparent), var(--shadow-2); }
.is-mine .star-orb { animation: bob 3s ease-in-out infinite; }
.star-num { font: 800 .74rem var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.star-sa { font-size: 1.6rem; font-weight: 800; color: var(--c); }
.star-en { font: 700 1.15rem var(--f-display); }
.star-age { color: var(--ink-3); font-size: .88rem; }
.star-sum { color: var(--ink-2); margin-top: 4px; }
.star-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; font-weight: 600; color: var(--ink-3); font-size: .88rem; }
.stage-hero { align-items: center; }
.stage-hero > div { flex: 1; }
.stage-hero-orb { flex: none; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; font-size: 2.4rem; background: radial-gradient(circle at 35% 30%, #fff9, transparent 45%), var(--stage); box-shadow: 0 0 0 8px color-mix(in srgb, var(--stage) 20%, transparent); }
.stage-hero h1 .deva { color: var(--stage); }
.module { margin: 26px 0; }
.module-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.module-head h2 { font-size: 1.4rem; }
.module-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--stage, var(--peacock)); color: #fff; font: 800 1rem var(--f-ui); }

/* ---- Home ---------------------------------------------------------------------------------------- */
.home { display: grid; gap: 22px; }
.greet-scene .ds-scene { height: 100%; }
.home-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .home-grid { grid-template-columns: 1.1fr .9fr; } }
.ritual-now { background: linear-gradient(120deg, color-mix(in srgb, var(--marigold) 22%, var(--surface)), var(--surface) 70%); }
.now-emoji { font-size: 2.8rem; }
.now-meta { display: grid; gap: 2px; }
.now-sa { color: var(--zari-deep); font-weight: 700; }
.next-card { display: grid; gap: 8px; }
.stage-mini { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); --ring-fill: var(--c); }
.stage-mini > span:last-child { display: grid; }
.stage-mini-t { font: 700 1.15rem var(--f-display); }
.week-panel { margin: 0; }
.lamp-row { display: flex; gap: 8px; justify-content: space-between; max-width: 420px; margin: 10px 0; }
.lamp-day { display: grid; justify-items: center; gap: 2px; }
.lamp-flame { width: 12px; height: 18px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--line); transition: background .3s; }
.lamp-day.is-lit .lamp-flame { background: radial-gradient(circle at 50% 70%, #fff6c9, var(--flame) 55%, #f07b1d); box-shadow: 0 0 14px var(--flame); animation: flicker 1.8s ease-in-out infinite; }
.lamp-dish { width: 30px; height: 10px; border-radius: 0 0 16px 16px; background: var(--diya); }
.lamp-label { font: 700 .72rem var(--f-ui); color: var(--ink-3); }
.quick-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.quick { display: grid; justify-items: center; gap: 4px; padding: 16px 10px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 700; text-align: center; transition: transform .2s var(--spring); }
.quick:hover { transform: translateY(-3px); box-shadow: var(--shadow-1); }
.quick .icon { width: 30px; height: 30px; color: var(--peacock); }
.me-head { display: flex; gap: 18px; align-items: center; }

/* ---- Lesson player ---------------------------------------------------------------------------------- */
.lesson-page { display: grid; gap: 18px; }
.lesson-hero { display: flex; gap: 18px; align-items: center; padding: 22px; border-radius: var(--r-xl); background: linear-gradient(135deg, var(--h1, var(--zari-soft)), var(--surface) 72%); border: 1px solid var(--line); }
.lesson-emoji { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 26px; font-size: 2.8rem; background: var(--surface); box-shadow: var(--shadow-1); flex: none; }
.lesson-hero h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.lesson-hero h1 .deva { color: var(--hi, var(--silk-deep)); font-size: .8em; }
.step-rail { list-style: none; padding: 6px; margin: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; border-radius: var(--r-pill); background: var(--ground-2); border: 1px solid var(--line); }
.step-rail li { flex: none; }
.step-rail a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px 4px 4px; border-radius: var(--r-pill); text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: .9rem; }
.step-dot { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); color: var(--ink-3); }
.step-dot .icon { width: 20px; height: 20px; }
.step-rail .is-done .step-dot { background: var(--leaf-soft); color: var(--leaf); }
.step-rail .is-now a { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.step-rail .is-now .step-dot { background: var(--marigold); color: var(--on-marigold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marigold) 25%, transparent); }
.step-body { min-height: 240px; }
.step-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--line); }
.meet { display: grid; gap: 16px; }
.meet-card { padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); font-size: 1.18rem; line-height: 1.6; }
.age-list { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.age-list dt { font-weight: 700; } .age-list dt.is-mine { color: var(--leaf); } .age-list dd { margin: 0; color: var(--ink-2); }
.listen { display: grid; gap: 16px; }
.family-rec { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 20px; background: var(--peacock-soft); }
.family-rec audio { max-width: 100%; }
.pron { font-family: var(--f-ui); letter-spacing: .02em; }
.byheart { display: grid; gap: 6px; justify-items: start; }
.story { display: grid; gap: 14px; }
.story-card { display: grid; gap: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
@media (min-width: 760px) { .story-card { grid-template-columns: .9fr 1.1fr; } }
.story-card.turn { animation: turn .45s var(--ease); }
@keyframes turn { from { opacity: 0; transform: translateX(18px); } }
.story-art { --hue: 30; display: grid; place-items: center; min-height: 220px; background: radial-gradient(circle at 30% 30%, hsl(var(--hue) 90% 88%), hsl(calc(var(--hue) + 40) 70% 70%)); }
:root[data-theme="dark"] .story-art { background: radial-gradient(circle at 30% 30%, hsl(var(--hue) 45% 38%), hsl(calc(var(--hue) + 40) 40% 22%)); }
.story-emoji { font-size: clamp(5rem, 3rem + 8vw, 8rem); filter: drop-shadow(0 10px 20px rgba(0,0,0,.18)); animation: bob 4s ease-in-out infinite; }
.story-words { padding: 24px; display: grid; align-content: center; gap: 6px; }
.story-text { font: 500 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.6 var(--f-ui); }
.story-tools { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.page-dots { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; justify-content: center; }
.page-dots li { width: 10px; height: 10px; border-radius: 50%; background: var(--line); } .page-dots .is-done { background: var(--leaf); } .page-dots .is-now { background: var(--marigold); width: 26px; border-radius: 6px; }
.fact-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.fact-card { position: relative; display: grid; gap: 6px; align-content: start; text-align: left; padding: 18px; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(160deg, var(--h1, var(--zari-soft)), var(--surface) 70%); cursor: pointer; font: inherit; color: var(--ink); animation: rise .5s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
.fact-card:hover { box-shadow: var(--shadow-1); }
.fact-card.is-seen { border-color: color-mix(in srgb, var(--leaf) 50%, var(--line)); }
.fact-emoji { font-size: 2.2rem; } .fact-title { font: 700 1.1rem var(--f-display); } .fact-text { color: var(--ink-2); }
.fact-say { position: absolute; right: 12px; top: 12px; color: var(--ink-3); }
.word-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); margin-top: 12px; }
.word-card { position: relative; display: grid; gap: 2px; justify-items: start; text-align: left; padding: 14px 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); }
.word-card:hover { box-shadow: var(--shadow-1); }
.word-deva { font: 700 1.5rem/1.4 var(--f-deva); }
.word-deva[lang="kn"] { font-family: var(--f-kn); } .word-deva[lang="ml"] { font-family: var(--f-ml-script); } .word-deva[lang="te"] { font-family: var(--f-te); } .word-deva[lang="ta"] { font-family: var(--f-ml); }
.word-tr { font-style: italic; color: var(--peacock-deep); } .word-en { color: var(--ink-2); font-size: .92rem; }
.reflect { display: grid; gap: 0; }
.reflect-list { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.grownup-notes summary { cursor: pointer; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.grownup-notes p { margin-top: 8px; }
.done-panel { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 30px; }
.done-emoji { font-size: 5rem; }
.quiz-text { font: 600 1.3rem/1.4 var(--f-ui); }
.quiz-opt-text { font: 600 1.05rem var(--f-ui); }
.feedback .why { display: block; color: var(--ink-2); font-weight: 500; margin-top: 4px; }
.result-sa { font: 800 2rem var(--f-deva-ui); color: var(--silk-deep); }

/* ---- Book ------------------------------------------------------------------------------------------ */
.book-cover { display: grid; gap: 22px; align-items: center; padding: 20px; border-radius: var(--r-xl); background: linear-gradient(135deg, var(--zari-soft), var(--surface) 70%); border: 1px solid var(--line); }
@media (min-width: 820px) { .book-cover { grid-template-columns: 300px 1fr; } }
.book-cover-img { width: 100%; border-radius: 22px; box-shadow: var(--shadow-2); aspect-ratio: 3 / 4; object-fit: cover; }
.book-cover h1 { display: grid; gap: 0; font-size: clamp(2.2rem, 1.5rem + 3vw, 3.6rem); }
.book-cover h1 .deva { color: var(--kumkum); }
.book-intro { display: grid; gap: 14px; margin: 22px 0; }
.intro-page { display: grid; gap: 16px; align-items: center; }
@media (min-width: 720px) { .intro-page { grid-template-columns: 180px 1fr; } }
.intro-page img { border-radius: 18px; width: 100%; }
.big-deva { font: 700 1.6rem/1.5 var(--f-deva); color: var(--kumkum); }
.kandas { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.kanda-card { display: grid; gap: 4px; padding: 16px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.kanda-card:hover { box-shadow: var(--shadow-1); } .kanda-card.is-done { border-color: var(--leaf); }
.kanda-name { font: 700 1.15rem var(--f-display); } .kanda-label { color: var(--zari-deep); font-weight: 700; }
.kanda-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 4px 0; } .kanda-bar i { display: block; height: 100%; background: var(--leaf); }
.kanda-story { color: var(--ink-2); font-size: .9rem; }
.book-reader { display: grid; gap: 14px; }
.reader-top { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.reader-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.book-page { display: grid; gap: 0; border-radius: var(--r-xl); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); animation: turn .4s var(--ease); }
@media (min-width: 860px) { .book-page { grid-template-columns: minmax(260px, .9fr) 1.1fr; } }
.page-fig { margin: 0; background: linear-gradient(160deg, var(--zari-soft), var(--silk-soft)); display: grid; place-items: center; min-height: 240px; }
.page-fig img { width: 100%; height: 100%; object-fit: cover; max-height: 520px; }
.page-fig--glyph span { font: 800 7rem var(--f-display); color: color-mix(in srgb, var(--zari-deep) 35%, transparent); }
.page-words { padding: 24px; display: grid; gap: 10px; align-content: start; }
.page-say { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.page-deva { font: 700 clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem)/1.45 var(--f-deva); color: var(--kumkum-deep); margin: 0; }
.page-deva[lang="kn"] { font-family: var(--f-kn); } .page-deva[lang="ml"] { font-family: var(--f-ml-script); } .page-deva[lang="te"] { font-family: var(--f-te); } .page-deva[lang="ta"] { font-family: var(--f-ml); }
.page-tr { font-size: 1.15rem; } .page-en { font-size: 1.05rem; }
.page-child { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--leaf-soft); color: var(--ink); font-weight: 600; }
.page-child .icon { color: var(--leaf); flex: none; margin-top: 2px; }
.page-more summary { cursor: pointer; font-weight: 700; color: var(--peacock); }
.page-wordlist { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; } .page-wordlist dt { font-weight: 700; } .page-wordlist dd { margin: 0; color: var(--ink-2); }
.page-note { font-size: .9rem; color: var(--ink-3); display: flex; gap: 6px; }
.page-refrain { padding: 12px 14px; border-radius: 16px; background: var(--zari-soft); }
.page-refrain .deva { font-size: 1.3rem; font-weight: 700; }
.page-nav { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.page-slider { width: 100%; accent-color: var(--marigold); }
.kanda-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: center; position: sticky; top: calc(var(--top-h) + 6px); z-index: 5; padding: 8px; border-radius: var(--r-pill); background: var(--glass); backdrop-filter: blur(10px); }
.kanda-jump .chip { text-decoration: none; min-height: 36px; font-size: .85rem; }
.recite { display: grid; gap: 18px; }
.recite-kanda { font-size: 1.4rem; } .recite-kanda span { color: var(--ink-3); font-size: 1rem; font-weight: 600; }

/* ---- Studio, rituals, games, sounds ------------------------------------------------------------------ */
.studio-settings { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; }
.voice-pick { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: var(--r-pill); background: var(--ground-2); border: 1px solid var(--line); font-weight: 600; }
.voice-pick select { font: inherit; border: 0; background: transparent; color: var(--ink); min-height: 36px; }
.studio-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.studio-tile { position: relative; display: grid; gap: 6px; align-content: start; min-height: 190px; padding: 20px; border-radius: 28px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: transform .25s var(--spring), box-shadow .25s; animation: rise .5s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
.studio-tile::before { content: ""; position: absolute; inset: auto -30% -60% auto; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--peacock) 22%, transparent), transparent 70%); }
.studio-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-2), var(--glow); }
.studio-tile.is-grown { background: linear-gradient(160deg, var(--ground-2), var(--surface)); }
.studio-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 18px; background: linear-gradient(135deg, var(--peacock), var(--leaf)); color: #fff; box-shadow: var(--glow); }
.studio-ic .icon { width: 28px; height: 28px; }
.studio-t { font: 700 1.25rem var(--f-display); } .studio-sa { color: var(--zari-deep); font-weight: 700; } .studio-d { color: var(--ink-2); font-size: .92rem; }
.studio-tile .chip { justify-self: start; }
.pick-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pick-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.pick-row:hover { box-shadow: var(--shadow-1); }
.pick-emoji { font-size: 1.8rem; } .pick-text { display: grid; }
.studio-run { display: grid; gap: 16px; }
.studio-run-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.studio-run-head > div { flex: 1; }
.mode-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.mode-tabs a { text-decoration: none; }
.rec-studio .rec-pick { display: flex; gap: 8px; align-items: center; margin: 12px 0; }
.rec-pick select { font: inherit; min-height: 44px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); max-width: 100%; }
.rec-lines { list-style: none; padding: 0; display: grid; gap: 10px; }
.rec-line { display: grid; gap: 10px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
@media (min-width: 760px) { .rec-line { grid-template-columns: 1fr auto; align-items: center; } }
.rec-text .deva { font-size: 1.3rem; font-weight: 700; margin: 0; }
.rec-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ritual-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.ritual-tile { display: grid; gap: 4px; padding: 20px; border-radius: 26px; text-decoration: none; color: var(--ink); background: linear-gradient(160deg, var(--zari-soft), var(--surface) 70%); border: 1px solid var(--line); }
.ritual-tile.is-now { border-color: var(--marigold); box-shadow: var(--glow); }
.ritual-tile .chip { justify-self: start; }
.ritual-emoji { font-size: 2.4rem; } .ritual-t { font: 700 1.2rem var(--f-display); }
.ritual-page { display: grid; gap: 18px; }
.ritual-verse-t { font-size: 1.2rem; } .ritual-verse-t a { text-decoration: none; color: var(--ink); }
.game-sa { color: var(--hi, var(--zari-deep)); font-weight: 700; }
.match-word small { display: block; font-size: .8rem; font-weight: 500; }
.match-word.match-mean { font: 600 1rem/1.3 var(--f-ui); }
.match-word.is-sel { outline: 3px solid var(--marigold); }
.match-word.is-matched { background: var(--leaf-soft); color: var(--leaf); }
.match-word { padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink); }
.which-game { display: grid; gap: 14px; justify-items: center; }
.which-game .quiz-opts { width: 100%; max-width: 640px; }
.sounds { display: grid; gap: 14px; }
.snd-layout { display: grid; gap: 18px; }
@media (min-width: 900px) { .snd-layout { grid-template-columns: 240px 1fr; align-items: start; } .snd-aside { position: sticky; top: calc(var(--top-h) + 16px); } }
.mouth-map svg { width: 100%; max-width: 240px; }
.mm-head, .mm-palate, .mm-tongue { fill: none; stroke: var(--ink-3); stroke-width: 3; stroke-linecap: round; }
.mm-tongue { stroke: var(--lotus-2); }
.mm-p { fill: var(--line-2); transition: fill .2s, r .2s; }
.mm-p.is-on { fill: var(--marigold); r: 13; filter: drop-shadow(0 0 8px var(--marigold)); }
.snd-group { margin-bottom: 18px; }
.snd-head h3 { font-size: 1.2rem; }
.snd-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); margin-top: 8px; }
.snd-tile { display: grid; justify-items: center; gap: 2px; padding: 12px 8px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink); text-align: center; }
.snd-tile:hover, .snd-tile.is-playing { border-color: var(--marigold); box-shadow: var(--glow); }
.snd-glyph { font: 700 2.2rem/1.3 var(--f-deva); }
.snd-tile[lang="kn"] .snd-glyph, .pair-opt[lang="kn"] .snd-glyph { font-family: var(--f-kn); } .snd-tile[lang="ml"] .snd-glyph, .pair-opt[lang="ml"] .snd-glyph { font-family: var(--f-ml-script); } .snd-tile[lang="te"] .snd-glyph, .pair-opt[lang="te"] .snd-glyph { font-family: var(--f-te); } .snd-tile[lang="ta"] .snd-glyph, .pair-opt[lang="ta"] .snd-glyph { font-family: var(--f-ml); }
.snd-tr { font-style: italic; font-weight: 700; color: var(--peacock-deep); }
.snd-ex { font-size: .78rem; color: var(--ink-3); }
.pairs-card { display: grid; gap: 12px; justify-items: center; padding: 18px; }
.pair-opts { display: flex; gap: 16px; }
.pair-opt { width: 120px; height: 120px; border-radius: 28px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink); }
.pair-opt.is-right { border-color: var(--leaf); background: var(--leaf-soft); } .pair-opt.is-wrong { border-color: var(--kumkum); opacity: .6; }

/* ---- Grown-ups & admin -------------------------------------------------------------------------------- */
.kid-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.kid-card { display: grid; gap: 10px; margin: 0; }
.kid-head { display: flex; gap: 14px; align-items: center; } .kid-head > div { flex: 1; }
.rec-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rec-row > span { flex: 1; min-width: 200px; }
.flag-list { margin: 0; padding-left: 1.1em; font-size: .88rem; display: grid; gap: 4px; }
.check-list { list-style: none; padding: 0; display: grid; gap: 8px; }
.vc-group { margin-bottom: 10px; padding: 10px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.vc-group > summary { cursor: pointer; font-weight: 700; display: flex; gap: 10px; align-items: center; }
.vc-row { display: grid; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .vc-row { grid-template-columns: 1fr auto; align-items: center; } }
.vc-row.is-ok .vc-text .deva::after { content: " ✓"; color: var(--leaf); }
.vc-text .deva { font-size: 1.2rem; font-weight: 700; margin: 0; }
.vc-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-fixer { grid-column: 1 / -1; display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--ground-2); }
.vc-fixer-row { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-fixer-row input { flex: 1; min-width: 220px; font: inherit; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); }
.vc-fixer-row select { font: inherit; min-height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); }
.vc-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 10px; }
.vc-search { flex: 1; min-width: 220px; font: inherit; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); }
.guest-note { margin-bottom: 14px; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
/* app.css gives .notes/.stats/.now dashboard spans; keep them full-width in our single-column pages */
.home > *, .me > *, .kid-card > *, .staff > *, .grownups > * { grid-column: 1 / -1; }
.me { display: grid; gap: 18px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
@media (max-width: 600px) { .topbar .brand-name { display: block !important; } .topbar .brand-sa { display: none; } }