*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
*{-webkit-tap-highlight-color:transparent}
:root{
  --bg:#141414;--bar:#111;--card:#1d1d1d;--rh:#242424;--sep:rgba(255,255,255,.08);
  --t1:#ebebeb;--t2:#818181;--t3:#4a4a4a;
  --acc:#6f97f6;--done:#55c279;--urgent:#e43a3a;--ongoing:#6f97f6;--hold:#d49537;
  --bg-gradient:radial-gradient(120% 120% at 14% 0%, rgba(112,129,190,.12) 0%, rgba(112,129,190,0) 48%), radial-gradient(100% 130% at 100% 10%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 42%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  --panel-bg:#1c1c1c;--panel-border:rgba(255,255,255,.1);--panel-shadow:0 16px 48px rgba(0,0,0,.75);
  --chip-bg:#1a1a1d;--chip-hover-bg:#202024;--chip-active-bg:#282a31;
  --chip-border:rgba(255,255,255,.1);--chip-hover-border:rgba(255,255,255,.16);--chip-active-border:rgba(255,255,255,.2);
  --chip-text:var(--t2);--chip-hover-text:var(--t1);--chip-active-text:var(--t1);--chip-active-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  --sidebar-bg:#131313;--sidebar-border:rgba(255,255,255,.05);
  --sidebar-control-bg:rgba(255,255,255,.045);--sidebar-control-border:rgba(255,255,255,.075);
  --sidebar-control-text:rgba(255,255,255,.62);--sidebar-control-icon:rgba(255,255,255,.36);
  --sidebar-hover-bg:rgba(255,255,255,.05);--sidebar-hover-text:rgba(255,255,255,.7);--sidebar-hover-icon:rgba(255,255,255,.55);
  --sidebar-active-bg:rgba(102,144,242,.13);--sidebar-active-text:var(--t1);--sidebar-active-icon:var(--acc);
  --sidebar-panel-open-bg:rgba(255,255,255,.07);--sidebar-panel-open-icon:rgba(255,255,255,.78);
  --sidebar-toggle-bg:#171717;--sidebar-toggle-border:rgba(255,255,255,.08);--sidebar-toggle-text:rgba(255,255,255,.48);
  --side-expanded-w:238px;--side-w:var(--side-expanded-w);--top-h:56px;--bar-h:56px;
  --side-search-h:42px;
  --side-header-space:calc(var(--safe-t) + 66px);
  --m-topbar-h:0px;
  --m-sheet-z:940;
  --serif:'Cormorant Garamond',Georgia,serif;
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --touch-min:44px;
}
body.side-collapsed{--side-w:64px}
html{scrollbar-gutter:stable}
html,body{min-height:100vh;color:var(--t1);font-family:var(--font);-webkit-font-smoothing:antialiased;font-size:14px;letter-spacing:-.01em;overscroll-behavior:none}
html{
  background:var(--bg);
  /* Scale the entire UI up uniformly for all visitors.
     CSS zoom on the root element adjusts the layout viewport so responsive
     breakpoints and vw/vh units stay proportional — everyone sees the same
     result regardless of browser. Change to zoom:1 to revert. */
  zoom:1.15;
}
body{
  background:transparent;
}
/* The page background must always cover the viewport, but two problems make
   that tricky:
   (1) body min-height:0 (the scroll fix) makes body shorter than the
       viewport on short pages, so any background painted on body's box is
       clipped to it.
   (2) Themes set --bg on body, but html's background:var(--bg) reads from
       html — so on a themed page the area below short body shows html's
       OLD default --bg (visible as gray) instead of the theme color.
   Fix: paint everything (solid bg + gradient) on a fixed-position
   body::before that always covers the viewport. body::before inherits
   body's themed --bg / --bg-gradient, so it always matches the theme. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--bg);
  background-image:var(--bg-gradient);
  background-size:cover;background-repeat:no-repeat;
}
button,input,select,textarea{font:inherit}
button:focus{outline:none}
button::-moz-focus-inner{border:0}
button:focus-visible{
  outline:none;
  box-shadow:0 0 0 1px rgba(111,151,246,.4),0 0 0 4px rgba(111,151,246,.12);
}

/* ── CUSTOM SCROLLBAR ────────────────────────────── */
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:double-button,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:single-button,
::-webkit-scrollbar-button:horizontal:double-button,
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:single-button,
::-webkit-scrollbar-button:vertical:double-button{
  display:none;
  width:0;
  height:0;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
  border:none;
  box-shadow:none;
}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:99px;transition:background .2s}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22)}
::-webkit-scrollbar-corner{background:transparent}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}

