/* LET Mastery UI-R1 — calm, flat UI with 15 color themes (Day and Night each).
   Forest and Champagne is the default and the brand. The UI-R1 redesign section at the end of this file holds
   Home, Progress, questions, the tab bar and the desktop side panel.
   Colors are tokens: never hard-code a color below the theme block; add a token instead (fixed right/wrong colors excepted). */
:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* warm paper surface for daily takes and flipped cards (same in every theme) */
  --paper: #F0EBDD; --paper-ink: #13261E; --paper-title: #10271F; --paper-muted: #4A5249; --paper-gold: #7A5A28; --paper-glow: 198 168 120;
}
/* ---------- Themes (UI-R1): 15 themes from tools/themes (contrast-checked: 720 pairs, 0 fails). Forest and Champagne is the default. Night is the base; Day overrides. ---------- */
:root { --ground: #0B1713; --ground-rgb: 11 23 19; --card: #14251F; --card-rgb: 20 37 31; --ink: #F4F6F1; --ink-rgb: 244 246 241; --muted: #B5C2B8; --soft-ink: #D4DCD4; --accent: #C7AD77; --accent-rgb: 199 173 119; --accent-hi: #D8C6A0; --accent-lo: #9F8A5F; --on-accent: #17231F; --gold: #D8C08E; --gold-rgb: 216 192 142; --gold-hi: #D8C08E; --good: #C7AD77; --good-rgb: 199 173 119; --hero: #01261B; --hero-rgb: 1 38 27; --hero-hi: #15372D; --hero-lo: #011C14; --raised: #1C332A; --border: #345044; --brand-line: #6E7F63; --mint: #16302A; --sand: #29271F; --lav: #21232F; --ring-track: #2A4237; --ring-center: #1C332A; --dome-rim: #0B1713; --arc: #C7AD77; --arc-rgb: 199 173 119; --aura-rgb: 199 173 119; --pie-a: 0.34; }
:root[data-mode="day"] { --ground: #F7F6F2; --ground-rgb: 247 246 242; --card: #FFFFFF; --card-rgb: 255 255 255; --ink: #17231F; --ink-rgb: 23 35 31; --muted: #59665F; --soft-ink: #38443F; --accent: #173F32; --accent-rgb: 23 63 50; --accent-hi: #416257; --accent-lo: #14362A; --on-accent: #FFFFFF; --gold: #6B5027; --gold-rgb: 107 80 39; --gold-hi: #BCB09E; --good: #173F32; --good-rgb: 23 63 50; --hero: #01261B; --hero-rgb: 1 38 27; --hero-hi: #15372D; --hero-lo: #011C14; --raised: #F0F3EF; --border: #D8E0DA; --brand-line: #9DB3A8; --mint: #EAF1E9; --sand: #F3EBDD; --lav: #EEECF4; --ring-track: #D9E3DB; --ring-center: #F4F8F3; --dome-rim: #D9E3DB; --arc: #C7AD77; --arc-rgb: 199 173 119; --aura-rgb: 23 63 50; --pie-a: 0.45; }
:root[data-mode="day"] :is(.hero, .gauge-card, .hook) { --ground: #0B1713; --ground-rgb: 11 23 19; --card: #14251F; --card-rgb: 20 37 31; --ink: #F4F6F1; --ink-rgb: 244 246 241; --muted: #B5C2B8; --soft-ink: #D4DCD4; --accent: #C7AD77; --accent-rgb: 199 173 119; --accent-hi: #D8C6A0; --accent-lo: #9F8A5F; --on-accent: #17231F; --gold: #D8C08E; --gold-rgb: 216 192 142; --gold-hi: #D8C08E; --good: #C7AD77; --good-rgb: 199 173 119; --hero: #01261B; --hero-rgb: 1 38 27; --hero-hi: #15372D; --hero-lo: #011C14; --raised: #1C332A; --border: #345044; --brand-line: #6E7F63; --mint: #16302A; --sand: #29271F; --lav: #21232F; --ring-track: #2A4237; --ring-center: #1C332A; --dome-rim: #0B1713; --arc: #C7AD77; --arc-rgb: 199 173 119; --aura-rgb: 199 173 119; --pie-a: 0.34; color-scheme: dark; }
:root[data-palette="lavender"] { --ground: #170A17; --ground-rgb: 23 10 23; --card: #231322; --card-rgb: 35 19 34; --ink: #F6F2F6; --ink-rgb: 246 242 246; --muted: #BFB3BE; --soft-ink: #DAD2DA; --accent: #99A38A; --accent-rgb: 153 163 138; --accent-hi: #B8BFAD; --accent-lo: #7A826E; --on-accent: #20171F; --gold: #99A38A; --gold-rgb: 153 163 138; --gold-hi: #99A38A; --good: #99A38A; --good-rgb: 153 163 138; --hero: #311531; --hero-rgb: 49 21 49; --hero-hi: #412841; --hero-lo: #251025; --raised: #301E2F; --border: #4B384B; --brand-line: #6C765C; --mint: #301C2F; --sand: #202519; --lav: #2B201B; --ring-track: #412E40; --ring-center: #301E2F; --dome-rim: #170A17; --arc: #99A38A; --arc-rgb: 153 163 138; --aura-rgb: 153 163 138; --pie-a: 0.34; }
:root[data-mode="day"][data-palette="lavender"] { --ground: #F9F5F9; --ground-rgb: 249 245 249; --card: #FFFFFF; --card-rgb: 255 255 255; --ink: #251C24; --ink-rgb: 37 28 36; --muted: #6A5F69; --soft-ink: #483E46; --accent: #816080; --accent-rgb: 129 96 128; --accent-hi: #987D97; --accent-lo: #6E526D; --on-accent: #FFFFFF; --gold: #565F48; --gold-rgb: 86 95 72; --gold-hi: #B3B7AD; --good: #816080; --good-rgb: 129 96 128; --hero: #311531; --hero-rgb: 49 21 49; --hero-hi: #412841; --hero-lo: #251025; --raised: #F4EEF4; --border: #E2D9E1; --brand-line: #B09EAF; --mint: #F8EAF7; --sand: #ECF1E4; --lav: #FCECE5; --ring-track: #DFD3DE; --ring-center: #FAF5FA; --dome-rim: #DFD3DE; --arc: #99A38A; --arc-rgb: 153 163 138; --aura-rgb: 129 96 128; --pie-a: 0.45; }
:root[data-mode="day"][data-palette="lavender"] :is(.hero, .gauge-card, .hook) { --ground: #170A17; --ground-rgb: 23 10 23; --card: #231322; --card-rgb: 35 19 34; --ink: #F6F2F6; --ink-rgb: 246 242 246; --muted: #BFB3BE; --soft-ink: #DAD2DA; --accent: #99A38A; --accent-rgb: 153 163 138; --accent-hi: #B8BFAD; --accent-lo: #7A826E; --on-accent: #20171F; --gold: #99A38A; --gold-rgb: 153 163 138; --gold-hi: #99A38A; --good: #99A38A; --good-rgb: 153 163 138; --hero: #311531; --hero-rgb: 49 21 49; --hero-hi: #412841; --hero-lo: #251025; --raised: #301E2F; --border: #4B384B; --brand-line: #6C765C; --mint: #301C2F; --sand: #202519; --lav: #2B201B; --ring-track: #412E40; --ring-center: #301E2F; --dome-rim: #170A17; --arc: #99A38A; --arc-rgb: 153 163 138; --aura-rgb: 153 163 138; --pie-a: 0.34; color-scheme: dark; }
:root[data-palette="mauve"] { --ground: #1A0912; --ground-rgb: 26 9 18; --card: #25121D; --card-rgb: 37 18 29; --ink: #F8F1F4; --ink-rgb: 248 241 244; --muted: #C2B2BA; --soft-ink: #DDD2D7; --accent: #DFCDBD; --accent-rgb: 223 205 189; --accent-hi: #E9DCD1; --accent-lo: #B2A497; --on-accent: #22171C; --gold: #DFCDBD; --gold-rgb: 223 205 189; --gold-hi: #DFCDBD; --good: #DFCDBD; --good-rgb: 223 205 189; --hero: #321826; --hero-rgb: 50 24 38; --hero-hi: #422A37; --hero-lo: #26121C; --raised: #331D29; --border: #4F3844; --brand-line: #826D59; --mint: #331B28; --sand: #2A2118; --lav: #2C1F1E; --ring-track: #442D39; --ring-center: #331D29; --dome-rim: #1A0912; --arc: #DFCDBD; --arc-rgb: 223 205 189; --aura-rgb: 223 205 189; --pie-a: 0.34; }
:root[data-mode="day"][data-palette="mauve"] { --ground: #FAF5F7; --ground-rgb: 250 245 247; --card: #FFFFFF; --card-rgb: 255 255 255; --ink: #261B21; --ink-rgb: 38 27 33; --muted: #6C5F66; --soft-ink: #493D44; --accent: #816171; --accent-rgb: 129 97 113; --accent-hi: #987D8B; --accent-lo: #6E5260; --on-accent: #FFFFFF; --gold: #675849; --gold-rgb: 103 88 73; --gold-hi: #BBB4AD; --good: #816171; --good-rgb: 129 97 113; --hero: #321826; --hero-rgb: 50 24 38; --hero-hi: #422A37; --hero-lo: #26121C; --raised: #F6EEF1; --border: #E4D9DE; --brand-line: #B09FA8; --mint: #F8EBF1; --sand: #F5EEE7; --lav: #FDEBE9; --ring-track: #DFD4D9; --ring-center: #FBF5F8; --dome-rim: #DFD4D9; --arc: #DFCDBD; --arc-rgb: 223 205 189; --aura-rgb: 129 97 113; --pie-a: 0.45; }
:root[data-mode="day"][data-palette="mauve"] :is(.hero, .gauge-card, .hook) { --ground: #1A0912; --ground-rgb: 26 9 18; --card: #25121D; --card-rgb: 37 18 29; --ink: #F8F1F4; --ink-rgb: 248 241 244; --muted: #C2B2BA; --soft-ink: #DDD2D7; --accent: #DFCDBD; --accent-rgb: 223 205 189; --accent-hi: #E9DCD1; --accent-lo: #B2A497; --on-accent: #22171C; --gold: #DFCDBD; --gold-rgb: 223 205 189; --gold-hi: #DFCDBD; --good: #DFCDBD; --good-rgb: 223 205 189; --hero: #321826; --hero-rgb: 50 24 38; --hero-hi: #422A37; --hero-lo: #26121C; --raised: #331D29; --border: #4F3844; --brand-line: #826D59; --mint: #331B28; --sand: #2A2118; --lav: #2C1F1E; --ring-track: #442D39; --ring-center: #331D29; --dome-rim: #1A0912; --arc: #DFCDBD; --arc-rgb: 223 205 189; --aura-rgb: 223 205 189; --pie-a: 0.34; color-scheme: dark; }
:root[data-palette="peacock"] { --ground: #001313; --ground-rgb: 0 19 19; --card: #011E1E; --card-rgb: 1 30 30; --ink: #EEF5F5; --ink-rgb: 238 245 245; --muted: #A9BCBB; --soft-ink: #CCD8D8; --accent: #99A28E; --accent-rgb: 153 162 142; --accent-hi: #B8BEB0; --accent-lo: #7A8272; --on-accent: #0F1E1D; --gold: #99A28E; --gold-rgb: 153 162 142; --gold-hi: #99A28E; --good: #99A28E; --good-rgb: 153 162 142; --hero: #002525; --hero-rgb: 0 37 37; --hero-hi: #143636; --hero-lo: #001C1C; --raised: #072B2B; --border: #244646; --brand-line: #6B765D; --mint: #022A2A; --sand: #202519; --lav: #1A2620; --ring-track: #193C3C; --ring-center: #072B2B; --dome-rim: #001313; --arc: #99A28E; --arc-rgb: 153 162 142; --aura-rgb: 153 162 142; --pie-a: 0.34; }
:root[data-mode="day"][data-palette="peacock"] { --ground: #F2F8F8; --ground-rgb: 242 248 248; --card: #FFFFFF; --card-rgb: 255 255 255; --ink: #142222; --ink-rgb: 20 34 34; --muted: #576767; --soft-ink: #364444; --accent: #134949; --accent-rgb: 19 73 73; --accent-hi: #3D6A6A; --accent-lo: #103E3E; --on-accent: #FFFFFF; --gold: #565E4C; --gold-rgb: 86 94 76; --gold-hi: #B3B7AE; --good: #134949; --good-rgb: 19 73 73; --hero: #002525; --hero-rgb: 0 37 37; --hero-hi: #143636; --hero-lo: #001C1C; --raised: #E9F2F2; --border: #D2DFDF; --brand-line: #92AAAA; --mint: #E1F3F3; --sand: #EDF1E8; --lav: #E5F5EC; --ring-track: #CCDBDB; --ring-center: #F1F9F8; --dome-rim: #CCDBDB; --arc: #99A28E; --arc-rgb: 153 162 142; --aura-rgb: 19 73 73; --pie-a: 0.45; }
:root[data-mode="day"][data-palette="peacock"] :is(.hero, .gauge-card, .hook) { --ground: #001313; --ground-rgb: 0 19 19; --card: #011E1E; --card-rgb: 1 30 30; --ink: #EEF5F5; --ink-rgb: 238 245 245; --muted: #A9BCBB; --soft-ink: #CCD8D8; --accent: #99A28E; --accent-rgb: 153 162 142; --accent-hi: #B8BEB0; --accent-lo: #7A8272; --on-accent: #0F1E1D; --gold: #99A28E; --gold-rgb: 153 162 142; --gold-hi: #99A28E; --good: #99A28E; --good-rgb: 153 162 142; --hero: #002525; --hero-rgb: 0 37 37; --hero-hi: #143636; --hero-lo: #001C1C; --raised: #072B2B; --border: #244646; --brand-line: #6B765D; --mint: #022A2A; --sand: #202519; --lav: #1A2620; --ring-track: #193C3C; --ring-center: #072B2B; --dome-rim: #001313; --arc: #99A28E; --arc-rgb: 153 162 142; --aura-rgb: 153 162 142; --pie-a: 0.34; color-scheme: dark; }
:root[data-palette="burgundy"] { --ground: #1C080D; --ground-rgb: 28 8 13; --card: #281217; --card-rgb: 40 18 23; --ink: #F9F1F3; --ink-rgb: 249 241 243; --muted: #C3B2B6; --soft-ink: #DED2D4; --accent: #CFBBA3; --accent-rgb: 207 187 163; --accent-hi: #DDCFBF; --accent-lo: #A69682; --on-accent: #231719; --gold: #CFBBA3; --gold-rgb: 207 187 163; --gold-hi: #CFBBA3; --good: #CFBBA3; --good-rgb: 207 187 163; --hero: #451021; --hero-rgb: 69 16 33; --hero-hi: #542333; --hero-lo: #340C19; --raised: #361D23; --border: #52373D; --brand-line: #806E58; --mint: #361A21; --sand: #292117; --lav: #2C201C; --ring-track: #472D33; --ring-center: #361D23; --dome-rim: #1C080D; --arc: #CFBBA3; --arc-rgb: 207 187 163; --aura-rgb: 207 187 163; --pie-a: 0.34; }
:root[data-mode="day"][data-palette="burgundy"] { --ground: #FBF5F6; --ground-rgb: 251 245 246; --card: #FFFFFF; --card-rgb: 255 255 255; --ink: #281B1E; --ink-rgb: 40 27 30; --muted: #6E5F62; --soft-ink: #4B3D40; --accent: #4F1A2A; --accent-rgb: 79 26 42; --accent-hi: #6F4350; --accent-lo: #431624; --on-accent: #FFFFFF; --gold: #695742; --gold-rgb: 105 87 66; --gold-hi: #BCB3AA; --good: #4F1A2A; --good-rgb: 79 26 42; --hero: #451021; --hero-rgb: 69 16 33; --hero-hi: #542333; --hero-lo: #340C19; --raised: #F7EDEF; --border: #E5D9DB; --brand-line: #BC9BA1; --mint: #FFE9ED; --sand: #F8EDE1; --lav: #FDECE7; --ring-track: #E7D1D5; --ring-center: #FCF5F6; --dome-rim: #E7D1D5; --arc: #CFBBA3; --arc-rgb: 207 187 163; --aura-rgb: 79 26 42; --pie-a: 0.45; }
:root[data-mode="day"][data-palette="burgundy"] :is(.hero, .gauge-card, .hook) { --ground: #1C080D; --ground-rgb: 28 8 13; --card: #281217; --card-rgb: 40 18 23; --ink: #F9F1F3; --ink-rgb: 249 241 243; --muted: #C3B2B6; --soft-ink: #DED2D4; --accent: #CFBBA3; --accent-rgb: 207 187 163; --accent-hi: #DDCFBF; --accent-lo: #A69682; --on-accent: #231719; --gold: #CFBBA3; --gold-rgb: 207 187 163; --gold-hi: #CFBBA3; --good: #CFBBA3; --good-rgb: 207 187 163; --hero: #451021; --hero-rgb: 69 16 33; --hero-hi: #542333; --hero-lo: #340C19; --raised: #361D23; --border: #52373D; --brand-line: #806E58; --mint: #361A21; --sand: #292117; --lav: #2C201C; --ring-track: #472D33; --ring-center: #361D23; --dome-rim: #1C080D; --arc: #CFBBA3; --arc-rgb: 207 187 163; --aura-rgb: 207 187 163; --pie-a: 0.34; color-scheme: dark; }
:root[data-palette="dusty"] { --ground: #05101E; --ground-rgb: 5 16 30; --card: #0D1A2A; --card-rgb: 13 26 42; --ink: #F0F4F9; --ink-rgb: 240 244 249; --muted: #AFB8C4; --soft-ink: #D0D6DE; --accent: #EEE5CF; --accent-rgb: 238 229 207; --accent-hi: #F3EDDD; --accent-lo: #BEB7A6; --on-accent: #141B24; --gold: #EEE5CF; --gold-rgb: 238 229 207; --gold-hi: #EEE5CF; --good: #EEE5CF; --good-rgb: 238 229 207; --hero: #0E2036; --hero-rgb: 14 32 54; --hero-hi: #213246; --hero-lo: #0A1828; --raised: #182638; --border: #314154; --brand-line: #7B7157; --mint: #142539; --sand: #1B242D; --lav: #20222D; --ring-track: #273749; --ring-center: #182638; --dome-rim: #05101E; --arc: #EEE5CF; --arc-rgb: 238 229 207; --aura-rgb: 238 229 207; --pie-a: 0.34; }
:root[data-mode="day"][data-palette="dusty"] { --ground: #F4F7FB; --ground-rgb: 244 247 251; --card: #FFFFFF; --card-rgb: 255 255 255; --ink: #192029; --ink-rgb: 25 32 41; --muted: #5C646F; --soft-ink: #3A424C; --accent: #576C87; --accent-rgb: 87 108 135; --accent-hi: #75869D; --accent-lo: #4A5C73; --on-accent: #FFFFFF; --gold: #5B586A; --gold-rgb: 91 88 106; --gold-hi: #B5B4BC; --good: #576C87; --good-rgb: 87 108 135; --hero: #0E2036; --hero-rgb: 14 32 54; --hero-hi: #213246; --hero-lo: #0A1828; --raised: #ECF1F7; --border: #D6DDE6; --brand-line: #9AA6B4; --mint: #E8F0FB; --sand: #EFEDFC; --lav: #ECF0FE; --ring-track: #D1D8E1; --ring-center: #F3F7FC; --dome-rim: #D1D8E1; --arc: #EEE5CF; --arc-rgb: 238 229 207; --aura-rgb: 87 108 135; --pie-a: 0.45; }
:root[data-mode="day"][data-palette="dusty"] :is(.hero, .gauge-card, .hook) { --ground: #05101E; --ground-rgb: 5 16 30; --card: #0D1A2A; --card-rgb: 13 26 42; --ink: #F0F4F9; --ink-rgb: 240 244 249; --muted: #AFB8C4; --soft-ink: #D0D6DE; --accent: #EEE5CF; --accent-rgb: 238 229 207; --accent-hi: #F3EDDD; --accent-lo: #BEB7A6; --on-accent: #141B24; --gold: #EEE5CF; --gold-rgb: 238 229 207; --gold-hi: #EEE5CF; --good: #EEE5CF; --good-rgb: 238 229 207; --hero: #0E2036; --hero-rgb: 14 32 54; --hero-hi: #213246; --hero-lo: #0A1828; --raised: #182638; --border: #314154; --brand-line: #7B7157; --mint: #142539; --sand: #1B242D; --lav: #20222D; --ring-track: #273749; --ring-center: #182638; --dome-rim: #05101E; --arc: #EEE5CF; --arc-rgb: 238 229 207; --aura-rgb: 238 229 207; --pie-a: 0.34; color-scheme: dark; }
:root[data-palette="mushroom"] { --ground: #190B05; --ground-rgb: 25 11 5; --card: #25150D; --card-rgb: 37 21 13; --ink: #F8F2EF; --ink-rgb: 248 242 239; --muted: #C3B4AD; --soft-ink: #DED3CE; --accent: #E3D2C1; --accent-rgb: 227 210 193; --accent-hi: #EBE0D4; --accent-lo: #B6A89A; --on-accent: #221812; --gold: #E3D2C1; --gold-rgb: 227 210 193; --gold-hi: #E3D2C1; --good: #E3D2C1; --good-rgb: 227 210 193; --hero: #311B0F; --hero-rgb: 49 27 15; --hero-hi: #412D22; --hero-lo: #25140B; --raised: #322017; --border: #4E3B31; --brand-line: #826D59; --mint: #331E14; --sand: #2A2117; --lav: #2A2119; --ring-track: #443027; --ring-center: #322017; --dome-rim: #190B05; --arc: #E3D2C1; --arc-rgb: 227 210 193; --aura-rgb: 227 210 193; --pie-a: 0.34; }
:root[data-mode="day"][data-palette="mushroom"] { --ground: #FAF6F3; --ground-rgb: 250 246 243; --card: #FFFFFF; --card-rgb: 255 255 255; --ink: #271C17; --ink-rgb: 39 28 23; --muted: #6D605A; --soft-ink: #4A3E38; --accent: #826759; --accent-rgb: 130 103 89; --accent-hi: #988277; --accent-lo: #6E584C; --on-accent: #FFFFFF; --gold: #665849; --gold-rgb: 102 88 73; --gold-hi: #BAB4AD; --good: #826759; --good-rgb: 130 103 89; --hero: #311B0F; --hero-rgb: 49 27 15; --hero-hi: #412D22; --hero-lo: #25140B; --raised: #F6EEEA; --border: #E5DAD5; --brand-line: #B0A19A; --mint: #F8EDE7; --sand: #F6EEE5; --lav: #FBEDE3; --ring-track: #DFD5D1; --ring-center: #FCF5F2; --dome-rim: #DFD5D1; --arc: #E3D2C1; --arc-rgb: 227 210 193; --aura-rgb: 130 103 89; --pie-a: 0.45; }
:root[data-mode="day"][data-palette="mushroom"] :is(.hero, .gauge-card, .hook) { --ground: #190B05; --ground-rgb: 25 11 5; --card: #25150D; --card-rgb: 37 21 13; --ink: #F8F2EF; --ink-rgb: 248 242 239; --muted: #C3B4AD; --soft-ink: #DED3CE; --accent: #E3D2C1; --accent-rgb: 227 210 193; --accent-hi: #EBE0D4; --accent-lo: #B6A89A; --on-accent: #221812; --gold: #E3D2C1; --gold-rgb: 227 210 193; --gold-hi: #E3D2C1; --good: #E3D2C1; --good-rgb: 227 210 193; --hero: #311B0F; --hero-rgb: 49 27 15; --hero-hi: #412D22; --hero-lo: #25140B; --raised: #322017; --border: #4E3B31; --brand-line: #826D59; --mint: #331E14; --sand: #2A2117; --lav: #2A2119; --ring-track: #443027; --ring-center: #322017; --dome-rim: #190B05; --arc: #E3D2C1; --arc-rgb: 227 210 193; --aura-rgb: 227 210 193; --pie-a: 0.34; color-scheme: dark; }
:root[data-palette="sage"] { --ground: #101005; --ground-rgb: 16 16 5; --card: #1A1A0D; --card-rgb: 26 26 13; --ink: #F4F4EE; --ink-rgb: 244 244 238; --muted: #B8B9AA; --soft-ink: #D6D6CC; --accent: #E8D7C5; --accent-rgb: 232 215 197; --accent-hi: #EFE3D6; --accent-lo: #BAAC9E; --on-accent: #1B1B11; --gold: #E8D7C5; --gold-rgb: 232 215 197; --gold-hi: #E8D7C5; --good: #E8D7C5; --good-rgb: 232 215 197; --hero: #21200D; --hero-rgb: 33 32 13; --hero-hi: #333220; --hero-lo: #19180A; --raised: #262617; --border: #404131; --brand-line: #816E58; --mint: #252514; --sand: #2A2117; --lav: #272218; --ring-track: #363727; --ring-center: #262617; --dome-rim: #101005; --arc: #E8D7C5; --arc-rgb: 232 215 197; --aura-rgb: 232 215 197; --pie-a: 0.34; }
:root[data-mode="day"][data-palette="sage"] { --ground: #F7F7F3; --ground-rgb: 247 247 243; --card: #FFFFFF; --card-rgb: 255 255 255; --ink: #202015; --ink-rgb: 32 32 21; --muted: #646457; --soft-ink: #424236; --accent: #6E6E58; --accent-rgb: 110 110 88; --accent-hi: #888876; --accent-lo: #5E5E4B; --on-accent: #FFFFFF; --gold: #665849; --gold-rgb: 102 88 73; --gold-hi: #BAB4AD; --good: #6E6E58; --good-rgb: 110 110 88; --hero: #21200D; --hero-rgb: 33 32 13; --hero-hi: #333220; --hero-lo: #19180A; --raised: #F0F1E9; --border: #DDDDD3; --brand-line: #A5A69A; --mint: #EFF0E7; --sand: #F4EEE7; --lav: #F5F0E1; --ring-track: #D8D8D1; --ring-center: #F7F7F1; --dome-rim: #D8D8D1; --arc: #E8D7C5; --arc-rgb: 232 215 197; --aura-rgb: 110 110 88; --pie-a: 0.45; }
:root[data-mode="day"][data-palette="sage"] :is(.hero, .gauge-card, .hook) { --ground: #101005; --ground-rgb: 16 16 5; --card: #1A1A0D; --card-rgb: 26 26 13; --ink: #F4F4EE; --ink-rgb: 244 244 238; --muted: #B8B9AA; --soft-ink: #D6D6CC; --accent: #E8D7C5; --accent-rgb: 232 215 197; --accent-hi: #EFE3D6; --accent-lo: #BAAC9E; --on-accent: #1B1B11; --gold: #E8D7C5; --gold-rgb: 232 215 197; --gold-hi: #E8D7C5; --good: #E8D7C5; --good-rgb: 232 215 197; --hero: #21200D; --hero-rgb: 33 32 13; --hero-hi: #333220; --hero-lo: #19180A; --raised: #262617; --border: #404131; --brand-line: #816E58; --mint: #252514; --sand: #2A2117; --lav: #272218; --ring-track: #363727; --ring-center: #262617; --dome-rim: #101005; --arc: #E8D7C5; --arc-rgb: 232 215 197; --aura-rgb: 232 215 197; --pie-a: 0.34; color-scheme: dark; }
:root[data-palette="terracotta"] { --ground: #1C0906; --ground-rgb: 28 9 6; --card: #28130E; --card-rgb: 40 19 14; --ink: #F9F2F0; --ink-rgb: 249 242 240; --muted: #C4B3AF; --soft-ink: #DED2D0; --accent: #DAC1AA; --accent-rgb: 218 193 170; --accent-hi: #E5D4C4; --accent-lo: #AE9A88; --on-accent: #231714; --gold: #DAC1AA; --gold-rgb: 218 193 170; --gold-hi: #DAC1AA; --good: #DAC1AA; --good-rgb: 218 193 170; --hero: #4B0B00; --hero-rgb: 75 11 0; --hero-hi: #591F14; --hero-lo: #380800; --raised: #361E18; --border: #533832; --brand-line: #826D59; --mint: #371B15; --sand: #2A2118; --lav: #2B201A; --ring-track: #482E28; --ring-center: #361E18; --dome-rim: #1C0906; --arc: #DAC1AA; --arc-rgb: 218 193 170; --aura-rgb: 218 193 170; --pie-a: 0.34; }
:root[data-mode="day"][data-palette="terracotta"] { --ground: #FBF5F4; --ground-rgb: 251 245 244; --card: #FFFFFF; --card-rgb: 255 255 255; --ink: #281C19; --ink-rgb: 40 28 25; --muted: #6E5F5C; --soft-ink: #4B3E3A; --accent: #AC4F3A; --accent-rgb: 172 79 58; --accent-hi: #BB6F5D; --accent-lo: #924331; --on-accent: #FFFFFF; --gold: #6C5642; --gold-rgb: 108 86 66; --gold-hi: #BDB3AA; --good: #AC4F3A; --good-rgb: 172 79 58; --hero: #4F0C00; --hero-rgb: 79 12 0; --hero-hi: #5D1F14; --hero-lo: #3B0900; --raised: #F7EEEC; --border: #E5D9D6; --brand-line: #BC9C94; --mint: #FFEAE5; --sand: #FAEDE1; --lav: #FCEDE5; --ring-track: #E7D2CD; --ring-center: #FCF5F3; --dome-rim: #E7D2CD; --arc: #DAC1AA; --arc-rgb: 218 193 170; --aura-rgb: 172 79 58; --pie-a: 0.45; }
:root[data-mode="day"][data-palette="terracotta"] :is(.hero, .gauge-card, .hook) { --ground: #1C0906; --ground-rgb: 28 9 6; --card: #28130E; --card-rgb: 40 19 14; --ink: #F9F2F0; --ink-rgb: 249 242 240; --muted: #C4B3AF; --soft-ink: #DED2D0; --accent: #DAC1AA; --accent-rgb: 218 193 170; --accent-hi: #E5D4C4; --accent-lo: #AE9A88; --on-accent: #231714; --gold: #DAC1AA; --gold-rgb: 218 193 170; --gold-hi: #DAC1AA; --good: #DAC1AA; --good-rgb: 218 193 170; --hero: #4B0B00; --hero-rgb: 75 11 0; --hero-hi: #591F14; --hero-lo: #380800; --raised: #361E18; --border: #533832; --brand-line: #826D59; --mint: #371B15; --sand: #2A2118; --lav: #2B201A; --ring-track: #482E28; --ring-center: #361E18; --dome-rim: #1C0906; --arc: #DAC1AA; --arc-rgb: 218 193 170; --aura-rgb: 218 193 170; --pie-a: 0.34; color-scheme: dark; }
:root[data-palette="navy"] { --ground: #080F1D; --ground-rgb: 8 15 29; --card: #111929; --card-rgb: 17 25 41; --ink: #F1F3F9; --ink-rgb: 241 243 249; --muted: #B1B8C5; --soft-ink: #D1D6DF; --accent: #EADBC8; --accent-rgb: 234 219 200; --accent-hi: #F0E6D8; --accent-lo: #BBAFA0; --on-accent: #161B24; --gold: #EADBC8; --gold-rgb: 234 219 200; --gold-hi: #EADBC8; --good: #EADBC8; --good-rgb: 234 219 200; --hero: #141F34; --hero-rgb: 20 31 52; --hero-hi: #273144; --hero-lo: #0F1727; --raised: #1C2537; --border: #364053; --brand-line: #806E58; --mint: #1A2438; --sand: #292117; --lav: #2A1F24; --ring-track: #2C3548; --ring-center: #1C2537; --dome-rim: #080F1D; --arc: #EADBC8; --arc-rgb: 234 219 200; --aura-rgb: 234 219 200; --pie-a: 0.34; }
:root[data-mode="day"][data-palette="navy"] { --ground: #F5F7FB; --ground-rgb: 245 247 251; --card: #FFFFFF; --card-rgb: 255 255 255; --ink: #1A1F29; --ink-rgb: 26 31 41; --muted: #5D636F; --soft-ink: #3C414C; --accent: #323E56; --accent-rgb: 50 62 86; --accent-hi: #576174; --accent-lo: #2A3549; --on-accent: #FFFFFF; --gold: #655848; --gold-rgb: 101 88 72; --gold-hi: #BAB4AD; --good: #323E56; --good-rgb: 50 62 86; --hero: #141F34; --hero-rgb: 20 31 52; --hero-hi: #273144; --hero-lo: #0F1727; --raised: #EDF0F7; --border: #D8DCE6; --brand-line: #9DA5B3; --mint: #EAEFFA; --sand: #F5EEE6; --lav: #FBEBF2; --ring-track: #D3D8E1; --ring-center: #F4F7FC; --dome-rim: #D3D8E1; --arc: #EADBC8; --arc-rgb: 234 219 200; --aura-rgb: 50 62 86; --pie-a: 0.45; }
:root[data-mode="day"][data-palette="navy"] :is(.hero, .gauge-card, .hook) { --ground: #080F1D; --ground-rgb: 8 15 29; --card: #111929; --card-rgb: 17 25 41; --ink: #F1F3F9; --ink-rgb: 241 243 249; --muted: #B1B8C5; --soft-ink: #D1D6DF; --accent: #EADBC8; --accent-rgb: 234 219 200; --accent-hi: #F0E6D8; --accent-lo: #BBAFA0; --on-accent: #161B24; --gold: #EADBC8; --gold-rgb: 234 219 200; --gold-hi: #EADBC8; --good: #EADBC8; --good-rgb: 234 219 200; --hero: #141F34; --hero-rgb: 20 31 52; --hero-hi: #273144; --hero-lo: #0F1727; --raised: #1C2537; --border: #364053; --brand-line: #806E58; --mint: #1A2438; --sand: #292117; --lav: #2A1F24; --ring-track: #2C3548; --ring-center: #1C2537; --dome-rim: #080F1D; --arc: #EADBC8; --arc-rgb: 234 219 200; --aura-rgb: 234 219 200; --pie-a: 0.34; color-scheme: dark; }
:root[data-palette="teal"] { --ground: #0E0F12; --ground-rgb: 14 15 18; --card: #181A1C; --card-rgb: 24 26 28; --ink: #F0F4F9; --ink-rgb: 240 244 249; --muted: #B0B8C4; --soft-ink: #D0D6DE; --accent: #79A8B0; --accent-rgb: 121 168 176; --accent-hi: #A1C2C8; --accent-lo: #61868D; --on-accent: #151B24; --gold: #79A8B0; --gold-rgb: 121 168 176; --gold-hi: #79A8B0; --good: #79A8B0; --good-rgb: 121 168 176; --hero: #00242A; --hero-rgb: 0 36 42; --hero-hi: #14363B; --hero-lo: #001B20; --raised: #232528; --border: #3E4043; --brand-line: #56787E; --mint: #1E242E; --sand: #1C232E; --lav: #19252B; --ring-track: #333539; --ring-center: #232528; --dome-rim: #0E0F12; --arc: #79A8B0; --arc-rgb: 121 168 176; --aura-rgb: 121 168 176; --pie-a: 0.34; }
:root[data-mode="day"][data-palette="teal"] { --ground: #F2F8F9; --ground-rgb: 242 248 249; --card: #FFFFFF; --card-rgb: 255 255 255; --ink: #142224; --ink-rgb: 20 34 36; --muted: #576769; --soft-ink: #364446; --accent: #03373E; --accent-rgb: 3 55 62; --accent-hi: #305B61; --accent-lo: #032F35; --on-accent: #FFFFFF; --gold: #4E5D6B; --gold-rgb: 78 93 107; --gold-hi: #AFB6BC; --good: #03373E; --good-rgb: 3 55 62; --hero: #00242A; --hero-rgb: 0 36 42; --hero-hi: #14363B; --hero-lo: #001B20; --raised: #E9F2F4; --border: #D2DFE1; --brand-line: #93A9AD; --mint: #E2F3F6; --sand: #E5F1FC; --lav: #E3F3FB; --ring-track: #CDDADD; --ring-center: #F1F8FA; --dome-rim: #CDDADD; --arc: #79A8B0; --arc-rgb: 121 168 176; --aura-rgb: 3 55 62; --pie-a: 0.45; }
:root[data-mode="day"][data-palette="teal"] :is(.hero, .gauge-card, .hook) { --ground: #0E0F12; --ground-rgb: 14 15 18; --card: #181A1C; --card-rgb: 24 26 28; --ink: #F0F4F9; --ink-rgb: 240 244 249; --muted: #B0B8C4; --soft-ink: #D0D6DE; --accent: #79A8B0; --accent-rgb: 121 168 176; --accent-hi: #A1C2C8; --accent-lo: #61868D; --on-accent: #151B24; --gold: #79A8B0; --gold-rgb: 121 168 176; --gold-hi: #79A8B0; --good: #79A8B0; --good-rgb: 121 168 176; --hero: #00242A; --hero-rgb: 0 36 42; --hero-hi: #14363B; --hero-lo: #001B20; --raised: #232528; --border: #3E4043; --brand-line: #56787E; --mint: #1E242E; --sand: #1C232E; --lav: #19252B; --ring-track: #333539; --ring-center: #232528; --dome-rim: #0E0F12; --arc: #79A8B0; --arc-rgb: 121 168 176; --aura-rgb: 121 168 176; --pie-a: 0.34; color-scheme: dark; }
:root[data-palette="rose"] { --ground: #1C080C; --ground-rgb: 28 8 12; --card: #281215; --card-rgb: 40 18 21; --ink: #F9F1F2; --ink-rgb: 249 241 242; --muted: #C4B2B4; --soft-ink: #DED2D3; --accent: #B995C4; --accent-rgb: 185 149 196; --accent-hi: #CEB5D6; --accent-lo: #94779D; --on-accent: #231718; --gold: #B995C4; --gold-rgb: 185 149 196; --gold-hi: #B995C4; --good: #B995C4; --good-rgb: 185 149 196; --hero: #4B051B; --hero-rgb: 75 5 27; --hero-hi: #59192D; --hero-lo: #380414; --raised: #361D21; --border: #53373B; --brand-line: #7C6A81; --mint: #361A1F; --sand: #27202A; --lav: #2A1F25; --ring-track: #472D31; --ring-center: #361D21; --dome-rim: #1C080C; --arc: #B995C4; --arc-rgb: 185 149 196; --aura-rgb: 185 149 196; --pie-a: 0.34; }
:root[data-mode="day"][data-palette="rose"] { --ground: #FBF5F6; --ground-rgb: 251 245 246; --card: #FFFFFF; --card-rgb: 255 255 255; --ink: #281B1D; --ink-rgb: 40 27 29; --muted: #6E5F61; --soft-ink: #4B3D3F; --accent: #630124; --accent-rgb: 99 1 36; --accent-hi: #7F2F4B; --accent-lo: #54011F; --on-accent: #FFFFFF; --gold: #6D4C77; --gold-rgb: 109 76 119; --gold-hi: #BDAEC2; --good: #630124; --good-rgb: 99 1 36; --hero: #4E091E; --hero-rgb: 78 9 30; --hero-hi: #5C1D30; --hero-lo: #3A0716; --raised: #F7EDEE; --border: #E5D9DA; --brand-line: #BC9B9F; --mint: #FFE9EB; --sand: #F7EAFC; --lav: #FBEBF3; --ring-track: #E7D1D4; --ring-center: #FCF5F5; --dome-rim: #E7D1D4; --arc: #B995C4; --arc-rgb: 185 149 196; --aura-rgb: 99 1 36; --pie-a: 0.45; }
:root[data-mode="day"][data-palette="rose"] :is(.hero, .gauge-card, .hook) { --ground: #1C080C; --ground-rgb: 28 8 12; --card: #281215; --card-rgb: 40 18 21; --ink: #F9F1F2; --ink-rgb: 249 241 242; --muted: #C4B2B4; --soft-ink: #DED2D3; --accent: #B995C4; --accent-rgb: 185 149 196; --accent-hi: #CEB5D6; --accent-lo: #94779D; --on-accent: #231718; --gold: #B995C4; --gold-rgb: 185 149 196; --gold-hi: #B995C4; --good: #B995C4; --good-rgb: 185 149 196; --hero: #4B051B; --hero-rgb: 75 5 27; --hero-hi: #59192D; --hero-lo: #380414; --raised: #361D21; --border: #53373B; --brand-line: #7C6A81; --mint: #361A1F; --sand: #27202A; --lav: #2A1F25; --ring-track: #472D31; --ring-center: #361D21; --dome-rim: #1C080C; --arc: #B995C4; --arc-rgb: 185 149 196; --aura-rgb: 185 149 196; --pie-a: 0.34; color-scheme: dark; }
:root[data-palette="ocean"] { --ground: #04101E; --ground-rgb: 4 16 30; --card: #0B1A2A; --card-rgb: 11 26 42; --ink: #F0F4F9; --ink-rgb: 240 244 249; --muted: #AEB9C4; --soft-ink: #CFD6DE; --accent: #FCEE96; --accent-rgb: 252 238 150; --accent-hi: #FDF3B6; --accent-lo: #CABE78; --on-accent: #141B24; --gold: #FCEE96; --gold-rgb: 252 238 150; --gold-hi: #FCEE96; --good: #FCEE96; --good-rgb: 252 238 150; --hero: #002242; --hero-rgb: 0 34 66; --hero-hi: #143451; --hero-lo: #001A32; --raised: #162738; --border: #304154; --brand-line: #777358; --mint: #122539; --sand: #252317; --lav: #192622; --ring-track: #253749; --ring-center: #162738; --dome-rim: #04101E; --arc: #FCEE96; --arc-rgb: 252 238 150; --aura-rgb: 252 238 150; --pie-a: 0.34; }
:root[data-mode="day"][data-palette="ocean"] { --ground: #F4F7FB; --ground-rgb: 244 247 251; --card: #FFFFFF; --card-rgb: 255 255 255; --ink: #182029; --ink-rgb: 24 32 41; --muted: #5B646F; --soft-ink: #3A424C; --accent: #02284A; --accent-rgb: 2 40 74; --accent-hi: #304F6B; --accent-lo: #02223F; --on-accent: #FFFFFF; --gold: #665C12; --gold-rgb: 102 92 18; --gold-hi: #BAB694; --good: #02284A; --good-rgb: 2 40 74; --hero: #002242; --hero-rgb: 0 34 66; --hero-hi: #143451; --hero-lo: #001A32; --raised: #EBF1F7; --border: #D6DDE6; --brand-line: #94A7BC; --mint: #E4F1FE; --sand: #F3F0DB; --lav: #E3F5EF; --ring-track: #CDD9E6; --ring-center: #F3F7FC; --dome-rim: #CDD9E6; --arc: #FCEE96; --arc-rgb: 252 238 150; --aura-rgb: 2 40 74; --pie-a: 0.45; }
:root[data-mode="day"][data-palette="ocean"] :is(.hero, .gauge-card, .hook) { --ground: #04101E; --ground-rgb: 4 16 30; --card: #0B1A2A; --card-rgb: 11 26 42; --ink: #F0F4F9; --ink-rgb: 240 244 249; --muted: #AEB9C4; --soft-ink: #CFD6DE; --accent: #FCEE96; --accent-rgb: 252 238 150; --accent-hi: #FDF3B6; --accent-lo: #CABE78; --on-accent: #141B24; --gold: #FCEE96; --gold-rgb: 252 238 150; --gold-hi: #FCEE96; --good: #FCEE96; --good-rgb: 252 238 150; --hero: #002242; --hero-rgb: 0 34 66; --hero-hi: #143451; --hero-lo: #001A32; --raised: #162738; --border: #304154; --brand-line: #777358; --mint: #122539; --sand: #252317; --lav: #192622; --ring-track: #253749; --ring-center: #162738; --dome-rim: #04101E; --arc: #FCEE96; --arc-rgb: 252 238 150; --aura-rgb: 252 238 150; --pie-a: 0.34; color-scheme: dark; }
:root[data-palette="emerald"] { --ground: #041407; --ground-rgb: 4 20 7; --card: #0B1E10; --card-rgb: 11 30 16; --ink: #F0F5F1; --ink-rgb: 240 245 241; --muted: #AFBBB1; --soft-ink: #D0D8D1; --accent: #CB8E72; --accent-rgb: 203 142 114; --accent-hi: #DBB09C; --accent-lo: #A2725B; --on-accent: #141D16; --gold: #CB8E72; --gold-rgb: 203 142 114; --gold-hi: #CB8E72; --good: #CB8E72; --good-rgb: 203 142 114; --hero: #032710; --hero-rgb: 3 39 16; --hero-hi: #173823; --hero-lo: #021D0C; --raised: #162B1B; --border: #304635; --brand-line: #866B5E; --mint: #122A19; --sand: #2C201A; --lav: #252318; --ring-track: #263B2B; --ring-center: #162B1B; --dome-rim: #041407; --arc: #CB8E72; --arc-rgb: 203 142 114; --aura-rgb: 203 142 114; --pie-a: 0.34; }
:root[data-mode="day"][data-palette="emerald"] { --ground: #F4F8F5; --ground-rgb: 244 248 245; --card: #FFFFFF; --card-rgb: 255 255 255; --ink: #18221A; --ink-rgb: 24 34 26; --muted: #5B675E; --soft-ink: #3A443C; --accent: #01240D; --accent-rgb: 1 36 13; --accent-hi: #2F4B39; --accent-lo: #011F0B; --on-accent: #FFFFFF; --gold: #814B31; --gold-rgb: 129 75 49; --gold-hi: #C6AEA2; --good: #01240D; --good-rgb: 1 36 13; --hero: #032710; --hero-rgb: 3 39 16; --hero-hi: #173823; --hero-lo: #021D0C; --raised: #ECF2ED; --border: #D6DFD8; --brand-line: #98AA9B; --mint: #E6F3E8; --sand: #FEEBE2; --lav: #F3F1E2; --ring-track: #CFDBD2; --ring-center: #F3F8F4; --dome-rim: #CFDBD2; --arc: #CB8E72; --arc-rgb: 203 142 114; --aura-rgb: 1 36 13; --pie-a: 0.45; }
:root[data-mode="day"][data-palette="emerald"] :is(.hero, .gauge-card, .hook) { --ground: #041407; --ground-rgb: 4 20 7; --card: #0B1E10; --card-rgb: 11 30 16; --ink: #F0F5F1; --ink-rgb: 240 245 241; --muted: #AFBBB1; --soft-ink: #D0D8D1; --accent: #CB8E72; --accent-rgb: 203 142 114; --accent-hi: #DBB09C; --accent-lo: #A2725B; --on-accent: #141D16; --gold: #CB8E72; --gold-rgb: 203 142 114; --gold-hi: #CB8E72; --good: #CB8E72; --good-rgb: 203 142 114; --hero: #032710; --hero-rgb: 3 39 16; --hero-hi: #173823; --hero-lo: #021D0C; --raised: #162B1B; --border: #304635; --brand-line: #866B5E; --mint: #122A19; --sand: #2C201A; --lav: #252318; --ring-track: #263B2B; --ring-center: #162B1B; --dome-rim: #041407; --arc: #CB8E72; --arc-rgb: 203 142 114; --aura-rgb: 203 142 114; --pie-a: 0.34; color-scheme: dark; }
:root[data-palette="plum"] { --ground: #0E0F12; --ground-rgb: 14 15 18; --card: #18191C; --card-rgb: 24 25 28; --ink: #F1F3F9; --ink-rgb: 241 243 249; --muted: #B1B8C5; --soft-ink: #D1D6DF; --accent: #C68B9D; --accent-rgb: 198 139 157; --accent-hi: #D7AEBA; --accent-lo: #9E6F7E; --on-accent: #161B24; --gold: #C68B9D; --gold-rgb: 198 139 157; --gold-hi: #C68B9D; --good: #C68B9D; --good-rgb: 198 139 157; --hero: #3F1023; --hero-rgb: 63 16 35; --hero-hi: #4E2335; --hero-lo: #2F0C1A; --raised: #242528; --border: #3E4043; --brand-line: #866871; --mint: #1F242E; --sand: #1E232E; --lav: #2C1F1F; --ring-track: #343539; --ring-center: #242528; --dome-rim: #0E0F12; --arc: #C68B9D; --arc-rgb: 198 139 157; --aura-rgb: 198 139 157; --pie-a: 0.34; }
:root[data-mode="day"][data-palette="plum"] { --ground: #FAF5F7; --ground-rgb: 250 245 247; --card: #FFFFFF; --card-rgb: 255 255 255; --ink: #271B1F; --ink-rgb: 39 27 31; --muted: #6D5F63; --soft-ink: #4A3D41; --accent: #2D0114; --accent-rgb: 45 1 20; --accent-hi: #532F3E; --accent-lo: #260111; --on-accent: #FFFFFF; --gold: #6A554E; --gold-rgb: 106 85 78; --gold-hi: #BCB2AF; --good: #2D0114; --good-rgb: 45 1 20; --hero: #3F1023; --hero-rgb: 63 16 35; --hero-hi: #4E2335; --hero-lo: #2F0C1A; --raised: #F6EDF0; --border: #E5D9DC; --brand-line: #BA9BA4; --mint: #FEE9EF; --sand: #FCEBE5; --lav: #FDEBEB; --ring-track: #E5D2D7; --ring-center: #FCF5F6; --dome-rim: #E5D2D7; --arc: #C68B9D; --arc-rgb: 198 139 157; --aura-rgb: 45 1 20; --pie-a: 0.45; }
:root[data-mode="day"][data-palette="plum"] :is(.hero, .gauge-card, .hook) { --ground: #0E0F12; --ground-rgb: 14 15 18; --card: #18191C; --card-rgb: 24 25 28; --ink: #F1F3F9; --ink-rgb: 241 243 249; --muted: #B1B8C5; --soft-ink: #D1D6DF; --accent: #C68B9D; --accent-rgb: 198 139 157; --accent-hi: #D7AEBA; --accent-lo: #9E6F7E; --on-accent: #161B24; --gold: #C68B9D; --gold-rgb: 198 139 157; --gold-hi: #C68B9D; --good: #C68B9D; --good-rgb: 198 139 157; --hero: #3F1023; --hero-rgb: 63 16 35; --hero-hi: #4E2335; --hero-lo: #2F0C1A; --raised: #242528; --border: #3E4043; --brand-line: #866871; --mint: #1F242E; --sand: #1E232E; --lav: #2C1F1F; --ring-track: #343539; --ring-center: #242528; --dome-rim: #0E0F12; --arc: #C68B9D; --arc-rgb: 198 139 157; --aura-rgb: 198 139 157; --pie-a: 0.34; color-scheme: dark; }
:root { color-scheme: dark;
  --sh-30: rgba(0, 0, 0, 0.3); --sh-35: rgba(0, 0, 0, 0.35); --sh-40: rgba(0, 0, 0, 0.4); --sh-45: rgba(0, 0, 0, 0.45); --sh-50: rgba(0, 0, 0, 0.5);
  --backdrop: rgba(3, 8, 6, 0.6); --aura-a: 0.55; --glow-a: 0.45;
  --sheet-bg: linear-gradient(180deg, var(--hero-hi) 0%, var(--hero) 120px, var(--hero-lo) 100%);
  --fig-soft: rgb(var(--accent-rgb) / 0.22); --fig-card: var(--hero); --fig-amber: rgb(var(--gold-rgb) / 0.55); --fig-rose: rgb(var(--gold-rgb) / 0.3);
}
:root[data-mode="day"] { color-scheme: light;
  --sh-30: rgb(var(--ink-rgb) / 0.07); --sh-35: rgb(var(--ink-rgb) / 0.09); --sh-40: rgb(var(--ink-rgb) / 0.1); --sh-45: rgb(var(--ink-rgb) / 0.11); --sh-50: rgb(var(--ink-rgb) / 0.12);
  --backdrop: rgb(var(--ink-rgb) / 0.35); --aura-a: 0.12; --glow-a: 0.22;
  --sheet-bg: var(--ground);
  --fig-soft: rgb(var(--accent-rgb) / 0.16); --fig-card: rgb(var(--ink-rgb) / 0.06); --fig-amber: rgb(var(--gold-rgb) / 0.22); --fig-rose: rgb(var(--gold-rgb) / 0.14);
}
/* tokens built from the palette; declared on every surface that re-themes, so var() resolves locally */
:root, :root[data-mode="day"] :is(.hero, .gauge-card, .hook) {
  --line: rgb(var(--ink-rgb) / 0.08);
  --line-strong: rgb(var(--ink-rgb) / 0.14);
  --soft: rgb(var(--ink-rgb) / 0.07);
  --soft-2: rgb(var(--ink-rgb) / 0.11);
  --focus: var(--accent);
  --glass: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.055) 0%, rgb(var(--ink-rgb) / 0.015) 100%);
  --rim: inset 0 1px 0 rgb(var(--ink-rgb) / 0.07);
  --glow: 0 0 22px rgb(var(--accent-rgb) / var(--glow-a));
  --amber-bg: rgb(var(--gold-rgb) / 0.12);
  --amber-ink: var(--gold);
}
:root[data-mode="day"] { --line: rgb(var(--ink-rgb) / 0.10); --line-strong: rgb(var(--ink-rgb) / 0.16); --glass: none; --rim: 0 1px 2px rgb(var(--ink-rgb) / 0.06); }
:root[data-mode="day"] :is(.hero, .gauge-card, .hook) {
  --sh-30: var(--sh-30); --sh-35: var(--sh-35); --sh-40: var(--sh-40); --sh-45: var(--sh-45); --sh-50: var(--sh-50);
  --glow-a: 0.45; color: var(--ink);
}
html { scroll-padding-top: env(safe-area-inset-top, 0px); -webkit-text-size-adjust: 100%; background: var(--ground); }
*, *::before, *::after { box-sizing: inherit; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; min-height: 100vh;
}
/* soft evergreen light from the top of the screen */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(90% 45% at 50% -8%, rgb(var(--aura-rgb) / var(--aura-a)) 0%, rgb(var(--ground-rgb) / 0) 70%),
    radial-gradient(60% 40% at 100% 100%, rgb(var(--accent-rgb) / 0.06) 0%, rgb(var(--ground-rgb) / 0) 70%);
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; border-radius: 14px; }
img { max-width: 100%; }
h1, h2, h3, p { margin: 0; }
::selection { background: rgb(var(--accent-rgb) / 0.35); }

.app { max-width: 520px; margin: 0 auto; padding: 14px 18px calc(150px + env(safe-area-inset-bottom, 0px)); }
.stack > * + * { margin-top: 14px; }

/* ---------- Header ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 8px; }
.top .date { color: var(--muted); font-size: 14px; font-weight: 600; }
.top .hello { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; margin-top: 4px; }
.avatar {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: var(--glass), var(--card); border: 1px solid var(--line-strong); box-shadow: var(--rim);
  color: var(--accent); font-weight: 800; font-size: 18px; display: grid; place-items: center;
}
.page-title { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; padding: 14px 0 4px; line-height: 1.15; }
.lede { color: var(--muted); font-size: 15px; max-width: 42ch; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: 30px; padding: 22px 20px 20px; color: var(--soft-ink);
  background:
    radial-gradient(70% 70% at 100% 0%, rgb(var(--accent-rgb) / 0.16) 0%, rgb(var(--accent-rgb) / 0) 65%),
    linear-gradient(160deg, var(--hero-hi) 0%, var(--hero) 55%, var(--hero-lo) 100%);
  border: 1px solid var(--line-strong); box-shadow: var(--rim), 0 18px 40px var(--sh-35);
}
.countdown { display: flex; align-items: flex-end; gap: 14px; }
.hero .days {
  font-size: clamp(84px, 27vw, 128px); font-weight: 800; letter-spacing: -0.06em; line-height: 0.82;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.count-text { padding-bottom: 6px; }
.hero .days-label { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.hero .sub { font-size: 14px; color: var(--soft-ink); opacity: 0.85; }
.weekends { margin-top: 18px; }
.weekends p { font-size: 13px; font-weight: 600; color: var(--gold); }
.weekends .row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.weekends .dot { width: 14px; height: 6px; border-radius: 3px; background: rgb(var(--gold-rgb) / 0.28); }
.weekends .dot.now { background: var(--gold); width: 26px; }
.today-bar {
  margin-top: 18px; padding: 14px; border-radius: 22px;
  background: rgb(var(--ground-rgb) / 0.45); border: 1px solid var(--line);
}
.tb-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 700; color: var(--ink); }
.tb-head span:last-child { color: var(--muted); font-weight: 600; }
.tb-head b { color: var(--accent); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.glow-track {
  height: 18px; border-radius: 999px; margin: 10px 0 8px; padding: 3px;
  background: var(--sh-35); box-shadow: inset 0 2px 6px var(--sh-45), 0 1px 0 rgb(var(--ink-rgb) / 0.05);
}
.glow-track span {
  display: block; height: 100%; min-width: 12px; border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 45%, var(--accent-lo) 100%); box-shadow: var(--glow);
}
.hero h2 { font-size: 28px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; line-height: 1.12; }
.hero .exam-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px;
  background: rgb(var(--ground-rgb) / 0.45); border: 1px solid var(--line); border-radius: 20px; padding: 12px 14px;
}
.hero .exam-row strong { color: var(--ink); font-size: 16px; }

/* ---------- Pills ---------- */
.pill {
  display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  background: var(--soft); color: var(--muted); white-space: nowrap; border: 1px solid var(--line);
}
.pill.ready { background: rgb(var(--accent-rgb) / 0.13); color: var(--accent); border-color: rgb(var(--accent-rgb) / 0.22); }
.pill.gold, .pill.warn { background: rgb(var(--gold-rgb) / 0.14); color: var(--gold); border-color: rgb(var(--gold-rgb) / 0.25); }
.hero .pill { background: rgb(var(--accent-rgb) / 0.14); color: var(--accent-hi); border-color: rgb(var(--accent-rgb) / 0.2); }
.hero .pill.gold { background: rgb(var(--gold-rgb) / 0.16); color: var(--gold-hi); border-color: rgb(var(--gold-rgb) / 0.28); }

/* ---------- Cards ---------- */
.card {
  position: relative; display: block; width: 100%; text-align: left; color: var(--ink);
  background: var(--glass), var(--card); border: 1px solid var(--line); box-shadow: var(--rim);
  border-radius: 26px; padding: 18px;
}
.card h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.3; }
.card p { color: var(--muted); font-size: 15px; margin-top: 4px; }
.card .kicker { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.card .actions, .actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; align-items: center; }
.card.notice { background: var(--glass), var(--card); border: 1px dashed rgb(var(--accent-rgb) / 0.45); }
.card.quiet { background: transparent; box-shadow: none; border-color: var(--line); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.card-head h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }

/* Daily take card: the one warm, light surface on the screen */
.card.take {
  background:
    radial-gradient(80% 90% at 100% 0%, rgb(var(--paper-glow) / 0.35) 0%, rgb(var(--paper-glow) / 0) 60%),
    var(--paper);
  color: var(--paper-ink); border: 0; box-shadow: 0 16px 36px var(--sh-35);
}
.card.take .kicker { color: var(--paper-gold); }
.card.take h3 { color: var(--paper-title); font-size: 21px; }
.card.take p { color: var(--paper-muted); }
.card.take .btn { background: var(--hero); color: var(--paper); }
.card.take .btn.text { background: none; color: var(--paper-title); }

.practice-card { padding-right: 76px; }
.pc-icon {
  position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.12); border: 1px solid rgb(var(--accent-rgb) / 0.2);
}
.pc-icon svg { width: 22px; height: 22px; }
.practice-card .actions { margin-right: -58px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 11px 20px; min-height: 46px;
  font-weight: 800; font-size: 15px; letter-spacing: -0.005em;
  background: linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 55%, var(--accent-lo) 100%); color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 18px rgb(var(--accent-rgb) / 0.22);
}
.btn.ghost { background: var(--soft); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: var(--rim); }
.btn.text { background: none; box-shadow: none; color: var(--accent); padding-left: 6px; padding-right: 6px; }
.btn.danger-text { background: none; box-shadow: none; color: var(--muted); text-decoration: underline; padding: 8px 0; font-weight: 600; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: default; }
.hero .btn.hero-btn { box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.35); }

/* ---------- Study tool tiles ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile {
  display: flex; flex-direction: column; gap: 2px; text-align: left; min-height: 128px; padding: 14px;
  background: var(--glass), var(--card); border: 1px solid var(--line); box-shadow: var(--rim); border-radius: 24px;
}
.tile-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: auto; padding-bottom: 14px; }
.tile-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); border: 1px solid var(--line); color: var(--ink); }
.tile-icon svg { width: 19px; height: 19px; }
.tile-go { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: rgb(var(--ground-rgb) / 0.35); }
.tile-go svg { width: 15px; height: 15px; }
.tile-title { font-weight: 800; font-size: 15px; color: var(--ink); }
.tile-sub { font-size: 13px; color: var(--muted); line-height: 1.35; }
.tile.hot .tile-go { background: var(--accent); color: var(--on-accent); box-shadow: var(--glow); }
.tile.hot .tile-icon { color: var(--accent); background: rgb(var(--accent-rgb) / 0.12); border-color: rgb(var(--accent-rgb) / 0.22); }

/* ---------- Weekly capsules ---------- */
.week-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wk-text { display: flex; flex-direction: column; }
.wk-big { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.wk-big small { font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.wk-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.capsules { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; }
.capsules.small { gap: 5px; width: 150px; flex: none; }
.cap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cap-track {
  position: relative; width: 100%; max-width: 34px; height: 140px; border-radius: 999px; overflow: hidden;
  background: var(--sh-30); box-shadow: inset 0 2px 6px var(--sh-40), inset 0 0 0 1px rgb(var(--ink-rgb) / 0.05);
}
.capsules.small .cap-track { height: 64px; max-width: 16px; }
.cap-fill {
  position: absolute; left: 0; right: 0; bottom: 0; border-radius: 999px;
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.55) 0%, rgb(var(--accent-rgb) / 0.28) 100%);
}
.cap.now .cap-fill { background: linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 50%, var(--accent-lo) 100%); box-shadow: var(--glow); }
.cap.later .cap-track { opacity: 0.5; }
.cap-day { font-size: 12px; font-weight: 700; color: var(--muted); }
.cap.now .cap-day { color: var(--accent); }
.capsules.small .cap-day { font-size: 10px; }
.cap-tag {
  position: absolute; top: -30px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800;
  background: var(--accent); color: var(--on-accent); box-shadow: var(--glow);
}
.week-full .capsules { margin-top: 30px; }
.week-foot {
  display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 16px; border-radius: 999px;
  background: rgb(var(--ground-rgb) / 0.4); border: 1px solid var(--line); font-size: 14px; color: var(--muted);
}
.week-foot svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.week-foot b { margin-left: auto; color: var(--ink); }

/* ---------- Progress: readiness gauge ---------- */
.gauge-card { padding: 18px 18px 16px; text-align: center; overflow: hidden;
  background: radial-gradient(70% 55% at 50% 42%, rgb(var(--accent-rgb) / 0.12) 0%, rgb(var(--accent-rgb) / 0) 70%), var(--glass), var(--hero); }
.gauge { position: relative; width: min(290px, 100%); margin: 0 auto; }
.gauge svg { display: block; width: 100%; height: auto; }
.gauge-track { fill: none; stroke: var(--sh-35); stroke-width: 22; stroke-linecap: round; }
.gauge-fill { fill: none; stroke: url(#g-jade); stroke-width: 22; stroke-linecap: round; filter: drop-shadow(0 0 8px rgb(var(--accent-rgb) / 0.55)); }
.gauge-tick { stroke: var(--gold); stroke-width: 5; stroke-linecap: round; }
.gauge-core { position: absolute; inset: 22% 18% 20%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 50%; background: radial-gradient(circle at 50% 35%, var(--hero-hi) 0%, var(--hero) 70%); box-shadow: inset 0 1px 0 rgb(var(--ink-rgb) / 0.1), 0 10px 30px var(--sh-35); }
.gauge-cap { font-size: 12px; font-weight: 700; color: var(--muted); }
.gauge-core b { font-size: clamp(46px, 15vw, 60px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.gauge-core b small { font-size: 0.45em; letter-spacing: 0; color: var(--accent); margin-left: 2px; }
.gauge-band { font-size: 13px; font-weight: 700; color: var(--accent); margin-top: 2px; }
.gauge-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.gauge-split span { padding: 10px; border-radius: 18px; background: rgb(var(--ground-rgb) / 0.45); border: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.gauge-split b { display: block; font-size: 20px; color: var(--ink); font-weight: 800; }
.gauge-card .small { margin-top: 12px; text-align: left; }

.stat-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 14px -18px 0; padding: 0 18px 4px; scroll-padding-inline: 18px; scrollbar-width: none; }
.stat-strip::-webkit-scrollbar { display: none; }
.stat-strip + * { margin-top: 14px; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { scroll-snap-align: start; background: var(--glass), var(--card); border: 1px solid var(--line); box-shadow: var(--rim); border-radius: 24px; padding: 14px 16px; }
.stat-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--soft); color: var(--accent); margin-bottom: 14px; }
.stat-icon svg { width: 18px; height: 18px; }
.stat b { display: block; font-size: 32px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat span:not(.stat-icon) { font-size: 13px; color: var(--muted); }

.mastery { margin-top: 14px; padding-bottom: 6px; }
.mastery-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.mastery-row:first-of-type { border-top: 0; }
.m-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.m-text .name { font-weight: 800; font-size: 16px; }
.m-text .meta { font-size: 13px; color: var(--muted); }
.ring { position: relative; flex: none; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring-track { stroke: var(--sh-35); }
.ring-fill { stroke: var(--accent); filter: drop-shadow(0 0 4px rgb(var(--accent-rgb) / 0.5)); }
.ring b { position: relative; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.go { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--soft); color: var(--ink); }
.go svg { width: 18px; height: 18px; }

.suggest { display: grid; gap: 10px; }
.sug { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px; border-radius: 24px;
  background: var(--glass), var(--card); border: 1px solid var(--line); box-shadow: var(--rim); }
.sug.lead { background: radial-gradient(80% 120% at 0% 50%, rgb(var(--accent-rgb) / 0.2) 0%, rgb(var(--accent-rgb) / 0) 70%), var(--glass), var(--card); border-color: rgb(var(--accent-rgb) / 0.2); }
.sug-icon { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--accent); }
.sug.lead .sug-icon { background: rgb(var(--accent-rgb) / 0.16); }
.sug-icon svg { width: 22px; height: 22px; }
.sug-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sug-text .name { font-weight: 800; font-size: 16px; }
.sug-text .meta { font-size: 13px; color: var(--muted); }

/* ---------- Lists ---------- */
.group-title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin: 24px 0 10px; }
.list { background: var(--glass), var(--card); border: 1px solid var(--line); box-shadow: var(--rim); border-radius: 26px; overflow: hidden; }
.list .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 14px 16px; background: none; border: 0; border-top: 1px solid var(--line); min-height: 60px; }
.list .row:first-child { border-top: 0; }
.list button.row:active, .tile:active, .sug:active, .week-card:active { background-color: rgb(var(--ink-rgb) / 0.04); }
.list .row .name { font-weight: 700; font-size: 15px; }
.list .row .meta { font-size: 13px; color: var(--muted); }
.list .row[aria-disabled="true"] { cursor: default; opacity: 0.7; }
.empty { text-align: center; padding: 40px 18px; color: var(--muted); }
.empty h3 { color: var(--ink); font-size: 19px; font-weight: 800; margin-bottom: 6px; }
.meter { display: block; height: 8px; border-radius: 999px; background: var(--sh-35); margin-top: 8px; overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-lo), var(--accent)); }

/* ---------- Floating dock ---------- */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; pointer-events: none;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
}
.tabs::before { content: ""; position: absolute; inset: -40px 0 0; background: linear-gradient(180deg, rgb(var(--ground-rgb) / 0) 0%, rgb(var(--ground-rgb) / 0.85) 60%); z-index: -1; }
.dock { max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dock > * { pointer-events: auto; }
.dock-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 18px; border-radius: 999px;
  font-weight: 800; font-size: 14px; color: var(--ink);
  background: rgb(var(--card-rgb) / 0.78); border: 1px solid var(--line-strong); box-shadow: var(--rim), 0 8px 24px var(--sh-40);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.dock-pill svg { width: 16px; height: 16px; color: var(--accent); }
.tabs .inner {
  width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 6px; border-radius: 34px;
  background: rgb(var(--card-rgb) / 0.78); border: 1px solid var(--line-strong);
  box-shadow: var(--rim), 0 14px 34px var(--sh-50), 0 10px 40px -12px rgb(var(--accent-rgb) / 0.25);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.tabs .inner button {
  background: none; border: 1px solid transparent; border-radius: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 7px 0; font-size: 11px; font-weight: 700; color: var(--muted); min-height: 56px;
}
.tabs .inner button svg { width: 22px; height: 22px; }
.tabs .inner button span { white-space: nowrap; letter-spacing: -0.01em; }
@media (max-width: 360px) { .tabs .inner button { font-size: 10px; } }
.tabs .inner button[aria-current="page"] {
  color: var(--ink); background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.14), rgb(var(--ink-rgb) / 0.05));
  border-color: var(--line-strong); box-shadow: inset 0 1px 0 rgb(var(--ink-rgb) / 0.12);
}
.tabs .inner button[aria-current="page"] svg { color: var(--accent); }

/* ---------- Onboarding ---------- */
.ob { min-height: calc(100vh - 40px); min-height: calc(100dvh - 40px); display: flex; flex-direction: column; justify-content: space-between; padding: 24px 4px 12px; }
.ob .mark { width: 68px; height: 68px; border-radius: 22px; display: grid; place-items: center; color: var(--accent); font-weight: 800; font-size: 20px;
  background: var(--hero); border: 0; box-shadow: var(--glow); overflow: hidden; }
.ob .mark img { display: block; width: 100%; height: 100%; }
.ob h1 { font-size: 36px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; margin-top: 30px; }
.ob p { color: var(--muted); font-size: 17px; margin-top: 12px; max-width: 34ch; }
.ob .dots { display: flex; gap: 6px; }
.ob .dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--soft-2); }
.ob .dots span.on { width: 24px; border-radius: 6px; background: var(--accent); box-shadow: var(--glow); }
.ob .foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.field { display: block; margin-top: 22px; }
.field > span { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.field input, .select, textarea {
  width: 100%; border: 1px solid var(--line-strong); background: rgb(var(--ground-rgb) / 0.5); color: var(--ink);
  border-radius: 18px; padding: 13px 15px; font-size: 16px;
}
.field input:focus, .select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.18); }
::placeholder { color: rgb(var(--ink-rgb) / 0.42); }

/* ---------- Sheets ---------- */
.backdrop { position: fixed; inset: 0; z-index: 40; background: var(--backdrop); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; }
.sheet {
  width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  background: var(--sheet-bg);
  border: 1px solid var(--line-strong); border-bottom: 0; box-shadow: var(--rim);
  border-radius: 30px 30px 0 0; padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px));
}
.sheet.full { height: 96vh; height: 96dvh; max-height: none; }
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--soft-2); margin: 0 auto 12px; }
.sheet .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sheet .head h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.sheet > p { color: var(--soft-ink); }
.close { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--soft); box-shadow: var(--rim); font-size: 20px; line-height: 1; color: var(--ink); }
.steps { padding-left: 22px; margin: 10px 0 0; }
.steps li { margin: 8px 0; }
.small { font-size: 13px; color: var(--muted); }
.section-gap { margin-top: 20px; }

/* ---------- Daily take reader ---------- */
.page-head { display: flex; align-items: center; gap: 12px; padding: 8px 0 12px; font-weight: 700; color: var(--muted); font-size: 15px; }
.close.back { display: grid; place-items: center; }
.take-title { font-size: 32px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; margin-top: 4px; }
.take-summary { font-size: 17px; margin-top: 12px; color: var(--soft-ink); }
.hook {
  margin-top: 18px; padding: 16px 18px; border-radius: 24px; font-weight: 700; color: var(--ink); font-size: 17px; line-height: 1.4;
  background: radial-gradient(70% 90% at 100% 0%, rgb(var(--accent-rgb) / 0.16), rgb(var(--accent-rgb) / 0) 70%), var(--hero);
  border: 1px solid var(--line-strong); box-shadow: var(--rim);
}
.hook small { display: block; color: var(--accent); font-size: 13px; font-weight: 800; margin-bottom: 4px; }
.take-part { margin-top: 26px; }
.take-part h3 { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.take-part ul { padding-left: 20px; margin: 0; }
.take-part li { margin: 8px 0; color: var(--soft-ink); }
.take-part li::marker { color: var(--accent); }
.story { background: var(--amber-bg); border: 1px solid rgb(var(--gold-rgb) / 0.2); border-radius: 24px; padding: 16px 18px; }
.story p { color: var(--soft-ink); }
.story strong { color: var(--gold); }
.take-page h2 { font-size: 19px; font-weight: 800; margin-bottom: 8px; letter-spacing: -0.015em; }
.take-page .take-part.story h2 { color: var(--gold); }
.take-fig { margin: 18px 0 0; background: var(--glass), var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 12px; color: var(--ink); }
.take-fig .fig { width: 100%; height: auto; display: block; }
.fig-ink-fill { fill: var(--ink); }
.fig-accent { fill: var(--accent); }
.fig-accent-soft { fill: rgb(var(--accent-rgb) / 0.18); }
.fig-amber { fill: var(--fig-amber); }
.fig-soft { fill: var(--fig-soft); }
.fig-card { fill: var(--fig-card); }
.fig-line { stroke: rgb(var(--ink-rgb) / 0.25); stroke-width: 1.5; }
.fig-line-strong { stroke: var(--accent); stroke-width: 2.5; fill: none; }
.fig-curve { fill: none; stroke: var(--accent); stroke-width: 3; }
.fig-rose { fill: var(--fig-rose); }
.fig-on-accent { fill: var(--on-accent); }
.explore .card { margin-top: 4px; }
.note-refs { padding-left: 20px; margin: 0; color: var(--muted); }
.exam-weight p { font-size: 15px; color: var(--soft-ink); }
.exam-weight .meter { height: 12px; }
.exam-weight .meter span { background: linear-gradient(90deg, var(--gold), var(--gold)); }

/* ---------- Question, choices & insight (v1-2) ---------- */
.q-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--accent); }
.q-meta .lvl { color: var(--muted); font-weight: 600; padding-left: 8px; border-left: 1px solid var(--line-strong); line-height: 1; }
.stem { font-size: clamp(22px, 6.4vw, 26px); font-weight: 700; line-height: 1.38; letter-spacing: -0.02em; margin: 12px 0 0; text-wrap: pretty; }
.take-stem { font-size: 20px; }
.choices { display: grid; gap: 10px; margin-top: 28px; }

.choice {
  display: flex; gap: 14px; align-items: flex-start; text-align: left; width: 100%; padding: 15px 16px; min-height: 58px; color: var(--ink);
  background: rgb(var(--card-rgb) / 0.55); border: 1px solid var(--line); border-radius: 20px; line-height: 1.45; font-size: 16px;
}
.choice .letter {
  flex: none; width: 30px; height: 30px; margin-top: -2px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 13px; color: var(--muted); background: transparent; border: 1.5px solid var(--line-strong);
}
.c-text { flex: 1; min-width: 0; }
.c-tag {
  display: block; width: fit-content; margin-top: 8px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.01em;
}
.choice[disabled] { cursor: default; }

/* picked in the weekend exam (no grading yet) */
.choice.is-selected { border-color: rgb(var(--accent-rgb) / 0.6); background: rgb(var(--accent-rgb) / 0.09); }
.choice.is-selected .letter { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* correct: mint outline, soft tint, check */
.choice.is-right {
  border: 1.5px solid var(--good); color: var(--ink);
  background: linear-gradient(180deg, rgb(var(--good-rgb) / 0.16), rgb(var(--good-rgb) / 0.07)), var(--card);
  box-shadow: 0 0 0 4px rgb(var(--good-rgb) / 0.08);
}
.choice.is-right .letter { background: var(--good); border-color: var(--good); }
.ck { width: 18px; height: 18px; fill: none; stroke: var(--on-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.choice.is-right .c-tag { background: rgb(var(--good-rgb) / 0.16); color: var(--good); }

/* your answer, not the best one: muted amber outline + label, no red */
.choice.is-wrong { border: 1.5px solid rgb(var(--gold-rgb) / 0.7); background: rgb(var(--gold-rgb) / 0.07); color: var(--ink); }
.choice.is-wrong .letter { border-color: var(--gold); color: var(--gold); }
.choice.is-wrong .c-tag { background: rgb(var(--gold-rgb) / 0.16); color: var(--gold); }

/* everything else steps back once answered */
.choice.is-dim { opacity: 0.45; }

/* older markup (admin verify) */
.choice.is-right:not(button) .letter { color: var(--on-accent); }

.insight {
  position: relative; margin-top: 24px; padding: 18px 18px 16px 22px; border-radius: 22px;
  background: linear-gradient(135deg, rgb(var(--gold-rgb) / 0.08) 0%, rgb(var(--card-rgb) / 0.4) 60%);
}
.insight.good { background: linear-gradient(135deg, rgb(var(--good-rgb) / 0.10) 0%, rgb(var(--card-rgb) / 0.4) 60%); }
.insight::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: var(--gold); }
.insight.good::before { background: var(--good); box-shadow: 0 0 10px rgb(var(--good-rgb) / 0.5); }
.in-label { font-size: 12px; font-weight: 800; letter-spacing: 0.02em; color: var(--gold); }
.insight.good .in-label { color: var(--good); }
.in-lead { margin-top: 8px; font-size: 18px; font-weight: 800; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); }
.in-body { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--soft-ink); }
.in-status {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 0; border: 0; background: none;
  font-size: 13px; font-weight: 700; color: var(--muted);
}
.in-status svg { width: 15px; height: 15px; }
.in-status.saved { color: var(--gold); }
.in-status.act { min-height: 36px; padding: 6px 12px; margin-left: -12px; border-radius: 999px; color: var(--ink); }
.in-status.act:hover { background: var(--soft); }
.next-btn { margin-top: 20px; }

.feedback {
  margin-top: 14px; padding: 14px 16px; border-radius: 20px; color: var(--soft-ink);
  background: var(--glass), var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent);
}
.feedback b { display: block; margin-bottom: 4px; color: var(--ink); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 60;
  bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  max-width: min(92vw, 480px); background: var(--ink); color: var(--ground);
  padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; box-shadow: 0 10px 30px var(--sh-45);
}

/* ---------- Exam timer (v2-52) ---------- */
.exam-clock { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--soft); color: var(--ink);
  font-weight: 800; font-variant-numeric: tabular-nums; }
.exam-clock.low { background: rgb(var(--gold-rgb) / 0.22); }

/* ---------- Sign-in page (v2-48) ---------- */
.auth-page { justify-content: flex-start; }
.auth-page h1 { margin-top: 24px; }
.auth-form { max-width: 440px; margin-top: 18px; }
.ob .auth-form p { font-size: 14px; color: var(--muted); max-width: none; margin-top: 8px; }
.ob .auth-form p.field-note { margin-top: 6px; }
.ob .auth-form .acct-msg { margin-top: 14px; font-size: 14px; color: var(--ink); }
.auth-guest { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.auth-guest .small { margin-top: 10px; }

/* ---------- Info buttons (v2-47) ---------- */
.info-btn {
  display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 6px; vertical-align: 2px;
  border-radius: 50%; border: 1px solid var(--line-strong); background: var(--soft); color: var(--muted);
  font: 800 13px/1 var(--font); cursor: pointer; padding: 0;
}
.info-btn:hover { color: var(--ink); border-color: var(--accent); }
.info-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.info-body p { margin: 10px 0 0; }
.info-body .group-title { margin: 20px 0 4px; font-size: 16px; }

/* ---------- Account (v2-46) ---------- */
.field > .pass-wrap { display: flex; align-items: center; gap: 6px; margin-bottom: 0; }
.pass-wrap input { flex: 1; min-width: 0; }
.pass-wrap .btn.text { flex: none; }
.acct-msg { margin: 14px 0 0; padding: 10px 14px; border-radius: 14px; background: rgb(var(--accent-rgb) / 0.12); color: var(--ink); font-size: 14px; font-weight: 600; }
.acct-msg.err { background: rgb(var(--gold-rgb) / 0.16); }
.acct-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; margin-top: 8px; }
.check-row.acct-check { align-items: flex-start; font-weight: 500; line-height: 1.4; margin-top: 16px; }
.check-row.acct-check input { flex: none; margin-top: 2px; }

/* ---------- Update pill (v2-45) ---------- */
.update-pill {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 70;
  top: calc(10px + env(safe-area-inset-top, 0px));
  display: inline-flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 24px); white-space: nowrap;
  padding: 7px 7px 7px 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 14px/1 var(--font); color: var(--ink);
  background: var(--card); box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.45), 0 10px 28px var(--sh-45);
  animation: pill-in 380ms cubic-bezier(.2, .8, .2, 1);
}
.update-pill[hidden] { display: none; }
.update-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgb(var(--accent-rgb) / 0.7); }
.update-pill .dot, .update-pill .upd-btn { flex: none; }
.update-pill .upd-btn { padding: 8px 14px; border-radius: 999px; background: var(--accent); color: var(--on-accent); }
.update-pill:disabled { opacity: .75; cursor: progress; }
.update-pill:disabled .go { display: none; }
.update-pill:focus-visible { outline: 3px solid var(--accent-hi); outline-offset: 3px; }
body[data-shell="session"] .update-pill { display: none; } /* never interrupt a practice set or mock exam */
@keyframes pill-in { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .update-pill { animation: none; } }

/* ---------- Practice session ---------- */
.session { padding-top: 6px; }
.session-top { display: flex; align-items: center; gap: 12px; padding: 6px 0 16px; }
.session-top .bar { flex: 1; height: 12px; border-radius: 999px; padding: 2px; background: var(--sh-35); box-shadow: inset 0 2px 4px var(--sh-40); }
.session-top .bar span { transition: width 450ms cubic-bezier(.2, .8, .2, 1); display: block; height: 100%; border-radius: 999px; background: linear-gradient(180deg, var(--accent-hi), var(--accent)); box-shadow: 0 0 10px rgb(var(--accent-rgb) / 0.5); }
.session-top .count { font-size: 14px; font-weight: 700; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kicker-line { font-size: 13px; font-weight: 700; color: var(--accent); }
.stem { font-size: 21px; font-weight: 700; line-height: 1.45; letter-spacing: -0.015em; margin-top: 8px; }
.score { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.score b { font-size: 96px; font-weight: 800; letter-spacing: -0.06em; line-height: 1; color: var(--accent); text-shadow: 0 0 30px rgb(var(--accent-rgb) / 0.35); }
.score span { font-size: 18px; font-weight: 700; color: var(--muted); }
.size-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* ---------- Weekend exam ---------- */
.count-btn { background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; }
.exam { padding-bottom: 110px; }
.exam-tools { margin-top: 10px; }
.exam-nav {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 15;
  display: flex; gap: 8px; justify-content: space-between; max-width: 500px; margin: 0 auto; padding: 8px; border-radius: 34px;
  background: rgb(var(--card-rgb) / 0.8); border: 1px solid var(--line-strong); box-shadow: var(--rim), 0 14px 34px var(--sh-50);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.exam-nav .btn { flex: 1; }
.qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; margin-top: 12px; }
.qgrid button { min-height: 42px; border-radius: 14px; border: 1px solid var(--line); background: var(--soft); font-size: 13px; font-weight: 700; color: var(--ink); }
.qgrid button.done { background: rgb(var(--accent-rgb) / 0.18); border-color: transparent; color: var(--accent); }
.qgrid button.here { border-color: var(--accent); box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.3); }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-row .pill { min-height: 38px; padding: 8px 16px; font-size: 14px; }
.chip-row .pill.ready { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.review-card h3 { font-size: 16px; line-height: 1.45; margin-bottom: 8px; }
.review-card p { margin-top: 6px; color: var(--soft-ink); }
.check-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-weight: 600; font-size: 15px; }
.check-row input { width: 20px; height: 20px; accent-color: var(--accent); }

/* ---------- Admin ---------- */
.code { background: var(--sh-35); border-radius: 14px; padding: 12px; font-size: 12px; overflow-x: auto; white-space: pre; margin-top: 10px; color: var(--soft-ink); }
.verify-card .choice { cursor: default; }
.hello .pill { vertical-align: middle; font-size: 12px; }
.select { appearance: auto; }

/* ---------- Study tools ---------- */
.flashcard {
  display: flex; flex-direction: column; justify-content: center; gap: 12px; width: 100%; min-height: 280px; margin-top: 12px; padding: 28px 24px;
  border-radius: 30px; text-align: left; color: var(--ink);
  background: radial-gradient(70% 70% at 100% 0%, rgb(var(--accent-rgb) / 0.14), rgb(var(--accent-rgb) / 0) 70%), var(--glass), var(--card);
  border: 1px solid var(--line-strong); box-shadow: var(--rim), 0 18px 40px var(--sh-35);
}
.flashcard.flipped { background: radial-gradient(80% 90% at 100% 0%, rgb(var(--paper-glow) / 0.35), rgb(var(--paper-glow) / 0) 60%), var(--paper); color: var(--paper-ink); border-color: transparent; }
.fc-label { font-size: 13px; font-weight: 700; opacity: 0.75; }
.fc-text { font-size: 20px; line-height: 1.5; font-weight: 700; }
.flashcard.flipped .fc-text { font-weight: 600; font-size: 18px; }
.note-title { font-size: 20px; font-weight: 700; }
.note-body { min-height: 45vh; line-height: 1.6; }
textarea { resize: vertical; }
.row-main { display: flex; align-items: center; gap: 12px; flex: 1; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; min-height: 44px; }
.file-icon { font-size: 22px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); flex: none; }
.file-body { margin-top: 8px; }
.file-img, .pdf-page { width: 100%; height: auto; border-radius: 16px; display: block; margin-bottom: 10px; background: #fff; }
.doc-html { background: var(--paper); color: var(--paper-ink); border-radius: 20px; padding: 18px; line-height: 1.6; overflow-x: auto; }
.doc-html h2, .doc-html h3, .doc-html h4 { margin: 14px 0 6px; }
.doc-html table { border-collapse: collapse; } .doc-html td, .doc-html th { border: 1px solid rgb(19 38 30 / 0.2); padding: 4px 6px; }
.reader h2 { font-size: 19px; margin: 0 0 8px; }
.reader-hook { background: var(--amber-bg); color: var(--gold); border-radius: 16px; padding: 10px 14px; font-weight: 700; }
.reader ul { margin: 8px 0 0 18px; padding: 0; } .reader li { margin: 6px 0; line-height: 1.6; color: var(--soft-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Appearance controls (v2-01) ---------- */
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.swatch {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; min-height: 76px; text-align: left;
  border-radius: 18px; background: var(--soft); border: 1.5px solid var(--line); color: var(--ink);
}
.swatch[aria-pressed="true"] { border-color: var(--accent); background: rgb(var(--accent-rgb) / 0.1); }
.sw-dots { display: flex; }
.sw-dots i { width: 22px; height: 22px; border-radius: 50%; background: var(--sw-a); box-shadow: 0 0 0 2px var(--card); }
.sw-dots i + i { margin-left: -6px; background: var(--sw-b); }
.sw-name { font-size: 13px; font-weight: 700; line-height: 1.25; }

/* ---------- Home and profile everywhere (v2-05) ---------- */
.tab-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 0; }
.brand-home, .rail-brand {
  display: inline-flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; margin-left: -4px; border: 0; border-radius: 14px;
  background: none; color: var(--ink); font-weight: 800; font-size: 16px; letter-spacing: -0.02em; text-align: left;
}
.brand-home img { width: 32px; height: 32px; border-radius: 9px; display: block; }
.brand-home:hover, .rail-brand:hover { background: var(--soft); }
.page-head .home-btn { margin-left: auto; }
.home-btn { flex: none; display: grid; place-items: center; }
.icon-btn {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: none; color: var(--muted);
}
.icon-btn:hover { background: var(--soft); color: var(--ink); }
.list .row .file-del.confirm { white-space: nowrap; color: var(--gold); }

/* ---------- Study music (v2-04) ---------- */
.music-card { padding-right: 76px; }
.music-card .kicker { color: var(--gold); }
.music-card .pc-icon { color: var(--gold); background: rgb(var(--gold-rgb) / 0.12); border-color: rgb(var(--gold-rgb) / 0.22); }
a.row { color: inherit; text-decoration: none; }
a.row:hover .go { background: var(--soft-2); }

/* ---------- Bigger screens (v2-02) ----------
   Phones (under 700px) are unchanged. Tablets get a wider column, 4 study tiles, and centered sheets.
   Desktops (1024px+) get a side menu, two-column screens, and a side panel for the reason in practice. */
.rail-brand, .kbd-hint, .q-wait { display: none; }
/* split screens: one column on phones and tablets (blocks keep their phone order), two on desktop */
.split { display: flex; flex-direction: column; gap: 14px; }
.split-a, .split-b { display: contents; }
.split .group-title { margin-top: 10px; }
.split .stat-strip, .split .mastery { margin-top: 0; }
.cols > * + * { margin-top: 0; }

@media (hover: hover) and (pointer: fine) {
  .kbd-hint { display: block; margin-top: 14px; font-size: 13px; color: var(--muted); }
}

@media (min-width: 700px) {
  .app { max-width: 720px; padding-left: 28px; padding-right: 28px; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .stat-strip { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; margin: 14px 0 0; padding: 0; }
  .backdrop { align-items: center; padding: 24px; }
  .sheet { border-radius: 30px; border-bottom: 1px solid var(--line-strong); max-height: 88vh; max-height: 88dvh; padding-bottom: 24px; }
  .sheet.full { height: 88vh; height: 88dvh; }
  .sheet .grab { visibility: hidden; height: 0; margin-bottom: 6px; }
  .flashcard { min-height: 340px; }
  .fc-text { font-size: 22px; }
  .stem { font-size: 24px; }
}

@media (min-width: 900px) {
  .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
  .stack > .cols { margin-top: 14px; }
}

@media (min-width: 1024px) and (min-height: 560px) {
  /* side menu */
  body[data-shell="tabs"] { padding-left: 252px; }
  .tabs { top: 0; bottom: 0; left: 0; right: auto; width: 252px; padding: 24px 16px 24px 20px; }
  .tabs::before { display: none; }
  .dock { height: 100%; max-width: none; margin: 0; align-items: stretch; justify-content: flex-start; gap: 18px; }
  .rail-brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px; margin: 0 0 4px; font-size: 18px; }
  .app { position: relative; }
  .tab-top { position: absolute; top: 28px; right: 40px; padding: 0; }
  .tab-top .brand-home { display: none; }
  .rail-brand img { width: 40px; height: 40px; border-radius: 11px; }
  .tabs .inner {
    display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 24px;
    background: var(--glass), var(--card); box-shadow: var(--rim); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .tabs .inner button { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 48px; padding: 10px 14px; border-radius: 16px; font-size: 15px; }
  .tabs .inner button:hover:not([aria-current="page"]) { background: var(--soft); }
  .dock-pill { order: 3; margin-top: auto; justify-content: center; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--soft); box-shadow: none; }
  .toast { bottom: 32px; }
  body[data-shell="tabs"] .toast { left: calc(50% + 126px); }

  /* page frame */
  .app { max-width: 1080px; padding: 28px 40px 64px; }
  body[data-shell="focus"] .app { max-width: 760px; }
  body[data-shell="session"] .app { max-width: 1120px; }
  .page-title { font-size: 36px; padding-top: 10px; }
  .top .hello { font-size: 36px; }

  .split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 24px; align-items: start; }
  .split > .o { grid-column: 1 / -1; }
  .split-a, .split-b { display: flex; flex-direction: column; gap: 20px; }
  .split .group-title { margin-top: 4px; }
  .split .stat-strip { margin: 0; }
  .split.progress-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split.today .tiles { grid-template-columns: repeat(2, 1fr); }
  .split.today [aria-label="Study tools"] .group-title { margin-top: 0; }

  /* Practice: question on the left, the reason on the right */
  .session.has-side { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 36px; align-items: start; }
  .session.has-side > .session-top { grid-column: 1 / -1; }
  .session.has-side > .q-body { grid-column: 1; }
  .q-side { grid-column: 2; position: sticky; top: 24px; }
  .q-side .insight { margin-top: 0; }
  .q-wait {
    display: block; padding: 22px; border-radius: 22px; border: 1.5px dashed var(--line-strong); color: var(--muted);
  }
  .q-wait p:first-child { font-weight: 700; color: var(--soft-ink); }
  .q-wait .kbd-hint { margin-top: 8px; }
}

/* ---------- Motion: one entrance for the hero numbers, plus responses to taps ---------- */
@media (prefers-reduced-motion: no-preference) {
  .sheet { animation: rise 240ms cubic-bezier(.2, .8, .2, 1); }
  @keyframes rise { from { transform: translateY(28px); opacity: 0.6; } to { transform: none; opacity: 1; } }
  .glow-track span, .gauge-fill, .cap-fill { animation: grow 900ms cubic-bezier(.2, .8, .2, 1) both; }
  .gauge-fill { animation-name: sweep; }
  @keyframes grow { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes sweep { from { stroke-dasharray: 0.01 100; } }
  .glow-track span { animation-name: fill-x; }
  @keyframes fill-x { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  .btn, .tile, .sug, .tabs .inner button, .dock-pill, .go { transition: transform 120ms ease, background-color 160ms ease; }
  .choice { transition: background-color 180ms ease, border-color 180ms ease, opacity 220ms ease, box-shadow 180ms ease, transform 120ms ease; }
  .choices.fx-answer .ck path { stroke-dasharray: 20; animation: draw 320ms 80ms ease-out both; }
  @keyframes draw { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
  .choices.fx-answer .is-right .letter { animation: pop 260ms ease-out both; }
  @keyframes pop { from { transform: scale(0.6); } to { transform: none; } }
  .insight.fx-answer, .next-btn.fx-answer { animation: rise-in 280ms 120ms cubic-bezier(.2, .8, .2, 1) both; }
  .next-btn.fx-answer { animation-delay: 200ms; }
  @keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .q-body.fx-q { animation: slide-in 260ms cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes slide-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
  .btn:active, .tile:active, .sug:active, .choice:active, .dock-pill:active, .go:active { transform: scale(0.97); }
}
@media (min-width: 400px) { .stat-strip { grid-auto-columns: 40%; } }


/* ---------- v2-74: About page, reviewer topics, flashcard note, report link ---------- */
a.btn { text-decoration: none; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.about-sec { padding: 0; }
.about-sec > summary { list-style: none; cursor: pointer; padding: 16px 18px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.about-sec > summary::-webkit-details-marker { display: none; }
.about-sec > summary::after { content: ''; width: 9px; height: 9px; margin-right: 4px; flex: none; border-right: 2.4px solid var(--muted); border-bottom: 2.4px solid var(--muted); transform: rotate(45deg); transition: transform 0.2s; }
.about-sec[open] > summary::after { transform: rotate(-135deg); }
.about-body { padding: 0 18px 18px; }
.about-body p { margin: 10px 0 0; line-height: 1.6; }
.about-body ul { margin: 8px 0 0 18px; padding: 0; }
.about-body li { margin: 7px 0; line-height: 1.55; }
.about-body h3 { margin: 16px 0 0; font-size: 15px; }
.about-body .btn { margin: 2px 6px 2px 0; }
.rep-link { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--muted); text-decoration: underline; }
.fc-note { text-align: center; margin: 4px 0 10px; color: var(--muted); }
.rv-num { width: 28px; height: 28px; border-radius: 50%; background: var(--soft); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex: none; margin-right: 12px; }
.rv-nav { display: flex; gap: 10px; margin-top: 16px; }
.rv-nav .btn { flex: 1; }
@media (prefers-reduced-motion: reduce) { .about-sec > summary::after { transition: none; } }

/* ======================================================================
   UI refresh (v2-85). Look and layout only; no content or data changes.
   1. Softer surfaces: no outline borders, faint inset dividers, gentle lift.
   2. Swipe rows on phones (Practice areas, Study tools); normal grids on wider screens.
   3. Today's takes: readable swipe cards on the paper card.
   ====================================================================== */
:root { --lift: 0 12px 28px -14px rgb(0 0 0 / 0.5); --divider: rgb(var(--ink-rgb) / 0.06); }
:root[data-mode="day"] { --lift: 0 10px 26px -14px rgb(var(--ink-rgb) / 0.28), 0 1px 2px rgb(var(--ink-rgb) / 0.05); }

/* 1. Softer surfaces */
.card, .tile, .list, .stat, .sug { border-color: transparent; box-shadow: var(--rim), var(--lift); }
.card.quiet { box-shadow: none; }
.card.notice {
  border-color: transparent;
  background: radial-gradient(90% 150% at 0% 0%, rgb(var(--accent-rgb) / 0.16) 0%, rgb(var(--accent-rgb) / 0) 70%), var(--glass), var(--card);
}
.pill, .pill.ready, .pill.gold, .pill.warn, .tile-icon { border-color: transparent; }
.hero .exam-row { border-color: transparent; }
.list .row { border-top: 0; }
.list .row:not(:first-child) {
  background-image: linear-gradient(var(--divider), var(--divider));
  background-size: calc(100% - 32px) 1px; background-repeat: no-repeat; background-position: 50% 0;
}

/* 2. Swipe rows (phones only; at 700px and up the original grids take over) */
.area-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; min-height: 160px; padding: 14px;
  border: 0; border-radius: 24px; color: var(--ink); background: var(--glass), var(--card); box-shadow: var(--rim), var(--lift);
}
.area-card .ac-code {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: auto; border-radius: 50%;
  font-size: 12px; font-weight: 800; letter-spacing: 0.02em; color: var(--accent); background: rgb(var(--accent-rgb) / 0.12);
}
.area-card .name { margin-top: 14px; font-weight: 800; font-size: 15px; line-height: 1.25; }
.area-card .meta { font-size: 13px; line-height: 1.35; color: var(--muted); }
.area-card .pill { margin-top: 8px; }
.area-card:active { background-color: rgb(var(--ink-rgb) / 0.04); }
.area-card[aria-disabled="true"] { cursor: default; opacity: 0.7; }

@media (max-width: 699px) {
  .swipe {
    display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: 10px; grid-template-columns: none;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin: 0 -18px; padding: 2px 18px 12px; scroll-padding-inline: 18px; scrollbar-width: none;
  }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * { scroll-snap-align: start; }
  .swipe .tile { min-height: 140px; }
}
@media (min-width: 700px) {
  .swipe.areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
}

/* 3. Today's takes inside the paper card */
.slot-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 10px; margin: 16px -18px 0; padding: 0 18px 2px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; scrollbar-width: none;
}
.slot-strip::-webkit-scrollbar { display: none; }
.slot {
  scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; min-height: 104px;
  padding: 12px 14px; border: 0; border-radius: 20px; color: var(--paper-title); background: rgba(19, 38, 30, 0.07);
}
.slot .meta, .slot .name { display: block; }
.slot .meta { font-size: 12.5px; font-weight: 600; color: var(--paper-muted); }
.slot .name { font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--paper-title); }
.slot .pill { margin-top: auto; border: 0; background: rgba(19, 38, 30, 0.1); color: var(--paper-muted); }
.slot .pill.ready { background: var(--hero); color: var(--paper); }
.slot[aria-disabled="true"] { opacity: 0.75; cursor: default; }
.slot:active { background: rgba(19, 38, 30, 0.12); }
@media (min-width: 700px) {
  .slot-strip { grid-auto-columns: minmax(0, 1fr); margin: 16px 0 0; padding: 0; overflow: visible; }
}

/* ---------- Phase 2 (v2-86): exam switch and flashcard decks ---------- */
.seg { display: flex; gap: 4px; padding: 4px; margin-top: 14px; border-radius: 999px; background: var(--soft); }
.seg-btn {
  flex: 1; min-height: 44px; border: 0; border-radius: 999px; background: none; color: var(--muted);
  font: inherit; font-weight: 800; font-size: 15px; letter-spacing: -0.01em;
}
.seg-btn[aria-selected="true"] { background: var(--accent); color: var(--on-accent); box-shadow: var(--glow); }
.exam-panes { margin-top: 14px; }
.exam-panes > .pane > .card { margin: 0; }
@media (max-width: 899px) {
  .exam-panes[data-sub="ProfEd"] > .pane[data-pane="GenEd"], .exam-panes[data-sub="GenEd"] > .pane[data-pane="ProfEd"] { display: none; }
}
@media (min-width: 900px) { .seg { display: none; } }

.deck-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 148px; padding: 14px; border: 0; border-radius: 24px;
  text-align: left; color: var(--ink); font: inherit; background: var(--glass), var(--card); box-shadow: var(--rim), var(--lift);
}
.deck-card:active { background-color: rgb(var(--ink-rgb) / 0.04); }
.deck-card .dc-tag {
  margin-bottom: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.01em;
  color: var(--accent); background: rgb(var(--accent-rgb) / 0.12);
}
.deck-card .name { font-weight: 800; font-size: 15px; line-height: 1.25; }
.deck-card .meta { font-size: 13px; line-height: 1.35; color: var(--muted); margin-bottom: 12px; }
.deck-card .meter { width: 100%; height: 5px; margin: -4px 0 12px; }
.deck-card .dc-go {
  margin-top: auto; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--ink); background: var(--soft);
}
.deck-card .dc-go.due { color: var(--on-accent); background: var(--accent); }
.notes-intro { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.45; max-width: 46ch; }
.deck-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 700px) {
  .deck-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Notes section chips: one line that scrolls sideways on phones */
@media (max-width: 699px) {
  .chips-scroll {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    margin: 0 -18px; padding: 2px 18px 6px; scroll-padding-inline: 18px; scrollbar-width: none;
  }
  .chips-scroll::-webkit-scrollbar { display: none; }
  .chips-scroll .pill { flex: none; scroll-snap-align: start; }
}
.deck-grid { margin-top: 14px; }

/* ---------- v2-96 UI (look and layout only): playful layer, home circles, pill selector, Date view, sign-up panes ----------
   Sticker colors are the same in every theme (like --paper); icons on them use --fun-ink. Everything else uses theme tokens. */
:root {
  --fun-sun: #FFC95C; --fun-coral: #FF8E72; --fun-lilac: #B9A2FF; --fun-sky: #79C8F5; --fun-mint: #7FE0B4; --fun-ink: #1B2420;
  --fun-sun-rgb: 255 201 92; --fun-coral-rgb: 255 142 114; --fun-lilac-rgb: 185 162 255; --fun-sky-rgb: 121 200 245; --fun-mint-rgb: 127 224 180;
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Home: circle buttons under the progress bar */
.orbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4px; margin-top: 18px; }
.orbs-wrap { padding: 4px 0; }
.orbs-wrap .orbs { margin-top: 0; }
.orb { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 2px 0; background: none; border: 0; color: var(--ink); }
.orb-dot {
  position: relative; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  color: var(--fun-ink); background: var(--tone, var(--fun-mint));
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.13), inset 0 2px 0 rgb(255 255 255 / 0.4), 0 8px 16px rgb(0 0 0 / 0.22);
  transition: transform 0.2s var(--pop);
}
.orb-dot svg { width: 25px; height: 25px; }
.orb:active .orb-dot { transform: scale(0.9) rotate(-8deg); }
.orb-label { font-size: 11.5px; font-weight: 800; color: var(--soft-ink); white-space: nowrap; letter-spacing: -0.005em; }
.orb.sun { --tone: var(--fun-sun); } .orb.coral { --tone: var(--fun-coral); } .orb.lilac { --tone: var(--fun-lilac); }
.orb.sky { --tone: var(--fun-sky); } .orb.mint { --tone: var(--fun-mint); }
.orb-badge {
  position: absolute; top: -5px; right: -5px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--fun-ink); color: #fff; font: 800 11.5px/18px var(--font); font-style: normal; text-align: center; border: 2px solid var(--ground);
}
.orb-pulse { position: absolute; top: 0; right: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--fun-coral); border: 2px solid var(--ground); }
@media (prefers-reduced-motion: no-preference) {
  .orb-pulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--fun-coral); animation: orb-ping 1.8s ease-out infinite; }
  @keyframes orb-ping { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(1.5); opacity: 0; } }
}
@media (max-width: 380px) { .orb-dot { width: 48px; height: 48px; } .orb-dot svg { width: 22px; height: 22px; } .orb-label { font-size: 11px; } }
@media (max-width: 340px) { .orb-label { font-size: 10.5px; } }

/* Pill selector (Practice subject, Notes sections, Mock Exam switch): one connected strip.
   Each pill overlaps the next, so the joins pinch into sharp notches (the Subject Choice peg). */
.pillbar, .seg { --chain: var(--ink); --chain-ink: var(--ground); --lap: 18px; }
:root[data-mode="day"] .pillbar, :root[data-mode="day"] .seg { --chain: var(--card); --chain-ink: var(--ink); }
.pillbar, .seg {
  display: flex; gap: 0; margin-top: 14px; padding: 6px 4px 10px; background: none; border: 0; border-radius: 0;
  filter: drop-shadow(0 1px 0 rgb(var(--ink-rgb) / 0.18)) drop-shadow(0 6px 8px rgb(0 0 0 / 0.16));
}
.pillbar.scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; }
.pillbar.scroll::-webkit-scrollbar { display: none; }
.pb, .seg-btn {
  position: relative; flex: 1 1 0; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0 calc(var(--lap) + 8px);
  border: 0; border-radius: 999px; background: var(--chain); color: var(--chain-ink);
  font-weight: 800; font-size: 14.5px; letter-spacing: -0.01em; white-space: nowrap; transition: color 0.2s, box-shadow 0.2s;
}
.pb + .pb, .seg-btn + .seg-btn { margin-left: calc(var(--lap) * -1); }
.pillbar.scroll .pb { flex: none; scroll-snap-align: start; }
.pb-ic { display: none; }
.pb[aria-pressed="true"], .seg-btn[aria-selected="true"] {
  z-index: 2; background: var(--accent); color: var(--on-accent);
  box-shadow: 0 0 0 2px var(--chain), 0 0 0 4.5px var(--accent);
}
.pb:active, .seg-btn:active { filter: brightness(0.94); }
.pr-one { margin-top: 10px; }
.pr-one .group-title { margin-top: 0; }

/* a little color on the Study tools tiles */
.tiles .tile:nth-child(4n + 1) .tile-icon { background: rgb(var(--fun-coral-rgb) / 0.24); }
.tiles .tile:nth-child(4n + 2) .tile-icon { background: rgb(var(--fun-sky-rgb) / 0.24); }
.tiles .tile:nth-child(4n + 3) .tile-icon { background: rgb(var(--fun-sun-rgb) / 0.26); }
.tiles .tile:nth-child(4n + 4) .tile-icon { background: rgb(var(--fun-lilac-rgb) / 0.26); }
.tile { transition: transform 0.2s var(--pop); }
.tile:active { transform: scale(0.97); }

/* Date view */
.dcal { margin-top: 4px; padding: 16px 12px 14px; }
.dcal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; }
.dcal-head h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.dnav { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); border: 1px solid var(--line); color: var(--ink); }
.dnav svg { width: 18px; height: 18px; }
.dnav[disabled] { opacity: 0.35; cursor: default; }
.dstrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 16px; }
.dpill {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 0 8px; border: 1px solid transparent; border-radius: 20px;
  background: none; color: var(--muted); transition: background 0.2s, color 0.2s, transform 0.2s var(--pop);
}
.dpill .dp-n { font-size: 11.5px; font-weight: 700; }
.dpill b { font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.dpill.now:not(.sel) { border-color: rgb(var(--accent-rgb) / 0.55); }
.dpill.sel { background: var(--ink); color: var(--ground); transform: translateY(-2px); box-shadow: 0 8px 18px rgb(var(--ink-rgb) / 0.22); }
.dpill.sel b { color: var(--ground); }
.dpill[disabled] { opacity: 0.3; cursor: default; }
.dp-dots { display: flex; gap: 3px; height: 6px; }
.dd { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.dp-dots .dd { margin: 0; }
.dd.t { background: var(--fun-sun); } .dd.p { background: var(--fun-coral); } .dd.m { background: var(--fun-lilac); }
.dlegend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--muted); }
.dday-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 0 10px; }
.dday-head .group-title { margin: 0; }
.dsec { padding: 16px; border-radius: 26px; background: var(--glass), var(--card); border: 1px solid var(--line); box-shadow: var(--rim); }
.dsec-h { display: flex; align-items: center; gap: 10px; }
.dsec-h h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.015em; }
.dsec-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--fun-ink); background: var(--tone, var(--fun-mint)); }
.dsec-ic svg { width: 19px; height: 19px; }
.dsec-ic.t { --tone: var(--fun-sun); } .dsec-ic.p { --tone: var(--fun-coral); } .dsec-ic.m { --tone: var(--fun-lilac); }
.dsec-empty { margin-top: 10px; font-size: 14.5px; color: var(--muted); }
.dsec-big { margin-top: 10px; font-size: 15px; color: var(--muted); }
.dsec-big b { color: var(--ink); font-size: 20px; font-weight: 800; }
.dchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dlist { margin-top: 6px; }
.drow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 0; text-align: left;
  background: none; border: 0; border-top: 1px dashed var(--line); color: var(--ink);
}
.dlist .drow:first-child { border-top: 0; }
.drow-tx { display: flex; flex-direction: column; min-width: 0; }
.drow .meta { font-size: 12.5px; color: var(--muted); }
.drow .name { font-size: 15px; font-weight: 700; line-height: 1.35; }
.drow[aria-disabled="true"] { cursor: default; opacity: 0.75; }
button.drow:active { background: rgb(var(--ink-rgb) / 0.04); }

/* Sign-up panes */
.ob.rg { justify-content: flex-start; gap: 0; padding-top: 8px; }
.rg-top { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.rg-gap { flex: none; width: 42px; height: 42px; }
.rg-prog { flex: 1; display: flex; gap: 6px; }
.rg-prog span { flex: 1; height: 6px; border-radius: 3px; background: var(--soft-2); transition: background 0.3s; }
.rg-prog span.on { background: var(--accent); }
.rg-count { min-width: 34px; text-align: right; font-size: 13px; font-weight: 800; color: var(--muted); }
.rg-pane { display: flex; flex-direction: column; flex: 1; margin-top: 22px; }
.rg-pane[hidden] { display: none; }
.ob.rg h1 { margin-top: 6px; font-size: 32px; }
.ob.rg .rg-pane > p { max-width: 36ch; }
.rg-actions { display: grid; gap: 10px; margin-top: auto; padding-top: 28px; }
.rg-actions .small { text-align: center; color: var(--muted); font-size: 13px; margin: 2px 0 0; max-width: none; }
.rg-go { min-height: 56px; font-size: 17px; }
.rg-temp { margin-top: 14px; }
.ob.rg .acct-msg { margin-top: 14px; font-size: 14px; color: var(--ink); max-width: none; }
.rg-art { position: relative; height: 210px; margin: 6px 0 14px; }
.rg-art img { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 28px; box-shadow: 0 14px 30px rgb(0 0 0 / 0.3); }
.rg-art > span { position: absolute; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: var(--fun-ink); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.13), 0 10px 20px rgb(0 0 0 / 0.2); }
.rg-art > span svg { width: 26px; height: 26px; }
.rg-art .s1 { left: 6%; top: 14%; background: var(--fun-sun); transform: rotate(-10deg); }
.rg-art .s2 { right: 8%; top: 8%; background: var(--fun-mint); transform: rotate(8deg); }
.rg-art .s3 { left: 14%; bottom: 6%; background: var(--fun-lilac); transform: rotate(6deg); }
.rg-art .s4 { right: 10%; bottom: 10%; background: var(--fun-coral); transform: rotate(-6deg); }
@media (prefers-reduced-motion: no-preference) {
  .rg[data-step="0"] .rg-art > span { animation: rg-pop 0.55s var(--pop) both; }
  .rg[data-step="0"] .rg-art .s2 { animation-delay: 0.08s; } .rg[data-step="0"] .rg-art .s3 { animation-delay: 0.16s; } .rg[data-step="0"] .rg-art .s4 { animation-delay: 0.24s; }
  @keyframes rg-pop { from { transform: scale(0.4) rotate(-30deg); opacity: 0; } }
}
.rg-done { margin-top: 4px; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--fun-mint); color: var(--fun-ink); box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.13), 0 12px 24px rgb(0 0 0 / 0.2); }
.rg-done svg { width: 38px; height: 38px; }
.rg-sum { margin-top: 20px; border-radius: 24px; overflow: hidden; background: var(--glass), var(--card); border: 1px solid var(--line); box-shadow: var(--rim); }
.rg-row { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; width: 100%; padding: 14px 16px; text-align: left; background: none; border: 0; border-top: 1px dashed var(--line); color: var(--ink); }
.rg-row:first-child { border-top: 0; }
.rg-row .meta { grid-column: 1; font-size: 12.5px; color: var(--muted); }
.rg-row .name { grid-column: 1; font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.rg-edit { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 13px; font-weight: 800; color: var(--accent); }

@media (min-width: 900px) { .seg { display: none; } }

/* ======================================================================
   UI-R1 redesign (UI Redesign Brief, Nov 2026). Look and layout only; the answer flow is unchanged.
   Flat, calm surfaces; 15 themes; Home with a practice-progress dome, bubbles and an agenda;
   Progress with area bubbles; restyled questions, tab bar and an isolated desktop side panel.
   Right and wrong answers use fixed colors (--ok / --bad), the same in every theme.
   ====================================================================== */
:root {
  --glass: none; --rim: none;
  --ok-bg: #173A28; --ok-ink: #8FDDAE; --bad-bg: #3D211B; --bad-ink: #F5A893;
  --dome-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), inset 0 -8px 16px rgba(0, 0, 0, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.08);
  --shine: rgba(255, 255, 255, 0.14);
  --bub-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root[data-mode="day"] {
  --glass: none; --rim: none;
  --ok-bg: #E3F1E7; --ok-ink: #17613A; --bad-bg: #FBEAE4; --bad-ink: #9C2F1C;
  --dome-shadow: 0 12px 28px rgba(11, 23, 19, 0.18), inset 0 -8px 16px rgba(11, 23, 19, 0.10), inset 0 3px 6px rgba(255, 255, 255, 0.9);
  --shine: rgba(255, 255, 255, 0.6);
  --bub-shadow: 0 6px 18px rgba(11, 23, 19, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
body::before { display: none; }
.app { padding-left: 16px; padding-right: 16px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.t-mint { background: var(--mint); }
.t-sand { background: var(--sand); }
.t-lav { background: var(--lav); }
.kicker { font-size: 13px; font-weight: 700; color: var(--gold); margin: 0; }

/* buttons: flat, 12px corners */
.btn { border-radius: 12px; min-height: 48px; font-weight: 700; background: var(--accent); color: var(--on-accent); box-shadow: none; }
.btn.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--brand-line); box-shadow: none; }
.btn.text { background: none; color: var(--accent); }
:root[data-mode="night"] .btn.text { color: var(--gold); }
.card { border-radius: 16px; }
.pill.ready { background: rgb(var(--accent-rgb) / 0.14); color: var(--ink); border-color: rgb(var(--accent-rgb) / 0.3); }

/* header */
.top { padding: 8px 0 4px; }
.top .hello { font-size: 24px; letter-spacing: -0.01em; line-height: 1.25; margin-top: 0; }
.top .date { font-size: 14px; font-weight: 500; margin-top: 4px; }
.avatar { width: 44px; height: 44px; background: var(--card); border: 1px solid var(--border); color: var(--ink); font-size: 16px; }

/* ---------- Home ---------- */
.home-notices { margin-bottom: 8px; }
.home-grid { display: flex; flex-direction: column; gap: 20px; margin-top: 16px; }
.home-top { display: flex; flex-direction: column; gap: 20px; }
.home-banner { border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.home-banner h2 { font-size: 18px; font-weight: 800; line-height: 1.3; }
.home-banner p { color: var(--muted); font-size: 14px; }
.hb-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; padding-top: 8px; }
.home-summary { border-radius: 24px; padding: 24px 16px 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dome-btn { background: none; border: 0; padding: 0; border-radius: 50%; color: inherit; }
.dome {
  --d: 160px; position: relative; display: block; width: var(--d); height: var(--d); border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 28%, var(--ring-center) 0%, var(--ring-center) 45%, var(--dome-rim) 100%);
  box-shadow: var(--dome-shadow);
}
.dome svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dome-pie { fill: var(--accent); fill-opacity: var(--pie-a); }
.dome-shine { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse 46% 34% at 34% 22%, var(--shine), rgba(255, 255, 255, 0) 100%); }
.dome-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink); }
.dome-text b { font-size: calc(var(--d) * 0.2); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dome-text span { font-size: 12px; font-weight: 700; margin-top: 2px; }
.hs-side { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hs-note { font-size: 13px; line-height: 1.45; color: var(--muted); text-align: center; max-width: 36ch; }
.hs-vals { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.hs-val { flex: 1 1 96px; background: var(--card); border-radius: 16px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hs-val b { font-size: 20px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.hs-val span { font-size: 12px; line-height: 1.3; color: var(--muted); margin-top: 2px; }
.home-go { min-height: 52px; font-size: 16px; }
.bubs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 4px 0 0; }
.bub { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 0; background: none; border: 0; color: var(--ink); }
.bub-dot {
  position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border); color: var(--accent); box-shadow: var(--bub-shadow); transition: transform 0.15s ease;
}
:root[data-mode="night"] .bub-dot { color: var(--gold); }
.bub-dot svg { width: 22px; height: 22px; }
.bub-badge {
  position: absolute; top: -4px; right: -10px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--accent); color: var(--on-accent); font: 700 11px/22px var(--font); font-style: normal; text-align: center;
}
.bub-label { font-size: 12px; font-weight: 600; line-height: 1.3; text-align: center; }
@media (hover: hover) { .bub:hover .bub-dot { transform: translateY(-2px); } }
.bub:active .bub-dot { transform: none; }
.home-sheet {
  margin: 4px -16px 0; padding: 24px 16px 32px; background: var(--card); border-top: 1px solid var(--border);
  border-radius: 28px 28px 0 0; display: flex; flex-direction: column; gap: 28px;
}
.home-study, .home-side { display: flex; flex-direction: column; gap: 28px; }
.home-side { gap: 16px; }
.home-take { border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.home-take h2 { font-size: 20px; font-weight: 800; line-height: 1.3; }
.home-take p:not(.kicker) { font-size: 15px; color: var(--muted); }
.home-take .actions { margin-top: 8px; }
.home-resume .group-title, .home-study .group-title { margin: 0 0 12px; font-size: 20px; }
.hgroup { background: var(--raised); border-radius: 16px; padding: 4px 0; }
.hgroup.pad { padding: 16px; }
.hgroup.pad .actions { margin-top: 10px; }
.hrow { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: none; border: 0; border-top: 1px solid var(--border); color: var(--ink); text-align: left; }
.hrow:first-child { border-top: 0; }
.hrow > svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.hrow-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hrow .name, .ag-tx .name, .todo-tx .name { font-size: 16px; font-weight: 700; line-height: 1.3; }
.hrow .meta, .ag-tx .meta, .todo-tx .meta, .hgroup .meta { font-size: 13px; color: var(--muted); }
.hmeter { display: block; height: 6px; border-radius: 3px; background: var(--ring-track); margin-top: 6px; overflow: hidden; }
.hmeter span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.ag-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ag-head h2 { font-size: 20px; font-weight: 800; }
.ag-chip { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--sand); color: var(--gold); }
.agroup { border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.agroup h3 { font-size: 16px; font-weight: 700; }
.ag-sub { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.ag-empty { font-size: 15px; color: var(--muted); }
.ag-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid rgb(var(--ink-rgb) / 0.09); background: none; color: var(--ink); text-align: left; }
.ag-sub + .ag-row, .ag-sub + .todo { border-top: 0; }
.ag-when { flex: none; width: 78px; text-align: center; font-size: 12px; font-weight: 700; padding: 4px 6px; border-radius: 8px; background: var(--card); color: var(--ink); }
.ag-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ag-state { flex: none; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--card); color: var(--muted); border: 1px solid var(--card); }
.ag-state.hot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ag-state.done { background: transparent; border-color: var(--border); }
.todo { display: flex; align-items: center; gap: 8px; border-top: 1px solid rgb(var(--ink-rgb) / 0.09); }
.todo-box { flex: none; width: 44px; height: 44px; margin-left: -10px; padding: 0; background: none; border: 0; display: grid; place-items: center; }
.todo-box span { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--muted); background: var(--card); display: grid; place-items: center; color: var(--on-accent); }
.todo-box svg { width: 14px; height: 14px; }
.todo.done .todo-box span { background: var(--accent); border-color: var(--accent); }
.todo-tx { flex: 1; min-width: 0; padding: 10px 0; background: none; border: 0; text-align: left; color: var(--ink); display: flex; flex-direction: column; }
.todo.done .todo-tx .name { text-decoration: line-through; color: var(--muted); }
.ag-add { align-self: flex-start; margin-top: 8px; min-height: 44px; }
.ag-add svg { width: 18px; height: 18px; }
.music-row { display: flex; flex-direction: column; gap: 6px; }

/* ---------- Progress ---------- */
.prog-hero { background: var(--hero); color: #FFFFFF; border-radius: 28px; padding: 20px 16px 56px; display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.ph-title { font-size: 24px; font-weight: 800; line-height: 1.25; color: #FFFFFF; }
.pseg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, 0.1); }
.pseg button { min-height: 44px; border-radius: 10px; border: 0; background: transparent; color: #FFFFFF; font-weight: 600; font-size: 15px; }
.pseg button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.22); font-weight: 800; }
.ph-cap { font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, 0.82); }
.pbubs { position: relative; width: 100%; max-width: 420px; margin: 0 auto; }
.pbub {
  position: absolute; aspect-ratio: 1; padding: 0; border-radius: 50%; overflow: hidden; color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05) 62%);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.3), inset 0 -12px 20px rgba(0, 0, 0, 0.3), 0 14px 28px rgba(0, 0, 0, 0.35);
}
.pbub[aria-disabled="true"] { cursor: default; }
.pbub > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pbub > svg path { fill: var(--arc); fill-opacity: 0.26; }
.pbub-shine { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse 40% 26% at 32% 18%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 100%); }
.pbub-tx { position: relative; height: 100%; padding: 10%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.pbub-ic { display: block; } .pbub-ic svg { width: 20px; height: 20px; display: block; }
.pbub-name { font-size: 11px; font-weight: 600; line-height: 1.25; }
.pbub b { font-size: 15px; font-weight: 800; line-height: 1.2; }
.pbub-meta { font-size: 11px; line-height: 1.25; }
.pbub.lg .pbub-name, .pbub.xl .pbub-name { font-size: 12px; }
.pbub.lg b { font-size: 17px; }
.pbub.xl b { font-size: 20px; }
@media (hover: hover) { .pbub[data-action]:hover { border-color: rgba(255, 255, 255, 0.5); } }
.prog-sheet { position: relative; margin-top: -28px; background: var(--card); border-radius: 28px; padding: 24px 16px; }
.prog-sheet .group-title { margin-top: 24px; }
.prog-sum { display: flex; flex-direction: column; gap: 12px; }
.ps-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ps-label { font-size: 20px; font-weight: 800; }
.ps-big { font-size: 40px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ps-head .pill { margin-bottom: 8px; }
.ps-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ps-tiles div { background: var(--raised); border-radius: 16px; padding: 14px; }
.ps-tiles span { display: block; font-size: 13px; color: var(--muted); }
.ps-tiles b { font-size: 20px; font-weight: 800; }
.stat { background: var(--raised); border: 0; border-radius: 16px; }
.stat b { font-size: 24px; }

/* ---------- Questions: one neutral reading surface, explicit markers, fixed right/wrong colors ---------- */
.stem { font-size: 17px; line-height: 1.55; font-weight: 600; letter-spacing: 0; }
.choices { gap: 16px; }
.choice { border-radius: 12px; background: var(--card); border: 1px solid var(--brand-line); padding: 16px; gap: 12px; }
.choice .letter { width: 28px; height: 28px; border: 2px solid var(--brand-line); color: var(--ink); }
.choice.is-selected { border: 2px solid var(--accent); background: var(--mint); }
.choice.is-selected .letter { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.choice.is-right { border: 2px solid var(--ok-ink); background: var(--ok-bg); box-shadow: none; }
.choice.is-right .letter { background: var(--ok-ink); border-color: var(--ok-ink); }
.choice.is-right .ck { stroke: var(--ok-bg); }
.choice.is-right .c-tag { background: var(--ok-ink); color: var(--ok-bg); }
.choice.is-wrong { border: 2px solid var(--bad-ink); background: var(--bad-bg); }
.choice.is-wrong .letter { border-color: var(--bad-ink); color: var(--bad-ink); }
.choice.is-wrong .c-tag { background: var(--bad-ink); color: var(--bad-bg); }
.choice.is-dim { opacity: 1; color: var(--muted); }
.insight { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 18px; }
.insight.good { background: var(--card); }
.insight::before { display: none; }
.insight.good .in-label { color: var(--ok-ink); }
.in-whynot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.wn-row { display: flex; gap: 10px; margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--soft-ink); }
.wn-row b { flex: none; width: 18px; color: var(--ink); }

/* ---------- Appearance ---------- */
.seg2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: var(--raised); }
.seg2-btn { min-height: 44px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); font-weight: 600; }
.seg2-btn[aria-pressed="true"] { background: var(--card); color: var(--ink); font-weight: 800; box-shadow: 0 2px 8px rgb(var(--ink-rgb) / 0.12); }
.swatches { gap: 10px; margin-top: 12px; }
.swatch { position: relative; min-height: 100px; border-radius: 16px; border: 1px solid var(--border); background: var(--card); padding: 12px 6px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ink); }
.swatch[aria-pressed="true"] { border: 2px solid var(--accent); background: var(--card); }
.sw-dots i { width: 28px; height: 28px; box-shadow: 0 0 0 1px var(--border); }
.sw-dots i + i { margin-left: -8px; }
.sw-name { font-size: 12px; font-weight: 600; text-align: center; }
.swatch[aria-pressed="true"] .sw-name { font-weight: 800; }
.sw-check { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; }
.sw-check svg { width: 12px; height: 12px; }

