/* NetSuite Backup - app styles (design language of SWCrawler2.0) */
:root {
  --bg:#fafaf9; --ink:#0c0a09; --ink-soft:#292524; --muted:#57534e; --muted-2:#78716c; --faint:#a8a29e;
  --line:#e7e5e4; --line-soft:#f5f5f4; --line-strong:#d6d3d1; --white:#ffffff; --surface-2:#fafaf9;
  --green-fg:#15803d; --red-fg:#b91c1c; --amber-fg:#a16207; --blue-bg:#eaf1fa; --blue-fg:#2366be; --on-ink:#ffffff;
}
:root[data-theme="dark"] {
  --bg:#121212; --ink:#e4e4e4; --ink-soft:#f2f2f2; --muted:rgba(255,255,255,.6); --muted-2:rgba(255,255,255,.5); --faint:rgba(255,255,255,.38);
  --line:rgba(255,255,255,.07); --line-soft:#1c1c1c; --line-strong:rgba(255,255,255,.12); --white:#1e1e1e; --surface-2:#232323;
  --green-fg:#4ade80; --red-fg:#f87171; --amber-fg:#fcd34d; --blue-bg:rgba(86,186,255,.15); --blue-fg:#56baff; --on-ink:#121212;
}
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; display:flex; flex-direction:column; overflow:hidden; background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:13px; line-height:1.4; }
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }
h1,h2 { margin:0; }
.mono { font-family:'JetBrains Mono',ui-monospace,Consolas,monospace; }
.grow { flex:1; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:focus-visible { outline:2px solid var(--blue-fg); outline-offset:2px; border-radius:6px; }

/* ---------- Top bar: brand left, search centered, theme right ---------- */
.top { flex:0 0 56px; display:grid; grid-template-columns:1fr minmax(300px,640px) 1fr; align-items:center; gap:16px;
  padding:0 max(24px, calc((100% - 1440px) / 2 + 24px)); background:var(--white); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; justify-self:start; }
.brand:hover { text-decoration:none; }
.brand-mark { width:30px; height:30px; border-radius:8px; background:var(--ink); color:var(--on-ink); display:flex; align-items:center; justify-content:center; }
.brand-name { font-weight:650; font-size:16px; letter-spacing:-.01em; }
.icon-btn { justify-self:end; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; }
.icon-btn:hover { background:var(--surface-2); border-color:var(--line); color:var(--ink); }

.top-search { width:100%; margin:0; }
.search-box { display:flex; align-items:center; gap:10px; height:38px; padding:0 8px 0 14px; background:var(--white); border:1px solid var(--line-strong); border-radius:999px; box-shadow:0 1px 2px var(--line); transition:border-color .15s, box-shadow .15s; }
.search-box:hover { border-color:var(--faint); }
.search-box:focus-within { border-color:var(--blue-fg); box-shadow:0 0 0 3px var(--blue-bg); }
.search-box svg { width:15px; height:15px; flex:0 0 auto; }
.search-box input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font-family:inherit; font-size:13px; }
.search-box input::placeholder { color:var(--muted-2); }
.kbd { flex:0 0 auto; min-width:20px; text-align:center; padding:0 8px; border:1px solid var(--line-strong); border-radius:999px; background:var(--surface-2); color:var(--muted-2); font-family:'JetBrains Mono',ui-monospace,Consolas,monospace; font-size:11px; line-height:18px; }
.search-box:focus-within .kbd { display:none; }

/* ---------- Page: sidebar card + content, footer below both ---------- */
.page { flex:1 1 0; min-height:0; display:flex; justify-content:center; padding:14px 24px; }
.shell { width:100%; max-width:1392px; min-height:0; display:flex; gap:14px; }
.side { flex:0 0 232px; align-self:flex-start; max-height:100%; overflow:hidden; background:var(--white); border:1px solid var(--line); border-radius:12px; padding:8px; }
.content { flex:1 1 0; min-width:0; min-height:0; display:flex; flex-direction:column; }
.main { flex:1 1 0; min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:14px; }
.foot { flex:0 0 36px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px, calc((100% - 1440px) / 2 + 24px)); background:transparent; border-top:1px solid var(--line); color:var(--muted-2); font-size:11.5px; }

