/* =======================================================================
     STRUCTURE LAYER
     Loaded LAST. Handles app shell layout (left nav rail offset, global
     corner rounding) on top of the tokens defined in tokens.css.

     This file used to also redefine the full colour-token set here (the old
     "Brushed Titanium" re-skin) — that block was deleted 2026-08-09: with
     the same custom-property names declared in two later-loaded :root
     blocks, this one always won the cascade and silently dragged the whole
     app back to the retired cyan/magenta palette no matter what tokens.css
     said. Colour tokens now live in exactly one place, tokens.css.
     ======================================================================= */

  :root{
    /* JS reads/writes this on :root to drive both shell offset + nav width */
    --leftnav-w:180px;
  }

  /* ---- Global rounding: sharp + uniform; genuine circles opt back in ---- */
  *{border-radius:var(--r-md) !important;}
  .play-btn,.circle-btn,.cb-play,
  .orb,.orb .ring,.orb .core,
  .disc,.disc .label,.disc .hole,
  .evidence-row .dot,.save-dot,.track .tplay,
  .tc-chip .tc-dot,.tc-retro-filled,.tc-area-head .tc-dot,
  .catchip .cdot,.catrow .cdot,.log-item .cdot,.now-live-dot,
  .jr-tag .jr-odot,.jr-opt .jr-odot,.jr-task-bullet,
  .hb-swatch,.hb-color-custom,
  .maps-node.shape.ellipse,.maps-handle,.maps-collapse,.maps-zoom button,
  .finances-row .type-indicator{ border-radius:50% !important; }

  /* ---- Flat canvas: drop the textured/radial body + grid backdrops ---- */
  html,body{ background:var(--bg) !important; }
  body{
    background:var(--bg) !important;
    color:var(--text);
    -webkit-font-smoothing:antialiased;
  }
  /* The whole shell shifts right by the width of the fixed left nav rail.
     This keeps every existing grid-column:1 placement intact — the rail lives
     in the padding gutter, so nothing in the grid needs remapping. */
  .shell{
    grid-template-columns:1fr var(--rightcol-w,300px);
    padding-left:var(--leftnav-w);
    /* transparent so the fixed .eo-atmosphere layer (z:-1) reads through the
       canvas gaps; body keeps the solid --bg fill as the ultimate base. */
    background:transparent;
    transition:padding-left .22s ease, grid-template-columns .22s ease;
  }
  body.nav-collapsed .shell{
    padding-left:0;
    transition:padding-left .22s ease;
  }
  :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  ::selection{ background:rgba(var(--accent-rgb),.22); color:var(--text); }

  /* ============ Top bar — flat chrome, hairline seam ============ */
  .topbar{
    min-height:48px;
    padding:8px 16px;
    background:var(--panel);
    border-bottom:1px solid var(--line);
    backdrop-filter:none;
    box-shadow:none;
  }
  .brand{gap:10px;}
  .brand .glyph{
    width:28px;height:28px;border-radius:var(--r-md) !important;
    background:rgba(var(--text-rgb),.06);
    border:1px solid var(--line);
    box-shadow:none;
  }
  .brand .glyph svg{width:17px;height:17px;color:var(--muted);stroke:currentColor;}
  .brand h1{font-size:15px;font-weight:600;letter-spacing:0;color:var(--text);}
  .brand p{display:none;}   /* drop the decorative overline — Notion stays quiet */

  .save-indicator,.hbtn,.app-nav-back,.app-nav-tab,.track-tab,.chip,
  .todo-add-btn,.todo-all-actions-btn,.btn,.btn-primary,.pb-timerbtn{
    min-height:32px;
  }
  .save-indicator{
    background:transparent;border:none;color:var(--faint);
    font-weight:500;padding:4px 6px;
  }
  .save-indicator.saving{background:transparent;color:var(--warn);border:none;}
  .save-indicator.save-error{background:transparent;color:var(--danger);border:none;}
  .hbtn,.app-nav-back{
    width:30px;height:30px;
    background:transparent;
    border:1px solid transparent;
    color:var(--muted);
    box-shadow:none;
  }
  .hbtn:hover,.app-nav-back:hover:not(:disabled){
    color:var(--text);
    border-color:transparent;
    background:rgba(var(--text-rgb),.055);
    box-shadow:none;
  }

  /* ============ App nav — vertical left rail (sleek) ============ */
  .app-nav{
    position:fixed;left:0;top:0;bottom:0;
    width:var(--leftnav-w,180px);
    z-index:40;
    display:flex;flex-direction:column;align-items:stretch;
    min-height:0;padding:0;gap:0;overflow:hidden;
    background:var(--panel);
    border-right:1px solid var(--line-soft);
    border-bottom:none;
    backdrop-filter:none;box-shadow:none;
    transform:translateX(0);
    transition:transform .22s ease;
  }
  body.nav-collapsed .app-nav{
    transform:translateX(-100%);
  }

  /* ---- Drag-to-resize handle (right edge of nav) ---- */
  .nav-resize-handle{
    position:absolute;right:-4px;top:0;bottom:0;width:8px;
    cursor:col-resize;z-index:10;
  }
  .nav-resize-handle::after{
    content:'';position:absolute;left:3px;top:0;bottom:0;width:2px;
    background:transparent;transition:background .15s;border-radius:2px !important;
  }
  .nav-resize-handle:hover::after,.nav-resize-handle.dragging::after{background:var(--accent);}
  body.nav-resizing{cursor:col-resize !important;-webkit-user-select:none;user-select:none;}
  body.nav-resizing *{transition:none !important;}

  /* ---- Nav toggle button (topbar, always visible) ---- */
  .nav-toggle-btn{
    width:28px;height:28px;flex:0 0 auto;
    background:transparent;border:1px solid transparent;color:var(--muted);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    border-radius:999px !important;
    transition:color .1s,background .1s;
    margin-right:4px;
  }
  .nav-toggle-btn:hover{color:var(--text);background:rgba(var(--text-rgb),.055);}
  .nav-toggle-btn svg{width:15px;height:15px;flex:0 0 auto;}

  /* ---- Collapse button inside the nav header ---- */
  .nav-collapse-btn{
    width:20px;height:20px;flex:0 0 auto;
    background:transparent;border:1px solid transparent;color:rgba(var(--text-rgb),.35);
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    border-radius:8px !important;
    transition:color .1s,background .1s;
    opacity:0;
  }
  .nav-rail-top:hover .nav-collapse-btn{opacity:1;}
  .nav-collapse-btn:hover{color:var(--text);background:rgba(var(--text-rgb),.055);}
  .nav-collapse-btn svg{width:12px;height:12px;}

  .nav-rail-top{
    display:flex;align-items:center;gap:4px;
    padding:8px 8px 6px 10px;flex:0 0 auto;
  }
  .nav-brand{display:flex;align-items:center;gap:6px;min-width:0;flex:1;}
  .nav-brand-glyph{
    width:18px;height:18px;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
    background:rgba(var(--text-rgb),.05);border:1px solid var(--line-soft);
    border-radius:var(--r-md) !important;color:var(--faint);
  }
  .nav-brand-glyph svg{width:11px;height:11px;}
  .nav-brand-name{
    font-size:12.5px;font-weight:600;color:var(--text);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0;
    opacity:.8;min-width:0;flex:1;
  }
  .app-nav-back{
    width:20px;height:20px;flex:0 0 auto;
    background:transparent;border:1px solid transparent;color:rgba(var(--text-rgb),.35);
  }
  .app-nav-back:hover:not(:disabled){color:var(--text);background:rgba(var(--text-rgb),.05);border-color:transparent;}

  .nav-rail-list{
    flex:1 1 auto;min-height:0;overflow-y:auto;
    padding:1px 4px 4px;display:flex;flex-direction:column;gap:0;
    scrollbar-width:none;
  }
  .nav-rail-list::-webkit-scrollbar{display:none;}
  .nav-rail-bottom{
    flex:0 0 auto;padding:4px;border-top:1px solid var(--line-soft);
  }

  /* ---- Quick Log flyout — a normal flex child at the end of the nav
     list (flex:1 auto), so it only ever claims whatever empty space is
     left below the last real nav item. That's the actual point: an
     earlier version used a tall absolutely-positioned hover catcher here,
     which ended up sitting on top of real nav tabs whenever the list was
     long enough to reach it — swallowing their clicks and popping the
     panel open on hovers nowhere near it. Being a genuine in-flow sibling
     means it can never overlap another tab; it shrinks to nothing once
     the list has no leftover room, and the flyout simply isn't reachable
     then (no dead space, nothing to hide in). Collapsing the sidebar
     (transform:translateX(-100%) on .app-nav) already moves it off-screen,
     but it's hidden outright too so it can't be tabbed to while there. */
  .nav-quicklog{
    flex:1 1 auto;min-height:0;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:0 6px 6px;
  }
  body.nav-collapsed .nav-quicklog{display:none;}
  .nav-quicklog-panel{
    width:100%;
    background:linear-gradient(180deg,var(--panel-2),var(--panel));
    border:1px solid var(--line);
    border-radius:var(--r-lg) !important;
    box-shadow:0 10px 28px rgba(0,0,0,.4);
    padding:10px 10px 8px;
    transform:translateY(14px);
    opacity:0;
    pointer-events:none;
    transition:transform .2s ease,opacity .2s ease;
  }
  .nav-quicklog:hover .nav-quicklog-panel,
  .nav-quicklog:focus-within .nav-quicklog-panel{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  /* Section dividers — ultra-minimal */
  .nav-sec{
    font-size:9.5px;font-weight:700;letter-spacing:var(--tracking-label);text-transform:uppercase;
    color:rgba(var(--text-rgb),.38);padding:10px 5px 2px;
  }
  .nav-rail-list .nav-sec:first-child{padding-top:2px;}

  /* The page items */
  .app-nav-divider{display:none !important;}
  .app-nav-tab{
    display:flex;align-items:center;gap:6px;width:100%;text-align:left;
    margin:0;padding:3px 5px;min-height:26px;
    background:none;border:none;
    color:rgba(var(--text-rgb),.60);
    font-size:12.5px;font-weight:450;letter-spacing:0;
    border-radius:999px !important;
    position:relative;
    transition:color .1s ease,background .1s ease;
  }
  .app-nav-tab .nav-ic{
    width:13px;height:13px;flex:0 0 auto;color:rgba(var(--text-rgb),.40);
    transition:color .1s ease;
  }
  .app-nav-tab span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .app-nav-tab:hover{
    color:rgba(var(--text-rgb),.85);
    background:rgba(var(--text-rgb),.04);
  }
  .app-nav-tab:hover .nav-ic{color:rgba(var(--text-rgb),.60);}
  .app-nav-tab.active{
    color:var(--text);
    background:rgba(var(--accent-rgb),.1);
  }
  .app-nav-tab.active .nav-ic{color:var(--accent-soft);}
  .app-nav-tab.active::after{display:none;}
  /* Music toggle */
  .app-nav-tab.app-nav-music.music-on{
    color:rgba(var(--text-rgb),.72);
    background:rgba(var(--text-rgb),.05);
  }
  .app-nav-tab.app-nav-music.music-on .nav-ic{color:var(--accent-soft);}
  .app-nav-tab.app-nav-music.music-on::after{display:none;}

  /* ---- Expandable nav group (e.g. Database → Actions / Dates) — a
     disclosure tree: the twisty triangle sits on the LEFT of the row,
     pointing ▸ when collapsed and ▾ when expanded; children indent beneath. */
  .app-nav-group{display:flex;flex-direction:column;}
  /* Disclosure twisty — first element, before the icon */
  .nav-twisty{
    width:11px;height:11px;flex:0 0 auto;
    color:rgba(var(--text-rgb),.45);
    transition:transform .16s ease,color .1s ease;
  }
  .app-nav-parent:hover .nav-twisty{color:rgba(var(--text-rgb),.72);}
  .app-nav-group.expanded > .app-nav-parent .nav-twisty{transform:rotate(90deg);}
  .app-nav-parent.active .nav-twisty{color:var(--accent-soft);}

  /* The child list — hidden until the group is expanded */
  .app-nav-subgroup{display:none;flex-direction:column;}
  .app-nav-group.expanded > .app-nav-subgroup{display:flex;}
  /* Indented child rows — icon sits one level in (under the parent's label),
     with a faint guide line dropping from the parent's twisty column. */
  .app-nav-sub{
    padding-left:30px;min-height:24px;
  }
  .app-nav-sub::before{
    content:'';position:absolute;left:11px;top:0;bottom:0;width:1px;
    background:rgba(var(--text-rgb),.08);
  }
  .app-nav-sub.active::before{background:rgba(var(--accent-rgb),.5);}
  /* Double-nested sub items (e.g. Actions/Dates inside Database inside Logs) */
  .app-nav-sub.app-nav-sub-sub{padding-left:50px;}
  .app-nav-sub.app-nav-sub-sub::before{left:31px;}

  /* Identity now lives in the rail — drop the duplicate brand from the top bar */
  .topbar .brand{display:none;}

  /* ============ Panels & content surfaces — flat ============ */
  .dash-panel,.todo-panel,.through-panel,.projects-panel,.tc-panel,.gstack-panel,
  .finances-panel,.maps-panel,.as-panel,.vb-panel,.habits-panel,.coming-soon-panel{
    background:transparent;   /* canvas panels let the atmosphere show; cards stay opaque */
  }

  /* Coming Soon placeholder panel */
  .coming-soon-panel{
    display:none;flex-direction:column;align-items:center;justify-content:center;
    grid-column:1;grid-row:3;
    overflow:hidden;
  }
  .coming-soon-panel.visible{display:flex;}
  .cs-inner{
    display:flex;flex-direction:column;align-items:center;gap:16px;
    text-align:center;padding:48px 32px;max-width:360px;
  }
  .cs-inner svg{color:rgba(var(--text-rgb),.22);}
  .cs-inner h2{
    margin:0;font-size:18px;font-weight:600;
    color:rgba(var(--text-rgb),.60);letter-spacing:0;
  }
  .cs-inner p{
    margin:0;font-size:13px;line-height:1.6;
    color:rgba(var(--text-rgb),.45);
  }
  .content-zone{
    background:transparent;   /* atmosphere reads through the main content canvas */
    border-top:1px solid var(--line);
  }
  .todo-header,.finances-header,.as-subnav,.vb-subnav,.tc-subnav,.jr-subnav{
    min-height:48px;padding:8px 16px;
    background:var(--panel);
    border-bottom:1px solid var(--line);
  }
  .todo-section-label,.finances-section-label,.as-subnav-title,.vb-subnav-title,.todo-sidebar-label{
    color:var(--text);font-size:var(--fs-section);font-weight:600;letter-spacing:0;text-transform:none;
  }

  /* Cards: flat fill, hairline border, whisper-soft hover (no lift / glow) */
  .dash-card,.card,.heatmap-card,.tc-capture-card,.tc-quick-card,.tc-sprint,
  .tc-proj,.pl-col,.task-history-card,.finances-card,
  .tl-tabbed-card,.tl-timeline-card{
    background:var(--card) !important;
    border:1px solid var(--line) !important;
    box-shadow:none !important;
  }
  .dash-card:hover,.card:hover,.tc-quick-card:hover,.tc-sprint:hover,.tc-proj:hover,.finances-card:hover{
    border-color:var(--line-bright) !important;
    background:var(--card-hover) !important;
    box-shadow:none !important;
    transform:none !important;
  }

  /* ============ Music section ============ */
  .tab-strip{
    min-height:46px;padding:6px 16px;
    background:var(--panel);
    border-bottom:1px solid var(--line);
  }
  .track-tabs{gap:4px;padding:6px 0;}
  .track-tab{
    min-height:28px;padding:4px 10px;
    background:transparent;
    border:1px solid transparent;
    color:var(--muted);
    font-weight:500;
    box-shadow:none;
  }
  .track-tab:hover{
    color:var(--text);
    background:rgba(var(--text-rgb),.055);
    border-color:transparent;
    box-shadow:none;
  }
  .track-tab.active{
    color:var(--text);
    background:rgba(var(--text-rgb),.09);
    border-color:transparent;
    box-shadow:none;
  }

  .tile-panel{padding:14px 16px 16px;}
  .grid{gap:10px;}
  .mood{
    width:220px;min-height:140px;padding:16px;
    background:var(--card) !important;
    border:1px solid var(--line) !important;
    box-shadow:none !important;
  }
  .mood:hover,.mood.selected{
    border-color:var(--line-bright) !important;
    background:var(--card-hover) !important;
    transform:none !important;
    box-shadow:none !important;
  }
  .mood.selected{border-color:var(--accent) !important;box-shadow:inset 0 0 0 1px var(--accent) !important;}
  .mood .ic{width:40px;height:40px;background:rgba(var(--text-rgb),.06) !important;}
  .mood h3{font-size:15px;font-weight:600;margin-bottom:5px;color:var(--text);}
  .mood p{font-size:12.5px;color:var(--muted);}
  .mood .freq{font-size:11.5px;color:var(--faint);}
  .ev{border-radius:8px !important;padding:3px 7px;background:rgba(var(--text-rgb),.06);color:var(--muted);border-color:transparent;}

  /* ============ Music fly-out — picker anchored to the left nav gutter ======
     The track/preset picker overlays the fixed nav rail (same left:0 + width).
     Opens bottom-to-top: clip-path shrinks the top-inset from 100%→0, so the
     bottom (tiles) reveal first and the panel "rises" up to the nav top.
     Closing reverses: top disappears first, collapses back toward the Music btn. */
  .content-zone.music-flyout{
    position:fixed;left:0;bottom:0;top:auto;
    height:33vh;
    width:300px;
    z-index:46;
    display:flex;flex-direction:column;min-height:0;
    background:var(--panel);
    border-right:1px solid var(--line);
    border-top:1px solid var(--line);
    overflow:hidden;
    clip-path:inset(100% 0 0 0);
    opacity:0;pointer-events:none;
    transition:clip-path .32s cubic-bezier(.2,.8,.2,1),opacity .22s ease;
  }
  body.music-open .content-zone.music-flyout{
    clip-path:inset(0% 0 0 0);opacity:1;pointer-events:auto;
  }
  body.nav-collapsed .content-zone.music-flyout{
    clip-path:inset(100% 0 0 0) !important;opacity:0;pointer-events:none;
  }

  /* Header — reads as the active "Music" field from the reference */
  .music-flyout .mf-head{flex:0 0 auto;padding:12px 10px 8px;}
  .music-flyout .mf-title{
    display:flex;align-items:center;gap:8px;width:100%;
    padding:9px 12px;min-height:0;cursor:pointer;
    background:rgba(var(--accent-rgb),.08);
    border:1.5px solid var(--accent);
    border-radius:12px !important;
    color:var(--text);font-size:13px;font-weight:500;text-align:left;
    transition:background .12s ease,border-color .12s ease;
  }
  .music-flyout .mf-title:hover{background:rgba(var(--accent-rgb),.15);}
  .music-flyout .mf-ic{width:15px;height:15px;flex:0 0 auto;color:var(--accent-soft);}
  .music-flyout .mf-title span{flex:1;}

  /* Tabs → two-column wrap inside the narrow panel */
  .music-flyout .tab-strip{
    flex:0 0 auto;min-height:0;padding:2px 10px 6px;
    background:transparent;border-bottom:none;
  }
  .music-flyout .track-tabs{
    display:grid;grid-template-columns:1fr 1fr;gap:5px;
    padding:0;overflow:visible;
  }
  .music-flyout .track-tab{
    display:block;width:100%;text-align:left;
    padding:5px 9px;min-height:28px;font-size:11px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  /* Tiles — 2-column grid with full proportions */
  .music-flyout .tile-panel{
    flex:1 1 auto;min-height:0;
    overflow-y:auto;overflow-x:hidden;
    padding:8px 12px 12px;scrollbar-width:thin;
  }
  .music-flyout .grid{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
    grid-auto-rows:110px;
  }
  .music-flyout #moodGrid,
  .music-flyout #trackList{
    width:100%;
    grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
    align-content:start;
  }
  .music-flyout #trackList .track-tile{
    width:100% !important;min-width:0;
    align-self:stretch;justify-self:stretch;
  }
  .music-flyout .mood{
    width:auto !important;height:110px !important;min-height:0 !important;
    padding:12px !important;overflow:hidden;
    display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  }
  .music-flyout .mood .ev{display:none !important;}
  .music-flyout .mood .ic{width:36px !important;height:36px !important;flex-shrink:0;margin:0 !important;}
  .music-flyout .mood .ic svg{width:18px;height:18px;}
  .music-flyout .mood h3{
    margin:0 !important;font-size:12.5px !important;font-weight:600;
    line-height:1.3;white-space:normal;overflow:hidden;display:-webkit-box;
    -webkit-line-clamp:2;-webkit-box-orient:vertical;
  }
  .music-flyout .mood p,
  .music-flyout .mood .freq{display:none !important;}

  /* ============ Player bar — flat chrome ============ */
  .playerbar{
    min-height:88px;
    border-top:1px solid var(--line);
    background:var(--panel) !important;
    box-shadow:none;
  }
  .pb{padding:12px 16px;gap:16px;}
  .playerbar .play-btn,.cb-play{
    background:var(--accent) !important;
    color:var(--on-accent);
    box-shadow:var(--glow-accent) !important;
  }
  .playerbar .play-btn:hover,.cb-play:hover{background:var(--accent-soft) !important;}
  .playerbar .circle-btn,.music-collapse-btn,.sidepanel-collapse-btn,.cb-expand{
    background:transparent;border-color:transparent;color:var(--muted);
  }
  .playerbar .circle-btn:hover,.music-collapse-btn:hover,.sidepanel-collapse-btn:hover,.cb-expand:hover{
    color:var(--text);border-color:transparent;background:rgba(var(--text-rgb),.055);
  }

  /* ============ Right column / sidebar ============ */
  /* Keep an explicit width that tracks the resizer var so the panel holds its
     size while the grid's right track animates to 0 on collapse — it is then
     carried off the right edge instead of being squashed. */
  .rightcol{
    width:var(--rightcol-w,300px);
    justify-self:start;
    background:var(--panel);
    box-shadow:none;
  }
  .todo-sidebar,.compact-tracker,.rc-collapsed{
    background:var(--panel) !important;
    border-left:1px solid var(--line) !important;
  }
  .todo-sidebar-header{
    min-height:48px;
    background:var(--panel);
    border-bottom:1px solid var(--line);
  }
  .compact-tracker{padding:16px 18px;border-top:1px solid var(--line) !important;}
  .ct-time{font-size:32px;font-weight:300;color:var(--text);text-shadow:none;}

  /* ============ Inputs / controls ============ */
  input[type=range]{height:4px;background:rgba(var(--text-rgb),.13);}
  input[type=range]::-webkit-slider-thumb{
    width:14px;height:14px;background:#fff;border:1px solid rgba(var(--text-rgb),.15);box-shadow:0 1px 3px rgba(var(--text-rgb),.25);
  }
  textarea:focus,input[type=text]:focus,input[type=number]:focus,
  input[type=date]:focus,input[type=search]:focus,select:focus{
    box-shadow:0 0 0 2px rgba(var(--accent-rgb),.35);
  }

  /* Primary button — solid glossy cyan with ink text */
  .btn-primary{
    background:var(--accent) !important;
    color:var(--on-accent);
    box-shadow:none !important;
    font-weight:600;
  }
  .btn-primary:hover{background:var(--accent-soft) !important;box-shadow:none !important;transform:none !important;}
  .tc-btn-primary,.btn-start{box-shadow:none !important;}

  /* ============ Overlays — flat dark surface, soft shadow ============ */
  .modal,.popover{
    background:var(--card) !important;
    border:1px solid var(--line) !important;
    box-shadow:var(--sh-2) !important;
    backdrop-filter:none;
  }
  .modal-bg{background:rgba(var(--text-rgb),.35);backdrop-filter:none;}

  /* Real circles (repeated here so the blanket rounding can't override them) */
  .play-btn,.circle-btn,.cb-play,.orb,.orb .ring,.orb .core,.disc,.disc .label,
  .disc .hole,.evidence-row .dot,.save-dot,.track .tplay,.tc-chip .tc-dot,
  .tc-retro-filled,.tc-area-head .tc-dot,.catchip .cdot,.catrow .cdot,
  .log-item .cdot,.now-live-dot,.jr-tag .jr-odot,.jr-opt .jr-odot,
  .jr-task-bullet,.hb-swatch,.hb-color-custom,.maps-node.shape.ellipse,
  .maps-handle,.maps-collapse,.maps-zoom button,.finances-row .type-indicator{
    border-radius:50% !important;
  }

  /* ============ Notion database tables (Projects / Sprints / Actions) ============
     Projects and Sprints render their actions via flatActionRow (.tc-flat-row).
     Make them read like a Notion list-database: flush full-bleed rows divided by
     hairlines, a full-width hover highlight, and metadata shown as Notion
     property pills aligned to the right. */

  /* Project & Sprint headers read like a Notion table/page title with a rule */
  .tc-proj-head,.tc-sprint-head{
    padding-bottom:10px;
    border-bottom:1px solid var(--line);
    margin-bottom:4px;
  }
  .tc-proj-name,.tc-sprint .tc-proj-name{
    font-size:15px !important;font-weight:600 !important;letter-spacing:0 !important;color:var(--text);
  }
  /* Section labels inside a sprint sit like Notion view headers */
  .tc-sprint-section-label{
    font-size:11px;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--faint);font-weight:600;
  }

  /* The action lists: rows sit flush, divided by hairlines (no inter-row gap) */
  .tc-proj-actions,.tc-sprint-acts{gap:0 !important;}
  .tc-flat-row{
    border-radius:0 !important;
    align-items:center !important;
    gap:8px !important;
    padding:8px 4px !important;
    min-height:36px !important;
    border-bottom:1px solid var(--line-soft);
  }
  .tc-flat-row:last-child{border-bottom:none;}
  .tc-flat-row:hover{background:rgba(var(--text-rgb),.045) !important;}
  .tc-flat-name{font-size:14px !important;font-weight:450 !important;}
  .tc-flat-title-line{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    width:100% !important;
    min-width:0 !important;
  }
  .tc-flat-title-line .tc-flat-name{
    flex:1 1 260px !important;
    min-width:160px !important;
    max-width:520px !important;
    width:auto !important;
  }
  .tc-flat-inline-actions{
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
    flex:0 0 auto !important;
  }

  /* Metadata → Notion property pills, right-aligned */
  .tc-flat-meta{gap:6px !important;padding-top:0 !important;}
  .tc-flat-tag{
    font-size:12px !important;font-weight:500;color:var(--muted) !important;
    background:rgba(var(--text-rgb),.06);
    padding:1px 8px;border-radius:8px !important;line-height:1.6;
  }
  .tc-flat-tag-project{color:var(--accent) !important;background:rgba(var(--accent-rgb),.14);}
  .tc-flat-tag-sprint{color:var(--muted) !important;background:rgba(var(--text-rgb),.06);}
  .tc-flat-tag-sprint::before{background:var(--accent) !important;}
  /* Area + date cells are value/control swaps — pill the stable wrapper instead */
  .tc-flat-meta-item{
    background:rgba(var(--text-rgb),.06);
    border-radius:8px !important;padding:1px 8px;min-height:20px;
  }
  .tc-flat-tag-area,.tc-flat-area-sel,.tc-flat-date{background:none !important;color:var(--muted) !important;}
  .tc-flat-meta-value-empty{color:var(--faint) !important;opacity:.7 !important;}

  /* To-Do rail + Actions rows: same hairline-divided table rhythm */
  .tsb-rows .tsb-row,.rail-list .tsb-row{
    border-radius:0 !important;border-bottom:1px solid var(--line-soft);padding:7px 12px 7px 8px;
  }
  .tsb-rows .tsb-row:last-child,.rail-list .tsb-row:last-child{border-bottom:none;}
  .tsb-row:hover{background:rgba(var(--text-rgb),.045) !important;}
  .tsb-chip{background:rgba(var(--text-rgb),.06) !important;color:var(--muted) !important;border-radius:8px !important;}
  .tsb-chip-ctx{background:rgba(var(--accent-rgb),.14) !important;color:var(--accent) !important;}

  /* ---- Narrow / portrait windows ----
     A portrait secondary monitor puts the window under 900px wide. Dropping
     the right track here used to strand .rightcol in an implicit column past
     the viewport edge, so the queue read as blank. Keep the track — just cap
     it, so a 300px rail can't swallow a 700px window. --rightcol-narrow is
     inherited by .rightcol and by the peek rule at the bottom of this file,
     which is why it is declared on .shell rather than baked into each. */
  @media (max-width:900px){
    .shell{
      --rightcol-narrow:min(var(--rightcol-w,300px), 42vw);
      grid-template-columns:1fr var(--rightcol-narrow);
    }
    .rightcol{width:var(--rightcol-narrow);}
    :root{--leftnav-w:160px;}
    .app-nav{width:var(--leftnav-w,160px);}
    .topbar{padding:8px 12px;}
    .tile-panel{padding:12px 14px 14px;}
    .mood{width:200px;}
    .pb{padding:10px 14px;}
  }

