/* MaxxOS — "Dala" dark-cosmic design system.
   Particle cosmos on a void: pure-black canvas, a single saturated violet
   (Plum Voltage) as the only action color, white type glowing on the void,
   hairline borders, pill geometry, no shadows, no gradients.

   The app is token-driven: every component reads the variables in :root, so the
   whole platform reskins from here. Legacy variable NAMES are preserved (e.g.
   --gold now resolves to Plum Voltage) so inline styles in .razor files inherit
   the new system automatically. */

*{box-sizing:border-box;margin:0;padding:0}

:root {
  /* ── Dala palette ── */
  --void: #000000;
  --bone: #ffffff;
  --ash: #bdbdbd;
  --smoke: #9a9a9a;
  /* MaxxOS brand blue (Brand Guidelines v1.0) — the single action color.
     Sampled from the wordmark: #51BCFF. The --plum token name is kept so every
     existing var(--plum)/var(--gold) usage reskins without touching 80+ files. */
  --plum: #51BCFF;
  --plum-dim: rgba(81,188,255,0.14);
  --plum-border: rgba(81,188,255,0.45);
  /* Cube palette, for logo-adjacent surfaces */
  --brand-cube-top: #68C7FF;
  --brand-cube-left: #2F8ADB;
  --brand-cube-right: #1F62B1;
  --amber-spark: #ffb829;
  --lichen: #2bbd8f;        /* brightened lichen for legibility on the void */

  /* ── Brand accent (legacy name --gold now = Plum Voltage) ── */
  --gold: var(--plum);
  --gold-dim: var(--plum-dim);
  --gold-border: var(--plum-border);

  /* ── Canvas + surfaces (flat: depth from contrast, not elevation) ── */
  --bk: #000000;            /* the void */
  --s1: #08080b;            /* card surface — a hair above the void */
  --s2: #101015;            /* input / striping surface */
  --bd: rgba(255,255,255,0.12);   /* hairline */
  --bd2: rgba(255,255,255,0.24);  /* stronger hairline */

  /* ── Type colors ── */
  --txt: #ffffff;           /* bone */
  --m1: #9a9a9a;            /* smoke — secondary */
  --m2: #6a6a6a;            /* tertiary / muted */

  /* ── Functional status hues (small pills/dots only; plum stays the authority) ── */
  --green: #34d399;  --green-dim: rgba(52,211,153,0.14);
  --red: #ff5c5c;    --red-dim: rgba(255,92,92,0.14);  --red-border: rgba(255,92,92,0.4);
  --blue: #6aa0ff;   --blue-dim: rgba(106,160,255,0.14);
  --purple: #b794ff; --purple-dim: rgba(183,148,255,0.14);
  --amber: #ffb829;  --amber-dim: rgba(255,184,41,0.14);
  --teal: #2dd4bf;   --teal-dim: rgba(45,212,191,0.14);

  /* ── Fonts (single family: Inter carries weight 200→700) ── */
  --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, 'JetBrains Mono', 'Consolas', monospace;

  /* ── Geometry: pill-first ── */
  --r: 16px;
  --rl: 24px;
  --color-accent: var(--plum);

  /* Spacing scale (6px base) */
  --space-xs: 6px; --space-sm: 6px; --space-md: 12px; --space-lg: 18px;
  --space-xl: 24px; --space-2xl: 30px; --space-3xl: 60px;

  /* Radii — nothing interactive smaller than a generous round */
  --radius-sm: 8px;
  --radius-md: 12px;        /* inputs */
  --radius-lg: var(--r);    /* 16px — cards */
  --radius-xl: var(--rl);   /* 24px — large cards / panels */
  --radius-pill: 999px;     /* buttons, chips, tags, status */

  /* Shadows — none. Depth is the void. */
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none;

  /* Status aliases */
  --color-success: var(--green); --color-success-dim: var(--green-dim);
  --color-danger: var(--red);    --color-danger-dim: var(--red-dim);
  --color-info: var(--blue);     --color-info-dim: var(--blue-dim);
  --color-warning: var(--amber); --color-warning-dim: var(--amber-dim);
}

/* ── Focus-visible ── */
:focus-visible{outline:2px solid var(--plum);outline-offset:2px}

html,body{min-height:100vh;background:var(--bk);font-family:var(--font-body);color:var(--txt);font-size:14px;letter-spacing:0.01em;-webkit-font-smoothing:antialiased}
::selection{background:var(--plum);color:var(--bone)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.14);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.28)}
a{color:inherit}
code,.mono{font-family:var(--font-mono)}

/* ── Particle constellation canvas (hub + login) ── */
.constellation{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* ─── Login ─── */
.login-screen{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;overflow:hidden;background:var(--void)}
.login-card{position:relative;z-index:1;width:100%;max-width:400px;background:rgba(0,0,0,0.55);backdrop-filter:blur(8px);border:1px solid var(--bd);border-radius:var(--radius-xl);padding:36px 30px}
.login-logo{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:24px}
.login-logo .lt{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-0.02em}
.login-logo .lt em{font-style:normal;color:var(--plum)}
.login-title{text-align:center;font-size:15px;color:var(--smoke);margin-bottom:24px;letter-spacing:0.025em}
.login-error{background:var(--red-dim);border:1px solid rgba(255,92,92,.35);color:var(--red);padding:10px 14px;border-radius:var(--radius-md);font-size:13px;margin-bottom:16px}
.login-hint{text-align:center;font-size:12px;color:var(--m2);margin-top:18px;line-height:1.5;letter-spacing:0.02em}
.login-hint code{background:var(--s2);border:1px solid var(--bd);padding:1px 8px;border-radius:999px;font-family:var(--font-mono);color:var(--plum)}

.field-label{display:block;font-size:12px;color:var(--m1);font-weight:600;margin-bottom:6px;margin-top:14px;letter-spacing:0.03em}
.field-input,.field-select,textarea{width:100%;background:var(--s2);border:1px solid var(--bd);border-radius:var(--radius-md);padding:var(--space-md);color:var(--txt);font-size:13px;font-family:inherit;letter-spacing:0.01em;outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.field-input:focus,.field-select:focus,textarea:focus{border-color:var(--plum-border);box-shadow:0 0 0 3px var(--plum-dim)}
.field-input::placeholder{color:var(--m2)}
.field-hint{font-size:11px;color:var(--m2);margin-top:6px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.input-suffix{position:relative}
.input-suffix .suffix{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--m1);font-size:12px;pointer-events:none;text-transform:lowercase}

/* ─── Buttons (pill geometry, one filled action color) ─── */
.btn{font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:0.04em;border:1px solid transparent;border-radius:var(--radius-pill);padding:11px 22px;cursor:pointer;transition:.15s ease;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);text-decoration:none}
.btn-gold{background:var(--plum);color:var(--bone)}
.btn-gold:hover{background:#9266ff}
.btn-teal{background:transparent;color:var(--teal);border:1px solid var(--teal-dim)}
.btn-teal:hover{border-color:var(--teal)}
.btn-outline{background:transparent;color:var(--m1);border:1px solid var(--bd)}
.btn-outline:hover{color:var(--txt);border-color:var(--bd2)}
.btn-secondary{background:transparent;color:var(--txt);border:1px solid var(--bd2)}
.btn-secondary:hover{border-color:var(--plum-border);color:var(--plum)}
.btn-danger{background:transparent;color:var(--red);border:1px solid var(--red)}
.btn-danger:hover{background:var(--red-dim)}
.btn-danger-outline{background:transparent;color:var(--color-danger);border:1px solid var(--color-danger-dim)}
.btn-danger-outline:hover{background:var(--color-danger-dim);border-color:var(--color-danger)}
.btn-full{width:100%}
.form-actions{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:20px}

.login-card .btn-gold{width:100%;margin-top:18px}

/* ─── Header ─── */
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-lg) var(--space-2xl);border-bottom:1px solid var(--bd);
  background:rgba(0,0,0,0.6);backdrop-filter:blur(16px);
  position:sticky;top:0;z-index:10;
}
.logo{display:flex;align-items:center;gap:10px}
.logo-text{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--txt);letter-spacing:-0.02em}
.logo-text em{font-style:normal;color:var(--plum)}
.header-right{display:flex;align-items:center;gap:12px}
.date-badge{font-size:12px;color:var(--m1);background:transparent;padding:6px 14px;border-radius:999px;border:1px solid var(--bd);letter-spacing:0.02em}
.user-pill{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--bd);border-radius:999px;padding:5px 12px 5px 6px;font-size:13px}
.user-pill .avatar{width:26px;height:26px;border-radius:50%;background:var(--plum);color:var(--bone);display:grid;place-items:center;font-size:11px;font-weight:600}
.user-pill .role-tag{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:999px;background:var(--plum-dim);color:var(--plum)}
.logout-btn{background:none;border:1px solid var(--bd);border-radius:999px;padding:7px 14px;color:var(--m1);font-family:inherit;font-size:12px;font-weight:600;letter-spacing:0.03em;cursor:pointer;transition:all .2s}
.logout-btn:hover{border-color:var(--bd2);color:var(--txt)}
.force-logout-btn{border-color:rgba(255,92,92,.35);color:var(--red)}
.force-logout-btn:hover{background:var(--red-dim);border-color:var(--red);color:var(--red)}
.force-logout-btn:disabled{opacity:.5;cursor:not-allowed}
.back-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--bd);border-radius:999px;padding:7px 14px;color:var(--m1);font-family:inherit;font-size:12px;font-weight:600;letter-spacing:0.03em;cursor:pointer;transition:all .2s;text-decoration:none}
.back-btn:hover{border-color:var(--plum-border);color:var(--plum)}

