/* ============================================================================
   PLUGG LIFE — COMMAND CENTRE  (all classes scoped .pg-)
   A self-contained playable layer rendered over Plugg Life. Dark cinematic
   command centre. Reuses the design tokens; never touches existing components.
   ========================================================================== */

/* ---------- persistent launcher: control-sized dial + slide-out tray ---- */
.pg-launch{
  position:absolute; top:calc(14px + env(safe-area-inset-top,0px)); right:calc(14px + env(safe-area-inset-right,0px)); z-index:160;
  display:flex; flex-direction:row; align-items:center; gap:8px; flex-wrap:nowrap; white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base);
}
/* slide off to the right whenever a drawer is open or build mode is active */
.pg-launch.pg-stowed{ transform:translateX(calc(100% + 22px)); opacity:0; pointer-events:none; }
/* chevron toggle — slides the status tray out (‹ left) / in (› right) */
.pg-launch-toggle{
  flex:none; width:22px; height:42px; border:1px solid rgba(255,255,255,0.12); border-radius:var(--r-md);
  background:linear-gradient(135deg, rgba(40,34,56,0.40), rgba(14,12,22,0.34));
  -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  color:var(--ink-2); font-size:15px; line-height:1; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center; }
.pg-launch-toggle:active{ background:rgba(168,85,247,0.18); color:var(--ink); }
/* status tray (chips + title) — slides in/out horizontally */
.pg-launch-info{
  display:flex; flex-direction:row; align-items:center; justify-content:center; overflow:hidden;
  max-width:min(244px, calc(100vw - 146px)); opacity:1; padding:8px 12px; border-radius:var(--r-md);
  background:linear-gradient(135deg, rgba(40,34,56,0.40), rgba(14,12,22,0.34));
  border:1px solid rgba(255,255,255,0.12);
  -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 8px 28px -10px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
  cursor:pointer; transition:max-width var(--dur-base) var(--ease-out), opacity var(--dur-fast), padding var(--dur-base), margin var(--dur-base), transform var(--dur-base) var(--ease-out); }
.pg-launch.collapsed .pg-launch-info{ max-width:0; opacity:0; padding-left:0; padding-right:0; border-width:0; margin-right:-8px; transform:translateX(16px); pointer-events:none; }
.pg-launch.collapsed .pg-launch-toggle{ margin-right:-4px; }
/* dial puck — matches the 42×42 map control buttons */
.pg-dial{ position:relative; width:42px; height:42px; flex:none; border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,0.12); cursor:pointer;
  background:linear-gradient(135deg, rgba(40,34,56,0.40), rgba(14,12,22,0.34));
  -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 8px 28px -10px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08); }
.pg-dial:active{ transform:scale(0.94); }
.pg-dial canvas{ position:absolute; inset:0; margin:auto; width:40px; height:40px; display:block; }
.pg-dial-skull{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:15px; line-height:1; }
.pg-launch-wallet{ display:flex; align-items:center; gap:11px; flex:none; }
.pg-launch-wallet-item{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); white-space:nowrap; }
.pg-launch-wallet-item + .pg-launch-wallet-item{ padding-left:11px; border-left:1px solid rgba(255,255,255,0.14); }
.pg-launch-wallet-item i{ font-style:normal; font-size:13px; line-height:1; }
.pg-launch-wallet-item b{ font-size:11.5px; line-height:1; letter-spacing:0.02em; color:var(--ink); }
.pg-launch-wallet-item em{ font-style:normal; font-size:7px; line-height:1; letter-spacing:0.12em; color:rgba(255,255,255,0.62); }
.pg-launch-wallet-item.gold i{ color:var(--gold-bright); }
.pg-launch-wallet-item.power i{ color:#7CE0FF; }

/* ---------- overlay shell ---------------------------------------------- */
.pg-root{ position:absolute; inset:0; z-index:185; display:none; }
.pg-root.open{ display:block; }
.pg-scrim{ position:absolute; inset:0; background:rgba(4,3,9,0.32); backdrop-filter:blur(2px);
  opacity:0; transition:opacity var(--dur-base); }
.pg-root.open .pg-scrim{ opacity:1; }

.pg-panel{
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(168,85,247,0.16), transparent 60%),
    radial-gradient(90% 50% at 100% 110%, rgba(255,77,94,0.10), transparent 55%),
    rgba(11,9,18,0.42);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  backdrop-filter:blur(20px) saturate(1.3);
  transform:translateY(2.5%); opacity:0;
  transition:transform var(--dur-slow) var(--ease-out), opacity var(--dur-base);
}
.pg-root.open .pg-panel{ transform:none; opacity:1; }