/* =========================================================================
   HOME — quick-tick habit buttons (js/home.js). One button per habit from the
   Habits tab; clicking toggles today's completion in the Habits store. Done
   state mirrors the green of the Dates table's habit toggles so the screens
   read as the same action.
   ========================================================================= */
.home-habits{
  display:flex; flex-direction:column; gap:18px;
  padding:16px 18px;
}
.home-habits-empty{
  padding:24px 4px; color:var(--muted); font-size:13px;
}
.home-habit-group-label{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); margin-bottom:8px;
}
.home-habit-btns{
  display:flex; flex-wrap:wrap; gap:14px;
}
.home-habit-btn{
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-md,8px);
  color:var(--muted); font-size:13px; font-weight:var(--fw-sb,600); line-height:1;
  transition:color var(--t-snap) var(--ease), background var(--t-snap) var(--ease), border-color var(--t-snap) var(--ease);
}
.home-habit-btn:hover{ border-color:var(--line-bright); color:var(--text); }
.home-habit-btn .home-habit-emoji{
  font-size:15px; line-height:1; flex:0 0 auto;
}
.home-habit-btn .home-habit-check{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; flex:0 0 auto;
  border:1px solid var(--line-soft); border-radius:4px;
  font-size:11px; font-weight:700;
}
.home-habit-btn.is-done{
  color:var(--good); background:rgba(var(--good-rgb),.12); border-color:rgba(var(--good-rgb),.45);
}
.home-habit-btn.is-done:hover{ background:rgba(var(--good-rgb),.22); }
.home-habit-btn.is-done .home-habit-check{
  color:var(--good); border-color:rgba(var(--good-rgb),.55);
}