/* ---------- Sidebar ---------- */
.nav { display:flex; flex-direction:column; gap:clamp(0px,.2vh,2px); }
.nav-title { margin:clamp(2px,.8vh,8px) 0 0; padding:clamp(6px,1.2vh,12px) 10px clamp(2px,.5vh,5px); border-top:1px solid var(--line); font-size:11px; font-weight:600; color:var(--muted-2); text-transform:uppercase; letter-spacing:.08em; cursor:default; }
.nav-title:first-child { border-top:0; margin-top:0; padding-top:4px; }
.nav-link { display:flex; align-items:center; gap:10px; padding:clamp(3px,.7vh,7px) 10px; border-radius:7px; font-size:13px; border:1px solid transparent; color:var(--muted); font-weight:500; }
a.nav-link:hover { background:var(--surface-2); text-decoration:none; color:var(--ink); }
.nav-link.is-active { background:var(--surface-2); color:var(--ink); font-weight:600; border-color:var(--line); }
.nav-link.is-soon { color:var(--muted-2); cursor:default; opacity:.8; }
.nav-link .chev { color:var(--muted-2); font-size:14px; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:7px 10px; border:1px solid var(--line); border-radius:7px; background:var(--white); color:var(--muted); font-family:inherit; font-size:12.5px; font-weight:500; cursor:pointer; }
.btn:hover { border-color:var(--faint); }
.btn-sm { padding:3px 9px; font-size:11.5px; }
.hint { font-size:11.5px; color:var(--muted-2); line-height:1.4; }

