/* SYROS Marine Ops — design system v2
   8px spacing grid · Inter (UI) + Manrope (display) · light & dark themes */
:root{
  --bg:#f7f8fa; --surface:#ffffff; --surface-2:#f4f5f8; --hover:#f1f3f7;
  --line:#e6e8ee; --line-2:#eff1f5;
  --ink:#0d1526; --ink-2:#3b4558; --muted:#667085;
  --accent:#2f6bff; --accent-ink:#1d4fd8; --accent-soft:#eaf0ff;
  --gold:#c9a24a;
  --ok:#0f7a45; --ok-bg:#e4f6ec; --warn:#93540a; --warn-bg:#fdf1d8; --err:#b42318; --err-bg:#fdeceb;
  --info:#1d4fd8; --info-bg:#e8efff; --violet:#5b3fb8; --violet-bg:#efeaff; --teal:#0b6b74; --teal-bg:#dff4f5; --grey:#475467; --grey-bg:#eef0f4;
  --side:#0a1124; --side-2:#111a33; --side-ink:#c5cde0; --side-muted:#7c88a6; --side-line:rgba(255,255,255,.07);
  --btn:#0d1526; --btn-ink:#ffffff;
  --r-sm:8px; --r:12px; --r-lg:16px;
  --sh-1:0 1px 2px rgba(13,21,38,.05);
  --sh-2:0 1px 2px rgba(13,21,38,.04),0 8px 24px -12px rgba(13,21,38,.12);
  --sh-3:0 24px 64px -16px rgba(13,21,38,.28),0 0 0 1px rgba(13,21,38,.06);
  --ring:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --display:'Manrope','Inter',system-ui,sans-serif;
  --side-w:248px; --top-h:56px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#080c15; --surface:#0f1522; --surface-2:#141b2b; --hover:#182033;
  --line:#1e2739; --line-2:#182031;
  --ink:#eef2f8; --ink-2:#c5ccda; --muted:#8a95a9;
  --accent:#5b8cff; --accent-ink:#9bb8ff; --accent-soft:#14213f;
  --ok:#5fd896; --ok-bg:#0e2a1c; --warn:#f6c453; --warn-bg:#2a2009; --err:#ff8a80; --err-bg:#2e1413;
  --info:#8fb0ff; --info-bg:#14213f; --violet:#b9a4ff; --violet-bg:#211a3d; --teal:#5fd3dc; --teal-bg:#0c2a2e; --grey:#aab3c5; --grey-bg:#1a2233;
  --side:#060a13; --side-2:#0f1626;
  --btn:#eef2f8; --btn-ink:#0d1526;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.6);
  --sh-3:0 24px 64px -16px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);font-size:14px;line-height:1.5;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-feature-settings:'cv11','ss01'}
