*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* ── AUTH GATE ── */
.auth-gate{position:fixed;inset:0;z-index:9000;background:var(--ink);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0}
.auth-gate:not(.auth-gate--hidden){animation:gateIn .25s ease forwards}
.auth-gate--hidden{display:none}
@keyframes gateIn{to{opacity:1}}
.auth-card{width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:0}
.auth-logo{font-family:'Playfair Display',serif;font-size:32px;font-weight:400;color:var(--cream);letter-spacing:-.5px;margin-bottom:24px}.auth-logo em{color:var(--amber);font-style:italic}
.auth-title{font-family:'Playfair Display',serif;font-size:22px;font-weight:400;color:var(--cream);margin-bottom:24px;letter-spacing:-.3px}
.auth-form{width:100%;display:flex;flex-direction:column;gap:10px}
.auth-input{width:100%;background:var(--ink2);border:1px solid var(--border);border-radius:12px;padding:13px 16px;font-family:'Instrument Sans',sans-serif;font-size:14px;color:var(--cream);outline:none;transition:border-color .2s}
.auth-input:focus{border-color:rgba(var(--accent-rgb),.5)}
.auth-input::placeholder{color:var(--cream3)}
.auth-error{font-size:12.5px;color:#e05c5c;min-height:18px;text-align:center;padding:0 4px}
.auth-btn-primary{width:100%;background:var(--amber);color:var(--ink);border:none;border-radius:12px;padding:13px;font-family:'Instrument Sans',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:opacity .2s,transform .15s}
.auth-btn-primary:hover{opacity:.88}
.auth-btn-primary:active{transform:scale(.98)}
.auth-divider{width:100%;display:flex;align-items:center;gap:10px;color:var(--cream3);font-size:12px;margin:2px 0}.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.auth-btn-google{width:100%;background:var(--ink2);border:1px solid var(--border);border-radius:12px;padding:12px;font-family:'Instrument Sans',sans-serif;font-size:14px;color:var(--cream2);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:border-color .2s,background .2s}
.auth-btn-google:hover{border-color:var(--border2);background:var(--ink3)}
.auth-confirm-hidden{display:none}
#authForm[data-mode="signup"] .auth-confirm-hidden{display:block}
.auth-forgot{background:none;border:none;font-family:'Instrument Sans',sans-serif;font-size:12px;color:var(--cream3);cursor:pointer;text-align:right;padding:0;transition:color .2s;align-self:flex-end}
.auth-forgot:hover{color:var(--cream)}
#authForm[data-mode="signup"] .auth-forgot{display:none}
.auth-toggle{margin-top:20px;background:none;border:none;font-family:'Instrument Sans',sans-serif;font-size:13px;color:var(--cream3);cursor:pointer;transition:color .2s}
.auth-toggle:hover{color:var(--cream)}
.auth-context-msg{width:100%;font-size:13px;color:var(--amber);text-align:center;padding:9px 14px;background:rgba(232,168,76,.07);border:1px solid rgba(232,168,76,.18);border-radius:10px;margin-bottom:18px;line-height:1.5}
.auth-guest-btn{margin-top:14px;background:none;border:none;font-family:'Instrument Sans',sans-serif;font-size:12.5px;color:var(--cream3);cursor:pointer;text-decoration:underline;text-decoration-color:rgba(138,117,96,.4);padding:4px 0;transition:color .2s}
.auth-guest-btn:hover{color:var(--cream2)}
:root{
  --ink:#0E0D0B;--ink2:#1A1915;--ink3:#252420;--ink4:#32302A;--ink5:#3E3B33;
  --amber:#E8A84C;--amber-dim:#C48A30;--amber-soft:#2A2318;
  --accent-rgb:232,168,76;
  --cream:#F7EFDF;--cream2:#D2C4A8;--cream3:#A9997C;
  --green:#7DBF8E;--green-soft:#162018;--rose:#D4826A;
  --green-rgb:125,191,142;
  --blue:#6A9FD4;
  --border:rgba(255,255,255,0.06);--border2:rgba(255,255,255,0.11);
  --shadow:0 2px 24px rgba(0,0,0,0.35);--shadow-lg:0 16px 64px rgba(0,0,0,0.5);
  --hm-empty:rgba(255,255,255,.08);--hm-level-1:rgba(var(--accent-rgb),.24);--hm-level-2:rgba(var(--accent-rgb),.42);--hm-level-3:rgba(var(--accent-rgb),.66);--hm-level-4:rgba(var(--accent-rgb),.94);--hm-future:rgba(255,255,255,.09);--hm-out:rgba(255,255,255,.05);--hm-cell-border:rgba(255,255,255,.10);--hm-grid-line:rgba(255,255,255,.06);--hm-hover-ring:rgba(255,255,255,.18);--hm-tooltip-bg:rgba(10,10,10,.96);--hm-tooltip-text:#F7EFDF;--stats-pill-bg:rgba(255,255,255,.04);--stats-pill-border:rgba(255,255,255,.08);
}
html{scroll-behavior:smooth}
body{font-family:'Instrument Sans',sans-serif;background:var(--ink);color:var(--cream);height:100vh;display:flex;flex-direction:column;overflow:hidden}
body::before{content:'';position:fixed;inset:0;z-index:0;background:radial-gradient(ellipse 60% 50% at 18% 10%,rgba(var(--accent-rgb),.08) 0%,transparent 60%),radial-gradient(ellipse 40% 60% at 85% 80%,rgba(125,191,142,0.05) 0%,transparent 55%);pointer-events:none}
body::after{content:'';position:fixed;inset:0;z-index:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");background-size:180px;pointer-events:none;opacity:.55}
.z1{position:relative;z-index:1}
.topbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px;padding:16px 36px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200;background:rgba(14,13,11,0.88);backdrop-filter:blur(20px)}
.logo{font-family:'Playfair Display',serif;font-size:21px;letter-spacing:-.4px;color:var(--cream);position:relative;z-index:202;justify-self:start}
.logo em{color:var(--amber);font-style:italic}
.topbar-nav{display:flex;align-items:center;gap:3px;background:var(--ink2);border:1px solid var(--border);border-radius:50px;padding:3px;justify-self:center;position:relative;z-index:201;min-width:max-content;max-width:100%}
.tnav{padding:6px 16px;border-radius:50px;border:none;background:none;color:var(--cream3);font-family:'Instrument Sans',sans-serif;font-size:12.5px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}
.tnav.active{background:var(--ink3);color:var(--cream);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.tnav:hover:not(.active){color:var(--cream2)}
.topbar-right{display:flex;align-items:center;justify-self:end;gap:10px;min-width:0;position:relative;z-index:202}
/* ── Hamburger burger button (hidden on desktop) ── */
.nav-burger{display:none;position:relative;justify-content:center;align-items:center;width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.09);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.1),rgba(255,255,255,.03) 48%,rgba(255,255,255,.02) 100%),rgba(26,25,21,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 26px rgba(0,0,0,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer;padding:0;flex-shrink:0;transition:transform .22s cubic-bezier(.34,1.56,.64,1),border-color .18s ease,box-shadow .18s ease,background .18s ease}
.nav-burger:hover{transform:translateY(-1px) scale(1.02);border-color:rgba(var(--accent-rgb),.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 14px 30px rgba(0,0,0,.26),0 0 0 1px rgba(var(--accent-rgb),.07)}
.nav-burger:focus-visible{outline:none;border-color:rgba(var(--accent-rgb),.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 3px rgba(var(--accent-rgb),.14),0 12px 28px rgba(0,0,0,.24)}
.nav-burger.active{border-color:rgba(var(--accent-rgb),.38);background:radial-gradient(circle at 50% 35%,rgba(var(--accent-rgb),.2),rgba(255,255,255,.04) 46%,rgba(255,255,255,.02) 100%),rgba(26,25,21,.92);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 16px 34px rgba(0,0,0,.3),0 0 32px rgba(var(--accent-rgb),.14)}
.nav-burger-bar{position:absolute;display:block;border-radius:999px;transition:transform .24s cubic-bezier(.34,1.56,.64,1),opacity .18s ease,background .18s ease,box-shadow .18s ease}
.nav-burger-bar{width:14px;height:1.5px;background:var(--cream2);box-shadow:0 1px 0 rgba(0,0,0,.1)}
.nav-burger-bar:nth-child(1){transform:translateY(-6px)}
.nav-burger-bar:nth-child(2){transform:translateY(0)}
.nav-burger-bar:nth-child(3){transform:translateY(6px)}
.nav-burger.active .nav-burger-bar:nth-child(1){transform:rotate(45deg);background:var(--amber)}
.nav-burger.active .nav-burger-bar:nth-child(2){opacity:0;transform:scaleX(.2)}
.nav-burger.active .nav-burger-bar:nth-child(3){transform:rotate(-45deg);background:var(--amber)}
/* backdrop when nav dropdown is open */
.nav-backdrop{display:none;position:fixed;inset:0;z-index:198;background:rgba(0,0,0,.3);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.nav-backdrop.active{display:block}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--rose);flex-shrink:0;animation:livePulse 2.5s infinite}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(212,130,106,.5)}50%{box-shadow:0 0 0 4px rgba(212,130,106,0)}}
.avatar-btn{width:33px;height:33px;border-radius:50%;background:var(--amber-soft);border:1.5px solid var(--amber-dim);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--amber);cursor:pointer;transition:all .2s;font-family:'Instrument Sans',sans-serif}
.avatar-btn:hover{border-color:var(--amber);transform:scale(1.05)}
.avatar-btn--authed{background:rgba(232,168,76,.15);border-color:var(--amber)}
.icon-btn{width:33px;height:33px;border-radius:50%;background:none;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:var(--cream3)}
.icon-btn:hover{border-color:var(--border2);color:var(--cream2)}
.view{display:none}.view.active{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--ink4) transparent}
.focus-center{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;max-width:820px;margin:0 auto;width:100%;align-self:center}
.mode-pill-wrap{display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:50px;padding:4px;margin-bottom:40px;position:relative;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 24px rgba(0,0,0,.25);align-self:center}
.mode-pill-indicator{position:absolute;top:4px;height:calc(100% - 8px);background:linear-gradient(135deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.06) 100%);border:1px solid rgba(255,255,255,.18);border-radius:50px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 8px rgba(0,0,0,.3);transition:left .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1);z-index:0;backdrop-filter:blur(8px)}
.mode-pill{padding:9px 24px;border-radius:50px;border:none;background:none;font-family:'Instrument Sans',sans-serif;font-size:13px;font-weight:500;color:rgba(245,237,216,.4);cursor:pointer;transition:color .2s;position:relative;z-index:1;white-space:nowrap;letter-spacing:.01em}
.mode-pill:hover{color:rgba(245,237,216,.75)}
.mode-pill.active{color:var(--cream)}
.timer-num-center{font-family:'Playfair Display',serif;font-size:160px;letter-spacing:-6px;line-height:.88;color:var(--cream);font-variant-numeric:tabular-nums;transition:color .5s ease,text-shadow .5s ease;user-select:none;text-align:center;width:100%;margin:4px 0 0}
.timer-unit{display:inline-block;font-size:.42em;line-height:1;vertical-align:.22em;letter-spacing:0;margin-left:.05em}
.timer-num-center.live{color:var(--amber);text-shadow:0 0 100px rgba(var(--accent-rgb),.22)}
.timer-num-center.break-live{color:var(--green);text-shadow:0 0 100px rgba(125,191,142,.18)}
@keyframes dflip{0%{transform:translateY(-6px);opacity:.3}100%{transform:translateY(0);opacity:1}}
.dflip{animation:dflip .18s cubic-bezier(.22,.61,.36,1) both}
.bar-track-center{width:84%;height:6px;background:var(--ink4);border-radius:5px;margin:36px auto 0;overflow:hidden;position:relative}
.session-pips-center{display:flex;align-items:center;justify-content:center;gap:5px;margin:14px 0 0;width:100%}
.controls-center{display:flex;align-items:center;justify-content:center;gap:12px;margin:24px 0 0;width:100%}
.btn-start-center{display:flex;align-items:center;gap:9px;background:var(--amber);color:var(--ink);border:none;border-radius:50px;padding:13px 36px;font-family:'Instrument Sans',sans-serif;font-size:15px;font-weight:500;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px 20px rgba(var(--accent-rgb),.25)}
.btn-start-center:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 28px rgba(var(--accent-rgb),.38)}
.btn-start-center:active{transform:scale(.98)}
.btn-start-center.paused{background:var(--ink3);color:var(--cream2);box-shadow:none;border:1px solid var(--border2)}
.btn-start-center.break-mode{background:var(--green);box-shadow:0 4px 20px rgba(125,191,142,.2)}
.btn-sm-center{background:none;border:1px solid var(--border);border-radius:50px;padding:11px 20px;font-family:'Instrument Sans',sans-serif;font-size:13px;color:var(--cream3);cursor:pointer;transition:all .2s}
.btn-sm-center:hover{border-color:var(--border2);color:var(--cream2)}
.btn-tasks-toggle{position:relative;background:var(--ink2);border:1px solid var(--border);border-radius:50px;padding:11px 16px;color:var(--cream3);cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px}
.btn-tasks-toggle:hover{border-color:var(--border2);color:var(--cream2)}
.task-badge-count{position:absolute;top:-5px;right:-5px;background:var(--amber);color:var(--ink);border-radius:50%;width:16px;height:16px;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:'Instrument Sans',sans-serif}
.timer-context-center{font-size:13px;color:var(--cream3);margin-top:16px;text-align:center;min-height:18px;width:100%;transition:transform .22s ease,opacity .22s ease,filter .22s ease}
.timer-context-center--active{color:var(--cream);filter:drop-shadow(0 8px 24px rgba(var(--accent-rgb),.14));animation:onDeckGlow 2.2s ease-in-out infinite}
.timer-context-center--pulse{animation:onDeckPulse .7s cubic-bezier(.34,1.56,.64,1)}
.timer-context-kicker{display:block;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--amber);margin-bottom:4px;opacity:.95;animation:onDeckKicker 1.4s ease-in-out infinite alternate}
.timer-context-center em{--timer-context-em-base:var(--cream2);display:inline-block;color:var(--timer-context-em-base);font-style:normal;font-weight:700}
.timer-context-center--active em{background:linear-gradient(110deg,var(--timer-context-em-base) 0%,var(--timer-context-em-base) 42%,rgba(255,255,255,.98) 50%,var(--timer-context-em-base) 58%,var(--timer-context-em-base) 100%);background-size:220% 100%;background-position:130% 50%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:taskBladeShine 6.2s ease-in-out infinite;text-shadow:0 0 18px rgba(var(--accent-rgb),.12)}
@keyframes onDeckPulse{0%{transform:scale(.94);opacity:.72}55%{transform:scale(1.05);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes onDeckGlow{0%,100%{transform:translateY(0);text-shadow:0 0 0 rgba(var(--accent-rgb),0)}50%{transform:translateY(-1px);text-shadow:0 0 16px rgba(var(--accent-rgb),.22)}}
@keyframes onDeckKicker{0%{opacity:.7;letter-spacing:1.8px}100%{opacity:1;letter-spacing:2.2px}}
@keyframes taskBladeShine{0%,24%{background-position:130% 50%}42%,100%{background-position:-40% 50%}}
.focus-quote{font-family:'Playfair Display',serif;font-style:italic;font-size:13.5px;color:var(--cream3);text-align:center;margin-top:32px;line-height:1.7;max-width:400px;opacity:.6;min-height:22px;transition:opacity .5s}
.drawer-overlay{position:fixed;left:0;right:0;top:65px;bottom:0;background:rgba(0,0,0,0);z-index:209;pointer-events:none;transition:background .3s}
.drawer-overlay.open{background:rgba(0,0,0,0.5);pointer-events:auto}
.drawer{position:fixed;left:0;top:65px;bottom:0;width:360px;max-width:92vw;background:var(--ink2);border-right:1px solid var(--border2);z-index:210;transform:translateX(-100%);transition:transform .32s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:24px;overflow-y:auto;pointer-events:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.drawer.open{transform:translateX(0)}
.drawer-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-shrink:0}
.drawer-close{background:none;border:1px solid var(--border);border-radius:8px;padding:6px 8px;color:var(--cream3);cursor:pointer;transition:all .2s;display:flex;align-items:center}
.drawer-close:hover{border-color:var(--border2);color:var(--cream)}
.drawer-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:16px;border-top:1px solid var(--border);flex-shrink:0}
.main-grid{display:grid;grid-template-columns:1fr 310px;gap:20px;max-width:1060px;margin:0 auto;width:100%;padding:28px 32px;align-items:start}
.left{display:flex;flex-direction:column;gap:16px}
.right{display:flex;flex-direction:column;gap:14px}
.card{background:var(--ink2);border:1px solid var(--border);border-radius:20px;overflow:hidden;transition:border-color .3s}
.card:hover{border-color:var(--border2)}
.card-inner{padding:26px 28px}
.timer-card{background:var(--ink2);border:1px solid var(--border);border-radius:5px;position:relative;overflow:hidden;transition:border-color .3s}
.timer-card::before{content:'';position:absolute;top:-80px;right:-80px;width:300px;height:300px;background:radial-gradient(circle,rgba(var(--accent-rgb),.09) 0%,transparent 65%);pointer-events:none;transition:opacity .5s}
.timer-card.running::before{opacity:1.8}
.timer-inner{padding:26px 26px 18px}
.mode-tabs{display:flex;gap:0;margin-bottom:24px;border-bottom:1px solid var(--border)}
.mtab{padding:7px 18px 9px;border:none;background:none;font-family:'Instrument Sans',sans-serif;font-size:12.5px;font-weight:500;color:var(--cream3);cursor:pointer;transition:all .2s;position:relative;border-bottom:2px solid transparent;margin-bottom:-1px}
.mtab:hover{color:var(--cream2)}
.mtab.active{color:var(--amber);border-bottom-color:var(--amber)}
.timer-eyebrow{font-size:10px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:var(--cream3);margin-bottom:4px;transition:color .4s}
.timer-eyebrow.live{color:var(--amber)}
.timer-eyebrow.break-live{color:var(--green)}
.timer-num{font-family:'Playfair Display',serif;font-size:96px;letter-spacing:-5px;line-height:.9;color:var(--cream);font-variant-numeric:tabular-nums;transition:color .5s ease,text-shadow .5s ease;user-select:none;position:relative}
.timer-num.live{color:var(--amber);text-shadow:0 0 80px rgba(var(--accent-rgb),.28)}
.timer-num.break-live{color:var(--green);text-shadow:0 0 80px rgba(125,191,142,.22)}
.fs-btn{display:none}
.bar-track{width:100%;height:6px;background:var(--ink4);border-radius:5px;margin:18px 0;overflow:hidden;position:relative}
.bar-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--amber-dim),var(--amber));transition:width .95s cubic-bezier(.4,0,.2,1),background .6s ease;position:relative;will-change:width;transform-origin:right center}
.bar-fill.break-fill{background:linear-gradient(90deg,#4a9b5e,var(--green))}
.session-pips{display:flex;align-items:center;gap:5px;margin-bottom:16px}
.spip{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:var(--ink4);border:1px solid var(--ink5);transition:width .35s cubic-bezier(.34,1.56,.64,1),border-radius .35s cubic-bezier(.34,1.56,.64,1),background .35s,border-color .35s,box-shadow .35s,transform .35s}
.spip.done{width:18px;height:7px;border-radius:100px;background:var(--amber);border-color:var(--amber);}
.spip.cur{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22);animation:pipPulse 2s infinite;transform:scale(1.15)}
@keyframes pipPulse{0%,100%{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2)}50%{box-shadow:0 0 0 5px rgba(var(--accent-rgb),.07)}}
@keyframes modeShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.pip-shake{animation:modeShake .45s ease}
.pip-lbl-txt{font-size:11px;color:var(--cream3);margin-left:4px;opacity:.6}
.timer-context{font-size:13.5px;color:var(--cream3);margin-bottom:20px;min-height:18px}
.timer-context em{color:var(--cream2);font-style:normal;font-weight:500}
.controls{display:flex;align-items:center;gap:10px}
.btn-start{display:flex;align-items:center;gap:9px;background:var(--amber);color:var(--ink);border:none;border-radius:50px;padding:12px 28px;font-family:'Instrument Sans',sans-serif;font-size:14px;font-weight:500;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px 20px rgba(var(--accent-rgb),.25);position:relative;overflow:hidden}
.btn-start:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 28px rgba(var(--accent-rgb),.38)}
.btn-start:active{transform:scale(.98)}
.btn-start.paused{background:var(--ink3);color:var(--cream2);box-shadow:none;border:1px solid var(--border2)}
.btn-start.break-mode{background:var(--green);box-shadow:0 4px 20px rgba(125,191,142,.2)}
.btn-sm{background:none;border:1px solid var(--border);border-radius:50px;padding:10px 18px;font-family:'Instrument Sans',sans-serif;font-size:13px;color:var(--cream3);cursor:pointer;transition:all .2s}
.btn-sm:hover{border-color:var(--border2);color:var(--cream2)}
.util-row{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0 0;width:100%}
.pip-trigger{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:50px;padding:8px 16px;font-size:11.5px;color:var(--cream3);cursor:pointer;transition:all .25s;width:fit-content;font-family:'Instrument Sans',sans-serif}
.pip-trigger:hover{border-color:rgba(var(--accent-rgb),.45);color:var(--amber-dim);background:var(--amber-soft)}
.topbar-icon{width:44px;height:44px;border-radius:50%;background:none;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:var(--cream3);flex-shrink:0}
.topbar-icon:hover{border-color:var(--border2);color:var(--amber)}
.topbar-icon.active-icon{border-color:var(--amber);color:var(--amber);background:var(--amber-soft)}
/* ── AMBIENT SOUND MODAL ── */
/* Backdrop */
.snd-backdrop{position:fixed;inset:0;z-index:299;background:rgba(0,0,0,0.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;pointer-events:none;transition:opacity .28s ease}
.snd-backdrop.open{opacity:1;pointer-events:auto}
/* Modal container — desktop centered, mobile bottom sheet */
.snd-modal{position:fixed;z-index:300;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);width:min(640px,calc(100vw - 48px));height:min(720px,82vh);max-height:82vh;background:var(--ink2);border:1px solid var(--border2);border-radius:24px;box-shadow:var(--shadow-lg),0 0 80px rgba(var(--accent-rgb),.06);display:flex;flex-direction:column;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .28s ease,transform .28s cubic-bezier(.34,1.2,.64,1)}
.snd-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
/* Sheet drag handle (mobile only) */
.snd-sheet-handle{display:none;width:36px;height:4px;background:var(--ink5);border-radius:2px;margin:12px auto 0;flex-shrink:0}
/* Header */
.snd-modal-hdr{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border);flex-shrink:0}
.snd-modal-title{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--cream2);font-weight:500;flex:0 0 auto}
.snd-modal-close{width:28px;height:28px;border-radius:50%;background:none;border:1px solid var(--border);color:var(--cream3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.snd-modal-close:hover{border-color:var(--border2);color:var(--cream)}
.snd-modal-controls{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.snd-master-range{flex:1;cursor:pointer;-webkit-appearance:none;appearance:none;background:transparent;height:12px;display:flex;align-items:center}
.snd-master-range::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--amber) var(--pct,70%),rgba(255,255,255,.12) var(--pct,70%));border-radius:1px}
.snd-master-range::-moz-range-track{height:2px;background:rgba(255,255,255,.12);border-radius:1px}
.snd-master-range::-moz-range-progress{height:2px;background:var(--amber);border-radius:1px}
.snd-master-range::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:8px;border-radius:50%;background:var(--cream);margin-top:-3px;border:none;box-shadow:0 1px 4px rgba(0,0,0,.6);transition:transform .15s}
.snd-master-range::-moz-range-thumb{width:8px;height:8px;border-radius:50%;background:var(--cream);border:none;box-shadow:0 1px 4px rgba(0,0,0,.6)}
.snd-master-range:hover::-webkit-slider-thumb{transform:scale(1.3)}
.snd-master-range:hover::-moz-range-thumb{transform:scale(1.3)}
/* Now Playing strip */
.snd-now-playing{display:flex;align-items:center;gap:6px;max-width:0;overflow:hidden;opacity:0;transition:max-width .3s ease,opacity .22s ease;flex-shrink:0}
.snd-now-playing.visible{max-width:220px;opacity:1}
.snd-np-chips{display:flex;gap:4px;flex-wrap:nowrap}
.snd-np-chip{background:var(--amber-soft);border:1px solid rgba(var(--accent-rgb),.3);border-radius:20px;padding:3px 8px;font-size:13px;animation:chipIn .2s cubic-bezier(.34,1.56,.64,1)}
@keyframes chipIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
.snd-pause-all-btn{padding:5px 12px;border-radius:20px;border:1px solid rgba(var(--accent-rgb),.3);background:var(--amber-soft);color:var(--amber);font-size:11px;font-family:'Instrument Sans',sans-serif;cursor:pointer;flex-shrink:0;transition:all .2s}
.snd-pause-all-btn:hover{background:rgba(var(--accent-rgb),.2)}
.snd-pause-all-btn.paused{border-color:rgba(var(--accent-rgb),.6);background:rgba(var(--accent-rgb),.15)}
/* Lofi Girl featured card */
.snd-lofi-feature{padding:12px 16px 4px;flex-shrink:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.snd-card-synthwave.playing{background:rgba(106,159,212,.12);border-color:rgba(106,159,212,.4);box-shadow:0 0 0 2px var(--blue),0 0 18px rgba(106,159,212,.2)}
.snd-card-synthwave.playing .snd-card-label{color:var(--blue)}
.snd-card-synthwave .snd-card-wave span{background:var(--blue)!important}
.snd-card-synthwave .snd-card-vol::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--blue) var(--pct,75%),rgba(255,255,255,.1) var(--pct,75%))}
.snd-card-synthwave .snd-card-vol::-moz-range-progress{background:var(--blue)}
.snd-card-lofi{flex-direction:row!important;justify-content:flex-start!important;padding:12px 16px!important;gap:12px;background:rgba(212,130,106,.07)!important;border-color:rgba(212,130,106,.2)!important}
.snd-card-lofi .snd-card-icon{font-size:22px;flex-shrink:0}
.snd-card-lofi-text{display:flex;align-items:center;gap:8px;flex:1}
.snd-card-lofi .snd-card-label{font-size:13px;color:var(--cream2)}
.snd-card-lofi.playing{box-shadow:0 0 0 2px var(--rose),0 0 18px rgba(212,130,106,.25)!important}
.snd-card-lofi .snd-card-wave{position:static;flex-shrink:0}
.snd-card-lofi .snd-card-wave span{background:var(--rose)!important}
/* Category tabs */
.snd-tabs{display:flex;gap:2px;padding:12px 16px 4px;overflow-x:auto;flex-shrink:0;scrollbar-width:none}
.snd-tabs::-webkit-scrollbar{display:none}
.snd-tab{padding:6px 14px;border-radius:50px;border:none;background:none;font-family:'Instrument Sans',sans-serif;font-size:12px;font-weight:500;color:var(--cream3);cursor:pointer;transition:all .18s;white-space:nowrap;flex-shrink:0}
.snd-tab:hover{color:var(--cream2);background:var(--ink3)}
.snd-tab--active{background:var(--amber-soft);color:var(--amber);border:1px solid rgba(var(--accent-rgb),.25)}
/* Sound card grid */
.snd-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 16px 20px;overflow-y:auto;flex:1 1 auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--ink4) transparent;overscroll-behavior:contain}
/* Sound cards */
.snd-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px 8px 20px;background:var(--ink3);border:1px solid var(--border);border-radius:16px;cursor:pointer;transition:all .2s;overflow:hidden;min-height:80px;user-select:none}
@media(hover:hover) and (pointer:fine){.snd-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3)}}
.snd-card:active{transform:scale(.97)}
.snd-card.playing{background:var(--amber-soft);border-color:rgba(var(--accent-rgb),.4);box-shadow:0 0 0 2px var(--amber),0 0 18px rgba(var(--accent-rgb),.2)}
.snd-card.loading{opacity:.65;pointer-events:none}
.snd-card--hidden{display:none}
.snd-card-icon{font-size:26px;line-height:1;transition:transform .3s}
@media(hover:hover) and (pointer:fine){.snd-card:hover .snd-card-icon{transform:scale(1.12)}}
.snd-card-label{font-size:10.5px;color:var(--cream3);font-weight:500;text-align:center;line-height:1.3}
.snd-card.playing .snd-card-label{color:var(--amber)}
/* Card wave bars — bottom-right corner */
.snd-card-wave{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:2px;opacity:0;transition:opacity .2s}
.snd-card.playing .snd-card-wave{opacity:1}
.snd-card-wave span{display:block;width:2px;background:var(--amber);border-radius:1px;animation:soundWave 1s ease infinite}
.snd-card-wave span:nth-child(2){animation-delay:.15s}
.snd-card-wave span:nth-child(3){animation-delay:.3s}
@keyframes soundWave{0%,100%{height:3px}50%{height:9px}}
/* Card loading spinner */
.snd-card-spinner{display:none;position:absolute;top:8px;right:8px;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--amber);border-top-color:transparent;animation:spin .6s linear infinite}
.snd-card.loading .snd-card-spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
/* Card volume slider — hover reveal */
.snd-card-vol-wrap{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60%;padding:2px 0 5px;opacity:0;transition:opacity .2s}
@media(hover:hover) and (pointer:fine){.snd-card:hover .snd-card-vol-wrap{opacity:1}}
.snd-card.playing .snd-card-vol-wrap{opacity:1}
.snd-card-vol{width:100%;cursor:pointer;-webkit-appearance:none;appearance:none;background:transparent;height:10px;display:flex;align-items:center}
.snd-card-vol::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--amber) var(--pct,75%),rgba(255,255,255,.1) var(--pct,75%));border-radius:1px}
.snd-card-vol::-moz-range-track{height:2px;background:rgba(255,255,255,.1);border-radius:1px}
.snd-card-vol::-moz-range-progress{height:2px;background:var(--amber);border-radius:1px}
.snd-card-vol::-webkit-slider-thumb{-webkit-appearance:none;width:7px;height:7px;border-radius:50%;background:var(--cream);margin-top:-2.5px;border:none;box-shadow:0 1px 3px rgba(0,0,0,.6);transition:transform .15s}
.snd-card-vol::-moz-range-thumb{width:7px;height:7px;border-radius:50%;background:var(--cream);border:none;box-shadow:0 1px 3px rgba(0,0,0,.6)}
.snd-card-vol:hover::-webkit-slider-thumb{transform:scale(1.3)}
.snd-card-vol:hover::-moz-range-thumb{transform:scale(1.3)}
.snd-card-lofi .snd-card-vol::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--rose) var(--pct,70%),rgba(255,255,255,.1) var(--pct,70%))}
.snd-card-lofi .snd-card-vol::-moz-range-progress{background:var(--rose)}
/* Inline vol slider for lofi/stream cards */
.snd-card-vol--inline{position:static;width:80px;flex-shrink:0;opacity:.5;transition:opacity .2s}
.snd-card-lofi:hover .snd-card-vol--inline,.snd-card-lofi.playing .snd-card-vol--inline{opacity:1}
/* Lofi live badge */
.snd-live-badge{background:rgba(212,130,106,.15);color:var(--rose);border-radius:3px;padding:1px 5px;font-size:9px;font-weight:600;letter-spacing:.5px;margin-left:5px}
/* Ambiance trigger button */
.ambiance-btn{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:50px;padding:8px 12px;font-size:11.5px;color:var(--cream3);cursor:pointer;transition:all .25s;font-family:'Instrument Sans',sans-serif;width:fit-content}
.ambiance-btn.active-icon{border-color:rgba(var(--accent-rgb),.5);color:var(--amber);background:var(--amber-soft);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08)}
.ambiance-btn-playing{display:flex;align-items:center;gap:2px;max-width:0;overflow:hidden;opacity:0;transition:opacity .2s,max-width .2s}
.ambiance-btn.active-icon .ambiance-btn-playing{opacity:1;max-width:18px}
.ambiance-btn-playing span{display:block;width:2px;background:var(--amber);border-radius:1px;animation:soundWave 1s ease infinite}
.ambiance-btn-playing span:nth-child(2){animation-delay:.15s}
.ambiance-btn-playing span:nth-child(3){animation-delay:.3s}
/* Mobile: bottom sheet */
@media(max-width:600px){
  .snd-sheet-handle{display:block}
  .snd-modal{left:0;bottom:0;top:auto;transform:translateY(8px);width:100%;height:88vh;max-height:88vh;border-radius:24px 24px 0 0}
  .snd-modal.open{transform:translateY(0)}
  .snd-lofi-feature{grid-template-columns:1fr}
  .snd-card-lofi{min-width:0}
  .snd-card-lofi-text{min-width:0}
  .snd-card-vol--inline{width:72px}
  .snd-card-grid{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:380px){.snd-card-grid{grid-template-columns:repeat(2,1fr)}}
/* ── Settings shell ── */
#view-settings{scroll-behavior:smooth}
.settings-shell{display:grid;grid-template-columns:205px 1fr;height:100%;overflow:hidden}
.settings-nav{background:var(--ink2);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:28px 12px 20px;overflow-y:auto;gap:0;flex-shrink:0}
.snav-brand{padding:2px 8px 22px}
.snav-logo{font-size:20px;font-weight:600;color:var(--cream);letter-spacing:-.3px;line-height:1}
.snav-logo em{color:var(--amber);font-style:normal}
.snav-tagline{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--cream3);opacity:.3;margin-top:5px}
.snav-list{display:flex;flex-direction:column;gap:2px;flex:1}
.snav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;font-size:13px;color:var(--cream3);cursor:pointer;background:none;border:none;transition:background .15s,color .15s;font-family:'Instrument Sans',sans-serif;font-weight:500;text-align:left;width:100%;white-space:nowrap}
.snav-item:hover{background:var(--ink3);color:var(--cream2)}
.snav-item.active{background:rgba(var(--accent-rgb),.12);color:var(--amber)}
.snav-item svg{opacity:.45;flex-shrink:0;transition:opacity .15s}
.snav-item:hover svg{opacity:.7}
.snav-item.active svg{opacity:1}
.snav-divider{height:1px;background:var(--border);margin:8px 4px;flex-shrink:0}
.snav-footer{margin-top:auto;padding:18px 8px 0;font-size:10px;color:var(--cream3);opacity:.22;flex-shrink:0}
.settings-panes{overflow-y:auto;background:var(--ink);scroll-behavior:smooth}
.settings-pane{display:none;padding:48px 56px;max-width:840px}
.settings-pane.active{display:block;animation:pane-in .18s ease}
@keyframes pane-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.spane-header{margin-bottom:38px;padding-bottom:28px;border-bottom:1px solid var(--border)}
.spane-title{font-family:'Playfair Display',serif;font-size:32px;letter-spacing:-.6px;color:var(--cream);line-height:1.1}
.spane-sub{font-size:13.5px;color:var(--cream3);margin-top:9px;opacity:.58;line-height:1.55}
.sgroup{background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.015) 100%),var(--ink2);border:1px solid var(--border);border-radius:22px;padding:22px 22px 10px;margin-bottom:16px;transition:border-color .2s,transform .2s,box-shadow .2s;box-shadow:0 8px 30px rgba(0,0,0,.16);position:relative;overflow:hidden}
.sgroup::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.28),transparent);pointer-events:none}
.sgroup:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:0 14px 34px rgba(0,0,0,.22)}
.sgroup-label{font-size:10px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;color:var(--cream3);opacity:.78;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.sgroup-label::before{content:'';display:block;width:26px;height:1px;background:linear-gradient(90deg,var(--amber),transparent);border-radius:2px;opacity:.9;flex-shrink:0}
.sgroup-sub{font-size:12.5px;color:var(--cream3);opacity:.62;margin:-4px 0 16px;line-height:1.6;max-width:54ch}
.sgroup-tip{font-size:11.5px;color:var(--cream3);opacity:.6;margin:6px 0 14px;line-height:1.7;padding:12px 14px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:14px}
/* segmented control */
.seg-ctrl{display:flex;background:var(--ink3);border-radius:10px;padding:3px;gap:2px;flex-shrink:0}
.seg-btn{background:none;border:none;border-radius:7px;padding:5px 14px;font-size:12px;font-family:'Instrument Sans',sans-serif;color:var(--cream3);cursor:pointer;transition:all .18s;font-weight:500;white-space:nowrap}
.seg-btn.active{background:var(--ink);color:var(--cream);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.seg-btn:hover:not(.active){color:var(--cream2)}
/* about */
.about-row{display:flex;align-items:center;gap:16px;padding:8px 0 16px}
.about-logo{font-size:24px;font-family:'Playfair Display',serif;font-weight:500;color:var(--cream);letter-spacing:-.3px}
.about-logo em{color:var(--amber);font-style:italic}
.about-desc{font-size:12px;color:var(--cream3);opacity:.4}
/* keep section-lbl for any legacy refs */
.settings-section-lbl{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--cream3);margin-bottom:16px;opacity:.65}
.settings-section-lbl::before{content:'';display:block;width:2.5px;height:11px;background:var(--amber);border-radius:2px;opacity:.9;flex-shrink:0}
.settings-grid{display:flex;flex-direction:column}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 16px;border-radius:16px;border:1px solid transparent;border-bottom:1px solid var(--border);transition:background .15s,border-color .15s,transform .15s}
.setting-row:last-child{border-bottom:none}
.setting-row:hover{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.05);transform:translateY(-1px)}
.setting-label{font-size:14px;color:var(--cream);font-weight:600;letter-spacing:-.01em}
.setting-sub{font-size:12.5px;color:var(--cream3);margin-top:4px;opacity:.62;line-height:1.55;max-width:46ch}
.setting-ctrl{display:flex;align-items:center;gap:10px;flex-shrink:0}
.setting-input{background:rgba(255,255,255,.03);border:1px solid var(--border2);border-radius:10px;padding:8px 10px;font-family:'Instrument Sans',sans-serif;font-size:13px;color:var(--cream);width:64px;text-align:center;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
.setting-input:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);background:rgba(255,255,255,.05)}
.setting-unit{font-size:12px;color:var(--cream3)}
.setting-btn-danger{background:none;border:1px solid rgba(212,130,106,.3);border-radius:8px;padding:7px 14px;font-family:'Instrument Sans',sans-serif;font-size:12.5px;color:var(--rose);cursor:pointer;transition:all .2s;flex-shrink:0;white-space:nowrap}
.setting-btn-danger:hover{background:rgba(212,130,106,.1);border-color:var(--rose)}
.setting-btn-small{background:none;border:1px solid var(--border2);border-radius:8px;padding:5px 12px;font-family:'Instrument Sans',sans-serif;font-size:11.5px;color:var(--cream3);cursor:pointer;transition:all .2s;flex-shrink:0;white-space:nowrap}
.setting-btn-small:hover{border-color:rgba(var(--accent-rgb),.4);color:var(--amber)}
.setting-btn-small:disabled{opacity:.35;cursor:not-allowed}
.setting-plan-link{display:inline-block;margin-top:4px;font-size:11.5px;color:var(--cream3);text-decoration:none;border-bottom:1px solid rgba(138,117,96,.3);padding-bottom:1px;transition:color .15s,border-color .15s}
.setting-plan-link:hover{color:var(--cream2);border-bottom-color:rgba(200,180,145,.4)}
/* Account avatar */
.acct-avatar-wrap{position:relative;width:60px;height:60px;flex-shrink:0}
.acct-avatar-circle{width:60px;height:60px;border-radius:50%;background:var(--amber-soft);border:1.5px solid var(--amber-dim);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:22px;font-weight:600;color:var(--amber);font-family:'Instrument Sans',sans-serif;letter-spacing:0}
.acct-avatar-edit{position:absolute;bottom:0;right:0;width:22px;height:22px;border-radius:50%;background:var(--ink3);border:1.5px solid var(--border2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--cream2);transition:background .15s}
.acct-avatar-edit:hover{background:var(--ink4);color:var(--cream)}
#acct-plan-badge{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:20px;font-size:10.5px;font-weight:600;vertical-align:middle;letter-spacing:.04em}
#acct-plan-badge[data-plan="free"]{background:rgba(255,255,255,.07);color:var(--cream3)}
#acct-plan-badge[data-plan="pro"]{background:rgba(var(--accent-rgb),.2);color:var(--amber)}

/* ── Upsell modal — fixed dark palette, theme-independent ── */
.upsell-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);z-index:9999;display:flex;align-items:center;justify-content:center}
.upsell-card{background:#1e1b17;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:36px 32px 28px;max-width:340px;width:90%;text-align:center;position:relative;box-shadow:0 32px 80px rgba(0,0,0,.7)}
.upsell-close{position:absolute;top:12px;right:14px;background:none;border:none;color:rgba(255,255,255,.4);font-size:16px;cursor:pointer;padding:4px 8px;transition:color .15s}
.upsell-close:hover{color:rgba(255,255,255,.8)}
.upsell-icon{font-size:38px;margin-bottom:14px}
.upsell-title{font-family:'Instrument Sans',sans-serif;font-size:19px;font-weight:600;color:#f0e6d3;margin-bottom:8px}
.upsell-sub{font-size:13.5px;color:rgba(240,230,211,.55);line-height:1.55;margin-bottom:26px}
.upsell-cta{width:100%;padding:12px 0;background:rgba(232,168,76,.15);border:1px solid rgba(232,168,76,.4);border-radius:10px;color:#e8a84c;font-family:'Instrument Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;margin-bottom:10px;display:block}
.upsell-cta:hover{background:rgba(232,168,76,.25);border-color:rgba(232,168,76,.65)}
.upsell-dismiss{background:none;border:none;color:rgba(240,230,211,.35);font-size:12.5px;cursor:pointer;transition:color .15s}
.upsell-dismiss:hover{color:rgba(240,230,211,.7)}

/* ── Pro badges on theme swatches ── */
.theme-swatch{position:relative}
.theme-pro-badge{position:absolute;top:6px;right:6px;background:rgba(var(--accent-rgb),.2);color:var(--amber);font-size:9px;font-weight:700;padding:2px 6px;border-radius:20px;letter-spacing:.05em;pointer-events:none}
.theme-swatch--locked{opacity:.6}
.theme-swatch--locked .theme-pro-badge{opacity:1}

/* ── Pro badge on sound cards ── */
.snd-card--pro{position:relative}
.snd-card-pro-badge{position:absolute;top:5px;right:5px;background:rgba(var(--accent-rgb),.18);color:var(--amber);font-size:8.5px;font-weight:700;padding:2px 5px;border-radius:10px;pointer-events:none;letter-spacing:.04em}
.snd-card--locked{opacity:.55}
.toggle{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--ink4);border-radius:11px;transition:background .2s;cursor:pointer}
.toggle-slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:var(--cream3);border-radius:50%;transition:transform .2s,background .2s}
.toggle input:checked+.toggle-slider{background:var(--amber)}
.toggle input:checked+.toggle-slider::before{transform:translateX(18px);background:var(--ink)}

.slabel{font-size:10px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--cream3);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.slabel span{font-size:11px;letter-spacing:0;font-weight:400;text-transform:none}
.slabel button{font-size:11px;letter-spacing:0;font-weight:400;text-transform:none;background:none;border:none;color:var(--cream3);cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:color .2s}
.slabel button:hover{color:var(--amber)}
/* ── BULLET JOURNAL TASK SYSTEM ── */
/* Progress bar */
.bj-progress{display:none;align-items:center;gap:10px;margin-bottom:14px;flex-shrink:0}
.bj-progress.visible{display:flex}
.bj-progress-track{flex:1;height:2px;background:var(--ink4);border-radius:1px;overflow:hidden}
.bj-progress-fill{height:100%;background:var(--amber);border-radius:1px;transition:width .4s cubic-bezier(.4,0,.2,1)}
.bj-progress-txt{font-size:10px;color:var(--cream3);opacity:.5;flex-shrink:0;font-variant-numeric:tabular-nums;letter-spacing:.3px}
/* Date header */
.drawer-date{font-size:11px;color:var(--cream3);opacity:.45;font-style:italic}
.drawer-title{display:flex;flex-direction:column;gap:3px}
.drawer-title-text{font-family:'Playfair Display',serif;font-size:18px;color:var(--cream)}
/* Task list */
.task-list{display:flex;flex-direction:column;gap:6px;margin:12px 0 8px;flex:1;min-height:180px}
/* Individual task row */
.task-row{display:flex;align-items:center;gap:10px;padding:10px 8px 10px 4px;border-radius:12px;transition:background .15s,border-color .15s;position:relative;border:1px solid transparent}
.task-row:hover{background:var(--ink3)}
.task-row.done{opacity:.72}
/* Circular check button */
.task-check-btn{width:28px;height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;color:#5f594d;transition:transform .18s,color .18s}
.task-check-btn:hover{transform:scale(1.06)}
.task-row:hover .task-check-btn{color:var(--cream3)}
.task-row.done .task-check-btn{color:var(--green)}
.task-row.priority:not(.done) .task-check-btn{color:var(--amber)}
.chk-box{overflow:visible}
.chk-box-outline{fill:rgba(255,255,255,.02);transition:fill .18s,stroke .18s,transform .18s}
.task-row:hover .chk-box-outline{fill:rgba(255,255,255,.04)}
.task-row.done .chk-box-outline{fill:rgba(122,191,130,.18);stroke:var(--green)}
.task-row.priority:not(.done) .chk-box-outline{fill:rgba(var(--accent-rgb),.06)}
.chk-tick{opacity:0;stroke-dasharray:14;stroke-dashoffset:14;transition:opacity .12s,stroke-dashoffset .26s ease,transform .22s ease;transform:scale(.85);transform-origin:center}
.task-row.done .chk-tick{opacity:1;stroke-dashoffset:0;transform:scale(1)}
.task-row.done .task-check-btn{animation:taskCheckPop .28s ease}
@keyframes taskCheckPop{0%{transform:scale(1)}45%{transform:scale(1.16)}100%{transform:scale(1)}}
/* Task label */
.tlabel{flex:1;font-size:15px;color:var(--cream);outline:none;background:none;border:none;font-family:'Instrument Sans',sans-serif;cursor:text;transition:color .18s;line-height:1.5;word-break:break-word;min-width:0}
.tlabel:focus{color:var(--cream)}
.task-row.done .tlabel{text-decoration:line-through;color:var(--cream2)}
.task-row.priority:not(.done) .tlabel{color:var(--cream)}
/* Star — always visible at low opacity, full when starred or on hover */
.task-star-btn{opacity:.18;background:none;border:none;cursor:pointer;padding:4px;border-radius:5px;transition:all .15s;flex-shrink:0;color:var(--cream3);display:flex;align-items:center;justify-content:center}
.task-row:hover .task-star-btn{opacity:.45}
.task-star-btn.starred{opacity:1;color:var(--amber)}
.task-star-btn[data-capped="true"]{cursor:not-allowed}
.task-star-btn:hover:not([data-capped="true"]){opacity:1}
/* Delete — hover-reveal only */
.task-del{opacity:0;background:none;border:none;cursor:pointer;padding:4px;border-radius:5px;transition:all .15s;flex-shrink:0;color:var(--cream3);display:flex;align-items:center;justify-content:center}
.task-row:hover .task-del{opacity:.35}
.task-del:hover{opacity:1!important;color:var(--rose);background:rgba(212,130,106,.1)}
/* Priority row: amber tint */
.task-row.priority{background:rgba(var(--accent-rgb),.07);border-color:rgba(var(--accent-rgb),.16);border-radius:12px}
.task-row.priority:hover{background:rgba(var(--accent-rgb),.11)}
/* Gap between last priority task and first normal task */
.task-row.priority+.task-row:not(.priority){margin-top:8px}
/* Important strip */
.important-strip{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 8px;margin-bottom:4px;flex-shrink:0}
.imp-label{font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--amber);opacity:.7}
.imp-count{font-size:10px;color:var(--cream3);opacity:.5;font-variant-numeric:tabular-nums}
.important-strip.all-done{justify-content:flex-start;gap:6px}
.imp-done-msg{font-size:11.5px;color:var(--amber);opacity:.8;font-style:italic}
/* Shake animation for cap refusal */
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.shake{animation:shake .35s ease}
/* Cap message */
.imp-cap-msg{font-size:11.5px;color:var(--amber);opacity:0;padding:0 6px;margin:0 0 4px;font-style:italic;transition:opacity .2s;pointer-events:none;flex-shrink:0}
.imp-cap-msg.show{opacity:.75}
/* Star hint below add button */
.task-star-hint{font-size:11.5px;color:var(--cream3);opacity:.45;padding:2px 6px 4px;margin:0;font-style:italic}
/* Empty state hint */
.task-empty-hint{font-size:11px;color:var(--cream3);opacity:.5;font-style:italic;margin-top:2px}
/* Add task button */
.task-add-btn{display:flex;align-items:center;gap:8px;background:rgba(var(--accent-rgb),.08);border:1px dashed rgba(var(--accent-rgb),.24);cursor:pointer;padding:10px 12px;border-radius:12px;color:var(--cream2);font-family:'Instrument Sans',sans-serif;font-size:13.5px;opacity:.92;transition:all .18s;width:100%;text-align:left;margin-top:2px;flex-shrink:0}
.task-add-btn:hover{background:rgba(var(--accent-rgb),.13);border-color:rgba(var(--accent-rgb),.42);color:var(--cream)}
.tdivider{border:none;border-top:1px solid var(--border);margin:8px 0}
.mascot-card{background:var(--ink2);border:1px solid var(--border);border-radius:20px;padding:16px 18px;display:flex;align-items:center;gap:13px;cursor:pointer;transition:all .25s;position:relative;overflow:hidden;animation:fadeUp .45s .07s ease both}
.mascot-card::before{content:'';position:absolute;top:-40px;right:-40px;width:120px;height:120px;background:radial-gradient(circle,rgba(var(--accent-rgb),.06) 0%,transparent 70%);pointer-events:none}
.mascot-card:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:var(--shadow)}
.mascot-face{font-size:38px;line-height:1;flex-shrink:0;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.mascot-card:hover .mascot-face{transform:scale(1.18) rotate(-5deg)}
.mascot-face.wink{animation:mwink .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes mwink{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(8deg)}100%{transform:scale(1)}}
.mascot-text{font-size:12.5px;color:var(--cream2);line-height:1.55}
.mascot-text strong{color:var(--cream);font-weight:500}
.mascot-sub{font-size:10.5px;color:var(--cream3);margin-top:2px;opacity:.55}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.stat-tile{background:var(--ink3);border-radius:14px;padding:13px;text-align:center;border:1px solid var(--border);transition:all .25s}
.stat-tile:hover{border-color:var(--border2);transform:translateY(-1px)}
.stat-n{font-family:'Playfair Display',serif;font-size:28px;color:var(--cream);line-height:1;transition:all .3s}
.stat-n.amber{color:var(--amber)}
.stat-n.green{color:var(--green)}
.stat-l{font-size:10px;color:var(--cream3);margin-top:3px;font-weight:400;opacity:.65}
.stat-n.bump{animation:numBump .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes numBump{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
.streak-track{display:flex;gap:4px;margin-top:12px}
.sday{flex:1;height:4px;border-radius:2px;background:var(--ink4);transition:all .4s}
.sday.on{background:var(--amber-dim)}
.sday.today{background:var(--amber);box-shadow:0 0 6px rgba(var(--accent-rgb),.4)}
.sday-labels{display:flex;justify-content:space-between;margin-top:5px}
.sday-labels span{font-size:9px;color:var(--cream3);opacity:.35}
.sday-labels span.cur-day{color:var(--amber);opacity:1}
/* ── NOTES VIEW (replaces Stickies) ── */
/* ── NOTES VIEW ── */
.notes-view{max-width:780px;margin:0 auto;width:100%;padding:36px 32px}
.note-workspace{max-width:1040px;margin:0 auto;width:100%;padding:28px 24px 48px;display:flex;flex-direction:column;gap:18px;height:100%}
.note-workspace-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.note-workspace-actions{display:flex;align-items:center;gap:10px}
.rich-note-inner--page{width:100%;height:calc(100vh - 180px);max-height:none;border-radius:28px}
.rn-body--workspace{font-size:16px;line-height:1.9;padding:28px 32px;min-height:0}
.rn-image-wrap{margin:18px 0;display:block}
.rn-inline-image{max-width:100%;border-radius:18px;display:block;border:1px solid var(--border);box-shadow:0 12px 28px rgba(0,0,0,.12)}
.rn-upload-btn{cursor:pointer}
#view-note-workspace .rn-topbar-actions{display:none}
#view-note-workspace .rn-toolbar{position:sticky;top:0;z-index:2}
.notes-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.notes-topbar-left{display:flex;align-items:baseline;gap:10px}
.notes-heading{font-family:'Playfair Display',serif;font-size:24px;letter-spacing:-.3px;color:var(--cream)}
.notes-count{font-size:11px;color:var(--cream3);opacity:.62}
.notes-new-btn{display:flex;align-items:center;gap:6px;background:none;border:1px solid var(--border);border-radius:50px;padding:8px 16px;font-family:'Instrument Sans',sans-serif;font-size:12px;color:var(--cream3);cursor:pointer;transition:all .2s;flex-shrink:0}
.notes-new-btn:hover{border-color:rgba(var(--accent-rgb),.45);color:var(--amber);background:var(--amber-soft)}
.notes-section-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--cream3);opacity:.72;margin:0 0 14px;padding-left:2px}
/* Notes list */
.notes-list{display:flex;flex-direction:column;gap:0}
/* Note item */
.note-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;border:1px solid var(--border);border-radius:18px;padding:14px 15px 13px;margin-bottom:10px;position:relative;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s;background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.015) 100%),var(--ink2);box-shadow:0 8px 18px rgba(0,0,0,.1)}
.note-item:hover{background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.02) 100%),var(--ink2);border-color:var(--border2);transform:translateY(-1px);box-shadow:0 12px 24px rgba(0,0,0,.14)}
.note-item.pinned{border-color:rgba(var(--accent-rgb),.2);box-shadow:0 12px 26px rgba(var(--accent-rgb),.08),0 10px 20px rgba(0,0,0,.12)}
.note-item--thought{background:linear-gradient(180deg,rgba(var(--accent-rgb),.05) 0%,rgba(255,255,255,.015) 100%),var(--ink2)}
.note-item--link{background:linear-gradient(180deg,rgba(106,159,212,.045) 0%,rgba(255,255,255,.015) 100%),var(--ink2)}
.note-item--code{background:linear-gradient(180deg,rgba(125,191,142,.04) 0%,rgba(255,255,255,.015) 100%),var(--ink2)}
.note-item-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
/* Content area */
.note-item-content{min-width:0;display:flex;flex-direction:column;gap:6px}
.note-title{width:100%;background:none;border:none;outline:none;font-family:'Playfair Display',serif;font-size:15px;font-weight:500;color:var(--cream);padding:0;line-height:1.35}
.note-title--compact{font-size:14px}
.note-title::placeholder{color:var(--cream3);opacity:.3;font-style:italic;font-weight:400}
.note-item.pinned .note-title{color:var(--cream)}
.note-body{width:100%;background:none;border:none;outline:none;font-family:'Instrument Sans',sans-serif;font-size:13px;color:var(--cream3);padding:0;resize:none;line-height:1.65;overflow:hidden;min-height:22px}
.note-body--compact{line-height:1.55}
.note-body--code{font-family:'Space Mono',monospace;font-size:12px;line-height:1.55;color:var(--cream2);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04);border-radius:12px;padding:10px 11px}
.note-body:focus{color:var(--cream2)}
.note-body::placeholder{color:var(--cream3);opacity:.25}
/* Actions */
.note-item-actions{display:flex;align-items:flex-start;gap:4px;flex-shrink:0;transition:opacity .15s}
.note-pin-btn,.note-del-btn,.note-edit-btn,.note-task-btn,.note-open-link-btn{opacity:0;position:relative}
.note-item:hover .note-pin-btn,.note-item:hover .note-del-btn,.note-item:hover .note-edit-btn,.note-item:hover .note-task-btn,.note-item:hover .note-open-link-btn{opacity:.45}
.note-ts{font-size:10px;color:var(--cream3);opacity:.62;white-space:nowrap}
.note-pin-btn,.note-del-btn,.note-edit-btn,.note-task-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:5px;color:var(--cream3);transition:all .15s;display:flex;align-items:center;justify-content:center}
.note-pin-btn::after,.note-del-btn::after,.note-edit-btn::after,.note-task-btn::after,.note-open-link-btn::after{content:attr(data-tip);position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%) translateX(4px);padding:4px 8px;border-radius:999px;background:rgba(24,23,19,.96);border:1px solid var(--border2);color:var(--cream);font-family:'Instrument Sans',sans-serif;font-size:10.5px;line-height:1;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.note-pin-btn:hover::after,.note-del-btn:hover::after,.note-edit-btn:hover::after,.note-task-btn:hover::after,.note-open-link-btn:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
.note-pin-btn.pinned,.note-item.pinned .note-pin-btn{opacity:1!important;color:var(--amber)}
.note-pin-btn:hover{opacity:1!important;color:var(--amber)}
.note-edit-btn:hover,.note-task-btn:hover{opacity:1!important;color:var(--cream2);background:rgba(255,255,255,.06)}
.note-del-btn:hover{opacity:1!important;color:var(--rose);background:rgba(212,130,106,.1)}
/* Quick capture */
.notes-capture-card{margin-bottom:18px;padding:18px 18px 16px;border-radius:22px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(var(--accent-rgb),.07) 0%,rgba(255,255,255,.02) 100%),var(--ink2);box-shadow:0 16px 36px rgba(0,0,0,.16)}
.notes-capture-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.notes-capture-title{font-family:'Playfair Display',serif;font-size:20px;color:var(--cream);letter-spacing:-.2px}
.notes-capture-sub{font-size:12.5px;color:var(--cream3);opacity:.68;line-height:1.6;margin-top:4px;max-width:46ch}
.note-capture-wrap{display:flex;align-items:flex-end;gap:10px;margin-bottom:10px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:16px;padding:14px 14px 14px 16px;transition:border-color .2s,box-shadow .2s,background .2s}
.note-capture-wrap:focus-within{border-color:rgba(var(--accent-rgb),.35);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.08);background:rgba(255,255,255,.04)}
.note-capture{flex:1;background:none;border:none;outline:none;font-family:'Instrument Sans',sans-serif;font-size:14px;color:var(--cream2);resize:none;line-height:1.65;overflow:hidden;min-height:34px;max-height:220px}
.note-capture::placeholder{color:var(--cream3);opacity:.38}
.note-capture-btn{flex-shrink:0;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--amber-soft);border:1px solid rgba(var(--accent-rgb),.3);border-radius:10px;color:var(--amber);cursor:pointer;transition:all .15s}
.note-capture-btn:hover{background:rgba(var(--accent-rgb),.2);border-color:rgba(var(--accent-rgb),.5)}
.notes-capture-tip{font-size:11.5px;color:var(--cream3);opacity:.6;line-height:1.55;padding-left:2px}
/* Toolbar: filters + search */
.notes-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.note-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1}
.note-filter-btn{background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:999px;padding:5px 12px;font-family:'Instrument Sans',sans-serif;font-size:11.5px;color:var(--cream3);cursor:pointer;transition:all .15s;white-space:nowrap}
.note-filter-btn:hover{border-color:var(--border2);color:var(--cream2);background:rgba(255,255,255,.04)}
.note-filter-btn.active{border-color:rgba(var(--accent-rgb),.45);color:var(--amber);background:var(--amber-soft)}
.note-search{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:7px 11px;font-family:'Instrument Sans',sans-serif;font-size:12px;color:var(--cream2);outline:none;width:150px;transition:border-color .2s,box-shadow .2s}
.note-search:focus{border-color:var(--border2);box-shadow:0 0 0 3px rgba(255,255,255,.04)}
.note-search::placeholder{color:var(--cream3);opacity:.4}
/* Group headers */
.note-group{margin-bottom:18px;padding:14px 14px 8px;border:1px solid var(--border);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.02) 0%,rgba(255,255,255,.01) 100%),var(--ink)}
.note-group--pinned{margin-bottom:22px;border-color:rgba(var(--accent-rgb),.16);background:linear-gradient(180deg,rgba(var(--accent-rgb),.04) 0%,rgba(255,255,255,.01) 100%),var(--ink)}
.note-group--thought{border-color:rgba(var(--accent-rgb),.1)}
.note-group--link{border-color:color-mix(in srgb, var(--blue) 18%, transparent)}
.note-group--code{border-color:color-mix(in srgb, var(--green) 16%, transparent)}
.note-group-hdr{display:flex;align-items:center;gap:7px;padding:2px 2px 12px;margin-bottom:12px;border-bottom:1px solid var(--border)}
.note-group-hdr--pinned{border-bottom-color:rgba(var(--accent-rgb),.2)}
.note-group-icon{font-size:11px;color:var(--cream3);opacity:.55}
.note-group-name{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--cream2);opacity:.62}
.note-group-count{font-size:10px;color:var(--cream3);opacity:.56;margin-left:auto}
.note-group-grid{display:grid;grid-template-columns:1fr;gap:10px}
.note-group-grid--thought{grid-template-columns:repeat(2,minmax(0,1fr))}
.note-group-grid--link{grid-template-columns:repeat(2,minmax(0,1fr))}
.note-group-grid--code{grid-template-columns:1fr}
.note-group-grid .note-item{margin-bottom:0}
/* Label badge */
.note-label-badge{font-size:10px;color:var(--cream3);opacity:.62;white-space:nowrap;font-variant-numeric:tabular-nums;text-transform:capitalize}
/* Link notes */
.note-link-title{display:block;font-family:'Instrument Sans',sans-serif;font-size:13px;color:var(--blue);word-break:break-all;line-height:1.5;text-decoration:none}
.note-link-title:hover{text-decoration:underline}
/* Empty state */
.notes-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px;text-align:center;gap:10px;color:var(--cream3);opacity:.62}
.notes-empty-icon{font-size:22px;font-family:'Playfair Display',serif;letter-spacing:2px}
.notes-empty p{font-family:'Playfair Display',serif;font-size:16px;margin:0}
.notes-empty span{font-size:12.5px;line-height:1.7;max-width:280px}
@media(max-width:600px){.notes-capture-head{flex-direction:column}.notes-view{padding:20px 16px}.note-item{padding:14px 14px}.note-group{padding:12px 12px 8px}.note-group-grid--thought,.note-group-grid--link{grid-template-columns:1fr}}
/* Credits pane */
.credits-list{display:flex;flex-direction:column;gap:0}
.credit-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--border)}
.credit-row:last-child{border-bottom:none}
.credit-name{font-size:13px;color:var(--cream2)}
.credit-src{font-size:11.5px;color:var(--cream3);opacity:.45;text-align:right;flex-shrink:0}
/* Task drawer empty state */
.task-empty{display:none;flex-direction:column;align-items:center;justify-content:center;padding:36px 18px;gap:10px;color:var(--cream3);opacity:.5;text-align:center;border:1px dashed var(--border2);border-radius:14px;background:rgba(255,255,255,.02)}
.task-empty p{font-size:14px;margin:0;color:var(--cream2)}
.drawer-task-count{font-size:11px;color:var(--cream3);opacity:.5}
.fs-overlay{display:none;position:fixed;inset:0;z-index:500;background:var(--ink);flex-direction:column;align-items:center;justify-content:center;animation:fsIn .35s ease}
.fs-overlay.active{display:flex}
@keyframes fsIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.fs-overlay::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(var(--accent-rgb),.09) 0%,transparent 65%);pointer-events:none}
.fs-close{position:absolute;top:24px;right:28px;background:none;border:1px solid var(--border);border-radius:50px;padding:7px 16px;color:var(--cream3);font-family:'Instrument Sans',sans-serif;font-size:12.5px;cursor:pointer;transition:all .2s;z-index:1}
.fs-close:hover{border-color:var(--border2);color:var(--cream)}
.fs-mode-label{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--cream3);margin-bottom:16px;z-index:1}
.fs-mode-label.live{color:var(--amber)}
.fs-time{font-family:'Playfair Display',serif;font-size:clamp(100px,22vw,200px);letter-spacing:-8px;line-height:.85;color:var(--cream);text-align:center;transition:color .4s;z-index:1;user-select:none}
.fs-time.live{color:var(--amber);text-shadow:0 0 120px rgba(var(--accent-rgb),.18)}
.fs-time.break-live{color:var(--green);text-shadow:0 0 120px rgba(125,191,142,.15)}
.fs-bar{width:520px;height:6px;background:var(--ink4);border-radius:3px;margin:52px 0 32px;z-index:1;overflow:hidden}
.fs-bar-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--amber-dim),var(--amber));transition:width .95s cubic-bezier(.4,0,.2,1)}
.fs-pips{display:flex;gap:6px;margin-bottom:28px;z-index:1}
.fs-pip{width:9px;height:9px;flex-shrink:0;border-radius:50%;background:var(--ink4);border:1px solid var(--ink5);transition:width .35s cubic-bezier(.34,1.56,.64,1),border-radius .35s cubic-bezier(.34,1.56,.64,1),background .35s,border-color .35s,box-shadow .35s,transform .35s}
.fs-pip.done{width:22px;height:9px;border-radius:100px;background:var(--amber);border-color:var(--amber);}
.fs-pip.cur{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.2);animation:pipPulse 2s infinite;transform:scale(1.2)}
.fs-controls{display:flex;gap:12px;z-index:1}
.fs-task{font-size:15px;color:var(--cream3);margin-bottom:24px;z-index:1}
.fs-task em{color:var(--cream2);font-style:normal}
.break-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(140px);background:var(--ink2);border:1px solid var(--border2);border-radius:50px;padding:13px 20px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-lg);z-index:600;font-size:13px;color:var(--cream2);transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .18s ease,visibility .18s ease;white-space:nowrap;backdrop-filter:blur(16px);opacity:0;visibility:hidden;pointer-events:none}
.break-toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible;pointer-events:auto}
.btn-ty{background:var(--green);color:var(--ink);border:none;border-radius:50px;padding:7px 18px;font-family:'Instrument Sans',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}
.btn-ty:hover{transform:scale(1.04)}
.btn-tn{background:none;border:none;color:var(--cream3);font-family:'Instrument Sans',sans-serif;font-size:13px;cursor:pointer;transition:color .2s}
.btn-tn:hover{color:var(--cream2)}
.complete-flash{position:fixed;inset:0;z-index:700;pointer-events:none;opacity:0}
.complete-flash.show{animation:flashAnim .8s ease}
@keyframes flashAnim{0%{opacity:0;background:rgba(var(--accent-rgb),0)}30%{opacity:1;background:rgba(var(--accent-rgb),.08)}100%{opacity:0;background:rgba(var(--accent-rgb),0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.timer-card{animation:fadeUp .45s .04s ease both}
#pipVideo{display:none;position:fixed;bottom:0;right:0;width:1px;height:1px}
/* Section divider with label */
.bj-section{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--cream3);opacity:.3;padding:10px 8px 4px;display:flex;align-items:center;gap:8px}
.bj-section::after{content:'';flex:1;height:1px;background:var(--border)}
.live-clock{font-family:'Playfair Display',serif;font-size:14px;color:var(--cream3);letter-spacing:.5px;opacity:.7;user-select:none}
.break-overlay{position:fixed;inset:0;z-index:400;background:rgba(14,13,11,0.92);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .5s ease}
.break-overlay.show{opacity:1;pointer-events:auto}
.break-overlay-card{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;max-width:400px;padding:0 24px}
.break-overlay-emoji{font-size:52px;margin-bottom:20px;animation:breakFloat 4s ease-in-out infinite}
@keyframes breakFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.break-overlay-title{font-family:'Playfair Display',serif;font-size:32px;color:var(--green);letter-spacing:-.5px;margin-bottom:10px}
.break-overlay-sub{font-size:14px;color:var(--cream3);line-height:1.6;margin-bottom:28px;opacity:.7}
.break-overlay-timer{font-family:'Playfair Display',serif;font-size:72px;letter-spacing:-4px;line-height:1;color:var(--cream);margin-bottom:20px;font-variant-numeric:tabular-nums}
.break-overlay-bar{width:240px;height:3px;background:var(--ink4);border-radius:2px;margin-bottom:32px}
.break-overlay-fill{height:100%;border-radius:2px;background:var(--green);transition:width .95s cubic-bezier(.4,0,.2,1)}
.break-overlay-btns{display:flex;align-items:center;gap:10px}
.break-skip-btn{background:none;border:1px solid var(--border2);border-radius:50px;padding:10px 24px;font-family:'Instrument Sans',sans-serif;font-size:13.5px;color:var(--cream3);cursor:pointer;transition:all .2s}
.break-skip-btn:hover{border-color:var(--cream3);color:var(--cream)}
.break-pause-btn{background:none;border:1px solid var(--border2);border-radius:50px;padding:10px 24px;font-family:'Instrument Sans',sans-serif;font-size:13.5px;color:var(--cream3);cursor:pointer;transition:all .2s}
.break-pause-btn:hover{border-color:var(--cream3);color:var(--cream)}
.break-pause-btn.paused{border-color:var(--green);color:var(--green)}
.topbar-stats{display:flex;align-items:center;gap:10px;background:var(--ink2);border:1px solid var(--border);border-radius:50px;padding:5px 14px;margin-right:4px;position:relative;z-index:203;flex-shrink:0}
.topbar-stat{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--cream2);font-variant-numeric:tabular-nums}
.topbar-stat-icon{font-size:12px;line-height:1}
.topbar-stat-lbl{font-size:10.5px;color:var(--cream3);opacity:.6}
.topbar-stat-sep{width:1px;height:14px;background:var(--border2);margin:0 2px}
@media(max-width:1120px) and (min-width:921px){
  .topbar{padding:14px 22px;gap:12px}
  .topbar-nav{gap:2px}
  .tnav{padding:6px 11px;font-size:12px}
  .topbar-right{gap:8px}
  .topbar-stats{padding:5px 10px;gap:8px}
  .topbar-stat-lbl{display:none}
  .topbar-stat-sep{margin:0}
  .live-clock{display:none}
}
.free-wave-canvas{display:none;position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;height:20px;pointer-events:none}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--ink4);border-radius:2px}
.stats-page{max-width:860px;margin:0 auto;padding:36px 32px 60px;width:100%}
.stats-section-title{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--cream3);font-weight:500;margin-bottom:12px;opacity:.65}
.stats-card{background:var(--ink2);border:1px solid var(--border);border-radius:18px;padding:20px 22px;transition:border-color .25s}
.stats-card:hover{border-color:var(--border2)}
.stats-card-label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--cream3);font-weight:500;margin-bottom:14px;opacity:.55}
.stats-two-col{display:flex;gap:14px}
.stats-hero{display:flex;align-items:center;justify-content:space-between;background:var(--ink2);border:1px solid var(--border);border-radius:20px;padding:24px 28px;margin-bottom:24px;gap:24px}
.stats-hero-left{display:flex;align-items:center;gap:18px;flex:1;min-width:0}
.stats-hero-copy{min-width:0;flex:0 1 320px}
.stats-rank-badge{font-size:48px;line-height:1;flex-shrink:0}
.stats-rank-title{font-family:'Playfair Display',serif;font-size:22px;color:var(--cream);letter-spacing:-.3px;margin-bottom:3px}
.stats-rank-sub{font-size:12px;color:var(--cream3);margin-bottom:10px;opacity:.7}
.stats-rank-bar-wrap{height:5px;background:var(--ink4);border-radius:3px;overflow:hidden;max-width:260px}
.stats-rank-bar{height:100%;background:linear-gradient(90deg,var(--amber-dim),var(--amber));border-radius:3px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.stats-hero-tip{margin-left:auto;max-width:188px;padding-left:14px;border-left:1px solid var(--border);align-self:flex-start;transform:translateY(2px)}
.stats-hero-tip-kicker{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--cream3);opacity:.58;margin-bottom:4px;font-weight:500}
.stats-hero-tip-text{font-size:11px;line-height:1.38;color:var(--cream3);opacity:.72;font-weight:400}
.stats-score-block{text-align:center;flex-shrink:0;padding-left:24px;border-left:1px solid var(--border)}
.stats-score-num{font-family:'Playfair Display',serif;font-size:54px;color:var(--amber);letter-spacing:-3px;line-height:1;transition:all .4s}
.stats-score-lbl{font-size:11px;color:var(--cream3);letter-spacing:1.5px;text-transform:uppercase;opacity:.72;margin-top:2px}
.stats-score-sub{font-size:12px;color:var(--green);margin-top:4px}
.stats-today-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:0}
.stats-tile{background:var(--ink2);border:1px solid var(--border);border-radius:16px;padding:16px 14px;text-align:center;transition:all .25s}
.stats-tile:hover{border-color:var(--border2);transform:translateY(-2px)}
.stats-tile-icon{font-size:20px;margin-bottom:8px}
.stats-tile-val{font-family:'Playfair Display',serif;font-size:32px;color:var(--cream);letter-spacing:-1px;line-height:1;transition:all .3s}
.stats-tile-val.amber{color:var(--amber)}
.stats-tile-val.green{color:var(--green)}
.stats-tile-lbl{font-size:10.5px;color:var(--cream3);margin-top:4px;opacity:.6}
.stats-tile-kicker{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--cream3);opacity:.6;margin-bottom:6px;font-weight:500}
.stats-tile--streak{border-color:rgba(var(--accent-rgb),.18)}
.stats-bar-chart{display:flex;gap:5px;align-items:flex-end;height:100px;padding-bottom:0}
.stats-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:default}
.stats-bar-count{font-size:9px;color:var(--cream3);opacity:.72;font-variant-numeric:tabular-nums;min-height:12px;line-height:12px}
.stats-bar-col-bar{width:100%;border-radius:4px 4px 0 0;transition:height .5s cubic-bezier(.4,0,.2,1),background .3s;min-height:3px;align-self:flex-end}
.stats-bar-col-bar:hover{filter:brightness(1.15)}
.stats-bar-labels{display:flex;gap:5px;margin-top:6px}
.stats-bar-lbl{flex:1;text-align:center;font-size:9.5px;color:var(--cream3);opacity:.62}
.stats-bar-lbl.today{color:var(--amber);opacity:1;font-weight:500}
.stats-mini-stat{font-family:'Playfair Display',serif;font-size:20px;color:var(--cream);letter-spacing:-.5px;line-height:1.2;margin-bottom:2px}
.stats-mini-sub{font-size:11.5px;color:var(--cream3);opacity:.78}
/* 52 weeks fills container: each week ≈ 12px wide, cells ≈ 12×12px square */
.stats-heatmap-shell{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start}
.stats-heatmap-main{min-width:0}
.stats-heatmap{display:flex;gap:3px;width:100%;overflow:visible}
.hm-week{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;position:relative}
.hm-week::after{content:'';position:absolute;top:0;bottom:0;right:-2px;width:1px;background:var(--hm-grid-line);pointer-events:none}
.hm-cell{height:12px;border-radius:2px;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease,opacity .15s;position:relative;z-index:0;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--hm-cell-border) 55%, transparent)}
.hm-cell:hover{opacity:1;box-shadow:0 0 0 2px var(--hm-hover-ring),0 4px 12px rgba(0,0,0,.3);z-index:5;filter:brightness(1.15)}
.hm-cell::before{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);background:var(--hm-tooltip-bg);color:var(--hm-tooltip-text);padding:7px 9px;border-radius:8px;border:1px solid var(--border2);font-size:10px;line-height:1.4;white-space:pre;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;box-shadow:0 10px 30px rgba(0,0,0,.3);z-index:3}
.hm-cell:hover::before{opacity:1;transform:translateX(-50%) translateY(0)}
.stats-heatmap .hm-cell--today{outline:2px solid var(--amber);outline-offset:1px;position:relative;z-index:2}
.hm-day-labels{display:grid;grid-template-rows:repeat(7,12px);gap:3px;margin-top:20px}
.hm-day-labels span{display:flex;align-items:center;height:12px;font-size:9px;color:var(--cream3);opacity:.72}
.hm-month-labels{display:grid;height:16px;margin-bottom:4px;width:100%;gap:3px;align-items:end}
.hm-month-labels span{font-size:9px;color:var(--cream3);opacity:.7;white-space:nowrap;overflow:visible;line-height:1}
.hm-scroll-wrap{width:100%}
.hm-week-labels{display:flex;justify-content:space-between;font-size:9px;color:var(--cream3);opacity:.62;margin-top:8px}
.stats-heatmap-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:12px}
.stats-heatmap-legend{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--cream3)}
.hm-summary{font-size:11px;color:var(--cream3);opacity:.72}
.hm-swatch{width:12px;height:12px;border-radius:2px}
.stats-pr-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}
.stats-pr-row:last-child{border-bottom:none}
.stats-pr-lbl{color:var(--cream3)}
.stats-pr-val{color:var(--cream);font-weight:500;font-family:'Playfair Display',serif;font-size:15px}
.stats-pr-val.amber{color:var(--amber)}
.stats-pr-val.green{color:var(--green)}
.stats-hour-chart{display:flex;gap:2px;align-items:flex-end;height:80px;margin-bottom:4px}
.hour-bar{flex:1;border-radius:4px 4px 0 0;min-height:2px;transition:height .4s cubic-bezier(.4,0,.2,1),background .3s}
.stats-hour-labels{display:flex;justify-content:space-between;font-size:9px;color:var(--cream3);opacity:.62;margin-bottom:10px}
.stats-peak-time{font-size:12px;color:var(--amber);font-style:italic}
.stats-hour-tip{font-size:12px;color:var(--cream3);opacity:.7;margin-top:10px;line-height:1.55;border-top:1px solid var(--border);padding-top:10px}
.stats-hour-tip:empty{display:none}
.stats-history-scroll{max-height:340px;overflow:auto;padding-right:4px}
.stats-history-list{display:flex;flex-direction:column}
.stats-history-empty{font-size:12px;color:var(--cream3);opacity:.78}
.stats-history-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--border)}
.stats-history-row:last-child{border-bottom:none;padding-bottom:0}
.stats-history-main{min-width:0}
.stats-history-date{font-size:13px;color:var(--cream);margin-bottom:3px}
.stats-history-sub{font-size:11px;color:var(--cream3);opacity:.78}
.stats-history-metrics{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.stats-history-pill{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:var(--stats-pill-bg);border:1px solid var(--stats-pill-border);font-size:11px;color:var(--cream2);white-space:nowrap}
.stats-history-pill strong{color:var(--cream);font-weight:500}
.stats-flow-grid{display:flex;flex-direction:column;gap:28px}
.stats-next-level{display:flex;align-items:center;gap:20px}
.stats-next-icon{font-size:40px;flex-shrink:0}
.stats-next-title{font-family:'Playfair Display',serif;font-size:18px;color:var(--cream);margin-bottom:3px}
.stats-next-sub{font-size:12.5px;color:var(--cream3)}
/* ── Desktop focus layout: overlay task sidebar ── */
@media(min-width:821px){
  #view-focus{position:relative;overflow:hidden}
  /* Drawer overlays from the left — doesn't displace the timer */
  #taskDrawer{
    position:absolute !important;
    top:0 !important;bottom:0 !important;left:0 !important;
    width:320px;
    height:100% !important;
    transform:translateX(-100%) !important;
    transition:transform .28s cubic-bezier(.4,0,.2,1) !important;
    border-right:1px solid var(--border2);
    border-radius:0;
    z-index:211;
    background:var(--ink2);
  }
  /* Sidebar open state */
  #view-focus.sidebar-open #taskDrawer{transform:translateX(0) !important}
  /* Dim overlay behind sidebar */
  #drawerOverlay{display:block !important;top:0 !important;background:rgba(0,0,0,0);pointer-events:none}
  #view-focus.sidebar-open #drawerOverlay{background:rgba(0,0,0,.35);pointer-events:auto}
  /* Timer always fills full width */
  .focus-center{flex:1;min-height:0;height:auto;overflow-y:auto;max-width:820px;padding:44px 40px}
  .btn-tasks-toggle{font-size:12px;padding:9px 14px}
  #taskDrawer .drawer-header{padding-bottom:14px}
}

@media(max-width:920px){
  .main-grid{grid-template-columns:1fr;padding:16px}
  .right{display:none}
  /* Tablet: hide inline nav, show hamburger */
  .topbar{grid-template-columns:auto 1fr auto;padding:12px 20px;gap:12px;position:sticky}
  .logo{position:absolute;left:50%;transform:translateX(-50%);justify-self:auto;z-index:202;white-space:nowrap}
  .topbar-nav{
    display:none;
    position:absolute;top:calc(100% + 8px);left:20px;right:auto;
    flex-direction:column;
    background:rgba(14,13,11,.98);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border:1px solid var(--border2);
    border-radius:18px;padding:8px;gap:3px;
    z-index:205;min-width:180px;max-width:min(240px,calc(100vw - 40px));width:max-content;
    box-shadow:0 12px 32px rgba(0,0,0,.34);
  }
  .topbar-nav.nav--open{display:flex;animation:slide-down .18s ease}
  @keyframes slide-down{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
  .topbar-nav .tnav{border-radius:10px;padding:11px 16px;font-size:13px;text-align:left;width:100%}
  .nav-burger{display:flex;grid-column:1;justify-self:start}
  .topbar-stats{display:none}
  .live-clock{display:none}
  .topbar-right{grid-column:3;justify-self:end}
  .focus-center{justify-content:flex-start;min-height:calc(100svh - 67px);padding:clamp(88px,12vh,148px) 24px 32px;max-width:none}
  .drawer-overlay,.drawer{top:57px}
  .stats-two-col{flex-direction:column}
  .settings-page{padding:24px 24px 60px}
  .notes-view{padding:20px 16px}
  .stats-page{padding:24px 16px 48px}
  .mode-pill{padding:8px 16px;font-size:12.5px}
}

/* ═══ IPAD — comfortable sizing for tablet range ═══ */
@media(min-width:601px) and (max-width:920px){
  .mode-pill{padding:10px 22px;font-size:13.5px}
  .btn-start-center{padding:13px 34px;font-size:15px}
  .btn-sm-center{padding:11px 20px;font-size:13px}
  .btn-tasks-toggle{padding:10px 16px;font-size:13px}
  .focus-center{padding:40px 40px 32px;min-height:calc(100svh - 67px);justify-content:center;max-width:820px;margin:0 auto}
  .timer-num-center{font-size:clamp(96px,14vw,160px);letter-spacing:-5px}
}

/* ═══ MOBILE — bottom nav, touch targets, layout ═══ */
@media(max-width:600px){
  /* Mobile: hide hamburger, use fixed bottom bar */
  .topbar{grid-template-columns:auto 1fr auto;position:sticky}
  .logo{position:absolute;left:50%;transform:translateX(-50%);justify-self:auto;z-index:202;white-space:nowrap}
  .nav-burger{display:flex!important}
  .nav-burger{grid-column:1;justify-self:start}
  .nav-backdrop{display:none}
  .topbar-right{grid-column:3;justify-self:end}
  .topbar-nav{
    display:none;
    position:absolute;top:calc(100% + 8px);left:14px;right:auto;bottom:auto;
    flex-direction:column;
    background:rgba(14,13,11,.98);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border:1px solid var(--border2);
    border-radius:18px;padding:8px;gap:3px;
    z-index:205;min-width:180px;max-width:min(220px,calc(100vw - 28px));width:max-content;
    box-shadow:0 12px 32px rgba(0,0,0,.34);animation:none;
  }
  .topbar-nav.nav--open{display:flex}
  /* Mobile menu items */
  .tnav{
    flex:none;padding:11px 16px;font-size:13px;letter-spacing:0;
    border-radius:10px;text-align:left;width:100%;
    background:none;
    border:1px solid transparent;
    transition:background .18s,color .18s,border-color .18s;
  }
  .tnav.active{
    background:var(--ink3);
    color:var(--cream);
    border-color:transparent;
    box-shadow:0 1px 4px rgba(0,0,0,.4);
  }
  /* Push content above bottom nav */
  .view.active{padding-bottom:0}
  .focus-center{min-height:calc(100svh - 53px);padding:20px 18px 12px;justify-content:center}
  /* Topbar compact */
  .topbar{padding:10px 14px}
  .avatar-btn{width:30px;height:30px;font-size:13px}
  .topbar-icon{width:44px;height:44px}
  .drawer-overlay,.drawer{top:53px}
  /* Mode pill */
  .mode-pill{padding:7px 13px;font-size:12px}
  /* Start button */
  .btn-start-center{padding:10px 22px;font-size:13px}
  .btn-sm-center{padding:8px 14px;font-size:12px}
  .btn-tasks-toggle{padding:8px 12px;font-size:12px}
  /* Timer scaling */
  .timer-num-center{font-size:clamp(78px,20vw,120px);letter-spacing:-4px}
  /* Adjust floating elements */
  .break-toast{bottom:20px;font-size:12px}
  /* Task drawer full width on mobile */
  .drawer{width:100%;max-width:100%;border-right:none;border-top:1px solid var(--border2);top:auto;height:80vh;border-radius:20px 20px 0 0;transform:translateY(100%)}
  .drawer.open{transform:translateY(0)}
  /* Notes grid single column on phone */
  .notes-view{padding:14px 12px}
  /* Stats compact */
  .stats-today-grid{grid-template-columns:repeat(2,1fr)}
  .stats-page{padding:16px 14px 24px}
  /* Settings compact */
  .settings-page{padding:16px 14px 40px}
  /* Break overlay is full-screen (z-index:400 already covers bottom nav) */
  /* Focus center controls row wrapping */
  .controls-center{gap:8px;flex-wrap:wrap;justify-content:center}
  /* PiP + ambiance buttons row */
  .util-row{gap:6px}
  .pip-trigger{display:none}
  /* Mobile perf: kill expensive backdrop-filters */
  .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(14,13,11,.97)}
  .mode-pill-wrap{backdrop-filter:none;-webkit-backdrop-filter:none}
  .mode-pill-indicator{backdrop-filter:none;-webkit-backdrop-filter:none;will-change:left,width}
  .drawer{will-change:transform}
  .snd-modal{will-change:transform,opacity}
  /* Replace transition:all with specific props on interactive elements */
  .btn-start-center{transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease}
  .btn-sm-center,.btn-tasks-toggle{transition:border-color .15s,color .15s}
  .tnav,.topbar-icon,.icon-btn,.avatar-btn{transition:color .15s,background .15s}
}

/* ══════════════════════════════════════════
   FOCUS MODE PRESETS
   ══════════════════════════════════════════ */
.mode-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.mode-preset-card{background:var(--ink3);border:1.5px solid var(--border);border-radius:16px;padding:24px 10px 20px;cursor:pointer;transition:all .22s;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;font-family:'Instrument Sans',sans-serif}
.mode-preset-card:hover{border-color:var(--border2);background:var(--ink4);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.mode-preset-card.active{border-color:var(--amber);background:var(--amber-soft);box-shadow:0 0 0 1px var(--amber-soft)}
.mode-preset-icon{font-size:28px;line-height:1}
.mode-preset-name{font-size:13px;font-weight:600;color:var(--cream);letter-spacing:.01em}
.mode-preset-times{font-size:11px;color:var(--cream3);opacity:.65;line-height:1.3}
.mode-desc{font-size:12.5px;color:var(--cream3);line-height:1.7;padding:14px 0 14px;opacity:.6;border-top:1px solid var(--border);margin-top:4px;font-style:italic}
@media(max-width:600px){.mode-presets{grid-template-columns:repeat(2,1fr)}}

/* ══════════════════════════════════════════
   THEME SWATCHES
   ══════════════════════════════════════════ */
/* ── Font style picker ── */
.font-style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.font-style-card{background:var(--ink);border:1.5px solid var(--border);border-radius:14px;padding:0;cursor:pointer;transition:all .2s;text-align:center;overflow:hidden;display:flex;flex-direction:column}
.font-style-card:hover{border-color:var(--border2);transform:translateY(-2px)}
.font-style-card.active{border-color:var(--amber);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35)}
.fsc-preview{padding:18px 8px 14px;display:flex;align-items:center;justify-content:center;min-height:68px;flex:1}
.fsc-preview span{color:var(--cream);line-height:1}
.fsc-name{padding:7px 4px 8px;font-size:11px;color:var(--cream3);font-family:'Instrument Sans',sans-serif;border-top:1px solid var(--border);letter-spacing:.3px}
.font-style-card.active .fsc-name{color:var(--amber)}
/* Timer font overrides */
[data-timer-font="clean"] .timer-num-center,[data-timer-font="clean"] .fs-time,[data-timer-font="clean"] .break-overlay-timer{font-family:'Instrument Sans',sans-serif;font-weight:300;letter-spacing:-3px}
[data-timer-font="mono"] .timer-num-center,[data-timer-font="mono"] .fs-time{font-family:'Space Mono',monospace;font-size:clamp(52px,11vw,80px);letter-spacing:-1px}
[data-timer-font="mono"] .break-overlay-timer{font-family:'Space Mono',monospace;font-size:54px;letter-spacing:-1px}
[data-timer-font="serif"] .timer-num-center,[data-timer-font="serif"] .fs-time,[data-timer-font="serif"] .break-overlay-timer{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;letter-spacing:-1px}
[data-timer-font="display"] .timer-num-center,[data-timer-font="display"] .fs-time{font-family:'Bebas Neue',cursive;letter-spacing:3px;font-size:clamp(80px,17vw,120px)}
[data-timer-font="display"] .break-overlay-timer{font-family:'Bebas Neue',cursive;font-size:82px;letter-spacing:3px}
[data-timer-font="soft"] .timer-num-center,[data-timer-font="soft"] .fs-time,[data-timer-font="soft"] .break-overlay-timer{font-family:'Klee One',cursive;letter-spacing:-2px}
.theme-grid{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px}
.theme-swatch{background:none;border:1.5px solid var(--border);border-radius:18px;padding:0;cursor:pointer;transition:all .22s;overflow:hidden;flex:1;min-width:130px;max-width:260px;text-align:center;display:flex;flex-direction:column}
.theme-swatch:hover{border-color:var(--border2);transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.theme-swatch.active{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber-soft),0 12px 32px rgba(0,0,0,.35)}
.theme-preview{height:96px;width:100%;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.tp-ring{position:absolute;width:46px;height:46px;border-radius:50%;border:2px solid currentColor;opacity:.55;top:50%;left:50%;transform:translate(-50%,-50%)}
.tp-time{font-family:'Playfair Display',serif;font-size:13px;font-weight:700;letter-spacing:-.5px;position:relative;z-index:1}
.theme-preview--default{background:linear-gradient(160deg,#1A1915 0%,#2A241B 100%);color:#E8A84C}
.theme-preview--default .tp-ring{border-color:#E8A84C;box-shadow:0 0 10px rgba(232,168,76,.4)}
.theme-preview--gilded{background:radial-gradient(circle at 28% 22%,rgba(255,208,120,.22) 0%,rgba(255,208,120,0) 34%),linear-gradient(160deg,#120d08 0%,#24170f 48%,#392514 100%);color:#f1b24f}
.theme-preview--gilded::before{content:'';position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(180deg,rgba(164,102,33,0) 0%,rgba(164,102,33,.34) 100%)}
.theme-preview--gilded .tp-ring{border-color:#f1b24f;box-shadow:0 0 14px rgba(241,178,79,.38)}
.theme-preview--neon   {background:linear-gradient(160deg,#070b10 0%,#0d1520 100%);color:#00d4e8}
.theme-preview--neon .tp-ring{border-color:#00d4e8;box-shadow:0 0 10px rgba(0,212,232,.5)}
.theme-preview--day    {background:linear-gradient(160deg,#fff8e8 0%,#f3e2bf 100%);color:#9a6428}
.theme-preview--day .tp-ring{border-color:#d99b45;box-shadow:0 0 10px rgba(217,155,69,.28)}
.theme-preview--day .tp-time{color:#4a3117}
.theme-preview--paper  {background:linear-gradient(160deg,#f9f6f0 0%,#ede8de 100%);color:#8B5A2B}
.theme-preview--paper .tp-ring{border-color:#8B5A2B}
.theme-preview--paper .tp-time{color:#1a150e}
.theme-preview--mist   {background:linear-gradient(165deg,#dde6f1 0%,#d3dde9 48%,#cbd6e4 100%);color:#4f6487}
.theme-preview--mist::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 22% 18%,rgba(255,255,255,.38) 0%,rgba(255,255,255,0) 34%),radial-gradient(circle at 78% 78%,rgba(122,144,177,.18) 0%,rgba(122,144,177,0) 44%)}
.theme-preview--mist .tp-ring{z-index:1}
.theme-preview--mist .tp-time{position:relative;z-index:1}
.theme-preview--mist .tp-ring{border-color:#6f86ac;box-shadow:0 0 10px rgba(111,134,172,.16)}
.theme-preview--mist .tp-time{color:#223149}
.theme-preview--nocturne{background:radial-gradient(circle at 22% 18%,rgba(150,166,255,.18) 0%,rgba(150,166,255,0) 34%),radial-gradient(circle at 78% 78%,rgba(107,76,167,.16) 0%,rgba(107,76,167,0) 42%),linear-gradient(165deg,#090b14 0%,#12182a 48%,#1b2140 100%);color:#9ea8ff}
.theme-preview--nocturne .tp-ring{border-color:#9ea8ff;box-shadow:0 0 14px rgba(158,168,255,.26)}
.theme-preview--nocturne .tp-time{color:#eef1ff}
.theme-preview--void   {background:linear-gradient(160deg,#050505 0%,#161616 100%);color:#F3F0E8}
.theme-preview--void .tp-ring{border-color:rgba(243,240,232,.55)}
.theme-preview--wallpaper{background:linear-gradient(160deg,rgba(18,18,18,.88) 0%,rgba(46,40,31,.72) 100%),var(--wallpaper-image,linear-gradient(160deg,#181612 0%,#2b241d 100%));background-size:cover;background-position:center;color:#F3F0E8}
.theme-preview--wallpaper::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.34))}
.theme-preview--wallpaper .tp-ring,.theme-preview--wallpaper .tp-time{position:relative;z-index:1}
.theme-preview--wallpaper .tp-ring{border-color:rgba(243,240,232,.55);box-shadow:0 0 10px rgba(255,255,255,.16)}
.theme-preview--aurora {background:linear-gradient(160deg,#06040f 0%,#130d2e 100%);color:#a855f7}
.theme-preview--aurora .tp-ring{border-color:#a855f7;box-shadow:0 0 10px rgba(168,85,247,.45)}
.theme-name{font-size:12.5px;font-weight:600;color:var(--cream2);padding:9px 0 3px;font-family:'Instrument Sans',sans-serif;line-height:1}
.theme-tag{font-size:11px;color:var(--cream3);padding:0 0 10px;font-family:'Instrument Sans',sans-serif;opacity:.6;line-height:1}
.theme-swatch.active .theme-name{color:var(--amber)}
.theme-swatch.active .theme-tag{opacity:.85;color:var(--amber-dim)}
.wallpaper-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.wallpaper-upload-btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.wallpaper-url-wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:min(100%,460px)}
.wallpaper-url-wrap .settings-code-input{flex:1;min-width:220px}
.wallpaper-preview-shell{padding:6px 2px 2px}
.wallpaper-preview{position:relative;width:min(100%,420px);aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border2);background:linear-gradient(160deg,rgba(18,18,18,.88) 0%,rgba(46,40,31,.72) 100%),var(--wallpaper-image,linear-gradient(160deg,#181612 0%,#2b241d 100%));background-size:cover;background-position:center;box-shadow:var(--shadow)}
.wallpaper-preview::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,.48))}
.wallpaper-preview img{width:100%;height:100%;object-fit:cover;display:none}
.wallpaper-preview-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream2);z-index:1}

/* ══════════════════════════════════════════
   PiP THEME + COMPANION PICKERS
   ══════════════════════════════════════════ */
.pip-theme-grid{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px}
.pip-theme-swatch{background:none;border:1.5px solid var(--border);border-radius:18px;padding:0;cursor:pointer;transition:all .22s;overflow:hidden;flex:1;min-width:130px;max-width:220px;text-align:center;display:flex;flex-direction:column}
.pip-theme-swatch:hover{border-color:var(--border2);transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.pip-theme-swatch.active{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber-soft),0 12px 32px rgba(0,0,0,.35)}
.pip-theme-preview{height:96px;width:100%;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ptp-ring{position:absolute;width:46px;height:46px;border-radius:50%;border:2px solid currentColor;opacity:.72;top:50%;left:50%;transform:translate(-50%,-50%)}
.ptp-time{font-family:'Playfair Display',serif;font-size:13px;font-weight:700;letter-spacing:-.5px;position:relative;z-index:1}
.pip-theme-preview--app{background:linear-gradient(160deg,#1A1915 0%,#2A241B 100%);color:#E8A84C}
.pip-theme-preview--app .ptp-ring{border-color:#E8A84C;box-shadow:0 0 10px rgba(232,168,76,.35)}
.pip-theme-preview--sunrise{background:linear-gradient(180deg,#ffd9b8 0%,#ffc7d1 38%,#f7dca0 72%,#d9b382 100%);color:#8a5b32}
.pip-theme-preview--sunrise::before{content:'';position:absolute;inset:auto 0 0 0;height:34%;background:linear-gradient(180deg,rgba(214,170,120,0) 0%,rgba(214,170,120,.7) 100%)}
.pip-theme-preview--sunrise .ptp-ring{border-color:#8a5b32;box-shadow:0 0 12px rgba(138,91,50,.18)}
.pip-theme-preview--sakura{background:linear-gradient(180deg,#ffd8ea 0%,#f6c6f4 32%,#d8c9ff 68%,#b7d4ff 100%);color:#7e5378}
.pip-theme-preview--sakura::before{content:'';position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(180deg,rgba(167,151,219,0) 0%,rgba(167,151,219,.52) 100%)}
.pip-theme-preview--sakura .ptp-ring{border-color:#7e5378;box-shadow:0 0 12px rgba(126,83,120,.16)}
.pip-theme-preview--meadow{background:linear-gradient(180deg,#d7f0da 0%,#c6ecd7 38%,#b7e3bf 68%,#96c89a 100%);color:#47664a}
.pip-theme-preview--meadow::before{content:'';position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(180deg,rgba(112,167,116,0) 0%,rgba(112,167,116,.48) 100%)}
.pip-theme-preview--meadow .ptp-ring{border-color:#47664a;box-shadow:0 0 12px rgba(71,102,74,.16)}
.pip-theme-preview--studio{background:linear-gradient(180deg,#f8ead2 0%,#f1dfc5 42%,#e4d1b0 72%,#cba981 100%);color:#6d543a}
.pip-theme-preview--studio::before{content:'';position:absolute;inset:auto 0 0 0;height:36%;background:linear-gradient(180deg,rgba(190,150,102,0) 0%,rgba(190,150,102,.55) 100%)}
.pip-theme-preview--studio .ptp-ring{border-color:#6d543a;box-shadow:0 0 12px rgba(109,84,58,.16)}
.pip-companion-grid{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.pip-companion-btn{background:var(--ink3);border:2px solid var(--border2);border-radius:9px;padding:6px 12px;font-size:11.5px;color:var(--cream3);cursor:pointer;transition:all .2s;display:inline-flex;flex-direction:column;align-items:center;gap:3px;font-family:'Instrument Sans',sans-serif;min-width:54px}
.pip-companion-btn:hover{border-color:var(--amber);color:var(--amber)}
.pip-companion-btn.active{border-color:var(--cream)!important;color:var(--cream);box-shadow:0 0 0 2px rgba(245,237,216,.18)}
.pip-companion-icon{font-size:18px;line-height:1}
@media(max-width:600px){.pip-theme-grid{gap:12px}.pip-theme-swatch{min-width:calc(50% - 6px);max-width:none}}

/* ══════════════════════════════════════════
   THEMES
   ══════════════════════════════════════════ */

/* ── Void — pure black minimal ── */
[data-theme="void"]{
  --ink:#000000;--ink2:#0c0c0c;--ink3:#131313;--ink4:#1a1a1a;--ink5:#222222;
  --amber:#ffffff;--amber-dim:rgba(255,255,255,.55);--amber-soft:rgba(255,255,255,.06);
  --accent-rgb:255,255,255;
  --cream:#ffffff;--cream2:rgba(255,255,255,.7);--cream3:rgba(255,255,255,.32);
  --green:rgba(255,255,255,.82);--green-soft:rgba(255,255,255,.05);--rose:rgba(255,255,255,.6);
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.13);
  --shadow:none;--shadow-lg:none;
  --hm-empty:rgba(255,255,255,.10);--hm-level-1:rgba(255,255,255,.22);--hm-level-2:rgba(255,255,255,.42);--hm-level-3:rgba(255,255,255,.68);--hm-level-4:rgba(255,255,255,.96);--hm-future:rgba(255,255,255,.12);--hm-out:rgba(255,255,255,.05);--hm-cell-border:rgba(255,255,255,.12);--hm-grid-line:rgba(255,255,255,.08);--hm-hover-ring:rgba(255,255,255,.24);--hm-tooltip-bg:rgba(0,0,0,.96);--hm-tooltip-text:#fff;--stats-pill-bg:rgba(255,255,255,.06);--stats-pill-border:rgba(255,255,255,.12);
}
[data-theme="void"] body{background-color:#000}
[data-theme="void"] body::before{background:none}
[data-theme="void"] body::after{opacity:0}
[data-theme="void"] .topbar{background:#030303;border-bottom-color:rgba(255,255,255,.1)}
[data-theme="void"] .topbar-nav{background:#0a0a0a;border-color:rgba(255,255,255,.12)}
[data-theme="void"] .tnav{color:rgba(255,255,255,.5)}
[data-theme="void"] .tnav.active{background:#111;color:#fff;box-shadow:none}
[data-theme="void"] .tnav:hover:not(.active){color:rgba(255,255,255,.82)}
[data-theme="void"] .card{border-radius:8px;border-color:rgba(255,255,255,.07);box-shadow:none}
[data-theme="void"] .card:hover{border-color:rgba(255,255,255,.2);box-shadow:none}
[data-theme="void"] .timer-card::before{display:block;background:radial-gradient(circle,rgba(255,255,255,.06) 0%,transparent 65%);opacity:.9}
[data-theme="void"] .timer-card{border-radius:8px}
[data-theme="void"] .timer-num-center{color:#fff}
[data-theme="void"] .timer-num-center.live{color:#fff;text-shadow:none}
[data-theme="void"] .timer-num-center.break-live{color:rgba(255,255,255,.7);text-shadow:none}
[data-theme="void"] .mode-pill-wrap{box-shadow:none;background:#0c0c0c;border-color:rgba(255,255,255,.12)}
[data-theme="void"] .mode-pill-indicator{box-shadow:none;background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.06) 100%);border-color:rgba(255,255,255,.18)}
[data-theme="void"] .btn-start-center{background:#fff;color:#000;box-shadow:none}
[data-theme="void"] .btn-start-center:hover{background:#f0f0f0;box-shadow:none;transform:translateY(-1px)}
[data-theme="void"] .btn-start-center.paused{background:#1a1a1a;color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.13)}
[data-theme="void"] .btn-start-center.break-mode{background:rgba(255,255,255,.82);color:#000;box-shadow:none}
[data-theme="void"] .live-dot{background:#fff;animation:none;box-shadow:none}
[data-theme="void"] .bar-track-center{background:rgba(255,255,255,.1)}
[data-theme="void"] .logo em{color:#fff}
[data-theme="void"] .timer-context,
[data-theme="void"] .timer-context-center,
[data-theme="void"] .focus-quote{color:rgba(255,255,255,.76);opacity:.96}
[data-theme="void"] .timer-context em,
[data-theme="void"] .timer-context-center em{color:#fff;--timer-context-em-base:#fff}
[data-theme="void"] .timer-context-center--active{filter:drop-shadow(0 8px 24px rgba(255,255,255,.1))}
[data-theme="void"] .timer-context-center--active em{text-shadow:0 0 14px rgba(255,255,255,.08)}
[data-theme="void"] .bar-fill,
[data-theme="void"] .fs-bar-fill,
[data-theme="void"] .stats-rank-bar,
[data-theme="void"] .habits-momentum-fill{background:linear-gradient(90deg,rgba(255,255,255,.45),#fff)}

[data-theme="void"] .spip.cur,
[data-theme="void"] .fs-pip.cur{box-shadow:0 0 0 3px rgba(255,255,255,.14)}
[data-theme="void"] .fs-overlay::before{background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(255,255,255,.05) 0%,transparent 65%)}
[data-theme="void"] .complete-flash.show{animation:flashAnimVoid .8s ease}
[data-theme="void"] .notes-capture-card,
[data-theme="void"] .note-item--thought,
[data-theme="void"] .note-group--pinned,
[data-theme="void"] .habit-item--partial,
[data-theme="void"] .habits-momentum-card{background-image:none}
[data-theme="void"] .notes-capture-card{background:#090909;box-shadow:none}
[data-theme="void"] .note-item--thought{background:#070707}
[data-theme="void"] .note-group--pinned{background:#050505;border-color:rgba(255,255,255,.12)}
[data-theme="void"] .habit-item{background:#080808;border-color:rgba(255,255,255,.12);box-shadow:none}
[data-theme="void"] .habit-item:hover{background:#0d0d0d;border-color:rgba(255,255,255,.18)}
[data-theme="void"] .habit-item--partial{background:#0a0a0a;border-color:rgba(255,255,255,.16)}
[data-theme="void"] .habit-step-fill{background:#fff}
[data-theme="void"] .habits-momentum-card{background:#070707;box-shadow:none}
[data-theme="void"] .habit-hm-row{background:#050505;border-color:rgba(255,255,255,.1);box-shadow:none}
[data-theme="void"] .habit-hm-row:hover{border-color:rgba(255,255,255,.16);box-shadow:none}
[data-theme="void"] .habit-hm-streak{color:#fff}
[data-theme="void"] #habitHeatmaps .hm-cell--future{background:var(--hm-future)!important}
[data-theme="void"] .hm-cell--today,
[data-theme="void"] .stats-heatmap .hm-cell--today{outline-color:#fff}
[data-theme="void"] .habit-modal-inner,
[data-theme="void"] .book-modal-inner,
[data-theme="void"] .snd-modal{background:#050505;border-color:rgba(255,255,255,.12);box-shadow:none}
[data-theme="void"] .habit-custom-icon-input,
[data-theme="void"] .habit-modal-name,
[data-theme="void"] .habit-measure-input,
[data-theme="void"] .habit-measure-select{background:#0b0b0b;border-color:rgba(255,255,255,.14);color:#fff}
[data-theme="void"] .habit-custom-icon-input:focus,
[data-theme="void"] .habit-modal-name:focus,
[data-theme="void"] .habit-measure-input:focus,
[data-theme="void"] .habit-measure-select:focus{border-color:rgba(255,255,255,.28)}
[data-theme="void"] .habit-modal-save{background:#fff;color:#000}
@keyframes flashAnimVoid{0%{opacity:0;background:rgba(255,255,255,0)}30%{opacity:1;background:rgba(255,255,255,.06)}100%{opacity:0;background:rgba(255,255,255,0)}}

/* ── Day — warm morning light ── */
[data-theme="day"]{
  --ink:#fff9ee;--ink2:#f7efdf;--ink3:#f0e2c7;--ink4:#e6d4b2;--ink5:#dbc39c;
  --amber:#c9832f;--amber-dim:#9e6320;--amber-soft:rgba(201,131,47,.14);
  --accent-rgb:201,131,47;
  --cream:#3e2815;--cream2:#6a4b2d;--cream3:#977555;
  --green:#5f8d56;--green-soft:rgba(95,141,86,.12);--rose:#b55d4f;
  --border:rgba(94,64,31,.11);--border2:rgba(94,64,31,.18);
  --shadow:0 1px 14px rgba(110,77,35,.08),0 10px 28px rgba(172,126,64,.08);
  --shadow-lg:0 10px 52px rgba(120,84,38,.16);
  --hm-empty:rgba(94,64,31,.10);--hm-level-1:rgba(201,131,47,.24);--hm-level-2:rgba(201,131,47,.42);--hm-level-3:rgba(201,131,47,.66);--hm-level-4:rgba(201,131,47,.90);--hm-future:rgba(94,64,31,.08);--hm-out:rgba(94,64,31,.05);--hm-cell-border:rgba(94,64,31,.14);--hm-grid-line:rgba(94,64,31,.10);--hm-hover-ring:rgba(94,64,31,.24);--hm-tooltip-bg:rgba(62,40,21,.96);--hm-tooltip-text:#fff9ee;--stats-pill-bg:rgba(94,64,31,.08);--stats-pill-border:rgba(94,64,31,.14);
}
[data-theme="day"] body{background-color:#fff9ee;color:#3e2815}
[data-theme="day"] body::before{background:radial-gradient(circle at top,rgba(255,210,120,.16),transparent 46%)}
[data-theme="day"] body::after{opacity:.18}
[data-theme="day"] .topbar{background:rgba(255,249,238,.92);border-bottom-color:rgba(94,64,31,.12)}
[data-theme="day"] .topbar-nav{background:#f6ead3;border-color:rgba(94,64,31,.12)}
[data-theme="day"] .logo{color:#3e2815}
[data-theme="day"] .logo em{color:#c9832f}
[data-theme="day"] .tnav{color:#8b6947}
[data-theme="day"] .tnav.active{background:rgba(201,131,47,.12);color:#3e2815}
[data-theme="day"] .tnav:hover:not(.active){color:#5a3a20}
[data-theme="day"] .icon-btn{border-color:rgba(94,64,31,.14);color:#8b6947}
[data-theme="day"] .icon-btn:hover{border-color:rgba(94,64,31,.22);color:#5a3a20}
[data-theme="day"] .nav-burger{border-color:rgba(94,64,31,.14);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.7),rgba(255,255,255,.24) 52%,rgba(201,131,47,.08) 100%),rgba(244,230,206,.92);box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 8px 22px rgba(172,126,64,.14);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-theme="day"] .nav-burger:hover{border-color:rgba(201,131,47,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 10px 24px rgba(172,126,64,.16),0 0 0 1px rgba(201,131,47,.08)}
[data-theme="day"] .nav-burger.active{border-color:rgba(201,131,47,.3);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.78),rgba(201,131,47,.16) 54%,rgba(201,131,47,.08) 100%),rgba(244,230,206,.96);box-shadow:inset 0 1px 0 rgba(255,255,255,.84),0 12px 28px rgba(172,126,64,.18),0 0 26px rgba(201,131,47,.12)}
[data-theme="day"] .nav-burger-bar{background:#7b5c3a;box-shadow:none}
[data-theme="day"] .avatar-btn{background:rgba(201,131,47,.12);border-color:rgba(201,131,47,.32)}
[data-theme="day"] .live-dot{background:#d17a3c}
[data-theme="day"] .card{background:#fbf2e3;border-color:rgba(94,64,31,.09);box-shadow:0 3px 16px rgba(173,130,70,.08)}
[data-theme="day"] .card:hover{border-color:rgba(94,64,31,.16);box-shadow:0 8px 24px rgba(173,130,70,.12)}
[data-theme="day"] .timer-card::before{display:none}
[data-theme="day"] .mode-pill-wrap{background:rgba(255,255,255,.5);border-color:rgba(94,64,31,.1);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
[data-theme="day"] .mode-pill-indicator{background:rgba(201,131,47,.12);border-color:rgba(201,131,47,.18);box-shadow:none}
[data-theme="day"] .mode-pill{color:rgba(62,40,21,.5)}
[data-theme="day"] .mode-pill.active{color:#3e2815}
[data-theme="day"] .timer-num-center{color:#3e2815}
[data-theme="day"] .timer-num-center.live{color:#b97127;text-shadow:none}
[data-theme="day"] .timer-num-center.break-live{color:#5f8d56;text-shadow:none}
[data-theme="day"] .btn-start-center{background:#c9832f;color:#fff9ee;box-shadow:0 5px 18px rgba(201,131,47,.24)}
[data-theme="day"] .btn-start-center:hover{box-shadow:0 9px 26px rgba(201,131,47,.3)}
[data-theme="day"] .btn-start-center.paused{background:#f0dfc2;color:#7b5c3a;box-shadow:none;border-color:rgba(94,64,31,.12)}
[data-theme="day"] .btn-start-center.break-mode{background:#6f9b61;box-shadow:0 5px 18px rgba(95,141,86,.22)}
[data-theme="day"] .break-overlay{background:rgba(255,249,238,0.94)}
[data-theme="day"] .btn-sm-center{border-color:rgba(94,64,31,.12);color:#7b5c3a;background:rgba(255,255,255,.48)}
[data-theme="day"] .btn-sm-center:hover{border-color:rgba(94,64,31,.2);color:#51331b;background:rgba(255,255,255,.75)}
[data-theme="day"] .btn-tasks-toggle{background:#f4e6ce;border-color:rgba(94,64,31,.1);color:#7b5c3a;box-shadow:inset 0 1px 0 rgba(255,255,255,.62)}
[data-theme="day"] .drawer{background:#fbf2e3;border-right-color:rgba(94,64,31,.1)}
[data-theme="day"] .task-badge-count{background:#c9832f;color:#fff9ee}
[data-theme="day"] .bar-track-center{background:rgba(94,64,31,.12)}
[data-theme="day"] .topbar-icon,
[data-theme="day"] .drawer-close,
[data-theme="day"] .pip-trigger,
[data-theme="day"] .ambiance-btn{background:#f7ead4;border-color:rgba(94,64,31,.12);color:#6d5133;box-shadow:inset 0 1px 0 rgba(255,255,255,.62)}
[data-theme="day"] .topbar-icon:hover,
[data-theme="day"] .drawer-close:hover,
[data-theme="day"] .pip-trigger:hover,
[data-theme="day"] .ambiance-btn:hover{background:#f1e0c3;border-color:rgba(94,64,31,.2);color:#4e321a}
[data-theme="day"] .topbar-icon.active-icon,
[data-theme="day"] .ambiance-btn.active-icon{background:rgba(201,131,47,.14);border-color:rgba(201,131,47,.34);color:#b97127;box-shadow:none}
[data-theme="day"] .timer-context,
[data-theme="day"] .timer-context-center,
[data-theme="day"] .focus-quote{color:#6a4b2d;opacity:.9}
[data-theme="day"] .timer-context em,
[data-theme="day"] .timer-context-center em{color:#4a3117;--timer-context-em-base:#4a3117}
[data-theme="day"] .mtab{color:#7d5d3a}
[data-theme="day"] .mtab:hover{color:#4e321a}
[data-theme="day"] .settings-jump{background:rgba(255,249,238,.95);border-bottom-color:rgba(94,64,31,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
[data-theme="day"] .sjump{background:#f8edd9;border-color:rgba(94,64,31,.08);color:#735536;opacity:1}
[data-theme="day"] .sjump:hover{background:#f1e0c5;border-color:rgba(94,64,31,.14);color:#4e321a}
[data-theme="day"] .ss-sub,
[data-theme="day"] .mode-preset-times,
[data-theme="day"] .mode-desc,
[data-theme="day"] .theme-tag,
[data-theme="day"] .snd-card-label,
[data-theme="day"] .book-author,
[data-theme="day"] .book-modal-label,
[data-theme="day"] .book-rating-lbl,
[data-theme="day"] .habit-del-confirm-msg,
[data-theme="day"] .habit-custom-icon-input::placeholder,
[data-theme="day"] .book-search-input::placeholder{color:#846446;opacity:.92}
[data-theme="day"] .snd-modal,
[data-theme="day"] .habit-modal-inner,
[data-theme="day"] .book-modal-inner{background:#fff5e8;border-color:rgba(94,64,31,.1);box-shadow:0 20px 48px rgba(149,105,47,.14)}
[data-theme="day"] .snd-card,
[data-theme="day"] .habit-custom-icon-input,
[data-theme="day"] .habit-modal-name,
[data-theme="day"] .book-field,
[data-theme="day"] .book-select,
[data-theme="day"] .book-search-input{background:#f6e8d1;border-color:rgba(94,64,31,.12);color:#3e2815}
@media(hover:hover) and (pointer:fine){[data-theme="day"] .snd-card:hover{box-shadow:0 8px 24px rgba(149,105,47,.12)}}
[data-theme="day"] .snd-card.playing{box-shadow:0 0 0 2px rgba(201,131,47,.22),0 10px 24px rgba(201,131,47,.12)}
[data-theme="day"] .snd-tab:hover{background:#f2e3ca}
[data-theme="day"] .snd-master-range::-webkit-slider-runnable-track,
[data-theme="day"] .snd-card-vol::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--amber) var(--pct,70%),rgba(94,64,31,.14) var(--pct,70%))}
[data-theme="day"] .snd-master-range::-moz-range-track,
[data-theme="day"] .snd-card-vol::-moz-range-track{background:rgba(94,64,31,.14)}
[data-theme="day"] .book-status-badge{box-shadow:none}

/* ── Mist — cool airy light ── */
html[data-theme="mist"]{
  --ink:#d3dde8;--ink2:#c7d2df;--ink3:#bcc8d6;--ink4:#afbccb;--ink5:#9dabbc;
  --amber:#415a81;--amber-dim:#31486c;--amber-soft:rgba(65,90,129,.12);
  --accent-rgb:65,90,129;
  --cream:#16263b;--cream2:#41566f;--cream3:#617389;
  --green:#5d8f80;--green-soft:rgba(93,143,128,.12);--rose:#b56f81;
  --border:rgba(33,58,92,.14);--border2:rgba(33,58,92,.22);
  --shadow:0 10px 24px rgba(66,86,116,.08);--shadow-lg:0 18px 42px rgba(66,86,116,.12);
  --hm-empty:rgba(33,58,92,.10);--hm-level-1:rgba(65,90,129,.22);--hm-level-2:rgba(65,90,129,.40);--hm-level-3:rgba(65,90,129,.62);--hm-level-4:rgba(65,90,129,.88);--hm-future:rgba(65,90,129,.10);--hm-out:rgba(33,58,92,.06);--hm-cell-border:rgba(33,58,92,.14);--hm-grid-line:rgba(33,58,92,.08);--hm-hover-ring:rgba(33,58,92,.22);--hm-tooltip-bg:rgba(22,38,59,.96);--hm-tooltip-text:#eef3f8;--stats-pill-bg:rgba(33,58,92,.08);--stats-pill-border:rgba(33,58,92,.14);
}
[data-theme="mist"] body{background-color:#d3dde8;color:#16263b}
[data-theme="mist"] body::before{background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.3) 0%,rgba(255,255,255,0) 28%),radial-gradient(circle at 82% 80%,rgba(133,154,185,.14) 0%,rgba(133,154,185,0) 40%)}
[data-theme="mist"] body::after{opacity:.04}
[data-theme="mist"] .topbar{background:#dbe4ee;border-bottom-color:rgba(33,58,92,.12);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-theme="mist"] .topbar-nav{background:#e6edf5;border-color:rgba(65,90,129,.14);box-shadow:none}
[data-theme="mist"] .logo{color:#16263b}
[data-theme="mist"] .logo em{color:#6884b4}
[data-theme="mist"] .tnav{color:#667c98}
[data-theme="mist"] .tnav.active{background:rgba(65,90,129,.16);color:#16263b;box-shadow:none}
[data-theme="mist"] .tnav:hover:not(.active){color:#304766}
[data-theme="mist"] .icon-btn,
[data-theme="mist"] .topbar-icon,
[data-theme="mist"] .drawer-close,
[data-theme="mist"] .pip-trigger,
[data-theme="mist"] .ambiance-btn{background:#e2e9f1;border-color:rgba(33,58,92,.14);color:#4f6480;box-shadow:none}
[data-theme="mist"] .icon-btn:hover,
[data-theme="mist"] .topbar-icon:hover,
[data-theme="mist"] .drawer-close:hover,
[data-theme="mist"] .pip-trigger:hover,
[data-theme="mist"] .ambiance-btn:hover{background:#eaf0f6;border-color:rgba(33,58,92,.2);color:#16263b}
[data-theme="mist"] .topbar-icon.active-icon,
[data-theme="mist"] .ambiance-btn.active-icon{background:rgba(65,90,129,.16);border-color:rgba(65,90,129,.28);color:#415a81;box-shadow:none}
[data-theme="mist"] .avatar-btn{background:rgba(95,120,166,.12);border-color:rgba(95,120,166,.26)}
[data-theme="mist"] .live-dot{background:#7b91b8}
[data-theme="mist"] .card,
[data-theme="mist"] .spane-header,
[data-theme="mist"] .sgroup{background:#dde5ee;border-color:rgba(33,58,92,.12);box-shadow:0 8px 20px rgba(66,86,116,.06);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-theme="mist"] .card:hover,
[data-theme="mist"] .sgroup:hover{border-color:rgba(33,58,92,.18)}
[data-theme="mist"] .timer-card::before{background:radial-gradient(circle,rgba(120,151,198,.12) 0%,transparent 65%);display:block;opacity:1}
[data-theme="mist"] .mode-pill-wrap{background:#dbe4ee;border-color:rgba(33,58,92,.14);box-shadow:none}
[data-theme="mist"] .mode-pill-indicator{background:linear-gradient(135deg,rgba(65,90,129,.18) 0%,rgba(230,237,245,.96) 100%);border-color:rgba(65,90,129,.18);box-shadow:none}
[data-theme="mist"] .mode-pill{color:rgba(22,38,59,.56)}
[data-theme="mist"] .mode-pill.active{color:#16263b}
[data-theme="mist"] .timer-num-center{color:#16263b}
[data-theme="mist"] .timer-num-center.live{color:#5f78a6;text-shadow:0 0 80px rgba(95,120,166,.12)}
[data-theme="mist"] .timer-num-center.break-live{color:#5d8f80;text-shadow:0 0 80px rgba(93,143,128,.12)}
[data-theme="mist"] .btn-start-center{background:#415a81;color:#eef3f8;box-shadow:0 8px 18px rgba(65,90,129,.14)}
[data-theme="mist"] .btn-start-center:hover{box-shadow:0 10px 22px rgba(65,90,129,.18)}
[data-theme="mist"] .btn-start-center.paused{background:#d9e2ec;color:#556980;box-shadow:none;border-color:rgba(33,58,92,.14)}
[data-theme="mist"] .btn-start-center.break-mode{background:#5d8f80;box-shadow:0 12px 28px rgba(93,143,128,.18)}
[data-theme="mist"] .break-overlay{background:rgba(211,221,232,0.94)}
[data-theme="mist"] .btn-sm-center{border-color:rgba(33,58,92,.14);color:#556980;background:#dbe4ee}
[data-theme="mist"] .btn-sm-center:hover{border-color:rgba(33,58,92,.2);color:#16263b;background:#e5ecf3}
[data-theme="mist"] .btn-tasks-toggle{background:#dbe4ee;border-color:rgba(33,58,92,.14);color:#556980;box-shadow:none}
[data-theme="mist"] .drawer,
[data-theme="mist"] .snd-modal,
[data-theme="mist"] .habit-modal-inner,
[data-theme="mist"] .book-modal-inner{background:#d6e0ea;border-color:rgba(33,58,92,.14);box-shadow:0 16px 32px rgba(66,86,116,.1)}
[data-theme="mist"] .task-badge-count{background:#415a81;color:#eef3f8}
[data-theme="mist"] .bar-track-center,.fs-bar{background:rgba(56,86,123,.12)}
[data-theme="mist"] .timer-context,
[data-theme="mist"] .timer-context-center,
[data-theme="mist"] .focus-quote{color:#465b74;opacity:.96}
[data-theme="mist"] .timer-context em,
[data-theme="mist"] .timer-context-center em{color:#16263b;--timer-context-em-base:#16263b}
[data-theme="mist"] .mtab{color:#617590}
[data-theme="mist"] .mtab:hover{color:#20324d}
[data-theme="mist"] .settings-nav{background:rgba(235,242,250,.9);border-right-color:rgba(56,86,123,.08)}
[data-theme="mist"] .snav-item{color:#657b96}
[data-theme="mist"] .snav-item:hover{background:rgba(95,120,166,.08);border-color:rgba(95,120,166,.08);color:#20324d}
[data-theme="mist"] .snav-item.active{background:rgba(95,120,166,.12);border-color:rgba(95,120,166,.16);color:#20324d}
[data-theme="mist"] .snav-tagline,
[data-theme="mist"] .snav-footer,
[data-theme="mist"] .ss-sub,
[data-theme="mist"] .mode-preset-times,
[data-theme="mist"] .mode-desc,
[data-theme="mist"] .theme-tag,
[data-theme="mist"] .snd-card-label,
[data-theme="mist"] .book-author,
[data-theme="mist"] .book-modal-label,
[data-theme="mist"] .book-rating-lbl,
[data-theme="mist"] .habit-del-confirm-msg,
[data-theme="mist"] .habit-custom-icon-input::placeholder,
[data-theme="mist"] .book-search-input::placeholder{color:#70839b;opacity:.92}
[data-theme="mist"] .setting-row,
[data-theme="mist"] .snd-card,
[data-theme="mist"] .habit-custom-icon-input,
[data-theme="mist"] .habit-modal-name,
[data-theme="mist"] .book-field,
[data-theme="mist"] .book-select,
[data-theme="mist"] .book-search-input,
[data-theme="mist"] .setting-input,
[data-theme="mist"] .settings-code-input{background:rgba(255,255,255,.66);border-color:rgba(56,86,123,.1);color:#20324d}
@media(hover:hover) and (pointer:fine){[data-theme="mist"] .snd-card:hover{box-shadow:0 12px 26px rgba(112,137,173,.1)}}
[data-theme="mist"] .snd-card.playing{box-shadow:0 0 0 2px rgba(95,120,166,.18),0 16px 30px rgba(95,120,166,.12)}
[data-theme="mist"] .snd-tab:hover{background:rgba(95,120,166,.06)}
[data-theme="mist"] .snd-master-range::-webkit-slider-runnable-track,
[data-theme="mist"] .snd-card-vol::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--amber) var(--pct,70%),rgba(56,86,123,.12) var(--pct,70%))}
[data-theme="mist"] .snd-master-range::-moz-range-track,
[data-theme="mist"] .snd-card-vol::-moz-range-track{background:rgba(56,86,123,.12)}
[data-theme="mist"] .book-status-badge{box-shadow:none}

/* ── Paper — warm light mode ── */
html[data-theme="paper"]{
  --ink:#f9f6f0;--ink2:#f0ebe2;--ink3:#e6e0d6;--ink4:#dad3c8;--ink5:#cec6ba;
  --amber:#8B5A2B;--amber-dim:#6b4420;--amber-soft:rgba(139,90,43,.1);
  --accent-rgb:139,90,43;
  --cream:#1a150e;--cream2:#3d342a;--cream3:#7a6e62;
  --green:#4a7c5a;--green-soft:rgba(74,124,90,.1);--rose:#9b4444;
  --border:rgba(0,0,0,0.08);--border2:rgba(0,0,0,.15);
  --shadow:0 1px 12px rgba(0,0,0,.08),0 4px 24px rgba(0,0,0,.06);
  --shadow-lg:0 8px 48px rgba(0,0,0,.14);
  --hm-empty:rgba(61,52,42,.10);--hm-level-1:rgba(139,90,43,.22);--hm-level-2:rgba(139,90,43,.40);--hm-level-3:rgba(139,90,43,.62);--hm-level-4:rgba(139,90,43,.88);--hm-future:rgba(61,52,42,.08);--hm-out:rgba(61,52,42,.05);--hm-cell-border:rgba(61,52,42,.12);--hm-grid-line:rgba(61,52,42,.08);--hm-hover-ring:rgba(61,52,42,.20);--hm-tooltip-bg:rgba(26,21,14,.96);--hm-tooltip-text:#f9f6f0;--stats-pill-bg:rgba(61,52,42,.07);--stats-pill-border:rgba(61,52,42,.12);
}
[data-theme="paper"] body{background-color:#f9f6f0;color:#1a150e}
[data-theme="paper"] body::before{background:none}
[data-theme="paper"] body::after{opacity:0}
[data-theme="paper"] .topbar{background:rgba(249,246,240,.96);border-bottom-color:rgba(0,0,0,.1)}
[data-theme="paper"] .topbar-nav{background:#ede8de;border-color:rgba(0,0,0,.1)}
[data-theme="paper"] .logo{color:#1a150e}
[data-theme="paper"] .logo em{color:#8B5A2B}
[data-theme="paper"] .tnav{color:#7a6e62}
[data-theme="paper"] .tnav.active{background:rgba(0,0,0,.07);color:#1a150e}
[data-theme="paper"] .tnav:hover:not(.active){color:#3d342a}
[data-theme="paper"] .icon-btn{border-color:rgba(0,0,0,.12);color:#7a6e62}
[data-theme="paper"] .icon-btn:hover{border-color:rgba(0,0,0,.2);color:#3d342a}
[data-theme="paper"] .nav-burger{border-color:rgba(61,52,42,.12);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.68),rgba(255,255,255,.2) 52%,rgba(139,90,43,.06) 100%),rgba(235,227,215,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 8px 22px rgba(61,52,42,.12);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-theme="paper"] .nav-burger:hover{border-color:rgba(139,90,43,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.76),0 10px 24px rgba(61,52,42,.13),0 0 0 1px rgba(139,90,43,.06)}
[data-theme="paper"] .nav-burger.active{border-color:rgba(139,90,43,.26);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.76),rgba(139,90,43,.14) 54%,rgba(139,90,43,.07) 100%),rgba(235,227,215,.96);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 12px 28px rgba(61,52,42,.14),0 0 24px rgba(139,90,43,.1)}
[data-theme="paper"] .nav-burger-bar{background:#6f6256;box-shadow:none}
[data-theme="paper"] .avatar-btn{background:rgba(139,90,43,.12);border-color:rgba(139,90,43,.4)}
[data-theme="paper"] .live-dot{background:#9b4444}
[data-theme="paper"] .card{background:#f0ebe2;border-color:rgba(0,0,0,.08);box-shadow:0 1px 8px rgba(0,0,0,.07)}
[data-theme="paper"] .card:hover{border-color:rgba(0,0,0,.15);box-shadow:0 2px 16px rgba(0,0,0,.1)}
[data-theme="paper"] .timer-card::before{display:none}
[data-theme="paper"] .mode-pill-wrap{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
[data-theme="paper"] .mode-pill-indicator{background:rgba(0,0,0,.07);border-color:rgba(0,0,0,.12);box-shadow:none}
[data-theme="paper"] .mode-pill{color:rgba(26,21,14,.45)}
[data-theme="paper"] .mode-pill.active{color:#1a150e}
[data-theme="paper"] .timer-num-center{color:#1a150e}
[data-theme="paper"] .timer-num-center.live{color:#8B5A2B;text-shadow:none}
[data-theme="paper"] .timer-num-center.break-live{color:#4a7c5a;text-shadow:none}
[data-theme="paper"] .btn-start-center{background:#8B5A2B;color:#f9f6f0;box-shadow:0 3px 14px rgba(139,90,43,.22)}
[data-theme="paper"] .btn-start-center:hover{box-shadow:0 6px 22px rgba(139,90,43,.28)}
[data-theme="paper"] .btn-start-center.paused{background:#ebe3d7;color:#6f6256;box-shadow:none;border-color:rgba(61,52,42,.12)}
[data-theme="paper"] .btn-start-center.break-mode{background:#4a7c5a;box-shadow:0 3px 14px rgba(74,124,90,.2)}
[data-theme="paper"] .break-overlay{background:rgba(249,246,240,0.94)}
[data-theme="paper"] .btn-sm-center{border-color:rgba(61,52,42,.12);color:#6f6256;background:rgba(255,255,255,.35)}
[data-theme="paper"] .btn-sm-center:hover{border-color:rgba(61,52,42,.2);color:#3d342a;background:rgba(255,255,255,.65)}
[data-theme="paper"] .btn-tasks-toggle{background:#ebe3d7;border-color:rgba(61,52,42,.1);color:#6f6256;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
[data-theme="paper"] .drawer{background:#f0ebe2;border-right-color:rgba(0,0,0,.1)}
[data-theme="paper"] .task-badge-count{background:#8B5A2B;color:#f9f6f0}
[data-theme="paper"] .bar-track-center{background:rgba(0,0,0,.12)}
[data-theme="paper"] .topbar-icon,
[data-theme="paper"] .drawer-close,
[data-theme="paper"] .pip-trigger,
[data-theme="paper"] .ambiance-btn{background:#eee7dc;border-color:rgba(61,52,42,.12);color:#5a4e42;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
[data-theme="paper"] .topbar-icon:hover,
[data-theme="paper"] .drawer-close:hover,
[data-theme="paper"] .pip-trigger:hover,
[data-theme="paper"] .ambiance-btn:hover{background:#e6ddd0;border-color:rgba(61,52,42,.2);color:#2f261f}
[data-theme="paper"] .topbar-icon.active-icon,
[data-theme="paper"] .ambiance-btn.active-icon{background:rgba(139,90,43,.12);border-color:rgba(139,90,43,.35);color:#8B5A2B;box-shadow:none}
[data-theme="paper"] .timer-context,
[data-theme="paper"] .timer-context-center,
[data-theme="paper"] .focus-quote{color:#55483d;opacity:.88}
[data-theme="paper"] .timer-context em,
[data-theme="paper"] .timer-context-center em{color:#2b221a;--timer-context-em-base:#2b221a}
[data-theme="paper"] .mtab{color:#65584d}
[data-theme="paper"] .mtab:hover{color:#2f261f}
[data-theme="paper"] .settings-jump{background:rgba(249,246,240,.97);border-bottom-color:rgba(61,52,42,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
[data-theme="paper"] .sjump{background:#efe7dc;border-color:rgba(61,52,42,.08);color:#594d42;opacity:1}
[data-theme="paper"] .sjump:hover{background:#e6ddd1;border-color:rgba(61,52,42,.14);color:#2f261f}
[data-theme="paper"] .ss-sub,
[data-theme="paper"] .mode-preset-times,
[data-theme="paper"] .mode-desc,
[data-theme="paper"] .theme-tag,
[data-theme="paper"] .snd-card-label,
[data-theme="paper"] .book-author,
[data-theme="paper"] .book-modal-label,
[data-theme="paper"] .book-rating-lbl,
[data-theme="paper"] .habit-del-confirm-msg,
[data-theme="paper"] .habit-custom-icon-input::placeholder,
[data-theme="paper"] .book-search-input::placeholder{color:#675a4f;opacity:.92}
[data-theme="paper"] .snd-modal,
[data-theme="paper"] .habit-modal-inner,
[data-theme="paper"] .book-modal-inner{background:#f6f1e8;border-color:rgba(61,52,42,.1);box-shadow:0 18px 46px rgba(61,52,42,.14)}
[data-theme="paper"] .snd-card,
[data-theme="paper"] .habit-custom-icon-input,
[data-theme="paper"] .habit-modal-name,
[data-theme="paper"] .book-field,
[data-theme="paper"] .book-select,
[data-theme="paper"] .book-search-input{background:#ebe3d7;border-color:rgba(61,52,42,.12);color:#1a150e}
@media(hover:hover) and (pointer:fine){[data-theme="paper"] .snd-card:hover{box-shadow:0 6px 20px rgba(61,52,42,.1)}}
[data-theme="paper"] .snd-card.playing{box-shadow:0 0 0 2px rgba(139,90,43,.24),0 8px 22px rgba(139,90,43,.1)}
[data-theme="paper"] .snd-tab:hover{background:#ebe3d7}
[data-theme="paper"] .snd-master-range::-webkit-slider-runnable-track,
[data-theme="paper"] .snd-card-vol::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--amber) var(--pct,70%),rgba(61,52,42,.14) var(--pct,70%))}
[data-theme="paper"] .snd-master-range::-moz-range-track,
[data-theme="paper"] .snd-card-vol::-moz-range-track{background:rgba(61,52,42,.14)}
[data-theme="paper"] .book-status-badge{box-shadow:none}




/* ── Rank roadmap ── */
.rank-roadmap-wrap{margin:-8px 0 24px;padding:18px 22px;background:var(--ink2);border:1px solid var(--border);border-radius:18px}
.rank-roadmap-title{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--cream3);opacity:.55;margin-bottom:14px;font-weight:500}
.rank-roadmap{display:flex;align-items:flex-start;overflow-x:auto;padding:6px 0 4px;scrollbar-width:none;gap:0}
.rank-roadmap::-webkit-scrollbar{display:none}
.rank-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;opacity:.52;transition:opacity .3s;padding-top:4px}
.rank-step--done{opacity:.72}
.rank-step--active{opacity:1}
.rank-step-icon{font-size:22px;line-height:1;padding-top:4px}
.rank-step-label{font-size:9.5px;font-weight:500;color:var(--cream2);white-space:nowrap;letter-spacing:.02em}
.rank-step-min{font-size:8.5px;color:var(--cream3);opacity:.55}
.rank-step--active .rank-step-label{color:var(--amber)}
.rank-step--active .rank-step-icon{filter:drop-shadow(0 2px 8px rgba(var(--accent-rgb),.6))}
.rank-connector{flex:1;min-width:12px;height:1px;background:var(--border2);margin:0 2px;align-self:flex-start;margin-top:20px;opacity:.5}
.rank-connector--done{background:var(--amber-dim);opacity:.6}

/* ── PiP GIF dual slots ── */
.pip-gif-slots{display:flex;gap:16px;width:100%;flex-wrap:wrap}
.pip-gif-slot{flex:1;min-width:160px;display:flex;flex-direction:column;gap:6px}
.pip-gif-slot-label{font-size:11.5px;color:var(--cream2);font-weight:500}
.pip-gif-slot-hint{font-size:10px;color:var(--cream3);opacity:.6;font-weight:400;margin-left:4px}
.pip-gif-slot-row{display:flex;align-items:center;gap:8px}
.pip-gif-thumb{width:52px;height:52px;border-radius:8px;background:var(--ink3);border:1.5px solid var(--border2);flex-shrink:0;background-size:cover;background-position:center}
.pip-companion-btn[data-companion="gif"] .pip-companion-icon{font-size:16px}

/* ══════════════════════════════════════════
   SETTINGS — single-scroll page layout
══════════════════════════════════════════ */
.settings-jump{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:14px 28px;border-bottom:1px solid var(--border);background:rgba(14,13,11,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);position:sticky;top:0;z-index:10;flex-shrink:0}
.sjump{font-size:12px;font-family:'Instrument Sans',sans-serif;color:var(--cream3);text-decoration:none;padding:8px 14px;border-radius:999px;transition:all .18s;white-space:nowrap;background:rgba(255,255,255,.03);border:1px solid transparent;font-weight:500;opacity:.88}
.sjump:hover{color:var(--cream);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.06);transform:translateY(-1px)}
.settings-page{max-width:860px;margin:0 auto;padding:46px 44px 110px;width:100%}
.ss{margin-bottom:60px;scroll-margin-top:92px}
.ss-head{display:flex;flex-direction:column;gap:7px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border);position:relative}
.ss-head::after{content:'';position:absolute;left:0;bottom:-1px;width:72px;height:1px;background:linear-gradient(90deg,var(--amber),transparent)}
.ss-title{font-size:26px;font-family:'Playfair Display',serif;font-weight:500;color:var(--cream);margin:0;letter-spacing:-.4px}
.ss-sub{font-size:13px;color:var(--cream3);opacity:.62;margin:0;line-height:1.65;max-width:60ch}
@media(max-width:600px){.settings-jump{justify-content:flex-start;padding:8px 16px;gap:6px}.settings-page{padding:24px 20px 60px}.sjump{font-size:11px;padding:6px 10px}.ss{scroll-margin-top:82px}}

/* ══════════════════════════════════════════
   NOTE CONFIRM STEP
══════════════════════════════════════════ */
.note-confirm-wrap{display:flex;flex-direction:column;gap:8px;padding:10px 14px;background:rgba(var(--accent-rgb),.07);border:1px solid rgba(var(--accent-rgb),.25);border-radius:12px;margin-bottom:10px;animation:slide-down .18s ease}
@keyframes slide-down{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.note-confirm-hint{font-size:12.5px;color:var(--cream2);line-height:1.5}
.note-confirm-row{display:flex;align-items:center;gap:6px}
.note-confirm-input{flex:1;background:var(--ink3);border:1px solid var(--border2);border-radius:8px;padding:7px 10px;font-size:13px;color:var(--cream);font-family:'Instrument Sans',sans-serif;outline:none;transition:border-color .15s}
.note-confirm-input:focus{border-color:rgba(var(--accent-rgb),.4)}
.note-confirm-save{padding:7px 14px;border-radius:8px;background:var(--amber);color:#1a1510;font-size:12.5px;font-weight:600;border:none;cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:opacity .15s}
.note-confirm-save:hover{opacity:.85}
.note-confirm-skip{padding:7px 12px;border-radius:8px;background:none;color:var(--cream3);font-size:12.5px;border:1px solid var(--border);cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:all .15s}
.note-confirm-skip:hover{color:var(--cream2);border-color:var(--border2)}
.note-confirm-cancel{width:28px;height:28px;border-radius:7px;background:none;color:var(--cream3);border:none;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:color .15s;flex-shrink:0}
.note-confirm-cancel:hover{color:var(--cream)}
.ncc-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:50px;font-size:11px;font-weight:600;margin-right:2px}
.ncc-link{background:color-mix(in srgb, var(--blue) 18%, transparent);color:var(--blue)}
.ncc-code{background:color-mix(in srgb, var(--green) 18%, transparent);color:var(--green)}
.ncc-thought{background:rgba(var(--accent-rgb),.15);color:var(--amber)}
.ncc-note{background:rgba(255,255,255,.08);color:var(--cream2)}

/* ══════════════════════════════════════════
   NOTE LINK CARD
══════════════════════════════════════════ */
.note-link-card{display:flex;align-items:center;gap:10px;padding:8px 10px;background:color-mix(in srgb, var(--blue) 7%, transparent);border:1px solid color-mix(in srgb, var(--blue) 18%, transparent);border-radius:10px;text-decoration:none;transition:background .15s,border-color .15s}
.note-link-card:hover{background:color-mix(in srgb, var(--blue) 12%, transparent);border-color:color-mix(in srgb, var(--blue) 28%, transparent)}
.note-favicon{width:16px;height:16px;border-radius:3px;flex-shrink:0}
.note-link-info{flex:1;min-width:0}
.note-link-name{font-size:13px;font-weight:500;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}
.note-link-domain{font-size:11px;color:var(--cream3);opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-link-open{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:7px;color:var(--cream3);transition:color .15s,background .15s;flex-shrink:0}
.note-link-open:hover{color:var(--cream);background:rgba(255,255,255,.07)}

/* ══════════════════════════════════════════
   RICH NOTE MODAL
══════════════════════════════════════════ */
.rich-note-modal{position:fixed;inset:0;z-index:800;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:fade-in .18s ease}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.rich-note-inner{display:flex;flex-direction:column;width:min(920px,96vw);height:min(86vh,900px);background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.015) 100%),var(--ink2);border:1px solid var(--border2);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg);animation:pop-up .18s ease}
@keyframes pop-up{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.rn-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px 22px 16px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02)}
.rn-topbar-main{flex:1;min-width:0}
.rn-title{width:100%;background:none;border:none;outline:none;font-size:30px;font-weight:500;color:var(--cream);font-family:'Playfair Display',serif;letter-spacing:-.6px;line-height:1.1}
.rn-title::placeholder{color:var(--cream3);opacity:.32}
.rn-meta-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.rn-meta-pill{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.18);font-size:11px;color:var(--amber);letter-spacing:1.2px;text-transform:uppercase}
.rn-meta-text{font-size:12px;color:var(--cream3);opacity:.65}
.rn-topbar-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.rn-ghost-btn{padding:8px 14px;border-radius:10px;background:none;border:1px solid var(--border);color:var(--cream3);font-size:12px;cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:all .15s}
.rn-ghost-btn:hover{border-color:var(--border2);color:var(--cream2);background:rgba(255,255,255,.03)}
.rn-toolbar{display:flex;align-items:center;gap:6px;padding:10px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap;background:rgba(255,255,255,.015)}
.rn-fmt-btn{min-width:34px;height:30px;padding:0 10px;border-radius:9px;background:none;border:1px solid var(--border);color:var(--cream2);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;font-family:'Instrument Sans',sans-serif}
.rn-fmt-btn:hover{background:var(--ink3);border-color:var(--border2);color:var(--cream)}
.rn-fmt-i em{font-style:italic}
.rn-fmt-u u{text-decoration:underline}
.rn-fmt-clear{font-size:11px;color:var(--cream3)}
.rn-hl-btn{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .15s,border-color .15s;flex-shrink:0}
.rn-hl-btn:hover{transform:scale(1.15);border-color:rgba(255,255,255,.3)}
.rn-hl-btn[data-color="#F5E090"]{background:#F5E090}
.rn-hl-btn[data-color="#B8E0C8"]{background:#B8E0C8}
.rn-hl-btn[data-color="#F0C0C0"]{background:#F0C0C0}
.rn-hl-btn[data-color="#C0D8F0"]{background:#C0D8F0}
.rn-sep{width:1px;height:18px;background:var(--border);margin:0 2px;flex-shrink:0}
.rn-save-btn{padding:9px 16px;border-radius:10px;background:var(--amber);color:#1a1510;font-size:12.5px;font-weight:600;border:none;cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:opacity .15s}
.rn-save-btn:hover{opacity:.85}
.rn-writing-shell{display:flex;flex-direction:column;gap:12px;flex:1;padding:18px 22px 22px;min-height:0}
.rn-writing-label{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--cream3);opacity:.6}
.rn-body{flex:1;overflow-y:auto;padding:22px 24px;font-size:15px;line-height:1.85;color:var(--cream2);outline:none;min-height:320px;font-family:'Instrument Sans',sans-serif;white-space:pre-wrap;background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.rn-body:empty::before{content:attr(data-placeholder);color:var(--cream3);opacity:.36;pointer-events:none}
.rn-body b,.rn-body strong{color:var(--cream);font-weight:700}
.rn-body em,.rn-body i{color:var(--amber);font-style:italic}
.rn-body [style*="background-color"],.note-rich-body [style*="background-color"]{color:#1a1510!important;padding:.02em .16em;border-radius:.28em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media(max-width:700px){.rich-note-inner{width:100vw;height:100vh;max-height:none;border-radius:0}.rn-topbar{flex-direction:column;align-items:stretch}.rn-topbar-actions{justify-content:space-between;width:100%}.rn-title{font-size:24px}.rn-writing-shell{padding:16px}.rn-body{padding:18px 18px 22px}.note-workspace{padding:16px 14px 24px}.note-workspace-topbar{flex-direction:column;align-items:stretch}.note-workspace-actions{justify-content:space-between}.rich-note-inner--page{height:auto;min-height:calc(100vh - 140px)}}

/* ═══════════════════════════════════════════════════════
   FINAL RESPONSIVE POLISH
   Applied last so these rules win over duplicate blocks
   ═══════════════════════════════════════════════════════ */
body{min-height:100vh;min-height:100svh;min-height:100dvh;height:auto}

.fs-bar,
.break-overlay-bar{width:min(100%,340px)}

.break-toast{max-width:min(520px,calc(100vw - 24px));white-space:normal}

@media(max-width:920px){
  .stats-hero{align-items:flex-start;flex-direction:column}
  .stats-hero-left{width:100%}
  .stats-hero-tip{margin-left:0;max-width:none;padding-left:0;padding-top:12px;border-left:none;border-top:1px solid var(--border);width:100%}
  .stats-score-block{width:100%;padding-left:0;padding-top:18px;border-left:none;border-top:1px solid var(--border);text-align:left}
  .stats-rank-bar-wrap{max-width:none}
  .books-grid--status{grid-template-columns:repeat(3,minmax(0,1fr))}
  .focus-center{justify-content:flex-start;min-height:calc(100svh - 67px);padding:clamp(88px,12vh,148px) 24px 32px;max-width:none}
}

@media(max-width:700px){
  .topbar{padding:12px 14px;gap:10px}
  .logo{font-size:19px}
  .topbar-right{gap:8px}
  .focus-center{justify-content:flex-start;max-width:none;min-height:calc(100svh - 61px);padding:clamp(52px,9vh,96px) 16px 20px}
  .bar-track-center{width:100%}
  .controls-center,
  .util-row,
  .break-overlay-btns,
  .fs-controls,
  .habit-modal-footer,
  .book-modal-footer,
  .note-confirm-row,
  .note-workspace-topbar,
  .note-workspace-actions,
  .habits-topbar,
  .habits-topbar-left,
  .notes-topbar,
  .notes-topbar-left{flex-wrap:wrap}
  .stats-card,
  .settings-page,
  .stats-page,
  .habits-page,
  .books-page,
  .notes-view,
  .note-workspace{padding-left:16px;padding-right:16px}
  .setting-row{align-items:flex-start;flex-direction:column}
  .setting-ctrl{width:100%;justify-content:space-between;flex-wrap:wrap}
  .setting-sub{max-width:none}
  .settings-panes{padding:18px 16px 32px}
  .settings-jump{justify-content:flex-start;padding-inline:16px}
  .wallpaper-url-wrap .settings-code-input{min-width:0}
  .note-search{width:100%}
  .note-item-head{align-items:flex-start;flex-wrap:wrap}
  .stats-pr-row,
  .stats-history-row,
  .credit-row,
  .print-book-head{align-items:flex-start;flex-direction:column}
  .books-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .books-grid--status{grid-template-columns:repeat(2,minmax(0,1fr))}
  .books-group-row .book-card{flex-basis:136px}
  .book-pages-wrap{grid-template-columns:1fr}
  .book-modal-section,
  .sgroup,
  .habit-hm-row{padding:16px}
  .theme-swatch,
  .pip-theme-swatch{min-width:calc(50% - 8px);max-width:none}
}

@media(max-width:560px){
  .timer-num-center{font-size:clamp(64px,22vw,96px);letter-spacing:-3px}
  .mode-pill-wrap{margin-bottom:24px;width:fit-content;max-width:240px}
  .mode-pill{flex:1 1 0;text-align:center;padding-inline:12px}
  .btn-start-center,
  .btn-sm-center,
  .btn-tasks-toggle,
  .pip-trigger,
  .ambiance-btn{width:100%;justify-content:center}
  .break-overlay-card{max-width:none;width:100%;padding:0 16px}
  .break-overlay-title{font-size:28px}
  .break-overlay-timer{font-size:60px}
  .break-overlay-btns > *{flex:1 1 100%}
  .fs-close{top:14px;right:14px}
  .fs-time{font-size:clamp(72px,24vw,120px);letter-spacing:-4px}
  .notes-capture-card{padding:14px}
  .note-capture-wrap{align-items:flex-end;flex-direction:row}
  .note-capture-btn{width:34px;height:34px;flex-shrink:0}
  .stats-today-grid{grid-template-columns:1fr}
  .stats-card{padding:16px}
  .stats-mini-stat{font-size:18px}
  .stats-heatmap-shell{grid-template-columns:1fr}
  .hm-day-labels,
  .hm-week-labels{display:none}
  .hm-month-labels{margin-bottom:8px}
  #habitHeatmaps .stats-heatmap-shell{grid-template-columns:1fr}
  .book-modal-inner,
  .habit-modal-inner,
  .snd-modal{width:100%;max-width:100%;border-radius:20px 20px 0 0}
  .habit-modal-footer > *,
  .book-modal-footer > *{flex:1 1 auto}
  .snd-modal{left:0;top:auto;bottom:0;transform:translateY(100%);height:88vh;max-height:88vh;transition:transform .32s cubic-bezier(.34,1.2,.64,1),opacity .22s ease}
  .snd-modal.open{transform:translateY(0)}
  .snd-card-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:420px){
  .topbar{padding:10px 12px}
  .theme-grid,
  .pip-theme-grid,
  .font-style-grid{gap:10px}
  .theme-swatch,
  .pip-theme-swatch,
  .font-style-card{min-width:100%}
  .books-grid,
  .books-grid--status,
  .mode-presets{grid-template-columns:1fr}
  .books-action-btn,
  .books-add-btn,
  .notes-new-btn{width:100%;justify-content:center}
  .book-card-backdrop-inner{padding:10px}
}

/* ── Rich note display in notes list ── */
.note-rich-title{font-size:13px;font-weight:600;color:var(--cream);margin-bottom:4px;line-height:1.4}
.note-rich-body{font-size:12.5px;color:var(--cream2);line-height:1.6;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;opacity:.8}
.note-rich-body--compact{-webkit-line-clamp:3}
.note-rich-body b,.note-rich-body strong{color:var(--cream);font-weight:600}
.note-rich-body em,.note-rich-body i{font-style:italic}

/* ══════════════════════════════════════════
/* Credits pane */
.credits-list{display:flex;flex-direction:column;gap:0}
.credit-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--border)}
.credit-row:last-child{border-bottom:none}
.credit-name{font-size:13px;color:var(--cream2)}
.credit-src{font-size:11.5px;color:var(--cream3);opacity:.45;text-align:right;flex-shrink:0}
/* Task drawer empty state */
.task-empty{display:none;flex-direction:column;align-items:center;justify-content:center;padding:36px 18px;gap:10px;color:var(--cream3);opacity:.5;text-align:center;border:1px dashed var(--border2);border-radius:14px;background:rgba(255,255,255,.02)}
.task-empty p{font-size:14px;margin:0;color:var(--cream2)}
.drawer-task-count{font-size:11px;color:var(--cream3);opacity:.5}
.fs-overlay{display:none;position:fixed;inset:0;z-index:500;background:var(--ink);flex-direction:column;align-items:center;justify-content:center;animation:fsIn .35s ease}
.fs-overlay.active{display:flex}
@keyframes fsIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.fs-overlay::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(var(--accent-rgb),.09) 0%,transparent 65%);pointer-events:none}
.fs-close{position:absolute;top:24px;right:28px;background:none;border:1px solid var(--border);border-radius:50px;padding:7px 16px;color:var(--cream3);font-family:'Instrument Sans',sans-serif;font-size:12.5px;cursor:pointer;transition:all .2s;z-index:1}
.fs-close:hover{border-color:var(--border2);color:var(--cream)}
.fs-mode-label{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--cream3);margin-bottom:16px;z-index:1}
.fs-mode-label.live{color:var(--amber)}
.fs-time{font-family:'Playfair Display',serif;font-size:clamp(100px,22vw,200px);letter-spacing:-8px;line-height:.85;color:var(--cream);text-align:center;transition:color .4s;z-index:1;user-select:none}
.fs-time.live{color:var(--amber);text-shadow:0 0 120px rgba(var(--accent-rgb),.18)}
.fs-time.break-live{color:var(--green);text-shadow:0 0 120px rgba(125,191,142,.15)}
.fs-bar{width:520px;height:6px;background:var(--ink4);border-radius:3px;margin:52px 0 32px;z-index:1;overflow:hidden}
.fs-bar-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--amber-dim),var(--amber));transition:width .95s cubic-bezier(.4,0,.2,1)}
.fs-pips{display:flex;gap:6px;margin-bottom:28px;z-index:1}
.fs-pip{width:9px;height:9px;flex-shrink:0;border-radius:50%;background:var(--ink4);border:1px solid var(--ink5);transition:width .35s cubic-bezier(.34,1.56,.64,1),border-radius .35s cubic-bezier(.34,1.56,.64,1),background .35s,border-color .35s,box-shadow .35s,transform .35s}
.fs-pip.done{width:22px;height:9px;border-radius:100px;background:var(--amber);border-color:var(--amber);}
.fs-pip.cur{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.2);animation:pipPulse 2s infinite;transform:scale(1.2)}
.fs-controls{display:flex;gap:12px;z-index:1}
.fs-task{font-size:15px;color:var(--cream3);margin-bottom:24px;z-index:1}
.fs-task em{color:var(--cream2);font-style:normal}
.break-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(140px);background:var(--ink2);border:1px solid var(--border2);border-radius:50px;padding:13px 20px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-lg);z-index:600;font-size:13px;color:var(--cream2);transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .18s ease,visibility .18s ease;white-space:nowrap;backdrop-filter:blur(16px);opacity:0;visibility:hidden;pointer-events:none}
.break-toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible;pointer-events:auto}
.btn-ty{background:var(--green);color:var(--ink);border:none;border-radius:50px;padding:7px 18px;font-family:'Instrument Sans',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}
.btn-ty:hover{transform:scale(1.04)}
.btn-tn{background:none;border:none;color:var(--cream3);font-family:'Instrument Sans',sans-serif;font-size:13px;cursor:pointer;transition:color .2s}
.btn-tn:hover{color:var(--cream2)}
.complete-flash{position:fixed;inset:0;z-index:700;pointer-events:none;opacity:0}
.complete-flash.show{animation:flashAnim .8s ease}
@keyframes flashAnim{0%{opacity:0;background:rgba(var(--accent-rgb),0)}30%{opacity:1;background:rgba(var(--accent-rgb),.08)}100%{opacity:0;background:rgba(var(--accent-rgb),0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.timer-card{animation:fadeUp .45s .04s ease both}
#pipVideo{display:none;position:fixed;bottom:0;right:0;width:1px;height:1px}
/* Section divider with label */
.bj-section{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--cream3);opacity:.3;padding:10px 8px 4px;display:flex;align-items:center;gap:8px}
.bj-section::after{content:'';flex:1;height:1px;background:var(--border)}
.live-clock{font-family:'Playfair Display',serif;font-size:14px;color:var(--cream3);letter-spacing:.5px;opacity:.7;user-select:none}
.break-overlay{position:fixed;inset:0;z-index:400;background:rgba(14,13,11,0.92);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .5s ease}
.break-overlay.show{opacity:1;pointer-events:auto}
.break-overlay-card{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;max-width:400px;padding:0 24px}
.break-overlay-emoji{font-size:52px;margin-bottom:20px;animation:breakFloat 4s ease-in-out infinite}
@keyframes breakFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.break-overlay-title{font-family:'Playfair Display',serif;font-size:32px;color:var(--green);letter-spacing:-.5px;margin-bottom:10px}
.break-overlay-sub{font-size:14px;color:var(--cream3);line-height:1.6;margin-bottom:28px;opacity:.7}
.break-overlay-timer{font-family:'Playfair Display',serif;font-size:72px;letter-spacing:-4px;line-height:1;color:var(--cream);margin-bottom:20px;font-variant-numeric:tabular-nums}
.break-overlay-bar{width:240px;height:3px;background:var(--ink4);border-radius:2px;margin-bottom:32px}
.break-overlay-fill{height:100%;border-radius:2px;background:var(--green);transition:width .95s cubic-bezier(.4,0,.2,1)}
.break-overlay-btns{display:flex;align-items:center;gap:10px}
.break-skip-btn{background:none;border:1px solid var(--border2);border-radius:50px;padding:10px 24px;font-family:'Instrument Sans',sans-serif;font-size:13.5px;color:var(--cream3);cursor:pointer;transition:all .2s}
.break-skip-btn:hover{border-color:var(--cream3);color:var(--cream)}
.break-pause-btn{background:none;border:1px solid var(--border2);border-radius:50px;padding:10px 24px;font-family:'Instrument Sans',sans-serif;font-size:13.5px;color:var(--cream3);cursor:pointer;transition:all .2s}
.break-pause-btn:hover{border-color:var(--cream3);color:var(--cream)}
.break-pause-btn.paused{border-color:var(--green);color:var(--green)}
.topbar-stats{display:flex;align-items:center;gap:10px;background:var(--ink2);border:1px solid var(--border);border-radius:50px;padding:5px 14px;margin-right:4px;position:relative;z-index:203;flex-shrink:0}
.topbar-stat{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--cream2);font-variant-numeric:tabular-nums}
.topbar-stat-icon{font-size:12px;line-height:1}
.topbar-stat-lbl{font-size:10.5px;color:var(--cream3);opacity:.6}
.topbar-stat-sep{width:1px;height:14px;background:var(--border2);margin:0 2px}
@media(max-width:1120px) and (min-width:921px){
  .topbar{padding:14px 22px;gap:12px}
  .topbar-nav{gap:2px}
  .tnav{padding:6px 11px;font-size:12px}
  .topbar-right{gap:8px}
  .topbar-stats{padding:5px 10px;gap:8px}
  .topbar-stat-lbl{display:none}
  .topbar-stat-sep{margin:0}
  .live-clock{display:none}
}
.free-wave-canvas{display:none;position:absolute;inset:0;width:100%;height:100%}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--ink4);border-radius:2px}
.stats-page{max-width:860px;margin:0 auto;padding:36px 32px 60px;width:100%}
.stats-section-title{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--cream3);font-weight:500;margin-bottom:12px;opacity:.65}
.stats-card{background:var(--ink2);border:1px solid var(--border);border-radius:18px;padding:20px 22px;transition:border-color .25s}
.stats-card:hover{border-color:var(--border2)}
.stats-card-label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--cream3);font-weight:500;margin-bottom:14px;opacity:.55}
.stats-two-col{display:flex;gap:14px}
.stats-hero{display:flex;align-items:center;justify-content:space-between;background:var(--ink2);border:1px solid var(--border);border-radius:20px;padding:24px 28px;margin-bottom:24px;gap:24px}
.stats-hero-left{display:flex;align-items:center;gap:18px;flex:1;min-width:0}
.stats-hero-copy{min-width:0;flex:0 1 320px}
.stats-rank-badge{font-size:48px;line-height:1;flex-shrink:0}
.stats-rank-title{font-family:'Playfair Display',serif;font-size:22px;color:var(--cream);letter-spacing:-.3px;margin-bottom:3px}
.stats-rank-sub{font-size:12px;color:var(--cream3);margin-bottom:10px;opacity:.7}
.stats-rank-bar-wrap{height:5px;background:var(--ink4);border-radius:3px;overflow:hidden;max-width:260px}
.stats-rank-bar{height:100%;background:linear-gradient(90deg,var(--amber-dim),var(--amber));border-radius:3px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.stats-hero-tip{margin-left:auto;max-width:188px;padding-left:14px;border-left:1px solid rgba(255,255,255,.04);align-self:flex-start;transform:translateY(2px)}
.stats-hero-tip-kicker{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--cream3);opacity:.38;margin-bottom:4px;font-weight:500}
.stats-hero-tip-text{font-size:11px;line-height:1.38;color:var(--cream3);opacity:.72;font-weight:400}
.stats-score-block{text-align:center;flex-shrink:0;padding-left:24px;border-left:1px solid var(--border)}
.stats-score-num{font-family:'Playfair Display',serif;font-size:54px;color:var(--amber);letter-spacing:-3px;line-height:1;transition:all .4s}
.stats-score-lbl{font-size:11px;color:var(--cream3);letter-spacing:1.5px;text-transform:uppercase;opacity:.55;margin-top:2px}
.stats-score-sub{font-size:12px;color:var(--green);margin-top:4px}
.stats-today-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:0}
.stats-tile{background:var(--ink2);border:1px solid var(--border);border-radius:16px;padding:16px 14px;text-align:center;transition:all .25s}
.stats-tile:hover{border-color:var(--border2);transform:translateY(-2px)}
.stats-tile-icon{font-size:20px;margin-bottom:8px}
.stats-tile-val{font-family:'Playfair Display',serif;font-size:32px;color:var(--cream);letter-spacing:-1px;line-height:1;transition:all .3s}
.stats-tile-val.amber{color:var(--amber)}
.stats-tile-val.green{color:var(--green)}
.stats-tile-lbl{font-size:10.5px;color:var(--cream3);margin-top:4px;opacity:.6}
.stats-tile-kicker{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--cream3);opacity:.45;margin-bottom:6px;font-weight:500}
.stats-tile--streak{border-color:rgba(var(--accent-rgb),.18)}
.stats-bar-chart{display:flex;gap:5px;align-items:flex-end;height:100px;padding-bottom:0}
.stats-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:default}
.stats-bar-count{font-size:9px;color:var(--cream3);opacity:.72;font-variant-numeric:tabular-nums;min-height:12px;line-height:12px}
.stats-bar-col-bar{width:100%;border-radius:4px 4px 0 0;transition:height .5s cubic-bezier(.4,0,.2,1),background .3s;min-height:3px;align-self:flex-end}
.stats-bar-col-bar:hover{filter:brightness(1.15)}
.stats-bar-labels{display:flex;gap:5px;margin-top:6px}
.stats-bar-lbl{flex:1;text-align:center;font-size:9.5px;color:var(--cream3);opacity:.62}
.stats-bar-lbl.today{color:var(--amber);opacity:1;font-weight:500}
.stats-mini-stat{font-family:'Playfair Display',serif;font-size:20px;color:var(--cream);letter-spacing:-.5px;line-height:1.2;margin-bottom:2px}
.stats-mini-sub{font-size:11.5px;color:var(--cream3);opacity:.6}
/* 52 weeks fills container: each week ≈ 12px wide, cells ≈ 12×12px square */
.stats-heatmap-shell{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start}
.stats-heatmap-main{min-width:0}
.stats-heatmap{display:flex;gap:3px;width:100%;overflow:visible}
.hm-week{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;position:relative}
.hm-week::after{content:'';position:absolute;top:0;bottom:0;right:-2px;width:1px;background:var(--hm-grid-line);pointer-events:none}
.hm-cell{height:12px;border-radius:2px;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease,opacity .15s;position:relative;z-index:0}
.hm-cell:hover{opacity:1;box-shadow:0 0 0 2px var(--hm-hover-ring),0 4px 12px rgba(0,0,0,.3);z-index:5;filter:brightness(1.15)}
.hm-cell::before{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);background:var(--hm-tooltip-bg);color:var(--hm-tooltip-text);padding:7px 9px;border-radius:8px;border:1px solid var(--border2);font-size:10px;line-height:1.4;white-space:pre;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;box-shadow:0 10px 30px rgba(0,0,0,.3);z-index:3}
.hm-cell:hover::before{opacity:1;transform:translateX(-50%) translateY(0)}
.stats-heatmap .hm-cell--today{outline:2px solid var(--amber);outline-offset:1px;position:relative;z-index:2}
.hm-day-labels{display:grid;grid-template-rows:repeat(7,12px);gap:3px;margin-top:20px}
.hm-day-labels span{display:flex;align-items:center;height:12px;font-size:9px;color:var(--cream3);opacity:.72}
.hm-month-labels{display:grid;height:16px;margin-bottom:4px;width:100%;gap:3px;align-items:end}
.hm-month-labels span{font-size:9px;color:var(--cream3);opacity:.7;white-space:nowrap;overflow:visible;line-height:1}
.hm-scroll-wrap{width:100%}
.hm-week-labels{display:flex;justify-content:space-between;font-size:9px;color:var(--cream3);opacity:.62;margin-top:8px}
.stats-heatmap-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:12px}
.stats-heatmap-legend{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--cream3)}
.hm-summary{font-size:11px;color:var(--cream3);opacity:.72}
.hm-swatch{width:12px;height:12px;border-radius:2px}
.stats-pr-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}
.stats-pr-row:last-child{border-bottom:none}
.stats-pr-lbl{color:var(--cream3)}
.stats-pr-val{color:var(--cream);font-weight:500;font-family:'Playfair Display',serif;font-size:15px}
.stats-pr-val.amber{color:var(--amber)}
.stats-pr-val.green{color:var(--green)}
.stats-hour-chart{display:flex;gap:2px;align-items:flex-end;height:80px;margin-bottom:4px}
.hour-bar{flex:1;border-radius:4px 4px 0 0;min-height:2px;transition:height .4s cubic-bezier(.4,0,.2,1),background .3s}
.stats-hour-labels{display:flex;justify-content:space-between;font-size:9px;color:var(--cream3);opacity:.4;margin-bottom:10px}
.stats-peak-time{font-size:12px;color:var(--amber);font-style:italic}
.stats-hour-tip{font-size:12px;color:var(--cream3);opacity:.7;margin-top:10px;line-height:1.55;border-top:1px solid var(--border);padding-top:10px}
.stats-hour-tip:empty{display:none}
.stats-history-scroll{max-height:340px;overflow:auto;padding-right:4px}
.stats-history-list{display:flex;flex-direction:column}
.stats-history-empty{font-size:12px;color:var(--cream3);opacity:.6}
.stats-history-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--border)}
.stats-history-row:last-child{border-bottom:none;padding-bottom:0}
.stats-history-main{min-width:0}
.stats-history-date{font-size:13px;color:var(--cream);margin-bottom:3px}
.stats-history-sub{font-size:11px;color:var(--cream3);opacity:.6}
.stats-history-metrics{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.stats-history-pill{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:var(--stats-pill-bg);border:1px solid var(--stats-pill-border);font-size:11px;color:var(--cream2);white-space:nowrap}
.stats-history-pill strong{color:var(--cream);font-weight:500}
.stats-flow-grid{display:flex;flex-direction:column;gap:28px}
.stats-next-level{display:flex;align-items:center;gap:20px}
.stats-next-icon{font-size:40px;flex-shrink:0}
.stats-next-title{font-family:'Playfair Display',serif;font-size:18px;color:var(--cream);margin-bottom:3px}
.stats-next-sub{font-size:12.5px;color:var(--cream3)}
/* ── Desktop focus layout: overlay task sidebar ── */
@media(min-width:821px){
  #view-focus{position:relative;overflow:hidden}
  /* Drawer overlays from the left — doesn't displace the timer */
  #taskDrawer{
    position:absolute !important;
    top:0 !important;bottom:0 !important;left:0 !important;
    width:320px;
    height:100% !important;
    transform:translateX(-100%) !important;
    transition:transform .28s cubic-bezier(.4,0,.2,1) !important;
    border-right:1px solid var(--border2);
    border-radius:0;
    z-index:211;
    background:var(--ink2);
  }
  /* Sidebar open state */
  #view-focus.sidebar-open #taskDrawer{transform:translateX(0) !important}
  /* Dim overlay behind sidebar */
  #drawerOverlay{display:block !important;top:0 !important;background:rgba(0,0,0,0);pointer-events:none}
  #view-focus.sidebar-open #drawerOverlay{background:rgba(0,0,0,.35);pointer-events:auto}
  /* Timer always fills full width */
  .focus-center{flex:1;min-height:0;height:auto;overflow-y:auto;max-width:820px;padding:44px 40px}
  .btn-tasks-toggle{font-size:12px;padding:9px 14px}
  #taskDrawer .drawer-header{padding-bottom:14px}
}

@media(max-width:920px){
  .main-grid{grid-template-columns:1fr;padding:16px}
  .right{display:none}
  /* Tablet: hide inline nav, show hamburger */
  .topbar{grid-template-columns:auto 1fr auto;padding:12px 20px;gap:12px;position:sticky}
  .logo{position:absolute;left:50%;transform:translateX(-50%);justify-self:auto;z-index:202;white-space:nowrap}
  .topbar-nav{
    display:none;
    position:absolute;top:calc(100% + 8px);left:20px;right:auto;
    flex-direction:column;
    background:rgba(14,13,11,.98);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border:1px solid var(--border2);
    border-radius:18px;padding:8px;gap:3px;
    z-index:205;min-width:180px;max-width:min(240px,calc(100vw - 40px));width:max-content;
    box-shadow:0 12px 32px rgba(0,0,0,.34);
  }
  .topbar-nav.nav--open{display:flex;animation:slide-down .18s ease}
  @keyframes slide-down{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
  .topbar-nav .tnav{border-radius:10px;padding:11px 16px;font-size:13px;text-align:left;width:100%}
  .nav-burger{display:flex;grid-column:1;justify-self:start}
  .topbar-stats{display:none}
  .live-clock{display:none}
  .topbar-right{grid-column:3;justify-self:end}
  .drawer-overlay,.drawer{top:57px}
  .stats-two-col{flex-direction:column}
  .settings-page{padding:24px 24px 60px}
  .notes-view{padding:20px 16px}
  .stats-page{padding:24px 16px 48px}
  .mode-pill{padding:8px 16px;font-size:12.5px}
}

/* ═══ IPAD — comfortable sizing for tablet range ═══ */
@media(min-width:601px) and (max-width:920px){
  .mode-pill{padding:10px 22px;font-size:13.5px}
  .btn-start-center{padding:13px 34px;font-size:15px}
  .btn-sm-center{padding:11px 20px;font-size:13px}
  .btn-tasks-toggle{padding:10px 16px;font-size:13px}
  .focus-center{padding:40px 40px 32px;min-height:calc(100svh - 67px);justify-content:center;max-width:820px;margin:0 auto}
  .timer-num-center{font-size:clamp(96px,14vw,160px);letter-spacing:-5px}
}

/* ═══ MOBILE — bottom nav, touch targets, layout ═══ */
@media(max-width:600px){
  /* Mobile: hide hamburger, use fixed bottom bar */
  .nav-burger{display:flex!important}
  .nav-backdrop{display:none}
  .topbar-nav{
    display:none;
    position:absolute;top:calc(100% + 8px);left:14px;right:auto;bottom:auto;
    flex-direction:column;
    background:rgba(14,13,11,.98);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border:1px solid var(--border2);
    border-radius:18px;padding:8px;gap:3px;
    z-index:205;min-width:180px;max-width:min(220px,calc(100vw - 28px));width:max-content;
    box-shadow:0 12px 32px rgba(0,0,0,.34);animation:none;
  }
  .topbar-nav.nav--open{display:flex}
  /* Mobile menu items */
  .tnav{
    flex:none;padding:11px 16px;font-size:13px;letter-spacing:0;
    border-radius:10px;text-align:left;width:100%;
    background:none;
    border:1px solid transparent;
    transition:background .18s,color .18s,border-color .18s;
  }
  .tnav.active{
    background:var(--ink3);
    color:var(--cream);
    border-color:transparent;
    box-shadow:0 1px 4px rgba(0,0,0,.4);
  }
  /* Push content above bottom nav */
  .view.active{padding-bottom:0}
  .focus-center{min-height:calc(100svh - 53px);padding:20px 18px 12px;justify-content:center}
  /* Topbar compact */
  .topbar{padding:10px 14px}
  .avatar-btn{width:30px;height:30px;font-size:13px}
  .topbar-icon{width:44px;height:44px}
  .drawer-overlay,.drawer{top:53px}
  /* Mode pill */
  .mode-pill{padding:7px 13px;font-size:12px}
  /* Start button */
  .btn-start-center{padding:10px 22px;font-size:13px}
  .btn-sm-center{padding:8px 14px;font-size:12px}
  .btn-tasks-toggle{padding:8px 12px;font-size:12px}
  /* Timer scaling */
  .timer-num-center{font-size:clamp(78px,20vw,120px);letter-spacing:-4px}
  /* Adjust floating elements */
  .break-toast{bottom:20px;font-size:12px}
  /* Task drawer full width on mobile */
  .drawer{width:100%;max-width:100%;border-right:none;border-top:1px solid var(--border2);top:auto;height:80vh;border-radius:20px 20px 0 0;transform:translateY(100%)}
  .drawer.open{transform:translateY(0)}
  /* Notes grid single column on phone */
  .notes-view{padding:14px 12px}
  /* Stats compact */
  .stats-today-grid{grid-template-columns:repeat(2,1fr)}
  .stats-page{padding:16px 14px 24px}
  /* Settings compact */
  .settings-page{padding:16px 14px 40px}
  /* Break overlay is full-screen (z-index:400 already covers bottom nav) */
  /* Focus center controls row wrapping */
  .controls-center{gap:8px;flex-wrap:wrap;justify-content:center}
  /* PiP + ambiance buttons row */
  .util-row{gap:6px}
  .pip-trigger{display:none}
  /* Mobile perf: kill expensive backdrop-filters */
  .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(14,13,11,.97)}
  .mode-pill-wrap{backdrop-filter:none;-webkit-backdrop-filter:none}
  .mode-pill-indicator{backdrop-filter:none;-webkit-backdrop-filter:none;will-change:left,width}
  .drawer{will-change:transform}
  .snd-modal{will-change:transform,opacity}
  /* Replace transition:all with specific props on interactive elements */
  .btn-start-center{transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease}
  .btn-sm-center,.btn-tasks-toggle{transition:border-color .15s,color .15s}
  .tnav,.topbar-icon,.icon-btn,.avatar-btn{transition:color .15s,background .15s}
}

/* ══════════════════════════════════════════
   FOCUS MODE PRESETS
   ══════════════════════════════════════════ */
.mode-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.mode-preset-card{background:var(--ink3);border:1.5px solid var(--border);border-radius:16px;padding:24px 10px 20px;cursor:pointer;transition:all .22s;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;font-family:'Instrument Sans',sans-serif}
.mode-preset-card:hover{border-color:var(--border2);background:var(--ink4);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.mode-preset-card.active{border-color:var(--amber);background:var(--amber-soft);box-shadow:0 0 0 1px var(--amber-soft)}
.mode-preset-icon{font-size:28px;line-height:1}
.mode-preset-name{font-size:13px;font-weight:600;color:var(--cream);letter-spacing:.01em}
.mode-preset-times{font-size:11px;color:var(--cream3);opacity:.65;line-height:1.3}
.mode-desc{font-size:12.5px;color:var(--cream3);line-height:1.7;padding:14px 0 14px;opacity:.6;border-top:1px solid var(--border);margin-top:4px;font-style:italic}
@media(max-width:600px){.mode-presets{grid-template-columns:repeat(2,1fr)}}

/* ══════════════════════════════════════════
   THEME SWATCHES
   ══════════════════════════════════════════ */
/* ── Font style picker ── */
.font-style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.font-style-card{background:var(--ink);border:1.5px solid var(--border);border-radius:14px;padding:0;cursor:pointer;transition:all .2s;text-align:center;overflow:hidden;display:flex;flex-direction:column}
.font-style-card:hover{border-color:var(--border2);transform:translateY(-2px)}
.font-style-card.active{border-color:var(--amber);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35)}
.fsc-preview{padding:18px 8px 14px;display:flex;align-items:center;justify-content:center;min-height:68px;flex:1}
.fsc-preview span{color:var(--cream);line-height:1}
.fsc-name{padding:7px 4px 8px;font-size:11px;color:var(--cream3);font-family:'Instrument Sans',sans-serif;border-top:1px solid var(--border);letter-spacing:.3px}
.font-style-card.active .fsc-name{color:var(--amber)}
/* Timer font overrides */
[data-timer-font="clean"] .timer-num-center,[data-timer-font="clean"] .fs-time,[data-timer-font="clean"] .break-overlay-timer{font-family:'Instrument Sans',sans-serif;font-weight:300;letter-spacing:-3px}
[data-timer-font="mono"] .timer-num-center,[data-timer-font="mono"] .fs-time{font-family:'Space Mono',monospace;font-size:clamp(52px,11vw,80px);letter-spacing:-1px}
[data-timer-font="mono"] .break-overlay-timer{font-family:'Space Mono',monospace;font-size:54px;letter-spacing:-1px}
[data-timer-font="serif"] .timer-num-center,[data-timer-font="serif"] .fs-time,[data-timer-font="serif"] .break-overlay-timer{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;letter-spacing:-1px}
[data-timer-font="display"] .timer-num-center,[data-timer-font="display"] .fs-time{font-family:'Bebas Neue',cursive;letter-spacing:3px;font-size:clamp(80px,17vw,120px)}
[data-timer-font="display"] .break-overlay-timer{font-family:'Bebas Neue',cursive;font-size:82px;letter-spacing:3px}
[data-timer-font="soft"] .timer-num-center,[data-timer-font="soft"] .fs-time,[data-timer-font="soft"] .break-overlay-timer{font-family:'Klee One',cursive;letter-spacing:-2px}
.theme-grid{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px}
.theme-swatch{background:none;border:1.5px solid var(--border);border-radius:18px;padding:0;cursor:pointer;transition:all .22s;overflow:hidden;flex:1;min-width:130px;max-width:260px;text-align:center;display:flex;flex-direction:column}
.theme-swatch:hover{border-color:var(--border2);transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.theme-swatch.active{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber-soft),0 12px 32px rgba(0,0,0,.35)}
.theme-preview{height:96px;width:100%;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.tp-ring{position:absolute;width:46px;height:46px;border-radius:50%;border:2px solid currentColor;opacity:.55;top:50%;left:50%;transform:translate(-50%,-50%)}
.tp-time{font-family:'Playfair Display',serif;font-size:13px;font-weight:700;letter-spacing:-.5px;position:relative;z-index:1}
.theme-preview--default{background:linear-gradient(160deg,#1A1915 0%,#2A241B 100%);color:#E8A84C}
.theme-preview--default .tp-ring{border-color:#E8A84C;box-shadow:0 0 10px rgba(232,168,76,.4)}
.theme-preview--neon   {background:linear-gradient(160deg,#070b10 0%,#0d1520 100%);color:#00d4e8}
.theme-preview--neon .tp-ring{border-color:#00d4e8;box-shadow:0 0 10px rgba(0,212,232,.5)}
.theme-preview--day    {background:linear-gradient(160deg,#fff8e8 0%,#f3e2bf 100%);color:#9a6428}
.theme-preview--day .tp-ring{border-color:#d99b45;box-shadow:0 0 10px rgba(217,155,69,.28)}
.theme-preview--day .tp-time{color:#4a3117}
.theme-preview--paper  {background:linear-gradient(160deg,#f9f6f0 0%,#ede8de 100%);color:#8B5A2B}
.theme-preview--paper .tp-ring{border-color:#8B5A2B}
.theme-preview--paper .tp-time{color:#1a150e}
.theme-preview--void   {background:linear-gradient(160deg,#050505 0%,#161616 100%);color:#F3F0E8}
.theme-preview--void .tp-ring{border-color:rgba(243,240,232,.55)}
.theme-preview--wallpaper{background:linear-gradient(160deg,rgba(18,18,18,.88) 0%,rgba(46,40,31,.72) 100%),var(--wallpaper-image,linear-gradient(160deg,#181612 0%,#2b241d 100%));background-size:cover;background-position:center;color:#F3F0E8}
.theme-preview--wallpaper::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.34))}
.theme-preview--wallpaper .tp-ring,.theme-preview--wallpaper .tp-time{position:relative;z-index:1}
.theme-preview--wallpaper .tp-ring{border-color:rgba(243,240,232,.55);box-shadow:0 0 10px rgba(255,255,255,.16)}
.theme-preview--aurora {background:linear-gradient(160deg,#06040f 0%,#130d2e 100%);color:#a855f7}
.theme-preview--aurora .tp-ring{border-color:#a855f7;box-shadow:0 0 10px rgba(168,85,247,.45)}
.theme-name{font-size:12.5px;font-weight:600;color:var(--cream2);padding:9px 0 3px;font-family:'Instrument Sans',sans-serif;line-height:1}
.theme-tag{font-size:11px;color:var(--cream3);padding:0 0 10px;font-family:'Instrument Sans',sans-serif;opacity:.6;line-height:1}
.theme-swatch.active .theme-name{color:var(--amber)}
.theme-swatch.active .theme-tag{opacity:.85;color:var(--amber-dim)}
.wallpaper-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.wallpaper-upload-btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.wallpaper-url-wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:min(100%,460px)}
.wallpaper-url-wrap .settings-code-input{flex:1;min-width:220px}
.wallpaper-preview-shell{padding:6px 2px 2px}
.wallpaper-preview{position:relative;width:min(100%,420px);aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--border2);background:linear-gradient(160deg,rgba(18,18,18,.88) 0%,rgba(46,40,31,.72) 100%),var(--wallpaper-image,linear-gradient(160deg,#181612 0%,#2b241d 100%));background-size:cover;background-position:center;box-shadow:var(--shadow)}
.wallpaper-preview::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,.48))}
.wallpaper-preview img{width:100%;height:100%;object-fit:cover;display:none}
.wallpaper-preview-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream2);z-index:1}

/* ══════════════════════════════════════════
   PiP THEME + COMPANION PICKERS
   ══════════════════════════════════════════ */
.pip-theme-grid{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px}
.pip-theme-swatch{background:none;border:1.5px solid var(--border);border-radius:18px;padding:0;cursor:pointer;transition:all .22s;overflow:hidden;flex:1;min-width:130px;max-width:220px;text-align:center;display:flex;flex-direction:column}
.pip-theme-swatch:hover{border-color:var(--border2);transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.pip-theme-swatch.active{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber-soft),0 12px 32px rgba(0,0,0,.35)}
.pip-theme-preview{height:96px;width:100%;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ptp-ring{position:absolute;width:46px;height:46px;border-radius:50%;border:2px solid currentColor;opacity:.72;top:50%;left:50%;transform:translate(-50%,-50%)}
.ptp-time{font-family:'Playfair Display',serif;font-size:13px;font-weight:700;letter-spacing:-.5px;position:relative;z-index:1}
.pip-theme-preview--app{background:linear-gradient(160deg,#1A1915 0%,#2A241B 100%);color:#E8A84C}
.pip-theme-preview--app .ptp-ring{border-color:#E8A84C;box-shadow:0 0 10px rgba(232,168,76,.35)}
.pip-theme-preview--sunrise{background:linear-gradient(180deg,#ffd9b8 0%,#ffc7d1 38%,#f7dca0 72%,#d9b382 100%);color:#8a5b32}
.pip-theme-preview--sunrise::before{content:'';position:absolute;inset:auto 0 0 0;height:34%;background:linear-gradient(180deg,rgba(214,170,120,0) 0%,rgba(214,170,120,.7) 100%)}
.pip-theme-preview--sunrise .ptp-ring{border-color:#8a5b32;box-shadow:0 0 12px rgba(138,91,50,.18)}
.pip-theme-preview--sakura{background:linear-gradient(180deg,#ffd8ea 0%,#f6c6f4 32%,#d8c9ff 68%,#b7d4ff 100%);color:#7e5378}
.pip-theme-preview--sakura::before{content:'';position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(180deg,rgba(167,151,219,0) 0%,rgba(167,151,219,.52) 100%)}
.pip-theme-preview--sakura .ptp-ring{border-color:#7e5378;box-shadow:0 0 12px rgba(126,83,120,.16)}
.pip-theme-preview--meadow{background:linear-gradient(180deg,#d7f0da 0%,#c6ecd7 38%,#b7e3bf 68%,#96c89a 100%);color:#47664a}
.pip-theme-preview--meadow::before{content:'';position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(180deg,rgba(112,167,116,0) 0%,rgba(112,167,116,.48) 100%)}
.pip-theme-preview--meadow .ptp-ring{border-color:#47664a;box-shadow:0 0 12px rgba(71,102,74,.16)}
.pip-theme-preview--studio{background:linear-gradient(180deg,#f8ead2 0%,#f1dfc5 42%,#e4d1b0 72%,#cba981 100%);color:#6d543a}
.pip-theme-preview--studio::before{content:'';position:absolute;inset:auto 0 0 0;height:36%;background:linear-gradient(180deg,rgba(190,150,102,0) 0%,rgba(190,150,102,.55) 100%)}
.pip-theme-preview--studio .ptp-ring{border-color:#6d543a;box-shadow:0 0 12px rgba(109,84,58,.16)}
.pip-companion-grid{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.pip-companion-btn{background:var(--ink3);border:2px solid var(--border2);border-radius:9px;padding:6px 12px;font-size:11.5px;color:var(--cream3);cursor:pointer;transition:all .2s;display:inline-flex;flex-direction:column;align-items:center;gap:3px;font-family:'Instrument Sans',sans-serif;min-width:54px}
.pip-companion-btn:hover{border-color:var(--amber);color:var(--amber)}
.pip-companion-btn.active{border-color:var(--cream)!important;color:var(--cream);box-shadow:0 0 0 2px rgba(245,237,216,.18)}
.pip-companion-icon{font-size:18px;line-height:1}
@media(max-width:600px){.pip-theme-grid{gap:12px}.pip-theme-swatch{min-width:calc(50% - 6px);max-width:none}}

/* ══════════════════════════════════════════
   THEMES
   ══════════════════════════════════════════ */

/* ── Default — explicit reset so switching back from any theme restores root values ── */
[data-theme=""],[data-theme="default"]{
  --ink:#0E0D0B;--ink2:#1A1915;--ink3:#252420;--ink4:#32302A;--ink5:#3E3B33;
  --amber:#E8A84C;--amber-dim:#C48A30;--amber-soft:#2A2318;
  --accent-rgb:232,168,76;
  --cream:#F7EFDF;--cream2:#D2C4A8;--cream3:#A9997C;
  --border:rgba(255,255,255,0.06);--border2:rgba(255,255,255,0.11);
}

/* ── Void — pure black minimal ── */
[data-theme="void"]{
  --ink:#000000;--ink2:#0c0c0c;--ink3:#131313;--ink4:#1a1a1a;--ink5:#222222;
  --amber:#ffffff;--amber-dim:rgba(255,255,255,.55);--amber-soft:rgba(255,255,255,.06);
  --cream:#ffffff;--cream2:rgba(255,255,255,.7);--cream3:rgba(255,255,255,.32);
  --green:rgba(255,255,255,.82);--green-soft:rgba(255,255,255,.05);--rose:rgba(255,255,255,.6);
  --border:rgba(255,255,255,.07);--border2:rgba(255,255,255,.13);
  --shadow:none;--shadow-lg:none;
}
[data-theme="void"] body{background-color:#000}
[data-theme="void"] body::before{background:none}
[data-theme="void"] body::after{opacity:0}
[data-theme="void"] .topbar{background:rgba(0,0,0,.98);border-bottom-color:rgba(255,255,255,.07)}
[data-theme="void"] .card{border-radius:8px;border-color:rgba(255,255,255,.07);box-shadow:none}
[data-theme="void"] .card:hover{border-color:rgba(255,255,255,.16);box-shadow:none}
[data-theme="void"] .timer-card::before{display:none}
[data-theme="void"] .timer-card{border-radius:8px}
[data-theme="void"] .timer-num-center{color:#fff}
[data-theme="void"] .timer-num-center.live{color:#fff;text-shadow:none}
[data-theme="void"] .timer-num-center.break-live{color:rgba(255,255,255,.7);text-shadow:none}
[data-theme="void"] .mode-pill-wrap{box-shadow:none;background:rgba(255,255,255,.04)}
[data-theme="void"] .mode-pill-indicator{box-shadow:none;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16)}
[data-theme="void"] .btn-start-center{background:#fff;color:#000;box-shadow:none}
[data-theme="void"] .btn-start-center:hover{background:#f0f0f0;box-shadow:none;transform:translateY(-1px)}
[data-theme="void"] .btn-start-center.paused{background:#1a1a1a;color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.13)}
[data-theme="void"] .btn-start-center.break-mode{background:rgba(255,255,255,.82);color:#000;box-shadow:none}
[data-theme="void"] .live-dot{background:#fff;animation:none;box-shadow:none}
[data-theme="void"] .bar-track-center{background:rgba(255,255,255,.1)}
[data-theme="void"] .logo em{color:#fff}

/* ── Day — warm morning light ── */
[data-theme="day"]{
  --ink:#fff9ee;--ink2:#f7efdf;--ink3:#f0e2c7;--ink4:#e6d4b2;--ink5:#dbc39c;
  --amber:#c9832f;--amber-dim:#9e6320;--amber-soft:rgba(201,131,47,.14);
  --cream:#3e2815;--cream2:#6a4b2d;--cream3:#977555;
  --green:#5f8d56;--green-soft:rgba(95,141,86,.12);--rose:#b55d4f;
  --border:rgba(94,64,31,.11);--border2:rgba(94,64,31,.18);
  --shadow:0 1px 14px rgba(110,77,35,.08),0 10px 28px rgba(172,126,64,.08);
  --shadow-lg:0 10px 52px rgba(120,84,38,.16);
}
[data-theme="day"] body{background-color:#fff9ee;color:#3e2815}
[data-theme="day"] body::before{background:radial-gradient(circle at top,rgba(255,210,120,.16),transparent 46%)}
[data-theme="day"] body::after{opacity:.18}
[data-theme="day"] .topbar{background:rgba(255,249,238,.92);border-bottom-color:rgba(94,64,31,.12)}
[data-theme="day"] .topbar-nav{background:#f6ead3;border-color:rgba(94,64,31,.12)}
[data-theme="day"] .logo{color:#3e2815}
[data-theme="day"] .logo em{color:#c9832f}
[data-theme="day"] .tnav{color:#8b6947}
[data-theme="day"] .tnav.active{background:rgba(201,131,47,.12);color:#3e2815}
[data-theme="day"] .tnav:hover:not(.active){color:#5a3a20}
[data-theme="day"] .icon-btn{border-color:rgba(94,64,31,.14);color:#8b6947}
[data-theme="day"] .icon-btn:hover{border-color:rgba(94,64,31,.22);color:#5a3a20}
[data-theme="day"] .nav-burger{border-color:rgba(94,64,31,.14);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.7),rgba(255,255,255,.24) 52%,rgba(201,131,47,.08) 100%),rgba(244,230,206,.92);box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 8px 22px rgba(172,126,64,.14);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-theme="day"] .nav-burger:hover{border-color:rgba(201,131,47,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 10px 24px rgba(172,126,64,.16),0 0 0 1px rgba(201,131,47,.08)}
[data-theme="day"] .nav-burger.active{border-color:rgba(201,131,47,.3);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.78),rgba(201,131,47,.16) 54%,rgba(201,131,47,.08) 100%),rgba(244,230,206,.96);box-shadow:inset 0 1px 0 rgba(255,255,255,.84),0 12px 28px rgba(172,126,64,.18),0 0 26px rgba(201,131,47,.12)}
[data-theme="day"] .nav-burger-bar{background:#7b5c3a;box-shadow:none}
[data-theme="day"] .avatar-btn{background:rgba(201,131,47,.12);border-color:rgba(201,131,47,.32)}
[data-theme="day"] .live-dot{background:#d17a3c}
[data-theme="day"] .card{background:#fbf2e3;border-color:rgba(94,64,31,.09);box-shadow:0 3px 16px rgba(173,130,70,.08)}
[data-theme="day"] .card:hover{border-color:rgba(94,64,31,.16);box-shadow:0 8px 24px rgba(173,130,70,.12)}
[data-theme="day"] .timer-card::before{display:none}
[data-theme="day"] .mode-pill-wrap{background:rgba(255,255,255,.5);border-color:rgba(94,64,31,.1);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
[data-theme="day"] .mode-pill-indicator{background:rgba(201,131,47,.12);border-color:rgba(201,131,47,.18);box-shadow:none}
[data-theme="day"] .mode-pill{color:rgba(62,40,21,.5)}
[data-theme="day"] .mode-pill.active{color:#3e2815}
[data-theme="day"] .timer-num-center{color:#3e2815}
[data-theme="day"] .timer-num-center.live{color:#b97127;text-shadow:none}
[data-theme="day"] .timer-num-center.break-live{color:#5f8d56;text-shadow:none}
[data-theme="day"] .btn-start-center{background:#c9832f;color:#fff9ee;box-shadow:0 5px 18px rgba(201,131,47,.24)}
[data-theme="day"] .btn-start-center:hover{box-shadow:0 9px 26px rgba(201,131,47,.3)}
[data-theme="day"] .btn-start-center.paused{background:#f0dfc2;color:#7b5c3a;box-shadow:none;border-color:rgba(94,64,31,.12)}
[data-theme="day"] .btn-start-center.break-mode{background:#6f9b61;box-shadow:0 5px 18px rgba(95,141,86,.22)}
[data-theme="day"] .break-overlay{background:rgba(255,249,238,0.94)}
[data-theme="day"] .btn-sm-center{border-color:rgba(94,64,31,.12);color:#7b5c3a;background:rgba(255,255,255,.48)}
[data-theme="day"] .btn-sm-center:hover{border-color:rgba(94,64,31,.2);color:#51331b;background:rgba(255,255,255,.75)}
[data-theme="day"] .btn-tasks-toggle{background:#f4e6ce;border-color:rgba(94,64,31,.1);color:#7b5c3a;box-shadow:inset 0 1px 0 rgba(255,255,255,.62)}
[data-theme="day"] .drawer{background:#fbf2e3;border-right-color:rgba(94,64,31,.1)}
[data-theme="day"] .task-badge-count{background:#c9832f;color:#fff9ee}
[data-theme="day"] .bar-track-center{background:rgba(94,64,31,.12)}
[data-theme="day"] .topbar-icon,
[data-theme="day"] .drawer-close,
[data-theme="day"] .pip-trigger,
[data-theme="day"] .ambiance-btn{background:#f7ead4;border-color:rgba(94,64,31,.12);color:#6d5133;box-shadow:inset 0 1px 0 rgba(255,255,255,.62)}
[data-theme="day"] .topbar-icon:hover,
[data-theme="day"] .drawer-close:hover,
[data-theme="day"] .pip-trigger:hover,
[data-theme="day"] .ambiance-btn:hover{background:#f1e0c3;border-color:rgba(94,64,31,.2);color:#4e321a}
[data-theme="day"] .topbar-icon.active-icon,
[data-theme="day"] .ambiance-btn.active-icon{background:rgba(201,131,47,.14);border-color:rgba(201,131,47,.34);color:#b97127;box-shadow:none}
[data-theme="day"] .timer-context,
[data-theme="day"] .timer-context-center,
[data-theme="day"] .focus-quote{color:#6a4b2d;opacity:.9}
[data-theme="day"] .timer-context em,
[data-theme="day"] .timer-context-center em{color:#4a3117;--timer-context-em-base:#4a3117}
[data-theme="day"] .mtab{color:#7d5d3a}
[data-theme="day"] .mtab:hover{color:#4e321a}
[data-theme="day"] .settings-jump{background:rgba(255,249,238,.95);border-bottom-color:rgba(94,64,31,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
[data-theme="day"] .sjump{background:#f8edd9;border-color:rgba(94,64,31,.08);color:#735536;opacity:1}
[data-theme="day"] .sjump:hover{background:#f1e0c5;border-color:rgba(94,64,31,.14);color:#4e321a}
[data-theme="day"] .ss-sub,
[data-theme="day"] .mode-preset-times,
[data-theme="day"] .mode-desc,
[data-theme="day"] .theme-tag,
[data-theme="day"] .snd-card-label,
[data-theme="day"] .book-author,
[data-theme="day"] .book-modal-label,
[data-theme="day"] .book-rating-lbl,
[data-theme="day"] .habit-del-confirm-msg,
[data-theme="day"] .habit-custom-icon-input::placeholder,
[data-theme="day"] .book-search-input::placeholder{color:#846446;opacity:.92}
[data-theme="day"] .snd-modal,
[data-theme="day"] .habit-modal-inner,
[data-theme="day"] .book-modal-inner{background:#fff5e8;border-color:rgba(94,64,31,.1);box-shadow:0 20px 48px rgba(149,105,47,.14)}
[data-theme="day"] .snd-card,
[data-theme="day"] .habit-custom-icon-input,
[data-theme="day"] .habit-modal-name,
[data-theme="day"] .book-field,
[data-theme="day"] .book-select,
[data-theme="day"] .book-search-input{background:#f6e8d1;border-color:rgba(94,64,31,.12);color:#3e2815}
@media(hover:hover) and (pointer:fine){[data-theme="day"] .snd-card:hover{box-shadow:0 8px 24px rgba(149,105,47,.12)}}
[data-theme="day"] .snd-card.playing{box-shadow:0 0 0 2px rgba(201,131,47,.22),0 10px 24px rgba(201,131,47,.12)}
[data-theme="day"] .snd-tab:hover{background:#f2e3ca}
[data-theme="day"] .snd-master-range::-webkit-slider-runnable-track,
[data-theme="day"] .snd-card-vol::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--amber) var(--pct,70%),rgba(94,64,31,.14) var(--pct,70%))}
[data-theme="day"] .snd-master-range::-moz-range-track,
[data-theme="day"] .snd-card-vol::-moz-range-track{background:rgba(94,64,31,.14)}
[data-theme="day"] .book-status-badge{box-shadow:none}

/* ── Paper — warm light mode ── */
html[data-theme="paper"]{
  --ink:#f9f6f0;--ink2:#f0ebe2;--ink3:#e6e0d6;--ink4:#dad3c8;--ink5:#cec6ba;
  --amber:#8B5A2B;--amber-dim:#6b4420;--amber-soft:rgba(139,90,43,.1);
  --cream:#1a150e;--cream2:#3d342a;--cream3:#7a6e62;
  --green:#4a7c5a;--green-soft:rgba(74,124,90,.1);--rose:#9b4444;
  --border:rgba(0,0,0,0.08);--border2:rgba(0,0,0,.15);
  --shadow:0 1px 12px rgba(0,0,0,.08),0 4px 24px rgba(0,0,0,.06);
  --shadow-lg:0 8px 48px rgba(0,0,0,.14);
}
[data-theme="paper"] body{background-color:#f9f6f0;color:#1a150e}
[data-theme="paper"] body::before{background:none}
[data-theme="paper"] body::after{opacity:0}
[data-theme="paper"] .topbar{background:rgba(249,246,240,.96);border-bottom-color:rgba(0,0,0,.1)}
[data-theme="paper"] .topbar-nav{background:#ede8de;border-color:rgba(0,0,0,.1)}
[data-theme="paper"] .logo{color:#1a150e}
[data-theme="paper"] .logo em{color:#8B5A2B}
[data-theme="paper"] .tnav{color:#7a6e62}
[data-theme="paper"] .tnav.active{background:rgba(0,0,0,.07);color:#1a150e}
[data-theme="paper"] .tnav:hover:not(.active){color:#3d342a}
[data-theme="paper"] .icon-btn{border-color:rgba(0,0,0,.12);color:#7a6e62}
[data-theme="paper"] .icon-btn:hover{border-color:rgba(0,0,0,.2);color:#3d342a}
[data-theme="paper"] .nav-burger{border-color:rgba(61,52,42,.12);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.68),rgba(255,255,255,.2) 52%,rgba(139,90,43,.06) 100%),rgba(235,227,215,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 8px 22px rgba(61,52,42,.12);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-theme="paper"] .nav-burger:hover{border-color:rgba(139,90,43,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.76),0 10px 24px rgba(61,52,42,.13),0 0 0 1px rgba(139,90,43,.06)}
[data-theme="paper"] .nav-burger.active{border-color:rgba(139,90,43,.26);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.76),rgba(139,90,43,.14) 54%,rgba(139,90,43,.07) 100%),rgba(235,227,215,.96);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 12px 28px rgba(61,52,42,.14),0 0 24px rgba(139,90,43,.1)}
[data-theme="paper"] .nav-burger-bar{background:#6f6256;box-shadow:none}
[data-theme="paper"] .avatar-btn{background:rgba(139,90,43,.12);border-color:rgba(139,90,43,.4)}
[data-theme="paper"] .live-dot{background:#9b4444}
[data-theme="paper"] .card{background:#f0ebe2;border-color:rgba(0,0,0,.08);box-shadow:0 1px 8px rgba(0,0,0,.07)}
[data-theme="paper"] .card:hover{border-color:rgba(0,0,0,.15);box-shadow:0 2px 16px rgba(0,0,0,.1)}
[data-theme="paper"] .timer-card::before{display:none}
[data-theme="paper"] .mode-pill-wrap{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
[data-theme="paper"] .mode-pill-indicator{background:rgba(0,0,0,.07);border-color:rgba(0,0,0,.12);box-shadow:none}
[data-theme="paper"] .mode-pill{color:rgba(26,21,14,.45)}
[data-theme="paper"] .mode-pill.active{color:#1a150e}
[data-theme="paper"] .timer-num-center{color:#1a150e}
[data-theme="paper"] .timer-num-center.live{color:#8B5A2B;text-shadow:none}
[data-theme="paper"] .timer-num-center.break-live{color:#4a7c5a;text-shadow:none}
[data-theme="paper"] .btn-start-center{background:#8B5A2B;color:#f9f6f0;box-shadow:0 3px 14px rgba(139,90,43,.22)}
[data-theme="paper"] .btn-start-center:hover{box-shadow:0 6px 22px rgba(139,90,43,.28)}
[data-theme="paper"] .btn-start-center.paused{background:#ebe3d7;color:#6f6256;box-shadow:none;border-color:rgba(61,52,42,.12)}
[data-theme="paper"] .btn-start-center.break-mode{background:#4a7c5a;box-shadow:0 3px 14px rgba(74,124,90,.2)}
[data-theme="paper"] .break-overlay{background:rgba(249,246,240,0.94)}
[data-theme="paper"] .btn-sm-center{border-color:rgba(61,52,42,.12);color:#6f6256;background:rgba(255,255,255,.35)}
[data-theme="paper"] .btn-sm-center:hover{border-color:rgba(61,52,42,.2);color:#3d342a;background:rgba(255,255,255,.65)}
[data-theme="paper"] .btn-tasks-toggle{background:#ebe3d7;border-color:rgba(61,52,42,.1);color:#6f6256;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
[data-theme="paper"] .drawer{background:#f0ebe2;border-right-color:rgba(0,0,0,.1)}
[data-theme="paper"] .task-badge-count{background:#8B5A2B;color:#f9f6f0}
[data-theme="paper"] .bar-track-center{background:rgba(0,0,0,.12)}

/* ── Wallpaper — dark glass over user image ── */
[data-theme="wallpaper"]{
  --ink:#090807;--ink2:#12100e;--ink3:#1b1713;--ink4:#26211c;--ink5:#312b24;
  --amber:#E8A84C;--amber-dim:#C48A30;--amber-soft:rgba(232,168,76,.14);
  --accent-rgb:232,168,76;
  --cream:#F7EFDF;--cream2:#DED0B4;--cream3:#B9AA8D;
  --green:#7DBF8E;--green-soft:rgba(125,191,142,.12);--rose:#D4826A;
  --border:rgba(255,255,255,.12);--border2:rgba(255,255,255,.18);
  --shadow:0 8px 30px rgba(0,0,0,.38);--shadow-lg:0 18px 64px rgba(0,0,0,.56);
  --hm-empty:rgba(255,255,255,.10);--hm-level-1:rgba(232,168,76,.24);--hm-level-2:rgba(232,168,76,.42);--hm-level-3:rgba(232,168,76,.66);--hm-level-4:rgba(232,168,76,.92);--hm-future:rgba(255,255,255,.10);--hm-out:rgba(255,255,255,.06);--hm-cell-border:rgba(255,255,255,.14);--hm-grid-line:rgba(255,255,255,.08);--hm-hover-ring:rgba(255,255,255,.22);--hm-tooltip-bg:rgba(10,9,8,.96);--hm-tooltip-text:#F7EFDF;--stats-pill-bg:rgba(255,255,255,.08);--stats-pill-border:rgba(255,255,255,.14);
}
[data-theme="wallpaper"] body{background-image:linear-gradient(180deg,rgba(7,6,5,.38) 0%,rgba(7,6,5,.58) 100%),radial-gradient(circle at 20% 18%,rgba(255,255,255,.06) 0%,transparent 34%),var(--wallpaper-image,linear-gradient(160deg,#181612 0%,#2b241d 100%));background-size:auto,auto,cover;background-position:center;background-repeat:no-repeat;background-color:#090807;color:var(--cream)}
[data-theme="wallpaper"] body::before{background:none}
[data-theme="wallpaper"] body::after{background-image:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.38)),radial-gradient(circle at top,rgba(255,255,255,.05),transparent 36%),url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");background-size:auto,auto,180px;opacity:.88}
[data-theme="wallpaper"] .topbar,
[data-theme="wallpaper"] .topbar-nav,
[data-theme="wallpaper"] .drawer,
[data-theme="wallpaper"] .settings-nav,
[data-theme="wallpaper"] .sgroup,
[data-theme="wallpaper"] .spane-header,
[data-theme="wallpaper"] .setting-row,
[data-theme="wallpaper"] .theme-swatch,
[data-theme="wallpaper"] .pip-theme-swatch,
[data-theme="wallpaper"] .font-style-card,
[data-theme="wallpaper"] .mode-desc,
[data-theme="wallpaper"] .book-modal-inner,
[data-theme="wallpaper"] .habit-modal-inner,
[data-theme="wallpaper"] .snd-modal{background:rgba(10,9,8,.66);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-color:rgba(255,255,255,.14)}
[data-theme="wallpaper"] .setting-row:hover,
[data-theme="wallpaper"] .theme-swatch:hover,
[data-theme="wallpaper"] .pip-theme-swatch:hover,
[data-theme="wallpaper"] .font-style-card:hover{background:rgba(18,15,12,.78);border-color:rgba(255,255,255,.18)}
[data-theme="wallpaper"] .settings-nav{background:rgba(10,9,8,.72);border-right-color:rgba(255,255,255,.12)}
[data-theme="wallpaper"] .snav-item.active{background:rgba(232,168,76,.12);border-color:rgba(232,168,76,.22);color:var(--cream)}
[data-theme="wallpaper"] .mode-pill-wrap{background:rgba(8,7,6,.48);border-color:rgba(255,255,255,.14)}
[data-theme="wallpaper"] .mode-pill-indicator{background:linear-gradient(135deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.08) 100%);border-color:rgba(255,255,255,.18)}
[data-theme="wallpaper"] .btn-start-center{box-shadow:0 8px 28px rgba(232,168,76,.28)}
[data-theme="wallpaper"] .btn-sm-center,
[data-theme="wallpaper"] .btn-tasks-toggle,
[data-theme="wallpaper"] .setting-btn-small{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:var(--cream2)}
[data-theme="wallpaper"] .btn-sm-center:hover,
[data-theme="wallpaper"] .btn-tasks-toggle:hover,
[data-theme="wallpaper"] .setting-btn-small:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:var(--cream)}
[data-theme="wallpaper"] .setting-input,
[data-theme="wallpaper"] .settings-code-input,
[data-theme="wallpaper"] .book-field,
[data-theme="wallpaper"] .book-select,
[data-theme="wallpaper"] .book-search-input{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:var(--cream)}
[data-theme="wallpaper"] .setting-input:focus,
[data-theme="wallpaper"] .settings-code-input:focus,
[data-theme="wallpaper"] .book-field:focus,
[data-theme="wallpaper"] .book-select:focus,
[data-theme="wallpaper"] .book-search-input:focus{background:rgba(255,255,255,.1);border-color:rgba(232,168,76,.34);box-shadow:0 0 0 3px rgba(232,168,76,.1)}
[data-theme="wallpaper"] .timer-context-center,
[data-theme="wallpaper"] .focus-quote,
[data-theme="wallpaper"] .spane-sub,
[data-theme="wallpaper"] .sgroup-sub,
[data-theme="wallpaper"] .setting-sub,
[data-theme="wallpaper"] .theme-tag{color:var(--cream2);opacity:.9}
[data-theme="wallpaper"] .theme-name,
[data-theme="wallpaper"] .mode-preset-name,
[data-theme="wallpaper"] .spane-title,
[data-theme="wallpaper"] .setting-label{color:var(--cream)}
[data-theme="wallpaper"] .wallpaper-preview{border-color:rgba(255,255,255,.18)}
[data-theme="wallpaper"] .wallpaper-preview-empty{color:rgba(247,239,223,.78)}

/* ── Rank roadmap ── */
.rank-roadmap-wrap{margin:-8px 0 24px;padding:18px 22px;background:var(--ink2);border:1px solid var(--border);border-radius:18px}
.rank-roadmap-title{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--cream3);opacity:.55;margin-bottom:14px;font-weight:500}
.rank-roadmap{display:flex;align-items:flex-start;overflow-x:auto;padding:6px 0 4px;scrollbar-width:none;gap:0}
.rank-roadmap::-webkit-scrollbar{display:none}
.rank-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;opacity:.52;transition:opacity .3s;padding-top:4px}
.rank-step--done{opacity:.72}
.rank-step--active{opacity:1}
.rank-step-icon{font-size:22px;line-height:1;padding-top:4px}
.rank-step-label{font-size:9.5px;font-weight:500;color:var(--cream2);white-space:nowrap;letter-spacing:.02em}
.rank-step-min{font-size:8.5px;color:var(--cream3);opacity:.55}
.rank-step--active .rank-step-label{color:var(--amber)}
.rank-step--active .rank-step-icon{filter:drop-shadow(0 2px 8px rgba(var(--accent-rgb),.6))}
.rank-connector{flex:1;min-width:12px;height:1px;background:var(--border2);margin:0 2px;align-self:flex-start;margin-top:20px;opacity:.5}
.rank-connector--done{background:var(--amber-dim);opacity:.6}

/* ── PiP GIF dual slots ── */
.pip-gif-slots{display:flex;gap:16px;width:100%;flex-wrap:wrap}
.pip-gif-slot{flex:1;min-width:160px;display:flex;flex-direction:column;gap:6px}
.pip-gif-slot-label{font-size:11.5px;color:var(--cream2);font-weight:500}
.pip-gif-slot-hint{font-size:10px;color:var(--cream3);opacity:.6;font-weight:400;margin-left:4px}
.pip-gif-slot-row{display:flex;align-items:center;gap:8px}
.pip-gif-thumb{width:52px;height:52px;border-radius:8px;background:var(--ink3);border:1.5px solid var(--border2);flex-shrink:0;background-size:cover;background-position:center}
.pip-companion-btn[data-companion="gif"] .pip-companion-icon{font-size:16px}

/* ══════════════════════════════════════════
   SETTINGS — single-scroll page layout
══════════════════════════════════════════ */
.settings-jump{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:14px 28px;border-bottom:1px solid var(--border);background:rgba(14,13,11,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);position:sticky;top:0;z-index:10;flex-shrink:0}
.sjump{font-size:12px;font-family:'Instrument Sans',sans-serif;color:var(--cream3);text-decoration:none;padding:8px 14px;border-radius:999px;transition:all .18s;white-space:nowrap;background:rgba(255,255,255,.03);border:1px solid transparent;font-weight:500;opacity:.88}
.sjump:hover{color:var(--cream);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.06);transform:translateY(-1px)}
.settings-page{max-width:860px;margin:0 auto;padding:46px 44px 110px;width:100%}
.ss{margin-bottom:60px;scroll-margin-top:92px}
.ss-head{display:flex;flex-direction:column;gap:7px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border);position:relative}
.ss-head::after{content:'';position:absolute;left:0;bottom:-1px;width:72px;height:1px;background:linear-gradient(90deg,var(--amber),transparent)}
.ss-title{font-size:26px;font-family:'Playfair Display',serif;font-weight:500;color:var(--cream);margin:0;letter-spacing:-.4px}
.ss-sub{font-size:13px;color:var(--cream3);opacity:.62;margin:0;line-height:1.65;max-width:60ch}
@media(max-width:600px){.settings-jump{justify-content:flex-start;padding:8px 16px;gap:6px}.settings-page{padding:24px 20px 60px}.sjump{font-size:11px;padding:6px 10px}.ss{scroll-margin-top:82px}}

/* ══════════════════════════════════════════
   NOTE CONFIRM STEP
══════════════════════════════════════════ */
.note-confirm-wrap{display:flex;flex-direction:column;gap:8px;padding:10px 14px;background:rgba(var(--accent-rgb),.07);border:1px solid rgba(var(--accent-rgb),.25);border-radius:12px;margin-bottom:10px;animation:slide-down .18s ease}
@keyframes slide-down{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.note-confirm-hint{font-size:12.5px;color:var(--cream2);line-height:1.5}
.note-confirm-row{display:flex;align-items:center;gap:6px}
.note-confirm-input{flex:1;background:var(--ink3);border:1px solid var(--border2);border-radius:8px;padding:7px 10px;font-size:13px;color:var(--cream);font-family:'Instrument Sans',sans-serif;outline:none;transition:border-color .15s}
.note-confirm-input:focus{border-color:rgba(var(--accent-rgb),.4)}
.note-confirm-save{padding:7px 14px;border-radius:8px;background:var(--amber);color:#1a1510;font-size:12.5px;font-weight:600;border:none;cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:opacity .15s}
.note-confirm-save:hover{opacity:.85}
.note-confirm-skip{padding:7px 12px;border-radius:8px;background:none;color:var(--cream3);font-size:12.5px;border:1px solid var(--border);cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:all .15s}
.note-confirm-skip:hover{color:var(--cream2);border-color:var(--border2)}
.note-confirm-cancel{width:28px;height:28px;border-radius:7px;background:none;color:var(--cream3);border:none;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:color .15s;flex-shrink:0}
.note-confirm-cancel:hover{color:var(--cream)}
.ncc-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:50px;font-size:11px;font-weight:600;margin-right:2px}
.ncc-link{background:rgba(106,159,212,.18);color:#6A9FD4}
.ncc-code{background:rgba(125,191,142,.18);color:#7DBF8E}
.ncc-thought{background:rgba(var(--accent-rgb),.15);color:var(--amber)}
.ncc-note{background:rgba(255,255,255,.08);color:var(--cream2)}

/* ══════════════════════════════════════════
   NOTE LINK CARD
══════════════════════════════════════════ */
.note-link-card{display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(106,159,212,.07);border:1px solid rgba(106,159,212,.18);border-radius:10px;text-decoration:none;transition:background .15s}
.note-link-card:hover{background:rgba(106,159,212,.12)}
.note-favicon{width:16px;height:16px;border-radius:3px;flex-shrink:0}
.note-link-info{flex:1;min-width:0}
.note-link-name{font-size:13px;font-weight:500;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}
.note-link-domain{font-size:11px;color:var(--cream3);opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-link-open{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:7px;color:var(--cream3);transition:color .15s,background .15s;flex-shrink:0}
.note-link-open:hover{color:var(--cream);background:rgba(255,255,255,.07)}

/* ══════════════════════════════════════════
   RICH NOTE MODAL
══════════════════════════════════════════ */
.rich-note-modal{position:fixed;inset:0;z-index:800;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:fade-in .18s ease}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.rich-note-inner{display:flex;flex-direction:column;width:min(920px,96vw);height:min(86vh,900px);background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.015) 100%),var(--ink2);border:1px solid var(--border2);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg);animation:pop-up .18s ease}
@keyframes pop-up{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.rn-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px 22px 16px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02)}
.rn-topbar-main{flex:1;min-width:0}
.rn-title{width:100%;background:none;border:none;outline:none;font-size:30px;font-weight:500;color:var(--cream);font-family:'Playfair Display',serif;letter-spacing:-.6px;line-height:1.1}
.rn-title::placeholder{color:var(--cream3);opacity:.32}
.rn-meta-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.rn-meta-pill{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.18);font-size:11px;color:var(--amber);letter-spacing:1.2px;text-transform:uppercase}
.rn-meta-text{font-size:12px;color:var(--cream3);opacity:.65}
.rn-topbar-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.rn-ghost-btn{padding:8px 14px;border-radius:10px;background:none;border:1px solid var(--border);color:var(--cream3);font-size:12px;cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:all .15s}
.rn-ghost-btn:hover{border-color:var(--border2);color:var(--cream2);background:rgba(255,255,255,.03)}
.rn-toolbar{display:flex;align-items:center;gap:6px;padding:10px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap;background:rgba(255,255,255,.015)}
.rn-fmt-btn{min-width:34px;height:30px;padding:0 10px;border-radius:9px;background:none;border:1px solid var(--border);color:var(--cream2);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;font-family:'Instrument Sans',sans-serif}
.rn-fmt-btn:hover{background:var(--ink3);border-color:var(--border2);color:var(--cream)}
.rn-fmt-i em{font-style:italic}
.rn-fmt-u u{text-decoration:underline}
.rn-fmt-clear{font-size:11px;color:var(--cream3)}
.rn-hl-btn{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .15s,border-color .15s;flex-shrink:0}
.rn-hl-btn:hover{transform:scale(1.15);border-color:rgba(255,255,255,.3)}
.rn-hl-btn[data-color="#F5E090"]{background:#F5E090}
.rn-hl-btn[data-color="#B8E0C8"]{background:#B8E0C8}
.rn-hl-btn[data-color="#F0C0C0"]{background:#F0C0C0}
.rn-hl-btn[data-color="#C0D8F0"]{background:#C0D8F0}
.rn-sep{width:1px;height:18px;background:var(--border);margin:0 2px;flex-shrink:0}
.rn-save-btn{padding:9px 16px;border-radius:10px;background:var(--amber);color:#1a1510;font-size:12.5px;font-weight:600;border:none;cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:opacity .15s}
.rn-save-btn:hover{opacity:.85}
.rn-writing-shell{display:flex;flex-direction:column;gap:12px;flex:1;padding:18px 22px 22px;min-height:0}
.rn-writing-label{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--cream3);opacity:.6}
.rn-body{flex:1;overflow-y:auto;padding:22px 24px;font-size:15px;line-height:1.85;color:var(--cream2);outline:none;min-height:320px;font-family:'Instrument Sans',sans-serif;white-space:pre-wrap;background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.rn-body:empty::before{content:attr(data-placeholder);color:var(--cream3);opacity:.36;pointer-events:none}
.rn-body b,.rn-body strong{color:var(--cream);font-weight:700}
.rn-body em,.rn-body i{color:var(--amber);font-style:italic}
.rn-body [style*="background-color"],.note-rich-body [style*="background-color"]{color:#1a1510!important;padding:.02em .16em;border-radius:.28em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media(max-width:700px){.rich-note-inner{width:100vw;height:100vh;max-height:none;border-radius:0}.rn-topbar{flex-direction:column;align-items:stretch}.rn-topbar-actions{justify-content:space-between;width:100%}.rn-title{font-size:24px}.rn-writing-shell{padding:16px}.rn-body{padding:18px 18px 22px}.note-workspace{padding:16px 14px 24px}.note-workspace-topbar{flex-direction:column;align-items:stretch}.note-workspace-actions{justify-content:space-between}.rich-note-inner--page{height:auto;min-height:calc(100vh - 140px)}}

/* ── Rich note display in notes list ── */
.note-rich-title{font-size:13px;font-weight:600;color:var(--cream);margin-bottom:4px;line-height:1.4}
.note-rich-body{font-size:12.5px;color:var(--cream2);line-height:1.6;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;opacity:.8}
.note-rich-body--compact{-webkit-line-clamp:3}
.note-rich-body b,.note-rich-body strong{color:var(--cream);font-weight:600}
.note-rich-body em,.note-rich-body i{font-style:italic}

/* ══════════════════════════════════════════
   HABITS VIEW
══════════════════════════════════════════ */
.habits-page{max-width:860px;margin:0 auto;padding:32px 40px 80px;width:100%}
.habits-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.habits-topbar-left{display:flex;align-items:baseline;gap:10px}
.habits-heading{font-family:'Playfair Display',serif;font-size:22px;font-weight:500;color:var(--cream)}
.habits-today-count{font-size:12px;color:var(--cream3);opacity:.6}
.habits-add-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:50px;border:1px solid var(--border2);background:none;color:var(--cream2);font-size:12.5px;font-family:'Instrument Sans',sans-serif;cursor:pointer;transition:all .15s}
.habits-add-btn:hover{border-color:var(--amber);color:var(--amber)}
.habits-section{margin-bottom:34px}
.habits-section-hdr{font-size:10px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--cream3);opacity:.42;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.05)}

/* ── Today checklist ── */
.habits-today-list{display:flex;flex-direction:column;gap:8px}
.habit-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.015) 100%),var(--ink2);cursor:pointer;transition:all .2s;user-select:none;box-shadow:0 10px 26px rgba(0,0,0,.14)}
.habit-item:hover{border-color:var(--border2);background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.02) 100%),var(--ink3);transform:translateY(-1px)}
.habit-item--done{border-color:rgba(125,191,142,.22);background:linear-gradient(180deg,rgba(125,191,142,.06) 0%,rgba(125,191,142,.03) 100%),var(--ink2)}
.habit-item--done .habit-name{text-decoration:line-through;color:var(--cream3);opacity:.58}
.habit-item--done .habit-icon{opacity:.45}
.habit-item--done .habit-check{opacity:.9}
.habit-item--partial{border-color:rgba(var(--accent-rgb),.18);background:linear-gradient(180deg,rgba(var(--accent-rgb),.05) 0%,transparent 100%),var(--ink2)}
.habit-check{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--border2);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:all .18s;background:transparent}
.habit-check.checked{background:var(--green);border-color:var(--green);color:#1a2e1f;box-shadow:0 0 0 4px rgba(125,191,142,.12)}
.habit-icon{font-size:18px;flex-shrink:0;line-height:1}
.habit-name-wrap{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.habit-name{font-size:14px;color:var(--cream2);font-weight:600}
.habit-detail{font-size:11px;color:var(--cream3);opacity:.72}
/* measurable habit stepper */
.habit-stepper{display:flex;align-items:center;gap:8px;margin-top:1px}
.habit-step-btn{width:22px;height:22px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--cream3);font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:border-color .15s,color .15s}
.habit-step-btn:hover{border-color:rgba(var(--accent-rgb),.45);color:var(--amber)}
.habit-step-val{font-size:12px;color:var(--cream2);font-weight:500;min-width:60px;text-align:center}
.habit-step-unit{color:var(--cream3);font-weight:400;font-size:11px}
.habit-step-bar{flex:1;height:3px;border-radius:2px;background:var(--border);overflow:hidden;margin-left:4px}
.habit-step-fill{height:100%;border-radius:2px;background:var(--amber);transition:width .2s ease}
.habit-item--done .habit-step-fill{background:var(--green)}
.habits-empty{font-size:13px;color:var(--cream3);opacity:.72;padding:20px 0;font-style:italic}

/* ── Momentum summary ── */
.habits-section--momentum{margin-bottom:24px}
.habits-momentum-card{padding:18px 20px 16px;border-radius:22px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(var(--accent-rgb),.07) 0%,rgba(255,255,255,.02) 100%),var(--ink2);box-shadow:0 14px 34px rgba(0,0,0,.15)}
.habits-momentum-kicker{font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--cream3);opacity:.62;margin-bottom:12px}
.habits-momentum-main{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.habits-momentum-primary{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.habits-momentum-primary-val{font-family:'Playfair Display',serif;font-size:42px;line-height:.9;color:var(--cream)}
.habits-momentum-primary-label{font-size:13px;color:var(--cream2);padding-bottom:6px}
.habits-momentum-stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.habits-momentum-stat{display:flex;flex-direction:column;gap:3px;min-width:98px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
.habits-momentum-stat-val{font-family:'Playfair Display',serif;font-size:24px;line-height:1;color:var(--cream);display:flex;align-items:center;gap:6px}
.habits-momentum-stat-icon{font-size:16px;line-height:1;transform:translateY(-1px)}
.habits-momentum-stat-lbl{font-size:11px;color:var(--cream3);opacity:.72;line-height:1.35}
.habits-momentum-bar{height:7px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:10px}
.habits-momentum-fill{height:100%;width:0;background:linear-gradient(90deg,var(--amber-dim),var(--amber));border-radius:999px;transition:width .35s ease}
.habits-momentum-meta{font-size:12.5px;color:var(--cream2);line-height:1.5;margin-bottom:4px}
.habits-momentum-note{font-size:11.5px;color:var(--cream3);line-height:1.55;opacity:.82}

/* ── Heatmap shared — fixed 12px squares ── */
.hm-grid{display:grid;grid-template-rows:repeat(7,12px);grid-auto-columns:12px;grid-auto-flow:column;gap:2px}
.hm-grid .hm-cell{width:12px;height:12px}
.hm-grid .hm-cell:hover{opacity:1}
.hm-cell--today{outline:2px solid var(--amber);outline-offset:1px}
.hm-cell--future{background:var(--hm-future)!important}
.hm-cell--out{background:var(--hm-out)!important}
.hm-month-row{display:flex;gap:2px;margin-top:4px}
.hm-month-lbl{font-size:9.5px;color:var(--cream3);opacity:.72;white-space:nowrap;font-family:'Instrument Sans',sans-serif;width:12px;overflow:visible}
.hm-outer{display:flex;align-items:flex-start;gap:6px}
.hm-day-col{display:flex;flex-direction:column;gap:2px;flex-shrink:0;padding-bottom:18px}
.hm-scroll{overflow-x:auto;padding-bottom:4px}
.hm-day-lbl{font-size:9px;color:var(--cream3);opacity:.62;height:12px;display:flex;align-items:center;font-family:'Instrument Sans',sans-serif}
.hm-day-lbl--weekend{opacity:.2}

@media(max-width:600px){.habits-momentum-main{flex-direction:column;align-items:flex-start}.habits-momentum-stats{width:100%;justify-content:flex-start}.habits-momentum-stat{min-width:0;flex:1}.habits-momentum-primary-val{font-size:34px}.stats-today-grid--three{grid-template-columns:1fr}}

/* ── Per-habit heatmaps ── */
.habit-hm-row{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;padding:16px 16px 14px;background:linear-gradient(180deg,rgba(255,255,255,.02) 0%,rgba(255,255,255,.01) 100%),var(--ink2);border:1px solid rgba(255,255,255,.05);border-radius:18px;box-shadow:0 6px 18px rgba(0,0,0,.10);transition:border-color .18s,transform .18s,box-shadow .18s}
.habit-hm-row:hover{border-color:rgba(255,255,255,.08);transform:none;box-shadow:0 8px 20px rgba(0,0,0,.12)}
.habit-hm-info{display:flex;align-items:center;gap:8px}
.habit-hm-icon{font-size:16px;line-height:1}
.habit-hm-name{font-size:14px;font-weight:600;color:var(--cream);flex:1}
.habit-hm-streak{font-size:12px;color:var(--amber);font-weight:600}
.habit-hm-actions{display:flex;gap:4px;margin-left:auto}
.habit-icon-btn{width:24px;height:24px;border-radius:6px;background:none;border:1px solid transparent;color:var(--cream3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.habit-icon-btn:hover{border-color:var(--border2);color:var(--cream2);background:var(--ink3)}
.habit-del-icon-btn:hover{border-color:rgba(212,130,106,.5)!important;color:var(--rose)!important}
#habitHeatmaps .stats-heatmap-shell{width:100%;align-self:stretch;grid-template-columns:34px minmax(0,1fr);gap:10px}
#habitHeatmaps .stats-heatmap-main{width:100%;min-width:0}
#habitHeatmaps .hm-month-labels{width:100%;min-width:0}
#habitHeatmaps .hm-scroll-wrap{width:100%;min-width:0;padding-bottom:2px}
#habitHeatmaps .stats-heatmap{width:100%;min-width:0;min-height:102px}
#habitHeatmaps .hm-week::after{display:none}
#habitHeatmaps .hm-cell--future{background:var(--hm-future)!important}
#habitHeatmaps .hm-cell--out{background:var(--hm-out)!important}
.habit-hm-stats{display:flex;gap:20px;flex-wrap:wrap;padding-top:4px;border-top:1px solid var(--border)}
.habit-hm-stat{font-size:12px;color:var(--cream2)}
.habit-hm-stat strong{color:var(--cream);font-weight:600}

/* ── Habit modal ── */
.habit-modal{position:fixed;inset:0;z-index:800;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.habit-modal-inner{width:min(420px,92vw);background:var(--ink2);border:1px solid var(--border2);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);animation:pop-up .18s ease;display:flex;flex-direction:column}
.habit-modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--border)}
.habit-modal-title{font-size:15px;font-weight:600;color:var(--cream)}
.habit-modal-close{width:28px;height:28px;border-radius:8px;background:none;border:none;color:var(--cream3);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.habit-modal-close:hover{color:var(--cream);background:var(--ink3)}
.habit-modal-body{padding:20px;display:flex;flex-direction:column;gap:14px}
.hicon-picker{display:flex;flex-wrap:wrap;gap:6px}
.hicon-btn{width:36px;height:36px;border-radius:10px;border:1.5px solid var(--border);background:var(--ink3);font-size:18px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}
.hicon-btn:hover{border-color:var(--border2)}
.hicon-btn.active{border-color:var(--amber);background:var(--amber-soft)}
.habit-custom-icon-input{width:100%;background:var(--ink3);border:1px solid var(--border);border-radius:10px;padding:8px 14px;font-size:18px;color:var(--cream);font-family:'Instrument Sans',sans-serif;outline:none;transition:border-color .15s}
.habit-custom-icon-input::placeholder{font-size:12px;opacity:.4;color:var(--cream3)}
.habit-custom-icon-input:focus{border-color:rgba(var(--accent-rgb),.3)}
.habit-modal-name{width:100%;background:var(--ink3);border:1px solid var(--border2);border-radius:10px;padding:10px 14px;font-size:14px;color:var(--cream);font-family:'Instrument Sans',sans-serif;outline:none;transition:border-color .15s}
.habit-modal-name:focus{border-color:rgba(var(--accent-rgb),.4)}
.habit-measure-group{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--border)}
.habit-measure-head{display:flex;flex-direction:column;gap:3px}
.habit-measure-label{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--cream2)}
.habit-measure-hint{font-size:11px;color:var(--cream3);opacity:.7;line-height:1.45}
.habit-measure-row{display:flex;gap:8px}
.habit-measure-input,.habit-measure-select{width:100%;background:var(--ink3);border:1px solid var(--border2);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--cream);font-family:'Instrument Sans',sans-serif;outline:none}
.habit-measure-input:focus,.habit-measure-select:focus{border-color:rgba(var(--accent-rgb),.4)}
.habit-modal-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--border);flex-shrink:0}
.habit-modal-save{padding:9px 22px;border-radius:10px;background:var(--amber);color:#1a1510;font-size:13.5px;font-weight:600;border:none;cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:opacity .15s}
.habit-modal-save:hover{opacity:.85}
.habit-del-btn{padding:9px 14px;border-radius:10px;background:none;border:1px solid var(--border);color:var(--cream3);font-size:12.5px;cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:all .15s}
.habit-del-btn:hover{border-color:var(--rose);color:var(--rose)}
.habit-del-confirm-msg{font-size:12.5px;color:var(--cream2);flex:1}
.habit-del-confirm-btn{padding:9px 14px;border-radius:10px;background:var(--rose);color:#fff;border:none;font-size:12.5px;font-weight:600;cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:opacity .15s}
.habit-del-confirm-btn:hover{opacity:.85}
@media(max-width:600px){.habits-page{padding:20px 18px 60px}}

/* ── Session intention ── */

/* ════════════════════════════════════════════
   BOOKS
════════════════════════════════════════════ */
.books-page{max-width:1080px;margin:0 auto;padding:32px 40px 80px;width:100%}

/* ── Habit modal ── */
.habit-modal{position:fixed;inset:0;z-index:800;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.habit-modal-inner{width:min(420px,92vw);background:var(--ink2);border:1px solid var(--border2);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);animation:pop-up .18s ease;display:flex;flex-direction:column}
.habit-modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--border)}
.habit-modal-title{font-size:15px;font-weight:600;color:var(--cream)}
.habit-modal-close{width:28px;height:28px;border-radius:8px;background:none;border:none;color:var(--cream3);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.habit-modal-close:hover{color:var(--cream);background:var(--ink3)}
.habit-modal-body{padding:20px;display:flex;flex-direction:column;gap:14px}
.hicon-picker{display:flex;flex-wrap:wrap;gap:6px}
.hicon-btn{width:36px;height:36px;border-radius:10px;border:1.5px solid var(--border);background:var(--ink3);font-size:18px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}
.hicon-btn:hover{border-color:var(--border2)}
.hicon-btn.active{border-color:var(--amber);background:var(--amber-soft)}
.habit-custom-icon-input{width:100%;background:var(--ink3);border:1px solid var(--border);border-radius:10px;padding:8px 14px;font-size:18px;color:var(--cream);font-family:'Instrument Sans',sans-serif;outline:none;transition:border-color .15s}
.habit-custom-icon-input::placeholder{font-size:12px;opacity:.4;color:var(--cream3)}
.habit-custom-icon-input:focus{border-color:rgba(var(--accent-rgb),.3)}
.habit-modal-name{width:100%;background:var(--ink3);border:1px solid var(--border2);border-radius:10px;padding:10px 14px;font-size:14px;color:var(--cream);font-family:'Instrument Sans',sans-serif;outline:none;transition:border-color .15s}
.habit-modal-name:focus{border-color:rgba(var(--accent-rgb),.4)}
.habit-measure-group{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--border)}
.habit-measure-head{display:flex;flex-direction:column;gap:3px}
.habit-measure-label{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--cream2)}
.habit-measure-hint{font-size:11px;color:var(--cream3);opacity:.7;line-height:1.45}
.habit-measure-row{display:flex;gap:8px}
.habit-measure-input,.habit-measure-select{width:100%;background:var(--ink3);border:1px solid var(--border2);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--cream);font-family:'Instrument Sans',sans-serif;outline:none}
.habit-measure-input:focus,.habit-measure-select:focus{border-color:rgba(var(--accent-rgb),.4)}
.habit-modal-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--border);flex-shrink:0}
.habit-modal-save{padding:9px 22px;border-radius:10px;background:var(--amber);color:#1a1510;font-size:13.5px;font-weight:600;border:none;cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:opacity .15s}
.habit-modal-save:hover{opacity:.85}
.habit-del-btn{padding:9px 14px;border-radius:10px;background:none;border:1px solid var(--border);color:var(--cream3);font-size:12.5px;cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:all .15s}
.habit-del-btn:hover{border-color:var(--rose);color:var(--rose)}
.habit-del-confirm-msg{font-size:12.5px;color:var(--cream2);flex:1}
.habit-del-confirm-btn{padding:9px 14px;border-radius:10px;background:var(--rose);color:#fff;border:none;font-size:12.5px;font-weight:600;cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:opacity .15s}
.habit-del-confirm-btn:hover{opacity:.85}
@media(max-width:600px){.habits-page{padding:20px 18px 60px}}

/* ── Session intention ── */

/* ════════════════════════════════════════════
   BOOKS
════════════════════════════════════════════ */
.books-page{max-width:1080px;margin:0 auto;padding:32px 40px 80px;width:100%}
.books-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px}
.books-topbar-left{display:flex;align-items:baseline;gap:10px}
.books-topbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.books-heading{font-family:'Playfair Display',serif;font-size:22px;font-weight:500;color:var(--cream)}
.books-count{font-size:12px;color:var(--cream3);opacity:.78}
.books-add-btn,.books-action-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:50px;border:1px solid var(--border2);background:none;color:var(--cream2);font-size:12.5px;font-family:'Instrument Sans',sans-serif;cursor:pointer;transition:all .15s}
.books-add-btn:hover,.books-action-btn:hover{border-color:var(--amber);color:var(--amber)}
.books-filters{display:flex;gap:6px;margin-bottom:28px;flex-wrap:wrap}
.bfilter{padding:6px 14px;border-radius:50px;border:1px solid var(--border);background:none;color:var(--cream3);font-size:12px;font-family:'Instrument Sans',sans-serif;cursor:pointer;transition:all .15s}
.bfilter:hover{border-color:var(--border2);color:var(--cream2)}
.bfilter.active{border-color:var(--amber);color:var(--amber);background:rgba(var(--accent-rgb),.08)}
/* flat (date / a–z) — wrapping grid */
.books-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,160px));gap:16px;justify-content:start}
.books-grid--status{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.books-grid--status .book-info{padding:9px 9px 11px}
.books-grid--status .book-title-text,.books-grid--status .book-title{font-size:11.5px}
.books-grid--status .book-author{font-size:10px}
.books-empty{grid-column:1/-1;font-size:13px;color:var(--cream3);opacity:.72;padding:40px 0;font-style:italic}
/* grouped — vertical stack of horizontal scroll lanes */
.books-grid--grouped{display:flex;flex-direction:column;gap:28px}
.books-group-section{display:flex;flex-direction:column;gap:14px}
.books-group-hdr{font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--cream3);opacity:.72;padding-bottom:10px;border-bottom:1px solid var(--border)}
.books-group-row{display:flex;flex-direction:row;gap:14px;overflow-x:auto;padding:0 0 10px;scrollbar-width:none;-ms-overflow-style:none}
.books-group-row::-webkit-scrollbar{display:none}
.books-group-row .book-card{flex:0 0 148px;margin:6px 0 14px}

@media (hover:hover) and (pointer:fine){.books-group-row .book-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.32)}}

/* ── Book card ── */
.book-card{border-radius:12px;overflow:hidden;background:var(--ink2);border:1px solid var(--border);cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s;position:relative}
@media (hover:hover) and (pointer:fine){.book-card:hover{transform:translateY(-4px);border-color:var(--border2);box-shadow:0 12px 32px rgba(0,0,0,.4)}}
.book-status-badge{position:absolute;top:8px;right:8px;z-index:3;font-size:8.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:3px 7px;border-radius:999px;border:1px solid transparent;opacity:1;box-shadow:0 6px 16px rgba(0,0,0,.14)}
.book-info{padding:10px 11px 12px;min-height:62px}
.book-card-backdrop{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:14px;background:linear-gradient(180deg,rgba(14,13,11,0) 35%,rgba(14,13,11,.82) 100%);opacity:0;transition:opacity .18s ease;cursor:pointer}
.book-card:hover .book-card-backdrop,.book-card:focus-within .book-card-backdrop{opacity:1}
.book-card-backdrop-inner{width:100%;padding:14px 14px 12px;border:1px solid rgba(245,237,216,.12);border-radius:16px;background:rgba(14,13,11,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.book-card-backdrop-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,237,216,.58);margin-bottom:4px}
.book-card-backdrop-title{font-family:'Playfair Display',serif;font-size:19px;line-height:1;color:var(--cream);margin-bottom:6px}
.book-card-backdrop-sub{font-size:11.5px;line-height:1.45;color:rgba(245,237,216,.72)}
@media(max-width:700px){.book-card-backdrop{background:linear-gradient(180deg,rgba(14,13,11,.04) 40%,rgba(14,13,11,.78) 100%)}.book-card-backdrop-inner{padding:12px 12px 11px}.book-card-backdrop-title{font-size:17px}}
[data-theme="paper"] .book-card-backdrop{background:linear-gradient(180deg,rgba(249,246,240,0) 38%,rgba(26,21,14,.68) 100%)}
[data-theme="paper"] .book-card-backdrop-inner{background:rgba(249,246,240,.2);border-color:rgba(249,246,240,.18)}
[data-theme="paper"] .book-card-backdrop-label{color:rgba(249,246,240,.72)}
[data-theme="paper"] .book-card-backdrop-title{color:#fff7ed}
[data-theme="paper"] .book-card-backdrop-sub{color:rgba(255,247,237,.82)}

.book-cover-wrap{position:relative;aspect-ratio:2/3;background:var(--ink3);overflow:hidden}
.book-cover-img{width:100%;height:100%;object-fit:cover;display:block}
.book-cover-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;background:linear-gradient(150deg,var(--ink3) 0%,rgba(var(--accent-rgb),.1) 100%);text-align:center;gap:6px}
.book-cover-ph-inner{display:flex;flex-direction:column;align-items:center;gap:6px}
.book-cover-ph-title{font-family:'Playfair Display',serif;font-size:12px;color:var(--cream2);line-height:1.4;word-break:break-word}
.book-cover-ph-author{font-size:10px;color:var(--cream3);opacity:.55}
.book-cover-ph-missing{font-size:10px;color:var(--amber);opacity:.9}
.book-status--want{color:var(--amber)}
.book-status--reading{color:var(--green)}
.book-status--done{color:var(--green)}
.book-progress-bar{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.07)}
.book-progress-fill{height:100%;background:var(--green);border-radius:0 2px 2px 0;transition:width .3s}
.book-title{font-family:'Playfair Display',serif;font-size:12.5px;font-weight:500;color:var(--cream);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.book-author{font-size:10.5px;color:var(--cream3);margin-top:3px;opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.book-stars{font-size:10.5px;color:var(--amber);margin-top:5px;letter-spacing:1.5px;opacity:.85}

/* ── Book modal ── */
.book-modal{position:fixed;inset:0;z-index:800;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.book-modal-inner{width:min(480px,94vw);max-height:88vh;background:var(--ink2);border:1px solid var(--border2);border-radius:20px;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg);animation:pop-up .18s ease}
.book-note-modal-inner{width:min(600px,96vw);max-height:92vh}
.book-modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.book-modal-heading{font-size:15px;font-weight:600;color:var(--cream)}
.book-modal-close{width:28px;height:28px;border-radius:8px;background:none;border:none;color:var(--cream3);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.book-modal-close:hover{color:var(--cream);background:var(--ink3)}
.book-modal-body{padding:20px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;flex:1}
.book-modal-section{display:flex;flex-direction:column;gap:14px;padding:16px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.02)}
.book-modal-section--notes{padding-bottom:18px}
.book-section-head{display:flex;flex-direction:column;gap:4px}
.book-section-title{font-size:13px;font-weight:600;color:var(--cream);letter-spacing:.01em}
.book-section-sub{font-size:11.5px;color:var(--cream3);line-height:1.55;opacity:.8}
.book-modal-label{font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--cream3);opacity:.55;margin-bottom:5px}
.book-field{width:100%;background:var(--ink3);border:1px solid var(--border2);border-radius:10px;padding:10px 14px;font-size:14px;color:var(--cream);font-family:'Instrument Sans',sans-serif;outline:none;transition:border-color .15s;box-sizing:border-box}
.book-field:focus{border-color:rgba(var(--accent-rgb),.4)}
.book-select{width:100%;background:var(--ink3);border:1px solid var(--border2);border-radius:10px;padding:10px 14px;font-size:14px;color:var(--cream);font-family:'Instrument Sans',sans-serif;outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;transition:border-color .15s}
.book-select:focus{border-color:rgba(var(--accent-rgb),.4)}
.book-textarea{width:100%;min-height:108px;resize:vertical;background:var(--ink3);border:1px solid var(--border2);border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.65;color:var(--cream2);font-family:'Instrument Sans',sans-serif;outline:none;transition:border-color .15s;box-sizing:border-box}
.book-textarea:focus{border-color:rgba(var(--accent-rgb),.4)}
.book-textarea--note{min-height:220px}
.book-pages-wrap{display:none;grid-template-columns:1fr 1fr;gap:10px}
.books-print-view{display:none}
body.books-printing .topbar,
body.books-printing .view,
body.books-printing .break-overlay,
body.books-printing .book-modal{display:none!important}
body.books-printing .books-print-view{display:block;padding:32px;color:#111;background:#fff}
.print-books-title{font-family:'Playfair Display',serif;font-size:30px;margin:0 0 8px;color:#111}
.print-books-sub{font-size:13px;color:#555;margin:0 0 24px}
.print-book-item{break-inside:avoid;border:1px solid #ddd;border-radius:14px;padding:16px 18px;margin-bottom:14px}
.print-book-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}
.print-book-title{font-family:'Playfair Display',serif;font-size:22px;color:#111}
.print-book-meta{font-size:12px;color:#444;line-height:1.6}
.print-book-section{margin-top:10px}
.print-book-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#666;margin-bottom:4px}
.print-book-text{font-size:12.5px;line-height:1.7;color:#222;white-space:pre-wrap}
@media print{body{background:#fff!important}body.books-printing .books-print-view{display:block!important;padding:0}body.books-printing .books-print-view *{visibility:visible}}
.books-sort-select{height:34px;padding:0 10px;background:var(--ink3);border:1px solid var(--border2);border-radius:10px;color:var(--cream2);font-family:'Instrument Sans',sans-serif;font-size:12.5px;outline:none;cursor:pointer;appearance:auto;-webkit-appearance:auto;transition:border-color .15s}
.books-sort-select:hover,.books-sort-select:focus{border-color:rgba(var(--accent-rgb),.35)}
@media(max-width:700px){.books-topbar{align-items:flex-start;flex-direction:column}.books-topbar-actions{width:100%;gap:8px}.books-sort-select{flex:1}.books-action-btn,.books-add-btn{justify-content:center;flex:1;min-width:120px}.books-grid--status{grid-template-columns:repeat(4,minmax(0,1fr))}}
.book-rating-wrap{display:none;align-items:center;gap:4px}
.book-rating-lbl{font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--cream3);opacity:.55;margin-right:6px}
.bstar-btn{background:none;border:none;font-size:22px;cursor:pointer;color:var(--cream3);opacity:.25;padding:0 1px;transition:all .12s;line-height:1}
.bstar-btn.active{color:var(--amber);opacity:1}
.bstar-btn:hover{opacity:.75}
.book-cover-upload-wrap{display:flex;flex-direction:column;gap:10px}
.book-cover-upload-zone{position:relative;width:90px;height:135px;border-radius:10px;border:1px dashed var(--border2);background:var(--ink3);cursor:pointer;overflow:hidden;display:block;transition:border-color .15s}
.book-cover-upload-zone:hover{border-color:rgba(var(--accent-rgb),.4)}
.book-cover-preview-lg{width:100%;height:100%;object-fit:cover;display:none;border-radius:9px}
.book-cover-upload-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--cream3);opacity:.45;font-size:11px;font-family:'Instrument Sans',sans-serif;pointer-events:none}
.book-cover-upload-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(14,13,11,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--cream);font-size:11px;font-family:'Instrument Sans',sans-serif;opacity:0;transition:opacity .15s;border-radius:9px;pointer-events:none}
.book-cover-upload-zone:hover .book-cover-upload-overlay{opacity:1}
.book-cover-url-field{font-size:13px}
.book-modal-footer{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-top:1px solid var(--border);flex-shrink:0;gap:8px}
.book-save-btn{padding:9px 22px;border-radius:10px;background:var(--amber);color:#1a1510;font-size:13.5px;font-weight:600;border:none;cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:opacity .15s}
.book-save-btn:hover{opacity:.85}
.book-del-btn{padding:9px 14px;border-radius:10px;background:none;border:1px solid var(--border);color:var(--cream3);font-size:12.5px;cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:all .15s}
.book-del-btn:hover{border-color:var(--rose);color:var(--rose)}

/* ── Search results ── */
.book-search-input{width:100%;background:var(--ink3);border:1px solid var(--border2);border-radius:10px;padding:10px 14px;font-size:14px;color:var(--cream);font-family:'Instrument Sans',sans-serif;outline:none;transition:border-color .15s;box-sizing:border-box}
.book-search-input:focus{border-color:rgba(var(--accent-rgb),.4)}
.book-search-results{margin-top:6px;display:flex;flex-direction:column;gap:3px;max-height:220px;overflow-y:auto}
.bsearch-result{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:7px;cursor:pointer;transition:background .15s}
.bsearch-result:hover{background:var(--ink3)}
.bsearch-result--best{position:relative}
.bsearch-result--best::after{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:2px;height:60%;border-radius:2px;background:var(--amber);opacity:.7}
.bsearch-thumb{width:26px;height:38px;object-fit:cover;border-radius:3px;flex-shrink:0}
.bsearch-thumb--ph{width:26px;height:38px;border-radius:3px;background:var(--ink4);flex-shrink:0}
.bsearch-info{flex:1;min-width:0}
.bsearch-title{font-size:11px;color:var(--cream2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bsearch-author{font-size:10px;color:var(--cream3);opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.bsearch-msg{font-size:12px;color:var(--cream3);opacity:.72;padding:10px 0;text-align:center}
.bsearch-msg--warn{color:var(--amber);opacity:.9}
.bsearch-meta{font-size:10px;color:var(--cream3);opacity:.62;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bsearch-arrow{font-size:16px;color:var(--cream3);opacity:.5;flex-shrink:0;padding-left:4px}
.bsearch-result:hover .bsearch-arrow{opacity:.82}
.book-search-results--editions{max-height:320px}
.bsearch-editions-hdr{display:flex;align-items:center;gap:8px;padding:4px 6px 8px;border-bottom:1px solid var(--ink3);margin-bottom:4px;flex-shrink:0;position:sticky;top:0;background:var(--ink2)}
.bsearch-back{background:none;border:none;cursor:pointer;color:var(--cream3);opacity:.6;font-size:12px;padding:3px 8px;border-radius:5px;transition:opacity .15s;flex-shrink:0}
.bsearch-back:hover{opacity:1;background:var(--ink3)}
.bsearch-editions-title{font-size:12px;color:var(--cream2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.bsearch-editions-count{opacity:.4;font-weight:400}
.bsearch-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.bsearch-chip{font-size:9px;padding:1px 6px;border-radius:20px;background:var(--ink3);color:var(--cream3);opacity:.8;white-space:nowrap}


@media(max-width:480px){.books-page{padding:20px 18px 60px}.books-grid--status{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Re-apply paper theme overrides after later component declarations */
.book-cover-wrap{position:relative;aspect-ratio:2/3;background:var(--ink3);overflow:hidden}
.book-cover-img{width:100%;height:100%;object-fit:cover;display:block}
/* shimmer while cover loads */
.book-cover-img:not([src=""]){background:linear-gradient(90deg,var(--ink3) 25%,var(--ink4) 50%,var(--ink3) 75%);background-size:200% 100%;animation:book-shimmer 1.4s ease infinite}
.book-cover-img.loaded,.book-cover-img[complete]{animation:none;background:none}
@keyframes book-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.book-cover-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;background:linear-gradient(150deg,var(--ink3) 0%,rgba(var(--accent-rgb),.1) 100%);text-align:center;gap:6px}
.book-cover-ph-inner{display:flex;flex-direction:column;align-items:center;gap:6px}
.book-cover-ph-title{font-family:'Playfair Display',serif;font-size:12px;color:var(--cream2);line-height:1.4;word-break:break-word}
.book-cover-ph-author{font-size:10px;color:var(--cream3);opacity:.55}
.book-cover-ph-missing{font-size:10px;color:var(--amber);opacity:.9}
.book-info{padding:10px 11px 10px;min-height:62px;position:relative}
.book-status-badge{position:absolute;top:8px;right:8px;z-index:3;font-size:8.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(10,9,8,.46);color:#fff;opacity:1;box-shadow:0 8px 20px rgba(0,0,0,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.book-status-badge.book-status--want,.book-status-badge.book-status--reading,.book-status-badge.book-status--done{color:#fff}
.book-progress-bar{position:absolute;bottom:0;left:0;right:0;height:4px;background:rgba(255,255,255,.06)}
.book-progress-fill{height:100%;background:linear-gradient(90deg,rgba(var(--accent-rgb),.7),var(--amber));border-radius:0 3px 3px 0;transition:width .4s ease}
.book-progress-fill--done{background:linear-gradient(90deg,rgba(var(--accent-rgb),.55),var(--amber));border-radius:0}
.book-title{font-family:'Playfair Display',serif;font-size:12.5px;font-weight:500;color:var(--cream);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.book-author{font-size:10.5px;color:var(--cream3);margin-top:3px;opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.book-progress-meta{font-size:9.5px;color:var(--amber);opacity:.9;margin-top:4px;letter-spacing:.02em}
.book-card-rating{font-size:11px;color:var(--amber);margin-top:4px;letter-spacing:1px;opacity:1}
.book-stars{font-size:10.5px;color:var(--amber);margin-top:5px;letter-spacing:1.5px;opacity:.95}
/* ── Journal notes ── */
.book-note-modal-body{padding:0 24px 8px;display:flex;flex-direction:column;overflow-y:auto;flex:1}
.bnote-entry{padding:24px 0}
.bnote-entry+.bnote-entry{border-top:1px solid var(--border)}
.bnote-entry-hdr{display:flex;align-items:center;gap:9px;margin-bottom:18px}
.bnote-entry-icon{font-size:11px;color:var(--amber);opacity:.8;flex-shrink:0}
.bnote-entry-title{font-family:'Playfair Display',serif;font-style:italic;font-size:15px;color:var(--cream2);font-weight:400}
.bnote-entry-fields{display:flex;flex-direction:column;gap:16px}
.bnote-field{display:flex;flex-direction:column;gap:6px}
.bnote-field-label{font-size:13px;color:var(--cream2);opacity:.7;font-weight:400;letter-spacing:.01em}
/* read view */
.bnote-field-text{margin:0;padding:3px 0 2px 10px;font-size:11.5px;line-height:1.8;color:var(--cream3);font-family:'Instrument Sans',sans-serif;white-space:pre-wrap;word-break:break-word;border-left:1px solid var(--border);opacity:.75}
.bnote-empty{padding:32px 0 16px;text-align:center;color:var(--cream3);font-size:13px;opacity:.5}
.bnote-empty p{margin:0 0 4px}
.bnote-empty-sub{font-size:11.5px;opacity:.7}
/* edit view */
.bnote-field-ta{width:100%;min-height:52px;background:transparent;border:none;border-bottom:1px solid var(--border);border-radius:0;padding:6px 0 10px;font-size:14px;line-height:1.7;color:var(--cream);font-family:'Instrument Sans',sans-serif;outline:none;resize:none;overflow:hidden;transition:border-color .15s;box-sizing:border-box}
.bnote-field-ta:focus{border-bottom-color:rgba(var(--accent-rgb),.45)}
.bnote-field-ta::placeholder{color:var(--cream3);opacity:.35}
/* modal header actions */
.book-note-hdr-actions{display:flex;align-items:center;gap:8px}
.book-note-edit-toggle{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--cream3);font-family:'Instrument Sans',sans-serif;font-size:11px;font-weight:500;letter-spacing:.01em;cursor:pointer;transition:border-color .15s,color .15s}
.book-note-edit-toggle:hover{border-color:rgba(var(--accent-rgb),.4);color:var(--amber)}
/* notes chip on card */
.book-card-bottom{display:flex;align-items:center;margin-top:6px}
.book-notes-chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-family:'Instrument Sans',sans-serif;font-weight:500;padding:4px 9px;border-radius:20px;border:1px solid var(--border2);color:var(--cream2);opacity:.72;transition:opacity .18s,border-color .18s,color .18s,background .18s;pointer-events:none;letter-spacing:.01em;background:var(--ink3)}
.book-notes-chip--filled{border-color:rgba(var(--accent-rgb),.3);background:rgba(var(--accent-rgb),.08);color:var(--amber);opacity:.92}
@media (hover:hover) and (pointer:fine){.book-card:hover .book-notes-chip{opacity:.92;border-color:var(--border2)}.book-card:hover .book-notes-chip--filled{opacity:1;border-color:rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.12)}}
@media (hover:none), (pointer:coarse){.book-notes-chip{opacity:.78}.book-notes-chip--filled{opacity:1}}

/* ── Quick rating prompt ── */
.book-quick-rate-modal{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .2s ease}
.book-quick-rate-modal--in{opacity:1}
.book-quick-rate-inner{background:var(--ink2);border:1px solid var(--border2);border-radius:24px;padding:32px 36px 28px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 24px 64px rgba(0,0,0,.5);animation:pop-up .2s ease;min-width:280px;max-width:340px;text-align:center}
.book-quick-rate-eyebrow{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);opacity:.8;margin-bottom:2px}
.book-quick-rate-title{font-family:'Playfair Display',serif;font-size:18px;font-weight:500;color:var(--cream);line-height:1.35;margin-bottom:2px}
.book-quick-rate-prompt{font-size:12.5px;color:var(--cream3);opacity:.6;margin-bottom:10px}
.book-quick-rate-stars{display:flex;gap:4px;margin-bottom:6px}
.bqr-star{background:none;border:none;font-size:32px;cursor:pointer;color:var(--cream3);opacity:.2;padding:0 2px;transition:opacity .1s,color .1s,transform .1s;line-height:1}
.bqr-star.active{color:var(--amber);opacity:1}
.bqr-star:hover{transform:scale(1.15);opacity:.8}
.book-quick-rate-actions{display:flex;gap:10px;margin-top:10px;width:100%}
.bqr-skip{flex:1;padding:9px;border-radius:10px;background:none;border:1px solid var(--border);color:var(--cream3);font-size:13px;cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:all .15s}
.bqr-skip:hover{border-color:var(--border2);color:var(--cream)}
.bqr-save{flex:2;padding:9px;border-radius:10px;background:var(--amber);border:none;color:#1a1510;font-size:13px;font-weight:600;cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:opacity .15s}
.bqr-save:hover{opacity:.85}

/* advance btn — back on cover, bottom, slides up */
.book-advance-btn{position:absolute;bottom:10px;left:50%;z-index:3;transform:translateX(-50%) translateY(6px);white-space:nowrap;padding:5px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:rgba(10,9,8,.46);color:#fff;font-family:'Instrument Sans',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.02em;cursor:pointer;opacity:0;transition:opacity .18s ease,transform .18s ease,background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;pointer-events:none;box-shadow:0 8px 20px rgba(0,0,0,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@media (hover:hover) and (pointer:fine){.book-card:hover .book-advance-btn{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}}
.book-advance-btn:hover{background:rgba(10,9,8,.58);border-color:rgba(255,255,255,.18);color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.24)}
@media (hover:none), (pointer:coarse){.book-card.book-card--touch-open .book-advance-btn{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}.book-card.book-card--touch-open .book-cover-backdrop{opacity:1;pointer-events:auto}}
/* notes — full-cover backdrop with inner pill */
.book-cover-backdrop{position:absolute;inset:0;opacity:0;cursor:pointer;transition:opacity .2s ease;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2}
.book-cover-backdrop::before{content:'';position:absolute;inset:0;background:rgba(10,9,8,.52);z-index:0}
@media (hover:hover) and (pointer:fine){.book-card:hover .book-cover-backdrop{opacity:1;pointer-events:auto}}
@media (hover:none), (pointer:coarse){.book-cover-backdrop{opacity:0;pointer-events:none}}
.book-cover-backdrop-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(10,9,8,.46);box-shadow:0 8px 22px rgba(0,0,0,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-family:'Instrument Sans',sans-serif;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:color .15s,border-color .15s,background .15s,box-shadow .15s}
.book-cover-backdrop-inner svg{opacity:.75;transition:opacity .15s}
.book-cover-backdrop:hover .book-cover-backdrop-inner{color:#fff;border-color:rgba(255,255,255,.18);background:rgba(10,9,8,.58);box-shadow:0 10px 24px rgba(0,0,0,.24)}
.book-cover-backdrop:hover .book-cover-backdrop-inner svg{stroke:currentColor;opacity:1}
.book-cover-backdrop-inner--filled{color:#fff}
.book-cover-backdrop-inner--filled svg{stroke:currentColor;opacity:.9}
/* title as edit trigger */
.book-title-edit-btn{display:flex;align-items:baseline;gap:5px;background:none;border:none;padding:0;cursor:pointer;text-align:left;width:100%}
.book-title-text{font-size:12.5px;font-weight:500;color:var(--cream);line-height:1.4;font-family:'Playfair Display',serif;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .15s}
.book-title-edit-icon{flex-shrink:0;color:var(--cream3);opacity:0;transition:opacity .15s;margin-top:1px;stroke:currentColor}
@media (hover:hover) and (pointer:fine){.book-title-edit-btn:hover .book-title-text{color:var(--amber)}.book-title-edit-btn:hover .book-title-edit-icon{opacity:.6}}

/* ── Book modal ── */
.book-modal{position:fixed;inset:0;z-index:800;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.book-modal-inner{width:min(480px,94vw);max-height:88vh;background:var(--ink2);border:1px solid var(--border2);border-radius:20px;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg);animation:pop-up .18s ease}
.book-note-modal-inner{width:min(600px,96vw);max-height:92vh}
.book-modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.book-modal-heading{font-size:15px;font-weight:600;color:var(--cream)}
.book-modal-close{width:28px;height:28px;border-radius:8px;background:none;border:none;color:var(--cream3);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.book-modal-close:hover{color:var(--cream);background:var(--ink3)}
.book-modal-body{padding:20px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;flex:1}
.book-modal-section{display:flex;flex-direction:column;gap:14px;padding:16px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.02)}
.book-modal-section--notes{padding-bottom:18px}
.book-section-head{display:flex;flex-direction:column;gap:4px}
.book-section-title{font-size:13px;font-weight:600;color:var(--cream);letter-spacing:.01em}
.book-section-sub{font-size:11.5px;color:var(--cream3);line-height:1.55;opacity:.8}
.book-modal-label{font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--cream3);opacity:.55;margin-bottom:5px}
.book-field{width:100%;background:var(--ink3);border:1px solid var(--border2);border-radius:10px;padding:10px 14px;font-size:14px;color:var(--cream);font-family:'Instrument Sans',sans-serif;outline:none;transition:border-color .15s;box-sizing:border-box}
.book-field:focus{border-color:rgba(var(--accent-rgb),.4)}
.book-select{width:100%;background:var(--ink3);border:1px solid var(--border2);border-radius:10px;padding:10px 14px;font-size:14px;color:var(--cream);font-family:'Instrument Sans',sans-serif;outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;transition:border-color .15s}
.book-select:focus{border-color:rgba(var(--accent-rgb),.4)}
.book-textarea{width:100%;min-height:108px;resize:vertical;background:var(--ink3);border:1px solid var(--border2);border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.65;color:var(--cream2);font-family:'Instrument Sans',sans-serif;outline:none;transition:border-color .15s;box-sizing:border-box}
.book-textarea:focus{border-color:rgba(var(--accent-rgb),.4)}
.book-textarea--note{min-height:220px}
.book-pages-wrap{display:none;grid-template-columns:1fr 1fr;gap:10px}
.books-print-view{display:none}
body.books-printing .topbar,
body.books-printing .view,
body.books-printing .break-overlay,
body.books-printing .book-modal{display:none!important}
body.books-printing .books-print-view{display:block;padding:32px;color:#111;background:#fff}
.print-books-title{font-family:'Playfair Display',serif;font-size:30px;margin:0 0 8px;color:#111}
.print-books-sub{font-size:13px;color:#555;margin:0 0 24px}
.print-book-item{break-inside:avoid;border:1px solid #ddd;border-radius:14px;padding:16px 18px;margin-bottom:14px}
.print-book-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}
.print-book-title{font-family:'Playfair Display',serif;font-size:22px;color:#111}
.print-book-meta{font-size:12px;color:#444;line-height:1.6}
.print-book-section{margin-top:10px}
.print-book-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#666;margin-bottom:4px}
.print-book-text{font-size:12.5px;line-height:1.7;color:#222;white-space:pre-wrap}
@media print{body{background:#fff!important}body.books-printing .books-print-view{display:block!important;padding:0}body.books-printing .books-print-view *{visibility:visible}}
.books-sort-select{height:34px;padding:0 10px;background:var(--ink3);border:1px solid var(--border2);border-radius:10px;color:var(--cream2);font-family:'Instrument Sans',sans-serif;font-size:12.5px;outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;transition:border-color .15s;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a09070' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.books-sort-select:hover,.books-sort-select:focus{border-color:rgba(var(--accent-rgb),.35)}
@media(max-width:700px){.books-topbar{align-items:flex-start;flex-direction:column}.books-topbar-actions{width:100%;gap:8px}.books-sort-select{flex:1}.books-action-btn,.books-add-btn{justify-content:center;flex:1;min-width:120px}.books-grid--status{grid-template-columns:repeat(4,minmax(0,1fr))}}
.book-rating-wrap{display:none;align-items:center;gap:4px}
.book-rating-lbl{font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--cream3);opacity:.55;margin-right:6px}
.bstar-btn{background:none;border:none;font-size:22px;cursor:pointer;color:var(--cream3);opacity:.25;padding:0 1px;transition:all .12s;line-height:1}
.bstar-btn.active{color:var(--amber);opacity:1}
.bstar-btn:hover{opacity:.75}
.book-cover-upload-wrap{display:flex;flex-direction:column;gap:10px}
.book-cover-upload-zone{position:relative;width:90px;height:135px;border-radius:10px;border:1px dashed var(--border2);background:var(--ink3);cursor:pointer;overflow:hidden;display:block;transition:border-color .15s}
.book-cover-upload-zone:hover{border-color:rgba(var(--accent-rgb),.4)}
.book-cover-preview-lg{width:100%;height:100%;object-fit:cover;display:none;border-radius:9px}
.book-cover-upload-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--cream3);opacity:.45;font-size:11px;font-family:'Instrument Sans',sans-serif;pointer-events:none}
.book-cover-upload-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:rgba(14,13,11,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--cream);font-size:11px;font-family:'Instrument Sans',sans-serif;opacity:0;transition:opacity .15s;border-radius:9px;pointer-events:none}
.book-cover-upload-zone:hover .book-cover-upload-overlay{opacity:1}
.book-cover-url-field{font-size:13px}
.book-modal-footer{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-top:1px solid var(--border);flex-shrink:0;gap:8px}
.book-save-btn{padding:9px 22px;border-radius:10px;background:var(--amber);color:#1a1510;font-size:13.5px;font-weight:600;border:none;cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:opacity .15s}
.book-save-btn:hover{opacity:.85}
.book-del-btn{padding:9px 14px;border-radius:10px;background:none;border:1px solid var(--border);color:var(--cream3);font-size:12.5px;cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:all .15s}
.book-del-btn:hover{border-color:var(--rose);color:var(--rose)}

/* ── Search results ── */
.book-search-input{width:100%;background:var(--ink3);border:1px solid var(--border2);border-radius:10px;padding:10px 14px;font-size:14px;color:var(--cream);font-family:'Instrument Sans',sans-serif;outline:none;transition:border-color .15s;box-sizing:border-box}
.book-search-input:focus{border-color:rgba(var(--accent-rgb),.4)}

@media(max-width:480px){.books-page{padding:20px 18px 60px}.books-grid--status{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Re-apply paper theme overrides after later component declarations */
[data-theme="paper"] .topbar-icon,
[data-theme="paper"] .drawer-close,
[data-theme="paper"] .pip-trigger,
[data-theme="paper"] .ambiance-btn{background:#eee7dc;border-color:rgba(61,52,42,.12);color:#5a4e42;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
[data-theme="paper"] .topbar-icon:hover,
[data-theme="paper"] .drawer-close:hover,
[data-theme="paper"] .pip-trigger:hover,
[data-theme="paper"] .ambiance-btn:hover{background:#e6ddd0;border-color:rgba(61,52,42,.2);color:#2f261f}
[data-theme="paper"] .topbar-icon.active-icon,
[data-theme="paper"] .ambiance-btn.active-icon{background:rgba(139,90,43,.12);border-color:rgba(139,90,43,.35);color:#8B5A2B;box-shadow:none}
[data-theme="paper"] .timer-context,
[data-theme="paper"] .timer-context-center,
[data-theme="paper"] .focus-quote{color:#55483d;opacity:.88}
[data-theme="paper"] .timer-context em,
[data-theme="paper"] .timer-context-center em{color:#2b221a;--timer-context-em-base:#2b221a}
[data-theme="paper"] .mtab{color:#65584d}
[data-theme="paper"] .mtab:hover{color:#2f261f}
[data-theme="paper"] .settings-jump{background:rgba(249,246,240,.97);border-bottom-color:rgba(61,52,42,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
[data-theme="paper"] .sjump{background:#efe7dc;border-color:rgba(61,52,42,.08);color:#594d42;opacity:1}
[data-theme="paper"] .sjump:hover{background:#e6ddd1;border-color:rgba(61,52,42,.14);color:#2f261f}
[data-theme="paper"] .ss-sub,
[data-theme="paper"] .mode-preset-times,
[data-theme="paper"] .mode-desc,
[data-theme="paper"] .theme-tag,
[data-theme="paper"] .snd-card-label,
[data-theme="paper"] .book-author,
[data-theme="paper"] .book-modal-label,
[data-theme="paper"] .book-rating-lbl,
[data-theme="paper"] .habit-del-confirm-msg,
[data-theme="paper"] .habit-custom-icon-input::placeholder,
[data-theme="paper"] .book-search-input::placeholder{color:#675a4f;opacity:.92}
[data-theme="paper"] .snd-modal,
[data-theme="paper"] .habit-modal-inner,
[data-theme="paper"] .book-modal-inner{background:#f6f1e8;border-color:rgba(61,52,42,.1);box-shadow:0 18px 46px rgba(61,52,42,.14)}
[data-theme="paper"] .snd-card,
[data-theme="paper"] .habit-custom-icon-input,
[data-theme="paper"] .habit-modal-name,
[data-theme="paper"] .book-field,
[data-theme="paper"] .book-select,
[data-theme="paper"] .book-search-input{background:#ebe3d7;border-color:rgba(61,52,42,.12);color:#1a150e}
@media(hover:hover) and (pointer:fine){[data-theme="paper"] .snd-card:hover{box-shadow:0 6px 20px rgba(61,52,42,.1)}}
[data-theme="paper"] .snd-card.playing{box-shadow:0 0 0 2px rgba(139,90,43,.24),0 8px 22px rgba(139,90,43,.1)}
[data-theme="paper"] .snd-tab:hover{background:#ebe3d7}
[data-theme="paper"] .snd-master-range::-webkit-slider-runnable-track,
[data-theme="paper"] .snd-card-vol::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--amber) var(--pct,70%),rgba(61,52,42,.14) var(--pct,70%))}
[data-theme="paper"] .snd-master-range::-moz-range-track,
[data-theme="paper"] .snd-card-vol::-moz-range-track{background:rgba(61,52,42,.14)}
[data-theme="paper"] .book-status-badge{box-shadow:none}


/* ═══════════════════════════════════════════════════════
   COMPREHENSIVE RESPONSIVE — ALL SCREEN SHAPES & SIZES
   Applied last so these rules take final effect
   ═══════════════════════════════════════════════════════ */

/* Global overflow guard */
html,body{max-width:100%;overflow-x:hidden}
.view.active{overflow-x:hidden}
img,video,canvas{max-width:100%;height:auto}

/* ── 820px: tablet / landscape phone ── */
@media(max-width:820px){
  /* Settings: collapse sidebar into horizontal scrollable pill strip */
  .settings-shell{grid-template-columns:1fr;height:auto;overflow:visible}
  .settings-nav{
    display:flex;flex-direction:row;flex-wrap:nowrap;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    border-right:none;border-bottom:1px solid var(--border);
    padding:10px 16px;gap:6px;background:var(--ink2);
    position:sticky;top:0;z-index:10;flex-shrink:0;
    -webkit-overflow-scrolling:touch;
  }
  .settings-nav::-webkit-scrollbar{display:none}
  .snav-brand,.snav-divider,.snav-footer{display:none}
  .snav-list{flex-direction:row;gap:4px;flex:unset}
  .snav-item{white-space:nowrap;padding:7px 14px;border-radius:50px;font-size:12px}
  .settings-panes{overflow-x:hidden}
  .settings-pane{padding:clamp(20px,4vw,48px) clamp(16px,4vw,56px);max-width:100%}
  .spane-title{font-size:clamp(20px,5vw,32px)}
  .spane-header{margin-bottom:clamp(18px,3vw,38px);padding-bottom:clamp(14px,2.5vw,28px)}

  /* Habits page padding */
  .habits-page{padding:clamp(16px,4vw,40px) clamp(14px,4vw,40px) 80px}

  /* Stats */
  .stats-page{padding:clamp(16px,4vw,36px) clamp(14px,4vw,32px) 60px}

  /* Books */
  .books-page{padding:clamp(16px,4vw,36px) clamp(14px,4vw,32px) 80px}

  /* Main grid */
  .main-grid{padding:clamp(12px,3vw,28px)}

  /* Notes */
  .notes-view{padding:clamp(14px,4vw,36px) clamp(12px,3.5vw,32px)}

  /* Modal height cap */
  .habit-modal-inner,.book-modal-inner,.snd-modal{max-height:90dvh;max-height:90vh}
}

/* ── 600px: phones / small tablets ── */
@media(max-width:600px){
  /* Settings pane tighter */
  .settings-pane{padding:20px 16px 80px;max-width:100%}
  .spane-title{font-size:20px;letter-spacing:-.3px}
  .spane-header{margin-bottom:18px;padding-bottom:14px}

  /* Habits */
  .habits-page{padding:16px 14px calc(70px + env(safe-area-inset-bottom,0px))}
  .habit-hm-row{padding:14px 14px 12px}

  /* Stats heatmap: shorter cells on phones */
  .stats-heatmap-shell{grid-template-columns:26px minmax(0,1fr);gap:6px}
  .hm-cell{height:10px}
  .hm-day-labels{grid-template-rows:repeat(7,10px);gap:3px}
  .stats-heatmap-footer{flex-direction:column;align-items:flex-start;gap:8px}

  /* Notes */
  .notes-view{padding:12px 10px calc(70px + env(safe-area-inset-bottom,0px))}

  /* Books */
  .books-page{padding:14px 12px calc(70px + env(safe-area-inset-bottom,0px))}

  /* Modals: cap height, slide to bottom sheet */
  .habit-modal,.book-modal{align-items:flex-end}
  .habit-modal-inner,.book-modal-inner{
    width:100%;max-width:100%;border-radius:20px 20px 0 0;
    max-height:90dvh;max-height:90vh;overflow-y:auto;
  }
  .snd-modal{left:0;top:auto;bottom:0;transform:translateY(100%);width:100%;max-width:100%;border-radius:20px 20px 0 0;height:88dvh;height:88vh;max-height:88dvh;max-height:88vh;transition:transform .32s cubic-bezier(.34,1.2,.64,1),opacity .22s ease}
  .snd-modal.open{transform:translateY(0)}

  /* PiP button — no PiP on mobile */
  .pip-trigger{display:none}

  /* Focus center: restore centering (920px block set flex-start) */
  .focus-center{justify-content:center}

  /* Mode presets: compact horizontal rows */
  .mode-presets,.mode-presets--wide{grid-template-columns:1fr 1fr;gap:6px}
  .mode-preset-card{min-height:0;padding:10px 12px;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;text-align:left;border-radius:12px;transform:none!important}
  .mode-preset-icon{font-size:18px;flex-shrink:0;line-height:1}
  .mode-preset-name{font-size:12px}
  .mode-preset-times{font-size:10px;margin:0;line-height:1.3}

  /* Mode pills */
  .mode-pill-wrap{flex-wrap:wrap;justify-content:center}
  .mode-pill{padding:8px 14px;font-size:12px}
}

/* ── 480px: most phones portrait ── */
@media(max-width:480px){
  .settings-pane{padding:16px 12px 80px}
  .snav-item{font-size:11.5px;padding:6px 12px}

  /* Stats */
  .stats-today-grid{grid-template-columns:1fr 1fr}

  /* Font/theme pickers 2-col */
  .font-style-grid{grid-template-columns:repeat(2,1fr)}

  /* Prevent iOS zoom on input focus — font-size must be ≥16px */
  input,textarea,select{font-size:16px!important}
}

/* ══ Settings polish ══ */
#view-settings{position:relative;isolation:isolate;background:linear-gradient(180deg,rgba(255,255,255,.01) 0%,rgba(255,255,255,0) 100%)}
#view-settings::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.18;background:linear-gradient(180deg,rgba(255,255,255,.015),transparent 40%)}
.settings-shell{grid-template-columns:240px minmax(0,1fr);min-height:100%;position:relative}
.settings-nav{position:relative;background:rgba(14,13,11,.58);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-right:1px solid var(--border);padding:24px 12px 18px;box-shadow:none}
.settings-nav::after{display:none}
.snav-brand{padding:4px 8px 20px}
.snav-logo{font-size:24px;letter-spacing:-.6px}
.snav-tagline{font-size:10px;letter-spacing:2.4px;opacity:.34}
.snav-list{gap:6px}
.snav-item{position:relative;padding:12px 14px;border-radius:14px;font-size:13px;color:var(--cream2);background:transparent;border:1px solid transparent;box-shadow:none;transition:background .18s,border-color .18s,color .18s}
.snav-item:hover{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.04);color:var(--cream);transform:none}
.snav-item.active{background:rgba(var(--accent-rgb),.08);border-color:rgba(var(--accent-rgb),.14);color:var(--cream);box-shadow:none}
.snav-item.active::before{display:none}
.snav-footer{padding:18px 8px 2px;font-size:10px;line-height:1.6;opacity:.26}
.settings-panes{position:relative;padding:28px 32px 40px}
.settings-panes::before{display:none}
.settings-pane{max-width:1120px;width:100%;padding:0;margin:0 auto}
.spane-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:start}
.focus-settings-grid{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.sgroup--hero{padding:24px 24px 18px}
.sgroup--goal{background:linear-gradient(180deg,rgba(var(--accent-rgb),.08) 0%,rgba(255,255,255,.02) 100%);border-color:rgba(var(--accent-rgb),.16)}
.mode-presets--wide{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(min-width:601px){.mode-preset-card{justify-content:center}}
.mode-preset-card.active .mode-preset-name{color:var(--amber)}
.setting-row--feature{background:rgba(var(--accent-rgb),.05);border-color:rgba(var(--accent-rgb),.08)}
.setting-row--feature:hover{background:rgba(var(--accent-rgb),.08);border-color:rgba(var(--accent-rgb),.16)}
.spane-header{position:relative;margin-bottom:20px;padding:22px 24px;border:1px solid rgba(255,255,255,.05);border-radius:22px;background:rgba(255,255,255,.02);box-shadow:none;overflow:hidden}
.spane-header::before,.spane-header::after{display:none}
.spane-header--hero{padding:22px 24px}
.spane-kicker{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--cream3);font-weight:700}
.spane-kicker::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:none}
.spane-title{position:relative;z-index:1;font-size:clamp(24px,3vw,34px);letter-spacing:-.8px;line-height:1.06;max-width:none;text-wrap:balance}
.spane-sub{position:relative;z-index:1;margin-top:10px;font-size:13.5px;line-height:1.7;color:var(--cream3);opacity:.82;max-width:62ch}
.sgroup{grid-column:span 6;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:22px;padding:20px 20px 12px;margin-bottom:0;transition:border-color .18s,transform .18s,background .18s;box-shadow:none;position:relative;overflow:hidden}
.sgroup::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);pointer-events:none}
.sgroup::after{display:none}
.sgroup:hover{border-color:rgba(255,255,255,.08);transform:none;box-shadow:none}
.sgroup--wide{grid-column:1 / -1}
.sgroup--highlight{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.06);box-shadow:none}
.sgroup-label{font-size:10px;font-weight:700;letter-spacing:2.4px;color:var(--cream2);opacity:.82;margin-bottom:14px}
.sgroup-sub{font-size:12.5px;color:var(--cream3);opacity:.82;margin:-2px 0 16px;line-height:1.65;max-width:58ch}
.mode-presets{gap:12px}
.mode-preset-card{min-height:142px;padding:22px 12px 18px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:18px;box-shadow:none}
.mode-preset-card:hover{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.04);transform:translateY(-1px);box-shadow:none}
.mode-preset-card.active{border-color:rgba(var(--accent-rgb),.22);background:rgba(var(--accent-rgb),.08);box-shadow:none}
.mode-preset-icon{font-size:28px}
.mode-preset-name{font-size:13px}
.mode-preset-times{font-size:11px;opacity:.76}
.mode-desc{font-size:13px;color:var(--cream2);line-height:1.72;padding:14px 16px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:14px;margin-top:14px;opacity:.92;font-style:normal;box-shadow:none}
.sgroup--goal .setting-row{min-height:94px;align-items:center}
.sgroup--goal .setting-input{width:86px;font-size:18px;font-weight:600}
.sgroup--goal .setting-unit{font-size:12.5px;color:var(--cream2)}
[data-theme="default"] .sgroup--goal,
[data-theme=""] .sgroup--goal{background:linear-gradient(180deg,rgba(232,168,76,.1) 0%,rgba(255,255,255,.02) 100%);border-color:rgba(232,168,76,.18)}
[data-theme="void"] .sgroup--goal{background:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.015) 100%);border-color:rgba(255,255,255,.12)}
[data-theme="void"] .theme-swatch,
[data-theme="void"] .pip-theme-swatch,
[data-theme="void"] .font-style-card,
[data-theme="void"] .sgroup,
[data-theme="void"] .setting-row{background:#050505;border-color:rgba(255,255,255,.1)}
[data-theme="void"] .setting-row:hover{background:#0b0b0b;border-color:rgba(255,255,255,.16)}
[data-theme="paper"] .theme-swatch,
[data-theme="paper"] .pip-theme-swatch,
[data-theme="paper"] .font-style-card{background:#f4eee5;border-color:rgba(61,52,42,.14)}
[data-theme="paper"] .settings-nav{background:rgba(246,241,232,.94);border-right-color:rgba(61,52,42,.08)}
[data-theme="paper"] .snav-item{color:#5f5246}
[data-theme="paper"] .snav-item:hover{background:#ebe2d6;border-color:rgba(61,52,42,.12);color:#2f261f}
[data-theme="paper"] .snav-item.active{background:rgba(139,90,43,.12);border-color:rgba(139,90,43,.22);color:#2f261f}
[data-theme="paper"] .snav-tagline,
[data-theme="paper"] .snav-footer{color:#6b5d51;opacity:.52}
[data-theme="paper"] .sgroup{background:#f6f1e8;border-color:rgba(61,52,42,.1)}
[data-theme="paper"] .setting-row{background:#efe7dc;border-color:rgba(61,52,42,.08)}
[data-theme="paper"] .setting-row:hover{background:#ebe2d6;border-color:rgba(61,52,42,.14)}
[data-theme="paper"] .sgroup--goal{background:linear-gradient(180deg,rgba(139,90,43,.1) 0%,rgba(255,255,255,.4) 100%);border-color:rgba(139,90,43,.2)}
[data-theme="paper"] .mode-desc{background:#efe7dc;border-color:rgba(61,52,42,.08);color:#3d342a}
html[data-theme="paper"] .theme-name{color:#1a150e}
html[data-theme="paper"] .theme-tag{color:#65584d;opacity:.88}
[data-theme="paper"] .theme-swatch[data-theme="void"] .theme-name{color:#1a150e}
[data-theme="paper"] .theme-swatch[data-theme="void"] .theme-tag{color:#5f5246;opacity:.88}
.theme-swatch[data-theme="paper"] .theme-name,.theme-swatch[data-theme="mist"] .theme-name{color:var(--cream2)}
.theme-swatch[data-theme="paper"] .theme-tag,.theme-swatch[data-theme="mist"] .theme-tag{color:var(--cream3);opacity:1}
[data-theme="paper"] .fsc-name{color:#5f5246;border-top-color:rgba(61,52,42,.1)}
[data-theme="paper"] .setting-input{background:#f9f4ec;border-color:rgba(61,52,42,.14);color:#1a150e}
[data-theme="paper"] .setting-unit{color:#5f5246}
[data-theme="paper"] .mode-preset-card{background:#efe7dc;border-color:rgba(61,52,42,.1)}
[data-theme="paper"] .mode-preset-card:hover{background:#ebe2d6;border-color:rgba(61,52,42,.16)}
[data-theme="paper"] .mode-preset-card.active{background:rgba(139,90,43,.12);border-color:rgba(139,90,43,.22)}
[data-theme="paper"] .mode-preset-name{color:#1a150e}
[data-theme="paper"] .mode-preset-times{color:#65584d;opacity:.9}
[data-theme="paper"] .spane-header{background:#f6f1e8;border-color:rgba(61,52,42,.1)}
[data-theme="paper"] .spane-kicker{background:#efe7dc;border-color:rgba(61,52,42,.08);color:#5f5246}
[data-theme="paper"] .spane-sub{color:#5f5246}
[data-theme="paper"] .toggle-slider{background:#ddd3c4;border-color:rgba(61,52,42,.12)}
[data-theme="paper"] .toggle input:checked+.toggle-slider::before{background:#f6f1e8}
[data-theme="paper"] .setting-btn-small{background:#efe7dc;border-color:rgba(61,52,42,.12);color:#5f5246}
[data-theme="paper"] .setting-btn-small:hover{background:#e6ddd0;border-color:rgba(61,52,42,.18);color:#2f261f}
[data-theme="void"] .mode-desc{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08);color:rgba(255,255,255,.82)}
[data-theme="void"] .theme-name,.theme-preview--void .tp-time{color:#fff}
[data-theme="void"] .theme-tag{color:rgba(255,255,255,.64);opacity:1}
[data-theme="void"] .fsc-name{color:rgba(255,255,255,.7);border-top-color:rgba(255,255,255,.08)}
[data-theme="void"] .setting-input{background:#0b0b0b;border-color:rgba(255,255,255,.12);color:#fff}
[data-theme="void"] .setting-unit{color:rgba(255,255,255,.72)}
[data-theme="void"] .mode-preset-times{color:rgba(255,255,255,.7);opacity:1}
[data-theme="void"] .mode-preset-name{color:#fff}
[data-theme="void"] .spane-header{background:#050505;border-color:rgba(255,255,255,.1)}
[data-theme="void"] .spane-kicker{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);color:rgba(255,255,255,.78)}
[data-theme="void"] .spane-sub{color:rgba(255,255,255,.72)}
[data-theme="void"] .toggle-slider{background:#1a1a1a;border-color:rgba(255,255,255,.1)}
[data-theme="void"] .toggle input:checked+.toggle-slider::before{background:#000}
[data-theme="void"] .setting-btn-small{background:#0b0b0b;border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.72)}
[data-theme="void"] .setting-btn-small:hover{background:#111;border-color:rgba(255,255,255,.18);color:#fff}
[data-theme="void"] #view-settings{background:#000}
[data-theme="void"] #view-settings::before{opacity:0}
[data-theme="void"] .settings-nav{background:#050505;border-right-color:rgba(255,255,255,.12)}
[data-theme="void"] .sgroup--goal{background:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.015) 100%);border-color:rgba(255,255,255,.14)}
[data-theme="void"] .mode-desc{background:#090909;border-color:rgba(255,255,255,.1);color:rgba(255,255,255,.82)}
[data-theme="void"] .theme-swatch.active,
[data-theme="void"] .pip-theme-swatch.active,
[data-theme="void"] .font-style-card.active{border-color:rgba(255,255,255,.24);box-shadow:0 0 0 1px rgba(255,255,255,.08)}
[data-theme="void"] .theme-swatch.active .theme-name,
[data-theme="void"] .pip-theme-swatch.active .theme-name,
[data-theme="void"] .font-style-card.active .fsc-name{color:#fff}
[data-theme="void"] .theme-swatch.active .theme-tag,
[data-theme="void"] .pip-theme-swatch.active .theme-tag{color:rgba(255,255,255,.72)}
[data-theme="void"] .theme-preview--void{background:linear-gradient(160deg,#020202 0%,#111 100%);color:#fff}
[data-theme="void"] .theme-preview--void .tp-ring{border-color:rgba(255,255,255,.72);box-shadow:0 0 0 1px rgba(255,255,255,.08)}
[data-theme="void"] .theme-preview--void .tp-time{color:#fff}
[data-theme="void"] .task-add-btn{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.76)}
[data-theme="void"] .task-add-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
[data-theme="void"] .task-row.priority{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
[data-theme="void"] .task-row.priority:hover{background:rgba(255,255,255,.07)}
[data-theme="void"] .task-row.priority:not(.done) .chk-box-outline{fill:rgba(255,255,255,.05)}
[data-theme="void"] .note-capture-wrap:focus-within{border-color:rgba(255,255,255,.18);box-shadow:0 0 0 4px rgba(255,255,255,.04)}
[data-theme="void"] .note-capture-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff}
[data-theme="void"] .note-capture-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24)}
[data-theme="void"] .note-filter-btn.active{border-color:rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.06)}
[data-theme="void"] .note-item.pinned{border-color:rgba(255,255,255,.14);box-shadow:none}
[data-theme="void"] .note-pin-btn.pinned,
[data-theme="void"] .note-item.pinned .note-pin-btn,
[data-theme="void"] .note-pin-btn:hover{color:#fff}
[data-theme="void"] .stats-tile--streak{border-color:rgba(255,255,255,.14)}
[data-theme="void"] .stats-score-num,
[data-theme="void"] .stats-tile-val.amber,
[data-theme="void"] .stats-pr-val.amber,
[data-theme="void"] .stats-peak-time,
[data-theme="void"] .stat-n.amber,
[data-theme="void"] .sday.on,
[data-theme="void"] .sday-labels span.cur-day,
[data-theme="void"] .hm-cell--today,
[data-theme="void"] .rank-step--active .rank-step-label{color:#fff}
[data-theme="void"] .rank-step--active .rank-step-icon{filter:none}
[data-theme="void"] .theme-swatch[data-theme="void"] .theme-name,
[data-theme="void"] .theme-swatch[data-theme="void"] .theme-tag{color:#fff;opacity:1}
[data-theme="mist"] #view-settings{background:linear-gradient(180deg,rgba(228,236,245,.5) 0%,rgba(219,228,239,.16) 100%)}
[data-theme="mist"] #view-settings::before{opacity:.34;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 42%)}
[data-theme="mist"] .settings-nav{background:#c9d4e0;border-right-color:rgba(33,58,92,.12)}
[data-theme="mist"] .sgroup{background:#dde5ee;border-color:rgba(33,58,92,.12)}
[data-theme="mist"] .sgroup--highlight{background:#e4ebf2;border-color:rgba(33,58,92,.14)}
[data-theme="mist"] .sgroup--goal{background:linear-gradient(180deg,rgba(65,90,129,.08) 0%,#dde5ee 100%);border-color:rgba(65,90,129,.16)}
[data-theme="mist"] .setting-row{background:#d7e0ea;border-color:rgba(33,58,92,.12)}
[data-theme="mist"] .setting-row:hover{background:#e1e8f0;border-color:rgba(33,58,92,.18)}
[data-theme="mist"] .mode-desc{background:#d7e0ea;border-color:rgba(33,58,92,.12);color:#41566f}
html[data-theme="mist"] .theme-name,.theme-preview--mist .tp-time{color:#20324d}
[data-theme="mist"] .theme-tag{color:#617389;opacity:1}
[data-theme="mist"] .fsc-name{color:#556980;border-top-color:rgba(33,58,92,.12)}
[data-theme="mist"] .setting-input{background:#e7edf4;border-color:rgba(33,58,92,.16);color:#16263b}
[data-theme="mist"] .setting-unit{color:#556980}
[data-theme="mist"] .mode-preset-card{background:#e1e8f0;border-color:rgba(33,58,92,.14)}
[data-theme="mist"] .mode-preset-card:hover{background:#e8eef4;border-color:rgba(33,58,92,.2)}
[data-theme="mist"] .mode-preset-card.active{background:rgba(95,120,166,.12);border-color:rgba(95,120,166,.22)}
[data-theme="mist"] .mode-preset-name{color:#20324d}
[data-theme="mist"] .mode-preset-times{color:#617389;opacity:1}
[data-theme="mist"] .spane-header{background:#e1e8f0;border-color:rgba(33,58,92,.12)}
[data-theme="mist"] .spane-kicker{background:#e7edf4;border-color:rgba(33,58,92,.12);color:#556980}
[data-theme="mist"] .spane-sub{color:#556980}
[data-theme="mist"] .toggle-slider{background:#c5d1de;border-color:rgba(33,58,92,.16)}
[data-theme="mist"] .toggle input:checked+.toggle-slider::before{background:#eef3f8}
[data-theme="mist"] .setting-btn-small{background:#e1e8f0;border-color:rgba(33,58,92,.14);color:#556980}
[data-theme="mist"] .setting-btn-small:hover{background:#e9eff5;border-color:rgba(33,58,92,.2);color:#16263b}
[data-theme="mist"] .theme-swatch.active,
[data-theme="mist"] .pip-theme-swatch.active,
[data-theme="mist"] .font-style-card.active{border-color:rgba(65,90,129,.3);box-shadow:0 0 0 1px rgba(65,90,129,.14)}
[data-theme="mist"] .theme-swatch.active .theme-name,
[data-theme="mist"] .pip-theme-swatch.active .theme-name,
[data-theme="mist"] .font-style-card.active .fsc-name{color:#415a81}
[data-theme="mist"] .theme-swatch.active .theme-tag,
[data-theme="mist"] .pip-theme-swatch.active .theme-tag{color:#5a7195;opacity:1}
.theme-grid,.pip-theme-grid{gap:14px}
.theme-swatch,.pip-theme-swatch{min-width:148px;max-width:none;border-radius:18px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.012);box-shadow:none}
.theme-swatch:hover,.pip-theme-swatch:hover{border-color:rgba(255,255,255,.1);transform:translateY(-2px);box-shadow:none}
.theme-swatch.active,.pip-theme-swatch.active{border-color:rgba(var(--accent-rgb),.22);box-shadow:none}
.theme-preview,.pip-theme-preview{height:108px}
.theme-name{font-size:12.5px;padding:10px 0 4px}
.theme-tag{padding:0 10px 12px;font-size:11px}
.font-style-grid{gap:12px}
.font-style-card{border-radius:16px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.015);box-shadow:none}
.font-style-card:hover{border-color:rgba(255,255,255,.1);transform:translateY(-1px)}
.font-style-card.active{border-color:rgba(var(--accent-rgb),.22);box-shadow:none}
[data-theme="mist"] .theme-swatch,
[data-theme="mist"] .pip-theme-swatch,
[data-theme="mist"] .font-style-card{background:#e1e8f0;border-color:rgba(33,58,92,.14)}
[data-theme="mist"] .theme-swatch:hover,
[data-theme="mist"] .pip-theme-swatch:hover,
[data-theme="mist"] .font-style-card:hover{background:#e9eff5;border-color:rgba(33,58,92,.2)}
[data-theme="mist"] .theme-swatch.active,
[data-theme="mist"] .pip-theme-swatch.active,
[data-theme="mist"] .font-style-card.active{border-color:rgba(65,90,129,.3)}
[data-theme="mist"] .theme-preview--mist{background:linear-gradient(165deg,#d3dde8 0%,#c7d2df 52%,#bcc8d6 100%);color:#415a81}
[data-theme="mist"] .theme-preview--mist::before{background:radial-gradient(circle at 24% 18%,rgba(255,255,255,.24) 0%,rgba(255,255,255,0) 30%),radial-gradient(circle at 78% 76%,rgba(65,90,129,.12) 0%,rgba(65,90,129,0) 42%)}
[data-theme="mist"] .theme-preview--mist .tp-ring{border-color:#415a81;box-shadow:0 0 0 1px rgba(65,90,129,.12)}
[data-theme="mist"] .theme-preview--mist .tp-time{color:#16263b}
[data-theme="mist"] .pip-companion-btn.active{border-color:rgba(65,90,129,.3)!important;color:#16263b;background:rgba(65,90,129,.08)}
[data-theme="mist"] .task-add-btn{background:rgba(65,90,129,.08);border-color:rgba(65,90,129,.2);color:#41566f}
[data-theme="mist"] .task-add-btn:hover{background:rgba(65,90,129,.12);border-color:rgba(65,90,129,.32);color:#16263b}
[data-theme="mist"] .task-row.priority{background:rgba(65,90,129,.07);border-color:rgba(65,90,129,.16)}
[data-theme="mist"] .task-row.priority:hover{background:rgba(65,90,129,.11)}
[data-theme="mist"] .task-row.priority:not(.done) .chk-box-outline{fill:rgba(65,90,129,.06)}
[data-theme="mist"] .task-add-btn,
[data-theme="mist"] .task-row.priority,
[data-theme="mist"] .task-row.priority:hover,
[data-theme="mist"] .notes-capture-card,
[data-theme="mist"] .note-item--thought,
[data-theme="mist"] .note-group--pinned{background-image:none}
[data-theme="mist"] .notes-capture-card{background:linear-gradient(180deg,rgba(65,90,129,.06) 0%,rgba(255,255,255,.01) 100%),var(--ink2)}
[data-theme="mist"] .note-capture-wrap:focus-within{border-color:rgba(65,90,129,.3);box-shadow:0 0 0 4px rgba(65,90,129,.08);background:rgba(255,255,255,.04)}
[data-theme="mist"] .note-capture-btn{background:rgba(65,90,129,.1);border-color:rgba(65,90,129,.24);color:#415a81}
[data-theme="mist"] .note-capture-btn:hover{background:rgba(65,90,129,.16);border-color:rgba(65,90,129,.38)}
[data-theme="mist"] .timer-context-center--active{filter:drop-shadow(0 8px 24px rgba(65,90,129,.12))}
[data-theme="mist"] .timer-context-center--active em{text-shadow:0 0 14px rgba(65,90,129,.1)}
[data-theme="mist"] .timer-card::before{background:radial-gradient(circle,rgba(88,113,150,.1) 0%,transparent 65%)}
[data-theme="mist"] .bar-fill,
[data-theme="mist"] .fs-bar-fill,
[data-theme="mist"] .stats-rank-bar{background:linear-gradient(90deg,#31486c,#415a81)}

[data-theme="mist"] .fs-overlay::before{background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(88,113,150,.08) 0%,transparent 65%)}
[data-theme="mist"] .complete-flash.show{animation:flashAnimMist .8s ease}
[data-theme="mist"] .stats-tile--streak{border-color:rgba(65,90,129,.18)}
[data-theme="mist"] .note-item.pinned{border-color:rgba(65,90,129,.2);box-shadow:0 12px 26px rgba(65,90,129,.08),0 10px 20px rgba(0,0,0,.08)}
[data-theme="mist"] .note-item--thought{background:linear-gradient(180deg,rgba(65,90,129,.05) 0%,rgba(255,255,255,.015) 100%),var(--ink2)}
[data-theme="mist"] .note-group--pinned{border-color:rgba(65,90,129,.16);background:linear-gradient(180deg,rgba(65,90,129,.04) 0%,rgba(255,255,255,.01) 100%),var(--ink)}
[data-theme="mist"] .note-group--thought{border-color:rgba(65,90,129,.1)}
[data-theme="mist"] .note-group-hdr--pinned{border-bottom-color:rgba(65,90,129,.2)}
[data-theme="mist"] .sday.today{box-shadow:0 0 6px rgba(65,90,129,.28)}
[data-theme="mist"] .habits-add-btn:hover{border-color:#415a81;color:#415a81}
[data-theme="mist"] .habit-item{background:#dde5ee;border-color:rgba(33,58,92,.12);box-shadow:0 8px 18px rgba(66,86,116,.06)}
[data-theme="mist"] .habit-item:hover{background:#e5ecf3;border-color:rgba(33,58,92,.18)}
[data-theme="mist"] .habit-item--partial{border-color:rgba(65,90,129,.18);background:linear-gradient(180deg,rgba(65,90,129,.05) 0%,transparent 100%),#dde5ee}
[data-theme="mist"] .habit-step-btn:hover{border-color:rgba(65,90,129,.4);color:#415a81}
[data-theme="mist"] .habit-step-fill{background:#415a81}
[data-theme="mist"] .habits-momentum-card{background:linear-gradient(180deg,rgba(65,90,129,.06) 0%,rgba(255,255,255,.02) 100%),#dde5ee;box-shadow:0 10px 24px rgba(66,86,116,.08)}
[data-theme="mist"] .habits-momentum-fill{background:linear-gradient(90deg,#31486c,#415a81)}
[data-theme="mist"] .hm-cell--today,
[data-theme="mist"] .stats-heatmap .hm-cell--today{outline-color:#415a81}
[data-theme="mist"] .habit-hm-row{background:#dde5ee;border-color:rgba(33,58,92,.12);box-shadow:0 6px 16px rgba(66,86,116,.06)}
[data-theme="mist"] .habit-hm-row:hover{border-color:rgba(33,58,92,.18);box-shadow:0 8px 18px rgba(66,86,116,.08)}
[data-theme="mist"] .habit-hm-streak{color:#415a81}
[data-theme="mist"] #habitHeatmaps .hm-cell--future{background:var(--hm-future)!important}
[data-theme="mist"] .hicon-btn.active{border-color:#415a81;background:rgba(65,90,129,.1)}
[data-theme="mist"] .habit-custom-icon-input:focus,
[data-theme="mist"] .habit-modal-name:focus,
[data-theme="mist"] .habit-measure-input:focus,
[data-theme="mist"] .habit-measure-select:focus{border-color:rgba(65,90,129,.38)}
[data-theme="mist"] .habit-modal-save{background:#415a81;color:#eef3f8}
@keyframes flashAnimMist{0%{opacity:0;background:rgba(65,90,129,0)}30%{opacity:1;background:rgba(65,90,129,.08)}100%{opacity:0;background:rgba(65,90,129,0)}}
.fsc-preview{min-height:74px;padding:20px 10px 14px}
.fsc-name{padding:8px 6px 10px;font-size:11px}
.pip-companion-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,140px));gap:12px;align-items:stretch;justify-content:flex-start}
.pip-companion-btn{min-width:0;padding:9px;border-radius:16px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);color:var(--cream2);display:flex;flex-direction:column;align-items:stretch;gap:8px;text-align:left}
.pip-companion-btn:hover{border-color:rgba(255,255,255,.1);color:var(--cream);transform:none}
.pip-companion-btn.active{border-color:rgba(var(--accent-rgb),.22)!important;color:var(--cream);background:rgba(var(--accent-rgb),.07);box-shadow:none}
.pip-companion-preview{display:flex;align-items:center;justify-content:center;height:84px;border-radius:12px;background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.09),transparent 60%),rgba(255,255,255,.03);overflow:hidden;padding:6px}
.pip-companion-preview video,.pip-companion-preview canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pip-companion-preview-lottie{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.pip-companion-preview-lottie.is-invert{filter:invert(1)}
.pip-companion-preview-lottie canvas{max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important}
.pip-companion-name{font-size:12px;line-height:1.35;color:inherit}
.settings-grid{display:flex;flex-direction:column;gap:8px}
.setting-row{position:relative;padding:16px 16px;border-radius:16px;border:1px solid transparent;border-bottom:none;background:rgba(255,255,255,.012)}
.setting-row::before{display:none}
.setting-row:hover{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.05);transform:none}
.setting-label{font-size:14px}
.setting-sub{font-size:12.5px;opacity:.74;max-width:52ch}
.setting-ctrl{gap:10px}
.setting-select{min-width:176px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:9px 34px 9px 11px;color:var(--cream);font-family:'Instrument Sans',sans-serif;font-size:13px;outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a09070' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.setting-select:focus{border-color:rgba(var(--accent-rgb),.3);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08);background-color:rgba(255,255,255,.04)}
.setting-input,.settings-code-input{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:9px 11px;color:var(--cream)}
.settings-code-input{flex:1;font-size:12px;font-family:monospace;min-width:0}
.setting-input:focus,.settings-code-input:focus{border-color:rgba(var(--accent-rgb),.3);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08);background:rgba(255,255,255,.04);outline:none}
.setting-btn-small,.setting-btn-danger{border-radius:10px;padding:8px 13px;font-size:12px}
.setting-btn-small{background:rgba(255,255,255,.015)}
.setting-btn-small:hover{background:rgba(255,255,255,.03)}
.settings-inline-row{display:flex;gap:10px;margin-top:10px;align-items:center;width:100%}
.settings-inline-msg{font-size:11px;opacity:.6;min-width:44px}
.toggle{width:44px;height:24px}
.toggle-slider{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.05);border-radius:999px;box-shadow:none}
.toggle-slider::before{width:16px;height:16px;left:3px;top:3px;background:var(--cream);box-shadow:none}
.toggle input:checked+.toggle-slider{background:rgba(var(--accent-rgb),.9);border-color:rgba(var(--accent-rgb),.18)}
.toggle input:checked+.toggle-slider::before{transform:translateX(20px);background:#15120d}
.sgroup--danger{border-color:rgba(212,130,106,.22)}
.sgroup--danger::before{background:linear-gradient(90deg,transparent,rgba(212,130,106,.4),transparent)}

/* Non-default themes use neutral UI chrome here to avoid looking like Flow/default accent bleed. */
[data-theme="void"] .note-confirm-wrap,
[data-theme="mist"] .note-confirm-wrap,
[data-theme="day"] .note-confirm-wrap,
[data-theme="paper"] .note-confirm-wrap,
[data-theme="wallpaper"] .note-confirm-wrap{
  background:var(--stats-pill-bg);
  border-color:var(--stats-pill-border);
}

[data-theme="void"] .note-filter-btn.active,
[data-theme="mist"] .note-filter-btn.active,
[data-theme="day"] .note-filter-btn.active,
[data-theme="paper"] .note-filter-btn.active,
[data-theme="wallpaper"] .note-filter-btn.active,
[data-theme="void"] .bfilter.active,
[data-theme="mist"] .bfilter.active,
[data-theme="day"] .bfilter.active,
[data-theme="paper"] .bfilter.active,
[data-theme="wallpaper"] .bfilter.active{
  border-color:var(--stats-pill-border);
  background:var(--stats-pill-bg);
  color:var(--cream);
}

[data-theme="void"] .setting-input:focus,
[data-theme="mist"] .setting-input:focus,
[data-theme="day"] .setting-input:focus,
[data-theme="paper"] .setting-input:focus,
[data-theme="wallpaper"] .setting-input:focus,
[data-theme="void"] .settings-code-input:focus,
[data-theme="mist"] .settings-code-input:focus,
[data-theme="day"] .settings-code-input:focus,
[data-theme="paper"] .settings-code-input:focus,
[data-theme="wallpaper"] .settings-code-input:focus,
[data-theme="void"] .book-field:focus,
[data-theme="mist"] .book-field:focus,
[data-theme="day"] .book-field:focus,
[data-theme="paper"] .book-field:focus,
[data-theme="wallpaper"] .book-field:focus,
[data-theme="void"] .book-select:focus,
[data-theme="mist"] .book-select:focus,
[data-theme="day"] .book-select:focus,
[data-theme="paper"] .book-select:focus,
[data-theme="wallpaper"] .book-select:focus,
[data-theme="void"] .book-search-input:focus,
[data-theme="mist"] .book-search-input:focus,
[data-theme="day"] .book-search-input:focus,
[data-theme="paper"] .book-search-input:focus,
[data-theme="wallpaper"] .book-search-input:focus,
[data-theme="void"] .book-textarea:focus,
[data-theme="mist"] .book-textarea:focus,
[data-theme="day"] .book-textarea:focus,
[data-theme="paper"] .book-textarea:focus,
[data-theme="wallpaper"] .book-textarea:focus,
[data-theme="void"] .note-confirm-input:focus,
[data-theme="mist"] .note-confirm-input:focus,
[data-theme="day"] .note-confirm-input:focus,
[data-theme="paper"] .note-confirm-input:focus,
[data-theme="wallpaper"] .note-confirm-input:focus{
  border-color:var(--stats-pill-border);
  box-shadow:0 0 0 3px var(--stats-pill-bg);
}

[data-theme="void"] .bnote-field-ta:focus,
[data-theme="mist"] .bnote-field-ta:focus,
[data-theme="day"] .bnote-field-ta:focus,
[data-theme="paper"] .bnote-field-ta:focus,
[data-theme="wallpaper"] .bnote-field-ta:focus{
  border-bottom-color:var(--border2);
}
.sgroup--danger .sgroup-label{color:var(--rose,#d4826a)}
.sgroup--danger .sgroup-label::before{background:linear-gradient(90deg,var(--rose,#d4826a),transparent)}
.credit-row{border-radius:14px;transition:background .15s,transform .15s;margin:0 -8px;padding:12px 10px}
.credit-row:hover{background:rgba(255,255,255,.035);transform:translateX(2px)}
.about-sgroup{text-align:center}
.about-row{flex-direction:column;align-items:center;gap:10px;padding:14px 0 8px;text-align:center}
.about-logo{font-size:38px;letter-spacing:-.9px}
.about-meta{display:flex;flex-direction:column;gap:5px;align-items:center}
.about-tagline{font-size:14px;color:var(--cream2);opacity:.68;font-style:italic;font-family:'Playfair Display',serif}
.about-desc{font-size:11px;color:var(--cream3);opacity:.38;letter-spacing:.08em}
@media(max-width:1100px){.spane-grid{grid-template-columns:repeat(8,minmax(0,1fr))}.sgroup{grid-column:span 4}.sgroup--wide{grid-column:1 / -1}.mode-presets--wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){#view-settings{background:linear-gradient(180deg,rgba(255,255,255,.01),rgba(255,255,255,0))}.settings-shell{grid-template-columns:1fr;height:auto;overflow:visible}.settings-nav{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;border-right:none;border-bottom:1px solid rgba(255,255,255,.06);padding:12px 16px;gap:8px;background:rgba(14,13,11,.82);position:sticky;top:0;z-index:10;flex-shrink:0;backdrop-filter:blur(18px);-webkit-overflow-scrolling:touch}.settings-nav::after{display:none}.settings-nav::-webkit-scrollbar{display:none}.snav-brand,.snav-divider,.snav-footer{display:none}.snav-list{flex-direction:row;gap:6px;flex:unset}.snav-item{white-space:nowrap;padding:9px 14px;border-radius:999px;font-size:12px;transform:none!important}.settings-panes{padding:18px 16px 26px;overflow-x:hidden}.settings-pane{padding:0;max-width:100%}.spane-grid,.focus-settings-grid{grid-template-columns:1fr;gap:14px}.sgroup{grid-column:1 / -1}.spane-header{padding:24px 22px 22px;border-radius:24px}.spane-header--hero{padding:28px 24px 24px}.spane-title{font-size:clamp(24px,7vw,38px);max-width:14ch}.spane-sub{font-size:14px;max-width:none}.mode-presets--wide{grid-template-columns:repeat(2,minmax(0,1fr))}.sgroup--goal .setting-row{min-height:0}}
@media(max-width:600px){.settings-panes{padding:14px 12px 24px}.spane-header{padding:20px 18px 18px;border-radius:22px}.spane-header--hero{padding:22px 18px 18px}.spane-kicker{font-size:9px;letter-spacing:2.4px;padding:7px 12px}.spane-title{font-size:26px;letter-spacing:-.8px}.spane-sub{font-size:13px;line-height:1.7}.sgroup{padding:18px 16px 10px;border-radius:22px}.mode-presets,.mode-presets--wide{grid-template-columns:1fr 1fr;gap:6px}.mode-preset-card{min-height:0;padding:10px 12px;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;text-align:left;border-radius:12px}.theme-grid,.pip-theme-grid{gap:12px}.theme-swatch,.pip-theme-swatch{min-width:calc(50% - 6px)}.font-style-grid{grid-template-columns:repeat(2,1fr)}.setting-row{padding:16px 14px;flex-direction:column;align-items:flex-start}.setting-ctrl,.settings-inline-row{width:100%;justify-content:space-between;flex-wrap:wrap}.settings-code-input{width:100%}.toggle{align-self:flex-end}.sgroup--goal .setting-input{width:100%;max-width:120px}}
@media(max-width:380px){.snav-item{font-size:11px;padding:7px 10px}.mode-preset-card{min-height:0}.theme-preview,.pip-theme-preview{height:100px}}

/* ── 380px: very small phones ── */
@media(max-width:380px){
  .topbar{padding:8px 10px;gap:8px}
  .logo{font-size:18px}
  .mode-pill{padding:7px 10px;font-size:11px}
  .btn-start-center{padding:13px 24px;font-size:14px}
  .focus-center{padding:12px 10px 10px}

  .stats-today-grid{grid-template-columns:1fr}
  .snav-item{font-size:11px;padding:5px 10px}
  .drawer{height:88vh}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* FINAL OVERRIDES — keep last */
body{min-height:100vh;min-height:100svh;min-height:100dvh;height:auto}
.fs-bar,.break-overlay-bar{width:min(100%,520px)}
.break-toast{max-width:min(520px,calc(100vw - 24px));white-space:normal}

@media(max-width:920px){
  .stats-hero{align-items:flex-start;flex-direction:column}
  .stats-hero-left{width:100%}
  .stats-hero-tip{margin-left:0;max-width:none;padding-left:0;padding-top:12px;border-left:none;border-top:1px solid var(--border);width:100%}
  .stats-score-block{width:100%;padding-left:0;padding-top:18px;border-left:none;border-top:1px solid var(--border);text-align:left}
  .stats-rank-bar-wrap{max-width:none}
  .books-grid--status{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:700px){
  .topbar{padding:12px 14px;gap:10px}
  .logo{font-size:19px}
  .topbar-right{gap:8px}
  .focus-center{max-width:none;padding-inline:16px}
  .bar-track-center{width:100%}
  .controls-center,.util-row,.break-overlay-btns,.fs-controls,.habit-modal-footer,.book-modal-footer,.note-confirm-row,.note-workspace-topbar,.note-workspace-actions,.habits-topbar,.habits-topbar-left,.notes-topbar,.notes-topbar-left{flex-wrap:wrap}
  .stats-card,.settings-page,.stats-page,.habits-page,.books-page,.notes-view,.note-workspace{padding-left:16px;padding-right:16px}
  .setting-row{align-items:flex-start;flex-direction:column}
  .setting-ctrl{width:100%;justify-content:space-between;flex-wrap:wrap}
  .setting-sub{max-width:none}
  .settings-panes{padding:18px 16px 32px}
  .settings-jump{justify-content:flex-start;padding-inline:16px}
  .wallpaper-url-wrap .settings-code-input{min-width:0}
  .note-search{width:100%}
  .note-item-head{align-items:flex-start;flex-wrap:wrap}
  .stats-pr-row,.stats-history-row,.credit-row,.print-book-head{align-items:flex-start;flex-direction:column}
  .books-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .books-grid--status{grid-template-columns:repeat(2,minmax(0,1fr))}
  .books-group-row .book-card{flex-basis:136px}
  .book-pages-wrap{grid-template-columns:1fr}
  .book-modal-section,.sgroup,.habit-hm-row{padding:16px}
  .theme-swatch,.pip-theme-swatch{min-width:calc(50% - 8px);max-width:none}
}

@media(max-width:560px){
  .timer-num-center{font-size:clamp(64px,22vw,96px);letter-spacing:-3px}
  .mode-pill-wrap{display:inline-flex;flex-wrap:nowrap;margin-bottom:22px;width:fit-content;max-width:240px;padding:3px;gap:0;align-self:center}
  .mode-pill{flex:0 1 auto;text-align:center;padding:7px 13px;font-size:12px}
  .break-overlay-card{max-width:none;width:100%;padding:0 16px}
  .break-overlay-title{font-size:28px}
  .break-overlay-timer{font-size:60px}
  .break-overlay-btns{justify-content:center;flex-wrap:wrap}
  .fs-close{top:14px;right:14px}
  .fs-time{font-size:clamp(72px,24vw,120px);letter-spacing:-4px}
  .notes-capture-card{padding:14px}
  .note-capture-wrap{align-items:flex-end;flex-direction:row}
  .note-capture-btn{width:34px;height:34px;flex-shrink:0}
  .stats-today-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats-card{padding:16px}
  .stats-mini-stat{font-size:18px}
  .stats-heatmap-shell,#habitHeatmaps .stats-heatmap-shell{grid-template-columns:1fr}
  .hm-day-labels,.hm-week-labels{display:none}
  .hm-month-labels{margin-bottom:8px}
  .book-modal-inner,.habit-modal-inner,.snd-modal{width:100%;max-width:100%;border-radius:20px 20px 0 0}
  .habit-modal-footer>*,.book-modal-footer>*{flex:1 1 auto}
}

@media(max-width:420px){
  .topbar{padding:10px 12px}
  .theme-grid,.pip-theme-grid,.font-style-grid{gap:10px}
  .theme-swatch,.pip-theme-swatch,.font-style-card{min-width:calc(50% - 6px)}
  .books-grid,.books-grid--status,.mode-presets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .book-card-backdrop-inner{padding:10px}
  .mode-pill-wrap{display:inline-flex;flex-wrap:nowrap;width:min(100%,280px)}
  .mode-pill{flex:1 1 0;padding:9px 10px}
}

/* Final responsive polish: keep desktop look, fit smaller screens cleanly */
@media(max-width:900px){
  .stats-hero{flex-direction:column;align-items:stretch}
  .stats-hero-left{width:100%;flex-wrap:wrap}
  .stats-hero-tip,
  .stats-score-block{
    width:100%;
    max-width:none;
    margin-left:0;
    padding-left:0;
    padding-top:16px;
    border-left:none;
    border-top:1px solid var(--border);
    text-align:left;
  }
  .stats-rank-bar-wrap{max-width:none}
  .stats-two-col{flex-direction:column}
  .spane-grid,
  .focus-settings-grid{grid-template-columns:1fr}
  .sgroup{grid-column:1 / -1}
}

@media(max-width:700px){
  .topbar{grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
  .topbar-right{min-width:auto;justify-self:end}
  .focus-center{
    justify-content:flex-start;
    min-height:calc(100dvh - 56px);
    padding:24px 16px 20px;
  }
  .mode-pill-wrap{max-width:100%;margin-bottom:28px}
  .bar-track-center{width:min(100%,420px)}
  .timer-context-center,
  .focus-quote{max-width:100%}
  .notes-toolbar{align-items:stretch}
  .note-filters,
  .books-filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .note-filters::-webkit-scrollbar,
  .books-filters::-webkit-scrollbar{display:none}
  .note-search{width:100%}
}

@media(max-width:560px){
  .controls-center,
  .util-row{
    width:min(100%,420px);
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .btn-start-center{
    flex:1 1 100%;
    justify-content:center;
    order:1;
  }
  .btn-sm-center,
  .btn-tasks-toggle{
    flex:1 1 calc(50% - 5px);
    order:2;
  }
  .pip-trigger,
  .ambiance-btn{
    flex:1 1 calc(50% - 5px);
  }
  .btn-sm-center,
  .btn-tasks-toggle,
  .pip-trigger,
  .ambiance-btn{
    width:auto;
    min-width:0;
    justify-content:center;
  }
  .btn-tasks-toggle{
    background:transparent;
    color:var(--cream3);
    border-color:var(--border);
    box-shadow:none;
    padding:10px 14px;
  }
  .btn-sm-center{padding:10px 14px}
  .btn-tasks-toggle:hover{color:var(--cream2)}
  .break-overlay-btns{
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }
  .break-toast{display:none!important}
}

@media(max-width:420px){
  .controls-center{flex-direction:row;align-items:center}
  .util-row{flex-direction:column}
  .controls-center .btn-sm-center,
  .controls-center .btn-tasks-toggle{flex-basis:calc(50% - 5px)}
  .pip-trigger,
  .ambiance-btn{flex-basis:100%}
  .btn-tasks-toggle,
  .btn-sm-center{width:auto}
  .stats-today-grid{grid-template-columns:1fr}
  .theme-swatch,
  .pip-theme-swatch,
  .font-style-card{min-width:0}
}

/* ── Gilded — amber luxe dark ─────────────────────────────────────────────── */
[data-theme="gilded"]{
  --ink:#120d08;--ink2:#1b140e;--ink3:#241b13;--ink4:#302419;--ink5:#413120;
  --amber:#f1b24f;--amber-dim:#cf8f2a;--amber-soft:rgba(241,178,79,.14);
  --accent-rgb:241,178,79;
  --cream:#f7ead2;--cream2:#d7bf95;--cream3:#9d8259;
  --green:#86aa70;--green-soft:rgba(134,170,112,.12);--rose:#cf8260;
  --border:rgba(241,178,79,.12);--border2:rgba(241,178,79,.2);
  --shadow:0 12px 28px rgba(0,0,0,.28);--shadow-lg:0 24px 64px rgba(0,0,0,.42);
  --hm-empty:rgba(241,178,79,.08);--hm-level-1:rgba(241,178,79,.24);--hm-level-2:rgba(241,178,79,.42);--hm-level-3:rgba(241,178,79,.66);--hm-level-4:rgba(241,178,79,.92);--hm-future:rgba(241,178,79,.08);--hm-out:rgba(255,255,255,.05);--hm-cell-border:rgba(241,178,79,.12);--hm-grid-line:rgba(241,178,79,.08);--hm-hover-ring:rgba(241,178,79,.22);--hm-tooltip-bg:rgba(18,13,8,.96);--hm-tooltip-text:#f7ead2;--stats-pill-bg:rgba(241,178,79,.08);--stats-pill-border:rgba(241,178,79,.14);
}
[data-theme="gilded"] body{background-color:#120d08;color:#f7ead2}
[data-theme="gilded"] body::before{background:radial-gradient(ellipse 60% 56% at 18% 10%,rgba(241,178,79,.1) 0%,transparent 58%),radial-gradient(ellipse 44% 60% at 82% 84%,rgba(171,108,38,.08) 0%,transparent 55%)}
[data-theme="gilded"] body::after{opacity:.32}
[data-theme="gilded"] .topbar{background:rgba(18,13,8,.9);border-bottom-color:rgba(241,178,79,.1)}
[data-theme="gilded"] .topbar-nav{background:rgba(30,22,15,.96);border-color:rgba(241,178,79,.12)}
[data-theme="gilded"] .logo em{color:#f1b24f}
[data-theme="gilded"] .tnav{color:#b7996d}
[data-theme="gilded"] .tnav.active{background:rgba(241,178,79,.12);color:#f7ead2;box-shadow:none}
[data-theme="gilded"] .tnav:hover:not(.active){color:#f0d4aa}
[data-theme="gilded"] .icon-btn,[data-theme="gilded"] .topbar-icon,[data-theme="gilded"] .drawer-close,[data-theme="gilded"] .pip-trigger,[data-theme="gilded"] .ambiance-btn{background:rgba(38,28,19,.92);border-color:rgba(241,178,79,.12);color:#c9ab7d;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
[data-theme="gilded"] .icon-btn:hover,[data-theme="gilded"] .topbar-icon:hover,[data-theme="gilded"] .drawer-close:hover,[data-theme="gilded"] .pip-trigger:hover,[data-theme="gilded"] .ambiance-btn:hover{background:rgba(47,34,22,.96);border-color:rgba(241,178,79,.22);color:#f2d7ae}
[data-theme="gilded"] .topbar-icon.active-icon,[data-theme="gilded"] .ambiance-btn.active-icon{background:rgba(241,178,79,.14);border-color:rgba(241,178,79,.3);color:#f1b24f;box-shadow:none}
[data-theme="gilded"] .nav-burger{border-color:rgba(241,178,79,.14);background:radial-gradient(circle at 50% 35%,rgba(255,225,170,.14),rgba(255,225,170,.04) 48%,rgba(241,178,79,.06) 100%),rgba(30,22,15,.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 26px rgba(0,0,0,.28)}
[data-theme="gilded"] .nav-burger:hover{border-color:rgba(241,178,79,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 30px rgba(0,0,0,.3),0 0 0 1px rgba(241,178,79,.08)}
[data-theme="gilded"] .nav-burger.active{border-color:rgba(241,178,79,.34);background:radial-gradient(circle at 50% 35%,rgba(255,225,170,.18),rgba(241,178,79,.12) 52%,rgba(241,178,79,.08) 100%),rgba(34,24,15,.98);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 34px rgba(0,0,0,.32),0 0 28px rgba(241,178,79,.12)}
[data-theme="gilded"] .nav-burger-bar{background:#ebc78d;box-shadow:none}
[data-theme="gilded"] .avatar-btn{background:rgba(241,178,79,.12);border-color:rgba(241,178,79,.28)}
[data-theme="gilded"] .card,[data-theme="gilded"] .spane-header,[data-theme="gilded"] .sgroup{background:linear-gradient(180deg,rgba(31,23,15,.96) 0%,rgba(24,18,12,.98) 100%);border-color:rgba(241,178,79,.1)}
[data-theme="gilded"] .timer-card::before{display:block;background:radial-gradient(circle,rgba(241,178,79,.12) 0%,transparent 66%);opacity:1}
[data-theme="gilded"] .mode-pill-wrap{background:rgba(34,25,17,.92);border-color:rgba(241,178,79,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 6px 24px rgba(0,0,0,.22)}
[data-theme="gilded"] .mode-pill-indicator{background:linear-gradient(135deg,rgba(241,178,79,.2) 0%,rgba(255,240,214,.06) 100%);border-color:rgba(241,178,79,.2);box-shadow:none}
[data-theme="gilded"] .mode-pill{color:rgba(247,234,210,.46)}
[data-theme="gilded"] .mode-pill.active{color:#f7ead2}
[data-theme="gilded"] .timer-num-center{color:#f7ead2}
[data-theme="gilded"] .timer-num-center.live{color:#f1b24f;text-shadow:0 0 90px rgba(241,178,79,.22)}
[data-theme="gilded"] .timer-num-center.break-live{color:#86aa70;text-shadow:0 0 90px rgba(134,170,112,.16)}
[data-theme="gilded"] .btn-start-center{background:#f1b24f;color:#1c140d;box-shadow:0 10px 24px rgba(241,178,79,.18)}
[data-theme="gilded"] .btn-start-center:hover{box-shadow:0 14px 28px rgba(241,178,79,.24)}
[data-theme="gilded"] .btn-start-center.paused{background:rgba(43,32,22,.96);color:#d7bf95;border-color:rgba(241,178,79,.14)}
[data-theme="gilded"] .btn-start-center.break-mode{background:#86aa70;box-shadow:0 12px 28px rgba(134,170,112,.18)}
[data-theme="gilded"] .btn-sm-center,[data-theme="gilded"] .btn-tasks-toggle{border-color:rgba(241,178,79,.12)}
[data-theme="gilded"] .btn-sm-center{background:rgba(36,27,18,.92);color:#c9ab7d}
[data-theme="gilded"] .btn-sm-center:hover{background:rgba(44,32,21,.96);color:#f0d4aa}
[data-theme="gilded"] .btn-tasks-toggle{background:rgba(36,27,18,.96);color:#c9ab7d;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
[data-theme="gilded"] .task-badge-count{background:#f1b24f;color:#1b130d}
[data-theme="gilded"] .bar-track-center,.fs-bar{background:rgba(241,178,79,.14)}
[data-theme="gilded"] .timer-context,[data-theme="gilded"] .timer-context-center,[data-theme="gilded"] .focus-quote{color:#cfb489;opacity:.94}
[data-theme="gilded"] .timer-context em,[data-theme="gilded"] .timer-context-center em{color:#f7ead2;--timer-context-em-base:#f7ead2}
[data-theme="gilded"] .snd-modal,[data-theme="gilded"] .habit-modal-inner,[data-theme="gilded"] .book-modal-inner,[data-theme="gilded"] .drawer{background:#17110b;border-color:rgba(241,178,79,.12)}
[data-theme="gilded"] .snd-card,[data-theme="gilded"] .setting-row,[data-theme="gilded"] .habit-item,[data-theme="gilded"] .habit-hm-row,[data-theme="gilded"] .book-field,[data-theme="gilded"] .book-select,[data-theme="gilded"] .book-search-input,[data-theme="gilded"] .setting-input,[data-theme="gilded"] .settings-code-input{background:rgba(37,28,19,.94);border-color:rgba(241,178,79,.08);color:#f7ead2}

/* ── Nocturne — midnight indigo glow ─────────────────────────────────────── */
[data-theme="nocturne"]{
  --ink:#090b14;--ink2:#101423;--ink3:#171d30;--ink4:#222946;--ink5:#2e3760;
  --amber:#9ea8ff;--amber-dim:#7683d9;--amber-soft:rgba(158,168,255,.12);
  --accent-rgb:158,168,255;
  --cream:#eef1ff;--cream2:#c8cde9;--cream3:#8f97bf;
  --green:#77c3b4;--green-soft:rgba(119,195,180,.12);--rose:#d67eb1;
  --border:rgba(158,168,255,.12);--border2:rgba(158,168,255,.18);
  --shadow:0 12px 28px rgba(0,0,0,.3);--shadow-lg:0 24px 64px rgba(0,0,0,.46);
  --hm-empty:rgba(158,168,255,.08);--hm-level-1:rgba(158,168,255,.22);--hm-level-2:rgba(158,168,255,.4);--hm-level-3:rgba(158,168,255,.62);--hm-level-4:rgba(158,168,255,.9);--hm-future:rgba(158,168,255,.08);--hm-out:rgba(255,255,255,.05);--hm-cell-border:rgba(158,168,255,.12);--hm-grid-line:rgba(158,168,255,.08);--hm-hover-ring:rgba(158,168,255,.2);--hm-tooltip-bg:rgba(9,11,20,.96);--hm-tooltip-text:#eef1ff;--stats-pill-bg:rgba(158,168,255,.08);--stats-pill-border:rgba(158,168,255,.14);
}
[data-theme="nocturne"] body{background-color:#090b14;color:#eef1ff}
[data-theme="nocturne"] body::before{background:radial-gradient(ellipse 58% 52% at 18% 10%,rgba(126,146,255,.1) 0%,transparent 56%),radial-gradient(ellipse 42% 58% at 82% 82%,rgba(143,92,196,.08) 0%,transparent 54%)}
[data-theme="nocturne"] body::after{opacity:.22}
[data-theme="nocturne"] .topbar{background:rgba(9,11,20,.9);border-bottom-color:rgba(158,168,255,.1)}
[data-theme="nocturne"] .topbar-nav{background:rgba(18,24,42,.94);border-color:rgba(158,168,255,.12)}
[data-theme="nocturne"] .logo em{color:#9ea8ff}
[data-theme="nocturne"] .tnav{color:#8f97bf}
[data-theme="nocturne"] .tnav.active{background:rgba(158,168,255,.14);color:#eef1ff;box-shadow:none}
[data-theme="nocturne"] .tnav:hover:not(.active){color:#d9def9}
[data-theme="nocturne"] .icon-btn,[data-theme="nocturne"] .topbar-icon,[data-theme="nocturne"] .drawer-close,[data-theme="nocturne"] .pip-trigger,[data-theme="nocturne"] .ambiance-btn{background:rgba(22,29,48,.92);border-color:rgba(158,168,255,.12);color:#aeb5d6;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
[data-theme="nocturne"] .icon-btn:hover,[data-theme="nocturne"] .topbar-icon:hover,[data-theme="nocturne"] .drawer-close:hover,[data-theme="nocturne"] .pip-trigger:hover,[data-theme="nocturne"] .ambiance-btn:hover{background:rgba(28,36,60,.96);border-color:rgba(158,168,255,.2);color:#eef1ff}
[data-theme="nocturne"] .topbar-icon.active-icon,[data-theme="nocturne"] .ambiance-btn.active-icon{background:rgba(158,168,255,.14);border-color:rgba(158,168,255,.28);color:#9ea8ff;box-shadow:none}
[data-theme="nocturne"] .nav-burger{border-color:rgba(158,168,255,.14);background:radial-gradient(circle at 50% 35%,rgba(206,214,255,.12),rgba(206,214,255,.04) 48%,rgba(158,168,255,.05) 100%),rgba(18,24,42,.96);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 26px rgba(0,0,0,.3)}
[data-theme="nocturne"] .nav-burger:hover{border-color:rgba(158,168,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 30px rgba(0,0,0,.32),0 0 0 1px rgba(158,168,255,.07)}
[data-theme="nocturne"] .nav-burger.active{border-color:rgba(158,168,255,.34);background:radial-gradient(circle at 50% 35%,rgba(206,214,255,.16),rgba(158,168,255,.12) 54%,rgba(158,168,255,.08) 100%),rgba(18,24,42,.98);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 16px 34px rgba(0,0,0,.34),0 0 28px rgba(158,168,255,.12)}
[data-theme="nocturne"] .nav-burger-bar{background:#dce1ff;box-shadow:none}
[data-theme="nocturne"] .avatar-btn{background:rgba(158,168,255,.12);border-color:rgba(158,168,255,.26)}
[data-theme="nocturne"] .card,[data-theme="nocturne"] .spane-header,[data-theme="nocturne"] .sgroup{background:linear-gradient(180deg,rgba(16,20,35,.96) 0%,rgba(12,16,28,.98) 100%);border-color:rgba(158,168,255,.1)}
[data-theme="nocturne"] .timer-card::before{display:block;background:radial-gradient(circle,rgba(158,168,255,.12) 0%,transparent 66%);opacity:1}
[data-theme="nocturne"] .mode-pill-wrap{background:rgba(17,22,38,.94);border-color:rgba(158,168,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 6px 24px rgba(0,0,0,.24)}
[data-theme="nocturne"] .mode-pill-indicator{background:linear-gradient(135deg,rgba(158,168,255,.18) 0%,rgba(255,255,255,.05) 100%);border-color:rgba(158,168,255,.18);box-shadow:none}
[data-theme="nocturne"] .mode-pill{color:rgba(238,241,255,.44)}
[data-theme="nocturne"] .mode-pill.active{color:#eef1ff}
[data-theme="nocturne"] .timer-num-center{color:#eef1ff}
[data-theme="nocturne"] .timer-num-center.live{color:#9ea8ff;text-shadow:0 0 96px rgba(158,168,255,.22)}
[data-theme="nocturne"] .timer-num-center.break-live{color:#77c3b4;text-shadow:0 0 96px rgba(119,195,180,.16)}
[data-theme="nocturne"] .btn-start-center{background:#9ea8ff;color:#0f1320;box-shadow:0 10px 24px rgba(158,168,255,.16)}
[data-theme="nocturne"] .btn-start-center:hover{box-shadow:0 14px 28px rgba(158,168,255,.22)}
[data-theme="nocturne"] .btn-start-center.paused{background:rgba(24,31,52,.96);color:#c8cde9;border-color:rgba(158,168,255,.14)}
[data-theme="nocturne"] .btn-start-center.break-mode{background:#77c3b4;box-shadow:0 12px 28px rgba(119,195,180,.18)}
[data-theme="nocturne"] .btn-sm-center,[data-theme="nocturne"] .btn-tasks-toggle{border-color:rgba(158,168,255,.12)}
[data-theme="nocturne"] .btn-sm-center{background:rgba(21,28,46,.92);color:#b6bddf}
[data-theme="nocturne"] .btn-sm-center:hover{background:rgba(27,35,58,.96);color:#eef1ff}
[data-theme="nocturne"] .btn-tasks-toggle{background:rgba(21,28,46,.96);color:#b6bddf;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
[data-theme="nocturne"] .task-badge-count{background:#9ea8ff;color:#0f1320}
[data-theme="nocturne"] .bar-track-center,.fs-bar{background:rgba(158,168,255,.14)}
[data-theme="nocturne"] .timer-context,[data-theme="nocturne"] .timer-context-center,[data-theme="nocturne"] .focus-quote{color:#b7bedf;opacity:.94}
[data-theme="nocturne"] .timer-context em,[data-theme="nocturne"] .timer-context-center em{color:#eef1ff;--timer-context-em-base:#eef1ff}
[data-theme="nocturne"] .snd-modal,[data-theme="nocturne"] .habit-modal-inner,[data-theme="nocturne"] .book-modal-inner,[data-theme="nocturne"] .drawer{background:#0f1320;border-color:rgba(158,168,255,.12)}
[data-theme="nocturne"] .snd-card,[data-theme="nocturne"] .setting-row,[data-theme="nocturne"] .habit-item,[data-theme="nocturne"] .habit-hm-row,[data-theme="nocturne"] .book-field,[data-theme="nocturne"] .book-select,[data-theme="nocturne"] .book-search-input,[data-theme="nocturne"] .setting-input,[data-theme="nocturne"] .settings-code-input{background:rgba(20,26,44,.94);border-color:rgba(158,168,255,.08);color:#eef1ff}

.notes-view{max-width:920px}
.notes-topbar{align-items:flex-end;gap:18px;margin-bottom:18px}
.notes-topbar-left{flex-direction:column;align-items:flex-start;gap:4px;max-width:58ch}
.notes-heading{font-size:26px;line-height:1.08;max-width:16ch}
.notes-count{font-size:11.5px;opacity:.72}
.notes-capture-card{margin-bottom:14px;padding:18px 18px 16px;border-radius:22px;border-color:rgba(var(--accent-rgb),.12);box-shadow:0 14px 28px rgba(0,0,0,.12)}
.notes-capture-title{font-size:20px}
.notes-queue-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 16px}
.notes-queue-stat{padding:12px 14px;border-radius:16px;border:1px solid var(--border);background:rgba(255,255,255,.025);display:flex;flex-direction:column;gap:4px}
.notes-queue-stat-num{font-family:'Playfair Display',serif;font-size:24px;line-height:1;color:var(--cream)}
.notes-queue-stat-lbl{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--cream3);opacity:.68}
.notes-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.notes-toolbar-copy{font-size:12.5px;line-height:1.6;color:var(--cream3);opacity:.74;max-width:44ch}
.notes-toolbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.notes-toggle-btn{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:999px;padding:7px 12px;font-family:'Instrument Sans',sans-serif;font-size:11.5px;color:var(--cream3);cursor:pointer;transition:all .18s;white-space:nowrap}
.notes-toggle-btn:hover,.notes-toggle-btn.active{border-color:rgba(var(--accent-rgb),.42);background:rgba(var(--accent-rgb),.1);color:var(--amber)}
.notes-list-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 10px;padding:0 2px}
.notes-list-title{font-family:'Playfair Display',serif;font-size:17px;line-height:1.2;color:var(--cream);opacity:.86}
.notes-list{gap:12px}
.note-group{padding:16px 16px 10px;border-radius:24px}
.note-group-name{letter-spacing:1.2px;opacity:.72}
.note-group-hdr{margin-bottom:14px}
.note-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:16px 16px 15px;margin-bottom:12px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.015) 100%),var(--ink2)}
.note-item-content{gap:8px;cursor:pointer}
.note-queue-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.note-queue-title{font-family:'Playfair Display',serif;font-size:17px;line-height:1.3;color:var(--cream);letter-spacing:-.2px}
.note-queue-pinmark{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--amber);opacity:.82;white-space:nowrap}
.note-queue-excerpt{font-size:13px;line-height:1.7;color:var(--cream3);opacity:.84;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.note-queue-excerpt--code{font-family:'Space Mono',monospace;font-size:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:10px 11px;display:block;white-space:pre-wrap}
.note-queue-link{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:var(--cream3);opacity:.72}
.note-item-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;transition:opacity .15s;align-self:flex-start}
.note-item-actions button,.note-open-link-btn{opacity:.46;background:none;border:none;cursor:pointer;padding:5px;border-radius:7px;color:var(--cream3);transition:all .15s;display:flex;align-items:center;justify-content:center;text-decoration:none}
.note-item:hover .note-item-actions button,.note-item:hover .note-open-link-btn{opacity:.82}
.note-edit-btn:hover,.note-task-btn:hover{opacity:1!important;color:var(--cream2);background:rgba(255,255,255,.06)}
.note-pin-btn.pinned,.note-item.pinned .note-pin-btn{opacity:1!important;color:var(--amber)}
.note-pin-btn:hover{opacity:1!important;color:var(--amber)}
.note-archive-btn.archived,.note-archive-btn:hover{opacity:1!important;color:var(--cream2);background:rgba(255,255,255,.06)}
.note-del-btn:hover{opacity:1!important;color:var(--rose);background:rgba(212,130,106,.1)}
.note-open-link-btn:hover{opacity:1!important;color:var(--blue);background:rgba(255,255,255,.06)}

.note-editor-sheet{position:fixed;inset:0;display:none;align-items:stretch;justify-content:stretch;z-index:520;background:var(--ink)}
.note-editor-sheet.open{display:flex}
.note-editor-sheet-backdrop{display:none}
.note-editor-sheet-panel{position:relative;z-index:1;width:100%;height:100%;padding:0;display:flex;justify-content:center;align-items:stretch}
.note-editor-sheet .note-workspace{max-width:1120px;width:100%;height:100%;padding:32px 28px 40px;gap:20px}
.note-editor-sheet .rich-note-inner--page{height:100%;border-radius:32px;overflow:hidden;box-shadow:none;border-color:rgba(var(--accent-rgb),.1);background:radial-gradient(circle at 50% 0%,rgba(var(--accent-rgb),.05),transparent 32%),linear-gradient(180deg,rgba(255,255,255,.015) 0%,rgba(255,255,255,.008) 100%),var(--ink2)}
.note-workspace-breadcrumb{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.note-workspace-kicker{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--cream3);opacity:.66}
.note-workspace-close{padding-inline:16px}
.note-settings-toggle.active{border-color:rgba(var(--accent-rgb),.42);color:var(--amber);background:rgba(var(--accent-rgb),.08)}
.rn-settings-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:16px 18px 18px;border:1px solid rgba(255,255,255,.06);border-radius:20px;background:rgba(24,23,19,.88);backdrop-filter:blur(18px)}
.rn-settings-group{display:flex;flex-direction:column;gap:10px}
.rn-settings-group--toggle{grid-template-columns:minmax(0,1fr) auto;display:grid;align-items:center;gap:14px}
.rn-settings-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--cream3);opacity:.62}
.rn-settings-help{font-size:12px;line-height:1.5;color:var(--cream3);opacity:.72}
.rn-settings-seg{display:flex;gap:8px;flex-wrap:wrap}
.rn-settings-btn{min-height:34px;padding:0 12px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.02);color:var(--cream3);font-family:'Instrument Sans',sans-serif;font-size:12px;cursor:pointer;transition:border-color .18s ease,color .18s ease,background .18s ease}
.rn-settings-btn:hover,.rn-settings-btn.active{border-color:rgba(var(--accent-rgb),.42);color:var(--amber);background:rgba(var(--accent-rgb),.08)}
.rn-settings-btn--toggle{min-width:72px;justify-self:end}
.note-editor-sheet .rn-topbar{padding:44px 56px 18px;background:none;border-bottom:none}
.note-editor-sheet .rn-topbar-main{max-width:74ch;margin:0 auto;width:100%}
.note-editor-sheet .rn-title{font-size:56px;line-height:.98;letter-spacing:-1.4px;padding-bottom:4px}
.note-editor-sheet .rn-title::placeholder{opacity:.22}
.note-editor-sheet .rn-meta-row{margin-top:18px;gap:12px}
.note-editor-sheet .rn-meta-pill{background:rgba(var(--accent-rgb),.08);border-color:rgba(var(--accent-rgb),.22)}
.note-editor-sheet .rn-meta-text{font-size:13px;opacity:.72}
.rn-intro{margin:18px 0 0;font-size:14px;line-height:1.8;color:var(--cream3);opacity:.78;max-width:58ch}
.note-editor-sheet .rn-writing-shell{padding:0 32px 36px}
.rn-writing-frame{height:100%;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.05);border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.018) 0%,rgba(255,255,255,.006) 100%),rgba(17,16,13,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.note-editor-sheet .rn-toolbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.05);background:rgba(24,23,19,.9);backdrop-filter:blur(18px)}
.rn-tool-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rn-tool-group--highlights{padding-left:2px}
.rn-tool-spacer{flex:1}
.note-editor-sheet .rn-fmt-btn{min-width:40px;height:36px;border-radius:12px;background:rgba(255,255,255,.018)}
.note-editor-sheet .rn-fmt-word{padding:0 13px;min-width:0;font-size:12px}
.note-editor-sheet .rn-fmt-btn:hover{background:rgba(255,255,255,.05)}
.note-editor-sheet .rn-hl-btn{width:28px;height:28px}
.note-editor-sheet .rn-body-wrap{flex:1;min-height:0;display:flex;flex-direction:column;padding:28px 0 20px}
.note-editor-sheet .rn-writing-label{padding:0 56px 14px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--cream3);opacity:.5}
.note-editor-sheet .rn-body{flex:1;min-height:420px;max-width:72ch;width:100%;margin:0 auto;padding:0 56px 40px;border:none;border-radius:0;background:transparent;box-shadow:none;font-size:18px;line-height:2;color:var(--cream2)}
.note-editor-sheet .rn-body:focus{color:var(--cream)}
.note-editor-sheet .rn-body:empty::before{opacity:.26}
.note-editor-sheet .rn-body b,.note-editor-sheet .rn-body strong{font-weight:700}
.note-editor-sheet .rn-body em,.note-editor-sheet .rn-body i{color:var(--cream);font-style:italic}
.note-editor-sheet .rn-body ul,.note-editor-sheet .rn-body ol{margin:0 0 1.2em 1.3em;padding:0}
.note-editor-sheet .rn-body li{margin:.3em 0}
.note-editor-sheet .rn-body blockquote{margin:1.4em 0;padding:0 0 0 1.1em;border-left:1px solid rgba(var(--accent-rgb),.28);color:var(--cream);font-style:italic}
.note-editor-sheet[data-writing-size="compact"] .rn-body{font-size:16px;line-height:1.82}
.note-editor-sheet[data-writing-size="comfortable"] .rn-body{font-size:18px;line-height:2}
.note-editor-sheet[data-writing-size="spacious"] .rn-body{font-size:20px;line-height:2.12}
.note-editor-sheet[data-writing-width="focused"] .rn-body,.note-editor-sheet[data-writing-width="focused"] .rn-topbar-main{max-width:72ch}
.note-editor-sheet[data-writing-width="wide"] .rn-body,.note-editor-sheet[data-writing-width="wide"] .rn-topbar-main{max-width:84ch}
.note-editor-sheet.is-focus-mode .note-workspace-topbar{opacity:.52}
.note-editor-sheet.is-focus-mode .rn-meta-row,.note-editor-sheet.is-focus-mode .rn-intro{display:none}
.note-editor-sheet.is-focus-mode .rn-topbar{padding-bottom:8px}

@media(max-width:700px){
  .notes-topbar{margin-bottom:18px}
  .notes-heading{font-size:24px;max-width:none}
  .notes-writing-list{grid-template-columns:1fr}
  .notes-queue-stats{grid-template-columns:1fr}
  .notes-toolbar-copy{max-width:none}
  .note-editor-sheet .note-workspace{padding:14px 0 18px;gap:14px}
  .note-editor-sheet-panel{width:100%;padding:0}
  .note-editor-sheet .rich-note-inner--page{border-radius:0;height:100%}
  .rn-settings-panel{grid-template-columns:1fr;padding:14px 14px 16px;border-left:none;border-right:none;border-radius:0}
  .note-editor-sheet .rn-topbar{padding:28px 20px 12px}
  .note-editor-sheet .rn-title{font-size:36px;letter-spacing:-1px}
  .rn-intro{font-size:13px;line-height:1.7;margin-top:14px}
  .note-editor-sheet .rn-writing-shell{padding:0 0 18px}
  .rn-writing-frame{border-left:none;border-right:none;border-bottom:none;border-radius:22px 22px 0 0}
  .note-editor-sheet .rn-toolbar{padding:12px 14px;gap:7px}
  .rn-tool-spacer{display:none}
  .note-editor-sheet .rn-body-wrap{padding:22px 0 12px}
  .note-editor-sheet .rn-writing-label{padding:0 20px 12px}
  .note-editor-sheet .rn-body{padding:0 20px 32px;font-size:17px;line-height:1.9;max-width:none}
}

/* ── Mobile final overrides — must stay last ── */
@media(max-width:600px){
  .focus-center{justify-content:center}
  .mode-presets,.mode-presets--wide{grid-template-columns:1fr 1fr;gap:6px}
  .mode-preset-card{min-height:0;padding:10px 12px;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;text-align:left;border-radius:12px}
  .mode-preset-icon{font-size:18px;flex-shrink:0;line-height:1}
  .mode-preset-name{font-size:12px}
  .mode-preset-times{font-size:10px;margin:0;line-height:1.3}
  .mode-preset-card:hover{transform:none}

  /* Notes: stats strip → tiny pills */
  .notes-queue-stats{display:flex;flex-direction:row;gap:6px;margin-bottom:12px}
  .notes-queue-stat{padding:5px 10px;border-radius:20px;flex-direction:row;align-items:center;gap:5px;flex:1}
  .notes-queue-stat-num{font-size:13px;font-family:'Instrument Sans',sans-serif;line-height:1}
  .notes-queue-stat-lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase}

  /* Notes: horizontal scroll lanes */
  .notes-list{gap:0}
  .note-group{display:flex;flex-direction:row;overflow-x:auto;gap:8px;padding:0 0 8px;border:none;background:none;margin-bottom:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .note-group::-webkit-scrollbar{display:none}
  .note-group--pinned{margin-bottom:10px}
  .note-group-hdr{display:none}
  .note-item{flex:0 0 240px;min-width:0;margin-bottom:0}
}

/* ── Light theme contrast fixes — end of file, always wins ── */
/* 1. Kill heavy black box-shadows (rgba(0,0,0,.15-.16)) — visible dark halos on light bg */
[data-theme="day"] .notes-capture-card,
[data-theme="mist"] .notes-capture-card,
[data-theme="paper"] .notes-capture-card{box-shadow:none}
[data-theme="day"] .habits-momentum-card,
[data-theme="mist"] .habits-momentum-card,
[data-theme="paper"] .habits-momentum-card{box-shadow:none}
/* 2. Input areas: rgba(255,255,255,.0X) invisible on light bg — use ink2 */
[data-theme="day"] .note-capture-wrap,
[data-theme="mist"] .note-capture-wrap,
[data-theme="paper"] .note-capture-wrap{background:var(--ink2)}
[data-theme="day"] .note-capture-wrap:focus-within,
[data-theme="mist"] .note-capture-wrap:focus-within,
[data-theme="paper"] .note-capture-wrap:focus-within{background:var(--ink2)}
[data-theme="day"] .ncc-note,
[data-theme="mist"] .ncc-note,
[data-theme="paper"] .ncc-note{background:var(--ink2)}
[data-theme="day"] .notes-queue-stat,
[data-theme="mist"] .notes-queue-stat,
[data-theme="paper"] .notes-queue-stat{background:var(--ink2)}
/* 3. Settings jump nav — mist/paper need dark-on-light versions (day already defined) */
[data-theme="mist"] .sjump{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.07);color:var(--cream3);opacity:1}
[data-theme="mist"] .sjump:hover{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.11);color:var(--cream)}
[data-theme="paper"] .sjump{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.07);color:var(--cream3);opacity:1}
[data-theme="paper"] .sjump:hover{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.11);color:var(--cream)}
/* 4. Note editor format buttons */
[data-theme="day"] .note-editor-sheet .rn-fmt-btn,
[data-theme="mist"] .note-editor-sheet .rn-fmt-btn,
[data-theme="paper"] .note-editor-sheet .rn-fmt-btn{background:rgba(0,0,0,.05)}
[data-theme="day"] .note-editor-sheet .rn-fmt-btn:hover,
[data-theme="mist"] .note-editor-sheet .rn-fmt-btn:hover,
[data-theme="paper"] .note-editor-sheet .rn-fmt-btn:hover{background:rgba(0,0,0,.1)}
/* 5. rn-body textarea: rgba(255,255,255,.025) invisible on light bg */
[data-theme="day"] .rn-body,
[data-theme="mist"] .rn-body,
[data-theme="paper"] .rn-body{background:var(--ink2);box-shadow:inset 0 1px 0 rgba(0,0,0,.04)}
[data-theme="day"] .note-editor-sheet .rn-body,
[data-theme="mist"] .note-editor-sheet .rn-body,
[data-theme="paper"] .note-editor-sheet .rn-body{background:transparent;box-shadow:none}
/* 6. Note editor — hardcoded near-black backgrounds in base CSS */
[data-theme="day"] .rn-writing-frame,
[data-theme="mist"] .rn-writing-frame,
[data-theme="paper"] .rn-writing-frame{background:var(--ink);border-color:var(--border);box-shadow:none}
[data-theme="day"] .note-editor-sheet .rn-toolbar,
[data-theme="mist"] .note-editor-sheet .rn-toolbar,
[data-theme="paper"] .note-editor-sheet .rn-toolbar{background:var(--ink2);border-bottom-color:var(--border);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-theme="day"] .rn-topbar,
[data-theme="mist"] .rn-topbar,
[data-theme="paper"] .rn-topbar{background:transparent;border-bottom-color:var(--border)}
/* 7. Save btn: --amber is dark blue (#415a81) or dark brown (#8B5A2B) in mist/paper */
[data-theme="mist"] .rn-save-btn,
[data-theme="paper"] .rn-save-btn{color:#fff}
/* 8. Rich note popup card — light bg with subtle shadow */
[data-theme="day"] .rich-note-inner,
[data-theme="mist"] .rich-note-inner,
[data-theme="paper"] .rich-note-inner{background:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.06),0 8px 32px rgba(0,0,0,.1);border:1px solid var(--border)}
/* 9. Note workspace: needs shadow to separate from page on light bg */
[data-theme="day"] #view-note-workspace .note-workspace,
[data-theme="mist"] #view-note-workspace .note-workspace,
[data-theme="paper"] #view-note-workspace .note-workspace{background:var(--ink);border-radius:20px;box-shadow:0 1px 4px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.08);border:1px solid var(--border);padding:28px 28px 48px}
/* Base workspace dark — overridden above for light themes (higher specificity) */
#view-note-workspace .note-workspace{background:var(--ink2);border-radius:20px;box-shadow:0 4px 24px rgba(0,0,0,.22),0 16px 56px rgba(0,0,0,.18);border:1px solid var(--border2)}

/* ── Theme: Forest (Pro) ── */
[data-theme="forest"]{
  --ink:#080f0b;--ink2:#0e1810;--ink3:#152016;--ink4:#1d2c1e;--ink5:#263b28;
  --amber:#7ec98a;--amber-dim:#5aad68;--amber-soft:rgba(126,201,138,.14);
  --accent-rgb:126,201,138;
  --cream:#e0f0e4;--cream2:#a8c8ae;--cream3:#6a9470;
  --green:#7ec98a;--green-soft:rgba(126,201,138,.12);--rose:#c47878;
  --border:rgba(126,201,138,.1);--border2:rgba(126,201,138,.18);
  --shadow:0 12px 28px rgba(0,0,0,.3);--shadow-lg:0 24px 64px rgba(0,0,0,.44);
  --hm-empty:rgba(126,201,138,.07);--hm-level-1:rgba(126,201,138,.22);--hm-level-2:rgba(126,201,138,.42);--hm-level-3:rgba(126,201,138,.64);--hm-level-4:rgba(126,201,138,.9);--hm-future:rgba(126,201,138,.07);--hm-out:rgba(255,255,255,.04);--hm-cell-border:rgba(126,201,138,.1);--hm-grid-line:rgba(126,201,138,.07);--hm-hover-ring:rgba(126,201,138,.2);--hm-tooltip-bg:rgba(8,15,11,.96);--hm-tooltip-text:#e0f0e4;--stats-pill-bg:rgba(126,201,138,.08);--stats-pill-border:rgba(126,201,138,.14);
}
[data-theme="forest"] body{background-color:#080f0b;color:#e0f0e4}
[data-theme="forest"] body::before{background:radial-gradient(ellipse 60% 56% at 20% 8%,rgba(126,201,138,.08) 0%,transparent 58%),radial-gradient(ellipse 44% 60% at 80% 86%,rgba(76,140,88,.07) 0%,transparent 55%)}
[data-theme="forest"] body::after{opacity:.28}
[data-theme="forest"] .topbar{background:rgba(8,15,11,.9);border-bottom-color:rgba(126,201,138,.1)}
[data-theme="forest"] .topbar-nav{background:rgba(14,24,16,.96);border-color:rgba(126,201,138,.1)}
[data-theme="forest"] .logo em{color:#7ec98a}
[data-theme="forest"] .tnav{color:#6a9470}
[data-theme="forest"] .tnav.active{background:rgba(126,201,138,.1);color:#e0f0e4;box-shadow:none}
[data-theme="forest"] .tnav:hover:not(.active){color:#b8ddbf}
[data-theme="forest"] .icon-btn,[data-theme="forest"] .topbar-icon,[data-theme="forest"] .drawer-close,[data-theme="forest"] .pip-trigger,[data-theme="forest"] .ambiance-btn{background:rgba(21,32,22,.92);border-color:rgba(126,201,138,.12);color:#7aaa80;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
[data-theme="forest"] .icon-btn:hover,[data-theme="forest"] .topbar-icon:hover,[data-theme="forest"] .drawer-close:hover,[data-theme="forest"] .pip-trigger:hover,[data-theme="forest"] .ambiance-btn:hover{background:rgba(29,44,30,.96);border-color:rgba(126,201,138,.22);color:#b8ddbf}
[data-theme="forest"] .card,[data-theme="forest"] .spane-header,[data-theme="forest"] .sgroup{background:linear-gradient(180deg,rgba(14,24,16,.96) 0%,rgba(10,18,12,.98) 100%);border-color:rgba(126,201,138,.1)}
[data-theme="forest"] .timer-ring-prog{stroke:rgba(126,201,138,.9)}
[data-theme="forest"] .timer-ring-track{stroke:rgba(126,201,138,.1)}
[data-theme="forest"] .timer-display{color:#e0f0e4}
[data-theme="forest"] .mode-pill.active{background:rgba(126,201,138,.15);color:#e0f0e4;border-color:rgba(126,201,138,.25)}
.theme-preview--forest{background:linear-gradient(135deg,#080f0b 0%,#0e1810 100%)}
.theme-preview--forest .tp-ring{border-color:rgba(126,201,138,.85);box-shadow:0 0 14px rgba(126,201,138,.32)}
.theme-preview--forest .tp-time{color:#e0f0e4}

/* ── Theme: Rose (Pro) ── */
[data-theme="rose"]{
  --ink:#110a0d;--ink2:#1a1014;--ink3:#23151a;--ink4:#2e1c22;--ink5:#3d262e;
  --amber:#d4829a;--amber-dim:#b56078;--amber-soft:rgba(212,130,154,.14);
  --accent-rgb:212,130,154;
  --cream:#f5e0e8;--cream2:#c8a0b0;--cream3:#8a6070;
  --green:#7aad8a;--green-soft:rgba(122,173,138,.12);--rose:#d4829a;
  --border:rgba(212,130,154,.1);--border2:rgba(212,130,154,.18);
  --shadow:0 12px 28px rgba(0,0,0,.3);--shadow-lg:0 24px 64px rgba(0,0,0,.44);
  --hm-empty:rgba(212,130,154,.07);--hm-level-1:rgba(212,130,154,.22);--hm-level-2:rgba(212,130,154,.42);--hm-level-3:rgba(212,130,154,.64);--hm-level-4:rgba(212,130,154,.9);--hm-future:rgba(212,130,154,.07);--hm-out:rgba(255,255,255,.04);--hm-cell-border:rgba(212,130,154,.1);--hm-grid-line:rgba(212,130,154,.07);--hm-hover-ring:rgba(212,130,154,.2);--hm-tooltip-bg:rgba(17,10,13,.96);--hm-tooltip-text:#f5e0e8;--stats-pill-bg:rgba(212,130,154,.08);--stats-pill-border:rgba(212,130,154,.14);
}
[data-theme="rose"] body{background-color:#110a0d;color:#f5e0e8}
[data-theme="rose"] body::before{background:radial-gradient(ellipse 60% 56% at 22% 8%,rgba(212,130,154,.09) 0%,transparent 58%),radial-gradient(ellipse 44% 60% at 78% 84%,rgba(160,80,100,.07) 0%,transparent 55%)}
[data-theme="rose"] body::after{opacity:.28}
[data-theme="rose"] .topbar{background:rgba(17,10,13,.9);border-bottom-color:rgba(212,130,154,.1)}
[data-theme="rose"] .topbar-nav{background:rgba(26,16,20,.96);border-color:rgba(212,130,154,.1)}
[data-theme="rose"] .logo em{color:#d4829a}
[data-theme="rose"] .tnav{color:#8a6070}
[data-theme="rose"] .tnav.active{background:rgba(212,130,154,.1);color:#f5e0e8;box-shadow:none}
[data-theme="rose"] .tnav:hover:not(.active){color:#e0b0c0}
[data-theme="rose"] .icon-btn,[data-theme="rose"] .topbar-icon,[data-theme="rose"] .drawer-close,[data-theme="rose"] .pip-trigger,[data-theme="rose"] .ambiance-btn{background:rgba(35,21,26,.92);border-color:rgba(212,130,154,.12);color:#a87080;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
[data-theme="rose"] .icon-btn:hover,[data-theme="rose"] .topbar-icon:hover,[data-theme="rose"] .drawer-close:hover,[data-theme="rose"] .pip-trigger:hover,[data-theme="rose"] .ambiance-btn:hover{background:rgba(46,28,34,.96);border-color:rgba(212,130,154,.22);color:#e0b0c0}
[data-theme="rose"] .card,[data-theme="rose"] .spane-header,[data-theme="rose"] .sgroup{background:linear-gradient(180deg,rgba(26,16,20,.96) 0%,rgba(18,11,15,.98) 100%);border-color:rgba(212,130,154,.1)}
[data-theme="rose"] .timer-ring-prog{stroke:rgba(212,130,154,.9)}
[data-theme="rose"] .timer-ring-track{stroke:rgba(212,130,154,.1)}
[data-theme="rose"] .timer-display{color:#f5e0e8}
[data-theme="rose"] .mode-pill.active{background:rgba(212,130,154,.15);color:#f5e0e8;border-color:rgba(212,130,154,.25)}
.theme-preview--rose{background:linear-gradient(135deg,#110a0d 0%,#1a1014 100%)}
.theme-preview--rose .tp-ring{border-color:rgba(212,130,154,.85);box-shadow:0 0 14px rgba(212,130,154,.28)}
.theme-preview--rose .tp-time{color:#f5e0e8}

/* ── Ember — black / white / orange (Pro) ────────────────────────────── */
[data-theme="ember"]{
  --ink:#000000;--ink2:#0d0d0d;--ink3:#141414;--ink4:#1c1c1c;--ink5:#242424;
  --amber:#ff7a30;--amber-dim:#d95f18;--amber-soft:rgba(255,122,48,.12);
  --accent-rgb:255,122,48;
  --cream:#ffffff;--cream2:rgba(255,255,255,.72);--cream3:rgba(255,255,255,.36);
  --green:#6ecf82;--green-soft:rgba(110,207,130,.08);--rose:#e06060;
  --border:rgba(255,122,48,.15);--border2:rgba(255,122,48,.26);
  --shadow:none;--shadow-lg:none;
  --hm-empty:rgba(255,122,48,.1);--hm-level-1:rgba(255,122,48,.28);--hm-level-2:rgba(255,122,48,.50);--hm-level-3:rgba(255,122,48,.74);--hm-level-4:#ff7a30;--hm-future:rgba(255,255,255,.06);--hm-out:rgba(255,255,255,.04);--hm-cell-border:rgba(255,122,48,.14);--hm-grid-line:rgba(255,122,48,.08);--hm-hover-ring:rgba(255,122,48,.28);--hm-tooltip-bg:rgba(0,0,0,.96);--hm-tooltip-text:#fff;--stats-pill-bg:rgba(255,122,48,.08);--stats-pill-border:rgba(255,122,48,.16);
}
[data-theme="ember"] body{background-color:#000;color:#fff}
[data-theme="ember"] body::before{background:radial-gradient(ellipse 56% 48% at 18% 10%,rgba(255,122,48,.08) 0%,transparent 56%)}
[data-theme="ember"] body::after{opacity:0}
[data-theme="ember"] .topbar{background:rgba(0,0,0,.98);border-bottom-color:rgba(255,122,48,.14)}
[data-theme="ember"] .topbar-nav{background:#0d0d0d;border-color:rgba(255,122,48,.16)}
[data-theme="ember"] .logo em{color:#ff7a30}
[data-theme="ember"] .tnav{color:rgba(255,255,255,.42)}
[data-theme="ember"] .tnav.active{background:#1a1a1a;color:#fff;box-shadow:none}
[data-theme="ember"] .tnav:hover:not(.active){color:rgba(255,255,255,.82)}
[data-theme="ember"] .icon-btn,[data-theme="ember"] .topbar-icon,[data-theme="ember"] .drawer-close,[data-theme="ember"] .pip-trigger,[data-theme="ember"] .ambiance-btn{background:#111;border-color:rgba(255,122,48,.16);color:rgba(255,255,255,.6);box-shadow:none}
[data-theme="ember"] .icon-btn:hover,[data-theme="ember"] .topbar-icon:hover,[data-theme="ember"] .drawer-close:hover,[data-theme="ember"] .pip-trigger:hover,[data-theme="ember"] .ambiance-btn:hover{background:#1c1c1c;border-color:rgba(255,122,48,.32);color:#fff}
[data-theme="ember"] .topbar-icon.active-icon,[data-theme="ember"] .ambiance-btn.active-icon{background:rgba(255,122,48,.14);border-color:rgba(255,122,48,.36);color:#ff7a30;box-shadow:none}
[data-theme="ember"] .nav-burger{border-color:rgba(255,122,48,.18);background:#0d0d0d;box-shadow:none}
[data-theme="ember"] .nav-burger:hover{border-color:rgba(255,122,48,.32)}
[data-theme="ember"] .nav-burger.active{border-color:rgba(255,122,48,.4);background:#111;box-shadow:0 0 20px rgba(255,122,48,.1)}
[data-theme="ember"] .nav-burger-bar{background:#fff;box-shadow:none}
[data-theme="ember"] .avatar-btn{background:rgba(255,122,48,.12);border-color:rgba(255,122,48,.3)}
[data-theme="ember"] .card,[data-theme="ember"] .spane-header,[data-theme="ember"] .sgroup{background:#0d0d0d;border-color:rgba(255,122,48,.12);box-shadow:none}
[data-theme="ember"] .timer-card::before{display:block;background:radial-gradient(circle,rgba(255,122,48,.1) 0%,transparent 64%);opacity:1}
[data-theme="ember"] .mode-pill-wrap{background:#0a0a0a;border-color:rgba(255,122,48,.16);box-shadow:none}
[data-theme="ember"] .mode-pill-indicator{background:rgba(255,122,48,.12);border-color:rgba(255,122,48,.22);box-shadow:none}
[data-theme="ember"] .mode-pill{color:rgba(255,255,255,.38)}
[data-theme="ember"] .mode-pill.active{color:#fff}
[data-theme="ember"] .timer-num-center{color:#fff}
[data-theme="ember"] .timer-num-center.live{color:#ff7a30;text-shadow:0 0 80px rgba(255,122,48,.2)}
[data-theme="ember"] .timer-num-center.break-live{color:rgba(255,255,255,.72);text-shadow:none}
[data-theme="ember"] .btn-start-center{background:#ff7a30;color:#000;box-shadow:none}
[data-theme="ember"] .btn-start-center:hover{background:#ff8f4a;box-shadow:0 0 24px rgba(255,122,48,.28)}
[data-theme="ember"] .btn-start-center.paused{background:#1a1a1a;color:rgba(255,255,255,.6);border-color:rgba(255,122,48,.16)}
[data-theme="ember"] .btn-start-center.break-mode{background:#fff;color:#000;box-shadow:none}
[data-theme="ember"] .btn-sm-center,[data-theme="ember"] .btn-tasks-toggle{border-color:rgba(255,122,48,.14)}
[data-theme="ember"] .btn-sm-center{background:#111;color:rgba(255,255,255,.6)}
[data-theme="ember"] .btn-sm-center:hover{background:#1c1c1c;color:#fff}
[data-theme="ember"] .btn-tasks-toggle{background:#111;color:rgba(255,255,255,.6);box-shadow:none}
[data-theme="ember"] .task-badge-count{background:#ff7a30;color:#000}
[data-theme="ember"] .bar-track-center,.fs-bar{background:rgba(255,122,48,.14)}
[data-theme="ember"] .timer-context,[data-theme="ember"] .timer-context-center,[data-theme="ember"] .focus-quote{color:rgba(255,255,255,.52);opacity:1}
[data-theme="ember"] .timer-context em,[data-theme="ember"] .timer-context-center em{color:#fff;--timer-context-em-base:#fff}
[data-theme="ember"] .snd-modal,[data-theme="ember"] .habit-modal-inner,[data-theme="ember"] .book-modal-inner,[data-theme="ember"] .drawer{background:#0a0a0a;border-color:rgba(255,122,48,.14)}
[data-theme="ember"] .snd-card,[data-theme="ember"] .setting-row,[data-theme="ember"] .habit-item,[data-theme="ember"] .habit-hm-row,[data-theme="ember"] .book-field,[data-theme="ember"] .book-select,[data-theme="ember"] .book-search-input,[data-theme="ember"] .setting-input,[data-theme="ember"] .settings-code-input{background:#111;border-color:rgba(255,122,48,.1);color:#fff}
.theme-preview--ember{background:#000}
.theme-preview--ember .tp-ring{border-color:#ff7a30;box-shadow:0 0 14px rgba(255,122,48,.42)}
.theme-preview--ember .tp-time{color:#fff}

/* ── Quartz — clean white · vivid violet (Pro) ───────────────────────── */
html[data-theme="quartz"]{
  --ink:#F4F4F5;--ink2:#EBEBEC;--ink3:#E0E0E2;--ink4:#D4D4D6;--ink5:#C4C4C7;
  --amber:#7C3AED;--amber-dim:#5B21B6;--amber-soft:rgba(124,58,237,.1);
  --accent-rgb:124,58,237;
  --cream:#09090B;--cream2:rgba(9,9,11,.62);--cream3:rgba(9,9,11,.36);
  --green:#059669;--green-soft:rgba(5,150,105,.1);--rose:#DC2626;
  --border:rgba(0,0,0,.1);--border2:rgba(0,0,0,.16);
  --shadow:0 1px 12px rgba(0,0,0,.08),0 4px 24px rgba(0,0,0,.06);--shadow-lg:0 8px 48px rgba(0,0,0,.14);
  --hm-empty:rgba(0,0,0,.08);--hm-level-1:rgba(124,58,237,.22);--hm-level-2:rgba(124,58,237,.42);--hm-level-3:rgba(124,58,237,.66);--hm-level-4:rgba(124,58,237,.92);--hm-future:rgba(0,0,0,.06);--hm-out:rgba(0,0,0,.04);--hm-cell-border:rgba(0,0,0,.1);--hm-grid-line:rgba(0,0,0,.07);--hm-hover-ring:rgba(0,0,0,.18);--hm-tooltip-bg:rgba(9,9,11,.96);--hm-tooltip-text:#F4F4F5;--stats-pill-bg:rgba(0,0,0,.06);--stats-pill-border:rgba(0,0,0,.1);
}
[data-theme="quartz"] body{background-color:#F4F4F5;color:#09090B}
[data-theme="quartz"] body::before{background:none}
[data-theme="quartz"] body::after{opacity:0}
[data-theme="quartz"] .topbar{background:rgba(244,244,245,.96);border-bottom-color:rgba(0,0,0,.1);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-theme="quartz"] .topbar-nav{background:#EBEBEC;border-color:rgba(0,0,0,.1);box-shadow:none}
[data-theme="quartz"] .logo{color:#09090B}
[data-theme="quartz"] .logo em{color:#7C3AED}
[data-theme="quartz"] .tnav{color:rgba(9,9,11,.45)}
[data-theme="quartz"] .tnav.active{background:#fff;color:#09090B;box-shadow:0 1px 4px rgba(0,0,0,.1)}
[data-theme="quartz"] .tnav:hover:not(.active){color:#09090B}
[data-theme="quartz"] .icon-btn,[data-theme="quartz"] .topbar-icon,[data-theme="quartz"] .drawer-close,[data-theme="quartz"] .pip-trigger,[data-theme="quartz"] .ambiance-btn{background:#EBEBEC;border-color:rgba(0,0,0,.12);color:rgba(9,9,11,.56);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
[data-theme="quartz"] .icon-btn:hover,[data-theme="quartz"] .topbar-icon:hover,[data-theme="quartz"] .drawer-close:hover,[data-theme="quartz"] .pip-trigger:hover,[data-theme="quartz"] .ambiance-btn:hover{background:#fff;border-color:rgba(0,0,0,.2);color:#09090B}
[data-theme="quartz"] .topbar-icon.active-icon,[data-theme="quartz"] .ambiance-btn.active-icon{background:rgba(124,58,237,.12);border-color:rgba(124,58,237,.32);color:#7C3AED;box-shadow:none}
[data-theme="quartz"] .nav-burger{border-color:rgba(0,0,0,.12);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.9),rgba(255,255,255,.5) 52%,rgba(124,58,237,.06) 100%),rgba(235,235,236,.92);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 22px rgba(0,0,0,.1);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-theme="quartz"] .nav-burger:hover{border-color:rgba(124,58,237,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 24px rgba(0,0,0,.12),0 0 0 1px rgba(124,58,237,.06)}
[data-theme="quartz"] .nav-burger.active{border-color:rgba(124,58,237,.28);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.9),rgba(124,58,237,.12) 54%,rgba(124,58,237,.06) 100%),rgba(235,235,236,.96);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 28px rgba(0,0,0,.12),0 0 24px rgba(124,58,237,.1)}
[data-theme="quartz"] .nav-burger-bar{background:#09090B;box-shadow:none}
[data-theme="quartz"] .avatar-btn{background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.32)}
[data-theme="quartz"] .live-dot{background:#7C3AED}
[data-theme="quartz"] .card{background:#fff;border-color:rgba(0,0,0,.09);box-shadow:0 1px 8px rgba(0,0,0,.07)}
[data-theme="quartz"] .card:hover{border-color:rgba(0,0,0,.16);box-shadow:0 2px 16px rgba(0,0,0,.1)}
[data-theme="quartz"] .spane-header,[data-theme="quartz"] .sgroup{background:#fff;border-color:rgba(0,0,0,.08);box-shadow:0 1px 8px rgba(0,0,0,.06)}
[data-theme="quartz"] .timer-card::before{display:block;background:radial-gradient(circle,rgba(124,58,237,.07) 0%,transparent 64%);opacity:1}
[data-theme="quartz"] .mode-pill-wrap{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
[data-theme="quartz"] .mode-pill-indicator{background:#fff;border-color:rgba(0,0,0,.12);box-shadow:0 1px 4px rgba(0,0,0,.08)}
[data-theme="quartz"] .mode-pill{color:rgba(9,9,11,.42)}
[data-theme="quartz"] .mode-pill.active{color:#09090B}
[data-theme="quartz"] .timer-num-center{color:#09090B}
[data-theme="quartz"] .timer-num-center.live{color:#7C3AED;text-shadow:0 0 80px rgba(124,58,237,.14)}
[data-theme="quartz"] .timer-num-center.break-live{color:#059669;text-shadow:none}
[data-theme="quartz"] .btn-start-center{background:#7C3AED;color:#fff;box-shadow:0 4px 16px rgba(124,58,237,.28)}
[data-theme="quartz"] .btn-start-center:hover{background:#6D28D9;box-shadow:0 8px 24px rgba(124,58,237,.36)}
[data-theme="quartz"] .btn-start-center.paused{background:#EBEBEC;color:rgba(9,9,11,.56);box-shadow:none;border-color:rgba(0,0,0,.12)}
[data-theme="quartz"] .btn-start-center.break-mode{background:#059669;box-shadow:0 4px 16px rgba(5,150,105,.22)}
[data-theme="quartz"] .break-overlay{background:rgba(244,244,245,0.94)}
[data-theme="quartz"] .btn-sm-center{border-color:rgba(0,0,0,.12);color:rgba(9,9,11,.56);background:#fff}
[data-theme="quartz"] .btn-sm-center:hover{border-color:rgba(0,0,0,.2);color:#09090B;background:#fff}
[data-theme="quartz"] .btn-tasks-toggle{background:#EBEBEC;border-color:rgba(0,0,0,.1);color:rgba(9,9,11,.56);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
[data-theme="quartz"] .drawer{background:#F4F4F5;border-right-color:rgba(0,0,0,.1)}
[data-theme="quartz"] .task-badge-count{background:#7C3AED;color:#fff}
[data-theme="quartz"] .bar-track-center{background:rgba(0,0,0,.1)}
[data-theme="quartz"] .topbar-icon,[data-theme="quartz"] .drawer-close,[data-theme="quartz"] .pip-trigger,[data-theme="quartz"] .ambiance-btn{background:#EBEBEC;border-color:rgba(0,0,0,.12);color:rgba(9,9,11,.56);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
[data-theme="quartz"] .topbar-icon:hover,[data-theme="quartz"] .drawer-close:hover,[data-theme="quartz"] .pip-trigger:hover,[data-theme="quartz"] .ambiance-btn:hover{background:#fff;border-color:rgba(0,0,0,.2);color:#09090B}
[data-theme="quartz"] .timer-context,[data-theme="quartz"] .timer-context-center,[data-theme="quartz"] .focus-quote{color:rgba(9,9,11,.52);opacity:1}
[data-theme="quartz"] .timer-context em,[data-theme="quartz"] .timer-context-center em{color:#09090B;--timer-context-em-base:#09090B}
[data-theme="quartz"] .mtab{color:rgba(9,9,11,.48)}
[data-theme="quartz"] .mtab:hover{color:#09090B}
[data-theme="quartz"] .settings-jump{background:rgba(244,244,245,.97);border-bottom-color:rgba(0,0,0,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
[data-theme="quartz"] .sjump{background:#EBEBEC;border-color:rgba(0,0,0,.08);color:rgba(9,9,11,.56);opacity:1}
[data-theme="quartz"] .sjump:hover{background:#fff;border-color:rgba(0,0,0,.14);color:#09090B}
[data-theme="quartz"] .settings-nav{background:rgba(244,244,245,.96);border-right-color:rgba(0,0,0,.08)}
[data-theme="quartz"] .snav-item{color:rgba(9,9,11,.48)}
[data-theme="quartz"] .snav-item:hover{background:rgba(124,58,237,.06);border-color:rgba(124,58,237,.08);color:#09090B}
[data-theme="quartz"] .snav-item.active{background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.16);color:#7C3AED}
[data-theme="quartz"] .snav-tagline,[data-theme="quartz"] .snav-footer,[data-theme="quartz"] .ss-sub,[data-theme="quartz"] .mode-preset-times,[data-theme="quartz"] .mode-desc,[data-theme="quartz"] .theme-tag,[data-theme="quartz"] .snd-card-label,[data-theme="quartz"] .book-author,[data-theme="quartz"] .book-modal-label,[data-theme="quartz"] .book-rating-lbl,[data-theme="quartz"] .habit-del-confirm-msg,[data-theme="quartz"] .habit-custom-icon-input::placeholder,[data-theme="quartz"] .book-search-input::placeholder{color:rgba(9,9,11,.44);opacity:.92}
[data-theme="quartz"] .snd-modal,[data-theme="quartz"] .habit-modal-inner,[data-theme="quartz"] .book-modal-inner{background:#fff;border-color:rgba(0,0,0,.1);box-shadow:0 20px 48px rgba(0,0,0,.14)}
[data-theme="quartz"] .snd-card,[data-theme="quartz"] .habit-custom-icon-input,[data-theme="quartz"] .habit-modal-name,[data-theme="quartz"] .book-field,[data-theme="quartz"] .book-select,[data-theme="quartz"] .book-search-input,[data-theme="quartz"] .setting-row,[data-theme="quartz"] .habit-item,[data-theme="quartz"] .habit-hm-row,[data-theme="quartz"] .setting-input,[data-theme="quartz"] .settings-code-input{background:#EBEBEC;border-color:rgba(0,0,0,.1);color:#09090B}
@media(hover:hover) and (pointer:fine){[data-theme="quartz"] .snd-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.1)}}
[data-theme="quartz"] .snd-card.playing{box-shadow:0 0 0 2px rgba(124,58,237,.22),0 8px 22px rgba(124,58,237,.1)}
[data-theme="quartz"] .snd-tab:hover{background:#EBEBEC}
[data-theme="quartz"] .snd-master-range::-webkit-slider-runnable-track,[data-theme="quartz"] .snd-card-vol::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--amber) var(--pct,70%),rgba(0,0,0,.12) var(--pct,70%))}
[data-theme="quartz"] .snd-master-range::-moz-range-track,[data-theme="quartz"] .snd-card-vol::-moz-range-track{background:rgba(0,0,0,.12)}
[data-theme="quartz"] .book-status-badge{box-shadow:none}
.theme-preview--quartz{background:#F4F4F5}
.theme-preview--quartz .tp-ring{border-color:#7C3AED;box-shadow:0 0 14px rgba(124,58,237,.38)}
.theme-preview--quartz .tp-time{color:#09090B}