/* =====================================================================
   Sidebar morning habits — Today's Goals pane, right column.
   Always visible, no collapse toggle.
   ===================================================================== */
.sidebar-morning-habits{
  flex:0 0 auto; padding:10px 8px 12px;
  border-bottom:1px solid var(--line-soft);
  overflow-y:auto; max-height:60%;
}
.sidebar-morning-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.sidebar-morning-label{
  font-size:10px; text-transform:uppercase; letter-spacing:var(--tracking-label);
  color:var(--faint); font-weight:700;
}
.sidebar-morning-count{
  font-size:10px; color:var(--faint); font-variant-numeric:tabular-nums;
}
.sidebar-morning-emoji-row{
  display:flex; flex-direction:row; gap:6px; margin-bottom:8px;
}
.sidebar-morning-btns{
  display:flex; flex-direction:column; gap:8px;
}
.sidebar-morning-empty{
  font-size:12px; color:var(--faint); padding:8px 4px;
}
.sidebar-habit-btn{
  appearance:none; cursor:pointer; width:100%;
  display:flex; align-items:center; gap:8px;
  padding:7px 10px;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-md,8px);
  color:var(--muted); font-size:12.5px; font-weight:var(--fw-sb,600); line-height:1;
  text-align:left;
  transition:color var(--t-snap) var(--ease),background var(--t-snap) var(--ease),border-color var(--t-snap) var(--ease);
}
.sidebar-habit-btn:hover{ border-color:var(--line-bright); color:var(--text); }
.sidebar-habit-btn .sidebar-habit-emoji{ font-size:14px; line-height:1; flex:0 0 auto; }
.sidebar-habit-btn .sidebar-habit-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-habit-btn .sidebar-habit-check{
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; flex:0 0 auto;
  border:1px solid var(--line-soft); border-radius:4px;
  font-size:10px; font-weight:700;
}
.sidebar-habit-btn.is-done{
  color:var(--good); background:rgba(var(--good-rgb),.12); border-color:rgba(var(--good-rgb),.45);
  cursor:default;
}
.sidebar-habit-btn.is-done:hover{ background:rgba(var(--good-rgb),.12); border-color:rgba(var(--good-rgb),.45); }
.sidebar-habit-btn.is-done .sidebar-habit-check{
  color:var(--good); border-color:rgba(var(--good-rgb),.55);
}

