/* WorkHub theme layer: one place for the shared look of the shell, mail, tasks,
   freight, rental and admin screens. Loaded last; it only restyles, never moves
   actions or hides content. High-tech first: deep navy chrome, cyan light lines,
   DIN-style figures. Pixel art survives only as small signatures (the sidebar
   wordmark, the 2x2 mark before page titles and the square label bullet). */

@font-face{
  font-family:"WorkHub Pixel";
  src:url("/workhub-pixel.ttf") format("truetype");
  font-display:swap;
  unicode-range:U+0020-007E,U+00A0,U+00B7,U+00D7,U+2022,U+2192;
}

html[data-theme]{
  --wh-font:"Segoe UI Variable Text","Segoe UI","Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  --wh-tech:"Bahnschrift","DIN Alternate","Segoe UI Variable Display","Segoe UI","Microsoft YaHei",sans-serif;
  --wh-pixel:"WorkHub Pixel","Cascadia Mono",Consolas,"Microsoft YaHei",monospace;
  --wh-radius:12px;
  --wh-radius-sm:8px;
  --wh-cyan:#4dbdd3;
  --wh-grid:rgba(70,112,170,.06);
  --wh-glow:rgba(70,112,170,.26);
  --wh-ease:cubic-bezier(.2,.7,.2,1);
  /* Design tokens. Type scale: the only sizes new UI should use; 12px is the floor. */
  --wh-fs-xs:12px;--wh-fs-sm:13px;--wh-fs-md:14px;--wh-fs-lg:16px;--wh-fs-xl:20px;--wh-fs-2xl:24px;
  --wh-lh-tight:1.25;--wh-lh-body:1.55;
  --wh-fw-regular:400;--wh-fw-medium:550;--wh-fw-bold:650;
  /* Spacing on a 4px grid. */
  --wh-space-1:4px;--wh-space-2:8px;--wh-space-3:12px;--wh-space-4:16px;--wh-space-5:20px;--wh-space-6:24px;--wh-space-8:32px;
  --wh-radius-xs:4px;--wh-radius-lg:16px;--wh-radius-pill:999px;
  --wh-control-h:36px;--wh-control-h-sm:30px;
  /* Semantic colours: modules use these names, skins decide the values. */
  --wh-fg:var(--txt);--wh-fg-muted:var(--dim);--wh-bg:var(--bg);--wh-surface:var(--panel);--wh-surface-raised:var(--surface1);
  --wh-border:var(--line);--wh-accent:var(--acc);--wh-success:var(--ok);--wh-warning:var(--warn);--wh-danger:var(--hot);
}
html[data-theme="light"]{
  --bg:#edf1f8;--line:#d8e1ee;--txt:#0b1424;--dim:#56657c;
  --acc:#4670aa;--acc2:#365a92;--active:#e8f0ff;--on-active:#2c4f86;
  --surface0:#f3f6fb;--surface1:#fff;--surface2:#eef3fa;--surface3:#f8fafd;
  --hero1:#f3f7ff;--hero2:#fff;--primary1:#1d7a8f;--primary2:#4670aa;
  --shadow:0 1px 2px rgba(11,20,36,.04),0 6px 18px rgba(11,20,36,.05);
}
html[data-theme="dark"],html[data-theme="ocean"]{
  --wh-cyan:#4dbdd3;
  --wh-grid:rgba(148,197,255,.045);
  --wh-glow:rgba(77,189,211,.22);
}

/* Canvas: a faint dot grid and a cool glow behind every page. */
html[data-theme] body{font-family:var(--wh-font)}
html[data-theme] body{background:
  radial-gradient(circle at 84% 0,color-mix(in srgb,var(--wh-cyan) 9%,transparent),transparent 32%),
  radial-gradient(var(--wh-grid) 1px,transparent 1.3px) 0 0/20px 20px,
  var(--bg)}
html[data-theme] ::selection{background:color-mix(in srgb,var(--acc) 22%,transparent)}

/* Top bar: glass with a thin light line underneath. */
html[data-theme="light"] body .topbar{background:rgba(255,255,255,.86)}
html body .topbar:after{height:1px;background:linear-gradient(90deg,transparent,var(--acc) 30%,var(--wh-cyan) 70%,transparent);opacity:.45}
.topbar .brandline h1{font-family:var(--wh-tech);font-weight:600;letter-spacing:.01em}

/* Side navigation: deep navy with a fine grid; the active item is a lit glass row. */
html body .topbar .hub-nav,html[data-theme="light"] body .topbar .hub-nav{
  background:
    linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px) 0 0/100% 28px,
    linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px) 0 0/28px 100%,
    linear-gradient(180deg,#060d20 0%,#0a1733 52%,#0f2147 100%);
  box-shadow:1px 0 0 rgba(255,255,255,.04),6px 0 28px rgba(6,13,32,.22)}
.hub-nav-brand{border-bottom-color:rgba(148,197,255,.12)}
.hub-nav-brand-mark{border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.4),0 0 18px rgba(77,189,211,.28)}
.hub-nav-brand-copy b{font-family:var(--wh-tech);font-weight:600;letter-spacing:.02em}
.hub-nav-brand-copy small{font-family:var(--wh-tech);font-size:12px;font-weight:600;letter-spacing:.18em;color:#7ecadb}
html body .hub-nav .viewtab{border-radius:var(--wh-radius-sm);transition:background .16s var(--wh-ease),color .16s var(--wh-ease),box-shadow .16s var(--wh-ease)}
html body .hub-nav .viewtab.on,html[data-theme="light"] body .hub-nav .viewtab.on{
  background:linear-gradient(90deg,rgba(70,112,170,.42),rgba(77,189,211,.14) 85%,transparent);
  box-shadow:inset 2px 0 #4dbdd3,inset 0 0 0 1px rgba(126,202,219,.16),-4px 0 16px -6px rgba(77,189,211,.7)}
html body .hub-nav .viewtab.on i{color:#bfe8f0}
html body .hub-nav .viewtab .nav-task-count{font-family:var(--wh-tech);font-weight:600;border-radius:6px}

/* Eyebrow labels: spaced DIN caps with a small square bullet (the pixel signature). */
html[data-theme] :is(.eyebrow,.ra-eyebrow,.wf-eyebrow,.rental-eyebrow,.ops-overline,.latest-kicker,.drawer-eyebrow,
    .task-detail-kicker,.workhub-login-kicker,.world-site-kicker){
  font-family:var(--wh-tech);font-size:12px;font-weight:600;letter-spacing:.16em;line-height:1.4;text-transform:uppercase;
  color:var(--acc);padding-inline-start:12px;
  background:linear-gradient(var(--wh-cyan),var(--wh-cyan)) 0 50%/4px 4px no-repeat}
html[dir="rtl"] :is(.eyebrow,.ra-eyebrow,.wf-eyebrow,.rental-eyebrow,.ops-overline,.latest-kicker,.drawer-eyebrow,
    .task-detail-kicker,.workhub-login-kicker,.world-site-kicker){background-position:100% 50%}
main:has(#mailview:not(.hidden)) #hero .eyebrow{font-size:12px;letter-spacing:.16em}
html[data-theme] .workhub-login-form .eyebrow{padding-inline-start:0;background:none}
html[data-theme] .workhub-login-form .eyebrow:before{width:16px;height:2px;margin-bottom:3px;border-radius:0;background:var(--wh-cyan)}

/* Numbers: KPI values in DIN-style tabular figures. */
html[data-theme] :is(#hero .metric b,.manager-kpi:not(.info) b,.workspace-stat b,.ra-kpis b,.ra-card b,
    #freightview .freight-ops-summary b,.freight-summary b,.unit-metrics b,.company-metrics b,
    .workhub-login-preview-grid b){
  font-family:var(--wh-tech);font-weight:600;letter-spacing:.01em;font-variant-numeric:tabular-nums}

/* KPI tiles: hairline cards; the larger ones get a lit top edge that fades out. */
html[data-theme] :is(#hero .metric,.manager-kpi){border:1px solid var(--line);background:linear-gradient(180deg,var(--surface1),color-mix(in srgb,var(--surface1) 70%,var(--surface0)))}
html[data-theme] :is(.ra-kpis article,.ra-card,#freightview .freight-ops-summary article,.workspace-stat){
  position:relative;border:1px solid var(--line);
  background:
    linear-gradient(90deg,transparent 10px,var(--wh-cyan) 10px,color-mix(in srgb,var(--acc) 60%,transparent) 45%,transparent 70%) 0 0/100% 1px no-repeat,
    linear-gradient(180deg,var(--surface1),color-mix(in srgb,var(--surface1) 70%,var(--surface0)));
  transition:border-color .16s var(--wh-ease),box-shadow .16s var(--wh-ease),transform .16s var(--wh-ease)}
html[data-theme] :is(#hero .metric,.manager-kpi):hover{border-color:color-mix(in srgb,var(--acc) 45%,var(--line))}
html[data-theme] :is(.ra-kpis article,.ra-card,#freightview .freight-ops-summary article,.workspace-stat):hover{
  border-color:color-mix(in srgb,var(--acc) 45%,var(--line));box-shadow:0 8px 24px -10px var(--wh-glow);transform:translateY(-1px)}
html[data-theme] :is(.ra-kpis article,.ra-card,#freightview .freight-ops-summary article){border-radius:var(--wh-radius-sm)}

/* Working surfaces: one radius, hairline border, quiet shadow. */
:is(#mailview .mail-shell,#mailview .business-sidebar,#taskview .simple-task-shell,#freightview .freight-panel,
    #freightview .freight-side,#freightview .freight-commercial-hero,#freightview .freight-commercial-start,
    .ra-panel,.task-shell,.deep-card,.settings-card,.account-card,.directory-shell,.case-board,.case-card){
  border-radius:var(--wh-radius);border-color:var(--line)}
html[data-theme="light"] :is(#mailview .mail-shell,#taskview .simple-task-shell,#freightview .freight-panel,#freightview .freight-side,.ra-panel,.settings-card,.account-card){box-shadow:var(--shadow)}
html[data-theme="light"] #workspace-context-bar{border-radius:var(--wh-radius-sm);border:1px solid var(--line);background:rgba(255,255,255,.9)}

/* Page titles: the small 2x2 pixel mark the mail and freight heads already use. */
#mailview .mail-section-head h2::before,#freightview .freight-section-head h2::before,
#taskview .simple-task-head h2::before,.ra-head h2::before{
  content:"";flex:none;width:5px;height:5px;margin:0 7px 6px 1px;background:var(--acc);
  box-shadow:7px 0 var(--wh-cyan),0 7px var(--wh-cyan),7px 7px var(--acc);transform:none}
#taskview .simple-task-head h2,.ra-head h2{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* Buttons: primary actions are lit gradients with a soft glow. */
html[data-theme] button{border-radius:var(--wh-radius-sm)}
html[data-theme] button.primary,#freightview button.primary,.ra-shell .ra-new{
  border-radius:var(--wh-radius-sm);transition:box-shadow .16s var(--wh-ease),filter .16s var(--wh-ease),background .16s var(--wh-ease)}
html[data-theme] button.primary{background:linear-gradient(100deg,var(--primary1),var(--primary2));box-shadow:0 4px 14px -4px var(--wh-glow),inset 0 1px 0 rgba(255,255,255,.18)}
html[data-theme] button.primary:hover:not(:disabled){filter:brightness(1.06);box-shadow:0 6px 20px -4px var(--wh-glow),inset 0 1px 0 rgba(255,255,255,.22)}
.ra-shell .ra-new:hover:not(:disabled){box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 14%,transparent)}
html[data-theme] button:focus-visible,html[data-theme] a:focus-visible{
  outline:2px solid var(--acc);outline-offset:2px}

/* Form fields baseline. Zero specificity (:where), so any module style still wins, but no
   field falls back to the browser's 2px inset bevel. Focus is a soft accent ring, not an outline. */
:where(html[data-theme]) :where(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=hidden]),select,textarea){
  border:1px solid var(--line);border-radius:var(--wh-radius-sm);background-color:var(--surface1);color:var(--txt);font:inherit;box-shadow:none}
:where(html[data-theme]) :where(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=hidden]),select){min-height:36px;padding:0 12px}
:where(html[data-theme]) :where(textarea){padding:8px 12px}
html[data-theme] :is(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]),select,textarea):focus-visible{
  outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)}
html[data-theme] input[type=search]::-webkit-search-cancel-button{cursor:pointer}

/* Rental and freight sub-navigation: same lit-edge treatment as the main nav. */
.ra-nav button[aria-current="page"]{box-shadow:inset 2px 0 var(--acc);background:color-mix(in srgb,var(--acc) 7%,var(--a-bg,var(--panel)))}
#freightview .freight-side .freight-module-tabs button.on{background:linear-gradient(100deg,#1d7a8f,#4670aa);box-shadow:0 6px 18px -6px var(--wh-glow)}
#freightview .freight-side .freight-module-tabs button i{font-family:var(--wh-tech);font-style:normal;font-weight:600}
.ra-tag{border-radius:4px}

/* Tables: crisper header row. */
.ra-shell th,#taskview .manager-table-head,#freightview .freight-columns{letter-spacing:.02em}
#freightview .freight-row:hover,#freightview .freight-row.on{background:color-mix(in srgb,var(--acc) 6%,var(--panel))}

/* Thin scrollbars. */
html[data-theme] *::-webkit-scrollbar{width:10px;height:10px}
html[data-theme] *::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--scroll) 70%,transparent);border:3px solid transparent;background-clip:content-box;border-radius:8px}
html[data-theme] *::-webkit-scrollbar-track{background:transparent}