a{color:var(--accent-ink);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--display);margin:0;color:var(--ink);letter-spacing:-.02em}
.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.muted{color:var(--muted)}.tiny{font-size:12px}.center{text-align:center}.right{text-align:right}.nowrap{white-space:nowrap}
.mono{font-variant-numeric:tabular-nums}
code{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-2);padding:2px 6px;border-radius:6px;word-break:break-all}
::selection{background:var(--accent-soft)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{width:var(--side-w);flex:none;background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:40;transition:width .2s ease;border-right:1px solid var(--side-line)}
.brand{display:flex;align-items:center;gap:12px;height:var(--top-h);padding:0 16px;flex:none;overflow:hidden}
.brand img{width:32px;height:32px;object-fit:contain;background:#fff;border-radius:8px;padding:2px;flex:none}
.brand b{display:block;font-family:var(--display);font-weight:800;color:#fff;font-size:14px;letter-spacing:.14em;line-height:1.2}
.brand span{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
#nav{flex:1;overflow:auto;padding:8px}
.nav-sec{font-size:11px;font-weight:500;color:var(--side-muted);padding:16px 8px 8px;white-space:nowrap;overflow:hidden}
.nav-a{position:relative;display:flex;align-items:center;gap:12px;width:100%;height:36px;padding:0 10px;border-radius:var(--r-sm);color:var(--side-ink);font:500 13.5px var(--font);white-space:nowrap;overflow:hidden;border:0;background:transparent;cursor:pointer;transition:background .15s,color .15s;margin-bottom:2px}
.nav-a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.nav-a .i{width:17px;height:17px;opacity:.8}
.nav-a.on{background:var(--side-2);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.nav-a.on .i{opacity:1;color:var(--side-accent)}
.nav-a.on::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--side-accent)}
.side-foot{padding:8px;border-top:1px solid var(--side-line);display:flex;flex-direction:column;gap:4px}
.zoho-pill{display:flex;align-items:center;gap:10px;height:36px;padding:0 13px;font-size:12px;color:var(--side-muted);white-space:nowrap;overflow:hidden}
.zoho-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:#55607a;flex:none}
.zoho-pill.on{color:var(--side-ink)}.zoho-pill.on::before{background:#3ddc84;box-shadow:0 0 0 3px rgba(61,220,132,.18)}
.nav-collapsed{--side-w:64px}
.nav-collapsed .brand-t,.nav-collapsed .nav-a span,.nav-collapsed .nav-sec{display:none}
.nav-collapsed .zoho-pill{font-size:0;gap:0;justify-content:center;padding:0}
.nav-collapsed .nav-a{justify-content:center;padding:0}
.nav-collapsed .brand{justify-content:center;padding:0}
.nav-collapsed #nav{padding-top:16px}
.nav-collapsed #collapseBtn .i{transform:rotate(180deg)}
.scrim{display:none}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:var(--top-h);display:flex;align-items:center;gap:12px;padding:0 24px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;min-width:0}
.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--ink);text-decoration:none}
.crumbs b{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.crumbs i{font-style:normal;opacity:.5}
.search{margin-left:auto;position:relative;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:0 8px 0 12px;width:min(340px,34vw);height:36px;color:var(--muted);transition:border-color .15s,box-shadow .15s}
.search:focus-within{border-color:var(--accent);box-shadow:var(--ring)}
.search input{border:0;background:transparent;outline:none;width:100%;height:auto;padding:0;font:inherit;color:var(--ink);box-shadow:none!important}
kbd{font:500 11px var(--font);color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:2px 6px;white-space:nowrap}
.search-pop{position:absolute;top:44px;left:0;right:0;min-width:320px;background:var(--surface);border-radius:var(--r);box-shadow:var(--sh-3);padding:8px;max-height:420px;overflow:auto;animation:rise .14s ease-out}
.search-pop a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--r-sm);color:var(--ink)}
.search-pop a:hover{background:var(--hover);text-decoration:none}
.search-pop h5{margin:8px 12px 4px;font-size:11px;font-weight:500;color:var(--muted)}
.top-actions{display:flex;align-items:center;gap:4px}
.pop-wrap{position:relative}
.icon-btn{position:relative;border:0;background:transparent;width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;cursor:pointer;color:var(--ink-2);transition:background .15s,color .15s}
.icon-btn:hover{background:var(--hover);color:var(--ink)}
.icon-btn.sm{width:28px;height:28px}
.icon-btn .dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 2px var(--bg)}
.avatar{width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;display:grid;place-items:center;font:700 12px var(--display);margin-left:4px}
.menu{position:absolute;right:0;top:44px;min-width:240px;background:var(--surface);border-radius:var(--r);box-shadow:var(--sh-3);padding:6px;z-index:60;animation:rise .14s ease-out}
.menu[hidden]{display:none}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:6px 10px;border:0;background:transparent;border-radius:var(--r-sm);font:500 13.5px var(--font);color:var(--ink);cursor:pointer;text-align:left}
.menu a:hover,.menu button:hover{background:var(--hover);text-decoration:none}
.menu .i{color:var(--muted)}
.menu hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.menu-h{padding:8px 10px 10px}.menu-h b{display:block}.menu-h span{font-size:12px;color:var(--muted);text-transform:capitalize}
.menu-t{font-size:11px;font-weight:500;color:var(--muted);padding:6px 10px}
.note{align-items:flex-start!important;line-height:1.4}
.note small{display:block;color:var(--muted);font-size:12px;font-weight:400}
.note::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:6px;flex:none}
.note.warn::before{background:#f59e0b}
.menu-btn{display:none}
.view{padding:32px 40px 80px;max-width:1440px;width:100%;margin:0 auto}
.view>*{animation:rise .28s ease-out both}
.view>*:nth-child(2){animation-delay:.03s}.view>*:nth-child(3){animation-delay:.06s}.view>*:nth-child(4){animation-delay:.09s}.view>*:nth-child(n+5){animation-delay:.12s}

/* ---------- page header ---------- */
.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px;flex-wrap:wrap}
.page-h h2{font-size:24px;font-weight:700;line-height:1.25;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.page-h p{margin:4px 0 0;color:var(--muted);font-size:14px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 13.5px var(--font);cursor:pointer;white-space:nowrap;text-decoration:none!important;box-shadow:var(--sh-1);transition:background .15s,border-color .15s,transform .08s,box-shadow .15s}
.btn:hover{background:var(--hover)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
.btn.primary:hover{opacity:.9}
.btn.gold{background:var(--accent);border-color:var(--accent);color:var(--accent-on);box-shadow:0 1px 2px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.gold:hover{filter:brightness(1.06)}
.btn.danger{color:var(--err)}.btn.danger:hover{background:var(--err-bg);border-color:transparent}
.btn.ghost{background:transparent;box-shadow:none}
.btn.zoho{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink);box-shadow:none}
.btn.zoho:hover{filter:brightness(.97)}
.btn.sm{height:30px;padding:0 10px;font-size:12.5px;gap:6px}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}
.card-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;gap:12px;flex-wrap:wrap}
.card-h h3{font-size:14px;font-weight:700;letter-spacing:-.01em}
.card-h + .card-b{padding-top:4px}
.card-b{padding:20px}
.card-tools{display:flex;align-items:center;gap:8px;font-size:12.5px}
.sec .sec-b{overflow:hidden}
.sec.is-collapsed .sec-b{display:none}
.sec [data-toggle] .i{transition:transform .2s}
.sec.is-collapsed [data-toggle] .i{transform:rotate(-90deg)}
[style*="margin-bottom:20px"]{margin-bottom:24px!important}
[style*="margin-top:20px"]{margin-top:24px!important}

/* ---------- dashboard ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}
.kpi{padding:20px;position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.kpi .lbl{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:500}
.kpi .lbl .i{color:var(--accent)}
.kpi .v{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.03em;margin-top:12px;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi .s{font-size:12.5px;color:var(--muted);margin-top:8px}
.kpi.hero{background:var(--hero);border-color:transparent;color:#fff}
.kpi.hero .lbl{color:#a9b7d9}.kpi.hero .lbl .i{color:var(--side-accent)}.kpi.hero .v{color:#fff}.kpi.hero .s{color:#c9d3ea}
.spark{position:absolute;right:16px;bottom:16px;width:96px;height:32px;fill:none;stroke:var(--side-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.spark path{vector-effect:non-scaling-stroke}
.ring{position:absolute;right:20px;top:20px;width:44px;height:44px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:5;stroke:var(--line)}
.ring .p{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .9s ease}
.dash{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;margin-bottom:16px;align-items:start}
.dash>*{min-width:0}
.chart{position:relative;height:248px;margin:0 20px 16px}
.chart svg{position:absolute;left:0;top:0;width:100%;height:calc(100% - 28px);overflow:visible}
.chart .gl{stroke:var(--line);stroke-width:1;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.chart .ln{fill:none;stroke:var(--accent);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.chart .ar{fill:url(#ag);stroke:none}
.chart-cols{position:absolute;inset:0;display:flex}
.chart-col{flex:1;position:relative;border-radius:var(--r-sm);outline-offset:-2px}
.chart-col:hover,.chart-col:focus{background:linear-gradient(180deg,transparent,var(--accent-soft))}
.chart-col .pt{position:absolute;left:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);transition:transform .15s}
.chart-col:hover .pt,.chart-col:focus .pt{transform:scale(1.5)}
.chart-col .xl{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:12px;color:var(--muted)}
.chart-col .tip{position:absolute;left:50%;top:8px;transform:translateX(-50%);background:var(--ink);color:var(--bg);font-size:12px;padding:6px 10px;border-radius:var(--r-sm);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:2;text-align:center}
.chart-col .tip b{display:block}
.chart-col:hover .tip,.chart-col:focus .tip{opacity:1}
.segbar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--surface-2);gap:2px}
.segbar i{display:block;min-width:4px;background:currentColor;transition:flex .6s ease}
.legend{list-style:none;margin:16px 0 0;padding:0}
.legend a{display:flex;align-items:center;gap:10px;padding:8px;margin:0 -8px;border-radius:var(--r-sm);color:var(--ink);font-size:13.5px}
.legend a:hover{background:var(--hover);text-decoration:none}
.legend i{width:8px;height:8px;border-radius:3px;background:currentColor;flex:none}
.legend b{margin-left:auto;font-variant-numeric:tabular-nums}
.c-New{color:var(--info)}.c-In-Progress{color:#f59e0b}.c-Quoted{color:var(--violet)}.c-Won{color:#22c55e}.c-Lost{color:#ef4444}.c-Cancelled{color:var(--muted)}
.split{display:flex;flex-direction:column;gap:16px}
.split .row{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:8px}
.meter{height:6px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:999px}
.feed{list-style:none;margin:0;padding:0}
.feed li{display:flex;gap:12px;padding:10px 0;font-size:13.5px;position:relative}
.feed li + li{border-top:1px solid var(--line-2)}
.feed .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:7px;flex:none;box-shadow:0 0 0 3px var(--accent-soft)}
.feed small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.shortcuts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:24px}
.shortcut{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 13.5px var(--font);cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s;text-align:left}
.shortcut:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--sh-2);text-decoration:none}
.shortcut span{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);flex:none}

/* legacy helpers still used on some screens */
.grid-2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.grid-2e{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:24px;align-items:start}

