*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f2f3f6;--text:#0f0f0f;--t2:#505055;--t3:#9898a4;
  --border:rgba(0,0,0,0.08);--borders:rgba(0,0,0,0.15);
  --glass:rgba(252,252,254,0.72);--glass-bd:rgba(255,255,255,0.92);
  --blur:blur(18px);
  --blur-sm:blur(12px);
  --sh:0 8px 32px rgba(0,0,0,0.10),0 1.5px 0 rgba(255,255,255,0.35) inset,0 -1px 0 rgba(0,0,0,0.04) inset;
  --sh-lg:0 20px 60px rgba(0,0,0,0.13),0 1.5px 0 rgba(255,255,255,0.35) inset,0 -1px 0 rgba(0,0,0,0.05) inset;
  --r:14px;
}
html{height:100%}
body{height:100%;font-family:'Geist',sans-serif;font-size:14px;background:var(--bg);color:var(--text);cursor:none;overflow:hidden;
  transition:background .5s ease,color .5s ease;}
/* Brand styling for the '++' suffix used across the site */
.plusplus{font-family:'Geist Mono',monospace;font-weight:700;font-size:0.78em;letter-spacing:0;opacity:0.98;
  color:var(--accent,#6366f1); /* use the user-configurable accent colour */
  display:inline-block;transform:translateY(-0.12em);margin-left:0;padding-left:0}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;transition:background 0.6s ease;background:
  radial-gradient(ellipse 70% 55% at 10% 15%,rgba(185,210,255,0.15) 0%,transparent 65%),
  radial-gradient(ellipse 55% 65% at 90% 82%,rgba(215,195,255,0.10) 0%,transparent 65%),
  radial-gradient(ellipse 45% 45% at 55% 40%,rgba(185,250,225,0.08) 0%,transparent 62%),
  radial-gradient(ellipse 35% 35% at 70% 18%,rgba(255,225,185,0.08) 0%,transparent 58%)}

/* ── NIGHT MODE ─────────────────────────────────────────── */
body.night{
  --bg:#0e0f12;
  --text:#f0f0f2;
  --t2:#a0a0b0;
  --t3:#5a5a6e;
  --border:rgba(255,255,255,0.08);
  --borders:rgba(255,255,255,0.16);
  --glass:rgba(22,23,30,0.75);
  --glass-bd:rgba(255,255,255,0.10);
  --sh:0 8px 32px rgba(0,0,0,0.45),0 1px 0 rgba(255,255,255,0.03) inset,0 -1px 0 rgba(0,0,0,0.3) inset;
  --sh-lg:0 20px 60px rgba(0,0,0,0.55),0 1px 0 rgba(255,255,255,0.03) inset,0 -1px 0 rgba(0,0,0,0.3) inset;
}
body.night::before{background:
  radial-gradient(ellipse 70% 55% at 10% 15%,rgba(50,80,160,0.08) 0%,transparent 65%),
  radial-gradient(ellipse 55% 65% at 90% 82%,rgba(80,50,160,0.06) 0%,transparent 65%),
  radial-gradient(ellipse 45% 45% at 55% 40%,rgba(20,80,60,0.04) 0%,transparent 62%),
  radial-gradient(ellipse 35% 35% at 70% 18%,rgba(100,60,20,0.04) 0%,transparent 58%)}

/* Night: pill */
body.night #pill{background:rgba(20,22,28,0.82);border-color:rgba(255,255,255,0.10)}
body.night #pill.open{background:rgba(24,26,34,0.92)}
body.night .ni:hover{background:rgba(255,255,255,.08)}
body.night .ni.act{background:rgba(255,255,255,.12)}
body.night .pill-logo,.night .ni,.night #pinbtn,.night #syncbtn{color:var(--text)}
body.night #pinbtn,body.night #syncbtn{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}
body.night #pinbtn:hover,body.night #syncbtn:hover{background:rgba(255,255,255,.14)}
body.night .pill-sep{background:rgba(255,255,255,.1)}

/* Night: fix .bd (filled) button — use a lighter fill so text is visible */
body.night .bd{background:rgba(255,255,255,.90);color:#0f0f0f;border:1px solid rgba(255,255,255,.8)}
body.night .bd:hover{background:rgba(255,255,255,1);color:#0f0f0f}
/* Night: .bo (outline) button */
body.night .bo{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:var(--text)}
body.night .bo:hover{background:rgba(255,255,255,.14)}
/* Night: calendar nav buttons */
body.night .cbn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:var(--t2)}
body.night .cbn:hover{background:rgba(255,255,255,.16);color:var(--text);border-color:rgba(255,255,255,.24)}
body.night .inp{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);color:var(--text)}
body.night .inp:focus{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.2)}
body.night .cdd-trigger{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);color:var(--text)}
body.night .cdd-trigger:hover{background:rgba(255,255,255,.11)}
body.night .cdd-panel{background:rgba(20,22,30,.96);border-color:rgba(255,255,255,.12)}
body.night .cdd-opt:hover{background:rgba(255,255,255,.08)}
body.night .cdd-opt.sel{background:rgba(255,255,255,.12)}

/* Night: cards and tiles */
body.night .glass{background:rgba(22,23,30,0.78);border-color:rgba(255,255,255,0.08)}
body.night .ttc{background:rgba(32,34,46,0.82);border-color:rgba(255,255,255,0.10)}
body.night .ttc::before{display:none}
body.night .ttc:hover{background:rgba(40,42,58,0.94)}
body.night .ttbr{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.06)}
body.night .tt-ph{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.11)}
body.night .tt-dh{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.08)}
body.night .ri{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
body.night .ri:hover{background:rgba(255,255,255,.10)}
body.night .hw-item{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
body.night .le{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}
body.night .evi{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}
body.night .sci{border-color:rgba(255,255,255,.08)}
body.night .ts-row{background:rgba(255,255,255,.06)}
body.night .ts-row:hover{background:rgba(255,255,255,.1)}
body.night .ts-row.ts-now{background:rgba(255,255,255,.9);color:#111}
body.night .exam-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
body.night .pp-row{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}
body.night .qs-strip{background:rgba(22,23,30,0.72);border-color:rgba(255,255,255,.08)}

/* Night: calendar hover — subtle lift, not jarring white */
body.night .cd:hover{background:rgba(255,255,255,.09)}
body.night .cd.sel{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.18)}
/* Night: clock widget — remove inset white line */
body.night #clock-widget{background:rgba(20,22,28,.75);border-color:rgba(255,255,255,.1);box-shadow:0 8px 32px rgba(0,0,0,.35)}

/* Night: context menu */
body.night #ctx{background:rgba(18,20,26,.92);border-color:rgba(255,255,255,.1)}
body.night .ctx-item:hover{background:rgba(255,255,255,.08)}

/* Night: modals */
body.night .modal-bg .modal-box{background:rgba(18,20,28,.88);border-color:rgba(255,255,255,.1)}

/* Night: toast + shortcut overlay */
body.night #kbd-toast{background:rgba(240,240,245,.92);color:#111;border-color:rgba(0,0,0,.1)}
body.night #sco #scob{background:rgba(18,20,28,.92);border-color:rgba(255,255,255,.1)}
body.night .sc-keys kbd{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15);color:var(--text)}

/* Night: home hero */
body.night .home-hero{color:var(--text)}
body.night .h-prog-track{background:rgba(255,255,255,.12)}
body.night .h-prog-fill{background:rgba(255,255,255,.85)}
body.night .subj-tile{background:linear-gradient(135deg,rgba(30,32,50,.95) 0%,rgba(20,22,38,.97) 100%)}

/* Night: study tabs */
body.night .study-tabs{background:rgba(255,255,255,.06)}
body.night .stab.act{background:rgba(255,255,255,.14);color:var(--text)}
body.night .stab:hover:not(.act){color:var(--text)}
body.night .subj-tabs .stj{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}
body.night .stj.act{background:var(--text);color:#111}

/* Night: sync badge */
body.night #sync-badge{background:rgba(18,20,28,.92);border-color:rgba(255,255,255,.1)}

body.night .cd.tdy{color:#0f0f0f}
body.night .cd.tdy .cd-chip{background:rgba(0,0,0,.12);color:#111}
/* Night: scrollbar */
body.night ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12)}

/* Night: cdot cursor */

/* Night: home */
body.night .h-meta-label{color:rgba(255,255,255,.6)}
body.night .h-meta-period{color:rgba(255,255,255,.8)}

/* Night: stopwatch */
body.night #sw-float{background:rgba(20,22,28,.80);border-color:rgba(255,255,255,.1);box-shadow:0 8px 32px rgba(0,0,0,.4)}
body.night .sw-float-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1)}
body.night #sw-cancel-btn{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.14)!important;color:var(--t2)!important}
body.night .sw-float-btn:hover{background:rgba(255,255,255,.16)}

/* Night: search */
body.night #search-box{background:rgba(18,20,28,.95);border-color:rgba(255,255,255,.12)}
body.night #search-input{color:var(--text)}
body.night .sr-item:hover{background:rgba(255,255,255,.07)}

/* Night: friends */
body.night .fr-profile-pill{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}
body.night .fr-profile-pill:hover{background:rgba(255,255,255,.12)}
body.night .fr-lb-card{background:rgba(18,20,28,.82);border-color:rgba(255,255,255,.07)}
body.night .fr-lb-tabs{background:rgba(255,255,255,.07)}
body.night .fr-lb-tab.act{background:rgba(255,255,255,.14);color:var(--text)}
body.night .fr-lb-refresh{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
body.night .fr-lb-refresh:hover{background:rgba(255,255,255,.14);color:var(--text)}
body.night .fr-pod-1{background:linear-gradient(145deg,rgba(245,158,11,.2),rgba(245,158,11,.09));border-color:rgba(245,158,11,.28)}
body.night .fr-pod-2{background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.05));border-color:rgba(255,255,255,.11)}
body.night .fr-pod-3{background:linear-gradient(145deg,rgba(234,88,12,.17),rgba(234,88,12,.07));border-color:rgba(234,88,12,.22)}
body.night .fr-pod-1 .fr-pod-avatar{background:rgba(245,158,11,.22);color:#fde68a}
body.night .fr-pod-2 .fr-pod-avatar{background:rgba(255,255,255,.14);color:#cbd5e1}
body.night .fr-pod-3 .fr-pod-avatar{background:rgba(234,88,12,.2);color:#fed7aa}
body.night .fr-pod-step-1{background:rgba(245,158,11,.2)}
body.night .fr-pod-step-2{background:rgba(255,255,255,.08)}
body.night .fr-pod-step-3{background:rgba(234,88,12,.15)}
body.night .fr-row{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07)}
body.night .fr-row:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.14)}
body.night .fr-row.fr-row-me{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.15)}
body.night .fr-row-bar{background:rgba(255,255,255,.08)}
body.night .fr-row-rm:hover{background:rgba(229,62,62,.15);color:#fc8181}

/* ── SEARCH ─────────────────────────────────────────── */
.sr-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;cursor:none;transition:background .1s;color:var(--text)}
.sr-item:hover{background:rgba(0,0,0,.055)}
.sr-tag{font-size:9px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.1em;padding:2px 7px;border-radius:10px;flex-shrink:0;font-weight:500}
.sr-tag.rem{background:rgba(37,99,235,.1);color:rgba(37,99,235,.8)}
.sr-tag.hw{background:rgba(124,58,237,.1);color:rgba(124,58,237,.8)}
.sr-tag.ev{background:rgba(16,163,74,.1);color:rgba(16,163,74,.8)}
.sr-tag.ex{background:rgba(220,38,38,.1);color:rgba(220,38,38,.8)}
.sr-body{flex:1;min-width:0}
.sr-title{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-meta{font-size:11px;color:var(--t3);font-family:'Geist Mono',monospace;margin-top:1px}
.sr-empty{padding:28px;text-align:center;font-size:13px;color:var(--t3)}

/* ── MOBILE ──────────────────────────────────────────── */
@media(max-width:640px){
  /* Hide desktop pill */
  #pill{display:none!important}

  /* Bottom tab bar */
  #mobile-nav{
    display:flex;
    position:fixed;bottom:0;left:0;right:0;
    height:68px;z-index:500;
    background:rgba(250,250,252,.88);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border-top:1px solid rgba(255,255,255,.9);
    box-shadow:0 -4px 24px rgba(0,0,0,.08);
    align-items:center;justify-content:space-around;
    padding:0 8px;padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .mni{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:4px;padding:8px 4px;border-radius:12px;color:var(--t3);
    transition:all .18s;-webkit-tap-highlight-color:transparent;cursor:pointer;
  }
  .mni.act{color:var(--text)}
  .mni.act svg{opacity:1}
  .mni svg{width:22px;height:22px;opacity:.42;transition:opacity .18s}
  .mni-dot{width:4px;height:4px;border-radius:50%;background:var(--text);opacity:0;transition:opacity .18s;margin-top:-2px}
  .mni.act .mni-dot{opacity:1}

  /* Push page content above bottom bar — only when mobile nav visible */
  #page-stack{bottom:68px!important}
  /* When pg-mobile is active, page-stack fills full screen */
  body:has(#pg-mobile.act) #page-stack{bottom:0!important}
  #sw-float,#clock-widget{top:12px!important}
  /* Hide clock widget on mobile — not needed on mobile home */
  #clock-widget,#sw-float{display:none!important}
  #sync-badge{bottom:80px}
  /* On mobile home, sync badge appears near top right under the pill */
  body:has(#pg-mobile.act) #sync-badge{
    bottom:auto;top:calc(52px + env(safe-area-inset-top,0px));
    right:12px;left:auto;width:calc(100vw - 24px);max-width:340px;
  }

  /* Night mode bottom bar */
  body.night #mobile-nav{
    background:rgba(14,15,18,.88);
    border-top-color:rgba(255,255,255,.08);
  }
  body.night .mni.act{color:var(--text)}

  /* Mobile layout fixes */
  .cal-layout{grid-template-columns:1fr!important}
  .drop-card[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;display:flex!important;flex-direction:column}
  .home-timer{font-size:clamp(72px,22vw,140px)!important}
  .cg-tall .cd{min-height:60px!important}
  #pp-trend{height:90px!important}
  .modal-box{margin:16px!important;max-width:calc(100vw - 32px)!important}
  #search-box{width:calc(100vw - 24px)!important}

  /* Swipe hint overlay */
  #swipe-hint{
    position:fixed;bottom:80px;left:50%;transform:translateX(-50%);
    font-size:11px;font-family:'Geist Mono',monospace;text-transform:uppercase;
    letter-spacing:.1em;color:var(--t3);pointer-events:none;z-index:490;
    opacity:0;transition:opacity .4s;
  }
  #swipe-hint.show{opacity:.7}
}

/* ── MOBILE HOME PAGE ───────────────────────────────────
   Completely separate UI for mobile — hidden on desktop    */

/* Mobile-only overlays — hidden on desktop */
#mh-sync-pill{display:none}
/* FAB: hidden globally, shown via media query on mobile */
#mh-quick-fab{display:none}

/* Desktop: hide mobile page entirely */
@media(min-width:641px){
  #pg-mobile{display:none!important}
}