body[data-appearance-theme="graphite"]{
  --bg:#141414;
  --bg-gradient:radial-gradient(120% 120% at 14% 0%, rgba(112,129,190,.12) 0%, rgba(112,129,190,0) 48%), radial-gradient(100% 130% at 100% 10%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 42%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  --bar:#101116;--card:#1c1d23;--rh:#24252c;
  --sidebar-bg:#131420;
  --panel-bg:#1c1d25;
}
body[data-appearance-theme="none"]{
  --bg:#141414;
  --bg-gradient:none;
  --sidebar-bg:#131313;
  --panel-bg:#1c1c1c;
}
body[data-appearance-theme="porcelain"]{
  --bg:#f3efe8;--bar:#ece7de;--card:#fffdfa;--rh:#f1ece4;--sep:rgba(31,26,20,.08);
  --t1:#1f1b16;--t2:#6f675d;--t3:#988f85;
  --bg-gradient:radial-gradient(120% 120% at 14% 0%, rgba(111,151,246,.1) 0%, rgba(111,151,246,0) 48%), radial-gradient(100% 120% at 100% 10%, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 42%), linear-gradient(180deg, rgba(255,255,255,.78), rgba(245,240,233,0));
  --panel-bg:#fffdf9;--panel-border:rgba(31,26,20,.08);--panel-shadow:0 18px 46px rgba(54,38,26,.14);
  --chip-bg:#f5f1ea;--chip-hover-bg:#efe8df;--chip-active-bg:#ffffff;
  --chip-border:rgba(31,26,20,.08);--chip-hover-border:rgba(31,26,20,.14);--chip-active-border:rgba(31,26,20,.14);
  --chip-text:#60584f;--chip-hover-text:#221d18;--chip-active-text:#1b1712;--chip-active-shadow:inset 0 1px 0 rgba(255,255,255,.82);
  --sidebar-bg:#ece7de;--sidebar-border:rgba(31,26,20,.08);
  --sidebar-control-bg:rgba(31,26,20,.045);--sidebar-control-border:rgba(31,26,20,.08);
  --sidebar-control-text:#635a50;--sidebar-control-icon:#8b8176;
  --sidebar-hover-bg:rgba(31,26,20,.06);--sidebar-hover-text:#221d18;--sidebar-hover-icon:#554d44;
  --sidebar-active-bg:rgba(77,125,240,.14);--sidebar-active-text:#1b1712;--sidebar-active-icon:#4d7df0;
  --sidebar-panel-open-bg:rgba(31,26,20,.08);--sidebar-panel-open-icon:#4a433c;
  --sidebar-toggle-bg:#f7f3ed;--sidebar-toggle-border:rgba(31,26,20,.08);--sidebar-toggle-text:#665d53;
}
body[data-appearance-theme="porcelain"] .side-brand-logo,
body[data-appearance-theme="porcelain"] .hosted-shell-brand-logo{
  filter:brightness(0) saturate(100%);
}
body[data-appearance-theme="slate"]{
  --bg:#11141a;
  --bg-gradient:radial-gradient(120% 118% at 10% 0%, rgba(87,108,187,.16) 0%, rgba(87,108,187,0) 50%), radial-gradient(94% 114% at 92% 10%, rgba(87,178,183,.09) 0%, rgba(87,178,183,0) 42%), linear-gradient(180deg, rgba(255,255,255,.014), rgba(255,255,255,0));
  --bar:#0f1117;--card:#1a1d25;--rh:#23262f;
  --sidebar-bg:#121620;
  --panel-bg:#181c25;
}
body[data-appearance-theme="ocean"]{
  --bg:#10171b;
  --bg-gradient:radial-gradient(115% 115% at 12% 0%, rgba(62,171,204,.2) 0%, rgba(62,171,204,0) 50%), radial-gradient(95% 120% at 92% 6%, rgba(108,128,255,.12) 0%, rgba(108,128,255,0) 42%), linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));
  --bar:#0d1418;--card:#181f23;--rh:#21282c;
  --sidebar-bg:#101b1f;
  --panel-bg:#182125;
}
body[data-appearance-theme="aurora"]{
  --bg:#111913;
  --bg-gradient:radial-gradient(120% 115% at 12% 0%, rgba(73,190,150,.18) 0%, rgba(73,190,150,0) 48%), radial-gradient(96% 120% at 92% 8%, rgba(116,153,255,.11) 0%, rgba(116,153,255,0) 42%), linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));
  --bar:#0e1610;--card:#192019;--rh:#222a23;
  --sidebar-bg:#121c16;
  --panel-bg:#1a221c;
}
body[data-appearance-theme="moss"]{
  --bg:#131812;
  --bg-gradient:radial-gradient(118% 118% at 14% 0%, rgba(120,173,84,.18) 0%, rgba(120,173,84,0) 50%), radial-gradient(95% 115% at 92% 10%, rgba(81,132,95,.11) 0%, rgba(81,132,95,0) 42%), linear-gradient(180deg, rgba(255,255,255,.014), rgba(255,255,255,0));
  --bar:#10150f;--card:#1b1f19;--rh:#242823;
  --sidebar-bg:#141a13;
  --panel-bg:#1b211a;
}
body[data-appearance-theme="ember"]{
  --bg:#181210;
  --bg-gradient:radial-gradient(118% 120% at 12% 0%, rgba(186,97,64,.18) 0%, rgba(186,97,64,0) 50%), radial-gradient(95% 112% at 92% 8%, rgba(212,144,80,.11) 0%, rgba(212,144,80,0) 42%), linear-gradient(180deg, rgba(255,255,255,.014), rgba(255,255,255,0));
  --bar:#150f0c;--card:#211814;--rh:#2b201b;
  --sidebar-bg:#19120f;
  --panel-bg:#201714;
}
body[data-appearance-theme="rose"]{
  --bg:#171114;
  --bg-gradient:radial-gradient(118% 118% at 12% 0%, rgba(191,97,132,.16) 0%, rgba(191,97,132,0) 50%), radial-gradient(95% 114% at 90% 10%, rgba(125,117,214,.1) 0%, rgba(125,117,214,0) 42%), linear-gradient(180deg, rgba(255,255,255,.014), rgba(255,255,255,0));
  --bar:#140f12;--card:#20181d;--rh:#2a2028;
  --sidebar-bg:#181116;
  --panel-bg:#1f171b;
}
body[data-appearance-theme="plum"]{
  --bg:#15111a;
  --bg-gradient:radial-gradient(118% 118% at 12% 0%, rgba(132,99,210,.18) 0%, rgba(132,99,210,0) 48%), radial-gradient(95% 114% at 92% 10%, rgba(182,104,186,.1) 0%, rgba(182,104,186,0) 42%), linear-gradient(180deg, rgba(255,255,255,.014), rgba(255,255,255,0));
  --bar:#120f17;--card:#1d1925;--rh:#28233a;
  --sidebar-bg:#16111d;
  --panel-bg:#1d1722;
}
body[data-appearance-theme="bronze"]{
  --bg:#18130f;
  --bg-gradient:radial-gradient(118% 118% at 12% 0%, rgba(180,132,82,.18) 0%, rgba(180,132,82,0) 48%), radial-gradient(92% 112% at 92% 10%, rgba(118,102,80,.1) 0%, rgba(118,102,80,0) 42%), linear-gradient(180deg, rgba(255,255,255,.014), rgba(255,255,255,0));
  --bar:#14110c;--card:#211a14;--rh:#2b231a;
  --sidebar-bg:#1a140f;
  --panel-bg:#211912;
}
body[data-appearance-theme="nightfall"]{
  --bg:#191012;
  --bg-gradient:radial-gradient(118% 118% at 10% 0%, rgba(198,84,98,.2) 0%, rgba(198,84,98,0) 48%), radial-gradient(94% 112% at 92% 8%, rgba(151,52,76,.14) 0%, rgba(151,52,76,0) 42%), linear-gradient(180deg, rgba(255,255,255,.014), rgba(255,255,255,0));
  --bar:#150c0e;--card:#221518;--rh:#2c1c20;
  --sidebar-bg:#1b1013;
  --panel-bg:#24161a;
}