/* ─── Main ─── */
.main{max-width:1200px;margin:0 auto;padding:60px 32px 96px}
.hero{margin-bottom:60px;position:relative;min-height:340px;display:flex;align-items:center}
.hero .constellation{z-index:0;opacity:0.9}
.hero-content{position:relative;z-index:1}
.eyebrow{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--plum);margin-bottom:18px}
.hero h1{font-family:var(--font-display);font-size:78px;font-weight:200;margin-bottom:18px;letter-spacing:-0.04em;line-height:0.9}
.hero h1 span{color:var(--plum)}
.hero h1 em{font-style:normal;color:var(--plum)}
.hero p{color:var(--ash);font-size:18px;line-height:1.5;letter-spacing:0.025em;max-width:60ch}
@media (max-width:680px){.hero h1{font-size:clamp(34px,11vw,52px)}.intro h1{font-size:36px}}
.section-label{font-size:12px;font-weight:600;color:var(--bone);text-transform:uppercase;letter-spacing:0.05em;margin:60px 0 24px}

/* ─── Bucket grid (hub tiles) ─── */
.bucket-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-lg);position:relative;z-index:1}
.bucket{display:block;background:var(--s1);border:1px solid var(--bd);border-radius:var(--radius-xl);padding:24px;text-decoration:none;color:inherit;transition:border-color .2s ease,background .2s ease;position:relative}
.bucket:hover{border-color:var(--plum-border);background:#0c0c12}
.bucket-header{display:flex;gap:14px;margin-bottom:18px}
.bucket-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex-shrink:0;border:1px solid var(--bd)}
.bucket-info{min-width:0}
.bucket-title{font-family:var(--font-display);font-size:18px;font-weight:600;margin-bottom:5px;letter-spacing:-0.02em}
.bucket-desc{color:var(--m1);font-size:14px;line-height:1.5;letter-spacing:0.02em}
.bucket-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.tag{font-size:11px;font-weight:500;padding:3px 11px;border-radius:999px;letter-spacing:0.02em}
.bucket-footer{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--bd)}
.bucket-status{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--m1);font-weight:500;letter-spacing:0.03em}
.status-dot{width:6px;height:6px;border-radius:50%}
.bucket-arrow{color:var(--m1)}
.bucket:hover .bucket-arrow{color:var(--plum)}

/* ─── Hub metric ─── */
.bucket-metric{display:flex;align-items:baseline;gap:5px;font-size:12px;color:var(--m1);font-weight:500}
.bucket-metric strong{color:var(--plum);font-weight:600;font-size:14px}

/* ─── Generic content (module pages) ─── */
.intro{margin-bottom:36px}
.intro h1{font-family:var(--font-display);font-size:48px;font-weight:200;margin-bottom:12px;letter-spacing:-0.04em;line-height:1.05}
.intro h1 em{font-style:normal;color:var(--plum)}
.intro p{color:var(--ash);font-size:16px;line-height:1.5;max-width:60ch;letter-spacing:0.025em}

.card{background:var(--s1);border:1px solid var(--bd);border-radius:var(--radius-xl);padding:24px;transition:border-color .2s ease}
.card h3{font-family:var(--font-display);font-size:16px;font-weight:600;margin-bottom:8px;color:var(--txt);letter-spacing:-0.01em}

/* ─── Weight counter layout ─── */
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:900px){.calc-grid{grid-template-columns:1fr}}

.result-card{background:var(--s1);border:1px solid var(--bd);border-radius:var(--radius-xl);padding:30px 24px;text-align:center}
.result-headline{font-size:12px;font-weight:600;color:var(--m1);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:14px}
.result-value{font-family:var(--font-display);font-size:78px;font-weight:200;color:var(--plum);letter-spacing:-0.04em;line-height:0.9}
.result-value.empty{color:var(--m2)}
.result-sub{font-size:12px;color:var(--m1);margin-top:8px}
.breakdown{margin-top:20px;text-align:left;border-top:1px solid var(--bd);padding-top:14px}
.breakdown-row{display:flex;justify-content:space-between;padding:6px 0;font-size:12px}
.breakdown-label{color:var(--m1)}
.breakdown-val{color:var(--txt);font-variant-numeric:tabular-nums}
.breakdown-row.net{border-top:1px dashed var(--bd);border-bottom:1px dashed var(--bd);margin:6px 0;padding:8px 0}
.breakdown-row.net .breakdown-label,.breakdown-row.net .breakdown-val{color:var(--plum);font-weight:600}
.warn-banner{margin-top:14px;padding:10px 14px;border-radius:var(--radius-md);background:var(--amber-dim);border:1px solid rgba(255,184,41,.3);color:var(--amber);font-size:12px;text-align:left}

.history-card{padding:18px 20px}
.history-list{display:flex;flex-direction:column;gap:8px;margin-top:8px;max-height:180px;overflow-y:auto}
.history-row{display:flex;justify-content:space-between;font-size:12px;color:var(--txt);padding:6px 0;border-bottom:1px dashed var(--bd)}

/* ─── Modal ─── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);z-index:90}
.user-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--s1);border:1px solid var(--bd2);border-radius:var(--radius-xl);width:min(560px,calc(100vw - 40px));max-height:calc(100vh - 60px);overflow:hidden;z-index:91;display:flex;flex-direction:column}
.user-modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--bd)}
.user-modal-hdr h3{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:-0.02em}
.modal-close{background:none;border:none;color:var(--m1);font-size:24px;cursor:pointer;line-height:1;padding:0 4px}
.modal-close:hover{color:var(--txt)}
.user-modal-body{padding:20px;overflow-y:auto}
.access-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px 14px;margin-top:8px;background:transparent;border:1px solid var(--bd);border-radius:var(--radius-lg);padding:14px}
.access-row{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;padding:5px 8px;border-radius:999px;transition:background .15s}
.access-row:hover{background:rgba(255,255,255,.04)}
.access-row input[type="checkbox"]{appearance:none;width:16px;height:16px;border:1px solid var(--bd2);border-radius:6px;background:var(--s2);cursor:pointer;display:inline-grid;place-content:center;flex-shrink:0;transition:all .15s}
.access-row input[type="checkbox"]:checked{background:var(--plum);border-color:var(--plum)}
.access-row input[type="checkbox"]:checked::after{content:'✓';color:var(--bone);font-size:12px;font-weight:700;line-height:1}

/* ─── User table ─── */
.user-table{width:100%;border-collapse:collapse}
.user-table th{text-align:left;font-size:11px;font-weight:600;color:var(--m1);text-transform:uppercase;letter-spacing:.05em;padding:10px 12px;border-bottom:1px solid var(--bd);position:sticky;top:0;background:var(--bk);z-index:2}
.user-table td{padding:12px;border-bottom:1px solid var(--bd);font-size:13px;vertical-align:top}
.user-table tbody tr{transition:background .12s ease}
.user-table tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
.user-table tbody tr:hover{background:var(--s2)}
.user-table tr:last-child td{border-bottom:none}
.user-table .role-tag{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:3px 9px;border-radius:999px;background:var(--plum-dim);color:var(--plum)}