/* ---------- KPI cards ---------- */
.kpis { flex:0 0 auto; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.kpi { display:flex; flex-direction:column; gap:2px; padding:12px 14px; background:var(--white); border:1px solid var(--line); border-radius:12px; color:var(--ink); min-width:0; }
.kpi:hover { text-decoration:none; border-color:var(--faint); }
.kpi-label { font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.kpi-num { font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.15; }
.kpi-sub { font-size:11.5px; color:var(--muted-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi-bar { position:relative; height:4px; margin-top:8px; border-radius:999px; background:var(--line-soft); }
.kpi-bar span { position:absolute; top:0; bottom:0; border-radius:999px; background:var(--ink); }
.kpi-dark { background:var(--ink); border-color:var(--ink); color:var(--on-ink); }
.kpi-dark .kpi-label, .kpi-dark .kpi-sub { color:var(--on-ink); opacity:.7; }
.kpi-dark .kpi-bar { background:rgba(128,128,128,.35); }
.kpi-dark .kpi-bar span { background:var(--on-ink); }
.kpi-dark:hover { border-color:var(--ink); opacity:.92; }
.kpi:focus-visible { outline-offset:3px; border-radius:12px; }

/* ---------- Cards ---------- */
.page-title { flex:0 0 auto; font-size:22px; font-weight:600; letter-spacing:-.02em; line-height:1.15; }
.card { display:flex; flex-direction:column; min-height:0; background:var(--white); border:1px solid var(--line); border-radius:12px; overflow:hidden; flex:0 0 auto; }
.card.fill { flex:1 1 0; }
.card-head { flex:0 0 auto; padding:11px 18px; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:4px 12px; }
.card-head h2 { font-size:13px; font-weight:600; letter-spacing:-.01em; }
.card-head .sub { font-size:11.5px; color:var(--muted-2); }

.grid2 { flex:1 1 0; min-height:0; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:14px; }
.stack-col { min-height:0; display:flex; flex-direction:column; gap:14px; }

/* table-like lists */
.lh { flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:7px 18px; background:var(--surface-2); border-bottom:1px solid var(--line); color:var(--muted-2); font-size:12px; }
.lh .rid { color:var(--muted-2); font-family:inherit; font-weight:400; font-size:12px; }
.lh .when { font-size:12px; }
.list { flex:1 1 auto; min-height:0; overflow-y:auto; margin:0; padding:0; list-style:none; }
.list:empty { display:none; }
.list li { border-top:1px solid var(--line-soft); display:flex; align-items:center; gap:12px; padding:9px 12px 9px 18px; }
.list li:first-child { border-top:0; }
.list li .name { font-weight:600; letter-spacing:-.01em; }
.list li .summary { font-size:11.5px; color:var(--muted-2); }
.list .stack { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.x { width:26px; height:26px; padding:0; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:7px; background:var(--white); color:var(--muted-2); font-size:15px; line-height:1; cursor:pointer; }
.x:hover { border-color:var(--faint); }
.empty { flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:16px; text-align:center; color:var(--muted-2); }
.empty[hidden] { display:none; }
.tip { flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:10px 18px; border-top:1px solid var(--line); background:var(--surface-2); color:var(--muted); line-height:1.4; }
.tip strong { color:var(--ink); font-weight:600; }

.pill { display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:500; background:var(--surface-2); color:var(--muted-2); border:1px solid var(--line); white-space:nowrap; }
.rid { flex:0 0 120px; font-family:'JetBrains Mono',ui-monospace,Consolas,monospace; font-size:12px; font-weight:500; color:var(--blue-fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.what { flex:1; min-width:0; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.when { flex:0 0 90px; text-align:right; font-size:11.5px; color:var(--muted-2); }
.kind { flex:0 0 110px; }

/* coverage */
.cov { padding:10px 18px 12px; display:flex; flex-direction:column; gap:7px; }
.cov-row { display:flex; align-items:center; gap:14px; }
.cov-name { flex:0 0 108px; font-weight:500; white-space:nowrap; }
.cov-track { flex:1 1 0; position:relative; height:8px; border-radius:999px; background:var(--line-soft); }
.cov-bar { position:absolute; top:0; bottom:0; border-radius:999px; background:var(--ink); }
.cov-range { flex:0 0 138px; text-align:right; font-size:11.5px; color:var(--muted); white-space:nowrap; }
.cov-ticks { flex:1 1 0; position:relative; height:14px; }
.cov-ticks span { position:absolute; top:0; transform:translateX(-50%); font-size:10.5px; color:var(--muted-2); }

/* search results page */
.results { overflow-y:auto; flex:0 1 auto; }
.results .row { display:flex; align-items:center; gap:12px; padding:10px 18px; border-top:1px solid var(--line-soft); }
.results .row:first-of-type { border-top:0; }

/* ---------- Record lists (Orders) ---------- */
.page-head { flex:0 0 auto; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.page-head .eyebrow { font-size:11px; font-weight:500; color:var(--muted-2); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
.page-actions { display:flex; gap:8px; }
.page-actions .btn { text-decoration:none; }
.page-actions .btn.on { color:var(--ink); border-color:var(--ink); }
.btn-dark { background:var(--ink); color:var(--on-ink); border-color:transparent; }
.btn-primary-sm { background:var(--ink); color:var(--on-ink); border-color:transparent; }
.btn:hover { text-decoration:none; }

.orders { flex:1 1 0; min-height:0; display:flex; gap:14px; }
.orders-main { flex:1 1 0; min-width:0; min-height:0; display:flex; flex-direction:column; gap:10px; }
.toolbar { flex:0 0 auto; flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:10px 12px; padding:10px 14px; overflow:visible; }
.fld { display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--muted-2); font-weight:500; }
.fld input, .fld select { height:32px; padding:0 10px; border:1px solid var(--line-strong); border-radius:7px; background:var(--white); color:var(--ink); font-family:inherit; font-size:12.5px; min-width:140px; }
.fld input:focus, .fld select:focus { outline:2px solid var(--blue-fg); outline-offset:1px; border-color:var(--blue-fg); }
.fld input[type=date] { min-width:128px; }
.fld-actions { display:flex; gap:8px; margin-left:auto; }
.fld-actions .btn { height:32px; padding:0 14px; }

.chipbar { flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.chipbar .lbl { font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin-right:4px; }
.fchip { display:inline-flex; align-items:center; gap:7px; padding:4px 11px; border:1px solid var(--line); border-radius:999px; background:var(--white); color:var(--muted); font-size:12px; font-weight:500; }
.fchip:hover { border-color:var(--faint); text-decoration:none; color:var(--ink); }
.fchip.on { background:var(--ink); border-color:var(--ink); color:var(--on-ink); }
.fchip .n { font-size:10.5px; opacity:.65; }

.tablecard { display:flex; flex-direction:column; }
.tscroll { flex:1 1 0; min-height:0; overflow:auto; }
.tbl { width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px; }
.tbl th { position:sticky; top:0; z-index:1; text-align:left; padding:8px 14px; background:var(--surface-2); border-bottom:1px solid var(--line); color:var(--muted-2); font-weight:500; font-size:12px; white-space:nowrap; }
.tbl td { padding:8px 14px; border-bottom:1px solid var(--line-soft); }
.tbl tbody tr { cursor:pointer; }
.tbl tbody tr:hover td { background:var(--surface-2); }
.tbl tbody tr.sel td { background:var(--blue-bg); }
.tbl tbody tr:focus-visible { outline:2px solid var(--blue-fg); outline-offset:-2px; }
.tbl .num { text-align:right; }
.tbl .id a { color:var(--blue-fg); font-weight:500; }
.tbl .cust { max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tbl .nowrap { white-space:nowrap; }
.tbl .muted { color:var(--muted); }
.tbl .sort { color:inherit; }
.st { display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:500; background:var(--surface-2); color:var(--muted); border:1px solid var(--line); white-space:nowrap; }
.st-green { background:rgba(34,197,94,.12); color:var(--green-fg); border-color:transparent; }
.st-red { background:rgba(239,68,68,.12); color:var(--red-fg); border-color:transparent; }
.st-amber { background:rgba(245,158,11,.14); color:var(--amber-fg); border-color:transparent; }
.pager { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 14px; border-top:1px solid var(--line); background:var(--white); color:var(--muted-2); font-size:12px; }
.pager .pg { display:flex; align-items:center; gap:10px; }

.preview { flex:0 0 360px; min-height:0; overflow:auto; display:none; }
.orders.has-preview .preview { display:block; }
.pv { padding:16px 18px; display:flex; flex-direction:column; gap:14px; }
.pv-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.pv-head .eyebrow { font-size:11px; font-weight:500; color:var(--muted-2); text-transform:uppercase; letter-spacing:.08em; margin-bottom:2px; }
.pv-title { font-size:18px; font-weight:600; letter-spacing:-.01em; }
.pv-fields { margin:0; display:flex; flex-direction:column; }
.pv-row { display:flex; gap:12px; padding:6px 0; border-top:1px solid var(--line-soft); }
.pv-row:first-child { border-top:0; }
.pv-row dt { flex:0 0 96px; color:var(--muted-2); }
.pv-row dd { margin:0; flex:1; min-width:0; word-break:break-word; }
.pv-sub { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); display:flex; gap:8px; margin-bottom:4px; }
.pv-table { width:100%; border-collapse:collapse; font-size:12px; }
.pv-table td { padding:5px 0; border-top:1px solid var(--line-soft); }
.pv-table .pv-item { max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pv-table .num { text-align:right; padding-left:10px; }
.pv-actions { display:flex; flex-wrap:wrap; gap:8px; }
.pv-actions .btn { text-decoration:none; }

/* ---------- Record page (Order) ---------- */
[hidden] { display:none !important; }
.page-head .eyebrow a:hover { text-decoration:underline; }
.kpis.five { grid-template-columns:repeat(5,minmax(0,1fr)); }
.kpi-md { font-size:17px; line-height:1.3; padding-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rec { flex:1 1 0; min-height:0; display:flex; gap:14px; }
.recmain { flex:1 1 0; min-width:0; min-height:0; display:flex; flex-direction:column; overflow-x:hidden; }
.recside { flex:0 0 300px; min-height:0; overflow:auto; }
.tabs { flex:0 0 auto; display:flex; flex-wrap:wrap; gap:2px; padding:8px 12px 0; border-bottom:1px solid var(--line); }
.tab { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:transparent; color:var(--muted); font-family:inherit; font-size:12.5px; font-weight:500; cursor:pointer; white-space:nowrap; }
.tab:hover { color:var(--ink); }
.tab[aria-selected=true] { color:var(--ink); border-bottom-color:var(--ink); font-weight:600; }
.tab .n { font-size:10.5px; color:var(--muted-2); padding:1px 7px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); }
.panel { flex:1 1 0; min-height:0; overflow-x:hidden; overflow-y:auto; }
.panel .tbl { table-layout:auto; }
.panel .tbl td, .panel .tbl th { white-space:normal; overflow-wrap:anywhere; }
.panel .tbl th { white-space:normal; }
.panel .empty { min-height:180px; }
.note { padding:9px 18px; background:var(--surface-2); border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; }
.tbl tr.plain { cursor:default; }
.tbl tr.plain:hover td { background:transparent; }
.tbl tfoot td { padding:8px 14px; border-top:1px solid var(--line); background:var(--surface-2); }
.tbl .itemcell { font-weight:500; }
.tbl .desc { color:var(--muted); }
.tech { display:block; font-size:10.5px; font-weight:400; color:var(--muted-2); }

/* detail topics */
.detailhead { position:sticky; top:0; z-index:2; display:flex; flex-direction:column; gap:8px; padding:10px 14px; background:var(--white); border-bottom:1px solid var(--line); }
.subbar { position:relative; display:flex; align-items:center; min-width:0; }
.subnav { position:absolute; top:50%; transform:translateY(-50%); z-index:1; width:26px; height:26px; border:1px solid var(--line); border-radius:999px; background:var(--white); color:var(--ink); font-size:15px; line-height:1; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.12); }
.subnav.prev { left:0; } .subnav.next { right:0; } .subnav[hidden] { display:none; }
.detailtools { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; }
.switch { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; cursor:pointer; user-select:none; }
.switch input { width:15px; height:15px; accent-color:var(--ink); cursor:pointer; }
.subtabs { display:flex; flex-wrap:nowrap; gap:6px; flex:1 1 auto; min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding:2px 2px 4px; }
.subtabs::-webkit-scrollbar { display:none; }
.subtab { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border:1px solid var(--line); border-radius:999px; background:var(--white); color:var(--muted); font-family:inherit; font-size:12px; font-weight:500; cursor:pointer; }
.subtab:hover { border-color:var(--faint); color:var(--ink); }
.subtab[aria-selected=true] { background:var(--ink); border-color:var(--ink); color:var(--on-ink); }
.subtab .n { font-size:10.5px; opacity:.65; }
.detailsearch input { width:240px; height:30px; padding:0 10px; border:1px solid var(--line-strong); border-radius:7px; background:var(--white); color:var(--ink); font-family:inherit; font-size:12.5px; }
.detailsearch input:focus { outline:2px solid var(--blue-fg); outline-offset:1px; border-color:var(--blue-fg); }
.subpanel { padding:6px 18px 14px; }
.subtitle { display:none; margin:14px 0 4px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.subtitle .n, .lgroup h3 .n { font-size:10.5px; padding:1px 7px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); margin-left:6px; letter-spacing:0; }
.rec.searching .subtitle, #panel-other .subtitle { display:block; }
.fgrid { margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:0 22px; }
.fcell { padding:8px 0; border-bottom:1px solid var(--line-soft); min-width:0; }
.fcell[hidden] { display:none; }
.fcell dt { font-size:11.5px; color:var(--muted-2); font-weight:500; }
.fcell.is-empty dd { color:var(--faint); }
.rec.hide-empty .fcell.is-empty { display:none; }
.fcell dd { margin:2px 0 0; font-size:12.5px; word-break:break-word; white-space:pre-wrap; }

/* line details and payment events */
.linerow > td { padding:0; background:var(--surface-2); border-bottom:1px solid var(--line); }
.linebox { padding:6px 18px 14px 48px; }
.lgroup { margin-top:8px; }
.lgroup h3 { margin:10px 0 2px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.linebtn { font-size:14px; }
.events { padding:8px 14px 14px; display:flex; flex-direction:column; gap:8px; }
.event { border:1px solid var(--line); border-radius:10px; background:var(--white); }
.event summary { display:flex; align-items:center; gap:14px; padding:10px 14px; cursor:pointer; list-style:none; }
.event summary::-webkit-details-marker { display:none; }
.event summary::before { content:'›'; color:var(--muted-2); font-size:15px; transition:transform .15s; }
.event[open] summary::before { transform:rotate(90deg); }
.event .fgrid { padding:4px 14px 12px; border-top:1px solid var(--line-soft); }
.event .num { margin-left:auto; }
.side-fields { padding:6px 18px 14px; }
.pre { white-space:pre-line; }

.toast { position:fixed; left:50%; bottom:56px; transform:translateX(-50%); padding:9px 16px; border-radius:8px; background:var(--ink); color:var(--on-ink); font-size:12.5px; box-shadow:0 6px 20px rgba(0,0,0,.2); transition:opacity .4s; z-index:50; }
.toast.out { opacity:0; }

/* ---------- Responsive (keep last) ---------- */
@media (max-width: 1180px) { .kpis, .kpis.five { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-height: 940px) {
  .nav-link { padding-top:4px; padding-bottom:4px; }
  .nav-title { margin-top:0; padding-top:8px; padding-bottom:3px; }
}
@media (max-height: 820px) {
  .page { padding-top:10px; padding-bottom:10px; }
  .main, .stack-col, .grid2 { gap:10px; }
  .kpi { padding:8px 12px; }
  .kpi-num { font-size:21px; }
  .kpi-bar { margin-top:4px; }
  .tip { display:none; }
  .cov { gap:4px; padding:8px 18px; }
  .card-head { padding:8px 18px; }
  .foot { flex-basis:30px; }
  .nav-link { padding-top:3px; padding-bottom:3px; font-size:12.5px; }
  .nav-title { padding-top:6px; }
}
@media (max-height: 740px) {
  .nav-link svg { display:none; }
  .nav-link { font-size:12px; padding-top:2px; padding-bottom:2px; }
  .nav-title { padding-top:4px; padding-bottom:2px; }
  .side { padding-top:4px; padding-bottom:4px; }
  .page { padding-top:8px; padding-bottom:8px; }
}
@media (max-width: 900px) {
  body { overflow:auto; height:auto; }
  .top { grid-template-columns:1fr auto; height:auto; padding:8px 16px; row-gap:8px; }
  .top-search { grid-column:1 / -1; grid-row:2; }
  .kbd { display:none; }
  .page { padding:12px 16px; }
  .shell { flex-direction:column; }
  .side { flex-basis:auto; align-self:stretch; }
  .content, .main { overflow:visible; }
  .grid2 { grid-template-columns:1fr; }
  .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .card.fill { flex:0 0 auto; }
  .foot { padding:0 16px; }
}

/* Record tables: numbers and headers never split; long text wraps instead of scrolling sideways */
.panel .tbl th, .panel .tbl td.num, .panel .tbl td.mono { white-space:nowrap; overflow-wrap:normal; }
.panel .tbl td.id { white-space:nowrap; }

/* Compact record tables; on a narrow card the less important column steps aside */
.recmain { container-type:inline-size; }
.panel .tbl th, .panel .tbl td { padding-left:8px; padding-right:8px; }
.panel .tbl th:first-child, .panel .tbl td:first-child { padding-left:12px; }
.panel .tbl th:last-child, .panel .tbl td:last-child { padding-right:14px; }
@container (max-width: 640px) { .col-ful { display:none; } }

/* Fields: compact "name -> value" rows that flow into as many columns as fit */
.fgrid { display:block; column-width:300px; column-gap:34px; margin:0; }
.fcell { display:flex; align-items:baseline; gap:12px; padding:5px 2px; border-bottom:1px solid var(--line-soft); break-inside:avoid; min-width:0; }
.fcell dt { flex:0 0 42%; max-width:42%; color:var(--muted); font-size:12px; font-weight:500; overflow-wrap:anywhere; }
.fcell dd { flex:1 1 0; min-width:0; margin:0; font-size:12.5px; color:var(--ink); overflow-wrap:anywhere; white-space:pre-wrap; }
.fcell.is-empty dt { color:var(--faint); font-weight:400; }
.fcell.is-empty dd { color:var(--faint); }
.tech { display:none; }
.rec.show-tech .tech { display:block; }
.subpanel { padding:8px 20px 18px; }
.subsum { display:none; margin:2px 0 8px; font-size:11.5px; color:var(--muted-2); }
.subsum strong { color:var(--ink); font-weight:600; }
.emptyhead { margin:18px 0 6px; padding-top:10px; border-top:1px dashed var(--line-strong); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.emptyhead .n { font-size:10.5px; padding:1px 7px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); margin-left:6px; letter-spacing:0; }
.rec.hide-empty .emptyhead { display:none; }
.rec.searching .emptyhead { display:none; }
.rec:not(.searching) .subsum { display:block; }
.linebox .fgrid { column-width:280px; }

/* ================= Glass (top bar, sidebar, Home) =================
   Translucent surfaces + blur over a soft colored backdrop. Data tables elsewhere stay opaque. */
:root {
  --g-bg:rgba(255,255,255,.55); --g-bg-strong:rgba(255,255,255,.72); --g-border:rgba(255,255,255,.7);
  --g-edge:rgba(120,113,108,.18); --g-shine:rgba(255,255,255,.9); --g-shadow:0 8px 30px rgba(28,25,23,.08);
  --blob1:rgba(96,165,250,.35); --blob2:rgba(244,114,182,.22); --blob3:rgba(52,211,153,.25);
}
:root[data-theme="dark"] {
  --g-bg:rgba(40,40,46,.5); --g-bg-strong:rgba(48,48,56,.62); --g-border:rgba(255,255,255,.10);
  --g-edge:rgba(0,0,0,.5); --g-shine:rgba(255,255,255,.14); --g-shadow:0 8px 30px rgba(0,0,0,.4);
  --blob1:rgba(59,130,246,.28); --blob2:rgba(168,85,247,.22); --blob3:rgba(20,184,166,.18);
}
body {
  background:
    radial-gradient(900px 520px at 8% 0%, var(--blob1), transparent 65%),
    radial-gradient(800px 520px at 95% 8%, var(--blob2), transparent 65%),
    radial-gradient(900px 600px at 55% 105%, var(--blob3), transparent 65%),
    var(--bg);
  background-attachment:fixed;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .top, .side, .kpis:not(.five) .kpi:not(.kpi-dark), .grid2 .card, .search-box {
    -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%);
  }
  .top { background:var(--g-bg); border-bottom:1px solid var(--g-border); box-shadow:inset 0 -1px 0 var(--g-edge), 0 4px 20px rgba(28,25,23,.04); }
  .side, .kpis:not(.five) .kpi:not(.kpi-dark), .grid2 .card {
    background:linear-gradient(160deg, var(--g-bg-strong), var(--g-bg));
    border:1px solid var(--g-border);
    box-shadow:inset 0 1px 0 var(--g-shine), inset 0 0 0 1px var(--g-edge), var(--g-shadow);
  }
  .kpis:not(.five) .kpi-dark { background:linear-gradient(160deg, rgba(28,25,23,.92), rgba(28,25,23,.78)); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), var(--g-shadow); }
  :root[data-theme="dark"] .kpis:not(.five) .kpi-dark { background:linear-gradient(160deg, rgba(240,240,240,.95), rgba(210,210,215,.82)); }
  .search-box { background:var(--g-bg-strong); border-color:var(--g-border); box-shadow:inset 0 1px 0 var(--g-shine), 0 2px 8px rgba(28,25,23,.06); }
  .grid2 .card-head { border-bottom-color:var(--g-edge); }
  /* liquid hover: lift + light follows the cursor (set by app.js) */
  .kpis:not(.five) .kpi, .side a { transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
  .kpis:not(.five) .kpi:hover { transform:translateY(-2px); }
  .kpis:not(.five) .kpi:not(.kpi-dark):hover, .side a:hover {
    background:radial-gradient(180px circle at var(--mx,50%) var(--my,0%), var(--g-shine), transparent 70%), linear-gradient(160deg, var(--g-bg-strong), var(--g-bg));
  }
}
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  .top, .side, .kpi, .grid2 .card, .search-box { -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--white); }
}
@media (prefers-reduced-motion:reduce) { .kpi, .side a { transition:none !important; transform:none !important; } }

/* Backdrop palette aligned with Acumatica (primary #007ACC, light blues #56BAFF / #B5D7EF, amber #FFC107 as the only warm accent).
   Blue on both top corners, light blue at the bottom: symmetric left/right. */
:root { --bg:#f5f7f8; --blob1:rgba(0,122,204,.26); --blob2:rgba(0,122,204,.20); --blob3:rgba(86,186,255,.30); --blob4:rgba(255,193,7,.10); }
:root[data-theme="dark"] { --blob1:rgba(0,122,204,.30); --blob2:rgba(0,122,204,.24); --blob3:rgba(86,186,255,.14); --blob4:rgba(255,193,7,.05); }
body {
  background:
    radial-gradient(820px 480px at 0% 0%, var(--blob1), transparent 65%),
    radial-gradient(820px 480px at 100% 0%, var(--blob2), transparent 65%),
    radial-gradient(1000px 560px at 50% 112%, var(--blob3), transparent 65%),
    radial-gradient(520px 320px at 50% 55%, var(--blob4), transparent 70%),
    var(--bg);
  background-attachment:fixed;
}

/* Backdrop palette sampled from the real Acumatica UI: top bar #2366BE, light blue #D3E1F2, cyan #33CCFF, deep blue #004A80, grey #F5F7F8. */
:root { --bg:#f5f7f8; --blob1:rgba(35,102,190,.26); --blob2:rgba(35,102,190,.20); --blob3:rgba(51,204,255,.26); --blob4:rgba(211,225,242,.55); }
:root[data-theme="dark"] { --blob1:rgba(35,102,190,.34); --blob2:rgba(0,74,128,.40); --blob3:rgba(51,204,255,.13); --blob4:rgba(10,29,56,.0); }

/* Light mode: flat background, no gradient (dark mode keeps it) */
:root:not([data-theme="dark"]) body { background:var(--bg); }

/* ================= Glass on every screen =================
   Cards, KPI tiles and controls are translucent; data areas (tables, field rows) sit on a more opaque glass so text stays crisp. */
:root { --g-card:rgba(255,255,255,.80); --g-ctl:rgba(255,255,255,.65); --g-sub:rgba(245,247,248,.55); --g-sticky:rgba(250,251,252,.90); }
:root[data-theme="dark"] { --g-card:rgba(34,34,40,.72); --g-ctl:rgba(255,255,255,.06); --g-sub:rgba(255,255,255,.04); --g-sticky:rgba(34,34,40,.92); }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .kpi:not(.kpi-dark), .card, .detailhead, .event, .pager {
    -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%);
  }
  .kpi:not(.kpi-dark), .card {
    background:linear-gradient(160deg, var(--g-card), var(--g-bg));
    border:1px solid var(--g-border);
    box-shadow:inset 0 1px 0 var(--g-shine), inset 0 0 0 1px var(--g-edge), var(--g-shadow);
  }
  .kpi-dark { background:linear-gradient(160deg, rgba(28,25,23,.92), rgba(28,25,23,.78)); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), var(--g-shadow); }
  :root[data-theme="dark"] .kpi-dark { background:linear-gradient(160deg, rgba(240,240,240,.95), rgba(210,210,215,.82)); }
  .card-head { border-bottom-color:var(--g-edge); }
  /* controls */
  .btn, .x, .fld input, .fld select, .fchip, .subtab, .detailsearch input, .subnav { background:var(--g-ctl); border-color:var(--g-border); }
  .subtab[aria-selected="true"] { background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
  /* sub-surfaces inside cards */
  .lh, .tip, .note, .tbl tfoot td, .linerow > td { background:var(--g-sub); }
  .tbl th { background:var(--g-sticky); }
  .detailhead { background:var(--g-sticky); }
  .pager { background:var(--g-sub); }
  .event { background:var(--g-sub); }
  .tbl tbody tr:hover td { background:rgba(35,102,190,.07); }
}
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  .kpi, .card, .detailhead, .event, .pager { -webkit-backdrop-filter:none; backdrop-filter:none; }
  .card, .kpi:not(.kpi-dark) { background:var(--white); }
  .tbl th, .detailhead { background:var(--surface-2); }
}
/* keep solid buttons solid on glass */
.btn.btn-dark, .btn.btn-primary-sm { background:var(--ink); color:var(--on-ink); border-color:transparent; }

/* ---- Sales section switch, amount due, addresses ---- */
.seg { display:inline-flex; padding:3px; gap:2px; border:1px solid var(--line); border-radius:9px; background:var(--g-ctl, var(--white)); }
.seg a { padding:5px 14px; border-radius:7px; font-size:12.5px; font-weight:500; color:var(--muted); }
.seg a:hover { text-decoration:none; color:var(--ink); }
.seg a.on { background:var(--ink); color:var(--on-ink); }
.tbl td.due { color:var(--amber-fg); font-weight:600; }
.addrgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; padding:14px 18px; }
.addr { border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:var(--g-sub, var(--surface-2)); }
.addr-head { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:6px; }
.addr .pre { white-space:pre-line; color:var(--ink-soft); }

/* record tabs stay on one line (scroll sideways on narrow screens) */
.recmain .tabs { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.recmain .tabs::-webkit-scrollbar { display:none; }
.recmain .tabs .tab { flex:0 0 auto; }

.recmain .tabs .tab { padding-left:11px; padding-right:11px; }

/* record tabs: scroll sideways with arrows, wheel and drag */
.tabbar { position:relative; display:flex; min-width:0; }
.tabbar .tabs { flex:1 1 auto; min-width:0; position:relative; cursor:grab; user-select:none; }
.tabbar .tabs.dragging { cursor:grabbing; }
.tabbar .tabs.dragging .tab { pointer-events:none; }
.tabbar .tabnav { top:calc(50% + 3px); }