/* Emoji-only variant — compact square buttons in a horizontal row */
.sidebar-habit-btn--emoji-only{
  width:auto; flex:1; justify-content:center; align-items:center;
  gap:4px; padding:8px 6px;
}
.sidebar-habit-btn--emoji-only .sidebar-habit-emoji{ font-size:18px; }

/* Text-only variant — no emoji, bigger text that wraps to 2 lines */
.sidebar-habit-btn--text-only{
  align-items:flex-start; padding:9px 10px; min-height:52px;
}
.sidebar-habit-btn--text-only .sidebar-habit-name{
  white-space:normal; overflow:visible; text-overflow:clip;
  font-size:14px; line-height:1.3; word-break:break-word;
}
.sidebar-habit-btn--text-only .sidebar-habit-check{ margin-top:2px; }

/* =======================================================================
   BRUSHED TITANIUM — ink on metal.
   The working cyan (and the cyan→silver gradients) are BRIGHT surfaces
   now, so everything that hard-codes white text/icons on an accent
   background flips to dark ink. Feature files keep their own rules;
   this layer is loaded last and simply re-inks them.
   ======================================================================= */
.play-btn,.cb-play,.btn-primary,
.brand .glyph,
.as-subnav-title .as-logo,.as-save-btn,
.jr-title .jr-logo,.jr-habit,.jr-scale-btn.on,
.finances-btn-primary,.habits-btn-primary,.hp-done-btn-checked,
.eo-btn-primary,.eo-chip-active,.eo-yn-btn.on,
.pg-banner-btn-primary,
.tc-subnav-title .tc-logo,.tc-subnav-btn.active,
.tc-subnav-btn:not(.active) .tc-count,.tc-btn-primary,
.vb-subnav-title .vb-logo,
.btn-start,
.tl-cal-done,.tl-chart-tab.active,.tl-tl-tab.active{
  color:var(--on-accent) !important;
}
::selection{ background:rgba(var(--accent-rgb),.30); color:var(--text); }

/* =====================================================================
   EMPIRIUM OS — GLOBAL ATMOSPHERE LAYER (Phase 1)
   One fixed, GPU-cheap, pointer-transparent element sitting BEHIND the app
   shell (z:-1 → above body's flat --bg fill, below all shell content). The
   canvas surfaces (.shell / .content-zone / feature panels) were set to
   transparent above so this reads through the gaps; opaque cards/chrome sit
   on top of it unchanged.

   Composition (all CSS/SVG, no image files, no video, no GIF, no external
   assets): flat canvas fill with a single quiet vignette. No grid, no
   scanline, no moving parts — a calm backdrop, not a HUD.

   DOM hook: <div class="eo-atmosphere" aria-hidden="true"></div> as the
   first child of <body> (see index.html). ::before/::after and
   .eo-atmos-rush are kept as no-op selectors (zero-size, no animation) so
   the existing DOM nodes and the visibility-pause IIFE in index.html stay
   harmless without needing an index.html edit.
   ===================================================================== */
.eo-atmosphere{
  position:fixed; inset:0; z-index:var(--z-bg,-1);
  pointer-events:none; overflow:hidden;
  background:
    radial-gradient(140% 120% at 50% 38%, transparent 55%, rgba(var(--accent-2-rgb),.035) 100%),
    var(--bg);
}
.eo-atmosphere::before,.eo-atmosphere::after{ content:none; }
.eo-atmos-rush{ display:none; }
@keyframes eoGridDrift{ from{transform:none;} to{transform:none;} }
@keyframes eoScanSweep{ from{transform:none;} to{transform:none;} }
@keyframes eoLineRush{ from{opacity:0;} to{opacity:0;} }