/* Chip + sidebar-toggle tints per dark theme. Default :root chip colors are
   a neutral dark gray, so on themed pages elements like the category rail
   chips ("All", "Current", "test") and the sidebar collapse toggle stayed
   gray while everything around them was tinted. These overrides keep those
   surfaces in family with each theme. Porcelain (light) has its own
   explicit chip palette and isn't touched. */
body[data-appearance-theme="graphite"]{--chip-bg:#18181f;--chip-hover-bg:#1e1f27;--chip-active-bg:#2a2c34;--sidebar-toggle-bg:#16171e}
body[data-appearance-theme="slate"]   {--chip-bg:#161922;--chip-hover-bg:#1c1f29;--chip-active-bg:#272a35;--sidebar-toggle-bg:#14171f}
body[data-appearance-theme="ocean"]   {--chip-bg:#141b1f;--chip-hover-bg:#1a2125;--chip-active-bg:#252e32;--sidebar-toggle-bg:#131c1f}
body[data-appearance-theme="aurora"]  {--chip-bg:#161d17;--chip-hover-bg:#1b231d;--chip-active-bg:#262e28;--sidebar-toggle-bg:#141d18}
body[data-appearance-theme="moss"]    {--chip-bg:#181d16;--chip-hover-bg:#1d231a;--chip-active-bg:#272e25;--sidebar-toggle-bg:#161c14}
body[data-appearance-theme="ember"]   {--chip-bg:#1d1612;--chip-hover-bg:#241b16;--chip-active-bg:#2e231d;--sidebar-toggle-bg:#1a1310}
body[data-appearance-theme="rose"]    {--chip-bg:#1c1419;--chip-hover-bg:#231a1f;--chip-active-bg:#2d2027;--sidebar-toggle-bg:#1a1216}
body[data-appearance-theme="plum"]    {--chip-bg:#181420;--chip-hover-bg:#1e1a27;--chip-active-bg:#2b2334;--sidebar-toggle-bg:#17131e}
body[data-appearance-theme="bronze"]  {--chip-bg:#1d1612;--chip-hover-bg:#241c14;--chip-active-bg:#2e251a;--sidebar-toggle-bg:#1b1510}
body[data-appearance-theme="nightfall"]{--chip-bg:#1e1316;--chip-hover-bg:#241a1d;--chip-active-bg:#2e1d22;--sidebar-toggle-bg:#1c1216}

/* ── PAGE-LOAD TRANSITION BLOCKER ────────────── */
body.no-transition,body.no-transition *,
body.no-transition *::before,body.no-transition *::after{transition:none!important}