/* ─── Placeholder pages ─── */
.placeholder{max-width:640px;margin:24px 0;padding:36px 32px;background:var(--s1);border:1px solid var(--bd);border-radius:var(--radius-xl)}
.placeholder h1{font-family:var(--font-display);font-size:42px;font-weight:200;margin-bottom:12px;letter-spacing:-0.04em}
.placeholder p{color:var(--m1);font-size:15px;line-height:1.6;margin-bottom:10px;letter-spacing:0.02em}
.placeholder code{background:var(--s2);border:1px solid var(--bd);padding:1px 8px;border-radius:999px;font-family:var(--font-mono);color:var(--plum);font-size:12px}
.placeholder .btn{margin-top:16px}
.placeholder-tag{display:inline-block;font-size:11px;font-weight:600;color:var(--plum);background:var(--plum-dim);border:1px solid var(--plum-border);padding:3px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px}
.placeholder-note{color:var(--m1);font-size:13px;line-height:1.6;border-top:1px solid var(--bd);padding-top:14px;margin-top:14px}

.not-found{max-width:560px;margin:96px auto;text-align:center;padding:0 24px}
.not-found h1{font-family:var(--font-display);font-size:113px;font-weight:200;color:var(--plum);margin-bottom:8px;letter-spacing:-0.04em;line-height:0.81}
.not-found p{color:var(--m1);font-size:16px;margin-bottom:24px;letter-spacing:0.02em}

/* ─── KPI strip ─── */
.kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:24px}
.kpi-card{background:var(--s1);border:1px solid var(--bd);border-radius:var(--radius-xl);padding:18px 20px;position:relative;overflow:hidden}
.kpi-accent{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--plum)}
.kpi-label{font-size:11px;color:var(--m1);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.kpi-val{font-family:var(--font-display);font-size:36px;font-weight:200;line-height:1;letter-spacing:-0.04em}

/* ─── Toolbar (search + chips) ─── */
.view-toolbar{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.search-wrap{position:relative;flex:1;min-width:200px;max-width:340px}
.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--m1);pointer-events:none}
.search-input{width:100%;background:var(--s2);border:1px solid var(--bd);border-radius:var(--radius-pill);padding:9px 14px 9px 34px;color:var(--txt);font-size:13px;font-family:inherit;outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.search-input:focus{border-color:var(--plum-border);box-shadow:0 0 0 3px var(--plum-dim)}
.chip-bar{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:transparent;border:1px solid var(--bd);color:var(--m1);border-radius:999px;padding:6px 16px;font-family:inherit;font-size:12px;font-weight:500;letter-spacing:0.02em;cursor:pointer;transition:all .2s}
.chip:hover{color:var(--txt);border-color:var(--bd2)}
.chip.active{background:var(--plum);color:var(--bone);border-color:var(--plum)}
.toolbar-actions{margin-left:auto;display:flex;gap:8px}
.btn-sm{font-size:11px;padding:8px 14px}

/* ─── Table ─── */
.table-wrap{background:var(--s1);border:1px solid var(--bd);border-radius:var(--radius-xl);overflow:hidden}
.tbl-head{padding:12px 18px;background:transparent;border-bottom:1px solid var(--bd);font-size:11px;color:var(--m1);text-transform:uppercase;letter-spacing:.05em;position:sticky;top:0;z-index:2}
.tbl-row{padding:14px 18px;border-bottom:1px solid var(--bd);align-items:center;transition:background .12s ease}
.tbl-row:last-child{border-bottom:none}
.tbl-row:nth-child(even){background:rgba(255,255,255,.02)}
.tbl-row:hover{background:var(--s2)}
.tasks-grid{display:grid;grid-template-columns:minmax(0,2fr) 1fr 100px 80px 200px;gap:14px}
.col-lbl{font-weight:600}
.col-val{font-size:13px}
.col-val.muted{color:var(--m1)}
.muted{color:var(--m1)}
.pill{display:inline-block;font-size:11px;font-weight:600;padding:3px 11px;border-radius:999px;letter-spacing:0.02em}
.pill-open{background:var(--blue-dim);color:var(--blue)}
.pill-progress{background:var(--plum-dim);color:var(--plum)}
.pill-done{background:var(--green-dim);color:var(--green)}
.priority-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle}
.priority-high{background:var(--red)}
.priority-medium{background:var(--amber)}
.priority-low{background:var(--m2)}
.empty-state{padding:36px;text-align:center;color:var(--m2);font-size:13px}

/* ─── Login Globe ─── */
.globe-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:20px;margin-top:20px}
@media (max-width:1000px){.globe-grid{grid-template-columns:1fr}}
.globe-map{height:520px;background:var(--s1);border:1px solid var(--bd);border-radius:var(--radius-xl);overflow:hidden;position:relative}
.globe-map canvas{display:block}
.globe-tooltip{position:absolute;background:rgba(0,0,0,0.92);border:1px solid var(--bd2);border-radius:var(--radius-md);padding:8px 12px;font-size:12px;color:var(--txt);pointer-events:none;z-index:5;line-height:1.4;max-width:240px}
.globe-tooltip small{color:var(--m1);font-size:11px}
.globe-side{display:flex;flex-direction:column;max-height:520px}
.globe-side-hdr{padding:16px 18px;border-bottom:1px solid var(--bd);font-family:var(--font-display);font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.globe-side-hdr::before{content:'';width:3px;height:14px;background:var(--plum);border-radius:2px}
.recent-list{overflow-y:auto;flex:1}
.recent-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--bd);transition:background .12s}
.recent-item:last-child{border-bottom:none}
.recent-item:hover{background:var(--s2)}
.ri-avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:600;flex-shrink:0}
.ri-info{flex:1;min-width:0}
.ri-name{font-weight:600;font-size:12px}
.ri-location{font-size:11px;color:var(--m1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ri-right{text-align:right;flex-shrink:0}
.ri-ip{font-family:var(--font-mono);font-size:10px;color:var(--m2)}
.ri-time{font-size:10px;color:var(--m2)}

/* ─── Detail drawer ─── */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:90}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,calc(100vw - 60px));background:var(--s1);border-left:1px solid var(--bd2);z-index:91;display:flex;flex-direction:column;animation:drawerSlide .2s ease}
@keyframes drawerSlide{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}
.drawer-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:18px 22px;border-bottom:1px solid var(--bd)}
.drawer-hdr h3{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:-0.02em}
.drawer-sub{font-size:11px;color:var(--m1);font-family:var(--font-mono);margin-bottom:4px}
.drawer-body{overflow-y:auto;padding:18px 22px;flex:1}
.drawer-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.drawer-label{font-size:10px;color:var(--m2);text-transform:uppercase;letter-spacing:.07em;font-weight:600;margin-bottom:4px}
.status-buttons{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.status-buttons .btn{text-transform:lowercase}
.status-buttons .status-active{background:var(--plum);color:var(--bone);border-color:var(--plum)}
.line-items{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px}
.line-items th{text-align:left;padding:8px 10px;border-bottom:1px solid var(--bd);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--m1);font-weight:600}
.line-items td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.06)}
.line-items tr:last-child td{border-bottom:none}
.orders-row-clickable{cursor:pointer;transition:background .12s}
.orders-row-clickable:hover{background:var(--s2)}