@media(max-width:640px){
  /* Sync pill — top right of mobile home */
  #mh-sync-pill{
    position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:12px;
    z-index:400;
    display:flex;align-items:center;gap:6px;
    padding:7px 12px 7px 9px;
    background:rgba(252,252,254,.82);
    border:1px solid rgba(255,255,255,.9);
    border-radius:20px;
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    box-shadow:0 4px 16px rgba(0,0,0,.08),0 1px 0 rgba(255,255,255,.9) inset;
    font-size:11px;font-family:'Geist Mono',monospace;color:var(--t2);
    letter-spacing:.04em;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:opacity .15s;
  }
  #mh-sync-pill:active{opacity:.7}
  #mh-sync-dot{
    width:6px;height:6px;border-radius:50%;background:var(--t3);flex-shrink:0;
    transition:background .3s;
  }
  #mh-sync-dot.on{background:#16a34a}
  /* Kill fancy cursor on mobile entirely */
  #cdot,#ctrail{display:none!important}
  body{cursor:auto!important}
  *{cursor:auto!important}
  a,button,[onclick]{cursor:pointer!important}
  input,textarea,select{cursor:text!important}
  /* Hide bottom nav when on mobile home page */
  #pg-mobile.act ~ #mobile-nav,
  body:has(#pg-mobile.act) #mobile-nav{display:none!important}
  /* Mobile page styling when active */
  #pg-mobile.act{
    display:block!important;
    padding:0;
    position:fixed;inset:0;
    overflow:hidden;
    overscroll-behavior:none;
    z-index:200;
  }
  /* On mobile, hide pg-dash completely — pg-mobile replaces it */
  #pg-dash{display:none!important}
  /* Prevent any other .pg from overlaying pg-mobile */
  body:has(#pg-mobile.act) .pg:not(#pg-mobile){display:none!important}
  body:has(#pg-mobile.act) #page-stack{overflow:hidden!important}
  /* Kill body bounce when mobile home is active */
  body:has(#pg-mobile.act){overflow:hidden;overscroll-behavior:none;position:fixed;width:100%;height:100%}

  #mh-pager{
    display:flex;
    width:200%;
    height:100%;
    transition:transform .42s cubic-bezier(.4,0,.2,1);
    will-change:transform;
    overscroll-behavior:none;
  }
  #mh-pager.on-tiles{transform:translateX(-50%)}

  /* Panel 1: hero — full screen */
  #mh-panel-hero{
    width:50%;
    height:100%;
    position:relative;
    display:flex;flex-direction:column;
    align-items:center;justify-content:space-between;
    padding:calc(env(safe-area-inset-top,0px) + 56px) 28px calc(env(safe-area-inset-bottom,0px) + 36px);
    overflow:hidden;
    /* Allow horizontal swipe to tiles, block vertical bounce */
    overscroll-behavior:none;
    -webkit-overflow-scrolling:auto;
    /* Dark gradient background */
    background:linear-gradient(160deg,
      rgba(20,20,40,.92) 0%,
      rgba(10,10,28,.96) 60%,
      rgba(14,10,38,.98) 100%);
  }

  /* Animated background orbs */
  .mh-orb{position:absolute;border-radius:50%;pointer-events:none}
  .mh-orb-1{
    width:300px;height:300px;top:-80px;left:-80px;
    background:radial-gradient(circle,rgba(99,132,255,.22) 0%,transparent 70%);
    animation:mhOrb1 8s ease-in-out infinite;
  }
  .mh-orb-2{
    width:250px;height:250px;bottom:-60px;right:-60px;
    background:radial-gradient(circle,rgba(147,51,234,.18) 0%,transparent 70%);
    animation:mhOrb2 10s ease-in-out infinite;
  }
  .mh-orb-3{
    width:180px;height:180px;top:40%;left:50%;transform:translateX(-50%);
    background:radial-gradient(circle,rgba(16,163,74,.1) 0%,transparent 70%);
    animation:mhOrb3 12s ease-in-out infinite;
  }
  @keyframes mhOrb1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,20px) scale(1.1)}}
  @keyframes mhOrb2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-20px,-30px) scale(1.08)}}
  @keyframes mhOrb3{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.15)}}

  /* Logo */
  .mh-logo-wrap{text-align:center;z-index:1}
  .mh-wordmark{
    font-size:48px;font-weight:700;letter-spacing:-.04em;
    color:#fff;line-height:1;
    animation:mhFadeUp .6s cubic-bezier(.34,1.1,.64,1) both;
  }
  .mh-dot-logo{color:rgba(148,163,255,.9)}
  .mh-tagline{
    font-size:12px;font-family:'Geist Mono',monospace;
    color:rgba(255,255,255,.4);letter-spacing:.12em;
    text-transform:uppercase;margin-top:8px;
    animation:mhFadeUp .6s .1s cubic-bezier(.34,1.1,.64,1) both;
  }

  /* Countdown */
  .mh-countdown-wrap{
    position:relative;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    z-index:1;
    animation:mhFadeUp .6s .15s cubic-bezier(.34,1.1,.64,1) both;
  }
  .mh-progress-arc{
    position:absolute;width:220px;height:220px;
    pointer-events:none;
  }
  .mh-countdown-label{
    font-size:12px;font-family:'Geist Mono',monospace;
    color:rgba(255,255,255,.5);text-transform:uppercase;
    letter-spacing:.16em;margin-bottom:8px;
  }
  .mh-countdown-timer{
    font-size:64px;font-weight:700;letter-spacing:-.04em;
    color:#fff;line-height:1;font-variant-numeric:tabular-nums;
    font-family:'Geist Mono',monospace;
  }
  .mh-countdown-sub{
    font-size:16px;font-family:'Geist Mono',monospace;color:rgba(255,255,255,.7);
    margin-top:10px;font-weight:500;letter-spacing:-.01em;
    text-align:center;max-width:200px;
  }

  /* Footer */
  .mh-hero-foot{text-align:center;z-index:1;animation:mhFadeUp .6s .2s cubic-bezier(.34,1.1,.64,1) both}
  .mh-hero-date{font-size:12px;font-family:'Geist Mono',monospace;color:rgba(255,255,255,.35);letter-spacing:.08em;text-transform:uppercase}
  .mh-hero-next{font-size:13px;color:rgba(255,255,255,.5);margin-top:6px;font-weight:500}

  /* Swipe hint */
  .mh-swipe-hint{
    position:absolute;right:16px;top:50%;transform:translateY(-50%);
    display:flex;flex-direction:column;align-items:center;gap:4px;
    z-index:1;
    animation:mhPulse 2.5s 1.5s ease-in-out infinite;
  }
  .mh-swipe-hint span{font-size:8px;font-family:'Geist Mono',monospace;color:rgba(255,255,255,.3);letter-spacing:.1em;text-transform:uppercase;writing-mode:vertical-rl}
  @keyframes mhPulse{0%,100%{opacity:.4;transform:translateY(-50%) translateX(0)}50%{opacity:.9;transform:translateY(-50%) translateX(4px)}}

  /* Entry animations */
  @keyframes mhFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

  /* Panel 2: tiles */
  #mh-panel-tiles{
    width:50%;height:100%;
    overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .mh-tiles-header{
    padding:calc(env(safe-area-inset-top,0px) + 20px) 20px 4px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .mh-tiles-title{
    font-size:22px;font-weight:700;letter-spacing:-.03em;color:var(--text);
  }
  .mh-scroll{padding:0 14px calc(90px + env(safe-area-inset-bottom,0px));}
  .mh-greeting-row{margin-bottom:18px;padding-top:4px}

  /* Page indicator dots — bottom of hero panel */
  .mh-page-dots{
    position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
    left:50%;transform:translateX(-50%);
    display:flex;gap:6px;z-index:2;
  }
  .mh-page-dot{
    width:5px;height:5px;border-radius:50%;
    background:rgba(255,255,255,.25);
    transition:all .3s cubic-bezier(.34,1.4,.64,1);
  }
  .mh-page-dot.on{background:#fff;transform:scale(1.4)}

  /* ── FULL-WIDTH TILES ────────────────────────────────── */
  .mh-tiles{display:flex;flex-direction:column;gap:14px;padding-bottom:90px}
  .mh-tile{
    border-radius:24px;
    padding:20px 20px 18px;
    position:relative;overflow:hidden;
    border:1px solid rgba(255,255,255,.82);
    background:rgba(252,252,254,.68);
    box-shadow:0 8px 32px rgba(0,0,0,.07),0 1.5px 0 rgba(255,255,255,.35) inset;
    backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);
    min-height:120px;
  }
  .mh-tile::before{
    content:'';position:absolute;top:0;left:8%;right:8%;
    height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  }
  .mh-t-rem{background:linear-gradient(145deg,rgba(99,132,255,.15),rgba(252,252,254,.7));border-color:rgba(148,163,255,.35)}
  .mh-t-hw{background:linear-gradient(145deg,rgba(147,51,234,.12),rgba(252,252,254,.7));border-color:rgba(192,132,252,.32)}
  .mh-t-ex{background:linear-gradient(145deg,rgba(220,38,38,.11),rgba(252,252,254,.7));border-color:rgba(248,113,113,.3)}
  .mh-t-sched{background:linear-gradient(145deg,rgba(16,163,74,.11),rgba(252,252,254,.7));border-color:rgba(52,211,153,.3)}
  .mh-t-cal{background:rgba(252,252,254,.72);border-color:rgba(255,255,255,.85)}
  .mh-tile-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
  .mh-tile-label{font-size:9px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.16em;color:var(--t3);font-weight:600}
  /* Completion ring */
  .mh-ring{position:absolute;top:16px;right:16px;width:72px;height:72px}
  /* Reminder rows */
  .mh-rrow{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--border)}
  .mh-rrow:last-child{border-bottom:none;padding-bottom:0}
  .mh-rrow:first-child{padding-top:0}
  .mh-rcheck{width:26px;height:26px;border:2px solid var(--borders);border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;transition:all .15s;min-width:26px}
  .mh-rrow.done .mh-rcheck{background:var(--text);border-color:var(--text)}
  .mh-rtxt{flex:1;font-size:15px;font-weight:500;line-height:1.3;min-width:0;padding-right:84px}
  .mh-rrow.done .mh-rtxt{text-decoration:line-through;color:var(--t3);font-weight:400}
  .mh-rpri{font-size:9px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.07em;padding:3px 8px;border-radius:20px;flex-shrink:0}
  .mh-rpri.h{background:rgba(220,38,38,.12);color:#dc2626}
  .mh-rpri.l{background:rgba(16,163,74,.12);color:#16a34a}
  /* HW rows */
  .mh-hrow{display:flex;align-items:center;gap:14px;padding:13px 0 13px 16px;border-bottom:1px solid var(--border);border-left:4px solid transparent;margin-left:-20px}
  .mh-hrow:last-child{border-bottom:none;padding-bottom:0}
  .mh-hrow:first-child{padding-top:0}
  .mh-hcheck{width:26px;height:26px;border:2px solid var(--borders);border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;transition:all .15s;min-width:26px}
  .mh-hrow.done .mh-hcheck{background:var(--text);border-color:var(--text)}
  .mh-htxt{font-size:15px;font-weight:500;line-height:1.3;flex:1;min-width:0}
  .mh-hrow.done .mh-htxt{text-decoration:line-through;color:var(--t3);font-weight:400}
  .mh-hmeta{font-size:11px;font-family:'Geist Mono',monospace;color:var(--t3);margin-top:3px}
  .mh-overdue{color:#e53e3e!important}
  /* Exam rows */
  .mh-xrow{display:flex;align-items:center;gap:20px;padding:14px 0;border-bottom:1px solid var(--border)}
  .mh-xrow:last-child{border-bottom:none;padding-bottom:0}
  .mh-xrow:first-child{padding-top:0}
  .mh-xring{width:72px;height:72px;flex-shrink:0}
  .mh-xinfo{flex:1;min-width:0}
  .mh-xname{font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mh-xdate{font-size:11px;font-family:'Geist Mono',monospace;color:var(--t3);margin-top:4px}
  /* Schedule rows */
  .mh-srow{display:flex;align-items:stretch;gap:14px;padding:11px 0;border-bottom:1px solid var(--border)}
  .mh-srow:last-child{border-bottom:none;padding-bottom:0}
  .mh-srow:first-child{padding-top:0}
  .mh-stime{font-size:12px;font-family:'Geist Mono',monospace;color:var(--t3);width:46px;flex-shrink:0;padding-top:2px}
  .mh-sbar{width:4px;border-radius:3px;background:var(--border);flex-shrink:0;min-height:24px}
  .mh-sbar.cur{background:#2563eb}
  .mh-sname{font-size:15px;font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-top:1px}
  .mh-scur .mh-sname{font-weight:700;color:#2563eb;font-size:16px}
  .mh-sroom{font-size:10px;font-family:'Geist Mono',monospace;color:var(--t3);flex-shrink:0;padding-top:3px}
  /* Calendar */
  .mh-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
  .mh-dh{font-size:9px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);text-align:center;padding:3px 0}
  .mh-cd{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:12px;border-radius:7px;position:relative;-webkit-tap-highlight-color:transparent;color:var(--text)}
  .mh-cd:active{background:rgba(0,0,0,.06)}
  .mh-cd.other{color:var(--t3)}
  .mh-cd.today{background:var(--text)!important;color:#fff!important;font-weight:600}
  .mh-cd.sel:not(.today){background:rgba(0,0,0,.07)}
  .mh-cd.dot::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:50%;background:var(--t2)}
  .mh-cd.today.dot::after{background:rgba(255,255,255,.55)}
  .mh-day-strip{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
  .mh-day-lbl{font-size:10px;font-family:'Geist Mono',monospace;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}
  .mh-day-ev{display:flex;align-items:center;gap:8px;font-size:12px;padding:6px 9px;background:rgba(0,0,0,.04);border-radius:8px;margin-bottom:4px}
  .mh-day-dot{width:6px;height:6px;border-radius:50%;background:var(--t2);flex-shrink:0}
  .mh-cal-nbtn{width:26px;height:26px;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;color:var(--t2);-webkit-tap-highlight-color:transparent;transition:all .12s}
  .mh-cal-nbtn:active{opacity:.6}
  /* Empty states */
  .mh-nil{font-size:13px;color:var(--t3);font-family:'Geist Mono',monospace;text-align:center;padding:20px 0 8px;letter-spacing:.04em}

  /* Tile header */
  .mh-tile-hd{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:10px;
  }
  .mh-tile-label{
    font-size:10px;font-family:'Geist Mono',monospace;text-transform:uppercase;
    letter-spacing:.12em;color:var(--t3);font-weight:500;
  }
  .mh-tile-action{
    font-size:11px;font-family:'Geist Mono',monospace;color:var(--t2);
    -webkit-tap-highlight-color:transparent;cursor:pointer;padding:2px 0;
  }
  /* Empty state */
  .mh-nil{font-size:12px;color:var(--t3);font-family:'Geist Mono',monospace;
    text-align:center;padding:10px 0 4px;letter-spacing:.04em}
  /* Calendar tile */
  .mh-cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .mh-cal-month{font-size:14px;font-weight:600;letter-spacing:-.01em}
  .mh-cal-nbtn{
    width:26px;height:26px;border-radius:8px;border:1px solid var(--border);
    background:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;
    color:var(--t2);-webkit-tap-highlight-color:transparent;transition:all .12s;
  }
  .mh-cal-nbtn:active{opacity:.6}
  .mh-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
  .mh-dh{font-size:9px;font-family:'Geist Mono',monospace;text-transform:uppercase;
    letter-spacing:.06em;color:var(--t3);text-align:center;padding:3px 0}
  .mh-cd{
    aspect-ratio:1;display:flex;align-items:center;justify-content:center;
    font-size:12px;border-radius:7px;position:relative;
    -webkit-tap-highlight-color:transparent;color:var(--text);
  }
  .mh-cd:active{background:rgba(0,0,0,.06)}
  .mh-cd.other{color:var(--t3)}
  .mh-cd.today{background:var(--text)!important;color:#fff!important;font-weight:600}
  .mh-cd.sel:not(.today){background:rgba(0,0,0,.07)}
  .mh-cd.dot::after{
    content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
    width:3px;height:3px;border-radius:50%;background:var(--t2);
  }
  .mh-cd.today.dot::after{background:rgba(255,255,255,.55)}
  .mh-day-strip{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
  .mh-day-lbl{font-size:10px;font-family:'Geist Mono',monospace;color:var(--t3);
    text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}
  .mh-day-ev{
    display:flex;align-items:center;gap:8px;font-size:12px;
    padding:6px 9px;background:rgba(0,0,0,.04);border-radius:8px;margin-bottom:4px;
  }
  .mh-day-dot{width:6px;height:6px;border-radius:50%;background:var(--t2);flex-shrink:0}
  /* Reminder rows */
  /* Reminder rows */
  .mh-rrow{
    display:flex;align-items:center;gap:11px;
    padding:11px 0;border-bottom:1px solid var(--border);
  }
  .mh-rrow:last-child{border-bottom:none;padding-bottom:2px}
  .mh-rrow:first-child{padding-top:2px}
  .mh-rcheck{
    width:20px;height:20px;border:1.5px solid var(--borders);border-radius:6px;
    flex-shrink:0;display:flex;align-items:center;justify-content:center;
    -webkit-tap-highlight-color:transparent;transition:all .12s;min-width:20px;
  }
  .mh-rrow.done .mh-rcheck{background:var(--text);border-color:var(--text)}
  .mh-rtxt{flex:1;font-size:14px;line-height:1.35;min-width:0}
  .mh-rrow.done .mh-rtxt{text-decoration:line-through;color:var(--t3)}
  .mh-rpri{font-size:9px;font-family:'Geist Mono',monospace;text-transform:uppercase;
    letter-spacing:.07em;padding:2px 7px;border-radius:20px;flex-shrink:0}
  .mh-rpri.h{background:rgba(220,38,38,.1);color:#dc2626}
  .mh-rpri.l{background:rgba(16,163,74,.1);color:#16a34a}
  /* HW rows */
  .mh-hrow{
    display:flex;align-items:flex-start;gap:11px;
    padding:11px 0;border-bottom:1px solid var(--border);
    border-left:3px solid transparent;margin-left:-13px;padding-left:10px;
  }
  .mh-hrow:last-child{border-bottom:none;padding-bottom:2px}
  .mh-hrow:first-child{padding-top:2px}
  .mh-hcheck{
    width:20px;height:20px;border:1.5px solid var(--borders);border-radius:6px;
    flex-shrink:0;display:flex;align-items:center;justify-content:center;
    margin-top:1px;-webkit-tap-highlight-color:transparent;transition:all .12s;min-width:20px;
  }
  .mh-hrow.done .mh-hcheck{background:var(--text);border-color:var(--text)}
  .mh-htxt{font-size:14px;line-height:1.35;min-width:0}
  .mh-hrow.done .mh-htxt{text-decoration:line-through;color:var(--t3)}
  .mh-hmeta{font-size:11px;font-family:'Geist Mono',monospace;color:var(--t3);margin-top:3px}
  .mh-overdue{color:#e53e3e!important}
  /* Schedule rows */
  .mh-srow{
    display:flex;align-items:center;gap:10px;
    padding:9px 0;border-bottom:1px solid var(--border);
  }
  .mh-srow:last-child{border-bottom:none;padding-bottom:0}
  .mh-srow:first-child{padding-top:0}
  .mh-stime{font-size:11px;font-family:'Geist Mono',monospace;color:var(--t3);width:44px;flex-shrink:0}
  .mh-sname{font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mh-sroom{font-size:10px;font-family:'Geist Mono',monospace;color:var(--t3);flex-shrink:0}
  .mh-scur{font-weight:600}
  .mh-scur .mh-sname{font-weight:600}
  /* Quick add sheet */
  #mh-bg{
    position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.32);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    opacity:0;pointer-events:none;transition:opacity .22s;
  }
  #mh-bg.on{opacity:1;pointer-events:all}
  #mh-sheet{
    position:fixed;bottom:0;left:0;right:0;z-index:9001;
    background:var(--glass-bd);
    border-top:1px solid var(--border);
    border-radius:22px 22px 0 0;
    padding:0 16px calc(24px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -12px 48px rgba(0,0,0,.16);
    transform:translateY(100%);
    transition:transform .28s cubic-bezier(.32,0,.67,0);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  }
  #mh-sheet.on{transform:translateY(0);transition:transform .34s cubic-bezier(.34,1.1,.64,1)}
  .mh-handle{width:36px;height:4px;border-radius:2px;background:var(--border);
    margin:14px auto 16px;opacity:.5}
  .mh-stabs{display:flex;background:rgba(0,0,0,.05);border-radius:11px;padding:3px;margin-bottom:16px}
  .mh-stab{
    flex:1;padding:7px 4px;border-radius:8px;font-size:12px;font-weight:500;
    text-align:center;border:none;background:transparent;color:var(--t2);
    -webkit-tap-highlight-color:transparent;transition:all .15s;cursor:pointer;
    font-family:'Geist',sans-serif;
  }
  .mh-stab.on{background:var(--glass-bd);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.1)}
  .mh-spane{display:none}
  .mh-spane.on{display:block}
  .mh-si{
    width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:13px;
    font-family:'Geist',sans-serif;font-size:14px;outline:none;
    background:rgba(255,255,255,.65);color:var(--text);
    box-sizing:border-box;margin-bottom:10px;
    -webkit-appearance:none;appearance:none;
  }
  .mh-si:focus{border-color:var(--borders)}
  .mh-srow2{display:flex;gap:8px;margin-bottom:10px}
  .mh-srow2 .mh-si{margin-bottom:0;flex:1}
  .mh-sbtn{
    width:100%;padding:14px;border-radius:14px;margin-top:4px;
    background:var(--text);color:#fff;font-family:'Geist',sans-serif;
    font-size:14px;font-weight:600;border:none;
    -webkit-tap-highlight-color:transparent;transition:transform .12s,opacity .12s;
    cursor:pointer;
  }
  .mh-sbtn:active{transform:scale(.97);opacity:.8}
  /* FAB */
  /* Hide both FABs on mobile */
  #mh-fab,#qa-btn{display:none!important}

  /* ── TILE ENTRY ANIMATIONS ───────────────────────────── */
  @keyframes mhTileIn{
    from{opacity:0;transform:translateY(18px) scale(.97)}
    to{opacity:1;transform:translateY(0) scale(1)}
  }
  .mh-tile{animation:mhTileIn .42s cubic-bezier(.34,1.1,.64,1) both}
  .mh-tile:nth-child(1){animation-delay:.05s}
  .mh-tile:nth-child(2){animation-delay:.10s}
  .mh-tile:nth-child(3){animation-delay:.15s}
  .mh-tile:nth-child(4){animation-delay:.20s}
  .mh-tile:nth-child(5){animation-delay:.25s}
  /* Row entry */
  @keyframes mhRowIn{
    from{opacity:0;transform:translateX(-8px)}
    to{opacity:1;transform:translateX(0)}
  }
  .mh-rrow,.mh-hrow,.mh-srow,.mh-xrow{
    animation:mhRowIn .3s cubic-bezier(.4,0,.2,1) both;
  }
  /* Tick animation on check */
  @keyframes mhTick{0%{transform:scale(1.4)}50%{transform:scale(.85)}100%{transform:scale(1)}}
  .mh-rcheck.ticked,.mh-hcheck.ticked{animation:mhTick .3s cubic-bezier(.34,1.4,.64,1)}
  /* Ring fill animation */
  @keyframes mhRingFill{from{stroke-dashoffset:113}to{stroke-dashoffset:var(--target-offset)}}
  /* Hero entry */
  @keyframes mhHeroIn{
    from{opacity:0;transform:translateY(-12px) scale(.96)}
    to{opacity:1;transform:translateY(0) scale(1)}
  }
  .mh-hero{animation:mhHeroIn .5s cubic-bezier(.34,1.1,.64,1) both}
  .mh-dots{animation:mhHeroIn .5s .1s cubic-bezier(.34,1.1,.64,1) both}
  /* Sheet slide */
  #mh-sheet.on{animation:none} /* already has transition */

  /* ── DRAG REORDER ────────────────────────────────────── */
  .mh-tile.dragging{
    opacity:.55;
    transform:scale(.97) rotate(1.5deg)!important;
    box-shadow:0 20px 50px rgba(0,0,0,.22)!important;
    z-index:100;
    transition:none!important;
  }
  .mh-tile.drag-over{
    transform:translateY(-4px) scale(1.01)!important;
    box-shadow:0 16px 40px rgba(0,0,0,.14)!important;
    transition:transform .15s,box-shadow .15s;
  }
  /* Drag handle hint — subtle dots top-left */
  .mh-tile::after{
    content:'⠿';
    position:absolute;top:14px;left:14px;
    font-size:14px;color:var(--border);
    pointer-events:none;
    opacity:0;transition:opacity .2s;
  }
  .mh-tile.drag-ready::after{opacity:1}

  /* ── BIGGER GRAPHICS IN TILES ────────────────────────── */
  /* Schedule bar — thicker */
  .mh-srow{padding:12px 0;gap:14px}
  .mh-stime{font-size:12px;width:48px}

  /* ── QUICK-ADD FAB — always visible, bottom centre ─── */
  #mh-quick-fab{
    display:flex!important;
    position:fixed;
    bottom:calc(28px + env(safe-area-inset-bottom,0px));
    left:50%;transform:translateX(-50%);
    z-index:8000;
    width:60px;height:60px;border-radius:20px;
    background:var(--text);color:#fff;border:none;
    align-items:center;justify-content:center;
    box-shadow:0 8px 28px rgba(0,0,0,.28),0 1px 0 rgba(255,255,255,.15) inset;
    -webkit-tap-highlight-color:transparent;
    transition:transform .22s cubic-bezier(.34,1.4,.64,1),box-shadow .2s,border-radius .2s;
  }
  #mh-quick-fab:active{transform:translateX(-50%) scale(.88)}
  #mh-quick-fab.open{border-radius:50%}
  #mh-quick-fab.open svg{transform:rotate(45deg)}
  #mh-quick-fab svg{transition:transform .25s cubic-bezier(.34,1.4,.64,1)}

  /* ── MOBILE NIGHT MODE (consolidated) ─────────────────── */
  body.night #mh-sync-pill{background:rgba(18,20,28,.82);border-color:rgba(255,255,255,.1);box-shadow:0 4px 16px rgba(0,0,0,.3),0 1px 0 rgba(255,255,255,.06) inset}
  body.night #mh-quick-fab{background:rgba(240,240,255,.92);color:#111}
  body.night .mh-tile{background:rgba(22,23,30,.72);border-color:rgba(255,255,255,.08);box-shadow:0 8px 32px rgba(0,0,0,.32),0 1px 0 rgba(255,255,255,.05) inset}
  body.night .mh-tile::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}
  body.night .mh-t-rem{background:linear-gradient(145deg,rgba(99,132,255,.25),rgba(22,23,30,.72));border-color:rgba(148,163,255,.2)}
  body.night .mh-t-hw{background:linear-gradient(145deg,rgba(147,51,234,.24),rgba(22,23,30,.72));border-color:rgba(192,132,252,.2)}
  body.night .mh-t-ex{background:linear-gradient(145deg,rgba(220,38,38,.22),rgba(22,23,30,.72));border-color:rgba(248,113,113,.2)}
  body.night .mh-t-sched{background:linear-gradient(145deg,rgba(16,163,74,.22),rgba(22,23,30,.72));border-color:rgba(52,211,153,.2)}
  body.night .mh-t-cal{background:rgba(22,23,30,.72);border-color:rgba(255,255,255,.1)}
  body.night .mh-cd.sel:not(.today){background:rgba(255,255,255,.1)}
  body.night .mh-day-ev{background:rgba(255,255,255,.06)}
  body.night .mh-cal-nbtn{background:rgba(255,255,255,.08)}
  body.night .mh-stabs{background:rgba(255,255,255,.07)}
  body.night .mh-stab.on{background:rgba(255,255,255,.12)}
  body.night .mh-si{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:var(--text)}
  body.night .mh-sbtn{background:rgba(255,255,255,.88);color:#111}

} /* end @media(max-width:640px) */

/* ── QUICK ADD FAB ──────────────────────────────────── */
#qa-btn{
  position:fixed;bottom:28px;right:28px;z-index:8000;
  width:48px;height:48px;border-radius:16px;
  background:rgba(250,250,252,.88);
  color:var(--text);
  border:1px solid rgba(255,255,255,.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 8px 28px rgba(0,0,0,.14),0 1.5px 0 rgba(255,255,255,.35) inset;
  cursor:none;
  display:flex;align-items:center;justify-content:center;
  transition:transform .22s cubic-bezier(.34,1.4,.64,1),box-shadow .22s ease,border-radius .22s;
  will-change:transform;
}
#qa-btn:hover{transform:scale(1.06);box-shadow:0 12px 36px rgba(0,0,0,.18);}
#qa-btn.open{transform:rotate(45deg) scale(1.05);border-radius:50%}
body.night #qa-btn{background:rgba(28,30,40,.88);color:rgba(240,240,255,.9);border-color:rgba(255,255,255,.12);box-shadow:0 8px 28px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.08) inset}
body.night #qa-btn.open{background:rgba(38,40,54,.92)}
body.night .qa-pill{background:rgba(24,26,34,.92);border-color:rgba(255,255,255,.12);color:var(--text)}
body.night .qa-pill:hover{background:rgba(34,36,48,.96)}
.qa-item{
  position:fixed;right:28px;
  display:flex;align-items:center;gap:10px;flex-direction:row-reverse;
  opacity:0;pointer-events:none;
  transform:translateY(16px) scale(.88);
  transition:opacity .28s cubic-bezier(.4,0,.2,1),transform .28s cubic-bezier(.34,1.4,.64,1);
  z-index:7999;
}
.qa-item.show{opacity:1;pointer-events:all;transform:translateY(0) scale(1)}
.qa-pill{
  background:rgba(250,250,252,.92);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 6px 24px rgba(0,0,0,.12);
  border-radius:22px;padding:8px 16px 8px 12px;
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;color:var(--text);
  cursor:none;white-space:nowrap;
  transition:background .14s,box-shadow .14s,transform .12s;
}
.qa-pill:hover{background:rgba(255,255,255,.98);box-shadow:0 8px 28px rgba(0,0,0,.16);transform:translateX(-3px)}
.qa-pill svg{flex-shrink:0;opacity:.6}
#qa-backdrop{position:fixed;inset:0;z-index:7998;opacity:0;pointer-events:none;transition:opacity .22s ease;}
#qa-backdrop.show{opacity:1;pointer-events:all}
@media(max-width:640px){#qa-btn{bottom:82px}.qa-item{right:20px}}

.drag-handle{width:16px;cursor:grab;flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:.25;transition:opacity .15s;touch-action:none}
.drag-handle:hover{opacity:.7}
.drag-handle svg{width:12px;height:12px}
.ri.dragging,.hw-item.dragging{opacity:.4;background:rgba(255,255,255,.9)!important;box-shadow:0 8px 24px rgba(0,0,0,.14)!important}
.ri.drag-over,.hw-item.drag-over{border-color:rgba(37,99,235,.4)!important;background:rgba(37,99,235,.06)!important}

/* ── TREND CHART ────────────────────────────────────── */
#pp-trend{width:100%;height:120px;margin-bottom:14px}
body.night #pp-trend{opacity:.9}

/* ── NOTIFICATION BELL ──────────────────────────────── */
#settings-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:rgba(255,255,255,.5);cursor:none;display:none;align-items:center;justify-content:center;color:var(--t3);transition:all .15s,transform .4s;flex-shrink:0;position:relative}
#settings-btn:hover{background:rgba(255,255,255,.88);color:var(--text);transform:rotate(60deg)}
#pill.open #settings-btn{display:flex}
#notif-btn{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--border);
  background:rgba(255,255,255,.5);cursor:none;display:none;align-items:center;
  justify-content:center;color:var(--t3);transition:all .15s;flex-shrink:0;position:relative;
}
#notif-btn:hover{background:rgba(255,255,255,.88);color:var(--text)}
#notif-btn.on{color:#e53e3e}
#notif-badge{position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:#e53e3e;border:1.5px solid var(--bg);display:none}
#notif-btn.pending #notif-badge{display:block}
body.night #notif-btn,body.night #syncbtn,body.night #settings-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1);color:var(--text)}
body.night #notif-btn:hover,body.night #syncbtn:hover,body.night #settings-btn:hover{background:rgba(255,255,255,.16);color:var(--text)}

/* Global transition for smooth night mode switch */
body *{transition-property:background,background-color,border-color,color,box-shadow;transition-duration:.4s;transition-timing-function:ease}
/* But don't slow down interaction transitions */
body .btn,body .ni,body .ctx-item,body .cbn,body .rck,body .hw-check,body .stab,body .stj,body .tt-icon-opt{transition-duration:.15s!important}

/* ── ONBOARDING ─────────────────────────────────────────── */
/* ══ ONBOARDING — full-screen landing ══════════════════ */
#onboard{
  position:fixed;inset:0;z-index:99000;
  display:grid;grid-template-columns:1fr 1fr;
  background:#f0f2f8;
  transition:opacity .65s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
#onboard.fade-out{opacity:0;pointer-events:none;}

/* Left — hero copy */
#ob-left{
  position:relative;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:52px 56px;overflow:hidden;
}
/* gradient orbs */
#ob-left::before{
  content:'';position:absolute;top:-120px;left:-80px;
  width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(99,102,241,.13) 0%,transparent 68%);
  pointer-events:none;
}
#ob-left::after{
  content:'';position:absolute;bottom:-80px;right:-40px;
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(244,114,182,.09) 0%,transparent 68%);
  pointer-events:none;
}
.ob-brand{font-size:22px;font-weight:700;letter-spacing:-.045em;color:#0f0f0f;position:relative;z-index:1}
.ob-hero-copy{position:relative;z-index:1}
.ob-hero-h{
  font-size:clamp(40px,5.5vw,64px);font-weight:700;
  letter-spacing:-.045em;line-height:1.05;color:#0f0f0f;
  margin-bottom:18px;
}
.ob-hero-h em{font-style:normal;color:transparent;
  -webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#ec4899 100%)}
.ob-hero-sub{font-size:15px;color:#505055;line-height:1.6;max-width:340px;margin-bottom:36px}
.ob-features{display:flex;flex-direction:column;gap:10px}
.ob-feat{display:flex;align-items:center;gap:12px;font-size:13px;color:#505055}
.ob-feat-dot{width:6px;height:6px;border-radius:50%;background:#6366f1;flex-shrink:0}
.ob-feat b{color:#0f0f0f;font-weight:500}
.ob-hero-foot{font-size:11px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.12em;color:#9898a4;position:relative;z-index:1}

/* Right — form panel */
#ob-right{
  display:flex;align-items:center;justify-content:center;
  padding:40px 48px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-left:1px solid rgba(255,255,255,.9);
  box-shadow:-20px 0 60px rgba(0,0,0,.04);
}
#ob-form-wrap{width:100%;max-width:380px}

/* Step slides */
.ob-slide{display:none;animation:obSlideIn .38s cubic-bezier(.4,0,.2,1) both}
.ob-slide.active{display:block}
.ob-slide.exit{animation:obSlideOut .28s cubic-bezier(.4,0,.2,1) both;pointer-events:none}
@keyframes obSlideIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:translateX(0)}}
@keyframes obSlideOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-18px)}}
@keyframes obIn{from{opacity:0}to{opacity:1}}/* kept for compat */

.ob-step-eye{font-size:10px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.15em;color:#9898a4;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.ob-step-eye::after{content:'';flex:1;height:1px;background:rgba(0,0,0,.07)}
.ob-step-h{font-size:26px;font-weight:700;letter-spacing:-.035em;color:#0f0f0f;margin-bottom:6px}
.ob-step-p{font-size:13px;color:#707078;line-height:1.55;margin-bottom:28px}
.ob-step{margin-bottom:20px}
.ob-label{font-size:10px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.12em;color:#9898a4;margin-bottom:7px;display:block}
.ob-inp{width:100%;padding:11px 14px;border:1.5px solid rgba(0,0,0,.1);border-radius:11px;font-family:'Geist',sans-serif;font-size:15px;color:#0f0f0f;background:rgba(255,255,255,.8);outline:none;transition:all .18s;cursor:none;box-sizing:border-box}
.ob-inp:focus{border-color:rgba(99,102,241,.5);background:#fff;box-shadow:0 0 0 3px rgba(99,102,241,.1)}
.ob-inp-prefix{position:relative}
.ob-inp-prefix .ob-inp{padding-left:26px}
.ob-inp-prefix::before{content:'@';position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:15px;color:#9898a4;pointer-events:none;font-family:'Geist',sans-serif}
.ob-drop{
  border:1.5px dashed rgba(0,0,0,.12);border-radius:12px;padding:32px 24px;text-align:center;
  cursor:none;transition:all .2s;background:rgba(255,255,255,.5);position:relative;
}
.ob-drop:hover{border-color:rgba(0,0,0,.2);background:rgba(255,255,255,.8)}
.ob-drop.drag-over{border-color:#6366f1;background:rgba(99,102,241,.05);border-style:solid}
.ob-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:none;width:100%;height:100%}
.ob-drop-icon{font-size:28px;margin-bottom:10px;opacity:.4;line-height:1}
.ob-drop-text{font-size:13px;font-weight:500;color:#505055;margin-bottom:4px}
.ob-drop-hint{font-size:11px;font-family:'Geist Mono',monospace;color:#9898a4;letter-spacing:.03em}
.ob-drop.ok{border-style:solid;border-color:rgba(22,163,74,.45);background:rgba(22,163,74,.05)}
.ob-drop.ok .ob-drop-icon{opacity:1}
.ob-btn{
  width:100%;padding:13px;border:none;border-radius:11px;
  background:#0f0f0f;color:#fff;font-family:'Geist',sans-serif;
  font-size:14px;font-weight:600;letter-spacing:-.01em;cursor:none;
  transition:all .18s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.ob-btn:hover{background:#222;transform:translateY(-1px);box-shadow:0 8px 28px rgba(0,0,0,.2)}
.ob-btn:disabled{opacity:.3;transform:none;box-shadow:none;cursor:not-allowed}
.ob-btn-sec{
  width:100%;padding:12px;border:1.5px solid rgba(0,0,0,.1);border-radius:11px;
  background:transparent;color:#505055;font-family:'Geist',sans-serif;
  font-size:14px;font-weight:500;cursor:none;transition:all .18s;margin-top:8px;
}
.ob-btn-sec:hover{border-color:rgba(0,0,0,.2);background:rgba(255,255,255,.8);color:#0f0f0f}
.ob-skip{display:block;text-align:center;margin-top:14px;font-size:12px;color:#9898a4;cursor:none;transition:color .15s}
.ob-skip:hover{color:#505055}
/* progress dots */
#ob-dots{display:flex;gap:6px;justify-content:center;margin-top:28px}
.ob-dot{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,.12);transition:all .25s}
.ob-dot.on{background:#0f0f0f;width:18px;border-radius:99px}
/* ob-msg */
.ob-msg{font-size:12px;margin-top:8px;min-height:16px;text-align:center}
/* account step error/success */
#ob-auth-msg{font-size:12px;margin-top:8px;min-height:16px;color:#9898a4}

/* mobile: stack */
@media(max-width:700px){
  #onboard{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  #ob-left{padding:36px 28px 24px;justify-content:flex-start;gap:0}
  .ob-hero-h{font-size:32px;margin-bottom:12px}
  .ob-hero-sub,.ob-features{display:none}
  #ob-right{padding:28px 24px 40px;border-left:none;border-top:1px solid rgba(255,255,255,.9);align-items:flex-start}
}

/* ── CONTEXT MENU ───────────────────────────────────────── */
#ctx{
  position:fixed;z-index:89000;
  background:rgba(248,248,252,0.82);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.9);
  box-shadow:0 16px 48px rgba(0,0,0,.14),0 2px 0 rgba(255,255,255,.9) inset;
  border-radius:14px;
  padding:5px;
  min-width:200px;
  opacity:0;pointer-events:none;
  transform:scale(.94) translateY(-4px);
  transform-origin:top left;
  transition:opacity .16s ease,transform .16s cubic-bezier(.34,1.5,.64,1);
  user-select:none;
}
#ctx.open{opacity:1;pointer-events:all;transform:scale(1) translateY(0)}
.ctx-item{
  display:flex;align-items:center;gap:10px;
  padding:7px 11px;border-radius:9px;
  font-size:13px;color:var(--text);cursor:none;
  transition:background .1s;
  white-space:nowrap;
}
.ctx-item:hover{background:rgba(0,0,0,.06)}
.ctx-item svg{width:14px;height:14px;opacity:.5;flex-shrink:0}
.ctx-item:hover svg{opacity:.9}
.ctx-item.danger{color:#e53e3e}
.ctx-item.danger svg{opacity:.6}
.ctx-item.danger:hover{background:rgba(229,62,62,.08)}
.ctx-sep{height:1px;background:rgba(0,0,0,.07);margin:4px 0;}
.ctx-label{
  padding:5px 11px 3px;
  font-size:10px;font-family:'Geist Mono',monospace;
  text-transform:uppercase;letter-spacing:.1em;color:var(--t3);
}

/* Night mode context item */
.ctx-night{
  background:rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.12);
  color:var(--text);
  font-weight:500;
}
.ctx-night svg{opacity:.8;stroke:var(--text)}
.ctx-night:hover{background:rgba(0,0,0,.10)!important;border-color:rgba(0,0,0,.18)}
.ctx-night-orb{display:none}
/* Active state */
#ctx-night-item.active-night{
  background:rgba(0,0,0,.88);
  border-color:rgba(0,0,0,.9);
  color:#fff;
}
#ctx-night-item.active-night svg{stroke:#fff;opacity:.9}
/* Night mode overrides */
body.night .ctx-night{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18);color:var(--text)}
body.night .ctx-night svg{stroke:var(--text)}
body.night .ctx-night:hover{background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.24)}
body.night #ctx-night-item.active-night{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.95);color:#0f0f0f}
body.night #ctx-night-item.active-night svg{stroke:#0f0f0f;opacity:.9}

/* SCROLL HINT */
.scroll-hint{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:0;animation:shfade 1.2s ease 1.8s forwards;
  pointer-events:none;
}
@keyframes shfade{from{opacity:0;transform:translateX(-50%) translateY(6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.scroll-hint-text{font-family:'Geist Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.22em;color:var(--t3)}
.scroll-hint-arrow{display:flex;align-items:center;justify-content:center;animation:sarrow 1.8s ease-in-out infinite}
@keyframes sarrow{0%,100%{transform:translateY(-3px);opacity:.32}50%{transform:translateY(3px);opacity:.7}}
.scroll-hint-arrow svg{width:14px;height:9px;stroke:var(--t3);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* PARTICLE CANVAS — above bg gradient, below all UI */
#particles{position:fixed;inset:0;z-index:2;pointer-events:none;}

/* CURSOR TRAIL */
#cdot{position:fixed;pointer-events:none;z-index:99999;width:24px;height:24px;will-change:transform;backface-visibility:hidden;-webkit-font-smoothing:antialiased;left:0;top:0}
#ctrail{position:fixed;inset:0;pointer-events:none;z-index:99995;will-change:contents;backface-visibility:hidden}
.cpar{position:fixed;border-radius:50%;pointer-events:none;z-index:99997;animation:pfly .48s ease-out forwards}
@keyframes pfly{0%{opacity:.8;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(0)}}

/* LAYOUT */
#app{display:flex;height:100vh;overflow:hidden;position:relative;z-index:3}

/* PILL */
#pill{
  position:fixed;
  width:56px;
  background:rgba(250,250,252,0.82);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.9);
  box-shadow:var(--sh-lg);
  /* keep a consistent squircle rounding to avoid visual jitter */
  border-radius:26px;
  display:flex;flex-direction:column;align-items:center;
  padding:10px 0 14px;gap:2px;
  z-index:310;
  /* Animate width, left, top, border-radius for smooth pinning and opening (height snaps to avoid issues) */
  transition:width .35s cubic-bezier(.4,0,.2,1),background .2s,left .35s cubic-bezier(.4,0,.2,1),top .35s cubic-bezier(.4,0,.2,1),border-radius .35s cubic-bezier(.4,0,.2,1);
  will-change:width,left,top,border-radius;user-select:none;
}
#pill.open{width:216px;background:rgba(248,248,252,0.82)}
#pill.pinned{
  position:fixed;
  left:8px;top:8px;
  width:222px;
  height:calc(100vh - 16px) !important;
  border-radius:0;
  border:none;
  border-right:1px solid var(--border);
  padding:0;
  gap:4px;
  box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  background:var(--bg);
  will-change:auto;
}
#pill.pinned::before{
  content:'';
  position:absolute;
  top:-8px;
  left:-72px;
  right:0;
  height:8px;
  background:var(--bg);
  z-index:8501;
}
body.night #pill.pinned::before{background:#0e0f12}
#pill.pinned::after{
  content:'';
  position:absolute;
  top:0;
  left:-72px;
  width:72px;
  height:calc(100vh - 16px);
  background:var(--bg);
  z-index:8501;
}
body.night #pill.pinned::after{background:#0e0f12}
#pill.pinned #pill-bottom-extension{
  position:absolute;
  bottom:-8px;
  left:-72px;
  right:0;
  height:8px;
  background:var(--bg);
  z-index:8501;
}
body.night #pill.pinned #pill-bottom-extension{background:#0e0f12}
body.night #pill.pinned{
  background:#0e0f12;
  border-right-color:rgba(255,255,255,0.08);
}
#pill.pinned .pill-logo{font-size:20px;max-height:100%;opacity:1;padding:16px 16px 12px;border-bottom:1px solid var(--border);margin-bottom:8px}
#pill.pinned .ni{width:calc(100% - 24px);border-radius:12px;padding:0 12px;gap:10px;justify-content:flex-start;margin:0 12px}
#pill.pinned .ni-lbl{max-width:none;opacity:1}
#pill.pinned .pill-sep{width:calc(100% - 24px);margin:8px 12px}
#pill.pinned #pill-btns{width:calc(100% - 24px);gap:8px;justify-content:flex-start;padding:0 12px;flex-wrap:nowrap;margin-top:auto;margin-bottom:16px}
#pill.pinned #pill-grip{display:none}
#pill-grip{width:100%;display:flex;justify-content:center;padding:4px 0 6px;cursor:grab;opacity:.28;transition:opacity .15s;flex-shrink:0}
#pill-grip:hover{opacity:.65}#pill-grip:active{cursor:grabbing;opacity:1}
#pill-grip svg{width:16px;height:9px;display:block}
/* Keep the grip centered even when the pill opens so the six-dot handle doesn't shift */
/* Removed shifting padding-left/justify-content on open to prevent dot movement */

.pill-logo{width:calc(100% - 20px);overflow:hidden;white-space:nowrap;font-size:0;font-weight:700;letter-spacing:-.045em;color:var(--text);max-height:0;opacity:0;transition:max-height .3s,opacity .25s,font-size .25s,padding .3s,margin .3s;padding:0 12px;border-bottom:1px solid transparent;margin-bottom:0}
#pill.open .pill-logo{font-size:23px;max-height:56px;opacity:1;padding:2px 14px 13px;border-bottom:1px solid rgba(0,0,0,.07);margin-bottom:4px}

.ni{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:var(--t2);cursor:none;transition:all .2s;user-select:none;position:relative;flex-shrink:0;overflow:hidden;gap:0}
#pill.open .ni{width:calc(100% - 20px);border-radius:12px;padding:0 12px;gap:10px;justify-content:flex-start}
.ni:hover{background:rgba(255,255,255,.62);color:var(--text)}
.ni.act{background:rgba(255,255,255,.78);color:var(--text);font-weight:500}
.ni svg{width:17px;height:17px;opacity:.46;flex-shrink:0;transition:opacity .15s}
.ni.act svg,.ni:hover svg{opacity:.9}
.ni-lbl{font-size:13px;white-space:nowrap;max-width:0;opacity:0;overflow:hidden;transition:max-width .28s,opacity .22s}
#pill.open .ni-lbl{max-width:130px;opacity:1}
#pill.open .ni.act .ni-lbl{font-weight:500}

.pill-sep{width:22px;height:1px;background:rgba(0,0,0,.08);margin:4px 0;flex-shrink:0;transition:width .28s}
#pill.open .pill-sep{width:calc(100% - 20px)}

#pinbtn{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:rgba(255,255,255,.5);cursor:none;display:flex;align-items:center;justify-content:center;color:var(--t3);transition:all .15s;flex-shrink:0}
#pinbtn:hover{background:rgba(255,255,255,.88);color:var(--text)}
#pinbtn.on{background:var(--text);color:#fff;border-color:var(--text)}
#syncbtn{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:rgba(255,255,255,.5);cursor:none;display:none;align-items:center;justify-content:center;color:var(--t3);transition:all .15s;flex-shrink:0}
#syncbtn:hover{background:rgba(255,255,255,.88);color:var(--text)}
#syncbtn.synced{color:#16a34a}
#pill.open #syncbtn{display:flex}/* Container: stacked when collapsed (narrow), side-by-side when open */
#pill-btns{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:4px;
  width:38px;
  transition:width .34s cubic-bezier(.4,0,.2,1),gap .34s,padding .34s;
  overflow:hidden;
}
/* pill-btns: pin always visible; sync + notif only when open */
#pill-btns{
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:6px;margin-top:4px;width:38px;
  transition:width .34s cubic-bezier(.4,0,.2,1),gap .34s,padding .34s;
  overflow:hidden;
}
#pill.open #pill-btns{width:calc(100% - 20px);gap:8px;justify-content:center;padding:0 2px;flex-wrap:nowrap;}
#pill.open #pill-btns{
  width:calc(100% - 20px);
  gap:8px;
  justify-content:center;
  padding:0 2px;
  flex-wrap:nowrap;
}

/* MAIN — clip container */
#main{
  flex:1;overflow:hidden;
  position:relative;
}

/* PAGE STACK — scrollable viewport */
/* PAGE STACK — scrollable viewport, left animates for sidebar push */
#page-stack{
  position:absolute;
  top:0;right:0;bottom:0;
  left:0;
  overflow-y:auto;overflow-x:hidden;
  transition:left .35s cubic-bezier(.4,0,.2,1);
  will-change:left;
}

/* Pages — hidden by default, promoted to own layer when active */
.pg{display:none;}

/* Active — animate in */
.pg.act{
  display:block;
  will-change:opacity,transform;
  animation:pgIn .46s cubic-bezier(.4,0,.2,1) both;
}

/* Leaving — animate out */
.pg.leaving{
  display:block;
  position:absolute;top:0;left:0;right:0;
  pointer-events:none;
  will-change:opacity,transform;
  animation:pgOut .3s cubic-bezier(.4,0,.2,1) both;
}

@keyframes pgIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes pgOut{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(-8px)}
}

/* During page transitions: freeze backdrop-filters to prevent
   simultaneous repaint of 20+ blurred layers on every frame */
body.transitioning .glass,
body.transitioning .ttc{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* GLASS CARD */
.glass{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-bd);box-shadow:var(--sh);border-radius:var(--r)}
.card{padding:20px 22px}
.ch{font-size:13px;font-weight:600;margin-bottom:13px;letter-spacing:-.01em}

/* INPUTS */
.inp{width:100%;padding:8px 11px;border:1px solid var(--border);border-radius:9px;font-family:'Geist',sans-serif;font-size:13px;color:var(--text);background:rgba(255,255,255,.62);outline:none;transition:all .15s;cursor:none}
.inp:focus{border-color:var(--borders);background:rgba(255,255,255,.96)}

/* Hide native selects — replaced by custom dropdowns */
select.inp{display:none!important}

/* Custom dropdown trigger */
.cdd{
  position:relative;width:100%;
  display:inline-block;
}
.cdd-trigger{
  width:100%;padding:8px 32px 8px 11px;
  border:1px solid var(--border);border-radius:9px;
  font-family:'Geist',sans-serif;font-size:13px;color:var(--text);
  background:rgba(255,255,255,.62);
  cursor:none;user-select:none;
  display:flex;align-items:center;justify-content:space-between;
  transition:all .15s;position:relative;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cdd-trigger:hover{border-color:var(--borders);background:rgba(255,255,255,.88)}
.cdd-trigger.open{border-color:var(--borders);background:rgba(255,255,255,.96)}
.cdd-trigger svg{position:absolute;right:10px;top:50%;transform:translateY(-50%);flex-shrink:0;transition:transform .18s;opacity:.45}
.cdd-trigger.open svg{transform:translateY(-50%) rotate(180deg);opacity:.7}
.cdd-trigger .cdd-val{flex:1;overflow:hidden;text-overflow:ellipsis}
.cdd-trigger .cdd-placeholder{color:var(--t3)}

/* Dropdown panel */
.cdd-panel{
  position:fixed;z-index:9500;
  background:rgba(250,250,252,.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 12px 40px rgba(0,0,0,.14),0 1.5px 0 rgba(255,255,255,.35) inset;
  border-radius:12px;
  padding:5px;
  min-width:160px;
  max-height:240px;overflow-y:auto;
  opacity:0;pointer-events:none;
  transform:translateY(-6px) scale(.97);
  transform-origin:top center;
  transition:opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1);
}
.cdd-panel.open{opacity:1;pointer-events:all;transform:translateY(0) scale(1)}
.cdd-panel::-webkit-scrollbar{width:3px}
.cdd-panel::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:10px}

.cdd-opt{
  padding:7px 11px;border-radius:8px;
  font-size:13px;color:var(--text);cursor:none;
  transition:background .1s;white-space:nowrap;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.cdd-opt:hover{background:rgba(0,0,0,.055)}
.cdd-opt.sel{background:rgba(0,0,0,.07);font-weight:500}
.cdd-opt.sel::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--text);flex-shrink:0}
.cdd-sep-opt{padding:3px 11px;font-size:10px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--t3)}
.btn{padding:8px 15px;border-radius:9px;border:none;font-family:'Geist',sans-serif;font-size:13px;font-weight:500;cursor:none;transition:all .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.bd{background:var(--text);color:#fff}.bd:hover{background:#2a2a2a;transform:translateY(-1px)}
.bo{background:rgba(255,255,255,.62);color:var(--text);border:1px solid var(--border)}.bo:hover{background:rgba(255,255,255,.95)}
.bf{width:100%;justify-content:center}
.fl{font-size:10px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin-bottom:5px;display:block}
.fg{margin-bottom:12px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}

/* FLOATING CLOCK WIDGET (top-right) */
#clock-widget{
  position:fixed;top:18px;right:18px;z-index:250;
  background:rgba(248,248,252,0.62);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.88);
  box-shadow:0 8px 32px rgba(0,0,0,.10),0 1.5px 0 rgba(255,255,255,.35) inset;
  border-radius:18px;
  padding:8px 14px 7px;
  user-select:none;
  pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:right .38s cubic-bezier(.4,0,.2,1);
}

/* Floating stopwatch widget — top-center, clear of the clock */
#sw-float{
  position:fixed;
  top:18px;
  left:50%!important;
  right:auto!important;
  z-index:249;
  background:rgba(248,248,252,0.82);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.88);
  box-shadow:0 8px 32px rgba(0,0,0,.12),0 1.5px 0 rgba(255,255,255,.35) inset;
  border-radius:18px;
  padding:9px 14px 9px 16px;
  display:none;
  align-items:center;
  gap:10px;
  pointer-events:all;
  user-select:none;
  opacity:0;
  transform:translateX(-50%) translateY(-12px) scale(.96);
  transition:opacity .32s cubic-bezier(.4,0,.2,1),transform .32s cubic-bezier(.4,0,.2,1);
}
#sw-float.visible{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
#sw-float-dot{
  width:7px;height:7px;border-radius:50%;
  background:#e53e3e;flex-shrink:0;
  animation:swpulse 1.4s ease-in-out infinite;
}
#sw-float-dot.paused{background:var(--t3);animation:none}
@keyframes swpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}
#sw-float-time{
  font-family:'Geist Mono',monospace;
  font-size:15px;font-weight:500;
  letter-spacing:-.01em;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  min-width:52px;
}
#sw-float-subj{
  font-size:11px;color:var(--t3);
  font-family:'Geist',sans-serif;
  max-width:90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sw-float-btn{
  width:28px;height:28px;border-radius:50%;
  border:1px solid var(--border);
  background:rgba(255,255,255,.55);
  cursor:none;display:flex;align-items:center;justify-content:center;
  color:var(--t2);transition:all .14s;flex-shrink:0;
}
.sw-float-btn:hover{background:rgba(255,255,255,.92);color:var(--text);border-color:var(--borders)}
.sw-float-btn svg{width:12px;height:12px}
#cw-time{
  font-size:30px;font-weight:400;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--text);
  font-family:'Geist',sans-serif;
  display:block;text-align:center;
}
#cw-secs{font-size:16px;font-weight:300;color:var(--t2);letter-spacing:-.02em;margin-left:2px;vertical-align:baseline}
#cw-date{
  font-family:'Geist Mono',monospace;font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--t3);margin-top:3px;line-height:1;
  display:block;text-align:center;
}

