:root{
  --bg:#f5f0e8;--surface:#fdf9f3;--surface2:#ece6da;--border:#ddd6c8;--border2:#c8bfb0;
  --accent:#d4880a;--accent-hover:#b8740a;--accent-dim:rgba(212,136,10,0.12);
  --green:#1a7a4a;--green-hover:#156038;--green-dim:rgba(26,122,74,0.12);
  --red:#c0392b;--red-hover:#a93226;--red-dim:rgba(192,57,43,0.12);
  --blue:#1d5fa8;--purple:#6b3fa0;--warn:#d4880a;
  --text:#1a1610;--text-secondary:#5a5040;--muted:#a09880;
  --shadow:rgba(0,0,0,0.07);--shadow-md:rgba(0,0,0,0.13);--overlay:rgba(0,0,0,0.4);
  --radius-sm:8px;--radius:12px;--radius-lg:16px;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'Inter',system-ui,sans-serif;
  /* was Space Mono — replaced app-wide; its dotted/slashed zero was unwanted.
     Inter with tabular figures keeps money columns aligned without that glyph. */
}
[data-theme="dark"]{
  --bg:#111118;--surface:#1a1a24;--surface2:#22222f;--border:#2e2e3e;--border2:#3a3a4e;
  --accent:#f5a623;--accent-hover:#fbbf3a;--accent-dim:rgba(245,166,35,0.12);
  --green:#2dd4a0;--green-hover:#5ee8be;--green-dim:rgba(45,212,160,0.12);
  --red:#f87171;--red-hover:#fca5a5;--red-dim:rgba(248,113,113,0.12);
  --blue:#7eb8f7;--purple:#b794f4;--warn:#f5a623;
  --red-vivid:#e53e3e;
  --text:#f0ede8;--text-secondary:#9a96a0;--muted:#52505a;
  --shadow:rgba(0,0,0,0.4);--shadow-md:rgba(0,0,0,0.6);--overlay:rgba(8,8,12,0.88);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{overflow-x:hidden;background:var(--bg);}/* Safari uses html bg for status bar and overscroll areas */
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:14px;line-height:1.5;min-height:100vh;transition:background 0.25s,color 0.25s;overflow-x:hidden;padding-top:env(safe-area-inset-top,0px);}

/* NAV — Desktop: full width, single row */
nav:not(#bottom-nav){position:sticky;top:env(safe-area-inset-top,0px);z-index:200;background:var(--surface);border-bottom:1px solid var(--border);}
[data-theme="dark"] nav:not(#bottom-nav){background:rgba(17,17,24,0.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--border);}
[data-theme="dark"] #bottom-nav{background:rgba(17,17,24,0.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
.nav-inner{width:100%;max-width:1148px;margin:0 auto;display:flex;align-items:center;height:50px;padding:0 20px;gap:0;}
/* Brand */
.brand{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;flex-shrink:0;margin-right:16px;transition:opacity 0.15s;}
.brand:hover{opacity:0.8;}
.brand-text{display:flex;flex-direction:column;gap:0;line-height:1;}
.brand-wordmark{font-family:'Inter',sans-serif;font-size:15px;font-weight:800;letter-spacing:0.16em;color:var(--text);text-transform:uppercase;}
.brand-re{color:var(--text);}
.brand-trade{color:var(--accent);text-shadow:0 0 10px rgba(245,166,35,.14);}
.tab .tab-ic,.nav-more-btn .tab-ic{display:inline-flex;align-items:center;justify-content:center;opacity:.9}
.tab{gap:8px;}
.nav-more-btn{padding:0 10px;min-width:42px}
.nav-more-btn .tab-label{display:none;}
.nav-more-btn .tab-ic{margin:0;}
@media(max-width:980px){.tab .tab-label{display:none}.tab{padding:0 10px}.tab .tab-ic{margin:0}}

.brand-accent{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--accent);letter-spacing:0.1em;}
.brand svg circle{filter:drop-shadow(0 0 3px rgba(245,166,35,0.4));}
/* Primary tabs — left cluster */
.tabs-row{display:flex;align-items:center;gap:0;flex-shrink:0;}
.tabs{display:flex;gap:0;}
.tab{padding:0 14px;border:none;cursor:pointer;font-family:var(--font-body);font-weight:500;font-size:13px;letter-spacing:0;text-transform:none;background:transparent;color:var(--muted);transition:color 0.15s;white-space:nowrap;height:50px;display:flex;align-items:center;position:relative;}
.tab::after{content:'';position:absolute;bottom:0;left:8px;right:8px;height:2px;background:var(--accent);border-radius:2px 2px 0 0;opacity:0;transition:opacity 0.15s;}
.tab:hover{color:var(--text-secondary);}
.tab.on{color:var(--text);font-weight:600;}
.tab.on::after{opacity:1;}
/* Overflow more menu */
.nav-more{position:relative;}
.nav-more-btn{padding:0 10px;border:none;cursor:pointer;font-family:var(--font-body);font-weight:500;font-size:13px;letter-spacing:0;text-transform:none;background:transparent;color:var(--muted);transition:color 0.15s;display:flex;align-items:center;justify-content:center;flex-shrink:0;height:54px;gap:5px;}
.nav-more-btn:hover{color:var(--text);}
.nav-more-btn.on{color:var(--accent);}
.nav-more-btn.has-items{display:flex;}
.nav-more-menu{display:none;position:absolute;top:calc(100% + 4px);right:0;min-width:180px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 32px var(--shadow-md);z-index:300;overflow:hidden;padding:4px;}
.nav-more.open .nav-more-menu{display:block;}
.nav-more-menu button{width:100%;padding:10px 14px;background:none;border:none;text-align:left;cursor:pointer;font-size:13px;font-weight:500;color:var(--text);transition:all 0.15s;border-radius:8px;display:flex;align-items:center;gap:10px;}
.nav-more-menu button svg{flex-shrink:0;opacity:0.65;display:block;}
.nav-more-menu button:hover{background:var(--surface2);color:var(--text);}
.nav-more-menu button.on{color:var(--accent);font-weight:600;}
/* Search — centred in remaining space */
.nav-spacer{flex:1;}
.search-wrap{position:relative;width:260px;}
.search-wrap input{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:7px 32px 7px 34px;color:var(--text);font-size:13px;width:100%;transition:all 0.2s;height:34px;}
.search-wrap input:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-dim);}
.search-wrap input::placeholder{color:var(--muted);}
.search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;pointer-events:none;}
.search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px;display:none;padding:4px;line-height:1;}
.search-clear.show{display:block;}
.search-clear:hover{color:var(--text);}
/* User menu — right */
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0;padding-left:16px;}
.nav-row1{display:contents;}
/* User avatar button */
.user-menu-btn{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border:1px solid var(--border);border-radius:20px;background:transparent;cursor:pointer;transition:all 0.15s;color:var(--text-secondary);font-size:13px;font-weight:500;}
.user-menu-btn:hover{border-color:var(--accent);color:var(--text);background:var(--surface2);}
.user-avatar{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#000;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.user-menu-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 32px var(--shadow-md);z-index:300;overflow:hidden;padding:4px;}
.user-menu.open .user-menu-dropdown{display:block;}
.user-menu{position:relative;}
.user-menu-item{width:100%;padding:10px 14px;background:none;border:none;text-align:left;cursor:pointer;font-size:13px;font-weight:500;color:var(--text-secondary);transition:all 0.15s;border-radius:8px;display:flex;align-items:center;gap:10px;}
.user-menu-item:hover{background:var(--surface2);color:var(--text);}
.user-menu-item.danger{color:var(--red);}
.user-menu-item.danger:hover{background:var(--red-dim);}
.user-menu-divider{height:1px;background:var(--border);margin:4px 8px;}
/* Session D1.6 — Country submenu inside the profile dropdown.
   Renders flag · label · (active check) per country, with disabled state
   for coming-soon entries. The flag in the user-menu trigger sits between
   the avatar and the chevron. */
.user-menu-flag{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 0 1px var(--border);}
/* Session E1 — Country trigger row inside the user menu (replaces inline list) */
.user-menu-country-trigger{cursor:pointer;}
.user-menu-country-trigger-flag{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 0 1px var(--border);overflow:hidden;}
.user-menu-country-trigger-flag svg{display:block;}
/* Session E2 — Country panel.
   Desktop: slide-out to the LEFT of the user menu, flush against its left edge.
            Hidden by default (translated off + opacity 0); slides in with motion.
   Mobile : SAME panel reused as in-place swap inside the dropdown box.
            Tap Country → main menu fades out, country list fades in, back arrow returns. */
.country-panel{
  position:absolute;
  top:calc(100% + 8px);
  /* Positioned to sit flush against the LEFT edge of the user-menu-dropdown,
     not overlapping the trigger button. Dropdown is min-width:200px, anchored
     right:0 of .user-menu, so its left edge is 200px from .user-menu's right.
     8px gap between the two panels. */
  right:calc(200px + 8px);
  min-width:240px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 8px 32px var(--shadow-md);
  z-index:301;
  overflow:hidden;
  padding:4px;
  /* Hidden + slid-out state */
  opacity:0;
  pointer-events:none;
  transform:translateX(8px);
  transition:opacity .18s ease, transform .22s cubic-bezier(0.34,1.32,0.64,1);
}
.user-menu.country-open .country-panel{
  opacity:1;
  pointer-events:auto;
  transform:translateX(0);
}
/* v2.19.27 — Default Platform pops out left exactly as Country does. The
   panel carries BOTH classes: .country-panel supplies every bit of geometry,
   motion and chrome, .platform-panel supplies only the open state. Reuse, not
   a second copy — a duplicated 240px/8px/z-301 block would drift the moment
   either panel moved. (§4: don't duplicate a layout, reuse it.) */
.user-menu.platform-open .platform-panel{
  opacity:1;
  pointer-events:auto;
  transform:translateX(0);
}
.country-panel-header{display:flex;align-items:center;gap:8px;padding:8px 10px 6px;font-family:var(--font-display);font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em;}
.country-panel-back{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--text-secondary);transition:all 0.15s;flex-shrink:0;}
.country-panel-back:hover{background:var(--surface2);color:var(--text);}

/* Mobile: country panel becomes the SAME container as the user-menu-dropdown.
   When .country-open is set on .user-menu, the main dropdown items are hidden
   and the country panel slides in to replace them in the same visual box. */
@media(max-width:600px){
  .country-panel{
    /* Reposition to same place as user-menu-dropdown */
    top:calc(100% + 8px);
    right:0;
    min-width:200px;
    transform:translateX(8px);
  }
  /* Hide the main dropdown items when country-open — country panel takes its place */
  .user-menu.country-open .user-menu-dropdown{display:none;}
  /* v2.19.27 — same swap for the platform panel, or it renders on top of a
     still-visible menu at this width. */
  .user-menu.platform-open .user-menu-dropdown{display:none;}
}
.user-menu-country-sub{display:flex;flex-direction:column;}
.user-menu-country-item{width:100%;padding:8px 14px;background:none;border:none;text-align:left;cursor:pointer;font-size:13px;font-weight:500;color:var(--text-secondary);transition:all 0.15s;border-radius:8px;display:flex;align-items:center;gap:10px;}
.user-menu-country-item:hover:not(:disabled){background:var(--surface2);color:var(--text);}
.user-menu-country-item.active{color:var(--text);}
.user-menu-country-item.coming-soon{opacity:0.5;cursor:not-allowed;}
.user-menu-country-item .cf{display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px var(--border);border-radius:50%;overflow:hidden;}
.user-menu-country-item .cl{flex:1;}
.user-menu-country-item .cc{color:var(--accent);flex-shrink:0;}
.user-menu-country-item .cs-tag{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);background:var(--surface2);padding:2px 6px;border-radius:6px;}
/* Sync indicator */
#sync-indicator{display:none;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--text-secondary);white-space:nowrap;flex-shrink:0;}
/* Mobile search icon btn — hidden on desktop */
.nav-search-icon-btn{display:none;}
/* Mobile search expand bar */
/* Mobile search bar — hidden above viewport, slides down when triggered */
#nav-search-expand{
  position:fixed;
  top:0;left:0;right:0;
  z-index:250;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:10px 14px;
  padding-top:calc(10px + env(safe-area-inset-top));
  box-shadow:0 4px 16px var(--shadow-md);
  transform:translateY(-110%);
  transition:transform 0.22s cubic-bezier(0.4,0,0.2,1),opacity 0.22s;
  opacity:0;
  /* pointer-events off only — no visibility:hidden, no display:none.
     Input must remain in accessibility tree so iOS .focus() works synchronously.
     Panel is hidden via transform (off-screen) so pointer-events:none is not
     needed for tap safety — translateY(-110%) handles it. */
  display:block;
}
#nav-search-expand.open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
#nav-search-expand .search-wrap{width:100%;}
/* Only show on mobile */
@media(min-width:601px){#nav-search-expand{display:none!important;}}
/* BOTTOM NAV — mobile only */
#bottom-nav{
  display:none;
  position:fixed;top:auto;bottom:0;left:0;right:0;
  /* Height = icon zone (62px) + safe-area padding. The safe-area goes BELOW
     the icons via padding-bottom so icons are never compressed on iPhone PWA. */
  height:calc(62px + env(safe-area-inset-bottom,0px));
  background:var(--surface);border-top:1px solid var(--border);
  /* z-index above the transient page backdrops (search 249 / fab 299 / more 300)
     so a backdrop that's mid-animation or left open can never make the nav dead.
     Still below modals/panels (400+). The nav's own handlers dismiss overlays. */
  z-index:310;
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -1px 0 var(--border),0 -4px 20px var(--shadow);
  transform:translateY(0);
  transition:transform 0.22s cubic-bezier(0.34,1.38,0.64,1);
  will-change:transform;
}
#bottom-nav.nav-shown{display:flex!important;align-items:stretch;gap:0;}
#bottom-nav.nav-hidden{
  transform:translateY(100%);
  transition:transform 0.18s cubic-bezier(0.4,0,1,1);
}
.bnt{
  flex:1 1 0;min-width:0;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0;margin:0;
  gap:4px;border:none;background:transparent;cursor:pointer;
  font-family:var(--font-body);color:var(--muted);font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;
  transition:color 0.15s;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  /* Ensure the entire button cell is the tap target */
  position:relative;
}
.bnt.on{color:var(--accent);}
/* Expand tap area to fill the entire button cell — no dead zones */
.bnt::after{content:'';position:absolute;inset:0;}
.bnt svg{transition:transform 0.2s cubic-bezier(0.34,1.5,0.64,1);}
.bnt.on svg{transform:scale(1.18);}
@media(max-width:720px) and (min-width:481px){
  .insights{grid-template-columns:1fr 1fr 1fr!important;}
}
@media(max-width:600px){
  /* Hide entire top nav on mobile — bottom nav handles everything */
  nav:not(#bottom-nav){display:none!important;}
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px));}
  /* fab bottom controlled by nav-shown rule below */
  /* fab-dial bottom handled by nav-shown rule */
}
/* Landscape on mobile: keep bottom nav visible, shift FAB above it */
@media(max-width:900px) and (orientation:landscape) and (max-height:500px){
  nav:not(#bottom-nav){display:none!important;}
  #bottom-nav{display:flex!important;align-items:stretch;gap:0;}
  body{padding-bottom:72px;}
  .fab{bottom:calc(62px + env(safe-area-inset-bottom,0px) + 18px)!important;right:16px!important;}
  .fab-dial{bottom:calc(62px + env(safe-area-inset-bottom,0px) + 18px);right:16px;}
}
/* MORE SHEET */
/* v2.17.1 — #more-sheet rest state + transition, moved out of the inline style
   attribute. Two bugs fixed:
   1. The transition was inline-only, so initMoreSheetSwipe's style.transition=''
      (meant to hand control back after a drag) deleted it outright — the sheet
      then teleported instead of sliding.
   2. translateY(100%) moves the sheet by its OWN HEIGHT, but it rests 62px above
      the viewport bottom to clear the nav, so it landed 62px short and left a
      sliver on screen until display:none fired. The hidden transform now clears
      the offset and the safe-area inset too. */
#more-sheet{transform:translateY(calc(100% + 62px + env(safe-area-inset-bottom,0px)));transition:transform .28s cubic-bezier(0.32,1.1,0.5,1);}
.more-sheet-row{display:flex;align-items:center;gap:16px;width:100%;padding:14px 22px;background:none;border:none;text-align:left;cursor:pointer;font-size:15px;font-weight:500;color:var(--text);-webkit-tap-highlight-color:transparent;transition:background 0.12s;}
.more-sheet-row:active{background:var(--surface2);}
.more-sheet-row svg{flex-shrink:0;color:var(--text-secondary);}
.more-sheet-row.active-row{color:var(--accent);font-weight:600;}
.more-sheet-row.active-row svg{color:var(--accent);}
.more-sheet-danger{color:var(--red)!important;}
.more-sheet-danger svg{color:var(--red)!important;}

/* Search dropdown */
.item-full-page{max-width:1100px;margin:0 auto;padding:20px 24px 80px;width:100%;box-sizing:border-box;overflow-x:hidden;}
.item-full-section{background:var(--surface2);border-radius:12px;padding:16px;margin-bottom:14px;}
.item-full-section-title{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:12px;}
.history-entry{padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;}
.history-entry:last-child{border-bottom:none;}
.history-entry-header{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.history-badge{font-size:11px;font-weight:700;border-radius:4px;padding:2px 7px;}
.history-badge.listed{background:rgba(100,116,139,0.15);color:var(--muted);}
.history-badge.sale{background:var(--green-dim);color:var(--green);}
.history-badge.resale{background:rgba(167,139,250,0.15);color:var(--purple);}
.history-badge.relist{background:rgba(96,165,250,0.15);color:var(--blue);}
.history-badge.refresh{background:color-mix(in srgb,var(--muted) 18%,transparent);color:var(--text-secondary);}
.history-badge.return-full{background:var(--red-dim);color:var(--red);}
.history-badge.return-partial{background:var(--accent-dim);color:var(--accent);}
.pnl-row{display:flex;justify-content:space-between;padding:5px 0;font-size:13px;border-bottom:1px solid var(--border);}
.pnl-row:last-child{border-bottom:none;}
.pnl-row.total{font-weight:700;font-size:14px;margin-top:4px;padding-top:8px;}
.search-dropdown{position:fixed;top:54px;left:0;width:340px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 32px var(--shadow-md);z-index:9990;overflow:hidden;display:none;min-width:280px;max-width:400px;pointer-events:none;}
.search-dropdown.open{pointer-events:auto;}
.search-dropdown.open{display:block;}
.search-result{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background 0.1s;border-bottom:1px solid var(--border);}
.search-result:last-child{border-bottom:none;}
.search-result:hover,.search-result.active{background:var(--surface2);}
.sr-icon{font-size:18px;flex-shrink:0;width:28px;text-align:center;}
.sr-body{flex:1;min-width:0;}
.sr-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sr-name mark{background:rgba(240,168,48,0.35);color:var(--text);border-radius:2px;padding:0 1px;}
.sr-meta{display:flex;align-items:center;gap:6px;margin-top:2px;flex-wrap:wrap;}
.sr-cat{font-size:11px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--muted);}
.sr-month{font-size:11px;color:var(--muted);}
.sr-status{font-size:11px;font-weight:600;border-radius:4px;padding:1px 6px;}
.sr-status.sold{background:var(--green-dim);color:var(--green);}
.sr-status.active{background:var(--accent-dim);color:var(--accent);}
.sr-status.returned{background:var(--red-dim);color:var(--red);}
.sr-price{font-size:13px;font-weight:700;color:var(--text);flex-shrink:0;}
.search-footer{padding:8px 14px;font-size:12px;color:var(--muted);border-top:1px solid var(--border);text-align:center;background:var(--surface2);}
.search-empty{padding:20px 14px;text-align:center;color:var(--muted);font-size:13px;}
.theme-toggle{background:var(--surface2);border:1px solid var(--border);border-radius:8px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;transition:all 0.15s;}
.theme-toggle:hover{border-color:var(--accent);background:var(--accent);transform:scale(1.05);}

/* FAB */

/* PANEL */
.panel-overlay{position:fixed;inset:0;background:var(--overlay);z-index:400;backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity 0.24s ease;}
.panel-overlay.on{opacity:1;pointer-events:auto;}
.slide-panel{position:fixed;top:0;right:0;width:440px;max-width:95vw;height:100vh;height:100dvh;background:var(--surface);border-left:1px solid var(--border);z-index:401;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;padding:24px;padding-top:calc(24px + env(safe-area-inset-top,0px));box-shadow:-4px 0 24px var(--shadow-md);box-sizing:border-box;
  transform:translateX(100%);
  transition:transform 0.32s cubic-bezier(0.34,1.2,0.64,1);
  will-change:transform;
}
.slide-panel.on{transform:translateX(0);}
.slide-panel.dragging{transition:none!important;}
.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.panel-title{font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--accent);letter-spacing:-0.01em;}
/* Locked/derived form field (e.g. consignment cost is always £0). A read-only
   input that looks editable reads as a broken keyboard on iOS — tapping it does
   nothing. Make the locked state visible instead of silent. */
.fg input.input-locked,.fg input[readonly]{
  background:var(--surface2);
  color:var(--text-secondary);
  border-style:dashed;
  cursor:not-allowed;
  -webkit-text-fill-color:var(--text-secondary);
}
.fg input.input-locked:focus{outline:none;border-color:var(--border);}
/* Recall chips — one-tap repeat of a recent entry. Sit above the form so the
   option is visible without opening anything, and stay tappable at 44px. */
.recall-row{margin-bottom:14px;}
.recall-lead{font-size:11px;font-weight:700;letter-spacing:0.4px;text-transform:uppercase;color:var(--text-secondary);margin-bottom:7px;}
.recall-chips{display:flex;flex-wrap:wrap;gap:7px;}
.recall-chip{
  background:var(--surface2);color:var(--text);border:1px solid var(--border);
  border-radius:999px;padding:0 14px;min-height:44px;font-size:13px;font-weight:600;
  cursor:pointer;display:inline-flex;align-items:center;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  -webkit-tap-highlight-color:transparent;
}
.recall-chip:active{transform:scale(0.97);}
.recall-chip:hover{border-color:var(--accent);}
.panel-close{background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--muted);font-size:18px;cursor:pointer;padding:6px 11px;line-height:1;transition:all 0.15s;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.panel-close:hover{border-color:var(--accent);color:var(--accent);}
.panel-section{font-family:var(--font-display);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:12px;font-weight:800;}

/* PAGES */
.page{display:none;max-width:1100px;margin:0 auto;padding:16px 20px 100px;}
.page.on{display:block;}

/* CARDS */
.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:14px;}
.rtn-segbar{display:inline-flex;background:var(--surface2);border:1px solid var(--border);border-radius:9px;padding:3px;gap:2px;}
.rtn-seg{border:none;background:transparent;color:var(--text-secondary);font-size:13px;font-weight:600;padding:6px 12px;border-radius:6px;cursor:pointer;transition:background .15s,color .15s;}
.rtn-seg:hover{color:var(--text);}
.rtn-seg.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px var(--shadow);}
.kgrid-2{grid-template-columns:repeat(2,1fr)!important;}
.kgrid-3{grid-template-columns:repeat(3,1fr);}
.kgrid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
/* Single-col variant for pages like Stock + Expenses on mobile — applied via .kgrid-1col modifier */
.kgrid.kgrid-1col{grid-template-columns:repeat(3,1fr);} /* desktop: still 3-col */
.kgrid.kgrid-1col .kcard .kval{font-size:clamp(18px,5.5cqi,22px)!important;white-space:nowrap;}
.kcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 16px 14px;position:relative;overflow:hidden;cursor:pointer;transition:border-color 0.2s,transform 0.18s cubic-bezier(0.34,1.2,0.64,1),box-shadow 0.2s;box-shadow:0 1px 2px var(--shadow);min-height:108px;display:flex;flex-direction:column;justify-content:flex-start;gap:2px;min-width:0;overflow:hidden;-webkit-tap-highlight-color:transparent;}
.kcard.clickable{cursor:pointer;-webkit-tap-highlight-color:transparent;}
@media(hover:hover){.kcard.clickable:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 16px var(--shadow-md);}}
.kcard.clickable:active{transform:scale(0.97) translateY(0)!important;box-shadow:0 1px 4px var(--shadow)!important;transition:transform 0.08s ease,box-shadow 0.08s ease!important;}
.bnt{-webkit-tap-highlight-color:transparent;}
.bnt:active{opacity:0.55;transform:scale(0.92);}
@media(hover:hover){.kcard:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 20px var(--shadow-md);}}
.kcard.active-filter{border-color:var(--accent);background:var(--accent-dim);}
.kcard.active-filter::before{content:'▾';position:absolute;bottom:10px;right:14px;font-size:14px;color:var(--accent);}
.kcard::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);opacity:0.8;}
.kcard.g::after{background:var(--green);}.kcard.r::after{background:#e05555;}.kcard.b::after{background:var(--blue);}.kcard.p::after{background:var(--purple);}
.klabel{font-family:var(--font-display);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;font-weight:600;}
.kval{font-family:var(--font-body);font-size:clamp(14px,2.4vw,28px);font-weight:800;line-height:1.05;letter-spacing:-0.03em;margin:8px 0 4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;}
/* Auto-size kval containers so long numbers don't clip */
.kcard{container-type:inline-size;}
/* kval sizing handled by fluid cqi rule below */
.ksub{font-size:11px;color:var(--muted);margin-top:6px;font-weight:400;letter-spacing:0.01em;}

/* INSIGHTS */
.insights{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.insight-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 1px 2px var(--shadow);}
.insight-icon{font-size:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;}
.insight-label{font-family:var(--font-display);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:5px;font-weight:600;}
.insight-val{font-family:"Inter",system-ui,sans-serif;font-size:19px;font-weight:700;letter-spacing:-0.03em;}
.insight-sub{font-size:11px;color:var(--text-secondary);margin-top:3px;}

/* ALERTS — kept slot for future banners */
/* spin — see polish */

/* SECTION LABEL */
.sl{display:inline-flex;align-items:center;width:auto;font-family:var(--font-display);font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);background:transparent;border:none;border-radius:0;padding:0;margin:20px 0 12px;box-sizing:border-box;gap:8px;}
.sl::before{display:none;}
.sl{gap:0;}
.sl::after{display:none;}

/* MONTH GRID */
.mgrid{display:grid;grid-template-columns:repeat(var(--mgrid-cols,4),1fr);gap:8px;margin-bottom:14px;}
@media(max-width:600px){.mgrid{--mgrid-cols:2;}}
@media(min-width:601px) and (max-width:900px){.mgrid{--mgrid-cols:3;}}
@media(min-width:901px) and (max-width:1200px){.mgrid{--mgrid-cols:4;}}
@media(min-width:1201px){.mgrid{--mgrid-cols:6;}}
.mcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 16px;cursor:pointer;transition:border-color 0.2s,transform 0.15s,box-shadow 0.2s;box-shadow:0 1px 2px var(--shadow);min-height:116px;display:flex;flex-direction:column;justify-content:space-between;}
.mcard:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 20px var(--shadow-md);}
.mcard-empty{opacity:0.35;}
.mname{font-family:var(--font-body);font-weight:500;font-size:12px;margin-bottom:8px;color:var(--text-secondary);letter-spacing:0;text-transform:none;}
.mval{font-family:"Inter",system-ui,sans-serif;font-size:22px;font-weight:700;letter-spacing:-0.04em;margin-bottom:6px;font-variant-numeric:tabular-nums lining-nums;}
.mval.pos{color:var(--green);}.mval.nil{color:var(--muted);}.mval.neg{color:var(--red);}
.msub{font-size:11px;color:var(--muted);margin-top:4px;}

/* CHART */
.chart-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:14px;box-shadow:0 1px 2px var(--shadow);}
.chart-title{font-family:var(--font-display);font-size:11px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.chart-title::before{content:'';display:inline-block;width:18px;height:2px;background:linear-gradient(90deg,var(--accent),transparent);border-radius:999px;flex-shrink:0;}
.chart-legend{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);}
.chart-legend-dot{display:inline-block;width:8px;height:8px;border-radius:2px;flex-shrink:0;margin-right:3px;}
.leg{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-secondary);}
.leg-dot{width:8px;height:8px;border-radius:2px;}
.chart-canvas-wrap{position:relative;width:100%;height:240px;min-width:0;overflow:hidden;}
@media(max-width:600px){.chart-canvas-wrap{height:180px;}}
@media(max-width:900px) and (min-width:601px){.chart-canvas-wrap{height:210px;}}

/* ITEM TABLE */
.item-table{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 2px var(--shadow);}
.item-row{border-bottom:1px solid var(--border);padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:8px;transition:background 0.12s,transform 0.08s ease;cursor:pointer;align-items:center;}
.item-row:active{background:var(--surface2);transform:scale(0.995);}
.item-row:last-child{border-bottom:none;}
.item-row:hover{background:var(--surface2);}
.item-row.selected{background:var(--accent-dim);border-left:3px solid var(--accent);padding-left:11px;}
.item-row.stale{background:rgba(240,168,48,0.03);}
.item-row.stale:hover{background:rgba(240,168,48,0.07);}
.item-main{display:flex;flex-direction:column;gap:0;min-width:0;overflow:hidden;}
.item-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.item-name{font-weight:600;font-size:15px;color:var(--text);}
.item-badge{font-size:10px;padding:3px 8px;border-radius:6px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;}
/* Date fallback — hidden normally, only shows at ≤360px when all other meta is gone */
.item-row-date-fallback{display:none;font-size:10px;color:var(--muted);white-space:nowrap;}
@media(max-width:360px){.item-row-date-fallback{display:inline;}}
.item-badge.listed{background:rgba(96,165,250,0.15);color:var(--blue);}
.item-badge.sold{background:var(--green-dim);color:var(--green);}
.item-badge.returned{background:var(--red-dim);color:var(--red);}
.item-badge.resold{background:rgba(167,139,250,0.15);color:var(--purple);}
.item-badge.bundle{background:rgba(96,165,250,0.15);color:var(--blue);cursor:pointer;}
/* v2.21.17 — bundle brace: a vertical tie down the left of grouped rows so a
   multi-item single sale reads as one order in the list. */
.bundle-brace{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue);opacity:0.55;border-radius:0 2px 2px 0;}
.bundle-brace.first{top:8px;border-radius:2px 2px 0 0;}
.bundle-brace.last{bottom:8px;border-radius:0 0 2px 2px;}
.item-row.in-bundle{position:relative;padding-left:12px;}
.item-badge.relisted{background:rgba(167,139,250,0.2);color:var(--purple);}
.item-badge.spares{background:var(--accent-dim);color:var(--warn);}
/* Patch A — stock state badge: amber/orange = pre-listing, not yet active. */
.item-badge.sourced{background:var(--accent-dim);color:var(--accent);border:1px solid rgba(212,136,10,0.22);}
.item-badge.scrapped{background:var(--surface2);color:var(--muted);border:1px dashed var(--border);}
.item-badge.donated{background:var(--accent-dim);color:var(--accent);border:1px dashed rgba(212,136,10,0.3);}
.item-badge.joblot{display:inline-flex;align-items:center;gap:4px;background:rgba(167,139,250,0.13);color:var(--purple);border:1px solid rgba(167,139,250,0.28);}
.chip.chip-state-sourced.active{background:var(--accent-dim);color:var(--accent);border-color:rgba(212,136,10,0.35);}
.chip.chip-state-listed.active{background:rgba(96,165,250,0.13);color:var(--blue);border-color:rgba(96,165,250,0.35);}
.chip.chip-state-all.active{background:var(--surface2);color:var(--text);border-color:var(--border);}
.plat-badge{font-size:10px;padding:2px 6px;border-radius:5px;font-weight:600;letter-spacing:0.3px;background:rgba(245,175,2,0.12);border:1px solid rgba(245,175,2,0.35);color:#c48a00;white-space:nowrap;}
.plat-badge.vinted{background:rgba(0,119,130,0.12);border-color:rgba(0,119,130,0.35);color:#007782;}
.plat-badge.depop{background:rgba(255,70,70,0.1);border-color:rgba(255,70,70,0.25);color:#e03030;}
.plat-badge.fb{background:rgba(24,119,242,0.1);border-color:rgba(24,119,242,0.25);color:#1877f2;}
.plat-badge.amazon_uk{background:rgba(255,153,0,0.12);border-color:rgba(255,153,0,0.3);color:#c45a00;}
.item-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--text-secondary);}
.item-meta-item{display:flex;align-items:center;gap:6px;}
.item-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}

/* ITEM ROW INTERNALS */
.item-row-inner{display:flex;align-items:center;gap:10px;min-width:0;width:100%;overflow:hidden;}
.item-row-body{flex:1;min-width:0;overflow:hidden;}
.item-row-name{font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;}
@media(max-width:600px){
  /* Allow item title to wrap to 2 lines on mobile — more of the name visible without needing to tap */
  .item-row-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
}
.item-row-meta{font-size:12px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.4;}
.item-row-gid{font-family:var(--font-mono);font-size:10px;color:var(--muted);opacity:0.6;font-weight:400;}
.item-row-meta-sep{color:var(--border2);}
.item-row-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;flex-grow:0;min-width:68px;max-width:96px;}
.item-row-price{font-size:14px;font-weight:700;font-family:"Inter",system-ui,sans-serif;color:var(--text);letter-spacing:-0.03em;font-variant-numeric:tabular-nums lining-nums;}
.item-row-profit{font-size:12px;font-weight:600;font-family:"Inter",system-ui,sans-serif;font-variant-numeric:tabular-nums lining-nums;}
.item-row-profit.pos{color:var(--green);}
.item-row-profit.neg{color:var(--red);}
.item-row-profit.est{}
.item-row-roi{font-size:11px;color:var(--muted);font-weight:500;}

/* STATUS DOT */
.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.status-dot.listed{background:var(--blue);opacity:0.7;}
.status-dot.sold{background:var(--green);}
.status-dot.returned{background:var(--red);opacity:0.7;}
.status-dot.relisted{background:var(--purple);opacity:0.9;}
.status-dot.resold{background:var(--purple);}
.status-dot.spares{background:var(--warn);opacity:0.85;}
/* Patch A — stock items use a hollow ring-style dot in amber to distinguish from listed */
.status-dot.sourced{background:transparent;border:1.5px solid var(--accent);opacity:0.85;width:8px;height:8px;box-sizing:border-box;}

/* FORMS */
.fg{margin-bottom:16px;}
.fg label{display:block;font-family:var(--font-display);font-size:10px;font-weight:800;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.1em;}
/* Session D1.5 — keep paired inputs in .form-grid-2 rows aligned even when
   one label wraps to two lines (e.g. "Postage Charged to Buyer" in the Edit
   form pairs with shorter labels). The label reserves space for two lines
   either way; single-line labels just show whitespace below, but inputs
   stay perfectly aligned. */
.form-grid-2 .fg label{min-height:1.4em;display:flex;align-items:flex-end;}
.fg input,.fg select,.fg textarea{width:100%;padding:10px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:14px;font-family:var(--font-body);transition:all 0.15s;}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
.fg textarea{resize:vertical;min-height:80px;}
.fg select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;}
/* Session D1 — Platform pill row in Quick Add / Edit forms.
   Compact horizontal scroll on mobile, full row on desktop. Live platforms
   are interactive; coming-soon platforms render disabled with a subtle look. */
.qa-platform-row{display:flex;flex-wrap:wrap;gap:6px;}
.qa-platform-pill{flex:0 0 auto;padding:7px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text-secondary);font-family:var(--font-body);font-size:12px;font-weight:600;cursor:pointer;transition:all 0.15s;letter-spacing:0;}
.qa-platform-pill:hover{border-color:var(--accent);color:var(--text);}
.qa-platform-pill.active{background:var(--accent);color:#000;border-color:var(--accent);}
/* D1.6 — coming-soon pills are now CLICKABLE (preview mode) but visually
   muted so the live default (eBay) reads as the recommended choice. When
   selected, the pill goes muted-active rather than full accent. */
.qa-platform-pill.coming-soon{opacity:0.7;}
.qa-platform-pill.coming-soon::after{content:'·soon';font-size:9px;font-weight:500;margin-left:4px;opacity:0.7;}
.qa-platform-pill.coming-soon.active{background:color-mix(in srgb,var(--accent) 30%, var(--surface2) 70%);color:var(--text);border-color:color-mix(in srgb,var(--accent) 60%, transparent);}

/* Session D1.6 — Quick Add price input helper (small clarifying line shown
   under the Cost/Sale row when the platform's pricing pattern needs it,
   e.g. "Buyer pays this + Vinted Buyer Protection on top"). */
.qa-price-helper{font-size:11px;color:var(--text-secondary);font-style:italic;margin:-8px 0 14px;padding:0 2px;line-height:1.4;}

/* Session D1.6 — Coming Soon banner above the locked Add button.
   Three columns: clock icon · explanatory text · CTA back to eBay. */
.qa-coming-soon-banner{display:flex;align-items:center;gap:12px;margin-top:18px;padding:12px 14px;background:color-mix(in srgb,var(--warn) 10%, var(--surface2) 90%);border:1px solid color-mix(in srgb,var(--warn) 35%, var(--border) 65%);border-radius:10px;}
.qa-cs-icon{flex-shrink:0;color:var(--warn);}
.qa-cs-text{flex:1;display:flex;flex-direction:column;gap:2px;font-size:12px;line-height:1.4;}
.qa-cs-text strong{font-size:13px;font-weight:700;color:var(--text);}
.qa-cs-text span{color:var(--text-secondary);}
.qa-cs-cta{flex-shrink:0;padding:6px 12px;background:var(--accent);color:#000;border:none;border-radius:8px;font-family:var(--font-body);font-size:12px;font-weight:700;cursor:pointer;transition:all 0.15s;}
.qa-cs-cta:hover{filter:brightness(1.1);transform:translateY(-1px);}
@media(max-width:600px){.qa-coming-soon-banner{flex-wrap:wrap;}.qa-cs-text{flex:1 1 100%;order:1;}.qa-cs-icon{order:0;}.qa-cs-cta{order:2;width:100%;padding:9px;}}

/* Session D1.6 — Locked submit button when a non-live platform is selected.
   V2 Session 2: generalized off .btn-p (variant-agnostic) so locked/disabled
   handling survives the btn-p→btn-primary markup rename. */
.btn.locked,.btn:disabled{opacity:0.45;cursor:not-allowed;filter:saturate(0.6);}
.btn.locked:hover,.btn:disabled:hover{transform:none;}
[data-theme="dark"] .qa-platform-pill.active{color:#0a0a0a;}
@media(max-width:600px){.qa-platform-row{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:2px;}.qa-platform-pill{font-size:11px;padding:6px 10px;}}
/* Global input UX: touch-action:manipulation removes 300ms tap delay so
   keyboard fires immediately on mobile tap. user-select:text ensures
   tapping an input selects it. Applied to ALL inputs sitewide. */
input,select,textarea{touch-action:manipulation;user-select:text;-webkit-user-select:text;}

/* BUTTONS — V2 Session 2: colour variants now owned by .rt .btn-primary /
   .btn-secondary / .btn-destructive / .btn-success in the V2 layer. Old
   .btn-p/.btn-s/.btn-danger colour rules retired (markup migrated off those
   names). Base .btn geometry kept but is overridden by .rt .btn under body.rt. */
.btn{padding:10px 18px;border-radius:var(--radius-sm);border:none;cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:13px;letter-spacing:0;text-transform:none;transition:all 0.15s;display:inline-flex;align-items:center;gap:6px;justify-content:center;}
/* Bulk-action bar — unified control sizing so buttons + platform picker match */
.bulk-ctrl{height:34px;padding:0 12px;font-size:13px;font-weight:600;border-radius:9px;border:1px solid var(--border);background:var(--surface2);color:var(--text);display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:var(--font-body);line-height:1;white-space:nowrap;transition:background .14s ease,border-color .14s ease,transform .1s ease;}
.bulk-ctrl:active{transform:scale(0.97);}
.bulk-ctrl.is-sold{color:var(--green);}
.bulk-ctrl.is-danger{color:var(--red);}
select.bulk-ctrl{padding-right:26px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a96a0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;}

/* DROPDOWN */
.ddwrap{position:relative;}
.item-checkbox{display:flex;align-items:center;padding:0 6px;}
.ddbtn{padding:8px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:14px;color:var(--text);transition:all 0.15s;display:flex;align-items:center;gap:6px;}
.ddbtn:hover{border-color:var(--accent);background:var(--accent);color:#000;}
.ddmenu{display:none;position:absolute;top:calc(100% + 4px);right:0;min-width:180px;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 20px var(--shadow-md);z-index:400;overflow:hidden;}
.ddwrap.open .ddmenu{display:none;}/* portal handles rendering */
.ddmenu.up{top:auto;bottom:calc(100% + 4px);box-shadow:0 -4px 20px var(--shadow-md);}
.ddmenu button{width:100%;padding:12px 16px;background:none;border:none;text-align:left;cursor:pointer;font-size:14px;color:var(--text);transition:background 0.15s;display:flex;align-items:center;gap:8px;}
.ddmenu button:hover{background:var(--surface2);}
.ddmenu button.danger{color:var(--red);}
.ddmenu button.danger:hover{background:var(--red-dim);}

/* TOAST */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--surface);border:1px solid var(--border);color:var(--text);padding:14px 24px;border-radius:10px;font-size:14px;font-weight:500;z-index:500;opacity:0;transition:opacity 0.22s ease, transform 0.32s cubic-bezier(0.34,1.32,0.64,1);box-shadow:0 4px 20px var(--shadow-md);max-width:90vw;}
@media(max-width:600px){#toast{bottom:calc(62px + env(safe-area-inset-bottom,0px) + 10px);}}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0);}
#toast.err{background:var(--red);color:#fff;border-color:var(--red-hover);}

/* MOBILE */

@media (max-width:600px){
  .form-grid-2{grid-template-columns:1fr!important;}
  .ip-details-grid{grid-template-columns:1fr!important;}
  .ip-field-num{width:100%;}
  .bpf-preview-inner{flex-direction:column!important;gap:8px!important;}
  .bpf-breakdown{flex-direction:column;gap:4px;}
  .bpf-profit-right{text-align:left!important;}
  .return-fields{grid-template-columns:1fr;}
  .rtn-grid{grid-template-columns:1fr;}
  .search-dropdown{min-width:0;left:-40px;right:-40px;}
  .slide-panel{padding:16px;padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));}
  .panel-header{margin-bottom:14px;}
  .panel-close{padding:6px 10px;font-size:18px;min-width:44px;min-height:44px;}
  #panel-title{font-size:18px;line-height:1.2;}
  .item-badge{font-size:11px;padding:4px 8px;white-space:nowrap;}
  /* iOS zoom prevention — font-size below 16px triggers auto-zoom on tap */
  .fg input,.fg select,.fg textarea,
  .search-wrap input,#global-search,#global-search-mobile{font-size:16px!important;}
  .fg input[type=date]{text-align:left;direction:ltr;-webkit-text-fill-color:var(--text);}
  .fg input[type=date]::-webkit-date-and-time-value{text-align:left;}
  /* Sort/filter row compact on mobile — keep sort-select identical to filter-pill-dd-btn */
  .filter-row{flex-direction:row;gap:8px;}
  .sort-select{height:38px!important;min-height:38px!important;padding:0 32px 0 14px!important;font-size:13px!important;border-radius:10px!important;-webkit-appearance:none!important;}
  /* KPI card grids — 2-col on mobile */
  .kgrid{grid-template-columns:1fr 1fr!important;}
  .kgrid-3{grid-template-columns:1fr 1fr!important;}
  /* kgrid-3 with 3 items: last odd child spans 2 cols (orphan fix) */
  .kgrid-3>.kcard:last-child:nth-child(odd){grid-column:span 2;}
  /* kgrid-1col (Stock/Expenses): single col at all mobile sizes */
  .kgrid.kgrid-1col{grid-template-columns:1fr!important;}
  .kgrid.kgrid-1col .kcard{min-height:0!important;padding:10px 14px 10px 18px!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;}
  .kgrid.kgrid-1col .kcard .klabel{font-size:10px;margin-bottom:0;flex-shrink:0;flex:1;}
  .kgrid.kgrid-1col .kcard .kval{font-size:20px!important;margin:0!important;white-space:nowrap;flex-shrink:0;order:2;}
  .kgrid.kgrid-1col .kcard .ksub{display:none!important;}
  .kgrid.kgrid-1col .kcard::after{width:3px;height:calc(100% - 16px);top:8px;left:0;right:auto;border-radius:0 2px 2px 0;}
  .kgrid.kgrid-1col>.kcard:last-child:nth-child(odd){grid-column:unset!important;}
  /* Stat strip tokens in popup: single col compact rows */
  .stat-strip-grid{grid-template-columns:1fr!important;}
  .stat-strip-grid .ip-token{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;padding:10px 14px!important;gap:10px!important;}
  .stat-strip-grid .ip-token-label{font-size:10px;margin-bottom:0!important;flex-shrink:0;flex:1;}
  .stat-strip-grid .ip-token-val{font-size:20px!important;margin:0!important;flex-shrink:0;white-space:nowrap;}
  .stat-strip-grid .ip-token-sub{display:none!important;}
  /* Summary 4-card: 2x2 on mobile */
  .kgrid-4{grid-template-columns:1fr 1fr!important;}

  .chart-title{font-size:10px;flex-wrap:nowrap;gap:8px;margin-bottom:14px;}
  .chart-legend{margin-left:auto;gap:8px;flex-shrink:0;}
  .chart-wrap{padding:14px;}
}

/* EXTRAS */
.return-section{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:18px;margin-top:14px;}
.return-title{font-weight:600;font-size:15px;margin-bottom:14px;color:var(--text);}
.return-type-btns,.rtype-btn{display:flex;gap:8px;flex-wrap:wrap;}
.rtype-btn{padding:10px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;color:var(--text);transition:all 0.15s;}
.rtype-btn:hover{border-color:var(--accent);}
.rtype-btn.on{background:var(--accent);color:#000;border-color:var(--accent);}
.return-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.return-log{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px;margin-top:12px;font-size:13px;line-height:1.6;}
.return-log div{margin-bottom:8px;}
.return-log div:last-child{margin-bottom:0;}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:14px;}
.stat-mini{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;}
.stat-mini-label{font-size:10px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px;}
.stat-mini-val{font-size:16px;font-weight:700;}
.info-box{background:rgba(96,165,250,0.1);border:1px solid rgba(96,165,250,0.2);border-radius:8px;padding:12px 14px;font-size:13px;color:var(--blue);margin-bottom:14px;line-height:1.6;}
.info-box strong{font-weight:600;}
.exp-month-group{margin-bottom:8px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface);}
.exp-month-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;cursor:pointer;background:var(--surface2);transition:background 0.15s;user-select:none;}
.exp-month-header:hover{background:color-mix(in srgb,var(--border) 40%,var(--surface2) 60%);}
.exp-month-toggle{font-size:12px;color:var(--muted);transition:transform 0.2s;display:inline-block;}
.exp-month-group.collapsed .exp-month-toggle{transform:rotate(-90deg);}
.exp-month-body{padding:0 6px 6px;}
.exp-month-group.collapsed .exp-month-body{display:none;}
/* Flat ledger (Costs & Trips V2) — always-visible month dividers, no collapse */
.ledger-month{margin-bottom:14px;}
.ledger-month-label{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 4px 8px;margin-bottom:2px;border-bottom:1px solid var(--border);font-size:13px;font-weight:700;color:var(--text);}
.ledger-month-label .lm-count{font-size:11px;font-weight:500;color:var(--muted);margin-left:6px;}
.ledger-month-label .lm-total{font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--red);font-variant-numeric:tabular-nums;}
/* F7 — collapsible stock groups */
.stock-group-header:hover{background:color-mix(in srgb,var(--border) 30%,var(--surface2) 70%);}
.stock-group{display:grid;grid-template-rows:auto minmax(0,1fr);transition:grid-template-rows 190ms var(--ease-out);}
.stock-group.collapsed{grid-template-rows:auto minmax(0,0fr);}
.stock-group .stock-group-body{min-height:0;overflow:hidden;opacity:1;transition:opacity 130ms ease;}
.stock-group.collapsed .stock-group-body{opacity:0;pointer-events:none;}
#p-stock .item-table.stock-group-body.is-collapsed{display:block!important;}
@media (prefers-reduced-motion:reduce){.stock-group{transition:none!important}.stock-group .stock-group-body{transition:none!important;}}
.stock-group-toggle{font-size:12px;color:var(--muted);transition:transform 0.2s;display:inline-block;}
.expense-item{background:var(--surface);border-bottom:1px solid var(--border);padding:11px 12px;display:flex;align-items:center;gap:10px;transition:background 0.12s;cursor:default;}
.expense-item:last-child{border-bottom:none;}
.expense-item:hover{background:var(--surface2);}
.expense-item.clickable{cursor:pointer;}
/* Policy dropdown — centred text so placeholder reads naturally */
select[id^="ip-policy-sel"],
select[id^="qa-shipping-policy"],
select[id^="edit-shipping-policy"]{text-align:center;text-align-last:center;}

/* ≤420px: clamp expense meta to 2 items — prevent multi-line wrap */
@media(max-width:420px){
  .expense-meta{flex-wrap:nowrap;}
  .expense-meta>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
  .expense-meta>*:nth-child(n+3){display:none;}
}
.exp-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.exp-dot.trip{background:var(--accent);}
.exp-dot.expense{background:var(--red);}
.expense-main{flex:1;min-width:0;}
.expense-label{font-weight:600;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;}
.expense-meta{font-size:12px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0;overflow:hidden;}
.expense-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;min-width:64px;}
.expense-amount{font-size:14px;font-weight:700;font-family:var(--font-body);color:var(--text);white-space:nowrap;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;}
.expense-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:var(--muted);}
.loading{display:flex;align-items:center;justify-content:center;min-height:200px;color:var(--text-secondary);font-size:14px;}
.empty-state{text-align:center;padding:60px 20px;color:var(--text-secondary);}
.empty-state-icon{font-size:48px;margin-bottom:16px;opacity:0.5;display:flex;justify-content:center;align-items:center;}
.empty-state-text{font-size:16px;font-weight:500;}
.bpf-info{background:rgba(96,165,250,0.06);border:1px solid rgba(96,165,250,0.15);border-radius:8px;padding:10px 12px;font-size:12px;color:var(--text-secondary);margin-top:8px;}
.bpf-breakdown{display:flex;gap:16px;margin-top:6px;font-size:11px;}
.bpf-breakdown span{display:flex;align-items:center;gap:4px;}

/* PAGE LAYOUT */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:nowrap;gap:10px;}
.page-header>div:first-child{min-width:0;flex:1;}
.page-header .page-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Fluid page title — scales smoothly from 20px (320px viewport) to 34px (desktop). */
.page-title{font-family:"Inter",system-ui,sans-serif;font-size:clamp(20px,5.5vw,34px);font-weight:800;letter-spacing:-0.04em;line-height:1.1;}
/* Subtitle fades out on very narrow viewports where it would push content down.
   Smooth opacity + height transition means it disappears without layout jump. */
.page-subtitle{color:var(--text-secondary);font-size:clamp(12px,3vw,14px);margin-top:3px;line-height:1.4;
  transition:opacity 0.2s,max-height 0.2s;max-height:3em;overflow:hidden;}
@media(max-width:420px){
  .page-subtitle{opacity:0;max-height:0;margin:0;}
  .page-header{align-items:center!important;}
  /* DO NOT add white-space/overflow overrides here — line 645 already sets
     .page-header .page-title to nowrap+ellipsis. Overriding it back with
     !important causes all page titles to overflow on narrow screens because
     the adjacent flex-shrink:0 buttons give the title nowhere to wrap into. */
  .page-title{font-size:clamp(18px,6.5vw,24px);}
}
.page-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}

/* SECTION CARD */
.section-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin-bottom:20px;box-shadow:0 1px 2px var(--shadow);}
.section-card-title{font-family:var(--font-display);font-weight:700;font-size:15px;margin-bottom:6px;}
.section-card-desc{color:var(--text-secondary);font-size:13px;margin-bottom:16px;}
.section-card.danger{background:var(--red-dim);border-color:rgba(220,38,38,0.25);}
.section-card.danger .section-card-title{color:var(--red);}

/* BULK ACTION BAR */
.bulk-bar{background:var(--surface);border:1px solid var(--accent);border-radius:10px;padding:14px 18px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;box-shadow:0 2px 8px var(--accent-dim);}
.bulk-bar-label{font-weight:600;font-size:14px;}
.bulk-bar-actions{display:flex;gap:8px;flex-wrap:wrap;}

/* MONTH SELECTOR */
.month-select{padding:10px 14px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:14px;cursor:pointer;font-family:inherit;font-weight:500;transition:border-color 0.15s;}
.month-select:focus{outline:none;border-color:var(--accent);}
.month-title-select{background:transparent;border:none;color:var(--text);font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:-0.03em;cursor:pointer;padding:0 28px 0 0;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;}
@media(max-width:380px){.fy-current-badge{display:none!important;}}
@media(max-width:380px){
  .btn-label-hide-xs{display:none!important;}
  .btn-label-show-xs{display:inline!important;}
}
/* ≤500px: hide the GID — least useful at a glance */
@media(max-width:500px){
  .item-row-meta .item-row-gid{display:none;}
}
/* ≤420px: hide separators and all meta AFTER the first non-badge span
   (keeps date/age visible, hides secondary info) */
@media(max-width:420px){
  .item-row-meta .item-row-meta-sep{display:none;}
  .item-row-meta>span:not(.item-badge):not(.row-hint):not(.plat-badge):not(.item-row-gid)~span:not(.item-badge):not(.row-hint):not(.plat-badge):not(.item-row-gid){display:none;}
}
/* ≤360px: only badge + hint — tiny screens get the minimum viable signal */
@media(max-width:360px){
  .item-row-meta>span:not(.item-badge):not(.row-hint):not(.plat-badge){display:none;}
}
.month-title-select:focus{outline:none;}
.month-title-select:hover{color:var(--accent);}
/* Custom month picker */
.month-picker-wrap{position:relative;display:inline-block;}
.month-picker-title{font-family:var(--font-display);font-size:clamp(16px,6vw,26px);font-weight:800;letter-spacing:-0.03em;color:var(--text);cursor:pointer;display:flex;align-items:center;gap:8px;user-select:none;transition:color 0.15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.month-picker-title:hover{color:var(--accent);}
.month-picker-chevron{font-size:14px;color:var(--muted);transition:transform 0.2s;}
.month-picker-wrap.open .month-picker-chevron{transform:rotate(180deg);}
.month-picker-wrap.open .month-picker-title{color:var(--accent);}
/* Dropdown: anchored below trigger, slides in. Backdrop sits behind it. */
.month-picker-dropdown{display:none;position:absolute;top:calc(100% + 8px);left:0;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 48px var(--shadow-md);z-index:600;overflow-y:auto;width:280px;max-height:70vh;opacity:0;transform:translateY(-6px);transition:opacity .14s ease,transform .14s cubic-bezier(0.34,1.32,0.64,1);}
.month-picker-wrap.open .month-picker-dropdown{display:block;opacity:1;transform:translateY(0);}
@media(max-width:600px){
  .month-picker-dropdown{
    position:fixed!important;
    left:16px!important;right:16px!important;
    width:auto!important;
    max-height:60vh!important;
    transform:none!important;
  }
  .month-picker-wrap.open .month-picker-dropdown{transform:none!important;}
}
/* Backdrop closes on outside tap */
.month-picker-backdrop{display:none;position:fixed;inset:0;z-index:599;}
.month-picker-wrap.open .month-picker-backdrop{display:block;}
.month-picker-option{font-family:var(--font-body);padding:12px 18px;font-size:13px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all 0.12s;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--border);}
.month-picker-option:last-child{border-bottom:none;}
.month-picker-option:hover{background:var(--surface2);color:var(--text);}
.month-picker-option.active{color:var(--accent);font-weight:700;background:var(--accent-dim);}
.month-picker-option.active::after{content:'✓';font-size:13px;color:var(--accent);}
.month-picker-option-sub{font-size:11px;color:var(--muted);font-weight:400;}
/* FY group header inside picker */
.month-picker-fy-header{font-family:var(--font-display);padding:8px 18px 4px;font-size:9px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:0.12em;background:var(--surface2);}

/* CONFIRM MODAL */
#confirm-modal{display:none;position:fixed;inset:0;background:var(--overlay);z-index:1000;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
#confirm-modal.open{display:flex;animation:confirmOverlayIn 0.22s ease both;}
#confirm-modal.open .confirm-box{animation:confirmIn 0.3s cubic-bezier(0.34,1.32,0.64,1) both;}
.confirm-box{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:28px 24px;width:340px;max-width:90vw;box-shadow:0 8px 32px var(--shadow-md);}
.confirm-icon{font-size:36px;margin-bottom:12px;text-align:center;}
.confirm-title{font-family:var(--font-display);font-weight:800;font-size:17px;margin-bottom:8px;text-align:center;letter-spacing:-0.01em;}
.confirm-msg{color:var(--text-secondary);font-size:13px;margin-bottom:20px;text-align:center;line-height:1.6;}
.confirm-btns{display:flex;gap:10px;}

/* DATA GRID */
.data-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
@media(max-width:640px){.data-grid{grid-template-columns:1fr;}}

/* RETURN FORM */
.rtn-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* EMPTY STATE SUB */
.empty-state-sub{font-size:14px;color:var(--muted);margin-top:6px;}

/* SELECTION MODE */
.item-checkbox-left{display:flex;align-items:center;flex-shrink:0;padding-right:6px;}

/* FILTER ROW */
.filter-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px;flex-wrap:nowrap;}

/* FILTER CHIPS — segmented toggle style */
.filter-chips{display:flex;gap:0;flex-wrap:nowrap;margin-bottom:0;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:3px;width:fit-content;}
.filter-chips-select{display:none;}
/* Custom mobile filter dropdown — used in place of native select so we can
   show coloured dots next to options. Same sizing/feel as the month picker.
   Visible only on mobile (rule below in @media). */
/* Hidden on desktop; shown at mobile breakpoints when chips collapse.
   Natural width (shrink-wraps to content) until both-dropdowns mode forces equal split. */
.filter-pill-dd{position:relative;display:none;flex:0 0 auto;min-width:0;}
.filter-pill-dd-btn{display:flex;align-items:center;gap:8px;padding:0 14px;height:38px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--text);cursor:pointer;width:100%;justify-content:space-between;transition:all .15s;box-sizing:border-box;}
.filter-pill-dd-btn:hover{border-color:var(--accent);}
.filter-pill-dd-btn .fpdd-label{display:flex;align-items:center;gap:8px;}
.filter-pill-dd-btn .fpdd-chev{font-size:11px;color:var(--muted);transition:transform .2s;}
.filter-pill-dd.open .fpdd-chev{transform:rotate(180deg);}
.filter-pill-dd-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 32px var(--shadow-md);z-index:550;overflow:hidden;padding:4px;opacity:0;transform:translateY(-6px);transition:opacity .14s ease,transform .14s cubic-bezier(0.34,1.32,0.64,1);}
.filter-pill-dd.open .filter-pill-dd-menu{display:block;opacity:1;transform:translateY(0);}
.filter-pill-dd-backdrop{display:none;position:fixed;inset:0;z-index:549;}
.filter-pill-dd.open .filter-pill-dd-backdrop{display:block;}
.filter-pill-dd-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:7px;cursor:pointer;font-size:13px;color:var(--text-secondary);transition:all .12s;border:none;background:none;width:100%;text-align:left;}
.filter-pill-dd-opt:hover{background:var(--surface2);color:var(--text);}
.filter-pill-dd-opt:disabled,.filter-pill-dd-opt-empty{opacity:0.4;cursor:not-allowed;}
.filter-pill-dd-opt:disabled:hover,.filter-pill-dd-opt-empty:hover{background:none;}
.filter-pill-dd-opt.active{background:var(--accent-dim);color:var(--accent);font-weight:700;}
.filter-pill-dd-opt-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.filter-pill-dd-opt-count{margin-left:auto;font-size:11px;color:var(--muted);font-weight:600;}
.filter-pill-dd-opt.active .filter-pill-dd-opt-count{color:var(--accent);}
.chip{padding:7px 14px;border-radius:7px;border:none;background:transparent;color:var(--text-secondary);font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;cursor:pointer;transition:all 0.15s;white-space:nowrap;display:flex;align-items:center;gap:5px;}
.chip:hover:not(:disabled){color:var(--text);}
.chip.active{background:var(--surface);color:var(--text);box-shadow:0 1px 4px var(--shadow);}
.chip.chip-empty,.chip:disabled{opacity:0.4;cursor:not-allowed;}
/* Coloured dot prefix on category chips — visual scan cue */
.chip-all,.chip-sold,.chip-returned,.chip-fresh,.chip-maturing,.chip-slow,.chip-stale{gap:6px;}
.chip-all::before,.chip-sold::before,.chip-returned::before,.chip-fresh::before,.chip-maturing::before,.chip-slow::before,.chip-stale::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.chip-all::before{background:var(--muted);}
.chip-sold::before, .chip-fresh::before{background:var(--green);}
.chip-returned::before, .chip-stale::before{background:var(--red);}
.chip-maturing::before{background:var(--text-secondary);}
.chip-slow::before{background:#f5a623;}
[data-theme="light"] .chip.active{background:#fdf9f3;}
.chip .chip-count{font-size:10px;color:var(--muted);font-weight:600;}
.chip.active .chip-count{color:var(--text-secondary);}

/* ── COSTS & TRIPS V2 — period scope + category filter cards ── */
.cost-period-row{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 0 6px;margin-bottom:10px;scrollbar-width:none;}
.cost-period-row::-webkit-scrollbar{display:none;}
.cost-period-pill{flex:0 0 auto;padding:7px 13px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);font-family:var(--font-body);font-size:12.5px;font-weight:600;white-space:nowrap;cursor:pointer;transition:all 0.15s;-webkit-tap-highlight-color:transparent;}
.cost-period-pill:hover{color:var(--text);border-color:var(--border2);}
.cost-period-pill.active{background:var(--accent-dim);color:var(--accent);border-color:rgba(212,136,10,0.4);}
[data-theme="light"] .cost-period-pill.active{background:var(--accent-dim);}

.cost-total-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;box-shadow:0 1px 2px var(--shadow);}
.cost-total-left{min-width:0;}
.cost-total-label{font-family:var(--font-display);font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;font-weight:600;}
.cost-total-val{font-family:var(--font-body);font-size:clamp(22px,6vw,30px);font-weight:800;line-height:1.05;letter-spacing:-0.03em;color:var(--red);margin-top:3px;font-variant-numeric:tabular-nums;}
.cost-total-sub{font-size:11px;color:var(--muted);margin-top:4px;}
.cost-taxlink{flex:0 0 auto;display:flex;align-items:center;gap:5px;padding:9px 13px;border-radius:9px;border:1px solid rgba(212,136,10,0.4);background:var(--accent-dim);color:var(--accent);font-family:var(--font-body);font-size:12.5px;font-weight:700;cursor:pointer;transition:all 0.15s;white-space:nowrap;-webkit-tap-highlight-color:transparent;}
.cost-taxlink:hover{background:var(--accent);color:#fff;}
[data-theme="dark"] .cost-taxlink:hover{color:#1a1408;}

.cost-cat-row{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 0 10px;margin-bottom:6px;scrollbar-width:none;scroll-snap-type:x proximity;}
.cost-cat-row::-webkit-scrollbar{display:none;}
.cost-cat-card{flex:0 0 auto;scroll-snap-align:start;min-width:118px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:11px 13px 12px;cursor:pointer;transition:border-color 0.15s,box-shadow 0.15s,transform 0.15s;box-shadow:0 1px 2px var(--shadow);-webkit-tap-highlight-color:transparent;position:relative;}
.cost-cat-card:hover{border-color:var(--border2);transform:translateY(-1px);}
.cost-cat-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 2px 8px var(--shadow-md);}
.cost-cat-card .ccc-dot{width:8px;height:8px;border-radius:50%;margin-bottom:8px;}
.cost-cat-card .ccc-label{font-size:12px;font-weight:600;color:var(--text-secondary);line-height:1.2;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px;}
.cost-cat-card.active .ccc-label{color:var(--text);}
.cost-cat-card .ccc-amt{font-family:var(--font-body);font-size:16px;font-weight:800;letter-spacing:-0.02em;color:var(--text);font-variant-numeric:tabular-nums;}
.cost-cat-card .ccc-count{font-size:10.5px;color:var(--muted);font-weight:600;margin-top:2px;}
.cost-cat-card .ccc-box{position:absolute;top:9px;right:10px;font-size:9px;font-weight:700;color:var(--muted);opacity:0.7;letter-spacing:0.02em;}

/* PERIOD PILLS — summary page */
/* PERIOD SELECT INLINE — sits in the sl row, ghost style */
.period-select-inline{padding:6px 28px 6px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);font-family:var(--font-body);font-size:12px;font-weight:500;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%239a96a0' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;transition:border-color 0.15s;white-space:nowrap;flex-shrink:0;}
.period-select-inline:hover{border-color:var(--border2);}
.period-select-inline:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim);}
[data-theme="dark"] .period-select-inline{color-scheme:dark;}
/* PERIOD SELECT (standalone — keep for any other use) */
.period-select-wrap{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px;}
.period-select-label{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;white-space:nowrap;}
.period-select{flex:1;max-width:200px;padding:8px 32px 8px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:var(--font-body);font-size:13px;font-weight:500;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238096b8' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;transition:border-color 0.15s,box-shadow 0.15s;}
.period-select:hover{border-color:var(--border2);}
.period-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
[data-theme="dark"] .period-select{color-scheme:dark;}
/* mobile: full width */
@media(max-width:600px){.period-select{max-width:none;flex:1;}}

/* LIST TOOLBAR */
.list-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:0 2px;flex-wrap:wrap;}
/* ── v2.21.18 In-list search + selection/filter totals bar ────────────── */
.inlist-search{position:relative;display:flex;align-items:center;gap:8px;margin:0 2px 12px;padding:8px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;}
.inlist-search-ic{display:flex;align-items:center;color:var(--text-secondary);flex-shrink:0;}
.inlist-search-input{flex:1;min-width:0;border:none;background:transparent;color:var(--text);font-size:14px;font-family:inherit;outline:none;padding:2px 0;}
.inlist-search-input::placeholder{color:var(--text-secondary);opacity:0.8;}
.inlist-search-clear{flex-shrink:0;border:none;background:var(--surface);color:var(--text-secondary);width:22px;height:22px;border-radius:50%;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;}
.inlist-search-clear:hover{color:var(--text);}
.inlist-search-count{flex-shrink:0;font-size:11px;font-weight:700;color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;}
.inlist-empty{padding:26px 16px;text-align:center;color:var(--text-secondary);font-size:13px;}
.sel-totals-bar{position:fixed;left:0;right:0;bottom:0;z-index:305;display:flex;align-items:center;gap:14px;padding:9px 16px calc(9px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -4px 22px var(--shadow-md);animation:selBarIn .22s cubic-bezier(0.34,1.3,0.64,1) both;}
@keyframes selBarIn{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
.sel-totals-bar .stb-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;letter-spacing:0.02em;color:var(--text-secondary);text-transform:uppercase;flex-shrink:0;}
.sel-totals-bar .stb-hero{display:flex;flex-direction:column;gap:1px;flex-shrink:0;border-left:1px solid var(--border);padding-left:12px;}
.sel-totals-bar .stb-hero-label{font-size:10px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-secondary);}
.sel-totals-bar .stb-hero-val{font-size:19px;font-weight:800;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums;}
.sel-totals-bar .stb-hero-val.neg{color:var(--red);}
.sel-totals-bar .stb-foot{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;min-width:0;font-size:12px;color:var(--text-secondary);font-variant-numeric:tabular-nums;overflow-x:auto;}
.sel-totals-bar .stb-foot span{white-space:nowrap;}
.sel-totals-bar .stb-foot b{color:var(--text);font-weight:700;}
body.rt-selbar-on .fab,body.rt-selbar-on .fab-dial{bottom:86px!important;}
body.rt-selbar-on #p-stock.page,body.rt-selbar-on #p-monthly.page{padding-bottom:180px;}
@media(min-width:1000px){.sel-totals-bar{left:var(--sidebar-w,240px);}}
@media(max-width:600px){
  .sel-totals-bar{bottom:calc(62px + env(safe-area-inset-bottom,0px));padding-bottom:9px;}
  body.rt-selbar-on .fab,body.rt-selbar-on .fab-dial{bottom:calc(62px + env(safe-area-inset-bottom,0px) + 76px)!important;}
  body.rt-selbar-on #p-stock.page,body.rt-selbar-on #p-monthly.page{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px));}
}

.list-count{font-size:13px;color:var(--text-secondary);font-weight:500;}
.select-toggle{background:none;border:none;color:var(--text-secondary);font-size:13px;font-weight:600;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all 0.15s;}
.select-toggle:hover{color:var(--text);background:var(--surface2);}
.select-toggle.active{color:var(--accent);}
.sel-check{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 8px;border-radius:6px;border:none;background:none;font-size:13px;font-weight:600;color:var(--text);transition:background 0.15s;flex-shrink:0;}
.sel-check:hover{background:var(--surface2);}
.sel-check-box{width:16px;height:16px;border-radius:4px;border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.15s;font-size:10px;}
.sel-check-box.all{background:var(--accent);border-color:var(--accent);color:#000;}
.sel-check-box.some{background:var(--surface2);border-color:var(--accent);}
.sel-exit{background:none;border:none;cursor:pointer;color:var(--text-secondary);font-size:13px;font-weight:600;padding:4px 10px;border-radius:6px;transition:all 0.15s;margin-left:auto;flex-shrink:0;}
.sel-exit:hover{color:var(--text);background:var(--surface2);}

/* SORT SELECT in header — unified with filter-pill-dd-btn */
.sort-select{
  padding:0 32px 0 14px;
  height:38px;min-height:38px;
  background:var(--surface2);border:1px solid var(--border);border-radius:10px;
  color:var(--text);font-size:13px;font-family:inherit;font-weight:600;
  cursor:pointer;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12'%3E%3Cpath fill='%23a09880' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  /* Natural width — aligns right via space-between on .filter-row.
     Only stretches to fill when paired with a pill-dd (both-dropdowns mode). */
  width:auto;flex:0 0 auto;box-sizing:border-box;
  transition:border-color .15s,box-shadow .15s;
}
.sort-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim);}
.sort-select:hover{border-color:var(--accent);}
[data-theme="dark"] .sort-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12'%3E%3Cpath fill='%2352505a' d='M6 9L1 4h10z'/%3E%3C/svg%3E");}

/* PARTS / EXPENSES ON ITEM */
.parts-list{margin-top:8px;}
.part-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px;}
.part-row:last-child{border-bottom:none;}
.part-desc{flex:1;font-weight:500;}
.part-cost{font-weight:700;font-family:var(--font-mono);color:var(--red);flex-shrink:0;}
.part-date{font-size:11px;color:var(--muted);flex-shrink:0;}
.part-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:2px 4px;border-radius:4px;line-height:1;flex-shrink:0;}
.part-del:hover{color:var(--red);background:var(--red-dim);}
.add-part-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;margin-top:10px;align-items:end;}
.parts-total{display:flex;justify-content:space-between;padding:8px 0 0;font-size:13px;font-weight:700;border-top:1px solid var(--border);margin-top:4px;}

/* INLINE EDIT */
.inline-val{cursor:pointer;border-radius:6px;transition:background 0.15s;padding:2px 4px;margin:-2px -4px;display:inline-block;}
.ip-field{background:transparent;border:none;border-bottom:1px solid transparent;color:var(--text);font-family:inherit;font-size:13px;padding:2px 4px;border-radius:4px;width:100%;transition:all 0.15s;cursor:text;}
.ip-field:hover{background:var(--surface2);border-bottom-color:var(--border2);}
.ip-field:focus{outline:none;background:var(--surface2);border-bottom-color:var(--accent);box-shadow:0 1px 0 var(--accent);}
.ip-field-num{width:90px;}
.ip-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;font-weight:600;margin-bottom:2px;}
.ip-row{display:flex;flex-direction:column;gap:1px;}

/* ═══════════════════════════════════════════════════════
   ITEM PAGE — full redesign
   ═══════════════════════════════════════════════════════ */

/* Top bar */
.ip-topbar{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.ip-topbar-row1{display:flex;align-items:center;gap:5px;flex-wrap:wrap;} /* v2.21.47 — wrap so action buttons (incl. the back/revert) never overflow off-screen on mobile */
.ip-topbar-row2{display:flex;align-items:flex-start;gap:8px;}
.ip-back{flex-shrink:0;white-space:nowrap;}
.ip-back-label{pointer-events:none;}
.ip-act-label-always{pointer-events:none;}
.ip-act-label{pointer-events:none;}
.ip-title-wrap{flex:1;min-width:0;}
.ip-title{font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1.3;word-break:break-word;margin-bottom:6px;cursor:pointer;border-radius:6px;padding:2px 4px;margin-left:-4px;transition:background 0.15s;}
.ip-title:hover{background:var(--surface2);}
.ip-title:hover::after{content:' ✎';font-size:15px;color:var(--muted);font-weight:400;}
.ip-title-input{font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1.3;word-break:break-word;margin-bottom:6px;background:var(--surface2);border:none;border-bottom:2px solid var(--accent);color:var(--text);font-family:inherit;width:100%;outline:none;padding:2px 4px;border-radius:6px 6px 0 0;}
.ip-meta-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.ip-chip{font-size:11px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:2px 8px;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:3px;}
.ip-chip.mono{font-family:var(--font-mono);}
.ip-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap;}
/* RETRADE icon system — consistent alignment for all icon() glyphs */
.rt-icon{display:inline-block;vertical-align:-0.15em;}
button .rt-icon,.btn .rt-icon{pointer-events:none;}
/* breathing room when an icon is immediately followed by a text label/span */
.btn .rt-icon + span,.ip-act-btn .rt-icon + span{margin-left:2px;}
.ddmenu button .rt-icon,.nav-more-menu button .rt-icon{margin-right:4px;}
.ip-act-btn{padding:7px 11px;font-size:13px;gap:5px;white-space:nowrap;flex-shrink:1;min-width:34px;}
.ip-act-danger{padding:7px 9px!important;}
@media(max-width:500px){
  .ip-act-label{display:none!important;}
  .ip-back-label{display:none!important;}
  .ip-act-btn{padding:7px 8px;gap:0;}
  /* primary buttons keep their label, so keep the icon-label gap */
  .ip-act-btn:has(.ip-act-label-always){gap:6px;padding:7px 12px;}
  .ip-back{padding:7px 10px;}
}
@media(max-width:380px){
  .ip-back{padding:6px 10px;font-size:12px;}
  .ip-act-btn{padding:6px 8px;}
}
.ip-act-danger{color:var(--red)!important;}
.ip-act-danger:hover{background:var(--red-dim)!important;border-color:var(--red)!important;color:var(--red)!important;}

/* Editable token grid — 4 tokens: Sale Price, Buy Price, Promo %, Net Profit */
.ip-tokens{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:0;width:100%;overflow:hidden;box-sizing:border-box;}
.ip-token{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;cursor:pointer;transition:border-color 0.15s,box-shadow 0.15s;position:relative;user-select:none;-webkit-tap-highlight-color:transparent;min-width:0;overflow:hidden;}
.ip-token:not(.locked):not(.editing){border-color:var(--border2);}
.ip-token:hover:not(.locked){border-color:var(--accent);box-shadow:0 2px 10px var(--accent-dim);}
.ip-token:not(.locked):active{transform:scale(0.985);transition:transform .07s ease;}
.ip-token.editing{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
.ip-token.locked{cursor:not-allowed;opacity:0.5;}
.ip-token.locked:hover{border-color:var(--border)!important;box-shadow:none!important;}
.ip-token-label{font-family:var(--font-display);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin-bottom:5px;}
.ip-token-val{font-family:"Inter",system-ui,sans-serif;font-size:21px;font-weight:700;letter-spacing:-0.04em;line-height:1;min-height:26px;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ip-token-val input{font-family:"Inter",system-ui,sans-serif;font-size:21px;font-weight:700;letter-spacing:-0.04em;width:100%;background:transparent;border:none;outline:none;color:var(--accent);padding:0;-moz-appearance:textfield;}
.ip-token-val input::-webkit-outer-spin-button,.ip-token-val input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.ip-token-sub{font-size:11px;color:var(--text-secondary);margin-top:5px;line-height:1.3;}
.ip-token.pos .ip-token-val{color:var(--green);}
.ip-token.neg .ip-token-val{color:var(--red);}

/* Postage row — slim bar below tokens, always full width */
.ip-postage-row{display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:10px 14px;margin-bottom:0;flex-wrap:wrap;width:100%;}
.ip-postage-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:var(--text-secondary);flex-shrink:0;white-space:nowrap;}
.ip-postage-mode{display:flex;gap:0;background:var(--surface2);border:1px solid var(--border);border-radius:7px;padding:2px;flex-shrink:0;}
.ip-postage-mode-btn{padding:4px 10px;border-radius:5px;border:none;background:transparent;font-size:11px;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:all 0.12s;white-space:nowrap;}
.ip-postage-mode-btn.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px var(--shadow);}
[data-theme="light"] .ip-postage-mode-btn.active{background:#fdf9f3;}
.ip-postage-divider{width:1px;background:var(--border);height:20px;flex-shrink:0;}
.ip-postage-select{flex:1;min-width:0;padding:4px 24px 4px 8px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-family:inherit;font-size:11px!important;font-weight:500;cursor:pointer;outline:none;transition:border-color 0.15s,box-shadow 0.15s;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;}
.ip-postage-select:hover{border-color:var(--border2);}
.ip-postage-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
.ip-postage-select option{background:var(--surface);color:var(--text);}
.ip-postage-buyer{display:flex;align-items:center;gap:5px;margin-left:auto;font-size:11px;color:var(--text-secondary);flex-shrink:0;}
.ip-postage-buyer label{display:flex;align-items:center;gap:5px;cursor:pointer;font-weight:500;white-space:nowrap;}
.ip-postage-buyer input[type=checkbox]{accent-color:var(--accent);width:13px;height:13px;cursor:pointer;}
.ip-postage-custom{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0;flex-wrap:nowrap;}
.ip-postage-custom-field{display:flex;align-items:center;gap:4px;font-size:11px;}
.ip-postage-custom-field label{color:var(--text-secondary);white-space:nowrap;font-weight:500;}
.ip-postage-custom-field input{width:60px;text-align:right;background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:4px 6px;font-size:11px;font-weight:600;font-family:var(--font-mono);color:var(--text);outline:none;transition:border-color 0.15s;}
.ip-postage-custom-field input:focus{border-color:var(--accent);}

/* Uniform spacing container */
.ip-content{display:flex;flex-direction:column;gap:12px;width:100%;}
.ip-body{display:flex;flex-direction:column;gap:12px;width:100%;}
.ip-section{background:var(--surface2);border-radius:12px;padding:0;overflow:hidden;width:100%;}
.ip-section-pnl{background:var(--surface);border:1px solid var(--border);box-shadow:0 1px 4px var(--shadow);}
.ip-section-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer;user-select:none;gap:8px;-webkit-tap-highlight-color:transparent;}
.ip-section-header:hover{background:rgba(0,0,0,0.03);}
[data-theme="dark"] .ip-section-header:hover{background:rgba(255,255,255,0.03);}
.ip-section-title{font-family:var(--font-display);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);}
.ip-section-meta{display:flex;align-items:center;gap:8px;}
.ip-section-badge{font-family:var(--font-display);font-size:14px;font-weight:800;letter-spacing:-0.01em;}
.ip-section-chevron{font-size:11px;color:var(--muted);transition:transform 0.2s;}
.ip-section-body{padding:0 16px 16px;}

/* P&L receipt rows */
.ip-receipt-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-size:13px;border-bottom:1px solid var(--border);gap:8px;}
.ip-receipt-row:last-child{border-bottom:none;}
.ip-receipt-row.total{font-weight:700;font-size:14px;padding-top:10px;margin-top:4px;border-top:2px solid var(--border);border-bottom:none;}
.ip-receipt-row.indent{padding-left:14px;}
.ip-receipt-row.section-head{font-weight:600;color:var(--accent);border-top:1px dashed var(--border);padding-top:10px;margin-top:4px;}
.ip-receipt-val{font-family:var(--font-mono);font-weight:600;font-size:13px;flex-shrink:0;text-align:right;}

/* Details grid */
.ip-details-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;}
.ip-row{display:flex;flex-direction:column;gap:3px;}
.ip-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.6px;font-weight:700;}
.ip-field{background:transparent;border:none;border-bottom:1px solid transparent;color:var(--text);font-family:inherit;font-size:14px;padding:3px 4px;border-radius:4px;width:100%;transition:all 0.15s;cursor:text;text-align:left;}
.ip-field:hover{background:var(--surface);border-bottom-color:var(--border2);}
.ip-field:focus{outline:none;background:var(--surface);border-bottom-color:var(--accent);box-shadow:0 1px 0 var(--accent);}
.ip-field-select{width:100%;background:transparent;border:none;border-bottom:1px solid transparent;color:var(--text);font-family:inherit;font-size:14px;cursor:pointer;border-radius:4px;appearance:none;-webkit-appearance:none;padding:3px 4px;transition:all 0.15s;}
.ip-field-select:hover{background:var(--surface);border-bottom-color:var(--border2);}
.ip-field-select:focus{outline:none;background:var(--surface);border-bottom-color:var(--accent);}
.ip-field-date{color:var(--text);font-size:14px;font-weight:500;padding:3px 4px;display:block;text-align:left;width:100%;}

/* Timeline entries */
.ip-timeline-entry{padding:10px 0;border-bottom:1px solid var(--border);}
.ip-timeline-entry:last-child{border-bottom:none;}
.ip-timeline-header{display:flex;align-items:center;gap:8px;margin-bottom:3px;}
.ip-timeline-label{font-weight:600;font-size:13px;}
.ip-timeline-detail{font-size:12px;color:var(--muted);line-height:1.5;}

/* Relist projection */
.ip-relist-section{background:var(--surface);border:1.5px dashed var(--accent);border-radius:12px;padding:0;overflow:hidden;width:100%;}
.ip-relist-section .ip-section-header{background:var(--accent-dim);}

/* Legacy inline-edit (startInlineEdit — still used by undo flows) */
.inline-val{cursor:pointer;border-radius:6px;transition:background 0.15s;padding:2px 4px;margin:-2px -4px;display:inline-block;}
.inline-val:hover{background:var(--surface2);}
.inline-val:hover::after{content:' ✎';font-size:14px;color:var(--muted);font-weight:400;}
.inline-input{font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:-0.02em;width:120px;border:none;border-bottom:2px solid var(--accent);background:transparent;color:var(--text);outline:none;padding:0;}
.ip-edit-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13px;border-bottom:1px solid var(--border);gap:8px;}
.ip-edit-row:last-child{border-bottom:none;}
.ip-edit-row-label{color:var(--text-secondary);flex:1;}
.ip-edit-row-val{font-family:var(--font-mono);font-weight:600;font-size:13px;}
.ip-edit-input{width:72px;text-align:right;background:transparent;border:none;border-bottom:1px solid transparent;color:var(--text);font-family:var(--font-mono);font-size:13px;font-weight:600;padding:1px 4px;border-radius:3px;transition:all 0.15s;}
.ip-edit-input:hover{background:var(--surface2);border-bottom-color:var(--border2);}
.ip-edit-input:focus{outline:none;background:var(--surface2);border-bottom-color:var(--accent);box-shadow:0 1px 0 var(--accent);}

/* Responsive — single breakpoint: 4-col → 2-col
   Pairs stay logical: [Sale Price][Buy Price] / [Promo %][Net Profit] */
@media(max-width:680px){
  /* Top bar */
  /* ip-topbar-row1 nowrap — see base rule */
  .ip-title{font-size:18px;}
  .ip-actions{width:100%;justify-content:flex-start;}
  .ip-act-danger{margin-left:auto;} /* push delete to far right */
  .ip-act-label{font-size:12px;}
  .ip-actions{width:100%;justify-content:flex-start;}

  /* Tokens — 4-col → 2-col on mobile */
  .ip-tokens{grid-template-columns:1fr 1fr;gap:8px;}
  .ip-token{padding:10px 12px;}
  .ip-token-val{font-size:18px;}
  .ip-token-val input{font-size:18px;}
  .ip-token-sub{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}

/* Narrow screens: ensure token values never overflow their cell */
@media(max-width:420px){
  .ip-token-val{font-size:16px;}
  .ip-token-val input{font-size:16px;}
  .ip-token{padding:8px 10px;}
  .ip-token-label{font-size:9px;}
}

@media(max-width:680px){
  /* Postage row — stack on mobile */
  .ip-postage-row{flex-direction:column;align-items:flex-start;gap:8px;padding:10px 12px;}
  .ip-postage-divider{display:none;}
  .ip-postage-mode{width:100%;}
  .ip-postage-mode-btn{flex:1;text-align:center;}
  .ip-postage-select{width:100%;font-size:16px;}
  .ip-postage-buyer{margin-left:0;}
  .ip-postage-custom{margin-left:0;width:100%;justify-content:flex-start;gap:16px;}
  .ip-postage-custom-field{flex:1;}
  .ip-postage-custom-field input{font-size:16px;width:100%;}

  /* Details */
  .ip-details-grid{grid-template-columns:1fr;}
  .ip-field{font-size:16px;text-align:left;padding:2px 4px;}
  .ip-field[type=date]{text-align:left;direction:ltr;display:block;-webkit-text-fill-color:var(--text);}
  .ip-field[type=date]::-webkit-date-and-time-value{text-align:left;}
  .ip-field-select{font-size:16px;}

  /* P&L receipt — slightly tighter */
  .ip-receipt-row{font-size:12px;}
  .ip-receipt-row.total{font-size:13px;}
  .ip-receipt-val{font-size:12px;}

  /* Timeline undo — bigger tap target */
  .ip-timeline-label{font-size:13px;}
  .ip-timeline-detail{font-size:12px;}
  .ip-timeline-header button{padding:4px 10px!important;font-size:12px!important;}

  /* Combined hardening — retroactive link-to-sale candidate list */
  .link-cand{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:9px;margin-bottom:7px;cursor:pointer;color:var(--text);}
  .link-cand:hover{border-color:var(--accent);}
  /* v1.01 — historical sale reconciliation. These are decision cards rather
     than generic radio inputs because each choice has different accounting
     consequences. Keep the whole row tappable on mobile. */
  .reconcile-mode-card{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;margin-bottom:8px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:border-color .15s,background .15s;line-height:1.4;}
  .reconcile-mode-card:hover{border-color:var(--border2);}
  .reconcile-mode-card:has(input:checked){border-color:var(--accent);background:var(--accent-dim);}
  .reconcile-mode-card input{margin-top:3px;accent-color:var(--accent);flex-shrink:0;}
  .reconcile-mode-card span{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .reconcile-mode-card strong{font-size:13px;color:var(--text);}
  .reconcile-mode-card small{font-size:11.5px;color:var(--text-secondary);font-weight:400;}

  /* Page padding consistency */
  .item-full-page{padding:14px 16px 80px;}
}


/* Launch Audit v1.3 — Activity & Undo.
   Recovery-first timeline: compact overview, clear chronological rail, and
   Undo only when the underlying item snapshot can be restored safely. */
.rt #p-activity .act-shell{max-width:930px;margin:0 auto;}
.rt #p-activity .act-page-header{align-items:flex-end;gap:16px;margin-bottom:16px;}
.rt #p-activity .act-overview{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--text-secondary);font-size:12px;white-space:nowrap;}
.rt #p-activity .act-overview span{display:inline-flex;align-items:baseline;gap:4px;}
.rt #p-activity .act-overview strong{font-size:15px;color:var(--text);font-variant-numeric:tabular-nums;}
.rt #p-activity .act-overview i{width:3px;height:3px;border-radius:50%;background:var(--border2);display:inline-block;}
.rt #p-activity .act-overview-review,.rt #p-activity .act-overview-review strong{color:var(--warn)!important;}
.rt #p-activity .act-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;position:sticky;top:58px;z-index:8;padding:8px 0;background:linear-gradient(var(--bg) 72%,transparent);}
.rt #p-activity .act-filters{display:flex;gap:3px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:3px;overflow-x:auto;max-width:100%;scrollbar-width:none;}
.rt #p-activity .act-filters::-webkit-scrollbar{display:none;}
.rt #p-activity .act-filter{border:0;background:transparent;color:var(--text-secondary);padding:6px 9px;border-radius:7px;font:600 12px var(--font-body);white-space:nowrap;cursor:pointer;transition:background .15s,color .15s;display:inline-flex;align-items:center;gap:6px;}
.rt #p-activity .act-filter b{font-size:10px;line-height:1;min-width:18px;padding:3px 5px;border-radius:999px;background:color-mix(in srgb,var(--border) 70%,transparent);color:var(--muted);font-weight:700;text-align:center;}
.rt #p-activity .act-filter:hover{color:var(--text);}
.rt #p-activity .act-filter.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px var(--shadow);}
.rt #p-activity .act-filter.active b{background:var(--accent-dim);color:var(--accent);}
.rt #p-activity .act-search{position:relative;flex:1;min-width:245px;}
.rt #p-activity .act-search input{width:100%;height:36px;padding:0 34px 0 36px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:12.5px;box-shadow:0 1px 2px var(--shadow);}
.rt #p-activity .act-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
.rt #p-activity .act-search>svg{position:absolute;left:12px;top:11px;color:var(--muted);pointer-events:none;}
.rt #p-activity .act-search-clear{display:none;position:absolute;right:6px;top:6px;width:24px;height:24px;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;}
.rt #p-activity .act-search-clear.show{display:block;}
.rt #p-activity .act-search-clear:hover{background:var(--surface2);color:var(--text);}
.rt #p-activity .act-feed{max-width:930px;margin:0 auto;padding-bottom:20px;}
.rt #p-activity .act-day{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:20px 0 10px;}
.rt #p-activity .act-day::after{content:'';height:1px;background:var(--border);flex:1;}
.rt #p-activity .act-entry{display:grid;grid-template-columns:38px minmax(0,1fr);position:relative;}
.rt #p-activity .act-rail{position:relative;display:flex;justify-content:center;}
.rt #p-activity .act-rail::after{content:'';position:absolute;top:31px;bottom:-1px;width:1px;background:var(--border);left:50%;transform:translateX(-50%);}
.rt #p-activity .act-entry:last-child .act-rail::after{display:none;}
.rt #p-activity .act-node{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);color:var(--text-secondary);box-shadow:0 0 0 4px var(--bg);}
.rt #p-activity .act-node-sale{color:var(--green);border-color:color-mix(in srgb,var(--green) 38%,var(--border));background:color-mix(in srgb,var(--green-dim) 70%,var(--surface));}
.rt #p-activity .act-node-return{color:var(--red);border-color:color-mix(in srgb,var(--red) 38%,var(--border));background:color-mix(in srgb,var(--red-dim) 70%,var(--surface));}
.rt #p-activity .act-node-stock{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 38%,var(--border));background:color-mix(in srgb,var(--accent-dim) 65%,var(--surface));}
.rt #p-activity .act-node-disposal{color:var(--muted);}
.rt #p-activity .act-node-joblot{color:var(--purple);border-color:color-mix(in srgb,var(--purple) 40%,var(--border));}
.rt #p-activity .act-node-review{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 46%,var(--border));background:color-mix(in srgb,var(--accent-dim) 60%,var(--surface));}
.rt #p-activity .act-card{min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:11px 12px 10px;margin:0 0 9px 3px;box-shadow:0 1px 2px var(--shadow);transition:border-color .15s,box-shadow .15s,transform .15s;}
@media(hover:hover){.rt #p-activity .act-card:hover{border-color:var(--border2);box-shadow:0 4px 14px var(--shadow);transform:translateY(-1px);}}
.rt #p-activity .act-review .act-card{border-color:color-mix(in srgb,var(--warn) 44%,var(--border));background:color-mix(in srgb,var(--warn) 4%,var(--surface));}
.rt #p-activity .act-undone .act-card{opacity:.62;background:color-mix(in srgb,var(--surface2) 35%,var(--surface));}
.rt #p-activity .act-undone .act-title{text-decoration:line-through;text-decoration-thickness:1px;color:var(--text-secondary);}
.rt #p-activity .act-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.rt #p-activity .act-title-wrap{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0;}
.rt #p-activity .act-title{font-size:13px;font-weight:750;color:var(--text);line-height:1.35;}
.rt #p-activity .act-item-link{appearance:none;border:0;background:none;padding:0;color:var(--text-secondary);font:600 13px var(--font-body);cursor:pointer;min-width:0;max-width:480px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;}
.rt #p-activity .act-item-link:not(:disabled):hover{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.rt #p-activity .act-item-link:disabled{cursor:default;}
.rt #p-activity .act-time{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 auto;padding-top:1px;}
.rt #p-activity .act-detail{font-size:12px;color:var(--text-secondary);margin-top:5px;line-height:1.45;overflow-wrap:anywhere;}
.rt #p-activity .act-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px;min-height:18px;}
.rt #p-activity .act-transition{font-size:10.5px;color:var(--muted);background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:2px 6px;}
.rt #p-activity .act-transition span{opacity:.6;padding:0 2px;}
.rt #p-activity .act-review-tag,.rt #p-activity .act-unverified-tag,.rt #p-activity .act-reversed-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.055em;border-radius:5px;padding:2px 6px;}
.rt #p-activity .act-review-tag{color:var(--warn);background:var(--accent-dim);}
.rt #p-activity .act-unverified-tag{color:var(--muted);background:var(--surface2);border:1px solid var(--border);}
.rt #p-activity .act-reversed-tag{color:var(--text-secondary);background:var(--surface2);border:1px dashed var(--border2);}
.rt #p-activity .act-actions{display:flex;align-items:center;justify-content:flex-end;min-height:0;margin-top:4px;}
.rt #p-activity .act-undo{display:inline-flex;align-items:center;gap:5px;padding:5px 9px!important;font-size:11.5px!important;white-space:nowrap;}
.rt #p-activity .act-undo-note{display:inline-flex;align-items:center;gap:5px;max-width:100%;font-size:10.5px;color:var(--muted);cursor:help;}
.rt #p-activity .act-empty{text-align:center;padding:48px 18px;color:var(--muted);background:var(--surface);border:1px dashed var(--border2);border-radius:12px;}
.rt #p-activity .act-empty-icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;background:var(--surface2);color:var(--muted);}
.rt #p-activity .act-empty-title{font-size:14px;font-weight:750;color:var(--text);}
.rt #p-activity .act-empty-copy{font-size:12.5px;margin:6px auto 0;max-width:480px;line-height:1.5;}
@media(max-width:720px){
  .rt #p-activity .act-page-header{align-items:flex-start;flex-direction:column;margin-bottom:10px;}
  .rt #p-activity .act-overview{font-size:11.5px;}
  .rt #p-activity .act-overview strong{font-size:14px;}
  .rt #p-activity .act-toolbar{top:0;align-items:stretch;padding-top:6px;}
  .rt #p-activity .act-search{order:0;width:100%;flex-basis:100%;min-width:0;}
  .rt #p-activity .act-filters{order:1;width:100%;}
  .rt #p-activity .act-entry{grid-template-columns:31px minmax(0,1fr);}
  .rt #p-activity .act-node{width:25px;height:25px;box-shadow:0 0 0 3px var(--bg);}
  .rt #p-activity .act-rail::after{top:28px;}
  .rt #p-activity .act-card{padding:10px 10px 9px;margin-left:2px;}
  .rt #p-activity .act-title-wrap{gap:5px;}
  .rt #p-activity .act-title,.rt #p-activity .act-item-link{font-size:12.5px;}
  .rt #p-activity .act-item-link{max-width:100%;}
  .rt #p-activity .act-detail{font-size:11.5px;}
  .rt #p-activity .act-actions{justify-content:flex-start;margin-top:7px;}
  .rt #p-activity .act-undo-note{font-size:10px;}
}

/* ── RETRADE IDENTITY ───────────────────────────────────────────────────── */
/* Ambient page glow — warms up the summary page */
[data-theme="dark"] #p-summary{background-image:radial-gradient(ellipse 60% 30% at 50% 0%,rgba(245,166,35,0.04) 0%,transparent 60%);}
[data-theme="dark"] #p-monthly{background-image:radial-gradient(ellipse 50% 25% at 50% 0%,rgba(125,185,247,0.03) 0%,transparent 55%);}
/* Auth overlay — V2 design system, pinned dark in both themes (v2.19.20)
   The markup in both auth cards was ALREADY tokenised -- it asked for
   var(--surface), var(--surface2), var(--text), var(--accent). What was wrong
   was what those names resolved TO: the old rules here nailed the screen to the
   V1 dark palette with !important. V1 dark is purple-grey (#111118 / #1a1a24 /
   #2e2e3e); V2 is navy (#0C1220 / #131A2A / #232B40). Same layout, different
   product. That mismatch is the whole bug, and it is a token bug, so this is a
   token fix -- no markup rewrite, no !important, and the inputs, labels,
   buttons and error states all follow on their own.

   The V1 names below are ALIASES onto the V2 values, scoped to this subtree.
   They exist because the auth markup speaks V1 and the rest of the app speaks
   V2; aliasing is what lets one screen cross that line without touching forty
   inline styles.

   WHY THE VALUES ARE RESTATED and not reused: :root carries these exact numbers
   as its dark default, but :root[data-theme="light"] overrides them, and this
   screen is deliberately dark in BOTH themes (it is the pre-app moment -- it
   should look like the brand, not like the user's preference). Once light has
   overridden :root there is nothing left to inherit from, so the values have to
   be restated. That is §4's duplicate-only-where-reuse-is-impossible, and it
   takes §4's other half too: test_auth.js A4 diffs this block against :root's
   dark block and FAILS when they drift. Do not edit one without the other. */
#auth-overlay{
  --surface-0:#0C1220; --surface-1:#131A2A; --surface-2:#1A2236;
  --border:#232B40; --border-strong:#36405A;
  --brand:#F2B33D;
  --text-primary:#F2F2EE; --text-secondary:#B5B6B0; --text-tertiary:#878982;
  /* V1 aliases -> V2 values, for the markup that predates the reskin */
  --surface:var(--surface-1); --surface2:var(--surface-2);
  --text:var(--text-primary); --muted:var(--text-tertiary);
  --accent:var(--brand); --accent-hover:#F7C05E; --accent-dim:rgba(242,179,61,0.12);
  --shadow-md:rgba(0,0,0,0.5);
  background:var(--surface-0);
  background-image:radial-gradient(ellipse 70% 50% at 50% 110%, rgba(242,179,61,0.07) 0%, transparent 60%),radial-gradient(ellipse 40% 40% at 85% 20%, rgba(125,185,247,0.035) 0%, transparent 50%);
  background-attachment:fixed;
}
#auth-screen-login,#auth-screen-reset{background:var(--surface-1);border-color:var(--border);}

/* FAB — double ring on hover (target motif) */
.fab-dial{position:fixed;bottom:24px;right:24px;z-index:330;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none;transition:bottom 0.22s cubic-bezier(0.34,1.38,0.64,1);}
.fab-dial.open .fab-dial-item{opacity:1;transform:translateY(0);pointer-events:auto;}
.fab-dial-item{display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(12px);transition:opacity 0.18s,transform 0.18s;pointer-events:none;}
.fab-dial-item:nth-child(2){transition-delay:0.04s;}
.fab-dial-item:nth-child(3){transition-delay:0.08s;}
.fab-dial-label{font-size:12px;font-weight:600;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:5px 10px;color:var(--text);white-space:nowrap;box-shadow:0 2px 8px var(--shadow);}
.fab-dial-btn{width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px var(--shadow-md);transition:transform 0.15s;background:var(--surface);color:var(--text-secondary);}
.fab-dial-btn:hover{transform:scale(1.1);}
/* FAB option colours — five DISTINCT hues for instant recognition. Each gets a
   tinted background + matching icon so they don't blur together at small size.
   list=amber · sourced(Stock)=blue · sourcerun(Run)=purple · expense=green · trip=red */
.fab-dial-btn.list{color:var(--accent);border:1.5px solid var(--accent-dim);background:color-mix(in srgb,var(--accent) 16%,var(--surface-1));}
.fab-dial-btn.sourced{color:var(--blue);border:1.5px solid color-mix(in srgb,var(--blue) 30%,transparent);background:color-mix(in srgb,var(--blue) 16%,var(--surface-1));}
.fab-dial-btn.sourcerun{color:var(--purple);border:1.5px solid color-mix(in srgb,var(--purple) 30%,transparent);background:color-mix(in srgb,var(--purple) 16%,var(--surface-1));}
.fab-dial-btn.endrun{color:var(--purple);border:1.5px solid color-mix(in srgb,var(--purple) 30%,transparent);background:color-mix(in srgb,var(--purple) 16%,var(--surface-1));}
.fab-dial-btn.expense{color:var(--green);border:1.5px solid var(--green-dim);background:color-mix(in srgb,var(--green) 16%,var(--surface-1));}
.fab-dial-btn.trip{color:var(--red);border:1.5px solid var(--red-dim);background:color-mix(in srgb,var(--red) 16%,var(--surface-1));}
/* Patch C — sourcing run banner */
.run-banner{display:flex;align-items:center;gap:12px;background:rgba(34,197,94,0.08);border:1.5px solid rgba(34,197,94,0.3);border-radius:12px;padding:12px 14px;margin-bottom:14px;}
.run-banner-dot{width:10px;height:10px;border-radius:50%;background:var(--green);flex-shrink:0;animation:run-pulse 2s ease-in-out infinite;}
@keyframes run-pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
@keyframes _arPulse{0%,100%{box-shadow:0 0 0 0 rgba(242,179,61,0.55);}60%{box-shadow:0 0 0 6px rgba(242,179,61,0);}}
.run-banner-body{flex:1;min-width:0;}
.run-banner-title{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.run-banner-meta{font-size:11px;color:var(--text-secondary);margin-top:1px;}
.run-banner-actions{display:flex;gap:6px;flex-shrink:0;}
.nav-item-runs{position:relative;}
.nav-active-dot{position:absolute;top:4px;right:4px;width:8px;height:8px;background:var(--green);border-radius:50%;box-shadow:0 0 0 2px var(--bg);animation:navDotPulse 2s ease-in-out infinite;pointer-events:none;z-index:5;}
@keyframes navDotPulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
.run-history-row{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;border-top:1px solid var(--border);}
.run-history-row:first-child{border-top:none;}
.run-history-row:active{background:var(--surface2);}
/* Run history row internals — classes enable responsive condensing */
.rh-body{flex:1;min-width:0;}
.rh-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rh-meta{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rh-meta-compact{display:none;}
.rh-profit{font-size:13px;font-weight:700;flex-shrink:0;margin-right:6px;}
.past-runs-hdr{margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;}
.past-runs-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);flex-shrink:0;}
.past-runs-sort{font-size:12px;flex-shrink:1;min-width:0;max-width:60%;}
@media(max-width:380px){.past-runs-sort{font-size:11px;padding:4px 6px;}}
@media(max-width:480px){.rh-meta-full{display:none;}.rh-meta-compact{display:block;}}
@media(max-width:360px){.rh-meta-compact{display:none;}}
.fab-main{position:relative;z-index:1;width:52px;height:52px;border-radius:50%;background:var(--accent);color:#000;border:none;cursor:pointer;font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px var(--shadow-md);transition:transform 0.2s,background 0.2s;pointer-events:auto;flex-shrink:0;}
.fab-main:hover{transform:scale(1.08);background:var(--accent-hover);}
.fab-main .fab-icon{display:block;transition:transform 0.22s;}
.fab-dial.open .fab-main .fab-icon{transform:rotate(45deg);}
/* Patch A — backdrop dims the page. Using z-index:-1 keeps it behind sibling
   elements (.fab-dial-options, .fab-main) within the same stacking context
   so the buttons always appear bright/active above the dim. The FAB container
   itself is z-index:300 which lifts the whole group above the page. */
/* Option list container — positioned relative + z-index:1 to sit above backdrop */
#fab-dial-options{display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none;position:relative;z-index:1;}
.fab-dial.open #fab-dial-options{pointer-events:auto;}
/* Stagger transition delays apply to the children of #fab-dial-options too */
#fab-dial-options .fab-dial-item:nth-child(1){transition-delay:0s;}
#fab-dial-options .fab-dial-item:nth-child(2){transition-delay:0.04s;}
#fab-dial-options .fab-dial-item:nth-child(3){transition-delay:0.08s;}
#fab-dial-options .fab-dial-item:nth-child(4){transition-delay:0.12s;}
#fab-dial-options .fab-dial-item:nth-child(5){transition-delay:0.16s;}

.brand{cursor:pointer;}

/* Scrollbar — amber thumb on hover */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--accent);opacity:0.6;}

/* More sheet row — Syne font */
.more-sheet-row{font-family:var(--font-display);font-size:14px;font-weight:600;letter-spacing:0.01em;}

/* Mono chip — DM Mono */
.ip-chip.mono{font-family:var(--font-mono);}

/* Toast — display font */
#toast{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:0.02em;}
/* ─────────────────────────────────────────────────────────────────────── */

/* STAT NUMBER utility — used in JS-generated big numbers */
.stat-num{font-family:"Inter",system-ui,sans-serif;font-size:25px;font-weight:700;letter-spacing:-0.04em;line-height:1.05;}
.stat-num-sm{font-family:"Inter",system-ui,sans-serif;font-size:20px;font-weight:700;letter-spacing:-0.04em;line-height:1.05;}
.stat-num-xs{font-family:"Inter",system-ui,sans-serif;font-size:17px;font-weight:600;letter-spacing:-0.03em;line-height:1.1;}

.brand svg{display:none!important;}
#auth-screen-login svg[width="62"], #auth-screen-reset svg[width="62"]{display:none!important;}

/* ===== Retrade premium desktop redesign overrides ===== */
:root{
  --bg:#eef1f7;--surface:#ffffff;--surface2:#e8ecf4;--border:#c8d2e0;--border2:#a8b6cc;
  --accent:#c89b2f;--accent-hover:#ad8424;--accent-dim:rgba(200,155,47,0.13);
  --green:#0f9f6e;--green-hover:#0b865d;--green-dim:rgba(15,159,110,0.12);
  --red:#dc5b5b;--red-hover:#c84848;--red-dim:rgba(220,91,91,0.12);
  --blue:#5c7cfa;--purple:#7c61d9;--warn:#c89b2f;
  --text:#0e1a2e;--text-secondary:#48607a;--muted:#7a90a8;
  --shadow:rgba(14,25,44,0.09);--shadow-md:rgba(14,25,44,0.18);--overlay:rgba(12,18,28,0.46);
  --radius-sm:12px;--radius:18px;--radius-lg:24px;
}
[data-theme="dark"]{
  --bg:#0f1724;--surface:#141d2d;--surface2:#182235;--border:#223149;--border2:#31435f;
  --accent:#d4a63d;--accent-hover:#e4b74e;--accent-dim:rgba(212,166,61,0.14);
  --green:#22b07d;--green-hover:#2fc28f;--green-dim:rgba(34,176,125,0.14);
  --red:#eb7070;--red-hover:#f18c8c;--red-dim:rgba(235,112,112,0.14);
  --blue:#7aa2ff;--purple:#a686ff;--warn:#d4a63d;
  --text:#eff4fb;--text-secondary:#9cafc8;--muted:#6f819b;
  --shadow:rgba(0,0,0,0.35);--shadow-md:rgba(0,0,0,0.55);--overlay:rgba(6,11,18,0.72);
}
html,body{background:linear-gradient(180deg,var(--bg) 0%, color-mix(in srgb,var(--bg) 92%, #7d90bb 8%) 100%);} 
body{font-size:14px;}
.page{max-width:1280px;margin:0 auto;padding:28px 28px 120px;}
/* v2.16.0 — pageFade lives on .page.on ONLY (single source of truth, tokenised). */
/* panelContentIn — see polish */
/* confirmIn — see polish */
/* confirmOverlayIn — see polish */
#panel-content{animation:panelContentIn 0.28s cubic-bezier(0.34,1.2,0.64,1) both;min-width:0;max-width:100%;overflow-x:hidden;}
nav:not(#bottom-nav){background:color-mix(in srgb,var(--surface) 88%, transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid color-mix(in srgb,var(--border) 76%, transparent);}
.nav-inner{max-width:1280px;height:68px;padding:0 24px;gap:16px;}
.brand{margin-right:8px!important;position:relative;padding-right:18px;}
.brand::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);height:24px;width:1px;background:linear-gradient(180deg,transparent,var(--border2),transparent);}
/* v2.19.23 — a V1 rule was removed from this spot. It targeted `.brand span` and
   forced font-size 15px, letter-spacing .14em and font-weight 800, all !important.
   Its only remaining targets were the V2 brand mark + wordmark spans -- class="brand"
   appears exactly ONCE in the app markup, the tablet top bar -- so it existed solely
   to fight the V2 rule, and !important meant it won on weight and tracking no matter
   how specific the V2 selector was. Symptom: the skew and the two-tone landed, the
   typography did not, and measured width/cap stayed at 8.06 instead of the 6.42 target.
   The `.brand` in the PDF partner slip is a separate document with its own style block,
   so it is unaffected. Sibling landmines survive in the same V1 family -- the one
   forcing display:none on `.brand svg` near line 1283 is beaten by an !important near
   4102 rather than removed. Left alone, but that is what they are. */
.search-wrap{width:360px!important;}
.search-wrap input{height:42px;border-radius:14px;padding-left:38px;background:color-mix(in srgb,var(--surface2) 75%, var(--surface));}
.search-wrap input:-webkit-autofill,.search-wrap input:-webkit-autofill:hover,.search-wrap input:-webkit-autofill:focus{transition:background-color 99999s ease-out 0s;-webkit-text-fill-color:var(--text);box-shadow:0 0 0 1000px color-mix(in srgb,var(--surface2) 75%, var(--surface)) inset;}
.brand-name{color:var(--text);font-family:inherit;font-weight:800;letter-spacing:.16em;text-transform:uppercase;} .brand-name .gold{color:var(--accent);text-shadow:0 0 10px rgba(245,166,35,.18);}
.brand-code{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 68%, #fff 32%), var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 12px color-mix(in srgb,var(--accent) 18%, transparent);}
.search-icon{left:13px;}
.tabs{gap:0;}
.tab,.nav-more-btn{height:50px;border-radius:0;padding:0 14px;font-weight:500;color:var(--text-secondary);}
.tab::after{display:block;}
.tab.on{color:var(--text);font-weight:600;background:none;box-shadow:none;}
.nav-more-btn.on{color:var(--text);font-weight:600;background:none;box-shadow:none;}
.nav-right{gap:10px;}
.user-menu-btn{height:42px;border-radius:14px;padding:6px 12px 6px 6px;background:color-mix(in srgb,var(--surface2) 70%, transparent);}
.user-avatar{width:28px;height:28px;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%, #fff 40%));color:#0c1320;font-size:11px;}
.page-header{margin-bottom:22px;}
.page-title{font-weight:800;letter-spacing:-0.05em;}
.page-subtitle{color:var(--text-secondary);}
.kgrid{gap:12px;margin-bottom:18px;}
.kcard{border-radius:20px;padding:20px 20px 18px;border:1px solid var(--border);box-shadow:0 10px 30px var(--shadow);min-height:100px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 94%, #ffffff 6%) 0%,var(--surface) 100%);;min-width:0;}
[data-theme="dark"] .kcard{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%, #1f2b40 8%) 0%,var(--surface) 100%);border-color:color-mix(in srgb,var(--border) 88%, transparent);}
.kcard::after{height:2px;opacity:.95;background:linear-gradient(90deg,var(--accent),transparent 86%);} 
.kcard.g::after{background:linear-gradient(90deg,var(--green),transparent 86%)}
.kcard.r::after{background:linear-gradient(90deg,var(--red),transparent 86%)}
.kcard.b::after{background:linear-gradient(90deg,var(--blue),transparent 86%)}
.kcard.p::after{background:linear-gradient(90deg,var(--purple),transparent 86%)}
@media(hover:hover){.kcard:hover{transform:translateY(-3px);box-shadow:0 16px 42px var(--shadow-md);}}
.klabel{font-size:11px;font-weight:800;letter-spacing:.10em;color:var(--muted);white-space:normal;line-height:1.3;} 
.summary-kpis .klabel br{display:none;} /* default hidden */
.stock-kpis .klabel br{display:none;} /* default hidden */
.kval,.stat-num,.stat-num-sm,.stat-num-xs,.insight-val{font-variant-numeric:tabular-nums lining-nums;letter-spacing:-0.05em;}
/* Ensure clean, aligned figures everywhere the mono font is applied inline (money columns) */
[style*="--font-mono"],.mono,.ip-token-val,.tax-box-tag,.metric-v,.kval,.item-row-price,.item-row-profit{font-variant-numeric:tabular-nums lining-nums;}
.kval{font-size:clamp(22px,14cqi,38px)!important;font-weight:800;margin:10px 0 6px;line-height:1.05;overflow:visible;white-space:normal;}
/* Compact KPI cards on Stock + Monthly — hero numbers turned down, cards take less vertical space */
.stock-kpis .kcard,#p-monthly .kgrid-4 .kcard{min-height:74px;padding:12px 14px 11px;}
.stock-kpis .kval,#p-monthly .kgrid-4 .kval{font-size:clamp(18px,10cqi,28px)!important;margin:6px 0 3px;}
.stock-kpis .klabel,#p-monthly .kgrid-4 .klabel{font-size:10px;letter-spacing:.08em;}
.stock-kpis .ksub,#p-monthly .kgrid-4 .ksub{font-size:11px;}
.ksub{font-size:13px;color:var(--text-secondary)}
.insights{gap:14px;grid-template-columns:1fr;}
.insight-card{border-radius:18px;padding:16px 16px;border:1px solid var(--border);box-shadow:0 10px 26px var(--shadow);align-items:flex-start;}
[data-theme="dark"] .insight-card{border-color:color-mix(in srgb,var(--border) 88%, transparent);}
.insight-icon{width:34px;height:34px;border-radius:12px;background:var(--surface2);}
.sl{font-size:11px;letter-spacing:.14em;color:var(--text-secondary);margin:0 0 14px;}
.sl::before{display:none !important;}
.chart-wrap,.item-table,.section-card,.slide-panel,.month-picker-dropdown,.confirm-box{border-radius:22px;border:1px solid var(--border);box-shadow:0 12px 30px var(--shadow);}
[data-theme="dark"] .chart-wrap,[data-theme="dark"] .section-card,[data-theme="dark"] .month-picker-dropdown,[data-theme="dark"] .confirm-box{border-color:color-mix(in srgb,var(--border) 88%, transparent);}
.chart-wrap{padding:22px;margin-bottom:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%, #fff 4%) 0%, var(--surface) 100%);} 
[data-theme="dark"] .chart-wrap{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%, #20304a 8%) 0%, var(--surface) 100%);}
.chart-title{margin-bottom:16px;}
.item-table{overflow:visible;background:transparent;box-shadow:none;border:none;}
.item-row{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%, #fff 4%) 0%, var(--surface) 100%);border:1px solid var(--border);border-radius:18px;padding:16px 18px;margin-bottom:10px;box-shadow:0 10px 24px var(--shadow);}
[data-theme="dark"] .item-row{border-color:color-mix(in srgb,var(--border) 88%, transparent);}
.item-row:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 98%, #fff 2%) 0%, var(--surface) 100%);transform:translateY(-1px);} 
.item-row:last-child{border-bottom:1px solid color-mix(in srgb,var(--border) 88%, transparent);} 
.item-row.selected{border-left:none;padding-left:18px;box-shadow:0 0 0 1px var(--accent),0 14px 30px var(--shadow-md);}
.item-row-name{font-size:15px;font-weight:700;}
.item-row-meta{font-size:12px;color:var(--text-secondary);}
.item-row-price{font-size:17px;font-weight:700;}
.item-row-profit{font-size:13px;font-weight:700;}
.item-row-roi{font-size:11px;color:var(--text-secondary);}
.filter-row,.list-toolbar{margin-bottom:14px;}
.month-select,.period-select-inline,.period-select,.tax-year-select{height:42px;padding:0 40px 0 14px;border-radius:14px;background:color-mix(in srgb,var(--surface2) 78%, var(--surface));font-weight:600;border:1px solid var(--border);}
/* Desktop: sort-select matches filter-pill-dd-btn height — keep at 38px, just bump radius to match desktop btn scale */
.sort-select{height:38px;border-radius:10px;} 
.btn{border-radius:14px;height:42px;padding:0 16px;font-weight:700;}
/* V2 Session 2: removed .btn-p gradient + .btn-s tint here — gradients are
   forbidden by handoff §1, and these selectors no longer match (markup migrated
   to .btn-primary/.btn-secondary, styled flat by the .rt V2 layer). */
.empty-state{padding:86px 20px;border:1px dashed var(--border2);border-radius:24px;background:color-mix(in srgb,var(--surface) 55%, transparent);} 
.mgrid{gap:14px;}
.mcard{min-height:138px;border-radius:20px;padding:20px 18px;box-shadow:0 12px 26px var(--shadow);border:1px solid var(--border);background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%, #fff 4%), var(--surface));display:flex;flex-direction:column;justify-content:space-between;}
.mcard-body-left{display:flex;flex-direction:column;gap:4px;}
.mcard-body-right{margin-top:8px;}
[data-theme="dark"] .mcard{border-color:color-mix(in srgb,var(--border) 88%, transparent);}
.mname{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);}
.mval{font-size:30px;font-weight:800;letter-spacing:-.05em;font-family:"Inter",system-ui,sans-serif;font-variant-numeric:tabular-nums lining-nums;}
.month-picker-title{font-size:clamp(18px,3.5vw,32px);font-weight:800;letter-spacing:-.06em;}
.fy-section{position:relative;}
.fy-section::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:999px;background:linear-gradient(180deg,var(--accent),transparent 55%);opacity:.14;transform:translateX(-10px);} 
#p-item .item-full-page,.item-full-page{max-width:1240px;padding:28px 28px 120px;}
.ip-topbar{margin-bottom:14px;}
.ip-title{font-size:30px;font-weight:800;letter-spacing:-.05em;}
.ip-tokens{gap:14px;}
.ip-token,.ip-postage-row,.ip-section-pnl,.ip-relist-section{border-radius:20px;box-shadow:0 10px 24px var(--shadow);border:1px solid var(--border);}
[data-theme="dark"] .ip-token,[data-theme="dark"] .ip-postage-row,[data-theme="dark"] .ip-section-pnl,[data-theme="dark"] .ip-relist-section{border-color:color-mix(in srgb,var(--border) 88%, transparent);}
.ip-token{padding:18px 18px 16px;}
.ip-token-label,.ip-section-title,.item-full-section-title{font-size:10px;letter-spacing:.12em;color:var(--muted)}
.ip-token-val{font-size:30px;font-weight:800;}
.ip-token-sub{font-size:12px;color:var(--text-secondary)}
.ip-section-header{padding:16px 18px;}
.ip-section-body{padding:0 18px 18px;}
.ip-receipt-row{font-size:13px;padding:10px 0;}
.ip-field,.ip-field-select,.ip-field-date{font-size:15px;}
#auth-screen-login,#auth-screen-reset{max-width:420px;border-radius:28px;padding:42px 36px!important;box-shadow:0 22px 60px rgba(0,0,0,.18);} 
#auth-screen-login > div:first-child + div + div span{letter-spacing:.16em!important;}
#auth-btn{height:48px;border-radius:16px;}
.summary-shell{display:grid;grid-template-columns:minmax(0,1.84fr) minmax(0,.92fr);gap:18px;align-items:stretch;}
.summary-main{display:flex;flex-direction:column;gap:18px;min-height:100%;min-width:0;}
.summary-side{display:flex;flex-direction:column;gap:18px;}
.summary-velocity{display:flex;flex-direction:column;flex:1;min-height:0;}
.summary-velocity .vel-cat-wrap{flex:1;min-height:0;display:flex;flex-direction:column;}
.panel-card{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%, #fff 4%), var(--surface));border:1px solid var(--border);border-radius:22px;padding:24px;box-shadow:0 12px 30px var(--shadow);container-type:inline-size;} 
[data-theme="dark"] .panel-card{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%, #20304a 8%), var(--surface));border-color:color-mix(in srgb,var(--border) 88%, transparent);}
.metric-inline{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--border);} 
[data-theme="dark"] .metric-inline{border-bottom-color:color-mix(in srgb,var(--border) 85%, transparent);}
.metric-inline:last-child{border-bottom:none;padding-bottom:0;}
.metric-inline:first-child{padding-top:0;}
.metric-inline.clickable,.panel-card.clickable,.category-mini-row{cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease;}
.metric-inline.clickable:hover,.panel-card.clickable:hover{background:color-mix(in srgb,var(--surface2) 55%, transparent);}
.category-mini-row:hover{background:color-mix(in srgb,var(--surface2) 72%, transparent);}
.metric-k{font-size:13px;color:var(--text-secondary);font-weight:600;}
.metric-v{font-size:clamp(18px,8cqi,23px);font-weight:800;letter-spacing:-.05em;}
.hero-title{font-size:42px;font-weight:800;letter-spacing:-.06em;line-height:1.0;}
.hero-sub{font-size:14px;color:var(--text-secondary);margin-top:8px;max-width:720px;}
.dashboard-kicker{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:8px 0 8px;}
.dashboard-kicker::before{content:'';display:block;width:18px;height:2px;border-radius:2px;background:var(--accent);opacity:.9}
.page-intro-sub{font-size:13px;line-height:1.6;color:var(--text-secondary);max-width:780px}
.category-mini-grid{display:grid;gap:8px;margin-top:14px}
.category-mini-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--border) 86%, transparent);background:color-mix(in srgb,var(--surface2) 36%, transparent)}
.category-mini-meta{font-size:11px;color:var(--muted);margin-top:3px}
.category-mini-val{font-size:12px;font-weight:700;color:var(--text-secondary);white-space:nowrap}
.category-mini-footer{margin-top:12px;font-size:12px;font-weight:700;color:var(--accent);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.category-mini-footer:hover{opacity:.85}
.desktop-only{display:block;}
@media(max-width:1180px){.nav-inner{padding:0 14px;gap:10px}.nav-inner .search-wrap{display:none!important}.nav-spacer{display:none}.tabs-row{margin-left:auto}.nav-right{padding-left:10px}.tab,.nav-more-btn{padding:0 12px;font-size:12px}.brand{margin-right:8px!important}}
@media(max-width:980px){.summary-shell{grid-template-columns:1fr}.desktop-only{display:none}.page,.item-full-page{padding:20px 18px 110px;}.nav-inner{padding:0 16px;}.hero-title{font-size:30px}}
@media(max-width:980px) and (min-width:601px){.kgrid-4{grid-template-columns:1fr 1fr!important;} .kval{font-size:clamp(20px,7cqi,30px)!important;white-space:normal!important;overflow:visible!important;}}
/* Wide desktop: the hero KPI maxes its clamp and looks oversized on full-width.
   Bring the ceiling down so big single/2-up hero numbers stay proportionate. */
@media(min-width:1200px){
  .kval{font-size:clamp(22px,4cqi,30px)!important;}
  .kgrid.kgrid-1col .kcard .kval{font-size:clamp(18px,4cqi,22px)!important;}
}
@media(max-width:820px){.nav-right{gap:6px}.user-menu-btn{padding-right:6px}.tab,.nav-more-btn{padding:0 10px;font-size:12px}}

/* ===== Mobile ≤480px ===== */
@media(max-width:480px){
  .summary-kpis .klabel br{display:inline!important;}
  .stock-kpis .klabel br{display:inline!important;}
  /* KPI cards: keep 2-col — handled above at 600px; kgrid-1col already single-col */
  .kgrid,.kgrid-4,.kgrid-3{grid-template-columns:1fr 1fr!important;}
  .kcard{padding:14px 14px 12px;min-height:100px;height:auto;border-radius:16px;}
  .klab{font-size:9px;letter-spacing:.08em;}
  .kval{font-size:clamp(24px,11cqi,34px)!important;margin:4px 0 2px;white-space:normal;overflow:visible;}
  .kval-sub{font-size:11px;}
  .page,.item-full-page{padding:16px 14px 100px!important;}
  .hero-title{font-size:26px!important;}
  .page-intro-sub,.hero-sub{font-size:12px!important;}
  /* Monthly grid: compact single-column list rows */
  .mgrid{grid-template-columns:1fr!important;gap:6px!important;}
  .mcard{
    min-height:0!important;
    padding:12px 14px!important;
    border-radius:14px!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
  }
  .mcard-body-left{flex:1;min-width:0;}
  .mcard-body-right{flex-shrink:0;text-align:right;}
  .mval{font-size:18px!important;margin-bottom:0!important;}
  .msub{font-size:11px;margin-top:2px!important;}
  .mname{font-size:11px;margin-bottom:2px!important;}
  .filter-chips{display:none!important;}.filter-pill-dd{display:block!important;}
/* T-05 Approach 1 — CSS Grid: forces true 50/50 split regardless of content width.
   Grid ignores intrinsic size; flex:1 1 0 failed because <select> has a browser-
   enforced min-width floor that persists even with width:0. */
  .filter-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;align-items:center!important;}
  .filter-row .filter-pill-dd,.filter-row > .sort-select,.filter-row .sort-select{width:100%!important;min-width:0!important;max-width:none!important;flex:none!important;}
}
@media(max-width:390px){
  .kval{font-size:clamp(22px,12cqi,28px)!important;white-space:normal;overflow:visible;text-overflow:clip;}
  .klabel{font-size:10px!important;white-space:normal;}
  .kcard{padding:10px 12px 8px;min-height:88px;}
}

/* E4 — Stock filter row has 5 chips (All/Fresh/Maturing/Slow/Stale) plus a
   sort dropdown, so it needs an earlier swap to dropdown than the 480px
   global breakpoint above. At ~708px the chips start overflowing alongside
   the sort select. The rule below collapses them into the existing
   filter-pill-dd component while keeping the sort select on the same row. */
@media(max-width:708px){
  /* Stock filter row: 5 chips overflow before 480px, so collapse earlier.
     Once chips become a dropdown, both controls get equal flex split. */
  .stock-filter-row .filter-chips{display:none!important;}
  .stock-filter-row .filter-pill-dd{display:block!important;}
/* T-05 same grid approach for stock filter row at 708px breakpoint */
  .stock-filter-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;align-items:center!important;flex-wrap:unset!important;}
  .stock-filter-row .filter-pill-dd,.stock-filter-row .sort-select{width:100%!important;min-width:0!important;max-width:none!important;flex:none!important;}
}

/* Aging bar — stock page distribution viz */
.age-bar-wrap{margin-bottom:16px;}
.age-bar{display:flex;height:8px;border-radius:6px;overflow:hidden;background:var(--surface2);border:1px solid var(--border);}
.age-bar-seg{height:100%;cursor:pointer;transition:opacity 0.15s,filter 0.15s;opacity:0.85;}
.age-bar-seg:hover{opacity:1;filter:brightness(1.1);}
.age-bar-seg.active{opacity:1;box-shadow:inset 0 0 0 2px var(--surface);}
.age-legend{display:flex;flex-wrap:nowrap;gap:6px;margin-top:10px;overflow:hidden;}
.age-legend-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:12px;background:transparent;border:1px solid var(--border);cursor:pointer;font-size:11px;font-family:var(--font-body);color:var(--text-secondary);transition:all 0.12s;white-space:nowrap;flex-shrink:1;}
.age-legend-btn:hover{background:var(--surface2);color:var(--text);border-color:var(--border2);}
.age-legend-btn.active{background:var(--surface2);color:var(--text);border-color:var(--text-secondary);font-weight:600;}
.age-legend-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.age-legend-label{font-weight:500;}
.age-legend-count{color:var(--muted);font-weight:600;font-size:10px;}
.age-legend-btn.active .age-legend-count{color:var(--text);}

/* Row action hints — progressive escalation pill on stock rows */
.row-hint{display:inline-flex;align-items:center;margin-left:6px;padding:1px 7px;border-radius:10px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;font-family:var(--font-body);line-height:1.4;cursor:help;}
.row-hint.hint-maturing{background:transparent;color:var(--text-secondary);border:1px solid var(--border2);}
.row-hint.hint-slow{background:rgba(212,136,10,0.12);color:var(--warn);border:1px solid rgba(212,136,10,0.3);}
.row-hint.hint-stale{background:rgba(192,57,43,0.12);color:var(--red);border:1px solid rgba(192,57,43,0.3);}
.row-hint.hint-list-soon{background:transparent;color:var(--text-secondary);border:1px solid var(--border2);}
.row-hint.hint-overdue{background:rgba(212,136,10,0.12);color:var(--warn);border:1px solid rgba(212,136,10,0.3);}
.row-hint.hint-stagnant{background:rgba(192,57,43,0.12);color:var(--red);border:1px solid rgba(192,57,43,0.3);}
[data-theme="dark"] .row-hint.hint-slow{background:rgba(245,166,35,0.16);color:var(--accent);border-color:rgba(245,166,35,0.35);}
[data-theme="dark"] .row-hint.hint-stale{background:rgba(248,113,113,0.16);color:var(--red);border-color:rgba(248,113,113,0.35);}
[data-theme="dark"] .row-hint.hint-overdue{background:rgba(245,166,35,0.16);color:var(--accent);border-color:rgba(245,166,35,0.35);}
[data-theme="dark"] .row-hint.hint-stagnant{background:rgba(248,113,113,0.16);color:var(--red);border-color:rgba(248,113,113,0.35);}
@media(max-width:600px){.row-hint{font-size:9px;padding:0 6px;margin-left:4px;}}

/* ===== end overrides ===== */

/* === Retrade v8 safe fixes === */
/* On mobile, expand panel search-wrap must never be killed by nav rules */
@media(max-width:600px){#nav-search-expand .search-wrap{display:block!important;width:100%!important;max-width:none!important;}}
@media(max-width:600px){.fy-stat-hide{display:none!important;}}
@media (min-width: 601px){
  nav:not(#bottom-nav){display:block!important;}
  .nav-inner{max-width:1280px!important;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto auto!important;align-items:center!important;gap:18px!important;overflow:visible;}
  .brand{margin-right:0!important;}
  .nav-inner .search-wrap{display:block!important;width:100%!important;max-width:340px!important;min-width:0!important;}
  .nav-spacer{display:none!important;}
  .tabs-row{justify-self:center!important;min-width:0;overflow:visible;}
  .tabs,.tabs-row{display:flex!important;align-items:center!important;}
  .nav-right{justify-self:end!important;padding-left:0!important;flex-shrink:0;min-width:0;}
}
.nav-more-btn,.tab,.bnt{position:relative}
.page-header{align-items:center!important}
/* Summary title uses the same clamp as other pages — no hard override needed */
#p-summary .kgrid,
#p-summary .kgrid-4,
#p-summary .insights,
#p-summary .chart-wrap,
#p-summary .item-table,
#p-summary .section-card,
#p-summary .bulk-bar,
#p-summary .filter-chips{
  display:inherit!important;
  visibility:visible!important;
  opacity:1!important;
}
#p-summary .kgrid{display:grid!important}
#p-summary .kgrid-4{display:grid!important}
#p-summary .insights{display:grid!important}
#p-summary .chart-wrap{display:block!important}
#p-summary .item-table{display:block!important}
#p-stock .item-table,#p-monthly .item-table{display:block!important;width:100%;}
#p-stock .item-table .item-row,#p-monthly .item-table .item-row{display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important;gap:6px!important;width:100%;box-sizing:border-box;}
#p-summary .section-card{display:block!important}
#p-summary .kcard,
#p-summary .insight-card,
#p-summary .chart-wrap,
#p-summary .item-row,
#p-summary .section-card{
  visibility:visible!important;
  opacity:1!important;
}

/* Summary page header — responsive three-tier layout */
.summary-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:18px;flex-wrap:nowrap;
}
.summary-header-text{min-width:0;flex:1;}
.summary-title{
  font-family:"Inter",system-ui,sans-serif;font-size:clamp(20px,5.5vw,34px);font-weight:800;
  letter-spacing:-.04em;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.summary-subtitle{
  font-size:clamp(11px,2.8vw,13px);color:var(--text-secondary);line-height:1.4;
  margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.summary-period-sel{flex-shrink:0;}

/* ≤600px: hide subtitle */
@media(max-width:600px){
  .summary-subtitle{display:none!important;}
}
/* ≤360px: hide title too, period select fills full width */
@media(max-width:360px){
  .summary-header-text{display:none!important;}
  .summary-period-sel{width:100%!important;flex:1;}
}

/* ≤980px: reorder summary sections (shell is single column at this width).
   summary-main and summary-side use display:contents so all children
   participate directly in the shell's flex flow and can be ordered.
   Chart swap (text panel instead of canvas) only kicks in at ≤480px. */
@media(max-width:980px){
  .summary-shell{display:flex!important;flex-direction:column!important;gap:0!important;}
  .summary-main{display:contents!important;}
  .summary-side{display:contents!important;}

  .summary-header       {order:0;margin-bottom:14px;width:100%;}
  .summary-hero-v2      {order:1;margin-bottom:14px;width:100%;}
  .summary-kpis         {order:2;margin-bottom:14px;width:100%;}
  .summary-chart        {order:3;width:100%;}
  .chart-mobile-summary {order:3;margin-bottom:14px;width:100%;}
  .summary-categories   {order:4;margin-bottom:14px;width:100%;}
  .summary-snapshot     {order:5;margin-bottom:14px;width:100%;}
  .summary-inventory    {order:6;margin-bottom:14px;width:100%;}
  .summary-velocity     {order:7;margin-bottom:14px;width:100%;display:block!important;}
  .summary-topflips     {order:8;margin-bottom:14px;width:100%;}
}

/* ≤360px: swap chart canvas for text summary panel (keep chart on wider phones) */
@media(max-width:360px){
  #p-summary .summary-chart{display:none!important;}
  .chart-mobile-summary{display:block!important;}
}
.chart-mobile-summary{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;margin-bottom:14px;
  box-shadow:0 1px 2px var(--shadow);
}
.cms-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--border);gap:12px;
}
.cms-row:last-child{border-bottom:none;padding-bottom:0;}
.cms-row:first-child{padding-top:0;}
.cms-label{font-size:13px;font-weight:600;color:var(--text);}
.cms-sub{font-size:11px;color:var(--text-secondary);margin-top:2px;}
.cms-val{font-size:16px;font-weight:800;letter-spacing:-.03em;text-align:right;}
.cms-profit{font-size:12px;color:var(--profit,#4ade80);text-align:right;margin-top:2px;}
.cms-empty{font-size:13px;color:var(--text-secondary);padding:8px 0;}

.fy-label-short{display:none;}
.fy-label-long{display:inline;}
@media(max-width:400px){.fy-label-long{display:none;}.fy-label-short{display:inline;}}
/* Run detail page — responsive 2-col layout */
.run-detail-layout{display:grid;grid-template-columns:1fr;gap:0;}
.run-detail-left{min-width:0;}
.run-detail-right{min-width:0;}
@media(min-width:900px){
  .run-detail-layout{grid-template-columns:1fr 1fr;gap:28px;align-items:start;}
}
/* Search FAB — mobile only. + FAB now lives centred in the nav, so the search
   loop sits on its own in the bottom-right corner (secondary action). */
@media(max-width:600px){
  #search-fab{
    display:flex!important;
    align-items:center;justify-content:center;
    bottom:calc(64px + env(safe-area-inset-bottom,0px) + 12px);
    right:16px;
    width:40px;height:40px;
  }
  #search-fab.active{color:var(--accent);border-color:var(--accent);box-shadow:0 4px 20px rgba(212,136,10,0.25);}
  #search-fab:active{transform:scale(0.93);}
  #search-fab svg{width:17px;height:17px;}
}

/* nav-more open state */
.nav-more.open .nav-more-btn{color:var(--text)!important;background:none!important;box-shadow:none!important;}
#nav-more-menu button{display:flex;}

/* ══ RETRADE motion & polish ══════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;}}

/* Page transition */
@keyframes pageFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* v1.4.27 — navigation acknowledgement is immediate; keep the page motion short
   and refined so it confirms the switch without making the app feel delayed. */
.page.on{animation:pageFade 200ms var(--ease-out) both;}
/* Boot hydration uses the real page from the first frame. Suppress pageFade
   while that page is being hydrated; _deactivatePages removes the class before
   normal navigation, so subsequent page switches keep the standard motion. */
.page.on.rt-boot-noanim{animation:none;}

/* ========================================================================== 
   v1.4.14 — REAL-LAYOUT LOADING
   Production layout stays mounted. Only data-bearing surfaces load.
   ========================================================================== */
.rt-word-accent{color:var(--brand);}

.rt-sr-only{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}
@keyframes rt-data-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.rt-real-layout-loading .rt-data-loading{
  color:transparent!important;text-shadow:none!important;border-radius:6px;min-width:2.5ch;
  background:linear-gradient(90deg,var(--surface2) 0%,var(--border) 45%,var(--surface2) 100%);
  background-size:220% 100%;animation:rt-data-shimmer 1.3s ease-in-out infinite;user-select:none;
}
.rt-real-layout-loading .kpi-value.rt-data-loading,
.rt-real-layout-loading .summary-hero-value.rt-data-loading,
.rt-real-layout-loading .metric-v.rt-data-loading,
.rt-real-layout-loading .inv-stat-v.rt-data-loading,
.rt-real-layout-loading .snap-stat-v.rt-data-loading{display:inline-block;min-width:4.5ch;}

.rt-real-layout-loading .rt-chart-loading{position:relative;overflow:hidden;}
.rt-real-layout-loading .rt-chart-loading>*{opacity:0;}
.rt-real-layout-loading .rt-chart-loading::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--border) 60%,transparent) 50%,transparent 100%);
  background-size:220% 100%;animation:rt-data-shimmer 1.4s ease-in-out infinite;
}
.rt-real-layout-loading .rt-chart-data-loading{opacity:.08!important;}

.rt-real-layout-loading .rt-list-loading{min-height:180px;position:relative;}
.rt-real-layout-loading .rt-hide-while-loading{display:none!important;}
.rt-loading-row{pointer-events:none!important;cursor:default!important;display:flex;align-items:center;gap:12px;}
.rt-loading-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;}
.rt-loading-line{display:block!important;border-radius:6px!important;}
.rt-loading-line-main{width:42%;height:11px;}
.rt-loading-line-sub{width:24%;height:9px;}
.rt-loading-line-value{width:58px;height:14px;flex:none;}

.rt-data-loading-active button:disabled,
.rt-data-loading-active input:disabled,
.rt-data-loading-active select:disabled,
.rt-data-loading-active textarea:disabled{cursor:not-allowed!important;}
.rt-data-loading-active .page.on button:disabled,
.rt-data-loading-active .page.on input:disabled,
.rt-data-loading-active .page.on select:disabled,
.rt-data-loading-active .page.on textarea:disabled{opacity:.62;}
.rt-data-loading-active #side-nav button:disabled,
.rt-data-loading-active nav#nav button:disabled,
.rt-data-loading-active #bottom-nav button:disabled,
.rt-data-loading-active #mobile-top-bar button:disabled{opacity:1;}
.rt-data-loading-active #fab-dial{pointer-events:none;}

.rt-load-error{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:18px;border:1px solid color-mix(in srgb,var(--red) 50%,var(--border));background:var(--red-dim);border-radius:12px;}
.rt-load-error-icon{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--red);color:#fff;font-weight:800;}
.rt-load-error-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.rt-load-error-copy strong{font-size:13px;}
.rt-load-error-message{font-size:12px;color:var(--text-secondary);}

@media(prefers-reduced-motion:reduce){
  .rt-real-layout-loading .rt-data-loading,
  .rt-real-layout-loading .rt-chart-loading::after{animation:none!important;}
}

/* v1.4.18 — polished in-place skeleton. Geometry belongs to the real components;
   these rules only paint data placeholders inside them. */
.rt-real-layout-loading .rt-data-loading{
  position:relative;overflow:hidden;
  color:transparent!important;
  text-shadow:none!important;
  border-radius:6px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--surface2) 88%,var(--border)) 0%,
    color-mix(in srgb,var(--border) 76%,var(--surface2)) 44%,
    color-mix(in srgb,var(--surface2) 88%,var(--border)) 100%);
  background-size:240% 100%;
  animation:rt-data-shimmer 1.28s ease-in-out infinite;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.rt-real-layout-loading .kpi-value.rt-data-loading,
.rt-real-layout-loading .summary-hero-value.rt-data-loading,
.rt-real-layout-loading .metric-v.rt-data-loading,
.rt-real-layout-loading .inv-stat-v.rt-data-loading,
.rt-real-layout-loading .snap-stat-v.rt-data-loading,
.rt-real-layout-loading .sales-kpi-value.rt-data-loading,
.rt-real-layout-loading .stat-num.rt-data-loading,
.rt-real-layout-loading .kcard-value.rt-data-loading,
.rt-real-layout-loading .run-kpi-value.rt-data-loading,
.rt-real-layout-loading .cash-balance-value.rt-data-loading,
.rt-real-layout-loading .mf-val.rt-data-loading{
  display:inline-block!important;min-width:5.2ch;min-height:.92em;vertical-align:middle;
}
.rt-real-layout-loading .kpi-foot.rt-data-loading,
.rt-real-layout-loading .summary-hero-sub.rt-data-loading,
.rt-real-layout-loading .metric-sub.rt-data-loading,
.rt-real-layout-loading .sales-kpi-sub.rt-data-loading,
.rt-real-layout-loading .item-row-roi.rt-data-loading,
.rt-real-layout-loading .mf-foot.rt-data-loading,
.rt-real-layout-loading .fy-stat-hide.rt-data-loading{
  display:inline-block!important;min-width:9ch;min-height:.78em;border-radius:5px;
}
.rt-real-layout-loading .rt-chart-loading{
  position:relative;overflow:hidden;
  min-height:inherit;background:color-mix(in srgb,var(--surface2) 42%,transparent);
}
.rt-real-layout-loading .rt-chart-data-loading{opacity:.10!important;}
.rt-real-layout-loading .rt-chart-loading::after{
  content:'';position:absolute;inset:0;z-index:5;pointer-events:none;
  background:
    linear-gradient(110deg,transparent 18%,color-mix(in srgb,var(--border) 72%,transparent) 42%,transparent 66%),
    linear-gradient(to top right,transparent 46%,color-mix(in srgb,var(--border) 46%,transparent) 48%,color-mix(in srgb,var(--border) 46%,transparent) 51%,transparent 53%);
  background-size:240% 100%,100% 100%;
  animation:rt-data-shimmer 1.28s ease-in-out infinite;
}
.rt-real-layout-loading .rt-list-loading{position:relative;overflow:hidden;min-height:240px;}
.rt-real-layout-loading .rt-loading-list-overlay{
  position:absolute;z-index:30;inset:0;overflow:hidden;pointer-events:none;
  background:var(--surface);
}
.rt-real-layout-loading .rt-loading-list-overlay .rt-loading-row{
  min-height:58px;padding-left:inherit;padding-right:inherit;border-bottom:1px solid var(--border);
}
.rt-real-layout-loading .rt-loading-line{
  background:linear-gradient(90deg,var(--surface2) 0%,var(--border) 46%,var(--surface2) 100%);
  background-size:240% 100%;animation:rt-data-shimmer 1.28s ease-in-out infinite;
}
.rt-real-layout-loading .rt-loading-line-main{width:min(46%,320px);height:12px;}
.rt-real-layout-loading .rt-loading-line-sub{width:min(29%,210px);height:9px;}
.rt-real-layout-loading .rt-loading-line-value{width:64px;height:15px;margin-right:12px;}
@media(max-width:600px){
  .rt-real-layout-loading .rt-list-loading{min-height:220px;}
  .rt-real-layout-loading .rt-loading-line-main{width:58%;}
  .rt-real-layout-loading .rt-loading-line-sub{width:38%;}
  .rt-real-layout-loading .rt-loading-line-value{width:52px;margin-right:8px;}
}
@media(prefers-reduced-motion:reduce){
  .rt-real-layout-loading .rt-data-loading,
  .rt-real-layout-loading .rt-loading-line,
  .rt-real-layout-loading .rt-chart-loading::after{animation:none!important;}
}


/* Chart draw-in (v2.19.2 -- 7A)
   Lines draw left-to-right via stroke-dashoffset; the area fill and the dots
   fade in behind them, dots delayed so they land as the line arrives rather
   than floating ahead of it.
   --rt-len is set per path in JS from getTotalLength(): each series is a
   different length, so the dash geometry cannot be expressed in static CSS.
   .rt-chart-draw is toggled per render by _renderChartInto -- see the drawKey
   gate there. It must be REMOVED when not drawing, because innerHTML creates
   fresh paths every render and a fresh element matching an animation rule will
   always run it.
   Reduced motion: this is a CSS animation, so the global killswitch (~1655)
   clamps it. It still resolves to dashoffset:0 = an ordinary solid line. */
@keyframes rtChartDraw{from{stroke-dashoffset:var(--rt-len);}to{stroke-dashoffset:0;}}
@keyframes rtChartFadeIn{from{opacity:0;}to{opacity:1;}}
/* v2.19.12 -- §8.2. Reveal and redraw have run at the same 460ms since
   v2.19.8, which left --dur-draw-quick, the .rt-chart-draw-quick class and the
   --rt-draw-dur indirection as machinery with nothing to switch between.
   Collapsed to --dur-draw used directly.
   The drawKey gate in _renderChartInto still separates reveal from redraw --
   that decides WHETHER to draw, and it is only the DURATION that is now
   shared. To part them again: add a second token, re-add the variant class,
   and reinstate --rt-draw-dur so the dot delay below tracks whichever variant
   is live. That indirection is the whole reason it existed.
   The 0.9 dot delay is derived from --ease-draw, NOT just from the duration:
   under this near-linear curve 0.9 of the time is ~90% of the line, so the
   dots land as the stroke arrives. Re-derive it if the curve OR the duration
   moves (handover §6). */
svg.rt-chart-draw .rt-chart-line{
  stroke-dasharray:var(--rt-len);
  animation:rtChartDraw var(--dur-draw) var(--ease-draw) both;
}
svg.rt-chart-draw .rt-chart-area{animation:rtChartFadeIn var(--dur-draw) var(--ease-draw) both;}
/* This delay is clamped for reduced motion further down -- search
   prefers-reduced-motion. The duration is covered by the global killswitch;
   the delay is not, and this rule is nothing but delay. */
svg.rt-chart-draw .rt-chart-col circle{
  animation:rtChartFadeIn var(--dur-base) var(--ease-out) both;
  animation-delay:calc(var(--dur-draw) * 0.9);
}

/* v1.4.25 — category ring and line share one visual endpoint. The ring itself
   sweeps clockwise on --dur-donut-sweep; its fixed closing recoil then occupies
   --dur-bounce. 490ms + 350ms = the line's 840ms --dur-draw. Slice timings stay
   proportional so colour boundaries move at one constant angular speed. */
@keyframes donutSweep{
  from{stroke-dasharray:0 var(--seg-c);}
  to{stroke-dasharray:var(--seg-len) var(--seg-rest);}
}
svg.cat-donut-draw circle{
  animation:donutSweep calc(var(--seg-t) * var(--dur-donut-sweep)) linear both;
  animation-delay:calc(var(--seg-t0) * var(--dur-donut-sweep));
}

/* v1.4.25 — the largest physical slice now closes the ring, so the recoil can
   be a fixed visual distance instead of shrinking with the smallest category.
   The bounce starts exactly when the 490ms sweep completes and settles exactly
   when the 840ms line draw completes. */
@keyframes donutClose{
  0%{stroke-dasharray:var(--seg-len) var(--seg-rest);
     animation-timing-function:cubic-bezier(0.18,0.85,0.3,1);}
  42%{stroke-dasharray:var(--seg-len-r) var(--seg-rest-r);
     animation-timing-function:cubic-bezier(0.45,0,0.35,1);}
  76%{stroke-dasharray:var(--seg-len-o) var(--seg-rest-o);
     animation-timing-function:cubic-bezier(0.4,0,0.2,1);}
  100%{stroke-dasharray:var(--seg-len) var(--seg-rest);}
}
svg.cat-donut-draw circle.donut-seg-last{
  animation:
    donutSweep calc(var(--seg-t) * var(--dur-donut-sweep)) linear calc(var(--seg-t0) * var(--dur-donut-sweep)) both,
    donutClose var(--dur-bounce) linear var(--dur-donut-sweep) forwards;
}

/* v2.19.17 -- the legend fades in as ONE block. It used to stagger, each row
   delayed to its own slice's --seg-t0 so the label landed as its arc drew.
   Reads worse in practice: the ring is already a sequence, and a second
   sequence running beside it gives the eye two things to follow at once, so it
   follows neither. The block fade makes the legend a backdrop the sweep happens
   against -- one moving thing, not seven. */
@keyframes catLegendIn{
  from{opacity:0;transform:translateX(-6px);}
  to{opacity:1;transform:none;}
}
.rt .cat-donut-legend.cat-legend-draw .cat-legend-row{
  animation:catLegendIn var(--dur-base) var(--ease-out) both;
}
/* A category that is genuinely new since the last render, on a render that is
   NOT a full sweep. No delay -- it is not part of a sequence, it is one row
   arriving. See _animateDonut for who gets this class. */
.rt .cat-legend-row.cat-legend-row--enter{
  animation:catLegendIn var(--dur-base) var(--ease-out) both;
}

/* Delay clamp for reduced motion (v2.19.18 -- §8.7 folds the chart dots in).

   The global killswitch (~line 1655) clamps animation-DURATION but not
   animation-DELAY. Any animation whose motion IS its delay therefore survives
   the killswitch completely untouched:

   - the donut sweep is nothing but per-slice delays, so a reduced-motion user
     would still watch slices pop in across the full 460ms -- precisely the
     thing they asked not to see;
   - the chart dots ride a single delay of --dur-draw * 0.9, so with the line
     clamped to .01ms the dots would land ~414ms into a chart that finished
     instantly. Worse than the animation it replaced: the line arrives, then
     nothing, then the dots appear on an already-static chart.

   Clamp the delays and both land in the same frame as everything else.

   ANY new staggered or delayed animation belongs in this block. The killswitch
   above will not cover it and the omission is invisible unless you are testing
   with reduce on -- which is why this gap survived from v2.19.2 to v2.19.18. */
@media(prefers-reduced-motion:reduce){
  svg.cat-donut-draw circle,
  svg.cat-donut-draw circle.donut-seg-last,
  svg.rt-chart-draw .rt-chart-col circle{animation-delay:0ms!important;}
}

/* Panel */
@keyframes panelContentIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#panel-content{animation:panelContentIn .24s cubic-bezier(0.34,1.2,0.64,1) both;}
.slide-panel{transition:transform .3s cubic-bezier(0.32,1.1,0.5,1);}
/* Panel is max 440px wide — the 3-col stat-strip needs to stay compact.
   Force single-col row layout regardless of viewport width. */
.slide-panel .stat-strip-grid{grid-template-columns:1fr!important;}
.slide-panel .stat-strip-grid .ip-token{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;padding:10px 14px!important;gap:10px!important;}
.slide-panel .stat-strip-grid .ip-token-label{font-size:10px;margin-bottom:0!important;flex-shrink:0;flex:1;}
.slide-panel .stat-strip-grid .ip-token-val{font-size:20px!important;margin:0!important;flex-shrink:0;white-space:nowrap;}
.slide-panel .stat-strip-grid .ip-token-sub{display:none!important;}

/* Confirm modal */
@keyframes confirmIn{from{opacity:0;transform:scale(0.92) translateY(10px)}to{opacity:1;transform:none}}
@keyframes confirmOverlayIn{from{opacity:0}to{opacity:1}}

/* Toast */
#toast{transition:opacity .2s ease,transform .3s cubic-bezier(0.34,1.3,0.64,1);letter-spacing:.01em;}
#toast.success{background:var(--green);color:#fff;border-color:var(--green-hover);}

/* Item rows */
.item-row{transition:background .12s ease,border-color .15s ease,transform .18s cubic-bezier(0.34,1.2,0.64,1),box-shadow .18s ease;will-change:transform;}
@media(hover:hover){.item-row:hover{transform:translateY(-2px) scale(1.002);border-color:color-mix(in srgb,var(--accent) 40%,var(--border));}}
.item-row:active{transform:scale(0.993) translateY(0)!important;transition:transform .06s ease!important;}

/* Month cards */
.mcard{transition:border-color .15s ease,transform .2s cubic-bezier(0.34,1.3,0.64,1),box-shadow .2s ease;}
@media(hover:hover){.mcard:hover{transform:translateY(-3px) scale(1.01);}}
.mcard:active{transform:scale(0.97)!important;transition:transform .07s ease!important;}

/* Buttons */
.btn{transition:background .14s ease,transform .15s cubic-bezier(0.34,1.3,0.64,1),box-shadow .15s ease,opacity .1s;}
.btn:active{transform:scale(0.96)!important;transition:transform .06s ease!important;}

/* FAB */
.fab-main{transition:transform .2s cubic-bezier(0.34,1.5,0.64,1),background .15s,box-shadow .2s;}
.fab-main:active{transform:scale(0.92)!important;}
.fab-dial.open .fab-dial-item{animation:fabItemIn .22s cubic-bezier(0.34,1.4,0.64,1) both;}
.fab-dial.open .fab-dial-item:nth-child(1){animation-delay:.02s;}
.fab-dial.open .fab-dial-item:nth-child(2){animation-delay:.05s;}
.fab-dial.open .fab-dial-item:nth-child(3){animation-delay:.08s;}
.fab-dial.open .fab-dial-item:nth-child(4){animation-delay:.11s;}
.fab-dial.open .fab-dial-item:nth-child(5){animation-delay:.14s;}
@keyframes fabItemIn{from{opacity:0;transform:translateY(10px) scale(0.9)}to{opacity:1;transform:none}}

/* Bottom nav */
.bnt{transition:color .15s,opacity .1s,transform .12s cubic-bezier(0.34,1.4,0.64,1);}
.bnt:active{opacity:.6;transform:scale(0.9);}
.bnt.on svg{transform:scale(1.2);}

/* Chips */
.chip{transition:background .14s ease,color .14s ease,box-shadow .14s ease,transform .12s cubic-bezier(0.34,1.3,0.64,1);}
.chip:active:not(:disabled){transform:scale(0.95);}

/* KPI cards */
@keyframes kCardIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.kgrid .kcard:nth-child(1){animation:kCardIn .2s .03s cubic-bezier(0.34,1.1,0.64,1) both;}
.kgrid .kcard:nth-child(2){animation:kCardIn .2s .06s cubic-bezier(0.34,1.1,0.64,1) both;}
.kgrid .kcard:nth-child(3){animation:kCardIn .2s .09s cubic-bezier(0.34,1.1,0.64,1) both;}
.kgrid .kcard:nth-child(4){animation:kCardIn .2s .12s cubic-bezier(0.34,1.1,0.64,1) both;}

/* Empty state */
.empty-state{animation:pageFade var(--dur-medium) .1s var(--ease-out) both;}

/* Spinner */
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Scrollbar */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--accent) 55%,var(--border2));}

/* Input focus */
.fg input:focus,.fg select:focus,.fg textarea:focus{box-shadow:0 0 0 3px var(--accent-dim);transition:border-color .15s ease,box-shadow .15s ease;}

/* Search result hover */
.search-result{transition:background .1s ease;}

/* panel overlay */
.panel-overlay{transition:opacity .22s ease;}
.panel-overlay.on{opacity:1;pointer-events:auto;}

/* nav-more open state */
.nav-more.open .nav-more-btn{color:var(--text)!important;background:none!important;box-shadow:none!important;}
#nav-more-menu button{display:flex;}
/* bnt-label */
.bnt-label{font-size:11px;font-weight:500;pointer-events:none;}

/* ============================================================================
   ──────────────────  V2 SESSION 1 — TOKENS + COMPONENTS  ──────────────────
   The block below is §2 of RETRADE-V2-Implementation-Handoff.md, pasted
   VERBATIM from the standalone retrade-v2.css companion file. Do not edit
   token values or any selector — Sessions 2+ depend on this being the exact
   source of truth. To verify against the handoff, diff this against §2 of
   RETRADE-V2-Implementation-Handoff.md (lines 53–420 of that file).
   ============================================================================ */

/* ============================================================================
   RETRADE V2 — Canonical design system (drop-in, vanilla)
   ----------------------------------------------------------------------------
   SOURCE OF TRUTH for V2 visual layer. Paste this whole file into the app's
   <style> (or load as a stylesheet). Tokens live on :root; every component
   class is scoped under `.rt` so nothing collides with existing app CSS —
   add class="rt" to the app's top-level container once.

   Dark is canonical/default. Light is the alt: set data-theme="light" on the
   :root (or on .rt) and the tokens swap. Theme choice persists app-side.

   This reconciles the brief (Section C) with the newer "match-marketing"
   token values in the original tokens.css. The MARKETING values win:
     brand  #F2B33D (brighter)   surfaces navy-tinted (#0C1220 …)
   ========================================================================== */

:root {
  /* Surfaces — navy-tinted dark, canonical */
  --surface-0: #0C1220;
  --surface-1: #131A2A;
  --surface-2: #1A2236;
  --surface-3: #232C42;
  --surface-4: #2C3650;
  --border: #232B40;
  --border-strong: #36405A;
  --divider: #1C2438;

  /* Brand — single occupancy, FLAT (never gradient) */
  --brand: #F2B33D;
  --brand-hover: #F8C254;
  --brand-press: #DDA022;
  --brand-soft: #2D2317;
  --brand-soft-fg: #F8C254;

  /* Item states */
  --state-sourced: #7A8B99;  --state-sourced-soft: rgba(122, 139, 153, 0.14);
  --state-listed: #4A9EFF;   --state-listed-soft: rgba(74, 158, 255, 0.14);
  --state-sold: #5BC470;     --state-sold-soft: rgba(91, 196, 112, 0.14);
  --state-returned: #E66B5C; --state-returned-soft: rgba(230, 107, 92, 0.14);
  --state-relisted: #8B7FE8; --state-relisted-soft: rgba(139, 127, 232, 0.14);

  /* Money */
  --profit: #5BC470; --profit-soft: rgba(91, 196, 112, 0.14);
  --loss: #E66B5C;   --loss-soft: rgba(230, 107, 92, 0.14);

  /* Semantic aliases — one hue family per meaning */
  --success: var(--profit);
  --warning: var(--brand);
  --danger: var(--loss);
  --info: var(--state-listed);

  /* Text */
  --text-primary: #F2F2EE;
  --text-secondary: #B5B6B0;
  --text-tertiary: #878982;
  --text-disabled: #4A4B47;
  --text-inverse: #0B0C0E;

  /* Age bucket ramp (fresh → hot) */
  --age-fresh: #5BC470; --age-cool: #4A9EFF; --age-warm: #E8A33D; --age-hot: #E66B5C;

  /* Focus ring — listed-blue @ 50% */
  --focus-ring: rgba(74, 158, 255, 0.5);

  /* Spacing (8 base + 4 half) */
  --s-2xs: 2px; --s-xs: 4px; --s-s: 8px; --s-m: 12px;
  --s-l: 16px;  --s-xl: 24px; --s-2xl: 32px; --s-3xl: 48px; --s-4xl: 64px;

  /* Radii */
  --r-xs: 4px; --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 24px; --r-full: 999px;

  /* Elevation — dark mode: tone shift + border, no shadow */
  --elev-1: none;
  --elev-2: none;
  --elev-3: 0 8px 24px rgba(0, 0, 0, 0.45);
  --elev-4: 0 16px 40px rgba(0, 0, 0, 0.55);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* v2.19.7 -- easing for the chart line draw ONLY. --ease-out front-loads far
     too hard for a draw (~72% of the path covered in the first 25% of the
     duration), so the line "appears" then crawls and extra duration only extends
     the crawl. v2.19.6 used (0.4,0,0.6,1), still a pronounced S: 14.8% at t=0.25.
     This is near-linear -- soft ends only, so the stroke travels at a near-constant
     rate like a pen, without pure linear's abrupt start/stop.
     Do NOT reuse for UI transitions: they want --ease-out's snappy front-load. */
  --ease-draw: cubic-bezier(0.4, 0.25, 0.6, 0.75);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-medium: 320ms; --dur-slow: 380ms;
  --dur-bounce: 350ms;      /* closing recoil/overshoot */
  --dur-donut-sweep: 490ms; /* clockwise ring build */
  --dur-draw: 840ms;        /* line chart; donut sweep + bounce ends on this same frame */

  /* Type */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ── Light mode (alt) — warm off-whites, NOT pure white ──────────────────── */
:root[data-theme="light"], .rt[data-theme="light"] {
  --surface-0: #FAFAF7;
  --surface-1: #FFFFFF;
  --surface-2: #F5F5F0;
  --surface-3: #EDEDE7;
  --surface-4: #E2E2DB;
  --border: #E5E5DF;
  --border-strong: #C9C9C0;
  --divider: #EDEDE7;

  --brand-soft: #FBF1DC;
  --brand-soft-fg: #B07D1E;

  --text-primary: #1A1D24;
  --text-secondary: #54565B;
  --text-tertiary: #6F716B;
  --text-disabled: #B6B7B0;
  --text-inverse: #FFFFFF;

  --state-sourced-soft: rgba(122, 139, 153, 0.16);
  --state-listed-soft: rgba(74, 158, 255, 0.14);
  --state-sold-soft: rgba(91, 196, 112, 0.16);
  --state-returned-soft: rgba(230, 107, 92, 0.14);
  --state-relisted-soft: rgba(139, 127, 232, 0.14);
  --profit-soft: rgba(91, 196, 112, 0.16);
  --loss-soft: rgba(230, 107, 92, 0.14);

  /* Light mode: shadows do the elevation work */
  --elev-1: 0 1px 2px rgba(20, 22, 28, 0.06);
  --elev-2: 0 2px 8px rgba(20, 22, 28, 0.08);
  --elev-3: 0 8px 24px rgba(20, 22, 28, 0.12);
  --elev-4: 0 16px 40px rgba(20, 22, 28, 0.16);
}

/* ── Scoping root ────────────────────────────────────────────────────────── */
.rt, .rt * { box-sizing: border-box; }
.rt {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--surface-0);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11" 1, "ss01" 1;
}

/* Tabular numerals on every money/number render */
.rt .num, .rt .money, .rt [data-num] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv11" 1, "ss01" 1;
}

/* ── Type ramp ───────────────────────────────────────────────────────────── */
.rt .t-display-xl { font-size: 40px; line-height: 44px; letter-spacing: -0.02em;  font-weight: 600; }
.rt .t-display-l  { font-size: 32px; line-height: 36px; letter-spacing: -0.02em;  font-weight: 600; }
.rt .t-display-m  { font-size: 24px; line-height: 28px; letter-spacing: -0.01em;  font-weight: 600; }
.rt .t-h1         { font-size: 20px; line-height: 24px; letter-spacing: -0.01em;  font-weight: 600; }
.rt .t-h2         { font-size: 17px; line-height: 22px; letter-spacing: -0.005em; font-weight: 600; }
.rt .t-h3         { font-size: 15px; line-height: 20px; font-weight: 600; }
.rt .t-body       { font-size: 15px; line-height: 22px; font-weight: 400; }
.rt .t-body-s     { font-size: 13px; line-height: 18px; font-weight: 400; }
.rt .t-label      { font-size: 13px; line-height: 16px; letter-spacing: 0.01em; font-weight: 500; }
.rt .t-caption    { font-size: 11px; line-height: 14px; letter-spacing: 0.02em; font-weight: 500;
                    text-transform: uppercase; color: var(--text-tertiary); }
.rt .t-mono       { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 500; }

/* ── Surfaces & layout primitives ────────────────────────────────────────── */
.rt .card        { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-m); box-shadow: var(--elev-1); }
.rt .card-raised { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-m); box-shadow: var(--elev-2); }
.rt .divider     { height: 1px; background: var(--divider); }
.rt .row { display: flex; align-items: center; }
.rt .col { display: flex; flex-direction: column; }
.rt .grow { flex: 1; }
.rt .clip { overflow: hidden; }

/* ── State badge (no neutral grey variant allowed) ───────────────────────── */
.rt .badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
}
.rt .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rt .badge-sourced  { background: var(--state-sourced-soft);  color: var(--state-sourced); }
.rt .badge-listed   { background: var(--state-listed-soft);   color: var(--state-listed); }
.rt .badge-sold     { background: var(--state-sold-soft);     color: var(--state-sold); }
.rt .badge-returned { background: var(--state-returned-soft); color: var(--state-returned); }
.rt .badge-relisted { background: var(--state-relisted-soft); color: var(--state-relisted); }

/* ── Chip / filter pill ──────────────────────────────────────────────────── */
.rt .chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: var(--r-xs);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 12px; font-weight: 500; white-space: nowrap;
  cursor: pointer; font-family: inherit;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.rt .chip:hover { border-color: var(--border-strong); color: var(--text-primary); }
.rt .chip.is-active { background: var(--surface-3); color: var(--text-primary); border-color: var(--border-strong); }

/* ── Age bucket dot ──────────────────────────────────────────────────────── */
.rt .age-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.rt .age-fresh { background: var(--age-fresh); }
.rt .age-cool  { background: var(--age-cool); }
.rt .age-warm  { background: var(--age-warm); }
.rt .age-hot   { background: var(--age-hot); }

/* ── Delta (profit/loss change) ──────────────────────────────────────────── */
.rt .delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 500;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "cv11" 1, "ss01" 1;
}
.rt .delta-up   { color: var(--profit); }
.rt .delta-down { color: var(--loss); }
.rt .delta .period { color: var(--text-tertiary); font-weight: 400; margin-left: 2px; }

/* ── Buttons — 6 variants × 3 sizes ──────────────────────────────────────── */
.rt .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: inherit; font-weight: 500; font-size: 13px;
  border-radius: var(--r-s); border: 1px solid transparent;
  height: 32px; padding: 0 12px; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rt .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.rt .btn-sm { height: 32px; padding: 0 12px; }
.rt .btn-md { height: 40px; padding: 0 16px; font-size: 14px; }
.rt .btn-lg { height: 48px; padding: 0 20px; font-size: 15px; border-radius: var(--r-s); } /* mobile thumb target */
.rt .btn-icon { width: 32px; padding: 0; }
.rt .btn-icon.btn-md { width: 40px; } .rt .btn-icon.btn-lg { width: 48px; }

.rt .btn-primary     { background: var(--brand); color: var(--text-inverse); }
.rt .btn-primary:hover { background: var(--brand-hover); }
.rt .btn-primary:active { background: var(--brand-press); }
.rt .btn-secondary   { background: var(--surface-2); color: var(--text-primary); border-color: var(--border); }
.rt .btn-secondary:hover { background: var(--surface-3); border-color: var(--border-strong); }
.rt .btn-ghost       { background: transparent; color: var(--text-secondary); }
.rt .btn-ghost:hover { background: var(--surface-2); color: var(--text-primary); }
.rt .btn-destructive { background: var(--loss-soft); color: var(--loss); border-color: transparent; }
.rt .btn-destructive:hover { background: var(--loss); color: #fff; }
.rt .btn-link        { background: transparent; color: var(--state-listed); height: auto; padding: 0; border: none; }
.rt .btn-link:hover  { text-decoration: underline; }
.rt .btn:disabled    { opacity: 0.45; cursor: not-allowed; }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.rt .input {
  display: flex; align-items: center; gap: 8px;
  height: 44px; /* iOS thumb target; use .input-desktop for 40px */
  padding: 0 12px;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-s); color: var(--text-primary);
  font-family: inherit; font-size: 14px; width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.rt .input::placeholder { color: var(--text-tertiary); }
.rt .input:focus, .rt .input:focus-within { outline: none; border-color: var(--state-listed); box-shadow: 0 0 0 3px var(--focus-ring); }
.rt .input-desktop { height: 40px; }
.rt .input-search { height: 40px; color: var(--text-tertiary); }
.rt .input-search .num { color: var(--text-tertiary); }
.rt .input-currency { position: relative; }
.rt .input-currency::before { content: "£"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); }
.rt .input-currency .input { padding-left: 28px; }

/* Segmented control (e.g. Sourced | Listed | All) */
.rt .segmented {
  display: flex; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-s); padding: 3px;
}
.rt .segmented button {
  flex: 1; height: 34px; padding: 0 14px; border: none; cursor: pointer;
  border-radius: 6px; background: transparent;
  color: var(--text-tertiary); font-family: inherit; font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rt .segmented button .count { font-size: 11px; color: var(--text-disabled); font-variant-numeric: tabular-nums; }
.rt .segmented button.is-active { background: var(--surface-3); color: var(--text-primary); font-weight: 600; }
.rt .segmented button.is-active .count { color: var(--text-tertiary); }

/* ── KPI card ────────────────────────────────────────────────────────────── */
.rt .kpi { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; min-height: 96px; }
.rt .kpi-hero { padding: 22px 20px; min-height: 128px; }
.rt .kpi-l { min-height: 108px; }
.rt .kpi .kpi-label { font-size: 11px; line-height: 14px; letter-spacing: 0.02em; font-weight: 500;
                      text-transform: uppercase; color: var(--text-tertiary); }
.rt .kpi .kpi-value { color: var(--text-primary); }
.rt .kpi .kpi-foot { margin-top: auto; padding-top: 4px; }

/* ── Item card (the central component) ───────────────────────────────────── */
.rt .item-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--r-m);
  cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.rt .item-card:hover { border-color: var(--border-strong); }
.rt .item-thumb {
  width: 52px; height: 52px; border-radius: 8px; flex-shrink: 0; position: relative;
  border: 1px solid var(--border); overflow: hidden; background: var(--surface-3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); letter-spacing: 0.04em;
}
.rt .item-card.compact .item-thumb { width: 44px; height: 44px; }

/* ── Active-run banner (lives in Dashboard / Run detail only) ─────────────── */
.rt .run-banner {
  background: linear-gradient(180deg, rgba(242,179,61,0.06), rgba(242,179,61,0) 70%), var(--surface-2);
  border: 1px solid var(--border); border-left: 2px solid var(--brand);
  border-radius: var(--r-m); padding: 14px 18px;
}
.rt .run-banner .live-label { color: var(--brand); }

/* ── Sync indicator ──────────────────────────────────────────────────────── */
.rt .sync { display: inline-flex; align-items: center; gap: 8px; }
.rt .sync .sync-dot { width: 6px; height: 6px; border-radius: 50%; }
.rt .sync-synced  .sync-dot { background: var(--profit); }
.rt .sync-syncing .sync-dot { background: var(--brand); animation: rt-pulse 1.8s var(--ease-in-out) infinite; }
.rt .sync-offline .sync-dot { background: var(--text-tertiary); }
.rt .sync-error   .sync-dot { background: var(--loss); }

/* ── Logo / brand mark ───────────────────────────────────────────────────── */
.rt .logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: 0.06em; }
.rt .logo .re { color: var(--text-primary); }
.rt .logo .trade { color: var(--brand); }

/* ── Sidebar nav item (desktop) ──────────────────────────────────────────── */
.rt .nav-item {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  border-radius: var(--r-s); border: none; background: transparent;
  color: var(--text-secondary); cursor: pointer; width: 100%; text-align: left;
  font-family: inherit; font-size: 13px; font-weight: 500; position: relative;
}
.rt .nav-item:hover { background: var(--surface-1); color: var(--text-primary); }
.rt .nav-item.is-active { background: var(--surface-2); color: var(--text-primary); font-weight: 600; }
.rt .nav-item.is-active::before {
  content: ""; position: absolute; left: -16px; top: 6px; bottom: 6px; width: 2px;
  background: var(--brand); border-radius: 2px;
}

/* ── Toast ───────────────────────────────────────────────────────────────── */
.rt .toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-m);
  background: var(--surface-3); border: 1px solid var(--border-strong);
  box-shadow: var(--elev-3); color: var(--text-primary); font-size: 13px;
}
.rt .toast::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.rt .toast-success::before { background: var(--success); }
.rt .toast-warning::before { background: var(--warning); }
.rt .toast-danger::before  { background: var(--danger); }
.rt .toast-info::before    { background: var(--info); }

/* ── Skeleton loader ─────────────────────────────────────────────────────── */
.rt .skeleton {
  background: linear-gradient(90deg, var(--surface-1) 0%, var(--surface-2) 50%, var(--surface-1) 100%);
  background-size: 200% 100%; border-radius: var(--r-s);
  animation: rt-shimmer 1.4s ease-in-out infinite;
}

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes rt-pulse {
  0%   { box-shadow: 0 0 0 0 var(--brand); opacity: 1; }
  70%  { box-shadow: 0 0 0 8px rgba(242, 179, 61, 0); opacity: 0.85; }
  100% { box-shadow: 0 0 0 0 rgba(242, 179, 61, 0); opacity: 1; }
}
@keyframes rt-ring {
  0%   { transform: scale(0.92); opacity: 0.7; }
  100% { transform: scale(1.18); opacity: 0; }
}
@keyframes rt-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.rt .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
                 animation: rt-pulse 1.8s var(--ease-in-out) infinite; }

/* Reduced motion — kill ambient loops */
@media (prefers-reduced-motion: reduce) {
  .rt .pulse-dot, .rt .skeleton, .rt .sync-syncing .sync-dot { animation: none; }
}

/* ============================================================================
   ────────────────  V2 SESSION 2 — CORE COMPONENT MIGRATION  ─────────────────
   Deltas the live app needs once its buttons/chips consume the V2 layer. The
   §2 paste above is untouched; everything Session-2-specific lives in this one
   block so it stays auditable and reversible.

   1) btn-success — §3.3 ships six variants and NO success. The live app had 5
      btn-success buttons (Confirm Sold / Confirm Resale etc.). Per the locked
      default, success keeps its own name and gets a flat, soft variant built
      from --success/--profit, matching the destructive variant's soft pattern.
      (Amber stays single-occupancy per §1, so success is NOT amber.)
   2) chip .active / .chip-count compat — the live interaction layer toggles
      `.active` (13 classList calls, 28 refs) and renders `.chip-count`. Rather
      than rename to .is-active/.count and rewire JS (behavioural, out of a skin
      session's scope), we mirror the V2 active styling onto the app's existing
      class names. Zero JS risk; convention rename deferred.
   ============================================================================ */

/* (1) Success button — flat soft, hover to solid (mirrors btn-destructive) */
.rt .btn-success        { background: var(--profit-soft); color: var(--profit); border-color: transparent; }
.rt .btn-success:hover  { background: var(--profit); color: #fff; }
.rt .btn-success:active  { background: var(--profit); color: #fff; }

/* (1b) Locked/disabled handling under .rt for variant-agnostic CTAs */
.rt .btn.locked, .rt .btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* (2) Chip compat — app uses .active (not .is-active) and .chip-count (not .count).
   Mirror the V2 is-active treatment onto those names so chips read as V2 with
   no JS changes. Mirrors .rt .chip.is-active and .rt .segmented … .count. */
.rt .chip.active            { background: var(--surface-3); color: var(--text-primary); border-color: var(--border-strong); }
.rt .chip .chip-count       { font-size: 11px; color: var(--text-disabled); font-variant-numeric: tabular-nums; }
.rt .chip.active .chip-count{ color: var(--text-tertiary); }

/* ============================================================================
   ───────────────────────  V2 SESSION 3 — CHROME & NAV  ──────────────────────
   Chrome reskin as a single additive .rt-scoped layer (same pattern as
   Sessions 1–2 — auditable, reversible). Scope notes:
     • Most chrome was already carried to V2 by Session 1's token remap: the
       top-bar tabs (2px brand underline active), #bottom-nav (.bnt.on brand),
       and centre FAB (.fab-main amber) already read as V2. Left as-is rather
       than churned.
     • Desktop nav: the live app is a horizontal TOP-BAR, not the §3.11 sidebar.
       Reskinned in place. True top-bar→sidebar conversion deferred (it's a
       layout rearchitecture, not a class swap).
     • Modals/sheets/panels: §3 ships no modal component, so this is TOKEN-LEVEL
       only (surface / border / radius); structure + JS untouched.
     • Active-run banner accent moved green→amber in renderActiveRunPage + the
       _arPulse ring (§1: active-run accent is amber, single-occupancy).
   ============================================================================ */

/* (1) Toast → §3.13. The live #toast used full-bleed green/red fills — the
   least-V2 chrome element. Reskin to the V2 subtle card: surface-3 + a
   type-coloured status dot. toast() sets .on / .err / .success on the ID, so
   we map those names onto the V2 look with zero JS change. */
.rt #toast        { background: var(--surface-3); border: 1px solid var(--border-strong);
                    color: var(--text-primary); border-radius: var(--r-m); box-shadow: var(--elev-3);
                    display: inline-flex; align-items: center; gap: 10px; }
.rt #toast::before{ content: ""; width: 6px; height: 6px; border-radius: 50%;
                    background: var(--text-tertiary); flex-shrink: 0; }
.rt #toast.success      { background: var(--surface-3); color: var(--text-primary); border-color: var(--border-strong); }
.rt #toast.success::before{ background: var(--success); }
.rt #toast.err          { background: var(--surface-3); color: var(--text-primary); border-color: var(--border-strong); }
.rt #toast.err::before  { background: var(--danger); }

/* (2) In-page search → §3.9: align the field shell to the V2 input radius. */
.rt .search-wrap input, .rt #global-search { border-radius: var(--r-m); }

/* (3) Modals / sheets / panels → token-level reskin only (no §3 component).
   Align bespoke radii/borders to the V2 scale; structure + JS untouched. */
.rt .slide-panel, .rt .country-panel { border-radius: var(--r-l); border-color: var(--border); }
.rt .panel-card, .rt .more-sheet-pane { border-radius: var(--r-m); border-color: var(--border); }
.rt .more-sheet-row { border-radius: var(--r-s); }

/* ============================================================================
   ──────────────  V2 — PICKER FAMILY (unification + calendar icon)  ───────────
   Five existing picker classes (.period-select-inline, .period-select,
   .month-select, .tax-year-select, .sort-select) share a single V2 visual
   treatment: navy-tinted surface-2 fill, hairline border, brand-amber focus
   ring, V2 caret. Date / period / year pickers additionally get a calendar
   icon prefix; sort picker keeps caret-only since "sort" is content-not-date.

   Shape (height/radius) is preserved from line 1302 (42px × 14px radius for
   date family, 38px × 10px for sort) — only colour, focus chrome, and the
   icon prefix change here. No markup changes required; .tax-year-select's
   inline style block is stripped separately below.

   Two SVG sets — dark and light — because <select> background-image can't
   inherit currentColor; we hardcode the stroke fill in the URL per theme.
   ============================================================================ */
.rt .period-select-inline,
.rt .period-select,
.rt .month-select,
.rt .tax-year-select,
.rt .sort-select{
  background-color:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-weight:600;
  transition:border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
.rt .period-select-inline:hover,
.rt .period-select:hover,
.rt .month-select:hover,
.rt .tax-year-select:hover,
.rt .sort-select:hover{
  border-color:var(--border-strong);
}
.rt .period-select-inline:focus,
.rt .period-select:focus,
.rt .month-select:focus,
.rt .tax-year-select:focus,
.rt .sort-select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(242,179,61,0.22);
  outline:none;
}
/* Dark-mode SVG set (--text-tertiary = #7E7F79 → URL %237E7F79) */
.rt .sort-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath stroke='%237E7F79' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none' d='M2 4.5L6 8.5L10 4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}
.rt .period-select-inline,
.rt .period-select,
.rt .month-select,
.rt .tax-year-select{
  padding-left:38px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23B5B6B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2.5' ry='2.5'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath stroke='%237E7F79' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none' d='M2 4.5L6 8.5L10 4.5'/%3E%3C/svg%3E");
  background-position:left 14px center, right 12px center;
  background-repeat:no-repeat, no-repeat;
}
/* Light-mode SVG set (--text-tertiary = #84867F → URL %2384867F,
   --text-secondary = #54565B for calendar icon → %2354565B) */
.rt[data-theme="light"] .sort-select,
[data-theme="light"] .rt .sort-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath stroke='%2384867F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none' d='M2 4.5L6 8.5L10 4.5'/%3E%3C/svg%3E");
}
.rt[data-theme="light"] .period-select-inline,
.rt[data-theme="light"] .period-select,
.rt[data-theme="light"] .month-select,
.rt[data-theme="light"] .tax-year-select,
[data-theme="light"] .rt .period-select-inline,
[data-theme="light"] .rt .period-select,
[data-theme="light"] .rt .month-select,
[data-theme="light"] .rt .tax-year-select{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2354565B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2.5' ry='2.5'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath stroke='%2384867F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none' d='M2 4.5L6 8.5L10 4.5'/%3E%3C/svg%3E");
}
/* color-scheme keeps native option list theme-aware */
[data-theme="dark"] .rt .period-select-inline,
[data-theme="dark"] .rt .period-select,
[data-theme="dark"] .rt .month-select,
[data-theme="dark"] .rt .tax-year-select,
[data-theme="dark"] .rt .sort-select{color-scheme:dark;}

/* ============================================================================
   ─────────────  V2 SESSION 1 — TOKEN GUARD (collision shield)  ──────────────
   The §2 block above declares `--border`, `--text-secondary`, and `--font-mono`
   on global :root, which collides with the live app's existing tokens of the
   same name (100 + 60 + 9 usages in the current CSS). Cascade order would
   silently re-colour every border and secondary-text element, breaking
   Session 1's "render identically" guarantee. This guard re-asserts the
   live app's original values at the same :root / [data-theme="dark"]
   specificity so the existing UI is untouched. The new V2 tokens with
   distinct names (--surface-0, --brand, --state-listed, …) remain globally
   available for Session 2+ components to consume via .rt-scoped classes.
   This whole block is removed in Session 2 once the live app is migrated
   off the colliding names.
   ============================================================================ */
:root{
  --border:#ddd6c8;
  --text-secondary:#5a5040;
  /* --font-mono kept as Inter — see in-code note about Space Mono's
     slashed/dotted zero glyph being unwanted in money columns. */
  --font-mono:'Inter',system-ui,sans-serif;
}
[data-theme="dark"]{
  --border:#2e2e3e;
  --text-secondary:#9a96a0;
}

/* ============================================================================
   ────────────  V2 SESSION 1 — USER-MENU THEME-PREF SEGMENTED  ───────────────
   Tiny 3-button picker that replaces the previous binary toggle row in the
   desktop user-menu, giving System/Dark/Light parity with the mobile
   more-sheet picker. Uses existing app tokens — no V2 colours here so it
   blends with the rest of the user-menu chrome. Session 3 will rebuild
   chrome wholesale; this is the minimal Session 1 footprint.
   ============================================================================ */
.theme-pref-row{display:flex;align-items:center;gap:10px;padding:8px 14px;}
.theme-pref-row .theme-pref-icon{flex-shrink:0;color:var(--text-secondary);display:flex;align-items:center;}
.theme-pref-row .theme-pref-label{font-size:12px;color:var(--text);font-weight:500;flex-shrink:0;}
.theme-pref-segmented{margin-left:auto;display:flex;gap:2px;background:var(--surface2);border:1px solid var(--border);border-radius:7px;padding:2px;}
.theme-pref-segmented button{background:transparent;border:none;cursor:pointer;color:var(--text-secondary);font-family:inherit;font-size:11px;font-weight:500;padding:4px 8px;border-radius:5px;transition:background 0.12s,color 0.12s;line-height:1;}
.theme-pref-segmented button:hover{color:var(--text);}
.theme-pref-segmented button.is-active{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 1px 2px var(--shadow);}
[data-theme="dark"] .theme-pref-segmented button.is-active{background:var(--border);color:var(--text);}

/* ============================================================================
   ─────────  V2 SESSION 4a — DASHBOARD (HERO + EMBEDDED SVG CHART)  ───────────
   Scoped under .rt. The Net Profit hero is now a full-width card that embeds
   the area chart (revenue line + profit fill) plus a mini profit sparkline in
   its top-right. Net Profit value is amber (--brand) — the ONE allowed amber
   per the single-occupancy rule. The sparkline is profit-GREEN, NOT amber, to
   keep that rule intact. The remaining 3 KPIs (Revenue, Margin, Refund) sit in
   a row below: 3-up desktop, 2-col mobile with Refund spanning full width.
   ============================================================================ */

/* ── Hero card with embedded chart ── */
.rt .summary-hero-v2{
  padding:0;overflow:hidden;
}
.rt .summary-hero-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:22px 22px 8px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--dur-fast) var(--ease-out);
}
@media(hover:hover){.rt .summary-hero-top:hover{background:var(--surface-2);}}
.rt .summary-hero-head .kpi-label{
  font-size:11px;line-height:14px;letter-spacing:0.04em;font-weight:500;
  color:var(--text-secondary);text-transform:uppercase;
}
.rt .summary-hero-value{
  font-size:46px;line-height:50px;font-weight:700;letter-spacing:-0.03em;
  color:var(--brand);margin-top:2px;
}
.rt .summary-hero-head .kpi-foot{
  font-size:13px;color:var(--text-tertiary);margin-top:2px;
}
.rt .summary-hero-spark{
  width:120px;height:44px;flex:none;margin-top:6px;
}
@media(max-width:600px){
  .rt .summary-hero-value{font-size:40px;line-height:44px;}
  .rt .summary-hero-spark{width:96px;height:38px;}
}
.rt .summary-hero-chart{
  padding:0 18px 18px;position:relative;
}
.rt .summary-hero-chart .summary-chart-legend{
  display:flex;gap:14px;font-size:11px;color:var(--text-tertiary);
  justify-content:flex-end;margin-bottom:4px;
}
.rt .summary-chart-legend .legend-item{display:inline-flex;align-items:center;gap:5px;}
.rt .summary-chart-legend .legend-dot{width:8px;height:8px;border-radius:2px;display:inline-block;}
.rt #summary-chart-svg{width:100%;height:230px;display:block;}
@media(max-width:600px){.rt #summary-chart-svg{height:190px;}}
.rt #summary-chart-svg .rt-chart-col.clickable{cursor:pointer;}
.rt #summary-chart-svg .rt-chart-col.clickable:hover circle{
  fill:var(--state-listed);stroke:var(--surface-1);stroke-width:2;
}

/* ── Press-and-hold chart scrubber (Trading-212 / Coinbase pattern) ─────
   `touch-action:none` — the chart owns every touch inside its bounds.
   Without this, mobile browsers hijack any vertical drift as page-scroll,
   killing the scrubber mid-gesture. Trade-off: user can't scroll past
   the chart by swiping *over* it. They swipe above or below — the chart
   is short enough on mobile that this is fine. */
.rt #summary-chart-svg,
.rt #summary-chart-svg-mobile,
.rt #monthly-profitability-svg{
  touch-action:none;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;          /* iOS: no copy/share callout on long-press */
  -webkit-tap-highlight-color:transparent;
}
/* Child <text>/<rect> nodes are selectable independently of the parent rule —
   without this a press-and-hold still highlights the axis labels. */
.rt #summary-chart-svg *,
.rt #summary-chart-svg-mobile *,
.rt #monthly-profitability-svg *{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}

/* ── Mobile touch hardening (v2.12.2) ──────────────────────────────────────
   Long-press on interactive chrome must not raise the native selection or the
   iOS callout. Deliberately scoped to controls/rows/cards — item names, notes
   and amounts in body copy stay selectable, and inputs keep user-select:text
   from the global input rule. */
.rt .item-row,
.rt .kpi,
.rt .mcard,
.rt .inv-stat,
.rt .legend-item,
.rt .summary-chart-legend,
.rt .mf-row,
.rt .run-history-row,
.rt .ar-item-row,
.rt .exp-month-header,
.rt .cost-period-pill,
.rt .cost-cat-card,
.rt .chip,
.rt .side-nav-item,
.rt .fab,
.rt button{
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
.rt .rt-chart-scrub-tip{
  position:absolute;top:6px;left:0;
  background:var(--surface-2,#1a2236);
  border:1px solid var(--border-strong,rgba(255,255,255,0.12));
  border-radius:10px;
  padding:8px 12px;
  font-family:var(--font-body);
  color:var(--text-primary);
  pointer-events:none;
  z-index:6;
  white-space:nowrap;
  box-shadow:0 8px 22px rgba(0,0,0,0.32);
  transition:opacity var(--dur-fast,150ms) var(--ease-out,ease-out);
  min-width:120px;
}
.rt .rt-chart-scrub-tip .tip-period{
  font-size:10px;color:var(--text-tertiary);
  text-transform:uppercase;letter-spacing:0.06em;font-weight:600;
  margin-bottom:6px;
}
.rt .rt-chart-scrub-tip .tip-row{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--text-secondary);line-height:18px;
}
.rt .rt-chart-scrub-tip .tip-row + .tip-row{margin-top:2px;}
.rt .rt-chart-scrub-tip .tip-row strong{
  color:var(--text-primary);font-weight:700;
  font-variant-numeric:tabular-nums;margin-left:auto;
}
.rt .rt-chart-scrub-tip .tip-dot{
  width:8px;height:8px;border-radius:50%;
  display:inline-block;flex:none;
}

/* ── 3-up KPI row below the hero ── */
.rt .summary-kpis-v2{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
}
.rt .summary-kpis-v2 .kpi{
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
@media(hover:hover){
  .rt .summary-kpis-v2 .kpi:hover{border-color:var(--border-strong);transform:translateY(-1px);}
}
.rt .summary-kpis-v2 .kpi:active{transform:scale(0.985);}
.rt .summary-kpis-v2 .kpi-label{
  font-size:11px;line-height:14px;letter-spacing:0.02em;font-weight:500;
  color:var(--text-secondary);text-transform:uppercase;
}
.rt .summary-kpis-v2 .kpi-value{
  font-size:24px;line-height:28px;font-weight:600;letter-spacing:-0.02em;
  color:var(--text-primary);
}
.rt .summary-kpis-v2 .kpi-foot{font-size:12px;color:var(--text-tertiary);}
@media(max-width:980px){
  .rt .summary-kpis-v2{grid-template-columns:1fr 1fr;}
  /* Refund (last of 3) — span full width, horizontal layout, no dead cell. */
  .rt .summary-kpis-v2 .kpi:last-child{
    grid-column:1 / -1;
    display:grid;grid-template-columns:1fr auto;
    grid-template-areas:"label value" "foot value";
    align-items:center;column-gap:16px;row-gap:2px;
    min-height:0;padding:16px 18px;
  }
  .rt .summary-kpis-v2 .kpi:last-child .kpi-label{grid-area:label;}
  .rt .summary-kpis-v2 .kpi:last-child .kpi-value{grid-area:value;align-self:center;}
  .rt .summary-kpis-v2 .kpi:last-child .kpi-foot{grid-area:foot;margin-top:0;padding-top:0;}
}

/* ── Dashboard panels ── */
.rt #p-summary .summary-panel{padding:22px;}

/* v2.19.11 -- the .summary-snapshot-v2 block lived here (.snap-row/.snap-k/
   .snap-v). Nothing rendered it: the live class has been .summary-snapshot-strip
   with .snap-stat-v since the V3 grid landed. Deleted rather than left sitting
   here looking load-bearing (handover §9). */

/* Suppress legacy chart-mobile-summary fallback — SVG chart is responsive */
.rt #p-summary .chart-mobile-summary{display:none !important;}

/* ============================================================================
   ─────────────  V3 DASHBOARD — TIERED GRID (matches design mockup)  ──────────
   Tier 1: 6-KPI grid (3-col desktop / 2-col mobile)
   Tier 2: Revenue chart (wide) + Top Categories (narrow)
   Tier 3: Inventory Health + Top Flips (50/50)
   Tier 4: Snapshot + Velocity (50/50)
   Mobile collapses every tier to a single column.
   ============================================================================ */
.rt .summary-grid-v3{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.rt .summary-kpis-v3{
  grid-column:1 / -1;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;
}
.rt .summary-kpis-v3 .kpi{
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
@media(hover:hover){.rt .summary-kpis-v3 .kpi:hover{border-color:var(--border-strong);transform:translateY(-1px);}}
.rt .summary-kpis-v3 .kpi:active{transform:scale(0.99);}
.rt .summary-kpis-v3 .kpi-label{font-size:11px;line-height:14px;letter-spacing:0.03em;font-weight:500;color:var(--text-secondary);text-transform:uppercase;}
.rt .summary-kpis-v3 .kpi-value{font-size:30px;line-height:34px;font-weight:700;letter-spacing:-0.025em;color:var(--text-primary);margin-top:3px;}
.rt .summary-kpis-v3 .kpi-netprofit .kpi-value{color:var(--brand);}  /* relaxed amber on Net Profit */
.rt .summary-kpis-v3 .kpi-foot{font-size:12px;color:var(--text-tertiary);margin-top:6px;}
/* v3 KPI cards: compact, content-sized (override base .kpi min-height + foot
   margin-top:auto which made mobile cards tall with a gap). */
.rt .summary-kpis-v3 .kpi{min-height:0;padding:16px 18px;gap:4px;}
.rt .summary-kpis-v3 .kpi .kpi-foot{margin-top:6px;padding-top:0;}

/* ── Desktop placement (≥1000px). Previous threshold was 1100px which left
   the chart full-width on screens ~1050-1099 — overwhelming with no
   horizontal partner (Oskar review). Reads top-to-bottom as five rows:
     r1: KPI grid (4 cards in one row, inner grid)
     r2: chart (1-8, 7-col) · top categories (8-13, 5-col)
     r3: Snapshot — per-sale band, full width, 3 sub-cards
     r4: Inventory health — full-width band, 3 stats left + age bar right
     r5: Velocity (1-6, 5-col) · Top Flips (6-13, 7-col) — wider flips so
         item names breathe                                            */
.rt .summary-chart-card{grid-column:1 / 8; grid-row:2; display:flex;flex-direction:column;}
.rt .summary-categories {grid-column:8 / 13;grid-row:2; display:flex;flex-direction:column;}
.rt .summary-snapshot   {grid-column:1 / -1;grid-row:3;}
.rt .summary-inventory  {grid-column:1 / -1;grid-row:4; display:flex;flex-direction:column;}
.rt .summary-velocity   {grid-column:1 / 6; grid-row:5; display:flex;flex-direction:column;}
.rt .summary-topflips   {grid-column:6 / 13;grid-row:5; display:flex;flex-direction:column;}

/* Inventory band on desktop: 3 stat cards on the left, stock-age bar on
   the right, divided by a vertical border. Full-width band on its own row. */
.rt .summary-inventory .inv-band-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:center;}
.rt .summary-inventory .inv-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.rt .summary-inventory .inv-stat{padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-s);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out);-webkit-tap-highlight-color:transparent;}
@media(hover:hover){.rt .summary-inventory .inv-stat:hover{border-color:var(--border-strong);}}
.rt .summary-inventory .inv-stat-k{font-size:11px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.03em;font-weight:500;}
.rt .summary-inventory .inv-stat-v{font-size:22px;font-weight:700;letter-spacing:-0.02em;color:var(--text-primary);margin-top:5px;}
.rt .summary-inventory .inv-stat-sub{font-size:11px;color:var(--text-tertiary);margin-top:4px;}
.rt .summary-inventory .inv-age{padding-left:24px;border-left:1px solid var(--border);}
.rt .summary-inventory .inv-age-title{font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:10px;}

/* Snapshot band — per-sale reality check, full-width row above Inventory.
   3 stat sub-cards arranged horizontally on desktop, label-left/value-
   right rows on mobile (overridden by the ≤600px breakpoint). */
.rt .summary-snapshot-strip .snap-strip-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.rt .summary-snapshot-strip .summary-snapshot-sub{font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.06em;}
.rt .summary-snapshot-strip .snap-strip-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-content:start;
}
.rt .summary-snapshot-strip .snap-stat{
  padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-s);
  cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
@media(hover:hover){.rt .summary-snapshot-strip .snap-stat:hover{border-color:var(--border-strong);}}
.rt .summary-snapshot-strip .snap-stat-k{font-size:11px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.03em;font-weight:500;}
.rt .summary-snapshot-strip .snap-stat-v{font-size:22px;font-weight:700;letter-spacing:-0.02em;color:var(--text-primary);margin-top:5px;}

/* Velocity category breakdown: visible on all breakpoints. The card sits
   beside Top Flips on desktop (5-col + 7-col), so it has room. */
.rt .summary-velocity .category-mini-grid{display:grid;grid-template-columns:1fr;gap:8px;}

/* Tier 2 internals */
.rt .summary-chart-card .summary-chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:12px;flex-wrap:wrap;}
.rt .summary-chart-card .summary-chart-legend{display:flex;gap:14px;font-size:11px;color:var(--text-tertiary);}
.rt .summary-chart-card .legend-item{display:inline-flex;align-items:center;gap:5px;}
.rt .summary-chart-card .legend-dot{width:8px;height:8px;border-radius:2px;display:inline-block;}
.rt .summary-chart-card #summary-chart-svg{width:100%;flex:1;min-height:220px;max-height:320px;display:block;}
/* Sales History profitability chart — intentionally mirrors the dashboard
   chart card exactly: same card padding, heading, legend, type and spacing. */
/* Two-up charts row (v2.12.0): trend chart | FY money-flow panel.
   Narrowing the trend chart into a column is what actually fixes the
   "overwhelmingly big" full-width chart — plus a shorter max-height. */
.rt #p-monthly .monthly-charts-row{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;margin-bottom:18px;
  /* Equal-height cards. The SVG flexes to fill the chart card and its viewBox
     is computed from the measured pixel box (see renderMonthlyProfitabilityChart),
     so there is no dead band under the axis and no text distortion. */
  align-items:stretch;
}
/* BUGFIX (v2.12.1): .summary-chart-card carries the DASHBOARD grid placement
   (grid-column:1/8; grid-row:2). Inside this 2-col row that spawned 7 implicit
   columns (overflow) and forced the chart to row 2, floating the money-flow
   card above it. Reset placement + allow the SVG to shrink. */
.rt #p-monthly .monthly-charts-row>.card{
  margin-bottom:0;grid-column:auto!important;grid-row:auto!important;order:0!important;min-width:0;
}
.rt #p-monthly .monthly-charts-row #monthly-profitability-svg{max-width:100%;}
/* Stack only when the columns genuinely stop working (small tablet / mobile). */
@media(max-width:860px){
  .rt #p-monthly .monthly-charts-row{grid-template-columns:minmax(0,1fr);}
}
/* Period selector sits in the page header, styled by .period-select-inline
   (the same control the Dashboard uses). Just cap its width here. */
.rt #p-monthly .monthly-period-select{max-width:210px;flex-shrink:0;}
.rt #p-monthly .monthly-profitability-card .summary-chart-head{gap:10px;}
/* FY money-flow (P&L waterfall) side panel */
.rt #p-monthly .money-flow-card{display:flex;flex-direction:column;padding:22px;}
.rt #p-monthly .money-flow-rows{display:flex;flex-direction:column;gap:11px;margin-top:6px;}
.rt #p-monthly .mf-row{display:flex;flex-direction:column;gap:5px;}
.rt #p-monthly .mf-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.rt #p-monthly .mf-label{font-size:12px;color:var(--text-secondary);}
.rt #p-monthly .mf-val{font-size:13px;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums lining-nums;}
.rt #p-monthly .mf-bar{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden;}
.rt #p-monthly .mf-fill{height:100%;border-radius:999px;display:block;min-width:2px;}
.rt #p-monthly .mf-net{margin-top:4px;padding-top:12px;border-top:1px solid var(--border);}
.rt #p-monthly .mf-net .mf-label{font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;font-weight:600;}
.rt #p-monthly .mf-net .mf-val{font-size:22px;}
.rt #p-monthly .mf-foot{font-size:11px;color:var(--text-tertiary);margin-top:10px;line-height:1.45;}
.rt #p-monthly .monthly-profitability-card{display:flex;flex-direction:column;padding:22px;margin-bottom:18px;}
.rt #p-monthly .monthly-profitability-card .summary-chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:12px;flex-wrap:wrap;}
.rt #p-monthly .monthly-profitability-card .sl{margin:0;}
.rt #p-monthly .monthly-profitability-card .summary-chart-legend{display:flex;gap:14px;font-size:11px;color:var(--text-tertiary);}
.rt #p-monthly .monthly-profitability-card .legend-item{display:inline-flex;align-items:center;gap:5px;}
.rt #p-monthly .monthly-profitability-card .legend-dot{width:8px;height:8px;border-radius:2px;display:inline-block;}
/* NOTE: the element is <svg id="monthly-profitability-svg"> with no class —
   the old `.monthly-profitability-svg` rules never matched. Height is driven by
   the viewBox ratio (800x360); preserveAspectRatio="none" would distort the
   axis text if we pinned a CSS height that fought the ratio. */
.rt #p-monthly #monthly-profitability-svg{width:100%;display:block;flex:1 1 auto;min-height:220px;}
@media(max-width:600px){
  .rt #p-monthly .monthly-profitability-card{padding:16px;border-radius:18px;}
  .rt #p-monthly #monthly-profitability-svg{min-height:200px;}
}

.rt .summary-categories-empty{display:none;}
.rt .summary-cat-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;gap:8px;}
.rt .summary-cat-count{font-size:10px;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.06em;}
.rt .summary-categories .cat-donut-wrap{flex:1;display:flex;align-items:center;gap:20px;margin-top:6px;}

/* View-all link pinned to the bottom of Top Flips */
.rt .summary-viewall{
  margin-top:auto;width:100%;padding:11px 12px;border:none;border-top:1px solid var(--border);
  background:transparent;color:var(--accent);font-size:13px;font-weight:600;cursor:pointer;
  font-family:var(--font-body);text-align:center;-webkit-tap-highlight-color:transparent;
  transition:color var(--dur-fast) var(--ease-out);
}
.rt .summary-viewall:hover{color:var(--brand);}

/* ── MEDIUM / tablet (601–999px) ──
   Below 1000px the chart loses its 7/5 split with categories and goes
   full-width (a wide chart needs all the horizontal space it can get for
   trend reading). At 800–999px, pair Categories + Snapshot and
   Velocity + Top Flips side-by-side — both pairs have natural visual
   weight matches. Below 800px (small tablet / large phone in landscape),
   everything stacks single-column. */
@media(max-width:1279px){
  .rt .summary-grid-v3{grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;}
  .rt .summary-kpis-v3{grid-column:1 / -1;}
  .rt .summary-chart-card  {grid-column:1 / -1;grid-row:auto;order:1;}
  .rt .summary-categories  {grid-column:1 / -1;grid-row:auto;order:2;}
  .rt .summary-snapshot    {grid-column:1 / -1;grid-row:auto;order:3;}
  .rt .summary-inventory   {grid-column:1 / -1;grid-row:auto;order:4;}
  .rt .summary-velocity    {grid-column:1 / -1;grid-row:auto;order:5;}
  .rt .summary-topflips    {grid-column:1 / -1;grid-row:auto;order:6;}
  .rt .summary-velocity .category-mini-grid{grid-template-columns:repeat(2,1fr);gap:8px 20px;}
}
@media(min-width:800px) and (max-width:1279px){
  /* Pair Categories + Snapshot (both medium-density panels) and
     Velocity + Top Flips (already paired on full desktop) */
  .rt .summary-categories  {grid-column:1 / 7;}
  .rt .summary-snapshot    {grid-column:7 / -1;}
  .rt .summary-velocity    {grid-column:1 / 7;}
  .rt .summary-topflips    {grid-column:7 / -1;}
  /* Velocity inner: category breakdown back to single column since the
     card itself is narrower in the pair */
  .rt .summary-velocity .category-mini-grid{grid-template-columns:1fr;gap:8px;}

  /* Chart in this band sits full-width above the Categories/Snapshot pair.
     Without an explicit cap the default desktop-card rule (max-height 320px,
     line 2529) still applied for the 981-999 sliver — chart felt overwhelming
     at that width since it had no horizontal partner. The ≤980 block already
     caps it at 260px; this rule extends that cap across the whole medium
     band so the chart stays in a balanced 200-260px range until the layout
     shifts to chart+categories paired at ≥1280px (v2.19.10 -- was ≥1000px; the
     query measures the viewport but the grid lives in viewport minus the 240px
     sidebar, so 1000px gave the grid only 760px and Categories 5/12 = 287px,
     with the 180px donut leaving an 87px legend). */
  .rt .summary-chart-card #summary-chart-svg{min-height:200px;max-height:260px;}

  /* Snapshot strip at this breakpoint — the strip's auto-fit minmax(150,1fr)
     grid wraps to 2+1 inside the half-width card, leaving an empty cell to
     the right of "Average gross profit". Re-use the mobile row pattern
     (label-left / value-right rows with hairline dividers) so the panel
     fills cleanly without dead space. Same rule set as the ≤600px mobile
     block at line ~2682 — kept inlined here so the two contexts can drift
     independently if needed later. */
  .rt .summary-snapshot-strip .snap-strip-head{margin-bottom:6px;}
  .rt .summary-snapshot-strip .snap-strip-row{grid-template-columns:1fr;gap:0;}
  .rt .summary-snapshot-strip .snap-stat{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding:14px 0;
    border:none;
    border-top:1px solid var(--border);
    border-radius:0;
  }
  .rt .summary-snapshot-strip .snap-stat:first-child{border-top:none;padding-top:8px;}
  .rt .summary-snapshot-strip .snap-stat-k{
    font-size:14px;color:var(--text-primary);text-transform:none;
    letter-spacing:0;font-weight:400;
  }
  .rt .summary-snapshot-strip .snap-stat-v{font-size:18px;margin-top:0;font-weight:700;}
}
/* KPI grid: 4-col down to 980, then 2-col (4 KPIs → 2×2 on tablet) */
@media(max-width:980px){
  .rt .summary-kpis-v3{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .rt .summary-kpis-v3 .kpi{min-width:0;overflow:hidden;}
  .rt .summary-kpis-v3 .kpi-value{font-size:26px;line-height:30px;}
  .rt .summary-chart-card #summary-chart-svg{min-height:200px;max-height:260px;}
  /* Inventory band: stock-age drops below the metrics when space is tight */
  .rt .summary-inventory .inv-band-grid{grid-template-columns:1fr;gap:16px;}
  .rt .summary-inventory .inv-age{padding-left:0;border-left:none;padding-top:16px;border-top:1px solid var(--border);}
}
/* ── PHONE (≤600px) — Mobile rebuild (Session 2).
   Desktop 6-KPI grid + standalone chart card hide; their job is taken over
   by the mobile-only hero card (Net Profit + sparkline + embedded chart)
   and the 2-up Active Stock / Avg Margin row beneath it. Remaining cards
   re-order top-to-bottom by "what gets checked": Inventory (actionable) →
   Categories (where money flows) → Snapshot (reference) → Velocity
   (strategic) → Top Flips (celebration). ───────────────────────────────── */

/* Default: mobile-only blocks are invisible at desktop/tablet widths. */
.rt .summary-mobile-only{display:none;}

@media(max-width:600px){
  .rt .summary-grid-v3{grid-template-columns:1fr;gap:14px;}

  /* Desktop-only surfaces: hidden on phone. The hero card subsumes both. */
  .rt .summary-kpis-v3{display:none;}
  .rt .summary-chart-card{display:none;}

  /* Mobile-only surfaces become visible and slot into the grid. */
  .rt .summary-sourcing-cta{display:flex;}
  .rt .summary-hero-card{display:block;}
  .rt .summary-mobile-twoup{display:grid;}

  /* Reading order (top-to-bottom on phone) — set by `order:` since the grid
     is single-column and grid-row is auto. Categories' donut visual pairs
     nicely after the two-up numerics; Inventory's heavier stat row + age
     bar lands after, then snapshot/velocity/topflips: */
  .rt .summary-sourcing-cta {grid-column:1 / -1; grid-row:auto; order:1;}
  .rt .summary-hero-card    {grid-column:1 / -1; grid-row:auto; order:2;}
  .rt .summary-mobile-twoup {grid-column:1 / -1; grid-row:auto; order:3;}
  .rt .summary-categories   {grid-column:1 / -1 !important; grid-row:auto !important; order:4 !important;}
  .rt .summary-inventory    {grid-column:1 / -1 !important; grid-row:auto !important; order:5 !important;}
  .rt .summary-snapshot     {grid-column:1 / -1 !important; grid-row:auto !important; order:6 !important;}
  .rt .summary-velocity     {grid-column:1 / -1 !important; grid-row:auto !important; order:7 !important;}
  .rt .summary-topflips     {grid-column:1 / -1 !important; grid-row:auto !important; order:8 !important;}

  .rt .summary-categories-empty{display:none !important;}
  .rt .summary-velocity .category-mini-grid{grid-template-columns:1fr;}
}

/* ── Sourcing CTA card (mobile-only, conditional on no active run) ───── */
.rt .summary-sourcing-cta{
  align-items:center;gap:14px;padding:14px 16px;width:100%;
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-l,16px);
  cursor:pointer;text-align:left;font-family:var(--font-body);
  -webkit-tap-highlight-color:transparent;
  transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out);
}
.rt .summary-sourcing-cta:active{background:var(--surface-2);}
.rt .summary-sourcing-cta .cta-icon{
  flex:0 0 auto;width:38px;height:38px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(242,179,61,0.12);color:var(--brand);
}
.rt .summary-sourcing-cta .cta-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.rt .summary-sourcing-cta .cta-title{font-size:15px;font-weight:600;color:var(--text-primary);letter-spacing:-0.01em;}
.rt .summary-sourcing-cta .cta-sub{font-size:12px;color:var(--text-secondary);}
.rt .summary-sourcing-cta .cta-chev{font-size:22px;color:var(--text-tertiary);flex:0 0 auto;line-height:1;margin-top:-2px;}

/* Active-run variant — same shell, green pulse dot instead of amber lightning.
   Green accent because a run is IN PROGRESS (positive/live state), whereas
   the idle CTA uses brand-amber to invite a start. */
.rt .summary-active-run-cta{
  background:color-mix(in srgb,var(--green,#22c55e) 6%,var(--surface-1));
  border-color:color-mix(in srgb,var(--green,#22c55e) 28%,var(--border));
}
.rt .summary-active-run-cta:active{
  background:color-mix(in srgb,var(--green,#22c55e) 10%,var(--surface-2));
}
.rt .summary-active-run-cta .cta-icon-run{
  background:color-mix(in srgb,var(--green,#22c55e) 14%,transparent);
  position:relative;
}
.rt .summary-active-run-cta .active-run-pulse{
  width:10px;height:10px;border-radius:50%;background:var(--green,#22c55e);
  animation:run-pulse 2s ease-in-out infinite;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--green,#22c55e) 60%,transparent);
}
.rt .summary-active-run-cta .cta-title{color:var(--text-primary);}
.rt .summary-active-run-cta .cta-chev{color:var(--green,#22c55e);}

/* ── Hero card (mobile-only) ─ piggybacks on the existing summary-hero-*
   element styles. The card is its own container; .summary-hero-top is the
   header row (label + value + delta on the left, sparkline on the right),
   .summary-hero-chart hosts the embedded area chart below. ────────────── */
.rt .summary-hero-card{
  padding:0;overflow:hidden;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color var(--dur-fast) var(--ease-out);
}
.rt .summary-hero-card .summary-hero-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:18px 18px 6px;
}
.rt .summary-hero-card .summary-hero-head{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.rt .summary-hero-card .summary-hero-value{
  font-size:42px;line-height:46px;font-weight:700;letter-spacing:-0.03em;
  color:var(--brand);margin-top:4px;
}
.rt .summary-hero-card .kpi-foot{font-size:12px;color:var(--text-tertiary);margin-top:6px;}
.rt .summary-hero-card .summary-hero-spark{width:96px;height:38px;flex:none;margin-top:4px;}
.rt .summary-hero-card .summary-hero-chart{padding:0 14px 14px;position:relative;}
.rt .summary-hero-card .summary-hero-chart .summary-chart-legend{
  display:flex;gap:14px;font-size:11px;color:var(--text-tertiary);
  justify-content:flex-end;margin-bottom:4px;
}
.rt .summary-hero-card #summary-chart-svg-mobile{width:100%;height:200px;display:block;}

/* Mobile chart — gradient area softening + subtler gridlines (Drop 3.4 pass).
   The strokes, fonts, and geometry are all set via per-platform opts in
   renderSummaryChart; CSS handles the two purely-visual polish tweaks:
   - Gradient fill dropped to 0.9 opacity for a softer profit area
   - Gridlines dropped from 0.55 → 0.35 opacity so the trend line dominates
     (Robinhood / Trading 212 pattern — chart chrome barely there) */
.rt #summary-chart-svg-mobile path[fill^="url(#rt-profit-fill"]{opacity:0.9;}
.rt #summary-chart-svg-mobile line[stroke="var(--border)"]{opacity:0.35;}

/* ── 2-up: Active Stock + Avg Margin (mobile-only) ───────────────────── */
.rt .summary-mobile-twoup{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.rt .summary-mobile-twoup .kpi{padding:14px 14px;min-height:0;}
.rt .summary-mobile-twoup .kpi-label{font-size:11px;line-height:14px;letter-spacing:0.03em;font-weight:500;color:var(--text-secondary);text-transform:uppercase;}
.rt .summary-mobile-twoup .kpi-value{font-size:22px;line-height:26px;font-weight:700;letter-spacing:-0.025em;color:var(--text-primary);margin-top:4px;}
.rt .summary-mobile-twoup .kpi-foot{font-size:11px;color:var(--text-tertiary);margin-top:6px;}

/* ── Mobile Snapshot: card-of-rows pattern. The desktop footer-strip with
   vertical dividers doesn't read well stacked; on phone, snapshot becomes
   a clean list of label-left / value-right rows (per mockup image 2).
   Explicitly clears the desktop border/border-radius — without this the
   bordered card style leaks through and shows a 3-sided outline. Matches
   the Velocity card's row aesthetic just below it. ── */
@media(max-width:600px){
  .rt .summary-snapshot-strip .snap-strip-head{margin-bottom:6px;}
  .rt .summary-snapshot-strip .snap-strip-row{grid-template-columns:1fr;gap:0;}
  .rt .summary-snapshot-strip .snap-stat{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding:14px 0;
    border:none;
    border-top:1px solid var(--border);
    border-radius:0;
  }
  .rt .summary-snapshot-strip .snap-stat:first-child{border-top:none;padding-top:8px;}
  .rt .summary-snapshot-strip .snap-stat-k{
    font-size:14px;color:var(--text-primary);text-transform:none;
    letter-spacing:0;font-weight:400;
  }
  .rt .summary-snapshot-strip .snap-stat-v{font-size:17px;margin-top:0;font-weight:700;}
  /* Inventory health on mobile — 3 stats in a single compact row across
     the top (Active stock count · Active stock value · Listed in period),
     followed by the stock-age bar + legend. Labels stay uppercase mini-caps
     with a min-height of 2 lines so value baselines align across columns
     regardless of label length ("Active stock value" wraps; "Active stock"
     stays one line). No nested card borders — these read as label/value
     pairs, not sub-cards. The whole row sits above a thin divider that
     separates it from the age section below. */
  .rt .summary-inventory .inv-band-grid{display:flex;flex-direction:column;gap:14px;}
  .rt .summary-inventory .inv-metrics{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
    padding-bottom:14px;border-bottom:1px solid var(--border);
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .rt .summary-inventory .inv-metrics .inv-stat,
  .rt .summary-inventory .inv-metrics .inv-stat:nth-child(1),
  .rt .summary-inventory .inv-metrics .inv-stat:nth-child(2),
  .rt .summary-inventory .inv-metrics .inv-stat:nth-child(3){
    display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:4px;padding:0;border:none;border-radius:0;
  }
  .rt .summary-inventory .inv-metrics .inv-stat-k{
    font-size:10px;line-height:13px;font-weight:500;letter-spacing:0.05em;
    text-transform:uppercase;color:var(--text-secondary);
    min-height:26px;display:flex;align-items:flex-start;
    flex:none;width:100%;
  }
  .rt .summary-inventory .inv-metrics .inv-stat-v{
    font-size:19px;line-height:22px;font-weight:700;letter-spacing:-0.02em;
    color:var(--text-primary);margin-top:0;
    width:100%;
  }
  /* Per-stat alignment (Oskar Drop-1 review):
       1. Active stock value (£) — left, anchors the section
       2. Active stock count    — centered
       3. Listed in period      — centered
     Labels track the same alignment as the value beneath them. */
  .rt .summary-inventory .inv-metrics .inv-stat:nth-child(1) .inv-stat-k,
  .rt .summary-inventory .inv-metrics .inv-stat:nth-child(1) .inv-stat-v{
    text-align:left;
  }
  .rt .summary-inventory .inv-metrics .inv-stat:nth-child(2) .inv-stat-k,
  .rt .summary-inventory .inv-metrics .inv-stat:nth-child(2) .inv-stat-v,
  .rt .summary-inventory .inv-metrics .inv-stat:nth-child(3) .inv-stat-k,
  .rt .summary-inventory .inv-metrics .inv-stat:nth-child(3) .inv-stat-v{
    text-align:center;
  }
  .rt .summary-inventory .inv-metrics .inv-stat-sub{display:none;}
  /* Age section: tighter padding now that the divider lives above it */
  .rt .summary-inventory .inv-age{padding-top:0;border-top:none;}
  /* Drop the wrapping "By age in current state" subtitle on mobile — title is self-evident */
  .rt .summary-inventory .summary-cat-head .summary-cat-count{display:none;}
}

/* Age-bar legend: zero-count buckets stay visible (so the user sees the
   full 4-bucket range) but de-emphasized so they don't compete with the
   real counts. */
.rt .age-legend-btn--zero{opacity:0.45;}
.rt .age-legend-btn--zero .age-legend-dot{opacity:0.5;}
/* Narrow phones: trim hero value and tighten 2-up cards so chips don't
   force horizontal overflow. Desktop KPI grid is hidden at this width
   but we keep its rule defensive in case it ever re-shows. */
@media(max-width:430px){
  .rt .summary-kpis-v3{gap:10px;}
  .rt .summary-kpis-v3 .kpi{padding:14px 14px;}
  .rt .summary-kpis-v3 .kpi-value{font-size:22px;line-height:26px;}
  .rt .kpi-delta{font-size:11px;}
  .rt .kpi-delta .kpi-delta-lbl{display:none;}
  /* Mobile-only blocks: tighten for very narrow screens */
  .rt .summary-hero-card .summary-hero-value{font-size:38px;line-height:42px;}
  .rt .summary-hero-card .summary-hero-spark{width:80px;height:34px;}
  .rt .summary-mobile-twoup{gap:8px;}
  .rt .summary-mobile-twoup .kpi{padding:12px 12px;}
  .rt .summary-mobile-twoup .kpi-value{font-size:20px;line-height:24px;}
}

/* ── KPI delta chips (period-over-period) ── */
.rt .kpi-delta{
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  font-size:12px;font-weight:600;line-height:1;letter-spacing:-0.01em;
}
.rt .kpi-delta .kpi-delta-lbl{white-space:nowrap;}
.rt .kpi-delta.up{color:var(--green);}
.rt .kpi-delta.down{color:var(--red);}
.rt .kpi-delta.flat{color:var(--text-tertiary);}
.rt .kpi-delta .kpi-delta-lbl{color:var(--text-tertiary);font-weight:500;}

/* ── Top Categories donut ── */
.rt .summary-categories .cat-donut-wrap{
  display:flex;align-items:center;justify-content:center;gap:22px;margin-top:6px;flex-wrap:nowrap;
}
.rt .cat-donut-chart{flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
/* Donut takes a healthy share; legend is width-bounded so the % sits close to
   the name instead of being flung to the card's far edge (kills dead space). */
.rt .cat-donut-svg{display:block;width:clamp(124px,42%,170px);height:auto;aspect-ratio:1;}
.rt .cat-donut-legend{flex:0 1 280px;min-width:0;display:flex;flex-direction:column;gap:11px;}
.rt .cat-legend-row{display:flex;align-items:center;gap:10px;font-size:13px;}
.rt .cat-legend-dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto;}
.rt .cat-legend-name{flex:1;min-width:0;color:var(--text-secondary);white-space:normal;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;}
.rt .cat-legend-pct{color:var(--text-primary);font-weight:700;letter-spacing:-0.01em;flex:0 0 auto;}
@media(max-width:560px){
  .rt .summary-categories .cat-donut-wrap{gap:16px;}
  .rt .cat-donut-svg{width:clamp(110px,40%,150px);}
  .rt .cat-legend-row{font-size:12px;gap:8px;}
}
@media(max-width:380px){
  .rt .summary-categories .cat-donut-wrap{gap:12px;}
  .rt .cat-donut-svg{width:96px;}
  .rt .cat-legend-row{font-size:11px;}
}

/* ============================================================================
   ──────────────  V2 SESSION 4b — STOCK ROOM (CHROME RESKIN)  ─────────────────
   Reskins the Stock Room chrome only — KPI strip → V2 card kpi, Listed/Sourced
   toggle → V2 segmented. Shared item-row markup is intentionally left untouched
   (it renders on other screens; rewrite deferred to its own session). Filter
   chips + age bar already use V2-compatible classes and are left as-is.
   ============================================================================ */
.rt .stock-kpis-v2{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px;
}
.rt .stock-kpis-v2 .kpi{
  cursor:default;
  transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.rt .stock-kpis-v2 .kpi.clickable{cursor:pointer;}
@media(hover:hover){.rt .stock-kpis-v2 .kpi.clickable:hover{border-color:var(--border-strong);transform:translateY(-1px);}}
.rt .stock-kpis-v2 .kpi.clickable:active{transform:scale(0.985);}
.rt .stock-kpis-v2 .kpi-value{
  font-size:22px;line-height:26px;font-weight:600;letter-spacing:-0.02em;color:var(--text-primary);
}
.rt .stock-kpis-v2 .kpi-label{color:var(--text-secondary);}
.rt .stock-kpis-v2 .kpi-foot{font-size:12px;color:var(--text-tertiary);}
/* Segmented toggle — full width + standard bottom gap */
.rt .stock-state-seg{width:100%;margin-bottom:16px;}
@media(max-width:420px){.rt .stock-state-seg button{padding:0 5px;font-size:11px;gap:3px}.rt .stock-state-seg button .count{font-size:9px}}
@media(max-width:720px){
  /* v1.01 mobile regression fix — restore the compact 2×2 KPI layout.
     Horizontal KPI cards could widen Inventory beyond the visual viewport in
     Safari/PWA. minmax(0,1fr) keeps money/subtext inside each card. */
  .rt #p-stock .stock-kpis-v2{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    margin-bottom:12px!important;
    padding-bottom:0!important;
  }
  .rt #p-stock .stock-kpis-v2 .kpi{
    width:auto!important;min-width:0!important;max-width:100%!important;
    min-height:72px!important;overflow:hidden!important;
  }
  .rt #p-stock .stock-kpis-v2 .kpi-value,
  .rt #p-stock .stock-kpis-v2 .kpi-foot{
    min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  }
  .rt #p-stock .stock-state-seg{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    width:100%!important;max-width:100%!important;overflow:hidden!important;
  }
  .rt #p-stock .stock-state-seg button{
    min-width:0!important;width:100%!important;
    padding-left:6px!important;padding-right:6px!important;
    overflow:hidden!important;
  }
  .rt #p-stock .stock-state-seg button .count{flex-shrink:0;}
}

/* ============================================================================
   ─────────────  V2 SESSION 5 — STOCK ROOM (FULL PAGE RESKIN)  ────────────────
   Extends Session 4b beyond KPI + segmented to cover the whole Stock Room
   chrome: filter chips, sort control, age bar, stock-group headers, list
   toolbar, mobile filter dropdown. Scoped strictly to #p-stock so the shared
   item-row markup used on Sales History / Calendar / item pages is untouched.
   Design language mirrors the Costs & Trips V2 page (period pills, subtle
   ledger-style group dividers, amber-dim active states — never amber-fill).
   ============================================================================ */

/* KPI type refresh — smaller label, cleaner value, uppercase tracking */
.rt #p-stock .stock-kpis-v2 .kpi{
  padding:12px 14px 11px;min-height:74px;
  border-radius:var(--r-m);
}
.rt #p-stock .stock-kpis-v2 .kpi-label{
  font-family:var(--font-display);font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.08em;color:var(--text-tertiary);
  line-height:1.2;
}
.rt #p-stock .stock-kpis-v2 .kpi-value{
  font-family:var(--font-body);font-size:clamp(19px,2.4vw,24px);
  font-weight:700;letter-spacing:-0.025em;line-height:1.15;
  margin:6px 0 3px;color:var(--text-primary);
}
.rt #p-stock .stock-kpis-v2 .kpi-foot{
  font-size:11px;color:var(--muted);font-weight:500;line-height:1.35;
}

/* Filter row — align gap + wrap behaviour with Costs page */
.rt #p-stock .stock-filter-row{align-items:center;gap:8px;margin-bottom:14px;}

/* Filter chips → cost-period-pill visual language.
   Kills the outer segmented-look container, lets each pill carry its own
   border so we don't compete visually with the .stock-state-seg above. */
.rt #p-stock .filter-chips{
  background:transparent;border:none;padding:0;
  gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  flex-wrap:nowrap;
}
.rt #p-stock .filter-chips::-webkit-scrollbar{display:none;}
.rt #p-stock .filter-chips .chip{
  flex:0 0 auto;padding:7px 12px;border-radius:var(--r-s);
  border:1px solid var(--border);background:var(--surface);
  color:var(--text-secondary);
  font-family:var(--font-body);font-size:12.5px;font-weight:600;
  white-space:nowrap;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color:transparent;
  display:inline-flex;align-items:center;gap:6px;box-shadow:none;
}
.rt #p-stock .filter-chips .chip:hover:not(:disabled){
  color:var(--text);border-color:var(--border-strong);background:var(--surface);
}
.rt #p-stock .filter-chips .chip.active{
  background:var(--accent-dim);color:var(--accent);
  border-color:rgba(212,136,10,0.4);box-shadow:none;
}
.rt #p-stock .filter-chips .chip.chip-empty,
.rt #p-stock .filter-chips .chip:disabled{opacity:.35;cursor:not-allowed;}
.rt #p-stock .filter-chips .chip .chip-count{
  font-size:10.5px;font-weight:700;color:var(--muted);opacity:.9;
}
.rt #p-stock .filter-chips .chip.active .chip-count{color:var(--accent);opacity:1;}

/* Dots — legacy listed palette (fresh=green, maturing=neutral grey, slow=warn, stale=red)
   kept as-is via base CSS. Slow dot bumped to var(--warn) for theme consistency. */
.rt #p-stock .filter-chips .chip.chip-slow::before{background:var(--warn);}
/* Sourced-* dot mapping (green/blue/warn/red) */
.rt #p-stock .filter-chips .chip.chip-sourced-new,
.rt #p-stock .filter-chips .chip.chip-sourced-soon,
.rt #p-stock .filter-chips .chip.chip-sourced-overdue,
.rt #p-stock .filter-chips .chip.chip-sourced-stagnant{gap:6px;}
.rt #p-stock .filter-chips .chip.chip-sourced-new::before,
.rt #p-stock .filter-chips .chip.chip-sourced-soon::before,
.rt #p-stock .filter-chips .chip.chip-sourced-overdue::before,
.rt #p-stock .filter-chips .chip.chip-sourced-stagnant::before{
  content:'';display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0;
}
.rt #p-stock .filter-chips .chip.chip-sourced-new::before{background:var(--green);}
.rt #p-stock .filter-chips .chip.chip-sourced-soon::before{background:var(--blue);}
.rt #p-stock .filter-chips .chip.chip-sourced-overdue::before{background:var(--warn);}
.rt #p-stock .filter-chips .chip.chip-sourced-stagnant::before{background:var(--red);}

/* Sort select — let the V2 picker family (see lines 2206+) do the heavy lifting.
   We ONLY override height to match the compact 34px chip row here — everything
   else (surface-2 navy fill, refined caret, amber focus ring, border-strong
   hover) inherits from the picker-family block for visual consistency with
   the Dashboard period selector. */
.rt #p-stock .sort-select{
  flex:0 0 auto;height:34px;padding:0 30px 0 12px;
  border-radius:var(--r-s);
  font-family:var(--font-body);font-size:12.5px;font-weight:600;
  cursor:pointer;
}

/* Age bar — slightly taller, softer, cleaner active outline */
.rt #p-stock .age-bar-wrap{margin-bottom:12px;}
.rt #p-stock .age-bar{
  height:10px;border-radius:var(--r-s);
  background:var(--surface2);border:1px solid var(--border);
  overflow:hidden;
}
.rt #p-stock .age-bar-seg{opacity:0.9;transition:opacity var(--dur-fast) var(--ease-out);}
.rt #p-stock .age-bar-seg:hover{opacity:1;}
.rt #p-stock .age-bar-seg.active{
  opacity:1;box-shadow:inset 0 0 0 1.5px var(--surface);
}

/* Stock-group header — quiet ledger-style divider (mirrors .ledger-month-label) */
.rt #p-stock .stock-group{margin-bottom:16px;border-radius:0;}
.rt #p-stock .stock-group .stock-group-header{
  background:transparent!important;border:none!important;
  border-bottom:1px solid var(--border)!important;border-radius:0!important;
  padding:6px 4px 9px!important;
  transition:background var(--dur-fast) var(--ease-out);
}
.rt #p-stock .stock-group .stock-group-header:hover{
  background:transparent!important;
}
.rt #p-stock .stock-group.collapsed .stock-group-header{
  border-bottom-color:transparent!important;
}
.rt #p-stock .stock-group .stock-group-body{
  border:1px solid var(--border);border-top:none;
  border-radius:0 0 var(--r-m) var(--r-m);overflow:hidden;
  margin-top:0;
}
/* Header meta typography */
.rt #p-stock .stock-group-header span[style*="text-transform:uppercase"]{
  font-family:var(--font-display);font-size:11px!important;
  letter-spacing:0.08em!important;color:var(--text-primary)!important;
}
.rt #p-stock .stock-group-toggle{color:var(--text-tertiary)!important;}

/* List toolbar — align with V2 minimal chrome */
.rt #p-stock .list-toolbar{margin-bottom:10px;gap:8px;padding:0 2px;}
.rt #p-stock .select-toggle{
  padding:7px 12px;border-radius:var(--r-s);
  border:1px solid var(--border);background:var(--surface-2);
  color:var(--text-secondary);
  font-family:var(--font-body);font-size:12.5px;font-weight:600;
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.rt #p-stock .select-toggle:hover{color:var(--text);border-color:var(--border-strong);}

/* Bulk-action chips — matching pill height */
.rt #p-stock .list-toolbar .bulk-ctrl{
  height:34px;border-radius:var(--r-s);
  border:1px solid var(--border);background:var(--surface-2);
}

/* "By month" toggle in page header — amber-dim active (never amber-fill) */
.rt #p-stock .page-header .btn.active,
.rt #p-stock .page-header .btn-secondary.active{
  background:var(--accent-dim)!important;
  color:var(--accent)!important;
  border-color:rgba(212,136,10,0.4)!important;
  box-shadow:none!important;
}

/* Empty state — surface card treatment (matches other V2 pages) */
.rt #p-stock .empty-state,
.rt #p-monthly .empty-state{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-m);padding:36px 22px;text-align:center;
  box-shadow:0 1px 2px var(--shadow);margin-top:4px;
}
.rt #p-stock .empty-state-text,
.rt #p-monthly .empty-state-text{
  font-family:var(--font-display);font-size:15px;font-weight:700;
  color:var(--text-primary);margin-bottom:6px;letter-spacing:-0.01em;
}
.rt #p-stock .empty-state-sub,
.rt #p-monthly .empty-state-sub{font-size:13px;color:var(--muted);line-height:1.4;}

/* Mobile filter dropdown ("All (10)" pill) — match V2 picker family visual.
   Custom button so it doesn't inherit .sort-select styling; we apply the same
   surface-2 navy fill, border-strong hover, and amber focus ring here. */
.rt #p-stock .filter-pill-dd-btn,
.rt #p-monthly .filter-pill-dd-btn{
  height:34px;padding:0 12px;border-radius:var(--r-s);
  font-size:12.5px;font-weight:600;
  background:var(--surface-2);color:var(--text-primary);
  border:1px solid var(--border);
  transition:border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
.rt #p-stock .filter-pill-dd-btn:hover,
.rt #p-monthly .filter-pill-dd-btn:hover{border-color:var(--border-strong);}
.rt #p-stock .filter-pill-dd.open .filter-pill-dd-btn,
.rt #p-monthly .filter-pill-dd.open .filter-pill-dd-btn{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(242,179,61,0.22);
}
.rt #p-stock .filter-pill-dd-btn .fpdd-chev,
.rt #p-monthly .filter-pill-dd-btn .fpdd-chev{color:var(--text-tertiary);}
.rt #p-stock .filter-pill-dd-menu,
.rt #p-monthly .filter-pill-dd-menu{
  background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--r-s);
}

/* ─────────  COMPACT LIST TREATMENT (list-scoped)  ───────────────────────────
   Legacy CSS at ~line 1325 turns every .item-row into a floating gradient card
   with 18px radius, 10px margin-bottom, and 0 10px 24px shadow. That + bumped
   15/17/13px typography = ~100px per row, only 6 items visible on desktop.

   Reseller workflow wants density — this block converts list rows into a
   proper compact list inside a shared .item-table container. Target ~60px
   per row → ~13 items visible on desktop full-screen (2× the density).

   v2.10.0: extended from #p-stock to also cover #p-monthly (Sales History).
   Stale/stock-group selectors remain stock-only (not present in monthly). */

/* Container: reinstate .item-table as a proper joined-rows card frame */
.rt #p-stock .item-table,
.rt #p-monthly .item-table{
  background:var(--surface-1)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--r-m)!important;
  box-shadow:0 1px 2px var(--shadow)!important;
  overflow:hidden;
  padding:0;margin:0;
}

/* Rows: strip the floating-card treatment, use joined-row surface */
.rt #p-stock .item-row,
.rt #p-monthly .item-row{
  background:transparent!important;
  border:none;
  border-bottom:1px solid var(--border);
  border-radius:0!important;
  box-shadow:none!important;
  padding:10px 16px;
  margin:0!important;
  transition:background var(--dur-fast) var(--ease-out);
}
.rt #p-stock .item-row:last-child,
.rt #p-monthly .item-row:last-child{border-bottom:none!important;}
.rt #p-stock .item-row:hover,
.rt #p-monthly .item-row:hover{
  background:var(--surface-2)!important;
  transform:none!important;
}
.rt #p-stock .item-row:active,
.rt #p-monthly .item-row:active{
  background:var(--surface-3)!important;
  transform:none!important;
}

/* Selected: kill legacy huge shadow, use clean amber strip */
.rt #p-stock .item-row.selected,
.rt #p-monthly .item-row.selected{
  background:var(--accent-dim)!important;
  border-left:3px solid var(--accent)!important;
  padding-left:13px!important;
  box-shadow:none!important;
}

/* Stale: subtle amber wash */
.rt #p-stock .item-row.stale{
  background:color-mix(in srgb,var(--accent) 3%,transparent)!important;
}
.rt #p-stock .item-row.stale:hover{
  background:color-mix(in srgb,var(--accent) 7%,var(--surface-2))!important;
}

/* Typography: reset to compact base sizes (undo legacy 15/17/13 bumps) */
.rt #p-stock .item-row .item-row-name,
.rt #p-monthly .item-row .item-row-name{
  font-size:14px;font-weight:600;line-height:1.3;
}
.rt #p-stock .item-row .item-row-meta,
.rt #p-monthly .item-row .item-row-meta{
  font-size:11.5px;margin-top:2px;line-height:1.35;
}
.rt #p-stock .item-row .item-row-price,
.rt #p-monthly .item-row .item-row-price{
  font-size:14px;font-weight:700;
}
.rt #p-stock .item-row .item-row-profit,
.rt #p-monthly .item-row .item-row-profit{
  font-size:12px;font-weight:600;
}
.rt #p-stock .item-row .item-row-roi,
.rt #p-monthly .item-row .item-row-roi{
  font-size:10.5px;color:var(--text-tertiary);
}

/* Right column: tighter stack */
.rt #p-stock .item-row .item-row-right,
.rt #p-monthly .item-row .item-row-right{gap:1px;}

/* ── Sales History KPI cards — V2 flat treatment (v2.10.1) ───────────────────
   Replaces legacy .kcard b/g/r colour-accent cards (off-brand rainbow top
   borders) with the same flat .card kpi structure the dashboard uses. Single-
   occupancy amber: only the Realised P&L value carries the brand tint. Grid is
   4-across on desktop (reclaims vertical space vs the old 2x2), collapsing to
   2x2 on tablet/mobile. */
.rt #p-monthly .sales-kpis-v2{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px;
}
.rt #p-monthly .sales-kpis-v2 .kpi{min-height:0;padding:16px 18px;gap:4px;}
.rt #p-monthly .sales-kpis-v2 .kpi-label{
  font-size:11px;line-height:14px;letter-spacing:0.03em;font-weight:500;
  color:var(--text-secondary);text-transform:uppercase;
}
.rt #p-monthly .sales-kpis-v2 .kpi-value{
  font-size:30px;line-height:34px;font-weight:700;letter-spacing:-0.025em;
  color:var(--text-primary);margin-top:3px;
  font-variant-numeric:tabular-nums lining-nums;
}
.rt #p-monthly .sales-kpis-v2 .kpi-realised .kpi-value{color:var(--brand);}
.rt #p-monthly .sales-kpis-v2 .kpi-foot{font-size:12px;color:var(--text-tertiary)!important;margin-top:6px;}
.rt #p-monthly .sales-kpis-v2 .kpi:not(.kpi-realised) .kpi-value{color:var(--text-primary)!important;}
.rt #p-monthly .sales-kpis-v2 .kpi-realised .kpi-value{color:var(--brand)!important;}
.rt #p-monthly .sales-kpis-v2 .revenue-breakdown{color:var(--text-tertiary)!important;}
@media(max-width:980px){
  .rt #p-monthly .sales-kpis-v2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .rt #p-monthly .sales-kpis-v2 .kpi-value{font-size:26px;line-height:30px;}
}
@media(max-width:520px){
  .rt #p-monthly .sales-kpis-v2{gap:10px;}
  .rt #p-monthly .sales-kpis-v2 .kpi{padding:14px 14px;}
  .rt #p-monthly .sales-kpis-v2 .kpi-value{font-size:22px;line-height:26px;}
}
/* Ultra-wide: cap Sales History content so list rows keep a readable line
   length instead of stretching to the global 1600px page width. */
@media(min-width:1400px){
  .rt #p-monthly.page{max-width:1400px;}
}

/* ── Runs KPI cards — V2 flat treatment (v2.11.0) ───────────────────────────
   Active Run + Runs list KPI cards move off legacy .kcard (b/g/r decorative
   top-border accents) onto the flat .card kpi surface. Semantic green/red is
   kept but carried on the VALUE (P&L signal), not a coloured border. Amber
   stays brand-only (the "View run" affordance). Responsive mirrors the old
   grids: 3-up desktop; <=600px 2-up active (last odd spans) / 1-up list. */
.rt #p-runs .runs-kpis-v2{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:18px;
}
.rt #p-runs .runs-kpis-v2 .kpi{min-height:0;padding:16px 18px;gap:4px;}
.rt #p-runs .runs-kpis-v2 .kpi.clickable{
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
@media(hover:hover){.rt #p-runs .runs-kpis-v2 .kpi.clickable:hover{border-color:var(--border-strong);transform:translateY(-1px);}}
.rt #p-runs .runs-kpis-v2 .kpi.clickable:active{transform:scale(0.99);}
.rt #p-runs .runs-kpis-v2 .kpi-label{
  font-size:11px;line-height:14px;letter-spacing:0.03em;font-weight:500;
  color:var(--text-secondary);text-transform:uppercase;
}
.rt #p-runs .runs-kpis-v2 .kpi-value{
  font-size:28px;line-height:32px;font-weight:700;letter-spacing:-0.025em;
  color:var(--text-primary);margin-top:3px;
  font-variant-numeric:tabular-nums lining-nums;
}
.rt #p-runs .runs-kpis-v2 .kpi-foot{font-size:12px;color:var(--text-tertiary);margin-top:6px;}
.rt #p-runs .runs-kpis-v2 .kpi-viewlink{font-size:11px;font-weight:600;color:var(--brand);white-space:nowrap;}
@media(max-width:600px){
  .rt #p-runs .runs-kpis-v2{grid-template-columns:1fr 1fr;gap:12px;}
  .rt #p-runs .runs-kpis-v2>.kpi:last-child:nth-child(odd){grid-column:span 2;}
  .rt #p-runs .runs-kpis-v2 .kpi-value{font-size:24px;line-height:28px;}
  .rt #p-runs .runs-kpis-v2.runs-kpis-stack{grid-template-columns:1fr;}
  .rt #p-runs .runs-kpis-v2.runs-kpis-stack>.kpi:last-child:nth-child(odd){grid-column:auto;}
}

/* ── Runs page rows — V2 finish (v2.11.1) ───────────────────────────────────
   Run-list rows + active-run item rows were ALREADY flat/joined (not floating
   cards), so this is a polish pass — V2 tokens + Stock-matched hover/selected,
   NOT a layout rebuild. The active-run row keeps its inline estimate-entry
   input. Month-group container overrides are scoped to #p-runs so Costs & Trips
   (which shares .exp-month-group) is left untouched. Amber strip uses inset
   box-shadow (not border-left) to avoid a layout shift on these flex rows. */
.rt #p-runs .exp-month-group{background:var(--surface-1);border-color:var(--border);border-radius:var(--r-m);}
.rt #p-runs .exp-month-header{background:var(--surface-2);}
.rt #p-runs .exp-month-header:hover{background:color-mix(in srgb,var(--border) 40%,var(--surface-2) 60%);}
.rt #p-runs .run-history-row{border-top-color:var(--border);}
@media(hover:hover){.rt #p-runs .run-history-row:hover{background:var(--surface-2);}}
.rt #p-runs .run-history-row:active{background:var(--surface-3);}
.rt #p-runs .ar-item-row{transition:background var(--dur-fast) var(--ease-out);}
@media(hover:hover){.rt #p-runs .ar-item-row:hover{background:var(--surface-2);}}
.rt #p-runs .ar-item-row.selected{background:var(--accent-dim)!important;box-shadow:inset 3px 0 0 var(--accent);}

/* ── Accounts detail hero — V2 flat KPI cards (v2.11.2) ──────────────────────
   Last legacy .kcard block in the app. Flat .card kpi surface; semantic value
   colours kept (green/red on Your share, --warn on Unsettled) per the same
   principle used on Runs — flatten the card, keep the value signal. 4-up
   desktop → 2-up tablet/mobile. */
.rt .accounts-kpis-v2{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px;
}
.rt .accounts-kpis-v2 .kpi{min-height:0;padding:16px 18px;gap:4px;}
.rt .accounts-kpis-v2 .kpi-label{
  font-size:11px;line-height:14px;letter-spacing:0.03em;font-weight:500;
  color:var(--text-secondary);text-transform:uppercase;
}
.rt .accounts-kpis-v2 .kpi-value{
  font-size:26px;line-height:30px;font-weight:700;letter-spacing:-0.025em;
  color:var(--text-primary);margin-top:3px;
  font-variant-numeric:tabular-nums lining-nums;
}
.rt .accounts-kpis-v2 .kpi-foot{font-size:12px;color:var(--text-tertiary);margin-top:6px;min-width:0;overflow-wrap:anywhere;}
.rt .accounts-kpis-v2 .kpi{min-width:0;overflow:hidden;}
.rt .accounts-kpis-v2 .kpi-value{max-width:100%;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:980px){
  .rt .accounts-kpis-v2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  .rt .accounts-kpis-v2 .kpi-value{font-size:24px;line-height:28px;}
}
@media(max-width:520px){
  .rt .accounts-kpis-v2{gap:10px;}
  .rt .accounts-kpis-v2 .kpi{padding:14px;}
  .rt .accounts-kpis-v2 .kpi-value{font-size:22px;line-height:26px;}
}
@media(max-width:390px){
  .rt .accounts-kpis-v2{gap:8px;}
  .rt .accounts-kpis-v2 .kpi{padding:12px;}
  .rt .accounts-kpis-v2 .kpi-label{font-size:10px;line-height:13px;}
  .rt .accounts-kpis-v2 .kpi-value{font-size:20px;line-height:24px;}
  .rt .accounts-kpis-v2 .kpi-foot{font-size:11px;line-height:15px;}
}


/* ── Account detail groups — collapsible operational sections (Launch Audit v1.2) ── */
.rt .account-group{padding:0!important;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);transition:grid-template-rows 190ms var(--ease-out);}
.rt .account-group.collapsed{grid-template-rows:auto minmax(0,0fr);}
.rt .account-group-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 18px;border:0;background:transparent;color:var(--text);
  cursor:pointer;text-align:left;font-family:var(--font-body);-webkit-tap-highlight-color:transparent;
}
.rt .account-group-head:hover{background:var(--surface2);}
.rt .account-group-title{font-size:13px;font-weight:700;letter-spacing:-0.01em;}
.rt .account-group-meta{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.rt .account-group-count{min-width:24px;height:22px;padding:0 7px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface2);border:1px solid var(--border);color:var(--text-secondary);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;}
.rt .account-group-chevron{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-tertiary);transition:transform .18s ease;}
.rt .account-group.collapsed .account-group-chevron{transform:rotate(-90deg);}
.rt .account-group-body{min-height:0;overflow:hidden;padding:0 18px 16px;border-top:1px solid var(--border);opacity:1;transition:opacity 130ms ease,padding-bottom 190ms var(--ease-out),border-color 150ms ease;}
.rt .account-group-body>.metric-inline:first-child{padding-top:12px;}
.rt .account-group.collapsed .account-group-body{opacity:0;pointer-events:none;padding-bottom:0;border-top-color:transparent;}
@media (prefers-reduced-motion:reduce){.rt .account-group{transition:none!important}.rt .account-group-body{transition:none!important;}}
@media(max-width:520px){.rt .account-group-head{padding:13px 14px}.rt .account-group-body{padding:0 14px 14px}}

/* Group body: rounded bottom on container, flat rows inside */
.rt #p-stock .stock-group .stock-group-body.item-table{
  border-radius:0 0 var(--r-m) var(--r-m)!important;
  border-top:none!important;
}

/* Below 708px the mobile grid-split kicks in via existing @media rule — keep
   the new pill heights consistent when both dropdowns share the row */
@media(max-width:708px){
  .rt #p-stock .stock-filter-row .sort-select,
  .rt #p-stock .stock-filter-row .filter-pill-dd-btn{
    height:38px!important;min-height:38px!important;
    padding:0 32px 0 14px!important;font-size:13px!important;
    border-radius:var(--r-s)!important;
  }
  .rt #p-stock .stock-filter-row .filter-pill-dd-btn{padding:0 14px!important;}
}

/* ============================================================================
   ──────────────  V2 PROOF — BOTTOM NAV + CENTERED FAB (mobile)  ──────────────
   Restructures the mobile tab bar to: Home · Calendar · [FAB notch] · Stock ·
   More. The FAB is re-homed from the bottom-right corner into the centre slot
   as a raised circular action button. FAB open/close/build JS is unchanged —
   only the dial's anchor + open direction move (corner→centre, up-from-centre).
   Desktop (>600px) keeps the floating corner FAB untouched.
   ============================================================================ */
@media(max-width:600px){
  /* Bottom nav sits on the same navy as the page (--surface-0) so the chrome
     feels like part of the canvas, not a separate panel. A single hairline
     border-top is the only separation; the heavy multi-layer shadow + the
     backdrop-blur were V1 holdovers — both removed now that the nav is opaque
     and surface-matched. The FAB's box-shadow ring (below) also uses
     --surface-0 so its punch-out blends with the new nav. */
  #bottom-nav{
    height:calc(64px + env(safe-area-inset-bottom,0px));
    background:var(--surface-0);
    border-top:1px solid var(--border);
    box-shadow:none;
  }
  [data-theme="dark"] #bottom-nav{
    background:var(--surface-0);
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  /* Tab labels a touch tighter + clearer active state */
  .rt .bnt{font-size:10.5px;font-weight:600;gap:3px;color:var(--text-tertiary);}
  .rt .bnt.on{color:var(--brand);}
  .rt .bnt.on svg{transform:scale(1.12);}

  /* ── Centre FAB slot ──
     Flex-column with the FAB label pinned to the bottom so the text sits on
     the same baseline as the other tab labels (Home / Sales / Stock / More).
     The label is purely visual — accessibility lives on .fab-main's aria-label.
     Active-run state swaps "ADD" → "ADD TO RUN" via the body.rt-run-active
     class set by _refreshNav. */
  .bnt-fab-slot{
    flex:1 1 0;min-width:0;height:100%;
    pointer-events:none;
    display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
    padding-bottom:12px;
  }
  /* Label hidden — the FAB button is the visual anchor for this slot. When the
     label swapped to "ADD TO RUN" during an active run, the wider text bled
     beyond the 60px FAB circle on both sides, making it look like broken
     chrome. Run state is already communicated by (a) the Runs tab dot,
     (b) the dashboard active-run banner. Keep the .fab-slot-label spans in
     markup for accessibility but visually suppress them. */
  .bnt-fab-slot .fab-slot-label{
    display:none;
  }

  /* ── Horizontal speed-dial: FAB nested in the bar; tapping it reveals a row
     of labelled option buttons in the band directly above the nav. No CSS trig
     (which didn't render) — pure flexbox, so it's robust. Search FAB hides on
     open to free the row. ── */
  .fab-dial{
    left:50%!important;right:auto!important;
    bottom:calc(64px + env(safe-area-inset-bottom,0px) - 48px)!important;
    transform:translateX(-50%);
    display:block!important;            /* override desktop flex-column */
    width:60px;height:60px;
    z-index:330;
    transition:bottom 0.22s cubic-bezier(0.34,1.38,0.64,1),opacity 0.18s ease,transform 0.18s ease;
  }
  /* Full-width row sitting just above the nav */
  #fab-dial-options{
    position:fixed;left:0;right:0;
    flex-direction:row!important;          /* override base column */
    bottom:calc(64px + env(safe-area-inset-bottom,0px) + 12px);
    display:flex;justify-content:center;align-items:flex-end;
    gap:12px;padding:0 14px;z-index:331;
    pointer-events:none;
  }
  .fab-dial.open #fab-dial-options{pointer-events:auto;}
  .fab-dial-item{
    position:static;display:flex;flex-direction:column;align-items:center;gap:6px;
    margin:0;flex:0 0 auto;
    opacity:0;transform:translateY(14px) scale(0.85);
    transition:opacity 0.18s ease,transform 0.26s cubic-bezier(0.34,1.5,0.64,1);
    transition-delay:calc(var(--i,0) * 0.03s);
    pointer-events:auto;
  }
  .fab-dial.open .fab-dial-item{opacity:1;transform:translateY(0) scale(1);animation:none!important;}
  .fab-dial-btn{
    width:48px;height:48px;
    box-shadow:0 4px 14px rgba(0,0,0,0.28);
  }
  [data-theme="dark"] .fab-dial-btn{box-shadow:0 4px 14px rgba(0,0,0,0.5);}
  .fab-dial-item .fab-dial-label{
    display:block;position:static;
    font-size:10px;font-weight:600;line-height:1.1;text-align:center;
    color:var(--text-secondary);background:none;border:none;padding:0;box-shadow:none;
    max-width:60px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  /* FAB main — bigger, nested, amber, ringed so it reads above the bar.
     Box-shadow's 5px solid ring uses --surface-0 (same as the new nav + page),
     so the FAB sits cleanly on a continuous navy surface — the ring still
     gives the FAB a subtle "lifted" punch-out from the surrounding pulse
     ring while never bleeding a foreign colour onto the surface. */
  .fab-main{
    position:relative;z-index:2;
    width:60px;height:60px;font-size:27px;
    background:var(--brand);color:#1a1205;
    box-shadow:0 5px 16px rgba(0,0,0,0.3),0 0 0 5px var(--surface-0);
  }
  [data-theme="dark"] .fab-main{box-shadow:0 5px 16px rgba(0,0,0,0.5),0 0 0 5px var(--surface-0);}
  .fab-main:hover{background:var(--brand);}
  /* Active-run pulse ring — V2 brand green (--profit, #5BC470) ring positioned
     just outside the surface-1 "punch-out" box-shadow ring. Border stays at
     full token-colour; opacity is driven entirely by the keyframe (peak 0.75
     → 0), so the visual softness lives in the animation, not in a hardcoded
     rgba. Sits idle (opacity 0) and only animates when body.rt-run-active is
     set by _refreshNav. Pseudo-element keeps the FAB's own transform untouched
     so hover-scale + click-feedback still work. */
  .rt .fab-main::after{
    content:'';
    position:absolute;
    top:50%;left:50%;
    width:76px;height:76px;
    margin-top:-38px;margin-left:-38px;
    border-radius:50%;
    border:2px solid var(--profit);
    box-sizing:border-box;
    opacity:0;
    pointer-events:none;
  }
  .rt-run-active .rt .fab-main::after,
  body.rt-run-active .fab-main::after{
    animation:fabRunPulse 1.6s cubic-bezier(0.32,0.66,0.4,1) infinite;
  }
  @keyframes fabRunPulse{
    0%   {transform:scale(0.92);opacity:0.75;}
    80%  {transform:scale(1.42);opacity:0;}
    100% {transform:scale(1.42);opacity:0;}
  }

  /* Hide the search FAB while the dial is open — frees the row */
  body:has(.fab-dial.open) #search-fab{
    opacity:0;transform:translateY(8px) scale(0.8);pointer-events:none;
  }

  /* ── Hide FAB + search WITH the nav on scroll-down ── */
  body:has(#bottom-nav.nav-hidden) .fab-dial{
    transform:translateX(-50%) translateY(150%);
    opacity:0;pointer-events:none;
  }
  body:has(#bottom-nav.nav-hidden) #search-fab{
    transform:translateY(150%);opacity:0;pointer-events:none;
  }
  #search-fab{transition:transform 0.22s cubic-bezier(0.34,1.38,0.64,1),opacity 0.18s ease,bottom 0.22s ease;}
}

/* ============================================================================
   ──────────────  V2 — MOBILE TOP BAR (Drop 2, ≤600px)  ───────────────────────
   Position-fixed header carrying the brand mark + search trigger. Sits on
   --surface-0 to match the bottom nav (same canvas-continuous chrome treatment
   established in Drop 1). Hidden ≥601px where the existing desktop top bar
   (Drop 3) takes over.

   Active-state contract:
     • The existing toggleNavSearch() JS toggles #search-fab.active. We mirror
       that state onto .mtb-search via :has() — zero JS changes needed, and
       the existing search state-machine continues to drive both controls.
     • The floating #search-fab is hidden at this breakpoint (the top bar
       carries the trigger now). All JS references to #search-fab still work
       — the element is in the DOM, just visually hidden.

   Tunables (CSS custom props on :root for in-place adjustment):
     --m-top-bar-h    — bar height excluding safe-area  (default 56px)
     --m-top-bar-pad  — horizontal padding              (default 16px)
   ============================================================================ */
@media(max-width:600px){
  :root{
    --m-top-bar-h:56px;
    --m-top-bar-pad:16px;
  }
  #mobile-top-bar{
    position:fixed;top:0;left:0;right:0;
    z-index:200;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    height:calc(var(--m-top-bar-h) + env(safe-area-inset-top,0px));
    padding:env(safe-area-inset-top,0px) var(--m-top-bar-pad) 0;
    background:var(--surface-0);
    border-bottom:1px solid var(--border);
    box-shadow:none;
  }
  /* Page content sits below the top bar — mirror of the body.rt padding-bottom
     pattern that accommodates the bottom nav. */
  body.rt{padding-top:calc(var(--m-top-bar-h) + env(safe-area-inset-top,0px))!important;}

  /* Brand mark — R-shield + RETRADE wordmark */
  .mtb-brand{
    display:inline-flex;align-items:center;gap:9px;
    background:transparent;border:none;padding:6px 4px;margin-left:-4px;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    font-family:var(--font-body);color:var(--text-primary);
    transition:opacity var(--dur-fast,150ms) var(--ease-out,ease-out);
  }
  .mtb-brand:active{opacity:0.7;}
  .mtb-brand-mark{display:inline-flex;flex:none;line-height:0;}
  .mtb-brand-word{
    font-size:17px;font-weight:900;line-height:1;letter-spacing:-0.01em;
    color:var(--text-primary);text-transform:uppercase;
    transform:skewX(-10.7deg);display:inline-block;
  }

  /* Search button — ghost styling, V2 tokens, mirrors #search-fab.active state */
  .mtb-search{
    width:44px;height:44px;flex:none;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:12px;
    color:var(--text-secondary);
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:transform 0.15s var(--ease-out,ease-out),
               border-color var(--dur-fast,150ms) var(--ease-out,ease-out),
               color var(--dur-fast,150ms) var(--ease-out,ease-out),
               background var(--dur-fast,150ms) var(--ease-out,ease-out);
  }
  .mtb-search:active{transform:scale(0.93);}
  /* Active state — driven by #search-fab.active via :has() so existing search
     toggle JS continues to work without modification. */
  body:has(#search-fab.active) .mtb-search,
  .mtb-search.active{
    color:var(--brand);
    border-color:var(--brand);
    background:rgba(242,179,61,0.10);
  }

  /* Floating #search-fab is redundant once the top bar carries the trigger.
     Override the existing display:flex!important from line ~1594. */
  #search-fab{display:none!important;}
}

/* Hide the mobile top bar at ≥601px — desktop top bar takes over (Drop 3). */
@media(min-width:601px){
  #mobile-top-bar{display:none!important;}
}

/* ============================================================================
   ──────────────  V2 — DESKTOP TOP BAR (Drop 3, ≥601px)  ──────────────────────
   Chrome reskin of the existing #nav top bar. Same markup structure (brand,
   search, tabs, more dropdown, user menu) and same JS handlers — V2 tokens
   + V2 active-state pattern throughout. Sits on --surface-0 like the bottom
   nav (Drop 1) and mobile top bar (Drop 2), continuing the canvas-continuous
   chrome treatment with no shadows or backdrop-blur.

   Scope: flat overrides applying at all widths ≥601px (where #nav becomes
   visible via handleNavResize). Drop 4 will add a single rule hiding this
   bar at ≥1000px when the sidebar takes over.

   Active-state pattern (locked across Drop 3 + Drop 4):
     • Tabs / nav items: soft fill (--surface-2) + text-primary + 600 weight
     • Amber is NOT used for active-tab indication — reserved for actions,
       toggles, focus rings, and brand marks (R-shield, user avatar).
       Two-tier hierarchy: amber = "action / toggle / highlight",
       surface-2 fill = "current location".
     • Hover: surface-1 fill + text-primary.

   Tunables (CSS custom props on :root, in-place adjustable):
     --d-top-bar-h    — bar height                   (default 64px)
     --d-top-bar-pad  — horizontal padding           (default 24px)
   ============================================================================ */
@media(min-width:601px){
  :root{
    --d-top-bar-h:64px;
    --d-top-bar-pad:24px;
  }

  /* ── Shell — solid surface-0, single hairline, no blur, no shadow ── */
  .rt nav#nav{
    background:var(--surface-0);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-bottom:1px solid var(--border);
    box-shadow:none;
  }
  .rt #nav .nav-inner{
    height:var(--d-top-bar-h);
    max-width:1280px;
    padding:0 var(--d-top-bar-pad);
    gap:16px;
    align-items:center;
  }

  /* ── Brand — R-shield + RETRADE wordmark (matches Drop 2 mobile) ── */
  .rt #nav .brand{
    gap:10px;
    padding:0!important;
    margin:0 12px 0 0!important;
    background:transparent;
    transition:opacity var(--dur-fast) var(--ease-out);
  }
  .rt #nav .brand::after{display:none!important;}  /* kill legacy divider */
  .rt #nav .brand:hover{opacity:0.85;}
  .rt #nav .brand-mark-v2{display:inline-flex;flex:none;line-height:0;}
  .rt #nav .brand-mark-v2 svg{display:block!important;}  /* beats .brand svg{display:none} */
  .rt #nav .brand-word-v2{
    font-family:var(--font-body);
    font-size:17px;font-weight:900;line-height:1;
    letter-spacing:-0.01em;text-transform:uppercase;
    color:var(--text-primary);
    transform:skewX(-10.7deg);display:inline-block;
  }

  /* Search — V2 picker family treatment. Width is fluid up to 280px so the
     search can shrink instead of crowd the tabs at narrower tablet widths
     (Drop 3.2 tweak). Previously fixed 280 caused visual overlap around
     800-950px viewport where brand + search + tabs + user got tight. */
  .rt #nav .search-wrap{width:100%!important;max-width:280px!important;min-width:0!important;}

  /* Focus-expand (Drop 3.3 tweak) — when the search input is focused, the
     tabs column collapses so the search area grows to fill the middle of
     the nav-inner. Tabs animate out (fade + slide right + clip); search
     expands its max-width to fill. Reverses on blur. `:has()` gates the
     effect to the actual input focus, so navigating with keyboard from
     brand → tabs → user-menu doesn't spuriously trigger it. */
  .rt #nav .tabs-row{
    transition:opacity 0.18s var(--ease-out),transform 0.22s var(--ease-out);
  }
  .rt #nav .search-wrap,
  .rt #nav .search-wrap input{
    transition:max-width 0.22s var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
  }
  .rt #nav .nav-inner:has(.search-wrap input:focus){
    grid-template-columns:auto 1fr 0 auto!important;
  }
  .rt #nav .nav-inner:has(.search-wrap input:focus) .tabs-row{
    opacity:0;
    transform:translateX(24px);
    pointer-events:none;
    overflow:hidden;
  }
  .rt #nav .nav-inner:has(.search-wrap input:focus) .search-wrap{
    max-width:none!important;
  }
  .rt #nav .search-wrap input{
    background:var(--surface-2);
    border:1px solid var(--border);
    color:var(--text-primary);
    font-family:var(--font-body);
    font-weight:500;
    height:40px;
    border-radius:12px;
    padding:0 32px 0 38px;
    transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
  }
  .rt #nav .search-wrap input::placeholder{color:var(--text-tertiary);}
  .rt #nav .search-wrap input:hover{border-color:var(--border-strong);}
  .rt #nav .search-wrap input:focus{
    outline:none;
    border-color:var(--brand);
    box-shadow:0 0 0 2px rgba(242,179,61,0.22);
    background:var(--surface-2);
  }
  .rt #nav .search-icon{color:var(--text-tertiary);left:13px;}
  .rt #nav .search-wrap input:-webkit-autofill,
  .rt #nav .search-wrap input:-webkit-autofill:hover,
  .rt #nav .search-wrap input:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--text-primary);
    box-shadow:0 0 0 1000px var(--surface-2) inset;
    transition:background-color 99999s ease-out 0s;
  }

  /* ── Tabs — icon-only + amber active state (Drop 3.1 tweak) ──
     Filled-pill worked vertically on the Drop 4 sidebar, but on a horizontal
     top bar the pill on one tab reads as "stuck button" among the unfilled
     others. Amber icon color for the active tab is the cleaner affordance
     for horizontal nav (matches Vercel / Linear / Stripe patterns) and
     stops fighting the surrounding tabs visually. Labels hidden — icons
     + tooltips are enough for known-vocabulary nav (Home/Calendar/Stock/
     Runs) and prevents the mild overflow Oskar noticed at the 601–999
     band this bar serves. Sidebar keeps filled pills — different treatment
     per orientation, by design. */
  .rt #nav .tab::after,
  .rt #nav .tab.on::after{display:none!important;}
  .rt #nav .tab > span:not(.tab-ic),
  .rt #nav .tab .tab-label{display:none;}
  .rt #nav .tabs{gap:2px;align-items:center;}
  .rt #nav .tab{
    height:40px;
    padding:0 10px;
    min-width:40px;
    border-radius:10px;
    font-family:var(--font-body);
    font-size:13px;
    font-weight:500;
    color:var(--text-secondary);
    background:transparent;
    box-shadow:none;
    justify-content:center;
    transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
  }
  .rt #nav .tab .tab-ic{opacity:0.85;transition:opacity var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);}
  .rt #nav .tab:hover{
    color:var(--text-primary);
    background:var(--surface-1);
  }
  .rt #nav .tab:hover .tab-ic{opacity:1;}
  .rt #nav .tab.on{
    color:var(--brand);
    font-weight:600;
    background:transparent;
  }
  .rt #nav .tab.on .tab-ic{opacity:1;color:var(--brand);}
  /* Active + hover: keep amber (don't fall back to text-primary) */
  .rt #nav .tab.on:hover{background:var(--surface-1);color:var(--brand);}
  .rt #nav .tab.on:hover .tab-ic{color:var(--brand);}

  /* More button — same treatment; label already hidden by base .nav-more-btn CSS */
  .rt #nav .nav-more-btn{
    height:40px;
    padding:0 10px;
    min-width:40px;
    border-radius:10px;
    font-family:var(--font-body);
    font-size:13px;
    font-weight:500;
    color:var(--text-secondary);
    background:transparent;
    box-shadow:none;
    gap:0;
    justify-content:center;
    transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
  }
  .rt #nav .nav-more-btn .tab-ic{opacity:0.85;transition:opacity var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);}
  .rt #nav .nav-more-btn:hover{
    color:var(--text-primary);
    background:var(--surface-1);
  }
  .rt #nav .nav-more-btn:hover .tab-ic{opacity:1;}
  .rt #nav .nav-more-btn.on{
    color:var(--brand);
    font-weight:600;
    background:transparent;
  }
  .rt #nav .nav-more-btn.on .tab-ic{opacity:1;color:var(--brand);}

  /* ── More dropdown — mono icons (matches mobile More sheet) ── */
  .rt #nav .nav-more-menu{
    background:var(--surface-1);
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:0 12px 40px rgba(0,0,0,0.35);
    padding:6px;
    min-width:220px;
    top:calc(100% + 6px);
  }
  .rt #nav .nav-more-menu button{
    display:flex;align-items:center;gap:12px;
    width:100%;padding:10px 12px;
    background:transparent;border:none;
    border-radius:10px;cursor:pointer;
    font-family:var(--font-body);
    font-size:13px;font-weight:500;
    color:var(--text-secondary);
    text-align:left;
    transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
  }
  .rt #nav .nav-more-menu button > svg{
    flex:none;
    width:18px;height:18px;
    color:var(--text-tertiary);
    opacity:1;
    transition:color var(--dur-fast) var(--ease-out);
  }
  .rt #nav .nav-more-menu button:hover{
    background:var(--surface-2);
    color:var(--text-primary);
  }
  .rt #nav .nav-more-menu button:hover > svg{color:var(--text-primary);}
  .rt #nav .nav-more-menu button.on{
    color:var(--text-primary);
    background:var(--surface-2);
    font-weight:600;
  }
  .rt #nav .nav-more-menu button.on > svg{color:var(--text-primary);}

  /* ── User menu button — V2 token swap, solid amber avatar ── */
  .rt #nav .user-menu-btn{
    height:40px;
    border-radius:12px;
    padding:5px 12px 5px 5px;
    background:var(--surface-2);
    border:1px solid var(--border);
    color:var(--text-secondary);
    font-family:var(--font-body);
    font-weight:500;
    transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
  }
  .rt #nav .user-menu-btn:hover{
    border-color:var(--border-strong);
    color:var(--text-primary);
    background:var(--surface-2);
  }
  .rt #nav .user-avatar{
    width:28px;height:28px;
    border-radius:50%;
    background:var(--brand);
    color:#1a1205;
    font-size:12px;
    font-weight:800;
    flex:none;
    display:flex;align-items:center;justify-content:center;
  }

  /* ── User menu dropdown ── */
  .rt #nav .user-menu-dropdown{
    background:var(--surface-1);
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:0 12px 40px rgba(0,0,0,0.35);
    padding:6px;
    min-width:240px;
    top:calc(100% + 6px);
  }
  .rt #nav .user-menu-item{
    padding:10px 12px;
    border-radius:10px;
    color:var(--text-secondary);
    font-family:var(--font-body);
    font-size:13px;
    font-weight:500;
    transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
  }
  .rt #nav .user-menu-item:hover{
    background:var(--surface-2);
    color:var(--text-primary);
  }
  .rt #nav .user-menu-item > svg{color:var(--text-tertiary);transition:color var(--dur-fast) var(--ease-out);}
  .rt #nav .user-menu-item:hover > svg{color:var(--text-primary);}
  .rt #nav .user-menu-divider{background:var(--border);margin:4px 8px;}

  /* Sync indicator — calmer typography */
  .rt #nav #sync-indicator{color:var(--text-tertiary);font-size:12px;}
}
/* ============================================================================
   ──────────  END V2 DESKTOP TOP BAR (Drop 3) ─────────────────────────────────
   ============================================================================ */

/* ============================================================================
   ──────────────  V2 — DESKTOP SIDEBAR (Drop 4, ≥1000px)  ────────────────────
   Layout rearchitecture. At ≥1000px viewports, the top bar (#nav) is hidden
   and a fixed left sidebar (#side-nav) takes over. Body gets margin-left so
   content flows to the right of the sidebar. Bottom nav + mobile top bar are
   already hidden here by their own ≤600 gates.

   Structure (top → bottom inside <aside id="side-nav">):
     • Brand         — R-shield + RETRADE wordmark (same SVG as Drops 2 + 3)
     • Search        — V2 picker family treatment, calls same handleSearch
     • Primary items — Dashboard · Stock Room · Runs · Costs & Trips · Sales History
     • Divider
     • Secondary     — Tax Return · Accounts · Data
     • Spacer        — flex-grow pushes footer down
     • Footer        — sync indicator (persistent green dot + "Synced")
                       + user row (avatar + name + gear → settings popup)

   Active-state contract (matches Drop 3):
     • Fill: var(--surface-2)  •  Text: var(--text-primary)  •  Weight: 600
     • Amber reserved for: R-shield, user avatar, focus rings, run dot, badge
     • Hover: surface-1 fill + text-primary

   Tunables:
     --sidebar-w   — sidebar width          (default 240px)
     --sidebar-pad — inner horizontal pad   (default 14px)
   ============================================================================ */
@media(min-width:1000px){
  :root{
    --sidebar-w:240px;
    --sidebar-pad:14px;
  }

  /* Hide the tablet top bar; nudge body content to the right of the sidebar */
  .rt nav#nav{display:none!important;}
  body.rt{margin-left:var(--sidebar-w);}

  /* Shell — fixed, full-height, canvas-continuous chrome */
  .rt #side-nav{
    position:fixed;left:0;top:0;bottom:0;
    width:var(--sidebar-w);
    display:flex;flex-direction:column;
    background:var(--surface-0);
    border-right:1px solid var(--border);
    z-index:60;
    box-shadow:none;
    font-family:var(--font-body);
  }

  /* ── Brand row ── */
  .rt #side-nav .side-nav-brand{
    display:flex;align-items:center;gap:10px;
    padding:18px var(--sidebar-pad) 14px;
    cursor:pointer;
    flex:none;
    background:transparent;border:none;
    transition:opacity var(--dur-fast) var(--ease-out);
  }
  .rt #side-nav .side-nav-brand:hover{opacity:0.85;}
  .rt #side-nav .side-nav-brand-mark{display:inline-flex;flex:none;line-height:0;}
  .rt #side-nav .side-nav-brand-mark svg{display:block;}
  .rt #side-nav .side-nav-brand-word{
    font-family:var(--font-body);
    font-size:17px;font-weight:900;line-height:1;
    letter-spacing:-0.01em;text-transform:uppercase;
    color:var(--text-primary);
    transform:skewX(-10.7deg);display:inline-block;
  }

  /* ── Search ── */
  .rt #side-nav .side-nav-search{
    position:relative;
    padding:4px var(--sidebar-pad) 12px;
    flex:none;
  }
  .rt #side-nav .side-nav-search-icon{
    position:absolute;
    left:calc(var(--sidebar-pad) + 12px);
    top:50%;transform:translateY(-50%);
    color:var(--text-tertiary);
    pointer-events:none;line-height:0;
    margin-top:-4px;  /* compensate for padding-bottom asymmetry */
  }
  .rt #side-nav .side-nav-search input{
    width:100%;
    height:38px;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:10px;
    color:var(--text-primary);
    font-family:var(--font-body);
    font-size:13px;font-weight:500;
    padding:0 12px 0 36px;
    outline:none;
    transition:border-color var(--dur-fast) var(--ease-out),
               box-shadow var(--dur-fast) var(--ease-out);
  }
  .rt #side-nav .side-nav-search input::placeholder{color:var(--text-tertiary);}
  .rt #side-nav .side-nav-search input:hover{border-color:var(--border-strong);}
  .rt #side-nav .side-nav-search input:focus{
    border-color:var(--brand);
    box-shadow:0 0 0 2px rgba(242,179,61,0.22);
    background:var(--surface-2);
  }

  /* ── Items region (scrollable middle) ── */
  .rt #side-nav .side-nav-items{
    flex:1 1 auto;
    display:flex;flex-direction:column;gap:2px;
    padding:4px var(--sidebar-pad) 12px;
    overflow-y:auto;overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:var(--border-strong) transparent;
    position:relative;z-index:1;   /* keep below .side-nav-footer's upward popup (v2.11.3) */
  }
  .rt #side-nav .side-nav-items::-webkit-scrollbar{width:6px;}
  .rt #side-nav .side-nav-items::-webkit-scrollbar-track{background:transparent;}
  .rt #side-nav .side-nav-items::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px;}

  .rt #side-nav .side-nav-item{
    display:flex;align-items:center;gap:12px;
    width:100%;
    padding:0 12px;
    height:40px;
    border:none;
    background:transparent;
    border-radius:10px;
    cursor:pointer;
    text-align:left;
    color:var(--text-secondary);
    font-family:var(--font-body);
    font-size:13px;font-weight:500;
    position:relative;
    transition:background var(--dur-fast) var(--ease-out),
               color var(--dur-fast) var(--ease-out);
  }
  .rt #side-nav .side-nav-item-ic{
    display:inline-flex;align-items:center;justify-content:center;
    flex:none;
    width:18px;height:18px;
    color:var(--text-tertiary);
    opacity:1;
    transition:color var(--dur-fast) var(--ease-out);
  }
  .rt #side-nav .side-nav-item-ic svg{display:block;width:100%;height:100%;}
  .rt #side-nav .side-nav-item-label{
    flex:1;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .rt #side-nav .side-nav-item:hover{
    background:var(--surface-1);
    color:var(--text-primary);
  }
  .rt #side-nav .side-nav-item:hover .side-nav-item-ic{color:var(--text-primary);}
  .rt #side-nav .side-nav-item.on{
    background:var(--surface-2);
    color:var(--text-primary);
    font-weight:600;
  }
  .rt #side-nav .side-nav-item.on .side-nav-item-ic{color:var(--text-primary);}

  /* Stock count badge */
  .rt #side-nav .side-nav-item-badge{
    flex:none;
    min-width:20px;height:20px;padding:0 6px;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--surface-2);
    color:var(--text-secondary);
    border:1px solid var(--border);
    border-radius:10px;
    font-size:11px;font-weight:700;
    font-variant-numeric:tabular-nums;
    line-height:1;
  }
  .rt #side-nav .side-nav-item.on .side-nav-item-badge{
    background:var(--surface-0);
    color:var(--text-primary);
    border-color:var(--border-strong);
  }

  /* Green dot for active sourcing run (appended by _refreshNav) */
  .rt #side-nav .side-nav-run-dot{
    flex:none;
    width:8px;height:8px;
    border-radius:50%;
    background:var(--profit);
    box-shadow:0 0 0 3px rgba(64,163,102,0.16);
    margin-left:auto;
  }
  /* When the badge is present (Stock Room), align it right; run dot is separate button anyway */

  /* Divider between primary + secondary groups */
  .rt #side-nav .side-nav-divider{
    height:1px;
    border:none;
    background:var(--border);
    margin:8px 4px;
  }

  /* ── Footer (sync + user row) ── */
  .rt #side-nav .side-nav-footer{
    flex:none;
    padding:10px var(--sidebar-pad) 14px;
    border-top:1px solid var(--border);
    display:flex;flex-direction:column;gap:8px;
    position:relative;
    z-index:20;              /* footer (+ its upward settings popup) always paints above .side-nav-items (v2.11.3) */
  }
  .rt #side-nav .side-nav-sync{
    display:flex;align-items:center;gap:8px;
    padding:2px 4px;
    color:var(--text-tertiary);
    font-family:var(--font-body);
    font-size:11px;font-weight:600;
    letter-spacing:0.04em;text-transform:uppercase;
  }
  .rt #side-nav .side-nav-sync-dot{
    width:8px;height:8px;
    border-radius:50%;
    background:var(--profit);
    box-shadow:0 0 0 2px rgba(64,163,102,0.20);
    flex:none;
    transition:background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
  }
  .rt #side-nav .side-nav-sync.saving .side-nav-sync-dot{
    background:var(--brand);
    box-shadow:0 0 0 2px rgba(242,179,61,0.24);
    animation:sideSyncPulse 1.2s ease-in-out infinite;
  }
  .rt #side-nav .side-nav-sync.error .side-nav-sync-dot{
    background:var(--state-returned,#dc5b5b);
    box-shadow:0 0 0 2px rgba(220,91,91,0.24);
    animation:none;
  }
  .rt #side-nav .side-nav-sync.pending .side-nav-sync-dot{
    background:var(--brand);
    box-shadow:0 0 0 2px rgba(242,179,61,0.20);
    animation:none;
  }
  /* v1.01 — mobile has no sidebar/top nav, so cloud state lives in one tiny
     corner badge instead of repetitive toasts. Hidden entirely when healthy. */
  #mobile-sync-badge{display:none;position:fixed;left:12px;bottom:calc(62px + env(safe-area-inset-bottom,0px) + 10px);z-index:315;width:30px;height:30px;min-width:30px;min-height:30px;max-width:30px;max-height:30px;overflow:hidden;border-radius:50%;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);box-shadow:0 2px 10px var(--shadow);color:var(--text-secondary);pointer-events:none;opacity:.92;}
  #mobile-sync-badge svg{width:15px;height:15px;}
  #mobile-sync-badge.saving{display:flex;color:var(--accent);}
  #mobile-sync-badge.saving svg{animation:sideSyncSpin .9s linear infinite;}
  #mobile-sync-badge.pending{display:flex;color:var(--accent);}
  #mobile-sync-badge.error{display:flex;color:var(--red);}
  @keyframes sideSyncSpin{to{transform:rotate(360deg);}}
  @media(min-width:601px){#mobile-sync-badge{display:none!important;}}
  @keyframes sideSyncPulse{
    0%,100%{opacity:1;}
    50%{opacity:0.5;}
  }

  /* User row (avatar + name + gear) */
  .rt #side-nav .side-user-menu{position:relative;}
  .rt #side-nav .side-nav-user{
    display:flex;align-items:center;gap:10px;
    width:100%;
    padding:8px 10px 8px 6px;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:12px;
    cursor:pointer;
    color:var(--text-secondary);
    font-family:var(--font-body);
    font-size:13px;font-weight:500;
    text-align:left;
    transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
  }
  .rt #side-nav .side-nav-user:hover,
  .rt #side-nav .side-user-menu.open .side-nav-user{
    border-color:var(--border-strong);
    color:var(--text-primary);
  }
  .rt #side-nav .side-nav-user-avatar{
    width:28px;height:28px;
    border-radius:50%;
    background:var(--brand);
    color:#1a1205;
    font-size:12px;font-weight:800;
    display:flex;align-items:center;justify-content:center;
    flex:none;
  }
  .rt #side-nav .side-nav-user-name{
    flex:1;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    color:var(--text-primary);
  }
  .rt #side-nav .side-nav-user-gear{
    color:var(--text-tertiary);
    line-height:0;
    flex:none;
    transition:color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
  }
  .rt #side-nav .side-nav-user:hover .side-nav-user-gear,
  .rt #side-nav .side-user-menu.open .side-nav-user-gear{
    color:var(--text-primary);
    transform:rotate(30deg);
  }

  /* Settings popup — pops UP from the user button (Drop 4.1 tweak).
     Previously popped side-right, which felt detached from the sidebar
     and forced the country panel to swap out the whole menu when opened.
     Popping upward keeps it visually anchored to the sidebar column and
     lets the country picker expand inline as an accordion (below). */
  .rt #side-nav .side-nav-settings{
    position:absolute;
    left:0;right:0;
    bottom:calc(100% + 10px);
    background:var(--surface-1);
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:0 -8px 28px rgba(0,0,0,0.42),0 0 0 1px rgba(0,0,0,0.02);
    padding:6px;
    display:none;
    z-index:80;
    max-height:calc(100vh - 100px);
    overflow-y:auto;
    scrollbar-width:thin;
  }
  .rt #side-nav .side-user-menu.open .side-nav-settings{display:block;}
  .rt #side-nav .side-nav-settings-section-hdr{
    font-family:var(--font-body);
    font-size:10px;font-weight:800;
    color:var(--text-tertiary);
    text-transform:uppercase;
    letter-spacing:0.12em;
    padding:8px 10px 4px;
  }
  .rt #side-nav .side-nav-settings-row{
    display:flex;align-items:center;gap:10px;
    width:100%;
    padding:9px 10px;
    background:transparent;border:none;
    border-radius:10px;
    cursor:pointer;
    color:var(--text-secondary);
    font-family:var(--font-body);
    font-size:13px;font-weight:500;
    text-align:left;
    transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
  }
  .rt #side-nav .side-nav-settings-row > svg{
    flex:none;width:16px;height:16px;
    color:var(--text-tertiary);
    transition:color var(--dur-fast) var(--ease-out);
  }
  .rt #side-nav .side-nav-settings-row:hover{
    background:var(--surface-2);
    color:var(--text-primary);
  }
  .rt #side-nav .side-nav-settings-row:hover > svg{color:var(--text-primary);}
  .rt #side-nav .side-nav-settings-row.danger{color:var(--state-returned,#dc5b5b);}
  .rt #side-nav .side-nav-settings-row.danger:hover{background:rgba(220,91,91,0.08);color:var(--state-returned,#dc5b5b);}
  .rt #side-nav .side-nav-settings-row.danger > svg{color:var(--state-returned,#dc5b5b);}
  .rt #side-nav .side-nav-settings-divider{height:1px;background:var(--border);margin:4px 8px;border:none;}

  /* Settings — country trigger row shows a mini flag */
  .rt #side-nav .side-nav-settings-row .side-country-flag{
    display:inline-flex;flex:none;
    border-radius:50%;overflow:hidden;
    box-shadow:0 0 0 1px var(--border);
    line-height:0;
  }
  .rt #side-nav .side-nav-settings-row .side-country-label{flex:1;}

  /* Theme segmented control (inline) */
  .rt #side-nav .side-nav-settings-theme{
    padding:6px 10px 8px;
  }
  .rt #side-nav .side-nav-settings-theme-lbl{
    font-family:var(--font-body);
    font-size:12px;font-weight:500;
    color:var(--text-secondary);
    margin-bottom:6px;
  }
  .rt #side-nav .side-nav-settings-theme .theme-pref-segmented{
    display:flex;gap:2px;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:9px;
    padding:2px;
    width:100%;
  }
  .rt #side-nav .side-nav-settings-theme .theme-pref-segmented button{
    flex:1;
    height:28px;
    background:transparent;border:none;
    border-radius:7px;
    color:var(--text-secondary);
    font-family:var(--font-body);
    font-size:12px;font-weight:500;
    cursor:pointer;
    transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
  }
  .rt #side-nav .side-nav-settings-theme .theme-pref-segmented button:hover{
    color:var(--text-primary);
  }
  .rt #side-nav .side-nav-settings-theme .theme-pref-segmented button.is-active,
  .rt #side-nav .side-nav-settings-theme .theme-pref-segmented button[aria-pressed="true"]{
    background:var(--surface-1);
    color:var(--text-primary);
  }

  /* Country picker — inline accordion (Drop 4.1 tweak).
     Previously the country panel replaced the main menu on open (via a
     content-swap), which made the rest of the settings disappear and the
     popup change size — Oskar's "size change and other parts disappear"
     feedback. Inline accordion keeps everything visible: the country list
     expands directly under the trigger row. The chevron rotates to indicate
     open state. Selecting a country closes only the accordion, not the
     whole popup. */
  .rt #side-nav .side-country-panel-list{
    display:none;
    padding:2px 0 6px;
    margin:0 6px 4px 26px;  /* indent to align with trigger label, past the flag */
    max-height:200px;
    overflow-y:auto;
    scrollbar-width:thin;
    border-left:2px solid var(--border);
  }
  .rt #side-nav .side-user-menu.country-open #side-user-menu-country-sub{display:block;}
  /* v2.19.27 — the platform accordion. Same list styling (the element carries
     .side-country-panel-list), only the open state differs. */
  .rt #side-nav .side-user-menu.platform-open #side-user-menu-platform-sub{display:block;}
  /* Chevron on trigger row rotates when open */
  .rt #side-nav #side-user-menu-country-trigger .side-country-chev,
  .rt #side-nav #side-user-menu-platform-trigger .side-country-chev{
    display:inline-flex;flex:none;line-height:0;
    transition:transform var(--dur-fast) var(--ease-out);
    color:var(--text-tertiary);
  }
  .rt #side-nav .side-user-menu.country-open #side-user-menu-country-trigger .side-country-chev,
  .rt #side-nav .side-user-menu.platform-open #side-user-menu-platform-trigger .side-country-chev{
    transform:rotate(90deg);
  }
  .rt #side-nav .side-country-panel-list .user-menu-country-item{
    padding:6px 10px 6px 4px;font-size:12px;
    color:var(--text-secondary);
    background:transparent;border:none;
    display:flex;align-items:center;gap:8px;
    width:100%;text-align:left;
    border-radius:6px;
    cursor:pointer;
    transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
  }
  .rt #side-nav .side-country-panel-list .user-menu-country-item:hover:not(:disabled){
    background:var(--surface-2);color:var(--text-primary);
  }
  .rt #side-nav .side-country-panel-list .user-menu-country-item.active{color:var(--text-primary);}
  .rt #side-nav .side-country-panel-list .user-menu-country-item.coming-soon{opacity:0.5;cursor:not-allowed;}
  .rt #side-nav .side-country-panel-list .user-menu-country-item .cf{
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 1px var(--border);border-radius:50%;overflow:hidden;
    flex:none;
  }
  .rt #side-nav .side-country-panel-list .user-menu-country-item .cl{flex:1;}
  .rt #side-nav .side-country-panel-list .user-menu-country-item .cc{color:var(--brand);flex-shrink:0;}
  .rt #side-nav .side-country-panel-list .user-menu-country-item .cs-tag{
    font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;
    color:var(--text-tertiary);background:var(--surface-2);
    padding:2px 5px;border-radius:5px;
  }
}
/* ============================================================================
   ──────────  END V2 DESKTOP SIDEBAR (Drop 4) ─────────────────────────────────
   ============================================================================ */

/* Landscape override: keep centred FAB consistent on short screens too */
@media(max-width:900px) and (orientation:landscape) and (max-height:500px){
  .fab-dial{left:50%!important;right:auto!important;transform:translateX(-50%);display:block!important;
    bottom:calc(62px + env(safe-area-inset-bottom,0px) - 46px)!important;}
}

/* Dashboard responsive spacing rhythm
   Keeps the dashboard sections visually even from phone through narrow desktop. */
@media(max-width:600px){
  body.rt{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))!important;}
  .rt #p-summary.page{padding:18px 16px calc(104px + env(safe-area-inset-bottom,0px))!important;}
  .rt #p-summary .summary-header{margin:2px 0 18px!important;gap:12px!important;align-items:center!important;}
  .rt #p-summary .summary-title{font-size:24px!important;line-height:1.05!important;}
  .rt #p-summary .summary-period-sel{height:38px!important;min-width:136px!important;border-radius:14px!important;}
  .rt #p-summary .summary-grid-v3{display:grid!important;grid-template-columns:1fr!important;gap:16px!important;align-items:stretch!important;}
  .rt #p-summary .summary-grid-v3 > *{margin:0!important;}
  .rt #p-summary .summary-sourcing-cta,
  .rt #p-summary .summary-hero-card,
  .rt #p-summary .summary-mobile-twoup,
  .rt #p-summary .summary-categories,
  .rt #p-summary .summary-inventory,
  .rt #p-summary .summary-snapshot,
  .rt #p-summary .summary-velocity,
  .rt #p-summary .summary-topflips{width:100%!important;grid-column:1 / -1!important;}
  .rt #p-summary .summary-panel{padding:16px!important;border-radius:18px!important;}
  .rt #p-summary .summary-sourcing-cta{padding:14px 16px!important;border-radius:18px!important;min-height:66px!important;}
  .rt #p-summary .summary-mobile-twoup{gap:12px!important;}
  .rt #p-summary .summary-mobile-twoup .kpi{padding:14px!important;border-radius:18px!important;}
  .rt #p-summary .summary-hero-card{border-radius:20px!important;overflow:hidden!important;}
  .rt #p-summary .summary-hero-card .summary-hero-top{padding:18px 16px 8px!important;gap:12px!important;}
  .rt #p-summary .summary-hero-card .summary-hero-value{margin-top:4px!important;margin-bottom:0!important;}
  .rt #p-summary .summary-hero-card .kpi-foot{margin-top:6px!important;}
  .rt #p-summary .summary-hero-card .summary-hero-chart{padding:0 12px 16px!important;}
  .rt #p-summary .summary-hero-card .summary-chart-legend{margin:2px 0 8px!important;}
  .rt #p-summary .summary-hero-card #summary-chart-svg-mobile{height:200px!important;}
  .rt #p-summary .sl{margin:0!important;line-height:1.2!important;}
  .rt #p-summary .summary-cat-head,
  .rt #p-summary .snap-strip-head{margin:0 0 12px!important;align-items:center!important;}
  .rt #p-summary .summary-categories .cat-donut-wrap{margin-top:2px!important;gap:14px!important;align-items:center!important;}
  .rt #p-summary .cat-donut-legend{gap:10px!important;}
  .rt #p-summary .summary-inventory .inv-band-grid{gap:16px!important;}
  .rt #p-summary .summary-inventory .inv-metrics{gap:10px!important;padding-bottom:16px!important;}
  .rt #p-summary .summary-inventory .inv-age-title{margin-bottom:10px!important;}
  .rt #p-summary .summary-inventory .age-legend{margin-top:12px!important;gap:8px!important;justify-content:space-between!important;}
  .rt #p-summary .summary-inventory .age-legend-btn{flex:1 1 0!important;justify-content:center!important;padding:6px 5px!important;}
  .rt #p-summary .summary-snapshot-strip .snap-stat{padding:14px 0!important;}
  .rt #p-summary .summary-snapshot-strip .snap-stat:first-child{padding-top:6px!important;}
  .rt #p-summary .metric-inline{padding:14px 0!important;gap:12px!important;}
  .rt #p-summary .metric-inline:first-child{padding-top:0!important;}
  .rt #p-summary .metric-inline:last-child{padding-bottom:0!important;}
  .rt #p-summary .vel-cat-wrap{margin-top:16px!important;}
  .rt #p-summary .category-mini-grid{gap:9px!important;}
  .rt #p-summary .category-mini-row{padding:11px 12px!important;}
  .rt #bottom-nav{height:calc(64px + env(safe-area-inset-bottom,0px))!important;}
}

@media(max-width:380px){
  .rt #p-summary.page{padding-left:14px!important;padding-right:14px!important;}
  .rt #p-summary .summary-period-sel{min-width:124px!important;}
  .rt #p-summary .summary-hero-card .summary-hero-value{font-size:36px!important;line-height:40px!important;}
  .rt #p-summary .summary-inventory .age-legend{gap:6px!important;}
  .rt #p-summary .summary-inventory .age-legend-btn{font-size:10px!important;padding:6px 4px!important;}
}

@media(min-width:601px) and (max-width:1280px){
  .rt #p-summary.page{padding-left:20px!important;padding-right:20px!important;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;}
  .rt #p-summary .summary-header{margin:4px 0 18px!important;gap:14px!important;align-items:center!important;}
  .rt #p-summary .summary-grid-v3{gap:18px!important;align-items:stretch!important;}
  .rt #p-summary .summary-grid-v3 > *,
  .rt #p-summary .summary-chart-card,
  .rt #p-summary .summary-categories,
  .rt #p-summary .summary-snapshot,
  .rt #p-summary .summary-inventory,
  .rt #p-summary .summary-velocity,
  .rt #p-summary .summary-topflips,
  .rt #p-summary .summary-kpis-v3{margin:0!important;}
  .rt #p-summary .summary-panel{padding:20px!important;border-radius:18px!important;}
  .rt #p-summary .summary-cat-head,
  .rt #p-summary .snap-strip-head{margin:0 0 14px!important;align-items:center!important;}
  .rt #p-summary .summary-inventory .inv-band-grid{gap:18px!important;}
  .rt #p-summary .summary-inventory .inv-metrics{gap:12px!important;}
  .rt #p-summary .summary-inventory .inv-stat{padding:14px 16px!important;}
  .rt #p-summary .summary-inventory .inv-age-title{margin-bottom:10px!important;}
  .rt #p-summary .summary-inventory .age-legend{margin-top:12px!important;gap:8px!important;}
  .rt #p-summary .summary-snapshot-strip .snap-stat{padding:14px 16px!important;}
  .rt #p-summary .metric-inline{padding:14px 0!important;gap:12px!important;}
  .rt #p-summary .metric-inline:first-child{padding-top:2px!important;}
  .rt #p-summary .metric-inline:last-child{padding-bottom:2px!important;}
  .rt #p-summary .vel-cat-wrap{margin-top:16px!important;}
  .rt #p-summary .category-mini-grid{gap:10px!important;}
  .rt #p-summary .category-mini-row{padding:12px 14px!important;}
}

@media(min-width:601px) and (max-width:799px){
  .rt #p-summary.page{padding-left:18px!important;padding-right:18px!important;}
  .rt #p-summary .summary-grid-v3{grid-template-columns:1fr!important;gap:18px!important;}
  .rt #p-summary .summary-kpis-v3,
  .rt #p-summary .summary-chart-card,
  .rt #p-summary .summary-categories,
  .rt #p-summary .summary-snapshot,
  .rt #p-summary .summary-inventory,
  .rt #p-summary .summary-velocity,
  .rt #p-summary .summary-topflips{grid-column:1 / -1!important;grid-row:auto!important;width:100%!important;}
  .rt #p-summary .summary-kpis-v3{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;}
  .rt #p-summary .summary-panel{padding:18px!important;}
  .rt #p-summary .summary-inventory .inv-band-grid{grid-template-columns:1fr!important;}
  .rt #p-summary .summary-inventory .inv-age{padding-left:0!important;border-left:none!important;padding-top:16px!important;border-top:1px solid var(--border)!important;}
  .rt #p-summary .summary-velocity .category-mini-grid{grid-template-columns:1fr!important;}
}

@media(min-width:800px) and (max-width:1279px){
  .rt #p-summary .summary-grid-v3,
  .rt #p-summary .summary-kpis-v3{gap:18px!important;}
  .rt #p-summary .summary-panel{padding:20px!important;}
  .rt #p-summary .summary-categories,
  .rt #p-summary .summary-snapshot,
  .rt #p-summary .summary-velocity,
  .rt #p-summary .summary-topflips{min-height:100%;}
  .rt #p-summary .summary-snapshot-strip .snap-stat{padding:14px 0!important;}
  .rt #p-summary .summary-snapshot-strip .snap-stat:first-child{padding-top:6px!important;}
  .rt #p-summary .summary-snapshot-strip .snap-stat:last-child{padding-bottom:2px!important;}
}

@media(min-width:1000px) and (max-width:1280px){
  .rt #p-summary.page{max-width:1180px!important;padding-left:22px!important;padding-right:22px!important;}
  .rt #p-summary .summary-grid-v3,
  .rt #p-summary .summary-kpis-v3{gap:20px!important;}
  .rt #p-summary .summary-panel{padding:22px!important;}
  .rt #p-summary .summary-inventory .inv-band-grid{grid-template-columns:1.55fr 1fr!important;gap:22px!important;}
  .rt #p-summary .summary-chart-card #summary-chart-svg{min-height:220px!important;max-height:300px!important;}
}

/* Wide-monitor page max-width (Drop 4.2 tweak).
   Default 1280 max leaves ~200px dead space on each side at 1920 viewport
   (after the 240 sidebar). Bumping to 1600 at ≥1400 gives content breathing
   room without becoming absurd — 1920 laptops fill nearly full width, 2560
   monitors keep symmetric ~360px margins. Affects all pages, not just
   Dashboard; individual card layouts scale up gracefully within the wider
   container. */
@media(min-width:1400px){
  .rt .page{max-width:1600px;}
}


/* v1.4.21 — old visual skeleton language, current production geometry. */
.rt-real-layout-loading .rt-data-loading,
.rt-real-layout-loading .rt-data-loading *{
  color:transparent!important;
  text-shadow:none!important;
}
.rt-real-layout-loading .rt-data-loading svg,
.rt-real-layout-loading .rt-data-loading img{opacity:0!important;}

.rt-real-layout-loading .rt-label-loading{
  position:relative!important;
  color:transparent!important;
  text-shadow:none!important;
}
.rt-real-layout-loading .rt-label-loading::after{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  height:.72em;
  border-radius:5px;
  background:linear-gradient(90deg,var(--surface2) 0%,var(--border) 46%,var(--surface2) 100%);
  background-size:240% 100%;
  animation:rt-data-shimmer 1.28s ease-in-out infinite;
  pointer-events:none;
}
.rt-real-layout-loading .page-title.rt-label-loading::after,
.rt-real-layout-loading .summary-title.rt-label-loading::after{width:min(180px,75%);height:.82em;}
.rt-real-layout-loading .page-subtitle.rt-label-loading::after,
.rt-real-layout-loading .summary-subtitle.rt-label-loading::after{width:min(280px,82%);height:.68em;}
.rt-real-layout-loading .kpi-label.rt-label-loading::after{width:62%;}
.rt-real-layout-loading .sl.rt-label-loading::after{width:min(118px,70%);}
.rt-real-layout-loading .inv-age-title.rt-label-loading::after{width:78px;}

/* Charts keep their true card dimensions but all seeded detail recedes behind shimmer. */
.rt-real-layout-loading .rt-chart-loading > *{opacity:.07!important;}
.rt-real-layout-loading .summary-categories .cat-donut-wrap.rt-chart-loading{
  min-height:150px;
  border-radius:var(--r-m);
}

/* Top Flips keeps its real header/card; only its dynamic body becomes old-style rows. */
.rt-real-layout-loading .rt-panel-list-loading{
  position:relative;
  overflow:hidden;
  min-height:220px;
}
.rt-real-layout-loading .rt-panel-list-loading > .rt-loading-panel-overlay{
  top:48px;
  left:16px;
  right:16px;
  bottom:12px;
  background:var(--surface);
  border-radius:0;
}
.rt-real-layout-loading .rt-panel-list-loading > .rt-loading-panel-overlay .rt-loading-row{
  min-height:48px;
}

/* Neutralise seeded progress/age colour so it reads as loading, not real data. */
.rt-real-layout-loading .rt-neutral-loading-bar{
  filter:grayscale(1)!important;
  opacity:.28!important;
}
.rt-real-layout-loading .rt-age-loading{
  position:relative;
}
.rt-real-layout-loading .rt-age-loading [style*="background"],
.rt-real-layout-loading .rt-age-loading [class*="bar"],
.rt-real-layout-loading .rt-age-loading [class*="seg"]{
  filter:grayscale(1)!important;
  opacity:.22!important;
}

/* Empty Sales month cards should look intentionally pending, not like empty account data. */
.rt-real-layout-loading .mcard-empty .msub.rt-data-loading{
  display:inline-block!important;
  width:72%;
  min-height:.72em;
  border-radius:5px;
}

@media(max-width:600px){
  .rt-real-layout-loading .page-title.rt-label-loading::after,
  .rt-real-layout-loading .summary-title.rt-label-loading::after{width:min(150px,72%);}
  .rt-real-layout-loading .page-subtitle.rt-label-loading::after,
  .rt-real-layout-loading .summary-subtitle.rt-label-loading::after{width:min(230px,86%);}
  .rt-real-layout-loading .rt-panel-list-loading > .rt-loading-panel-overlay{left:12px;right:12px;}
}
@media(prefers-reduced-motion:reduce){
  .rt-real-layout-loading .rt-label-loading::after{animation:none!important;}
}


/* v1.4.22 — remove the last seeded data colours from the loading presentation. */
.rt-real-layout-loading .age-bar-seg,
.rt-real-layout-loading .age-legend-dot,
.rt-real-layout-loading .legend-dot{
  background:var(--border)!important;
  border-color:var(--border)!important;
  opacity:.62!important;
}
.rt-real-layout-loading #p-summary .summary-hero-card svg{
  opacity:0!important;
}
.rt-real-layout-loading .rt-chart-loading > *{
  opacity:0!important;
}


/* v1.4.23 — dashboard donut real-layout skeleton */
/* The Top Categories card is circular data, so a full rectangular chart shimmer
   reads like a broken/blank panel. Keep the real layout and paint a ring + legend
   placeholders in the exact slots the hydrated content will occupy. */
.rt-real-layout-loading #p-summary .summary-categories .cat-donut-wrap.rt-chart-loading{
  background:transparent!important;overflow:visible!important;
}
.rt-real-layout-loading #p-summary .summary-categories .cat-donut-wrap.rt-chart-loading::after{display:none!important;}
.rt-real-layout-loading #p-summary .summary-categories .cat-donut-wrap.rt-chart-loading>.cat-donut-chart,
.rt-real-layout-loading #p-summary .summary-categories .cat-donut-wrap.rt-chart-loading>.cat-donut-legend{opacity:1!important;}
.rt-real-layout-loading #p-summary .summary-categories .cat-donut-wrap.rt-chart-loading .cat-donut-svg,
.rt-real-layout-loading #p-summary .summary-categories .cat-donut-wrap.rt-chart-loading .cat-donut-legend>*{opacity:0!important;}
.rt-real-layout-loading #p-summary .summary-categories .cat-donut-wrap.rt-chart-loading .cat-donut-chart{
  position:relative;width:132px;height:132px;min-width:132px;
}
.rt-real-layout-loading #p-summary .summary-categories .cat-donut-wrap.rt-chart-loading .cat-donut-chart::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 25deg,
    color-mix(in srgb,var(--border) 52%,transparent) 0 20%,
    color-mix(in srgb,var(--border2) 82%,transparent) 34%,
    color-mix(in srgb,var(--border) 45%,transparent) 52% 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 18px),#000 calc(100% - 17px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 18px),#000 calc(100% - 17px));
  animation:rtDonutSkeletonSpin 1.35s linear infinite;
}
.rt-real-layout-loading #p-summary .summary-categories .cat-donut-wrap.rt-chart-loading .cat-donut-legend{
  position:relative;min-width:min(190px,42vw);min-height:118px;
}
.rt-real-layout-loading #p-summary .summary-categories .cat-donut-wrap.rt-chart-loading .cat-donut-legend::before{
  content:'';position:absolute;inset:4px 0;
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--border) 78%,transparent),color-mix(in srgb,var(--border) 42%,transparent)) 0 0/82% 11px no-repeat,
    linear-gradient(90deg,color-mix(in srgb,var(--border) 72%,transparent),color-mix(in srgb,var(--border) 36%,transparent)) 0 30px/68% 11px no-repeat,
    linear-gradient(90deg,color-mix(in srgb,var(--border) 66%,transparent),color-mix(in srgb,var(--border) 32%,transparent)) 0 60px/76% 11px no-repeat,
    linear-gradient(90deg,color-mix(in srgb,var(--border) 60%,transparent),color-mix(in srgb,var(--border) 28%,transparent)) 0 90px/58% 11px no-repeat;
  border-radius:6px;animation:rtDonutLegendPulse 1.15s ease-in-out infinite alternate;
}
@keyframes rtDonutSkeletonSpin{to{transform:rotate(360deg)}}
@keyframes rtDonutLegendPulse{from{opacity:.55}to{opacity:1}}
@media(max-width:560px){
  .rt-real-layout-loading #p-summary .summary-categories .cat-donut-wrap.rt-chart-loading .cat-donut-chart{width:110px;height:110px;min-width:110px;}
}
@media(prefers-reduced-motion:reduce){
  .rt-real-layout-loading #p-summary .summary-categories .cat-donut-wrap.rt-chart-loading .cat-donut-chart::before,
  .rt-real-layout-loading #p-summary .summary-categories .cat-donut-wrap.rt-chart-loading .cat-donut-legend::before{animation:none!important;}
}


/* v1.4.24 — premium loading reveal + Cashflow management */
@keyframes rtHydratedReveal{
  0%{opacity:.18;filter:blur(.7px);transform:translateY(2px)}
  100%{opacity:1;filter:blur(0);transform:translateY(0)}
}
@keyframes rtHydratedChartReveal{
  0%{opacity:.08;filter:blur(1px);transform:translateY(2px) scale(.998)}
  100%{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}
}
.rt-real-layout-revealing .rt-data-reveal{
  animation:rtHydratedReveal 320ms cubic-bezier(.22,.61,.36,1) both;
}
.rt-real-layout-revealing .rt-chart-reveal{
  animation:rtHydratedChartReveal 360ms cubic-bezier(.22,.61,.36,1) both;
}
.rt-real-layout-revealing .rt-loading-list-overlay,
.rt-real-layout-revealing .rt-loading-panel-overlay{
  position:absolute;z-index:30;inset:0;overflow:hidden;pointer-events:none;background:var(--surface);
}
.rt-real-layout-revealing .rt-loading-overlay-exit{
  opacity:0;transition:opacity 320ms cubic-bezier(.22,.61,.36,1);
}

.cashflow-list-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:24px 0 10px;}
.cashflow-result-count{font-size:11px;color:var(--text-secondary);margin-top:3px;font-variant-numeric:tabular-nums;}
.cashflow-manager{margin:0 0 14px;padding:14px;border:1px solid var(--border);border-radius:var(--r-l,16px);background:color-mix(in srgb,var(--surface) 92%,var(--surface2));box-shadow:0 8px 28px rgba(0,0,0,.045);}
.cashflow-toolbar{display:grid;grid-template-columns:minmax(240px,1.55fr) repeat(3,minmax(132px,.65fr));gap:10px;align-items:end;}
.cashflow-toolbar label{display:flex;flex-direction:column;gap:5px;min-width:0;}
.cashflow-control-label{font-size:10px;font-weight:750;letter-spacing:.045em;text-transform:uppercase;color:var(--text-secondary);}
.cashflow-control{width:100%;height:40px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);color:var(--text);font:inherit;font-size:12px;padding:0 11px;outline:none;transition:border-color 160ms ease,box-shadow 160ms ease,background 160ms ease;}
.cashflow-control:focus{border-color:color-mix(in srgb,var(--brand) 72%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 13%,transparent);background:var(--surface);}
.cashflow-search{-webkit-appearance:none;appearance:none;}
.cashflow-search::-webkit-search-cancel-button{opacity:.6;cursor:pointer;}
.cashflow-manager-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.cashflow-filter-totals{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--text-secondary);font-variant-numeric:tabular-nums;}
.cashflow-filter-totals b{font-size:12px;margin-left:3px;}
.cashflow-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap;}
.cashflow-action-btn{min-height:34px;padding:0 11px;border:1px solid var(--border);border-radius:9px;background:var(--surface2);color:var(--text);font:inherit;font-size:11px;font-weight:750;cursor:pointer;transition:transform 120ms ease,border-color 160ms ease,background 160ms ease;}
.cashflow-action-btn:hover{background:var(--surface3);border-color:var(--border-strong);}
.cashflow-action-btn:active{transform:translateY(1px);}
.cashflow-action-primary{background:color-mix(in srgb,var(--brand) 14%,var(--surface2));border-color:color-mix(in srgb,var(--brand) 38%,var(--border));color:var(--brand);}
.cashflow-ledger-list{content-visibility:auto;contain-intrinsic-size:800px;}
@media(max-width:900px){
  .cashflow-toolbar{grid-template-columns:minmax(220px,1.4fr) repeat(2,minmax(130px,.7fr));}
  .cashflow-toolbar label:last-child{grid-column:auto;}
}
@media(max-width:640px){
  .cashflow-manager{padding:12px;border-radius:14px;}
  .cashflow-toolbar{grid-template-columns:1fr 1fr;gap:9px;}
  .cashflow-search-field{grid-column:1/-1;}
  .cashflow-toolbar label:last-child{grid-column:auto;}
  .cashflow-manager-footer{align-items:stretch;flex-direction:column;}
  .cashflow-filter-totals{justify-content:space-between;gap:8px;}
  .cashflow-actions{justify-content:stretch;}
  .cashflow-action-btn{flex:1;min-width:78px;}
}
@media(max-width:390px){
  .cashflow-toolbar{grid-template-columns:1fr;}
  .cashflow-search-field{grid-column:auto;}
}
@media(prefers-reduced-motion:reduce){
  .rt-real-layout-revealing .rt-data-reveal,.rt-real-layout-revealing .rt-chart-reveal{animation:none!important;}
  .rt-real-layout-revealing .rt-loading-overlay-exit{transition:none!important;opacity:0!important;}
}


/* v1.4.26 — deterministic dashboard motion replay after skeleton reveal */
/* During boot the real chart frame may crossfade in, but its data strokes stay
   parked at 0% until that reveal has completed. This prevents slower phones from
   first seeing the line halfway through its draw animation. */
#p-summary svg.rt-motion-hold .rt-chart-line{
  stroke-dasharray:var(--rt-len)!important;
  stroke-dashoffset:var(--rt-len)!important;
  animation:none!important;
}
#p-summary svg.rt-motion-hold .rt-chart-area,
#p-summary svg.rt-motion-hold .rt-chart-col circle{
  opacity:0!important;
  animation:none!important;
}
#p-summary .cat-donut-svg.rt-motion-hold circle[style*="--seg-len"]{
  stroke-dasharray:0 var(--seg-c)!important;
  animation:none!important;
}
#p-summary .cat-donut-legend.rt-motion-hold{
  opacity:0!important;
  animation:none!important;
}
@media(prefers-reduced-motion:reduce){
  #p-summary svg.rt-motion-hold .rt-chart-line,
  #p-summary .cat-donut-svg.rt-motion-hold circle[style*="--seg-len"]{
    animation:none!important;
  }
}


/* v1.4.27 — interaction responsiveness */
/* Explicit manipulation removes any gesture arbitration delay on app chrome.
   Existing component-specific :active transforms remain the visual language. */
.rt .tab,.rt .nav-more-btn,.rt .side-nav-item,.rt .btn,.rt .chip,
.rt .mcard,.rt .kpi.clickable,.rt .cashflow-action-btn,.rt .clickable{
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
@media(hover:none) and (pointer:coarse){
  .rt .tab:active,.rt .nav-more-btn:active,.rt .side-nav-item:active,
  .rt .btn:active,.rt .cashflow-action-btn:active{opacity:.78;}
}
/* Large local ledgers/lists do not need off-screen rows painted on every filter
   or page refresh. Layout size is reserved so scroll position remains stable. */
.rt #p-stock .item-row,.rt #p-monthly .item-row,.rt .cashflow-ledger-row{
  content-visibility:auto;contain-intrinsic-size:auto 76px;
}


/* v1.4.30 — contextual recall + semantic refund events */
.field-recall{
  display:none;
  margin-top:8px;
  gap:6px;
  flex-wrap:wrap;
}
.field-recall .recall-chip{
  min-height:36px;
  padding:0 12px;
  max-width:100%;
  font-size:12px;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.rt-chart-refund-event{
  pointer-events:none;
  transform-box:fill-box;
  transform-origin:center;
}
@keyframes rtRefundEventIn{
  from{opacity:0;transform:scale(.82)}
  to{opacity:1;transform:scale(1)}
}
svg.rt-chart-draw .rt-chart-refund-event{
  animation:rtRefundEventIn 160ms var(--ease-out) both;
  animation-delay:calc(var(--dur-draw) * .88);
}
@media(prefers-reduced-motion:reduce){
  svg.rt-chart-draw .rt-chart-refund-event{animation:none!important;}
}


/* v1.4.31 — compact recall + financial chart redesign */
.field-recall{
  margin-top:6px;
  gap:4px;
  flex-direction:column;
  flex-wrap:nowrap;
  max-height:132px;
  overflow:auto;
  padding:1px;
}
.field-recall .recall-chip{
  width:100%;
  min-height:34px;
  height:auto;
  padding:7px 9px;
  border-radius:9px;
  justify-content:flex-start;
  gap:9px;
  font-size:12px;
  text-align:left;
  background:var(--surface2);
}
.field-recall-main{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.field-recall-meta{flex:0 1 44%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary);font-size:10.5px;font-weight:500;text-align:right;}
.expense-amount-history{display:none;align-items:center;gap:5px;flex-wrap:wrap;margin-top:7px;}
.expense-history-label{font-size:10.5px;color:var(--text-secondary);font-weight:600;margin-right:2px;}
.expense-amount-chip{height:29px;padding:0 9px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text-secondary);font:600 11px var(--font-body);cursor:pointer;}
.expense-amount-chip:hover,.expense-amount-chip.active{border-color:var(--accent);color:var(--text);background:var(--accent-dim);}
.expense-amount-chip:active{transform:scale(.97);}

.legend-event-mark{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;}
.monthly-legend-refund-line{display:inline-block;width:12px;height:0;border-top:2px solid var(--red);border-radius:999px;opacity:.58;flex:none;}

.rt-chart-primary-bar{transform-box:fill-box;transform-origin:center bottom;}
.rt-chart-primary-bar--negative{transform-origin:center top;}
@keyframes rtChartBarIn{from{transform:scaleY(.04)}to{transform:scaleY(1)}}
svg.rt-chart-draw .rt-chart-primary-bar{
  animation:rtChartBarIn 380ms var(--ease-draw) both;
  animation-delay:calc(var(--bar-i) * 20ms);
}
@keyframes rtRefundEventNotchIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
svg.rt-chart-draw .rt-chart-refund-event{
  animation:rtRefundEventNotchIn 150ms var(--ease-out) both;
  animation-delay:calc(var(--dur-draw) * .84);
}

.rt #p-monthly .monthly-performance-head{align-items:flex-start;}
.rt #p-monthly .monthly-chart-sub{font-size:10.5px;color:var(--text-tertiary);margin-top:3px;line-height:1.35;}
.rt #p-monthly .monthly-legend-bar{display:inline-block;width:10px;height:8px;border-radius:2px;background:var(--state-listed);opacity:.72;flex:none;}
.rt #p-monthly .monthly-legend-line{display:inline-block;width:12px;height:0;border-top:2px solid var(--profit);border-radius:999px;flex:none;}
.rt #p-monthly .monthly-profitability-card .summary-chart-legend{align-items:center;flex-wrap:wrap;row-gap:6px;}

@media(max-width:600px){
  .field-recall{max-height:116px;gap:3px;}
  .field-recall .recall-chip{min-height:32px;padding:6px 8px;border-radius:8px;font-size:11.5px;}
  .field-recall-meta{font-size:10px;max-width:42%;}
  .expense-amount-chip{height:28px;padding:0 8px;}
  .rt #p-monthly .monthly-performance-head{gap:8px;}
  .rt #p-monthly .monthly-profitability-card .summary-chart-legend{gap:10px;font-size:10.5px;}
}
@media(prefers-reduced-motion:reduce){
  svg.rt-chart-draw .rt-chart-primary-bar,
  svg.rt-chart-draw .rt-chart-refund-event{animation:none!important;}
}


/* v1.4.32 — revenue area + sequenced partial-period motion */
@keyframes rtChartPartialDashIn{
  from{opacity:0;transform:translateX(-1px)}
  to{opacity:1;transform:none}
}
svg.rt-chart-draw .rt-chart-partial-dash{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:rtChartPartialDashIn 125ms var(--ease-out) both;
  /* A small pause is the visual hand-off from actual history to "so far". */
  animation-delay:calc(var(--dur-draw) + 85ms + var(--dash-delay,0ms));
}
svg.rt-chart-draw .rt-chart-so-far{
  opacity:0;
  animation:rtChartFadeIn 160ms var(--ease-out) both;
  animation-delay:calc(var(--dur-draw) + 85ms + var(--partial-tail-ms,520ms) - 55ms);
}
svg.rt-chart-draw .rt-chart-col circle.rt-chart-partial-dot{
  animation-delay:calc(var(--dur-draw) + 85ms + var(--partial-tail-ms,520ms) + 20ms)!important;
}
@media(prefers-reduced-motion:reduce){
  svg.rt-chart-draw .rt-chart-partial-dash,
  svg.rt-chart-draw .rt-chart-so-far,
  svg.rt-chart-draw .rt-chart-col circle.rt-chart-partial-dot{
    animation:none!important;
    animation-delay:0ms!important;
    opacity:1!important;
    transform:none!important;
  }
}


/* v1.4.33 — stable Sales route + gross Dashboard + monthly P&L bridge */
.rt #p-monthly .money-flow-card .mf-row.mf-key{padding-top:11px;padding-bottom:11px;}
.rt #p-monthly .money-flow-card .mf-row.mf-key .mf-label,
.rt #p-monthly .money-flow-card .mf-row.mf-key .mf-val{font-weight:700;color:var(--text);}
.rt #p-monthly .money-flow-card .mf-row.mf-net-revenue{border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-top:2px;margin-bottom:2px;}
.rt #p-monthly .money-flow-card .mf-row.mf-deduction .mf-label{color:var(--text-secondary);}
.rt #p-monthly .money-flow-card .mf-row.mf-deduction .mf-fill{opacity:.72;}
.rt #p-monthly .money-flow-card .mf-net{margin-top:6px;padding-top:12px;border-top:1px solid var(--border);}
.rt #p-monthly .money-flow-card .mf-foot{line-height:1.45;}


/* v1.4.34 — profit area + refund dot/line hierarchy */
@keyframes rtRefundDotIn{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}
svg.rt-chart-draw .rt-chart-refund-event{animation:rtRefundDotIn 150ms var(--ease-out) both;animation-delay:calc(var(--dur-draw) * .84);}
.rt-chart-tertiary-line{filter:none;}
@media(prefers-reduced-motion:reduce){svg.rt-chart-draw .rt-chart-refund-event{animation:none!important;}}


/* v1.4.35 — chart legend/value alignment + explicit-view motion re-arm */
.rt .rt-chart-scrub-tip .tip-row{min-width:0;}
.rt .rt-chart-scrub-tip .tip-row strong{min-width:52px;text-align:right;}


/* v1.4.36 — performance audit + deliberate current-period tail */


/* v1.4.37 — Dashboard bars / FY trend trial */
.rt #p-monthly .monthly-legend-line--revenue{border-top-color:var(--state-listed);}
.rt-chart-profit-bar{filter:none;}
svg.rt-chart-draw .rt-chart-profit-bar{animation-delay:calc(var(--bar-i) * 26ms + 90ms);}
@media(prefers-reduced-motion:reduce){svg.rt-chart-draw .rt-chart-profit-bar{animation:none!important;}}