@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@300;400;500;600;700;800&display=swap');

  :root {
    --brand: #7B506F;
    --brand-dark: #634058;
    --brand-muted: rgba(var(--brand-rgb),0.10);
    --bg: #FAF8F5;
    --surface: #FFFEFB;
    --surface2: #F3EDE7;
    --text1: #2C2420;
    --text2: #8A7E76;
    --text3: #B5A99E;
    --divider: #EDE7E0;
    --urgent: #D44000;
    --high: #E08A00;
    --normal: #2E8B6E;
    --success: #2E8B6E;
    --rest: #4ECDC4;
    --rest-soft: rgba(78,205,196,0.08);
    --safe-b: env(safe-area-inset-bottom, 16px);
    --safe-t: env(safe-area-inset-top, 0px);
  }

  /* ── THEMES ── */
  html.theme-dark {
    --brand: #B07AA3; --brand-dark: #8F6384; --brand-muted: rgba(176,122,163,0.12);
    --bg: #111118; --surface: #1C1C26; --surface2: #252533;
    --text1: #EFEFEF; --text2: #9999AA; --text3: #666677;
    --divider: #2A2A3A; --urgent: #FF5A5A; --high: #FFB340; --normal: #4AE0A0; --success: #4AE0A0;
    --rest: #5ED4CC; --rest-soft: rgba(94,212,204,0.10);
  }
  html.theme-dark .desktop-wrap { background: linear-gradient(135deg, #0a0a12 0%, #12121e 50%, #0e1122 100%); }
  html.theme-dark .phone-frame { box-shadow: 0 0 0 2px #333, 0 40px 80px rgba(0,0,0,0.7), 0 0 120px rgba(176,122,163,0.12); }
  html.theme-dark .onb1 { background: linear-gradient(155deg, #1A0F18 0%, #3D2435 25%, #7B506F 65%, #A88B9E 100%); }
  html.theme-dark .home-nav, html.theme-dark .done-header, html.theme-dark .stats-header { background:rgba(17,17,24,0.92); }
  html.theme-dark .drawer { background:var(--surface); }
  html.theme-dark .toggle.on { background: var(--brand); }

  html.theme-warm {
    --brand: #9B6B5A; --brand-dark: #7E5648; --brand-muted: rgba(155,107,90,0.10);
    --bg: #FFF8F2; --surface: #FFFFFF; --surface2: #FFF0E6;
    --text1: #2D1F14; --text2: #8A6E5C; --text3: #B09585;
    --divider: #F0DDD0; --urgent: #C43030; --high: #D48A20; --normal: #5A9E78; --success: #5A9E78;
    --rest: #3DBEB6; --rest-soft: rgba(61,190,182,0.08);
    --nav-glass: rgba(255,248,242,0.82);
  }
  html.theme-warm .onb1 { background: linear-gradient(155deg, #3D1E0F 0%, #6B4538 25%, #9B6B5A 65%, #C4A090 100%); }
  html.theme-warm .home-nav, html.theme-warm .done-header, html.theme-warm .stats-header { background:rgba(255,248,242,0.92); }

  html.theme-zen {
    --brand: #6B6B6B; --brand-dark: #555555; --brand-muted: rgba(107,107,107,0.08);
    --bg: #FAFAFA; --surface: #FFFFFF; --surface2: #F2F2F2;
    --text1: #111111; --text2: #888888; --text3: #AAAAAA;
    --divider: #E8E8E8; --urgent: #111111; --high: #555555; --normal: #888888; --success: #555555;
    --rest: #6B6B6B; --rest-soft: rgba(107,107,107,0.06);
    --nav-glass: rgba(250,250,250,0.82);
  }
  html.theme-zen .onb1 { background: linear-gradient(155deg, #111 0%, #333 25%, #555 65%, #777 100%); }
  html.theme-zen .home-nav, html.theme-zen .done-header, html.theme-zen .stats-header { background:rgba(250,250,250,0.92); }
  html.theme-zen .drawer { background:var(--surface); }
  html.theme-zen .pi-u { background:#111;box-shadow:none; }
  html.theme-zen .pi-h { background:#555; }
  html.theme-zen .sg { display:none; }

  html.theme-bloom {
    --brand: #C27A90; --brand-dark: #A8667A; --brand-muted: rgba(194,122,144,0.10);
    --bg: #FDF8F6; --surface: #FFFFFF; --surface2: #FAF0ED;
    --text1: #2D2226; --text2: #8A7178; --text3: #B09A9F;
    --divider: #F0E0DC; --urgent: #C44040; --high: #D49A40; --normal: #6B9E8A; --success: #6B9E8A;
    --rest: #4ECDC4; --rest-soft: rgba(78,205,196,0.08);
    --nav-glass: rgba(253,248,246,0.82);
  }
  html.theme-bloom .onb1 { background: linear-gradient(155deg, #3D1F2A 0%, #6B3A4E 25%, #C27A90 65%, #E0A8B8 100%); }
  html.theme-bloom .home-nav, html.theme-bloom .done-header, html.theme-bloom .stats-header { background:rgba(253,248,246,0.92); }
  html.theme-bloom .toggle.on { background: var(--brand); }

  html.theme-ocean {
    --brand: #3B8EA5; --brand-dark: #2E7389; --brand-muted: rgba(59,142,165,0.10);
    --bg: #F4F9FB; --surface: #FFFFFF; --surface2: #E8F4F8;
    --text1: #1A2E38; --text2: #6B8A99; --text3: #9BBAC8;
    --divider: #D8EBF2; --urgent: #D44040; --high: #E09A30; --normal: #2E8B6E; --success: #2E8B6E;
    --rest: #4ECDC4; --rest-soft: rgba(78,205,196,0.08);
    --nav-glass: rgba(244,249,251,0.82);
  }
  html.theme-ocean .onb1 { background: linear-gradient(155deg, #0F2027 0%, #203A43 25%, #3B8EA5 65%, #7CC6D6 100%); }
  html.theme-ocean .home-nav, html.theme-ocean .done-header, html.theme-ocean .stats-header { background:rgba(244,249,251,0.92); }
  html.theme-ocean .toggle.on { background: var(--brand); }

  html.theme-sage {
    --brand: #6B8F71; --brand-dark: #567358; --brand-muted: rgba(107,143,113,0.10);
    --bg: #F7FAF5; --surface: #FFFFFF; --surface2: #EDF5E8;
    --text1: #1F2E20; --text2: #6E8A6F; --text3: #A1BCA2;
    --divider: #DDE9D8; --urgent: #C44030; --high: #D49830; --normal: #6B8F71; --success: #6B8F71;
    --rest: #4ECDC4; --rest-soft: rgba(78,205,196,0.08);
    --nav-glass: rgba(247,250,245,0.82);
  }
  html.theme-sage .onb1 { background: linear-gradient(155deg, #1A2A1A 0%, #344D34 25%, #6B8F71 65%, #A8C9AD 100%); }
  html.theme-sage .home-nav, html.theme-sage .done-header, html.theme-sage .stats-header { background:rgba(247,250,245,0.92); }
  html.theme-sage .toggle.on { background: var(--brand); }

  html.theme-sunset {
    --brand: #D4764E; --brand-dark: #B86040; --brand-muted: rgba(212,118,78,0.10);
    --bg: #FFFAF6; --surface: #FFFFFF; --surface2: #FFF0E8;
    --text1: #2E1F14; --text2: #9A7A65; --text3: #C4A894;
    --divider: #F2E0D4; --urgent: #CC3030; --high: #E09040; --normal: #5A9E78; --success: #5A9E78;
    --rest: #4ECDC4; --rest-soft: rgba(78,205,196,0.08);
    --nav-glass: rgba(255,250,246,0.82);
  }
  html.theme-sunset .onb1 { background: linear-gradient(155deg, #2E1408 0%, #6B3520 25%, #D4764E 65%, #F0B090 100%); }
  html.theme-sunset .home-nav, html.theme-sunset .done-header, html.theme-sunset .stats-header { background:rgba(255,250,246,0.92); }
  html.theme-sunset .toggle.on { background: var(--brand); }

  html.theme-berry {
    --brand: #8B5CF6; --brand-dark: #7C3AED; --brand-muted: rgba(139,92,246,0.10);
    --bg: #FAF5FF; --surface: rgba(245,238,255,0.95); --surface2: rgba(233,222,255,0.6);
    --text1: #1E1B4B; --text2: #5B5585; --text3: #8B83AD;
    --divider: rgba(139,92,246,0.12); --glass-bg: rgba(250,245,255,0.92);
    --glass-border: rgba(139,92,246,0.12); --glass-shadow: 0 2px 16px rgba(139,92,246,0.06);
    --rest: #4ECDC4; --rest-soft: rgba(78,205,196,0.08);
    --nav-glass: rgba(250,245,255,0.92);
  }
  html.theme-berry .onb1 { background: linear-gradient(155deg, #1E1048 0%, #4C1D95 25%, #8B5CF6 65%, #C4B5FD 100%); }
  html.theme-berry .home-nav, html.theme-berry .done-header, html.theme-berry .stats-header { background:rgba(250,245,255,0.92); }
  html.theme-berry .toggle.on { background: var(--brand); }

  html.theme-ember {
    --brand: #F59E0B; --brand-dark: #D97706; --brand-muted: rgba(245,158,11,0.12);
    --bg: #1C1410; --surface: rgba(40,30,22,0.95); --surface2: rgba(60,45,32,0.6);
    --text1: #FDE68A; --text2: #C9A96E; --text3: #8B7355;
    --divider: rgba(245,158,11,0.10); --glass-bg: rgba(28,20,16,0.92);
    --glass-border: rgba(245,158,11,0.10); --glass-shadow: 0 2px 16px rgba(0,0,0,0.3);
    --nav-glass: rgba(28,20,16,0.92);
    --urgent: #EF4444; --high: #F59E0B; --normal: #34D399; --success: #34D399;
    --rest: #67E8F9; --rest-soft: rgba(103,232,249,0.10);
  }
  html.theme-ember .onb1 { background: linear-gradient(155deg, #1C1410 0%, #44250E 25%, #B45309 65%, #FBBF24 100%); }
  html.theme-ember .home-nav, html.theme-ember .done-header, html.theme-ember .stats-header {
    background:rgba(28,20,16,0.92);
    border-bottom-color: rgba(245,158,11,0.10) !important;
  }
  html.theme-ember .toggle.on { background:var(--brand); }

  /* ── MIDNIGHT THEME (deep space) ── */
  html.theme-midnight {
    --brand: #818CF8; --brand-dark: #6366F1; --brand-muted: rgba(129,140,248,0.12);
    --bg: #0C0F1A; --surface: rgba(16,20,40,0.95); --surface2: rgba(30,35,65,0.6);
    --text1: #C7D2FE; --text2: #8B95C9; --text3: #5B6490;
    --divider: rgba(129,140,248,0.10); --glass-bg: rgba(12,15,26,0.92);
    --glass-border: rgba(129,140,248,0.10); --glass-shadow: 0 2px 16px rgba(0,0,0,0.4);
    --nav-glass: rgba(12,15,26,0.92);
    --urgent: #F87171; --high: #FBBF24; --normal: #34D399; --success: #34D399;
    --rest: #5ED4CC; --rest-soft: rgba(94,212,204,0.10);
  }
  html.theme-midnight .onb1 { background: linear-gradient(155deg, #0C0F1A 0%, #1E1B4B 25%, #4338CA 65%, #818CF8 100%); }
  html.theme-midnight .home-nav, html.theme-midnight .done-header, html.theme-midnight .stats-header {
    background:rgba(12,15,26,0.92);
    border-bottom-color: rgba(129,140,248,0.10) !important;
  }
  html.theme-midnight .toggle.on { background:var(--brand); }
  html.theme-midnight .drawer { background:#0C0F1A; }

  /* ── NOIR THEME (sleek & bold) ── */
  html.theme-noir {
    --brand: #F43F5E; --brand-dark: #E11D48; --brand-muted: rgba(244,63,94,0.12);
    --bg: #0A0A0A; --surface: rgba(18,18,18,0.95); --surface2: rgba(35,35,35,0.6);
    --text1: #FECDD3; --text2: #A8A8A8; --text3: #666666;
    --divider: rgba(244,63,94,0.10); --glass-bg: rgba(10,10,10,0.92);
    --glass-border: rgba(244,63,94,0.10); --glass-shadow: 0 2px 16px rgba(0,0,0,0.5);
    --nav-glass: rgba(10,10,10,0.92);
    --urgent: #FB7185; --high: #FBBF24; --normal: #34D399; --success: #34D399;
    --rest: #5ED4CC; --rest-soft: rgba(94,212,204,0.10);
  }
  html.theme-noir .onb1 { background: linear-gradient(155deg, #0A0A0A 0%, #3B0716 25%, #BE123C 65%, #F43F5E 100%); }
  html.theme-noir .home-nav, html.theme-noir .done-header, html.theme-noir .stats-header {
    background:rgba(10,10,10,0.92);
    border-bottom-color: rgba(244,63,94,0.10) !important;
  }
  html.theme-noir .toggle.on { background:var(--brand); }
  html.theme-noir .drawer { background:#0A0A0A; }

  /* ── FOREST THEME (nature calm) ── */
  html.theme-forest {
    --brand: #34D399; --brand-dark: #10B981; --brand-muted: rgba(52,211,153,0.12);
    --bg: #0A1410; --surface: rgba(14,28,22,0.95); --surface2: rgba(25,50,38,0.6);
    --text1: #A7F3D0; --text2: #6EE7B7; --text3: #4B8B6E;
    --divider: rgba(52,211,153,0.10); --glass-bg: rgba(10,20,16,0.92);
    --glass-border: rgba(52,211,153,0.10); --glass-shadow: 0 2px 16px rgba(0,0,0,0.4);
    --nav-glass: rgba(10,20,16,0.92);
    --urgent: #F87171; --high: #FBBF24; --normal: #6EE7B7; --success: #6EE7B7;
    --rest: #67E8F9; --rest-soft: rgba(103,232,249,0.10);
  }
  html.theme-forest .onb1 { background: linear-gradient(155deg, #0A1410 0%, #064E3B 25%, #059669 65%, #34D399 100%); }
  html.theme-forest .home-nav, html.theme-forest .done-header, html.theme-forest .stats-header {
    background:rgba(10,20,16,0.92);
    border-bottom-color: rgba(52,211,153,0.10) !important;
  }
  html.theme-forest .toggle.on { background:var(--brand); }
  html.theme-forest .drawer { background:#0A1410; }

  /* ── THEME RGB COMPONENTS (for rgba() throughout CSS) ── */
  :root { --brand-rgb: 123,80,111; --urgent-rgb: 212,64,0; --high-rgb: 224,138,0; }
  html.theme-dark { --brand-rgb: 176,122,163; --urgent-rgb: 255,90,90; --high-rgb: 255,179,64; }
  html.theme-warm { --brand-rgb: 155,107,90; --urgent-rgb: 196,48,48; --high-rgb: 212,138,32; }
  html.theme-zen { --brand-rgb: 107,107,107; --urgent-rgb: 17,17,17; --high-rgb: 85,85,85; }
  html.theme-bloom { --brand-rgb: 194,122,144; --urgent-rgb: 196,64,64; --high-rgb: 212,154,64; }
  html.theme-ocean { --brand-rgb: 59,142,165; --urgent-rgb: 212,64,64; --high-rgb: 224,154,48; }
  html.theme-sage { --brand-rgb: 107,143,113; --urgent-rgb: 196,64,48; --high-rgb: 212,152,48; }
  html.theme-sunset { --brand-rgb: 212,118,78; --urgent-rgb: 204,48,48; --high-rgb: 224,144,64; }
  html.theme-berry { --brand-rgb: 139,92,246; --urgent-rgb: 212,64,0; --high-rgb: 224,138,0; }
  html.theme-ember { --brand-rgb: 245,158,11; --urgent-rgb: 239,68,68; --high-rgb: 245,158,11; }
  html.theme-midnight { --brand-rgb: 129,140,248; --urgent-rgb: 248,113,113; --high-rgb: 251,191,36; }
  html.theme-noir { --brand-rgb: 244,63,94; --urgent-rgb: 251,113,133; --high-rgb: 251,191,36; }
  html.theme-forest { --brand-rgb: 52,211,153; --urgent-rgb: 248,113,113; --high-rgb: 251,191,36; }

  /* ── CANDY PACK THEMES ── */
  html.theme-bubblegum {
    --brand: #F472B6; --brand-dark: #EC4899; --brand-muted: rgba(244,114,182,0.10);
    --bg: #FFF1F7; --surface: #FFFFFF; --surface2: #FFE4EF;
    --text1: #4A1A33; --text2: #8A5070; --text3: #B87A9A;
    --divider: #FFD6E8; --rest: #4ECDC4; --rest-soft: rgba(78,205,196,0.08);
    --nav-glass: rgba(255,241,247,0.92);
  }
  html.theme-bubblegum .onb1 { background: linear-gradient(155deg, #4A1A33 0%, #A83279 25%, #F472B6 65%, #FBCFE8 100%); }
  html.theme-bubblegum .home-nav, html.theme-bubblegum .done-header, html.theme-bubblegum .stats-header { background:rgba(255,241,247,0.92); }
  html.theme-bubblegum { --brand-rgb: 244,114,182; }

  html.theme-lemon {
    --brand: #FACC15; --brand-dark: #EAB308; --brand-muted: rgba(250,204,21,0.10);
    --bg: #FEFCE8; --surface: #FFFFFF; --surface2: #FEF9C3;
    --text1: #3D3300; --text2: #7A6B20; --text3: #A89840;
    --divider: #FEF08A; --rest: #4ECDC4; --rest-soft: rgba(78,205,196,0.08);
    --nav-glass: rgba(254,252,232,0.92);
  }
  html.theme-lemon .onb1 { background: linear-gradient(155deg, #3D3300 0%, #854D0E 25%, #FACC15 65%, #FEF08A 100%); }
  html.theme-lemon .home-nav, html.theme-lemon .done-header, html.theme-lemon .stats-header { background:rgba(254,252,232,0.92); }
  html.theme-lemon { --brand-rgb: 250,204,21; }

  html.theme-peach {
    --brand: #FB923C; --brand-dark: #F97316; --brand-muted: rgba(251,146,60,0.10);
    --bg: #FFF7ED; --surface: #FFFFFF; --surface2: #FFEDD5;
    --text1: #431A00; --text2: #8A5020; --text3: #B87840;
    --divider: #FED7AA; --rest: #4ECDC4; --rest-soft: rgba(78,205,196,0.08);
    --nav-glass: rgba(255,247,237,0.92);
  }
  html.theme-peach .onb1 { background: linear-gradient(155deg, #431A00 0%, #9A3412 25%, #FB923C 65%, #FDBA74 100%); }
  html.theme-peach .home-nav, html.theme-peach .done-header, html.theme-peach .stats-header { background:rgba(255,247,237,0.92); }
  html.theme-peach { --brand-rgb: 251,146,60; }

  html.theme-mint {
    --brand: #34D399; --brand-dark: #10B981; --brand-muted: rgba(52,211,153,0.10);
    --bg: #F0FDF9; --surface: #FFFFFF; --surface2: #D1FAE5;
    --text1: #0A3324; --text2: #3A7A5A; --text3: #6BAA8A;
    --divider: #A7F3D0; --rest: #4ECDC4; --rest-soft: rgba(78,205,196,0.08);
    --nav-glass: rgba(240,253,249,0.92);
  }
  html.theme-mint .onb1 { background: linear-gradient(155deg, #0A3324 0%, #065F46 25%, #34D399 65%, #6EE7B7 100%); }
  html.theme-mint .home-nav, html.theme-mint .done-header, html.theme-mint .stats-header { background:rgba(240,253,249,0.92); }
  html.theme-mint { --brand-rgb: 52,211,153; }

  html.theme-lavender {
    --brand: #A78BFA; --brand-dark: #8B5CF6; --brand-muted: rgba(167,139,250,0.10);
    --bg: #F5F3FF; --surface: #FFFFFF; --surface2: #EDE9FE;
    --text1: #2E1065; --text2: #6B50A0; --text3: #9580CC;
    --divider: #DDD6FE; --rest: #4ECDC4; --rest-soft: rgba(78,205,196,0.08);
    --nav-glass: rgba(245,243,255,0.92);
  }
  html.theme-lavender .onb1 { background: linear-gradient(155deg, #2E1065 0%, #5B21B6 25%, #A78BFA 65%, #C4B5FD 100%); }
  html.theme-lavender .home-nav, html.theme-lavender .done-header, html.theme-lavender .stats-header { background:rgba(245,243,255,0.92); }
  html.theme-lavender { --brand-rgb: 167,139,250; }

  html.theme-meadow {
    --brand: #6B8F6B; --brand-dark: #558855; --brand-muted: rgba(229,244,227,0.20);
    --bg: #F5FBF4; --surface: #FFFFFF; --surface2: #E5F4E3;
    --text1: #2D4A2D; --text2: #5A7A5A; --text3: #88AA88;
    --divider: #D0E8CE; --rest: #4ECDC4; --rest-soft: rgba(78,205,196,0.08);
    --nav-glass: rgba(245,251,244,0.92);
  }
  html.theme-meadow .onb1 { background: linear-gradient(155deg, #2D4A2D 0%, #3D6B3D 25%, #6B8F6B 65%, #E5F4E3 100%); }
  html.theme-meadow .home-nav, html.theme-meadow .done-header, html.theme-meadow .stats-header { background:rgba(245,251,244,0.92); }
  html.theme-meadow { --brand-rgb: 107,143,107; }

  html.theme-tangerine {
    --brand: #DA7635; --brand-dark: #C4662A; --brand-muted: rgba(218,118,53,0.10);
    --bg: #FFF5EC; --surface: #FFFFFF; --surface2: #FFE8D4;
    --text1: #3D1E08; --text2: #8A5028; --text3: #B07848;
    --divider: #FFD4B0; --rest: #4ECDC4; --rest-soft: rgba(78,205,196,0.08);
    --nav-glass: rgba(255,245,236,0.92);
  }
  html.theme-tangerine .onb1 { background: linear-gradient(155deg, #3D1E08 0%, #8B4513 25%, #DA7635 65%, #F4A460 100%); }
  html.theme-tangerine .home-nav, html.theme-tangerine .done-header, html.theme-tangerine .stats-header { background:rgba(255,245,236,0.92); }
  html.theme-tangerine { --brand-rgb: 218,118,53; }

  html.theme-teal {
    --brand: #82AEB1; --brand-dark: #6A9699; --brand-muted: rgba(130,174,177,0.10);
    --bg: #F0F8F8; --surface: #FFFFFF; --surface2: #DFF0F0;
    --text1: #1A3638; --text2: #4A7072; --text3: #7AA0A2;
    --divider: #C8E4E5; --rest: #4ECDC4; --rest-soft: rgba(78,205,196,0.08);
    --nav-glass: rgba(240,248,248,0.92);
  }
  html.theme-teal .onb1 { background: linear-gradient(155deg, #1A3638 0%, #3A6668 25%, #82AEB1 65%, #B8D8DA 100%); }
  html.theme-teal .home-nav, html.theme-teal .done-header, html.theme-teal .stats-header { background:rgba(240,248,248,0.92); }
  html.theme-teal { --brand-rgb: 130,174,177; }

  html.theme-slate {
    --brand: #9EA3B0; --brand-dark: #7E8494; --brand-muted: rgba(158,163,176,0.10);
    --bg: #F4F5F7; --surface: #FFFFFF; --surface2: #E8EAF0;
    --text1: #1E2030; --text2: #585C70; --text3: #8890A0;
    --divider: #D8DCE6; --rest: #4ECDC4; --rest-soft: rgba(78,205,196,0.08);
    --nav-glass: rgba(244,245,247,0.92);
  }
  html.theme-slate .onb1 { background: linear-gradient(155deg, #1E2030 0%, #484C62 25%, #9EA3B0 65%, #C8CCD8 100%); }
  html.theme-slate .home-nav, html.theme-slate .done-header, html.theme-slate .stats-header { background:rgba(244,245,247,0.92); }
  html.theme-slate { --brand-rgb: 158,163,176; }

  html.theme-steel {
    --brand: #546A7B; --brand-dark: #3E5464; --brand-muted: rgba(84,106,123,0.10);
    --bg: #F0F3F5; --surface: #FFFFFF; --surface2: #E0E6EA;
    --text1: #1A2A35; --text2: #4A5A68; --text3: #7A8A98;
    --divider: #C8D4DC; --rest: #4ECDC4; --rest-soft: rgba(78,205,196,0.08);
    --nav-glass: rgba(240,243,245,0.92);
  }
  html.theme-steel .onb1 { background: linear-gradient(155deg, #1A2A35 0%, #354A58 25%, #546A7B 65%, #8AA0B0 100%); }
  html.theme-steel .home-nav, html.theme-steel .done-header, html.theme-steel .stats-header { background:rgba(240,243,245,0.92); }
  html.theme-steel { --brand-rgb: 84,106,123; }

  html.theme-cloud {
    --brand: #7ABDE0; --brand-dark: #5AA8D0; --brand-muted: rgba(205,237,253,0.20);
    --bg: #F5FBFF; --surface: #FFFFFF; --surface2: #E0F2FE;
    --text1: #1A3548; --text2: #4A7088; --text3: #7AA0B8;
    --divider: #BAE6FD; --rest: #4ECDC4; --rest-soft: rgba(78,205,196,0.08);
    --nav-glass: rgba(245,251,255,0.92);
  }
  html.theme-cloud .onb1 { background: linear-gradient(155deg, #1A3548 0%, #2A6080 25%, #7ABDE0 65%, #CDEDFD 100%); }
  html.theme-cloud .home-nav, html.theme-cloud .done-header, html.theme-cloud .stats-header { background:rgba(245,251,255,0.92); }
  html.theme-cloud { --brand-rgb: 122,189,224; }

  html.theme-cherry {
    --brand: #D33E43; --brand-dark: #B82E33; --brand-muted: rgba(211,62,67,0.10);
    --bg: #FFF3F3; --surface: #FFFFFF; --surface2: #FFE0E0;
    --text1: #3D0A0C; --text2: #8A3035; --text3: #B05558;
    --divider: #FFC8C9; --rest: #4ECDC4; --rest-soft: rgba(78,205,196,0.08);
    --nav-glass: rgba(255,243,243,0.92);
  }
  html.theme-cherry .onb1 { background: linear-gradient(155deg, #3D0A0C 0%, #7F1D1D 25%, #D33E43 65%, #FCA5A5 100%); }
  html.theme-cherry .home-nav, html.theme-cherry .done-header, html.theme-cherry .stats-header { background:rgba(255,243,243,0.92); }
  html.theme-cherry { --brand-rgb: 211,62,67; }

  html.theme-spearmint {
    --brand: #69DC9E; --brand-dark: #4FC883; --brand-muted: rgba(105,220,158,0.10);
    --bg: #F0FDF7; --surface: #FFFFFF; --surface2: #D1FAE5;
    --text1: #0A331E; --text2: #3A7A50; --text3: #6AAA80;
    --divider: #A7F3D0; --rest: #4ECDC4; --rest-soft: rgba(78,205,196,0.08);
    --nav-glass: rgba(240,253,247,0.92);
  }
  html.theme-spearmint .onb1 { background: linear-gradient(155deg, #0A331E 0%, #166534 25%, #69DC9E 65%, #A7F3D0 100%); }
  html.theme-spearmint .home-nav, html.theme-spearmint .done-header, html.theme-spearmint .stats-header { background:rgba(240,253,247,0.92); }
  html.theme-spearmint { --brand-rgb: 105,220,158; }

  html.theme-sunshine {
    --brand: #C8BC00; --brand-dark: #A8A000; --brand-muted: rgba(240,225,0,0.10);
    --bg: #FFFEF0; --surface: #FFFFFF; --surface2: #FEFCE8;
    --text1: #3D3A00; --text2: #7A7520; --text3: #A8A040;
    --divider: #FEF08A; --rest: #4ECDC4; --rest-soft: rgba(78,205,196,0.08);
    --nav-glass: rgba(255,254,240,0.92);
  }
  html.theme-sunshine .onb1 { background: linear-gradient(155deg, #3D3A00 0%, #7A7000 25%, #F0E100 65%, #FEF08A 100%); }
  html.theme-sunshine .home-nav, html.theme-sunshine .done-header, html.theme-sunshine .stats-header { background:rgba(255,254,240,0.92); }
  html.theme-sunshine { --brand-rgb: 200,188,0; }

  html.theme-honey {
    --brand: #C8B020; --brand-dark: #B09A10; --brand-muted: rgba(253,231,76,0.10);
    --bg: #FFFEF2; --surface: #FFFFFF; --surface2: #FEF9C3;
    --text1: #3D3500; --text2: #7A6B18; --text3: #A89838;
    --divider: #FEF08A; --rest: #4ECDC4; --rest-soft: rgba(78,205,196,0.08);
    --nav-glass: rgba(255,254,242,0.92);
  }
  html.theme-honey .onb1 { background: linear-gradient(155deg, #3D3500 0%, #7A6000 25%, #FDE74C 65%, #FEF08A 100%); }
  html.theme-honey .home-nav, html.theme-honey .done-header, html.theme-honey .stats-header { background:rgba(255,254,242,0.92); }
  html.theme-honey { --brand-rgb: 200,176,32; }

  html.theme-gold {
    --brand: #B5AC50; --brand-dark: #9A9240; --brand-muted: rgba(227,216,126,0.10);
    --bg: #FDFCF2; --surface: #FFFFFF; --surface2: #F5F3E0;
    --text1: #3A3618; --text2: #706A30; --text3: #A09850;
    --divider: #E8E2B0; --rest: #4ECDC4; --rest-soft: rgba(78,205,196,0.08);
    --nav-glass: rgba(253,252,242,0.92);
  }
  html.theme-gold .onb1 { background: linear-gradient(155deg, #3A3618 0%, #6A6228 25%, #E3D87E 65%, #F0ECB0 100%); }
  html.theme-gold .home-nav, html.theme-gold .done-header, html.theme-gold .stats-header { background:rgba(253,252,242,0.92); }
  html.theme-gold { --brand-rgb: 181,172,80; }

  /* ── TIPS & TRICKS OVERLAY ── */
  .tips-ov { position:fixed;inset:0;background:rgba(0,0,0,0.88);z-index:9999;opacity:0;pointer-events:none;transition:opacity 0.35s;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:60px 20px calc(40px + env(safe-area-inset-bottom, 34px)); }
  .tips-ov.active { opacity:1;pointer-events:auto; }
  .tips-ov-title { text-align:center;font-family:'DM Serif Display',serif;font-size:24px;color:#fff;margin-bottom:6px; }
  .tips-ov-sub { text-align:center;font-size:13px;color:rgba(255,255,255,0.5);margin-bottom:24px; }
  .tips-card { background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:14px 16px;margin-bottom:10px;display:flex;gap:12px;align-items:flex-start; }
  .tips-card-icon { font-size:20px;flex-shrink:0;width:32px;text-align:center;padding-top:2px; }
  .tips-card-body { flex:1; }
  .tips-card-title { font-weight:600;font-size:14px;color:#fff;margin-bottom:3px; }
  .tips-card-desc { font-size:12px;color:rgba(255,255,255,0.55);line-height:1.45; }
  .tips-got-btn { display:block;margin:24px auto 16px;padding:14px 48px;border:none;border-radius:26px;background:var(--brand);color:#fff;font-weight:700;font-size:15px;cursor:pointer; }

  /* ── ENERGY CHECK-IN OVERLAY ── */
  .energy-ov { position:fixed;inset:0;background:rgba(0,0,0,0.88);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.35s; }
  .energy-ov.active { opacity:1;pointer-events:auto; }
  .energy-ov-title { font-family:'DM Serif Display',serif;font-size:24px;color:#fff;margin-bottom:6px; }
  .energy-ov-sub { font-size:13px;color:rgba(255,255,255,0.5);margin-bottom:28px; }
  .energy-btn-row { display:flex;gap:12px; }
  .energy-btn { display:flex;flex-direction:column;align-items:center;gap:6px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:20px 22px;cursor:pointer;transition:all 0.2s;min-width:90px; }
  .energy-btn:active { transform:scale(0.95); }
  .energy-btn-emoji { font-size:32px; }
  .energy-btn-label { font-weight:600;font-size:13px;color:#fff; }
  .energy-btn-desc { font-size:10px;color:rgba(255,255,255,0.4);text-align:center; }
  .energy-btn.sel { border-color:var(--brand);background:rgba(var(--brand-rgb),0.15); }
  .energy-btn-red:active, .energy-btn-red.sel { border-color:#EF4444;background:rgba(239,68,68,0.15); }
  .energy-btn-yellow:active, .energy-btn-yellow.sel { border-color:#F59E0B;background:rgba(245,158,11,0.15); }
  .energy-btn-green:active, .energy-btn-green.sel { border-color:#22C55E;background:rgba(34,197,94,0.15); }
  .energy-day-dot { width:8px;height:8px;border-radius:50%;display:inline-block;margin-left:6px;vertical-align:middle; }
  .energy-day-dot.green { background:#22C55E; }
  .energy-day-dot.yellow { background:#F59E0B; }
  .energy-day-dot.red { background:#EF4444; }
  .energy-day-banner { display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;margin-bottom:10px;font-size:13px;font-weight:500; }
  .energy-day-banner.green { background:rgba(34,197,94,0.08);color:#22C55E;border:1px solid rgba(34,197,94,0.15); }
  .energy-day-banner.yellow { background:rgba(245,158,11,0.08);color:#F59E0B;border:1px solid rgba(245,158,11,0.15); }
  .energy-day-banner.red { background:rgba(239,68,68,0.08);color:#EF4444;border:1px solid rgba(239,68,68,0.15); }
  /* ── Single Task View ── */
  .single-view-btn { background:var(--surface);border:1px solid var(--divider);border-radius:8px;padding:4px 8px;cursor:pointer;display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text2);font-family:inherit;transition:all 0.2s; }
  .single-view-btn.on { background:var(--brand-muted);border-color:var(--brand);color:var(--brand); }
  .single-view-btn i { font-size:12px; }
  .single-task-wrap { padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:16px; }
  .single-task-counter { font-size:12px;color:var(--text3);letter-spacing:0.05em; }
  .single-task-nav { display:flex;gap:12px;align-items:center; }
  .single-task-nav-btn { background:var(--surface);border:1px solid var(--divider);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.15s;color:var(--text2); }
  .single-task-nav-btn:active { transform:scale(0.92);background:var(--surface2); }
  /* ── Surprise Me (Task Randomizer) ── */
  .surprise-btn { display:flex;align-items:center;gap:6px;padding:10px 16px;border-radius:12px;background:var(--surface);border:1px dashed var(--divider);cursor:pointer;font-size:13px;color:var(--text2);font-family:inherit;transition:all 0.2s;margin:4px 0; }
  .surprise-btn:active { transform:scale(0.97);background:var(--surface2); }
  .surprise-btn i { color:var(--brand);font-size:14px; }
  .surprise-btn .surprise-label { font-weight:500; }
  /* ── Done Enough Line ── */
  .done-enough-line { display:flex;align-items:center;gap:10px;padding:6px 0;margin:4px 0; }
  .done-enough-line-bar { flex:1;height:1px;background:var(--divider); }
  .done-enough-line-text { font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em;white-space:nowrap; }
  /* ── Interstitial ("What's next?") ── */
  .interstitial { position:fixed;bottom:calc(80px + var(--safe-b));left:16px;right:16px;background:var(--surface);border:1px solid var(--divider);border-radius:16px;padding:14px 16px;box-shadow:0 8px 32px rgba(0,0,0,0.12);z-index:999;opacity:0;transform:translateY(20px);transition:all 0.3s ease;pointer-events:none; }
  .interstitial.show { opacity:1;transform:translateY(0);pointer-events:auto; }
  .interstitial-header { font-size:13px;font-weight:600;color:var(--text1);margin-bottom:8px; }
  .interstitial-sub { font-size:12px;color:var(--text3);margin-bottom:10px; }
  .interstitial-pick { display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:var(--surface2);cursor:pointer;transition:background 0.15s;margin-bottom:6px; }
  .interstitial-pick:active { background:var(--brand-muted); }
  .interstitial-pick-title { font-size:13px;color:var(--text1);flex:1; }
  .interstitial-dismiss { font-size:12px;color:var(--text3);cursor:pointer;text-align:center;margin-top:4px; }
  .energy-banner { display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;margin-bottom:8px;font-size:12px;color:var(--text2);background:var(--brand-muted); }
  .energy-banner-emoji { font-size:16px; }

  /* ── BURNOUT / REST MODE ── */
  .rest-banner { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-radius:12px;margin-bottom:12px;background:var(--rest-soft);border:1px solid var(--rest);opacity:1; }
  .rest-banner-left { flex:1; }
  .rest-banner-title { color:var(--rest);font-weight:600;font-size:13px;margin-bottom:2px; }
  .rest-banner-sub { color:var(--text2);font-size:12px; }
  .rest-banner-actions { display:flex;gap:8px; }
  .rest-banner-btn { background:transparent;border:1px solid rgba(78,205,196,0.3);border-radius:8px;color:var(--rest);font-size:12px;padding:5px 10px;cursor:pointer;font-family:inherit;transition:all 0.15s; }
  .rest-banner-btn:active { transform:scale(0.95); }
  .rest-banner-btn.end { border-color:var(--divider);color:var(--text2); }
  .burnout-nudge { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-radius:12px;margin-bottom:12px;background:rgba(var(--high-rgb),0.06);border:1px solid rgba(var(--high-rgb),0.12); }
  .burnout-nudge-left { flex:1; }
  .burnout-nudge-title { color:var(--high);font-weight:600;font-size:13px;margin-bottom:2px; }
  .burnout-nudge-sub { color:var(--text2);font-size:12px; }
  .burnout-nudge-btn { background:rgba(var(--high-rgb),0.10);border:1px solid rgba(var(--high-rgb),0.25);border-radius:8px;color:var(--high);font-size:12px;padding:5px 10px;cursor:pointer;font-family:inherit;font-weight:600;white-space:nowrap;transition:all 0.15s; }
  .burnout-nudge-btn:active { transform:scale(0.95); }
  .break-btn { width:100%;background:transparent;border:1px solid var(--divider);border-radius:12px;color:var(--text3);font-size:13px;padding:12px 16px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;font-family:inherit;transition:all 0.2s; }
  .break-btn:active { transform:scale(0.97); }
  .energy-dots { display:flex;gap:4px;align-items:center; }
  .energy-dot { width:7px;height:7px;border-radius:50%;background:var(--divider);transition:background 0.3s; }
  .energy-dot.on { background:var(--brand); }
  .energy-dot.on.reduced { background:var(--high); }
  .energy-dot.on.rest { background:var(--rest); }
  .tc.forgiven { border-left-color:transparent !important;padding-left:18px !important; }
  .tc.forgiven .tc-d.over { color:var(--text2) !important;font-weight:400 !important; }
  .rest-deferred-notice { margin-top:16px;text-align:center;font-size:12px;color:var(--text3); }
  .weight-dot { display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px;flex-shrink:0; }
  .weight-dot.w1 { background:var(--normal); }
  .weight-dot.w2 { background:var(--high); }
  .weight-dot.w3 { background:var(--urgent); }
  .weight-pills { display:flex;gap:6px;margin-top:8px; }
  .weight-pill { padding:4px 10px;border-radius:8px;font-size:11px;cursor:pointer;border:1px solid var(--divider);background:transparent;color:var(--text2);font-family:inherit;transition:all 0.15s; }
  .weight-pill.sel { border-color:var(--brand);color:var(--brand);background:var(--brand-muted); }
  .weight-pill:active { transform:scale(0.95); }
  .ramp-indicator { display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:10px;margin-bottom:8px;font-size:12px;color:var(--rest);background:var(--rest-soft); }

  /* ── SUBTASK (MAKE IT TINY) ── */
  .subtask-row { display:flex;align-items:center;gap:8px;padding:4px 0 4px 28px;font-size:12px;color:var(--text2); }
  .subtask-check { width:16px;height:16px;border-radius:4px;border:1.5px solid var(--divider);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.2s; }
  .subtask-check.done { background:var(--success);border-color:var(--success); }
  .subtask-check.done::after { content:'\2713';color:#fff;font-size:10px; }
  .subtask-title { flex:1; }
  .subtask-title.done { text-decoration:line-through;opacity:0.5; }
  .subtask-add { display:flex;align-items:center;gap:6px;padding:6px 0 2px 28px;font-size:12px;color:var(--brand);cursor:pointer;opacity:0.7; }
  .subtask-add:active { opacity:1; }
  .subtask-input-row { display:flex;align-items:center;gap:6px;padding:4px 0 4px 28px; }
  .subtask-input { flex:1;background:var(--surface2);border:1px solid var(--divider);border-radius:8px;padding:6px 10px;font-size:12px;color:var(--text1);outline:none; }
  .subtask-progress { display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text3);padding-left:28px;margin-top:2px; }
  .subtask-progress-bar { flex:1;height:3px;background:var(--divider);border-radius:2px;overflow:hidden; }
  .subtask-progress-fill { height:100%;background:var(--success);border-radius:2px;transition:width 0.3s; }
  .tc-expand { font-size:10px;color:var(--text3);cursor:pointer;margin-left:auto;padding:4px 8px; }

  /* ── REWARD ROULETTE ── */
  .celebrate-ov { position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:9998;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.4s; }
  .celebrate-ov.active { opacity:1;pointer-events:auto; }
  .celebrate-emoji { font-size:72px;animation:celebratePop 0.5s cubic-bezier(0.34,1.56,0.64,1); }
  .celebrate-text { font-family:'DM Serif Display',serif;font-size:22px;color:#fff;margin-top:12px;text-align:center;max-width:280px; }
  .celebrate-sub { font-size:13px;color:rgba(255,255,255,0.5);margin-top:6px; }
  @keyframes celebratePop { 0%{transform:scale(0.3);opacity:0} 100%{transform:scale(1);opacity:1} }

  /* ── CONFETTI CANVAS ── */
  #confettiCanvas { position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998; }

  /* ── STREAK (shared popup text styles) ── */
  .streak-num { font-weight:700;color:var(--brand);font-size:14px; }
  .streak-msg { font-style:italic;color:var(--text3);font-size:12px; }

  /* ── BRAIN DUMP MODE ── */
  .bd-toggle {
    width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:all 0.15s;flex-shrink:0;margin-right:4px;font-size:13px;
    background:transparent;color:var(--text3);border:1.5px solid var(--divider);
  }
  .bd-toggle:active { transform:scale(0.92); }
  .bd-toggle.active { background:var(--brand);color:#fff;border-color:var(--brand); }
  .bd-badge {
    position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;
    font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap;
    opacity:0;transition:opacity 0.2s;pointer-events:none;
  }
  .bd-toggle.active .bd-badge { opacity:1; }

  /* ── JUST START TIMER ── */
  .timer-ov {
    position:absolute;top:0;left:0;right:0;bottom:0;background:var(--bg);z-index:200;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:var(--safe-t) 24px var(--safe-b);
    opacity:0;pointer-events:none;transition:opacity 0.3s;
  }
  .timer-ov.active { opacity:1;pointer-events:auto; }
  .timer-ring {
    width:200px;height:200px;border-radius:50%;position:relative;
    display:flex;align-items:center;justify-content:center;
  }
  .timer-ring svg { position:absolute;top:0;left:0;width:200px;height:200px;transform:rotate(-90deg); }
  .timer-ring circle { fill:none;stroke-width:6;cx:100;cy:100;r:94; }
  .timer-track { stroke:var(--divider); }
  .timer-prog { stroke:var(--brand);stroke-linecap:round;transition:stroke-dashoffset 1s linear; }
  .timer-time { font-size:48px;font-weight:800;color:var(--text1);letter-spacing:-2px;z-index:1; }
  .timer-label { font-size:16px;color:var(--text2);margin-top:12px;font-weight:500; }
  .timer-task { font-size:18px;font-weight:600;color:var(--text1);margin-top:8px;max-width:260px;text-align:center; }
  .timer-btns { display:flex;gap:12px;margin-top:32px; }
  .timer-btn {
    height:48px;padding:0 28px;border-radius:24px;border:none;font-size:15px;font-weight:600;
    cursor:pointer;font-family:inherit;transition:transform 0.12s;
  }
  .timer-btn:active { transform:scale(0.96); }
  .timer-btn-stop { background:var(--surface2);color:var(--text1); }
  .timer-btn-done { background:var(--success);color:#fff; }
  .timer-msg { font-size:14px;color:var(--text3);margin-top:16px;font-style:italic; }

  /* ── THEME PICKER ── */
  .theme-row { display:flex;gap:10px;padding:14px 22px;flex-wrap:wrap; }
  .theme-swatch {
    width:calc(20% - 8px);min-width:56px;height:56px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    cursor:pointer;border:2.5px solid var(--divider);transition:all 0.2s;gap:2px;
  }
  .theme-swatch.sel { border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-muted); }
  .theme-swatch:active { transform:scale(0.95); }
  .ts-name { font-size:10px;font-weight:600;letter-spacing:0.02em; }
  .ts-dots { display:flex;gap:3px; }
  .ts-dot { width:8px;height:8px;border-radius:50%; }

  /* ── SETTINGS PILL PICKER ── */
  .set-pills { display:flex;gap:8px;padding:8px 22px 14px;flex-wrap:wrap; }
  .set-pill {
    height:36px;padding:0 16px;border-radius:18px;border:2px solid var(--divider);
    background:var(--surface);color:var(--text2);font-size:13px;font-weight:600;
    cursor:pointer;font-family:inherit;transition:all 0.2s;
  }
  .set-pill.sel { border-color:var(--brand);color:var(--brand);background:var(--brand-muted); }
  .set-pill:active { transform:scale(0.95); }

  /* ── XP REWARD EDITOR ── */
  .xp-edit-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 22px 14px; }
  .xp-edit-item {
    display:flex;align-items:center;gap:8px;padding:8px 12px;
    border-radius:12px;background:var(--surface);border:1px solid var(--divider);
  }
  .xp-edit-label { font-size:12px;font-weight:600;color:var(--text2);flex:1; }
  .xp-edit-val {
    width:48px;height:32px;border-radius:8px;border:1.5px solid var(--divider);
    text-align:center;font-size:14px;font-weight:700;color:var(--brand);
    background:var(--surface2);font-family:inherit;
  }
  .xp-edit-val:focus { border-color:var(--brand);outline:none; }
  .xp-edit-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }

  /* ── Reward Picker (Onboarding + Settings) ── */
  .reward-grid { display:flex;flex-wrap:wrap;gap:10px;padding:8px 22px 14px;justify-content:center; }
  .reward-chip { display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:20px;border:2px solid var(--divider);background:var(--surface);cursor:pointer;transition:all 0.2s;font-size:13px;font-weight:500;color:var(--text2);font-family:inherit; }
  .reward-chip.sel { border-color:var(--brand);background:var(--brand-muted);color:var(--brand);font-weight:600; }
  .reward-chip .reward-emoji { font-size:16px;line-height:1; }
  .reward-add-row { display:flex;gap:8px;padding:4px 22px 14px; }
  .reward-add-input { flex:1;height:40px;border-radius:20px;border:2px solid var(--divider);padding:0 16px;font-size:13px;font-family:inherit;color:var(--text1);background:var(--surface); }
  .reward-add-input:focus { border-color:var(--brand);outline:none; }
  .reward-add-btn { height:40px;width:40px;border-radius:50%;border:none;background:var(--brand);color:#fff;font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
  .reward-limit-toast { position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--text1);color:var(--bg);padding:10px 20px;border-radius:14px;font-size:13px;font-weight:600;font-family:inherit;z-index:9998;opacity:0;pointer-events:none;transition:all 0.3s ease;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,0.2); }
  .reward-limit-toast.show { opacity:1;transform:translateX(-50%) translateY(0); }

  /* ── Reward Celebration Overlay ── */
  .reward-ov { position:fixed;inset:0;background:rgba(0,0,0,0.85);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;opacity:0;pointer-events:none;transition:opacity 0.4s; }
  .reward-ov.active { opacity:1;pointer-events:auto; }
  .reward-ov-badge { font-size:14px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:0.15em;margin-bottom:12px;opacity:0;transform:translateY(10px);transition:all 0.5s 0.2s; }
  .reward-ov.active .reward-ov-badge { opacity:1;transform:translateY(0); }
  .reward-ov-emoji { font-size:80px;margin-bottom:16px;opacity:0;transform:scale(0.3);transition:all 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.3s; }
  .reward-ov.active .reward-ov-emoji { opacity:1;transform:scale(1); }
  .reward-ov-name { font-family:'DM Serif Display',serif;font-size:28px;color:#fff;margin-bottom:8px;opacity:0;transform:translateY(10px);transition:all 0.5s 0.5s; }
  .reward-ov.active .reward-ov-name { opacity:1;transform:translateY(0); }
  .reward-ov-sub { font-size:14px;color:rgba(255,255,255,0.6);margin-bottom:32px;opacity:0;transition:opacity 0.5s 0.7s; }
  .reward-ov.active .reward-ov-sub { opacity:1; }
  .reward-ov-btn { padding:14px 40px;border-radius:16px;border:none;background:var(--brand);color:#fff;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;opacity:0;transform:translateY(10px);transition:all 0.4s 0.8s; }
  .reward-ov.active .reward-ov-btn { opacity:1;transform:translateY(0); }

  /* ── Onb4 (Rewards Picker) ── */
  .onb4 { display:flex;flex-direction:column;height:100%;padding:20px 0;overflow-y:auto; }
  .onb4-hl { font-family:'DM Serif Display',serif;font-size:26px;color:var(--text1);text-align:center;padding:0 22px;margin-top:24px; }
  .onb4-sub { font-size:14px;color:var(--text2);text-align:center;padding:8px 32px 20px;line-height:1.5; }
  .onb4-grid { display:flex;flex-wrap:wrap;gap:10px;padding:0 22px;justify-content:center; }
  .onb4-chip { display:flex;align-items:center;gap:6px;padding:10px 16px;border-radius:22px;border:2px solid var(--divider);background:var(--surface);cursor:pointer;transition:all 0.25s;font-size:14px;font-weight:500;color:var(--text2);font-family:inherit; }
  .onb4-chip.sel { border-color:var(--brand);background:var(--brand-muted);color:var(--brand);font-weight:600;transform:scale(1.04); }
  .onb4-chip .r-emoji { font-size:18px; }
  .onb4-custom-row { display:flex;gap:8px;padding:16px 22px 12px; }
  .onb4-custom-input { flex:1;height:44px;border-radius:22px;border:2px solid var(--divider);padding:0 18px;font-size:14px;font-family:inherit;color:var(--text1);background:var(--surface); }
  .onb4-custom-input:focus { border-color:var(--brand);outline:none; }
  .onb4-custom-btn { height:44px;width:44px;border-radius:50%;border:none;background:var(--brand);color:#fff;font-size:20px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0; }

  /* ── Templates Quick-Add ── */
  .tpl-sheet { position:fixed;inset:0;z-index:900;pointer-events:none; }
  .tpl-sheet.open { pointer-events:auto; }
  .tpl-backdrop { position:absolute;inset:0;background:rgba(0,0,0,0.4);opacity:0;transition:opacity 0.3s; }
  .tpl-sheet.open .tpl-backdrop { opacity:1; }
  .tpl-panel { position:absolute;bottom:0;left:0;right:0;background:var(--bg);border-radius:20px 20px 0 0;padding:0 0 env(safe-area-inset-bottom,34px);transform:translateY(100%);transition:transform 0.35s cubic-bezier(0.32,0.72,0,1);max-height:75vh;overflow-y:auto; }
  .tpl-sheet.open .tpl-panel { transform:translateY(0); }
  .tpl-handle { width:36px;height:4px;border-radius:2px;background:var(--divider);margin:10px auto 6px; }
  .tpl-title { font-family:'DM Serif Display',serif;font-size:20px;color:var(--text1);padding:8px 22px 4px; }
  .tpl-sub { font-size:12px;color:var(--text3);padding:0 22px 14px; }
  .tpl-list { display:flex;flex-direction:column;gap:10px;padding:0 22px 20px; }
  .tpl-card { display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--surface);border:1.5px solid var(--divider);cursor:pointer;transition:all 0.2s; }
  .tpl-card:active { transform:scale(0.97);border-color:var(--brand); }
  .tpl-card-icon { width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0; }
  .tpl-card-info { flex:1;min-width:0; }
  .tpl-card-name { font-size:15px;font-weight:600;color:var(--text1); }
  .tpl-card-desc { font-size:12px;color:var(--text3);margin-top:2px; }
  .tpl-card-count { font-size:11px;font-weight:600;color:var(--brand);background:var(--brand-muted);padding:4px 10px;border-radius:10px;white-space:nowrap; }
  .tpl-added { position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--brand);color:#fff;padding:10px 24px;border-radius:14px;font-size:14px;font-weight:600;opacity:0;transition:all 0.3s;pointer-events:none;z-index:950;white-space:nowrap; }
  .tpl-added.show { opacity:1;transform:translateX(-50%) translateY(0); }
  .tpl-btn { width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text3);transition:color 0.2s; }

  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

  html, body {
    height: 100%;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    background: #000;
    -webkit-font-smoothing: antialiased;
  }

  .desktop-wrap {
    display: flex; align-items: center; justify-content: center;
    height: 100vh;
    height: 100dvh;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 50%, #16213e 100%);
  }

  .phone-frame {
    width: 390px; height: 844px;
    border-radius: 54px; border: 6px solid #1a1a1a;
    overflow: hidden; position: relative;
    box-shadow: 0 0 0 2px #333, 0 40px 80px rgba(0,0,0,0.7), 0 0 120px rgba(var(--brand-rgb),0.08);
    background: var(--bg);
  }

  .dynamic-island {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    width: 126px; height: 36px; background: #000; border-radius: 24px; z-index: 1000;
  }

  .status-bar {
    position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 999;
    display: flex; align-items: flex-end; justify-content: space-between;
    padding: 0 32px 6px; font-size: 14px; font-weight: 600;
  }
  .status-bar.light { color: #fff; }
  .status-bar.dark { color: var(--text1); }
  .status-bar-right { display: flex; align-items: center; gap: 5px; font-size: 13px; }
  .battery {
    width: 25px; height: 12px; border: 1.5px solid currentColor; border-radius: 3px;
    position: relative; display: flex; align-items: center; padding: 1.5px;
  }
  .battery::after {
    content: ''; position: absolute; right: -4px; top: 50%; transform: translateY(-50%);
    width: 2px; height: 5px; background: currentColor; border-radius: 0 1px 1px 0;
  }
  .battery-fill { width: 80%; height: 100%; background: currentColor; border-radius: 1px; }

  .screen {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: translateX(24px); overflow: hidden;
  }
  .screen.active { opacity: 1; pointer-events: auto; transform: translateX(0); }
  .screen.exit-left { opacity: 0; transform: translateX(-24px); }

  /* -- ONB 1 -- */
  .onb1 {
    background: linear-gradient(155deg, #1A0F18 0%, #3D2435 25%, #7B506F 65%, #A88B9E 100%);
    display: flex; flex-direction: column; padding: 0 28px 48px;
    padding-bottom: calc(48px + var(--safe-b));
    position: relative; overflow: hidden; width: 100%; height: 100%;
  }
  .onb1-orbs { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; }
  .onb1-orb { position: absolute; border-radius: 50%; filter: blur(40px); animation: orbFloat 8s ease-in-out infinite; }
  .onb1-orb:nth-child(1) { width:300px;height:300px;background:rgba(168,139,158,0.18);top:-80px;left:-60px; }
  .onb1-orb:nth-child(2) { width:200px;height:200px;background:rgba(255,255,255,0.05);bottom:200px;right:-40px;animation-delay:-3s; }
  .onb1-orb:nth-child(3) { width:150px;height:150px;background:rgba(var(--brand-rgb),0.12);top:40%;left:60%;animation-delay:-5s; }
  @keyframes orbFloat {
    0%,100%{transform:translate(0,0)scale(1)} 33%{transform:translate(10px,-15px)scale(1.05)} 66%{transform:translate(-8px,10px)scale(0.95)}
  }
  .onb1-spacer { flex: 1; min-height: 80px; }
  .onb1-logo-wrap { display:flex;align-items:center;justify-content:center;flex:0.6; }
  .onb1-logo {
    width:80px;height:80px;border-radius:22px;background:rgba(255,255,255,0.12);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,0.18);display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 32px rgba(0,0,0,0.15);
  }
  .onb1-logo svg { width:36px;height:36px;opacity:0.95; }
  .onb1-content { position:relative;z-index:2; }
  .onb1-headline { font-family:'DM Serif Display',serif;font-size:32px;font-weight:400;color:#fff;line-height:1.2;margin-bottom:14px;letter-spacing:-0.3px; }
  .onb1-sub { font-size:16px;color:rgba(255,255,255,0.7);line-height:1.55;margin-bottom:36px; }
  .onb1-sub strong { color:rgba(255,255,255,0.95);font-weight:600; }

  .btn-w {
    width:100%;height:54px;background:#fff;color:var(--brand);font-size:16px;font-weight:600;
    border:none;border-radius:14px;display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;
    box-shadow:0 4px 20px rgba(44,36,32,0.12);letter-spacing:-0.2px;position:relative;z-index:5;font-family:inherit;
  }
  .btn-w:active { transform:scale(0.97);box-shadow:0 2px 12px rgba(44,36,32,0.15); }
  .btn-b {
    width:100%;height:54px;background:var(--brand);color:#fff;font-size:17px;font-weight:600;
    border:none;border-radius:14px;display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;
    box-shadow:0 4px 20px rgba(var(--brand-rgb),0.3);letter-spacing:-0.2px;font-family:inherit;
  }
  .btn-b:active { transform:scale(0.97);background:var(--brand-dark); }
  .btn-b.disabled { opacity:0.35;pointer-events:none; }

  .page-dots { display:flex;gap:7px;justify-content:center;margin-top:24px;position:relative;z-index:5; }
  .dot { width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.3);transition:all 0.3s; }
  .dot.active { background:#fff;width:22px;border-radius:4px; }
  .dot.dk { background:rgba(0,0,0,0.12); }
  .dot.dk.active { background:var(--brand); }

  /* -- ONB 2 -- */
  .onb2 { background:var(--bg);display:flex;flex-direction:column;padding:64px 24px 40px;padding-bottom:calc(40px + var(--safe-b));width:100%;height:100%; }
  .onb2-headline { font-family:'DM Serif Display',serif;font-size:28px;font-weight:400;color:var(--text1);line-height:1.25;margin-bottom:6px;letter-spacing:-0.2px; }
  .onb2-sub { font-size:15px;color:var(--text2);margin-bottom:24px; }
  .demo-card { background:var(--surface);border-radius:18px;padding:18px;box-shadow:0 2px 16px rgba(0,0,0,0.06);margin-bottom:24px; }
  .demo-input { background:var(--surface2);border-radius:12px;padding:12px 16px;font-size:16px;color:var(--text1);min-height:44px;display:flex;align-items:center;margin-bottom:16px;font-family:inherit;letter-spacing:-0.2px; }
  .tcur { display:inline-block;width:2px;height:18px;background:var(--brand);margin-left:1px;animation:blink 1s step-end infinite;vertical-align:middle; }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
  .plr { font-size:11px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px; }
  .pf { display:flex;align-items:center;gap:8px;margin-bottom:6px;opacity:0;transform:translateY(4px);transition:opacity 0.25s,transform 0.25s; }
  .pf.vis { opacity:1;transform:translateY(0); }
  .pk { font-size:12px;color:var(--text2);width:54px;flex-shrink:0;font-weight:500; }
  .pv { font-size:13px;font-weight:500;padding:3px 10px;border-radius:7px; }
  .pv.bl { background:rgba(var(--brand-rgb),0.08);color:var(--brand); }
  .pv.or { background:rgba(var(--high-rgb),0.08);color:var(--high); }
  .pv.rd { background:rgba(var(--urgent-rgb),0.08);color:var(--urgent); }
  .pv.gn { background:rgba(var(--brand-rgb),0.08);color:var(--normal); }
  .onb2-tag { font-size:15px;color:var(--text2);line-height:1.5;margin-bottom:28px; }

  /* -- ONB 3 -- */
  .onb3 { background:var(--bg);display:flex;flex-direction:column;padding:64px 24px 40px;padding-bottom:calc(40px + var(--safe-b));width:100%;height:100%; }
  .onb3-hl { font-family:'DM Serif Display',serif;font-size:28px;font-weight:400;color:var(--text1);letter-spacing:-0.2px;margin-bottom:6px; }
  .onb3-sub { font-size:15px;color:var(--text2);line-height:1.5;margin-bottom:24px; }
  .real-input {
    width:100%;background:var(--surface);border:2px solid var(--brand);border-radius:16px;
    padding:16px 18px;font-size:16px;color:var(--text1);font-family:inherit;letter-spacing:-0.2px;
    outline:none;box-shadow:0 0 0 4px rgba(var(--brand-rgb),0.08);margin-bottom:12px;
  }
  .real-input::placeholder { color:var(--text3); }
  .parse-box {
    background:rgba(var(--brand-rgb),0.05);border-radius:14px;
    margin-bottom:20px;border:1px solid rgba(var(--brand-rgb),0.12);
    max-height:0;overflow:hidden;opacity:0;transition:max-height 0.3s ease,opacity 0.25s ease,padding 0.3s ease,margin 0.3s ease;
    padding:0 16px;margin-bottom:0;
  }
  .parse-box.show { max-height:200px;opacity:1;padding:14px 16px;margin-bottom:20px; }
  .skip-link { text-align:right;font-size:14px;color:var(--text2);margin-top:8px;cursor:pointer; }
  .skip-link:active { color:var(--text1); }

  /* -- HOME -- */
  .home { background:var(--bg);display:flex;flex-direction:column;height:100%;position:relative; }
  .home-nav {
    display:flex;align-items:center;justify-content:space-between;padding:58px 22px 12px;
    background:rgba(250,248,245,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:0.5px solid var(--divider);
  }
  .home-title { font-size:20px;font-weight:700;color:var(--text1);letter-spacing:-0.3px; }
  .home-fl { padding:14px 22px 8px;font-size:16px;font-weight:600;color:var(--text1);letter-spacing:-0.2px; }

  .tl { flex:1;min-height:0;padding:4px 16px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch; }
  .tl > * { flex-shrink:0; }

  .tc {
    background:var(--surface);border-radius:16px;padding:17px 18px;display:flex;align-items:center;gap:14px;
    box-shadow:0 1px 2px rgba(44,36,32,0.06),0 4px 16px rgba(44,36,32,0.03);
    cursor:pointer;transition:transform 0.12s,box-shadow 0.12s;position:relative;
  }
  .tc:active { transform:scale(0.98);box-shadow:0 1px 2px rgba(0,0,0,0.06); }
  .tc.over { border-left:3px solid var(--urgent);padding-left:13px; }
  .tc.done { opacity:0.45; }
  .tc.done .tc-t { text-decoration:line-through; }
  .tc.new-task { animation:slideUp 0.35s ease both; }
  @keyframes slideUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

  .pi { width:11px;height:11px;flex-shrink:0; }
  .pi-u { background:var(--urgent);border-radius:50%;box-shadow:0 0 6px rgba(var(--urgent-rgb),0.3); }
  .pi-h { background:var(--high);border-radius:2.5px; }
  .pi-n { background:transparent;border:2px solid var(--normal);border-radius:50%; }
  .pi-l { }
  .pi-d { color:var(--success);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;width:11px; }

  .tc-c { flex:1;min-width:0; }
  .tc-t { font-size:16px;color:var(--text1);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;letter-spacing:-0.2px; }
  .tc-d { font-size:12px;color:var(--text2); }
  .tc-d.over { color:var(--urgent);font-weight:500; }

  /* INPUT BAR — with safe area for Android nav */
  .ib {
    padding: 10px 16px calc(28px + var(--safe-b));
    padding-bottom: calc(28px + var(--safe-b));
    background:var(--bg);border-top:0.5px solid var(--divider);position:relative;z-index:5;
  }
  @supports not (padding-bottom: env(safe-area-inset-bottom)) {
    .ib { padding-bottom: 48px; }
  }
  .ib-inner {
    background:var(--surface);border-radius:24px;height:44px;display:flex;align-items:center;
    padding:0 6px 0 18px;box-shadow:0 1px 3px rgba(0,0,0,0.04);border:1px solid var(--divider);
    cursor:pointer;transition:border-color 0.2s;
  }
  .ib-inner.focused { border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),0.1); }
  .ib-ph { flex:1;font-size:15px;color:var(--text3);letter-spacing:-0.1px; }
  .ib-inp { flex:1;font-size:15px;color:var(--text1);letter-spacing:-0.1px;border:none;outline:none;background:transparent;font-family:inherit;width:100%; }
  .ib-inp::placeholder { color:var(--text3); }
  .ib-mic {
    width:34px;height:34px;background:transparent;border-radius:50%;display:flex;
    align-items:center;justify-content:center;cursor:pointer;transition:all 0.15s;flex-shrink:0;
  }
  .ib-mic:active { background:var(--surface2); }
  .ib-mic svg { width:18px;height:18px;color:var(--text2); }
  .ib-mic i { color:var(--text2); }
  .ib-mic.recording { background:rgba(var(--urgent-rgb),0.1); }
  .ib-mic.recording svg, .ib-mic.recording i { color:var(--urgent); }
  @keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
  .ib-mic.recording { animation:pulse 1s ease infinite; }

  /* Home parse preview */
  .home-parse {
    background:var(--surface);border-radius:14px;padding:0 16px;margin:0 16px 0;
    border:1px solid rgba(var(--brand-rgb),0.15);box-shadow:0 4px 16px rgba(0,0,0,0.06);
    max-height:0;overflow:hidden;opacity:0;transition:all 0.25s ease;
  }
  .home-parse.show { max-height:250px;opacity:1;padding:14px 16px;margin-bottom:8px; }
  .home-parse-actions { display:flex;gap:8px;margin-top:12px; }
  .hpa-add {
    flex:1;height:42px;background:var(--brand);color:#fff;border:none;border-radius:14px;
    font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:transform 0.12s;
  }
  .hpa-add:active { transform:scale(0.97); }
  .hpa-add.disabled { opacity:0.35;pointer-events:none; }
  .hpa-cancel {
    height:42px;padding:0 16px;background:var(--surface2);color:var(--text2);border:none;border-radius:14px;
    font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;transition:transform 0.12s;
  }
  .hpa-cancel:active { transform:scale(0.97); }

  .home-indicator {
    position:absolute;bottom:calc(8px + var(--safe-b));left:50%;transform:translateX(-50%);
    width:134px;height:5px;background:var(--text1);border-radius:3px;opacity:0.18;z-index:1000;
  }

  /* Suggestion */
  .sg { background:var(--brand-muted);border-radius:14px;padding:14px 16px;border:1px solid rgba(var(--brand-rgb),0.15);display:flex;align-items:flex-start;gap:10px; }
  .sg-i { font-size:16px;margin-top:1px; }
  .sg-c { flex:1; }
  .sg-t { font-size:14px;color:var(--text1);line-height:1.4;margin-bottom:10px; }
  .sg-b { display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 14px;background:var(--brand);color:#fff;font-size:13px;font-weight:600;border-radius:20px;cursor:pointer;border:none;transition:transform 0.12s;font-family:inherit; }
  .sg-b:active { transform:scale(0.95); }

  /* Detail sheet */
  .det-ov { position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);z-index:50;pointer-events:none;transition:background 0.3s; }
  .det-ov.open { background:rgba(0,0,0,0.45);pointer-events:auto; }
  .det-sh {
    position:absolute;bottom:0;left:0;right:0;background:var(--surface);
    border-radius:28px 28px 0 0;transform:translateY(100%);
    transition:transform 0.35s cubic-bezier(0.32,0.72,0,1);z-index:51;max-height:85%;overflow-y:auto;
    padding-bottom: var(--safe-b);
  }
  .det-ov.open .det-sh { transform:translateY(0); }
  .sh-hw { display:flex;justify-content:center;padding:10px 0 8px; }
  .sh-h { width:36px;height:5px;background:var(--divider);border-radius:3px; }
  .det-bd { padding:4px 22px 40px; }
  .det-badge { display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;padding:4px 12px;border-radius:8px;margin-bottom:12px; }
  .db-u { background:rgba(var(--urgent-rgb),0.08);color:var(--urgent); }
  .db-h { background:rgba(var(--high-rgb),0.08);color:var(--high); }
  .db-n { background:rgba(var(--brand-rgb),0.08);color:var(--normal); }
  .db-l { background:rgba(142,142,147,0.08);color:#8E8E93; }
  .det-tt { font-size:24px;font-weight:700;color:var(--text1);line-height:1.25;margin-bottom:20px;letter-spacing:-0.5px; }
  .det-tt-editable { cursor:pointer; }
  .det-tt-editable .det-tt-hint { font-size:10px;color:var(--text3);margin-left:6px;opacity:0.7;vertical-align:middle; }
  .inline-title-input { width:100%;background:var(--surface2);border:1.5px solid var(--brand);border-radius:12px;padding:10px 14px;font-size:22px;font-weight:700;color:var(--text1);font-family:inherit;outline:none;margin-bottom:20px;letter-spacing:-0.5px;box-shadow:0 0 0 3px rgba(var(--brand-rgb),0.08);animation:inlineReveal 0.2s ease both; }
  .det-edit-all { font-size:13px;color:var(--text3);cursor:pointer;text-align:center;margin-top:10px;letter-spacing:-0.1px; }
  .det-edit-all:active { color:var(--brand); }
  .det-meta { display:flex;flex-direction:column;gap:12px;margin-bottom:20px; }
  .dm-r { display:flex;align-items:center;gap:10px; }
  .dm-i { width:36px;height:36px;background:var(--surface2);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0; }
  .dm-tx { display:flex;flex-direction:column; }
  .dm-l { font-size:12px;color:var(--text3);font-weight:500; }
  .dm-v { font-size:15px;color:var(--text1);font-weight:500;letter-spacing:-0.1px; }
  .det-div { height:1px;background:var(--divider);margin:4px 0 20px; }
  .det-n { font-size:14px;color:var(--text2);line-height:1.5;margin-bottom:8px; }
  .det-cr { font-size:12px;color:var(--text3);margin-bottom:24px; }
  .det-acts { display:flex;gap:10px; }
  .da-c { flex:1;height:52px;background:var(--success);color:#fff;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-weight:600;cursor:pointer;transition:transform 0.12s;border:none;font-family:inherit; }
  .da-c:active { transform:scale(0.97); }
  .da-e { flex:1;height:52px;background:var(--surface2);color:var(--text1);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;cursor:pointer;transition:transform 0.12s;border:none;font-family:inherit; }
  .da-e:active { transform:scale(0.97); }
  .da-del { flex:1;height:52px;background:rgba(var(--urgent-rgb),0.08);color:var(--urgent);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;cursor:pointer;transition:transform 0.12s;border:none;font-family:inherit; }
  .da-del:active { transform:scale(0.97); }

  /* Edit mode inputs */
  .edit-field { width:100%;background:var(--surface2);border:1.5px solid var(--divider);border-radius:12px;padding:12px 16px;font-size:16px;color:var(--text1);font-family:inherit;outline:none;margin-bottom:12px;letter-spacing:-0.2px;color-scheme:dark light; }
  .edit-field:focus { border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),0.08); }
  .edit-label { font-size:12px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:6px; }
  .priority-chips { display:flex;gap:8px;margin-bottom:16px; }
  .p-chip {
    flex:1;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;
    font-size:13px;font-weight:600;cursor:pointer;border:2px solid var(--divider);background:var(--surface);
    transition:all 0.15s;font-family:inherit;
  }
  .p-chip:active { transform:scale(0.96); }
  .p-chip.sel { border-color:var(--brand);background:rgba(var(--brand-rgb),0.06); }
  .p-chip-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }

  /* Settings overlay */
  .settings-ov {
    position:absolute;top:0;left:0;right:0;bottom:0;background:var(--bg);
    z-index:100;transform:translateX(100%);transition:transform 0.35s cubic-bezier(0.32,0.72,0,1);
    overflow-y:auto;
  }
  .settings-ov.open { transform:translateX(0); }
  .set-hdr { display:flex;align-items:center;gap:12px;padding:58px 22px 16px;border-bottom:0.5px solid var(--divider); }
  .set-back { width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;transition:background 0.15s;padding:6px; }
  .set-back:active { background:var(--surface2); }
  .set-title { font-size:20px;font-weight:700;color:var(--text1);letter-spacing:-0.3px; }
  .set-section { padding:20px 22px 8px;font-size:12px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em; }
  .set-item {
    display:flex;align-items:center;justify-content:space-between;padding:14px 22px;
    border-bottom:0.5px solid var(--divider);
  }
  .set-item-left { display:flex;flex-direction:column; }
  .set-item-label { font-size:16px;color:var(--text1);font-weight:400;letter-spacing:-0.2px; }
  .set-item-desc { font-size:13px;color:var(--text3);margin-top:2px; }
  .toggle {
    width:51px;height:31px;border-radius:16px;background:var(--divider);position:relative;
    cursor:pointer;transition:background 0.25s;flex-shrink:0;
  }
  .toggle.on { background:var(--brand); }
  .toggle-knob {
    width:27px;height:27px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;
    transition:transform 0.25s;box-shadow:0 1px 3px rgba(0,0,0,0.15);
  }
  .toggle.on .toggle-knob { transform:translateX(20px); }
  .set-item-arrow { color:var(--text3);font-size:18px; }
  .set-version { text-align:center;padding:32px;font-size:13px;color:var(--text3); }

  /* ── HAMBURGER DRAWER ── */
  .hamburger {
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    cursor:pointer;border-radius:50%;transition:background 0.15s;flex-shrink:0;padding:6px;
  }
  .hamburger:active { background:var(--surface2); }
  .hamburger svg { width:22px;height:22px;color:var(--text1); }
  .home-logo-wrap {
    width: 34px; height: 34px;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    border-radius: 10px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.3s ease;
    box-shadow: 0 2px 8px rgba(var(--brand-rgb),0.3);
  }
  .home-logo-w {
    width: 22px; height: 22px;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
  }
  .drawer-backdrop {
    position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);
    z-index:300;pointer-events:none;transition:background 0.3s;
  }
  .drawer-backdrop.open { background:rgba(0,0,0,0.45);pointer-events:auto; }
  .drawer {
    position:absolute;top:0;left:0;bottom:0;width:75%;max-width:300px;
    background:var(--surface);z-index:301;transform:translateX(-100%);
    transition:transform 0.3s cubic-bezier(0.32,0.72,0,1);
    display:flex;flex-direction:column;overflow-y:auto;
    box-shadow:4px 0 24px rgba(0,0,0,0.12);
  }
  .drawer-backdrop.open .drawer { transform:translateX(0); }
  .drawer-header {
    padding:64px 22px 20px;border-bottom:0.5px solid var(--divider);
  }
  .drawer-level { font-size:13px;font-weight:600;color:var(--brand);letter-spacing:0.02em; }
  .drawer-name { display:flex;align-items:center;gap:8px;font-size:20px;font-weight:700;color:var(--text1);margin-top:4px;letter-spacing:-0.3px; }
  .drawer-logo-w { width:24px;height:24px;flex-shrink:0; }
  .drawer-menu { padding:12px 0;flex:1; }
  .drawer-item {
    display:flex;align-items:center;gap:14px;padding:14px 22px;
    cursor:pointer;transition:background 0.15s;
    -webkit-tap-highlight-color:transparent;
  }
  .drawer-item:active { background:var(--surface2); }
  .drawer-item.active { background:var(--brand-muted); }
  .drawer-item-icon { font-size:17px;width:24px;text-align:center;color:var(--text2); }
  .drawer-item.active .drawer-item-icon { color:var(--brand); }
  .drawer-item-label { font-size:16px;color:var(--text1);font-weight:400;letter-spacing:-0.2px; }
  .drawer-item.active .drawer-item-label { color:var(--brand);font-weight:600; }
  .drawer-footer { padding:16px 22px;border-top:0.5px solid var(--divider); }
  .drawer-footer-text { font-size:12px;color:var(--text3);text-align:center; }
  /* Drawer items are always opacity:1 and tappable. The drawer panel itself slides in. */
  .drawer-divider { height:1px;background:var(--divider);margin:8px 22px; }
  .drawer-mode-dot {
    width:8px;height:8px;border-radius:50%;background:var(--brand);
    margin-left:auto;opacity:0;transition:opacity 0.2s;flex-shrink:0;
  }
  .drawer-mode-dot.on { opacity:1; }
  .drawer-item.drawer-mode-item.active .drawer-mode-dot { opacity:1; }

  /* ── DONE SCREEN (Ta-Da!) ── */
  .done-screen { background:var(--bg);display:flex;flex-direction:column;height:100%; }
  .done-header { padding:58px 22px 12px;border-bottom:0.5px solid var(--divider);display:flex;align-items:center;gap:12px;background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); }
  .done-back { width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;transition:background 0.15s; }
  .done-back:active { background:var(--surface2); }
  .done-back svg { width:20px;height:20px;color:var(--brand); }
  .done-title { font-size:20px;font-weight:700;color:var(--text1);letter-spacing:-0.3px; }
  .done-count { font-size:14px;color:var(--text2);padding:14px 22px 8px; }
  .done-list { flex:1;padding:4px 16px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch; }
  .done-empty { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center; }
  .done-empty-icon { font-size:48px;margin-bottom:12px; }
  .done-empty-text { font-size:16px;color:var(--text2);line-height:1.5; }
  .tada-hero { padding:20px 22px 16px;text-align:center; }
  .tada-count-big { font-size:48px;font-weight:800;color:var(--brand);letter-spacing:-2px;line-height:1; }
  .tada-label { font-size:14px;color:var(--text2);margin-top:4px; }
  .tada-msg { font-size:15px;font-weight:600;color:var(--text1);margin-top:10px;font-family:'DM Serif Display',serif; }
  .tada-today-badge { display:inline-flex;align-items:center;gap:6px;background:var(--brand-muted);color:var(--brand);font-size:12px;font-weight:600;padding:5px 12px;border-radius:20px;margin-top:10px; }
  .done-section-label { font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;padding:12px 22px 4px; }

  /* ── STATS SCREEN ── */
  .stats-screen { background:var(--bg);display:flex;flex-direction:column;height:100%; }
  .stats-header { padding:58px 22px 12px;border-bottom:0.5px solid var(--divider);display:flex;align-items:center;gap:12px;background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); }
  .stats-body { flex:1;padding:20px 22px;overflow-y:auto;-webkit-overflow-scrolling:touch; }
  .stats-level-card {
    background:var(--surface);border-radius:20px;padding:24px;
    box-shadow:0 2px 16px rgba(0,0,0,0.06);margin-bottom:16px;text-align:center;
  }
  .stats-level-num { font-size:48px;font-weight:800;color:var(--brand);letter-spacing:-2px; }
  .stats-level-title { font-size:18px;font-weight:600;color:var(--text1);margin-top:4px;font-family:'DM Serif Display',serif; }
  .stats-xp-bar { height:8px;background:var(--surface2);border-radius:4px;margin-top:12px;overflow:hidden; }
  .stats-xp-fill { height:100%;background:var(--brand);border-radius:4px;transition:width 0.6s ease; }
  .stats-xp-text { font-size:13px;color:var(--text2);margin-top:6px; }
  .stats-row { display:flex;gap:12px;margin-bottom:16px; }
  .stats-card {
    flex:1;background:var(--surface);border-radius:16px;padding:18px;
    box-shadow:0 1px 8px rgba(0,0,0,0.04);text-align:center;
  }
  .stats-card-icon { font-size:24px;margin-bottom:6px; }
  .stats-card-val { font-size:28px;font-weight:800;color:var(--text1);letter-spacing:-1px; }
  .stats-card-label { font-size:12px;color:var(--text2);margin-top:2px; }
  .stats-section-title { font-size:12px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:10px;margin-top:8px; }
  .stats-heatmap { display:flex;gap:8px;justify-content:space-between;margin-bottom:20px;background:var(--surface);border-radius:14px;padding:16px; }
  .stats-heatmap-day { display:flex;flex-direction:column;align-items:center;gap:6px; }
  .stats-heatmap-dot { width:28px;height:28px;border-radius:50%;background:var(--surface2);transition:background 0.3s; }
  .stats-heatmap-dot.filled { background:var(--brand); }
  .stats-heatmap-label { font-size:11px;color:var(--text3);font-weight:500; }
  .stats-badges-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px; }
  .stats-badge-card {
    background:var(--surface);border-radius:14px;padding:16px;text-align:center;
    box-shadow:0 1px 4px rgba(0,0,0,0.04);position:relative;
  }
  .stats-badge-card.locked { opacity:0.5; }
  .stats-badge-card.locked .stats-badge-icon { filter:blur(3px); }
  .stats-badge-icon { font-size:28px;margin-bottom:4px; }
  .stats-badge-name { font-size:13px;font-weight:600;color:var(--text1); }
  .stats-badge-desc { font-size:11px;color:var(--text3);margin-top:2px; }
  .stats-motivational { text-align:center;font-size:14px;color:var(--text2);font-style:italic;padding:12px 0 24px; }

  /* ── ADHD GUIDE SCREEN ── */
  .guide-screen { background:var(--bg);display:flex;flex-direction:column;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom,34px); }
  .guide-screen > * { flex-shrink:0; }
  .guide-sticky { position:sticky;top:0;z-index:10;background:var(--bg); }
  .guide-header {
    display:flex;align-items:center;gap:12px;padding:58px 22px 12px;
    border-bottom:0.5px solid var(--divider);
  }
  .guide-nav { display:flex;gap:6px;padding:10px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-bottom:0.5px solid var(--divider);scrollbar-width:none; }
  .guide-nav::-webkit-scrollbar { display:none; }
  .guide-nav-pill { flex-shrink:0;display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:20px;background:var(--surface);border:1px solid var(--divider);font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;white-space:nowrap;transition:background 0.15s; }
  .guide-nav-pill:active { background:var(--brand-muted); }
  .guide-nav-pill i { font-size:10px;color:var(--brand); }
  .guide-back { width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;transition:background 0.15s; }
  .guide-back:active { background:var(--surface2); }
  .guide-title { font-family:'DM Serif Display',serif;font-size:22px;color:var(--text1); }
  .guide-intro { padding:16px 22px 20px;font-size:14px;color:var(--text2);line-height:1.6; }
  .guide-card { margin:0 16px 16px;background:var(--surface);border:1px solid var(--divider);border-left:3px solid var(--brand);border-radius:16px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.04); }
  .guide-card-header { display:flex;align-items:center;gap:14px;padding:16px 18px; }
  .guide-card-body { padding:20px 24px 24px;border-top:1px solid var(--divider); }
  .guide-disclaimer { margin:0 16px 20px;padding:14px 18px;font-size:12px;color:var(--text3);line-height:1.6;background:var(--surface);border-left:3px solid var(--high);border-radius:10px; }
  .guide-resources { margin:8px 16px 24px;padding:20px 22px;background:var(--surface);border:1px solid var(--divider);border-radius:16px; }
  .guide-resources-title { font-size:16px;font-weight:600;color:var(--text1);margin-bottom:16px; }
  .guide-resources-country { font-size:12px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:0.4px;margin:16px 0 8px; }
  .guide-resources-title + .guide-resources-country { margin-top:0; }
  .guide-section-label { display:flex;align-items:center;gap:6px;color:var(--brand);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;margin-bottom:4px; }
  .guide-section-label i { font-size:11px; }
  .guide-card-icon {
    width:40px;height:40px;border-radius:12px;background:var(--brand-muted);
    display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--brand);flex-shrink:0;
  }
  .guide-card-name { font-size:17px;font-weight:600;color:var(--text1); }
  .guide-card-tagline { font-size:12px;color:var(--text3);margin-top:1px; }
  .guide-what, .guide-when, .guide-why { font-size:14px;color:var(--text2);line-height:1.6;margin-bottom:12px; }
  .guide-sub { font-size:13px;color:var(--text2);line-height:1.6;margin:8px 0 8px 12px;padding-left:10px;border-left:2px solid var(--brand-muted); }
  .guide-sources { margin-top:16px;padding-top:12px;border-top:1px solid var(--surface2); }
  .guide-source-label { font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px; }
  .guide-link { display:flex;align-items:center;gap:6px;font-size:13px;color:var(--brand);text-decoration:none;padding:6px 0; }
  .guide-link i { font-size:10px;opacity:0.6; }
  .guide-footer { text-align:center;padding:32px 22px calc(32px + env(safe-area-inset-bottom, 34px));font-size:13px;color:var(--text3);line-height:1.8; }

  /* ── DAY RHYTHM ── */
  .rhythm-phase { font-size:11px;font-style:italic;color:var(--text3);margin-left:auto; }
  .rhythm-msg { font-size:14px;color:var(--text2);padding:8px 6px 12px;font-style:italic;line-height:1.4; }
  .rhythm-evening-summary { display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 16px;text-align:center; }
  .rhythm-evening-icon { font-size:36px; }
  .rhythm-evening-text { font-size:16px;color:var(--text2);font-weight:500; }

  /* ── MOOD JOURNAL ── */
  .mood-selector {
    position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--surface);border:1px solid var(--surface2);border-radius:20px;
    padding:12px 20px 14px;z-index:9998;opacity:0;pointer-events:none;
    transition:all 0.3s ease;box-shadow:0 8px 32px rgba(0,0,0,0.15);
    text-align:center;min-width:260px;
  }
  .mood-selector.show { opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto; }
  .mood-label { font-size:13px;color:var(--text2);margin-bottom:10px;font-weight:500; }
  .mood-options { display:flex;gap:8px;justify-content:center; }
  .mood-opt {
    display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:8px 12px;border-radius:14px;cursor:pointer;
    transition:background 0.15s,transform 0.1s;
  }
  .mood-opt:active { transform:scale(0.92);background:var(--surface2); }
  .mood-emoji { font-size:24px; }
  .mood-opt span:last-child { font-size:11px;color:var(--text3);font-weight:500; }
  .mood-heatmap-dot {
    width:28px;height:28px;border-radius:50%;background:var(--surface2);
    display:flex;align-items:center;justify-content:center;font-size:18px;
  }
  .mood-heatmap-dot.mood-great { background:rgba(var(--brand-rgb),0.15); }
  .mood-heatmap-dot.mood-okay { background:var(--surface2); }
  .mood-heatmap-dot.mood-low { background:rgba(59,142,165,0.15); }
  .mood-heatmap-dot.mood-stressed { background:rgba(var(--urgent-rgb),0.12); }
  .mood-insight { font-size:13px;color:var(--text2);padding:6px 0;line-height:1.5; }

  /* ── SPOTLIGHT FOCUS MODE ── */
  .spotlight-view {
    position:absolute;top:0;left:0;right:0;bottom:0;background:var(--bg);z-index:10;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:80px 24px 120px;opacity:0;pointer-events:none;transition:opacity 0.3s;
  }
  .spotlight-view.active { opacity:1;pointer-events:auto; }
  .spotlight-badge { display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;padding:4px 12px;border-radius:20px;margin-bottom:16px; }
  .spotlight-card {
    width:85%;max-width:340px;background:var(--surface);border-radius:20px;padding:32px 24px;
    box-shadow:0 4px 24px rgba(0,0,0,0.08);text-align:center;
    transition:transform 0.35s ease,opacity 0.35s ease;
  }
  .spotlight-card.slide-left { transform:translateX(-120%);opacity:0; }
  .spotlight-card.slide-right { transform:translateX(120%);opacity:0; }
  .spotlight-title { font-family:'DM Serif Display',serif;font-size:24px;color:var(--text1);line-height:1.3;margin-bottom:8px; }
  .spotlight-due { font-size:14px;color:var(--text2);margin-bottom:24px; }
  .spotlight-actions { display:flex;gap:12px;justify-content:center; }
  .spotlight-btn {
    height:48px;padding:0 28px;border-radius:24px;border:none;font-size:15px;font-weight:600;
    cursor:pointer;font-family:inherit;transition:transform 0.12s;
  }
  .spotlight-btn:active { transform:scale(0.96); }
  .spotlight-btn-start { background:var(--surface2);color:var(--text1); }
  .spotlight-btn-done { background:var(--success);color:#fff; }
  .spotlight-nav { display:flex;align-items:center;gap:20px;margin-top:24px; }
  .spotlight-arrow {
    width:40px;height:40px;border-radius:50%;background:var(--surface2);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    font-size:18px;color:var(--text2);transition:transform 0.12s;border:none;font-family:inherit;
  }
  .spotlight-arrow:active { transform:scale(0.92); }
  .spotlight-arrow:disabled { opacity:0.3;pointer-events:none; }
  .spotlight-counter { font-size:14px;color:var(--text3);font-weight:500; }
  .spotlight-alldone { text-align:center; }
  .spotlight-alldone-icon { font-size:56px;margin-bottom:12px; }
  .spotlight-alldone-text { font-size:22px;font-weight:700;color:var(--text1);font-family:'DM Serif Display',serif; }
  .spotlight-alldone-sub { font-size:15px;color:var(--text2);margin-top:8px; }
  .focus-indicator { display:none;font-size:11px;font-weight:700;color:var(--brand);background:var(--brand-muted);padding:2px 8px;border-radius:6px;margin-left:8px; }
  .focus-indicator.show { display:inline-block; }
  .focus-home-btn { display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;cursor:pointer;transition:all 0.2s;color:var(--text2);background:var(--surface2);border:1.5px solid var(--divider);font-size:13px;font-weight:600; }
  .focus-home-btn:active { transform:scale(0.95); }
  .focus-home-btn.on { background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 2px 8px rgba(var(--brand-rgb),0.3); }
  .focus-home-label { font-family:inherit; }

  /* ── LEVEL UP OVERLAY ── */
  .levelup-ov {
    position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);
    z-index:9997;display:flex;flex-direction:column;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity 0.3s;
  }
  .levelup-ov.active { opacity:1;pointer-events:auto; }
  .levelup-num { font-size:72px;font-weight:800;color:#fff;letter-spacing:-3px;transform:scale(0.5);opacity:0;transition:all 0.5s cubic-bezier(0.34,1.56,0.64,1); }
  .levelup-ov.active .levelup-num { transform:scale(1);opacity:1; }
  .levelup-label { font-size:14px;color:rgba(255,255,255,0.6);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:8px; }
  .levelup-title { font-size:22px;font-weight:600;color:#fff;font-family:'DM Serif Display',serif;margin-top:8px;opacity:0;transition:opacity 0.5s 0.3s; }
  .levelup-ov.active .levelup-title { opacity:1; }
  .levelup-btn { margin-top:32px;height:48px;padding:0 32px;background:rgba(255,255,255,0.15);color:#fff;border:1px solid rgba(255,255,255,0.2);border-radius:24px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:transform 0.12s;backdrop-filter:blur(8px); }
  .levelup-btn:active { transform:scale(0.96); }

  /* ── BADGE TOAST ── */
  .badge-toast {
    position:fixed;bottom:-100px;left:50%;transform:translateX(-50%);
    background:var(--surface);border:2px solid #FFD700;border-radius:16px;
    padding:14px 20px;display:flex;align-items:center;gap:12px;
    box-shadow:0 8px 32px rgba(0,0,0,0.15),0 0 0 1px rgba(255,215,0,0.3);
    z-index:9996;transition:bottom 0.4s cubic-bezier(0.34,1.56,0.64,1);
    max-width:320px;
  }
  .badge-toast.show { bottom:calc(100px + var(--safe-b)); }
  .badge-toast-icon { font-size:28px; }
  .badge-toast-content { flex:1; }
  .badge-toast-name { font-size:15px;font-weight:700;color:var(--text1); }
  .badge-toast-desc { font-size:12px;color:var(--text2);margin-top:2px; }
  @keyframes goldShimmer { 0%{border-color:#FFD700} 50%{border-color:#FFA500} 100%{border-color:#FFD700} }
  .badge-toast.show { animation:goldShimmer 1s ease infinite; }

  /* ── MICRO-ANIMATIONS ── */
  .btn-b:active, .btn-w:active, .spotlight-btn:active, .timer-btn:active { transform:scale(0.96); }
  .toggle-knob { transition:transform 0.25s cubic-bezier(0.34,1.3,0.64,1); }
  .streak-fire.pulse, .streak-chip-fire.pulse { animation:streakPulseFast 0.4s ease; }
  @keyframes streakPulseFast { 0%{transform:scale(1)} 50%{transform:scale(1.4)} 100%{transform:scale(1)} }
  @keyframes xpPop { 0%{transform:scale(1)} 40%{transform:scale(1.2)} 100%{transform:scale(1)} }
  .xp-pop { animation:xpPop 0.3s ease; }
  @keyframes floatWobble { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
  .stats-badge-card.locked { animation:floatWobble 3s ease-in-out infinite; }

  .reset-btn {
    position:fixed;bottom:20px;right:20px;background:rgba(255,255,255,0.08);
    color:rgba(255,255,255,0.4);border:1px solid rgba(255,255,255,0.1);
    padding:8px 16px;border-radius:20px;font-size:12px;cursor:pointer;z-index:9999;
    font-family:inherit;transition:all 0.15s;backdrop-filter:blur(8px);
  }
  .reset-btn:hover { background:rgba(255,255,255,0.12);color:rgba(255,255,255,0.7); }

  @media (max-height: 860px) and (min-width: 501px) {
    .phone-frame { height:calc(100dvh - 32px);width:calc((100dvh - 32px) * 0.462); }
  }
  @media (max-width: 500px) {
    .desktop-wrap { background:var(--bg); }
    .phone-frame { width:100%;height:100%;border-radius:0;border:none;box-shadow:none; }
    .dynamic-island { display:none; }
    .status-bar { display:none; }
    .home-indicator { display:none; }
    .reset-btn { display:none; }
    .ib { padding-bottom: calc(16px + env(safe-area-inset-bottom, 34px)); }
    .home-nav, .done-header, .stats-header { padding-top: calc(16px + env(safe-area-inset-top, 48px)); }
    .set-hdr { padding-top: calc(16px + env(safe-area-inset-top, 48px)); }
    .drawer-header { padding-top: calc(24px + env(safe-area-inset-top, 48px)); }
    .onb1 { padding-bottom: calc(40px + env(safe-area-inset-bottom, 34px)); }
    .onb2 { padding-top: calc(24px + env(safe-area-inset-top, 48px)); padding-bottom: calc(32px + env(safe-area-inset-bottom, 34px)); }
    .onb3 { padding-top: calc(24px + env(safe-area-inset-top, 48px)); padding-bottom: calc(32px + env(safe-area-inset-bottom, 34px)); }
    .onb4 { padding-top: calc(24px + env(safe-area-inset-top, 48px)); padding-bottom: calc(32px + env(safe-area-inset-bottom, 34px)); }
    .det-sh { padding-bottom: calc(16px + env(safe-area-inset-bottom, 34px)); }
    .timer-ov { padding-bottom: calc(24px + env(safe-area-inset-bottom, 34px)); padding-top: calc(24px + env(safe-area-inset-top, 48px)); }
    .spotlight-view { padding-top: calc(80px + env(safe-area-inset-top, 48px)); padding-bottom: calc(40px + env(safe-area-inset-bottom, 34px)); }
    .levelup-ov { padding-bottom: calc(24px + env(safe-area-inset-bottom, 34px)); }
    .badge-toast.show { bottom: calc(24px + env(safe-area-inset-bottom, 34px)); }
    .done-list { padding-bottom: calc(16px + env(safe-area-inset-bottom, 34px)); }
    .stats-body { padding-bottom: calc(16px + env(safe-area-inset-bottom, 34px)); }
  }

  @keyframes fadeInUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
  @keyframes momentumFade {
    0% { opacity:0; transform:translateX(-50%) translateY(-10px); }
    15% { opacity:1; transform:translateX(-50%) translateY(0); }
    75% { opacity:1; }
    100% { opacity:0; }
  }
  .ai { animation:fadeInUp 0.5s ease both; }
  .d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}
  .d4{animation-delay:.4s}.d5{animation-delay:.5s}.d6{animation-delay:.6s}.d7{animation-delay:.7s}

  @keyframes addFlash { 0%{box-shadow:0 0 0 0 rgba(var(--brand-rgb),0.4)} 50%{box-shadow:0 0 0 6px rgba(var(--brand-rgb),0)} 100%{box-shadow:0 1px 2px rgba(44,36,32,0.06),0 4px 16px rgba(44,36,32,0.03)} }
  .tc.flash { animation: addFlash 0.6s ease; }

  /* ── Reduced Motion (OS-level + Calm Mode) ── */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
    #confettiCanvas { display:none !important; }
  }
  html.calm-mode *, html.calm-mode *::before, html.calm-mode *::after {
    animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;
  }
  html.calm-mode #confettiCanvas { display:none !important; }
  html.calm-mode .levelup-ov { display:none !important; }
  html.calm-mode .badge-toast { transition:none !important; }

  /* ── Undo Toast ── */
  .undo-toast { position:fixed;bottom:90px;left:16px;right:16px;transform:translateY(20px);background:var(--text1);color:var(--bg);padding:10px 14px 10px 20px;border-radius:14px;font-size:14px;font-weight:500;font-family:inherit;z-index:9997;opacity:0;pointer-events:none;transition:all 0.3s ease;display:flex;align-items:center;gap:12px;box-shadow:0 4px 16px rgba(0,0,0,0.25); }
  .undo-toast.show { opacity:1;transform:translateY(0);pointer-events:auto; }
  .undo-toast-btn { padding:6px 14px;border-radius:10px;border:none;background:var(--brand);color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit; }
  .undo-toast-btn:active { transform:scale(0.95); }

  /* ═══════════════════════════════════════════════════════
     AWWWARDS VISUAL LAYER — Phase 4 Polish Pass
     CSS-only. No JS or HTML structure changes.
     All animations respect calm-mode + prefers-reduced-motion.
  ══════════════════════════════════════════════════════════ */

  /* ── DESIGN TOKENS: Glass System ── */
  :root {
    --glass-bg:       rgba(255,255,255,0.07);
    --glass-border:   rgba(255,255,255,0.12);
    --glass-blur:     blur(18px);
    --glass-shadow:   0 8px 32px rgba(44,36,32,0.10), 0 1px 0 rgba(255,255,255,0.6) inset;
    --glass-shadow-lg:0 16px 48px rgba(44,36,32,0.14), 0 1px 0 rgba(255,255,255,0.7) inset;
    --card-radius:    18px;
    --nav-glass:      rgba(250,248,245,0.82);
    --nav-blur:       blur(24px);

    /* 3D spotlight card */
    --spot-shadow:
      0 2px 4px rgba(44,36,32,0.06),
      0 8px 20px rgba(44,36,32,0.10),
      0 24px 56px rgba(44,36,32,0.14),
      0 1px 0 rgba(255,255,255,0.8) inset;

    /* Gradient icon backgrounds */
    --grad-urgent: linear-gradient(135deg, #D44000, #FF6B35);
    --grad-high:   linear-gradient(135deg, #E08A00, #FFB340);
    --grad-normal: linear-gradient(135deg, #2E8B6E, #4AE09A);
    --grad-brand:  linear-gradient(135deg, var(--brand), var(--brand-dark));
    --grad-success:linear-gradient(135deg, #2E8B6E, #5AA87A);
  }

  html.theme-dark {
    --glass-bg:       rgba(255,255,255,0.05);
    --glass-border:   rgba(255,255,255,0.08);
    --glass-shadow:   0 8px 32px rgba(0,0,0,0.30), 0 1px 0 rgba(255,255,255,0.06) inset;
    --glass-shadow-lg:0 16px 48px rgba(0,0,0,0.40), 0 1px 0 rgba(255,255,255,0.06) inset;
    --nav-glass:      rgba(17,17,24,0.82);
    --spot-shadow:
      0 2px 4px rgba(0,0,0,0.20),
      0 8px 24px rgba(0,0,0,0.35),
      0 24px 60px rgba(0,0,0,0.45),
      0 1px 0 rgba(255,255,255,0.06) inset;
  }

  /* ── STAGGER REVEAL KEYFRAMES ── */
  @keyframes wipsReveal {
    from { opacity:0; transform:translateY(14px); }
    to   { opacity:1; transform:translateY(0); }
  }
  @keyframes wipsRevealLeft {
    from { opacity:0; transform:translateX(-12px); }
    to   { opacity:1; transform:translateX(0); }
  }
  @keyframes wipsPop {
    0%   { opacity:0; transform:scale(0.88); }
    60%  { transform:scale(1.03); }
    100% { opacity:1; transform:scale(1); }
  }
  @keyframes wipsGlowPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb),0); }
    50%     { box-shadow: 0 0 16px 4px rgba(var(--brand-rgb),0.18); }
  }
  @keyframes ambientDrift {
    0%   { transform:translate(0,0) scale(1); }
    33%  { transform:translate(18px,-14px) scale(1.04); }
    66%  { transform:translate(-14px,18px) scale(0.97); }
    100% { transform:translate(8px,-8px) scale(1.01); }
  }

  /* ── DESKTOP WRAP — subtle ambient background ── */
  .desktop-wrap {
    background: linear-gradient(135deg, #0e0818 0%, #1a0f20 50%, #12101a 100%) !important;
    position: relative;
  }
  .desktop-wrap::before,
  .desktop-wrap::after {
    content:'';
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    pointer-events:none;
    animation: ambientDrift 22s ease-in-out infinite alternate;
  }
  .desktop-wrap::before {
    width:380px; height:380px;
    background: radial-gradient(circle, rgba(var(--brand-rgb),0.22), transparent 70%);
    top:-80px; left:-80px;
  }
  .desktop-wrap::after {
    width:300px; height:300px;
    background: radial-gradient(circle, rgba(176,122,163,0.15), transparent 70%);
    bottom:-40px; right:-40px;
    animation-delay: -8s; animation-duration: 18s;
  }
  @media (max-width:500px) {
    .desktop-wrap::before, .desktop-wrap::after { display:none; }
  }

  /* ── PHONE FRAME — premium glow ── */
  .phone-frame {
    box-shadow:
      0 0 0 2px #2a1f28,
      0 40px 80px rgba(0,0,0,0.65),
      0 0 100px rgba(var(--brand-rgb),0.14),
      0 0 200px rgba(var(--brand-rgb),0.06) !important;
  }

  /* ── HOME NAV — frosted glass upgrade ── */
  .home-nav {
    background: var(--nav-glass) !important;
    backdrop-filter: var(--nav-blur) !important;
    -webkit-backdrop-filter: var(--nav-blur) !important;
    border-bottom: 1px solid rgba(var(--brand-rgb),0.10) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6), 0 4px 16px rgba(44,36,32,0.04);
  }
  html.theme-dark .home-nav {
    border-bottom-color: rgba(176,122,163,0.10) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 16px rgba(0,0,0,0.15);
  }

  /* DONE + STATS HEADERS — same frosted treatment */
  .done-header, .stats-header {
    background: var(--nav-glass) !important;
    backdrop-filter: var(--nav-blur) !important;
    -webkit-backdrop-filter: var(--nav-blur) !important;
    border-bottom: 1px solid rgba(var(--brand-rgb),0.10) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.6), 0 4px 16px rgba(44,36,32,0.04);
  }
  html.theme-dark .done-header, html.theme-dark .stats-header {
    border-bottom-color: rgba(176,122,163,0.10) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 16px rgba(0,0,0,0.15);
  }

  /* ── TASK CARDS — glassmorphic ── */
  .tc {
    background: var(--surface) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: transform 0.18s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.18s ease;
  }
  .tc:active {
    transform: scale(0.97);
    filter: brightness(0.96);
    box-shadow: 0 2px 8px rgba(44,36,32,0.08);
    transition: transform 0.1s, filter 0.1s;
  }
  .tc.swiping, .tc.swiping:active { transform:none !important;transition:none !important; }
  /* Overdue accent — stronger left border glow */
  .tc.over {
    border-left: 3px solid var(--urgent) !important;
    box-shadow: var(--glass-shadow), -2px 0 12px rgba(var(--urgent-rgb),0.15) !important;
  }

  /* Task add flash — updated for glass */
  @keyframes addFlashGlass {
    0%   { box-shadow: 0 0 0 0 rgba(var(--brand-rgb),0.5); }
    50%  { box-shadow: 0 0 0 8px rgba(var(--brand-rgb),0); }
    100% { box-shadow: var(--glass-shadow); }
  }
  .tc.flash { animation: addFlashGlass 0.55s ease; }

  /* ── PRIORITY INDICATORS — gradient upgrade ── */
  .pi-u {
    background: var(--grad-urgent) !important;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(var(--urgent-rgb),0.4) !important;
  }
  .pi-h {
    background: var(--grad-high) !important;
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(var(--high-rgb),0.3) !important;
  }
  .pi-n {
    border: 2px solid var(--normal) !important;
    border-radius: 50%;
    background: transparent !important;
  }

  /* ── STREAK CHIP (in header) ── */
  .streak-chip {
    display:flex;align-items:center;gap:6px;
    padding:6px 12px;border-radius:20px;
    background:var(--surface2);cursor:pointer;
    border:1px solid rgba(var(--brand-rgb),0.12);
    transition:all 0.15s;-webkit-tap-highlight-color:transparent;
  }
  .streak-chip:active { transform:scale(0.95);background:var(--surface); }
  .streak-chip-fire { font-size:13px;color:var(--brand);animation:streakPulse 3s ease-in-out 2s infinite; }
  .streak-chip-num { font-size:14px;font-weight:700;color:var(--brand);min-width:10px;text-align:center; }
  .streak-chip-xp { width:36px;height:4px;border-radius:2px;background:var(--surface2);overflow:hidden;border:0.5px solid rgba(var(--brand-rgb),0.08); }
  .streak-chip-xp-fill { height:100%;border-radius:2px;background:linear-gradient(90deg,var(--brand-dark),var(--brand));transition:width 0.8s cubic-bezier(0.34,1.2,0.64,1); }
  @keyframes streakPulse {
    0%,85%,100% { transform:scale(1); }
    90%         { transform:scale(1.35); }
  }
  .streak-fire { animation: streakPulse 3s ease-in-out 2s infinite; }

  /* ── STREAK POPUP (dropdown) ── */
  .streak-popup {
    position:absolute;left:16px;right:16px;top:0;z-index:150;
    background:var(--glass-bg);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(var(--brand-rgb),0.10);
    border-radius:16px;
    box-shadow:0 8px 32px rgba(0,0,0,0.12),0 2px 8px rgba(0,0,0,0.06);
    padding:16px 18px 14px;
    opacity:0;transform:translateY(-10px);pointer-events:none;
    transition:opacity 0.25s ease,transform 0.25s cubic-bezier(0.34,1.2,0.64,1);
  }
  .streak-popup.open { opacity:1;transform:translateY(0);pointer-events:auto; }
  .streak-popup-row { display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2);margin-bottom:6px; }
  .streak-popup-row:last-child { margin-bottom:0; }
  .streak-popup-xp-row { justify-content:space-between; }
  .streak-popup-xp-row span:last-child { font-weight:600;color:var(--brand); }
  .streak-popup-xp-bar { padding:0 0 6px; }
  .streak-popup-rhythm { font-size:11px;font-style:italic;color:var(--text3); }
  .streak-popup-rhythm:empty { display:none; }
  .stats-xp-fill, #xpFill {
    background: linear-gradient(90deg, var(--brand-dark), var(--brand), #C27AAF) !important;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
  }
  .stats-xp-fill::after, #xpFill::after {
    content:'';
    position:absolute; top:0; left:-60%; width:60%; height:100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    animation: xpShimmer 2.5s ease-in-out 1s infinite;
  }
  @keyframes xpShimmer {
    0%   { left:-60%; }
    60%  { left:110%; }
    100% { left:110%; }
  }

  /* ── INPUT BAR — glassmorphic ── */
  .ib {
    background: var(--nav-glass) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(var(--brand-rgb),0.10) !important;
    box-shadow: 0 -4px 20px rgba(44,36,32,0.05);
  }
  .ib-inner {
    border: 1.5px solid var(--glass-border) !important;
    box-shadow: 0 2px 12px rgba(44,36,32,0.06), 0 1px 0 rgba(255,255,255,0.7) inset !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
  }
  .ib-inner.focused {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb),0.12), 0 1px 0 rgba(255,255,255,0.7) inset !important;
  }

  /* ── SUGGESTION CARD — frosted glass ── */
  .sg {
    background: rgba(var(--brand-rgb),0.06) !important;
    border: 1px solid rgba(var(--brand-rgb),0.14) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 16px rgba(var(--brand-rgb),0.07), 0 1px 0 rgba(255,255,255,0.6) inset;
    border-radius: 16px !important;
  }
  .sg-b {
    background: var(--grad-brand) !important;
    box-shadow: 0 2px 8px rgba(var(--brand-rgb),0.25) !important;
    transition: transform 0.12s cubic-bezier(0.34,1.3,0.64,1), box-shadow 0.12s !important;
  }
  .sg-b:active {
    transform: scale(0.93) !important;
    box-shadow: 0 1px 4px rgba(var(--brand-rgb),0.15) !important;
  }

  /* ── SPOTLIGHT FOCUS CARD — 3D depth effect ── */
  .spotlight-view {
    background: var(--bg) !important;
  }
  .spotlight-card {
    box-shadow: var(--spot-shadow) !important;
    border: 1px solid var(--glass-border) !important;
    background: var(--surface) !important;
    border-radius: 24px !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    transform: perspective(800px) rotateX(1.5deg) !important;
    transition: transform 0.4s cubic-bezier(0.34,1.2,0.64,1), box-shadow 0.4s ease, opacity 0.35s ease !important;
  }
  .spotlight-card:hover {
    transform: perspective(800px) rotateX(0deg) translateY(-3px) !important;
    box-shadow:
      0 4px 8px rgba(44,36,32,0.08),
      0 16px 40px rgba(44,36,32,0.16),
      0 40px 80px rgba(44,36,32,0.18),
      0 1px 0 rgba(255,255,255,0.8) inset !important;
  }
  .spotlight-card.slide-left  { transform:translateX(-120%) !important; opacity:0 !important; }
  .spotlight-card.slide-right { transform:translateX(120%) !important;  opacity:0 !important; }

  /* Spotlight action buttons — gradient ── */
  .spotlight-btn-start {
    background: var(--surface2) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 2px 8px rgba(44,36,32,0.06) !important;
  }
  .spotlight-btn-done {
    background: var(--grad-success) !important;
    box-shadow: 0 4px 16px rgba(var(--brand-rgb),0.30) !important;
    transition: transform 0.12s cubic-bezier(0.34,1.3,0.64,1), box-shadow 0.12s !important;
  }
  .spotlight-btn-done:active {
    box-shadow: 0 2px 6px rgba(var(--brand-rgb),0.20) !important;
  }
  .spotlight-arrow {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 2px 8px rgba(44,36,32,0.06) !important;
    transition: transform 0.12s cubic-bezier(0.34,1.3,0.64,1) !important;
  }
  .spotlight-arrow:active { transform:scale(0.88) !important; }

  /* ── DETAIL SHEET — glass bottom sheet ── */
  .det-sh {
    background: var(--surface) !important;
    border-top: 1px solid var(--glass-border) !important;
    box-shadow: 0 -8px 40px rgba(44,36,32,0.12), 0 -1px 0 rgba(255,255,255,0.6) inset !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }
  .da-c {
    background: var(--grad-success) !important;
    box-shadow: 0 4px 16px rgba(var(--brand-rgb),0.25) !important;
    border-radius: 18px !important;
    transition: transform 0.12s cubic-bezier(0.34,1.3,0.64,1) !important;
  }
  .da-c:active { box-shadow: 0 2px 6px rgba(var(--brand-rgb),0.15) !important; }
  .da-e {
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 2px 8px rgba(44,36,32,0.04) !important;
    border-radius: 18px !important;
  }
  .da-del { border-radius: 18px !important; }
  .dm-i {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 12px !important;
  }

  /* ── PRIMARY BUTTONS — gradient upgrade ── */
  .btn-b {
    background: var(--grad-brand) !important;
    box-shadow: 0 4px 20px rgba(var(--brand-rgb),0.30) !important;
    transition: transform 0.14s cubic-bezier(0.34,1.3,0.64,1), box-shadow 0.14s !important;
  }
  .btn-b:active {
    transform: scale(0.96) !important;
    box-shadow: 0 2px 8px rgba(var(--brand-rgb),0.20) !important;
  }
  .btn-b.disabled { opacity:0.4 !important; }
  .btn-w {
    box-shadow: 0 4px 24px rgba(44,36,32,0.14) !important;
    transition: transform 0.14s cubic-bezier(0.34,1.3,0.64,1), box-shadow 0.14s !important;
  }
  .btn-w:active { box-shadow: 0 2px 10px rgba(44,36,32,0.10) !important; }

  /* ── TOGGLE SWITCH — enhanced knob + gradient track ── */
  .toggle.on {
    background: var(--grad-brand) !important;
    box-shadow: 0 2px 8px rgba(var(--brand-rgb),0.25) !important;
  }
  .toggle-knob {
    transition: transform 0.28s cubic-bezier(0.34,1.4,0.64,1) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18) !important;
  }

  /* ── DRAWER — glassmorphic panel ── */
  .drawer {
    background: var(--surface) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-right: 1px solid var(--glass-border) !important;
    box-shadow: 4px 0 40px rgba(44,36,32,0.14), 0 0 0 1px rgba(255,255,255,0.5) inset !important;
  }
  html.theme-dark .drawer {
    box-shadow: 4px 0 40px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.04) inset !important;
  }
  .drawer-header {
    border-bottom: 1px solid var(--glass-border) !important;
    background: linear-gradient(180deg, var(--brand-muted), transparent) !important;
  }
  .drawer-item {
    border-radius: 12px !important;
    margin: 2px 10px !important;
    padding: 14px 12px !important;
    transition: background 0.15s, transform 0.12s !important;
  }
  .drawer-item:active {
    transform: scale(0.97) !important;
    background: var(--brand-muted) !important;
  }
  .drawer-item.active {
    background: var(--brand-muted) !important;
    border: 1px solid rgba(var(--brand-rgb),0.14) !important;
  }
  .drawer-item-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    font-size: 15px !important;
  }
  .drawer-item.active .drawer-item-icon {
    background: linear-gradient(135deg, rgba(var(--brand-rgb),0.20), rgba(var(--brand-rgb),0.08)) !important;
    border-color: rgba(var(--brand-rgb),0.20) !important;
  }
  .drawer-footer {
    border-top: 1px solid var(--glass-border) !important;
    background: var(--glass-bg) !important;
  }

  /* ── STATS SCREEN — level card 3D + staggered grid ── */
  .stats-level-card {
    background: var(--surface) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--spot-shadow) !important;
    border-radius: 24px !important;
    transform: perspective(600px) rotateX(1deg);
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    position: relative; overflow: hidden;
  }
  /* Shimmer highlight on level card */
  .stats-level-card::before {
    content:'';
    position:absolute; top:0; left:0; right:0; height:1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  }
  .stats-level-num {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .stats-xp-bar {
    background: var(--surface2) !important;
    border-radius: 6px !important;
    overflow: hidden;
    height: 10px !important;
  }
  .stats-xp-fill {
    background: linear-gradient(90deg, var(--brand-dark), var(--brand), #C27AAF) !important;
    border-radius: 6px !important;
    transition: width 0.8s cubic-bezier(0.34,1.2,0.64,1) !important;
  }

  .stats-card {
    background: var(--surface) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  .stats-card-val {
    background: linear-gradient(135deg, var(--text1), var(--text2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Staggered badge card reveal */
  .stats-badge-card {
    background: var(--surface) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: transform 0.2s cubic-bezier(0.34,1.3,0.64,1), box-shadow 0.2s !important;
    animation: wipsReveal 0.5s ease both;
  }
  .stats-badge-card:nth-child(1) { animation-delay:0.05s; }
  .stats-badge-card:nth-child(2) { animation-delay:0.12s; }
  .stats-badge-card:nth-child(3) { animation-delay:0.19s; }
  .stats-badge-card:nth-child(4) { animation-delay:0.26s; }
  .stats-badge-card:nth-child(5) { animation-delay:0.33s; }
  .stats-badge-card:nth-child(6) { animation-delay:0.40s; }
  .stats-badge-card.locked { animation:floatWobble 3s ease-in-out infinite !important; }
  .stats-badge-card:not(.locked):hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: var(--glass-shadow-lg) !important;
  }

  /* Heatmap container — glass card */
  .stats-heatmap {
    background: var(--surface) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    border-radius: 18px !important;
  }
  .stats-heatmap-dot.filled {
    background: var(--grad-brand) !important;
    box-shadow: 0 0 8px rgba(var(--brand-rgb),0.35) !important;
  }

  /* ── ONBOARDING SCREENS — ambient blobs (desktop only) ── */
  .onb1 { position: relative; overflow: hidden; }
  /* Extra ambient layer inside onb1 — layered on top of existing orbs */
  .onb1::after {
    content:'';
    position:absolute; bottom:-60px; right:-60px;
    width:280px; height:280px;
    border-radius:50%;
    background: radial-gradient(circle, rgba(255,255,255,0.07), transparent 70%);
    filter: blur(40px);
    pointer-events:none;
    animation: ambientDrift 16s ease-in-out infinite alternate;
  }

  .onb2, .onb3 {
    position: relative; overflow: hidden;
  }
  .onb2::before, .onb3::before {
    content:'';
    position:absolute; top:-80px; right:-80px;
    width:240px; height:240px;
    border-radius:50%;
    background: radial-gradient(circle, rgba(var(--brand-rgb),0.08), transparent 70%);
    filter: blur(60px);
    pointer-events:none;
    animation: ambientDrift 20s ease-in-out infinite alternate;
  }
  @media (max-width:500px) {
    .onb1::after, .onb2::before, .onb3::before { display:none; }
  }

  /* Demo card on onb2 — glass upgrade */
  .demo-card {
    background: var(--surface) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    border-radius: 20px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  /* Onboarding reward chips — glass */
  .onb4-chip {
    background: var(--surface) !important;
    border: 1.5px solid var(--glass-border) !important;
    box-shadow: 0 2px 8px rgba(44,36,32,0.05) !important;
    transition: all 0.22s cubic-bezier(0.34,1.3,0.64,1) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }
  .onb4-chip.sel {
    border-color: var(--brand) !important;
    background: var(--brand-muted) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb),0.10), 0 4px 12px rgba(var(--brand-rgb),0.15) !important;
    transform: scale(1.05) !important;
  }

  /* Same glass chips in settings */
  .reward-chip {
    background: var(--surface) !important;
    border: 1.5px solid var(--glass-border) !important;
    box-shadow: 0 2px 8px rgba(44,36,32,0.05) !important;
    transition: all 0.22s cubic-bezier(0.34,1.3,0.64,1) !important;
  }
  .reward-chip.sel {
    border-color: var(--brand) !important;
    background: var(--brand-muted) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb),0.10) !important;
  }

  /* ── TEMPLATE SHEET — glass bottom sheet ── */
  .tpl-panel {
    background: var(--surface) !important;
    border-top: 1px solid var(--glass-border) !important;
    box-shadow: 0 -8px 40px rgba(44,36,32,0.12), 0 -1px 0 rgba(255,255,255,0.6) inset !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }
  .tpl-card {
    background: var(--surface) !important;
    border: 1.5px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    border-radius: 18px !important;
    transition: transform 0.18s cubic-bezier(0.34,1.3,0.64,1), box-shadow 0.18s, border-color 0.18s !important;
  }
  .tpl-card:active {
    transform: scale(0.96) !important;
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb),0.10) !important;
  }
  .tpl-card-icon {
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--brand-muted), rgba(255,255,255,0.2)) !important;
    border: 1px solid var(--glass-border) !important;
  }

  /* ── LEVEL UP OVERLAY — premium glow ── */
  .levelup-ov { backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; }
  .levelup-num {
    background: linear-gradient(135deg, #fff, rgba(255,255,255,0.7));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 24px rgba(255,255,255,0.3));
  }
  .levelup-btn {
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    transition: transform 0.14s cubic-bezier(0.34,1.3,0.64,1), background 0.14s !important;
  }
  .levelup-btn:hover { background: rgba(255,255,255,0.18) !important; }
  .levelup-btn:active { transform: scale(0.96) !important; }

  /* ── BADGE TOAST — glass card ── */
  .badge-toast {
    background: var(--surface) !important;
    border: 1.5px solid rgba(255,215,0,0.5) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,215,0,0.15), 0 1px 0 rgba(255,255,255,0.7) inset !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 18px !important;
  }

  /* ── SETTINGS OVERLAY — glass items ── */
  .set-item {
    border-bottom: 1px solid var(--divider) !important;
    transition: background 0.15s !important;
  }
  .set-item[style*="cursor:pointer"]:active { background: var(--glass-bg) !important; }
  .xp-edit-item {
    background: var(--surface) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 1px 4px rgba(44,36,32,0.04) !important;
    border-radius: 14px !important;
  }
  .xp-edit-val {
    background: var(--surface2) !important;
    border: 1.5px solid var(--glass-border) !important;
    border-radius: 10px !important;
  }
  .xp-edit-val:focus { border-color: var(--brand) !important; }
  .theme-swatch {
    border: 2px solid var(--glass-border) !important;
    box-shadow: 0 2px 8px rgba(44,36,32,0.05) !important;
    transition: all 0.2s cubic-bezier(0.34,1.3,0.64,1) !important;
  }
  .theme-swatch.sel {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb),0.12), 0 4px 12px rgba(var(--brand-rgb),0.10) !important;
    transform: scale(1.05) !important;
  }
  .theme-swatch:active { transform: scale(0.93) !important; }

  /* Set-pills (timer duration) */
  .set-pill {
    border: 1.5px solid var(--glass-border) !important;
    box-shadow: 0 1px 4px rgba(44,36,32,0.04) !important;
    transition: all 0.18s cubic-bezier(0.34,1.3,0.64,1) !important;
  }
  .set-pill.sel {
    border-color: var(--brand) !important;
    background: var(--brand-muted) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb),0.08) !important;
  }
  .set-pill:active { transform: scale(0.94) !important; }

  /* Focus mode home button */
  .focus-home-btn {
    border: 1.5px solid var(--glass-border) !important;
    box-shadow: 0 2px 8px rgba(44,36,32,0.06) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: all 0.2s cubic-bezier(0.34,1.3,0.64,1) !important;
  }
  .focus-home-btn.on {
    background: var(--grad-brand) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 16px rgba(var(--brand-rgb),0.28) !important;
  }

  /* Timer overlay — premium ring */
  .timer-prog { stroke: url(#timerGradient) !important; }
  .timer-ov { backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; }
  .timer-btn-done {
    background: var(--grad-success) !important;
    box-shadow: 0 4px 16px rgba(var(--brand-rgb),0.28) !important;
  }
  .timer-btn-stop {
    background: var(--surface2) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 2px 8px rgba(44,36,32,0.06) !important;
  }

  /* ── CALM MODE: suppress all new animations too ── */
  html.calm-mode .stats-badge-card,
  html.calm-mode .streak-chip-fire,
  html.calm-mode .streak-popup .streak-fire,
  html.calm-mode .desktop-wrap::before,
  html.calm-mode .desktop-wrap::after,
  html.calm-mode .onb1::after,
  html.calm-mode .onb2::before,
  html.calm-mode .onb3::before,
  html.calm-mode .stats-xp-fill::after,
  html.calm-mode #xpFill::after {
    animation: none !important;
  }
  html.calm-mode .stats-level-card,
  html.calm-mode .spotlight-card {
    transform: none !important;
  }

  /* ── REDUCED MOTION override — all new animations ── */
  @media (prefers-reduced-motion: reduce) {
    .stats-badge-card,
    .streak-chip-fire,
    .streak-popup,
    .desktop-wrap::before,
    .desktop-wrap::after,
    .onb1::after,
    .onb2::before,
    .onb3::before {
      animation: none !important;
    }
    .stats-xp-fill::after, #xpFill::after { animation: none !important; display:none; }
    .stats-level-card, .spotlight-card { transform: none !important; }
    .stats-badge-card { animation: none !important; opacity:1 !important; transform:none !important; }
  }

  /* ── FOCUS SCREEN (Item 3) ── */
  #focusScreen {
    position:absolute;top:0;left:0;right:0;bottom:0;
    background:var(--bg);z-index:200;
    display:none;flex-direction:column;
    align-items:center;justify-content:center;
    padding:40px 32px;text-align:center;
  }
  #focusScreen.active { display:flex; }
  .clarity-intro {
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    animation:clarityFadeIn 0.6s ease both;
  }
  .clarity-intro-icon { font-size:48px;margin-bottom:16px;opacity:0;animation:claritySlideUp 0.5s ease 0.2s both; }
  .clarity-intro-title {
    font-family:'DM Serif Display',serif;font-size:28px;color:var(--text1);
    margin-bottom:8px;opacity:0;animation:claritySlideUp 0.5s ease 0.4s both;
  }
  .clarity-intro-sub {
    font-size:15px;color:var(--text2);line-height:1.5;max-width:260px;
    opacity:0;animation:claritySlideUp 0.5s ease 0.6s both;
  }
  @keyframes clarityFadeIn { from{opacity:0} to{opacity:1} }
  @keyframes claritySlideUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
  .focus-exit-btn {
    position:absolute;top:calc(env(safe-area-inset-top,16px) + 16px);right:20px;
    font-size:13px;color:var(--text2);background:var(--surface2);
    border:none;border-radius:20px;padding:6px 14px;cursor:pointer;font-family:inherit;
  }
  .focus-task-title {
    font-family:'DM Serif Display',serif;font-size:36px;
    color:var(--text1);line-height:1.3;margin-bottom:12px;
  }
  .focus-task-due { font-size:14px;color:var(--text2);margin-bottom:48px; }
  .focus-done-btn {
    width:100%;max-width:320px;height:60px;border-radius:30px;
    background:var(--grad-brand);color:#fff;border:none;
    font-size:18px;font-weight:700;cursor:pointer;font-family:inherit;
    box-shadow:0 4px 20px rgba(var(--brand-rgb),0.3);
    transition:transform 0.12s;
  }
  .focus-done-btn:active { transform:scale(0.97); }
  .focus-skip-btn {
    margin-top:16px;background:none;border:none;
    color:var(--text2);font-size:14px;cursor:pointer;font-family:inherit;
  }
  @media (max-width:500px) {
    #focusScreen { padding-top: calc(40px + env(safe-area-inset-top, 48px)); padding-bottom: calc(40px + env(safe-area-inset-bottom, 34px)); }
  }

  /* ── BRAIN DUMP SCREEN (Item 8) ── */
  .dump-screen {
    position:absolute;top:0;left:0;right:0;bottom:0;
    background:linear-gradient(160deg, var(--bg) 0%, color-mix(in srgb, var(--brand) 8%, var(--bg)) 100%);
    z-index:150;display:none;flex-direction:column;
    padding:env(safe-area-inset-top,40px) 24px 40px;
  }
  .dump-screen.active { display:flex; }
  .dump-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-top:8px; }
  .dump-counter { font-size:13px;font-weight:700;color:var(--brand);letter-spacing:0.06em;text-transform:uppercase; }
  .dump-done-btn { background:var(--surface2);border:none;border-radius:20px;padding:8px 20px;font-size:14px;font-weight:600;color:var(--text1);cursor:pointer;font-family:inherit; }
  .dump-chips { flex:1;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;overflow-y:auto;padding-bottom:16px; }
  .dump-chip { background:var(--brand-muted);border:1.5px solid var(--brand);color:var(--brand);border-radius:20px;padding:6px 14px;font-size:13px;font-weight:500;animation:chipPop 0.2s ease; }
  @keyframes chipPop { from{transform:scale(0.8);opacity:0} to{transform:scale(1);opacity:1} }
  .dump-input-wrap { position:relative;margin-bottom:12px; }
  .dump-input { width:100%;height:56px;border-radius:16px;border:2px solid var(--brand);background:var(--surface);padding:0 56px 0 20px;font-size:17px;color:var(--text1);font-family:inherit;outline:none; }
  .dump-input:focus { box-shadow:0 0 0 3px var(--brand-muted); }
  .dump-mic { position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--brand);font-size:18px;cursor:pointer; }
  .dump-hint { text-align:center;font-size:12px;color:var(--text3); }
  @media (max-width:500px) {
    .dump-screen { padding-top: calc(env(safe-area-inset-top, 48px) + 8px); padding-bottom: calc(24px + env(safe-area-inset-bottom, 34px)); }
  }

  /* ── SWIPE GESTURES (Item 10) ── */
  .tc-swipe-wrap { position:relative;overflow:hidden;border-radius:18px;touch-action:pan-y; }
  .tc-reveal-delete, .tc-reveal-complete {
    position:absolute;top:0;bottom:0;width:100%;display:flex;align-items:center;
    opacity:0;transition:opacity 0.1s;pointer-events:none;font-size:20px;color:#fff;
  }
  .tc-reveal-delete { background:#EF4444;justify-content:flex-end;padding-right:24px;right:0; }
  .tc-reveal-complete { background:#22C55E;justify-content:flex-start;padding-left:24px;left:0; }
  .focus-see-more {
    padding:14px 22px;font-size:14px;color:var(--brand);cursor:pointer;
    letter-spacing:-0.2px;text-align:center;
  }
  .focus-see-more:active { opacity:0.6;transform:scale(0.98);transition:all 0.1s; }
  /* Inline edit elements */
  .inline-edit-wrap { display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:4px;animation:inlineReveal 0.2s ease both; }
  @keyframes inlineReveal { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
  .inline-field { width:auto;flex:1;min-width:100px;padding:6px 10px;font-size:13px;margin-bottom:0; }
  .inline-save-btn { padding:6px 14px;background:var(--brand);color:#fff;border:none;border-radius:10px;font-size:13px;cursor:pointer;font-family:inherit; }
  .inline-notes-ta { width:100%;min-height:80px;resize:none;margin-bottom:0;animation:inlineReveal 0.2s ease both; }
  .det-n-empty { font-style:italic;color:var(--text3); }
  /* Done screen clear button */
  .done-clear-btn {
    margin-left:auto;width:36px;height:36px;display:flex;align-items:center;
    justify-content:center;cursor:pointer;border-radius:50%;transition:background 0.15s;
  }
  .done-clear-btn:active { background:var(--surface2); }

  /* ── ADHD TIPS (Item 11) ── */
  .tip-card {
    background:var(--brand-muted);border:1px solid rgba(var(--brand-rgb),0.15);border-radius:16px;
    padding:16px 18px;display:flex;align-items:flex-start;gap:12px;
    margin:4px 16px;animation:slideUp 0.4s ease both;
  }
  .tip-icon { font-size:20px;flex-shrink:0; }
  .tip-text { font-size:14px;color:var(--text2);line-height:1.5;font-style:italic;flex:1; }
  .tip-refresh { background:none;border:none;color:var(--brand);font-size:12px;cursor:pointer;font-family:inherit;white-space:nowrap;margin-top:4px; }
  .tip-banner {
    position:absolute;top:0;left:0;right:0;background:var(--brand);
    padding:10px 20px 10px 16px;display:flex;align-items:center;gap:10px;
    z-index:15;transform:translateY(-100%);transition:transform 0.35s ease;
  }
  .tip-banner.show { transform:translateY(0); }
  .tip-banner-text { font-size:13px;color:#fff;flex:1;line-height:1.4; }
  .tip-banner-close { color:rgba(255,255,255,0.7);font-size:16px;cursor:pointer;flex-shrink:0; }
  @media (max-width:500px) {
    .tip-banner { padding-top: calc(10px + env(safe-area-inset-top,0px)); }
  }

  /* ── ZEN MODE (Item 12) ── */
  #zenScreen {
    --zen-bg:#071A12;--zen-accent:#34D399;
    --zen-accent-rgb:52,211,153;--zen-text-rgb:167,243,208;--zen-mid-rgb:110,231,183;--zen-depth-rgb:16,60,40;
    position:absolute;top:0;left:0;right:0;bottom:0;
    background:var(--zen-bg);z-index:500;
    display:none;flex-direction:column;align-items:center;justify-content:center;
    padding:32px;overflow-y:auto;
  }
  #zenScreen::before {
    content:'';position:absolute;inset:0;
    background:
      radial-gradient(ellipse 80% 50% at 20% 80%, rgba(var(--zen-depth-rgb),0.6), transparent),
      radial-gradient(ellipse 60% 40% at 80% 20%, rgba(var(--zen-depth-rgb),0.5), transparent),
      radial-gradient(ellipse 90% 60% at 50% 100%, rgba(var(--zen-depth-rgb),0.8), transparent),
      linear-gradient(175deg, var(--zen-bg) 0%, var(--zen-bg) 100%);
    pointer-events:none;z-index:0;
  }
  #zenScreen::after {
    content:'';position:absolute;inset:0;
    background:
      radial-gradient(circle at 15% 75%, rgba(var(--zen-accent-rgb),0.04) 0%, transparent 50%),
      radial-gradient(circle at 85% 25%, rgba(var(--zen-mid-rgb),0.03) 0%, transparent 40%),
      radial-gradient(circle at 50% 50%, rgba(var(--zen-text-rgb),0.02) 0%, transparent 60%);
    pointer-events:none;z-index:0;
    animation: zenGlow 12s ease-in-out infinite alternate;
  }
  @keyframes zenGlow {
    0% { opacity:0.6; }
    50% { opacity:1; }
    100% { opacity:0.7; }
  }
  #zenScreen > * { position:relative;z-index:1; }
  #zenScreen.active { display:flex; }
  .zen-orb {
    position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;
    animation:ambientDrift 25s ease-in-out infinite alternate;
  }
  .zen-orb:nth-child(1) { width:350px;height:350px;background:radial-gradient(circle,rgba(var(--zen-accent-rgb),0.06),transparent 70%);top:-100px;left:-100px; }
  .zen-orb:nth-child(2) { width:250px;height:250px;background:radial-gradient(circle,rgba(var(--zen-mid-rgb),0.08),transparent 70%);bottom:-60px;right:-60px;animation-delay:-10s; }
  .zen-exit {
    position:absolute;bottom:calc(env(safe-area-inset-bottom,34px)+16px);left:50%;transform:translateX(-50%);
    background:rgba(var(--zen-depth-rgb),0.5);border:1px solid rgba(var(--zen-accent-rgb),0.12);color:rgba(var(--zen-text-rgb),0.35);
    padding:8px 16px;border-radius:16px;font-size:12px;cursor:pointer;font-family:inherit;
    white-space:nowrap;z-index:10;transition:color 0.2s, background 0.2s;
  }
  .zen-exit:active { color:rgba(var(--zen-text-rgb),0.6); }
  .zen-progress { display:flex;gap:10px;justify-content:center;margin-bottom:40px; }
  .zen-dot { width:10px;height:10px;border-radius:50%;background:rgba(var(--zen-text-rgb),0.15);transition:all 0.3s; }
  .zen-dot.active { background:var(--zen-accent);box-shadow:0 0 12px rgba(var(--zen-accent-rgb),0.5); }
  .zen-section { display:none;flex-direction:column;align-items:center;justify-content:center;width:100%;flex:1;padding-bottom:100px; }
  .zen-section.active { display:flex; }
  .zen-step-label { font-size:14px;font-weight:500;color:rgba(var(--zen-text-rgb),0.5);text-transform:uppercase;letter-spacing:0.18em;margin-bottom:40px; }
  .zen-circle {
    width:180px;height:180px;border-radius:50%;position:relative;
    border:2px solid rgba(var(--zen-accent-rgb),0.25);
    display:flex;align-items:center;justify-content:center;
    transition:transform 4s ease-in-out, box-shadow 4s ease-in-out, border-color 4s ease-in-out;
    margin-bottom:36px;
    box-shadow:0 0 60px rgba(var(--zen-accent-rgb),0.06), 0 0 120px rgba(var(--zen-accent-rgb),0.03);
    background:radial-gradient(circle, rgba(var(--zen-accent-rgb),0.04), transparent 70%);
  }
  .zen-circle.expand {
    transform:scale(1.4);
    border-color:rgba(var(--zen-accent-rgb),0.45);
    box-shadow:0 0 60px rgba(var(--zen-accent-rgb),0.15), 0 0 120px rgba(var(--zen-accent-rgb),0.06);
  }
  .zen-circle-inner { width:60px;height:60px;border-radius:50%;background:rgba(var(--zen-accent-rgb),0.08);border:1px solid rgba(var(--zen-accent-rgb),0.2);transition:background 4s ease-in-out; }
  .zen-circle.expand .zen-circle-inner { background:rgba(var(--zen-accent-rgb),0.15); }
  .zen-breath-label { font-family:'DM Serif Display',serif;font-size:20px;color:rgba(var(--zen-text-rgb),0.7);letter-spacing:0.06em;margin-bottom:24px; }
  .zen-tap-hint { font-size:11px;color:rgba(var(--zen-text-rgb),0.2);letter-spacing:0.12em;text-transform:lowercase;animation:zenHintFade 1.5s ease 8s both; }
  @keyframes zenHintFade { from{opacity:0} to{opacity:1} }
  @keyframes zenHoldPulse { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.25)} }
  .zen-circle.hold { animation:zenHoldPulse 2s ease-in-out infinite; }
  .zen-circle.hold .zen-circle-inner { animation:zenHoldPulse 2s ease-in-out infinite; animation-delay:0.3s; }
  .zen-countdown { font-size:42px;font-weight:300;color:rgba(255,255,255,0.18);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:2; }
  #zenCircle:active { opacity:0.8; }
  .zen-done-btn { background:rgba(var(--zen-accent-rgb),0.1);border:1px solid rgba(var(--zen-accent-rgb),0.25);border-radius:24px;padding:12px 32px;color:rgba(var(--zen-text-rgb),0.7);font-size:15px;cursor:pointer;font-family:inherit;transition:all 0.2s; }
  .zen-done-btn:active { background:rgba(var(--zen-accent-rgb),0.2); }
  .zen-card {
    background:rgba(var(--zen-depth-rgb),0.3);border:1px solid rgba(var(--zen-accent-rgb),0.1);border-radius:20px;
    padding:36px 28px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    width:100%;max-width:320px;margin-bottom:40px;
  }
  .zen-quote-mark { font-size:48px;color:rgba(var(--zen-accent-rgb),0.3);line-height:0.5;margin-bottom:16px;font-family:serif; }
  .zen-affirmation { font-family:'DM Serif Display',serif;font-size:22px;color:rgba(255,255,255,0.9);text-align:center;line-height:1.5;transition:opacity 0.5s; }
  .zen-next { background:rgba(var(--zen-accent-rgb),0.08);border:1px solid rgba(var(--zen-accent-rgb),0.2);border-radius:24px;padding:10px 28px;color:rgba(var(--zen-text-rgb),0.6);font-size:14px;cursor:pointer;font-family:inherit;margin-bottom:12px;transition:all 0.2s; }
  .zen-next:active { background:rgba(var(--zen-accent-rgb),0.15); }
  .zen-grounding { width:100%;max-width:340px; }
  .zen-ground-item { display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid rgba(var(--zen-accent-rgb),0.06);cursor:pointer; }
  .zen-ground-num { width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(var(--zen-accent-rgb),0.35);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.2s;font-size:11px;font-weight:700;color:rgba(var(--zen-accent-rgb),0.6); }
  .zen-ground-item.ticked .zen-ground-num { background:rgba(var(--zen-accent-rgb),0.2);border-color:rgba(var(--zen-accent-rgb),0.6); }
  .zen-ground-check { display:none; }
  .zen-ground-text { font-size:14px;color:rgba(var(--zen-text-rgb),0.6);line-height:1.4; }
  .zen-ground-item.ticked .zen-ground-text { opacity:0.4;text-decoration:line-through; }
  /* Zen Mood swatches */
  .zen-bg-row { display:flex;gap:10px;padding:4px 16px 8px;flex-wrap:wrap; }
  .zen-bg-swatch { display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;opacity:0.6;transition:opacity 0.2s; }
  .zen-bg-swatch.sel { opacity:1; }
  .zen-bg-dot { width:28px;height:28px;border-radius:50%;border:2px solid transparent;transition:border-color 0.2s; }
  .zen-bg-swatch.sel .zen-bg-dot { border-color:rgba(255,255,255,0.5); }
  .zen-bg-name { font-size:10px;color:var(--text2);letter-spacing:0.04em; }
  @media (max-width:500px) {
    #zenScreen { padding-top: calc(60px + env(safe-area-inset-top, 48px)); padding-bottom: calc(40px + env(safe-area-inset-bottom, 34px)); }
  }

  /* ── ANDROID PERFORMANCE ── */
  html.android * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html.android .tc {
    background: var(--surface) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    will-change: transform;
  }
  html.android .home-nav,
  html.android .done-header,
  html.android .stats-header,
  html.android .settings-ov {
    background: var(--bg) !important;
    box-shadow: 0 1px 0 var(--divider) !important;
  }
  html.android .streak-chip { background:var(--surface) !important;border-color:var(--divider) !important; }
  html.android .streak-popup { background:var(--bg) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;box-shadow:0 4px 16px rgba(0,0,0,0.15) !important; }
  html.android .drawer {
    background: var(--bg) !important;
  }
  html.android .det-sh {
    background: var(--bg) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12) !important;
  }
  html.android .tpl-panel {
    background: var(--bg) !important;
  }
  html.android .levelup-ov {
    background: rgba(0,0,0,0.85) !important;
  }
  html.android .reward-ov {
    background: rgba(0,0,0,0.88) !important;
  }
  html.android .timer-ov {
    background: var(--bg) !important;
  }
  html.android .badge-toast {
    background: var(--surface) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
  }
  html.android .zen-card {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
  }
  html.android .onb-card,
  html.android .onb-input-wrap {
    background: rgba(255,255,255,0.06) !important;
  }
  /* Android bottom nav bar compensation */
  html.android {
    --safe-b: 34px;
  }
  html.android .ib {
    padding-bottom: calc(28px + 34px) !important;
  }
  html.android .onb1 {
    padding-bottom: calc(48px + 34px) !important;
  }
  html.android .onb2,
  html.android .onb3 {
    padding-bottom: calc(40px + 34px) !important;
  }
  html.android .onb4 {
    padding-bottom: calc(32px + 34px) !important;
  }
  html.android .undo-toast,
  html.android .mood-selector {
    bottom: 128px !important;
  }
  html.android .badge-toast.show {
    bottom: 138px !important;
  }
  html.android .tips-ov {
    padding-bottom: calc(40px + 34px) !important;
  }
  html.android .tpl-panel {
    padding-bottom: 34px !important;
  }
  html.android .guide-screen {
    padding-bottom: 34px !important;
  }
  html.android .guide-footer {
    padding-bottom: calc(32px + 34px) !important;
  }
  html.android .zen-exit {
    bottom: calc(34px + 16px) !important;
  }

  /* ── iOS: hide mic (SpeechRecognition unsupported on WebKit) ── */
  html.ios .ib-mic, html.ios .dump-mic { display:none !important; }

  /* ── CALENDAR WIDGET ── */
  .cal-widget { padding:0 16px 4px; }
  .cal-widget .cal-strip { display:flex;gap:4px;padding:4px 0 6px;overflow-x:visible;justify-content:space-between; }
  .cal-day { flex:1;min-width:0;padding:8px 2px;border-radius:12px;text-align:center;cursor:pointer;transition:transform 0.15s,box-shadow 0.15s; }
  .cal-day-name { font-size:10px;font-weight:600;color:inherit;text-transform:uppercase;letter-spacing:0.5px; }
  .cal-day-num { font-size:18px;font-weight:700;margin:2px 0; }
  .cal-widget .cal-day.sel { background:var(--brand)!important;color:#fff!important;transform:none;box-shadow:0 2px 8px rgba(var(--brand-rgb),0.3); }
  .cal-widget .cal-day.sel .cal-day-name { color:#fff; }
  .cal-widget .cal-day.today:not(.sel) { box-shadow:inset 0 0 0 2px var(--brand); }
  .cal-day-dots { display:flex;gap:3px;justify-content:center;margin-top:2px; }
  .cal-day-dot { width:4px;height:4px;border-radius:50%;background:currentColor;opacity:0.6; }
  .cal-widget .cal-day.sel .cal-day-dot { background:#fff;opacity:0.8; }
  .cal-strip-nav { display:flex;align-items:center;justify-content:space-between;padding:0 4px 4px; }
  .cal-strip-nav-btn { background:none;border:none;color:var(--text2);font-size:14px;cursor:pointer;padding:4px 8px; }
  .cal-strip-nav-label { font-size:13px;font-weight:600;color:var(--text1);cursor:pointer; }
  .cal-view-toggle { background:none;border:1px solid var(--divider);color:var(--text2);font-size:11px;padding:3px 8px;border-radius:8px;cursor:pointer;font-weight:600;letter-spacing:0.3px; }
  .cal-view-toggle:active { background:var(--surface2); }
  .cal-month-grid { display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:4px 0 6px; }
  .cal-month-header { font-size:10px;font-weight:600;color:var(--text3);text-align:center;padding:4px 0;text-transform:uppercase;letter-spacing:0.5px; }
  .cal-month-cell { padding:6px 2px;border-radius:10px;text-align:center;cursor:pointer;font-size:13px;font-weight:600;color:var(--text1);transition:transform 0.15s; }
  .cal-month-cell.other-month { opacity:0.35; }
  .cal-month-cell.today:not(.sel) { box-shadow:inset 0 0 0 2px var(--brand); }
  .cal-month-cell.sel { background:var(--brand)!important;color:#fff!important;transform:none;box-shadow:0 2px 8px rgba(var(--brand-rgb),0.3); }
  .cal-month-cell .cal-day-dots { margin-top:1px; }
  .cal-empty { text-align:center;color:var(--text3);font-size:13px;padding:16px 0;font-style:italic; }

  /* ── FEEDBACK BUTTON (disabled for production — WoZ testing artifact) ── */
  .feedback-btn { display:none !important; }
  .feedback-btn-unused {
    position:fixed;bottom:calc(80px + var(--safe-b));right:16px;z-index:9996;
    width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
    background:var(--brand);color:#fff;font-size:18px;
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
    display:flex;align-items:center;justify-content:center;
    transition:opacity 0.15s,transform 0.15s;
    -webkit-tap-highlight-color:transparent;
  }
  .feedback-btn:active { transform:scale(0.92); }
  @media (max-width:500px) {
    .feedback-btn { bottom:calc(80px + env(safe-area-inset-bottom, 34px)); }
  }
  html.android .feedback-btn { bottom:calc(80px + 34px) !important; }
  @media (prefers-reduced-motion: reduce) {
    .feedback-btn { transition:none; }
    .feedback-btn:active { transform:none; }
  }