/* HOME */
#pg-dash{padding:0}
.home-hero{
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:60px 48px 72px 48px;
  position:relative;
  text-align:center;
}

/* greeting sits near top */
.home-greet-row{position:absolute;top:46px;left:0;right:0;text-align:center;}
.h-eye{font-family:'Geist Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.17em;color:var(--t3);margin-bottom:8px;transition:font-size 0.3s ease,color 0.3s ease;}
.h-eye.solo{font-size:28px;color:var(--text);margin-bottom:0;letter-spacing:-.02em;font-family:'Geist',sans-serif;font-weight:600;text-transform:none;}
.h-eye.solo::after{content:'.'}
.h-name{font-size:36px;font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--text)}
.h-eye.solo + .h-name{display:none;}

/* centre block */
.home-timer-wrap{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  width:100%;
}
/* Big centred countdown */
.home-timer{
  font-size:clamp(100px,20vw,220px);
  font-weight:700;
  letter-spacing:-.05em;
  line-height:1;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  text-shadow:none;
  display:block;
  width:100%;
  text-align:center;
  transition:color .4s ease,text-shadow .4s ease;
}

/* Night mode: liquid glass timer */
body.night .home-timer{
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
  /* Partially transparent so the dark background bleeds through the letterforms,
     but enough white tint to read clearly — like frosted glass with depth */
  background-image:linear-gradient(
    168deg,
    rgba(255,255,255,0.96)  0%,
    rgba(240,248,255,0.82)  20%,
    rgba(210,228,255,0.55)  38%,
    rgba(190,215,255,0.28)  55%,
    rgba(170,200,255,0.16)  70%,
    rgba(150,185,255,0.08)  85%,
    rgba(130,165,255,0.04)  100%
  );
  text-shadow:none;
}
.h-meta-row{display:flex;align-items:baseline;gap:12px;margin-bottom:20px;justify-content:center}
.h-meta-label{font-family:'Geist Mono',monospace;font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:rgba(0,0,0,.5)}
.h-meta-period{font-size:19px;font-weight:500;font-family:'Geist Mono',monospace;color:rgba(0,0,0,.7);letter-spacing:-.02em}
.h-meta-room{font-family:'Geist Mono',monospace;font-size:13px;color:var(--t2)}
.h-prog-track{width:min(460px,58vw);height:2px;background:rgba(0,0,0,.09);border-radius:10px;overflow:hidden}
.h-prog-fill{height:100%;background:var(--text);border-radius:10px;transition:width 1s linear}
.h-quote{
  margin-top:20px;
  text-align:center;
  max-width:min(480px,64vw);
}
.h-quote-text{
  font-size:13px;font-weight:300;color:var(--t2);
  letter-spacing:.01em;line-height:1.55;
  font-style:italic;
}
.h-quote-author{
  font-family:'Geist Mono',monospace;font-size:10px;
  text-transform:uppercase;letter-spacing:.14em;
  color:var(--t3);margin-top:6px;
}