/* ─── FulfilmentOS ─── */
.status-breakdown{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:24px}
.status-tile{background:var(--s1);border:1px solid var(--bd);border-radius:var(--radius-lg);padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.status-count{font-family:var(--font-display);font-size:28px;font-weight:200;letter-spacing:-0.04em}
.status-pill{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:3px 11px;border-radius:999px;display:inline-block}
.status-pending{background:var(--blue-dim);color:var(--blue)}
.status-processing{background:var(--purple-dim);color:var(--purple)}
.status-picking{background:var(--amber-dim);color:var(--amber)}
.status-packing{background:var(--plum-dim);color:var(--plum)}
.status-hold{background:var(--red-dim);color:var(--red)}
.status-dispatched{background:var(--green-dim);color:var(--green)}

.orders-table,.inv-table{display:flex;flex-direction:column}
.orders-row,.inv-row{display:grid;gap:12px;padding:11px 16px;border-bottom:1px solid var(--bd);align-items:center;font-size:13px}
.orders-row{grid-template-columns:120px minmax(0,1.4fr) 110px 1fr 60px 100px}
.inv-row{grid-template-columns:140px minmax(0,2fr) 80px 140px}
.inv-row-edit input.field-input{padding:6px 10px}
.inv-row-with-actions:hover{background:var(--s2)}
.orders-row:last-child,.inv-row:last-child{border-bottom:none}
.orders-row:not(.orders-head):nth-of-type(even),.inv-row:not(.inv-head):nth-of-type(even){background:rgba(255,255,255,.02)}
.orders-table .orders-head,.inv-table .inv-head{background:transparent;font-size:11px;color:var(--m1);text-transform:uppercase;letter-spacing:.05em;font-weight:600;padding:10px 16px;position:sticky;top:0;z-index:2}
.orders-row:not(.orders-head),.inv-row:not(.inv-head){transition:background .12s ease}
.orders-row:not(.orders-head):hover,.inv-row:not(.inv-head):hover{background:var(--s2)}

/* ─── Team Chat ─── */
.chat-shell{display:grid;grid-template-columns:240px 1fr;gap:0;background:var(--s1);border:1px solid var(--bd);border-radius:var(--radius-xl);overflow:hidden;height:calc(100vh - 220px);min-height:480px}
.chat-sidebar{border-right:1px solid var(--bd);overflow-y:auto;padding:10px}
.chat-section-label{font-size:10px;font-weight:600;color:var(--m2);text-transform:uppercase;letter-spacing:.08em;padding:10px 8px 6px}
.chat-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:1px solid transparent;color:inherit;padding:8px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:13px;transition:all .15s}
.chat-item:hover{background:var(--s2)}
.chat-item.active{background:var(--plum-dim);border-color:var(--plum-border)}
.chat-item-icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;flex-shrink:0}
.chat-item-icon.global{background:var(--plum-dim);color:var(--plum);font-size:14px}
.chat-item-icon.dm{background:var(--s2);color:var(--m1)}
.chat-item-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* min-height:0 is load-bearing: grid/flex items default to min-height:auto, which
   lets the message list grow to its full content height instead of scrolling —
   that pushed the input bar out of the clipped shell and made chat unusable. */