/* =========================================================================
   EMPIRIUM OS — PHASE 2 · PERSISTENT COMMAND SHELL
   Skin + motion for the FRAME the user always sees: left command rail, top
   system bar, right mission rail, bottom focus dock, plus reusable HUD
   furniture and a page-switch transition. Loaded last, so these presentational
   rules win the cascade over the flat "Brushed Titanium" chrome above.

   Scope discipline (do NOT touch): no persistence, store, timers, task/audio
   logic or routing is referenced here — every selector is cosmetic. Decorative
   motion animates transform/opacity ONLY and every loop flattens under
   prefers-reduced-motion AND html[data-motion="static"] (guards at the end of
   this block). Individual page bodies are intentionally left for later phases.
   ========================================================================= */

  /* ---- Phase-2 shell tokens (additive; names unique to this block) ---- */
  :root{
    --hud-r:3px;                              /* sharp shell corner              */
    --hud-edge-soft:rgba(var(--accent-rgb),.22);     /* dim bracket / seam              */
    --glass-chrome:linear-gradient(180deg,rgba(var(--panel-rgb),.85),rgba(var(--panel-rgb),.65));
    --mono:var(--font-mono,ui-monospace,'JetBrains Mono','Cascadia Mono',Consolas,monospace);
    --eo-seam-cycle:4.6s;
  }

  /* =======================================================================
     0 · SHARED HUD FURNITURE  (reusable utility classes — see ASSET_MANIFEST B)
     Pure CSS/pseudo-elements, no bitmap assets. Apply to any element.
     ======================================================================= */
  /* Corner brackets: a lit tick on the top-left + bottom-right corners. */
  .hud-corner-bracket{position:relative;}
  .hud-corner-bracket::before,.hud-corner-bracket::after{
    content:'';position:absolute;width:9px;height:9px;pointer-events:none;
    border:1px solid var(--hud-edge-soft);border-radius:0 !important;
  }
  .hud-corner-bracket::before{top:-1px;left:-1px;border-right:0;border-bottom:0;}
  .hud-corner-bracket::after{right:-1px;bottom:-1px;border-left:0;border-top:0;}
  .hud-corner-bracket.active-lit-corner::before,
  .hud-corner-bracket.active-lit-corner::after{
    box-shadow:0 0 4px rgba(var(--accent-rgb),.18);
  }
  /* Thin cyan power rail (drop as a 1px child, or between sections). */
  .hud-rail{
    height:1px;width:100%;flex:0 0 auto;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.5) 18%,
      rgba(var(--accent-rgb),.5) 82%,transparent);
    opacity:.7;
  }
  /* Double-hairline divider. */
  .hud-divider{
    height:0;border:0;border-top:1px solid var(--line);
    box-shadow:0 2px 0 -1px var(--line-soft);margin:8px 0;
  }
  /* Technical index numerals, e.g. 01 / 07. */
  .hud-index-badge{
    font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
    color:var(--faint);font-variant-numeric:tabular-nums;
  }
  /* Status dot, optional live pulse ring. */
  .hud-status-dot{
    width:7px;height:7px;border-radius:50% !important;flex:0 0 auto;position:relative;
    background:var(--accent);box-shadow:0 0 3px rgba(var(--accent-rgb),.35);
  }
  .hud-status-dot.is-live::after{
    content:'';position:absolute;inset:0;border-radius:50%;
    /* purpose: "online" heartbeat (MOTION_SYSTEM §HUD) — opacity/box-shadow ring only */
    animation:hudDotPing 2.1s ease-out infinite;
  }
  @keyframes hudDotPing{
    0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.3);}
    70%{box-shadow:0 0 0 6px rgba(var(--accent-rgb),0);}
    100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0);}
  }

  /* =======================================================================
     1 · LEFT NAVIGATION — command rail
     ======================================================================= */
  .app-nav{
    background:linear-gradient(180deg,var(--panel-2),var(--panel));
    border-right:1px solid var(--line);
    box-shadow:inset -1px 0 0 var(--line-soft), 1px 0 26px rgba(0,0,0,.35);
  }
  /* Section labels — technical tracking + a leading cyan tick. */
  .nav-sec{
    color:rgba(var(--accent-rgb),.55);
    letter-spacing:.16em;font-size:9px;font-weight:700;
    display:flex;align-items:center;gap:7px;
  }
  .nav-sec::before{
    content:'';width:10px;height:1px;flex:0 0 auto;background:var(--hud-edge-soft);
  }
  /* Page items — sharper corners, a hover light-sweep, a cyan "online" tick +
     framed active state so the current page reads clearly powered-on. */
  .app-nav-tab{
    border-radius:var(--hud-r) !important;
    overflow:hidden;
  }
  /* Hover light-sweep (skips the disclosure guide-line of sub rows, which use
     ::before). purpose: hover feedback (MOTION_SYSTEM §2) — transform only. */
  .app-nav-tab::after{
    content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
    background:linear-gradient(100deg,transparent 22%,rgba(var(--accent-rgb),.12) 50%,transparent 78%);
    transform:translateX(-120%);
  }
  .app-nav-tab:hover::after{
    transform:translateX(120%);
    transition:transform .5s var(--ease-hud);
  }
  /* Left cyan tick — grows in on active. Scoped to top-level rows so the
     sub-row disclosure guide (.app-nav-sub::before) is left intact. */
  .app-nav-tab:not(.app-nav-sub)::before{
    content:'';position:absolute;left:0;top:50%;
    width:2px;height:58%;border-radius:0 !important;background:var(--accent);
    box-shadow:0 0 4px rgba(var(--accent-rgb),.35);
    transform:translateY(-50%) scaleY(0);
    /* purpose: active-state indicator (MOTION_SYSTEM §2) — transform only */
    transition:transform var(--t-base) var(--ease-hud);
  }
  .app-nav-tab.active{
    background:linear-gradient(90deg,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.04));
    color:var(--text);
  }
  .app-nav-tab:not(.app-nav-sub).active::before{transform:translateY(-50%) scaleY(1);}
  .app-nav-tab.active .nav-ic{color:var(--accent);}
  /* Sub-row active guide reads as lit cyan. */
  .app-nav-sub.active{background:linear-gradient(90deg,rgba(var(--accent-rgb),.12),transparent);}

  /* =======================================================================
     2 · TOP SYSTEM BAR — glassy command bar
     ======================================================================= */
  .topbar{
    background:var(--glass-chrome);
    -webkit-backdrop-filter:var(--glass-blur);
            backdrop-filter:var(--glass-blur);
    border-bottom:1px solid var(--line);
    box-shadow:0 1px 0 var(--hud-edge-soft), 0 6px 22px rgba(0,0,0,.28);
    position:relative;z-index:var(--z-nav,30);
  }
  /* Thin cyan lower rail + a slow travelling highlight (system "power" seam). */
  .topbar::after{
    content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.34),rgba(var(--accent-rgb),.18),rgba(var(--accent-rgb),.34),transparent);
    box-shadow:0 0 4px rgba(var(--accent-rgb),.12);
    opacity:.72;
  }
  .topbar::before{
    content:'';position:absolute;left:-120%;bottom:-2px;height:3px;width:240%;pointer-events:none;
    background:repeating-linear-gradient(90deg,
      transparent 0 38px,
      rgba(var(--accent-rgb),.12) 38px 44px,
      rgba(var(--accent-rgb),.72) 44px 48px,
      rgba(var(--accent-rgb),.16) 48px 56px,
      transparent 56px 92px);
    box-shadow:0 0 6px rgba(var(--accent-rgb),.14);
    opacity:.52;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
    will-change:transform,opacity;
    /* purpose: ambient chrome sweep (MOTION_SYSTEM §1) — transform/opacity only */
    animation:none;
  }
  .topbar::before{ display:none; animation:none; }
  /* Saved / sync indicator → a monospace system-status readout. */
  .save-indicator{
    font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--muted);gap:7px;padding:4px 10px;
    border:1px solid var(--line-soft);border-radius:var(--hud-r) !important;
    background:rgba(var(--good-rgb),.06);
  }
  .save-indicator.saving{background:rgba(var(--warn-rgb),.08);border-color:rgba(var(--warn-rgb),.28);color:var(--warn);}
  .save-indicator.save-error{background:rgba(var(--danger-rgb),.08);border-color:rgba(var(--danger-rgb),.32);color:var(--danger);}
  .save-indicator .save-dot{box-shadow:0 0 3px rgba(var(--good-rgb),.35);}
  /* Capture = primary command (cyan). Regulate = amber action-required. */
  .eo-top-btn{
    border-radius:var(--hud-r) !important;
    text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:700;
  }
  #eoCaptureBtn{
    background:linear-gradient(180deg,rgba(var(--accent-rgb),.92),rgba(var(--accent-rgb),.7));
    color:var(--on-accent);border-color:transparent;
    box-shadow:0 0 0 1px rgba(var(--accent-rgb),.4),0 0 7px rgba(var(--accent-rgb),.15);
  }
  #eoCaptureBtn:hover{
    background:var(--accent);
    box-shadow:0 0 0 1px rgba(var(--accent-rgb),.55),0 0 9px rgba(var(--accent-rgb),.22);
  }
  .eo-top-btn.eo-top-reg{
    color:var(--warn);border-color:rgba(var(--warn-rgb),.42);background:rgba(var(--warn-rgb),.09);
  }
  .eo-top-btn.eo-top-reg:hover{
    color:var(--warn);border-color:var(--warn);background:rgba(var(--warn-rgb),.16);
    box-shadow:0 0 6px rgba(var(--warn-rgb),.13);
  }

  /* =======================================================================
     3 · RIGHT MISSION RAIL — tactical console
     ======================================================================= */
  .rightcol{
    background:linear-gradient(180deg,var(--panel-2),var(--panel));
    box-shadow:inset 1px 0 0 var(--line-soft), -1px 0 26px rgba(0,0,0,.3);
  }
  .todo-sidebar-header{
    background:linear-gradient(180deg,var(--panel-2),var(--panel));
    position:relative;
  }
  .todo-sidebar-header::after{
    content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.4),transparent);
  }
  /* Sidepanel tabs → HUD segmented control. */
  .sidepanel-tabs{
    gap:0;padding:2px;flex:1;
    border:1px solid var(--line-soft);border-radius:var(--hud-r) !important;
    background:rgba(var(--text-rgb),.03);
  }
  .sidepanel-tab{
    flex:1;border-radius:2px !important;letter-spacing:.1em;
    transition:color .15s,background .15s,box-shadow .15s;
  }
  .sidepanel-tab.is-active{
    color:var(--on-accent);
    background:linear-gradient(180deg,rgba(var(--accent-rgb),.92),rgba(var(--accent-rgb),.7));
    box-shadow:0 0 5px rgba(var(--accent-rgb),.13);
  }
  /* Goals sub-tabs (Today's Plan / This Week …) read as cyan HUD tabs. */
  .goals-subtab.is-active{color:var(--accent);border-bottom-color:var(--accent);}
  /* Mission sectors (This Morning / Afternoon / Tomorrow / Later) → tactical
     blocks with a sharp lit left edge. */
  .bookmark-bar{
    border-radius:var(--hud-r) !important;
    border-left:2px solid var(--bm-color,var(--accent));
    background:linear-gradient(90deg,rgba(var(--accent-rgb),.05),transparent 70%),var(--card-subtle);
  }
  .bookmark-bar-label{letter-spacing:.16em;}
  /* Task rows: crisper hover + a cyan left edge when a field inside is focused. */
  .rail-list .tsb-row:hover,.tsb-rows .tsb-row:hover{
    background:rgba(var(--accent-rgb),.06) !important;
  }
  .rail-list .tsb-row:focus-within,.tsb-rows .tsb-row:focus-within{
    background:rgba(var(--accent-rgb),.08) !important;
    box-shadow:inset 2px 0 0 var(--accent);
  }
  /* Sharper HUD checkboxes — restyled native inputs (behaviour unchanged). */
  .tsb-check{
    -webkit-appearance:none;appearance:none;
    width:15px;height:15px;border-radius:2px !important;
    border:1px solid var(--line-bright);background:var(--card-subtle);
    position:relative;cursor:pointer;flex:0 0 auto;
    transition:border-color .15s,background .15s,box-shadow .15s;
  }
  .tsb-check:hover{border-color:var(--accent);}
  .tsb-check:checked{
    border-color:var(--accent);
    background:linear-gradient(180deg,rgba(var(--accent-rgb),.92),rgba(var(--accent-rgb),.7));
    box-shadow:0 0 4px rgba(var(--accent-rgb),.18);
  }
  .tsb-check:checked::after{
    content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;
    border:solid var(--on-accent);border-width:0 2px 2px 0;
    transform:rotate(45deg);
  }
  .tsb-check:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}

  /* =======================================================================
     4 · BOTTOM FOCUS DOCK — glass HUD
     ======================================================================= */
  .playerbar{
    background:var(--glass-chrome) !important;
    -webkit-backdrop-filter:var(--glass-blur);
            backdrop-filter:var(--glass-blur);
    border-top:1px solid rgba(var(--accent-rgb),.18);
    box-shadow:
      0 -1px 0 rgba(var(--accent-rgb),.14),
      0 -8px 30px rgba(0,0,0,.42),
      0 -13px 28px -22px rgba(var(--accent-rgb),.45);
    position:relative;
  }
  /* Neon cyan top rail on the dock: quiet base + synchronized segmented current. */
  .playerbar::before{
    content:'';position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;z-index:2;
    background:
      linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.3) 14%,rgba(var(--accent-rgb),.14) 50%,rgba(var(--accent-rgb),.3) 86%,transparent),
      linear-gradient(90deg,rgba(var(--accent-rgb),.06),rgba(var(--accent-rgb),.18),rgba(var(--accent-rgb),.06));
    box-shadow:
      0 0 6px rgba(var(--accent-rgb),.26),
      0 0 15px rgba(var(--accent-rgb),.13);
  }
  .playerbar::after{
    content:'';position:absolute;left:0;top:-2px;width:38%;height:4px;pointer-events:none;z-index:3;
    background:linear-gradient(90deg,
      transparent 0 5%,
      rgba(var(--accent-rgb),.06) 7%,
      rgba(var(--accent-rgb),.62) 9%,
      rgba(var(--accent-rgb),.12) 11%,
      transparent 14%,
      transparent 43%,
      rgba(var(--accent-rgb),.08) 46%,
      rgba(var(--accent-rgb),.92) 48%,
      rgba(var(--accent-rgb),.16) 50%,
      transparent 54%,
      transparent 72%,
      rgba(var(--accent-rgb),.05) 76%,
      rgba(var(--accent-rgb),.48) 78%,
      transparent 83%);
    box-shadow:
      0 0 6px rgba(var(--accent-rgb),.52),
      0 0 16px rgba(var(--accent-rgb),.24),
      0 4px 12px rgba(var(--accent-rgb),.08);
    opacity:0;
    will-change:transform,opacity;
    /* purpose: synchronized signal packet above the music deck - transform/opacity only */
    animation:eoSignalFlowX var(--eo-seam-cycle,4.6s) linear infinite;
  }
  @keyframes eoSignalFlowX{
    0%{ transform:translate3d(-118%,0,0); opacity:0; }
    6%{ opacity:.78; }
    34%{ opacity:.66; }
    66%{ opacity:.82; }
    86%{ opacity:0; }
    100%{ transform:translate3d(320%,0,0); opacity:0; }
  }
  /* Inactive dock controls stay muted; active/live cyan glow is earned. */
  .playerbar .circle-btn.active{
    color:var(--accent);border-color:rgba(var(--accent-rgb),.5);
    background:rgba(var(--accent-rgb),.1);
  }

  /* =======================================================================
     5 · GLOBAL PAGE TRANSITION
     Pure CSS keyed on the existing `.visible` class that app-nav.js already
     toggles — no routing/JS change, so there is zero routing risk. A short
     crossfade + 6px rise on the top-level panel containers only (inner
     sub-views are excluded to avoid double-animating). Reduced-motion / static
     collapse it to an instant opacity settle via the global guards + the rule
     below. purpose: orientation on view switch (MOTION_SYSTEM §3).
     ======================================================================= */
  @keyframes eoPanelIn{
    from{opacity:0;transform:translateY(6px);}
    to{opacity:1;transform:translateY(0);}
  }
  .eo-panel.visible,.dash-panel.visible,.prod-panel.visible,.todo-panel.visible,
  .projects-panel.visible,.tc-panel.visible,.through-panel.visible,.journal-panel.visible,
  .habits-panel.visible,.maps-panel.visible,.db-panel.visible,.plan-panel.visible,
  .finances-panel.visible,.vb-panel.visible,.as-panel.visible,.gstack-panel.visible,
  .coming-soon-panel.visible,#planningBoardPanel.visible,#vaultPanel.visible,
  #customPagesPanel.visible{
    animation:eoPanelIn var(--t-base) var(--ease-hud) both;
  }

  /* =======================================================================
     6 · MOTION GUARDS — flatten all Phase-2 decorative loops.
     The global reduced-motion / [data-motion="static"] guards (tokens.css)
     already neutralise durations; these remove ambient sweeps outright so a
     static frame never freezes mid-animation.
     ======================================================================= */
  @media (prefers-reduced-motion:reduce){
    .topbar::before,.playerbar::after,.hud-status-dot.is-live::after{display:none;}
    .eo-panel.visible,.dash-panel.visible,.prod-panel.visible,.todo-panel.visible,
    .projects-panel.visible,.tc-panel.visible,.through-panel.visible,.journal-panel.visible,
    .habits-panel.visible,.maps-panel.visible,.db-panel.visible,.plan-panel.visible,
    .finances-panel.visible,.vb-panel.visible,.as-panel.visible,.gstack-panel.visible,
    .coming-soon-panel.visible,#planningBoardPanel.visible,#vaultPanel.visible,
    #customPagesPanel.visible{animation:none;}
  }
  html[data-motion="static"] .topbar::before,
  html[data-motion="static"] .playerbar::after,
  html[data-motion="static"] .hud-status-dot.is-live::after{display:none !important;}