/* SCROLL SECTION */
.home-scroll{padding:32px 52px 60px;display:flex;flex-direction:column;gap:14px;max-width:960px;margin:0 auto;width:100%}
.drop-card{opacity:0;transform:translateY(-18px);transition:opacity .52s ease,transform .52s ease}
.drop-card.vis{opacity:1;transform:translateY(0)}
.drop-card.exit-up{opacity:0;transform:translateY(-14px);transition:opacity .3s ease,transform .3s ease;transition-delay:0s!important}
.drop-card:nth-child(1){transition-delay:0s}
.drop-card:nth-child(2){transition-delay:.07s}
.drop-card:nth-child(3){transition-delay:.14s}
.drop-card:nth-child(4){transition-delay:.21s}
.drop-card:nth-child(5){transition-delay:.28s}
.drop-card:nth-child(6){transition-delay:.35s}
/* Revisit — faster duration + tighter stagger */
.revisit .drop-card{transition-duration:.28s}
.revisit .drop-card:nth-child(1){transition-delay:0s}
.revisit .drop-card:nth-child(2){transition-delay:.03s}
.revisit .drop-card:nth-child(3){transition-delay:.06s}
.revisit .drop-card:nth-child(4){transition-delay:.09s}
.revisit .drop-card:nth-child(5){transition-delay:.12s}
.revisit .drop-card:nth-child(6){transition-delay:.15s}