/* ---------- Tab bar (phones): one calm full-width bar; side panel on desktop ---------- */
.tabs { padding: 0; }
.tabs::before { display: none; }
.dock { max-width: none; gap: 8px; }
.tabs .inner {
  border-radius: 0; background: var(--card); border: 0; border-top: 1px solid var(--border); box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
}
.tabs .inner button { border-radius: 14px; min-height: 52px; font-size: 12px; font-weight: 500; color: var(--muted); }
.tabs .inner button[aria-current="page"] { background: var(--raised); color: var(--ink); font-weight: 700; border-color: transparent; box-shadow: none; }
.tabs .inner button[aria-current="page"] svg { color: var(--accent); }
:root[data-mode="night"] .tabs .inner button[aria-current="page"] svg { color: var(--gold); }
.dock-pill { background: var(--card); border: 1px solid var(--border); box-shadow: 0 6px 18px rgb(var(--ink-rgb) / 0.12); backdrop-filter: none; -webkit-backdrop-filter: none; }
.dock-profile { display: none; }

@media (min-width: 700px) {
  .stem { font-size: 18px; }
  .home-sheet { margin: 4px 0 0; border-radius: 24px; border: 1px solid var(--border); padding: 24px; }
}
@media (min-width: 1024px) and (min-height: 560px) {
  body[data-shell="tabs"] { padding-left: 272px; }
  .tabs { width: 272px; padding: 24px 0 24px 24px; }
  .dock { height: 100%; background: var(--card); border: 1px solid var(--border); border-radius: 24px; padding: 20px; gap: 16px; }
  .rail-brand { padding: 4px; margin: 0; font-size: 17px; font-weight: 800; color: var(--ink); }
  .tabs .inner { background: none; border: 0; padding: 0; gap: 6px; }
  .tabs .inner button { position: relative; min-height: 48px; padding: 0 14px; font-size: 14px; border-radius: 14px; }
  .tabs .inner button svg { width: 20px; height: 20px; }
  .tabs .inner button[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--accent); }
  .dock-pill { order: 3; margin-top: auto; }
  .dock-profile {
    order: 4; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border-radius: 14px;
    background: none; border: 0; border-top: 1px solid var(--border); color: var(--ink); text-align: left;
  }
  .dock-profile { margin-top: auto; }
  .dock-pill ~ .dock-profile { margin-top: 0; }
  .dock-profile:hover { background: var(--raised); }
  .dp-av { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--raised); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
  .dp-tx { display: flex; flex-direction: column; line-height: 1.3; }
  .dp-tx .name { font-size: 14px; font-weight: 700; }
  .dp-tx .meta { font-size: 12px; color: var(--muted); }
  .tab-top, .home .top .avatar { display: none; }
  body[data-shell="tabs"] .toast { left: calc(50% + 136px); }
  .app { max-width: 1200px; padding: 28px 24px 64px; }
  .top .hello { font-size: 28px; }
  .page-title { font-size: 28px; }
  .home-summary { flex-direction: row; align-items: center; padding: 24px; gap: 28px; }
  .home-summary .dome { --d: 200px; }
  .hs-side { align-items: flex-start; }
  .hs-note { text-align: left; font-size: 14px; max-width: 60ch; }
  .btn.block.home-go { width: auto; align-self: flex-start; padding: 12px 28px; }
  .bubs { max-width: 440px; }
  .home-study { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .home-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .home-side .ag-head { grid-column: 1 / -1; }
  .prog-hero { padding: 24px 24px 56px; }
  .prog-sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; padding: 24px; align-items: start; }
  .prog-sheet .ps-col > .group-title:first-child { margin-top: 0; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) and (min-height: 560px) {
  .agroup { min-width: 0; }
  .home-side .ag-row { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 8px; align-items: center; }
  .home-side .ag-when { width: auto; grid-column: 1; grid-row: 1; }
  .home-side .ag-state { grid-column: 3; grid-row: 1; }
  .home-side .ag-tx { grid-column: 1 / -1; grid-row: 2; }
  .pbubs { max-width: 500px; }
  .home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
  .home-top { grid-column: 1; }
  .home-sheet { display: contents; }
  .home-study { grid-column: 1; background: var(--card); border: 1px solid var(--border); border-radius: 24px; padding: 24px; }
  .home-side { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 24px; padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { .bub-dot { transition: none; } }

/* UI-R2: six Home bubbles, one overall-progress bubble */
.bubs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
.op-wrap { position: relative; width: 220px; aspect-ratio: 1; margin: 6px auto 0; }
.pbub.op { position: absolute; inset: 0; width: 100%; }
.pbub.op .pbub-name { font-size: 14px; }
.pbub.op b { font-size: 44px; letter-spacing: -0.02em; }
.pbub.op .pbub-meta { font-size: 13px; font-weight: 600; }
.op-cap { text-align: center; max-width: 30ch; margin: 0 auto; }
.op-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.op-list li { background: var(--raised); border-radius: 16px; padding: 14px; font-size: 14px; line-height: 1.5; color: var(--soft-ink); }
.op-list b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 2px; }
.sug > svg:last-child { width: 18px; height: 18px; color: var(--muted); flex: none; }
@media (min-width: 1024px) { .op-wrap { width: 260px; } }
@media (min-width: 1024px) { .bubs { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 640px; } }
:root[data-palette="c-sage"] { --ground: #0A1510; --ground-rgb: 10 21 16; --card: #11221B; --card-rgb: 17 34 27; --ink: #F3F6F5; --ink-rgb: 243 246 245; --muted: #B6C3BE; --soft-ink: #D8DFDC; --accent: #55D6A0; --accent-rgb: 85 214 160; --accent-hi: #7EE0B7; --accent-lo: #2EC083; --on-accent: #0D1C16; --gold: #8FB79A; --gold-rgb: 143 183 154; --gold-hi: #8FB79A; --good: #55D6A0; --good-rgb: 85 214 160; --hero: #142920; --hero-rgb: 20 41 32; --hero-hi: #1E3E31; --hero-lo: #0D1C16; --raised: #182F26; --border: #345045; --brand-line: #438C6E; --mint: #183428; --sand: #1E3128; --lav: #182D24; --ring-track: #283E35; --ring-center: #182F26; --dome-rim: #0A1510; --arc: #8FB79A; --arc-rgb: 143 183 154; --pie-a: 0.34; --aura-rgb: 143 183 154; }
:root[data-mode="day"][data-palette="c-sage"] { --ground: #F6F9F8; --ground-rgb: 246 249 248; --card: #FFFFFF; --card-rgb: 255 255 255; --ink: #15231D; --ink-rgb: 21 35 29; --muted: #556860; --soft-ink: #36453E; --accent: #1D784F; --accent-rgb: 29 120 79; --accent-hi: #29A96F; --accent-lo: #186341; --on-accent: #FFFFFF; --gold: #4B7456; --gold-rgb: 75 116 86; --gold-hi: #B7C7BB; --good: #1D784F; --good-rgb: 29 120 79; --hero: #142920; --hero-rgb: 20 41 32; --hero-hi: #1E3E31; --hero-lo: #0D1C16; --raised: #EEF4F1; --border: #D9E3DF; --brand-line: #97BEAD; --mint: #E4F8F0; --sand: #EBF2ED; --lav: #EEF8F3; --ring-track: #D6E1DC; --ring-center: #F6F9F8; --dome-rim: #D6E1DC; --arc: #8FB79A; --arc-rgb: 143 183 154; --pie-a: 0.45; --aura-rgb: 29 120 79; }
:root[data-mode="day"][data-palette="c-sage"] :is(.hero, .gauge-card, .hook) { --ground: #0A1510; --ground-rgb: 10 21 16; --card: #11221B; --card-rgb: 17 34 27; --ink: #F3F6F5; --ink-rgb: 243 246 245; --muted: #B6C3BE; --soft-ink: #D8DFDC; --accent: #55D6A0; --accent-rgb: 85 214 160; --accent-hi: #7EE0B7; --accent-lo: #2EC083; --on-accent: #0D1C16; --gold: #8FB79A; --gold-rgb: 143 183 154; --gold-hi: #8FB79A; --good: #55D6A0; --good-rgb: 85 214 160; --hero: #142920; --hero-rgb: 20 41 32; --hero-hi: #1E3E31; --hero-lo: #0D1C16; --raised: #182F26; --border: #345045; --brand-line: #438C6E; --mint: #183428; --sand: #1E3128; --lav: #182D24; --ring-track: #283E35; --ring-center: #182F26; --dome-rim: #0A1510; --arc: #8FB79A; --arc-rgb: 143 183 154; --pie-a: 0.34; --aura-rgb: 143 183 154; color-scheme: dark; }
:root[data-palette="c-coral"] { --ground: #0A1514; --ground-rgb: 10 21 20; --card: #112221; --card-rgb: 17 34 33; --ink: #F3F6F6; --ink-rgb: 243 246 246; --muted: #B6C3C3; --soft-ink: #D8DFDE; --accent: #45CBC3; --accent-rgb: 69 203 195; --accent-hi: #6DD6D0; --accent-lo: #2EA59E; --on-accent: #0D1C1B; --gold: #F0937D; --gold-rgb: 240 147 125; --gold-hi: #F0937D; --good: #45CBC3; --good-rgb: 69 203 195; --hero: #142928; --hero-rgb: 20 41 40; --hero-hi: #1E3E3C; --hero-lo: #0D1C1B; --raised: #182F2E; --border: #34504F; --brand-line: #3C8783; --mint: #163331; --sand: #272D2A; --lav: #1B2C2A; --ring-track: #283E3C; --ring-center: #182F2E; --dome-rim: #0A1514; --arc: #F0937D; --arc-rgb: 240 147 125; --pie-a: 0.34; --aura-rgb: 240 147 125; }
:root[data-mode="day"][data-palette="c-coral"] { --ground: #F6F9F9; --ground-rgb: 246 249 249; --card: #FFFFFF; --card-rgb: 255 255 255; --ink: #152322; --ink-rgb: 21 35 34; --muted: #556867; --soft-ink: #364544; --accent: #23756D; --accent-rgb: 35 117 109; --accent-hi: #31A499; --accent-lo: #1D615B; --on-accent: #FFFFFF; --gold: #C13B1D; --gold-rgb: 193 59 29; --gold-hi: #E6B1A5; --good: #23756D; --good-rgb: 35 117 109; --hero: #142928; --hero-rgb: 20 41 40; --hero-hi: #1E3E3C; --hero-lo: #0D1C1B; --raised: #EEF4F4; --border: #D9E3E2; --brand-line: #99BCB9; --mint: #E1F7F5; --sand: #FCECE8; --lav: #F3F5F4; --ring-track: #D6E1E0; --ring-center: #F6F9F9; --dome-rim: #D6E1E0; --arc: #F0937D; --arc-rgb: 240 147 125; --pie-a: 0.45; --aura-rgb: 35 117 109; }
:root[data-mode="day"][data-palette="c-coral"] :is(.hero, .gauge-card, .hook) { --ground: #0A1514; --ground-rgb: 10 21 20; --card: #112221; --card-rgb: 17 34 33; --ink: #F3F6F6; --ink-rgb: 243 246 246; --muted: #B6C3C3; --soft-ink: #D8DFDE; --accent: #45CBC3; --accent-rgb: 69 203 195; --accent-hi: #6DD6D0; --accent-lo: #2EA59E; --on-accent: #0D1C1B; --gold: #F0937D; --gold-rgb: 240 147 125; --gold-hi: #F0937D; --good: #45CBC3; --good-rgb: 69 203 195; --hero: #142928; --hero-rgb: 20 41 40; --hero-hi: #1E3E3C; --hero-lo: #0D1C1B; --raised: #182F2E; --border: #34504F; --brand-line: #3C8783; --mint: #163331; --sand: #272D2A; --lav: #1B2C2A; --ring-track: #283E3C; --ring-center: #182F2E; --dome-rim: #0A1514; --arc: #F0937D; --arc-rgb: 240 147 125; --pie-a: 0.34; --aura-rgb: 240 147 125; color-scheme: dark; }
:root[data-palette="c-charcoal"] { --ground: #0F0F10; --ground-rgb: 15 15 16; --card: #18191B; --card-rgb: 24 25 27; --ink: #F3F4F6; --ink-rgb: 243 244 246; --muted: #B6BAC3; --soft-ink: #D8DADF; --accent: #D9DAD7; --accent-rgb: 217 218 215; --accent-hi: #E6E6E5; --accent-lo: #BBBDB7; --on-accent: #131415; --gold: #96989A; --gold-rgb: 150 152 154; --gold-hi: #96989A; --good: #D9DAD7; --good-rgb: 217 218 215; --hero: #1D1E20; --hero-rgb: 29 30 32; --hero-hi: #2C2D30; --hero-lo: #131415; --raised: #222325; --border: #404244; --brand-line: #858686; --mint: #2B2C2E; --sand: #232527; --lav: #232426; --ring-track: #323334; --ring-center: #222325; --dome-rim: #0F0F10; --arc: #D9DAD7; --arc-rgb: 217 218 215; --pie-a: 0.34; --aura-rgb: 217 218 215; }
:root[data-mode="day"][data-palette="c-charcoal"] { --ground: #F7F7F8; --ground-rgb: 247 247 248; --card: #FFFFFF; --card-rgb: 255 255 255; --ink: #151A23; --ink-rgb: 21 26 35; --muted: #555B68; --soft-ink: #363B45; --accent: #4A4D52; --accent-rgb: 74 77 82; --accent-hi: #676B72; --accent-lo: #3E4045; --on-accent: #FFFFFF; --gold: #66666A; --gold-rgb: 102 102 106; --gold-hi: #C2C2C3; --good: #4A4D52; --good-rgb: 74 77 82; --hero: #1D1E20; --hero-rgb: 29 30 32; --hero-hi: #2C2D30; --hero-lo: #131415; --raised: #F1F1F1; --border: #DDDEDE; --brand-line: #AAABAD; --mint: #F9F9F9; --sand: #EAEAEB; --lav: #F6F6F6; --ring-track: #DBDBDC; --ring-center: #F7F7F7; --dome-rim: #DBDBDC; --arc: #D9DAD7; --arc-rgb: 217 218 215; --pie-a: 0.45; --aura-rgb: 74 77 82; }
:root[data-mode="day"][data-palette="c-charcoal"] :is(.hero, .gauge-card, .hook) { --ground: #0F0F10; --ground-rgb: 15 15 16; --card: #18191B; --card-rgb: 24 25 27; --ink: #F3F4F6; --ink-rgb: 243 244 246; --muted: #B6BAC3; --soft-ink: #D8DADF; --accent: #D9DAD7; --accent-rgb: 217 218 215; --accent-hi: #E6E6E5; --accent-lo: #BBBDB7; --on-accent: #131415; --gold: #96989A; --gold-rgb: 150 152 154; --gold-hi: #96989A; --good: #D9DAD7; --good-rgb: 217 218 215; --hero: #1D1E20; --hero-rgb: 29 30 32; --hero-hi: #2C2D30; --hero-lo: #131415; --raised: #222325; --border: #404244; --brand-line: #858686; --mint: #2B2C2E; --sand: #232527; --lav: #232426; --ring-track: #323334; --ring-center: #222325; --dome-rim: #0F0F10; --arc: #D9DAD7; --arc-rgb: 217 218 215; --pie-a: 0.34; --aura-rgb: 217 218 215; color-scheme: dark; }
:root[data-palette="c-crimson"] { --ground: #150A0B; --ground-rgb: 21 10 11; --card: #221113; --card-rgb: 34 17 19; --ink: #F6F3F4; --ink-rgb: 246 243 244; --muted: #C3B6B8; --soft-ink: #DFD8D9; --accent: #E2707F; --accent-rgb: 226 112 127; --accent-hi: #EB9AA5; --accent-lo: #D83D51; --on-accent: #1C0D0F; --gold: #E6BE4E; --gold-rgb: 230 190 78; --gold-hi: #E6BE4E; --good: #E2707F; --good-rgb: 226 112 127; --hero: #291417; --hero-rgb: 41 20 23; --hero-hi: #3E1E22; --hero-lo: #1C0D0F; --raised: #2F181B; --border: #503438; --brand-line: #924F58; --mint: #351A1E; --sand: #362219; --lav: #301A19; --ring-track: #3E282B; --ring-center: #2F181B; --dome-rim: #150A0B; --arc: #E6BE4E; --arc-rgb: 230 190 78; --pie-a: 0.34; --aura-rgb: 230 190 78; }
:root[data-mode="day"][data-palette="c-crimson"] { --ground: #F9F6F6; --ground-rgb: 249 246 246; --card: #FFFFFF; --card-rgb: 255 255 255; --ink: #231517; --ink-rgb: 35 21 23; --muted: #685557; --soft-ink: #453638; --accent: #C82B3A; --accent-rgb: 200 43 58; --accent-hi: #DB5662; --accent-lo: #B32634; --on-accent: #FFFFFF; --gold: #7E620E; --gold-rgb: 126 98 14; --gold-hi: #CBC09F; --good: #C82B3A; --good-rgb: 200 43 58; --hero: #291417; --hero-rgb: 41 20 23; --hero-hi: #3E1E22; --hero-lo: #1C0D0F; --raised: #F4EEEF; --border: #E3D9DA; --brand-line: #DA9CA2; --mint: #FAE8EB; --sand: #FBF3DF; --lav: #FCF3ED; --ring-track: #E1D6D7; --ring-center: #F9F6F6; --dome-rim: #E1D6D7; --arc: #E6BE4E; --arc-rgb: 230 190 78; --pie-a: 0.45; --aura-rgb: 200 43 58; }
:root[data-mode="day"][data-palette="c-crimson"] :is(.hero, .gauge-card, .hook) { --ground: #150A0B; --ground-rgb: 21 10 11; --card: #221113; --card-rgb: 34 17 19; --ink: #F6F3F4; --ink-rgb: 246 243 244; --muted: #C3B6B8; --soft-ink: #DFD8D9; --accent: #E2707F; --accent-rgb: 226 112 127; --accent-hi: #EB9AA5; --accent-lo: #D83D51; --on-accent: #1C0D0F; --gold: #E6BE4E; --gold-rgb: 230 190 78; --gold-hi: #E6BE4E; --good: #E2707F; --good-rgb: 226 112 127; --hero: #291417; --hero-rgb: 41 20 23; --hero-hi: #3E1E22; --hero-lo: #1C0D0F; --raised: #2F181B; --border: #503438; --brand-line: #924F58; --mint: #351A1E; --sand: #362219; --lav: #301A19; --ring-track: #3E282B; --ring-center: #2F181B; --dome-rim: #150A0B; --arc: #E6BE4E; --arc-rgb: 230 190 78; --pie-a: 0.34; --aura-rgb: 230 190 78; color-scheme: dark; }
:root[data-palette="c-purple"] { --ground: #0D0A15; --ground-rgb: 13 10 21; --card: #161122; --card-rgb: 22 17 34; --ink: #F4F3F6; --ink-rgb: 244 243 246; --muted: #BAB6C3; --soft-ink: #DAD8DF; --accent: #B79BF2; --accent-rgb: 183 155 242; --accent-hi: #D7C8F8; --accent-lo: #9065EB; --on-accent: #120D1C; --gold: #D6B157; --gold-rgb: 214 177 87; --gold-hi: #D6B157; --good: #B79BF2; --good-rgb: 183 155 242; --hero: #1B1429; --hero-rgb: 27 20 41; --hero-hi: #281E3E; --hero-lo: #120D1C; --raised: #20182F; --border: #3D3450; --brand-line: #746299; --mint: #261F37; --sand: #292127; --lav: #221B2B; --ring-track: #2F283E; --ring-center: #20182F; --dome-rim: #0D0A15; --arc: #D6B157; --arc-rgb: 214 177 87; --pie-a: 0.34; --aura-rgb: 214 177 87; }
:root[data-mode="day"][data-palette="c-purple"] { --ground: #F7F6F9; --ground-rgb: 247 246 249; --card: #FFFFFF; --card-rgb: 255 255 255; --ink: #1A1523; --ink-rgb: 26 21 35; --muted: #5B5568; --soft-ink: #3B3645; --accent: #7B4ADE; --accent-rgb: 123 74 222; --accent-hi: #A17EE7; --accent-lo: #6B34DA; --on-accent: #FFFFFF; --gold: #82661F; --gold-rgb: 130 102 31; --gold-hi: #CDC2A5; --good: #7B4ADE; --good-rgb: 123 74 222; --hero: #1B1429; --hero-rgb: 27 20 41; --hero-hi: #281E3E; --hero-lo: #120D1C; --raised: #F0EEF4; --border: #DCD9E3; --brand-line: #BAA7E1; --mint: #F3EFFD; --sand: #F8F1E1; --lav: #F8F4F4; --ring-track: #D9D6E1; --ring-center: #F7F6F9; --dome-rim: #D9D6E1; --arc: #D6B157; --arc-rgb: 214 177 87; --pie-a: 0.45; --aura-rgb: 123 74 222; }
:root[data-mode="day"][data-palette="c-purple"] :is(.hero, .gauge-card, .hook) { --ground: #0D0A15; --ground-rgb: 13 10 21; --card: #161122; --card-rgb: 22 17 34; --ink: #F4F3F6; --ink-rgb: 244 243 246; --muted: #BAB6C3; --soft-ink: #DAD8DF; --accent: #B79BF2; --accent-rgb: 183 155 242; --accent-hi: #D7C8F8; --accent-lo: #9065EB; --on-accent: #120D1C; --gold: #D6B157; --gold-rgb: 214 177 87; --gold-hi: #D6B157; --good: #B79BF2; --good-rgb: 183 155 242; --hero: #1B1429; --hero-rgb: 27 20 41; --hero-hi: #281E3E; --hero-lo: #120D1C; --raised: #20182F; --border: #3D3450; --brand-line: #746299; --mint: #261F37; --sand: #292127; --lav: #221B2B; --ring-track: #2F283E; --ring-center: #20182F; --dome-rim: #0D0A15; --arc: #D6B157; --arc-rgb: 214 177 87; --pie-a: 0.34; --aura-rgb: 214 177 87; color-scheme: dark; }
:root[data-palette="c-blue"] { --ground: #0A1115; --ground-rgb: 10 17 21; --card: #111D22; --card-rgb: 17 29 34; --ink: #F3F5F6; --ink-rgb: 243 245 246; --muted: #B6BFC3; --soft-ink: #D8DDDF; --accent: #52B9EC; --accent-rgb: 82 185 236; --accent-hi: #80CCF1; --accent-lo: #1BA3E6; --on-accent: #0D171C; --gold: #F49E48; --gold-rgb: 244 158 72; --gold-hi: #F49E48; --good: #52B9EC; --good-rgb: 82 185 236; --hero: #142229; --hero-rgb: 20 34 41; --hero-hi: #1E333E; --hero-lo: #0D171C; --raised: #18272F; --border: #344750; --brand-line: #427A96; --mint: #182D36; --sand: #282A26; --lav: #1B272A; --ring-track: #28373E; --ring-center: #18272F; --dome-rim: #0A1115; --arc: #F49E48; --arc-rgb: 244 158 72; --pie-a: 0.34; --aura-rgb: 244 158 72; }
:root[data-mode="day"][data-palette="c-blue"] { --ground: #F6F8F9; --ground-rgb: 246 248 249; --card: #FFFFFF; --card-rgb: 255 255 255; --ink: #151E23; --ink-rgb: 21 30 35; --muted: #556268; --soft-ink: #364045; --accent: #107295; --accent-rgb: 16 114 149; --accent-hi: #169CCC; --accent-lo: #0E607E; --on-accent: #FFFFFF; --gold: #A5560B; --gold-rgb: 165 86 11; --gold-hi: #DBBB9D; --good: #107295; --good-rgb: 16 114 149; --hero: #142229; --hero-rgb: 20 34 41; --hero-hi: #1E333E; --hero-lo: #0D171C; --raised: #EEF2F4; --border: #D9E0E3; --brand-line: #93BAC8; --mint: #E3F4FC; --sand: #FDEEDE; --lav: #F4F5F3; --ring-track: #D6DDE1; --ring-center: #F6F8F9; --dome-rim: #D6DDE1; --arc: #F49E48; --arc-rgb: 244 158 72; --pie-a: 0.45; --aura-rgb: 16 114 149; }
:root[data-mode="day"][data-palette="c-blue"] :is(.hero, .gauge-card, .hook) { --ground: #0A1115; --ground-rgb: 10 17 21; --card: #111D22; --card-rgb: 17 29 34; --ink: #F3F5F6; --ink-rgb: 243 245 246; --muted: #B6BFC3; --soft-ink: #D8DDDF; --accent: #52B9EC; --accent-rgb: 82 185 236; --accent-hi: #80CCF1; --accent-lo: #1BA3E6; --on-accent: #0D171C; --gold: #F49E48; --gold-rgb: 244 158 72; --gold-hi: #F49E48; --good: #52B9EC; --good-rgb: 82 185 236; --hero: #142229; --hero-rgb: 20 34 41; --hero-hi: #1E333E; --hero-lo: #0D171C; --raised: #18272F; --border: #344750; --brand-line: #427A96; --mint: #182D36; --sand: #282A26; --lav: #1B272A; --ring-track: #28373E; --ring-center: #18272F; --dome-rim: #0A1115; --arc: #F49E48; --arc-rgb: 244 158 72; --pie-a: 0.34; --aura-rgb: 244 158 72; color-scheme: dark; }

/* ---------- UI-R2 ---------- */
/* Today's takes: all three slots, only live ones open */
.tk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tk-head .btn.text { min-height: 36px; padding: 0 4px; }
.tk-list { display: flex; flex-direction: column; margin-top: 6px; }
.tk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 10px 0; border: 0; border-top: 1px solid var(--border); background: none; color: var(--ink); text-align: left; width: 100%; }
.tk-row:first-child { border-top: 0; }
.tk-tx { display: flex; flex-direction: column; min-width: 0; }
.tk-tx .meta { font-size: 13px; color: var(--muted); }
.tk-tx .name { font-weight: 700; font-size: 16px; line-height: 1.35; }
.tk-row.is-soon { cursor: default; }
.tk-row.is-soon .name { color: var(--muted); font-weight: 600; }
.tk-foot { margin-top: 6px; }
.row.is-soon { cursor: default; } .row.is-soon .name { color: var(--muted); }
/* Personal bests */
.sb-intro { margin-top: 4px; }
.sb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.sb-card { background: var(--raised); border-radius: 16px; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sb-size { font-size: 13px; font-weight: 700; color: var(--muted); }
.sb-best span { display: block; font-size: 12px; color: var(--muted); }
.sb-best b { font-size: 26px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.sb-best em { display: block; font-style: normal; font-size: 12px; color: var(--soft-ink); }
.sb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-top: 1px solid var(--border); padding-top: 8px; }
.sb-row span { display: block; font-size: 11px; color: var(--muted); }
.sb-row b { font-size: 15px; font-variant-numeric: tabular-nums; }
.sb-tag { font-size: 12px; font-weight: 700; color: var(--gold); line-height: 1.3; }
.sb-tag.quiet { color: var(--muted); font-weight: 600; }
.sb-none { font-size: 13px; color: var(--muted); line-height: 1.4; }
@media (max-width: 359px) { .sb-grid { grid-template-columns: 1fr; } }
/* Six tabs in the phone bar */

/* Shared: reserve the semibold width so labels never shift */
.sel-tx { display: inline-flex; flex-direction: column; }
.sel-tx::after { content: attr(data-text); font-weight: 600; height: 0; visibility: hidden; overflow: hidden; }

/* Study Folio */
.fo { margin-top: 16px; position: relative; }
.fo-strip { position: relative; z-index: 2; display: flex; height: 56px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.fo-strip::-webkit-scrollbar { display: none; }
.fo-tab { position: relative; flex: 0 0 auto; min-width: 112px; height: 56px; padding: 0; margin-right: -1px; border: 0; background: none; color: var(--muted); font: 400 16px/24px var(--font); border-radius: 0; }
.fo-shape { position: absolute; left: 0; right: 0; top: 4px; bottom: 0; background: var(--raised); border: 1px solid var(--border); border-bottom: 0; border-radius: 12px 12px 0 0; transition: top 0.16s ease-out, background-color 0.16s ease-out; }
.fo-notch { position: absolute; left: 50%; top: 12px; width: 26px; height: 3px; margin-left: -13px; border-radius: 2px; background: var(--brand-line); transition: top 0.16s ease-out; }
.fo-label { position: relative; display: inline-flex; padding: 22px 22px 0; }
.fo-tab[aria-selected="true"] { color: var(--ink); font-weight: 600; z-index: 1; }
.fo-tab[aria-selected="true"] .fo-shape { top: 0; bottom: -1px; background: var(--card); }
.fo-tab[aria-selected="true"] .fo-notch { top: 8px; background: var(--accent); }
.fo-tab[aria-selected="true"] .fo-label { padding-top: 18px; }
@media (hover: hover) { .fo-tab[aria-selected="false"]:hover .fo-shape { background: var(--mint); } .fo-tab[aria-selected="false"]:hover .fo-notch { background: var(--muted); } }
.fo-tab:active .fo-shape { background: var(--mint); }
.fo-tab:focus-visible { outline: none; } .fo-tab:focus-visible .fo-shape { outline: 2px solid var(--accent); outline-offset: -3px; }
.fo-panel { position: relative; z-index: 1; margin-top: -1px; background: var(--card); border: 1px solid var(--border); border-radius: 0 16px 16px 16px; padding: 24px; }
.fo-panel .card, .fo-panel .deck-card { border: 1px solid var(--border); box-shadow: none; }
.fo-panel > .stack > :first-child { margin-top: 0; }
@media (max-width: 639px) { .fo-panel { padding: 16px; } .fo.fill .fo-tab { flex: 1 1 0; min-width: 0; font-size: 15px; } .fo.fill .fo-label { padding-left: 4px; padding-right: 4px; white-space: nowrap; } .fo.fill .fo-panel { border-top-right-radius: 0; } }
@media (prefers-reduced-motion: reduce) { .fo-shape, .fo-notch { transition: none; } }

/* Library: group description, two tool cards, then the tool */
.lib-about { font-size: 14px; color: var(--soft-ink); line-height: 1.5; }
.lib-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.lib-tool { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); color: var(--ink); min-width: 0; }
.lib-tool[aria-pressed="true"] { border: 2px solid var(--accent); padding: 11px; background: var(--mint); }
.lib-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--raised); color: var(--accent); }
.lib-tool[aria-pressed="true"] .lib-ic { background: var(--accent); color: var(--on-accent); }
.lib-ic svg { width: 18px; height: 18px; }
.lib-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lib-tx .name { font-weight: 700; font-size: 15px; }
.lib-tx .meta { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
@media (hover: hover) { .lib-tool[aria-pressed="false"]:hover { background: var(--raised); } }
.lib-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lib-body { margin-top: 18px; }
.lib-body > .notes-intro:first-child { margin-top: 0; }
.soon-at { font-size: 13px; color: var(--muted); }
.tk-row.is-soon .name, .row.is-soon .name, .drow[aria-disabled="true"] .name { color: var(--soft-ink); font-weight: 600; }
@media (min-width: 1024px) { .lib-tools { max-width: 720px; } }
.row .soon-at { display: block; }

/* Personal Stats: one row of three, any set size */
.sb-tile { background: var(--raised); border-radius: 16px; padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sb-tile.lead { background: var(--mint); box-shadow: inset 0 0 0 2px var(--accent); }
.sb-l { font-size: 13px; font-weight: 700; color: var(--muted); }
.sb-tile b { font-size: 26px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sb-tile em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--soft-ink); }
.sb-grid + .sb-tag { margin-top: 10px; font-size: 13px; }
/* Activities: practice by subject */
.dsub { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.dsub-row { background: var(--raised); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.dsub-row span { font-size: 13px; color: var(--muted); font-weight: 600; }
.dsub-row b { font-size: 17px; }

/* Practice areas inside the Study Folio panel: a plain grid (no edge-bleed carousel) */
.pr-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pr-areas .area-card { min-width: 0; }
@media (min-width: 640px) { .pr-areas { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; } }
.fo-panel .area-card { border: 1px solid var(--border); box-shadow: none; }

/* ---------- Skill Games (v3-13, v3-14): Library > Skill Games list and the full-screen player ----------
   Cards reuse the Library tool card look (.lib-ic, .lib-tx). The player is a frame outside #app so a re-render never restarts a round.
   Colors are theme tokens only; the game pages copy the same tokens (games/kit.js). */
.game-sec + .game-sec { margin-top: 22px; }
.game-sec .group-title { margin: 0 0 4px; }
.game-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
@media (min-width: 700px) { .game-grid { grid-template-columns: 1fr 1fr; } }
.game-card { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 12px 14px; text-align: left; border-radius: 14px; border: 1px solid var(--border); background: var(--card); color: var(--ink); }
.game-card .lib-ic { width: 42px; height: 42px; }
.game-card .lib-ic svg { width: 21px; height: 21px; }
.game-card .gc-about { font-size: 13.5px; line-height: 1.4; color: var(--soft-ink); }
.gc-go { flex: none; margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; color: var(--muted); }
.gc-go svg { width: 18px; height: 18px; }
@media (hover: hover) { .game-card:hover { background: var(--raised); } }
.game-card:active { background: var(--mint); }
.game-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.game-foot { margin-top: 18px; }

.game-host { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: var(--ground); padding-bottom: env(safe-area-inset-bottom, 0px); }
.game-top { flex: none; padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px; border-bottom: 1px solid var(--border); background: var(--ground); }
.gt-in { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 760px; margin: 0 auto; }
.gh-back { flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 16px 0 8px; border-radius: 999px; border: 1px solid var(--muted); background: var(--card); color: var(--ink); font-weight: 700; font-size: 15px; }
.gh-back svg { width: 20px; height: 20px; }
.gh-title { flex: 1; min-width: 0; text-align: center; font-weight: 800; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-top .home-btn { margin-left: 0; }
.game-frame { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--ground); color-scheme: normal; }
html.game-open { overflow: hidden; }
html.game-open .update-pill { display: none; }