.chat-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.chat-header{padding:16px 18px;border-bottom:1px solid var(--bd)}
.chat-hdr-name{font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-0.02em}
.chat-hdr-sub{font-size:11px;color:var(--m2);margin-top:2px}
.chat-msgs{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:2px}
/* The composer must never be squeezed out of view. */
.chat-input-bar{flex:0 0 auto}
.chat-empty{display:flex;align-items:center;justify-content:center;flex:1;color:var(--m2);font-size:13px}
.msg-date{text-align:center;font-size:10px;color:var(--m2);padding:10px 0 4px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.msg{display:flex;gap:10px;padding:6px 0;align-items:flex-start}
.msg-avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;flex-shrink:0}
.msg-body{flex:1;min-width:0}
.msg-meta{display:flex;align-items:baseline;gap:8px}
.msg-name{font-size:12px;font-weight:600}
.msg-role-tag{font-size:9px;color:var(--m2);text-transform:uppercase;letter-spacing:.05em}
.msg-time{font-size:10px;color:var(--m2);margin-left:auto}
.msg-text{font-size:13px;line-height:1.45;color:var(--txt);word-wrap:break-word}
.msg-self .msg-text{color:var(--plum)}
.chat-input-bar{display:flex;gap:8px;align-items:flex-end;padding:12px 14px;border-top:1px solid var(--bd)}
.chat-input{flex:1;background:var(--s2);border:1px solid var(--bd);border-radius:var(--radius-lg);padding:10px 14px;color:var(--txt);font-size:13px;font-family:inherit;outline:none;resize:none;min-height:18px;max-height:120px}
.chat-input:focus{border-color:var(--plum-border)}
.send-btn{width:36px;height:36px;border:none;border-radius:50%;background:var(--plum);cursor:pointer;display:grid;place-items:center;transition:background .15s;flex-shrink:0}
.send-btn:hover:not(:disabled){background:#9266ff}
.send-btn:disabled{opacity:.5;cursor:not-allowed}

/* ─── View tabs ─── */
.view-tabs{display:flex;gap:4px;margin-bottom:24px;border-bottom:1px solid var(--bd)}
.view-tab{background:none;border:none;color:var(--m1);font-family:inherit;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:var(--space-md) var(--space-lg);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s ease,border-color .15s ease}
.view-tab:hover{color:var(--txt)}
.view-tab.active{color:var(--plum);border-bottom-color:var(--plum)}

/* ─── Invoice Generator (printed docs stay on white paper) ─── */
.invoice-grid{display:grid;grid-template-columns:minmax(340px,1fr) minmax(0,1fr);gap:24px}
@media (max-width:1000px){.invoice-grid{grid-template-columns:1fr}}
.invoice-form .card{margin-bottom:14px}
.item-row{display:grid;grid-template-columns:1fr 80px 120px auto;gap:8px;margin-top:8px}
.invoice-preview{position:sticky;top:84px;align-self:start}
.invoice-doc{background:#fff;color:#0A0A0A;border-radius:8px;padding:24px 28px;font-family:var(--font-body)}
.inv-head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid #0A0A0A;padding-bottom:12px;margin-bottom:18px}
.inv-title{font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-0.02em}
.inv-meta{font-size:12px;color:#555;margin-top:4px}
.inv-currency{font-size:13px;font-weight:600;color:#0A0A0A;background:#f3f3f3;padding:4px 12px;border-radius:999px}
.inv-parties{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:18px}
.inv-label{font-size:10px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.inv-party{font-size:14px}
.inv-items{width:100%;border-collapse:collapse;font-size:13px}
.inv-items th{text-align:right;padding:8px 10px;border-bottom:1px solid #ccc;color:#555;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.inv-items td{padding:8px 10px;border-bottom:1px solid #eee;text-align:right}
.inv-items td:first-child{text-align:left}
.inv-items tfoot td{border:none;padding-top:14px;font-size:14px}

/* ─── Print ─── */
.print-only{display:none}
@media print{
  body * { visibility:hidden !important; }
  .print-only, .print-only * { visibility:visible !important; }
  .print-only{display:block !important;position:absolute;left:0;top:0;width:100%}
  .no-print{display:none !important}
  body{background:#fff !important}
  .header{display:none !important}
  .main{padding:0 !important;max-width:100% !important}
  .invoice-doc,.packing-slip-doc,.shipping-label-doc,.bulk-pick-sheet{box-shadow:none !important;border:none !important}
}

/* ─── Activity Log ─── */
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;align-items:center}
.filter-bar .chip{background:transparent;border:1px solid var(--bd);color:var(--m1);font-size:12px;font-family:inherit;padding:6px 16px;border-radius:999px;cursor:pointer;transition:all .2s}
.filter-bar .chip:hover{border-color:var(--plum-border);color:var(--plum)}
.filter-bar .chip.active{background:var(--plum-dim);border-color:var(--plum-border);color:var(--plum)}
.log-list{display:flex;flex-direction:column;gap:4px}
.log-date{font-size:11px;font-weight:600;color:var(--m2);text-transform:uppercase;letter-spacing:.07em;padding:18px 0 8px}
.log-entry{display:grid;grid-template-columns:100px 110px 1fr 140px;gap:12px;padding:12px 16px;background:var(--s1);border:1px solid var(--bd);border-radius:var(--radius-lg);align-items:center;transition:background .15s}
.log-entry:hover{background:var(--s2)}
.log-time{font-size:12px;color:var(--m2);font-family:var(--font-mono)}
.log-app{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:3px 10px;border-radius:999px;display:inline-block;text-align:center}
.app-platform{background:var(--plum-dim);color:var(--plum)}
.app-fulfilmentos{background:var(--plum-dim);color:var(--plum)}
.app-tasklist{background:var(--blue-dim);color:var(--blue)}
.app-invoicegen{background:var(--purple-dim);color:var(--purple)}
.app-useradmin{background:var(--amber-dim);color:var(--amber)}
.app-chat{background:var(--teal-dim);color:var(--teal)}
.log-detail{font-size:13px;line-height:1.4}
.log-user{font-size:12px;color:var(--m1);display:flex;align-items:center;gap:6px}
.log-avatar{width:22px;height:22px;border-radius:50%;background:var(--s2);display:grid;place-items:center;font-size:10px;font-weight:600;color:var(--m1)}

/* ─── SOPs page ─── */
.section-divider{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--m1);margin:0 0 20px;display:flex;align-items:center;gap:10px}
.section-divider::after{content:'';flex:1;height:1px;background:var(--bd)}
.sop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;margin-bottom:36px}
.sop-card{background:var(--s1);border:1px solid var(--bd);border-radius:var(--radius-xl);padding:28px;display:flex;flex-direction:column;gap:20px;text-decoration:none;color:inherit;transition:border-color .2s ease,background .2s ease}
.sop-card:hover{border-color:var(--plum-border);background:#0c0c12}
.sop-header{display:flex;align-items:flex-start;gap:16px}
.sop-icon{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--bd)}
.sop-info{flex:1;min-width:0}
.sop-title{font-family:var(--font-display);font-size:18px;font-weight:600;margin-bottom:4px;letter-spacing:-0.02em}
.sop-desc{color:var(--m1);font-size:14px;line-height:1.5;letter-spacing:0.02em}
.sop-tags{display:flex;flex-wrap:wrap;gap:6px}
.sop-footer{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--bd)}
.sop-status{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--m1)}
.sop-arrow{width:30px;height:30px;border-radius:50%;background:var(--plum-dim);display:flex;align-items:center;justify-content:center;transition:background .2s;color:var(--plum)}
.sop-card:hover .sop-arrow{background:var(--plum);color:var(--bone)}

/* ─── Notifications widget ─── */
.notif-wrap{position:relative}
.notif-btn{width:36px;height:36px;border-radius:50%;background:transparent;border:1px solid var(--bd);color:var(--m1);cursor:pointer;display:grid;place-items:center;position:relative;transition:all .15s}
.notif-btn:hover{border-color:var(--plum-border);color:var(--plum)}
.notif-open .notif-btn{border-color:var(--plum-border);color:var(--plum)}
.notif-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--plum);border:2px solid var(--void)}
.notif-overlay{position:fixed;inset:0;z-index:80;background:transparent}
.notif-panel{position:absolute;top:calc(100% + 10px);right:0;width:380px;max-width:calc(100vw - 32px);background:var(--s1);border:1px solid var(--bd2);border-radius:var(--radius-xl);z-index:81;overflow:hidden;display:flex;flex-direction:column;max-height:480px}
.notif-hdr{padding:14px 16px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display);font-size:13px;font-weight:600}
.notif-link{font-size:11px;font-weight:500;color:var(--plum);text-decoration:none}
.notif-link:hover{text-decoration:underline}
.notif-list{flex:1;overflow-y:auto}
.notif-empty{padding:24px;text-align:center;color:var(--m2);font-size:12px}
.notif-item{display:flex;gap:10px;padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--bd);align-items:flex-start;font-size:12px;transition:background .15s ease}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--s2)}
.notif-tag{flex-shrink:0;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:999px;line-height:1.2}
.notif-tag-platform{background:var(--plum-dim);color:var(--plum)}
.notif-tag-fulfilmentos{background:var(--plum-dim);color:var(--plum)}
.notif-tag-tasklist{background:var(--blue-dim);color:var(--blue)}
.notif-tag-invoicegen{background:var(--purple-dim);color:var(--purple)}
.notif-tag-useradmin{background:var(--amber-dim);color:var(--amber)}
.notif-tag-chat{background:var(--teal-dim);color:var(--teal)}
.notif-body{flex:1;min-width:0}
.notif-detail{line-height:1.35}
.notif-meta{font-size:10px;color:var(--m2);margin-top:4px}

/* ─── My Account ─── */
.account-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px;max-width:1200px}
.account-grid .card{display:flex;flex-direction:column}
.acc-sub{color:var(--m1);font-size:13px;margin-top:4px}
.acc-msg{margin-top:12px;padding:8px 14px;border-radius:var(--radius-md);font-size:12px}
.acc-msg-ok{background:var(--green-dim);color:var(--green);border:1px solid rgba(52,211,153,.3)}
.acc-msg-error{background:var(--red-dim);color:var(--red);border:1px solid rgba(255,92,92,.3)}
.access-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.access-list li{font-size:13px;padding:7px 12px;background:transparent;border:1px solid var(--bd);border-radius:999px}

/* ─── Boot / rehydrate ─── */
.rehydrating{display:grid;place-items:center;min-height:60vh;color:var(--m1);font-size:14px}

/* ─── Blazor server error UI ─── */
#blazor-error-ui{
  background:var(--red-dim);color:var(--red);border-top:1px solid rgba(255,92,92,.3);
  bottom:0;display:none;left:0;padding:12px 18px;position:fixed;right:0;z-index:1000
}
#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem;color:var(--red)}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
}

/* ─── Toasts ─── */
.toast-stack{
  position:fixed;top:var(--space-lg);right:var(--space-lg);z-index:120;
  display:flex;flex-direction:column;gap:var(--space-md);
  width:min(360px,calc(100vw - var(--space-2xl)));pointer-events:none
}
.toast{
  display:flex;align-items:flex-start;gap:var(--space-md);
  background:var(--s1);border:1px solid var(--bd2);border-left:3px solid var(--m1);
  border-radius:var(--radius-lg);
  padding:var(--space-md) var(--space-lg);pointer-events:auto;
  animation:toast-in .22s ease
}
.toast-success{border-left-color:var(--color-success)}
.toast-error{border-left-color:var(--color-danger)}
.toast-info{border-left-color:var(--plum)}
.toast-warning{border-left-color:var(--color-warning)}
.toast-icon{
  flex-shrink:0;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;font-weight:700;margin-top:1px;line-height:1
}
.toast-success .toast-icon{background:var(--color-success-dim);color:var(--color-success)}
.toast-error .toast-icon{background:var(--color-danger-dim);color:var(--color-danger)}
.toast-info .toast-icon{background:var(--plum-dim);color:var(--plum)}
.toast-warning .toast-icon{background:var(--color-warning-dim);color:var(--color-warning)}
.toast-body{flex:1;min-width:0}
.toast-title{font-size:13px;font-weight:600;color:var(--txt);margin-bottom:2px}
.toast-text{font-size:12px;color:var(--m1);line-height:1.4;word-wrap:break-word}
.toast-close{
  flex-shrink:0;background:none;border:none;color:var(--m2);
  font-size:18px;line-height:1;cursor:pointer;padding:0 0 0 var(--space-sm);transition:color .15s ease
}
.toast-close:hover{color:var(--txt)}
@keyframes toast-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}