@media(prefers-reduced-motion:reduce){
  html[data-theme] button.primary,.ra-shell .ra-new,html body .hub-nav .viewtab,
  html[data-theme] :is(.ra-kpis article,.ra-card,#freightview .freight-ops-summary article,.workspace-stat){transition:none}
  html[data-theme] :is(.ra-kpis article,.ra-card,#freightview .freight-ops-summary article,.workspace-stat):hover{transform:none}
}

/* Office: one control-room surface. Side panel and canvas share the card language
   of the other workbenches; the canvas gets a faint blueprint grid. */
html[data-theme] #worldview #office-workbench{border:1px solid var(--line);border-radius:var(--wh-radius);background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
html[data-theme] #worldview #office-quick-panel{background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 94%,var(--acc)));border-right:1px solid var(--line)}
html[data-theme] #worldview #office-quick-panel>header{padding-bottom:6px}
html[data-theme] #worldview #office-panel-kicker{font-family:var(--wh-tech);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);
  padding-inline-start:12px;background:linear-gradient(var(--wh-cyan),var(--wh-cyan)) 0 50%/4px 4px no-repeat}
html[data-theme] #worldview #office-panel-title{letter-spacing:-.01em}

/* Panel switcher and queue filters become segmented controls. */
html[data-theme] #worldview .office-panel-switcher{gap:2px;margin:0 12px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--surface0)}
html[data-theme] #worldview .office-panel-switcher button,html[data-theme] #worldview .studio-queue-filters button{border:0;background:transparent;box-shadow:none;color:var(--dim)}
html[data-theme] #worldview .office-panel-switcher button:hover,html[data-theme] #worldview .studio-queue-filters button:hover{background:color-mix(in srgb,var(--acc) 6%,transparent);color:var(--txt)}
/* Selected view: a lit blue-cyan fill. Selected filter: a quiet blue tint. No underline bars. */
html[data-theme] #worldview .office-panel-switcher button.on{
  background:linear-gradient(100deg,var(--primary1),var(--primary2));color:#fff;font-weight:650;box-shadow:0 4px 12px -4px var(--wh-glow)}
html[data-theme] #worldview .office-panel-switcher button.on i{color:#fff}
html[data-theme] #worldview .office-panel-switcher button::after{display:none}
html[data-theme] #worldview .studio-queue-filters button.on{
  background:color-mix(in srgb,var(--acc) 11%,var(--surface1));color:var(--acc);font-weight:650;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 30%,transparent)}
html[data-theme] #worldview .studio-queue-filters{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--surface0)}
html[data-theme] #worldview .studio-queue-filters button{flex:1}

/* Inputs: hairline fields with a focus ring, like the rest of the app. */
html[data-theme] #worldview :is(.studio-queue-tools input,#studio-search,#studio-team-select){
  border:1px solid var(--line);border-radius:var(--wh-radius-sm);background:var(--surface1);color:var(--txt);outline:none;box-shadow:none}
html[data-theme] #worldview :is(.studio-queue-tools input,#studio-search,#studio-team-select):focus{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 16%,transparent)}

/* Canvas: blueprint grid with a soft glow, heading with the title mark. */
html[data-theme] #worldview #world-map.virtual-office-view,html[data-theme] #worldview .world-map-wrap:has(.virtual-office-view){background:var(--surface0)}
html[data-theme] #worldview #world-map .virtual-office.studio-office{background:
  radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--wh-cyan) 7%,transparent),transparent 45%),
  linear-gradient(color-mix(in srgb,var(--acc) 5%,transparent) 1px,transparent 1px) 0 0/32px 32px,
  linear-gradient(90deg,color-mix(in srgb,var(--acc) 5%,transparent) 1px,transparent 1px) 0 0/32px 32px,
  var(--surface0)}
html[data-theme] #worldview .studio-scene-heading h2{display:flex;align-items:center;gap:12px;letter-spacing:-.01em}
html[data-theme] #worldview .studio-scene-heading h2::before{content:"";flex:none;width:5px;height:5px;margin:0 7px 6px 1px;background:var(--acc);box-shadow:7px 0 var(--wh-cyan),0 7px var(--wh-cyan),7px 7px var(--acc)}
html[data-theme] #worldview .studio-team-chat{border:1px solid color-mix(in srgb,var(--acc) 35%,var(--line));background:var(--surface1);color:var(--acc);font-weight:600}
html[data-theme] #worldview .studio-team-chat:hover{background:var(--active)}

/* Empty office: a centred card with a radar mark instead of loose text. */
html[data-theme] #worldview .studio-empty{position:relative;max-width:420px;margin:56px auto 0;padding:96px 28px 26px;border:1px solid var(--line);border-radius:var(--wh-radius);
  background:linear-gradient(90deg,transparent 10px,var(--wh-cyan) 10px,color-mix(in srgb,var(--acc) 60%,transparent) 45%,transparent 70%) 0 0/100% 1px no-repeat,var(--panel);box-shadow:var(--shadow);text-align:center}
html[data-theme] #worldview .studio-empty::before{content:"";position:absolute;top:24px;left:50%;width:56px;height:56px;margin-left:-28px;border-radius:50%;
  background:radial-gradient(circle,var(--wh-cyan) 0 3px,transparent 4px),repeating-radial-gradient(circle,transparent 0 9px,color-mix(in srgb,var(--acc) 30%,transparent) 9px 10px),
  conic-gradient(from 20deg,color-mix(in srgb,var(--wh-cyan) 35%,transparent),transparent 25%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 22%,transparent),0 0 24px -4px var(--wh-glow)}
html[data-theme] #worldview .studio-empty h3{margin:0 0 6px;font-size:16px}
html[data-theme] #worldview .studio-empty p{margin:0 0 16px;color:var(--dim)}
html[data-theme] #worldview .studio-empty button{border-color:color-mix(in srgb,var(--acc) 35%,var(--line));color:var(--acc);background:var(--surface1);font-weight:600}

/* Toolbar chips and footers: quiet, hairline. */
html[data-theme] #worldview .studio-drawer-ready,html[data-theme] #worldview .team-map-toolbar-actions button{border:1px solid var(--line);border-radius:999px;background:var(--surface1);box-shadow:none}
html[data-theme] #worldview .studio-scene-footer{border-top:1px solid var(--line);color:var(--dim)}
html[data-theme] #worldview #office-panel-footer{border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface0) 70%,var(--panel))}
html[data-theme] #worldview #office-panel-footer button{border:1px solid var(--line);background:var(--surface1);box-shadow:none}
html[data-theme] #worldview #office-panel-footer button:first-child{border-color:color-mix(in srgb,var(--acc) 35%,var(--line));color:var(--acc);font-weight:600}
html[data-theme] #worldview #office-panel-content .studio-empty{margin:20px 0 0;padding:84px 16px 18px;box-shadow:none}

/* Office side panel keeps one width: switching to AI staff or a preview no longer jumps 260px -> 360px. */
@media(min-width:801px){
  html[data-theme] body:not(.work-chat-open) #office-workbench:not(.locations-mode):not(.panel-collapsed){grid-template-columns:320px minmax(0,1fr)}
}
@media(min-width:1250px){
  html[data-theme] body #office-workbench:not(.locations-mode):not(.panel-collapsed){grid-template-columns:320px minmax(0,1fr)}
}

/* ================================================================
   Neon skin (ocean theme): deep-space base, GreatKun teal and royal-blue light spill
   and neon seams (logo colours #4dbdd3 / #4670aa), tuned for reading: near-opaque panels, bright text, glow kept
   off small text, and button gradients that hold 4.5:1 with white.
   Everything below is scoped to the ocean theme.
   ================================================================ */