.sec-eye{font-family:'Geist Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--t3);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.sec-eye::after{content:'';flex:1;height:1px;background:rgba(0,0,0,.08)}

/* quick-stats strip */
.qs-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.qs-cell{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-bd);box-shadow:var(--sh);border-radius:var(--r);padding:16px 18px}
.qs-val{font-size:26px;font-weight:300;letter-spacing:-.04em}
.qs-lbl{font-family:'Geist Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);margin-top:3px}

/* week mini-schedule */
.today-sched{display:flex;flex-direction:column;gap:4px}
.ts-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;background:rgba(255,255,255,.38);transition:background .12s;cursor:none}
.ts-row:hover{background:rgba(255,255,255,.62)}
.ts-row.ts-now{background:var(--text);color:#fff}
.ts-row.ts-pinned{background:rgba(255,255,255,.82);outline:1.5px solid rgba(0,0,0,.15)}
.ts-time{font-family:'Geist Mono',monospace;font-size:10px;width:48px;flex-shrink:0;color:var(--t3)}
.ts-row.ts-now .ts-time{color:rgba(255,255,255,.55)}
.ts-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;opacity:.5}
.ts-row.ts-now .ts-dot{background:#fff;opacity:.8}
.ts-name{font-size:12px;flex:1}
.ts-room{font-family:'Geist Mono',monospace;font-size:10px;color:var(--t3);flex-shrink:0}
.ts-row.ts-now .ts-room{color:rgba(255,255,255,.55)}

/* REMINDERS */
.rl{display:flex;flex-direction:column;gap:6px}
.ri{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.5);border-radius:9px;border:1px solid rgba(230,230,238,.84);transition:all .15s;border-left-width:3px}
.ri:hover{background:rgba(255,255,255,.78)}
.ri:hover{background:rgba(255,255,255,.74);border-color:var(--borders)}
.ri.done{opacity:.35}.ri.done .rt{text-decoration:line-through}
.rck{width:17px;height:17px;border:1.5px solid var(--borders);border-radius:5px;flex-shrink:0;cursor:none;display:flex;align-items:center;justify-content:center;transition:all .15s}
.ri.done .rck{background:var(--text);border-color:var(--text)}
.rt{flex:1;font-size:13px}
.badge{font-family:'Geist Mono',monospace;font-size:10px;padding:2px 7px;border-radius:20px;flex-shrink:0}
.bu{background:#fff0f0;color:#e53e3e}.bs{background:#fffbea;color:#d97706}.bn{background:rgba(0,0,0,.06);color:var(--t2)}
.r-subj{font-size:10px;padding:2px 7px;border-radius:20px;background:rgba(17,17,17,.07);color:var(--t2);font-family:'Geist Mono',monospace;flex-shrink:0}
.db{font-size:12px;color:var(--t3);cursor:none;padding:3px 6px;border-radius:5px;transition:all .12s;flex-shrink:0}
.db:hover{background:#fff0f0;color:#e53e3e}

/* SUBJECT TILE */
.subj-tile{background:linear-gradient(135deg,rgba(15,15,20,.9) 0%,rgba(28,28,40,.92) 100%);backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:22px 24px;color:#fff;position:relative;overflow:hidden}
.subj-tile::before{content:'';position:absolute;top:-50px;right:-50px;width:220px;height:220px;background:radial-gradient(circle,rgba(255,255,255,.055) 0%,transparent 68%);pointer-events:none}
.st-eye{font-family:'Geist Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.36);margin-bottom:6px}
.st-name{font-size:19px;font-weight:600;letter-spacing:-.025em;margin-bottom:14px}
.st-content-wrap{transition:opacity .3s ease,transform .3s ease}
.st-content-wrap.fading{opacity:0;transform:translateY(4px)}
@keyframes stIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.st-content-wrap.faded-in{animation:stIn .32s cubic-bezier(.4,0,.2,1) both}
.st-rem{padding:8px 10px;background:rgba(255,255,255,.09);border-radius:8px;border:1px solid rgba(255,255,255,.08);margin-bottom:6px;font-size:13px;color:rgba(255,255,255,.84)}
.st-lucky{font-size:13px;color:rgba(255,255,255,.36);font-style:italic}

/* TODAY LIST */
.sci{display:flex;align-items:center;gap:11px;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.sci:last-child{border-bottom:none}
.sct{font-family:'Geist Mono',monospace;font-size:11px;color:var(--t3);width:46px}
.scd{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.scn{font-size:13px}

/* PAGE WRAP */
.pg-wrap{padding:36px 44px 52px}
.pg-wrap.full-h{min-height:100vh}
.pg-title{font-size:24px;font-weight:600;letter-spacing:-.03em;margin-bottom:4px}
.pg-desc{font-size:13px;color:var(--t3);margin-bottom:24px}

/* ══ FRIENDS PAGE ══════════════════════════════════════ */
/* Root fills the entire page, no pg-wrap used */
.fr-root{display:flex;flex-direction:column;height:100%;min-height:100vh;padding:36px 44px 40px;box-sizing:border-box}
.fr-header{display:flex;align-items:center;justify-content:center;margin-bottom:24px;gap:16px;flex-shrink:0;position:relative}
.fr-title-block{display:flex;flex-direction:column;position:absolute;left:0}
.fr-title{font-size:28px;font-weight:700;letter-spacing:-.04em;line-height:1}
.fr-sub{font-size:12px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.12em;color:var(--t3);margin-top:5px}
/* 2-col body */
.fr-body{display:grid;grid-template-columns:1fr 300px;gap:16px;flex:1;align-items:start;min-height:0}
/* Profile pill */
.fr-profile-pill{display:flex;align-items:center;gap:9px;padding:8px 14px 8px 8px;background:var(--glass);border:1px solid var(--glass-bd);border-radius:30px;backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);cursor:none;transition:all .18s;flex-shrink:0}
.fr-profile-pill:hover{background:rgba(255,255,255,.9);border-color:var(--borders)}
.fr-avatar{width:28px;height:28px;border-radius:50%;background:var(--text);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;letter-spacing:-.01em;flex-shrink:0}
.fr-pill-name{font-size:13px;font-weight:500;color:var(--text)}
.fr-pill-sub{font-size:10px;font-family:'Geist Mono',monospace;color:var(--t3)}
/* Sidebar */
.fr-sidebar{display:flex;flex-direction:column;gap:14px}
/* Pulse animation for profile card */
@keyframes frPulse{0%,100%{box-shadow:var(--sh)}50%{box-shadow:0 0 0 3px rgba(99,102,241,.4),var(--sh)}}
.fr-pulse{animation:frPulse .6s ease}

/* Leaderboard card */
.fr-lb-card{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-bd);box-shadow:var(--sh-lg);border-radius:20px;overflow:hidden;transition:box-shadow .2s,transform .2s}

/* LB tabs */
.fr-lb-head{display:flex;align-items:center;justify-content:space-between;padding:22px 26px 0}
.fr-lb-tabs{display:flex;gap:2px;background:rgba(0,0,0,.06);border-radius:10px;padding:3px}
.fr-lb-tab{padding:7px 18px;border-radius:7px;font-size:13px;font-weight:500;cursor:none;transition:all .18s;color:var(--t2);display:flex;align-items:center;gap:6px;user-select:none}
.fr-lb-tab svg{opacity:.5;transition:opacity .18s}
.fr-lb-tab.act{background:rgba(255,255,255,.88);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.fr-lb-tab.act svg{opacity:.9}
.fr-lb-tab:hover:not(.act){color:var(--text)}
.fr-lb-tab:hover:not(.act) svg{opacity:.75}
.fr-lb-refresh{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.5);cursor:none;display:flex;align-items:center;justify-content:center;color:var(--t3);transition:all .15s;flex-shrink:0}
.fr-lb-refresh:hover{border-color:var(--borders);color:var(--text);background:rgba(255,255,255,.9)}

/* LB column (left side — both cards stacked) */
.fr-lb-col{display:flex;flex-direction:column}

/* LB title block (replaces tabs) */
.fr-lb-title-block{display:flex;align-items:center;gap:12px;flex:1}
.fr-lb-title-icon{font-size:22px;line-height:1}
.fr-lb-title{font-size:16px;font-weight:700;letter-spacing:-.03em;color:var(--text)}
.fr-lb-title-sub{font-size:10px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);margin-top:1px}

/* LB inner */
.fr-lb-inner{padding:18px 26px 24px}

/* Top 3 podium */
.fr-podium{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:10px;margin-bottom:16px;align-items:end}
.fr-pod{border-radius:16px;padding:20px 14px 0;text-align:center;position:relative;overflow:visible;transition:transform .22s cubic-bezier(.34,1.26,.64,1),box-shadow .22s;cursor:default;display:flex;flex-direction:column;align-items:center;animation:podIn .55s cubic-bezier(.34,1.26,.64,1) var(--pod-delay,0s) both}
@keyframes podIn{from{opacity:0;transform:translateY(20px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
.fr-pod:not(.fr-pod-empty):hover{transform:translateY(-4px) scale(1.02)}
.fr-pod-empty{min-height:100px;opacity:.4}
.fr-pod-1{background:linear-gradient(145deg,#fef3c7,#fde68a);border:1.5px solid rgba(245,158,11,.3);box-shadow:0 6px 28px rgba(245,158,11,.22)}
.fr-pod-2{background:linear-gradient(145deg,#f1f5f9,#e2e8f0);border:1.5px solid rgba(148,163,184,.3);box-shadow:0 4px 18px rgba(148,163,184,.18)}
.fr-pod-3{background:linear-gradient(145deg,#fdf4ee,#fde8d8);border:1.5px solid rgba(234,88,12,.22);box-shadow:0 4px 18px rgba(234,88,12,.14)}
.fr-pod-me{box-shadow:0 0 0 2.5px var(--text),0 6px 28px rgba(0,0,0,.14)!important}
.fr-pod-crown{margin-bottom:4px;line-height:1}
.fr-pod-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;margin:0 auto 8px;letter-spacing:-.01em;flex-shrink:0}
.fr-pod-1 .fr-pod-avatar{background:rgba(245,158,11,.28);color:#92400e}
.fr-pod-2 .fr-pod-avatar{background:rgba(100,116,139,.2);color:#334155}
.fr-pod-3 .fr-pod-avatar{background:rgba(234,88,12,.2);color:#7c2d12}
.fr-pod-username{font-size:11px;font-weight:600;letter-spacing:-.01em;color:var(--text);margin-bottom:2px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.fr-pod-you{font-size:9px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--t3)}
.fr-pod-value{font-size:30px;font-weight:200;letter-spacing:-.05em;line-height:1;color:var(--text);margin:6px 0 2px}
.fr-pod-unit{font-size:13px;color:var(--t3);font-weight:400}
.fr-pod-sub{font-size:10px;font-family:'Geist Mono',monospace;color:var(--t3);margin-bottom:10px}
.fr-pod-step{width:100%;margin-top:auto;border-radius:0 0 10px 10px;padding:6px 0;display:flex;align-items:center;justify-content:center}
.fr-pod-step-1{background:rgba(245,158,11,.25);min-height:54px}
.fr-pod-step-2{background:rgba(100,116,139,.15);min-height:38px}
.fr-pod-step-3{background:rgba(234,88,12,.15);min-height:28px}
.fr-pod-rank{font-size:15px;font-weight:700;font-family:'Geist Mono',monospace;color:var(--t2)}
.fr-pod-rm{position:absolute;top:8px;right:8px;font-size:11px;color:var(--t3);cursor:none;padding:3px 6px;border-radius:5px;border:none;background:transparent;transition:all .12s;opacity:0;line-height:1}
.fr-pod:hover .fr-pod-rm{opacity:1}
.fr-pod-rm:hover{background:rgba(229,62,62,.12);color:#e53e3e}

/* Rank rows (4th+) */
.fr-rows{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.fr-row{display:flex;align-items:center;gap:12px;padding:11px 14px;background:rgba(255,255,255,.45);border-radius:11px;border:1px solid rgba(230,230,238,.7);transition:all .18s;position:relative;animation:rowIn .4s cubic-bezier(.4,0,.2,1) var(--row-delay,0s) both}
@keyframes rowIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.fr-row:hover{background:rgba(255,255,255,.78);border-color:var(--borders)}
.fr-row.fr-row-me{background:rgba(15,15,15,.05);border-color:rgba(0,0,0,.1)}
.fr-row-rank{font-size:12px;font-family:'Geist Mono',monospace;color:var(--t3);width:22px;text-align:center;flex-shrink:0}
.fr-row-info{flex:1;min-width:0}
.fr-row-name{font-size:13px;font-weight:500;color:var(--text)}
.fr-row-you,.fr-row-nd{font-size:9px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin-left:4px}
.fr-row-bar{margin-top:5px;height:2px;background:rgba(0,0,0,.07);border-radius:10px;overflow:hidden}
.fr-row-fill{height:100%;border-radius:10px;background:var(--text);transition:width .6s ease}
.fr-row-val{text-align:right;flex-shrink:0;font-size:20px;font-weight:200;letter-spacing:-.04em;line-height:1;color:var(--text)}
.fr-row-vsub{font-size:10px;font-family:'Geist Mono',monospace;color:var(--t3);margin-top:2px;font-weight:400;letter-spacing:0}
.fr-row-rm{font-size:12px;color:var(--t3);cursor:none;padding:4px 6px;border-radius:5px;border:none;background:transparent;transition:all .12s;flex-shrink:0;opacity:0;line-height:1}
.fr-row:hover .fr-row-rm{opacity:1}
.fr-row-rm:hover{background:#fff0f0;color:#e53e3e}

/* Empty state */
.fr-lb-empty{padding:40px 20px;text-align:center}
.fr-lb-empty-icon{font-size:32px;margin-bottom:10px;opacity:.3}
.fr-lb-empty-h{font-size:14px;font-weight:500;color:var(--t2);margin-bottom:4px}
.fr-lb-empty-p{font-size:12px;font-family:'Geist Mono',monospace;color:var(--t3);letter-spacing:.03em}

/* (fr-bottom removed — sidebar layout replaces it) */

/* Add friend modal */
#fr-add-modal{position:fixed;inset:0;z-index:8000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#fr-add-modal.open{display:flex}
#fr-add-box{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-bd);box-shadow:var(--sh-lg);border-radius:18px;padding:28px;width:min(400px,92vw);animation:obSlideIn .28s cubic-bezier(.4,0,.2,1) both}
body.night #fr-add-box{background:rgba(20,22,30,.92);border-color:rgba(255,255,255,.1)}
.fr-add-modal-h{font-size:17px;font-weight:600;letter-spacing:-.02em;margin-bottom:4px;color:var(--text)}
.fr-add-modal-p{font-size:12px;color:var(--t3);margin-bottom:20px}

/* Profile setup prompt */
.fr-setup-banner{background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(139,92,246,.08));border:1.5px solid rgba(99,102,241,.2);border-radius:14px;padding:18px 20px;margin-bottom:16px;display:flex;align-items:center;gap:14px}
body.night .fr-setup-banner{background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(139,92,246,.1));border-color:rgba(99,102,241,.25)}
.fr-setup-icon{font-size:24px;flex-shrink:0}
.fr-setup-h{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px}
.fr-setup-p{font-size:11px;color:var(--t3)}

/* ══ SETTINGS OVERLAY ══════════════════════════════════════ */
#settings-overlay{position:fixed;inset:0;z-index:8500;display:none;align-items:flex-start;justify-content:flex-start;padding:10px 0 10px 80px;background:rgba(0,0,0,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:padding-left .34s cubic-bezier(.4,0,.2,1)}
#settings-overlay.open{display:flex}
#settings-panel{width:min(400px,calc(100vw - 90px));max-height:calc(100vh - 20px);overflow-y:auto;background:var(--bg);border:1px solid var(--border);border-radius:22px;box-shadow:0 32px 80px rgba(0,0,0,.2),0 2px 0 rgba(255,255,255,.35) inset;display:flex;flex-direction:column;animation:stSlideIn .32s cubic-bezier(.34,1.1,.64,1) both;scrollbar-width:none}
#settings-panel::-webkit-scrollbar{display:none}
body.night #settings-panel{background:#0e0f12;border-color:rgba(255,255,255,.1);box-shadow:0 32px 80px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.06) inset}
@keyframes stSlideIn{from{opacity:0;transform:translateX(-20px) scale(.97)}to{opacity:1;transform:none}}

/* Header */
#settings-header{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 24px 0;flex-shrink:0}
#settings-title{font-size:22px;font-weight:700;letter-spacing:-.04em;color:var(--text)}
#settings-sub{font-size:11px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.12em;color:var(--t3);margin-top:4px}
#settings-close{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--glass);cursor:none;font-size:13px;color:var(--t2);display:flex;align-items:center;justify-content:center;transition:all .14s;flex-shrink:0}
#settings-close:hover{background:rgba(229,62,62,.1);color:#e53e3e;border-color:rgba(229,62,62,.2)}

/* Sections */
.st-section{padding:20px 24px 4px}
.st-section-label{font-size:10px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.14em;color:var(--t3);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.st-section-label::after{content:'';flex:1;height:1px;background:var(--border)}
.st-cards{display:flex;flex-direction:column;gap:8px}

/* Linked settings group */
#st-cursor-group{position:relative;border:1px solid var(--border);border-radius:18px;padding:12px;background:rgba(0,0,0,.02);transition:all .15s}
body.night #st-cursor-group{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
#st-cursor-group #st-trail-card{border-left:3px solid var(--accent);margin-top:8px}

/* Cards */
.st-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--glass);border:1px solid var(--glass-bd);border-radius:14px;backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);transition:all .15s}
body.night .st-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
.st-card-wide{align-items:flex-start}
.st-card-icon{font-size:22px;flex-shrink:0;width:36px;text-align:center;line-height:1}
#st-night-card .st-card-icon{display:none}
.st-card-body{flex:1;min-width:0}
.st-card-title{font-size:13px;font-weight:600;color:var(--text);letter-spacing:-.01em}
.st-card-desc{font-size:11px;color:var(--t3);margin-top:2px;line-height:1.5}
.st-name-row{display:flex;gap:8px;margin-top:10px}
.st-toggle-card{cursor:none}
.st-toggle-card:hover{background:rgba(255,255,255,.85);border-color:var(--borders)}
body.night .st-toggle-card:hover{background:rgba(255,255,255,.1)}

/* Toggle switch */
.st-toggle{width:40px;height:22px;border-radius:11px;background:rgba(0,0,0,.12);border:1.5px solid rgba(0,0,0,.1);flex-shrink:0;position:relative;transition:background .22s,border-color .22s}
body.night .st-toggle{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.1)}
.st-toggle.on{background:var(--accent,#6366f1);border-color:transparent}
.st-toggle-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .22s cubic-bezier(.34,1.4,.64,1)}
.st-toggle.on .st-toggle-knob{transform:translateX(18px)}

/* Cursor size slider */
.st-cursor-size-slider{
  cursor:none;
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:4px;
  background:rgba(0,0,0,0.15);
  outline:none;
  border-radius:2px;
}
body.night .st-cursor-size-slider{background:rgba(255,255,255,0.15)}
.st-cursor-size-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--accent,#6366f1);
  cursor:none;
  box-shadow:0 2px 4px rgba(0,0,0,0.2);
  transition:transform 0.15s;
}
.st-cursor-size-slider::-webkit-slider-thumb:active{
  transform:scale(1.2);
}
.st-cursor-size-slider::-moz-range-thumb{
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--accent,#6366f1);
  cursor:none;
  border:none;
  box-shadow:0 2px 4px rgba(0,0,0,0.2);
  transition:transform 0.15s;
}
.st-cursor-size-slider::-moz-range-thumb:active{
  transform:scale(1.2);
}

/* Colour swatches */
.st-colors{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.st-col-swatch{width:28px;height:28px;border-radius:50%;cursor:none;transition:transform .15s,box-shadow .15s;border:2px solid transparent}
.st-col-swatch:hover{transform:scale(1.18)}
.st-col-swatch.act{box-shadow:0 0 0 2.5px var(--bg),0 0 0 4.5px currentColor;transform:scale(1.1)}
.st-col-swatch-custom{background:var(--glass);border:2px dashed var(--border);display:flex;align-items:center;justify-content:center}
body.night .st-col-swatch-custom{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.15)}

/* Accent colour CSS vars (injected via JS) */
:root{--accent:#6366f1}

/* ══ COLOR PICKER MODAL ══════════════════════════════════════ */
.color-picker-modal{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:cpFadeIn .2s ease-out}
.color-picker-modal.open{display:flex}
@keyframes cpFadeIn{from{opacity:0}to{opacity:1}}
.color-picker-panel{width:min(400px,calc(100vw - 40px));background:var(--bg);border:1px solid var(--border);border-radius:20px;box-shadow:0 32px 80px rgba(0,0,0,.25),0 2px 0 rgba(255,255,255,.35) inset;display:flex;flex-direction:column;animation:cpSlideIn .3s cubic-bezier(.34,1.1,.64,1) both}
body.night .color-picker-panel{background:#0e0f12;border-color:rgba(255,255,255,.1);box-shadow:0 32px 80px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.06) inset}
@keyframes cpSlideIn{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:none}}

.color-picker-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 0;flex-shrink:0}
.color-picker-title{font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.02em}
.color-picker-close{width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:var(--glass);cursor:none;font-size:12px;color:var(--t2);display:flex;align-items:center;justify-content:center;transition:all .14s}
.color-picker-close:hover{background:var(--text);color:var(--bg)}

.color-picker-body{padding:20px;flex:1}
.color-picker-preview-wrap{display:flex;align-items:center;gap:24px;margin-bottom:20px}
.color-picker-preview-group{display:flex;flex-direction:column;align-items:center;gap:8px}
.color-picker-picker-group{display:flex;flex-direction:column;align-items:center;gap:8px}
.color-picker-label-small{font-size:11px;font-weight:600;color:var(--t3);letter-spacing:-.01em;text-transform:uppercase}
.color-picker-preview{width:48px;height:48px;border-radius:12px;border:2px solid var(--border);transition:background .2s}
.native-color-picker{width:48px;height:48px;border:none;border-radius:12px;cursor:pointer;padding:0;background:transparent;appearance:none;-webkit-appearance:none}
.native-color-picker::-webkit-color-swatch-wrapper{padding:0}
.native-color-picker::-webkit-color-swatch{border:none;border-radius:10px}
.native-color-picker::-moz-color-swatch{border:none;border-radius:10px}

.color-picker-hex-wrap{display:flex;flex-direction:column;gap:8px}
.color-picker-label{font-size:12px;font-weight:600;color:var(--text);letter-spacing:-.01em}
.color-picker-hex-input{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--glass);color:var(--text);font-size:14px;font-family:'Geist Mono',monospace;letter-spacing:.02em;outline:none;transition:border-color .15s,box-shadow .15s}
.color-picker-hex-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.color-picker-hex-input::placeholder{color:var(--t3)}
body.night .color-picker-hex-input{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}

.color-picker-footer{display:flex;gap:12px;padding:0 20px 20px;flex-shrink:0}
.color-picker-btn{flex:1;padding:12px;border-radius:10px;font-size:13px;font-weight:600;cursor:none;transition:all .15s}
.color-picker-btn-cancel{background:var(--glass);border:1px solid var(--border);color:var(--text)}
.color-picker-btn-cancel:hover{background:var(--text);color:var(--bg)}
.color-picker-btn-apply{background:var(--accent);border:none;color:#fff}
.color-picker-btn-apply:hover{opacity:.9}

/* ── Weekly toggle ── */
.fr-time-toggle{display:flex;gap:2px;background:rgba(0,0,0,.05);border-radius:8px;padding:2px;margin-bottom:12px}
body.night .fr-time-toggle{background:rgba(255,255,255,.06)}
.fr-tt-btn{padding:5px 13px;border-radius:6px;font-size:11px;font-family:'Geist Mono',monospace;color:var(--t3);cursor:none;transition:all .15s;user-select:none;letter-spacing:.02em}
.fr-tt-btn.act{background:rgba(255,255,255,.9);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.07)}
body.night .fr-tt-btn.act{background:rgba(255,255,255,.14);color:var(--text)}
.fr-tt-btn:hover:not(.act){color:var(--text)}

/* ── Streak badge ── */
.fr-streak{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-family:'Geist Mono',monospace;background:rgba(251,146,60,.15);color:#ea580c;border-radius:20px;padding:2px 7px;border:1px solid rgba(251,146,60,.25);flex-shrink:0}
body.night .fr-streak{background:rgba(251,146,60,.12);color:#fb923c;border-color:rgba(251,146,60,.2)}
.fr-streak-fire{font-size:11px}

/* ── Activity feed ── */
.fr-feed{display:flex;flex-direction:column;gap:0}
.fr-feed-item{display:flex;align-items:flex-start;gap:9px;padding:9px 0;border-bottom:1px solid var(--border);animation:feedIn .35s ease both}
@keyframes feedIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fr-feed-item:last-child{border-bottom:none}
.fr-feed-dot{width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;margin-top:1px}
body.night .fr-feed-dot{background:rgba(255,255,255,.08)}
.fr-feed-body{flex:1;min-width:0}
.fr-feed-who{font-size:12px;font-weight:500;color:var(--text)}
.fr-feed-what{font-size:11px;font-family:'Geist Mono',monospace;color:var(--t3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-feed-when{font-size:10px;font-family:'Geist Mono',monospace;color:var(--t3);margin-top:3px}
.fr-feed-empty{font-size:12px;color:var(--t3);text-align:center;padding:16px 0;font-family:'Geist Mono',monospace}

/* ── Detail overlay ── */
#fr-detail{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#fr-detail.open{display:flex}
#fr-det-card{background:var(--bg);border:1px solid var(--border);border-radius:24px;box-shadow:0 32px 80px rgba(0,0,0,.22),0 2px 0 rgba(255,255,255,.35) inset;width:min(460px,94vw);max-height:88vh;overflow-y:auto;position:relative;animation:detSlideUp .35s cubic-bezier(.34,1.26,.64,1) both}
body.night #fr-det-card{background:#0e0f12;border-color:rgba(255,255,255,.1);box-shadow:0 32px 80px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.07) inset}
@keyframes detSlideUp{from{opacity:0;transform:translateY(32px) scale(.97)}to{opacity:1;transform:none}}
#fr-det-close{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:var(--glass);backdrop-filter:var(--blur-sm);cursor:none;font-size:13px;color:var(--t2);display:flex;align-items:center;justify-content:center;transition:all .15s;z-index:1}
#fr-det-close:hover{background:rgba(229,62,62,.1);color:#e53e3e;border-color:rgba(229,62,62,.2)}

/* Hero */
.fr-det-hero{padding:32px 28px 20px;text-align:center;position:relative}
.fr-det-av{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;margin:0 auto 12px;letter-spacing:-.02em;color:#fff;position:relative;transition:transform .2s cubic-bezier(.34,1.26,.64,1);cursor:none}
.fr-det-av:hover{transform:scale(1.08)}
/* No ring element needed — using box-shadow glow on the circle itself */
.fr-det-rank-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:11px;font-family:'Geist Mono',monospace;font-weight:600;background:rgba(0,0,0,.06);color:var(--t2);margin-bottom:6px}
body.night .fr-det-rank-badge{background:rgba(255,255,255,.1)}
.fr-det-rank-badge.rank-1{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e}
.fr-det-rank-badge.rank-2{background:linear-gradient(135deg,#f1f5f9,#e2e8f0);color:#334155}
.fr-det-rank-badge.rank-3{background:linear-gradient(135deg,#fdf4ee,#fde8d8);color:#7c2d12}
body.night .fr-det-rank-badge.rank-1{background:rgba(245,158,11,.2);color:#fde68a}
body.night .fr-det-rank-badge.rank-2{background:rgba(255,255,255,.1);color:#cbd5e1}
body.night .fr-det-rank-badge.rank-3{background:rgba(234,88,12,.18);color:#fed7aa}
.fr-det-name{font-size:20px;font-weight:600;letter-spacing:-.03em;color:var(--text);margin-bottom:4px}
.fr-det-you{font-size:10px;font-family:'Geist Mono',monospace;color:var(--t3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.fr-det-streak-row{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:4px}

/* Stat chips */
.fr-det-chips{display:flex;gap:10px;padding:0 28px 20px}
.fr-det-chip{flex:1;background:var(--glass);border:1px solid var(--glass-bd);border-radius:14px;padding:14px 10px;text-align:center;backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm)}
body.night .fr-det-chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
.fr-det-chip-val{font-size:26px;font-weight:200;letter-spacing:-.05em;line-height:1;color:var(--text)}
.fr-det-chip-val span{font-size:12px;color:var(--t3)}
.fr-det-chip-lbl{font-size:10px;font-family:'Geist Mono',monospace;color:var(--t3);margin-top:4px;text-transform:uppercase;letter-spacing:.06em}

/* Section headers */
.fr-det-section{padding:0 28px;margin-bottom:20px}
.fr-det-section-h{font-size:10px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.12em;color:var(--t3);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.fr-det-section-h::after{content:'';flex:1;height:1px;background:var(--border)}

/* Subject bars */
.fr-det-subjects{display:flex;flex-direction:column;gap:8px}
.fr-subj-row{display:flex;align-items:center;gap:10px;animation:sbIn .4s cubic-bezier(.4,0,.2,1) var(--delay,0s) both}
@keyframes sbIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.fr-subj-accent{width:3px;height:36px;border-radius:2px;flex-shrink:0}
.fr-subj-info{flex:1;min-width:0}
.fr-subj-name{font-size:12px;font-weight:500;color:var(--text);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-subj-bar-wrap{height:5px;background:rgba(0,0,0,.06);border-radius:10px;overflow:hidden}
body.night .fr-subj-bar-wrap{background:rgba(255,255,255,.08)}
.fr-subj-bar-fill{height:100%;border-radius:10px;transition:width .7s cubic-bezier(.4,0,.2,1)}
.fr-subj-val{text-align:right;flex-shrink:0;min-width:42px}
.fr-subj-pct{font-size:15px;font-weight:500;letter-spacing:-.02em;color:var(--text)}
.fr-subj-count{font-size:10px;font-family:'Geist Mono',monospace;color:var(--t3);margin-top:1px}

/* Recent papers in detail */
.fr-det-papers{display:flex;flex-direction:column;gap:6px}
.fr-det-paper{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--glass);border:1px solid var(--border);border-radius:10px}
body.night .fr-det-paper{background:rgba(255,255,255,.04)}
.fr-det-paper-subj{font-size:11px;font-weight:600;color:var(--t2);min-width:52px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-det-paper-name{flex:1;font-size:12px;color:var(--text);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-det-paper-pct{font-size:14px;font-weight:600;letter-spacing:-.02em;flex-shrink:0}
.fr-det-paper-pct.hi{color:#16a34a}
.fr-det-paper-pct.mid{color:#ca8a04}
.fr-det-paper-pct.lo{color:#e53e3e}

/* Detail footer */
.fr-det-footer{padding:0 28px 24px;display:flex;gap:10px}
.fr-det-remove{flex:1;padding:10px;border-radius:10px;border:1.5px solid rgba(229,62,62,.25);background:rgba(229,62,62,.06);color:#e53e3e;font-size:13px;cursor:none;transition:all .15s}
.fr-det-remove:hover{background:rgba(229,62,62,.12);border-color:rgba(229,62,62,.4)}

/* Emoji picker — rendered in body at fixed position */
#fr-emoji-picker{position:fixed;z-index:19000;background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:12px;box-shadow:0 24px 64px rgba(0,0,0,.22),0 4px 16px rgba(0,0,0,.12);display:grid;grid-template-columns:repeat(6,1fr);gap:4px;width:224px;animation:detSlideUp .22s cubic-bezier(.34,1.26,.64,1) both}
body.night #fr-emoji-picker{background:#16181f;border-color:rgba(255,255,255,.12)}
.fr-emoji-opt{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:none;transition:transform .1s,background .1s;border:1.5px solid transparent}
.fr-emoji-opt:hover{background:rgba(0,0,0,.07);transform:scale(1.2)}
body.night .fr-emoji-opt:hover{background:rgba(255,255,255,.1)}
.fr-emoji-opt.selected{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.4)}
.fr-emoji-hint{font-size:10px;font-family:'Geist Mono',monospace;color:var(--t3);text-align:center;margin-top:8px;letter-spacing:.04em;grid-column:1/-1}

/* Divider line inside detail card */
.fr-det-divider{height:1px;background:var(--border);margin:0 28px 20px}

/* calendar grid cells: tall so the whole month fills the card */
.cg-tall .cd{min-height:84px;justify-content:flex-start;padding:8px 6px 6px;}

/* CALENDAR */
.cal-layout{display:grid;grid-template-columns:1fr 280px;gap:16px;align-items:start}
.cnr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cml{font-size:16px;font-weight:600;letter-spacing:-.02em}
.cnb{display:flex;gap:6px}
.cbn{width:30px;height:30px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.6);cursor:none;font-size:13px;color:var(--t2);display:flex;align-items:center;justify-content:center;transition:all .15s}
.cbn:hover{border-color:var(--borders);color:var(--text);background:rgba(255,255,255,.92)}
.cg{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cdn{text-align:center;font-family:'Geist Mono',monospace;font-size:9px;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;padding:4px 0 8px}
/* Term highlight */

.cd.term-start::after{content:'';position:absolute;top:3px;right:3px;width:5px;height:5px;border-radius:50%;background:rgba(37,99,235,.55)}

/* days: tall enough for chips, not forced square */
.cd{min-height:44px;display:flex;flex-direction:column;align-items:center;border-radius:8px;cursor:none;font-size:13px;transition:background .12s;gap:2px;padding:6px 4px 5px;position:relative}
.cd-num{line-height:1;flex-shrink:0}
.cd:hover{background:rgba(255,255,255,.62)}
.cd.tdy{background:var(--text);color:#fff;font-weight:600}
.cd.sel{background:rgba(255,255,255,.82);font-weight:500;border:1.5px solid var(--borders)}
.cd.tdy.sel{background:var(--text);border-color:var(--text);color:#fff}
.cd.oth{color:var(--t3)}
/* NSW Term shading */

/* tiny event chips that sit inside the day cell */
.cd-chips{display:flex;flex-direction:column;gap:2px;width:100%;margin-top:3px}
.cd-chip{font-size:9px;line-height:1.2;background:rgba(15,15,15,.08);border-radius:3px;padding:1px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:left}
.cd.tdy .cd-chip{background:rgba(255,255,255,.2);color:#fff}
.cdot2{width:4px;height:4px;border-radius:50%;background:var(--text);flex-shrink:0}
.cd.tdy .cdot2{background:rgba(255,255,255,.7)}
.evi{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;background:rgba(255,255,255,.52);border-radius:9px;border:1px solid rgba(230,230,238,.8);margin-bottom:6px}
.en{font-size:13px;font-weight:500}
.em{font-family:'Geist Mono',monospace;font-size:10px;color:var(--t3);margin-top:2px}
.ev-stag{font-size:10px;padding:2px 7px;border-radius:20px;background:rgba(17,17,17,.07);color:var(--t2);font-family:'Geist Mono',monospace;margin-top:4px;display:inline-block}

/* MODALS */
.modal-bg{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.14);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .22s ease}
.modal-bg.open{opacity:1;pointer-events:all}
.modal-box{background:rgba(248,248,252,.76);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid rgba(255,255,255,.9);box-shadow:0 24px 64px rgba(0,0,0,.16),0 1.5px 0 rgba(255,255,255,.35) inset;border-radius:22px;padding:28px;width:380px;transform:scale(.93) translateY(10px);transition:transform .26s cubic-bezier(.34,1.5,.64,1)}
.modal-bg.open .modal-box{transform:scale(1) translateY(0)}
.mt{font-size:16px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.mdl{font-family:'Geist Mono',monospace;font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
.ma{display:flex;gap:8px;margin-top:16px}

/* TIMETABLE */
.tt-outer{overflow-x:auto;padding-bottom:6px}
.tt-wrap{display:grid;grid-template-columns:86px repeat(5,1fr);gap:4px;min-width:680px}
.tt-corner{background:rgba(255,255,255,.2);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Geist Mono',monospace;font-size:9px;color:var(--t3);min-height:38px}
.tt-dh{background:rgba(15,15,15,.92);color:#fff;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;font-weight:500;padding:8px 6px;min-height:38px;border:1px solid rgba(255,255,255,.08)}
.tt-dh .dds{font-family:'Geist Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.44);margin-bottom:2px}
.tt-ph{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.75);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;justify-content:center}
.tt-ph .phn{font-family:'Geist Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--t3)}
.tt-ph .pht{font-family:'Geist Mono',monospace;font-size:8.5px;color:var(--t2);margin-top:2px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttc{background:var(--glass);backdrop-filter:var(--blur);border:1px solid var(--glass-bd);border-radius:10px;padding:10px 12px;min-height:64px;display:flex;flex-direction:column;justify-content:center;transition:all .15s;position:relative;overflow:hidden}
.ttc::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:rgba(255,255,255,.88);pointer-events:none}
.ttc:hover{background:rgba(255,255,255,.74)}
.ttc:hover::after{content:'double-click to edit';position:absolute;bottom:4px;right:7px;font-size:8px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--t3);opacity:0;transition:opacity .2s;pointer-events:none}
.ttc:hover:hover::after{opacity:.7}
.ttc.now{border-color:rgba(15,15,15,.3);box-shadow:0 0 0 2px rgba(15,15,15,.1),0 4px 16px rgba(0,0,0,.08)}

/* Timetable icon picker */
.tt-icon-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:8px}
.tt-icon-opt{width:100%;aspect-ratio:1;border-radius:9px;border:1.5px solid var(--border);background:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;cursor:none;transition:all .14s}
.tt-icon-opt svg{width:16px;height:16px;opacity:.55;transition:opacity .14s}
.tt-icon-opt:hover{background:rgba(255,255,255,.88);border-color:var(--borders)}
.tt-icon-opt:hover svg{opacity:.9}
.tt-icon-opt.sel{background:var(--text);border-color:var(--text)}
.tt-icon-opt.sel svg{stroke:#fff;opacity:1}
.ttbr{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.36);border-radius:10px;display:flex;align-items:center;justify-content:center;min-height:38px}
.ttbrl{font-family:'Geist Mono',monospace;font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.08em}
.tt-sj{display:flex;align-items:flex-start;gap:8px}
.tt-ic{width:22px;height:22px;border-radius:7px;background:rgba(15,15,15,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.tt-ic svg{width:13px;height:13px;opacity:.65}
.ttn{font-size:13px;font-weight:500;line-height:1.2;letter-spacing:-.01em}
.ttr{font-family:'Geist Mono',monospace;font-size:10px;color:var(--t3);margin-top:3px}

/* STUDY LOG */
.study-tabs{display:flex;gap:2px;background:rgba(0,0,0,.06);border-radius:12px;padding:3px;margin-bottom:20px;width:fit-content}
.stab{padding:7px 18px;border-radius:9px;font-size:13px;color:var(--t2);cursor:none;transition:all .18s}
.stab.act{background:rgba(255,255,255,.85);color:var(--text);font-weight:500;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.stab:hover:not(.act){color:var(--text)}

/* Study tab panel container — clips sliding panels */
#study-panel{position:relative;overflow:hidden;}
/* Study panel */
#study-panel{position:relative;overflow:hidden;}

.stab-panel{
  will-change:transform,opacity;
  transition:opacity .34s cubic-bezier(.4,0,.2,1), transform .34s cubic-bezier(.4,0,.2,1), filter .34s ease;
}

/* Hidden panels — absolutely positioned so they don't affect layout */
.stab-panel.pre-enter-right{opacity:0;transform:translateX(52px);filter:blur(4px);pointer-events:none;position:absolute;inset:0;overflow:hidden}
.stab-panel.pre-enter-left {opacity:0;transform:translateX(-52px);filter:blur(4px);pointer-events:none;position:absolute;inset:0;overflow:hidden}

/* Visible panel — normal flow */
.stab-panel.visible{opacity:1;transform:translateX(0);filter:blur(0);pointer-events:auto;position:relative;inset:auto}

/* Exiting panels — absolute overlay, slide out */
.stab-panel.exit-right{opacity:0;transform:translateX(-52px);filter:blur(4px);pointer-events:none;position:absolute;inset:0}
.stab-panel.exit-left {opacity:0;transform:translateX(52px); filter:blur(4px);pointer-events:none;position:absolute;inset:0}

/* ── STUDY MODE TOGGLE ─────────────────────────────────── */
.sw-mode-bar{display:flex;gap:2px;background:rgba(0,0,0,.06);border-radius:10px;padding:3px;margin-bottom:16px;width:fit-content}
.swm{padding:5px 14px;border-radius:7px;font-size:12px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--t2);cursor:none;transition:all .18s;user-select:none}
.swm.act{background:rgba(255,255,255,.88);color:var(--text);font-weight:500;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.swm:hover:not(.act){color:var(--text)}
body.night .sw-mode-bar{background:rgba(255,255,255,.06)}
body.night .swm.act{background:rgba(255,255,255,.14);color:var(--text)}
body.night .swm:hover:not(.act){color:var(--text)}

/* ── FOCUS TIMER SETUP PANEL ─────────────────────────────── */
#focus-panel{display:none}
.ft-dur-row{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.ft-dur-val{font-size:44px;font-weight:200;letter-spacing:-.05em;font-variant-numeric:tabular-nums;line-height:1;min-width:56px;color:var(--text)}
.ft-dur-unit{font-size:10px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);margin-top:8px}
.ft-slider-wrap{flex:1;display:flex;flex-direction:column;gap:6px}
.ft-slider{width:100%;-webkit-appearance:none;appearance:none;height:3px;border-radius:99px;background:var(--border);outline:none;cursor:none}
.ft-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--text);cursor:none;box-shadow:0 1px 5px rgba(0,0,0,.2)}
.ft-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--text);cursor:none;border:none}
.ft-slider-ticks{display:flex;justify-content:space-between;font-size:9px;font-family:'Geist Mono',monospace;color:var(--t3);letter-spacing:.04em}
body.night .ft-slider{background:rgba(255,255,255,.12)}
/* Atmosphere grid */
.atm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.atm-card{padding:12px 13px;border-radius:10px;border:1.5px solid var(--border);background:rgba(255,255,255,.5);cursor:none;transition:all .18s;text-align:left}
.atm-card:hover{border-color:var(--borders);background:rgba(255,255,255,.82);transform:translateY(-1px)}
.atm-card.act{border-color:var(--text);background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(0,0,0,.1)}
.atm-em{font-size:20px;line-height:1;margin-bottom:5px}
.atm-name{font-size:12px;font-weight:500;color:var(--text);letter-spacing:-.01em}
.atm-desc{font-size:10px;font-family:'Geist Mono',monospace;color:var(--t3);margin-top:2px}
body.night .atm-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
body.night .atm-card:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18)}
body.night .atm-card.act{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.12)}
/* Extra options */
.ft-opts{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.ft-opt-pill{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;border:1px solid var(--border);background:rgba(255,255,255,.5);cursor:none;font-size:11px;color:var(--t2);transition:all .15s;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.07em;user-select:none}
.ft-opt-pill.on{background:var(--text);color:#fff;border-color:var(--text)}
.ft-opt-pill:hover:not(.on){border-color:var(--borders);color:var(--text);background:rgba(255,255,255,.82)}
body.night .ft-opt-pill{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:var(--t3)}
body.night .ft-opt-pill.on{background:rgba(255,255,255,.88);color:#0f0f0f;border-color:transparent}
/* Stopwatch header row */
.sw-ch-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.sw-ch-row .ch{margin-bottom:0}
.sw-fs-btn{width:27px;height:27px;border-radius:7px;border:1px solid var(--border);background:rgba(255,255,255,.5);cursor:none;display:flex;align-items:center;justify-content:center;color:var(--t3);transition:all .15s;flex-shrink:0}
.sw-fs-btn:hover{border-color:var(--borders);color:var(--text);background:rgba(255,255,255,.9)}
body.night .sw-fs-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:var(--t3)}
body.night .sw-fs-btn:hover{background:rgba(255,255,255,.14);color:var(--text)}

/* ── FOCUS FULLSCREEN OVERLAY ──────────────────────────── */
#focus-fs{position:fixed;inset:0;z-index:9999;display:none;flex-direction:column;align-items:center;justify-content:center;background:#0a0a12;overflow:hidden}
#focus-fs.open{display:flex}
#focus-fs-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#ffs-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:22px 28px;z-index:2;opacity:0;transition:opacity .35s}
#focus-fs:hover #ffs-top{opacity:1}
.ffs-atm-badge{font-size:10px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.35)}
.ffs-exit-btn{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);cursor:none;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);transition:all .18s}
.ffs-exit-btn:hover{background:rgba(255,255,255,.18);color:#fff}
#ffs-centre{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
#ffs-ring-wrap{position:relative;width:260px;height:260px;display:flex;align-items:center;justify-content:center;flex-direction:column}
#ffs-ring{position:absolute;inset:0;transform:rotate(-90deg)}
#ffs-ring-track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:2.5}
#ffs-ring-fill{fill:none;stroke:rgba(255,255,255,.45);stroke-width:2.5;stroke-linecap:round;transition:stroke-dashoffset 1s linear}
#ffs-time{font-size:70px;font-weight:200;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:#fff;line-height:1;text-shadow:none}
#ffs-goal{font-size:12px;font-family:'Geist Mono',monospace;letter-spacing:.08em;color:rgba(255,255,255,.32);text-transform:uppercase;margin-top:10px;max-width:280px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#ffs-status{font-size:10px;font-family:'Geist Mono',monospace;letter-spacing:.2em;color:rgba(255,255,255,.2);text-transform:uppercase;margin-top:5px}
#ffs-bottom{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:12px;padding:30px;z-index:2;opacity:0;transition:opacity .35s}
#focus-fs:hover #ffs-bottom{opacity:1}
.ffs-btn{display:flex;align-items:center;gap:7px;padding:9px 20px;border-radius:40px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);cursor:none;font-size:11px;font-family:'Geist Mono',monospace;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.1em;transition:all .18s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ffs-btn:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.3)}
.ffs-btn.end{border-color:rgba(220,80,80,.35);color:rgba(240,130,130,.8)}
.ffs-btn.end:hover{background:rgba(220,80,80,.14);border-color:rgba(220,80,80,.55);color:#fca5a5}
/* break nudge */
#ffs-break{position:absolute;inset:0;z-index:5;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
#ffs-break.show{display:flex}
.ffs-break-h{font-size:26px;font-weight:300;color:#fff;letter-spacing:-.02em}
.ffs-break-p{font-size:11px;font-family:'Geist Mono',monospace;color:rgba(255,255,255,.4);letter-spacing:.1em;text-transform:uppercase}
.ffs-break-btns{display:flex;gap:10px;margin-top:10px}
.ffs-break-btn{padding:9px 22px;border-radius:30px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.09);cursor:none;font-size:11px;font-family:'Geist Mono',monospace;color:rgba(255,255,255,.75);text-transform:uppercase;letter-spacing:.1em;transition:all .18s}
.ffs-break-btn:hover{background:rgba(255,255,255,.2);color:#fff}
.ffs-break-btn.skip{border-color:transparent;color:rgba(255,255,255,.3)}
.ffs-break-btn.skip:hover{color:rgba(255,255,255,.55);background:transparent}
/* done flash */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ffsDone{0%{opacity:0;transform:scale(.88)}60%{opacity:1;transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
#ffs-done-msg{position:absolute;inset:0;z-index:6;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);animation:ffsDone .5s cubic-bezier(.4,0,.2,1) both}
#ffs-done-msg.show{display:flex}
.ffs-done-h{font-size:32px;font-weight:300;color:#fff;letter-spacing:-.03em}
.ffs-done-p{font-size:11px;font-family:'Geist Mono',monospace;color:rgba(255,255,255,.38);letter-spacing:.12em;text-transform:uppercase}
.ffs-done-btn{margin-top:14px;padding:10px 26px;border-radius:30px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);cursor:none;font-size:11px;font-family:'Geist Mono',monospace;color:rgba(255,255,255,.8);text-transform:uppercase;letter-spacing:.1em;transition:all .18s}
.ffs-done-btn:hover{background:rgba(255,255,255,.22);color:#fff}

/* ── STOPWATCH FULLSCREEN ─────────────────────────────── */
#sw-fs{position:fixed;inset:0;z-index:9998;display:none;flex-direction:column;align-items:center;justify-content:center;background:rgba(9,10,14,.97);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px)}
#sw-fs.open{display:flex}
#sw-fs-subj{font-size:11px;font-family:'Geist Mono',monospace;letter-spacing:.18em;color:rgba(255,255,255,.28);text-transform:uppercase;margin-bottom:16px}
#sw-fs-time{font-size:clamp(80px,14vw,170px);font-weight:200;letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:#fff;line-height:1}
#sw-fs-status{font-size:10px;font-family:'Geist Mono',monospace;letter-spacing:.2em;color:rgba(255,255,255,.2);text-transform:uppercase;margin-top:14px;margin-bottom:32px}
#sw-fs-controls{display:flex;gap:10px;align-items:center}
.swfs-btn{display:flex;align-items:center;gap:7px;padding:10px 22px;border-radius:40px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);cursor:none;font-size:11px;font-family:'Geist Mono',monospace;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.1em;transition:all .18s}
.swfs-btn:hover{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.28)}
.swfs-btn.primary{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.85)}
.swfs-btn.stop-log{border-color:rgba(80,200,120,.3);color:rgba(120,220,150,.8)}
.swfs-btn.stop-log:hover{background:rgba(80,200,120,.1);border-color:rgba(80,200,120,.5);color:#86efac}
.swfs-esc{position:absolute;top:22px;right:26px;font-size:10px;font-family:'Geist Mono',monospace;letter-spacing:.12em;color:rgba(255,255,255,.18);text-transform:uppercase}

/* HOMEWORK */
.hw-filters{display:flex;gap:4px;margin-bottom:12px}
.hw-filter{font-size:11px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.08em;padding:3px 10px;border-radius:20px;cursor:none;color:var(--t3);transition:all .18s;border:1px solid transparent}
.hw-filter:hover{color:var(--text);background:rgba(0,0,0,.05)}
.hw-filter.act{background:var(--text);color:#fff;border-color:var(--text)}
/* Night mode */
body.night .hw-filter{color:var(--t3)}
body.night .hw-filter:hover{color:var(--text);background:rgba(255,255,255,.08)}
body.night .hw-filter.act{background:rgba(255,255,255,.90);color:#0f0f0f;border-color:rgba(255,255,255,.8)}
/* Filter switch animation */
@keyframes hwSlide{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
#hw-list.switching{animation:hwSlide .22s cubic-bezier(.4,0,.2,1) both}
.hw-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:rgba(255,255,255,.5);border-radius:9px;border:1px solid rgba(230,230,238,.84);margin-bottom:6px;transition:all .15s;border-left-width:3px}
.hw-item:hover{background:rgba(255,255,255,.74);border-color:var(--borders)}
.hw-item.done{opacity:.35}
.hw-item.done .hw-task-text{text-decoration:line-through}
.hw-check{width:17px;height:17px;border:1.5px solid var(--borders);border-radius:5px;flex-shrink:0;cursor:none;display:flex;align-items:center;justify-content:center;transition:all .15s;margin-top:1px}
.hw-item.done .hw-check{background:var(--text);border-color:var(--text)}
.hw-task-text{font-size:13px;line-height:1.4}
.hw-meta{font-size:10px;font-family:'Geist Mono',monospace;color:var(--t3);margin-top:3px;display:flex;gap:8px;align-items:center}
.hw-overdue{color:#e53e3e!important}
.hw-subj-badge{font-size:10px;padding:2px 7px;border-radius:20px;background:rgba(17,17,17,.07);color:var(--t2);font-family:'Geist Mono',monospace;flex-shrink:0}

#ctx-cursor-item.active-cursor{background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.12);font-weight:500}
body.night #ctx-cursor-item.active-cursor{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18)}
#watermark{position:fixed;bottom:10px;right:14px;font-size:9.5px;font-family:'Geist Mono',monospace;color:rgba(0,0,0,.18);letter-spacing:.06em;pointer-events:none;z-index:50;user-select:none}

/* Sync badge */
#sync-badge{
  position:fixed;bottom:32px;left:50%;transform:translateX(-50%);
  background:rgba(248,248,252,.82);backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 8px 32px rgba(0,0,0,.10);
  border-radius:14px;padding:14px 20px;
  display:none;align-items:center;gap:12px;
  font-size:13px;z-index:8000;min-width:280px;
}
#sync-badge.show{display:flex}
#sync-badge input{flex:1;padding:7px 10px;border:1px solid var(--border);border-radius:8px;font-family:'Geist',sans-serif;font-size:13px;outline:none;background:rgba(255,255,255,.8);cursor:none}
#sync-badge input:focus{border-color:var(--borders)}
.sync-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.sync-dot.green{background:#16a34a}
.sync-dot.grey{background:var(--t3)}

/* ── AUTH MODAL ────────────────────────────────────────── */
#sb-modal{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;
}
#sb-modal-bg{
  position:absolute;inset:0;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  animation:sbBgIn .25s ease both;
}
@keyframes sbBgIn{from{opacity:0}to{opacity:1}}
#sb-modal-box{
  position:relative;z-index:1;
  width:min(420px,calc(100vw - 32px));
  background:rgba(252,252,254,.92);
  border:1px solid rgba(255,255,255,.9);
  border-radius:28px;
  padding:36px 32px 32px;
  box-shadow:0 32px 80px rgba(0,0,0,.22),0 1.5px 0 rgba(255,255,255,.35) inset;
  backdrop-filter:blur(32px) saturate(1.6);-webkit-backdrop-filter:blur(32px) saturate(1.6);
  overflow:hidden;
  animation:sbBoxIn .35s cubic-bezier(.34,1.1,.64,1) both;
}
body.night #sb-modal-box{
  background:rgba(16,17,24,.92);
  border-color:rgba(255,255,255,.1);
  box-shadow:0 32px 80px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.07) inset;
}
@keyframes sbBoxIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Decorative orbs */
.sb-orb{position:absolute;border-radius:50%;pointer-events:none}
.sb-orb-1{width:260px;height:260px;top:-80px;right:-80px;background:radial-gradient(circle,rgba(99,132,255,.2) 0%,transparent 70%)}
.sb-orb-2{width:200px;height:200px;bottom:-60px;left:-60px;background:radial-gradient(circle,rgba(147,51,234,.15) 0%,transparent 70%)}
/* Logo */
.sb-logo{font-size:36px;font-weight:700;letter-spacing:-.04em;color:var(--text);line-height:1;margin-bottom:4px;position:relative;z-index:1}
.sb-logo-dot{color:rgba(99,132,255,.9)}
.sb-tagline{font-size:11px;font-family:'Geist Mono',monospace;color:var(--t3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:28px;position:relative;z-index:1}
/* Mode tabs */
.sb-tabs{display:flex;background:rgba(0,0,0,.05);border-radius:12px;padding:3px;margin-bottom:24px;position:relative;z-index:1}
body.night .sb-tabs{background:rgba(255,255,255,.07)}
.sb-tab{flex:1;padding:9px;border-radius:9px;font-size:13px;font-weight:500;border:none;background:transparent;color:var(--t2);font-family:'Geist',sans-serif;cursor:pointer;transition:all .18s}
.sb-tab.on{background:var(--glass-bd);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.1)}
body.night .sb-tab.on{background:rgba(255,255,255,.12)}
/* Fields */
.sb-form{position:relative;z-index:1}
.sb-field{margin-bottom:14px}
.sb-label{display:block;font-size:11px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);margin-bottom:6px;font-weight:600}
.sb-inp-wrap{position:relative}
.sb-inp{
  width:100%;padding:13px 16px;
  border:1px solid var(--border);border-radius:14px;
  font-family:'Geist',sans-serif;font-size:15px;
  background:rgba(255,255,255,.65);color:var(--text);
  outline:none;transition:border-color .15s,box-shadow .15s;
  box-sizing:border-box;
}
body.night .sb-inp{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:var(--text)}
.sb-inp:focus{border-color:rgba(99,132,255,.6);box-shadow:0 0 0 3px rgba(99,132,255,.12)}
.sb-inp-wrap .sb-inp{padding-right:44px}
.sb-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--t3);cursor:pointer;padding:4px;display:flex;align-items:center}
.sb-eye:hover{color:var(--t2)}
/* Error */
.sb-error{font-size:12px;color:#dc2626;font-family:'Geist Mono',monospace;min-height:18px;margin-bottom:10px}
/* Submit */
.sb-btn{
  width:100%;padding:15px;border-radius:16px;
  background:var(--text);color:#fff;border:none;
  font-family:'Geist',sans-serif;font-size:15px;font-weight:600;
  cursor:pointer;transition:opacity .15s,transform .15s;
  letter-spacing:-.01em;
}
body.night .sb-btn{background:rgba(240,240,255,.92);color:#111}
.sb-btn:hover{opacity:.88}
.sb-btn:active{transform:scale(.98)}
.sb-btn:disabled{opacity:.5;cursor:default}
/* Close */
.sb-close{
  position:absolute;top:16px;right:16px;
  width:30px;height:30px;border-radius:50%;border:none;
  background:rgba(0,0,0,.06);color:var(--t2);
  font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
body.night .sb-close{background:rgba(255,255,255,.1)}
.sb-close:hover{background:rgba(0,0,0,.12)}
.le{display:flex;align-items:center;gap:12px;padding:11px 13px;background:rgba(255,255,255,.5);border-radius:9px;border:1px solid rgba(230,230,238,.8);margin-bottom:6px;border-left-width:3px}
.le-ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.le-sj{font-size:13px;font-weight:500}
.le-mt{font-family:'Geist Mono',monospace;font-size:10px;color:var(--t3);margin-top:2px}
.le-dur{font-size:17px;font-weight:300;letter-spacing:-.03em;margin-left:auto}
.subj-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.stj{padding:5px 14px;border-radius:20px;font-size:12px;cursor:none;border:1.5px solid var(--border);background:rgba(255,255,255,.55);color:var(--t2);transition:all .15s}
.stj.act{background:var(--text);color:#fff;border-color:var(--text)}
.stj:hover:not(.act){background:rgba(255,255,255,.88);color:var(--text)}
.pp-row{display:grid;grid-template-columns:90px 1fr 80px 58px 30px;gap:8px;align-items:center;padding:9px 12px;background:rgba(255,255,255,.5);border-radius:9px;border:1px solid rgba(230,230,238,.78);margin-bottom:6px}
.pp-date{font-family:'Geist Mono',monospace;font-size:11px;color:var(--t3)}
.pp-mark{font-size:13px;font-weight:500}
.pp-pct{font-family:'Geist Mono',monospace;font-size:11px;padding:2px 7px;border-radius:20px;text-align:center}
.avg-wrap{height:5px;background:rgba(0,0,0,.07);border-radius:10px;overflow:hidden;margin-top:6px}
.avg-bar{height:100%;background:var(--text);border-radius:10px;transition:width .6s cubic-bezier(.4,0,.2,1)}
.exam-card{padding:18px 20px;background:rgba(255,255,255,.52);border-radius:12px;border:1px solid rgba(230,230,238,.8);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.ex-sj{font-size:15px;font-weight:600;letter-spacing:-.02em}
.ex-nm{font-size:12px;color:var(--t3);margin-top:2px;font-family:'Geist Mono',monospace}
.ex-big{font-size:36px;font-weight:200;letter-spacing:-.05em;line-height:1;text-align:right;font-variant-numeric:tabular-nums}
.ex-unit{font-size:12px;color:var(--t3);margin-top:2px;text-align:right}
.ex-prog{width:100%;height:3px;background:rgba(0,0,0,.08);border-radius:10px;overflow:hidden;margin-top:10px}
.ex-fill{height:100%;background:var(--text);border-radius:10px;transition:width .6s}

/* TOAST */
#kbd-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(12px);background:rgba(15,15,15,.9);backdrop-filter:blur(16px);color:#fff;border-radius:12px;padding:10px 18px;font-size:13px;display:flex;align-items:center;gap:10px;opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;z-index:9999;white-space:nowrap;border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 32px rgba(0,0,0,.22)}
#kbd-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#kbd-toast kbd{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);border-radius:5px;padding:2px 7px;font-family:'Geist Mono',monospace;font-size:11px}

/* SHORTCUTS */
#sco{position:fixed;inset:0;z-index:8900;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.15);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .22s}
#sco.show{opacity:1;pointer-events:all}
#scob{background:rgba(248,248,252,.74);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid rgba(255,255,255,.9);box-shadow:0 24px 64px rgba(0,0,0,.16),0 1.5px 0 rgba(255,255,255,.35) inset;border-radius:22px;padding:28px 32px;min-width:320px;transform:scale(.95);transition:transform .24s cubic-bezier(.34,1.5,.64,1)}
#sco.show #scob{transform:scale(1)}
.sc-title{font-size:16px;font-weight:600;letter-spacing:-.02em;margin-bottom:16px}
.sc-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.sc-row:last-child{border-bottom:none}
.sc-desc{font-size:13px;color:var(--t2)}
.sc-keys{display:flex;gap:4px}
.sc-keys kbd{background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.12);border-radius:5px;padding:2px 8px;font-family:'Geist Mono',monospace;font-size:11px}

.es{text-align:center;padding:22px;color:var(--t3);font-size:13px}
.ei{font-size:18px;margin-bottom:6px;opacity:.32}

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.14);border-radius:10px}