/* ─── WMS ─── */
.inv-row.wms-loc-row{grid-template-columns:140px minmax(0,2fr) 130px 80px 110px}
.inv-row.wms-stock-row{grid-template-columns:130px minmax(0,1.6fr) 130px 70px 70px 70px 130px}
.wms-pick-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--space-lg)}
.wms-pick-card{display:flex;flex-direction:column;padding:20px}
.wms-pick-hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.wms-pick-hdr h3{font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-0.02em}
.status-open{background:var(--blue-dim);color:var(--blue)}
.status-picked{background:var(--purple-dim);color:var(--purple)}
.status-packed{background:var(--plum-dim);color:var(--plum)}
.status-shipped{background:var(--green-dim);color:var(--green)}
.status-done{background:var(--green-dim);color:var(--green)}

/* ─── Packing ─── */
.wms-parcel-row{display:grid;grid-template-columns:1.4fr .7fr .9fr .7fr .7fr .7fr auto;gap:6px;margin-top:8px;align-items:center}
.wms-parcel-row .field-input,.wms-parcel-row .field-select{padding:6px 8px;font-size:13px}
.packing-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.packing-slip-doc{background:#fff;color:#0A0A0A}
@media print{.packing-slip-doc{box-shadow:none;border:none}}

/* ─── Global search ─── */
.hub-search-pill{display:flex;align-items:center;gap:10px;width:100%;max-width:560px;margin-top:24px;padding:14px 20px;background:transparent;border:1px solid var(--bd);border-radius:var(--radius-pill);color:var(--m1);font-family:inherit;font-size:15px;text-align:left;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,color .15s ease;position:relative;z-index:1;letter-spacing:0.02em}
.hub-search-pill:hover{border-color:var(--plum-border);color:var(--txt);box-shadow:0 0 0 3px var(--plum-dim)}
.hub-search-pill svg{flex-shrink:0;color:var(--plum)}

.gsearch-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);z-index:130;display:flex;align-items:flex-start;justify-content:center;padding:12vh 20px 20px}
.gsearch-panel{width:100%;max-width:640px;max-height:74vh;display:flex;flex-direction:column;background:var(--s1);border:1px solid var(--bd2);border-radius:var(--radius-xl);overflow:hidden;animation:gsearchPop .16s ease}
@keyframes gsearchPop{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
.gsearch-input-wrap{display:flex;align-items:center;gap:12px;padding:18px;border-bottom:1px solid var(--bd)}
.gsearch-input-icon{flex-shrink:0;color:var(--m1)}
.gsearch-input{flex:1;background:transparent;border:none;outline:none;color:var(--txt);font-family:inherit;font-size:18px;padding:0;letter-spacing:0.01em}
.gsearch-input::placeholder{color:var(--m2)}
.gsearch-close{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--bd);border-radius:50%;color:var(--m1);font-size:20px;line-height:1;cursor:pointer;transition:all .15s ease}
.gsearch-close:hover{color:var(--txt);border-color:var(--bd2)}
.gsearch-results{overflow-y:auto;padding:8px}
.gsearch-empty{padding:32px;text-align:center;color:var(--m2);font-size:13px}
.gsearch-group{margin-bottom:6px}
.gsearch-group-label{padding:10px 12px 6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--m1)}
.gsearch-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:var(--radius-md);color:var(--txt);font-family:inherit;text-align:left;cursor:pointer;transition:background .12s ease}
.gsearch-item:hover,.gsearch-item:focus-visible{background:var(--s2);outline:none}
.gsearch-dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--plum)}
.gsearch-dot.dot-gold{background:var(--plum)}
.gsearch-dot.dot-blue{background:var(--blue)}
.gsearch-dot.dot-teal{background:var(--teal)}
.gsearch-dot.dot-purple{background:var(--purple)}
.gsearch-item-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gsearch-item-primary{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsearch-item-secondary{font-size:12px;color:var(--m1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gsearch-item-module{flex-shrink:0;font-size:11px;color:var(--m2);background:transparent;border:1px solid var(--bd);border-radius:var(--radius-pill);padding:3px 12px}

/* ─── Inbound / Order ops ─── */
.orders-row.orders-row-sel{grid-template-columns:36px 120px minmax(0,1.4fr) 110px 1fr 60px 100px}
.orders-row-sel input[type=checkbox]{width:15px;height:15px;cursor:pointer;accent-color:var(--plum)}
.bulk-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;padding:14px 16px}
.bulk-count{font-size:13px;font-weight:600;color:var(--plum)}
.bulk-divider{width:1px;align-self:stretch;background:var(--bd);margin:0 2px}
.bulk-tag-input{max-width:160px}
.bulk-pick-sheet .pick-order{margin-top:18px;padding-top:14px;border-top:1px solid #ddd}
.bulk-pick-sheet .pick-order:first-of-type{margin-top:0;padding-top:0;border-top:none}
.bulk-pick-sheet .pick-order-hdr{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;margin-bottom:8px}
.bulk-pick-sheet .pick-order-cust{color:#555}
.bulk-pick-sheet .pick-order-ship{font-size:12px;color:#555}
.bulk-pick-sheet .pick-lines td,.bulk-pick-sheet .pick-lines th{text-align:left}
.status-partially_received{background:var(--amber-dim);color:var(--amber)}
.status-received{background:var(--green-dim);color:var(--green)}
.status-closed{background:var(--s2);color:var(--m1)}

/* ─── Reports / barcode ─── */
.report-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.report-grid .card h3{font-family:var(--font-display);font-size:16px;font-weight:600;margin:0}
.bar-row{display:grid;grid-template-columns:120px 1fr auto;gap:12px;align-items:center;margin-bottom:10px;font-size:13px}
.bar-label{color:var(--txt);text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{position:relative;height:14px;background:var(--s2);border:1px solid var(--bd);border-radius:999px;overflow:hidden}
.bar-fill{height:100%;border-radius:999px;min-width:2px;transition:width .35s ease;background:var(--plum)}
.bar-val{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--txt)}
.report-spark{width:100%;height:60px;display:block}
.inv-row.report-val-row{grid-template-columns:130px minmax(0,2fr) 80px 110px 120px}
.report-val-total{font-weight:600;color:var(--plum);background:var(--s2)!important}
.scan-wrap{flex:0 1 240px;max-width:240px}
.scan-input{border-color:var(--plum-border)}
.scan-input:focus{border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-dim)}

/* ─── Returns ─── */
.status-requested{background:var(--blue-dim);color:var(--blue)}
.status-cancelled{background:var(--s2);color:var(--m1)}

/* ─── Integrations ─── */
.status-ok{background:var(--green-dim);color:var(--green)}
.status-retrying{background:var(--amber-dim);color:var(--amber)}
.status-dead{background:var(--red-dim);color:var(--red)}

/* ─── Dashboard tiles ─── */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-lg);margin-bottom:24px}
.dash-tile{display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:var(--s1);border:1px solid var(--bd);border-radius:var(--radius-xl);padding:20px;cursor:pointer;text-align:left;font-family:inherit;transition:border-color .2s ease,background .2s ease}
.dash-tile:hover{border-color:var(--plum-border);background:#0c0c12}
.dash-tile-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:16px;line-height:1;flex-shrink:0;border:1px solid var(--bd)}
.dash-tile-count{font-family:var(--font-display);font-size:36px;font-weight:200;color:var(--txt);letter-spacing:-0.04em;line-height:1}
.dash-tile-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--m1)}

/* ─── Shipping address ─── */
.addr-block{font-size:13px;line-height:1.55;color:var(--txt);margin-top:8px}
.addr-block div{margin:0}

