/* ==== originally index.html lines 21-598 ==== */ :root { /* ============================================================ THEME CONTROL CENTER — 5 built-in themes: Light, Dark, Forest, Aurora, Paper. Switch by setting data-theme="..." on (handled by the Theme Studio in Settings). :root below holds the LIGHT theme and also acts as the fallback for any theme block whose values haven't been filled in yet. ============================================================ */ /* ---- Dark (default) ---- */ --t-bg:#0a0b10; --t-bg2:#11131a; --t-surface:rgba(200,205,230,0.045); --t-surface-hover:rgba(200,205,230,0.075); --t-border:rgba(170,180,220,0.10); --t-border-strong:rgba(170,180,220,0.20); --t-accent:#707cf5; --t-accent2:#9ba4f8; --t-text:#e9ebf5; --t-muted:rgba(233,235,245,0.45); --t-muted2:rgba(233,235,245,0.24); /* ============================================================ */ --bg:var(--t-bg);--surface:var(--t-surface);--surface-hover:var(--t-surface-hover); --border:var(--t-border);--border-warm:var(--t-border-strong); --accent:var(--t-accent);--accent2:var(--t-accent2);--accent-dim:color-mix(in srgb,var(--t-accent) 45%,transparent); --accent-glow:color-mix(in srgb,var(--t-accent) 15%,transparent);--accent-glow2:color-mix(in srgb,var(--t-accent2) 8%,transparent); --text:var(--t-text);--muted:var(--t-muted);--muted2:var(--t-muted2); --ring-focus:var(--t-accent);--ring-break:#78c89a;--ring-long:#c0a0e0; --ring-sixty:#f0c060;--ring-deep:#a080f0; --radius:20px;--radius-sm:12px;--panel-w:320px; --transition:0.4s cubic-bezier(0.4,0,0.2,1); } /* ---- Dark-native form controls & scrollbars ---- Bug fix: styling — the popup fix above handles the opened dropdown, but the collapsed select itself needs its own background/text color set too (several already inherit .field-input /.modal-select, this is the catch-all for any select that doesn't). */ select { color-scheme: dark; background-color: var(--t-bg2); color: var(--t-text); border-color: var(--t-border); } /* ---- LIGHT ---- */ [data-theme="dark"] { --t-bg:#0a0b10; --t-bg2:#11131a; --t-surface:rgba(200,205,230,0.045); --t-surface-hover:rgba(200,205,230,0.075); --t-border:rgba(170,180,220,0.10); --t-border-strong:rgba(170,180,220,0.20); --t-accent:#707cf5; --t-accent2:#9ba4f8; --t-text:#e9ebf5; --t-muted:rgba(233,235,245,0.45); --t-muted2:rgba(233,235,245,0.24); } /* ---- FOREST (fill in — currently falls back to Light) ---- */ [data-theme="forest"] { --t-bg:#0a100d; --t-bg2:#101a15; --t-surface:rgba(180,220,195,0.045); --t-surface-hover:rgba(180,220,195,0.08); --t-border:rgba(170,210,185,0.11); --t-border-strong:rgba(170,210,185,0.22); --t-accent:#5fbf86; --t-accent2:#8bd9a8; --t-text:#e7f1ea; --t-muted:rgba(231,241,234,0.42); --t-muted2:rgba(231,241,234,0.22); } /* ---- AURORA (fill in — currently falls back to Light) ---- */ [data-theme="aurora"] { --t-bg:#070d14; --t-bg2:#0c1620; --t-surface:rgba(170,220,235,0.045); --t-surface-hover:rgba(170,220,235,0.08); --t-border:rgba(150,210,230,0.12); --t-border-strong:rgba(150,210,230,0.24); --t-accent:#38bdf8; --t-accent2:#67e8f9; --t-text:#e7f5fa; --t-muted:rgba(231,245,250,0.42); --t-muted2:rgba(231,245,250,0.22); } /* ---- PAPER (fill in — currently falls back to Light) ---- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html,body{height:100%;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased} #bg-media{position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;z-index:0;opacity:0;transition:opacity 1.4s ease;pointer-events:none} #bg-media.visible{opacity:1} #bg-video{position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;z-index:0;opacity:0;transition:opacity 1.4s ease;pointer-events:none} #bg-video.visible{opacity:1} #progression-decor{position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;z-index:0;opacity:0;transition:opacity 2.2s ease;pointer-events:none} #progression-decor.visible{opacity:1} #bg-overlay{position:fixed;inset:0;background:color-mix(in srgb, var(--t-bg) 0%, transparent);z-index:2;pointer-events:none;opacity:0;transition:opacity 1.4s ease} #bg-overlay.visible{opacity:1} /* ── SANCTUARY WINDOW VIEW LAYER (independent of room, only the outside scenery) ── */ #window-view-layer{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.6s ease;overflow:hidden} #window-view-layer.visible{opacity:1} #window-view-layer video,#window-view-layer img{width:100%;height:100%;object-fit:cover;filter:saturate(0.85) brightness(0.8);transition:filter 1.2s ease} .ambient-flourish{position:absolute;inset:0;pointer-events:none;overflow:hidden} .flourish-shooting-star::before{content:'';position:absolute;top:18%;left:-4%;width:3px;height:3px;background:#fff;border-radius:50%;box-shadow:0 0 6px 2px rgba(255,255,255,.8);animation:flourish-shoot 1.6s ease-out forwards} @keyframes flourish-shoot{0%{transform:translate(0,0);opacity:0}10%{opacity:1}100%{transform:translate(140vw,42vh);opacity:0}} .flourish-passing-satellite::before{content:'';position:absolute;top:10%;left:-4%;width:2px;height:2px;background:rgba(255,255,255,.85);border-radius:50%;box-shadow:0 0 4px rgba(255,255,255,.6);animation:flourish-satellite 6s linear forwards} @keyframes flourish-satellite{0%{transform:translate(0,0);opacity:0}5%{opacity:.8}95%{opacity:.8}100%{transform:translate(112vw,18vh);opacity:0}} .flourish-lightning-flash::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.16);animation:flourish-flash .5s ease-out forwards} @keyframes flourish-flash{0%{opacity:0}15%{opacity:1}100%{opacity:0}} .flourish-bird-flying-past::before{content:'';position:absolute;top:30%;left:-4%;width:14px;height:6px;border-bottom:2px solid rgba(20,16,10,.45);border-radius:50%;animation:flourish-bird 2.6s ease-in-out forwards} @keyframes flourish-bird{0%{transform:translate(0,0);opacity:0}10%{opacity:.6}90%{opacity:.6}100%{transform:translate(120vw,-6vh);opacity:0}} .ambient-flicker{animation:room-flicker 1.4s ease-in-out} @keyframes room-flicker{0%,100%{filter:none}30%{filter:brightness(1.12)}55%{filter:brightness(0.94)}80%{filter:brightness(1.06)}} /* ── WEATHER OVERLAY ENGINE ── */ #weather-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:3;pointer-events:none;transition:opacity 1s ease} body.deep-work-active #weather-canvas{opacity:0.3} #particle-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:4;pointer-events:none;transition:opacity 0.8s ease} #particle-canvas.hidden{opacity:0} #vignette{position:fixed;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse 80% 70% at 50% 50%,transparent 40%,rgba(5,3,1,0.7) 100%)} /* ── COMPANION LAYER — passive, decorative, positioned per world ── */ #companion-layer{position:fixed;inset:0;z-index:6;pointer-events:none;transition:opacity 1s ease} body.deep-work-active #companion-layer{opacity:0} .companion-sprite{position:absolute;width:84px;height:84px;object-fit:contain;opacity:0;animation:companion-fade-in 1.8s ease forwards;filter:drop-shadow(0 8px 16px rgba(0,0,0,.45))} @keyframes companion-fade-in{from{opacity:0;transform:translateY(12px)}to{opacity:.92;transform:translateY(0)}} .pos-bottom-left{left:22px;bottom:22px} .pos-bottom-right{right:22px;bottom:22px} .pos-top-left{left:26px;top:84px} .pos-top-right{right:26px;top:84px} /* ── DEEP FOCUS SPOTLIGHT — darkens everything outside the ring ── */ #deep-spotlight{ position:fixed;inset:0;z-index:8;pointer-events:none; background:radial-gradient(ellipse 500px 500px at 50% 50%,transparent 28%,rgba(4,2,1,0.94) 72%); opacity:0;transition:opacity 1.2s cubic-bezier(0.4,0,0.2,1); } body.deep-work-active #deep-spotlight{opacity:1} .shell{position:relative;z-index:7;min-height:100vh;display:flex;flex-direction:column} /* ── NAV ── */ nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px 28px;border-bottom:1px solid var(--border);background:color-mix(in srgb, var(--t-bg) 55%, transparent);backdrop-filter:blur(20px) saturate(110%);position:sticky;top:0;z-index:20;max-height:80px;overflow:hidden;transition:opacity 0.6s cubic-bezier(0.4,0,0.2,1),transform 0.6s cubic-bezier(0.4,0,0.2,1),max-height 0.5s cubic-bezier(0.4,0,0.2,1) 0.1s,padding 0.5s cubic-bezier(0.4,0,0.2,1) 0.1s,border-color 0.5s ease 0.1s} /* max-height/padding collapse (delayed slightly so the fade finishes first) fully reclaims the header's space instead of leaving an invisible empty bar behind — this is what actually lets the timer slide up into that space in Deep Mode. */ nav.deep-hide{opacity:0;pointer-events:none;transform:translateY(-10px);max-height:0;padding-top:0;padding-bottom:0;border-bottom-color:transparent} .nav-left{display:flex;align-items:center;gap:16px} .nav-brand{font-family:'Cormorant Garamond',serif;font-size:1.05rem;letter-spacing:4px;text-transform:uppercase;color:var(--muted);text-decoration:none;white-space:nowrap} .nav-brand span{color:var(--t-accent)} #discord-invite-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;color:var(--muted);background:transparent;border:1px solid var(--border);transition:all 0.3s;text-decoration:none;flex-shrink:0} #discord-invite-btn:hover{color:#7289da;border-color:rgba(114,137,218,0.4);background:rgba(114,137,218,0.08)} .nav-right{display:flex;align-items:center;justify-content:flex-end;gap:10px} #hub-btn{font-size:0.66rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:40px;padding:7px 16px;cursor:pointer;transition:all 0.3s;display:flex;align-items:center;gap:7px;white-space:nowrap} #hub-btn:hover{color:var(--accent2);border-color:var(--border-warm);background:var(--accent-glow)} #hub-btn-dot{width:5px;height:5px;border-radius:50%;background:var(--t-accent);flex-shrink:0;box-shadow:0 0 5px var(--t-accent2);animation:hub-pulse 3s ease-in-out infinite} #hub-btn.timer-live{border-color:rgba(120,200,154,0.35);background:rgba(120,200,154,0.07)} #hub-btn.timer-live #hub-btn-dot{background:#78c89a;box-shadow:0 0 6px #78c89a} @keyframes hub-pulse{0%,100%{opacity:0.5}50%{opacity:1}} /* ── STATS BAR ── */ #stats-bar{display:flex;align-items:center;gap:18px;padding:8px 28px;border-bottom:1px solid var(--border);background:color-mix(in srgb, var(--t-bg) 40%, transparent);backdrop-filter:blur(12px);font-size:0.65rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);transition:opacity 0.7s cubic-bezier(0.4,0,0.2,1),transform 0.7s cubic-bezier(0.4,0,0.2,1);flex-wrap:wrap} #stats-bar.deep-hide{opacity:0;pointer-events:none;transform:translateY(-6px)} .sbar-item{display:flex;align-items:center;gap:6px} .sbar-val{color:var(--accent);font-family:'Cormorant Garamond',serif;font-size:1rem;font-weight:400;letter-spacing:0;line-height:1} .sbar-streak-val{color:#78c89a} .sbar-dot{width:4px;height:4px;border-radius:50%;background:var(--border)} .sbar-live{display:flex;align-items:center;gap:5px;margin-left:auto} .sbar-live-dot{width:5px;height:5px;border-radius:50%;background:#78c89a;box-shadow:0 0 5px #78c89a;animation:hub-pulse 2s ease-in-out infinite} .workspace{flex:1;display:flex;min-height:0} #main-grid{flex:1;display:grid;grid-template-columns:1fr var(--panel-w);min-height:0;transition:grid-template-columns var(--transition)} #main-grid.panel-hidden{grid-template-columns:1fr 0px} .center-col{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 36px;border-right:1px solid var(--border);transition:border-color 0.4s;min-width:0} #main-grid.panel-hidden .center-col,body.deep-mode .center-col{border-right-color:transparent} /* Deep Mode: the timer cluster slides to the top-left instead of staying centered */ body.deep-mode .center-col{align-items:flex-start;justify-content:flex-start;padding:28px 32px;transition:padding 0.6s cubic-bezier(0.4,0,0.2,1)} .side-panel{display:flex;flex-direction:column;padding:28px 20px;gap:20px;overflow-y:auto;overflow-x:hidden;border-left:1px solid var(--border);width:var(--panel-w);transition:opacity 0.5s cubic-bezier(0.4,0,0.2,1),transform 0.5s cubic-bezier(0.4,0,0.2,1);scrollbar-width:thin;scrollbar-color:var(--border) transparent} .side-panel.deep-hidden,#main-grid.panel-hidden .side-panel{opacity:0;pointer-events:none;transform:translateX(22px)} /* ── SESSION PILLS ── */ .session-pills{display:flex;gap:8px;margin-bottom:36px;flex-wrap:wrap;justify-content:center;transition:opacity 0.65s cubic-bezier(0.4,0,0.2,1),transform 0.65s cubic-bezier(0.4,0,0.2,1)} .session-pills.fade-out{opacity:0;pointer-events:none;transform:translateY(-12px) scale(0.96)} .pill{font-size:0.65rem;letter-spacing:2px;text-transform:uppercase;padding:6px 14px;border-radius:40px;cursor:pointer;background:var(--surface);border:1px solid var(--border);color:var(--muted);transition:all 0.3s;font-family:'DM Sans',sans-serif} .pill:hover{background:var(--surface-hover);color:var(--text)} .pill.active{background:color-mix(in srgb, var(--t-accent) 12%, transparent);border-color:color-mix(in srgb, var(--t-accent) 35%, transparent);color:var(--accent)} .pill.active.mode-break{background:rgba(120,200,154,0.10);border-color:rgba(120,200,154,0.35);color:var(--ring-break)} .pill.active.mode-long{background:rgba(192,160,224,0.10);border-color:rgba(192,160,224,0.35);color:var(--ring-long)} .pill.active.mode-sixty{background:rgba(240,192,96,0.12);border-color:rgba(240,192,96,0.35);color:var(--ring-sixty)} body.deep-work-active .session-pills{opacity:0;pointer-events:none;transform:translateY(-12px) scale(0.96)} /* ── RING ── */ .ring-wrap{position:relative;width:260px;height:260px;margin-bottom:32px;transition:width 0.75s cubic-bezier(0.34,1.56,0.64,1),height 0.75s cubic-bezier(0.34,1.56,0.64,1)} body.deep-work-active .ring-wrap{width:360px;height:360px} .ring-wrap svg{width:100%;height:100%;transform:rotate(-90deg)} #ring-track{fill:none;stroke:color-mix(in srgb, var(--t-accent2) 7%, transparent);stroke-width:3.5} #ring-fill{fill:none;stroke:var(--ring-focus);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:691.15;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear,stroke 0.9s ease,filter 0.9s ease} #ring-glow{fill:none;stroke:var(--ring-focus);stroke-width:8;stroke-linecap:round;stroke-dasharray:691.15;stroke-dashoffset:0;opacity:0.10;transition:stroke-dashoffset 1s linear,stroke 0.9s ease} #ring-tip{fill:var(--ring-focus);opacity:0;transition:cx 1s linear,cy 1s linear,fill 0.9s ease,opacity 0.4s ease;filter:drop-shadow(0 0 6px var(--ring-focus))} .ring-wrap.running #ring-tip{opacity:0.95} .ring-wrap.running{animation:ring-pulse-breathe 3.6s ease-in-out infinite} @keyframes ring-pulse-breathe{0%,100%{filter:none}50%{filter:drop-shadow(0 0 10px color-mix(in srgb, var(--ring-focus) 35%, transparent))}} body.deep-work-active #ring-tip{fill:var(--ring-deep);filter:drop-shadow(0 0 6px var(--ring-deep))} /* ── FLIP CLOCK ── Rebuilt clean: ONE rotating element per digit (front face = old value, back face = new value), not the old 4-layer split-flap. The visible face at any moment is decided purely by CSS (backface-visibility + the rotation angle) — never by JS trying to time a text-swap to match the animation. That's what made the old version ghost: two independently-timed leaves that JS had to swap text on at exactly the right instant. Here there's no instant to get right — the browser handles it. */ .flip-clock-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:32px} /* the "box" — a card housing the clock so it doesn't float loose on the page */ .flip-clock-box{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 26px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--border);box-shadow:0 8px 28px rgba(0,0,0,0.18)} .flip-clock{display:flex;align-items:center;justify-content:center;gap:6px} .flip-group{display:flex;gap:5px} .flip-sep{font-family:'Cormorant Garamond',serif;font-size:2.4rem;font-weight:300;color:var(--muted);line-height:1;padding:0 2px;opacity:0.55;align-self:center} .flip-digit{position:relative;width:42px;height:64px;font-family:'Cormorant Garamond',serif;font-size:2.6rem;font-weight:500;color:var(--text);perspective:340px} .flip-digit-inner{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(0deg)} /* transition lives ONLY on .flipping — removing the class snaps back to rotateX(0) instantly with no reverse-animation glitch, exactly matching how the front face already agrees with it (see JS). Bounce easing reuses the app's own existing "pop" curve (see .ring-wrap / .timer-display elsewhere) so the flip feels like it belongs to the same motion language as the rest of the UI. */ .flip-digit-inner.flipping{transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1);transform:rotateX(-180deg)} .flip-digit-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,0.09),rgba(255,255,255,0.02));box-shadow:0 1px 0 rgba(0,0,0,0.35) inset,0 6px 14px rgba(0,0,0,0.22);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden} .flip-digit-front{transform:rotateX(0deg)} .flip-digit-back{transform:rotateX(180deg)} /* crease line — purely decorative, gives the classic split-flap look without a second moving part */ .flip-digit::after{content:'';position:absolute;left:0;right:0;top:calc(50% - 0.5px);height:1px;background:rgba(0,0,0,0.45);z-index:2;pointer-events:none} /* ── flip effects ── all driven off the same .flipping class the JS already toggles, via :has() — purely decorative, so even if a browser doesn't support :has() the flip itself still works fine, it just loses the flourish. */ .flip-digit-face::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,0.22) 48%,transparent 64%);opacity:0;pointer-events:none} .flip-digit:has(.flip-digit-inner.flipping){animation:flip-pop 0.5s cubic-bezier(0.34,1.56,0.64,1)} .flip-digit:has(.flip-digit-inner.flipping) .flip-digit-face{animation:flip-shadow 0.5s cubic-bezier(0.34,1.56,0.64,1)} .flip-digit:has(.flip-digit-inner.flipping) .flip-digit-face::before{animation:flip-glint 0.5s cubic-bezier(0.34,1.56,0.64,1)} @keyframes flip-pop{0%{transform:scale(1)}45%{transform:scale(1.05)}100%{transform:scale(1)}} @keyframes flip-shadow{0%,100%{box-shadow:0 1px 0 rgba(0,0,0,0.35) inset,0 6px 14px rgba(0,0,0,0.22)}50%{box-shadow:0 1px 0 rgba(0,0,0,0.55) inset,0 3px 24px rgba(0,0,0,0.4)}} @keyframes flip-glint{0%{opacity:0}42%{opacity:1}62%{opacity:0}100%{opacity:0}} #flip-session-label{font-size:0.6rem;letter-spacing:3.5px;text-transform:uppercase;color:var(--muted);transition:opacity 0.5s,color 0.5s} body.deep-work-active #flip-session-label{color:var(--ring-deep);opacity:0.7} body.deep-work-active .flip-clock-box{transform:scale(1.28);transition:transform 0.75s cubic-bezier(0.34,1.56,0.64,1)} @media (max-width:640px){.flip-digit{width:32px;height:50px;font-size:2rem}.flip-clock-box{padding:16px 18px}.flip-sep{font-size:1.9rem}body.deep-work-active .flip-clock-box{transform:scale(1.15)}} .ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px} #timer-display{font-family:'Cormorant Garamond',serif;font-size:4rem;font-weight:300;letter-spacing:5px;line-height:1;color:var(--text);transition:font-size 0.75s cubic-bezier(0.34,1.56,0.64,1)} body.deep-work-active #timer-display{font-size:5.8rem} #session-label{font-size:0.6rem;letter-spacing:3.5px;text-transform:uppercase;color:var(--muted);transition:opacity 0.5s,color 0.5s} body.deep-work-active #session-label{color:var(--ring-deep);opacity:0.7} #xp-flash{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:300;color:var(--accent);letter-spacing:2px;opacity:0;transition:opacity 0.4s,transform 0.6s;transform:translateY(0px);pointer-events:none;min-height:28px;text-align:center} #xp-flash.show{opacity:1;transform:translateY(-8px)} /* Deep work ring: purple glow */ body.deep-work-active #ring-fill{stroke:var(--ring-deep);filter:drop-shadow(0 0 22px var(--ring-deep))} body.deep-work-active #ring-glow{stroke:var(--ring-deep)} /* Breathing aura behind ring */ #ring-aura{ position:absolute;inset:-30px;border-radius:50%; background:radial-gradient(ellipse at 50% 50%,var(--ring-deep) 0%,transparent 68%); opacity:0;transition:opacity 1.3s ease;pointer-events:none;z-index:0; } @keyframes ring-breathe{0%,100%{opacity:0.10}50%{opacity:0.24}} body.deep-work-active .ring-wrap #ring-aura{opacity:0.16;animation:ring-breathe 4.5s ease-in-out infinite} /* ── CONTROLS ── */ .controls{display:flex;align-items:center;gap:12px;margin-bottom:24px;transition:opacity 0.65s cubic-bezier(0.4,0,0.2,1),transform 0.65s cubic-bezier(0.4,0,0.2,1)} body.deep-work-active .controls{opacity:0;pointer-events:none;transform:translateY(8px)} .ctrl-btn{width:46px;height:46px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s;font-size:16px} .ctrl-btn:hover{background:var(--surface-hover);transform:scale(1.07)} #play-btn{width:60px;height:60px;font-size:19px;background:color-mix(in srgb, var(--t-accent) 10%, transparent);border-color:color-mix(in srgb, var(--t-accent) 30%, transparent);color:var(--accent)} #play-btn:hover{background:color-mix(in srgb, var(--t-accent) 20%, transparent)} #play-btn.running{color:var(--accent2);border-color:color-mix(in srgb, var(--t-accent2) 40%, transparent);background:color-mix(in srgb, var(--t-accent2) 12%, transparent)} body.deep-work-active #play-btn{background:rgba(160,128,240,0.12);border-color:rgba(160,128,240,0.35);color:var(--ring-deep)} #pip-btn.active{color:var(--accent2);border-color:color-mix(in srgb, var(--t-accent2) 40%, transparent);background:color-mix(in srgb, var(--t-accent2) 12%, transparent)} #pip-btn:disabled{opacity:.35;cursor:default;pointer-events:none} #deep-mode-btn.active{color:var(--ring-deep);border-color:rgba(160,128,240,0.4);background:rgba(160,128,240,0.12)} /* ── FOCUS MSG & DOTS ── */ #focus-msg{font-family:'Cormorant Garamond',serif;font-size:1rem;font-style:italic;color:var(--muted);letter-spacing:0.5px;min-height:24px;transition:opacity 0.8s;text-align:center} body.deep-work-active #focus-msg,body.deep-mode #focus-msg{opacity:0} .session-dots{display:flex;gap:7px;margin-top:20px;transition:opacity 0.65s cubic-bezier(0.4,0,0.2,1),transform 0.65s cubic-bezier(0.4,0,0.2,1)} body.deep-work-active .session-dots,.session-dots.fade-out{opacity:0;transform:translateY(6px)} .dot{width:7px;height:7px;border-radius:50%;background:var(--border);transition:all 0.5s} .dot.done{background:var(--accent);box-shadow:0 0 6px var(--accent)} /* ── DEEP FOCUS BUTTON — works for ALL modes ── */ #deep-work-btn{ margin-top:24px; font-size:0.66rem;letter-spacing:2.5px;text-transform:uppercase; color:rgba(160,128,240,0.75); background:rgba(160,128,240,0.06); border:1px solid rgba(160,128,240,0.22); border-radius:40px;padding:10px 22px;cursor:pointer; transition:opacity 0.55s cubic-bezier(0.4,0,0.2,1), transform 0.55s cubic-bezier(0.4,0,0.2,1), background 0.3s,border-color 0.3s,color 0.3s; display:flex;align-items:center;gap:8px;font-family:'DM Sans',sans-serif } #deep-work-btn:hover{background:rgba(160,128,240,0.14);border-color:rgba(160,128,240,0.45);color:rgba(160,128,240,1)} #deep-work-btn.hidden{opacity:0;pointer-events:none;transform:translateY(10px)} body.deep-work-active #deep-work-btn{opacity:0;pointer-events:none} #deep-work-status{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity 0.7s cubic-bezier(0.4,0,0.2,1),transform 0.7s cubic-bezier(0.4,0,0.2,1)} #deep-work-status.visible{opacity:1;pointer-events:all;transform:translateY(0)} .dw-badge{font-size:0.62rem;letter-spacing:3px;text-transform:uppercase;color:var(--ring-deep);background:rgba(160,128,240,0.08);border:1px solid rgba(160,128,240,0.28);border-radius:40px;padding:5px 16px;display:flex;align-items:center;gap:7px} #dw-exit-btn{font-size:0.62rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted2);background:transparent;border:1px solid var(--border);border-radius:40px;padding:6px 16px;cursor:pointer;transition:all 0.3s;font-family:'DM Sans',sans-serif;position:relative;z-index:10} #dw-exit-btn:hover{color:var(--muted);border-color:var(--border-warm)} /* ── SIDE PANEL ── */ .panel-section{display:flex;flex-direction:column;gap:10px} .panel-heading{font-size:0.58rem;letter-spacing:3.5px;text-transform:uppercase;color:var(--muted2)} .glass-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);backdrop-filter:blur(12px);overflow:hidden;transition:border-color 0.3s} .glass-card:hover{border-color:var(--border-warm)} .duration-card{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;gap:12px} .duration-val{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:300;color:var(--accent);line-height:1} .duration-lbl{font-size:0.58rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:3px} .duration-mode{font-size:0.64rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted2);text-align:right} .duration-mode-val{color:var(--accent-dim);font-size:0.78rem;letter-spacing:0;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400} .streak-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 16px} .streak-mini-item{text-align:center} .streak-mini-val{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:300;color:var(--accent);line-height:1} .streak-mini-lbl{font-size:0.55rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2);margin-top:3px} /* Music card tab row (Lofi Audio vs YouTube/Spotify, Web/PC only) — own class instead of reusing .bg-chip inline, so the two tabs get predictable equal widths, readable padding, and a safe ellipsis fallback instead of overflowing/wrapping at the card's width. */ .music-tab-row{display:flex;gap:6px;padding:10px 13px 0} .music-tab-btn{flex:1;min-width:0;padding:7px 8px;border-radius:20px;cursor:pointer;background:var(--surface);border:1px solid var(--border);color:var(--muted);font-size:0.62rem;font-weight:500;letter-spacing:0.4px;text-transform:uppercase;font-family:'DM Sans',sans-serif;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all 0.3s} .music-tab-btn:hover{background:var(--surface-hover);color:var(--text)} .music-tab-btn.active{background:color-mix(in srgb, var(--t-accent) 10%, transparent);border-color:color-mix(in srgb, var(--t-accent) 35%, transparent);color:var(--accent)} .music-url-row{display:flex;align-items:center;padding:10px 13px;border-bottom:1px solid var(--border);gap:8px} .music-url-row input{flex:1;min-width:0;background:transparent;border:none;outline:none;font-family:'DM Sans',sans-serif;font-size:0.7rem;font-weight:300;color:var(--muted);caret-color:var(--accent)} .music-url-row input::placeholder{color:var(--muted2)} .music-url-row input:focus{color:var(--text)} .yt-load-btn{flex-shrink:0;font-size:0.6rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent-dim);background:var(--accent-glow2);border:1px solid color-mix(in srgb, var(--t-accent) 22%, transparent);border-radius:20px;padding:4px 10px;cursor:pointer;transition:all 0.3s;font-family:'DM Sans',sans-serif} .yt-load-btn:hover{background:var(--accent-glow);color:var(--accent)} .music-track{display:flex;align-items:center;gap:10px;padding:12px 13px 6px} .track-art{width:38px;height:38px;border-radius:9px;flex-shrink:0;background:linear-gradient(135deg,var(--t-bg2),var(--t-bg));border:1px solid var(--border);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center} .track-art img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity .5s} .track-art img.loaded{opacity:1} .track-art .art-fb{font-size:15px;position:relative;z-index:1;transition:opacity .4s} .track-art.has-thumb .art-fb{opacity:0} .track-art.playing::after{content:'';position:absolute;inset:0;background:color-mix(in srgb, var(--t-accent) 12%, transparent);animation:pulse-art 2s ease-in-out infinite;z-index:2} @keyframes pulse-art{0%,100%{opacity:.3}50%{opacity:1}} .track-info{flex:1;min-width:0} .track-name{font-size:0.82rem;color:var(--text);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s} .track-name.fade{opacity:.2} .track-artist{font-size:0.66rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #music-play-btn,#spotify-play-btn{width:30px;height:30px;border-radius:50%;flex-shrink:0;background:color-mix(in srgb, var(--t-accent) 8%, transparent);border:1px solid color-mix(in srgb, var(--t-accent) 22%, transparent);color:var(--accent);cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;transition:all .3s} #music-play-btn:hover,#spotify-play-btn:hover{background:color-mix(in srgb, var(--t-accent) 18%, transparent)} #music-play-btn:disabled,#spotify-play-btn:disabled{opacity:.3;cursor:default;pointer-events:none} .music-nav-row{display:flex;align-items:center;justify-content:center;gap:6px;padding:4px 13px} .music-nav-btn{width:24px;height:24px;border-radius:50%;background:transparent;border:1px solid var(--border);color:var(--muted);cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;transition:all .25s} .music-nav-btn:hover{background:var(--surface-hover);color:var(--text)} .music-nav-btn:disabled{opacity:.2;pointer-events:none} .yt-progress-wrap{padding:2px 13px 5px} .yt-progress-bar{width:100%;height:2px;border-radius:2px;background:var(--border);cursor:pointer} .yt-progress-bar:hover{height:3px} .yt-progress-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));width:0%;transition:width 1s linear;pointer-events:none} .yt-status-row{display:flex;align-items:center;gap:6px;padding:2px 13px 8px} .yt-status-dot{width:5px;height:5px;border-radius:50%;background:var(--border);flex-shrink:0;transition:background .4s} .yt-status-dot.live{background:#78c89a;box-shadow:0 0 4px #78c89a;animation:dot-blink 2s ease-in-out infinite} .yt-status-dot.error{background:#e08060} @keyframes dot-blink{0%,100%{opacity:1}50%{opacity:.35}} .yt-status-txt{font-size:0.6rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .vol-row{display:flex;align-items:center;gap:8px;padding:2px 13px 12px} .vol-icon{font-size:11px;color:var(--muted)} input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:2px;border-radius:2px;cursor:pointer;background:linear-gradient(to right,var(--accent) var(--pct,70%),var(--border) var(--pct,70%))} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 5px var(--accent-dim)} .amb-list{display:flex;flex-direction:column;gap:5px;padding:10px 13px 13px} .amb-item{display:flex;align-items:center;gap:9px;background:color-mix(in srgb, var(--t-text) 2%, transparent);border:1px solid transparent;border-radius:10px;padding:7px 10px;cursor:pointer;transition:all .3s} .amb-item:hover{background:color-mix(in srgb, var(--t-text) 5%, transparent);border-color:var(--border)} .amb-item.playing{background:rgba(120,200,154,.07);border-color:rgba(120,200,154,.25)} .amb-icon{font-size:14px;flex-shrink:0} .amb-name{flex:1;font-size:0.74rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .3s} .amb-item.playing .amb-name{color:var(--ring-break)} .amb-stop{flex-shrink:0;font-size:9px;color:var(--muted2);opacity:.6} .amb-vol-row{display:flex;align-items:center;gap:8px;padding:0 13px 12px} .amb-vol-lbl{font-size:0.58rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2);flex-shrink:0} .amb-vol-row input[type=range]{background:linear-gradient(to right,var(--ring-break) var(--apct,40%),var(--border) var(--apct,40%))} .amb-vol-row input[type=range]::-webkit-slider-thumb{background:var(--ring-break);box-shadow:0 0 5px rgba(120,200,154,.5)} .bg-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 13px 13px} .bg-chip{font-size:0.6rem;letter-spacing:1px;text-transform:uppercase;padding:5px 11px;border-radius:20px;cursor:pointer;background:var(--surface);border:1px solid var(--border);color:var(--muted);transition:all .3s;white-space:nowrap;font-family:'DM Sans',sans-serif} .bg-chip:hover{background:var(--surface-hover);color:var(--text)} .bg-chip.active{background:color-mix(in srgb, var(--t-accent) 10%, transparent);border-color:color-mix(in srgb, var(--t-accent) 35%, transparent);color:var(--accent)} .bg-chip.none-chip.active{background:color-mix(in srgb, var(--t-text) 5%, transparent);border-color:var(--border-warm);color:var(--text)} .bg-chip.disabled{opacity:.35;pointer-events:none} /* ── WORLD SELECTOR ── */ .world-strip{display:flex;gap:8px;padding:12px 13px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;scrollbar-color:var(--border) transparent} .world-thumb{position:relative;flex:0 0 74px;height:60px;border-radius:11px;border:1px solid var(--border);background:color-mix(in srgb, var(--t-text) 3%, transparent);cursor:pointer;overflow:hidden;display:flex;align-items:flex-end;transition:all .3s;padding:0;font-family:'DM Sans',sans-serif} .world-thumb-bg{position:absolute;inset:0;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb, var(--t-text) 5%, transparent),transparent)} .world-thumb-bg img{width:100%;height:100%;object-fit:cover;opacity:.65} .world-thumb-label{position:relative;z-index:1;font-size:0.54rem;letter-spacing:.3px;color:var(--text);background:color-mix(in srgb, var(--t-bg) 55%, transparent);width:100%;padding:3px 4px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .world-thumb:hover{border-color:var(--border-warm)} .world-thumb.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-glow)} .world-thumb.locked{opacity:.5;filter:grayscale(.5)} .world-lock{position:absolute;top:3px;right:4px;font-size:9px;z-index:2} .world-info{padding:0 13px 13px;display:flex;flex-direction:column;gap:6px} .world-info-title{font-family:'Cormorant Garamond',serif;font-size:.9rem;color:var(--accent2);letter-spacing:.4px} .world-info-desc{font-size:.65rem;line-height:1.5;font-style:italic;color:var(--muted)} .world-ambient-suggest{align-self:flex-start;font-size:.56rem;letter-spacing:1px;text-transform:uppercase;color:var(--accent-dim);background:var(--accent-glow2);border:1px solid color-mix(in srgb, var(--t-accent) 20%, transparent);border-radius:16px;padding:4px 10px;cursor:pointer;font-family:'DM Sans',sans-serif} /* ── OPEN SKY BACKGROUND FOLDERS (ambient / landscape stills) ── */ .os-folder-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-family:'DM Sans',sans-serif;font-size:.68rem;letter-spacing:.4px;cursor:pointer;transition:all .25s;margin-bottom:6px} .os-folder-btn:hover{border-color:var(--border-warm);color:var(--text);background:var(--surface-hover)} .os-folder-btn.open{color:var(--accent2);border-color:var(--border-warm)} .os-folder-btn .os-chevron{font-size:.7rem;transition:transform .25s;flex-shrink:0} .os-folder-btn.open .os-chevron{transform:rotate(90deg)} .os-folder-grid{display:none;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:7px;padding:2px 2px 12px} .os-folder-grid.open{display:grid} .os-thumb{position:relative;aspect-ratio:1;border-radius:9px;overflow:hidden;border:1px solid var(--border);background:var(--surface);cursor:pointer;padding:0;transition:border-color .25s,transform .2s} .os-thumb img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none} .os-thumb:hover{transform:translateY(-1px);border-color:var(--border-warm)} .os-thumb.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)} /* ── WEATHER ── */ #weather-intensity-row{display:flex;align-items:center;gap:8px;padding:0 13px 13px} #weather-intensity-row span{font-size:.56rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2);flex-shrink:0} /* ── COMPANION ── */ .companion-toggle-btn{font-size:.6rem;letter-spacing:1.5px;text-transform:uppercase;padding:6px 12px;border-radius:20px;cursor:pointer;background:var(--surface);border:1px solid var(--border);color:var(--muted);transition:all .3s;font-family:'DM Sans',sans-serif;margin:10px 13px 8px;display:inline-block} .companion-toggle-btn.active{background:rgba(120,200,154,.10);border-color:rgba(120,200,154,.32);color:var(--ring-break)} .companion-chips-row{display:flex;flex-wrap:wrap;gap:6px;padding:0 13px 13px} /* ── ENVIRONMENT SETTINGS COLLAPSE TOGGLE ── */ .env-settings-header{display:flex;align-items:center;justify-content:space-between;font-size:0.58rem;letter-spacing:3.5px;text-transform:uppercase;color:var(--muted2);margin-top:4px} #env-settings-toggle{font-size:0.58rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:20px;padding:3px 11px;cursor:pointer;transition:all .3s;font-family:'DM Sans',sans-serif} #env-settings-toggle:hover{color:var(--text);border-color:var(--border-warm);background:var(--surface-hover)} #env-settings-group{display:flex;flex-direction:column;gap:20px;overflow:hidden;max-height:4000px;transition:max-height .4s ease,opacity .3s ease} #env-settings-group.collapsed{max-height:0;opacity:0;pointer-events:none} #layout-btn{width:32px;height:32px;border-radius:8px;background:var(--surface);border:1px solid var(--border);color:var(--muted);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .3s;position:relative} #layout-btn:hover{background:var(--surface-hover);color:var(--text)} body.layout-bottom .workspace{flex-direction:column} body.layout-bottom #main-grid{grid-template-columns:1fr} body.layout-bottom .center-col{border-right:none;border-bottom:1px solid var(--border)} body.layout-bottom .side-panel{display:none} #bottom-panel{display:none;flex-direction:row;border-top:1px solid color-mix(in srgb, var(--t-accent2) 18%, transparent);background:transparent;backdrop-filter:blur(5px) saturate(180%);-webkit-backdrop-filter:blur(5px) saturate(180%);height:290px;flex-shrink:0;overflow:hidden;box-shadow:inset 0 1px 0 color-mix(in srgb, var(--t-text) 6%, transparent)} body.layout-bottom #bottom-panel{display:flex} body.deep-mode #bottom-panel,body.deep-work-active #bottom-panel{display:none} .bp-col{flex:1;min-width:0;padding:14px 16px;border-right:1px solid color-mix(in srgb, var(--t-accent2) 7%, transparent);display:flex;flex-direction:column;gap:8px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent} .bp-col:last-child{border-right:none} .bp-col-head{font-size:0.54rem;letter-spacing:3px;text-transform:uppercase;color:var(--muted2);flex-shrink:0;margin-bottom:1px} body.layout-hidden #main-grid{grid-template-columns:1fr} body.layout-hidden .side-panel{display:none} /* ── FLOAT LAYOUT (layout-float) — aesthetic floating cards ── */ body.layout-float #main-grid{grid-template-columns:1fr} body.layout-float .side-panel{display:none} #float-left,#float-right{ position:fixed;top:50%;transform:translateY(-50%); z-index:15;display:none;flex-direction:column;gap:10px; width:280px;max-height:calc(100vh - 150px); overflow-y:auto;overflow-x:hidden; scrollbar-width:thin;scrollbar-color:var(--border) transparent; padding:2px 3px; } body.layout-float #float-left,body.layout-float #float-right{display:flex} body.deep-mode #float-left,body.deep-mode #float-right, body.deep-work-active #float-left,body.deep-work-active #float-right{display:none!important} #float-left{left:12px} #float-right{right:12px} .float-card{ background:color-mix(in srgb, var(--t-bg) 60%, transparent); border:1px solid color-mix(in srgb, var(--t-accent2) 16%, transparent); border-radius:14px; backdrop-filter:blur(52px) saturate(180%); -webkit-backdrop-filter:blur(52px) saturate(180%); transition:border-color 0.3s,box-shadow 0.3s,background 0.3s; box-shadow:0 8px 32px rgba(0,0,0,0.38),inset 0 1px 0 color-mix(in srgb, var(--t-text) 7%, transparent); } .float-card:hover{border-color:color-mix(in srgb, var(--t-accent2) 30%, transparent);background:color-mix(in srgb, var(--t-bg) 50%, transparent);box-shadow:0 14px 44px rgba(0,0,0,0.48),inset 0 1px 0 color-mix(in srgb, var(--t-text) 11%, transparent)} .float-card-head{font-size:0.52rem;letter-spacing:3.5px;text-transform:uppercase;color:var(--muted2);padding:11px 13px 5px} .float-world-strip{display:flex;gap:6px;padding:6px 10px 16px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;scrollbar-color:var(--border) transparent} .float-world-strip::-webkit-scrollbar{height:3px} .float-world-strip::-webkit-scrollbar-track{background:transparent} .float-world-strip::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px} .float-world-strip .world-thumb{flex:0 0 70px;min-width:70px;height:60px} .float-world-strip .world-thumb-label{font-size:0.5rem;padding:3px 3px} .float-amb-item{display:flex;align-items:center;gap:8px;padding:5px 12px;cursor:pointer;transition:background .2s,color .2s;border-radius:0} .float-amb-item:hover{background:color-mix(in srgb, var(--t-text) 5%, transparent)} .float-amb-item.playing{background:rgba(120,200,154,0.08)} .float-amb-item .float-amb-icon{font-size:13px;flex-shrink:0} .float-amb-item .float-amb-name{font-size:0.7rem;transition:color .2s} .float-amb-item.playing .float-amb-name{color:var(--ring-break)} .float-amb-item .float-amb-stop{margin-left:auto;font-size:8px;color:var(--muted2);opacity:.7} /* ── FLOATING EXIT BUTTON (light deep mode only) ── */ #deep-exit-btn{ position:fixed;bottom:28px;right:28px; font-size:0.68rem;letter-spacing:2px;text-transform:uppercase; color:var(--muted);background:color-mix(in srgb, var(--t-bg) 75%, transparent); border:1px solid var(--border);border-radius:40px;padding:10px 22px; cursor:pointer;z-index:200; transition:all .45s;backdrop-filter:blur(16px); opacity:0;pointer-events:none;transform:translateY(10px); font-family:'DM Sans',sans-serif } #deep-exit-btn.visible{opacity:1;pointer-events:all;transform:translateY(0)} #deep-exit-btn:hover{color:var(--text);background:color-mix(in srgb, var(--t-bg) 92%, transparent)} body.deep-work-active #deep-exit-btn{opacity:0!important;pointer-events:none!important} /* ── NOTIFY ── */ #notify{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(16px);background:color-mix(in srgb, var(--t-bg) 94%, transparent);border:1px solid var(--border);backdrop-filter:blur(24px);border-radius:40px;padding:10px 22px;color:var(--text);z-index:300;opacity:0;transition:all .5s;pointer-events:none;white-space:nowrap;font-family:'Cormorant Garamond',serif;font-size:0.98rem;letter-spacing:1px} #notify.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ── ENVIRONMENT DRAWER (Music / Ambient / World / Weather) ── Keeps the main screen minimal (just the timer): the .side-panel content — already fully populated by the existing JS regardless of layout mode — is repurposed here as a slide-in drawer opened via the gear button next to the timer controls, instead of a permanently-docked column. */ #env-drawer-backdrop{position:fixed;inset:0;z-index:8999;background:rgba(4,2,1,0.55);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .35s ease} body.env-drawer-open #env-drawer-backdrop{opacity:1;pointer-events:auto} .side-panel{display:flex!important;position:fixed;top:0;right:0;bottom:0;left:auto;width:min(380px,92vw);z-index:9000;background:var(--t-bg2,#100d16);box-shadow:-24px 0 60px rgba(0,0,0,0.5);transform:translateX(100%);opacity:0;pointer-events:none;transition:transform .4s cubic-bezier(0.4,0,0.2,1),opacity .3s ease} body.env-drawer-open .side-panel{transform:translateX(0);opacity:1;pointer-events:auto} .env-drawer-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--border);flex-shrink:0} .env-drawer-head span{font-size:0.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted)} #env-drawer-close{width:30px;height:30px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0} #env-drawer-close:hover{background:var(--surface-hover);transform:scale(1.07)} #env-panel-btn{font-size:15px} @media(max-width:480px){.side-panel{width:100vw}} /* Gear button is a mobile-only affordance — on desktop, Music/Ambient/ World/Weather stay reachable the original way, via #layout-btn cycling to the bottom bar / float layout. */ @media(min-width:781px){#env-panel-btn{display:none}} /* ── First-run hint: "tap the gear for settings" ── */ #env-hint-card{position:fixed;z-index:9600;width:250px;max-width:calc(100vw - 20px);background:rgba(10,11,16,0.92);backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);border:1px solid var(--t-border-strong,rgba(170,180,220,0.22));border-radius:14px;padding:12px 14px 10px;box-shadow:0 12px 40px rgba(0,0,0,0.5);font-family:'DM Sans',sans-serif;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .4s ease,transform .4s ease} #env-hint-card.show{opacity:1;transform:translateY(0);pointer-events:auto} #env-hint-arrow{position:absolute;bottom:-6px;width:12px;height:12px;background:rgba(10,11,16,0.92);border-right:1px solid var(--t-border-strong,rgba(170,180,220,0.22));border-bottom:1px solid var(--t-border-strong,rgba(170,180,220,0.22));transform:rotate(45deg)} /* When there's no room above the target (e.g. #layout-btn sits right at the top of the page), the card flips to render below it instead — the arrow flips to point up accordingly. */ #env-hint-card.flip-below #env-hint-arrow{bottom:auto;top:-6px;border-right:none;border-bottom:none;border-left:1px solid var(--t-border-strong,rgba(170,180,220,0.22));border-top:1px solid var(--t-border-strong,rgba(170,180,220,0.22))} .env-hint-body{display:flex;align-items:flex-start;gap:8px} .env-hint-icon{font-size:15px;line-height:1.3;flex-shrink:0} .env-hint-text{font-size:12px;line-height:1.45;color:var(--t-text,#e8eaf5)} #env-hint-dismiss{display:block;margin:10px 0 0 auto;font-size:11px;letter-spacing:.3px;padding:6px 13px;border-radius:40px;border:1px solid var(--t-border,rgba(170,180,220,0.11));background:transparent;color:var(--t-muted,rgba(232,234,245,0.6));cursor:pointer;font-family:inherit} #env-hint-dismiss:hover{color:var(--t-text,#e8eaf5);border-color:var(--t-border-strong,rgba(170,180,220,0.22))} @keyframes dw-pulse-bg{0%,100%{background:#0b0905}50%{background:#080512}} body.deep-work-active{animation:dw-pulse-bg 10s ease-in-out infinite} body.deep-mode{background:#070504} .discord-music-notice{padding:10px 13px 12px;font-size:0.65rem;color:var(--muted2);letter-spacing:1px;font-style:italic;text-align:center} /* Ensure float cards never clip content at bottom */ .float-card{overflow:visible} @media(max-width:780px){ #main-grid{grid-template-columns:1fr!important} .center-col{border-right:none;border-bottom:1px solid var(--border)} .side-panel{width:100%;border-left:none} nav{padding:12px 16px} .nav-center{display:none} .ring-wrap{width:230px;height:230px} body.deep-work-active .ring-wrap{width:290px;height:290px} #timer-display{font-size:3.5rem} body.deep-work-active #timer-display{font-size:4.5rem} #stats-bar{padding:8px 16px;gap:12px} .world-thumb{flex:0 0 62px;height:50px} .companion-sprite{width:62px;height:62px} #float-left,#float-right{display:none!important} #bottom-panel{display:none!important} } /* ==== originally index.html lines 601-922 ==== */ #view-hub{--bg-deep:var(--t-bg);--bg-mid:var(--t-bg2);--bg-card:var(--t-surface);--bg-card-hover:var(--t-surface-hover);--border:var(--t-border);--border-glow:var(--t-border-strong);--accent:var(--t-accent);--accent-soft:color-mix(in srgb,var(--t-accent) 18%,transparent);--accent-dim:color-mix(in srgb,var(--t-accent) 8%,transparent);--cream:var(--t-text);--cream-dim:var(--t-muted);--cream-faint:var(--t-muted2);--rose:#c98fa0;--teal:#6fb8c0;--lavender:#a89cd8;--green:#7fbf98;--text-main:var(--t-text);--text-dim:var(--t-muted);--text-faint:var(--t-muted2);--shadow-warm:0 8px 40px color-mix(in srgb,var(--t-accent) 10%,transparent);--shadow-card:0 2px 24px rgba(0,0,0,0.40);--radius:20px;--radius-sm:11px;--transition:0.28s cubic-bezier(0.4,0,0.2,1);--sidebar-bg:color-mix(in srgb,var(--t-bg) 85%,black);--sidebar-border:var(--t-border);--bg-grad-1:color-mix(in srgb,var(--t-accent) 16%,transparent);--bg-grad-2:color-mix(in srgb,var(--t-accent2) 10%,transparent);--bg-grad-3:color-mix(in srgb,var(--t-bg) 60%,black);--bg-base:var(--t-bg);--particle-color:color-mix(in srgb,var(--t-accent) 55%,transparent)} #view-hub *{margin:0;padding:0;box-sizing:border-box} #view-hub html{scroll-behavior:smooth} #view-hub{position:relative;font-family:"DM Sans",sans-serif;background:var(--bg-deep);color:var(--text-main);min-height:100vh;transition:background 1.2s ease,color 1.2s ease;-webkit-tap-highlight-color:transparent;cursor:auto} #view-hub #bg-layer{ position:fixed;inset:0;z-index:0; background:radial-gradient(ellipse 80% 60% at 20% 10%,var(--bg-grad-1) 0%,transparent 60%), radial-gradient(ellipse 60% 50% at 80% 80%,var(--bg-grad-2) 0%,transparent 60%), radial-gradient(ellipse 50% 40% at 50% 50%,var(--bg-grad-3) 0%,transparent 70%), var(--bg-base); pointer-events:none !important; touch-action:none; user-select:none; transition:background 1.2s ease} #view-hub #particles-wrap{ position:fixed;inset:0;z-index:1; pointer-events:none !important; touch-action:none; user-select:none} #view-hub .particle{ position:absolute; /* absolute inside particles-wrap, NOT fixed */ border-radius:50%; background:radial-gradient(circle,var(--particle-color) 0%,transparent 70%); pointer-events:none !important; touch-action:none; animation:floatP linear infinite} @keyframes floatP{0%{transform:translateY(110vh) scale(0.5);opacity:0}10%{opacity:1}90%{opacity:0.6}100%{transform:translateY(-10vh) translateX(var(--drift)) scale(1);opacity:0}} #view-hub .app{position:relative;z-index:2;display:grid;grid-template-columns:72px 1fr;min-height:100vh} #view-hub .sidebar{position:fixed;left:0;top:0;bottom:0;width:72px;z-index:100;display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 0;background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);backdrop-filter:blur(24px)} #view-hub .logo-mark{width:38px;height:38px;border-radius:11px;background:transparent;display:flex;align-items:center;justify-content:center;font-size:18px;color:white;font-weight:700;margin-bottom:18px;cursor:pointer;flex-shrink:0;transition:var(--transition);-webkit-tap-highlight-color:transparent;overflow:hidden} #view-hub .logo-mark:hover{transform:scale(1.08)} /* Bug fix — the logo image (focus/icon-inside.png) had no size rule of its own, so it rendered at its natural/intrinsic pixel size instead of fitting the 38x38 badge — massively oversized, spilling out of (and hiding) the rounded gradient mark around it. Scaled to fill the badge while keeping its own aspect ratio; overflow:hidden on .logo-mark above is a safety net in case a future source image isn't square. Follow-up bug fix — .logo-mark's own `background: linear-gradient` above was leftover from before this was an image at all (it used to hold a plain text/emoji mark, with the gradient AS the badge). Now that the image itself is already a complete rounded-gradient badge with the character baked in, that div-level gradient sat behind a TRANSPARENT PNG and showed through at every edge/antialiased pixel the image didn't fully cover — a mismatched second gradient fringing the real one, which is what read as "blurry." Set to transparent so the image alone is what's visible. */ #view-hub .logo-mark img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none} #view-hub .nav-btn{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);border:1px solid transparent;position:relative;color:var(--text-faint);background:transparent;-webkit-tap-highlight-color:transparent;touch-action:manipulation} #view-hub .nav-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none} #view-hub .nav-btn:hover, #view-hub .nav-btn.active{background:var(--accent-soft);border-color:var(--border-glow);color:var(--accent)} #view-hub .nav-btn .tooltip{position:absolute;left:58px;top:50%;transform:translateY(-50%);background:rgba(10,8,20,0.96);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:9px;padding:5px 13px;font-size:11.5px;white-space:nowrap;color:var(--cream-dim);opacity:0;pointer-events:none;transition:opacity 0.2s;z-index:200} #view-hub .nav-btn:hover .tooltip{opacity:1} #view-hub .sidebar-spacer{flex:1} #view-hub .theme-toggle-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--border);background:var(--bg-card);color:var(--text-dim);transition:var(--transition);margin-bottom:8px;-webkit-tap-highlight-color:transparent;touch-action:manipulation} #view-hub .theme-toggle-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none} #view-hub .sidebar-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--lavender),var(--rose));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:white;border:2px solid var(--border-glow);cursor:pointer;transition:var(--transition)} #view-hub .main{margin-left:72px;padding:28px 36px 60px;max-width:1280px;position:relative;z-index:10} #view-hub .topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:36px} #view-hub .topbar-left h1{font-family:"Playfair Display",serif;font-size:25px;font-weight:500;color:var(--cream);line-height:1.2} #view-hub .topbar-left p{font-size:12.5px;color:var(--text-dim);margin-top:3px;font-style:italic} #view-hub .topbar-right{display:flex;align-items:center;gap:10px} #view-hub .pill-btn{display:flex;align-items:center;gap:7px;padding:7px 15px;border-radius:50px;border:1px solid var(--border);background:var(--bg-card);cursor:pointer;font-size:12px;color:var(--text-dim);transition:var(--transition);font-family:"DM Sans",sans-serif;-webkit-tap-highlight-color:transparent;touch-action:manipulation} #view-hub .pill-btn:hover{border-color:var(--border-glow);color:var(--accent);background:var(--accent-dim)} #view-hub .ts-clock-style-btn.active{border-color:var(--border-glow);color:var(--accent);background:var(--accent-dim)} #view-hub .pill-btn .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse-dot 2s ease-in-out infinite;pointer-events:none} .theme-btn.active{border-color:var(--accent);color:var(--accent)} @keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(0.8)}} #view-hub .focus-link-btn{padding:8px 18px;border-radius:50px;background:linear-gradient(135deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 70%,#000) 100%);color:white;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:var(--transition);font-family:"DM Sans",sans-serif;-webkit-tap-highlight-color:transparent;touch-action:manipulation} #view-hub .focus-link-btn:hover{transform:translateY(-1px)} #view-hub .section-view{display:none;animation:fadeUp 0.38s cubic-bezier(0.4,0,0.2,1) both} #view-hub .section-view.active{display:block} @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} #view-hub .view-header{display:flex;align-items:center;gap:14px;margin-bottom:28px} #view-hub .view-header h2{font-family:"Playfair Display",serif;font-size:22px;font-weight:400;color:var(--cream-dim)} #view-hub .view-header-line{flex:1;height:1px;background:var(--border)} #view-hub .view-subtitle{font-style:italic;font-size:13px;color:var(--text-faint)} #view-hub .grid{display:grid;gap:20px} #view-hub .grid-2{grid-template-columns:repeat(2,1fr)} #view-hub .grid-3{grid-template-columns:repeat(3,1fr)} #view-hub .col-span-2{grid-column:span 2} #view-hub .card{background:var(--bg-card);backdrop-filter:blur(24px);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:background 0.3s,border-color 0.3s,box-shadow 0.3s,transform 0.3s;position:relative;overflow:hidden;box-shadow:var(--shadow-card)} #view-hub .card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--border-glow),transparent);pointer-events:none} #view-hub .card:hover{border-color:var(--border-glow);background:var(--bg-card-hover);transform:translateY(-2px)} #view-hub .card-title{font-size:10.5px;letter-spacing:0.13em;text-transform:uppercase;color:var(--text-faint);margin-bottom:18px;font-weight:500;display:flex;align-items:center;gap:8px} #view-hub .card-title svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0.7;pointer-events:none} /* Settings → What's New (js/nsl-changelog.js) */ #view-hub .changelog-entry{border-bottom:1px solid var(--border);padding-bottom:12px} #view-hub .changelog-entry:last-child{border-bottom:none;padding-bottom:0} #view-hub .changelog-entry-head{display:flex;align-items:baseline;gap:8px;margin-bottom:6px} #view-hub .changelog-version{font-weight:700;font-size:13px;color:var(--accent)} #view-hub .changelog-date{font-size:11px;color:var(--text-faint)} #view-hub .changelog-items{margin:0;padding-left:18px;font-size:12.5px;color:var(--muted);line-height:1.6} #view-hub .streak-hero{display:flex;align-items:center;gap:24px;flex-wrap:wrap} #view-hub .streak-flame{position:relative;display:flex;align-items:center;justify-content:center;width:86px;height:86px;flex-shrink:0;pointer-events:none} #view-hub .streak-flame-ring{position:absolute;inset:0;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 40%,transparent);animation:ring-pulse 2.5s ease-in-out infinite;pointer-events:none} @keyframes ring-pulse{0%,100%{transform:scale(1);opacity:0.5}50%{transform:scale(1.12);opacity:1}} #view-hub .streak-inner-glow{position:absolute;inset:10px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 30%,transparent),transparent);animation:flame-pulse 2s ease-in-out infinite;pointer-events:none} @keyframes flame-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}} #view-hub .streak-num{font-family:"Playfair Display",serif;font-size:36px;font-weight:500;color:var(--accent);position:relative;z-index:1;animation:num-breathe 4s ease-in-out infinite;pointer-events:none} @keyframes num-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}} #view-hub .streak-label-sm{font-size:10px;color:var(--text-faint);text-align:center;margin-top:3px;pointer-events:none} #view-hub .streak-numbers{flex:1} #view-hub .streak-big{font-family:"Playfair Display",serif;font-size:54px;font-weight:400;line-height:1;color:var(--accent)} #view-hub .streak-label{font-size:12px;color:var(--text-dim);margin-top:4px} #view-hub .streak-stats{display:flex;gap:22px;flex-wrap:wrap} #view-hub .streak-stat{text-align:center} #view-hub .streak-stat-val{font-size:22px;font-weight:500;color:var(--cream);font-family:"Playfair Display",serif} #view-hub .streak-stat-lbl{font-size:9px;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.1em;margin-top:2px} #view-hub .week-dots{display:flex;gap:7px;margin-top:18px;flex-wrap:wrap} #view-hub .week-dot{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text-faint);flex-direction:column;gap:2px;border:1px solid var(--border);background:transparent;transition:var(--transition);pointer-events:none} #view-hub .week-dot.done{background:var(--accent-soft);border-color:var(--border-glow);color:var(--accent)} #view-hub .week-dot.today{background:linear-gradient(135deg,var(--accent-soft),var(--accent-dim));border-color:var(--accent);color:var(--cream)} #view-hub .week-dot .wd{font-size:8px;opacity:0.65} #view-hub .xp-bar-track{height:8px;background:rgba(255,255,255,0.06);border-radius:8px;overflow:hidden;margin-top:12px;pointer-events:none} #view-hub .xp-bar-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#fff));transition:width 1.4s cubic-bezier(0.4,0,0.2,1);pointer-events:none} #view-hub .xp-row{display:flex;justify-content:space-between;align-items:center;margin-top:6px} #view-hub .xp-label{font-size:11px;color:var(--text-faint)} #view-hub .xp-val{font-size:11px;color:var(--accent);font-weight:500} #view-hub .stat-val{font-family:"Playfair Display",serif;font-size:36px;font-weight:400;color:var(--cream);line-height:1;margin-bottom:4px} #view-hub .stat-unit{font-size:13px;color:var(--text-dim)} #view-hub .stat-change{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:3px 8px;border-radius:50px;margin-top:8px} #view-hub .stat-change.up{background:rgba(143,188,143,0.15);color:var(--green)} #view-hub .stat-change.neutral{background:rgba(200,200,200,0.10);color:var(--text-dim)} #view-hub .mini-bar-wrap{margin-top:14px;display:flex;gap:3px;align-items:flex-end;height:30px;pointer-events:none} #view-hub .mini-bar{flex:1;border-radius:3px 3px 0 0;background:var(--accent-dim);pointer-events:none} #view-hub .chart-wrap{position:relative;height:100px;margin-top:8px} #view-hub .chart-bars{display:flex;align-items:flex-end;gap:5px;height:88px} #view-hub .chart-bar{flex:1;border-radius:5px 5px 0 0;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 70%,transparent) 0%,var(--accent-dim) 100%);transition:var(--transition);cursor:pointer;touch-action:manipulation} #view-hub .chart-bar:hover, #view-hub .chart-bar.today{background:linear-gradient(180deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 50%,transparent) 100%)} #view-hub .chart-labels{display:flex;gap:5px;margin-top:6px} #view-hub .chart-labels span{flex:1;text-align:center;font-size:9px;color:var(--text-faint);pointer-events:none} #view-hub .heatmap-grid{display:grid;grid-template-columns:repeat(15,1fr);gap:4px;margin-top:4px} #view-hub .hm-cell{aspect-ratio:1;max-height:26px;border-radius:4px;background:rgba(255,255,255,0.04);cursor:pointer;transition:var(--transition);touch-action:manipulation} #view-hub .hm-cell:hover{transform:scale(1.35);z-index:5} #view-hub .hm-cell[data-h="1"]{background:color-mix(in srgb,var(--accent) 18%,transparent)} #view-hub .hm-cell[data-h="2"]{background:color-mix(in srgb,var(--accent) 35%,transparent)} #view-hub .hm-cell[data-h="3"]{background:color-mix(in srgb,var(--accent) 55%,transparent)} #view-hub .hm-cell[data-h="4"]{background:color-mix(in srgb,var(--accent) 78%,transparent)} #view-hub .hm-cell[data-h="5"]{background:var(--accent)} #view-hub .hm-label{display:flex;justify-content:space-between;font-size:10px;color:var(--text-faint);margin-bottom:8px} #view-hub .hm-legend{display:flex;align-items:center;gap:5px;margin-top:10px;font-size:10px;color:var(--text-faint)} #view-hub .hm-legend-cells{display:flex;gap:3px} #view-hub .todo-input-row{display:flex;gap:8px;margin-bottom:14px} #view-hub .todo-input{flex:1;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;color:var(--text-main);font-family:"DM Sans",sans-serif;font-size:13px;outline:none;transition:var(--transition);-webkit-appearance:none} #view-hub .todo-input:focus{border-color:var(--border-glow)} #view-hub .todo-input::placeholder{color:var(--text-faint)} #view-hub .todo-add-btn{padding:10px 16px;border-radius:var(--radius-sm);background:var(--accent-soft);border:1px solid var(--border-glow);color:var(--accent);cursor:pointer;font-size:18px;line-height:1;-webkit-tap-highlight-color:transparent;touch-action:manipulation} #view-hub .todo-list{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto} #view-hub .todo-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--radius-sm);background:rgba(255,255,255,0.03);border:1px solid var(--border)} #view-hub .todo-item.done .todo-text{text-decoration:line-through;color:var(--text-faint)} #view-hub .todo-check{width:18px;height:18px;border-radius:5px;flex-shrink:0;border:1.5px solid var(--border-glow);cursor:pointer;display:flex;align-items:center;justify-content:center;background:transparent;-webkit-tap-highlight-color:transparent;touch-action:manipulation} #view-hub .todo-check.checked{background:var(--accent);border-color:var(--accent)} #view-hub .todo-check.checked::after{content:"✓";font-size:11px;color:white;font-weight:700;pointer-events:none} #view-hub .todo-text{flex:1;font-size:13px;color:var(--text-main)} #view-hub .priority-tag{font-size:9px;padding:2px 7px;border-radius:50px;font-weight:600;text-transform:uppercase;pointer-events:none} #view-hub .p-high{background:rgba(220,100,80,0.15);color:#e8826a} #view-hub .p-mid{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)} #view-hub .p-low{background:rgba(122,184,184,0.15);color:var(--teal)} #view-hub .todo-del{background:none;border:none;color:var(--text-faint);cursor:pointer;font-size:15px;padding:2px 4px;border-radius:4px;-webkit-tap-highlight-color:transparent;touch-action:manipulation} #view-hub .todo-del:hover{color:var(--rose)} #view-hub .reminder-list{display:flex;flex-direction:column;gap:8px} #view-hub .reminder-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-sm);background:rgba(255,255,255,0.03);border:1px solid var(--border)} #view-hub .reminder-icon{font-size:18px;flex-shrink:0;pointer-events:none} #view-hub .reminder-info{flex:1} #view-hub .reminder-name{font-size:13px;color:var(--text-main)} #view-hub .reminder-time{font-size:11px;color:var(--text-dim);margin-top:1px} #view-hub .reminder-toggle{width:36px;height:20px;border-radius:50px;position:relative;background:var(--border);cursor:pointer;transition:var(--transition);border:none;flex-shrink:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation} #view-hub .reminder-toggle.on{background:var(--accent)} #view-hub .reminder-toggle::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:white;top:3px;left:3px;transition:var(--transition);pointer-events:none} #view-hub .reminder-toggle.on::after{transform:translateX(16px)} #view-hub .goal-list{display:flex;flex-direction:column;gap:14px} #view-hub .goal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px} #view-hub .goal-name{font-size:13px;color:var(--text-main)} #view-hub .goal-pct{font-size:11px;color:var(--accent);font-weight:500;cursor:pointer} #view-hub .goal-adj{width:22px;height:22px;border-radius:7px;border:1px solid var(--border);background:rgba(255,255,255,0.04);color:var(--text-dim);font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:var(--transition);-webkit-tap-highlight-color:transparent;touch-action:manipulation} #view-hub .goal-adj:hover{border-color:var(--border-glow);color:var(--accent);background:var(--accent-dim)} #view-hub .goal-bar-track{height:5px;background:rgba(255,255,255,0.06);border-radius:5px;overflow:hidden;pointer-events:none} #view-hub .goal-bar-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#fff));transition:width 1.2s cubic-bezier(0.4,0,0.2,1);pointer-events:none} /* Goal category badge + deadline/status row (2026-09-04 "enhance the goals" — additive on top of the existing .goal-item/.goal-bar-* rules above, nothing about the free +/- hour flow changes). */ #view-hub .goal-cat-badge{font-size:9px;padding:2px 8px;border-radius:50px;background:rgba(255,255,255,0.06);color:var(--text-dim);text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap} #view-hub .goal-status-badge{font-size:9px;padding:2px 9px;border-radius:50px;text-transform:uppercase;letter-spacing:0.05em;white-space:nowrap} #view-hub .goal-status-badge.st-done{background:rgba(120,200,154,0.15);color:var(--green)} #view-hub .goal-status-badge.st-overdue{background:rgba(232,120,120,0.15);color:var(--rose)} #view-hub .goal-status-badge.st-progress{background:var(--accent-dim);color:var(--accent)} #view-hub .goal-status-badge.st-new{background:rgba(255,255,255,0.05);color:var(--text-faint)} #view-hub .goal-meta-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px} #view-hub .goal-deadline{font-size:10.5px;color:var(--text-faint)} /* Free/Premium plan banner shared by Goals + Habits cards */ #view-hub .plan-limit-note{font-size:11px;color:var(--text-faint);margin:-6px 0 14px;padding:8px 12px;border-radius:9px;background:rgba(255,255,255,0.03);border:1px solid var(--border);display:none} #view-hub .plan-limit-note.show{display:block} #view-hub .plan-limit-note a{color:var(--accent);text-decoration:none} #view-hub .plan-limit-note a:hover{text-decoration:underline} /* Chips (category / track-type / schedule pickers) — #view-cafe-* already has its own .chip rules; #view-hub needs the same pattern for the Goal + Habit modals' pickers. */ #view-hub .chip-row{display:flex;gap:8px;flex-wrap:wrap} #view-hub .chip{padding:6px 13px;border-radius:20px;border:1px solid var(--border);background:rgba(255,255,255,0.03);color:var(--text-dim);font-size:12px;cursor:pointer;font-family:inherit;transition:var(--transition);-webkit-tap-highlight-color:transparent} #view-hub .chip:hover{border-color:var(--border-glow)} #view-hub .chip.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)} /* ── Habits (2026-09-04 — "remove the notes and add habits") ── Free plan: capped at 3 habits, basic list rows (reuses .reminder-item, same as Reminders). Premium (isPremium()): unlimited habits, enhanced card UI with a streak badge + progress bar — see renderHabits() in data-fire.js, which switches markup based on isPremium(). */ #view-hub .habit-list{display:flex;flex-direction:column;gap:10px} #view-hub .habit-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-sm);background:rgba(255,255,255,0.03);border:1px solid var(--border)} #view-hub .habit-icon{font-size:18px;flex-shrink:0;pointer-events:none;width:26px;text-align:center} #view-hub .habit-info{flex:1;min-width:0} #view-hub .habit-name{font-size:13px;color:var(--text-main)} #view-hub .habit-meta{font-size:11px;color:var(--text-faint);margin-top:2px} #view-hub .habit-streak-pill{font-size:11px;color:var(--accent);white-space:nowrap;flex-shrink:0} #view-hub .habit-count-controls{display:flex;align-items:center;gap:6px;flex-shrink:0} #view-hub .habit-count-val{font-size:12px;color:var(--text-main);min-width:34px;text-align:center} /* Enhanced (premium) card variant */ #view-hub .habit-card{padding:16px;border-radius:14px;background:rgba(255,255,255,0.03);border:1px solid var(--border);transition:var(--transition)} #view-hub .habit-card:hover{border-color:var(--border-glow)} #view-hub .habit-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px} #view-hub .habit-card-title{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-main)} #view-hub .habit-card-cat{font-size:10px;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.06em;margin-top:3px} #view-hub .habit-streak-badge{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--accent);background:var(--accent-dim);padding:4px 10px;border-radius:50px;white-space:nowrap;flex-shrink:0} #view-hub .habit-card-bar-row{margin-top:14px} #view-hub .habit-card-controls{display:flex;gap:8px;margin-top:12px;align-items:center} #view-hub .quote-text{font-size:20px;font-style:italic;color:var(--cream-dim);line-height:1.65;text-align:center;padding:8px 0} #view-hub .quote-author{font-size:11px;color:var(--text-faint);text-align:center;margin-top:10px;letter-spacing:0.12em;text-transform:uppercase} #view-hub .quote-dots{display:flex;justify-content:center;gap:5px;margin-top:14px} #view-hub .quote-dot{width:5px;height:5px;border-radius:50%;background:var(--border);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation} #view-hub .quote-dot.active{background:var(--accent)} #view-hub .mood-row{display:flex;gap:10px;justify-content:space-around;margin-top:8px} #view-hub .mood-btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:transparent;cursor:pointer;transition:var(--transition);color:var(--text-faint);font-size:24px;min-width:58px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;font-family:"DM Sans",sans-serif} #view-hub .mood-btn span.mood-lbl{font-size:10px;font-family:"DM Sans",sans-serif;pointer-events:none} #view-hub .mood-btn > span:first-child{pointer-events:none} #view-hub .mood-btn:hover{border-color:var(--border-glow);background:var(--bg-card-hover)} #view-hub .mood-btn.selected{background:var(--accent-soft);border-color:var(--border-glow);color:var(--accent)} #view-hub .mood-history{display:flex;gap:5px;margin-top:14px;align-items:flex-end} #view-hub .mood-bar-day{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none} #view-hub .mood-bar-dot{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;font-size:14px;pointer-events:none} #view-hub .mood-bar-dot.filled{background:var(--accent-dim);border:1px solid var(--border-glow)} #view-hub .mood-bar-lbl{font-size:9px;color:var(--text-faint);pointer-events:none} #view-hub .timer-ring{position:relative;width:120px;height:120px;margin:0 auto;pointer-events:none} #view-hub .timer-ring svg{transform:rotate(-90deg);pointer-events:none} #view-hub .timer-ring-bg{fill:none;stroke:rgba(255,255,255,0.06);stroke-width:6} #view-hub .timer-ring-fill{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1s linear} #view-hub .timer-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none} #view-hub .timer-mins{font-family:"Playfair Display",serif;font-size:30px;color:var(--cream);line-height:1} #view-hub .timer-status{font-size:10px;color:var(--text-faint);letter-spacing:0.1em;text-transform:uppercase;margin-top:4px} #view-hub .timer-controls{display:flex;gap:10px;margin-top:18px;justify-content:center} #view-hub .timer-btn{padding:9px 22px;border-radius:50px;font-size:12px;cursor:pointer;transition:var(--transition);font-family:"DM Sans",sans-serif;font-weight:500;-webkit-tap-highlight-color:transparent;touch-action:manipulation} #view-hub .timer-btn.primary{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#000));color:white;border:none} #view-hub .timer-btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text-dim)} #view-hub .timer-btn:hover{transform:translateY(-1px)} #view-hub .timer-presets{display:flex;gap:8px;margin-top:12px;justify-content:center;flex-wrap:wrap} #view-hub .preset-btn{padding:5px 12px;border-radius:50px;font-size:11px;border:1px solid var(--border);background:transparent;color:var(--text-faint);cursor:pointer;transition:var(--transition);-webkit-tap-highlight-color:transparent;touch-action:manipulation} #view-hub .preset-btn:hover, #view-hub .preset-btn.active{border-color:var(--border-glow);color:var(--accent);background:var(--accent-dim)} #view-hub .settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} #view-hub .setting-item{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:var(--radius-sm);background:rgba(255,255,255,0.03);border:1px solid var(--border)} #view-hub .setting-label{font-size:12px;color:var(--text-main)} #view-hub .setting-sub{font-size:10px;color:var(--text-faint);margin-top:2px} #view-hub .focus-sync-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap} #view-hub .sync-stat{flex:1;min-width:80px;text-align:center} #view-hub .sync-val{font-family:"Playfair Display",serif;font-size:28px;color:var(--cream)} #view-hub .sync-lbl{font-size:10px;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.1em;margin-top:2px} #view-hub .modal-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,0.65);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s} #view-hub .modal-overlay.open{opacity:1;pointer-events:all} #view-hub .modal{background:var(--bg-mid);border:1px solid var(--border-glow);border-radius:var(--radius);padding:28px;width:360px;max-width:90vw;box-shadow:0 24px 64px rgba(0,0,0,0.55);transform:translateY(20px);transition:transform 0.3s} #view-hub .modal-overlay.open .modal{transform:none} #view-hub .modal h3{font-family:"Playfair Display",serif;font-size:18px;margin-bottom:16px;color:var(--cream)} #view-hub .modal-row{margin-bottom:12px} #view-hub .modal-label{font-size:11px;color:var(--text-dim);margin-bottom:6px;display:block} #view-hub .modal-input{width:100%;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:9px;padding:9px 12px;color:var(--text-main);font-family:"DM Sans",sans-serif;font-size:13px;outline:none;transition:var(--transition);-webkit-appearance:none} #view-hub .modal-input:focus{border-color:var(--border-glow)} #view-hub .modal-select{appearance:none;-webkit-appearance:none} #view-hub .modal-footer{display:flex;gap:8px;justify-content:flex-end;margin-top:18px} #view-hub .btn-ghost{padding:8px 16px;border-radius:9px;border:1px solid var(--border);background:none;color:var(--text-dim);cursor:pointer;font-size:13px;font-family:"DM Sans",sans-serif;-webkit-tap-highlight-color:transparent;touch-action:manipulation} #view-hub .btn-primary{padding:8px 18px;border-radius:9px;border:none;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#000));color:white;cursor:pointer;font-size:13px;font-weight:600;font-family:"DM Sans",sans-serif;-webkit-tap-highlight-color:transparent;touch-action:manipulation} #view-hub .toast{position:fixed;bottom:28px;right:28px;z-index:8000;background:rgba(14,12,24,0.96);backdrop-filter:blur(16px);border:1px solid var(--border-glow);border-radius:13px;padding:12px 20px;font-size:13px;color:var(--cream-dim);display:flex;align-items:center;gap:10px;transform:translateY(80px);opacity:0;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);pointer-events:none} #view-hub .toast.show{transform:none;opacity:1} #view-hub .live-badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--green);background:rgba(143,188,143,0.12);border:1px solid rgba(143,188,143,0.25);border-radius:50px;padding:3px 9px;margin-left:8px;transition:all 0.5s ease;pointer-events:none} #view-hub .live-badge .ldot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:pulse-dot 1.5s ease-in-out infinite;pointer-events:none} #view-hub .live-badge.idle{color:var(--text-faint);background:rgba(255,255,255,0.04);border-color:var(--border)} #view-hub .live-badge.idle .ldot{background:var(--text-faint);animation:none} #view-hub .live-badge.session-active{color:var(--t-accent);background:color-mix(in srgb, var(--t-accent) 10%, transparent);border-color:color-mix(in srgb, var(--t-accent) 30%, transparent)} #view-hub .live-badge.session-active .ldot{background:var(--t-accent);box-shadow:0 0 6px var(--t-accent)} #view-hub #session-status-pill.active-session{border-color:color-mix(in srgb, var(--t-accent) 30%, transparent);background:color-mix(in srgb, var(--t-accent) 8%, transparent);color:color-mix(in srgb, var(--t-accent) 90%, transparent)} #view-hub #session-status-pill.active-session .dot{background:var(--t-accent);box-shadow:0 0 8px var(--t-accent)} #view-hub .empty-state{text-align:center;padding:32px 16px;color:var(--text-faint)} #view-hub .empty-state .em-icon{font-size:36px;margin-bottom:12px;opacity:0.5;pointer-events:none} #view-hub .empty-state .em-title{font-size:14px;color:var(--text-dim);margin-bottom:6px} #view-hub .empty-state .em-sub{font-size:12px} #leaderboard-drawer-backdrop{position:fixed;inset:0;z-index:8999;background:rgba(4,2,1,0.55);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .35s ease} body.leaderboard-drawer-open #leaderboard-drawer-backdrop{opacity:1;pointer-events:auto} #leaderboard-drawer{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;left:auto;width:min(380px,92vw);z-index:9000;background:var(--bg-card,#100d16);border-left:1px solid var(--border-warm);box-shadow:-24px 0 60px rgba(0,0,0,0.5);transform:translateX(100%);opacity:0;pointer-events:none;transition:transform .4s cubic-bezier(0.4,0,0.2,1),opacity .3s ease;padding:22px 18px;gap:14px} body.leaderboard-drawer-open #leaderboard-drawer{transform:translateX(0);opacity:1;pointer-events:auto} @media(max-width:480px){#leaderboard-drawer{width:100vw}} .lb-drawer-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;margin-bottom:2px;border-bottom:1px solid var(--border,rgba(255,255,255,0.08));flex-shrink:0} .lb-drawer-head h3{font-size:15px;font-weight:600;color:var(--text-main,#f2ede6);margin:0} #leaderboard-drawer-close{width:30px;height:30px;border-radius:50%;background:transparent;border:1px solid var(--border,rgba(255,255,255,0.08));color:var(--text-faint,#8a8580);cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;transition:var(--transition,0.2s ease);flex-shrink:0} #leaderboard-drawer-close:hover{color:var(--text-main,#f2ede6);border-color:var(--border-warm,rgba(255,255,255,0.16))} .lb-search-wrap{position:relative;flex-shrink:0} .lb-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;stroke:var(--text-faint,#8a8580);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none} #leaderboard-search{width:100%;box-sizing:border-box;padding:9px 12px 9px 34px;border-radius:50px;border:1px solid var(--border,rgba(255,255,255,0.08));background:var(--accent-dim,rgba(255,255,255,0.03));color:var(--text-main,#f2ede6);font-size:12.5px;font-family:"DM Sans",sans-serif;outline:none;transition:var(--transition,0.2s ease)} #leaderboard-search:focus{border-color:var(--border-warm,rgba(255,255,255,0.2))} #leaderboard-search::placeholder{color:var(--text-faint,#8a8580)} .lb-list{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:6px;scrollbar-width:thin} .lb-empty{text-align:center;padding:30px 10px;font-size:12.5px;color:var(--text-faint,#8a8580);line-height:1.5} .lb-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm,11px);background:var(--bg-card-hover,rgba(255,255,255,0.03));transition:var(--transition,0.2s ease)} .lb-row.lb-row-me{background:var(--accent-soft);border:1px solid color-mix(in srgb, var(--t-accent) 35%, transparent)} .lb-rank{width:22px;flex-shrink:0;text-align:center;font-size:12px;font-weight:700;color:var(--text-faint,#8a8580)} .lb-row-top .lb-rank{color:var(--accent,#c9a876)} .lb-avatar{width:32px;height:32px;border-radius:9px;flex-shrink:0;object-fit:cover;background:var(--accent-dim,rgba(255,255,255,0.06));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--text-dim,#b5afa8)} .lb-name-wrap{flex:1;min-width:0} .lb-name{font-size:12.5px;font-weight:600;color:var(--text-main,#f2ede6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lb-you{font-weight:500;color:var(--text-faint,#8a8580)} .lb-sub{margin-top:3px;display:flex;align-items:center;gap:6px;font-size:10px;min-width:0} .lb-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:100px;color:#fff;font-weight:600;font-size:10px;letter-spacing:0.01em;white-space:nowrap;flex-shrink:0;text-shadow:0 1px 1px rgba(0,0,0,0.25)} .lb-lvl{color:var(--text-faint,#8a8580);white-space:nowrap;flex-shrink:0} .lb-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0} .lb-xp{font-size:12px;font-weight:600;color:var(--text-main,#f2ede6);white-space:nowrap} .lb-streak-inline{font-size:10px;color:var(--text-faint,#8a8580);white-space:nowrap} .lb-footer-link{flex-shrink:0;margin-top:4px;padding-top:14px;border-top:1px solid var(--border,rgba(255,255,255,0.08));text-align:center;font-size:12.5px;font-weight:600;color:var(--accent,#c9a876);text-decoration:none;transition:var(--transition,0.2s ease)} .lb-footer-link:hover{color:var(--text-main,#f2ede6)} .lb-peak-badge{margin-right:4px} #view-hub .badges-list{display:flex;flex-direction:column;gap:10px} #view-hub .badge-slot{display:flex;align-items:center;gap:14px;padding:14px;border-radius:var(--radius-sm);background:var(--bg-card-hover);border:1px solid var(--border);transition:var(--transition)} #view-hub .badge-slot-icon{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:21px} #view-hub .badge-slot-locked .badge-slot-icon{background:var(--accent-dim);filter:grayscale(1);opacity:0.55} #view-hub .badge-slot-earned{border-color:var(--border-warm);background:linear-gradient(135deg,var(--accent-glow),transparent 65%),var(--bg-card-hover)} #view-hub .badge-slot-title{font-size:13px;font-weight:600;color:var(--text-main)} #view-hub .badge-slot-sub{font-size:11.5px;color:var(--text-faint);margin-top:3px;line-height:1.45} #view-hub #timer-sync-widget{ position:fixed;bottom:28px;left:88px;z-index:400; background:color-mix(in srgb, var(--t-bg) 92%, transparent);backdrop-filter:blur(20px) saturate(130%); border:1px solid color-mix(in srgb, var(--t-accent2) 16%, transparent);border-radius:18px;padding:14px 18px; display:flex;align-items:center;gap:16px;min-width:300px;max-width:360px; box-shadow:0 8px 32px rgba(0,0,0,0.5);transform:translateY(20px);opacity:0; pointer-events:none;transition:all 0.45s cubic-bezier(0.4,0,0.2,1)} #view-hub #timer-sync-widget.visible{opacity:1;pointer-events:all;transform:translateY(0)} #view-hub .tsw-ring{position:relative;width:58px;height:58px;flex-shrink:0;pointer-events:none} #view-hub .tsw-ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible;pointer-events:none} #view-hub .tsw-ring-bg{fill:none;stroke:color-mix(in srgb, var(--t-accent2) 8%, transparent);stroke-width:4} #view-hub .tsw-ring-fill{fill:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:144.5;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear,stroke 0.5s ease} #view-hub .tsw-ring-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none} #view-hub .tsw-ring-icon{font-size:17px;line-height:1;pointer-events:none} #view-hub .tsw-info{flex:1;min-width:0;pointer-events:none} #view-hub .tsw-label{font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:color-mix(in srgb, var(--t-text) 35%, transparent);margin-bottom:3px} #view-hub .tsw-time{font-family:"Playfair Display",serif;font-size:1.8rem;font-weight:300;letter-spacing:3px;line-height:1;color:var(--t-text);transition:color 0.4s} #view-hub .tsw-time.running{color:var(--t-accent)} #view-hub .tsw-status{font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:color-mix(in srgb, var(--t-text) 35%, transparent);margin-top:3px;display:flex;align-items:center;gap:5px} #view-hub .tsw-status-dot{width:5px;height:5px;border-radius:50%;background:rgba(120,200,154,0.4);flex-shrink:0;transition:background 0.4s} #view-hub .tsw-status-dot.live{background:#78c89a;box-shadow:0 0 5px #78c89a;animation:tsw-blink 2s ease-in-out infinite} #view-hub .tsw-status-dot.paused{background:rgba(240,192,96,0.6)} #view-hub .tsw-status-dot.deep{background:#a080f0;box-shadow:0 0 5px #a080f0;animation:tsw-blink 3s ease-in-out infinite} @keyframes tsw-blink{0%,100%{opacity:1}50%{opacity:0.35}} #view-hub .tsw-actions{display:flex;flex-direction:column;gap:5px;flex-shrink:0} #view-hub .tsw-go-btn{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;padding:6px 12px;border-radius:20px;background:color-mix(in srgb, var(--t-accent) 12%, transparent);border:1px solid color-mix(in srgb, var(--t-accent) 28%, transparent);color:color-mix(in srgb, var(--t-accent) 85%, transparent);cursor:pointer;transition:all 0.3s;font-family:"DM Sans",sans-serif;white-space:nowrap;-webkit-tap-highlight-color:transparent;touch-action:manipulation} #view-hub .tsw-go-btn:hover{background:color-mix(in srgb, var(--t-accent) 22%, transparent);border-color:color-mix(in srgb, var(--t-accent) 50%, transparent);color:var(--t-accent)} #view-hub .tsw-dismiss-btn{font-size:9px;letter-spacing:1px;text-transform:uppercase;padding:4px 12px;border-radius:20px;background:transparent;border:1px solid color-mix(in srgb, var(--t-accent2) 10%, transparent);color:color-mix(in srgb, var(--t-text) 25%, transparent);cursor:pointer;transition:all 0.3s;font-family:"DM Sans",sans-serif;white-space:nowrap;text-align:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation} #view-hub .tsw-dismiss-btn:hover{border-color:color-mix(in srgb, var(--t-accent2) 22%, transparent);color:color-mix(in srgb, var(--t-text) 50%, transparent)} #view-hub .mobile-hero{display:none;padding:0 0 20px 0} #view-hub .mobile-hero-bg{background:linear-gradient(135deg,var(--bg-card) 0%,var(--accent-dim) 100%);border:1px solid var(--border);border-radius:22px;padding:22px 20px 20px;position:relative;overflow:hidden} #view-hub .mobile-hero-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px} #view-hub .mobile-hero-greeting{font-family:"Playfair Display",serif;font-size:22px;font-weight:500;color:var(--cream);line-height:1.25} #view-hub .mobile-hero-date{font-style:italic;font-size:13px;color:var(--text-dim);margin-top:3px} #view-hub .mobile-hero-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--lavender),var(--rose));display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;color:white;border:2px solid var(--border-glow);flex-shrink:0} #view-hub .mobile-hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} #view-hub .mobile-stat-pill{background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:13px;padding:11px 8px;text-align:center;pointer-events:none} #view-hub .mobile-stat-pill-val{font-family:"Playfair Display",serif;font-size:20px;font-weight:400;color:var(--accent);line-height:1} #view-hub .mobile-stat-pill-lbl{font-size:9.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.08em;margin-top:3px} #view-hub .mobile-xp-row{margin-top:14px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:13px;padding:11px 14px;pointer-events:none} #view-hub .mobile-xp-label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px} #view-hub .mobile-xp-label-row span:first-child{font-size:11px;color:var(--text-dim)} #view-hub .mobile-xp-label-row span:last-child{font-size:11px;color:var(--accent);font-weight:500} #view-hub .mobile-session-pill{display:flex;align-items:center;gap:7px;margin-top:10px;padding:8px 12px;border-radius:50px;background:rgba(255,255,255,0.04);border:1px solid var(--border);font-size:11.5px;color:var(--text-dim);pointer-events:none} #view-hub .mobile-session-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse-dot 2s ease-in-out infinite;flex-shrink:0;pointer-events:none} #view-hub .bottom-nav{display:none;position:fixed;top:auto;bottom:0;left:0;right:0;z-index:500;background:var(--sidebar-bg);border-top:1px solid var(--sidebar-border);backdrop-filter:blur(24px);padding:6px 4px calc(6px + env(safe-area-inset-bottom));max-height:none} #view-hub .bottom-nav-inner{display:flex;justify-content:space-around;align-items:center} #view-hub .bnav-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px;border-radius:12px;cursor:pointer;transition:var(--transition);color:var(--text-faint);border:none;background:transparent;min-width:44px;min-height:44px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;font-family:"DM Sans",sans-serif} #view-hub .bnav-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none} #view-hub .bnav-btn span{font-size:9px;color:currentColor;pointer-events:none} #view-hub .bnav-btn.active{color:var(--accent);background:var(--accent-soft)} #view-hub .bnav-more-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px;border-radius:12px;cursor:pointer;color:var(--text-faint);background:transparent;border:none;min-width:44px;min-height:44px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;font-family:"DM Sans",sans-serif} #view-hub .bnav-more-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none} #view-hub .bnav-more-btn span{font-size:9px;pointer-events:none} #view-hub .more-drawer{display:none;position:fixed;bottom:0;left:0;right:0;z-index:600} #view-hub .more-drawer.open{display:block} #view-hub .more-drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px)} #view-hub .more-drawer-sheet{position:relative;z-index:1;background:var(--bg-mid);border-top:1px solid var(--border-glow);border-radius:22px 22px 0 0;padding:16px 20px calc(20px + env(safe-area-inset-bottom));animation:slideUpDrawer 0.3s cubic-bezier(0.4,0,0.2,1)} @keyframes slideUpDrawer{from{transform:translateY(100%)}to{transform:none}} #view-hub .drawer-handle{width:36px;height:4px;border-radius:2px;background:var(--border);margin:0 auto 20px;pointer-events:none} #view-hub .drawer-title{font-size:11px;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-faint);margin-bottom:14px} #view-hub .drawer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} #view-hub .drawer-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,0.03);cursor:pointer;transition:var(--transition);color:var(--text-dim);-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:72px} #view-hub .drawer-item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none} #view-hub .drawer-item span{font-size:10px;color:currentColor;pointer-events:none} #view-hub .drawer-item:hover, #view-hub .drawer-item:active{background:var(--accent-soft);border-color:var(--border-glow);color:var(--accent)} @media (max-width:640px){#view-hub #timer-sync-widget{left:10px;bottom:calc(80px + env(safe-area-inset-bottom));max-width:calc(100vw - 20px);min-width:0}#view-hub .app{grid-template-columns:1fr}#view-hub .sidebar{display:none}#view-hub .bottom-nav{display:block}#view-hub .mobile-hero{display:block}#view-hub .main{margin-left:0;padding:14px 14px calc(90px + env(safe-area-inset-bottom))}#view-hub .topbar{display:none}#view-hub .grid-2, #view-hub .grid-3{grid-template-columns:1fr !important}#view-hub .col-span-2{grid-column:span 1}#view-hub .card{padding:18px 16px;border-radius:16px}#view-hub .card:hover{transform:none}#view-hub .streak-hero{flex-direction:column;align-items:flex-start;gap:16px}#view-hub .streak-flame{width:70px;height:70px}#view-hub .streak-big{font-size:42px}#view-hub .week-dots{gap:6px}#view-hub .week-dot{width:30px;height:30px;font-size:9px}#view-hub .heatmap-grid{grid-template-columns:repeat(10,1fr);gap:4px}#view-hub .calendar-stats-grid{grid-template-columns:repeat(2,1fr) !important}#view-hub .settings-grid{grid-template-columns:1fr !important}#view-hub .toast{bottom:calc(80px + env(safe-area-inset-bottom));right:14px;left:14px}#view-hub .view-header{margin-bottom:16px}#view-hub .view-header h2{font-size:18px}#view-hub .notes-area{min-height:200px}#view-hub .stat-val{font-size:30px}#view-hub .chart-wrap{height:80px}#view-hub .chart-bars{height:68px}#view-hub .topbar-right{display:none}#view-hub .modal-input{font-size:16px}#view-hub .mood-btn{padding:10px 8px;min-width:48px;font-size:20px}#view-hub .card[style*="padding:36px"],#view-hub .card[style*="padding: 36px"]{padding:20px 16px !important}} @media (min-width:641px) and (max-width:900px){#view-hub .grid-3{grid-template-columns:1fr 1fr}#view-hub .col-span-2{grid-column:span 1}} body.discord-activity #view-hub .card:hover{transform:none} body.discord-activity #view-hub #particles-wrap{display:none} body.discord-activity #view-hub .particle{display:none} /* Cafe Room Playlists (Task #19 revision) — Jam itself is Web/PC only, so a playlist saved from it has nothing to do on Discord. */ body.discord-activity #cafe-playlists-card{display:none !important} body.discord-activity #subscription-card{display:none !important} body.discord-activity #upgrade-plus-pill{display:none !important} #sub-status-val.active{color:var(--green,#4ade80)} #sub-status-val.trialing{color:var(--accent)} #sub-status-val.canceled,#sub-status-val.expired,#sub-status-val.past_due{color:#ef4444} #cafe-playlists-card .cpl-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);background:rgba(255,255,255,0.03);border:1px solid var(--border)} #cafe-playlists-card .cpl-name{font-size:13px;font-weight:600;color:var(--text)} #cafe-playlists-card .cpl-meta{font-size:11px;color:var(--text-faint);margin-top:1px} #cafe-playlists-card .cpl-delete{flex-shrink:0;width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text-faint);cursor:pointer;font-size:14px;line-height:1} #cafe-playlists-card .cpl-delete:hover{border-color:rgba(239,68,68,0.4);color:#ef4444} #view-hub .ycal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:8px;max-width:420px;margin-left:auto;margin-right:auto} #view-hub .ycal-dow span{text-align:center;font-size:9.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.08em} #view-hub .ycal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;max-width:420px;margin:0 auto;width:100%} #view-hub .ycal-cell{aspect-ratio:1;max-height:52px;display:flex;align-items:center;justify-content:center;border-radius:9px;font-size:12.5px;color:var(--text-dim);background:rgba(255,255,255,0.03);border:1px solid var(--border);position:relative;transition:var(--transition)} #view-hub .ycal-cell.empty{background:transparent;border-color:transparent} #view-hub .ycal-cell.today{background:var(--accent-soft);border-color:var(--accent);color:var(--cream);font-weight:600} #view-hub .ycal-cell.past{color:var(--text-faint);opacity:0.42} #view-hub .ycal-cell.past::before, #view-hub .ycal-cell.past::after{content:"";position:absolute;top:50%;left:10%;right:10%;height:1px;background:var(--text-faint);pointer-events:none} #view-hub .ycal-cell.past::before{transform:rotate(22deg)} #view-hub .ycal-cell.past::after{transform:rotate(-22deg)} @media (max-width:640px){#view-hub .ycal-cell{font-size:10.5px;border-radius:7px}} /* ==== originally index.html lines 925-1353 ==== */ /* ── Design tokens ────────────────────────────────────────────── */ :root { --bg: var(--t-bg); --bg2: var(--t-bg2); --accent: var(--t-accent); --accent2: var(--t-accent2); --accent-dim: color-mix(in srgb,var(--t-accent) 45%,transparent); --accent-glow: color-mix(in srgb,var(--t-accent) 12%,transparent); --border: var(--t-border); --border-warm: var(--t-border-strong); --text: var(--t-text); --muted: var(--t-muted); --muted2: var(--t-muted2); --error: rgba(224,110,90,0.88); --success: rgba(110,200,150,0.88); --radius: 14px; --radius-lg: 28px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; font-weight: 300; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* ── Background layer (pointer-events: none — never blocks clicks) ── */ #deco-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; user-select: none; } #login-particle-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } #login-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 85% 75% at 50% 50%, transparent 25%, rgba(4,2,1,0.82) 100%); } .orb { position: absolute; border-radius: 50%; filter: blur(90px); animation: orb-drift ease-in-out infinite; } .orb-1 { width:520px;height:520px;background:radial-gradient(circle,color-mix(in srgb,var(--t-accent) 7%,transparent) 0%,transparent 70%);top:-180px;left:-120px;animation-duration:20s; } .orb-2 { width:420px;height:420px;background:radial-gradient(circle,color-mix(in srgb,var(--t-accent2) 5%,transparent) 0%,transparent 70%);bottom:-120px;right:-90px;animation-duration:26s;animation-delay:-10s; } .orb-3 { width:360px;height:360px;background:radial-gradient(circle,color-mix(in srgb,var(--t-accent) 4%,transparent) 0%,transparent 70%);top:55%;left:58%;animation-duration:22s;animation-delay:-5s; } @keyframes orb-drift { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(28px,-18px) scale(1.04); } 66% { transform: translate(-18px,26px) scale(0.96); } } /* ── UI layer ─────────────────────────────────────────────────── */ #ui-layer { position: relative; z-index: 10; min-height: 100vh; min-height: -webkit-fill-available; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: max(24px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); } /* ── Card ─────────────────────────────────────────────────────── */ .login-card { width: min(420px, 100%); background: color-mix(in srgb, var(--t-text) 4.7%, transparent); border: 1px solid color-mix(in srgb, var(--t-accent2) 13%, transparent); border-radius: var(--radius-lg); padding: 44px 44px 36px; backdrop-filter: blur(48px) saturate(140%); -webkit-backdrop-filter: blur(48px) saturate(140%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--t-accent2) 4%, transparent) inset, 0 0 90px color-mix(in srgb, var(--t-accent) 5.5%, transparent), 0 44px 90px rgba(0,0,0,0.6); animation: card-rise 0.9s cubic-bezier(.16,1,.3,1) both; } @keyframes card-rise { from { opacity: 0; transform: translateY(28px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── Brand ────────────────────────────────────────────────────── */ .login-brand { text-align: center; margin-bottom: 26px; animation: fade-up 0.8s 0.15s both; } @keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .brand-eyebrow { font-family: 'Cormorant Garamond', serif; font-size: .66rem; letter-spacing: 6px; text-transform: uppercase; color: var(--muted2); margin-bottom: 14px; } .brand-logo { width: 50px; height: 50px; border-radius: 15px; background: linear-gradient(135deg, color-mix(in srgb, var(--t-accent) 20%, transparent), color-mix(in srgb, var(--t-accent2) 9%, transparent)); border: 1px solid color-mix(in srgb, var(--t-accent) 26%, transparent); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; animation: logo-pulse 3.5s ease-in-out infinite; } @keyframes logo-pulse { 0%,100% { box-shadow: 0 0 28px color-mix(in srgb, var(--t-accent) 10%, transparent), inset 0 1px 0 color-mix(in srgb, var(--t-accent2) 18%, transparent); } 50% { box-shadow: 0 0 44px color-mix(in srgb, var(--t-accent) 20%, transparent), inset 0 1px 0 color-mix(in srgb, var(--t-accent2) 28%, transparent); } } .brand-logo svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .brand-name { font-family: 'Cormorant Garamond', serif; font-size: 1.75rem; font-weight: 300; letter-spacing: 1px; color: var(--text); line-height: 1; margin-bottom: 5px; } .brand-name em { font-style: italic; color: var(--accent); } .brand-sub { font-size: .71rem; color: var(--muted); letter-spacing: .5px; } /* ── Bundle error banner (shown if js/firebase-bundle.js missing) ── */ .bundle-error { display: none; font-size: .65rem; color: rgba(220,110,90,0.92); text-align: center; letter-spacing: .3px; line-height: 1.65; margin-bottom: 14px; padding: 10px 14px; border-radius: 10px; background: rgba(210,80,60,0.07); border: 1px solid rgba(210,80,60,0.18); } /* ── Recommended badge (above social row) ─────────────────────── */ .recommend-badge { display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; margin-bottom: 10px; animation: fade-up 0.8s 0.2s both; } .recommend-badge span { font-size: .58rem; letter-spacing: 2.2px; text-transform: uppercase; color: var(--accent2); background: color-mix(in srgb, var(--t-accent) 13%, transparent); border: 1px solid color-mix(in srgb, var(--t-accent) 30%, transparent); border-radius: 999px; padding: 4px 12px; } /* ── Social buttons row ───────────────────────────────────────── */ .social-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; animation: fade-up 0.8s 0.25s both; } .btn-social { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 14px; min-height: 44px; border-radius: var(--radius); border: 1px solid var(--border); background: color-mix(in srgb, var(--t-text) 3%, transparent); color: var(--muted); font-family: 'DM Sans', sans-serif; font-size: .70rem; letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer; transition: all .3s; /* No inline onclick — listeners added via addEventListener */ -webkit-tap-highlight-color: transparent; } .btn-social svg { width: 16px; height: 16px; flex-shrink: 0; } .btn-social:hover { border-color: var(--border-warm); color: var(--text); background: color-mix(in srgb, var(--t-text) 5.5%, transparent); transform: translateY(-1px); } .btn-social:active { transform: translateY(0); opacity: .85; } .btn-social:disabled { opacity: .4; cursor: not-allowed; transform: none; } .btn-google:hover { border-color: rgba(66,133,244,.32); box-shadow: 0 4px 18px rgba(66,133,244,.07); } .btn-discord:hover { border-color: rgba(88,101,242,.38); box-shadow: 0 4px 18px rgba(88,101,242,.09); } /* ── Divider ──────────────────────────────────────────────────── */ .divider-or { text-align: center; font-size: .60rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted2); margin: 0 0 16px; position: relative; animation: fade-up 0.8s 0.3s both; } .divider-or::before, .divider-or::after { content: ''; position: absolute; top: 50%; height: 1px; background: var(--border); width: calc(50% - 18px); } .divider-or::before { left: 0; } .divider-or::after { right: 0; } /* ── Email toggle link (replaces always-visible tabs/form) ───── */ .email-toggle-row { text-align: center; margin-bottom: 4px; animation: fade-up 0.8s 0.32s both; } .email-toggle-link { background: none; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: .65rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); padding: 8px 4px; min-height: 36px; transition: color .2s; -webkit-tap-highlight-color: transparent; } .email-toggle-link:hover { color: var(--accent2); } /* ── Tabs ─────────────────────────────────────────────────────── */ .tabs { display: flex; margin-bottom: 18px; background: color-mix(in srgb, var(--t-text) 3.5%, transparent); border: 1px solid var(--border); border-radius: var(--radius); padding: 3px; animation: fade-up 0.8s 0.35s both; } .tab { flex: 1; padding: 9px; min-height: 38px; text-align: center; font-family: 'DM Sans', sans-serif; font-size: .67rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); cursor: pointer; border-radius: 11px; transition: all .3s; border: none; background: transparent; -webkit-tap-highlight-color: transparent; } .tab.active { background: color-mix(in srgb, var(--t-accent) 13%, transparent); border: 1px solid color-mix(in srgb, var(--t-accent) 26%, transparent); color: var(--accent2); } /* ── Form fields ──────────────────────────────────────────────── */ .form { animation: fade-up 0.8s 0.4s both; } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 11px; } .field label { font-size: .61rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted); } .field-wrap { position: relative; } .field-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted2); font-size: 13px; pointer-events: none; transition: color .3s; user-select: none; } .field input { width: 100%; background: color-mix(in srgb, var(--t-text) 3.8%, transparent); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px 12px 40px; font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 300; color: var(--text); outline: none; transition: border-color .3s, background .3s, box-shadow .3s; caret-color: var(--accent); /* Prevent iOS zoom */ -webkit-appearance: none; appearance: none; } .field input::placeholder { color: var(--muted2); } .field input:focus { border-color: var(--border-warm); background: color-mix(in srgb, var(--t-text) 5.5%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent) 5.5%, transparent); } .field-wrap:focus-within .field-icon { color: var(--accent-dim); } #register-name-field { display: none; } .forgot-row { text-align: right; margin: -2px 0 8px; } .forgot-link { font-size: .63rem; color: var(--muted2); letter-spacing: .4px; cursor: pointer; transition: color .2s; background: none; border: none; font-family: 'DM Sans', sans-serif; min-height: 36px; padding: 8px 0; -webkit-tap-highlight-color: transparent; } .forgot-link:hover { color: var(--muted); } /* ── Primary CTA ──────────────────────────────────────────────── */ .login-btn-primary { width: 100%; padding: 14px; min-height: 48px; margin-top: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--t-accent) 18%, transparent), color-mix(in srgb, var(--t-accent2) 11%, transparent)); border: 1px solid color-mix(in srgb, var(--t-accent) 36%, transparent); border-radius: var(--radius); color: var(--accent2); font-family: 'DM Sans', sans-serif; font-size: .71rem; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; transition: all .3s; overflow: hidden; -webkit-tap-highlight-color: transparent; } .login-btn-primary:hover { border-color: color-mix(in srgb, var(--t-accent) 58%, transparent); transform: translateY(-1px); box-shadow: 0 8px 28px color-mix(in srgb, var(--t-accent) 13%, transparent); } .login-btn-primary:active { transform: translateY(0); } .login-btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; } .section-div { text-align: center; font-size: .60rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted2); margin: 12px 0 8px; position: relative; } .section-div::before, .section-div::after { content: ''; position: absolute; top: 50%; height: 1px; background: var(--border); width: calc(50% - 16px); } .section-div::before { left: 0; } .section-div::after { right: 0; } .btn-guest { width: 100%; padding: 11px; min-height: 44px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--muted); font-family: 'DM Sans', sans-serif; font-size: .67rem; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: all .3s; -webkit-tap-highlight-color: transparent; } .btn-guest:hover { border-color: var(--border-warm); color: var(--text); background: color-mix(in srgb, var(--t-text) 3%, transparent); } /* ── Message ──────────────────────────────────────────────────── */ .msg { font-size: .67rem; text-align: center; margin-top: 10px; min-height: 18px; transition: all .3s; letter-spacing: .3px; line-height: 1.6; } .msg.error { color: var(--error); } .msg.success { color: var(--success); } .msg a, .msg button.msg-inline-btn { color: var(--accent2); text-decoration: underline; cursor: pointer; background: none; border: none; font: inherit; padding: 0; } .spinner { display: inline-block; width: 12px; height: 12px; border: 1.5px solid color-mix(in srgb, var(--t-accent2) 25%, transparent); border-top-color: var(--accent2); border-radius: 50%; animation: spin .7s linear infinite; margin-right: 8px; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Back button ──────────────────────────────────────────────── */ .back-btn { display: flex; align-items: center; gap: 7px; background: none; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font-family: 'DM Sans', sans-serif; font-size: .63rem; letter-spacing: 2px; text-transform: uppercase; padding: 8px 14px; min-height: 40px; cursor: pointer; transition: all .25s; margin-bottom: 14px; align-self: flex-start; -webkit-tap-highlight-color: transparent; } .back-btn:hover { border-color: var(--border-warm); color: var(--text); background: color-mix(in srgb, var(--t-text) 4%, transparent); } .back-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* ── Footer ───────────────────────────────────────────────────── */ .login-footer { width: min(420px, 100%); text-align: center; font-size: .59rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted2); padding: 16px 0; animation: fade-up 1.2s 0.7s both; } .login-footer span { color: color-mix(in srgb, var(--t-accent) 45%, transparent); } /* ── Social loading overlay ───────────────────────────────────── */ .social-loading { position: fixed; inset: 0; z-index: 9999; background: rgba(4,2,1,0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; opacity: 0; pointer-events: none; transition: opacity .3s; } .social-loading.show { opacity: 1; pointer-events: all; } .social-loading-spinner { width: 36px; height: 36px; border: 2px solid color-mix(in srgb, var(--t-accent) 18%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; } .social-loading-text { font-size: .70rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); } /* ── Discord gate screen ──────────────────────────────────────── */ #discord-gate { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; width: min(380px, 100%); text-align: center; padding: 48px 36px; background: color-mix(in srgb, var(--t-text) 4.7%, transparent); border: 1px solid color-mix(in srgb, var(--t-accent2) 13%, transparent); border-radius: var(--radius-lg); backdrop-filter: blur(48px) saturate(140%); -webkit-backdrop-filter: blur(48px) saturate(140%); box-shadow: 0 44px 90px rgba(0,0,0,0.6); animation: card-rise 0.9s cubic-bezier(.16,1,.3,1) both; } #discord-gate.active { display: flex; } .gate-logo { margin-bottom: 4px; } .gate-logo svg { width: 44px; height: 44px; stroke: var(--accent); fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; } .gate-title { font-family: 'Cormorant Garamond', serif; font-size: 1.55rem; font-weight: 300; color: var(--text); } .gate-title em { font-style: italic; color: var(--accent); } .gate-status { font-size: .70rem; color: var(--muted); letter-spacing: .5px; line-height: 1.75; } .gate-spinner { width: 26px; height: 26px; border: 2px solid color-mix(in srgb, var(--t-accent) 18%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: spin .85s linear infinite; } .gate-spinner.hidden { display: none; } .btn-retry { display: none; padding: 10px 24px; min-height: 40px; background: color-mix(in srgb, var(--t-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--t-accent) 30%, transparent); border-radius: var(--radius); color: var(--accent2); font-family: 'DM Sans', sans-serif; font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: all .3s; -webkit-tap-highlight-color: transparent; } .btn-retry.visible { display: block; } .btn-retry:hover { border-color: color-mix(in srgb, var(--t-accent) 55%, transparent); background: color-mix(in srgb, var(--t-accent) 16%, transparent); } /* ── Test-link button (temporary diagnostic) ─────────────────── */ .btn-test-link { display: none; padding: 10px 24px; min-height: 40px; background: rgba(110,160,220,0.10); border: 1px solid rgba(110,160,220,0.35); border-radius: var(--radius); color: #a8c8f0; font-family: 'DM Sans', sans-serif; font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: all .3s; -webkit-tap-highlight-color: transparent; } .btn-test-link.visible { display: block; } .btn-test-link:hover { border-color: rgba(110,160,220,.6); background: rgba(110,160,220,0.18); } .test-link-result { font-size: .63rem; color: var(--muted); letter-spacing: .3px; line-height: 1.6; max-width: 300px; word-break: break-word; } /* ── Device-blocked screen (phone / mobile detected) ────────────── */ #device-blocked { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; width: min(380px, 100%); text-align: center; padding: 48px 36px; background: color-mix(in srgb, var(--t-text) 4.7%, transparent); border: 1px solid color-mix(in srgb, var(--t-accent2) 13%, transparent); border-radius: var(--radius-lg); backdrop-filter: blur(48px) saturate(140%); -webkit-backdrop-filter: blur(48px) saturate(140%); box-shadow: 0 44px 90px rgba(0,0,0,0.6); animation: card-rise 0.9s cubic-bezier(.16,1,.3,1) both; } #device-blocked.active { display: flex; } .device-blocked-icon svg { width: 40px; height: 40px; stroke: var(--accent); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } /* ── Responsive ───────────────────────────────────────────────── */ @media (max-width: 480px) { .login-card { padding: 32px 24px 28px; border-radius: 22px; } .brand-name { font-size: 1.5rem; } .social-row { gap: 8px; } .btn-social { font-size: .66rem; letter-spacing: 1px; padding: 11px 10px; } } @media (max-height: 640px) { .login-card { padding: 26px 26px 22px; } .login-brand { margin-bottom: 16px; } .brand-logo { width: 42px; height: 42px; } .field { margin-bottom: 8px; } .login-btn-primary { margin-top: 10px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; } } /* ==== originally index.html lines 2563-2568 ==== */ .theme-swatch{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-family:inherit;color:var(--text);transition:border-color .25s,background .25s} .theme-swatch:hover{border-color:var(--border-warm);background:var(--surface-hover)} .theme-swatch.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset} .theme-swatch-dots{display:flex;gap:4px;flex-shrink:0} .theme-swatch-dots i{width:14px;height:14px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,0.15)} .theme-swatch-label{font-size:13px;letter-spacing:0.02em} /* ==== originally index.html lines 2607-3007 ==== */ #view-cafe-setup, #view-cafe-room { --cream: var(--text); --cream-dim: var(--muted); --text-faint: var(--muted2); --border-glow: var(--border-warm); --card-bg: var(--surface); --green: #4ade80; --rose: #ef4444; --amber: #f5a623; } /* ---- Room Setup ---- Two-column layout: Join/Active Rooms on the left (the "get into something already happening" path), Start a Cafe Room on the right (the "start your own" path) — reads left-to-right as join-first, create-second, same priority order the page already had top-to-bottom before this became two columns. #rs-bg-video is an optional full-bleed background video the user drops their own .webm into (see #rs-bg-video's below) — mirrors the Personal Block's photo-background treatment (.cafe-block-overlay) so Room Setup doesn't look flat/blank next to it. Safe with no file present: a