/* =========================================================================
   EMPIRIUM OS — PHASE 2.5 · IMMERSIVE HUD PASS
   Deepens the command-deck read established in Phases 1–2: content cards get
   technical panel framing, section labels get a consistent HUD grammar, the
   right mission rail reads more tactical, the left rail gets a power seam,
   and the bottom dock earns its glow on active controls only. Skin + motion
   only — no store/persistence/timer/task/audio/routing logic referenced;
   every selector below is cosmetic and every new transition inherits the
   existing global reduced-motion / html[data-motion="static"] kill-switch
   (tokens.css) automatically, since none of it is looped/infinite.
   ========================================================================= */

  /* =======================================================================
     1 · CONTENT CARDS — technical HUD panel treatment
     One consistent panel language across dash/heatmap/TC/finances/EO cards:
     a faint top seam, a two-tier border, a restrained hover lift, and an
     EARNED glow reserved for hero/active/live/selected cards only — never
     applied uniformly (per the "no glow everywhere" rule).
     ======================================================================= */
  .dash-card,.card,.heatmap-card,.tc-capture-card,.tc-quick-card,.tc-sprint,
  .tc-proj,.pl-col,.task-history-card,.finances-card,
  .tl-tabbed-card,.tl-timeline-card,.eo-card,.mood{
    position:relative;
    background:linear-gradient(165deg,var(--card),var(--card-subtle)) !important;
    box-shadow:inset 0 0 0 1px var(--line-soft), var(--sh-1) !important;
    transition:border-color var(--t-base,.22s) var(--ease-hud),
      box-shadow var(--t-base,.22s) var(--ease-hud),
      transform var(--t-base,.22s) var(--ease-hud) !important;
  }
  /* Technical header seam — a hairline cyan tick under the top edge. */
  .dash-card::before,.card::before,.heatmap-card::before,.tc-capture-card::before,
  .tc-quick-card::before,.tc-sprint::before,.tc-proj::before,.pl-col::before,
  .task-history-card::before,.finances-card::before,
  .tl-tabbed-card::before,.tl-timeline-card::before,
  .eo-card::before{
    content:'';position:absolute;top:0;left:14px;right:14px;height:1px;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.2),transparent);
    opacity:.4;
  }
  .dash-card:hover,.card:hover,.tc-quick-card:hover,.tc-sprint:hover,.tc-proj:hover,
  .finances-card:hover,.eo-card:hover{
    border-color:var(--line-bright) !important;
    box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.16), 0 8px 22px -10px rgba(0,0,0,.6), var(--sh-1) !important;
    transform:translateY(-1px) !important;
  }
  /* Earned corner light — hero / active / selected / live only. */
  .eo-card-hero,.tc-sprint.active,.eo-sprint-card.active,.mood.selected,
  .eo-block.live,.dash-card.is-active,.tc-proj.active{
    box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.22),
      0 0 0 1px rgba(var(--accent-rgb),.12), 0 0 10px -4px rgba(var(--accent-rgb),.15) !important;
  }
  .eo-card-hero::after,.tc-sprint.active::after,.eo-sprint-card.active::after{
    content:'';position:absolute;top:-1px;right:-1px;width:14px;height:14px;pointer-events:none;
    border-top:1.5px solid var(--hud-edge);border-right:1.5px solid var(--hud-edge);
    box-shadow:1px -1px 4px rgba(var(--accent-rgb),.18);
  }
  /* Card headers read as a compact technical rail: tracked label, thin rule. */
  .eo-card-head{ background:rgba(var(--accent-rgb),.025); }
  .eo-card-title{ letter-spacing:.14em; }
  .dash-card-hd,.card-hd,.tc-quick-hd{ letter-spacing:.06em; }

  /* =======================================================================
     2 · SECTION HIERARCHY — one grammar for kickers, dividers, readouts
     ======================================================================= */
  .eo-kicker,.section-label,.tc-sprint-section-label,.finances-section-label,
  .group-head{
    position:relative;letter-spacing:.16em;
  }
  .eo-kicker::before,.section-label::before,.group-head::before{
    content:'';display:inline-block;width:9px;height:1px;margin-right:8px;
    background:var(--hud-edge-soft);vertical-align:middle;
  }
  /* Thin cyan rule under page titles — "module online" read. */
  .eo-page-head{ position:relative; }
  .eo-page-head::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
    background:linear-gradient(90deg,rgba(var(--accent-rgb),.4),transparent 65%);
  }
  /* Compact mono readouts wherever a value is stated as metadata. */
  .eo-card-meta,.hud-index-badge,.eo-block-meta,.eo-gate-meta{
    font-family:var(--mono);font-variant-numeric:tabular-nums;
  }

  /* =======================================================================
     3 · RIGHT MISSION RAIL — tactical sector feel
     ======================================================================= */
  /* Mission sectors get a sharper lit edge + a faint interior wash so the
     active/"now" sector reads as powered-on against the others. */
  .bookmark-bar{
    box-shadow:inset 0 0 0 1px var(--line-soft), -2px 0 5px -3px rgba(var(--accent-rgb),.2);
  }
  .bookmark-bar-now{
    box-shadow:inset 0 0 0 1px rgba(var(--good-rgb),.28), -2px 0 6px -3px rgba(var(--good-rgb),.35);
  }
  /* Row scanning sweep on hover — mirrors the nav hover-sweep language. */
  .rail-list .tsb-row,.tsb-rows .tsb-row{ position:relative; overflow:hidden; }
  .rail-list .tsb-row::after,.tsb-rows .tsb-row::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(100deg,transparent 30%,rgba(var(--accent-rgb),.06) 50%,transparent 70%);
    transform:translateX(-120%);
  }
  .rail-list .tsb-row:hover::after,.tsb-rows .tsb-row:hover::after{
    transform:translateX(120%);
    transition:transform .55s var(--ease-hud);
  }
  /* Nested sub-actions (checklist items indented under a task) read as
     tactical sub-steps: a faint guide line + tighter type. */
  .tc-flat-row .tc-flat-row,.tsb-row .tsb-row{
    padding-left:20px !important;position:relative;
  }
  .tc-flat-row .tc-flat-row::before,.tsb-row .tsb-row::before{
    content:'';position:absolute;left:8px;top:0;bottom:0;width:1px;
    background:var(--line-soft);
  }

  /* =======================================================================
     4 · LEFT COMMAND RAIL — power seam + locked-on active state
     ======================================================================= */
  .app-nav{ position:fixed; } /* (already fixed; ensures seam pseudo-elements anchor correctly) */
  .app-nav::before{
    content:'';position:absolute;right:-1px;top:0;width:4px;height:34%;pointer-events:none;z-index:2;
    background:linear-gradient(180deg,
      transparent 0 5%,
      rgba(var(--accent-rgb),.06) 7%,
      rgba(var(--accent-rgb),.62) 9%,
      rgba(var(--accent-rgb),.12) 11%,
      transparent 14%,
      transparent 43%,
      rgba(var(--accent-rgb),.08) 46%,
      rgba(var(--accent-rgb),.92) 48%,
      rgba(var(--accent-rgb),.16) 50%,
      transparent 54%,
      transparent 72%,
      rgba(var(--accent-rgb),.05) 76%,
      rgba(var(--accent-rgb),.48) 78%,
      transparent 83%);
    box-shadow:
      0 0 3px rgba(var(--accent-rgb),.25),
      -5px 0 8px rgba(var(--accent-rgb),.1);
    opacity:0;
    transform:translate3d(0,-118%,0);
    will-change:transform,opacity;
    /* purpose: synchronized signal packet on the left navigation seam - transform/opacity only */
    animation:none;
  }
  .app-nav::after{
    content:'';position:absolute;top:0;bottom:0;right:0;width:2px;pointer-events:none;
    background:
      linear-gradient(180deg,transparent,rgba(var(--accent-rgb),.2) 12%,rgba(var(--accent-rgb),.1) 50%,rgba(var(--accent-rgb),.2) 88%,transparent),
      linear-gradient(180deg,transparent,rgba(var(--accent-rgb),.08),transparent);
    box-shadow:
      0 0 3px rgba(var(--accent-rgb),.14),
      -4px 0 7px rgba(var(--accent-rgb),.05);
  }
  @keyframes eoSignalFlowY{
    0%{ transform:translate3d(0,-118%,0); opacity:0; }
    6%{ opacity:.78; }
    34%{ opacity:.66; }
    66%{ opacity:.82; }
    86%{ opacity:0; }
    100%{ transform:translate3d(0,320%,0); opacity:0; }
  }
  @media (prefers-reduced-motion:reduce){
    .app-nav::before{ display:none; }
  }
  html[data-motion="static"] .app-nav::before{ display:none !important; }
  .app-nav-tab.active{
    box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.14);
  }

  /* =======================================================================
     5 · BOTTOM FOCUS DOCK — earned glow on active controls only
     ======================================================================= */
  .playerbar .circle-btn.active,.playerbar .cb-play{
    box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35),0 0 6px rgba(var(--accent-rgb),.15) !important;
  }
  .pb-eq i{ opacity:.85; }
  .pb-timerbtn:hover{ box-shadow:0 0 0 1px rgba(var(--accent-rgb),.3); }

  /* =======================================================================
     6 · MICRO-DETAIL — restrained, rare-accent decorative furniture
     ======================================================================= */
  /* Corner ticks for panel headers, applied only where already flagged. */
  .eo-card-hero .eo-card-head,.tc-sprint.active .tc-proj-head{
    border-bottom-color:rgba(var(--accent-rgb),.24);
  }
  /* Amber is reserved for regulation / warning states — reinforce, not new. */
  .eo-protocol-btn.active{ box-shadow:inset 0 0 0 1px rgba(var(--warn-rgb),.22); }
  /* Rare magenta accent — dream/mood/knowledge modules only, one touch. */
  .eo-dream-col.now .eo-dream-col-head::after{
    content:'';display:inline-block;width:5px;height:5px;border-radius:50% !important;
    margin-left:6px;background:var(--accent-2);box-shadow:0 0 3px rgba(var(--accent-2-rgb),.3);
  }