/* ─── Shipping label (printed: white paper) ─── */
.shipping-label-doc{background:#fff;color:#0A0A0A;border:2px solid #0A0A0A;border-radius:8px;max-width:420px;padding:20px 22px;font-family:var(--font-body)}
.shipping-label-doc .label-from{font-size:12px;line-height:1.5;border-bottom:1px solid #ccc;padding-bottom:12px;margin-bottom:14px}
.shipping-label-doc .label-from strong{font-size:13px}
.shipping-label-doc .label-to{font-size:20px;font-weight:700;line-height:1.35;padding-bottom:14px;margin-bottom:14px;border-bottom:2px solid #0A0A0A}
.shipping-label-doc .label-to .inv-label{font-size:10px;font-weight:700;color:#888;margin-bottom:6px}
.shipping-label-doc .label-to .label-phone{font-size:14px;font-weight:600;margin-top:4px}
.shipping-label-doc .label-meta{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;font-size:13px;margin-bottom:16px}
.shipping-label-doc .label-meta .inv-label{margin-bottom:4px}
.label-barcode{text-align:center;margin-top:8px}
.label-barcode svg{display:block;margin:0 auto;max-width:100%}
.barcode-fallback{font-family:var(--font-mono);letter-spacing:3px;font-size:14px;font-weight:600;text-align:center;margin-top:6px;color:#0A0A0A}
@media print{.shipping-label-doc{box-shadow:none}}

/* ─── Orders table (rich) ─── */
.orders-row.orders-row-rich{grid-template-columns:150px minmax(0,1.3fr) minmax(0,1.4fr) 44px 120px 100px 56px minmax(120px,0.9fr);gap:10px;align-items:center}
.orders-row.orders-row-rich.orders-row-sel{grid-template-columns:36px 150px minmax(0,1.3fr) minmax(0,1.4fr) 44px 120px 100px 56px minmax(120px,0.9fr)}
.order-cell-order,.order-cell-customer,.order-cell-items,.order-cell-ship{display:flex;flex-direction:column;gap:3px;min-width:0}
.order-cell-order .status-pill{align-self:flex-start}
.order-cust-name{font-weight:600}
.order-item-line code{font-size:12px}
.order-cell-items .order-meta,.order-cell-customer .order-meta,.order-cell-order .order-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.order-meta{color:var(--m2);font-size:11px;line-height:1.3}
.order-cell-value{font-weight:600}
.order-cell-count{color:var(--m1)}
.order-thumb{width:36px;height:36px;border-radius:12px;background:var(--s2);border:1px solid var(--bd);display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--m1);flex:0 0 auto}
.order-cell-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.order-tags{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.order-tag{background:var(--plum-dim);color:var(--plum);border:1px solid var(--plum-border);font-size:10px;padding:2px 9px;border-radius:999px}
.order-action{padding:6px 10px;line-height:1}

/* ─── Saved-filter toolbar ─── */
.saved-filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-4px 0 16px}
.saved-filter-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--m1);font-weight:600}
.saved-filter-chip{display:inline-flex;align-items:center;background:transparent;border:1px solid var(--bd);border-radius:999px;overflow:hidden}
.saved-filter-apply{background:transparent;border:none;color:var(--txt);font-family:inherit;font-size:12px;padding:6px 4px 6px 14px;cursor:pointer}
.saved-filter-apply:hover{color:var(--plum)}
.saved-filter-del{background:transparent;border:none;color:var(--m2);font-size:11px;padding:6px 12px 6px 6px;cursor:pointer}
.saved-filter-del:hover{color:var(--red)}
.saved-filter-add{display:flex;align-items:center;gap:6px;margin-left:auto}
.saved-filter-input{padding-left:14px;max-width:160px}

/* ─── Wave / merge ─── */
.kind-pill{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.kind-wave{background:var(--teal-dim);color:var(--teal)}
.kind-merge{background:var(--purple-dim);color:var(--purple)}
.wave-ship-row{display:grid;grid-template-columns:minmax(90px,auto) auto 1fr auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--bd)}
.wave-ship-row:first-of-type{border-top:none}
.wave-ship-row .field-input{padding:6px 8px;max-width:220px}

/* ============================================================
   ── Motion system ──
   Subtle, Dala-appropriate: entrance fades + micro-interactions.
   No shadows, no glows, no gradients — depth is the void.
   ============================================================ */
:root{
  --ease-spring: cubic-bezier(0.22, 1.4, 0.36, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 140ms;
  --dur-base: 320ms;
  --dur-slow: 520ms;
}

@keyframes mo-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes mo-pop{0%{opacity:0;transform:translateY(16px) scale(.98)}100%{opacity:1;transform:none}}
@keyframes mo-fade{from{opacity:0}to{opacity:1}}
@keyframes mo-shake{0%,100%{transform:translateX(0)}15%{transform:translateX(-8px)}30%{transform:translateX(7px)}45%{transform:translateX(-5px)}60%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
@keyframes mo-spin{to{transform:rotate(360deg)}}

.anim-rise{animation:mo-rise var(--dur-base) var(--ease-out-quart) both;animation-delay:var(--d,0ms);will-change:transform,opacity}
.anim-pop{animation:mo-pop var(--dur-slow) var(--ease-out-quart) both;animation-delay:var(--d,0ms);will-change:transform,opacity}
.anim-fade{animation:mo-fade var(--dur-base) var(--ease-out-quart) both;animation-delay:var(--d,0ms)}

/* Press feedback (no shadow) */
.btn-press{transition:transform var(--dur-fast) var(--ease-spring),background var(--dur-fast) ease,border-color var(--dur-fast) ease}
.btn-press:hover:not(:disabled){transform:translateY(-1px)}
.btn-press:active:not(:disabled){transform:translateY(0) scale(.97)}

/* Busy spinner on the login button */
.btn-busy{position:relative;color:transparent !important}
.btn-busy::after{content:'';position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:var(--bone);animation:mo-spin .7s linear infinite}

/* Login polish */
.login-card{animation:mo-pop var(--dur-slow) var(--ease-out-quart) both;transform-origin:50% 60%}
.login-card-shake{animation:mo-shake .42s var(--ease-out-quart) both}
.login-error{animation:mo-rise 220ms var(--ease-out-quart) both}
.login-card .field-input{transition:border-color .18s ease,box-shadow .18s ease,transform .18s var(--ease-spring)}
.login-card .field-input:focus{transform:translateY(-1px)}

/* Search pill gesture */
.hub-search-pill{transition:border-color .18s ease,box-shadow .18s ease,color .18s ease,transform .18s var(--ease-spring)}
.hub-search-pill:hover{transform:translateY(-1px)}
.hub-search-pill:active{transform:translateY(0) scale(.99)}

/* Bucket cards: plum hairline ignites on hover (no shadow/gradient) */
.bucket{transition:transform .24s var(--ease-spring),border-color .24s ease,background .24s ease}
.bucket::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--plum);opacity:0;transform:scaleX(.4);transform-origin:50% 50%;transition:opacity .3s ease,transform .5s var(--ease-out-quart);pointer-events:none}
.bucket:hover{transform:translateY(-3px);border-color:var(--plum-border)}
.bucket:hover::before{opacity:1;transform:scaleX(1)}
.bucket:active{transform:translateY(-1px) scale(.995);transition-duration:.12s}
.bucket-icon{transition:transform .35s var(--ease-spring),border-color .3s ease}
.bucket:hover .bucket-icon{transform:translateY(-2px) scale(1.05);border-color:var(--plum-border)}
.bucket-arrow{transition:transform .28s var(--ease-spring),color .2s ease}
.bucket:hover .bucket-arrow{transform:translateX(4px)}
.bucket .tag{transition:transform .25s var(--ease-spring),background .2s ease}
.bucket:hover .tag{transform:translateY(-1px)}
.bucket .bucket-metric strong{transition:transform .3s var(--ease-spring),color .2s ease}
.bucket:hover .bucket-metric strong{transform:scale(1.08)}

/* Status dot heartbeat */
@keyframes mo-pulse{0%,100%{box-shadow:0 0 0 0 rgba(128,82,255,.5)}50%{box-shadow:0 0 0 6px rgba(128,82,255,0)}}
.bucket-status .status-dot{animation:mo-pulse 2.2s var(--ease-in-out-quart) infinite}

/* Header polish */
.user-pill,.notif-btn,.logout-btn,.back-btn,.date-badge{transition:border-color .18s ease,color .18s ease,background .18s ease,transform .18s var(--ease-spring)}
.user-pill:hover,.notif-btn:hover,.logout-btn:hover,.back-btn:hover{transform:translateY(-1px)}
.user-pill:hover{border-color:var(--plum-border)}
.header .logo{transition:transform .25s var(--ease-spring)}
.header .logo:hover{transform:scale(1.02)}

/* Toast entrance */
.toast{animation:toast-in .32s var(--ease-spring) both}

/* KPI / dash / status / sop interaction language */
.kpi-card,.dash-tile,.status-tile,.sop-card{transition:transform .24s var(--ease-spring),border-color .24s ease,background .24s ease}
.kpi-card:hover,.status-tile:hover{transform:translateY(-2px);border-color:var(--plum-border)}
.sop-arrow{transition:background .25s ease,transform .25s var(--ease-spring),color .2s ease}
.sop-card:hover .sop-arrow{transform:translateX(3px)}

/* Chip / tab feedback */
.chip{transition:color .15s ease,border-color .15s ease,background .15s ease,transform .15s var(--ease-spring)}
.chip:hover{transform:translateY(-1px)}
.chip:active{transform:translateY(0) scale(.97)}
.view-tab{position:relative}

/* Reduced motion: cancel entrances & micro-interactions */
@media (prefers-reduced-motion:reduce){
  .anim-rise,.anim-pop,.anim-fade,.login-card,.login-card-shake,.toast,.bucket-status .status-dot{animation:none !important}
  .bucket:hover,.btn-press:hover:not(:disabled),.hub-search-pill:hover,.header .logo:hover,.kpi-card:hover,.status-tile:hover,.user-pill:hover,.notif-btn:hover,.logout-btn:hover,.back-btn:hover{transform:none !important}
}

/* ---- Responsive overhaul ---- */

/* Named row templates — moved out of inline style="" so the phone media
   queries below can win. Desktop rendering is identical to the old inline
   values. Single-class selectors on purpose: they tie on specificity with
   the 640px rules, which then win by source order. */
.chg-row-gap{grid-template-columns:200px 1fr;gap:10px}          /* Charge dashboard: reconciliation gaps */
.chg-row-peer{grid-template-columns:1fr 120px 100px 1fr}        /* Charge dashboard: P2P peers */
.chg-row-invoice{grid-template-columns:1fr 120px 140px 120px}   /* Charge invoices */
.chg-row-client{grid-template-columns:100px 1fr 100px 120px 120px} /* Charge clients */
.chg-row-rate{grid-template-columns:1fr 120px 160px 160px}      /* Charge rates */
.chg-row-labour{grid-template-columns:1fr 120px}                /* Charge recent labour */
.chg-row-newclient{grid-template-columns:120px 1fr 120px}       /* Charge add-client field row */
.fos-line-row{grid-template-columns:1fr 1.4fr 90px 40px}        /* FulfilmentOS new-order line items */
.fos-putaway-row{grid-template-columns:1fr 1fr 1fr 100px}       /* FulfilmentOS inbound putaway */
.intg-row-key{grid-template-columns:minmax(0,1.1fr) 110px minmax(0,1.5fr) 90px 110px 110px 100px}       /* Integrations API keys */
.intg-row-webhook{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1.3fr) 90px minmax(260px,auto)} /* Integrations webhooks */
.intg-row-delivery{grid-template-columns:110px minmax(0,1.1fr) 90px 70px 60px minmax(0,1.4fr) 100px}    /* Integrations deliveries */
.intg-row-inbound{grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) 130px 110px minmax(280px,auto)} /* Integrations inbound endpoints */
.intg-row-inevent{grid-template-columns:110px 120px minmax(0,1fr) 100px 130px}                          /* Integrations inbound events */
.intg-row-activity{grid-template-columns:110px 60px minmax(0,1.3fr) 100px minmax(0,1.5fr)}              /* Integrations activity feed */
.intg-row-fail{grid-template-columns:110px minmax(0,1fr) 90px minmax(0,1.4fr)}                          /* Integrations overview failures */
.intg-row-impclient{grid-template-columns:minmax(0,1.7fr) 130px 70px 90px 80px 90px}                    /* Integrations data-import stock clients */
.intg-row-impmonth{grid-template-columns:minmax(0,1.7fr) 110px 90px 100px 90px 90px}                    /* Integrations data-import orders per month */
.intg-row-implow{grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) 80px 80px}                       /* Integrations data-import low stock */
.intg-row-impunmatched{grid-template-columns:minmax(0,1.3fr) minmax(0,1.2fr) 80px 140px}                /* Integrations data-import unmatched clients */