html[data-theme="ocean"]{
  color-scheme:dark;
  --bg:#04060f;--panel:rgba(12,19,40,.95);--panel2:#0a1022;--line:rgba(125,170,255,.16);
  --txt:#f3f7ff;--dim:#b8c6de;--acc:#4dbdd3;--acc2:#8fb3ea;--ok:#34d399;--hot:#fb7185;--warn:#fbbf24;--violet:#8fb3ea;
  --surface0:#060a18;--surface1:rgba(16,24,50,.96);--surface2:#111a38;--surface3:#0a1126;
  --active:rgba(77,189,211,.14);--on-active:#e0f7ff;--hero1:rgba(16,26,58,.9);--hero2:rgba(8,12,28,.92);
  --primary1:#1d7a8f;--primary2:#4670aa;--card1:rgba(16,24,50,.9);--card2:rgba(9,14,30,.92);--reader:#070b18;
  --overlay:rgba(2,4,12,.8);--danger-bg:rgba(251,113,133,.1);--danger-line:rgba(251,113,133,.4);--scroll:#2c3b66;
  --shadow:0 0 0 1px rgba(77,189,211,.03),0 16px 40px rgba(0,0,0,.45);
  --wh-cyan:#4dbdd3;--wh-grid:rgba(77,189,211,.05);--wh-glow:rgba(77,189,211,.45);
  --wh-neon-line:linear-gradient(90deg,transparent,#4dbdd3 25%,#4670aa 65%,#6f9ae0 85%,transparent);
}

/* Deep space: magenta and cyan light spill behind the panels, plus a fine grid. */
html[data-theme="ocean"] body{background:
  radial-gradient(1100px 620px at 92% -8%,rgba(91,138,214,.26),transparent 60%),
  radial-gradient(900px 620px at 18% 108%,rgba(77,189,211,.22),transparent 60%),
  radial-gradient(800px 460px at 55% 40%,rgba(70,112,170,.12),transparent 70%),
  linear-gradient(var(--wh-grid) 1px,transparent 1px) 0 0/40px 40px,
  linear-gradient(90deg,var(--wh-grid) 1px,transparent 1px) 0 0/40px 40px,
  var(--bg);background-attachment:fixed;color:var(--txt)}

/* Top bar and sidebar: dark glass with a neon seam. */
/* No backdrop-filter here: it would turn the top bar into the containing block of the fixed sidebar. */
html[data-theme="ocean"] body .topbar{background:rgba(5,8,20,.9);box-shadow:none}
html[data-theme="ocean"] body .topbar:after{height:1px;opacity:1;background:var(--wh-neon-line);box-shadow:0 0 12px rgba(77,189,211,.6),0 0 24px rgba(91,138,214,.35)}
html[data-theme="ocean"] body .topbar .hub-nav{
  background:
    linear-gradient(rgba(77,189,211,.04) 1px,transparent 1px) 0 0/100% 28px,
    linear-gradient(90deg,rgba(77,189,211,.04) 1px,transparent 1px) 0 0/28px 100%,
    linear-gradient(180deg,rgba(4,7,18,.96),rgba(8,12,30,.96));
  box-shadow:1px 0 0 rgba(77,189,211,.18),8px 0 40px rgba(77,189,211,.06)}
html[data-theme="ocean"] body .hub-nav .viewtab.on{
  background:linear-gradient(90deg,rgba(77,189,211,.22),rgba(70,112,170,.12) 70%,transparent);
  box-shadow:inset 2px 0 #4dbdd3,inset 0 0 0 1px rgba(77,189,211,.28),0 0 22px -4px rgba(77,189,211,.55),0 0 40px -12px rgba(91,138,214,.5)}
html[data-theme="ocean"] body .hub-nav .viewtab.on span,html[data-theme="ocean"] body .hub-nav .viewtab.on i{color:#fff}
html[data-theme="ocean"] .hub-nav-brand-copy small{color:#7ecadb}
html[data-theme="ocean"] body .hub-nav .viewtab{color:#dbe5f5}
html[data-theme="ocean"] body .hub-nav .viewtab i{color:#a9bbd8}

/* Glass panels with a neon top seam and bloom on hover. */
html[data-theme="ocean"] :is(#mailview .mail-shell,#mailview .business-sidebar,#taskview .simple-task-shell,#freightview .freight-panel,
    #freightview .freight-side,#freightview .freight-commercial-hero,#freightview .freight-commercial-start,#freightview .freight-ops-summary article,
    .ra-panel,.ra-card,.ra-kpis article,.settings-card,.account-card,.directory-shell,.case-board,.case-card,#office-workbench,#workspace-context-bar,#hero,.deep-card){
  background:linear-gradient(180deg,rgba(17,27,58,.96),rgba(10,15,34,.97));
  border:1px solid rgba(125,190,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 32px -12px rgba(77,189,211,.4),0 18px 44px rgba(0,0,0,.45)}
html[data-theme="ocean"] :is(#mailview .mail-shell,#taskview .simple-task-shell,#freightview .freight-panel,.ra-panel,#office-workbench,#hero,.ra-card,.ra-kpis article,#freightview .freight-ops-summary article){position:relative}
html[data-theme="ocean"] :is(#mailview .mail-shell,#taskview .simple-task-shell,#freightview .freight-panel,.ra-panel,#office-workbench,#hero,.ra-card,.ra-kpis article,#freightview .freight-ops-summary article)::before{
  content:"";position:absolute;left:12px;right:12px;top:-1px;height:1px;z-index:2;pointer-events:none;background:var(--wh-neon-line);
  box-shadow:0 0 8px rgba(77,189,211,.8),0 0 22px rgba(91,138,214,.45)}
html[data-theme="ocean"] :is(.ra-card,.ra-kpis article,#freightview .freight-ops-summary article):hover{
  border-color:rgba(77,189,211,.45);box-shadow:0 0 0 1px rgba(77,189,211,.18),0 0 28px -6px rgba(77,189,211,.45),0 18px 44px rgba(0,0,0,.45)}

/* Figures carry a light halo; small labels stay crisp (no glow). */
html[data-theme="ocean"] :is(#hero .metric b,.manager-kpi:not(.info) b,.workspace-stat b,.ra-kpis b,.ra-card b,
    #freightview .freight-ops-summary b,.freight-summary b,.unit-metrics b,.company-metrics b){
  text-shadow:0 0 14px rgba(77,189,211,.35)}
html[data-theme="ocean"] :is(.eyebrow,.ra-eyebrow,.wf-eyebrow,.rental-eyebrow,.ops-overline,.latest-kicker,.drawer-eyebrow,
    .task-detail-kicker,.workhub-login-kicker,.world-site-kicker,#office-panel-kicker){color:#7ecadb;text-shadow:none}
html[data-theme="ocean"] :is(h1,h2,h3){color:#f2f7ff}
html[data-theme="ocean"] :is(#mailview .mail-section-head h2,#freightview .freight-section-head h2,#taskview .simple-task-head h2,.ra-head h2,#worldview .studio-scene-heading h2)::before{
  background:#4dbdd3;box-shadow:7px 0 #8fb3ea,0 7px #6f9ae0,7px 7px #4dbdd3,0 0 10px rgba(77,189,211,.9)}

/* KPI chips, inputs and secondary buttons: dark glass, neon on focus and hover. */
html[data-theme="ocean"] :is(#hero .metric,.manager-kpi,.simple-stat,.wh-system-pending,.ra-tag){background:#0e1630;border-color:rgba(125,190,255,.16)}
html[data-theme="ocean"] :is(input,select,textarea){background:#0a1124;border-color:rgba(125,190,255,.26);color:var(--txt)}
html[data-theme="ocean"] :is(input,select,textarea)::placeholder{color:#97a8c6}
html[data-theme="ocean"] :is(input,select,textarea):focus{border-color:rgba(77,189,211,.7);box-shadow:0 0 0 3px rgba(77,189,211,.15),0 0 18px -4px rgba(77,189,211,.6);outline:none}
html[data-theme="ocean"] button:not(.primary):not(.viewtab):not(.on){background:#121c3a;border-color:rgba(125,190,255,.26);color:var(--txt)}
html[data-theme="ocean"] button:not(.primary):not(.viewtab):not(.on):hover{border-color:rgba(77,189,211,.55);box-shadow:0 0 16px -6px rgba(77,189,211,.7);color:#e0fbff}
html[data-theme="ocean"] :is(.office-panel-switcher,.studio-queue-filters,.mail-mode-tabs,.view-tabs:not(.hub-nav)){background:rgba(4,8,20,.7);border-color:rgba(125,190,255,.16)}
html[data-theme="ocean"] #worldview :is(.office-panel-switcher button.on,.studio-queue-filters button.on),
html[data-theme="ocean"] :is(.mail-mode-tabs button.on,.task-filter.on,.case-filter.on){
  background:linear-gradient(180deg,rgba(77,189,211,.26),rgba(70,112,170,.2));color:#fff;box-shadow:inset 0 -2px 0 #4dbdd3,0 0 16px -6px rgba(77,189,211,.8)}

/* Primary actions: cyan to violet with bloom. */
html[data-theme="ocean"] button.primary,html[data-theme="ocean"] #freightview .freight-side .freight-module-tabs button.on{
  background:linear-gradient(100deg,#1d7a8f,#3f67a3 60%,#4670aa);color:#fff;border-color:transparent;font-weight:650;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 18px -2px rgba(77,189,211,.55),0 0 34px -8px rgba(70,112,170,.6)}
html[data-theme="ocean"] button.primary:hover:not(:disabled){filter:brightness(1.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 24px 0 rgba(77,189,211,.6),0 0 44px -6px rgba(70,112,170,.7)}

/* Office canvas: space grid. Rental follows the same glass. */
html[data-theme="ocean"] #worldview #world-map .virtual-office.studio-office{background:
  radial-gradient(circle at 50% 38%,rgba(77,189,211,.10),transparent 45%),
  linear-gradient(rgba(77,189,211,.06) 1px,transparent 1px) 0 0/32px 32px,
  linear-gradient(90deg,rgba(77,189,211,.06) 1px,transparent 1px) 0 0/32px 32px,
  rgba(4,8,20,.6)}
html[data-theme="ocean"] #worldview #office-quick-panel{background:linear-gradient(180deg,rgba(10,16,36,.9),rgba(6,10,24,.9));border-right:1px solid rgba(125,190,255,.14)}
html[data-theme="ocean"] #worldview .studio-empty{background:linear-gradient(180deg,rgba(18,28,60,.85),rgba(9,14,32,.9))}
html[data-theme="ocean"] #worldview .studio-empty::before{box-shadow:0 0 0 1px rgba(77,189,211,.35),0 0 30px -2px rgba(77,189,211,.6)}
html[data-theme="ocean"] .ra-nav button{background:#0e1630;border-color:rgba(125,190,255,.14);color:var(--txt)}
html[data-theme="ocean"] .ra-nav button[aria-current="page"]{background:linear-gradient(90deg,rgba(77,189,211,.18),transparent);box-shadow:inset 2px 0 #4dbdd3,0 0 16px -8px rgba(77,189,211,.9)}
html[data-theme="ocean"] .ra-shell{--a-bg:#0f1734;--a-surface:#0a1124;--a-line:rgba(125,190,255,.2);--a-acc:#4dbdd3;--a-dim:#b8c6de;--a-fg:#f3f7ff;
  --a-ok:#6cc48f;--a-ok-bg:#1d3527;--a-bad:#fb8a8a;--a-bad-bg:#3e1f22;--a-wait:#8fb3ea;--a-wait-bg:#1b2a3f}

/* ================================================================
   Ink skin (dark / 墨夜), eye-care night mode: soft charcoal instead of
   pure black, off-white text at a comfortable ~13:1 (not glaring 18:1),
   muted teal accents with low saturation, no glow and no bright gradients
   on large areas. Everything below is scoped to the dark theme.
   ================================================================ */
html[data-theme="dark"]{
  --bg:#141619;--panel:#1a1d21;--panel2:#1d2025;--line:#2c3137;
  --txt:#dde1e6;--dim:#a3abb5;--acc:#6cc0cc;--acc2:#93b4d8;--ok:#7cc79a;--hot:#e98a8a;--warn:#e0b468;--violet:#93b4d8;
  --surface0:#16191c;--surface1:#1f2327;--surface2:#252a2f;--surface3:#181b1f;
  --active:rgba(108,192,204,.12);--on-active:#eef3f6;--hero1:#1c1f23;--hero2:#181b1e;
  --primary1:#2a7d8c;--primary2:#42679a;--card1:#1f2327;--card2:#1a1d21;--reader:#181b1e;
  --overlay:rgba(8,9,11,.66);--danger-bg:rgba(233,138,138,.1);--danger-line:rgba(233,138,138,.38);--scroll:#3b424a;
  --shadow:0 1px 0 rgba(255,255,255,.025) inset,0 8px 22px rgba(0,0,0,.28);
  --wh-cyan:#6cc0cc;--wh-grid:rgba(255,255,255,.018);--wh-glow:rgba(108,192,204,.16);
  --wh-ink-line:linear-gradient(90deg,transparent,rgba(108,192,204,.4) 30%,rgba(147,180,216,.3) 70%,transparent);
}

/* Canvas: soft charcoal, a faint grid, no light spill. */
html[data-theme="dark"] body{background:
  linear-gradient(var(--wh-grid) 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(90deg,var(--wh-grid) 1px,transparent 1px) 0 0/48px 48px,
  var(--bg);background-attachment:fixed;color:var(--txt)}

/* Chrome: the same charcoal family, a quiet seam. */
html[data-theme="dark"] body .topbar{background:#171a1d;box-shadow:none}
html[data-theme="dark"] body .topbar:after{height:1px;opacity:1;background:var(--wh-ink-line)}
html[data-theme="dark"] body .topbar .hub-nav{background:#121417;box-shadow:1px 0 0 #24282d}
html[data-theme="dark"] body .hub-nav .viewtab{color:#c3c9d0}
html[data-theme="dark"] body .hub-nav .viewtab i{color:#8a939d}
html[data-theme="dark"] body .hub-nav .viewtab:hover{background:rgba(255,255,255,.04);color:#e6e9ed}
html[data-theme="dark"] body .hub-nav .viewtab.on{background:rgba(108,192,204,.12);box-shadow:inset 2px 0 #6cc0cc}
html[data-theme="dark"] body .hub-nav .viewtab.on span,html[data-theme="dark"] body .hub-nav .viewtab.on i{color:#eef3f6}
html[data-theme="dark"] .hub-nav-brand{border-bottom-color:#24282d}
html[data-theme="dark"] .hub-nav-brand-mark{box-shadow:0 0 0 1px rgba(255,255,255,.18)}
html[data-theme="dark"] .hub-nav-brand-copy small{color:#8fc9d2}

/* Panels: matte, softly separated by tone rather than bright borders. */
html[data-theme="dark"] :is(#mailview .mail-shell,#mailview .business-sidebar,#taskview .simple-task-shell,#freightview .freight-panel,
    #freightview .freight-side,#freightview .freight-commercial-hero,#freightview .freight-commercial-start,#freightview .freight-ops-summary article,
    .ra-panel,.ra-card,.ra-kpis article,.settings-card,.account-card,.directory-shell,.case-board,.case-card,#office-workbench,#workspace-context-bar,#hero,.deep-card){
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
html[data-theme="dark"] :is(#mailview .mail-shell,#taskview .simple-task-shell,#freightview .freight-panel,.ra-panel,#office-workbench,#hero,.ra-card,.ra-kpis article,#freightview .freight-ops-summary article){position:relative}
html[data-theme="dark"] :is(#mailview .mail-shell,#taskview .simple-task-shell,#freightview .freight-panel,.ra-panel,#office-workbench,#hero,.ra-card,.ra-kpis article,#freightview .freight-ops-summary article)::before{
  content:"";position:absolute;left:14px;right:14px;top:-1px;height:1px;z-index:2;pointer-events:none;background:var(--wh-ink-line)}
html[data-theme="dark"] :is(.ra-card,.ra-kpis article,#freightview .freight-ops-summary article):hover{border-color:rgba(108,192,204,.35)}

/* Text: off-white, matte; muted teal only for small labels and marks. */
html[data-theme="dark"] :is(h1,h2,h3){color:#e8ebee}
html[data-theme="dark"] :is(.eyebrow,.ra-eyebrow,.wf-eyebrow,.rental-eyebrow,.ops-overline,.latest-kicker,.drawer-eyebrow,
    .task-detail-kicker,.workhub-login-kicker,.world-site-kicker,#office-panel-kicker){color:#8fc9d2;text-shadow:none}
html[data-theme="dark"] :is(#mailview .mail-section-head h2,#freightview .freight-section-head h2,#taskview .simple-task-head h2,.ra-head h2,#worldview .studio-scene-heading h2)::before{
  background:#6cc0cc;box-shadow:7px 0 #5d7fa8,0 7px #5d7fa8,7px 7px #6cc0cc}

/* Fields and secondary buttons: one step lighter than the panel. */
html[data-theme="dark"] :is(#hero .metric,.manager-kpi,.simple-stat,.wh-system-pending,.ra-tag){background:var(--surface1);border-color:var(--line)}
html[data-theme="dark"] :is(input,select,textarea){background:#16191c;border-color:#30363c;color:var(--txt)}
html[data-theme="dark"] :is(input,select,textarea)::placeholder{color:#89919b}
html[data-theme="dark"] :is(input,select,textarea):focus{border-color:#6cc0cc;box-shadow:0 0 0 3px rgba(108,192,204,.14);outline:none}
html[data-theme="dark"] button:not(.primary):not(.viewtab):not(.on){background:#22262b;border-color:#31373d;color:var(--txt)}
html[data-theme="dark"] button:not(.primary):not(.viewtab):not(.on):hover{border-color:rgba(108,192,204,.45);color:#eef1f4}
html[data-theme="dark"] :is(.office-panel-switcher,.studio-queue-filters,.mail-mode-tabs,.view-tabs:not(.hub-nav)){background:#16191c;border-color:var(--line)}
html[data-theme="dark"] :is(.mail-mode-tabs button.on,.task-filter.on,.case-filter.on),
html[data-theme="dark"] #worldview .studio-queue-filters button.on{background:rgba(108,192,204,.14);color:#eef3f6;box-shadow:inset 0 0 0 1px rgba(108,192,204,.36)}

/* Primary actions: muted teal to slate blue, no bloom. */
html[data-theme="dark"] button.primary,html[data-theme="dark"] #freightview .freight-side .freight-module-tabs button.on{
  background:linear-gradient(100deg,#2a7d8c,#42679a);color:#fff;border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
html[data-theme="dark"] button.primary:hover:not(:disabled){filter:brightness(1.06)}

/* Office and rental follow the same charcoal surfaces. */
html[data-theme="dark"] #worldview #world-map .virtual-office.studio-office{background:
  linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/32px 32px,
  linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/32px 32px,
  #16191c}
html[data-theme="dark"] #worldview #office-quick-panel{background:#181b1f;border-right:1px solid var(--line)}
html[data-theme="dark"] #worldview .studio-empty{background:var(--panel)}
html[data-theme="dark"] .ra-nav button{background:transparent;border-color:transparent;color:var(--txt)}
html[data-theme="dark"] .ra-shell{--a-bg:#1a1d21;--a-surface:#16191c;--a-line:#2c3137;--a-acc:#6cc0cc;--a-dim:#a3abb5;--a-fg:#dde1e6;
  --a-ok:#7cc79a;--a-ok-bg:#1d2b23;--a-bad:#e98a8a;--a-bad-bg:#352224;--a-wait:#93b4d8;--a-wait-bg:#1f2731}

/* ================================================================
   Polish pass, all skins: fewer boxes, clearer hierarchy, larger small text.
   ================================================================ */

/* Workspace "connecting" state: a slim status chip, not a full-width field. */
html[data-theme] #workspace-context-bar:has(>.wh-context-loading){display:inline-flex;align-items:center;width:auto;margin:2px 0 10px;padding:5px 12px 5px 10px;border-radius:999px;box-shadow:none}
html[data-theme] #workspace-context-bar>.wh-context-loading{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--dim)}
html[data-theme] #workspace-context-bar>.wh-context-loading::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--wh-cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--wh-cyan) 22%,transparent);animation:wh-pulse 1.6s ease-in-out infinite}
@keyframes wh-pulse{50%{opacity:.35}}

/* Top-bar controls share one height, radius and border. */
/* Only the bar's own controls: the skin panel's cards and menus inside .tools keep their natural height. */
html[data-theme] body .topbar .tools :is(select,button:not(.shell-nav-toggle)):not(.theme-panel *,.mail-work-menu *){height:38px;border-radius:10px}
html[data-theme] body .topbar .tools #q{height:38px;border-radius:10px}

/* Rental: side menu becomes one card with a quiet list instead of a stack of boxes. */
html[data-theme] .ra-shell .ra-nav{padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:var(--shadow)}
html[data-theme] .ra-shell .ra-nav-group>span{padding:8px 10px 2px;font-size:12px;letter-spacing:.06em}
html[data-theme] .ra-shell .ra-nav button:not(.primary):not(.on){min-height:36px;padding:7px 10px;border:0;border-radius:8px;background:transparent;box-shadow:none;color:var(--txt);font-size:14px}
html[data-theme] .ra-shell .ra-nav button:not(.primary):not(.on):hover{background:color-mix(in srgb,var(--acc) 8%,transparent);color:var(--txt)}
html[data-theme] .ra-shell .ra-nav button[aria-current="page"]:not(.primary):not(.on){background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--txt);font-weight:650;box-shadow:inset 3px 0 var(--wh-cyan)}
html[data-theme] .ra-layout{grid-template-columns:184px minmax(0,1fr);gap:16px}
@media(max-width:900px){html[data-theme] .ra-layout{grid-template-columns:1fr}html[data-theme] .ra-shell .ra-nav{position:static}}

/* Rental: section titles with a short accent bar; slightly larger working text. */
html[data-theme] .ra-shell{font-size:14px}
html[data-theme] .ra-shell .ra-group-title{display:flex;align-items:center;gap:9px;margin:18px 0 10px;font-size:15px;font-weight:700;color:var(--txt)}
html[data-theme] .ra-shell .ra-group-title::before{content:"";flex:none;width:3px;height:15px;border-radius:2px;background:linear-gradient(var(--wh-cyan),var(--acc))}
html[data-theme] .ra-shell .ra-card{gap:4px;padding:16px 18px;border-radius:12px}
html[data-theme] .ra-shell .ra-card span{font-size:13px}
html[data-theme] .ra-shell .ra-card small{font-size:12px}
html[data-theme] .ra-shell .ra-card b{font-size:26px;line-height:1.2}

/* Notices: a tinted callout with an accent edge instead of a heavy box. */
html[data-theme] .ra-shell .ra-message:not(.ok):not(.bad){border:0;border-radius:10px;padding:10px 14px;background:color-mix(in srgb,var(--acc) 8%,var(--panel));box-shadow:inset 3px 0 var(--acc);color:var(--txt)}

/* Page heads: a little more air and a stronger title. */
html[data-theme] .ra-head h2,html[data-theme] #freightview .freight-section-head h2,html[data-theme] #mailview .mail-section-head h2{font-size:24px;letter-spacing:-.01em}
html[data-theme] .ra-head p{font-size:13px}

/* ================================================================
   Shared components. New module UI should use these classes and the tokens
   above instead of writing its own button, card, chip, field and table styles.
   See docs/DESIGN_SYSTEM.md.
   ================================================================ */
html[data-theme] .wh-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--wh-space-2);height:var(--wh-control-h);padding:0 var(--wh-space-4);
  border:1px solid var(--wh-border);border-radius:var(--wh-radius-sm);background:var(--wh-surface-raised);color:var(--wh-fg);
  font:var(--wh-fw-medium) var(--wh-fs-md)/1 var(--wh-font);cursor:pointer;white-space:nowrap}
html[data-theme] .wh-btn:hover:not(:disabled){border-color:color-mix(in srgb,var(--wh-accent) 45%,var(--wh-border))}
html[data-theme] .wh-btn:disabled{opacity:.55;cursor:not-allowed}
html[data-theme] .wh-btn--primary{border-color:transparent;background:linear-gradient(100deg,var(--primary1),var(--primary2));color:#fff}
html[data-theme] .wh-btn--danger{border-color:var(--danger-line);background:var(--danger-bg);color:var(--wh-danger)}
html[data-theme] .wh-btn--ghost{border-color:transparent;background:transparent}
html[data-theme] .wh-btn--sm{height:var(--wh-control-h-sm);padding:0 var(--wh-space-3);font-size:var(--wh-fs-sm)}
html[data-theme] .wh-card{padding:var(--wh-space-4) var(--wh-space-5);border:1px solid var(--wh-border);border-radius:var(--wh-radius);background:var(--wh-surface);box-shadow:var(--shadow);color:var(--wh-fg)}
html[data-theme] .wh-card__title{margin:0 0 var(--wh-space-2);font-size:var(--wh-fs-lg);font-weight:var(--wh-fw-bold)}
html[data-theme] .wh-card__meta{font-size:var(--wh-fs-xs);color:var(--wh-fg-muted)}
html[data-theme] .wh-kpi{display:grid;gap:var(--wh-space-1)}
html[data-theme] .wh-kpi__label{font-size:var(--wh-fs-sm);color:var(--wh-fg-muted);font-weight:var(--wh-fw-medium)}
html[data-theme] .wh-kpi__value{font:var(--wh-fw-bold) var(--wh-fs-2xl)/var(--wh-lh-tight) var(--wh-tech);font-variant-numeric:tabular-nums}
html[data-theme] .wh-chip{display:inline-flex;align-items:center;gap:var(--wh-space-1);height:22px;padding:0 var(--wh-space-2);border-radius:var(--wh-radius-pill);
  background:var(--wh-surface-raised);border:1px solid var(--wh-border);font-size:var(--wh-fs-xs);font-weight:var(--wh-fw-medium);color:var(--wh-fg-muted)}
html[data-theme] .wh-chip--success{color:var(--wh-success);border-color:color-mix(in srgb,var(--wh-success) 40%,transparent)}
html[data-theme] .wh-chip--warning{color:var(--wh-warning);border-color:color-mix(in srgb,var(--wh-warning) 40%,transparent)}
html[data-theme] .wh-chip--danger{color:var(--wh-danger);border-color:color-mix(in srgb,var(--wh-danger) 40%,transparent)}
html[data-theme] .wh-field{display:grid;gap:var(--wh-space-1);font-size:var(--wh-fs-sm);color:var(--wh-fg-muted)}
html[data-theme] .wh-input{height:var(--wh-control-h);padding:0 var(--wh-space-3);border:1px solid var(--wh-border);border-radius:var(--wh-radius-sm);
  background:var(--wh-surface-raised);color:var(--wh-fg);font:var(--wh-fs-md) var(--wh-font)}
html[data-theme] .wh-input:focus{outline:none;border-color:var(--wh-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--wh-accent) 18%,transparent)}
html[data-theme] .wh-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--wh-fs-sm);color:var(--wh-fg)}
html[data-theme] .wh-table th{position:sticky;top:0;z-index:1;padding:var(--wh-space-2) var(--wh-space-3);background:var(--surface0);color:var(--wh-fg-muted);
  font-size:var(--wh-fs-xs);font-weight:var(--wh-fw-bold);text-align:left;border-bottom:1px solid var(--wh-border);white-space:nowrap}
html[data-theme] .wh-table td{padding:var(--wh-space-2) var(--wh-space-3);border-bottom:1px solid var(--wh-border)}
html[data-theme] .wh-table tbody tr:hover td{background:color-mix(in srgb,var(--wh-accent) 5%,transparent)}
html[data-theme] .wh-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
html[data-theme] .wh-empty{display:grid;justify-items:center;gap:var(--wh-space-2);padding:var(--wh-space-8) var(--wh-space-4);color:var(--wh-fg-muted);font-size:var(--wh-fs-md);text-align:center}
html[data-theme] .wh-empty b{color:var(--wh-fg);font-size:var(--wh-fs-lg)}

/* Count badges in the navigation hold 12px text. */
html[data-theme] body .hub-nav .viewtab .nav-task-count{min-width:20px;height:20px;padding:0 6px;line-height:20px;border-radius:10px}

/* AI colleague processing time: live while queued/running, final duration after. */
html[data-theme] .agent-elapsed:not(#wh-agent){display:inline-flex;align-items:center;gap:6px;margin:6px 0 0;font-size:var(--wh-fs-xs);
  font-variant-numeric:tabular-nums;color:var(--wh-fg-muted)}
html[data-theme] .agent-elapsed:not(#wh-agent)::before{content:"";width:14px;height:14px;flex:none;background:currentColor;
  -webkit-mask:var(--wh-icon-clock) center/14px 14px no-repeat;mask:var(--wh-icon-clock) center/14px 14px no-repeat}
html[data-theme] .agent-elapsed:not(#wh-agent).live{color:var(--wh-accent);font-weight:var(--wh-fw-bold)}
html[data-theme] .agent-elapsed:not(#wh-agent).live::before{animation:wh-pulse 1.6s ease-in-out infinite}

/* ================================================================
   Phase 2: one look for tables, states and feedback across modules.
   ================================================================ */

/* Tables: quiet sticky header, tabular figures, row hover. The rental hours
   matrix keeps its own sticky header and first column. */
html[data-theme] main table:not(.ra-matrix)>thead>tr>th{position:sticky;top:0;z-index:1;background:var(--surface0);color:var(--wh-fg-muted);
  font-size:var(--wh-fs-xs);font-weight:var(--wh-fw-bold);letter-spacing:.02em;border-bottom:1px solid var(--wh-border)}
html[data-theme] main table td{font-variant-numeric:tabular-nums}
html[data-theme] main table:not(.ra-matrix)>tbody>tr:hover>td{background:color-mix(in srgb,var(--wh-accent) 5%,transparent)}

/* Empty states: centred, muted, framed by a dashed outline. */
html[data-theme] :is(.freight-focus-empty,.freight-commercial-empty,.freight-handoff-empty,.team-roster-empty,.chat-empty-state,.tr-empty,.simple-empty,.world-empty){
  padding:var(--wh-space-6) var(--wh-space-4);border:1px dashed var(--wh-border);border-radius:var(--wh-radius);
  background:color-mix(in srgb,var(--surface0) 60%,transparent);color:var(--wh-fg-muted);text-align:center}

/* Errors: a danger callout with an alert icon, never just red text. */
html[data-theme] :is(.freight-handoff-error,.freight-case-error,.freight-error-state,.wh-context-error,.agent-error,.rental-error,.ra-wb-error,.hy-error,.fq-error,.as-error):not(#wh-state){
  position:relative;padding:var(--wh-space-3) var(--wh-space-4) var(--wh-space-3) 40px;border:0;border-radius:10px;
  background:color-mix(in srgb,var(--wh-danger) 9%,var(--panel));box-shadow:inset 3px 0 var(--wh-danger);color:var(--wh-fg)}
html[data-theme] :is(.freight-handoff-error,.freight-case-error,.freight-error-state,.wh-context-error,.agent-error,.rental-error,.ra-wb-error,.hy-error,.fq-error,.as-error):not(#wh-state)::after{
  content:"";position:absolute;left:14px;top:13px;width:16px;height:16px;background:var(--wh-danger);
  -webkit-mask:var(--wh-icon-alert) center/16px no-repeat;mask:var(--wh-icon-alert) center/16px no-repeat}

/* Loading: muted text after a small spinning ring. */
html[data-theme] :is(.freight-case-loading,.freight-rate-loading,.freight-handoff-loading,.mail-conversation-loading):not(#wh-state){
  display:flex;align-items:center;justify-content:center;gap:var(--wh-space-2);color:var(--wh-fg-muted)}
html[data-theme] :is(.freight-case-loading,.freight-rate-loading,.freight-handoff-loading,.mail-conversation-loading):not(#wh-state)::after{
  content:"";order:-1;width:14px;height:14px;flex:none;border-radius:50%;border:2px solid color-mix(in srgb,var(--wh-accent) 25%,transparent);
  border-top-color:var(--wh-accent);animation:wh-spin .8s linear infinite}
@keyframes wh-spin{to{transform:rotate(360deg)}}

/* Toast and dialogs: one card style, one backdrop. */
html[data-theme] #toast{border-radius:10px;box-shadow:inset 3px 0 var(--wh-accent),0 16px 40px rgba(0,0,0,.28);font-size:var(--wh-fs-md)}
html[data-theme] :is(.ra-dialog,.pc-dialog,.ws-audit-dialog,.wh-assignment-dialog,.tr-dialog,.wh-prefs-dialog,.modal):not(#wh-state){
  border:1px solid var(--wh-border);border-radius:14px;background:var(--panel2,var(--panel));color:var(--wh-fg);box-shadow:0 30px 80px rgba(0,0,0,.35)}
html[data-theme] :is(.ra-dialog,.pc-dialog,.ws-audit-dialog,.wh-assignment-dialog,.tr-dialog,.wh-prefs-dialog)::backdrop{background:rgba(6,10,20,.55)}

/* Status labels carry an icon as well as a colour: done, problem, waiting, info. */
html[data-theme] :is(.agent-status,.freight-status-pill,.ra-chip,.tr-status,.task-chip.waiting):is(
    .completed,.success,.ok,.tr-paid,.tr-delivered,.tr-closed,.tr-posted,.tr-applied,.tr-credited,
    .failed,.danger,.bad,.tr-rejected,.tr-disputed,.tr-cancelled,.tr-returned,
    .queued,.running,.needs-review,.warning,.wait,.waiting,.tr-awaiting,.tr-part,
    .info){display:inline-flex;align-items:center;gap:4px}
html[data-theme] :is(.agent-status,.freight-status-pill,.ra-chip,.tr-status,.task-chip):is(
    .completed,.success,.ok,.tr-paid,.tr-delivered,.tr-closed,.tr-posted,.tr-applied,.tr-credited)::before{
  content:"";width:12px;height:12px;flex:none;background:currentColor;-webkit-mask:var(--wh-icon-check) center/12px no-repeat;mask:var(--wh-icon-check) center/12px no-repeat}
html[data-theme] :is(.agent-status,.freight-status-pill,.ra-chip,.tr-status,.task-chip):is(
    .failed,.danger,.bad,.tr-rejected,.tr-disputed,.tr-cancelled,.tr-returned)::before{
  content:"";width:12px;height:12px;flex:none;background:currentColor;-webkit-mask:var(--wh-icon-alert) center/12px no-repeat;mask:var(--wh-icon-alert) center/12px no-repeat}
html[data-theme] :is(.agent-status,.freight-status-pill,.ra-chip,.tr-status,.task-chip):is(
    .queued,.running,.needs-review,.warning,.wait,.waiting,.tr-awaiting,.tr-part)::before{
  content:"";width:12px;height:12px;flex:none;background:currentColor;-webkit-mask:var(--wh-icon-clock) center/12px no-repeat;mask:var(--wh-icon-clock) center/12px no-repeat}
html[data-theme] .freight-status-pill.info::before{
  content:"";width:12px;height:12px;flex:none;background:currentColor;-webkit-mask:var(--wh-icon-info) center/12px no-repeat;mask:var(--wh-icon-info) center/12px no-repeat}

@media(prefers-reduced-motion:reduce){
  html[data-theme] :is(.freight-case-loading,.freight-rate-loading,.freight-handoff-loading,.mail-conversation-loading)::after{animation:none}
}

/* ================================================================
   Phase 3: right-to-left (Arabic) and the sign-in page in the dark skins.
   ================================================================ */

/* RTL: lit edges and guide lines move to the reading start (right). */
html[dir="rtl"][data-theme] body .hub-nav .viewtab.on{box-shadow:inset -2px 0 var(--wh-cyan),inset 0 0 0 1px color-mix(in srgb,var(--wh-cyan) 18%,transparent)}
html[dir="rtl"][data-theme] .ra-shell .ra-nav button[aria-current="page"]:not(.primary):not(.on){box-shadow:inset -3px 0 var(--wh-cyan)}
html[dir="rtl"][data-theme] .ra-shell .ra-nav .ra-nav-group>button:not(.primary):not(.on){margin-left:0;margin-right:12px;padding-left:10px;padding-right:14px}
html[dir="rtl"][data-theme] .ra-shell .ra-nav-group>button::before{left:auto;right:0}
html[dir="rtl"][data-theme] .ra-shell .ra-nav-group>button[aria-current="page"]::before{left:auto;right:-1px}
html[dir="rtl"][data-theme] .ra-shell .ra-message:not(.ok):not(.bad){box-shadow:inset -3px 0 var(--acc)}
html[dir="rtl"][data-theme] :is(.freight-handoff-error,.freight-case-error,.freight-error-state,.wh-context-error,.agent-error,.rental-error,.ra-wb-error,.hy-error,.fq-error,.as-error):not(#wh-state){
  padding:var(--wh-space-3) 40px var(--wh-space-3) var(--wh-space-4);box-shadow:inset -3px 0 var(--wh-danger)}
html[dir="rtl"][data-theme] :is(.freight-handoff-error,.freight-case-error,.freight-error-state,.wh-context-error,.agent-error,.rental-error,.ra-wb-error,.hy-error,.fq-error,.as-error):not(#wh-state)::after{left:auto;right:14px}
html[dir="rtl"][data-theme] #toast{box-shadow:inset -3px 0 var(--wh-accent),0 16px 40px rgba(0,0,0,.28)}
html[dir="rtl"][data-theme] .ra-shell .ra-group-title::before{order:0}

/* Sign-in page in the dark skins: brand light instead of grey discs, no glaring white button. */
html[data-theme="ocean"] .workhub-login-visual::before,html[data-theme="ocean"] .workhub-login-visual::after,
html[data-theme="dark"] .workhub-login-visual::before,html[data-theme="dark"] .workhub-login-visual::after{
  background:radial-gradient(circle,color-mix(in srgb,var(--wh-cyan) 30%,transparent),transparent 70%);filter:blur(8px);opacity:.7}
html[data-theme="ocean"] .workhub-login-visual::after,html[data-theme="dark"] .workhub-login-visual::after{
  background:radial-gradient(circle,color-mix(in srgb,#4670aa 40%,transparent),transparent 70%)}
html[data-theme="ocean"] .workhub-login-form::before,html[data-theme="dark"] .workhub-login-form::before{border-color:color-mix(in srgb,var(--wh-cyan) 20%,transparent);
  box-shadow:0 0 0 24px color-mix(in srgb,var(--wh-cyan) 4%,transparent),0 0 0 48px color-mix(in srgb,var(--wh-cyan) 2%,transparent)}
html[data-theme="ocean"] .workhub-login-preview-button.workhub-login-preview-button,
html[data-theme="dark"] .workhub-login-preview-button.workhub-login-preview-button{
  background:linear-gradient(100deg,var(--primary1),var(--primary2))!important;border-color:transparent!important;color:#fff!important;font-weight:600}
html[data-theme="ocean"] .workhub-login-preview-grid div,html[data-theme="dark"] .workhub-login-preview-grid div{background:var(--surface1)}
html[data-theme="ocean"] .workhub-login-shell{box-shadow:0 0 0 1px rgba(125,190,255,.14),0 0 60px -20px rgba(77,189,211,.35),0 40px 80px rgba(0,0,0,.5)}

/* ================================================================
   Sidebar v2: grouped navigation (工作 / 业务 / 协作 / 管理), calmer surface,
   one clear selected state. Colours come from --wh-nav-* set per skin.
   ================================================================ */
html[data-theme]{
  --wh-nav-bg:radial-gradient(420px 260px at 0 0,rgba(77,189,211,.14),transparent 70%),linear-gradient(180deg,#0c1833 0%,#0f2044 100%);
  --wh-nav-edge:rgba(255,255,255,.06);
  --wh-nav-fg:rgba(226,232,240,.84);--wh-nav-icon:#8ea2bf;--wh-nav-label:rgba(160,176,200,.72);
  --wh-nav-hover:rgba(255,255,255,.06);--wh-nav-active-bg:rgba(77,189,211,.16);--wh-nav-active-fg:#fff;--wh-nav-active-icon:#7fd3e3;
  --wh-nav-bar:#4dbdd3;--wh-nav-divider:rgba(255,255,255,.08);
  --wh-nav-group-work:"工作";--wh-nav-group-business:"业务";--wh-nav-group-team:"协作";--wh-nav-group-admin:"管理";
}
html[lang="en"]{--wh-nav-group-work:"WORK";--wh-nav-group-business:"BUSINESS";--wh-nav-group-team:"TEAM";--wh-nav-group-admin:"ADMIN"}
html[lang="ar"]{--wh-nav-group-work:"العمل";--wh-nav-group-business:"الأعمال";--wh-nav-group-team:"الفريق";--wh-nav-group-admin:"الإدارة"}
html[data-theme="ocean"]{
  --wh-nav-bg:radial-gradient(420px 260px at 0 0,rgba(77,189,211,.16),transparent 70%),linear-gradient(180deg,#050a18,#081128);
  --wh-nav-edge:rgba(77,189,211,.16);--wh-nav-active-bg:linear-gradient(90deg,rgba(77,189,211,.24),rgba(70,112,170,.12));
}
html[data-theme="dark"]{
  --wh-nav-bg:linear-gradient(180deg,#111316,#131619);--wh-nav-edge:#23272c;
  --wh-nav-fg:#c6ccd3;--wh-nav-icon:#88919b;--wh-nav-label:#7d868f;--wh-nav-hover:rgba(255,255,255,.045);
  --wh-nav-active-bg:rgba(108,192,204,.13);--wh-nav-active-fg:#eef3f6;--wh-nav-active-icon:#8fc9d2;--wh-nav-bar:#6cc0cc;--wh-nav-divider:#23272c;
}

/* Surface. */
html[data-theme] body .topbar .hub-nav{background:var(--wh-nav-bg);box-shadow:inset -1px 0 0 var(--wh-nav-edge);padding:10px 12px 14px;gap:2px;scrollbar-width:none}
html[data-theme] body .topbar .hub-nav::-webkit-scrollbar{width:0}

/* Brand block. */
html[data-theme] body .topbar .hub-nav .hub-nav-brand{gap:12px;min-height:56px;margin:0 2px 10px;padding:4px 4px 14px;border-bottom:1px solid var(--wh-nav-divider)}
html[data-theme] body .topbar .hub-nav .hub-nav-brand-mark{width:38px;height:38px;padding:3px;border-radius:11px;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 6px 16px -6px rgba(77,189,211,.55)}
html[data-theme] body .topbar .hub-nav .hub-nav-brand-copy b{font-size:16px;color:#fff;letter-spacing:.01em}
html[data-theme] body .topbar .hub-nav .hub-nav-brand-copy small{margin-top:2px;font-size:12px;letter-spacing:.2em;color:var(--wh-nav-active-icon)}

/* Items. */
html[data-theme] body .topbar .hub-nav .viewtab{position:relative;gap:12px;min-height:40px;margin:0;padding:0 12px;border-radius:10px;background:transparent;box-shadow:none;
  color:var(--wh-nav-fg);font-size:14px;font-weight:500}
html[data-theme] body .topbar .hub-nav .viewtab i{color:var(--wh-nav-icon)}
html[data-theme] body .topbar .hub-nav .viewtab:hover{background:var(--wh-nav-hover);color:var(--wh-nav-active-fg)}
html[data-theme] body .topbar .hub-nav .viewtab:hover i{color:var(--wh-nav-active-fg)}
html[data-theme] body .topbar .hub-nav .viewtab.on{background:var(--wh-nav-active-bg);color:var(--wh-nav-active-fg);font-weight:650;box-shadow:none}
html[data-theme] body .topbar .hub-nav .viewtab.on i{color:var(--wh-nav-active-icon)}
html[data-theme] body .topbar .hub-nav .viewtab.on span{color:var(--wh-nav-active-fg);text-shadow:none}
html[data-theme] body .topbar .hub-nav .viewtab.on::after{content:"";display:block;position:absolute;inset-inline-start:-12px;top:9px;bottom:9px;right:auto;width:3px;height:auto;margin:0;
  border-radius:0 3px 3px 0;background:var(--wh-nav-bar);box-shadow:0 0 10px color-mix(in srgb,var(--wh-nav-bar) 60%,transparent)}
html[dir="rtl"][data-theme] body .topbar .hub-nav .viewtab.on::after{border-radius:3px 0 0 3px}
html[data-theme] body .topbar .hub-nav .viewtab:focus-visible{outline:2px solid var(--wh-nav-bar);outline-offset:-2px}
html[data-theme] body .topbar .hub-nav .viewtab .nav-task-count{margin-inline-start:auto;min-width:22px;height:20px;padding:0 7px;border-radius:999px;line-height:20px;
  font-size:12px;font-weight:650;background:#e5484d;color:#fff;box-shadow:none}
html[data-theme] body .topbar .hub-nav .viewtab .nav-task-count.calm{background:rgba(255,255,255,.12);color:var(--wh-nav-fg)}

/* Group labels: drawn on the first visible item of each group. */
html[data-theme] body .topbar .hub-nav :is(
    .viewtab[data-hub-nav="office"],
    .viewtab:is([data-hub-nav="freight"],[data-hub-nav="rental"],[data-hub-nav="repair"],[data-hub-nav="procurement"]):not([hidden]):not(.viewtab:is([data-hub-nav="freight"],[data-hub-nav="rental"],[data-hub-nav="repair"]):not([hidden]) ~ .viewtab),
    .viewtab[data-hub-nav="chat"],
    .viewtab[data-hub-nav="admin"]){margin-top:30px}
html[data-theme] body .topbar .hub-nav .viewtab[data-hub-nav="office"]{margin-top:24px}
html[data-theme] body .topbar .hub-nav :is(
    .viewtab[data-hub-nav="office"],
    .viewtab:is([data-hub-nav="freight"],[data-hub-nav="rental"],[data-hub-nav="repair"],[data-hub-nav="procurement"]):not([hidden]):not(.viewtab:is([data-hub-nav="freight"],[data-hub-nav="rental"],[data-hub-nav="repair"]):not([hidden]) ~ .viewtab),
    .viewtab[data-hub-nav="chat"],
    .viewtab[data-hub-nav="admin"])::before{
  position:absolute;inset-inline-start:12px;top:-22px;font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--wh-nav-label);pointer-events:none;white-space:nowrap}
html[data-theme] body .topbar .hub-nav .viewtab[data-hub-nav="office"]::before{content:var(--wh-nav-group-work)}
html[data-theme] body .topbar .hub-nav .viewtab:is([data-hub-nav="freight"],[data-hub-nav="rental"],[data-hub-nav="repair"],[data-hub-nav="procurement"])::before{content:var(--wh-nav-group-business)}
html[data-theme] body .topbar .hub-nav .viewtab[data-hub-nav="chat"]::before{content:var(--wh-nav-group-team)}
html[data-theme] body .topbar .hub-nav .viewtab[data-hub-nav="admin"]::before{content:var(--wh-nav-group-admin)}
html[data-theme] body .topbar .hub-nav .viewtab:is([data-hub-nav="rental"],[data-hub-nav="repair"],[data-hub-nav="procurement"]):is(.viewtab:is([data-hub-nav="freight"],[data-hub-nav="rental"],[data-hub-nav="repair"]):not([hidden]) ~ .viewtab)::before{content:none}

/* Collapsed (and narrow) sidebar: group labels become short dividers. */
html[data-theme][data-workhub-nav="collapsed"] body .topbar .hub-nav .viewtab::before{content:""!important;inset-inline-start:50%;top:-16px;width:22px;height:1px;margin-inline-start:-11px;background:var(--wh-nav-divider)}
html[data-theme][data-workhub-nav="collapsed"] body .topbar .hub-nav .viewtab:is([data-hub-nav="rental"],[data-hub-nav="repair"],[data-hub-nav="procurement"]):is(.viewtab:is([data-hub-nav="freight"],[data-hub-nav="rental"],[data-hub-nav="repair"]):not([hidden]) ~ .viewtab)::before,
html[data-theme][data-workhub-nav="collapsed"] body .topbar .hub-nav .viewtab:not([data-hub-nav="office"],[data-hub-nav="freight"],[data-hub-nav="rental"],[data-hub-nav="repair"],[data-hub-nav="procurement"],[data-hub-nav="chat"],[data-hub-nav="admin"])::before{content:none!important}
html[data-theme][data-workhub-nav="collapsed"] body .topbar .hub-nav :is(.viewtab[data-hub-nav="office"],.viewtab[data-hub-nav="chat"],.viewtab[data-hub-nav="admin"],
  .viewtab:is([data-hub-nav="freight"],[data-hub-nav="rental"],[data-hub-nav="repair"],[data-hub-nav="procurement"]):not([hidden])){margin-top:14px}
html[data-theme][data-workhub-nav="collapsed"] body .topbar .hub-nav .viewtab{padding:0}
html[data-theme][data-workhub-nav="collapsed"] body .topbar .hub-nav .viewtab.on::after{inset-inline-start:-9px}
@media(max-width:1100px){
  html[data-theme] body .topbar .hub-nav .viewtab::before{content:""!important;inset-inline-start:50%;top:-16px;width:22px;height:1px;margin-inline-start:-11px;background:var(--wh-nav-divider)}
  html[data-theme] body .topbar .hub-nav .viewtab:not([data-hub-nav="office"],[data-hub-nav="freight"],[data-hub-nav="rental"],[data-hub-nav="repair"],[data-hub-nav="procurement"],[data-hub-nav="chat"],[data-hub-nav="admin"])::before,
  html[data-theme] body .topbar .hub-nav .viewtab:is([data-hub-nav="rental"],[data-hub-nav="repair"],[data-hub-nav="procurement"]):is(.viewtab:is([data-hub-nav="freight"],[data-hub-nav="rental"],[data-hub-nav="repair"]):not([hidden]) ~ .viewtab)::before{content:none!important}
  html[data-theme] body .topbar .hub-nav .viewtab{padding:0}
  html[data-theme] body .topbar .hub-nav .viewtab.on::after{inset-inline-start:-9px}
}

/* Sidebar v2.1, premium details: layered surface with a soft top sheen, icons sit on
   small rounded tiles, the selected item gets a brand-gradient tile, group labels
   carry a hairline, and the admin group sits in its own quiet card. */
html[data-theme]{
  --wh-nav-bg:
    radial-gradient(280px 180px at 18% -40px,rgba(126,202,219,.22),transparent 70%),
    radial-gradient(360px 420px at 120% 105%,rgba(70,112,170,.28),transparent 70%),
    linear-gradient(180deg,#0b1730 0%,#0d1c3b 48%,#0a1631 100%);
  --wh-nav-tile:rgba(255,255,255,.05);--wh-nav-tile-edge:rgba(255,255,255,.08);
  --wh-nav-active-row:linear-gradient(90deg,rgba(77,189,211,.18),rgba(70,112,170,.10) 70%,transparent);
  --wh-nav-active-tile:linear-gradient(135deg,#4dbdd3,#4670aa);
  --wh-nav-card:rgba(255,255,255,.035);
}
html[data-theme="ocean"]{
  --wh-nav-bg:
    radial-gradient(280px 180px at 18% -40px,rgba(77,189,211,.22),transparent 70%),
    radial-gradient(360px 420px at 120% 105%,rgba(70,112,170,.26),transparent 70%),
    linear-gradient(180deg,#040917,#071026 60%,#050b1c);
}
html[data-theme="dark"]{
  --wh-nav-bg:radial-gradient(300px 200px at 18% -60px,rgba(108,192,204,.08),transparent 70%),linear-gradient(180deg,#121417,#141619);
  --wh-nav-tile:rgba(255,255,255,.04);--wh-nav-tile-edge:rgba(255,255,255,.06);
  --wh-nav-active-row:rgba(108,192,204,.10);--wh-nav-active-tile:linear-gradient(135deg,#5aaebb,#4a6d99);--wh-nav-card:rgba(255,255,255,.025);
}

/* Surface: a hairline highlight on the inner edge instead of a hard border. */
html[data-theme] body .topbar .hub-nav{box-shadow:inset -1px 0 0 rgba(255,255,255,.06),8px 0 30px -12px rgba(5,10,25,.45)}

/* Brand: logo on a soft glowing ring, wordmark with tighter tracking. */
html[data-theme] body .topbar .hub-nav .hub-nav-brand{min-height:60px;margin-bottom:6px;padding:6px 4px 16px;border-bottom:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent) bottom/100% 1px no-repeat}
html[data-theme] body .topbar .hub-nav .hub-nav-brand-mark{width:40px;height:40px;border-radius:12px;
  box-shadow:0 0 0 1px rgba(255,255,255,.22),0 0 0 4px rgba(126,202,219,.10),0 10px 24px -8px rgba(77,189,211,.6)}
html[data-theme] body .topbar .hub-nav .hub-nav-brand-copy b{font-size:16.5px;font-weight:650;letter-spacing:-.005em}
html[data-theme] body .topbar .hub-nav .hub-nav-brand-copy small{font-size:12px;font-weight:600;letter-spacing:.26em;opacity:.9}

/* Group labels: small caps text followed by a hairline that fades out. */
html[data-theme]:not([data-workhub-nav="collapsed"]) body .topbar .hub-nav .viewtab::before{display:flex;align-items:center;gap:10px;width:calc(100% - 12px);
  font-size:12px;font-weight:600;letter-spacing:.16em;opacity:.85}
html[data-theme]:not([data-workhub-nav="collapsed"]) body .topbar .hub-nav :is(.viewtab[data-hub-nav="office"],.viewtab[data-hub-nav="chat"],.viewtab[data-hub-nav="admin"],
  .viewtab:is([data-hub-nav="freight"],[data-hub-nav="rental"],[data-hub-nav="repair"],[data-hub-nav="procurement"])){
  --wh-nav-rule:linear-gradient(90deg,rgba(255,255,255,.10),transparent)}
html[data-theme]:not([data-workhub-nav="collapsed"]) body .topbar .hub-nav .viewtab::before{background:var(--wh-nav-rule,none) right center/calc(100% - 4.2em) 1px no-repeat}
html[dir="rtl"][data-theme]:not([data-workhub-nav="collapsed"]) body .topbar .hub-nav .viewtab::before{background-position:left center}

/* Items: icon tiles, roomier rows, gentle motion. */
html[data-theme] body .topbar .hub-nav .viewtab{min-height:40px;gap:12px;padding:0 10px;border-radius:12px;font-size:14px;font-weight:500;letter-spacing:.01em;
  transition:background .2s var(--wh-ease),color .2s var(--wh-ease)}
html[data-theme] body .topbar .hub-nav .viewtab i{width:30px;height:30px;flex:none;border-radius:9px;
  background:var(--wh-nav-tile);box-shadow:inset 0 0 0 1px var(--wh-nav-tile-edge);
  -webkit-mask:none;mask:none;display:grid;place-items:center;position:relative;transition:background .2s var(--wh-ease),box-shadow .2s var(--wh-ease)}
html[data-theme] body .topbar .hub-nav .viewtab i::after{content:"";width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--wh-icon) center/18px 18px no-repeat;mask:var(--wh-icon) center/18px 18px no-repeat}
html[data-theme] body .topbar .hub-nav .viewtab:hover i{background:rgba(255,255,255,.09)}
html[data-theme] body .topbar .hub-nav .viewtab.on{background:var(--wh-nav-active-row);font-weight:600}
html[data-theme] body .topbar .hub-nav .viewtab.on i{background:var(--wh-nav-active-tile);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px -6px rgba(77,189,211,.7)}
html[data-theme] body .topbar .hub-nav .viewtab.on::after{top:12px;bottom:12px;width:3px;opacity:.9}

/* Admin group: its own quiet card at the bottom. */
html[data-theme]:not([data-workhub-nav="collapsed"]) body .topbar .hub-nav .hub-nav-spacer + .viewtab[data-hub-nav="admin"]{box-shadow:none}
html[data-theme] body .topbar .hub-nav .viewtab:is([data-hub-nav="admin"],[data-hub-nav="settings"],[data-hub-nav="account"]):not(.on){background:var(--wh-nav-card)}
html[data-theme] body .topbar .hub-nav .viewtab[data-hub-nav="admin"]:not(.on){border-radius:12px 12px 4px 4px}
html[data-theme] body .topbar .hub-nav .viewtab[data-hub-nav="settings"]:not(.on){border-radius:4px}
html[data-theme] body .topbar .hub-nav .viewtab[data-hub-nav="account"]:not(.on){border-radius:4px 4px 12px 12px}

/* Collapsed and narrow: tiles centred, no row tint needed. */
html[data-theme][data-workhub-nav="collapsed"] body .topbar .hub-nav .viewtab{justify-content:center;padding:0}
html[data-theme][data-workhub-nav="collapsed"] body .topbar .hub-nav .viewtab.on{background:transparent}
@media(max-width:1100px){
  html[data-theme] body .topbar .hub-nav .viewtab{justify-content:center;padding:0}
  html[data-theme] body .topbar .hub-nav .viewtab.on{background:transparent}
}
@media(prefers-reduced-motion:reduce){html[data-theme] body .topbar .hub-nav .viewtab,html[data-theme] body .topbar .hub-nav .viewtab i{transition:none}}

/* ================================================================
   Display preferences (workhub_prefs.js). Set as data-* on <html> by the
   head boot script, so they apply before first paint and in every skin.
   ================================================================ */
html[data-wh-scale="90"]{zoom:.9;--wh-zoom:.9}
html[data-wh-scale="110"]{zoom:1.1;--wh-zoom:1.1}
html[data-wh-scale="120"]{zoom:1.2;--wh-zoom:1.2}
html[data-wh-scale="135"]{zoom:1.35;--wh-zoom:1.35}
/* Zoom scales viewport units too: keep full-height surfaces inside the window. */
html[data-wh-scale] .wh-prefs-dialog{max-height:calc(100dvh / var(--wh-zoom,1) - 48px)}
@media(min-width:801px){html[data-wh-scale] #office-workbench:not(.locations-mode){height:calc(100dvh / var(--wh-zoom,1) - 146px)}}
html[data-wh-weight="medium"] body{-webkit-text-stroke:.25px currentColor}
html[data-wh-weight="bold"] body{-webkit-text-stroke:.5px currentColor;font-weight:500}
html[data-theme][data-wh-font="yahei"]{--wh-font:"Microsoft YaHei UI","Microsoft YaHei","PingFang SC",sans-serif;--wh-tech:"Bahnschrift","Microsoft YaHei UI","Microsoft YaHei",sans-serif}
html[data-theme][data-wh-font="dengxian"]{--wh-font:"DengXian","等线","Microsoft YaHei",sans-serif}
html[data-theme][data-wh-font="system"]{--wh-font:system-ui,"Microsoft YaHei",sans-serif}
html[data-theme][data-wh-font] :is(input,select,textarea,button){font-family:inherit}
html[data-theme][data-wh-contrast="high"]{--dim:color-mix(in srgb,var(--txt) 88%,var(--bg))}
html[data-theme][data-wh-contrast="high"] .ra-shell{--a-dim:var(--dim)}
html[data-wh-motion="reduce"] *,html[data-wh-motion="reduce"] *::before,html[data-wh-motion="reduce"] *::after{transition:none!important;animation:none!important}

/* Top-bar entry. */
html[data-theme] .wh-prefs-button{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 11px;border:1px solid var(--line);border-radius:var(--wh-radius-sm);
  background:var(--surface1);color:var(--txt);font-weight:600;white-space:nowrap}
.wh-prefs-button span{font-family:var(--wh-tech);font-size:15px;color:var(--acc)}
.wh-prefs-button em{font-style:normal;font-size:13px}
@media(max-width:1180px){.wh-prefs-button em{display:none}}

/* Window. */
.wh-prefs-dialog{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:0;border:1px solid var(--line);border-radius:14px;
  background:var(--panel2,var(--panel));color:var(--txt);box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:auto}
.wh-prefs-dialog::backdrop{background:rgba(6,10,20,.55)}
.wh-prefs{display:grid;gap:0;margin:0}
.wh-prefs>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 22px 14px;border-bottom:1px solid var(--line)}
.wh-prefs>header h3{margin:4px 0 4px;font-size:20px}
.wh-prefs>header p{margin:0;color:var(--dim);font-size:13px}
html[data-theme] .wh-prefs-close{width:32px;height:32px;padding:0;font-size:20px;line-height:1;border:1px solid var(--line);background:transparent;color:var(--dim)}
.wh-prefs section{display:grid;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line)}
.wh-prefs h4{margin:0;font-size:13px;color:var(--dim);font-weight:600;letter-spacing:.04em}
.wh-row{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:12px}
.wh-row>span{font-size:14px;font-weight:600}
.wh-row select{width:100%;height:36px;padding:0 10px;border:1px solid var(--line);border-radius:var(--wh-radius-sm);background:var(--surface1);color:var(--txt);font-size:14px}
.wh-seg{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--surface0)}
html[data-theme] .wh-seg button{flex:1;min-width:0;height:32px;padding:0 6px;border:0;background:transparent;box-shadow:none;color:var(--dim);font-size:14px;white-space:nowrap}
html[data-theme] .wh-seg button:hover{color:var(--txt);background:color-mix(in srgb,var(--acc) 7%,transparent)}
html[data-theme] .wh-seg button.on{background:linear-gradient(100deg,var(--primary1),var(--primary2));color:#fff;font-weight:650;box-shadow:0 3px 10px -4px var(--wh-glow)}
.wh-sample{padding:10px 12px;border:1px dashed var(--line);border-radius:var(--wh-radius-sm);background:var(--surface0);font-size:14px;color:var(--txt)}
.wh-switch{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"track text";align-items:center;gap:12px;cursor:pointer}
.wh-switch input{position:absolute;opacity:0;pointer-events:none}
.wh-switch-track{grid-area:track;position:relative;width:38px;height:22px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);transition:background .16s}
.wh-switch-track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .16s}
.wh-switch input:checked+.wh-switch-track{background:var(--acc);border-color:var(--acc)}
.wh-switch input:checked+.wh-switch-track::after{transform:translateX(16px)}
.wh-switch input:focus-visible+.wh-switch-track{outline:2px solid var(--acc);outline-offset:2px}
.wh-switch>span:last-child{grid-area:text;display:grid;gap:2px}
.wh-switch b{font-size:14px}
.wh-switch small{font-size:12px;color:var(--dim)}
.wh-prefs>footer{display:flex;justify-content:space-between;gap:10px;padding:14px 22px 18px}
html[data-theme] .wh-prefs>footer button{height:36px;padding:0 16px;font-size:14px}
html[data-theme="ocean"] .wh-prefs-dialog{background:linear-gradient(180deg,#111b3a,#0b1128);border-color:rgba(125,190,255,.24);box-shadow:0 0 0 1px rgba(34,211,238,.08),0 0 40px -10px rgba(34,211,238,.35),0 30px 80px rgba(0,0,0,.6)}
html[data-theme="ocean"] .wh-prefs-dialog::before{content:"";position:sticky;display:block;top:0;height:1px;background:var(--wh-neon-line)}
@media(max-width:560px){.wh-row{grid-template-columns:1fr}}
html[data-theme] main:has(#mailview:not(.hidden)) #hero .metric span{font-size:12px}

/* Rental side menu: groups read as sections, items as their children.
   Group: accent-coloured caps with a marker and a divider; items: indented on a guide line. */
html[data-theme] .ra-shell .ra-nav-group{position:relative;gap:1px;margin:0;padding:6px 0 8px}
html[data-theme] .ra-shell .ra-nav-group+.ra-nav-group{border-top:1px solid var(--line);padding-top:10px}
html[data-theme] .ra-shell .ra-nav-group>span,html[data-theme] .ra-shell .ra-nav-more>summary{display:flex;align-items:center;gap:8px;padding:2px 8px 6px;
  font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--acc)}
html[data-theme] .ra-shell .ra-nav-group>span::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:linear-gradient(135deg,var(--wh-cyan),var(--acc))}
html[data-theme] .ra-shell .ra-nav .ra-nav-group>button:not(.primary):not(.on){position:relative;margin-left:12px;padding-left:14px;font-size:13px}
html[data-theme] .ra-shell .ra-nav-group>button::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:1px;background:var(--line)}
html[data-theme] .ra-shell .ra-nav-group>button[aria-current="page"]::before{width:3px;left:-1px;background:var(--wh-cyan);border-radius:2px}
html[data-theme] .ra-shell .ra-nav-group>button[aria-current="page"]:not(.primary):not(.on){box-shadow:none}

/* ================================================================
   Ocean neon v2: sci-fi control room. Deeper space, see-through glass panels
   with HUD corner brackets, a lit neon edge on the sidebar and top bar, ghost
   buttons that glow on hover, brighter figures. Logo colours stay the base
   (#4dbdd3 / #4670aa); --wh-neon is their lit version for lines and glow only.
   Pixel art stays a trace: the 2x2 title mark and square group bullets.
   ================================================================ */
html[data-theme="ocean"]{
  --bg:#02040b;--line:rgba(94,230,255,.14);--dim:#b4c4de;
  --panel:rgba(9,16,36,.78);--surface1:rgba(12,20,44,.82);--surface0:rgba(4,8,20,.8);
  --wh-neon:#5ee6ff;--wh-neon2:#6d8dff;
  --wh-neon-line:linear-gradient(90deg,transparent,#5ee6ff 22%,#4dbdd3 50%,#6d8dff 80%,transparent);
  --wh-glass:linear-gradient(180deg,rgba(14,24,54,.74),rgba(6,11,28,.82));
  --wh-glass-edge:rgba(94,230,255,.16);
  --wh-hud:
    linear-gradient(#5ee6ff,#5ee6ff) 0 0/14px 1px no-repeat,linear-gradient(#5ee6ff,#5ee6ff) 0 0/1px 14px no-repeat,
    linear-gradient(#6d8dff,#6d8dff) 100% 100%/14px 1px no-repeat,linear-gradient(#6d8dff,#6d8dff) 100% 100%/1px 14px no-repeat;
  --scroll:#2a6c88;
}

/* Space: two nebula lights, a fine grid that fades into a vignette at the edges. */
html[data-theme="ocean"] body{background:
  radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55) 100%),
  radial-gradient(900px 560px at 78% -6%,rgba(109,141,255,.30),transparent 62%),
  radial-gradient(820px 560px at 12% 104%,rgba(94,230,255,.22),transparent 62%),
  radial-gradient(600px 380px at 46% 52%,rgba(77,189,211,.07),transparent 70%),
  linear-gradient(rgba(94,230,255,.045) 1px,transparent 1px) 0 0/44px 44px,
  linear-gradient(90deg,rgba(94,230,255,.045) 1px,transparent 1px) 0 0/44px 44px,
  var(--bg);background-attachment:fixed}

/* Top bar: dark glass, brighter neon seam with a soft bloom. */
html[data-theme="ocean"] body .topbar{background:linear-gradient(180deg,rgba(3,6,16,.92),rgba(5,9,22,.86))}
html[data-theme="ocean"] body .topbar:after{height:1px;opacity:1;background:var(--wh-neon-line);
  box-shadow:0 0 6px rgba(94,230,255,.9),0 0 18px rgba(94,230,255,.45),0 0 36px rgba(109,141,255,.35)}
html[data-theme="ocean"] .topbar .brandline h1{color:#fff;text-shadow:0 0 18px rgba(94,230,255,.35)}

/* Sidebar: a lit vertical seam on the inner edge; selected row glows. */
html[data-theme="ocean"]{
  --wh-nav-bg:
    radial-gradient(260px 200px at 10% -30px,rgba(94,230,255,.20),transparent 70%),
    radial-gradient(340px 420px at 130% 110%,rgba(109,141,255,.22),transparent 70%),
    linear-gradient(rgba(94,230,255,.035) 1px,transparent 1px) 0 0/100% 22px,
    linear-gradient(180deg,#02050f,#040a1c 60%,#030714);
  --wh-nav-fg:#d5e2f5;--wh-nav-icon:#93b4d6;--wh-nav-label:rgba(126,214,236,.62);
  --wh-nav-hover:rgba(94,230,255,.07);--wh-nav-bar:#5ee6ff;
  --wh-nav-tile:rgba(94,230,255,.05);--wh-nav-tile-edge:rgba(94,230,255,.14);
  --wh-nav-active-row:linear-gradient(90deg,rgba(94,230,255,.20),rgba(109,141,255,.10) 65%,transparent);
  --wh-nav-active-tile:linear-gradient(135deg,#5ee6ff,#4670aa);
  --wh-nav-card:rgba(94,230,255,.035);--wh-nav-divider:rgba(94,230,255,.12);
}
html[data-theme="ocean"] body .topbar .hub-nav{box-shadow:inset -1px 0 0 rgba(94,230,255,.22),1px 0 0 rgba(94,230,255,.06),10px 0 40px -14px rgba(94,230,255,.22)}
html[data-theme="ocean"] body .topbar .hub-nav .viewtab.on{box-shadow:inset 0 0 0 1px rgba(94,230,255,.18),0 0 24px -8px rgba(94,230,255,.55)}
html[data-theme="ocean"] body .topbar .hub-nav .viewtab.on i{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px rgba(94,230,255,.4),0 0 16px -2px rgba(94,230,255,.75)}
html[data-theme="ocean"] body .topbar .hub-nav .viewtab.on::after{opacity:1;box-shadow:0 0 6px #5ee6ff,0 0 16px rgba(94,230,255,.7)}
html[data-theme="ocean"] body .topbar .hub-nav .viewtab:hover:not(.on) i{box-shadow:inset 0 0 0 1px rgba(94,230,255,.35);color:#e6fbff}
html[data-theme="ocean"] body .topbar .hub-nav .hub-nav-brand-mark{box-shadow:0 0 0 1px rgba(94,230,255,.5),0 0 0 5px rgba(94,230,255,.08),0 0 26px -4px rgba(94,230,255,.75)}
html[data-theme="ocean"] body .topbar .hub-nav .hub-nav-brand-copy small{color:#7fe9ff;text-shadow:0 0 10px rgba(94,230,255,.45)}
/* Group labels: square pixel bullet before the text (pixel trace). */
html[data-theme="ocean"]:not([data-workhub-nav="collapsed"]) body .topbar .hub-nav :is(.viewtab[data-hub-nav="office"],.viewtab[data-hub-nav="chat"],.viewtab[data-hub-nav="admin"],
  .viewtab:is([data-hub-nav="freight"],[data-hub-nav="rental"],[data-hub-nav="repair"],[data-hub-nav="procurement"])){
  --wh-nav-rule:linear-gradient(90deg,rgba(94,230,255,.22),transparent)}

/* Glass panels: see-through with blur, cyan hairline, HUD corner brackets, neon top seam. */
html[data-theme="ocean"] :is(#mailview .mail-shell,#mailview .business-sidebar,#taskview .simple-task-shell,#freightview .freight-panel,
    #freightview .freight-side,#freightview .freight-commercial-hero,#freightview .freight-commercial-start,#freightview .freight-ops-summary article,
    .ra-panel,.ra-card,.ra-kpis article,.settings-card,.account-card,.directory-shell,.case-board,.case-card,#office-workbench,#workspace-context-bar,#hero,.deep-card){
  background:var(--wh-hud),var(--wh-glass);border:1px solid var(--wh-glass-edge);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 40px -20px rgba(94,230,255,.25),0 0 36px -16px rgba(94,230,255,.45),0 20px 50px rgba(0,0,0,.5)}
html[data-theme="ocean"] :is(#mailview .mail-shell,#taskview .simple-task-shell,#freightview .freight-panel,.ra-panel,#office-workbench,#hero,.ra-card,.ra-kpis article,#freightview .freight-ops-summary article)::before{
  left:18px;right:18px;background:var(--wh-neon-line);box-shadow:0 0 6px rgba(94,230,255,.9),0 0 20px rgba(94,230,255,.5),0 0 34px rgba(109,141,255,.35)}
html[data-theme="ocean"] :is(.ra-card,.ra-kpis article,#freightview .freight-ops-summary article):hover{
  border-color:rgba(94,230,255,.5);box-shadow:inset 0 0 40px -16px rgba(94,230,255,.35),0 0 0 1px rgba(94,230,255,.2),0 0 32px -6px rgba(94,230,255,.55),0 20px 50px rgba(0,0,0,.5)}
html[data-theme="ocean"] body #workspace-context-bar#workspace-context-bar{background:var(--wh-glass)}

/* Titles and figures: white with a cyan halo; small labels stay crisp. */
html[data-theme="ocean"] :is(#mailview .mail-section-head h2,#freightview .freight-section-head h2,#taskview .simple-task-head h2,.ra-head h2,#worldview .studio-scene-heading h2){
  color:#fff;text-shadow:0 0 22px rgba(94,230,255,.35)}
html[data-theme="ocean"] :is(#mailview .mail-section-head h2,#freightview .freight-section-head h2,#taskview .simple-task-head h2,.ra-head h2,#worldview .studio-scene-heading h2)::before{
  background:#5ee6ff;box-shadow:7px 0 #6d8dff,0 7px #4dbdd3,7px 7px #5ee6ff,0 0 12px rgba(94,230,255,.9)}
html[data-theme="ocean"] :is(#hero .metric b,.manager-kpi:not(.info) b,.workspace-stat b,.ra-kpis b,.ra-card b,
    #freightview .freight-ops-summary b,.freight-summary b,.unit-metrics b,.company-metrics b){
  color:#f0fdff;text-shadow:0 0 10px rgba(94,230,255,.55),0 0 26px rgba(94,230,255,.25)}
html[data-theme="ocean"] :is(.eyebrow,.ra-eyebrow,.wf-eyebrow,.rental-eyebrow,.ops-overline,.latest-kicker,.drawer-eyebrow,
    .task-detail-kicker,.workhub-login-kicker,.world-site-kicker,#office-panel-kicker){color:#7fe9ff}

/* Chips, inputs, secondary buttons: ghost glass with a cyan hairline; glow on hover and focus. */
html[data-theme="ocean"] :is(#hero .metric,.manager-kpi,.simple-stat,.wh-system-pending,.ra-tag){background:rgba(94,230,255,.045);border-color:rgba(94,230,255,.16)}
html[data-theme="ocean"] :is(input,select,textarea){background:rgba(2,6,16,.72);border-color:rgba(94,230,255,.2);color:var(--txt)}
html[data-theme="ocean"] :is(input,select,textarea):focus{border-color:rgba(94,230,255,.75);box-shadow:0 0 0 3px rgba(94,230,255,.14),0 0 22px -4px rgba(94,230,255,.65);outline:none}
html[data-theme="ocean"] select option{background:#08102a;color:var(--txt)}
html[data-theme="ocean"] button:not(.primary):not(.viewtab):not(.on){
  background:linear-gradient(180deg,rgba(94,230,255,.07),rgba(94,230,255,.02));border-color:rgba(94,230,255,.22);color:#e6f3ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
html[data-theme="ocean"] button:not(.primary):not(.viewtab):not(.on):hover:not(:disabled){
  background:linear-gradient(180deg,rgba(94,230,255,.14),rgba(94,230,255,.05));border-color:rgba(94,230,255,.6);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 18px -4px rgba(94,230,255,.7)}
html[data-theme="ocean"] :is(.office-panel-switcher,.studio-queue-filters,.mail-mode-tabs,.view-tabs:not(.hub-nav)){background:rgba(2,6,16,.6);border-color:rgba(94,230,255,.16)}
html[data-theme="ocean"] #worldview :is(.office-panel-switcher button.on,.studio-queue-filters button.on),
html[data-theme="ocean"] :is(.mail-mode-tabs button.on,.task-filter.on,.case-filter.on){
  background:linear-gradient(180deg,rgba(94,230,255,.24),rgba(109,141,255,.16));color:#fff;
  box-shadow:inset 0 0 0 1px rgba(94,230,255,.4),inset 0 -2px 0 #5ee6ff,0 0 18px -4px rgba(94,230,255,.8)}

/* Primary actions: lit teal-to-electric-blue bar with bloom (white text holds 4.5:1). */
html[data-theme="ocean"] button.primary,html[data-theme="ocean"] #freightview .freight-side .freight-module-tabs button.on{
  background:linear-gradient(100deg,#11788f,#2d68b0 55%,#4a5fc4);border:1px solid rgba(94,230,255,.55);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(94,230,255,.12),0 0 22px -2px rgba(94,230,255,.6),0 0 44px -10px rgba(109,141,255,.7)}
html[data-theme="ocean"] button.primary:hover:not(:disabled){filter:brightness(1.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 0 1px rgba(94,230,255,.25),0 0 30px 0 rgba(94,230,255,.65),0 0 56px -8px rgba(109,141,255,.8)}

/* Office canvas and rental: same glass and grid. */
html[data-theme="ocean"] #worldview #world-map .virtual-office.studio-office{background:
  radial-gradient(circle at 50% 38%,rgba(94,230,255,.12),transparent 46%),
  linear-gradient(rgba(94,230,255,.06) 1px,transparent 1px) 0 0/32px 32px,
  linear-gradient(90deg,rgba(94,230,255,.06) 1px,transparent 1px) 0 0/32px 32px,
  rgba(2,5,14,.55)}
html[data-theme="ocean"] #worldview #office-quick-panel{background:linear-gradient(180deg,rgba(8,14,32,.78),rgba(4,8,20,.82));border-right:1px solid rgba(94,230,255,.14)}
html[data-theme="ocean"] #worldview .studio-empty{background:var(--wh-hud),var(--wh-glass);border-color:var(--wh-glass-edge);box-shadow:0 0 40px -16px rgba(94,230,255,.5),0 20px 50px rgba(0,0,0,.45)}
html[data-theme="ocean"] #worldview .studio-empty::before{box-shadow:0 0 0 1px rgba(94,230,255,.4),0 0 34px -2px rgba(94,230,255,.7)}
html[data-theme="ocean"] .ra-nav button{background:rgba(94,230,255,.035);border-color:rgba(94,230,255,.12)}
html[data-theme="ocean"] .ra-nav button[aria-current="page"]{background:linear-gradient(90deg,rgba(94,230,255,.2),transparent);box-shadow:inset 2px 0 #5ee6ff,0 0 18px -8px rgba(94,230,255,.9)}
html[data-theme="ocean"] .ra-shell{--a-bg:rgba(10,18,40,.8);--a-surface:rgba(4,8,20,.7);--a-line:rgba(94,230,255,.16);--a-acc:#5ee6ff}

/* Sign-in: glass card with neon frame and HUD corners. */
html[data-theme="ocean"] .workhub-login-shell{border-color:rgba(94,230,255,.22);
  box-shadow:0 0 0 1px rgba(94,230,255,.14),0 0 70px -18px rgba(94,230,255,.45),0 0 120px -40px rgba(109,141,255,.5),0 40px 80px rgba(0,0,0,.55)}
html[data-theme="ocean"] .workhub-login-preview-button.workhub-login-preview-button{
  background:linear-gradient(100deg,#11788f,#2d68b0 55%,#4a5fc4)!important;border:1px solid rgba(94,230,255,.55)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 26px -4px rgba(94,230,255,.65)}

/* Scrollbars glow faintly. */
html[data-theme="ocean"] *::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(94,230,255,.45),rgba(109,141,255,.4));background-clip:content-box}

@media(prefers-reduced-motion:reduce){html[data-theme="ocean"] :is(.ra-card,.ra-kpis article,#freightview .freight-ops-summary article):hover{transform:none}}
/* ================================================================
   Ocean readability pass. Chinese falls back to Microsoft YaHei, which only has
   regular and bold, so 600-800 weights at 12-13px render as heavy bold and smear
   on near-black. Here: a softer navy base, slightly warmer body text, brighter
   secondary text, regular weight and one step larger for small labels, no glow
   on reading text. Colour: each KPI card and nav group gets its own accent
   (cyan, violet, amber, green) instead of cyan everywhere.
   ================================================================ */
html[data-theme="ocean"]{
  --wh-font:"Segoe UI Variable Text","Segoe UI","Microsoft YaHei UI","Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  --bg:#081022;--txt:#e9eff9;--dim:#c3cfe3;
  --panel:rgba(17,28,58,.86);--surface1:rgba(20,32,64,.88);--surface0:rgba(9,16,36,.85);
  --wh-glass:linear-gradient(180deg,rgba(20,33,68,.84),rgba(12,21,46,.88));
  --wh-acc-cyan:#5ee6ff;--wh-acc-violet:#a78bfa;--wh-acc-amber:#fbbf24;--wh-acc-green:#34d399;
}
html[data-theme="ocean"] body{line-height:1.6;letter-spacing:.01em;background-color:var(--bg)}
html[data-theme="ocean"] body{background:
  radial-gradient(120% 90% at 50% 40%,transparent 60%,rgba(0,0,0,.35) 100%),
  radial-gradient(900px 560px at 78% -6%,rgba(109,141,255,.22),transparent 62%),
  radial-gradient(820px 560px at 12% 104%,rgba(94,230,255,.16),transparent 62%),
  linear-gradient(rgba(94,230,255,.035) 1px,transparent 1px) 0 0/44px 44px,
  linear-gradient(90deg,rgba(94,230,255,.035) 1px,transparent 1px) 0 0/44px 44px,
  var(--bg);background-attachment:fixed}

/* Reading text: no halo on titles; figures keep a light one. */
html[data-theme="ocean"] :is(#mailview .mail-section-head h2,#freightview .freight-section-head h2,#taskview .simple-task-head h2,.ra-head h2,#worldview .studio-scene-heading h2),
html[data-theme="ocean"] .topbar .brandline h1{text-shadow:none}
html[data-theme="ocean"] :is(#hero .metric b,.manager-kpi:not(.info) b,.workspace-stat b,.ra-kpis b,.ra-card b,
    #freightview .freight-ops-summary b,.freight-summary b,.unit-metrics b,.company-metrics b){text-shadow:0 0 12px color-mix(in srgb,var(--wh-card-accent,#5ee6ff) 30%,transparent)}

/* Small labels: regular weight, one step up. */
html[data-theme="ocean"] small{font-size:13px}
html[data-theme="ocean"] :is(.ra-card,.ra-kpis article,#freightview .freight-ops-summary article)>span{font-size:14px;font-weight:400;color:var(--dim)}
html[data-theme="ocean"] :is(.ra-card,.ra-kpis article,#freightview .freight-ops-summary article) small{font-size:13px;color:#aebcd4}
html[data-theme="ocean"] .ra-shell .ra-nav .ra-nav-group>button:not(.primary):not(.on){font-size:14px;font-weight:400}
html[data-theme="ocean"] .ra-shell .ra-nav .ra-nav-group>button[aria-current="page"]{font-weight:700;color:#fff}
html[data-theme="ocean"] body .topbar .hub-nav .viewtab span{font-size:14px}
html[data-theme="ocean"] body .topbar .hub-nav .viewtab:not(.on){font-weight:400}
html[data-theme="ocean"] :is(#hero .metric span,.manager-kpi span,.simple-stat span){font-weight:400;color:var(--dim)}
html[data-theme="ocean"] :is(input,select,textarea)::placeholder{color:#9fb0cc}

/* Colour: KPI cards rotate cyan / violet / amber / green on the top seam and figure. */
html[data-theme="ocean"] :is(.ra-cards>.ra-card,.ra-kpis>article,#freightview .freight-ops-summary>article,#freightview .freight-kpis>.freight-kpi):nth-child(4n+1){--wh-card-accent:var(--wh-acc-cyan)}
html[data-theme="ocean"] :is(.ra-cards>.ra-card,.ra-kpis>article,#freightview .freight-ops-summary>article,#freightview .freight-kpis>.freight-kpi):nth-child(4n+2){--wh-card-accent:var(--wh-acc-violet)}
html[data-theme="ocean"] :is(.ra-cards>.ra-card,.ra-kpis>article,#freightview .freight-ops-summary>article,#freightview .freight-kpis>.freight-kpi):nth-child(4n+3){--wh-card-accent:var(--wh-acc-amber)}
html[data-theme="ocean"] :is(.ra-cards>.ra-card,.ra-kpis>article,#freightview .freight-ops-summary>article,#freightview .freight-kpis>.freight-kpi):nth-child(4n+4){--wh-card-accent:var(--wh-acc-green)}
html[data-theme="ocean"] :is(.ra-cards>.ra-card,.ra-kpis>article,#freightview .freight-ops-summary>article,#freightview .freight-kpis>.freight-kpi)::before{
  background:linear-gradient(90deg,transparent,var(--wh-card-accent) 30%,color-mix(in srgb,var(--wh-card-accent) 40%,transparent) 75%,transparent);
  box-shadow:0 0 8px color-mix(in srgb,var(--wh-card-accent) 70%,transparent)}
html[data-theme="ocean"] :is(.ra-cards>.ra-card,.ra-kpis>article,#freightview .freight-ops-summary>article,#freightview .freight-kpis>.freight-kpi)>b{color:color-mix(in srgb,var(--wh-card-accent) 35%,#fff)}
html[data-theme="ocean"] :is(.ra-cards>.ra-card,.ra-kpis>article,#freightview .freight-ops-summary>article,#freightview .freight-kpis>.freight-kpi){
  background:linear-gradient(180deg,color-mix(in srgb,var(--wh-card-accent,#5ee6ff) 8%,transparent),transparent 60%),var(--wh-glass)}

/* Colour: nav icons tinted by group (work cyan, business amber, team violet, admin slate). */
html[data-theme="ocean"] body .topbar .hub-nav .viewtab:not(.on):is([data-hub-nav="office"],[data-hub-nav="aistaff"],[data-hub-nav="matters"],[data-hub-nav="mail"]) i{color:#7fe3f5}
html[data-theme="ocean"] body .topbar .hub-nav .viewtab:not(.on):is([data-hub-nav="freight"],[data-hub-nav="rental"],[data-hub-nav="repair"],[data-hub-nav="procurement"]) i{color:#f6c768}
html[data-theme="ocean"] body .topbar .hub-nav .viewtab:not(.on):is([data-hub-nav="chat"],[data-hub-nav="wecom"],[data-hub-nav="org"],[data-hub-nav="workspace"]) i{color:#b9a6ff}
html[data-theme="ocean"] body .topbar .hub-nav .viewtab:not(.on):is([data-hub-nav="admin"],[data-hub-nav="settings"],[data-hub-nav="account"]) i{color:#a9bad3}/* Freight KPI buttons join the same card language. */
html[data-theme="ocean"] #freightview .freight-kpis>.freight-kpi{position:relative;border:1px solid var(--wh-glass-edge);border-radius:var(--wh-radius-sm);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 30px -16px color-mix(in srgb,var(--wh-card-accent) 60%,transparent),0 16px 40px rgba(0,0,0,.4)}
html[data-theme="ocean"] #freightview .freight-kpis>.freight-kpi::before{content:"";position:absolute;left:12px;right:12px;top:-1px;height:1px;pointer-events:none}
html[data-theme="ocean"] #freightview .freight-kpis>.freight-kpi>b{text-shadow:0 0 12px color-mix(in srgb,var(--wh-card-accent) 30%,transparent)}
html[data-theme="ocean"] #freightview .freight-kpis>.freight-kpi>span{font-size:14px;font-weight:400;color:var(--dim)}
html[data-theme="ocean"] #freightview .freight-kpis>.freight-kpi:hover{border-color:color-mix(in srgb,var(--wh-card-accent) 55%,transparent)}

/* ================================================================
   Collapsible menu groups (workhub_nav_fold.js adds html.wh-nav-fold).
   Main sidebar: real header buttons replace the drawn group labels.
   Sub-menus (rental / repair): the group label folds its items.
   The group holding the current page always stays open.
   ================================================================ */
html.wh-nav-fold[data-theme] body .topbar .hub-nav .viewtab::before{content:none!important}
html.wh-nav-fold[data-theme] body .topbar .hub-nav .viewtab{margin-top:0!important}
html.wh-nav-fold[data-theme] body .topbar .hub-nav .wh-nav-group-head{display:flex;align-items:center;gap:10px;width:100%;min-height:22px;margin:8px 0 0;padding:0 6px 0 12px;
  border:0;border-radius:8px;background:transparent;box-shadow:none;color:var(--wh-nav-label);cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.16em;text-align:start;transition:color .16s var(--wh-ease),background .16s var(--wh-ease)}
html.wh-nav-fold[data-theme] body .topbar .hub-nav .wh-nav-group-head[data-wh-group="work"]{margin-top:4px}
html.wh-nav-fold[data-theme] body .topbar .hub-nav .wh-nav-group-head:hover{color:var(--wh-nav-active-fg);background:var(--wh-nav-hover)}
html.wh-nav-fold[data-theme] body .topbar .hub-nav .wh-nav-group-head:focus-visible{outline:2px solid var(--wh-nav-bar);outline-offset:-2px}
html.wh-nav-fold .wh-nav-group-head[data-wh-group="work"] .wh-nav-group-name::before{content:var(--wh-nav-group-work)}
html.wh-nav-fold .wh-nav-group-head[data-wh-group="business"] .wh-nav-group-name::before{content:var(--wh-nav-group-business)}
html.wh-nav-fold .wh-nav-group-head[data-wh-group="team"] .wh-nav-group-name::before{content:var(--wh-nav-group-team)}
html.wh-nav-fold .wh-nav-group-head[data-wh-group="admin"] .wh-nav-group-name::before{content:var(--wh-nav-group-admin)}
html.wh-nav-fold .wh-nav-group-head .wh-nav-group-name{flex:none;white-space:nowrap}
html.wh-nav-fold .wh-nav-group-head::after{content:"";order:1;flex:1;height:1px;background:linear-gradient(90deg,var(--wh-nav-divider),transparent)}
html[dir="rtl"].wh-nav-fold .wh-nav-group-head::after{background:linear-gradient(270deg,var(--wh-nav-divider),transparent)}
html.wh-nav-fold .wh-nav-group-head .wh-nav-chevron,html.wh-nav-fold .wh-sub-fold-toggle::after{flex:none;width:6px;height:6px;margin:0 4px;border:solid currentColor;border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .16s var(--wh-ease);opacity:.8}
html.wh-nav-fold .wh-nav-group-head .wh-nav-chevron{order:2}
html.wh-nav-fold .wh-nav-group-head.wh-folded .wh-nav-chevron{transform:rotate(-45deg)}
html[dir="rtl"].wh-nav-fold .wh-nav-group-head.wh-folded .wh-nav-chevron{transform:rotate(135deg)}
/* Icon-only sidebar: headers turn back into short dividers and nothing is folded. */
html.wh-nav-fold[data-theme][data-workhub-nav="collapsed"] body .topbar .hub-nav .wh-nav-group-head{justify-content:center;min-height:14px;margin:6px 0;padding:0;pointer-events:none}
html.wh-nav-fold[data-workhub-nav="collapsed"] .wh-nav-group-head::after{flex:none;width:22px;background:var(--wh-nav-divider)}
@media(max-width:1100px){
  html.wh-nav-fold[data-theme] body .topbar .hub-nav .wh-nav-group-head{justify-content:center;min-height:14px;margin:6px 0;padding:0;pointer-events:none}
  html.wh-nav-fold .wh-nav-group-head::after{flex:none;width:22px;background:var(--wh-nav-divider)}
}

/* Sub-menus. */
html.wh-nav-fold[data-theme] .ra-shell .ra-nav-group>span.wh-sub-fold-toggle{cursor:pointer;border-radius:6px;user-select:none}
html.wh-nav-fold[data-theme] .ra-shell .ra-nav-group>span.wh-sub-fold-toggle::after{content:"";margin-inline-start:auto;color:var(--dim)}
html.wh-nav-fold[data-theme] .ra-shell .ra-nav-group>span.wh-sub-fold-toggle:hover{background:color-mix(in srgb,var(--acc) 8%,transparent)}
html.wh-nav-fold[data-theme] .ra-shell .ra-nav-group>span.wh-sub-fold-toggle:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
html.wh-nav-fold[data-theme] .ra-shell .ra-nav-group.wh-folded:not(:has([aria-current="page"]))>span.wh-sub-fold-toggle::after{transform:rotate(-45deg)}
html[dir="rtl"].wh-nav-fold[data-theme] .ra-shell .ra-nav-group.wh-folded:not(:has([aria-current="page"]))>span.wh-sub-fold-toggle::after{transform:rotate(135deg)}
html.wh-nav-fold[data-theme] .ra-shell .ra-nav-group.wh-folded:not(:has([aria-current="page"])){padding-bottom:4px}
@media(prefers-reduced-motion:reduce){html.wh-nav-fold :is(.wh-nav-group-head,.wh-nav-chevron,.wh-sub-fold-toggle::after){transition:none}}
/* ================================================================
   Dialog forms, every skin: field labels were 12px at weight 600, which
   Microsoft YaHei draws as heavy bold and smears at small sizes. Labels go to
   13px regular in a softer colour, fields to 14px, so the field text (what
   people type) is the brightest thing in the form.
   ================================================================ */
html[data-theme] dialog :is(label,legend,.tr-form-line-head,.ra-field-label){font-size:13px;font-weight:500;line-height:1.5;color:var(--dim);letter-spacing:.01em}
html[data-theme] dialog :is(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]),select,textarea){font-size:14px;color:var(--txt)}
html[data-theme] dialog input[type=file]{font-size:13px;color:var(--dim)}
html[data-theme] dialog textarea[name=paste]{font-family:var(--wh-font);font-size:13px}
html[data-theme] dialog :is(input,textarea)::placeholder{color:color-mix(in srgb,var(--dim) 80%,transparent)}
html[data-theme] dialog :is(h2,h3){font-weight:650;letter-spacing:0}
html[data-theme] dialog :is(.tr-note,.ra-note,p){font-size:13px;line-height:1.6}
html[data-theme] dialog footer button{font-size:14px;min-height:36px;padding-inline:16px}
html[data-theme="ocean"] dialog{background:linear-gradient(180deg,#14214a,#0d1734);border-color:rgba(94,230,255,.22)}
html[data-theme="ocean"] dialog :is(label,legend,.tr-form-line-head,.ra-field-label){color:#c9d6ea}