/* ===================================================================
   Study Desk v2 — styles
   Themes are driven by CSS variables on .sd-app[data-theme=...]
   =================================================================== */

.sd-app, .sd-gate, body.sd-body {
  --bg-a:#070b16; --bg-b:#0d1630;
  --panel:rgba(255,255,255,0.045); --panel-2:rgba(255,255,255,0.07); --panel-hover:rgba(255,255,255,0.09);
  --border:rgba(255,255,255,0.10); --border-strong:rgba(255,255,255,0.22);
  --text:#eef2fb; --text-dim:#a3b0cf; --text-faint:#6f7a9a;
  --cyan:#33d2ff; --mint:#3cf0c5; --accent:#33d2ff; --accent-2:#3cf0c5;
  --on-accent:#04141c;
  --grad:linear-gradient(90deg,var(--accent),var(--accent-2));
  --danger:#ff7a68; --danger-bg:rgba(255,122,104,0.12); --danger-border:rgba(255,122,104,0.45);
  --success:#3cf0c5; --success-bg:rgba(60,240,197,0.10); --success-border:rgba(60,240,197,0.4);
  --amber:#ffb84d; --amber-bg:rgba(255,184,77,0.12); --amber-border:rgba(255,184,77,0.45);
  --info-bg:rgba(51,210,255,0.10); --info-border:rgba(51,210,255,0.4);
  --radius:18px; --radius-sm:12px;
  --shadow:0 24px 48px rgba(0,0,0,0.45);
  --glow-a:rgba(51,210,255,0.16); --glow-b:rgba(60,240,197,0.12);
  --font:'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --scale:1;
  --ai:#c49bff; --ai-bg:rgba(196,155,255,0.14); --ai-border:rgba(196,155,255,0.5);
}
.sd-app[data-theme="white"], body[data-theme="white"] {
  --bg-a:#f6f8fc; --bg-b:#eaeff8;
  --panel:#ffffff; --panel-2:#f2f5fb; --panel-hover:#f4f7fc;
  --border:rgba(20,40,80,0.10); --border-strong:rgba(20,40,80,0.25);
  --text:#101a33; --text-dim:#4d5b7c; --text-faint:#8892ad;
  --cyan:#0aa5d6; --mint:#12b48f; --accent:#0aa5d6; --accent-2:#12b48f; --on-accent:#ffffff;
  --danger:#d64a37; --danger-bg:rgba(214,74,55,0.08); --danger-border:rgba(214,74,55,0.35);
  --success:#12945f; --success-bg:rgba(18,180,143,0.10); --success-border:rgba(18,180,143,0.4);
  --amber:#b96f00; --amber-bg:rgba(255,184,77,0.16); --amber-border:rgba(185,111,0,0.4);
  --info-bg:rgba(10,165,214,0.08); --info-border:rgba(10,165,214,0.35);
  --shadow:0 12px 30px rgba(20,40,80,0.10);
  --glow-a:rgba(10,165,214,0.12); --glow-b:rgba(18,180,143,0.10);
  --ai:#7a4de0; --ai-bg:rgba(122,77,224,0.10); --ai-border:rgba(122,77,224,0.4);
}
.sd-app[data-theme="cream"], body[data-theme="cream"] {
  --bg-a:#fbf6ec; --bg-b:#f3ead8;
  --panel:#fffaf0; --panel-2:#f7efdf; --panel-hover:#fdf5e6;
  --border:rgba(90,60,20,0.12); --border-strong:rgba(90,60,20,0.28);
  --text:#2b2115; --text-dim:#6b5a42; --text-faint:#9c8b70;
  --cyan:#0b8ea8; --mint:#1c9a6d; --accent:#0b8ea8; --accent-2:#1c9a6d; --on-accent:#ffffff;
  --danger:#c2412f; --danger-bg:rgba(194,65,47,0.08); --danger-border:rgba(194,65,47,0.35);
  --success:#1c7d5a; --success-bg:rgba(28,154,109,0.10); --success-border:rgba(28,154,109,0.4);
  --amber:#9a5c00; --amber-bg:rgba(255,184,77,0.18); --amber-border:rgba(154,92,0,0.4);
  --info-bg:rgba(11,142,168,0.08); --info-border:rgba(11,142,168,0.35);
  --shadow:0 12px 30px rgba(90,60,20,0.10);
  --glow-a:rgba(11,142,168,0.10); --glow-b:rgba(28,154,109,0.10);
  --ai:#6b40c9; --ai-bg:rgba(107,64,201,0.10); --ai-border:rgba(107,64,201,0.4);
}
.sd-app[data-theme="contrast"], body[data-theme="contrast"] {
  --bg-a:#000000; --bg-b:#000000;
  --panel:#0a0a0a; --panel-2:#141414; --panel-hover:#1a1a1a;
  --border:rgba(255,255,255,0.45); --border-strong:#ffffff;
  --text:#ffffff; --text-dim:#e6e6e6; --text-faint:#bdbdbd;
  --cyan:#ffe600; --mint:#ffe600; --accent:#ffe600; --accent-2:#ffe600; --on-accent:#000000;
  --danger:#ff6b6b; --danger-bg:rgba(255,107,107,0.15); --danger-border:#ff6b6b;
  --success:#5cff9d; --success-bg:rgba(92,255,157,0.12); --success-border:#5cff9d;
  --amber:#ffd166; --amber-bg:rgba(255,209,102,0.15); --amber-border:#ffd166;
  --info-bg:rgba(255,230,0,0.10); --info-border:#ffe600;
  --shadow:none; --glow-a:transparent; --glow-b:transparent;
  --ai:#d9b3ff; --ai-bg:rgba(217,179,255,0.15); --ai-border:#d9b3ff;
}
/* Desk theme — warm cream, navy + gold, serif headings (the default look) */
.sd-app[data-theme="desk"], body[data-theme="desk"], .sd-gate[data-theme="desk"] {
  --bg-a:#f6f1e8; --bg-b:#efe7d9;
  --panel:#ffffff; --panel-2:#f6f1e8; --panel-hover:#fbf8f2;
  --border:rgba(28,47,90,0.10); --border-strong:rgba(28,47,90,0.28);
  --text:#1c2f5a; --text-dim:#4f5f80; --text-faint:#8a94ad;
  --cyan:#2f6bb0; --mint:#c8963e; --accent:#2f6bb0; --accent-2:#5b8fd6; --on-accent:#ffffff;
  --gold:#c8963e;
  --grad:linear-gradient(90deg,#2f6bb0,#4d86c9);
  --danger:#c94b3c; --danger-bg:rgba(201,75,60,0.08); --danger-border:rgba(201,75,60,0.35);
  --success:#2e8b6a; --success-bg:rgba(46,139,106,0.10); --success-border:rgba(46,139,106,0.4);
  --amber:#b97a12; --amber-bg:rgba(200,150,62,0.14); --amber-border:rgba(200,150,62,0.45);
  --info-bg:rgba(47,107,176,0.08); --info-border:rgba(47,107,176,0.35);
  --shadow:0 14px 34px rgba(28,47,90,0.10);
  --glow-a:rgba(200,150,62,0.18); --glow-b:rgba(47,107,176,0.12);
  --ai:#6b40c9; --ai-bg:rgba(107,64,201,0.10); --ai-border:rgba(107,64,201,0.4);
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
}
.sd-app[data-theme="desk"] .topbar { background:rgba(255,255,255,0.75); }
.sd-app[data-theme="desk"] h2, .sd-app[data-theme="desk"] .hero h2 { font-family:var(--serif); font-weight:700; }
.sd-app[data-theme="desk"] .topbar .brand h1 { font-family:var(--serif); font-weight:700; font-size:1.25em; background:none; -webkit-background-clip:initial; background-clip:initial; color:#1c2f5a; -webkit-text-fill-color:#1c2f5a; }
.sd-app[data-theme="desk"] .topbar .brand h1 b { color:#2f6bb0; -webkit-text-fill-color:#2f6bb0; }
.sd-app[data-theme="desk"] .topbar .tag { letter-spacing:0.22em; font-size:0.62em; color:#8a94ad; text-transform:uppercase; }
.sd-app[data-theme="desk"] .hero h2 { background:none; -webkit-background-clip:initial; background-clip:initial; color:#1c2f5a; -webkit-text-fill-color:#1c2f5a; font-style:italic; font-weight:600; font-size:2em; line-height:1.05; }
.sd-app[data-theme="desk"] .hero h2 .nm { display:block; font-style:normal; font-weight:800; color:var(--gold); -webkit-text-fill-color:var(--gold); font-size:1.35em; }
.sd-app[data-theme="desk"] .hero p.sub { text-transform:uppercase; letter-spacing:0.2em; font-size:0.72em; font-weight:700; color:#1c2f5a; }
.sd-app[data-theme="desk"] .hero .rule { width:70px; height:2px; background:var(--gold); margin-top:12px; }
.sd-app[data-theme="desk"] .section-title h3 { font-family:var(--serif); font-size:1.2em; color:#1c2f5a; font-weight:700; white-space:nowrap; }
@media (max-width:480px) { .section-title .kicker-text { display:none; } .topbar .clock { display:none; } }
.sd-app[data-theme="desk"] .section-title .kicker { flex:1; margin-left:14px; border-top:1px solid var(--gold); position:relative; top:2px; }
.sd-app[data-theme="desk"] .section-title .kicker-text { font-size:0.62em; letter-spacing:0.2em; text-transform:uppercase; color:#8a94ad; font-weight:700; margin-left:10px; }
.sd-app[data-theme="desk"] .icon-btn { background:#fff; border-color:rgba(28,47,90,0.12); }
.sd-app[data-theme="desk"] .icon-btn.on { background:var(--gold); color:#fff; }
.sd-app[data-theme="desk"] .avatar { border-color:var(--gold); }
.sd-app[data-theme="desk"] .avatar-fallback { background:#1c2f5a; color:#fff; }
.sd-app[data-theme="desk"] .crumb.subject { background:#1c2f5a; }
.sd-app[data-theme="desk"] .btn-primary { background:linear-gradient(90deg,#1c2f5a,#2f6bb0) !important; }
.sd-app[data-theme="desk"] .btn-amber { background:linear-gradient(90deg,#c8963e,#e0b56a) !important; color:#1c2f5a !important; }
.sd-app[data-theme="desk"] .score-pill, .sd-app[data-theme="desk"] .pill.accent, .sd-app[data-theme="desk"] .chip.on { background:#1c2f5a; color:#fff; }
.sd-app[data-theme="desk"] .step .num { background:var(--gold); color:#fff; }
.sd-app[data-theme="desk"] .sd-splash-text { background:none; color:#1c2f5a; font-family:var(--serif); }

/* hero with photo (all themes; photo only when the theme is light) */
.hero-wrap { position:relative; border-radius:24px; overflow:hidden; margin-bottom:16px; min-height:170px; display:flex; align-items:center; }
.hero-wrap .hero { position:relative; z-index:1; padding:22px 20px; max-width:64%; text-shadow:0 1px 0 rgba(255,255,255,0.6); }
.hero-wrap .hero-photo { position:absolute; inset:0; background:url(img/hero.jpg) right 30% / cover no-repeat; opacity:0; }
.sd-app[data-theme="desk"] .hero-wrap .hero-photo, .sd-app[data-theme="white"] .hero-wrap .hero-photo, .sd-app[data-theme="cream"] .hero-wrap .hero-photo { opacity:1; }
.sd-app[data-theme="desk"] .hero-wrap .hero-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(246,241,232,0.97) 0%, rgba(246,241,232,0.93) 40%, rgba(246,241,232,0.55) 62%, rgba(246,241,232,0) 100%); }
.sd-app[data-theme="white"] .hero-wrap .hero-photo::after, .sd-app[data-theme="cream"] .hero-wrap .hero-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.85) 45%, rgba(255,255,255,0.1) 100%); }
@media (max-width:420px) { .hero-wrap .hero { max-width:70%; padding:18px 16px; } }

/* photo tiles */
.tile.photo { position:relative; overflow:hidden; color:#fff; min-height:156px; display:flex; flex-direction:column; justify-content:flex-end; padding:14px 14px 16px; border:none; box-shadow:var(--shadow); }
.tile.photo::before { content:''; position:absolute; inset:0; background:var(--tile-img) center / cover no-repeat; opacity:0.55; }
.tile.photo::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, var(--tile-a) 0%, var(--tile-a) 35%, var(--tile-b) 100%); opacity:0.82; }
.tile.photo > * { position:relative; z-index:1; }
.tile.photo .ic { width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,0.9); color:var(--tile-a); display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:auto; box-shadow:0 4px 14px rgba(0,0,0,0.18); }
.tile.photo h3 { color:#fff; font-size:1.02em; margin:12px 0 2px; padding-right:4px; text-shadow:0 1px 2px rgba(0,0,0,0.25); }
.tile.photo p { color:rgba(255,255,255,0.9); font-size:0.78em; line-height:1.35; margin:0; padding-right:40px; text-shadow:0 1px 2px rgba(0,0,0,0.25); }
.tile.photo .chev { position:absolute; right:12px; bottom:12px; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.28); display:flex; align-items:center; justify-content:center; font-weight:900; color:#fff; z-index:1; }
.tile.photo.wide { grid-column:1 / -1; min-height:120px; flex-direction:row; align-items:center; gap:14px; }
.tile.photo.wide .ic { margin:0; }
.tile.photo.wide h3 { margin:0 0 2px; }
.tile.photo.wide .txt { flex:1; }
.tile.photo.wide .quote { font-family:var(--serif, Georgia, serif); font-style:italic; font-size:0.85em; opacity:0.9; text-align:right; line-height:1.25; padding-right:36px; }
.tile.photo.wide p { padding-right:0; }
.tile.photo.light { color:#1c2f5a; }
.tile.photo.light::after { opacity:0.75; }
.tile.photo.light h3 { color:#1c2f5a; text-shadow:none; } .tile.photo.light p { color:#3c4a6b; text-shadow:none; } .tile.photo.light .chev { background:rgba(28,47,90,0.10); color:#1c2f5a; } .tile.photo.light .ic { background:#1c2f5a; color:#fff; }
.tile.photo:hover { transform:translateY(-2px); }
.sd-app[data-theme="contrast"] .tile.photo::before { display:none; } .sd-app[data-theme="contrast"] .tile.photo::after { opacity:1; }

/* bottom nav */
.bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; justify-content:space-around; align-items:center; padding:8px 8px calc(10px + env(safe-area-inset-bottom)); background:#1c2f5a; border-top:1px solid rgba(255,255,255,0.08); box-shadow:0 -8px 24px rgba(0,0,0,0.18); }
.sd-app[data-theme="navy"] .bottom-nav { background:#0b1230; } .sd-app[data-theme="contrast"] .bottom-nav { background:#000; border-top-color:#fff; }
.sd-app .bottom-nav button { display:flex; flex-direction:column; align-items:center; gap:3px; background:none; padding:6px 10px; border-radius:12px; color:rgba(255,255,255,0.72); font-size:0.72em; font-weight:700; min-width:58px; }
.sd-app .bottom-nav button .i { font-size:20px; line-height:1; filter:grayscale(1) brightness(1.8); }
.sd-app .bottom-nav button.on { color:#fff; } .sd-app .bottom-nav button.on .i { filter:none; }
.sd-app { padding-bottom:110px; }
.chat-input { bottom:96px; }
.toast { bottom:100px; }
.modal-bg { padding-bottom:0; }


/* ---- Night: matches the login scene — deep navy, electric blue/cyan, bold sans ---- */
.sd-app[data-theme="night"], body[data-theme="night"] {
  --bg-a:#050b1a; --bg-b:#0a1530;
  --panel:rgba(16,28,56,0.75); --panel-2:rgba(255,255,255,0.06); --panel-hover:rgba(255,255,255,0.09);
  --border:rgba(51,210,255,0.16); --border-strong:rgba(51,210,255,0.4);
  --text:#eaf2ff; --text-dim:#a9b8d6; --text-faint:#6f7f9f;
  --cyan:#33d2ff; --mint:#3cf0c5; --accent:#2f7cff; --accent-2:#33d2ff; --on-accent:#ffffff; --gold:#33d2ff;
  --grad:linear-gradient(90deg,#2f7cff,#33d2ff);
  --danger:#ff7a68; --danger-bg:rgba(255,122,104,0.12); --danger-border:rgba(255,122,104,0.45);
  --success:#3cf0c5; --success-bg:rgba(60,240,197,0.10); --success-border:rgba(60,240,197,0.4);
  --amber:#ffb84d; --amber-bg:rgba(255,184,77,0.12); --amber-border:rgba(255,184,77,0.45);
  --info-bg:rgba(51,210,255,0.10); --info-border:rgba(51,210,255,0.4);
  --shadow:0 18px 44px rgba(0,0,0,0.45); --glow-a:rgba(47,124,255,0.22); --glow-b:rgba(51,210,255,0.14);
  --ai:#c49bff; --ai-bg:rgba(196,155,255,0.14); --ai-border:rgba(196,155,255,0.5);
}
.sd-app[data-theme="night"] .hero h2 { background:none; -webkit-background-clip:initial; background-clip:initial; color:#fff; -webkit-text-fill-color:#fff; font-weight:900; font-size:2em; line-height:1.05; letter-spacing:-0.02em; }
.sd-app[data-theme="night"] .hero h2 .nm { display:block; background:linear-gradient(90deg,#2f7cff,#33d2ff); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; font-size:1.3em; }
.sd-app[data-theme="night"] .hero p.sub { text-transform:uppercase; letter-spacing:0.22em; font-size:0.7em; font-weight:700; color:#c6d3ea; }
.sd-app[data-theme="night"] .hero-wrap .hero-photo { opacity:1; background-image:url(img/login-bg.jpg); }
.sd-app[data-theme="night"] .hero-wrap .hero-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,11,26,0.96) 0%, rgba(5,11,26,0.85) 45%, rgba(5,11,26,0.35) 70%, rgba(5,11,26,0.1) 100%); }
.sd-app[data-theme="night"] .tile.photo::before { opacity:0.35; }
.sd-app[data-theme="night"] .bottom-nav { background:#07102a; border-top-color:rgba(51,210,255,0.2); }
.sd-app[data-theme="night"] .topbar .brand h1 { background:none; color:#fff; -webkit-text-fill-color:#fff; }
.sd-app[data-theme="night"] .topbar .brand h1 b { background:linear-gradient(90deg,#2f7cff,#33d2ff); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.sd-app[data-theme="night"] .section-title h3 { color:#fff; font-size:1.1em; }

/* ---- Forest: sage & moss, cream cards, calm and organic; serif headings ---- */
.sd-app[data-theme="forest"], body[data-theme="forest"] {
  --bg-a:#eef1e6; --bg-b:#e2e8d6;
  --panel:#ffffff; --panel-2:#f2f5ea; --panel-hover:#f8faf3;
  --border:rgba(36,64,42,0.12); --border-strong:rgba(36,64,42,0.3);
  --text:#1f3324; --text-dim:#4f6553; --text-faint:#8a9a8c;
  --cyan:#2f7d4f; --mint:#c9a24a; --accent:#2f7d4f; --accent-2:#5aa46f; --on-accent:#ffffff; --gold:#c9a24a;
  --grad:linear-gradient(90deg,#2f7d4f,#5aa46f);
  --danger:#c94b3c; --danger-bg:rgba(201,75,60,0.08); --danger-border:rgba(201,75,60,0.35);
  --success:#2e8b6a; --success-bg:rgba(46,139,106,0.10); --success-border:rgba(46,139,106,0.4);
  --amber:#a87a12; --amber-bg:rgba(201,162,74,0.16); --amber-border:rgba(201,162,74,0.45);
  --info-bg:rgba(47,125,79,0.08); --info-border:rgba(47,125,79,0.35);
  --shadow:0 14px 34px rgba(31,51,36,0.10); --glow-a:rgba(201,162,74,0.18); --glow-b:rgba(47,125,79,0.14);
  --ai:#6b40c9; --ai-bg:rgba(107,64,201,0.10); --ai-border:rgba(107,64,201,0.4);
  --serif:'Playfair Display', Georgia, serif;
}
.sd-app[data-theme="forest"] h2, .sd-app[data-theme="forest"] .hero h2, .sd-app[data-theme="forest"] .section-title h3, .sd-app[data-theme="forest"] .topbar .brand h1 { font-family:var(--serif); }
.sd-app[data-theme="forest"] .hero h2 { background:none; -webkit-background-clip:initial; background-clip:initial; color:#1f3324; -webkit-text-fill-color:#1f3324; font-style:italic; font-weight:600; font-size:2em; line-height:1.05; }
.sd-app[data-theme="forest"] .hero h2 .nm { display:block; font-style:normal; font-weight:800; color:#2f7d4f; -webkit-text-fill-color:#2f7d4f; font-size:1.35em; }
.sd-app[data-theme="forest"] .hero p.sub { text-transform:uppercase; letter-spacing:0.2em; font-size:0.72em; font-weight:700; color:#1f3324; }
.sd-app[data-theme="forest"] .hero-wrap .hero-photo { opacity:1; }
.sd-app[data-theme="forest"] .hero-wrap .hero-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(238,241,230,0.97) 0%, rgba(238,241,230,0.92) 40%, rgba(238,241,230,0.5) 62%, rgba(238,241,230,0) 100%); }
.sd-app[data-theme="forest"] .topbar .brand h1 { background:none; color:#1f3324; -webkit-text-fill-color:#1f3324; font-weight:700; font-size:1.25em; }
.sd-app[data-theme="forest"] .topbar .brand h1 b { color:#2f7d4f; -webkit-text-fill-color:#2f7d4f; }
.sd-app[data-theme="forest"] .section-title h3 { font-size:1.2em; color:#1f3324; font-weight:700; }
.sd-app[data-theme="forest"] .bottom-nav { background:#1f3324; }
.sd-app[data-theme="forest"] .btn-primary { background:linear-gradient(90deg,#1f3324,#2f7d4f) !important; }
.sd-app[data-theme="forest"] .avatar { border-color:#c9a24a; } .sd-app[data-theme="forest"] .avatar-fallback { background:#1f3324; }
.sd-app[data-theme="forest"] .crumb.subject, .sd-app[data-theme="forest"] .score-pill, .sd-app[data-theme="forest"] .chip.on { background:#1f3324; color:#fff; }

/* ---- Sunset: warm coral, plum and peach; rounded sans, playful ---- */
.sd-app[data-theme="sunset"], body[data-theme="sunset"] {
  --bg-a:#fff4ee; --bg-b:#ffe6dc;
  --panel:#ffffff; --panel-2:#fff1ea; --panel-hover:#fff7f3;
  --border:rgba(90,30,60,0.10); --border-strong:rgba(90,30,60,0.28);
  --text:#3a1d33; --text-dim:#6f4a63; --text-faint:#a48899;
  --cyan:#e5533d; --mint:#f5a623; --accent:#e5533d; --accent-2:#f5a623; --on-accent:#ffffff; --gold:#f5a623;
  --grad:linear-gradient(90deg,#e5533d,#f5a623);
  --danger:#c93a2c; --danger-bg:rgba(201,58,44,0.08); --danger-border:rgba(201,58,44,0.35);
  --success:#2e8b6a; --success-bg:rgba(46,139,106,0.10); --success-border:rgba(46,139,106,0.4);
  --amber:#b7730a; --amber-bg:rgba(245,166,35,0.16); --amber-border:rgba(245,166,35,0.45);
  --info-bg:rgba(229,83,61,0.08); --info-border:rgba(229,83,61,0.35);
  --shadow:0 14px 34px rgba(90,30,60,0.12); --glow-a:rgba(245,166,35,0.2); --glow-b:rgba(229,83,61,0.14);
  --ai:#7a3fa0; --ai-bg:rgba(122,63,160,0.10); --ai-border:rgba(122,63,160,0.4);
}
.sd-app[data-theme="sunset"] .hero h2 { background:none; -webkit-background-clip:initial; background-clip:initial; color:#3a1d33; -webkit-text-fill-color:#3a1d33; font-weight:900; font-size:1.9em; line-height:1.05; letter-spacing:-0.02em; }
.sd-app[data-theme="sunset"] .hero h2 .nm { display:block; background:linear-gradient(90deg,#e5533d,#f5a623); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; font-size:1.3em; }
.sd-app[data-theme="sunset"] .hero p.sub { text-transform:uppercase; letter-spacing:0.2em; font-size:0.7em; font-weight:800; color:#6f4a63; }
.sd-app[data-theme="sunset"] .hero-wrap .hero-photo { opacity:1; filter:sepia(0.35) saturate(1.2); }
.sd-app[data-theme="sunset"] .hero-wrap .hero-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,244,238,0.97) 0%, rgba(255,244,238,0.92) 40%, rgba(255,244,238,0.5) 62%, rgba(255,244,238,0) 100%); }
.sd-app[data-theme="sunset"] .topbar .brand h1 { background:none; color:#3a1d33; -webkit-text-fill-color:#3a1d33; font-weight:900; }
.sd-app[data-theme="sunset"] .topbar .brand h1 b { background:linear-gradient(90deg,#e5533d,#f5a623); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.sd-app[data-theme="sunset"] .bottom-nav { background:#3a1d33; }
.sd-app[data-theme="sunset"] .section-title h3 { color:#3a1d33; font-size:1.1em; font-weight:900; }
.sd-app[data-theme="sunset"] .crumb.subject, .sd-app[data-theme="sunset"] .score-pill, .sd-app[data-theme="sunset"] .chip.on { background:var(--grad); color:#fff; }

.sd-app[data-font="lexend"] { --font:'Lexend', 'Nunito', sans-serif; }
.sd-app[data-font="system"] { --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.sd-app[data-motion="reduce"] *, .sd-app[data-motion="reduce"] *::before, .sd-app[data-motion="reduce"] *::after { animation:none !important; transition:none !important; }

/* page background lives on body so it fills the viewport */
body.sd-body { margin:0; }
body.sd-body, body.sd-body .sd-bg { background:var(--bg-a); }
.sd-bg {
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(700px 420px at 10% -8%, var(--glow-a), transparent 60%),
    radial-gradient(760px 460px at 95% 0%, var(--glow-b), transparent 60%),
    linear-gradient(180deg,var(--bg-a) 0%, var(--bg-b) 100%);
}

.sd-app, .sd-gate {
  color:var(--text); font-family:var(--font); font-size:calc(16px * var(--scale)); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.sd-app *, .sd-gate * { box-sizing:border-box; }
.sd-app { max-width:760px; margin:0 auto; padding:calc(10px + env(safe-area-inset-top)) 14px 90px; min-height:100vh; }
.sd-app h1, .sd-app h2, .sd-app h3, .sd-gate h1 { font-weight:800; letter-spacing:-0.01em; margin:0 0 8px; color:var(--text); line-height:1.2; }
.sd-app h2 { font-size:1.35em; }
.sd-app h3 { font-size:1.05em; }
.sd-app p { margin:0 0 10px; }
.sd-app a { color:var(--accent); }
.sd-app img { max-width:100%; }
.muted { color:var(--text-dim); }
.faint { color:var(--text-faint); font-size:0.85em; }
.small { font-size:0.88em; }
.center { text-align:center; }
.mt { margin-top:14px; } .mb { margin-bottom:14px; }
.hide { display:none !important; }

/* ---------- splash ---------- */
.sd-splash { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:70vh; gap:12px; }
.sd-splash-mark { font-size:56px; filter:drop-shadow(0 0 16px var(--glow-a)); }
.sd-splash-text { font-weight:800; font-size:1.3em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- gate (login / signup) ---------- */
.sd-gate { display:flex; align-items:flex-start; justify-content:center; padding:32px 14px 60px; min-height:100vh; }
.sd-gate-card { width:100%; max-width:420px; background:var(--panel); border:1px solid var(--border); border-radius:24px; padding:30px 26px; box-shadow:var(--shadow); backdrop-filter:blur(16px); }
.sd-gate-brand { text-align:center; margin-bottom:22px; }
.sd-gate-mark { font-size:44px; display:block; margin-bottom:6px; filter:drop-shadow(0 0 12px var(--glow-a)); }
.sd-gate[data-theme="desk"] .sd-gate-brand h1 { font-family:var(--serif); background:none; color:#1c2f5a; -webkit-text-fill-color:initial; }
.sd-gate[data-theme="desk"] .sd-gate-btn { background:linear-gradient(90deg,#1c2f5a,#2f6bb0); color:#fff; }
.sd-gate[data-theme="desk"] .sd-gate-card { box-shadow:0 20px 50px rgba(28,47,90,0.14); }
.sd-gate-brand h1 { font-size:1.7em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin:0 0 4px; }
.sd-gate-brand p { color:var(--text-dim); margin:0; font-size:0.95em; }
.sd-gate-form { display:flex; flex-direction:column; gap:14px; }
.sd-gate-form label { display:flex; flex-direction:column; gap:6px; font-weight:700; font-size:0.9em; color:var(--text-dim); }
.sd-gate-form input[type=text], .sd-gate-form input[type=password] {
  width:100%; padding:14px 16px; border-radius:14px; border:1.5px solid var(--border); background:var(--panel-2); color:var(--text);
  font-size:1.05em; font-family:inherit; margin:0;
}
.sd-gate-form input:focus { outline:none; border-color:var(--accent); }
.sd-gate-check { flex-direction:row !important; align-items:center; font-weight:600 !important; }
.sd-gate-check input { accent-color:var(--accent); width:18px; height:18px; margin:0; }
.sd-gate-btn { border:none; border-radius:999px; padding:15px 20px; font-size:1.05em; font-weight:800; font-family:inherit; background:var(--grad); color:var(--on-accent); cursor:pointer; }
.sd-gate-link { width:100%; background:none; border:none; color:var(--accent); font-family:inherit; font-size:0.95em; cursor:pointer; text-decoration:underline; padding:4px; }
.sd-gate-error { background:var(--danger-bg); border:1px solid var(--danger-border); color:var(--danger); border-radius:12px; padding:10px 14px; font-size:0.92em; }
.sd-gate-ok { background:var(--success-bg); border:1px solid var(--success-border); color:var(--success); border-radius:12px; padding:10px 14px; font-size:0.92em; }

/* ---------- top bar ---------- */
.topbar { display:flex; align-items:center; gap:10px; padding:10px 12px 10px 14px; background:var(--panel); border:1px solid var(--border); border-radius:999px; margin-bottom:16px; backdrop-filter:blur(16px); position:sticky; top:8px; z-index:20; }
.topbar .brand { display:flex; align-items:center; gap:10px; flex:1; min-width:0; cursor:pointer; }
.topbar .brand > div { min-width:0; flex:1; }
.topbar .brand h1 { font-size:1.05em; margin:0; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar .tag { font-size:0.72em; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar .mark { font-size:22px; line-height:1; filter:drop-shadow(0 0 6px var(--glow-a)); }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:var(--panel-2); color:var(--text); cursor:pointer; font-size:18px; padding:0; flex:0 0 auto; font-family:inherit; }
.icon-btn.on { background:var(--grad); color:var(--on-accent); border-color:transparent; }
.icon-btn .badge { position:absolute; top:-4px; right:-4px; background:var(--danger); color:#fff; font-size:10px; font-weight:800; border-radius:999px; min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.icon-btn { position:relative; }
.avatar { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--border-strong); background:var(--panel-2); display:inline-flex; align-items:center; justify-content:center; font-size:20px; flex:0 0 auto; overflow:hidden; }
.avatar.lg { width:96px; height:96px; font-size:48px; border-width:3px; }
.avatar.sm { width:28px; height:28px; font-size:14px; }
.avatar-fallback { display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:var(--on-accent); font-weight:900; }

/* ---------- crumbs / subject strip ---------- */
.crumbs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; font-size:0.85em; align-items:center; }
.crumb { background:var(--panel); border:1px solid var(--border); color:var(--text-dim); padding:7px 14px; border-radius:999px; cursor:pointer; font-family:inherit; font-size:inherit; }
.crumb:hover { border-color:var(--border-strong); color:var(--text); }
.crumb.subject { background:var(--grad); color:var(--on-accent); border-color:transparent; font-weight:800; cursor:default; }

/* ---------- cards / tiles ---------- */
.card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:16px; box-shadow:var(--shadow); backdrop-filter:blur(16px); }
.card.tight { padding:14px 16px; }
.card.flat { box-shadow:none; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:420px) { .grid-3 { grid-template-columns:repeat(2,1fr); } }
.tile { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px; cursor:pointer; text-align:left; transition:transform .12s ease, border-color .12s ease, background .12s ease; color:var(--text); font-family:inherit; }
.tile:hover { transform:translateY(-2px); border-color:var(--accent); background:var(--panel-hover); }
.tile .icon { font-size:26px; margin-bottom:8px; display:block; }
.tile h3 { font-size:1em; margin-bottom:2px; }
.tile p { font-size:0.85em; color:var(--text-dim); margin:0; }
.tile.sel { border-color:var(--accent); background:var(--info-bg); }

.list-tile { display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:14px 16px; margin-bottom:10px; cursor:pointer; transition:transform .12s ease, border-color .12s ease, background .12s ease; width:100%; text-align:left; color:var(--text); font-family:inherit; font-size:inherit; }
.list-tile:hover { transform:translateX(3px); border-color:var(--accent); background:var(--panel-hover); }
.list-tile .icon-chip { flex:0 0 44px; height:44px; border-radius:13px; background:linear-gradient(135deg, var(--glow-a), var(--glow-b)); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:22px; }
.list-tile .content { flex:1; min-width:0; }
.list-tile .content h3 { font-size:1em; margin:0 0 2px; }
.list-tile .content p { font-size:0.85em; color:var(--text-dim); margin:0; }
.list-tile .meta { font-size:0.8em; color:var(--text-faint); white-space:nowrap; }
.list-tile.compact { padding:10px 14px; margin-bottom:8px; }
.list-tile.compact .icon-chip { flex-basis:36px; height:36px; font-size:18px; border-radius:10px; }

.hero { padding:6px 4px 10px; }
.hero h2 { font-size:1.7em; line-height:1.15; margin-bottom:6px; background:linear-gradient(90deg, var(--text), var(--accent) 60%, var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.sub { color:var(--text-dim); margin:0; }

.section-title { display:flex; align-items:center; justify-content:space-between; margin:18px 0 10px; }
.section-title h3 { margin:0; font-size:0.95em; color:var(--text-dim); font-weight:700; }

/* ---------- buttons ---------- */
.sd-app button { font-family:inherit; font-size:0.95em; cursor:pointer; border-radius:999px; border:none; padding:12px 20px; transition:transform .08s ease, filter .12s ease; color:var(--text); background:var(--panel-2); line-height:1.2; }
.sd-app button:active { transform:scale(0.98); }
/* buttons that are cards, not pills */
.sd-app .tile { border-radius:var(--radius); padding:18px; }
.sd-app .tile.photo { padding:14px 14px 16px; }
.sd-app .list-tile { border-radius:16px; padding:14px 16px; }
.sd-app .list-tile.compact { padding:10px 14px; }
.sd-app .quiz-opt { border-radius:14px; padding:14px 16px; }
.sd-app .folder { border-radius:14px; }
.sd-app .flashcard { border-radius:20px; }
.sd-app .avatar-grid .av { border-radius:50%; }
.sd-app .crumb { padding:7px 14px; }
.sd-app .mode-pick .tile { padding:14px; }
.sd-app button:disabled { opacity:0.45; cursor:not-allowed; }
.btn-primary { background:var(--grad) !important; color:var(--on-accent) !important; font-weight:800; }
.btn-primary:hover { filter:brightness(1.06); }
.btn-amber { background:linear-gradient(90deg,var(--amber),#ff8a5c) !important; color:#241200 !important; font-weight:800; }
.btn-outline { background:transparent !important; border:1.5px solid var(--accent) !important; color:var(--accent) !important; }
.btn-outline:hover { background:var(--info-bg) !important; }
.btn-danger { background:var(--danger-bg) !important; border:1.5px solid var(--danger-border) !important; color:var(--danger) !important; }
.btn-ghost { background:transparent !important; color:var(--text-dim) !important; text-decoration:underline; padding:8px 6px; border-radius:6px; }
.btn-ghost:hover { color:var(--text) !important; }
.btn-ai { background:var(--ai-bg) !important; border:1.5px solid var(--ai-border) !important; color:var(--ai) !important; font-weight:700; }
.btn-sm { padding:8px 14px !important; font-size:0.85em !important; }
.btn-lg { padding:16px 26px !important; font-size:1.05em !important; }
.btn-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.btn-row.center { justify-content:center; }
.full { width:100%; }
.pill { display:inline-block; padding:4px 11px; border-radius:999px; font-size:0.75em; font-weight:800; background:var(--panel-2); border:1px solid var(--border); color:var(--text-dim); }
.pill.accent { background:var(--grad); color:var(--on-accent); border-color:transparent; }
.pill.ai { background:var(--ai-bg); color:var(--ai); border-color:var(--ai-border); }
.pill.ok { background:var(--success-bg); color:var(--success); border-color:var(--success-border); }
.pill.warn { background:var(--amber-bg); color:var(--amber); border-color:var(--amber-border); }
.pill.bad { background:var(--danger-bg); color:var(--danger); border-color:var(--danger-border); }

/* ---------- forms ---------- */
.sd-app input[type=text], .sd-app input[type=password], .sd-app input[type=number], .sd-app input[type=date], .sd-app input[type=time], .sd-app select, .sd-app textarea {
  width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--border); background:var(--panel-2); color:var(--text); font-size:1em; font-family:inherit; margin:0;
}
.sd-app textarea { min-height:120px; line-height:1.6; resize:vertical; }
.sd-app input::placeholder, .sd-app textarea::placeholder { color:var(--text-faint); }
.sd-app input:focus, .sd-app select:focus, .sd-app textarea:focus { outline:none; border-color:var(--accent); }
.sd-app label.field { display:flex; flex-direction:column; gap:6px; font-weight:700; font-size:0.88em; color:var(--text-dim); margin-bottom:12px; }
.sd-app .row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.sd-app .row > * { flex:1; min-width:0; }
.sd-app .row > .fixed { flex:0 0 auto; }
.switch { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.switch:last-child { border-bottom:none; }
.switch .lbl { flex:1; }
.switch .lbl small { display:block; color:var(--text-faint); font-weight:400; }
.switch input[type=checkbox] { width:44px; height:26px; appearance:none; background:var(--panel-2); border:1.5px solid var(--border); border-radius:999px; position:relative; cursor:pointer; margin:0; flex:0 0 auto; }
.switch input[type=checkbox]::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--text-faint); transition:transform .15s ease; }
.switch input[type=checkbox]:checked { background:var(--grad); border-color:transparent; }
.switch input[type=checkbox]:checked::after { background:var(--on-accent); transform:translateX(18px); }
.switch.pick { cursor:pointer; border-radius:12px; padding:12px 8px; margin:0 -8px; }
.switch.pick.on { background:var(--info-bg); }
.radio { width:24px; height:24px; border-radius:50%; border:2px solid var(--border-strong); flex:0 0 auto; display:inline-block; position:relative; }
.radio.on { border-color:var(--accent); }
.radio.on::after { content:''; position:absolute; inset:4px; border-radius:50%; background:var(--grad); }
.seg { display:flex; gap:4px; background:var(--panel-2); border:1px solid var(--border); border-radius:999px; padding:4px; }
.seg button { flex:1; padding:9px 10px; border-radius:999px; background:transparent; color:var(--text-dim); font-weight:700; font-size:0.88em; }
.seg button.on { background:var(--grad); color:var(--on-accent); }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.chip { display:inline-flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--border); color:var(--text-dim); padding:9px 14px; border-radius:999px; cursor:pointer; font-size:0.92em; font-family:inherit; }
.chip:hover { border-color:var(--accent); color:var(--text); }
.chip.on { background:var(--grad); color:var(--on-accent); border-color:transparent; font-weight:800; }
.chip.skip { opacity:0.55; text-decoration:line-through; }
.chip .x { opacity:0.6; margin-left:2px; }

/* ---------- content bits ---------- */
.step { display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
.step:last-child { border-bottom:none; }
.step .num { flex:0 0 28px; height:28px; border-radius:50%; background:var(--grad); color:var(--on-accent); display:flex; align-items:center; justify-content:center; font-size:0.8em; font-weight:900; }
.step p { margin:0; line-height:1.6; }
.box { border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin-top:12px; background:var(--panel-2); }
.box .label { font-size:0.72em; letter-spacing:0.06em; font-weight:900; margin-bottom:5px; color:var(--text-dim); }
.box.ok { background:var(--success-bg); border-color:var(--success-border); } .box.ok .label { color:var(--success); }
.box.info { background:var(--info-bg); border-color:var(--info-border); } .box.info .label { color:var(--accent); }
.box.bad { background:var(--danger-bg); border-color:var(--danger-border); } .box.bad .label { color:var(--danger); }
.box.warn { background:var(--amber-bg); border-color:var(--amber-border); } .box.warn .label { color:var(--amber); }
.box.ai { background:var(--ai-bg); border-color:var(--ai-border); } .box.ai .label { color:var(--ai); }
.box p:last-child { margin-bottom:0; }
.prose { line-height:1.7; white-space:pre-wrap; word-wrap:break-word; }
.prose.read-focus .sent.now { background:var(--amber-bg); border-radius:4px; box-shadow:0 0 0 3px var(--amber-bg); }

.compare-step { border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:10px; }
.compare-step.error { border-color:var(--danger-border); background:var(--danger-bg); }
.compare-step.ok { border-color:var(--success-border); background:var(--success-bg); }
.compare-step .step-label { font-weight:800; font-size:0.85em; margin-bottom:6px; }
.compare-step .r { font-size:0.92em; margin-bottom:3px; }
.compare-step .r.student { color:var(--danger); }
.compare-step .r.correct { color:var(--success); }
.flag { display:inline-block; font-size:0.68em; font-weight:900; padding:3px 9px; border-radius:999px; margin-left:6px; }
.flag.error { background:var(--danger); color:#2a0805; }
.flag.ok { background:var(--success); color:#04241c; }

.photo-input { display:none; }
.capture-btn { display:flex; align-items:center; justify-content:center; gap:8px; border:2px dashed var(--accent); background:var(--info-bg); color:var(--accent); padding:22px 16px; border-radius:16px; width:100%; font-weight:800; cursor:pointer; margin-top:12px; }
.capture-btn.slim { padding:12px; font-size:0.92em; }
.thumbs { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }
.thumb { width:88px; height:112px; border-radius:12px; object-fit:cover; border:1px solid var(--border); }
.thumb-wrap { position:relative; }
.thumb-wrap .rm { position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%; background:var(--danger); color:#fff; font-size:12px; padding:0; display:flex; align-items:center; justify-content:center; }

.loading { display:flex; align-items:center; gap:10px; color:var(--text-dim); padding:14px 0; }
.spinner { width:18px; height:18px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:sdspin .8s linear infinite; flex:0 0 auto; }
@keyframes sdspin { to { transform:rotate(360deg); } }

.mic-row { display:flex; align-items:center; gap:10px; background:var(--amber-bg); border:1px solid var(--amber-border); border-radius:12px; padding:11px 15px; margin-top:12px; color:var(--amber); font-weight:700; }
.mic-row.listening { animation:sdpulse 1s ease-in-out infinite; }
@keyframes sdpulse { 0%,100% { opacity:1; } 50% { opacity:0.55; } }
.mic-live { font-weight:400; color:var(--text-dim); font-style:italic; }

.quiz-opt { display:block; width:100%; text-align:left; background:var(--panel); border:1.5px solid var(--border); color:var(--text); padding:14px 16px; border-radius:14px; margin-bottom:10px; font-size:1em; }
.quiz-opt:hover { border-color:var(--accent); }
.quiz-opt.correct { border-color:var(--success-border); background:var(--success-bg); }
.quiz-opt.incorrect { border-color:var(--danger-border); background:var(--danger-bg); }
.score-pill { display:inline-block; background:var(--grad); color:var(--on-accent); padding:3px 12px; border-radius:999px; font-size:0.85em; font-weight:900; }
.progress-bar { height:6px; background:var(--border); border-radius:3px; overflow:hidden; margin-bottom:14px; }
.progress-bar .fill { height:100%; background:var(--grad); transition:width .3s ease; }
.progress-bar.other .fill { background:var(--amber); }
.difficulty-track { display:flex; gap:4px; margin:6px 0 14px; }
.difficulty-track span { flex:1; height:6px; border-radius:3px; background:var(--border); }
.difficulty-track span.on { background:var(--grad); }

.hist-entry { border-bottom:1px solid var(--border); padding:12px 0; cursor:pointer; }
.hist-entry:last-child { border-bottom:none; }
.hist-entry .meta { font-size:0.78em; color:var(--text-faint); margin-bottom:3px; }
.hist-entry .q { font-weight:700; font-size:0.95em; }
.hist-detail { background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:11px 13px; margin-top:9px; font-size:0.92em; line-height:1.6; color:var(--text-dim); white-space:pre-wrap; }
.empty { text-align:center; color:var(--text-faint); padding:28px 10px; }
.empty .big { font-size:36px; display:block; margin-bottom:6px; }
.chart-wrap { margin-bottom:22px; }
.chart-wrap h3 { font-size:0.95em; margin-bottom:8px; }
.timer-big { font-size:3em; font-weight:900; text-align:center; letter-spacing:0.02em; margin:10px 0; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums; }
.stat { text-align:center; padding:12px; background:var(--panel-2); border:1px solid var(--border); border-radius:14px; }
.stat .n { font-size:1.6em; font-weight:900; }
.stat .l { font-size:0.78em; color:var(--text-faint); }
.online-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.online-row .who { display:flex; align-items:center; gap:6px; background:var(--panel-2); border:1px solid var(--border); border-radius:999px; padding:4px 10px 4px 4px; font-size:0.85em; cursor:pointer; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--success); display:inline-block; }
.footnote { font-size:0.8em; color:var(--text-faint); text-align:center; margin-top:30px; line-height:1.7; }

/* ---------- chat ---------- */
.chat-log { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.bubble { max-width:88%; padding:12px 15px; border-radius:18px; line-height:1.6; white-space:pre-wrap; word-wrap:break-word; }
.bubble.me { align-self:flex-end; background:var(--grad); color:var(--on-accent); border-bottom-right-radius:6px; }
.bubble.ai { align-self:flex-start; background:var(--panel-2); border:1px solid var(--border); border-bottom-left-radius:6px; }
.bubble.redirect { border-color:var(--amber-border); background:var(--amber-bg); }
.bubble .tools { margin-top:6px; display:flex; gap:6px; }
.bubble .tools button { padding:4px 10px; font-size:0.75em; background:rgba(0,0,0,0.15); }
.chat-input { display:flex; gap:8px; align-items:flex-end; position:sticky; bottom:12px; }
.chat-input textarea { min-height:52px; max-height:160px; }
.chat-input .icon-btn { width:52px; height:52px; font-size:22px; }

/* ---------- notes / editor ---------- */
.folder { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--border); border-radius:14px; background:var(--panel); margin-bottom:8px; cursor:pointer; }
.folder .n { margin-left:auto; color:var(--text-faint); font-size:0.85em; }
.editor { min-height:220px; line-height:1.75; padding:14px 16px; border:1.5px solid var(--border); border-radius:var(--radius-sm); background:var(--panel-2); outline:none; white-space:pre-wrap; }
.editor:focus { border-color:var(--accent); }
.editor[data-placeholder]:empty::before, .editor-line[data-placeholder]:empty::before { content:attr(data-placeholder); color:var(--text-faint); }
.editor-line { outline:none; min-height:1.4em; }
.dictate-bar { display:flex; align-items:center; gap:10px; margin:10px 0; flex-wrap:wrap; }
.dictate-btn { display:inline-flex; align-items:center; gap:8px; padding:12px 18px; font-weight:800; }
.dictate-btn.live { background:var(--danger) !important; color:#fff !important; animation:sdpulse 1.2s ease-in-out infinite; }
.diff ins { background:var(--success-bg); color:var(--success); text-decoration:none; border-radius:3px; padding:0 2px; }
.diff del { background:var(--danger-bg); color:var(--danger); text-decoration:line-through; border-radius:3px; padding:0 2px; }
.mode-pick { display:grid; grid-template-columns:1fr; gap:8px; }
.mode-pick .tile { padding:14px; }
.blocks { display:flex; flex-direction:column; gap:10px; }
.block { border:1px solid var(--border); border-radius:14px; padding:12px 14px; background:var(--panel); position:relative; }
.block.cur { border-color:var(--accent); box-shadow:0 0 0 3px var(--info-bg); }
.block.ai-added { border-left:4px solid var(--ai); }
.block .tag { position:absolute; top:8px; right:10px; font-size:0.68em; color:var(--text-faint); }
.block .tag.ai { color:var(--ai); font-weight:800; }
.block.h { font-weight:900; font-size:1.15em; }
.block.q { background:var(--info-bg); border-color:var(--info-border); }
.block.q .qn { font-weight:900; color:var(--accent); margin-right:6px; }
.block img { border-radius:10px; display:block; margin:6px 0; max-height:320px; }
.block .cap { font-size:0.85em; color:var(--text-dim); font-style:italic; }
.block .bt { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.block .bt button { padding:5px 10px; font-size:0.75em; }
.page-tabs { display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; margin-bottom:10px; }
.page-tabs button { flex:0 0 auto; padding:8px 14px; font-size:0.85em; font-weight:700; }
.page-tabs button.on { background:var(--grad); color:var(--on-accent); }
.cmd-help { font-size:0.82em; color:var(--text-dim); background:var(--panel-2); border:1px dashed var(--border); border-radius:12px; padding:10px 12px; }
.cmd-help code { background:var(--panel); padding:1px 6px; border-radius:6px; color:var(--text); }
.flashcard { min-height:180px; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; border-radius:20px; background:var(--panel); border:1px solid var(--border-strong); cursor:pointer; font-size:1.1em; line-height:1.5; }
.flashcard.back { background:var(--info-bg); border-color:var(--info-border); }
.ruler-line { position:fixed; left:0; right:0; height:2.2em; background:var(--amber-bg); border-top:1px solid var(--amber-border); border-bottom:1px solid var(--amber-border); pointer-events:none; z-index:15; }

/* ---------- tables ---------- */
.tbl { width:100%; border-collapse:collapse; font-size:0.9em; }
.tbl th, .tbl td { padding:9px 8px; border-bottom:1px solid var(--border); text-align:left; vertical-align:middle; }
.tbl th { color:var(--text-faint); font-weight:700; font-size:0.8em; }
.tbl tr:last-child td { border-bottom:none; }
.lb-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.lb-row:last-child { border-bottom:none; }
.lb-row .rank { width:26px; font-weight:900; color:var(--text-faint); }
.lb-row .nm { flex:1; font-weight:700; }
.lb-row .pts { font-weight:900; }

/* ---------- modal / toast ---------- */
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:100; display:flex; align-items:flex-end; justify-content:center; padding:0; }
@media (min-width:600px) { .modal-bg { align-items:center; padding:20px; } }
.modal { width:100%; max-width:520px; max-height:88vh; overflow:auto; background:var(--bg-b); border:1px solid var(--border-strong); border-radius:22px 22px 0 0; padding:20px; box-shadow:var(--shadow); }
@media (min-width:600px) { .modal { border-radius:22px; } }
.modal h3 { font-size:1.15em; margin-bottom:12px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--text); color:var(--bg-a); padding:12px 18px; border-radius:999px; font-weight:700; z-index:200; box-shadow:var(--shadow); max-width:92vw; text-align:center; }
.toast.err { background:var(--danger); color:#fff; }
.confetti { position:fixed; inset:0; pointer-events:none; z-index:150; }
.avatar-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.avatar-grid .av { aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:26px; border:2px solid var(--border); cursor:pointer; background:var(--panel-2); padding:0; }
.avatar-grid .av.on { border-color:var(--accent); box-shadow:0 0 0 3px var(--info-bg); }
.swatches { display:flex; gap:10px; flex-wrap:wrap; }
.swatch { width:40px; height:40px; border-radius:50%; border:3px solid transparent; cursor:pointer; padding:0; }
.swatch.on { border-color:var(--text); }
.sound-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.sound-grid button { padding:12px 6px; font-size:0.8em; display:flex; flex-direction:column; gap:4px; align-items:center; }
.sound-grid button .i { font-size:22px; }
.sound-grid button.on { background:var(--grad); color:var(--on-accent); }
input[type=range].slider { width:100%; accent-color:var(--accent); }
.cal-day { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.cal-day .d { flex:0 0 58px; text-align:center; background:var(--panel-2); border-radius:12px; padding:6px 4px; font-weight:800; font-size:0.85em; }
.cal-day .d small { display:block; color:var(--text-faint); font-weight:600; }
.cal-day.soon .d { background:var(--amber-bg); color:var(--amber); }

/* ---------- print ---------- */
@media print {
  body * { visibility:hidden; }
  .print-area, .print-area * { visibility:visible; }
  .print-area { position:absolute; left:0; top:0; width:100%; color:#000; background:#fff; font-family:Georgia, serif; }
  .print-area img { max-width:100%; }
}

.sd-app :focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- night login (matches the reference art) ---------- */
body.sd-body:has(.sd-gate-night) { background:#040914 !important; }
.sd-gate-night { position:relative; display:block; padding:0 0 60px; min-height:100vh; background:#040914; color:#eaf2ff; --panel:rgba(12,22,44,0.55); --panel-2:rgba(255,255,255,0.05); --border:rgba(51,210,255,0.25); --text:#eaf2ff; --text-dim:#a9b8d6; --accent:#33d2ff; --danger:#ff7a68; --danger-bg:rgba(255,122,104,0.12); --danger-border:rgba(255,122,104,0.45); --success:#3cf0c5; --success-bg:rgba(60,240,197,0.10); --success-border:rgba(60,240,197,0.4); }
.sd-gate-scene { height:min(52vh, 420px); background-size:cover; background-position:center top; position:relative; }
.sd-gate-scene::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,9,20,0.05) 0%, rgba(4,9,20,0.15) 55%, rgba(4,9,20,0.85) 85%, #040914 100%); }
.sd-gate-inner { position:relative; margin:-70px auto 0; max-width:440px; padding:0 18px; }
.sd-gate-night .sd-gate-brand { margin-bottom:18px; }
.sd-gate-night .sd-cap { filter:drop-shadow(0 0 14px rgba(51,210,255,0.55)); margin-bottom:2px; }
.sd-gate-night .sd-gate-brand h1 { font-size:2.7em; font-weight:900; letter-spacing:-0.02em; margin:0; background:none; color:#fff; -webkit-text-fill-color:#fff; }
.sd-gate-night .sd-gate-brand h1 b { background:linear-gradient(90deg,#2f7cff,#33d2ff); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.sd-gate-night .sd-gate-brand p { letter-spacing:0.28em; text-transform:uppercase; font-size:0.72em; color:#c6d3ea; margin-top:4px; }
.sd-gate-night .sd-gate-card { background:rgba(10,20,40,0.55); border:1px solid rgba(51,210,255,0.35); border-radius:26px; padding:22px 20px 26px; box-shadow:0 0 0 1px rgba(51,210,255,0.08), 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(51,210,255,0.12); backdrop-filter:blur(14px); max-width:none; }
.sd-gate-night .sd-gate-form { gap:14px; }
.sd-gate-night .sd-field { flex-direction:row; font-weight:400; }
.sd-field { display:flex; align-items:center; gap:12px; background:rgba(20,32,58,0.75); border:1px solid rgba(255,255,255,0.10); border-radius:16px; padding:0 14px 0 16px; color:#9fb0cf; }
.sd-field:focus-within { border-color:#33d2ff; box-shadow:0 0 0 3px rgba(51,210,255,0.15); }
.sd-field input { flex:1; background:transparent !important; border:none !important; padding:17px 0 !important; color:#eaf2ff !important; font-size:1.08em !important; min-width:0; }
.sd-field input:focus { outline:none; }
.sd-field input::placeholder { color:#9fb0cf; }
.sd-field svg { flex:0 0 auto; }
.sd-eye { background:none; border:none; padding:6px; color:#9fb0cf; cursor:pointer; }
.sd-gate-night .sd-gate-check { color:#eaf2ff; font-size:1.05em; gap:12px; }
.sd-gate-night .sd-gate-check input { width:24px; height:24px; border-radius:7px; accent-color:#2f7cff; }
.sd-gate-night .sd-gate-btn { background:linear-gradient(90deg,#2f7cff 0%,#33d2ff 55%,#3cf0c5 100%); color:#fff; font-size:1.25em; padding:17px 20px; box-shadow:0 10px 30px rgba(51,210,255,0.35); display:flex; justify-content:center; gap:10px; margin-top:6px; }
.sd-gate-night .sd-gate-btn .arrow { font-weight:400; }
.sd-gate-alt { display:flex; align-items:center; justify-content:center; gap:6px; color:#c6d3ea; font-size:1em; margin-top:8px; white-space:nowrap; }
.sd-gate-alt::before, .sd-gate-alt::after { content:''; flex:1 1 20px; max-width:60px; border-top:1px solid rgba(51,210,255,0.35); margin:0 8px; }
.sd-gate-night .sd-gate-link { width:auto; color:#33d2ff; text-decoration:none; font-weight:800; padding:0; font-size:1em; }

.talk-pulse { animation:sdtalk 1.4s ease-in-out infinite; box-shadow:0 0 0 0 rgba(51,210,255,0.5); }
@keyframes sdtalk { 0% { box-shadow:0 0 0 0 rgba(51,210,255,0.45); } 70% { box-shadow:0 0 0 14px rgba(51,210,255,0); } 100% { box-shadow:0 0 0 0 rgba(51,210,255,0); } }

.katex { font-size:1.05em; } .katex-display { margin:6px 0; overflow-x:auto; }
.step-math { margin:4px 0 4px; font-size:1.05em; overflow-x:auto; }
.step-line { padding:10px 0; border-bottom:1px dashed rgba(127,127,127,.18); overflow-x:auto; }
.step-line:last-child { border-bottom:0; }
.step-line .katex-display { margin:0; text-align:left; }
.step-line .katex-display > .katex { text-align:left; }
.step-body { flex:1; min-width:0; line-height:1.6; }
.step-body .katex-display { margin:4px 0; text-align:left; }
.step-body .katex-display > .katex { text-align:left; }

/* progress bar for long AI jobs */
.prog-bar { height:6px; border-radius:6px; background:rgba(127,127,127,.18); margin:8px 0 6px; overflow:hidden; }
.prog-bar > div { height:100%; width:4%; border-radius:6px; background:var(--accent, #c9a14a); transition:width .9s ease; }

/* page stack */
.thumb-wrap { position:relative; }
.thumb-num { position:absolute; left:6px; bottom:6px; background:rgba(0,0,0,.65); color:#fff; font-size:0.75em; font-weight:700; padding:2px 7px; border-radius:999px; }

.sd-gate-btn-alt { display:block; text-align:center; text-decoration:none; margin-top:10px; opacity:.92; }