/* Single overflow guard. .header is position:sticky, so clip (not hidden) —
   clip does not create a scroll container, keeping sticky intact. */
body{overflow-x:clip}

@media (max-width:900px){
  .main{padding:40px 20px 72px}
  .chat-shell{grid-template-columns:200px 1fr}
}

@media (max-width:640px){
  /* Header wraps instead of overflowing */
  .header{flex-wrap:wrap;gap:10px;padding:12px 16px}
  .header-right{flex-wrap:wrap;justify-content:flex-end;gap:8px}
  .date-badge{display:none}

  /* Hero + page padding */
  .hero{min-height:auto;margin-bottom:32px}
  .main{padding:28px 14px 56px}

  /* Forms stack to a single column */
  .field-row{grid-template-columns:1fr}
  .chg-row-newclient,.fos-line-row,.fos-putaway-row{grid-template-columns:1fr}
  .form-actions{grid-template-columns:1fr}

  /* Multi-column layouts collapse */
  .account-grid,.sop-grid,.wms-pick-board,.report-grid,.calc-grid,.invoice-grid,.globe-grid,.dash-grid{grid-template-columns:1fr}

  /* Tabs scroll sideways rather than squashing */
  .view-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}

  /* Grid tables: keep the row template, scroll the container */
  .orders-table,.inv-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .orders-row,.inv-row{min-width:560px}
  .orders-row.orders-row-sel{min-width:600px}
  .orders-row-rich{min-width:820px}
  .orders-row-rich.orders-row-sel{min-width:860px}
  .wms-stock-row{min-width:640px}
  .wms-parcel-row{min-width:620px}
  .chg-row-peer,.chg-row-invoice{min-width:560px}
  .chg-row-client{min-width:600px}
  .chg-row-rate{min-width:640px}
  .intg-row-key,.intg-row-webhook,.intg-row-inbound{min-width:720px}
  .intg-row-delivery,.intg-row-activity{min-width:640px}
  .intg-row-inevent,.intg-row-fail{min-width:560px}
  .intg-row-impclient,.intg-row-impmonth,.intg-row-impunmatched{min-width:720px}
  .intg-row-implow{min-width:560px}
  .table-wrap{overflow-x:auto}   /* overrides the desktop overflow:hidden at phone width only */
  .tasks-grid{min-width:560px}
  .user-table{display:block;overflow-x:auto;white-space:nowrap}

  /* Invoice item editor: keep one usable row */
  .item-row{grid-template-columns:1fr 64px 96px auto}

  /* Activity log: time+app on row one, detail and user span full width */
  .log-entry{grid-template-columns:84px 1fr}
  .log-entry .log-detail,.log-entry .log-user{grid-column:1 / -1}

  /* Chat: sidebar becomes a horizontal strip above the thread */
  .chat-shell{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:calc(100dvh - 168px)}
  .chat-sidebar{border-right:none;border-bottom:1px solid var(--bd);display:flex;flex-direction:row;gap:6px;overflow-x:auto;max-height:64px}
  .chat-section-label{display:none}
  .chat-item{width:auto;flex:0 0 auto}

  /* Globe */
  .globe-map{height:min(70vw,360px)}
  .globe-side{max-height:none}
}