/* ---------- top bar + HUD ---------------------------------------------- */
.pg-top{ flex:none; padding:14px 16px 10px; padding-top:calc(14px + env(safe-area-inset-top,0px));
  border-bottom:1px solid var(--hairline); }
.pg-titlerow{ display:flex; align-items:center; gap:10px; }
.pg-crest{ font-size:18px; color:var(--violet-bright); }
.pg-title{ font-family:var(--font-display); font-size:17px; font-weight:700; letter-spacing:-0.01em; color:var(--ink); }
.pg-title small{ display:block; font-family:var(--font-mono); font-size:8.5px; letter-spacing:0.22em;
  color:var(--ink-3); font-weight:500; margin-top:1px; }
.pg-x{ margin-left:auto; width:34px; height:34px; border-radius:10px; border:1px solid var(--hairline-2);
  background:var(--panel-2); color:var(--ink-2); font-size:16px; cursor:pointer; }
.pg-x:active{ background:var(--panel-3); }

.pg-hud{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:12px; }
.pg-coin{ display:flex; flex-direction:column; gap:2px; padding:8px 9px; border-radius:11px;
  background:var(--panel); border:1px solid var(--hairline); }
.pg-coin .k{ font-family:var(--font-mono); font-size:8px; letter-spacing:0.12em; color:var(--ink-3); }
.pg-coin .v{ font-family:var(--font-mono); font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; }
.pg-coin.cash .v{ color:var(--state-clear); }
.pg-coin.power .v{ color:var(--ultraviolet); }
.pg-coin.gold .v{ color:var(--gold-bright); }
.pg-coin.bst .v{ color:#FF9F1C; }

/* ---------- big threat bar (sits across UK + Europe) ------------------- */
.pg-threat{ margin-top:11px; padding:11px 12px; border-radius:13px; background:var(--panel);
  border:1px solid var(--hairline-2); }
.pg-threat-h{ display:flex; align-items:center; gap:8px; }
.pg-threat-state{ font-family:var(--font-mono); font-size:12.5px; font-weight:700; letter-spacing:0.1em; }
.pg-threat-sub{ margin-left:auto; font-size:10px; color:var(--ink-3); }
.pg-threat-track{ position:relative; height:9px; border-radius:99px; margin-top:9px; overflow:hidden;
  background:linear-gradient(90deg,#2FE0A1 0%,#4D9FFF 22%,#F5B544 46%,#FF8A3D 70%,#FF4D5E 100%); }
.pg-threat-track::after{ content:""; position:absolute; inset:0; background:rgba(11,10,19,0.55); }
.pg-threat-fill{ position:absolute; top:0; left:0; bottom:0; border-radius:99px;
  background:linear-gradient(90deg,#2FE0A1 0%,#4D9FFF 22%,#F5B544 46%,#FF8A3D 70%,#FF4D5E 100%);
  z-index:1; transition:width var(--dur-slow) var(--ease-out); }
.pg-threat-knob{ position:absolute; top:50%; width:14px; height:14px; border-radius:50%; z-index:2;
  transform:translate(-50%,-50%); background:#fff; box-shadow:0 0 0 3px rgba(11,10,19,0.7), 0 0 12px currentColor;
  transition:left var(--dur-slow) var(--ease-out); }
.pg-threat-ticks{ display:flex; justify-content:space-between; margin-top:7px;
  font-family:var(--font-mono); font-size:7.5px; letter-spacing:0.06em; color:var(--ink-4); }
.pg-threat-ticks span.on{ color:var(--ink); }
.pg-vuln{ margin-top:9px; font-size:10.5px; padding:6px 9px; border-radius:8px; display:flex; gap:7px; align-items:center; }
.pg-vuln.safe{ background:var(--clear-dim); color:var(--state-clear); }
.pg-vuln.danger{ background:var(--crisis-dim); color:var(--state-crisis); }

/* ---------- theatre tabs ----------------------------------------------- */
.pg-tabs{ flex:none; display:flex; gap:6px; padding:11px 16px 0; }
.pg-tab{ flex:1; padding:9px 4px 10px; border-radius:11px 11px 0 0; cursor:pointer; text-align:center;
  background:transparent; border:1px solid transparent; border-bottom:none;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.1em; font-weight:600; color:var(--ink-3);
  display:flex; flex-direction:column; align-items:center; gap:3px; }
.pg-tab .ic{ font-size:15px; }
.pg-tab.on{ color:var(--ink); background:var(--panel); border-color:var(--hairline-2); }
.pg-tab[data-feed]{ flex:0 0 46px; }

/* ---------- scroll body ------------------------------------------------ */
.pg-body{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px 16px calc(28px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--hairline-2); background:transparent; }
.pg-sect{ font-family:var(--font-mono); font-size:9px; letter-spacing:0.18em; color:var(--ink-3);
  margin:18px 2px 9px; text-transform:uppercase; }
.pg-sect:first-child{ margin-top:2px; }
.pg-lead{ font-size:12px; color:var(--ink-2); line-height:1.5; margin:0 2px 4px; }

/* ---------- generic card ----------------------------------------------- */
.pg-card{ background:var(--panel); border:1px solid var(--hairline); border-radius:14px;
  padding:13px 14px; margin-bottom:10px; }
.pg-card.lift{ background:var(--panel-2); }
.pg-card-h{ display:flex; align-items:center; gap:10px; }
.pg-ic-badge{ width:36px; height:36px; flex:none; border-radius:10px; display:flex; align-items:center;
  justify-content:center; font-size:17px; background:var(--panel-3); border:1px solid var(--hairline-2); }
.pg-card-tt{ font-size:14px; font-weight:600; color:var(--ink); }
.pg-card-sub{ font-size:10.5px; color:var(--ink-3); margin-top:1px; }
.pg-row{ display:flex; align-items:center; gap:8px; }
.pg-spacer{ flex:1; }
.pg-mut{ color:var(--ink-3); }

/* stat grid inside cards */
.pg-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:11px; }
.pg-stats.two{ grid-template-columns:repeat(2,1fr); }
.pg-stat{ background:var(--graphite); border:1px solid var(--hairline); border-radius:9px; padding:7px 8px; }
.pg-stat .k{ font-family:var(--font-mono); font-size:8px; letter-spacing:0.08em; color:var(--ink-3); }
.pg-stat .v{ font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--ink); margin-top:2px; }

/* live production clock — Gold treasury + Power reserve, ticking in real time */
.pg-prod{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:8px; }
.pg-prod-c{ position:relative; padding:12px 13px; border-radius:13px; overflow:hidden;
  background:var(--graphite); border:1px solid var(--hairline); }
.pg-prod-c.gold{ border-color:rgba(212,176,98,0.34); background:linear-gradient(180deg, rgba(212,176,98,0.10), rgba(8,6,14,0.2)); }
.pg-prod-c.pwr{ border-color:rgba(176,148,255,0.32); background:linear-gradient(180deg, rgba(176,148,255,0.10), rgba(8,6,14,0.2)); }
.pg-prod-k{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:0.12em; color:var(--ink-3); }
.pg-prod-v{ font-family:var(--font-mono); font-size:24px; font-weight:700; line-height:1.05; margin-top:5px;
  font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.pg-prod-c.gold .pg-prod-v{ color:var(--gold-bright); }
.pg-prod-c.pwr .pg-prod-v{ color:var(--ultraviolet); }
.pg-prod-r{ display:inline-flex; align-items:center; gap:6px; margin-top:5px;
  font-family:var(--font-mono); font-size:10px; font-weight:700; color:#2FE0A1; letter-spacing:0.02em; }
.pg-prod-r::before{ content:""; width:6px; height:6px; border-radius:99px; background:#2FE0A1;
  box-shadow:0 0 7px #2FE0A1; animation:pgPulse 1.6s ease-in-out infinite; }
@keyframes pgPulse{ 0%,100%{ opacity:0.35; } 50%{ opacity:1; } }
.pg-prod-foot{ font-size:10.5px; color:var(--ink-3); line-height:1.45; margin:8px 2px 0; }

/* health / progress bar */
.pg-bar{ height:7px; border-radius:99px; background:var(--graphite); overflow:hidden; margin-top:8px; }
.pg-bar i{ display:block; height:100%; border-radius:99px; transition:width var(--dur-slow) var(--ease-out); }
.pg-barlbl{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:9px;
  color:var(--ink-3); margin-top:5px; }

/* status pills */
.pg-pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px;
  font-family:var(--font-mono); font-size:9px; font-weight:600; letter-spacing:0.06em; }
.pg-pill .d{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.pg-pill.active{ color:var(--state-clear); background:var(--clear-dim); }
.pg-pill.damaged{ color:var(--state-caution); background:var(--caution-dim); }
.pg-pill.disabled{ color:var(--state-crisis); background:var(--crisis-dim); }
.pg-pill.occupied{ color:var(--ultraviolet); background:var(--active-dim); }
.pg-pill.repairing{ color:var(--state-focus); background:var(--focus-dim); }
.pg-pill.stolen{ color:var(--state-crisis); background:var(--crisis-dim); }
.pg-pill.leading{ color:var(--state-clear); background:var(--clear-dim); }
.pg-pill.outbid{ color:var(--state-crisis); background:var(--crisis-dim); }
.pg-pill.open{ color:var(--state-focus); background:var(--focus-dim); }
.pg-pill.locked{ color:var(--ink-3); background:var(--standby-dim); }
.pg-pill.held{ color:var(--state-crisis); background:var(--crisis-dim); }
.pg-pill.rescued{ color:var(--state-clear); background:var(--clear-dim); }

/* buttons */
.pg-btns{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.pg-btn{ flex:1; min-width:fit-content; padding:11px 14px; border-radius:11px; cursor:pointer;
  font-family:var(--font-ui); font-size:12.5px; font-weight:600; text-align:center;
  border:1px solid var(--hairline-2); background:var(--panel-2); color:var(--ink); transition:all var(--dur-fast); }
.pg-btn:active{ transform:scale(0.97); }
.pg-btn.go{ background:linear-gradient(180deg, var(--violet-bright), var(--violet)); border-color:transparent; color:#fff; }
.pg-btn.gold{ background:linear-gradient(180deg, var(--gold-bright), var(--gold)); border-color:transparent; color:var(--ink-on-gold); }
.pg-btn.danger{ background:linear-gradient(180deg, #FF6B7A, var(--state-crisis)); border-color:transparent; color:#fff; }
.pg-btn.clear{ background:linear-gradient(180deg, #4FE9B4, var(--state-clear)); border-color:transparent; color:#06251a; }
.pg-btn:disabled{ opacity:0.4; pointer-events:none; }
.pg-btn.ghost{ background:transparent; }

/* checklist */
.pg-check{ display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:12px;
  background:var(--panel); border:1px solid var(--hairline); margin-bottom:8px; cursor:pointer; transition:all var(--dur-fast); }
.pg-check:active{ transform:scale(0.99); }
.pg-check .box{ width:24px; height:24px; flex:none; border-radius:7px; border:1.5px solid var(--hairline-3);
  display:flex; align-items:center; justify-content:center; font-size:13px; color:transparent; transition:all var(--dur-base); }
.pg-check .meta{ flex:1; }
.pg-check .lbl{ font-size:13px; color:var(--ink); font-weight:500; }
.pg-check .cut{ font-family:var(--font-mono); font-size:9.5px; color:var(--state-clear); margin-top:1px; }
.pg-check.done{ opacity:0.62; }
.pg-check.done .box{ background:var(--state-clear); border-color:var(--state-clear); color:#06251a; }
.pg-check.done .lbl{ text-decoration:line-through; color:var(--ink-3); }

/* event feed */
.pg-feed-item{ display:flex; gap:10px; padding:9px 2px; border-bottom:1px solid var(--hairline); }
.pg-feed-dot{ width:8px; height:8px; border-radius:50%; margin-top:5px; flex:none; }
.pg-feed-t{ font-family:var(--font-mono); font-size:9px; color:var(--ink-4); flex:none; width:34px; margin-top:2px; }
.pg-feed-x{ font-size:12px; color:var(--ink-2); line-height:1.45; }

/* worker / vehicle chips inside a unit */
.pg-mini{ display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.pg-mini span{ font-family:var(--font-mono); font-size:9px; padding:3px 8px; border-radius:7px;
  background:var(--graphite); border:1px solid var(--hairline); color:var(--ink-2); }

/* sub-sheet (attack result / unit detail raised over the panel) */
.pg-sub{ position:absolute; inset:0; z-index:8; display:none; flex-direction:column; background:rgba(11,9,18,0.58);
  -webkit-backdrop-filter:blur(26px) saturate(1.3); backdrop-filter:blur(26px) saturate(1.3); }
.pg-sub.open{ display:flex; }
.pg-sub-head{ flex:none; display:flex; align-items:center; gap:10px; padding:14px 16px;
  padding-top:calc(14px + env(safe-area-inset-top,0px)); border-bottom:1px solid var(--hairline); }
.pg-sub-back{ width:32px; height:32px; border-radius:9px; border:1px solid var(--hairline-2);
  background:var(--panel-2); color:var(--ink-2); font-size:17px; cursor:pointer; }
.pg-sub-tt{ font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--ink); }
.pg-sub-tt small{ display:block; font-family:var(--font-mono); font-size:8px; letter-spacing:0.2em; color:var(--ink-3); margin-top:1px; }
.pg-sub-body{ flex:1; overflow-y:auto; padding:16px; }

/* attack result hero */
.pg-result{ text-align:center; padding:22px 10px 14px; border-radius:16px; margin-bottom:14px;
  border:1px solid var(--hairline-2); }
.pg-result.success{ background:radial-gradient(120% 90% at 50% 0%, rgba(255,77,94,0.18), transparent 70%); }
.pg-result.partial{ background:radial-gradient(120% 90% at 50% 0%, rgba(245,181,68,0.16), transparent 70%); }
.pg-result.blocked{ background:radial-gradient(120% 90% at 50% 0%, rgba(47,224,161,0.16), transparent 70%); }
.pg-result .verdict{ font-family:var(--font-display); font-size:28px; font-weight:700; letter-spacing:-0.01em; }
.pg-result.success .verdict{ color:var(--state-crisis); }
.pg-result.partial .verdict{ color:var(--state-caution); }
.pg-result.blocked .verdict{ color:var(--state-clear); }
.pg-result .vs{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.16em; color:var(--ink-3); margin-bottom:4px; }
.pg-vsrow{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:12px; }
.pg-vsrow .side{ text-align:center; }
.pg-vsrow .num{ font-family:var(--font-mono); font-size:24px; font-weight:700; }
.pg-vsrow .num.atk{ color:var(--state-crisis); }
.pg-vsrow .num.def{ color:var(--state-focus); }
.pg-vsrow .cap{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:0.1em; color:var(--ink-3); margin-top:2px; }
.pg-vsrow .mid{ font-family:var(--font-display); font-size:14px; color:var(--ink-3); }

/* damage ledger lines */
.pg-ledger{ display:flex; flex-direction:column; gap:1px; border-radius:11px; overflow:hidden; border:1px solid var(--hairline); }
.pg-ledger .ln{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--panel); }
.pg-ledger .ln .lk{ font-size:12px; color:var(--ink-2); }
.pg-ledger .ln .lv{ margin-left:auto; font-family:var(--font-mono); font-size:12.5px; font-weight:600; }
.pg-ledger .ln .lv.bad{ color:var(--state-crisis); }
.pg-ledger .ln .lv.ok{ color:var(--state-clear); }
/* two-part line: what changed + resulting current state */
.pg-ledger .ln2{ align-items:center; padding-top:11px; padding-bottom:11px; }
.pg-ledger .ln2 .lk{ flex:none; }
.pg-ledger .ln2 .ln2-r{ margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right; }
.pg-ledger .ln2 .lv{ margin-left:0; font-size:12px; white-space:nowrap; }
.pg-ledger .ln2 .ln2-now{ font-family:var(--font-mono); font-size:9.5px; color:var(--ink-3); letter-spacing:0.02em; white-space:nowrap; }
.pg-ledger .ln2 .ln2-now b{ color:var(--ink); font-weight:600; }

/* slider/segmented for commission + alloc */
.pg-range{ width:100%; margin:10px 0 2px; accent-color:var(--violet-bright); }
.pg-stepper{ display:flex; align-items:center; gap:0; border:1px solid var(--hairline-2); border-radius:10px; overflow:hidden; }
.pg-stepper button{ width:38px; height:36px; background:var(--panel-2); border:none; color:var(--ink); font-size:18px; cursor:pointer; }
.pg-stepper button:active{ background:var(--panel-3); }
.pg-stepper .val{ flex:1; text-align:center; font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--ink); }

/* member slots */
.pg-slot{ display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:12px; margin-bottom:8px;
  background:var(--panel); border:1px solid var(--hairline); }
.pg-slot.empty{ border-style:dashed; }
.pg-slot.locked{ opacity:0.7; }
.pg-slot .av{ width:34px; height:34px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:14px; color:#fff; }

/* tiny toast inside panel */
.pg-toast{ position:absolute; left:50%; bottom:24px; transform:transl(-50%,16px); translate:-50% 0;
  z-index:20; padding:10px 16px; border-radius:99px; background:var(--panel-4); border:1px solid var(--hairline-2);
  color:var(--ink); font-size:12px; font-weight:500; box-shadow:var(--shadow-3); opacity:0; pointer-events:none;
  transition:opacity var(--dur-base), transform var(--dur-base); white-space:nowrap; max-width:88%; }
.pg-toast.show{ opacity:1; transform:translateY(0); translate:-50% 0; }

@media (prefers-reduced-motion: reduce){
  .pg-panel,.pg-scrim,.pg-threat-fill,.pg-threat-knob,.pg-bar i{ transition:none; }
}

/* ==========================================================================
   ZÜRICH VAULT · commission exchange card (lives in the Bank of Gibraltar drawer)
   ========================================================================== */
.vx-card{ position:relative; overflow:hidden; flex:none; border-radius:18px; padding:16px 15px; margin:2px 0 16px;
  background:linear-gradient(158deg, rgba(212,176,98,0.18), rgba(20,16,28,0.55) 58%), var(--panel-2);
  border:1px solid rgba(212,176,98,0.36);
  box-shadow:0 0 0 1px rgba(212,176,98,0.06), 0 22px 46px -22px rgba(212,176,98,0.45); }
.vx-card::before{ content:""; position:absolute; top:-46%; right:-22%; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(236,208,138,0.24), transparent 70%); pointer-events:none; }
.vx-card > *{ position:relative; }
.vx-eyebrow{ font-family:var(--font-mono); font-size:9px; letter-spacing:0.2em; color:var(--gold-bright); }
.vx-title{ font-family:var(--font-display); font-size:19px; font-weight:700; letter-spacing:-0.01em; color:var(--ink); margin-top:3px; }
.vx-sub{ font-size:11.5px; color:var(--ink-2); margin-top:4px; line-height:1.5; }
.vx-sub b{ color:var(--gold-bright); font-weight:600; }
.vx-wallet{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:13px 0 12px; }
.vx-coin{ padding:7px 7px; border-radius:10px; background:rgba(8,6,14,0.5); border:1px solid var(--hairline); }
.vx-coin .k{ font-family:var(--font-mono); font-size:7.5px; letter-spacing:0.08em; color:var(--ink-3); }
.vx-coin .v{ font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--ink); margin-top:1px; white-space:nowrap; }
.vx-coin.cash .v{ color:var(--state-clear); } .vx-coin.power .v{ color:var(--ultraviolet); }
.vx-coin.gold .v{ color:var(--gold-bright); } .vx-coin.bst .v{ color:#FF9F1C; }
.vx-ex{ padding:9px 11px; border-radius:11px; background:rgba(8,6,14,0.4); border:1px dashed rgba(212,176,98,0.32);
  font-size:11px; color:var(--ink-2); line-height:1.5; }
.vx-ex b{ color:var(--gold-bright); font-weight:600; }
.vx-stepper{ display:flex; align-items:center; border:1px solid rgba(212,176,98,0.3); border-radius:11px; overflow:hidden; margin-top:12px; }
.vx-stepper button{ width:44px; height:42px; background:rgba(212,176,98,0.1); border:none; color:var(--gold-bright); font-size:21px; cursor:pointer; }
.vx-stepper button:active{ background:rgba(212,176,98,0.24); }
.vx-stepper .val{ flex:1; text-align:center; font-family:var(--font-mono); font-size:17px; font-weight:600; color:var(--ink); }
.vx-range{ width:100%; margin:11px 0 3px; accent-color:var(--gold); }
.vx-preview{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.vx-tile{ padding:9px 11px; border-radius:11px; background:rgba(8,6,14,0.5); border:1px solid var(--hairline); }
.vx-tile .k{ font-family:var(--font-mono); font-size:8px; letter-spacing:0.07em; color:var(--ink-3); }
.vx-tile .v{ font-family:var(--font-mono); font-size:16px; font-weight:700; margin-top:2px; white-space:nowrap; }
.vx-tile.cash .v{ color:var(--state-clear); } .vx-tile.power .v{ color:var(--ultraviolet); }
.vx-btns{ display:flex; gap:9px; margin-top:13px; }
.vx-btn{ flex:1; padding:12px 10px; border-radius:12px; font-family:var(--font-ui); font-size:13px; font-weight:600;
  cursor:pointer; border:1px solid var(--hairline-2); background:var(--panel-3); color:var(--ink); transition:transform var(--dur-fast); }
.vx-btn:active{ transform:scale(0.98); }
.vx-btn.cash{ background:linear-gradient(180deg,#4FE9B4,var(--state-clear)); border-color:transparent; color:#06251a; }
.vx-btn.power{ background:linear-gradient(180deg,var(--gold-bright),var(--gold)); border-color:transparent; color:var(--ink-on-gold); }

/* ==========================================================================
   CAPTAIN'S LOCKER · themed private order builder (Blackwater Port → run)
   Treasure-chest / leather / wax-seal energy — deliberately unlike the
   standard blue Create Order drawer.
   ========================================================================== */
.cl{ --cl-gold:#E7C667; --cl-bronze:#B0894A; color:var(--ink); }
/* member selector (crew lockers) */
.cl-memrow{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 4px; -webkit-overflow-scrolling:touch; }
.cl-mem{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 12px; border-radius:13px; cursor:pointer; flex:none;
  background:rgba(20,14,9,0.5); border:1px solid var(--hairline); transition:border-color var(--dur-fast), background var(--dur-fast); }
.cl-mem.on{ border-color:var(--cl-gold); background:rgba(231,198,103,0.12); }
.cl-mem-av{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:15px; color:#0e0a06; }
.cl-mem-nm{ font-family:var(--font-mono); font-size:10px; color:var(--ink-2); }
.cl-mem.on .cl-mem-nm{ color:var(--ink); }
/* runner / courier chips */
.cl-runs{ display:flex; gap:8px; flex-wrap:wrap; }
.cl-run{ padding:9px 13px; border-radius:11px; cursor:pointer; font-family:var(--font-ui); font-size:12px; font-weight:600;
  background:rgba(20,14,9,0.5); border:1px solid var(--hairline); color:var(--ink-2); transition:all var(--dur-fast); }
.cl-run.on{ border-color:var(--cl-gold); background:rgba(231,198,103,0.12); color:var(--ink); }
/* courier carried-quantity badge (single-select legacy) */
.cl-car[aria-selected="true"]{ border-color:#7FA8DC; background:rgba(127,168,220,0.12); }
.cl-carry{ font-family:var(--font-mono); font-size:8.5px; font-weight:600; letter-spacing:0.04em; padding:3px 8px; border-radius:99px;
  flex:none; color:#9CC0EC; background:rgba(127,168,220,0.16); }
/* multi-item manifest line */
.cl-line{ padding:12px 13px; border-radius:13px; margin-bottom:9px;
  background:rgba(20,14,9,0.6); border:1px solid rgba(176,137,74,0.34); }
.cl-line-h{ display:flex; align-items:center; gap:11px; }
.cl-line-cars{ display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }
.cl-carchip{ padding:6px 10px; border-radius:9px; cursor:pointer; font-family:var(--font-mono); font-size:10px; font-weight:600;
  background:rgba(127,168,220,0.08); border:1px solid var(--hairline); color:var(--ink-2); transition:all var(--dur-fast); }
.cl-carchip[aria-selected="true"]{ border-color:#7FA8DC; background:rgba(127,168,220,0.18); color:#cfe0f5; }
.cl-line-cap{ font-family:var(--font-mono); font-size:9.5px; color:var(--ink-3); margin-top:8px; }
.cl-line-cap b{ color:var(--ink); }
/* drop note */
.cl-note{ width:100%; padding:11px 13px; border-radius:12px; background:rgba(20,14,9,0.6); border:1px solid rgba(176,137,74,0.34);
  color:var(--ink); font-family:var(--font-ui); font-size:13px; }
.cl-note::placeholder{ color:var(--ink-4); }
.cl-note:focus{ outline:none; border-color:var(--cl-gold); }
.cl-rrun{ font-family:var(--font-mono); font-size:10px; color:var(--ink-3); margin-top:5px; }
.cl-hero{ position:relative; display:flex; gap:13px; align-items:center; padding:16px 15px; border-radius:16px; overflow:hidden;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(231,198,103,0.20), transparent 60%),
    linear-gradient(160deg, #241a10, #16100a 70%);
  border:1px solid rgba(231,198,103,0.34); box-shadow:0 20px 44px -22px rgba(231,198,103,0.4); }
.cl-hero::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 6px); }
.cl-hero-skull{ width:46px; height:46px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:24px; color:#0e0a06; background:linear-gradient(180deg,var(--cl-gold),var(--cl-bronze));
  box-shadow:0 4px 14px rgba(231,198,103,0.4); position:relative; z-index:1; }
.cl-hero-id{ position:relative; z-index:1; }
.cl-hero-k{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:0.2em; color:var(--cl-gold); }
.cl-hero-t{ font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:-0.01em; margin-top:2px; }
.cl-hero-sub{ font-size:10.5px; color:var(--ink-3); margin-top:2px; }
.cl-label{ font-family:var(--font-mono); font-size:9px; letter-spacing:0.18em; color:var(--cl-gold); text-transform:uppercase; margin:18px 2px 9px; }
/* manifest item + qty */
.cl-manifest{ display:flex; align-items:center; gap:10px; padding:12px 13px; border-radius:13px;
  background:rgba(20,14,9,0.6); border:1px solid rgba(176,137,74,0.34); }
.cl-item{ display:flex; align-items:center; gap:11px; flex:1; min-width:0; }
.cl-item-gl{ width:34px; height:34px; flex:none; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--cl-gold); background:rgba(231,198,103,0.12); border:1px solid rgba(231,198,103,0.3); }
.cl-item-meta b{ font-size:13.5px; display:block; } .cl-item-meta small{ font-size:10px; color:var(--ink-3); }
.cl-qty{ display:flex; align-items:center; border:1px solid rgba(176,137,74,0.4); border-radius:10px; overflow:hidden; flex:none; }
.cl-qty button{ width:38px; height:38px; background:rgba(231,198,103,0.1); border:none; color:var(--cl-gold); font-size:19px; cursor:pointer; }
.cl-qty button:active{ background:rgba(231,198,103,0.26); }
.cl-qval{ width:40px; text-align:center; font-family:var(--font-mono); font-size:15px; font-weight:600; }
.cl-rem{ font-family:var(--font-mono); font-size:10px; color:var(--ink-3); margin:7px 2px 0; }
.cl-rem b{ color:var(--ink); }
/* buyers */
.cl-buyers{ display:flex; flex-direction:column; gap:8px; }
.cl-buyer{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:12px; cursor:pointer; text-align:left;
  background:rgba(20,14,9,0.5); border:1px solid var(--hairline); transition:border-color var(--dur-fast), background var(--dur-fast); }
.cl-buyer[aria-selected="true"]{ border-color:var(--cl-gold); background:rgba(231,198,103,0.1); }
.cl-buyer-av{ width:32px; height:32px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:14px; color:#0e0a06; background:linear-gradient(180deg,var(--cl-gold),var(--cl-bronze)); }
.cl-buyer-meta{ flex:1; min-width:0; } .cl-buyer-meta b{ font-size:13px; display:block; } .cl-buyer-meta small{ font-size:10px; color:var(--ink-3); }
.cl-trust{ font-family:var(--font-mono); font-size:8px; font-weight:600; letter-spacing:0.06em; padding:3px 7px; border-radius:99px; flex:none; }
.cl-trust.high{ color:var(--state-clear); background:var(--clear-dim); }
.cl-trust.mid{ color:var(--state-caution); background:var(--caution-dim); }
.cl-trust.low{ color:var(--state-crisis); background:var(--crisis-dim); }
/* haul split */
.cl-haul{ padding:13px 14px; border-radius:14px; background:rgba(20,14,9,0.6); border:1px solid rgba(176,137,74,0.34); }
.cl-haulrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12.5px; color:var(--ink-2); padding:3px 0; }
.cl-haulrow span{ min-width:0; }
.cl-haulrow b{ font-family:var(--font-mono); font-size:14px; color:var(--ink); white-space:nowrap; flex:none; }
.cl-haulrow b.mut{ color:var(--ink-3); }
.cl-haulrow.big{ margin-top:6px; padding-top:9px; border-top:1px solid var(--hairline); }
.cl-haulrow.big span{ font-weight:600; color:var(--ink); } .cl-haulrow.big b{ font-size:18px; color:var(--cl-gold); }
.cl-split{ margin-top:11px; }
.cl-split-bar{ display:flex; height:8px; border-radius:99px; overflow:hidden; background:var(--graphite); }
.cl-split-bar i{ height:100%; transition:width var(--dur-base) var(--ease-out); }
.cl-split-bar i.cap{ background:linear-gradient(90deg,var(--cl-gold),var(--cl-bronze)); }
.cl-split-bar i.crew{ background:var(--ultraviolet); }
.cl-srow{ display:flex; align-items:center; gap:8px; margin-top:8px; font-size:11.5px; }
.cl-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.cl-dot.cap{ background:var(--cl-gold); } .cl-dot.crew{ background:var(--ultraviolet); }
.cl-sk{ color:var(--ink-2); } .cl-sv{ margin-left:auto; font-family:var(--font-mono); font-weight:600; }
/* wax-seal confirm */
.cl-seal{ width:100%; margin-top:16px; padding:14px; border:none; border-radius:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:0.01em; color:#0e0a06;
  background:linear-gradient(180deg,var(--cl-gold),var(--cl-bronze)); box-shadow:0 12px 30px -10px rgba(231,198,103,0.6);
  transition:transform var(--dur-fast); }
.cl-seal:active{ transform:scale(0.98); }
.cl-seal-wax{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#7c1d27; color:#f0d9a8; font-size:14px; box-shadow:inset 0 0 0 2px rgba(240,217,168,0.4); }
/* sealed receipt */
.cl-receipt{ text-align:center; padding:26px 14px 20px; border-radius:16px;
  background:radial-gradient(120% 80% at 50% 0%, rgba(231,198,103,0.18), transparent 70%);
  border:1px solid rgba(231,198,103,0.3); }
.cl-rseal{ width:60px; height:60px; margin:0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:28px; color:#f0d9a8; background:radial-gradient(circle at 40% 35%, #9a2530, #6d1119);
  box-shadow:inset 0 0 0 3px rgba(240,217,168,0.4), 0 8px 22px -8px rgba(154,37,48,0.8); }
.cl-rstamp{ font-family:var(--font-display); font-size:22px; font-weight:700; letter-spacing:0.04em; color:var(--cl-gold); margin-top:12px; }
.cl-rsub{ font-size:11.5px; color:var(--ink-2); margin-top:4px; }
.cl-rfoot{ text-align:center; font-family:var(--font-mono); font-size:9.5px; color:var(--ink-4); margin-top:12px; letter-spacing:0.04em; }