/* ---------- lists & tables ---------- */
.tabs{display:inline-flex;gap:2px;flex-wrap:wrap;margin:16px 20px 0;padding:3px;background:var(--surface-2);border-radius:10px}
.tabs button{border:0;background:transparent;height:30px;padding:0 12px;border-radius:7px;font:500 13px var(--font);color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:8px;transition:color .15s,background .15s}
.tabs button:hover{color:var(--ink)}
.tabs button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.tabs button .n{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:16px 20px}
.toolbar .grow{flex:1;min-width:200px}
.tbl-wrap{overflow:auto;max-height:72vh}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.tbl th{position:sticky;top:0;z-index:1;text-align:left;font-size:12px;color:var(--muted);font-weight:500;padding:10px 12px;background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);white-space:nowrap;user-select:none}
.tbl th.sortable{cursor:pointer}.tbl th.sortable:hover{color:var(--ink)}
.tbl th[data-dir]{color:var(--ink)}
.tbl th[data-dir]::after{content:"↑";margin-left:6px;font-size:11px}
.tbl th[data-dir="desc"]::after{content:"↓"}
.tbl td{padding:14px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl th:first-child,.tbl td:first-child{padding-left:20px}
.tbl th:last-child,.tbl td:last-child{padding-right:20px}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr[data-href]{cursor:pointer}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr[data-href]:hover{background:var(--hover)}
.tbl tbody tr[data-href]:hover .ref{color:var(--accent-ink)}
.tbl .ref{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl .sub{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.pager div{display:flex;gap:8px}
.list-foot{display:flex;justify-content:flex-end;gap:12px;align-items:center;padding:12px 20px;border-top:1px solid var(--line);font-size:13px}
.empty{padding:56px 24px;text-align:center;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:4px}
.empty .i{width:40px;height:40px;padding:10px;border-radius:var(--r);background:var(--surface-2);color:var(--muted);margin-bottom:8px;box-sizing:border-box}
.empty b{display:block;color:var(--ink);font-size:14px}
.empty span{font-size:13px}

/* ---------- status chips ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:22px;font:500 12px var(--font);padding:0 8px;border-radius:6px;white-space:nowrap;background:var(--grey-bg);color:var(--grey);letter-spacing:0}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.New,.chip.Draft,.chip.International{background:var(--info-bg);color:var(--info)}
.chip.In-Progress,.chip.Scheduled,.chip.UAE,.chip.High{background:var(--warn-bg);color:var(--warn)}
.chip.Quoted,.chip.Invoiced{background:var(--violet-bg);color:var(--violet)}
.chip.Won,.chip.Delivered,.chip.Closed,.chip.Pakistan{background:var(--ok-bg);color:var(--ok)}
.chip.Confirmed{background:var(--teal-bg);color:var(--teal)}
.chip.Lost,.chip.Cancelled,.chip.Urgent{background:var(--err-bg);color:var(--err)}
.chip.z{background:var(--accent-soft);color:var(--accent-ink)}

/* ---------- forms ---------- */
label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:500;color:var(--ink-2)}
input,select,textarea{font:400 14px var(--font);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-sm);padding:0 12px;height:36px;background:var(--surface);width:100%;outline:none;transition:border-color .15s,box-shadow .15s;box-shadow:var(--sh-1)}
select{appearance:none;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
textarea{padding:8px 12px;height:auto;min-height:88px;resize:vertical;line-height:1.5}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--line) 50%,var(--muted))}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:var(--ring)}
input:user-invalid,select:user-invalid{border-color:var(--err)}
.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.form-grid .span2{grid-column:span 2}.form-grid .span4{grid-column:1/-1}
.form-grid h3{grid-column:1/-1;font:600 13px var(--font);letter-spacing:0;color:var(--ink);display:flex;align-items:center;gap:12px;margin-top:16px}
.form-grid h3::after{content:"";flex:1;height:1px;background:var(--line)}
.form-grid h3:first-child{margin-top:0}
.check{flex-direction:row;align-items:center;gap:8px;align-self:end;height:36px}
.check input{width:16px;height:16px;padding:0;accent-color:var(--accent);box-shadow:none}
.editor{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.editor-side{position:sticky;top:calc(var(--top-h) + 24px);display:flex;flex-direction:column;gap:16px}
.editor-side .kv{grid-template-columns:80px 1fr;font-size:13px;margin-bottom:16px}
.editor-side .totals{width:100%;margin:0 0 16px;padding-top:16px;border-top:1px solid var(--line)}
.editor-side .btn + .btn{margin-top:8px}

.items{width:100%;border-collapse:collapse;min-width:820px}
.items th{font-size:12px;font-weight:500;color:var(--muted);text-align:left;padding:8px 4px}
.items td{padding:4px}
.items input,.items select{box-shadow:none}
.items .num{text-align:right}
.items .lt{font-weight:600;text-align:right;white-space:nowrap;padding-right:8px;font-variant-numeric:tabular-nums}
.totals{margin-left:auto;width:min(320px,100%);display:flex;flex-direction:column;gap:8px;margin-top:16px;font-size:13.5px}
.totals div{display:flex;justify-content:space-between;align-items:center;gap:12px}
.totals .grand{border-top:1px solid var(--line);padding-top:12px;margin-top:4px;font:700 18px var(--display);letter-spacing:-.02em}
.totals input{width:112px;height:32px;text-align:right}

/* ---------- detail ---------- */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.detail>*{min-width:0}
.kv{display:grid;grid-template-columns:136px 1fr;gap:12px 16px;font-size:13.5px;margin:0}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:500}
.steps{display:flex;margin:0 0 24px;overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 8px;box-shadow:var(--sh-1)}
.steps div{flex:1;min-width:104px;text-align:center;font-size:12.5px;font-weight:500;color:var(--muted);position:relative;padding-top:28px}
.steps div::before{content:"";position:absolute;top:4px;left:50%;width:16px;height:16px;border-radius:50%;background:var(--surface);border:2px solid var(--line);transform:translateX(-50%);z-index:1;box-sizing:border-box}
.steps div::after{content:"";position:absolute;top:11px;left:-50%;width:100%;height:2px;background:var(--line)}
.steps div:first-child::after{display:none}
.steps div.done{color:var(--ink)}
.steps div.done::before{background:var(--accent);border-color:var(--accent)}
.steps div.done::after{background:var(--accent)}
.steps div.cur{color:var(--accent-ink);font-weight:600}
.steps div.cur::before{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.zbox{display:flex;flex-direction:column;gap:12px}
.zbox h4{font:600 13.5px var(--font);letter-spacing:0;display:flex;align-items:center;gap:8px}
.zbox h4 .i{color:var(--accent)}

/* ---------- overlays ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(8,12,21,.5);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px;z-index:100;overflow:auto;animation:fade .15s}
.modal{background:var(--surface);border-radius:var(--r-lg);width:min(960px,100%);box-shadow:var(--sh-3);animation:rise .18s ease-out}
.modal.sm{width:min(440px,100%)}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 16px 24px;border-bottom:1px solid var(--line)}
.modal-h h3{font-size:16px}
.modal-b{padding:24px;max-height:68vh;overflow:auto}
.modal-b p{margin:0;color:var(--ink-2)}
.modal-f{display:flex;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--line);flex-wrap:wrap}
@keyframes slidein{from{transform:translateX(32px);opacity:0}to{transform:none;opacity:1}}
.modal-bg.drawer{padding:0;justify-content:flex-end;align-items:stretch;overflow:hidden}
.drawer .modal{width:min(560px,100%);border-radius:0;display:flex;flex-direction:column;animation:slidein .22s ease-out;height:100%}
.drawer .modal-b{flex:1;max-height:none}
.drawer .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.drawer .form-grid .span4{grid-column:1/-1}
.toasts{position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;gap:8px;z-index:200}
.toast{display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;box-shadow:var(--sh-3);font-size:13.5px;font-weight:500;max-width:420px;animation:rise .2s ease-out}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;background:#3ddc84;flex:none}
.toast.err::before{background:#ff6b5e}
.alert{padding:12px 16px;border-radius:var(--r-sm);font-size:13.5px}
.alert.err{background:var(--err-bg);color:var(--err)}.alert.ok{background:var(--ok-bg);color:var(--ok)}.alert.info{background:var(--info-bg);color:var(--info)}

/* ---------- loading ---------- */
.sk,.loader{border-radius:var(--r);background:linear-gradient(90deg,var(--surface-2) 25%,var(--hover) 37%,var(--surface-2) 63%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}
.loader{height:240px;margin:20px;font-size:0;animation:shimmer 1.3s linear infinite!important}
.sk-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}

/* ---------- sign-in & installer ---------- */
.auth-body{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--surface)}
.auth-art{position:relative;overflow:hidden;background:var(--hero-art);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:48px}
.auth-art .brand{padding:0;height:auto}
.auth-art h2{font-size:40px;line-height:1.1;font-weight:700;color:#fff;max-width:14ch}
.auth-art p{color:#b6c2de;max-width:44ch;margin:16px 0 0;font-size:15px}
.auth-art ul{list-style:none;padding:0;margin:0;display:flex;gap:8px;flex-wrap:wrap}
.auth-art li{font-size:12.5px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:#d7def0}
.auth-pane{display:grid;place-items:center;padding:32px 24px}
.auth-card{width:min(360px,100%);display:flex;flex-direction:column;gap:16px}
.auth-card.wide{width:min(640px,100%)}
.auth-card.wide .form-grid{grid-template-columns:1fr 1fr}
.auth-logo{width:120px}
.auth-card h1{font-size:24px;font-weight:700}
.auth-card .btn,.auth-card input,.auth-card select{height:40px}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.dash,.grid-2,.grid-2e,.detail,.editor{grid-template-columns:minmax(0,1fr)}
  .editor-side{position:static}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shortcuts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .view{padding:24px 24px 64px}
}
@media (max-width:860px){
  :root{--side-w:264px!important}
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .22s ease}
  .sidebar.open{transform:none;box-shadow:0 0 80px rgba(0,0,0,.5)}
  .sidebar.open + .scrim{display:block;position:fixed;inset:0;background:rgba(8,12,21,.5);z-index:35;animation:fade .2s}
  .nav-collapsed .brand-t,.nav-collapsed .nav-a span{display:block}.nav-collapsed .nav-sec{display:block}
  .nav-collapsed .nav-a{justify-content:flex-start;padding:0 10px}.nav-collapsed .brand{justify-content:flex-start;padding:0 16px}
  .nav-collapsed .zoho-pill{font-size:12px;gap:10px;justify-content:flex-start;padding:0 13px}
  #collapseBtn{display:none}
  .menu-btn{display:grid}.topbar{padding:0 12px;gap:8px}.crumbs{display:none}.search{width:auto;flex:1;margin-left:0}.search kbd{display:none}
  #quickBtn span{display:none}
  .view{padding:20px 16px 64px}.page-h h2{font-size:20px}
  .kpis{gap:12px}.kpi .v{font-size:24px}
  .form-grid,.drawer .form-grid{grid-template-columns:minmax(0,1fr)}.form-grid .span2{grid-column:auto}
  .shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .btn,input,select,.tabs button,.nav-a{height:44px}.btn.sm{height:36px}.icon-btn{width:44px;height:44px}.icon-btn.sm{width:36px;height:36px}
  .tabs{display:flex;overflow-x:auto;flex-wrap:nowrap}
  .kv{grid-template-columns:112px 1fr}
  .auth-body{grid-template-columns:1fr}.auth-art{display:none}
  .menu{position:fixed;left:12px;right:12px;top:64px;min-width:0}
}
@media (max-width:480px){.kpis{grid-template-columns:minmax(0,1fr)}}
.due-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ds{padding:10px 12px;border-radius:10px;background:var(--surface-2);min-width:0}
.ds span{display:block;font-size:12px;color:var(--muted)}
.ds b{display:block;font-size:13.5px;font-variant-numeric:tabular-nums;margin-top:2px;overflow-wrap:anywhere}
.ds.od{background:var(--err-bg)}.ds.od span,.ds.od b{color:var(--err)}
.ds.wk{background:var(--warn-bg)}.ds.wk span,.ds.wk b{color:var(--warn)}
#dueRow:empty{display:none}
.due-tbl .sub{margin-top:4px}
@media (max-width:480px){.due-stats{grid-template-columns:minmax(0,1fr)}}
a.kpi{display:block;color:inherit;text-decoration:none!important}
.items{min-width:660px}
.crumbs .i{width:14px;height:14px;display:block}
.items td{vertical-align:top}
.items .lt{padding-top:12px}
.items .icon-btn{color:var(--muted)}
.tbl th.right{text-align:right}
.items th:nth-child(2){width:104px!important}.items th:nth-child(3){width:92px!important}.items th:nth-child(4){width:64px!important}
.items th:nth-child(5){width:100px!important}.items th:nth-child(6){width:112px!important}.items th:nth-child(7){width:36px!important}

/* =====================================================================
   v2.1 — colour themes (palettes) · default: Ocean
   ===================================================================== */
:root{
  --accent-2:#22b8cf; --accent-on:#fff; --side-accent:#8fb0ff;
  --hero:radial-gradient(120% 140% at 100% 0%,#1b3a8f 0%,#0b1430 55%,#0a1124 100%);
  --hero-art:radial-gradient(90% 70% at 15% 10%,#1b3a8f 0%,transparent 60%),radial-gradient(70% 60% at 100% 100%,#0d5d6b 0%,transparent 60%),#070c1a;
}

/* Ocean — deep teal, sea-green accent, gold details (default) */
:root[data-palette="ocean"]{
  --bg:#f4f7f7; --surface-2:#f0f4f4; --hover:#ecf2f2; --line:#e1e8e8; --line-2:#ebf0f0;
  --accent:#0f8a83; --accent-ink:#0b6f69; --accent-soft:#e2f4f2; --accent-2:#c9a24a; --side-accent:#5eead4;
  --side:#06242a; --side-2:#0c3a41; --side-ink:#c9dfdf; --side-muted:#7fa3a5; --side-line:rgba(255,255,255,.08);
  --btn:#06242a;
  --hero:radial-gradient(120% 140% at 100% 0%,#127a74 0%,#0a3c42 52%,#06242a 100%);
  --hero-art:radial-gradient(90% 70% at 15% 10%,#127a74 0%,transparent 60%),radial-gradient(70% 60% at 100% 100%,#8a6a22 0%,transparent 55%),#05191d;
  --r:14px; --r-lg:18px;
}
:root[data-palette="ocean"][data-theme="dark"]{
  --bg:#061316; --surface:#0b1d21; --surface-2:#10262b; --hover:#132d33; --line:#1a353b; --line-2:#14292e;
  --accent:#2cc2b5; --accent-ink:#6ee7da; --accent-soft:#0d2f30; --accent-on:#04201f;
  --side:#04161a; --side-2:#0b2a30; --btn:#e6f4f2;
}

/* Royal — SYROS navy & gold */
:root[data-palette="royal"]{
  --bg:#f6f6f3; --surface-2:#f3f2ed; --hover:#efeee7; --line:#e6e3d9; --line-2:#efede6;
  --accent:#1e3a8a; --accent-ink:#1e3a8a; --accent-soft:#e8ecf7; --accent-2:#c9a24a; --side-accent:#e3b75a;
  --side:#0b1a3d; --side-2:#15295a; --side-ink:#d3d9e8; --side-muted:#8b97b5; --side-line:rgba(227,183,90,.14);
  --btn:#0b1a3d;
  --hero:linear-gradient(135deg,#132b66 0%,#0b1a3d 60%,#0b1a3d 100%);
  --hero-art:radial-gradient(80% 60% at 20% 10%,#1d3b8a 0%,transparent 60%),radial-gradient(60% 50% at 100% 100%,#8a6a22 0%,transparent 60%),#071230;
  --display:'Playfair Display','Manrope',Georgia,serif;
}
:root[data-palette="royal"][data-theme="dark"]{
  --bg:#080d1c; --surface:#0e1630; --surface-2:#131d3b; --hover:#172343; --line:#1f2b4d; --line-2:#18223f;
  --accent:#e3b75a; --accent-ink:#f0cd7f; --accent-soft:#2a2414; --accent-on:#1a1405;
  --side:#060c1f; --side-2:#12204a; --btn:#f3ead2;
}
:root[data-palette="royal"] .kpi.hero .s{color:#e3c27a}
:root[data-palette="royal"] h1,:root[data-palette="royal"] h2{letter-spacing:-.01em}

/* Graphite — light sidebar, charcoal & indigo */
:root[data-palette="graphite"]{
  --bg:#fafafa; --surface-2:#f4f4f5; --hover:#f1f1f3; --line:#e4e4e7; --line-2:#efeff1;
  --ink:#18181b; --ink-2:#3f3f46; --muted:#71717a;
  --accent:#4f46e5; --accent-ink:#4338ca; --accent-soft:#eef0ff; --accent-2:#06b6d4; --side-accent:#4f46e5;
  --side:#ffffff; --side-2:#f1f1f4; --side-ink:#3f3f46; --side-muted:#8a8a94; --side-line:#e4e4e7;
  --btn:#18181b;
  --hero:linear-gradient(135deg,#27272a 0%,#18181b 100%);
  --hero-art:radial-gradient(80% 60% at 20% 10%,#3730a3 0%,transparent 60%),radial-gradient(60% 50% at 100% 100%,#0e7490 0%,transparent 60%),#0c0c0f;
  --r:10px; --r-lg:14px;
}
:root[data-palette="graphite"][data-theme="dark"]{
  --bg:#09090b; --surface:#111113; --surface-2:#18181b; --hover:#1c1c20; --line:#27272a; --line-2:#1f1f23;
  --ink:#fafafa; --ink-2:#d4d4d8; --muted:#a1a1aa;
  --accent:#818cf8; --accent-ink:#a5b4fc; --accent-soft:#1e1b4b; --accent-on:#0b0a24; --side-accent:#818cf8;
  --side:#0c0c0e; --side-2:#1c1c20; --side-ink:#d4d4d8; --side-muted:#71717a; --side-line:#1f1f23;
  --btn:#fafafa;
}
:root[data-palette="graphite"]:not([data-theme="dark"]) .brand b{color:var(--ink)}
:root[data-palette="graphite"]:not([data-theme="dark"]) .nav-a:hover{background:var(--side-2);color:var(--ink)}
:root[data-palette="graphite"]:not([data-theme="dark"]) .nav-a.on{background:var(--side-2);color:var(--ink);box-shadow:none}
:root[data-palette="graphite"]:not([data-theme="dark"]) .zoho-pill.on{color:var(--ink-2)}
:root[data-palette="graphite"] .brand span{color:var(--accent)}

/* Sunset — warm sand, terracotta accent */
:root[data-palette="sunset"]{
  --bg:#faf7f3; --surface-2:#f6f1ea; --hover:#f3ece3; --line:#ebe2d6; --line-2:#f2ebe1;
  --ink:#1f1a17; --ink-2:#4a403a; --muted:#7a6e66;
  --accent:#c2410c; --accent-ink:#9a3412; --accent-soft:#fdeee4; --accent-2:#d97706; --side-accent:#fdba74;
  --side:#1f1a17; --side-2:#2f2723; --side-ink:#e7ddd4; --side-muted:#a1938a; --side-line:rgba(255,255,255,.07);
  --btn:#1f1a17;
  --hero:radial-gradient(120% 140% at 100% 0%,#9a3412 0%,#3a1f14 55%,#1f1a17 100%);
  --hero-art:radial-gradient(80% 60% at 20% 10%,#9a3412 0%,transparent 60%),radial-gradient(60% 50% at 100% 100%,#b45309 0%,transparent 60%),#140f0c;
  --r:14px; --r-lg:18px;
}
:root[data-palette="sunset"][data-theme="dark"]{
  --bg:#110d0b; --surface:#1a1412; --surface-2:#221a17; --hover:#28201c; --line:#33281f; --line-2:#291f1a;
  --ink:#f6efe8; --ink-2:#dccfc3; --muted:#a39488;
  --accent:#fb923c; --accent-ink:#fdba74; --accent-soft:#3a1d0e; --accent-on:#2a1205;
  --side:#0d0a08; --side-2:#241c18; --btn:#f6efe8;
}

/* theme menu */
.theme-modes{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px 6px 8px}
.theme-modes button{justify-content:center;border:1px solid var(--line)!important}
.theme-modes button.on{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent!important}
.swatch{display:flex!important;align-items:center;gap:12px}
.swatch i{display:flex;width:36px;height:22px;border-radius:6px;overflow:hidden;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.swatch i b{flex:1}
.swatch .ck{margin-left:auto;color:var(--accent);visibility:hidden}
.swatch.on .ck{visibility:visible}
.swatch small{display:block;font-size:12px;color:var(--muted);font-weight:400}

/* SYROS — brand palette taken from the logo (navy #00183c · royal blue #003c82 · gold #e6aa3c) — default */
:root[data-palette="syros"]{
  --bg:#f4f6fa; --surface-2:#eff2f8; --hover:#eaeef6; --line:#e0e5ee; --line-2:#ebeff5;
  --ink:#0a1733; --ink-2:#34425e; --muted:#5f6b84;
  --accent:#0b4a9c; --accent-ink:#003c82; --accent-soft:#e5edf9; --accent-2:#e6aa3c; --side-accent:#f0b43c;
  --side:#00183c; --side-2:#0a2c5c; --side-ink:#cdd7ea; --side-muted:#8392b3; --side-line:rgba(240,180,60,.14);
  --btn:#00183c;
  --hero:radial-gradient(120% 140% at 100% 0%,#0b4a9c 0%,#002454 55%,#00183c 100%);
  --hero-art:radial-gradient(85% 65% at 15% 10%,#0b4a9c 0%,transparent 60%),radial-gradient(60% 50% at 100% 100%,#b4821e 0%,transparent 60%),#000c24;
  --r:14px; --r-lg:18px;
}
:root[data-palette="syros"][data-theme="dark"]{
  --bg:#020b1c; --surface:#071631; --surface-2:#0b1d3d; --hover:#0f2347; --line:#16294f; --line-2:#102142;
  --ink:#eef2fa; --ink-2:#c4cee2; --muted:#8a98b6;
  --accent:#f0b43c; --accent-ink:#f5c766; --accent-soft:#2a210c; --accent-on:#1a1205;
  --side:#000c24; --side-2:#0a2550; --btn:#eef2fa;
}
:root[data-palette="syros"] .btn.gold{background:linear-gradient(180deg,#f2bc4e,#e6aa3c);border-color:#d39a2c;color:#00183c;box-shadow:0 1px 2px rgba(180,130,30,.35),inset 0 1px 0 rgba(255,255,255,.35)}
:root[data-palette="syros"] .btn.gold:hover{filter:brightness(1.04)}
:root[data-palette="syros"] .kpi.hero .s{color:#f5c766}
:root[data-palette="syros"] .brand span{color:#f0b43c}

/* =====================================================================
   v3.0 — compact "bento" dashboard
   ===================================================================== */
.hello{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.hello h2{font-size:22px;font-weight:700;line-height:1.2}
.eyebrow{margin:0 0 4px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
.quick{display:flex;gap:6px;flex-wrap:wrap}
.qa{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:500;transition:border-color .15s,transform .15s,box-shadow .15s}
.qa .i{color:var(--accent);width:15px;height:15px}
.qa:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--sh-2)}

.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.bento>*{min-width:0}
.span-3,.tile{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}.span-12{grid-column:1/-1}
.due-slot:empty{display:none}
.w{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;transition:box-shadow .2s,transform .2s,border-color .2s;height:100%}
.w:hover{box-shadow:var(--sh-2)}
.w-h{display:flex;align-items:center;gap:8px;min-height:24px}
.w-h h3{font-size:13px;font-weight:700;letter-spacing:0;flex:1;min-width:0}
.w-ic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);flex:none}
.w-ic .i{width:14px;height:14px}
.w-tools{display:flex;align-items:center;gap:6px}
.w-empty{display:flex;align-items:center;gap:8px;margin:auto 0;color:var(--muted);font-size:13px}
.w-empty .i{color:var(--ok)}
.w-more{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px;height:32px;border:0;border-radius:8px;background:var(--surface-2);color:var(--ink-2);font:500 12.5px var(--font);cursor:pointer;transition:background .15s,color .15s}
.w-more:hover{background:var(--accent-soft);color:var(--accent-ink)}
.w-more .i{width:14px;height:14px;transition:transform .15s}.w-more:hover .i{transform:translateX(3px)}
.w-connect{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13.5px}
.w-connect span{display:flex;align-items:center;gap:8px}

/* stat tiles */
.tile{display:flex;flex-direction:column;gap:4px;padding:16px;min-height:112px;color:var(--ink);text-decoration:none!important}
.tile:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.tile::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%);pointer-events:none}
.t-l{font-size:12px;font-weight:500;color:var(--muted)}
.t-v{font:700 26px/1.1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:6px}
.t-s{font-size:12px;color:var(--muted);margin-top:auto}
.t-s em{font-style:normal;font-weight:600;padding:1px 6px;border-radius:6px;margin-left:4px}
.t-s em.up{background:var(--ok-bg);color:var(--ok)}.t-s em.down{background:var(--err-bg);color:var(--err)}
.t-ic{position:absolute;right:14px;top:14px;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);color:var(--accent-ink)}
.t-ring{position:absolute;right:14px;top:14px;width:36px;height:36px;transform:rotate(-90deg)}
.t-ring circle{fill:none;stroke-width:4;stroke:var(--line)}.t-ring .p{stroke:var(--accent-2);stroke-linecap:round;transition:stroke-dashoffset 1s ease}
.tile.hero{background:var(--hero);border-color:transparent;color:#fff}
.tile.hero .t-l{color:rgba(255,255,255,.7)}.tile.hero .t-s{color:rgba(255,255,255,.8);position:relative;z-index:1}
.tile.hero::after{background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%)}
.tile.hero .t-s em.up{background:rgba(61,220,132,.18);color:#7ff0b0}.tile.hero .t-s em.down{background:rgba(255,107,94,.2);color:#ffb3aa}
.t-spark{position:absolute;left:0;right:0;bottom:0;width:100%;height:46px;opacity:.9}
.t-spark path{fill:none;stroke:var(--side-accent);stroke-width:2;vector-effect:non-scaling-stroke}
.t-spark .sa{fill:var(--side-accent);opacity:.14;stroke:none}

/* bar chart */
.cols{display:flex;align-items:flex-end;gap:10px;height:140px;padding-top:8px}
.col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;outline:none}
.col i{display:block;width:100%;max-width:34px;border-radius:8px 8px 4px 4px;background:color-mix(in srgb,var(--accent) 22%,var(--surface-2));transition:background .2s,height .6s cubic-bezier(.2,.8,.2,1)}
.col.now i{background:linear-gradient(180deg,var(--accent-2),var(--accent))}
.col:hover i,.col:focus i{background:var(--accent)}
.col em{font-style:normal;font-size:11.5px;color:var(--muted);margin-top:6px}
.col .tip{position:absolute;bottom:calc(100% - 8px);left:50%;transform:translate(-50%,4px);background:var(--ink);color:var(--bg);font-size:11.5px;padding:5px 8px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;text-align:center;z-index:2}
.col .tip b{display:block}
.col:hover .tip,.col:focus .tip{opacity:1;transform:translate(-50%,0)}

/* donut */
.donut-wrap{display:flex;align-items:center;gap:16px}
.donut{width:112px;height:112px;flex:none;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:12}
.donut .dn-bg{stroke:var(--surface-2)}
.donut .dn{stroke:currentColor;transition:stroke-dasharray .8s ease}
.donut text{transform:rotate(90deg);transform-origin:50px 50px;text-anchor:middle;fill:var(--ink)}
.donut .dn-v{font:700 20px var(--display)}.donut .dn-l{font-size:9px;fill:var(--muted)}
.mini-legend{list-style:none;margin:0;padding:0;flex:1;min-width:0;display:grid;gap:2px}
.mini-legend a{display:flex;align-items:center;gap:8px;padding:3px 6px;margin:0 -6px;border-radius:6px;font-size:12.5px;color:var(--ink)}
.mini-legend a:hover{background:var(--hover);text-decoration:none}
.mini-legend i{width:8px;height:8px;border-radius:3px;background:currentColor;flex:none}
.mini-legend b{margin-left:auto;font-variant-numeric:tabular-nums}

/* regions */
.regions{display:flex;flex-direction:column;gap:12px}
.rg-h{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:6px}
.rg-h b{font-variant-numeric:tabular-nums}
.rg small{display:block;font-size:11px;color:var(--muted);margin-top:4px}

/* lists */
.tl,.mini,.due-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.tl a,.mini a,.due-list a{display:flex;align-items:center;gap:10px;padding:7px 8px;margin:0 -8px;border-radius:8px;color:var(--ink);transition:background .12s}
.tl a:hover,.mini a:hover,.due-list a:hover{background:var(--hover);text-decoration:none}
.cal{width:38px;height:40px;flex:none;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-ink);background:var(--accent-soft);line-height:1.1}
.cal b{font:700 15px var(--display);color:var(--ink);letter-spacing:0}
.tl-t,.mini-t{flex:1;min-width:0;display:flex;flex-direction:column}
.tl-t b,.mini-t b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-t small,.mini-t small{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-r{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.mini-r b{font-size:12.5px}
.mini-r .chip,.tl .chip{height:20px;font-size:11px;padding:0 6px}
.mini-feed li{padding:6px 0;font-size:12.5px}.mini-feed small{font-size:11px}.mini-feed .dot{margin-top:6px}

/* receivables / payables */
.due-head{display:flex;gap:12px;align-items:stretch}
.due-head>div{flex:1;min-width:0}
.due-total{display:block;font:700 22px/1.15 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:2px;overflow-wrap:anywhere}
.due-od{padding:8px 12px;border-radius:10px;background:var(--err-bg);color:var(--err)}
.due-od .t-l{color:inherit;opacity:.85}
.due-od b{display:block;font:700 15px var(--display);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.due-od small{font-size:11px;opacity:.85}
.due-od.ok{background:var(--ok-bg);color:var(--ok)}
.aging{display:flex;height:8px;border-radius:999px;overflow:hidden;gap:2px;background:var(--surface-2)}
.aging i{display:block;min-width:4px;transition:flex .6s ease}
.b60{background:#b42318}.b30{background:#ef4444}.b1{background:#f97316}.b7{background:#f5b301}.bl{background:color-mix(in srgb,var(--accent) 55%,var(--surface-2))}
.aging-key{list-style:none;margin:-4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--muted)}
.aging-key li{display:flex;align-items:center;gap:5px}
.aging-key li.zero{opacity:.5}
.aging-key i{width:8px;height:8px;border-radius:3px}
.aging-key b{color:var(--ink);font-weight:600}
.due-tbl .sub{margin-top:4px}

@media (max-width:1180px){.tile{grid-column:span 6}.span-3,.span-4,.span-5{grid-column:span 6}.span-6{grid-column:1/-1}}
@media (max-width:720px){.bento{gap:10px}.tile{grid-column:span 6;min-height:100px;padding:14px}.t-v{font-size:22px}.span-3,.span-4,.span-5,.span-6{grid-column:1/-1}.qa span{display:none}.qa{width:38px;padding:0;justify-content:center}.due-head{flex-direction:column}}
@media (max-width:380px){.tile{grid-column:1/-1}}

/* =====================================================================
   v4.0 — document flow, product search, vessel & port block
   ===================================================================== */
.flow{display:flex;align-items:center;gap:6px;margin:0 0 20px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);overflow-x:auto}
.fl{display:flex;align-items:center;gap:10px;flex:1;min-width:150px;padding:8px 10px;border-radius:9px;color:var(--muted);text-decoration:none!important;transition:background .15s}
a.fl:hover{background:var(--hover)}
.fl-n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--display);background:var(--surface-2);color:var(--muted);flex:none}
.fl-t{display:flex;flex-direction:column;min-width:0}.fl-t b{font-size:12.5px;color:inherit;white-space:nowrap}.fl-t small{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl.done{color:var(--ink)}.fl.done .fl-n{background:var(--accent);color:#fff}
.fl.cur{background:var(--accent-soft);color:var(--accent-ink)}.fl.cur .fl-n{background:var(--accent-2);color:var(--side)}
.fl-arrow{color:var(--line);flex:none}.fl-arrow .i{width:14px;height:14px;color:var(--muted);opacity:.5}

.pp-add{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:0 12px;height:44px;border:1.5px dashed color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--accent-soft) 45%,var(--surface));transition:border-color .15s,background .15s}
.pp-add:focus-within{border-style:solid;border-color:var(--accent);background:var(--surface)}
.pp-add .i{color:var(--accent);flex:none}
.pp-add input{border:0;background:transparent;box-shadow:none!important;height:40px;padding:0}
.pp-cell{min-width:240px}
.pp-tag{display:block;font-size:11px;color:var(--muted);margin:3px 2px 0;min-height:14px}
.pp-pop{position:fixed;z-index:300;background:var(--surface);border-radius:12px;box-shadow:var(--sh-3);padding:6px;max-height:340px;overflow:auto;animation:rise .12s ease-out}
.pp-o{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;border:0;background:transparent;border-radius:8px;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.pp-o.on,.pp-o:hover{background:var(--accent-soft)}
.pp-c{flex:none;min-width:84px;font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent-ink)}
.pp-m{display:flex;flex-direction:column;min-width:0}.pp-m b{font-size:13px;font-weight:600}.pp-m small{font-size:11.5px;color:var(--muted)}
.pp-o mark{background:color-mix(in srgb,var(--accent-2) 35%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.pp-custom{border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:4px;color:var(--accent-ink);font-size:13px}
.pp-custom .i{width:15px;height:15px}
.pp-none{padding:12px;color:var(--muted);font-size:13px}
.pp-foot{padding:6px 10px 2px;font-size:11px;color:var(--muted);border-top:1px solid var(--line-2);margin-top:4px}
.items.noprice{min-width:560px}

.vp{display:grid;grid-template-columns:2fr 1fr 2fr;gap:12px}
.vp>div{padding:12px 14px;border-radius:10px;background:var(--surface-2);display:flex;flex-direction:column;gap:4px;min-width:0}
.vp span{font-size:12px;color:var(--muted)}.vp b{font-size:15px;overflow-wrap:anywhere}
.vp .chip{align-self:flex-start}
.linked{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-2);color:var(--ink)}
.linked:last-child{border-bottom:0}.linked:hover{text-decoration:none;color:var(--accent-ink)}
.linked>span{display:flex;align-items:center;gap:8px}.linked small{display:block;color:var(--muted);font-size:12px}
.linked>span:first-child{flex-direction:column;align-items:flex-start;gap:0}
@media (max-width:720px){.vp{grid-template-columns:1fr}.fl{min-width:132px}}