/* =========================================================================
   EMPIRIUM OS - PHASE 4 · PRODUCTION CYBERDECK
   Star Trek clarity + Deus Ex tactical density + cyberpunk edge-lighting,
   tuned for daily use. This is a final cascade layer only: no behavior, data,
   or layout ownership changes. Glow remains earned by active/live/selected
   states; ordinary software stays quiet, readable, and fast.
   ========================================================================= */

  :root{
    --hud-r:3px;
    --hud-edge-soft:rgba(var(--accent-rgb),.32);
    --hud-grid-faint:rgba(var(--accent-rgb),.045);
    --hud-panel-noise:rgba(255,255,255,.018);
    --hud-panel-wear:rgba(255,255,255,.035);
    --hud-command-fill:rgba(var(--accent-rgb),.1);
    --hud-command-fill-strong:rgba(var(--accent-rgb),.16);
    --mono:var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
  }

  /* Background: quiet canvas fill, no grid/scanline texture. */
  .eo-atmosphere{
    background:
      radial-gradient(140% 120% at 50% 38%, transparent 55%, rgba(var(--accent-2-rgb),.035) 100%),
      var(--bg);
  }
  .eo-atmosphere::before,.eo-atmosphere::after{ content:none; }

  /* Chrome: top and left rails become instrument hardware, not app bars. */
  .topbar{
    min-height:46px;
    background:
      linear-gradient(90deg, rgba(var(--accent-rgb),.05), transparent 28%, transparent 72%, rgba(var(--warn-rgb),.035)),
      linear-gradient(180deg, rgba(var(--panel-rgb),.92), rgba(var(--panel-rgb),.8));
    border-bottom-color:rgba(var(--accent-rgb),.2);
    box-shadow:0 1px 0 rgba(var(--accent-rgb),.06), 0 12px 30px -26px rgba(var(--accent-rgb),.3);
  }
  .topbar::after{
    content:'';position:absolute;left:16px;right:16px;bottom:-1px;height:1px;pointer-events:none;
    background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.55) 12%, rgba(var(--accent-rgb),.16) 52%, rgba(var(--warn-rgb),.28) 82%, transparent);
  }
  .app-nav{
    background:
      linear-gradient(180deg, rgba(var(--panel-rgb),.9), rgba(var(--panel-rgb),.96)),
      linear-gradient(90deg, rgba(var(--accent-rgb),.035), transparent 34%);
    border-right-color:rgba(var(--accent-rgb),.15);
  }
  .nav-rail-top{
    min-height:42px;
    border-bottom:1px solid var(--line-soft);
    background:rgba(var(--accent-rgb),.025);
  }
  .nav-brand-name,.nav-sec,.app-nav-tab{
    font-family:var(--mono);
  }
  .nav-brand-name{
    letter-spacing:.08em;text-transform:uppercase;font-size:10.5px;
  }
  .nav-brand-ver{color:var(--accent);margin-left:5px;}
  .app-nav-tab{
    border-radius:var(--hud-r) !important;
    margin:1px 0;
    min-height:28px;
    font-size:11px;
    letter-spacing:.02em;
  }
  .app-nav-tab::before{
    content:'';position:absolute;left:0;top:7px;bottom:7px;width:1px;
    background:transparent;box-shadow:none;
  }
  .app-nav-tab:hover{
    background:linear-gradient(90deg, rgba(var(--accent-rgb),.07), rgba(var(--accent-rgb),.025));
  }
  .app-nav-tab.active{
    background:
      linear-gradient(90deg, rgba(var(--accent-rgb),.18), rgba(var(--accent-rgb),.06) 58%, transparent),
      rgba(var(--accent-rgb),.035);
    color:var(--text);
    border:1px solid rgba(var(--accent-rgb),.18);
    box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.1), 0 0 6px -4px rgba(var(--accent-rgb),.32);
  }
  .app-nav-tab.active::before{
    background:var(--accent);
    box-shadow:0 0 5px rgba(var(--accent-rgb),.32);
  }

  /* Tabs: from soft pills/underlines to console switch banks. */
  .eo-tabs,.track-tabs,.tsb-filters,.goals-subtabs,.sidepanel-tabs{
    border:1px solid var(--line-soft);
    border-radius:var(--hud-r) !important;
    background:
      linear-gradient(180deg, rgba(var(--accent-rgb),.035), rgba(255,255,255,.012)),
      var(--card-subtle);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);
  }
  .eo-tabs{
    padding:3px;gap:2px;border-bottom:1px solid var(--line-soft);margin-bottom:14px;
  }
  .eo-tab,.track-tab,.tsb-filter,.goals-subtab,.sidepanel-tab{
    font-family:var(--mono);
    border-radius:2px !important;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:10.5px;
    border:1px solid transparent !important;
    color:var(--muted);
  }
  .eo-tab{
    padding:7px 11px;
    border-bottom:none !important;
    background:transparent;
  }
  .eo-tab:hover,.track-tab:hover,.tsb-filter:hover,.goals-subtab:hover{
    background:rgba(var(--accent-rgb),.055);
    color:var(--text);
  }
  .eo-tab.active,.track-tab.active,.tsb-filter.active,.tsb-filter.is-active,
  .goals-subtab.is-active,.sidepanel-tab.is-active{
    color:var(--on-accent);
    background:linear-gradient(180deg, rgba(var(--accent-rgb),.9), rgba(var(--accent-rgb),.62));
    border-color:rgba(var(--accent-rgb),.45) !important;
    box-shadow:0 0 6px -3px rgba(var(--accent-rgb),.38), inset 0 1px 0 rgba(255,255,255,.2);
  }
  .track-tabs{padding:3px;gap:2px;}
  .track-tab{min-height:28px;padding:5px 10px;}

  /* Panels: add module furniture, index badges, and quiet worn material. */
  .eo-card,.dash-card,.card,.heatmap-card,.tc-capture-card,.tc-quick-card,
  .tc-sprint,.tc-proj,.pl-col,.task-history-card,.finances-card,
  .tl-tabbed-card,.tl-timeline-card,.mood,.track,.eo-command-hero{
    border-radius:var(--hud-r) !important;
    overflow:hidden;
    background:
      linear-gradient(135deg, var(--hud-panel-wear), transparent 15% 78%, rgba(var(--accent-rgb),.025)),
      linear-gradient(165deg,var(--card),var(--card-subtle)) !important;
  }
  .eo-card::after,.dash-card::after,.card::after,.tc-capture-card::after,
  .tc-quick-card::after,.tc-sprint::after,.tc-proj::after,.finances-card::after,
  .mood::after,.track::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:
      linear-gradient(90deg, transparent 0 18px, var(--hud-panel-noise) 18px 19px, transparent 19px),
      repeating-linear-gradient(0deg, transparent 0 17px, rgba(255,255,255,.012) 17px 18px);
    opacity:.55;
    mix-blend-mode:screen;
  }
  .eo-card-head{
    min-height:38px;
    padding:10px 14px 9px;
    border-bottom-color:rgba(var(--accent-rgb),.13);
    background:
      linear-gradient(90deg, rgba(var(--accent-rgb),.055), transparent 60%),
      rgba(255,255,255,.012);
  }
  .eo-card-title,.dash-card-title,.card-title,.tc-view-title,.todo-section-label,
  .finances-section-label,.as-subnav-title,.vb-subnav-title,.todo-sidebar-label{
    font-family:var(--mono);
    text-transform:uppercase;
    letter-spacing:.14em;
  }
  .eo-card-title::before{
    content:'// ';color:var(--accent);opacity:.78;
  }
  .eo-card-meta{
    font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  }
  .eo-card:nth-of-type(1){--hud-index:'01';}
  .eo-card:nth-of-type(2){--hud-index:'02';}
  .eo-card:nth-of-type(3){--hud-index:'03';}
  .eo-card:nth-of-type(4){--hud-index:'04';}
  .eo-card:nth-of-type(5){--hud-index:'05';}
  .eo-card:nth-of-type(6){--hud-index:'06';}
  .eo-card-head::after{
    content:var(--hud-index,'SYS');
    margin-left:auto;
    font-family:var(--mono);
    font-size:9px;
    letter-spacing:.12em;
    color:rgba(var(--accent-rgb),.48);
  }
  .eo-card-head .eo-card-meta + .eo-card-actions{margin-left:10px;}
  .eo-card-head .eo-card-meta{margin-left:auto;}
  .eo-card-head .eo-card-meta ~ .eo-card-actions + *{display:none;}

  /* Brackets on important modules; ordinary cards get structure, not glow. */
  .eo-card-hero::before,.eo-command-hero::before,.mood.selected::before,.track.selected::before{
    left:12px;right:12px;background:linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.72), transparent);
    opacity:1;
  }
  .eo-card-hero::after,.eo-command-hero::after,.mood.selected::after,.track.selected::after{
    content:'';position:absolute;top:-1px;right:-1px;width:17px;height:17px;pointer-events:none;
    border-top:2px solid var(--hud-edge);border-right:2px solid var(--hud-edge);
    background:none;mix-blend-mode:normal;opacity:1;
    box-shadow:2px -2px 12px rgba(var(--accent-rgb),.36);
  }
  .eo-card-hero .eo-card-head{
    background:linear-gradient(90deg, rgba(var(--accent-rgb),.1), rgba(var(--accent-rgb),.026) 62%, transparent);
  }

  /* Buttons: command keys with tactile but disciplined light. */
  .eo-btn,.btn,.todo-add-btn,.todo-all-actions-btn,.finances-btn,.db-btn,
  .habits-btn,.vault-btn,.pboard-btn,.tc-btn,.bk-add-inline,.tc-add-step,
  .tsb-add-todo,.vb-add-cat-btn,.vault-add-btn{
    border-radius:var(--hud-r) !important;
    font-family:var(--mono);
    text-transform:uppercase;
    letter-spacing:.07em;
    font-size:10.5px;
  }
  .eo-btn,.btn,.tc-btn,.db-btn,.finances-btn{
    background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--card);
    border-color:var(--line-soft);
  }
  .eo-btn:hover,.btn:hover,.tc-btn:hover,.db-btn:hover,.finances-btn:hover{
    border-color:rgba(var(--accent-rgb),.42);
    background:linear-gradient(180deg, rgba(var(--accent-rgb),.09), rgba(var(--accent-rgb),.035)), var(--card);
  }
  .eo-btn-primary,.btn-primary,.tc-btn-primary,.db-btn-primary,.finances-btn-primary,
  .habits-btn-primary{
    color:var(--on-accent) !important;
    border-color:rgba(var(--accent-rgb),.62) !important;
    background:linear-gradient(180deg, rgba(var(--accent-rgb),.96), rgba(var(--accent-rgb),.68)) !important;
    box-shadow:0 0 0 1px rgba(var(--accent-rgb),.28), 0 0 7px -3px rgba(var(--accent-rgb),.32) !important;
  }
  .eo-btn-danger-ghost{
    color:var(--danger);border-color:rgba(var(--danger-rgb),.38);
    background:rgba(var(--danger-rgb),.045);
  }

  /* Forms and telemetry: sliders become channel meters, inputs become insets. */
  .eo-input,input[type="text"],input[type="number"],input[type="time"],input[type="date"],
  textarea,select{
    border-radius:var(--hud-r) !important;
  }
  .eo-input{
    background:var(--card-subtle);


    border-color:rgba(var(--accent-rgb),.13);
    box-shadow:inset 0 1px 6px rgba(0,0,0,.12);
  }
  .eo-input:focus{
    border-color:rgba(var(--accent-rgb),.72);
    box-shadow:inset 0 1px 6px rgba(0,0,0,.14), 0 0 0 1px rgba(var(--accent-rgb),.22), 0 0 6px -4px rgba(var(--accent-rgb),.35);
  }
  .eo-field-label,.eo-mini-label,.eo-slider-top,.eo-slider-ends{
    font-family:var(--mono);
  }
  .eo-sliders{gap:14px 18px;}
  .eo-slider{
    position:relative;
    padding:8px 10px 9px;
    border:1px solid var(--line-soft);
    border-radius:var(--hud-r) !important;
    background:var(--card-subtle);
  }
  .eo-slider-top{
    text-transform:uppercase;letter-spacing:.08em;font-size:10px;
  }
  .eo-slider-top b{
    color:var(--accent);
    font-size:13px;
    font-variant-numeric:tabular-nums;
  }
  .eo-slider input[type=range]{
    appearance:none;
    height:20px;
    background:transparent;
    accent-color:var(--accent);
  }
  .eo-slider input[type=range]::-webkit-slider-runnable-track{
    height:7px;
    border:1px solid rgba(var(--accent-rgb),.18);
    border-radius:0 !important;
    background:
      repeating-linear-gradient(90deg, rgba(var(--accent-rgb),.28) 0 1px, transparent 1px 10%),
      linear-gradient(90deg, rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),.04));
  }
  .eo-slider input[type=range]::-webkit-slider-thumb{
    appearance:none;
    width:9px;height:18px;margin-top:-7px;
    border-radius:1px !important;
    background:var(--accent);
    border:1px solid rgba(255,255,255,.45);
    box-shadow:0 0 5px rgba(var(--accent-rgb),.2);
  }
  .eo-telemetry-channel[data-slider="stress"] input[type=range]::-webkit-slider-runnable-track,
  .eo-telemetry-channel[data-slider="shame"] input[type=range]::-webkit-slider-runnable-track,
  .eo-telemetry-channel[data-slider="anxiety"] input[type=range]::-webkit-slider-runnable-track,
  .eo-telemetry-channel[data-slider="urgeRisk"] input[type=range]::-webkit-slider-runnable-track,
  .eo-telemetry-channel[data-slider="tiredness"] input[type=range]::-webkit-slider-runnable-track,
  .eo-telemetry-channel[data-slider="daydreamingRisk"] input[type=range]::-webkit-slider-runnable-track{
    border-color:rgba(var(--warn-rgb),.24);
    background:
      repeating-linear-gradient(90deg, rgba(var(--warn-rgb),.28) 0 1px, transparent 1px 10%),
      linear-gradient(90deg, rgba(var(--warn-rgb),.22), rgba(var(--warn-rgb),.035));
  }
  .eo-telemetry-channel[data-slider="stress"] input[type=range]::-webkit-slider-thumb,
  .eo-telemetry-channel[data-slider="shame"] input[type=range]::-webkit-slider-thumb,
  .eo-telemetry-channel[data-slider="anxiety"] input[type=range]::-webkit-slider-thumb,
  .eo-telemetry-channel[data-slider="urgeRisk"] input[type=range]::-webkit-slider-thumb,
  .eo-telemetry-channel[data-slider="tiredness"] input[type=range]::-webkit-slider-thumb,
  .eo-telemetry-channel[data-slider="daydreamingRisk"] input[type=range]::-webkit-slider-thumb{
    background:var(--warn);
    box-shadow:0 0 5px rgba(var(--warn-rgb),.18);
  }

  /* Chips/badges: sharper state tags, no generic pills except true status dots. */
  .eo-chip,.chip,.bk-badge,.tc-chip{
    border-radius:var(--hud-r) !important;
    font-family:var(--mono);
    text-transform:uppercase;
    letter-spacing:.08em;
    background:rgba(var(--accent-rgb),.035);
    border-color:rgba(var(--accent-rgb),.16);
  }
  .eo-chip-active,.eo-chip-live,.chip.active,.tc-sched-btn.on{
    color:var(--accent);
    background:rgba(var(--accent-rgb),.1);
    border-color:rgba(var(--accent-rgb),.42);
    box-shadow:0 0 6px -4px rgba(var(--accent-rgb),.35);
  }
  .eo-chip-good{color:var(--good);border-color:rgba(var(--good-rgb),.4);background:rgba(var(--good-rgb),.06);}
  .eo-chip-bad{color:var(--danger);border-color:rgba(var(--danger-rgb),.4);background:rgba(var(--danger-rgb),.06);}

  /* Right rail: tactical queue with scan-state density. */
  .rightcol,.compact-tracker,.todo-sidebar-header{
    background:
      linear-gradient(180deg, rgba(var(--panel-rgb),.94), rgba(var(--panel-rgb),.98)),
      var(--panel);
  }
  .todo-sidebar-label::before{content:'QUEUE // ';color:var(--accent);}
  .ct-time,.ct-today-val,.cu-acct-reset,.cu-metric-pct{
    font-family:var(--mono);font-variant-numeric:tabular-nums;
  }
  .tsb-row,.rail-list .tsb-row,.bookmark-bar{
    border-radius:var(--hud-r) !important;
  }
  .tsb-row.done,.eo-block.done{opacity:.58;}

  /* Music/focus dock: audio chamber, readable in constant use. */
  .playerbar{
    background:
      linear-gradient(90deg, rgba(var(--accent-rgb),.06), transparent 18% 78%, rgba(var(--accent-2-rgb),.04)),
      var(--glass-chrome,var(--glass)) !important;
  }
  .pb-eq i,.vol-fill,.progress-fill{
    background:linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb),.55)) !important;
    box-shadow:0 0 5px rgba(var(--accent-rgb),.16);
  }

  /* Copy/empty states that are already system phrased should read like status. */
  .eo-empty,.tracks-empty,.maps-empty,.vb-empty,.pb-empty{
    font-family:var(--mono);
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--faint);
  }

  @media (prefers-reduced-motion:reduce){
    .eo-atmosphere::before,.eo-atmosphere::after{opacity:.35;}
  }
  html[data-motion="static"] .eo-atmosphere::before,
  html[data-motion="static"] .eo-atmosphere::after{
    opacity:.28 !important;
  }

  /* =======================================================================
     PANEL PEEK — hover-reveal for the collapsed side panels (js/panel-peek.js)

     Both rails already have a pinned state (they hold a layout column) and a
     collapsed state (off-screen). Peek is the third: while collapsed, pushing
     the cursor into the screen edge floats the panel back OVER the content.
     Nothing reflows — the left rail is already position:fixed, and the right
     rail is lifted to fixed for the duration — so the page underneath never
     jumps, and the panel folds away once the cursor leaves its width.
     ======================================================================= */
  .panel-peek-zone{
    position:fixed;top:0;bottom:0;z-index:36;
    pointer-events:auto;background:transparent;
  }
  .panel-peek-left{left:0;}
  .panel-peek-right{right:0;}
  /* The zones only mean anything while their panel is folded away; otherwise
     they would swallow clicks on the pinned panel's own edge/resizer. */
  body:not(.nav-collapsed) .panel-peek-left{pointer-events:none;}
  body:not(.rail-collapsed) .panel-peek-right{pointer-events:none;}

  /* ---- Left rail peek ---- */
  body.nav-collapsed.nav-peek .app-nav{
    transform:translateX(0);
    z-index:55;
    box-shadow:12px 0 34px -12px rgba(0,0,0,.55);
    border-right:1px solid var(--line);
  }
  /* The drag-to-resize handle belongs to the pinned state — a peeking panel is
     temporary, and grabbing its edge would fight the fold-away. */
  body.nav-collapsed.nav-peek .nav-resize-handle{display:none;}

  /* ---- Right rail peek ----
     The grid track stays at 0 (see .shell.sidepanel-collapsed); lifting the
     column out of the grid to fixed is what lets it hang over the content
     instead of pushing it. */
  body.sidepanel-peek .shell.sidepanel-collapsed .rightcol{
    position:fixed;top:0;right:0;bottom:0;
    /* --rightcol-narrow only exists inside the narrow media query above; on a
       normal-width window this falls straight through to the pinned width. */
    width:var(--rightcol-narrow, var(--rightcol-w,300px));
    z-index:55;
    pointer-events:auto;
    box-shadow:-12px 0 34px -12px rgba(0,0,0,.55);
    border-left:1px solid var(--line);
    /* Lifting to fixed can't be transitioned (position isn't animatable), so
       the slide is a one-shot keyframe — it mirrors the left rail's .22s. */
    animation:panel-peek-in .22s ease;
  }
  @keyframes panel-peek-in{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
  html[data-motion="static"] body.sidepanel-peek .shell.sidepanel-collapsed .rightcol{animation:none;}
  /* Same reasoning as the left handle: no resizing a temporary panel. */
  body.sidepanel-peek .shell.sidepanel-collapsed .col-resizer{display:none;}