/* ── Font Loading ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:wght@300;400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Google+Sans:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap');
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
}
/* ── Reset & Base ───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* ═══ Style System: 3 styles × 3 modes ═══════════════════ */
/* Pharos Gold (default) — Lighthouse beacon, warm gold */
:root{
  --radius:6px;--radius-sm:4px;--radius-xs:3px;--radius-table:4px;--radius-badge:10px;
  --sidebar-w:0px;--topnav-h:48px;--gap:14px;--pad:14px;
  --font:'DM Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --font-display:'Inter',system-ui,sans-serif;
  --transition:0.18s ease;
  --bg:#0c0e10;--card:#121518;--border:rgba(224,201,127,0.1);--surface:#181c22;
  --dropdown-bg:#181c22;--dropdown-border:rgba(224,201,127,0.15);
  --text:#e8e2d4;--text2:#9a9080;--text3:#5a5448;
  --accent:#E0C97F;--accent-color:#E0C97F;--accent-hover:#C4A84F;
  --accent-muted:rgba(224,201,127,0.08);--accent-dim:rgba(224,201,127,0.06);--accent-glow:rgba(224,201,127,0.12);
  --success:#7dba6a;--warning:#E0C97F;--error:#d45a5a;
  --sidebar-bg:#0c0e10;--sidebar-text:#e8e2d4;
  --divider:rgba(224,201,127,0.08);
  --label-bg:#E0C97F;--label-color:#0c0e10;
}
/* ── Pharos Gold Light ── */
[data-mode="light"]{
  --bg:#faf8f3;--card:#ffffff;--border:rgba(196,168,79,0.15);--surface:#f0ece2;
  --dropdown-bg:#ffffff;--dropdown-border:rgba(196,168,79,0.2);
  --text:#1a1810;--text2:#6a6050;--text3:#a09880;
  --accent:#8B7A3D;--accent-color:#8B7A3D;--accent-hover:#6B5C2D;
  --accent-muted:rgba(139,122,61,0.08);--accent-dim:rgba(139,122,61,0.06);--accent-glow:rgba(139,122,61,0.1);
  --success:#4a8a3a;--warning:#8B7A3D;--error:#b04a4a;
  --sidebar-bg:#faf8f3;--sidebar-text:#1a1810;
  --divider:rgba(196,168,79,0.1);
  --label-bg:#8B7A3D;--label-color:#ffffff;
}
/* ═══ Ink & Paper — Editorial warmth, terracotta accent, Pharos UI ═ */
[data-style="ink"]{
  --radius:6px;--radius-sm:4px;--radius-xs:3px;--radius-table:4px;--radius-badge:10px;
  --topnav-h:48px;--gap:14px;--pad:14px;
  --font:'DM Sans',system-ui,sans-serif;
  --font-display:'Source Serif 4','Georgia',serif;
  --font-mono:'JetBrains Mono',monospace;
  --transition:0.18s ease;
  --bg:#0e0f11;--card:#16171b;--border:rgba(196,120,90,0.1);--surface:#1c1d22;
  --dropdown-bg:#1c1d22;--dropdown-border:rgba(196,120,90,0.15);
  --text:#e8e5df;--text2:#9a9590;--text3:#5f5b56;
  --accent:#c4785a;--accent-color:#c4785a;--accent-hover:#d4886a;
  --accent-muted:rgba(196,120,90,0.08);--accent-dim:rgba(196,120,90,0.06);--accent-glow:rgba(196,120,90,0.12);
  --success:#7dba6a;--warning:#d4a54a;--error:#c45a5a;
  --sidebar-bg:#0e0f11;--sidebar-text:#e8e5df;
  --divider:rgba(196,120,90,0.08);
  --label-bg:#c4785a;--label-color:#0e0f11;
}
[data-style="ink"][data-mode="light"]{
  --bg:#f8f5f0;--card:#ffffff;--border:rgba(176,99,74,0.15);--surface:#f0ece6;
  --dropdown-bg:#ffffff;--dropdown-border:rgba(176,99,74,0.2);
  --text:#2c2825;--text2:#6b6560;--text3:#a09890;
  --accent:#b0634a;--accent-color:#b0634a;--accent-hover:#9a5540;
  --accent-muted:rgba(176,99,74,0.08);--accent-dim:rgba(176,99,74,0.06);--accent-glow:rgba(176,99,74,0.1);
  --success:#4a8a3a;--warning:#b08a2a;--error:#b04a4a;
  --sidebar-bg:#f8f5f0;--sidebar-text:#2c2825;
  --divider:rgba(176,99,74,0.1);
  --label-bg:#b0634a;--label-color:#ffffff;
}
/* ═══ Nordic — Dusty blue accent, Pharos UI ══════════════ */
[data-style="nordic"]{
  --radius:6px;--radius-sm:4px;--radius-xs:3px;--radius-table:4px;--radius-badge:10px;
  --topnav-h:48px;--gap:14px;--pad:14px;
  --font:'DM Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --font-display:'Inter',system-ui,sans-serif;
  --transition:0.18s ease;
  --bg:#101214;--card:#181a1e;--border:rgba(124,158,178,0.1);--surface:#1e2024;
  --dropdown-bg:#1e2024;--dropdown-border:rgba(124,158,178,0.15);
  --text:#e2e4e8;--text2:#8b8f96;--text3:#4e5259;
  --accent:#7c9eb2;--accent-color:#7c9eb2;--accent-hover:#94b3c5;
  --accent-muted:rgba(124,158,178,0.08);--accent-dim:rgba(124,158,178,0.06);--accent-glow:rgba(124,158,178,0.12);
  --success:#7dba6a;--warning:#d4a54a;--error:#c45a5a;
  --sidebar-bg:#101214;--sidebar-text:#e2e4e8;
  --divider:rgba(124,158,178,0.08);
  --label-bg:#7c9eb2;--label-color:#101214;
}
[data-style="nordic"][data-mode="light"]{
  --bg:#f7f8fa;--card:#ffffff;--border:rgba(90,141,163,0.15);--surface:#eef0f4;
  --dropdown-bg:#ffffff;--dropdown-border:rgba(90,141,163,0.2);
  --text:#1a1d24;--text2:#5a5e66;--text3:#8b8f96;
  --accent:#5a8da3;--accent-color:#5a8da3;--accent-hover:#4a7d93;
  --accent-muted:rgba(90,141,163,0.08);--accent-dim:rgba(90,141,163,0.06);--accent-glow:rgba(90,141,163,0.1);
  --success:#4a8a3a;--warning:#b08a2a;--error:#b04a4a;
  --sidebar-bg:#f7f8fa;--sidebar-text:#1a1d24;
  --divider:rgba(90,141,163,0.1);
  --label-bg:#5a8da3;--label-color:#ffffff;
}
/* ═══ Silver mode — metallic gray backgrounds ══════════════ */
/* ── Pharos Gold Silver Metallic ── */
[data-mode="silver"]{
  --bg:#e8eaed;--card:#f4f5f7;--border:rgba(120,130,145,0.22);--surface:#dcdfe4;--dropdown-bg:#f0f1f3;--dropdown-border:rgba(120,130,145,0.25);
  --text:#1c1e22;--text2:#4a4e58;--text3:#7a7e88;
  --accent:#8B7A3D;--accent-color:#8B7A3D;--accent-hover:#6B5C2D;
  --accent-muted:rgba(139,122,61,0.1);--accent-dim:rgba(139,122,61,0.06);--accent-glow:rgba(139,122,61,0.14);
  --success:#4a7a30;--warning:#8B7A3D;--error:#a04040;
  --sidebar-bg:#e8eaed;--sidebar-text:#1c1e22;
  --divider:rgba(120,130,145,0.15);
  --label-bg:#8B7A3D;--label-color:#ffffff;
}
[data-style="ink"][data-mode="silver"]{
  --bg:#e6e4e1;--card:#f3f2f0;--border:rgba(130,115,108,0.22);--surface:#dad7d4;--dropdown-bg:#efeeec;--dropdown-border:rgba(130,115,108,0.25);
  --text:#2a2624;--text2:#56504a;--text3:#8a847e;
  --accent:#a86040;--accent-color:#a86040;--accent-hover:#905030;
  --accent-muted:rgba(168,96,64,0.1);--accent-dim:rgba(168,96,64,0.06);--accent-glow:rgba(168,96,64,0.12);
  --success:#3a7a30;--warning:#907020;--error:#a04040;
  --sidebar-bg:#e6e4e1;--sidebar-text:#2a2624;
  --divider:rgba(130,115,108,0.12);
  --label-bg:#a86040;--label-color:#ffffff;
}
[data-style="nordic"][data-mode="silver"]{
  --bg:#e2e6ec;--card:#f0f2f6;--border:rgba(100,120,145,0.22);--surface:#d6dbe4;--dropdown-bg:#eceff4;--dropdown-border:rgba(100,120,145,0.25);
  --text:#1a1d24;--text2:#4a5060;--text3:#78808c;
  --accent:#4a7a98;--accent-color:#4a7a98;--accent-hover:#3a6480;
  --accent-muted:rgba(74,122,152,0.1);--accent-dim:rgba(74,122,152,0.06);--accent-glow:rgba(74,122,152,0.12);
  --success:#3a7a40;--warning:#907020;--error:#a04040;
  --sidebar-bg:#e2e6ec;--sidebar-text:#1a1d24;
  --divider:rgba(100,120,145,0.12);
  --label-bg:#4a7a98;--label-color:#ffffff;
}
/* ═══ Silver-mode elevation overrides (metallic feel) ════ */
[data-mode="silver"] .card{box-shadow:0 1px 3px rgba(0,0,0,0.08),0 0 0 1px rgba(255,255,255,0.5) inset}
[data-mode="silver"] .kpi-card{box-shadow:0 1px 3px rgba(0,0,0,0.08),0 0 0 1px rgba(255,255,255,0.5) inset}
[data-mode="silver"] .topnav-theme-dropdown{box-shadow:0 8px 24px rgba(0,0,0,0.12);border-color:rgba(0,0,0,0.08)}
[data-mode="silver"] .topnav{background:linear-gradient(180deg,var(--card) 0%,var(--bg) 100%)}
/* ═══ Light-mode elevation overrides ═════════════════════ */
[data-mode="light"] .card{box-shadow:0 1px 4px rgba(0,0,0,0.06)}
[data-mode="light"] .kpi-card{box-shadow:0 1px 3px rgba(0,0,0,0.06)}

/* ═══ MATERIAL — Google Workspace / Material Design 3 ════ */
[data-style="material"]{
  --radius:16px;--radius-sm:12px;--radius-xs:8px;--radius-table:8px;--radius-badge:20px;
  --topnav-h:52px;--gap:12px;--pad:16px;
  --font:'Roboto','Google Sans',system-ui,sans-serif;
  --font-display:'Google Sans','Roboto',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --transition:0.2s cubic-bezier(0.2,0,0,1);
  --bg:#1f1f1f;--card:#2d2d2d;--border:rgba(138,180,248,0.10);--surface:#383838;
  --dropdown-bg:#2d2d2d;--dropdown-border:rgba(138,180,248,0.15);
  --text:#e8eaed;--text2:#9aa0a6;--text3:#5f6368;
  --accent:#8ab4f8;--accent-color:#8ab4f8;--accent-hover:#aecbfa;
  --accent-muted:rgba(138,180,248,0.08);--accent-dim:rgba(138,180,248,0.05);--accent-glow:rgba(138,180,248,0.12);
  --success:#81c995;--warning:#fdd663;--error:#f28b82;
  --sidebar-bg:#1f1f1f;--sidebar-text:#e8eaed;
  --divider:rgba(138,180,248,0.06);
  --label-bg:#8ab4f8;--label-color:#1f1f1f;
}
[data-style="material"][data-mode="light"]{
  --bg:#ffffff;--card:#ffffff;--border:rgba(26,115,232,0.10);--surface:#f1f3f4;
  --dropdown-bg:#ffffff;--dropdown-border:rgba(26,115,232,0.12);
  --text:#202124;--text2:#5f6368;--text3:#9aa0a6;
  --accent:#1a73e8;--accent-color:#1a73e8;--accent-hover:#1557b0;
  --accent-muted:rgba(26,115,232,0.06);--accent-dim:rgba(26,115,232,0.04);--accent-glow:rgba(26,115,232,0.10);
  --success:#34a853;--warning:#f9ab00;--error:#ea4335;
  --sidebar-bg:#ffffff;--sidebar-text:#202124;
  --divider:rgba(26,115,232,0.06);
  --label-bg:#1a73e8;--label-color:#ffffff;
}
[data-style="material"][data-mode="silver"]{
  --bg:#e8eaed;--card:#f1f3f4;--border:rgba(26,115,232,0.12);--surface:#dadce0;
  --dropdown-bg:#f1f3f4;--dropdown-border:rgba(26,115,232,0.15);
  --text:#202124;--text2:#5f6368;--text3:#80868b;
  --accent:#1a73e8;--accent-color:#1a73e8;--accent-hover:#1557b0;
  --accent-muted:rgba(26,115,232,0.08);--accent-dim:rgba(26,115,232,0.05);--accent-glow:rgba(26,115,232,0.12);
  --success:#34a853;--warning:#f9ab00;--error:#ea4335;
  --sidebar-bg:#e8eaed;--sidebar-text:#202124;
  --divider:rgba(26,115,232,0.08);
  --label-bg:#1a73e8;--label-color:#ffffff;
}
/* Material elevation overrides */
[data-style="material"] .kpi-card{box-shadow:0 1px 2px rgba(0,0,0,0.3),0 1px 3px 1px rgba(0,0,0,0.15);border:none}
[data-style="material"][data-mode="light"] .kpi-card{box-shadow:0 1px 2px rgba(0,0,0,0.12),0 1px 3px 1px rgba(0,0,0,0.08);border:none}
[data-style="material"] .topnav{border-bottom:none;box-shadow:0 1px 2px rgba(0,0,0,0.3)}
[data-style="material"][data-mode="light"] .topnav{box-shadow:0 1px 2px rgba(0,0,0,0.08)}
[data-style="material"] .nav-group-tab.active{background:rgba(138,180,248,0.12);border-radius:20px;border-bottom:none}
[data-style="material"][data-mode="light"] .nav-group-tab.active{background:rgba(26,115,232,0.08);border-radius:20px;border-bottom:none}

/* ═══ PORCELAIN — Apple / Vercel Minimal ═════════════════ */
[data-style="porcelain"]{
  --radius:12px;--radius-sm:8px;--radius-xs:6px;--radius-table:8px;--radius-badge:20px;
  --topnav-h:48px;--gap:16px;--pad:20px;
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;
  --font-mono:'SF Mono','JetBrains Mono',monospace;
  --transition:0.2s ease;
  --bg:#0a0a0a;--card:#141414;--border:rgba(88,86,214,0.08);--surface:#1c1c1e;
  --dropdown-bg:#1c1c1e;--dropdown-border:rgba(88,86,214,0.12);
  --text:#f5f5f7;--text2:#a1a1a6;--text3:#636366;
  --accent:#5856D6;--accent-color:#5856D6;--accent-hover:#7876E0;
  --accent-muted:rgba(88,86,214,0.08);--accent-dim:rgba(88,86,214,0.05);--accent-glow:rgba(88,86,214,0.12);
  --success:#30d158;--warning:#ff9f0a;--error:#ff453a;
  --sidebar-bg:#0a0a0a;--sidebar-text:#f5f5f7;
  --divider:rgba(88,86,214,0.06);
  --label-bg:#5856D6;--label-color:#ffffff;
}
[data-style="porcelain"][data-mode="light"]{
  --bg:#ffffff;--card:#ffffff;--border:rgba(0,0,0,0.06);--surface:#f5f5f7;
  --dropdown-bg:#ffffff;--dropdown-border:rgba(0,0,0,0.08);
  --text:#1d1d1f;--text2:#6e6e73;--text3:#aeaeb2;
  --accent:#5856D6;--accent-color:#5856D6;--accent-hover:#4744B8;
  --accent-muted:rgba(88,86,214,0.06);--accent-dim:rgba(88,86,214,0.04);--accent-glow:rgba(88,86,214,0.10);
  --success:#34C759;--warning:#FF9500;--error:#FF3B30;
  --sidebar-bg:#ffffff;--sidebar-text:#1d1d1f;
  --divider:rgba(0,0,0,0.04);
  --label-bg:#5856D6;--label-color:#ffffff;
}
[data-style="porcelain"][data-mode="silver"]{
  --bg:#f2f2f7;--card:#ffffff;--border:rgba(0,0,0,0.06);--surface:#e5e5ea;
  --dropdown-bg:#ffffff;--dropdown-border:rgba(0,0,0,0.08);
  --text:#1d1d1f;--text2:#6e6e73;--text3:#aeaeb2;
  --accent:#5856D6;--accent-color:#5856D6;--accent-hover:#4744B8;
  --accent-muted:rgba(88,86,214,0.06);--accent-dim:rgba(88,86,214,0.04);--accent-glow:rgba(88,86,214,0.10);
  --success:#34C759;--warning:#FF9500;--error:#FF3B30;
  --sidebar-bg:#f2f2f7;--sidebar-text:#1d1d1f;
  --divider:rgba(0,0,0,0.04);
  --label-bg:#5856D6;--label-color:#ffffff;
}
/* Porcelain: hairline borders, airy shadows */
[data-style="porcelain"] .kpi-card{border:none;box-shadow:0 0 0 0.5px rgba(0,0,0,0.04),0 2px 8px rgba(0,0,0,0.04)}
[data-style="porcelain"][data-mode="light"] .kpi-card{box-shadow:0 0 0 0.5px rgba(0,0,0,0.04),0 2px 8px rgba(0,0,0,0.04)}
[data-style="porcelain"] .nav-group-tab.active{background:var(--accent);color:#fff;border-radius:20px;border-bottom:none}
[data-style="porcelain"] .topnav{border-bottom:0.5px solid var(--border)}
[data-style="porcelain"] .modal{border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,0.12)}
[data-style="porcelain"] .tbl tr{border-bottom:none}
[data-style="porcelain"][data-mode="light"] .tbl tr:nth-child(even) td{background:#fafafa}

/* ═══ NEXUS — Google × Apple Hybrid ══════════════════════ */
[data-style="nexus"]{
  --radius:12px;--radius-sm:8px;--radius-xs:6px;--radius-table:6px;--radius-badge:16px;
  --topnav-h:50px;--gap:12px;--pad:16px;
  --font:system-ui,-apple-system,'Segoe UI','Roboto',sans-serif;
  --font-display:'Google Sans','Inter',system-ui,sans-serif;
  --font-mono:'SF Mono','JetBrains Mono',monospace;
  --transition:0.2s ease;
  --bg:#1f1f1f;--card:#2d2d2d;--border:rgba(138,180,248,0.08);--surface:#383838;
  --dropdown-bg:#2d2d2d;--dropdown-border:rgba(138,180,248,0.12);
  --text:#e8eaed;--text2:#9aa0a6;--text3:#5f6368;
  --accent:#8ab4f8;--accent-color:#8ab4f8;--accent-hover:#aecbfa;
  --accent-muted:rgba(138,180,248,0.06);--accent-dim:rgba(138,180,248,0.04);--accent-glow:rgba(138,180,248,0.10);
  --success:#81c995;--warning:#fdd663;--error:#f28b82;
  --sidebar-bg:#1f1f1f;--sidebar-text:#e8eaed;
  --divider:rgba(138,180,248,0.05);
  --label-bg:#8ab4f8;--label-color:#1f1f1f;
}
[data-style="nexus"][data-mode="light"]{
  --bg:#f8f9fa;--card:#ffffff;--border:rgba(0,0,0,0.06);--surface:#f1f3f4;
  --dropdown-bg:#ffffff;--dropdown-border:rgba(0,0,0,0.08);
  --text:#202124;--text2:#5f6368;--text3:#9aa0a6;
  --accent:#1a73e8;--accent-color:#1a73e8;--accent-hover:#1557b0;
  --accent-muted:rgba(26,115,232,0.05);--accent-dim:rgba(26,115,232,0.03);--accent-glow:rgba(26,115,232,0.08);
  --success:#34a853;--warning:#f9ab00;--error:#ea4335;
  --sidebar-bg:#f8f9fa;--sidebar-text:#202124;
  --divider:rgba(0,0,0,0.04);
  --label-bg:#1a73e8;--label-color:#ffffff;
}
[data-style="nexus"][data-mode="silver"]{
  --bg:#e8eaed;--card:#f1f3f4;--border:rgba(26,115,232,0.10);--surface:#dadce0;
  --dropdown-bg:#f1f3f4;--dropdown-border:rgba(26,115,232,0.12);
  --text:#202124;--text2:#5f6368;--text3:#80868b;
  --accent:#1a73e8;--accent-color:#1a73e8;--accent-hover:#1557b0;
  --accent-muted:rgba(26,115,232,0.06);--accent-dim:rgba(26,115,232,0.04);--accent-glow:rgba(26,115,232,0.10);
  --success:#34a853;--warning:#f9ab00;--error:#ea4335;
  --sidebar-bg:#e8eaed;--sidebar-text:#202124;
  --divider:rgba(26,115,232,0.06);
  --label-bg:#1a73e8;--label-color:#ffffff;
}
/* Nexus: Google elevation + Apple polish */
[data-style="nexus"] .kpi-card{border:none;box-shadow:0 1px 2px rgba(0,0,0,0.2),0 1px 3px 1px rgba(0,0,0,0.1)}
[data-style="nexus"][data-mode="light"] .kpi-card{box-shadow:0 1px 2px rgba(0,0,0,0.08),0 0 0 0.5px rgba(0,0,0,0.04)}
[data-style="nexus"] .nav-group-tab.active{background:rgba(138,180,248,0.10);border-radius:20px;border-bottom:none;font-weight:600}
[data-style="nexus"][data-mode="light"] .nav-group-tab.active{background:rgba(26,115,232,0.06);border-radius:20px;border-bottom:none;font-weight:600}
[data-style="nexus"] .topnav{border-bottom:0.5px solid var(--border);box-shadow:0 1px 2px rgba(0,0,0,0.15)}
[data-style="nexus"][data-mode="light"] .topnav{box-shadow:0 1px 2px rgba(0,0,0,0.06)}
[data-style="nexus"] .modal{border-radius:16px}

/* ═══ CARTOGRAPHY — Swiss Design / Maritime Heritage ═════ */
[data-style="cartography"]{
  --radius:0px;--radius-sm:0px;--radius-xs:0px;--radius-table:0px;--radius-badge:0px;
  --topnav-h:52px;--gap:16px;--pad:18px;
  --font:'Source Serif 4','Georgia',serif;
  --font-display:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --transition:0.15s ease;
  --bg:#1a1a2e;--card:#222240;--border:rgba(200,180,140,0.10);--surface:#2a2a4a;
  --dropdown-bg:#222240;--dropdown-border:rgba(200,180,140,0.15);
  --text:#e2ddd3;--text2:#9b9584;--text3:#5c5848;
  --accent:#c8b48c;--accent-color:#c8b48c;--accent-hover:#dbc99f;
  --accent-muted:rgba(200,180,140,0.08);--accent-dim:rgba(200,180,140,0.05);--accent-glow:rgba(200,180,140,0.12);
  --success:#6dba5a;--warning:#c8a030;--error:#c44040;
  --sidebar-bg:#1a1a2e;--sidebar-text:#e2ddd3;
  --divider:rgba(200,180,140,0.08);
  --label-bg:#c8b48c;--label-color:#1a1a2e;
}
[data-style="cartography"][data-mode="light"]{
  --bg:#f4f1eb;--card:#f4f1eb;--border:rgba(30,41,59,0.12);--surface:#eae5db;
  --dropdown-bg:#f4f1eb;--dropdown-border:rgba(30,41,59,0.15);
  --text:#1e293b;--text2:#475569;--text3:#94a3b8;
  --accent:#1e3a5f;--accent-color:#1e3a5f;--accent-hover:#152c49;
  --accent-muted:rgba(30,58,95,0.06);--accent-dim:rgba(30,58,95,0.04);--accent-glow:rgba(30,58,95,0.10);
  --success:#166534;--warning:#854d0e;--error:#991b1b;
  --sidebar-bg:#f4f1eb;--sidebar-text:#1e293b;
  --divider:rgba(30,41,59,0.08);
  --label-bg:#1e3a5f;--label-color:#f4f1eb;
}
[data-style="cartography"][data-mode="silver"]{
  --bg:#e8e4de;--card:#f0ece6;--border:rgba(30,41,59,0.15);--surface:#dbd6ce;
  --dropdown-bg:#f0ece6;--dropdown-border:rgba(30,41,59,0.18);
  --text:#1e293b;--text2:#475569;--text3:#94a3b8;
  --accent:#1e3a5f;--accent-color:#1e3a5f;--accent-hover:#152c49;
  --accent-muted:rgba(30,58,95,0.08);--accent-dim:rgba(30,58,95,0.05);--accent-glow:rgba(30,58,95,0.12);
  --success:#166534;--warning:#854d0e;--error:#991b1b;
  --sidebar-bg:#e8e4de;--sidebar-text:#1e293b;
  --divider:rgba(30,41,59,0.10);
  --label-bg:#1e3a5f;--label-color:#f4f1eb;
}
/* Cartography: no shadows, ruled lines, serif elegance */
[data-style="cartography"] .kpi-card{border:none;border-bottom:1px solid var(--border);box-shadow:none;border-radius:0}
[data-style="cartography"] .kpi-value{font-family:'Source Serif 4','Georgia',serif;font-weight:300;font-size:28px}
[data-style="cartography"] .topnav{border-bottom:2px solid var(--text);background:var(--bg)}
[data-style="cartography"] .nav-group-tab.active{border-bottom:none;font-weight:700}
[data-style="cartography"] .nav-group-tab.active::after{content:'';display:inline-block;width:4px;height:4px;background:var(--error);margin-left:4px;vertical-align:middle}
[data-style="cartography"] .modal{border-radius:0;border-top:4px solid var(--accent);box-shadow:none;border:1px solid var(--border)}
[data-style="cartography"] .tbl th{font-family:'Inter',system-ui,sans-serif;font-size:9px;letter-spacing:0.15em;text-transform:uppercase}
[data-style="cartography"] .tbl td{border-bottom:1px solid var(--divider)}
[data-style="cartography"] .tbl tr:hover td{background:transparent;text-decoration:underline}
[data-style="cartography"] .brand-text{font-weight:100;letter-spacing:0.4em;font-size:16px}

/* ═══ Shared Pharos UI — applies to all themes ═══════════ */
.topnav{background:var(--bg);border-bottom:1px solid var(--border)}
.topnav-group-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.topnav-brand-text{font-weight:200;letter-spacing:0.2em;font-size:15px}
.card{border-left:2px solid var(--accent-dim)}
.card:hover{border-left-color:var(--accent)}
.kpi-card.highlight{border-color:var(--accent);box-shadow:0 0 16px var(--accent-glow)}
.inner-tabs{padding:0;background:none;border-radius:0;width:auto;border:none}
.inner-tab{border-radius:var(--radius-badge);border:1px solid var(--border);background:transparent}
.inner-tab.active{background:var(--accent);color:var(--bg);border-color:var(--accent);box-shadow:none}
.section-title{color:var(--accent)}

/* ── Ink & Paper: serif display font for headings ── */
[data-style="ink"] .section-title,[data-style="ink"] .topnav-brand-text{font-family:var(--font-display)}

html{font-size:14px}
html[data-style] *,html[data-mode] *{transition:background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.5;min-height:100vh;font-variant-numeric:tabular-nums}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
input,select,textarea,button{font-family:inherit;font-size:inherit}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}

/* ── Layout ─────────────────────────────────────────────── */
.app{display:flex;flex-direction:column;min-height:100vh}
/* Sidebar hidden — replaced by topnav */
.sidebar{display:none}
.sidebar-header,.sidebar-nav,.sidebar-nav-footer,.sidebar-footer,.sidebar-logo,.sidebar-brand{display:none}
.nav-section,.nav-section-label{display:none}

/* ── Top Navigation Bar ──────────────────────────────────── */
.topnav{
  position:sticky;top:0;z-index:1000;min-height:var(--topnav-h);
  background:var(--sidebar-bg);color:var(--sidebar-text);
  display:flex;align-items:stretch;padding:0 16px;gap:0;
  border-bottom:1px solid var(--border);
  user-select:none;overflow:visible;flex-shrink:0;width:100%;
}
.topnav-brand{display:flex;align-items:center;gap:10px;margin-right:20px;flex-shrink:0;align-self:center}
.topnav-logo{width:28px;height:28px;background:var(--accent);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:var(--bg);flex-shrink:0}
.topnav-brand-text{font-size:14px;font-weight:600;letter-spacing:0.06em;color:var(--sidebar-text)}
.topnav-groups{display:flex;flex-direction:column;flex:1;overflow:visible;border-bottom:1px solid var(--border);padding-bottom:4px}
.nav-tabs-row{display:flex;justify-content:center;gap:2px;padding:0 4px;overflow-x:auto;scrollbar-width:none}
.nav-tabs-row::-webkit-scrollbar{display:none}
.topnav-group{position:relative;transition:transform .15s}
/* ── Nav Tab Drag & Drop ──────────────────── */
.topnav-group.nav-dragging{opacity:0.2;transform:scale(0.95)}
.nav-drag-ghost{position:fixed;pointer-events:none;z-index:400;opacity:0.92;
  background:var(--sidebar-bg);border-radius:var(--radius-sm);
  box-shadow:0 8px 28px rgba(0,0,0,0.35);transform:rotate(0.5deg);padding:0;overflow:hidden}
.nav-drop-marker{width:3px;background:var(--accent);border-radius:2px;align-self:stretch;
  margin:0 -1px;box-shadow:0 0 6px var(--accent);min-height:24px;flex-shrink:0}
.topnav-group-btn{
  display:flex;align-items:center;gap:4px;padding:6px 8px;
  border:none;background:transparent;color:var(--sidebar-text);
  font-size:11px;font-weight:500;cursor:pointer;border-radius:var(--radius-sm);
  transition:all var(--transition);white-space:nowrap;font-family:var(--font);
  border-bottom:2px solid transparent;flex-shrink:0;
}
.topnav-group-btn:hover{background:rgba(255,255,255,0.08)}
.topnav-group-btn.active{color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:6px}
.topnav-group-btn .nav-icon{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center}
.topnav-group-btn .nav-icon svg{width:12px;height:12px;color:currentColor}
.topnav-group-btn .topnav-chevron{font-size:11px;opacity:0.7;margin-left:4px;padding:6px 8px;cursor:pointer;transition:transform 0.2s;border-radius:var(--radius-xs)}
.topnav-group-btn .topnav-chevron:hover{opacity:1;background:rgba(128,128,128,0.15)}
.topnav-group.open .topnav-group-btn .topnav-chevron{transform:rotate(180deg)}

/* ── 4-Mode Hierarchy: Parent + Child tab rows ──────────── */
.nav-parent-tabs{
  display:flex;gap:2px;padding:0 16px;
  border-bottom:1px solid var(--border);align-items:center;
}
.nav-parent-tab{
  padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;
  border:none;background:transparent;color:var(--text2);
  border-bottom:2px solid transparent;transition:all var(--transition);
  font-family:var(--font);white-space:nowrap;
}
.nav-parent-tab:hover{color:var(--text1);background:rgba(128,128,128,0.08)}
.nav-parent-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.nav-parent-tab.nav-gear{
  margin-left:auto;padding:6px 10px;opacity:0.6;
}
.nav-parent-tab.nav-gear:hover{opacity:1}
.nav-parent-tab.nav-gear svg{display:block}

.nav-child-tabs{
  display:flex;gap:2px;padding:4px 16px;
  background:var(--card);
}
.nav-child-tab{
  padding:4px 12px;font-size:11px;cursor:pointer;
  border:none;background:transparent;color:var(--text3);
  border-radius:var(--radius-sm);transition:all var(--transition);
  font-family:var(--font);white-space:nowrap;font-weight:500;
}
.nav-child-tab:hover{color:var(--text1);background:rgba(128,128,128,0.08)}
.nav-child-tab.active{background:color-mix(in srgb, var(--accent) 15%, transparent);color:var(--accent)}
/* Dropdown — uses bg so it's always opaque, even for transparent-card styles */
.topnav-dropdown{
  display:none;position:absolute;top:100%;left:0;
  min-width:160px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,0.35);
  padding:4px;z-index:200;margin-top:2px;
}
.topnav-group.open .topnav-dropdown{display:block}
.topnav-dd-item{
  display:block;width:100%;padding:8px 14px;border:none;background:transparent;
  color:var(--text);font-size:12px;cursor:pointer;border-radius:var(--radius-xs);
  transition:all var(--transition);text-align:left;font-family:var(--font);
}
.topnav-dd-item:hover{background:var(--surface);color:var(--accent)}
.topnav-dd-item.active{color:var(--accent);font-weight:600;background:rgba(56,132,244,0.18);opacity:1}
/* Right section */
.topnav-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.topnav-icon-btn{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border:none;background:transparent;
  color:var(--sidebar-text);cursor:pointer;border-radius:var(--radius-sm);
  transition:all var(--transition);opacity:0.7;
}
.topnav-icon-btn:hover{background:rgba(255,255,255,0.08);opacity:1}
.topnav-icon-btn.active{color:var(--accent);opacity:1}
.topnav-icon-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3}
.topnav-status{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--sidebar-text);opacity:0.6}
.topnav-status .status-dot{width:6px;height:6px}
/* Style/Mode picker in topnav dropdown */
.topnav-theme-dropdown{
  display:none;position:absolute;top:100%;right:0;
  min-width:220px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,0.35);
  padding:14px;z-index:200;margin-top:2px;
}
[data-mode="light"] .topnav-theme-dropdown{box-shadow:0 8px 24px rgba(0,0,0,0.12);border-color:rgba(0,0,0,0.12)}
.topnav-theme-dropdown.open{display:block}
/* ── Style picker label ── */
.style-picker-label{
  font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--text3);margin-bottom:8px;
}
/* ── Style buttons ── */
.style-picker{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}
.style-btn{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border:1px solid transparent;border-radius:var(--radius-sm);
  background:transparent;color:var(--text);cursor:pointer;
  font-size:12px;font-weight:600;font-family:var(--font);
  transition:all 0.15s ease;text-align:left;width:100%;
}
.style-btn:hover{background:var(--surface);color:var(--text);border-color:var(--border)}
.style-btn.active{background:var(--accent-muted);color:var(--text);border-color:var(--accent-color,var(--accent))}
.style-btn .style-swatch{
  width:14px;height:14px;border-radius:2px;flex-shrink:0;
  border:1px solid rgba(128,128,128,0.3);
}
.style-btn .style-name{flex:1}
/* ── Mode toggle ── */
.mode-toggle-wrap{
  display:flex;gap:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;
}
.mode-btn{
  flex:1;padding:6px 0;border:none;background:transparent;color:var(--text3);
  cursor:pointer;font-size:11px;font-weight:500;font-family:var(--font);
  transition:all 0.15s ease;text-align:center;
}
.mode-btn+.mode-btn{border-left:1px solid var(--border)}
.mode-btn:hover{color:var(--text)}
.mode-btn.active{background:var(--accent-muted);color:var(--text)}

.main{margin-left:0;flex:1;min-height:0;display:flex;flex-direction:column;overflow-x:auto;overflow-y:auto}
.topbar{display:none}
.topbar-title{font-size:16px;font-weight:600}
.topbar-right{display:flex;align-items:center;gap:16px}
.topbar-status{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2)}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--success);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.hamburger{display:none;background:none;border:none;color:var(--text);font-size:20px;cursor:pointer;padding:4px}

.content{flex:1;padding:4px 6px 6px;max-width:none;width:100%;margin:0 auto;overflow-x:auto}
.tab-content{display:none;overflow:visible}
.tab-content.active{display:block}
#tab-overview.active{display:flex}
.subtab-bar{display:flex;gap:4px;padding:2px 0 4px;border-bottom:1px solid var(--border);margin-bottom:3px}
.subtab-pill{padding:4px 12px;border-radius:var(--radius-badge);font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text2);transition:all var(--transition);white-space:nowrap}
.subtab-pill:hover{border-color:var(--accent);color:var(--text1)}
.subtab-pill.active{background:var(--accent);color:var(--bg);border-color:var(--accent)}

/* ── Cards ──────────────────────────────────────────────── */
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--pad);transition:border-color var(--transition);
}
.card:hover{border-color:var(--accent);opacity:0.9}
.card-title{font-size:12px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.card-title .badge{font-size:11px;padding:2px 8px;border-radius:var(--radius-badge);background:var(--surface);color:var(--text2);text-transform:none;letter-spacing:0}

/* ── KPI Cards ──────────────────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:var(--gap)}
.kpi-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:10px 12px;transition:all var(--transition);
}
.kpi-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.kpi-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:4px}
.kpi-value{font-family:var(--font-mono);font-size:22px;font-weight:700;letter-spacing:-0.5px;line-height:1.1}
.kpi-change{font-size:11px;margin-top:4px;display:flex;align-items:center;gap:4px}
#tab-overview .card-title{margin-bottom:6px}
#overviewKpis .kpi-card{padding:5px 10px}
#overviewKpis .kpi-label{margin-bottom:1px;font-size:9px}
#overviewKpis .kpi-value{font-size:16px;letter-spacing:-0.4px}
#overviewKpis .kpi-change{margin-top:1px;font-size:9px}
/* ── Overview 2×2 tile grid ──────────────────────────────
   --ov-chrome: nav(46) + subtabs(33) + kpis(76) + margins/gaps(~15) = ~170px
   Each row gets exactly half the remaining height */
#tab-overview{--ov-row-h:calc((100vh - 170px) / 2)}
#tab-overview .ov-row{height:var(--ov-row-h);min-height:0;max-height:var(--ov-row-h);overflow:hidden}
.kpi-change.up{color:var(--success)}
.kpi-change.down{color:var(--error)}

/* ── Voyage Status Cards (linear layout) ──────────────── */
.voy-status-grid{display:flex;flex-direction:column;gap:4px}
.voy-status-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:8px 12px 8px 16px;cursor:pointer;transition:all var(--transition);
  display:flex;align-items:center;gap:12px;position:relative;
}
.voy-status-card:hover{border-color:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,0.06)}
.voy-status-indicator{width:4px;border-radius:var(--radius) 0 0 var(--radius);position:absolute;left:0;top:0;bottom:0}
.voy-status-card[data-status="at_sea"] .voy-status-indicator,
.voy-status-card[data-status="commenced"] .voy-status-indicator{background:var(--info)}
.voy-status-card[data-status="loading"] .voy-status-indicator{background:var(--warning)}
.voy-status-card[data-status="discharging"] .voy-status-indicator{background:var(--warning)}
.voy-status-card[data-status="completed"] .voy-status-indicator{background:var(--success)}
.voy-status-card[data-status="pending"] .voy-status-indicator{background:var(--text3)}
/* Inline sections */
.vsc-vessel{font-weight:700;font-size:12px;color:var(--text1);white-space:nowrap;min-width:110px;overflow:hidden;text-overflow:ellipsis}
.vsc-code{font-family:var(--font-mono);font-size:10px;color:var(--text3);padding:1px 5px;background:var(--surface);border-radius:var(--radius-xs);white-space:nowrap}
.vsc-seg-badge{font-size:9px;padding:1px 6px;border-radius:var(--radius-badge);background:var(--surface);color:var(--text3);white-space:nowrap;font-weight:500}
.vsc-route{font-size:11px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:100px;max-width:200px}
.vsc-sep{color:var(--border);font-size:10px;user-select:none}
.vsc-cp-party{font-size:11px;font-weight:600;color:var(--text);white-space:nowrap}
.vsc-cp-broker{font-size:11px;color:var(--text3);white-space:nowrap}
.vsc-cp-broker::before{content:'via ';color:var(--text3)}
.vsc-cp-freight{font-family:var(--font-mono);font-size:10px;color:var(--accent-color);font-weight:500;white-space:nowrap}
.vsc-chip{font-size:10px;padding:2px 7px;border-radius:var(--radius-badge);background:var(--surface);color:var(--text2);white-space:nowrap}
.vsc-laycan-active{border:1px solid var(--success) !important;color:var(--success) !important;font-weight:500}
.vsc-laycan-expired{border:1px solid var(--error) !important;color:var(--error) !important;font-weight:500;opacity:0.7}
.vsc-laycan-upcoming{color:var(--text2) !important}
.vsc-spacer{flex:1}
.vsc-badge-wrap{display:flex;align-items:center;gap:6px;margin-left:auto}
.vsc-tce{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--success);white-space:nowrap}
.vsc-tce.negative{color:var(--error)}
/* Fleet filters bar */
.fleet-filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.fleet-filter-bar select{font-size:11px;padding:3px 8px;border:1px solid var(--border);border-radius:var(--radius-badge);background:var(--card);color:var(--text1);cursor:pointer}
.fleet-filter-bar .fleet-count{font-size:11px;color:var(--text3);margin-left:auto}
/* ── Ops inline alerts ────────────────────────────────── */
.ops-alert-strip{display:flex;gap:8px;flex-wrap:wrap}
.ops-alert-chip{font-size:11px;padding:5px 12px;border-radius:var(--radius);display:flex;align-items:center;gap:6px;cursor:pointer;transition:all var(--transition);border:1px solid}
.ops-alert-chip.alert-demurrage{background:rgba(255,69,58,0.08);border-color:rgba(255,69,58,0.3);color:#FF453A}
.ops-alert-chip.alert-laycan{background:rgba(255,214,10,0.08);border-color:rgba(255,214,10,0.3);color:#FFD60A}
.ops-alert-chip.alert-completed{background:rgba(48,209,88,0.08);border-color:rgba(48,209,88,0.3);color:#30D158}
.ops-alert-chip:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,0.1)}
.voy-alert-icon{font-size:13px;margin-left:4px;cursor:help}
.voy-alert-detail{font-size:10px;color:var(--error);font-weight:600;white-space:nowrap}
/* Toggle button */
.view-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:11px;color:var(--text3);padding:3px 8px;border-radius:var(--radius-badge);border:1px solid var(--border);background:transparent;transition:all var(--transition)}
.view-toggle:hover{border-color:var(--accent);color:var(--text1)}
.view-toggle svg{width:14px;height:14px}
/* ── Fleet Roster table ──────────────────────────────── */
.fleet-roster{width:100%;border-collapse:separate;border-spacing:0 2px}
.fleet-roster.pnl-voy-tbl,.fleet-roster.pnl-ffa-tbl{table-layout:fixed;font-size:11px}
.pnl-voy-tbl td,.pnl-ffa-tbl td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pnl-voy-tbl td.num,.pnl-ffa-tbl td.num,.pnl-voy-tbl th.num,.pnl-ffa-tbl th.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;padding-right:14px}
.fleet-roster th{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;padding:6px 10px;text-align:left;font-weight:600;border-bottom:1px solid var(--border)}
.fleet-roster th.num{text-align:right}
th[data-sort-dir]{color:var(--accent) !important}
.sort-ind{font-size:8px;opacity:.6;margin-left:2px}
/* ── Global Search Overlay ── */
.search-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);z-index:10001;display:none;justify-content:center;padding-top:15vh}
.search-overlay[style*="display:flex"],.search-overlay.open{display:flex}
.search-modal{width:100%;max-width:560px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg,12px);box-shadow:0 20px 60px rgba(0,0,0,.6);max-height:70vh;display:flex;flex-direction:column;animation:modalIn .15s ease}
.search-input-wrap{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.search-icon{color:var(--text3);flex-shrink:0}
.search-input-wrap input{flex:1;background:transparent;border:none;outline:none;color:var(--text1);font-size:15px;font-family:var(--font-sans)}
.search-input-wrap input::placeholder{color:var(--text3)}
.search-kbd{font-size:10px;color:var(--text3);background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:2px 6px;font-family:var(--font-mono)}
.search-results{overflow-y:auto;padding:6px}
.search-result-group{padding:8px 12px 4px;font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}
.search-result-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:background .1s}
.search-result-item:hover,.search-result-item.active{background:var(--surface)}
.sr-name{font-size:13px;color:var(--text1);font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-detail{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.sr-type{font-size:9px;color:var(--accent);background:rgba(var(--accent-rgb,224,201,127),.12);padding:2px 6px;border-radius:3px;font-weight:600;text-transform:uppercase;white-space:nowrap}
.search-empty{padding:24px;text-align:center;color:var(--text3);font-size:13px}
/* ── Undo Toast ── */
.toast-undo{min-width:280px}
.undo-link{text-decoration:underline;cursor:pointer;font-weight:600;margin-left:8px}
.undo-link:hover{opacity:.8}
.fleet-roster td{font-size:12px;padding:8px 10px;background:var(--card);border-top:1px solid var(--border);border-bottom:1px solid var(--border);transition:all var(--transition)}
.fleet-roster td:first-child{border-left:4px solid transparent;border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.fleet-roster td:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.fleet-roster tr.vessel-employed td:first-child{border-left-color:var(--info)}
.fleet-roster tr.vessel-employed[data-status="loading"] td:first-child{border-left-color:var(--warning)}
.fleet-roster tr.vessel-employed[data-status="discharging"] td:first-child{border-left-color:var(--warning)}
.fleet-roster tr.vessel-employed[data-status="completed"] td:first-child{border-left-color:var(--success)}
.fleet-roster tr.vessel-employed[data-status="pending"] td:first-child{border-left-color:#BF5AF2}
.fleet-roster tr.vessel-open td{opacity:0.55}
.fleet-roster tr.vessel-open:hover td{opacity:1}
.fleet-roster tr.vessel-open td:first-child{border-left-color:var(--text3)}
.fleet-roster tbody tr{cursor:pointer}
.fleet-roster tbody tr:hover td{border-color:var(--accent);background:var(--surface1)}
.fleet-roster .fr-vessel-name{font-weight:700;color:var(--text1);white-space:nowrap}
.fleet-roster .fr-seg{font-size:10px;padding:1px 6px;border-radius:var(--radius-badge);background:var(--surface);color:var(--text3);font-weight:500;white-space:nowrap}
.fleet-roster .fr-dwt{font-family:var(--font-mono);font-size:11px;color:var(--text2);text-align:right;white-space:nowrap}
.fleet-roster .fr-flag{font-size:11px;color:var(--text2);white-space:nowrap}
.fleet-roster .fr-route{font-size:11px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.fleet-roster .fr-tce{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--success);text-align:right;white-space:nowrap}
.fleet-roster .fr-tce.negative{color:var(--error)}
.fleet-roster .fr-open-badge{font-size:9px;padding:2px 8px;border-radius:var(--radius-badge);background:var(--surface);color:var(--text3);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
/* Fleet voy section toggle */
.fleet-voy-toggle{cursor:pointer;user-select:none}
.fleet-voy-toggle .toggle-icon{display:inline-block;transition:transform .2s;font-size:10px;margin-left:6px}
.fleet-voy-toggle.collapsed .toggle-icon{transform:rotate(-90deg)}

/* ── Fleet Positions table ─────────────────────────────── */
.pos-tbl th{font-size:10px;text-transform:uppercase;letter-spacing:.04em;padding:6px 8px}
.pos-tbl td{padding:5px 8px;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rob-grade{display:inline-block;padding:1px 5px;margin:1px 2px;border-radius:3px;font-size:10px;background:var(--surface);border:1px solid var(--border);white-space:nowrap}
.rob-grade b{color:var(--text1);font-weight:700}

/* ── Fleet Position Cards ──────────────────────────────── */
.pos-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
.pos-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:12px 14px 12px 18px;cursor:pointer;transition:all var(--transition);
  position:relative;display:flex;flex-direction:column;gap:6px;
}
.pos-card:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.pos-card .pos-indicator{width:4px;border-radius:var(--radius) 0 0 var(--radius);position:absolute;left:0;top:0;bottom:0}
.pos-card[data-status="at_sea"] .pos-indicator,.pos-card[data-status="commenced"] .pos-indicator{background:var(--info)}
.pos-card[data-status="loading"] .pos-indicator{background:var(--warning)}
.pos-card[data-status="discharging"] .pos-indicator{background:var(--warning)}
.pos-card[data-status="completed"] .pos-indicator{background:var(--success)}
.pos-card[data-status="pending"] .pos-indicator{background:var(--text3)}
.pos-card[data-status="idle"] .pos-indicator{background:var(--border)}
.pos-card .pos-hdr{display:flex;align-items:center;gap:8px;min-width:0}
.pos-card .pos-vname{font-weight:700;font-size:13px;color:var(--text1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos-card .pos-imo{font-family:var(--font-mono);font-size:10px;color:var(--text3);padding:1px 5px;background:var(--surface);border-radius:var(--radius-xs);flex-shrink:0}
.pos-card .pos-seg{font-size:10px;color:var(--text3);margin-left:auto;flex-shrink:0}
.pos-card .pos-route{font-size:11px;color:var(--text2);display:flex;align-items:center;gap:6px}
.pos-card .pos-route .arrow{color:var(--text3)}
.pos-card .pos-meta{display:flex;gap:6px;flex-wrap:wrap}
.pos-card .pos-chip{font-size:10px;padding:2px 8px;border-radius:var(--radius-badge);background:var(--surface);color:var(--text2);white-space:nowrap}
.pos-card .pos-rob-row{display:flex;gap:4px;flex-wrap:wrap}
.pos-card .pos-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.pos-card .pos-eta{font-family:var(--font-mono);font-size:11px;color:var(--text2)}
.pos-card .pos-status-badge{font-size:10px;padding:2px 8px;border-radius:var(--radius-badge);color:var(--bg);font-weight:600}
.pos-card .pos-specs{display:flex;flex-direction:column;gap:3px;padding:4px 0}
.pos-card .pos-spec-row{display:flex;gap:8px}
.pos-card .pos-spec{flex:1;display:flex;justify-content:space-between;align-items:baseline;gap:4px;min-width:0}
.pos-card .pos-spec-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);white-space:nowrap}
.pos-card .pos-spec-val{font-size:11px;color:var(--text1);font-family:var(--font-mono);white-space:nowrap;text-align:right}

/* ── Voyage Timeline Bar (inside pos-card) ─────────────── */
.voy-timeline{position:relative;height:22px;margin:4px 0 2px;display:flex;align-items:center}
.voy-timeline .vtl-track{position:absolute;left:0;right:0;top:50%;height:3px;background:var(--border);border-radius:2px;transform:translateY(-50%)}
.voy-timeline .vtl-fill{position:absolute;left:0;top:50%;height:3px;border-radius:2px;transform:translateY(-50%);transition:width .3s ease}
.voy-timeline .vtl-nodes{position:relative;display:flex;justify-content:space-between;width:100%;z-index:1}
.voy-timeline .vtl-node{display:flex;flex-direction:column;align-items:center;gap:1px}
.voy-timeline .vtl-dot{width:8px;height:8px;border-radius:50%;border:2px solid var(--border);background:var(--card);transition:all .2s}
.voy-timeline .vtl-dot.done{background:var(--accent);border-color:var(--accent)}
.voy-timeline .vtl-dot.active{background:var(--bg);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
.voy-timeline .vtl-lbl{font-size:8px;color:var(--text3);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;margin-top:1px}
.voy-timeline .vtl-lbl.active{color:var(--accent);font-weight:700}
.voy-timeline .vtl-date{font-size:7px;color:var(--text3);font-family:var(--font-mono)}

/* ── Grid helpers ───────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--gap)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.grid-1-2{display:grid;grid-template-columns:1fr 2fr;gap:var(--gap)}
.grid-2-1{display:grid;grid-template-columns:2fr 1fr;gap:var(--gap)}
.stack{display:flex;flex-direction:column;gap:var(--gap)}

/* ── Tables ─────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:var(--radius-table)}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;line-height:1.3}
.tbl th{
  text-align:left;padding:10px 12px;font-weight:600;color:var(--text2);
  border-bottom:1px solid var(--border);font-size:11px;text-transform:uppercase;letter-spacing:0.06em;
  background:var(--bg);position:sticky;top:0;z-index:2;
}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--border)}
.tbl tr:hover td{background:var(--surface)}
.tbl tr:last-child td{border-bottom:none}
.tbl .num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ── Voyage Estimates table (compact) ──────────────────── */
#tab-estimates .tbl{font-size:11px}
#tab-estimates .tbl th{padding:6px 8px;font-size:10px}
#tab-estimates .tbl td{padding:5px 8px;font-size:11px;white-space:nowrap}
#snp-projects .tbl{font-size:11px}
#snp-projects .tbl th{padding:6px 8px;font-size:10px}
#snp-projects .tbl td{padding:5px 8px;font-size:11px;white-space:nowrap}

/* ── Forms ──────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.form-label{font-size:12px;font-weight:500;color:var(--text2);text-transform:uppercase;letter-spacing:0.3px}
.form-input,.form-select{
  background:transparent;border:none;border-bottom:1px solid var(--border);border-radius:0;
  padding:8px 4px 6px;color:var(--text);outline:none;transition:border-color 0.2s ease;
  width:100%;
}
.form-input:focus,.form-select:focus{border-bottom-color:var(--accent);box-shadow:none}
.form-input::placeholder{color:var(--text3);font-style:italic;font-weight:300}
.form-select,select.form-input{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%23a1a1a6'%3E%3Cpath d='M5 7L1 3h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;background-color:transparent;padding-right:18px}
.form-input-sm,.form-select-sm{font-size:11px;padding:2px 6px;width:auto}
/* Global underline for native date/time/number inputs */
input[type="date"].form-input,input[type="time"].form-input,input[type="number"].form-input{-webkit-appearance:none;appearance:none;-moz-appearance:textfield}
input[type="date"].form-input::-webkit-calendar-picker-indicator,input[type="time"].form-input::-webkit-calendar-picker-indicator{filter:invert(0.6);opacity:0.5;cursor:pointer}
input[type="date"].form-input::-webkit-calendar-picker-indicator:hover,input[type="time"].form-input::-webkit-calendar-picker-indicator:hover{opacity:0.8}
input[type="number"].form-input::-webkit-inner-spin-button,input[type="number"].form-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
textarea.form-input{resize:vertical;min-height:80px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px}
/* ── Port Picker: chip/tag + search ── */
.port-picker{border:none;border-bottom:1px solid var(--border);border-radius:0;background:transparent;padding:6px 4px;min-height:38px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;cursor:text;transition:border-color 0.2s ease}
.port-picker:focus-within{border-bottom-color:var(--accent)}
.port-chip{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:3px 8px;border-radius:var(--radius-badge);background:var(--accent);color:var(--bg);font-weight:500;white-space:nowrap;animation:modalIn .12s ease}
.port-chip-x{cursor:pointer;font-size:13px;line-height:1;opacity:.7;margin-left:2px;font-weight:700}
.port-chip-x:hover{opacity:1}
.port-picker-input{border:none;background:transparent;outline:none;color:var(--text);font-size:12px;flex:1 1 80px;min-width:80px;padding:2px 0}
.port-picker-input::placeholder{color:var(--text3)}
.port-picker-dropdown{position:absolute;top:100%;left:0;right:0;z-index:9999;background:var(--dropdown-bg,#1e1e22);border:1px solid var(--dropdown-border,rgba(255,255,255,0.12));border-radius:var(--radius-sm);max-height:280px;overflow-y:auto;display:none;box-shadow:0 8px 24px rgba(0,0,0,0.5)}
.port-picker-dropdown.show{display:block}
.port-picker-opt{padding:6px 10px;font-size:12px;cursor:pointer;color:var(--text);transition:background .12s}
.port-picker-opt:hover,.port-picker-opt.active{background:var(--accent-muted,rgba(255,255,255,0.08))}
.port-picker-opt small{color:var(--text3);margin-left:4px}
.port-picker-empty{padding:8px 10px;font-size:11px;color:var(--text3);font-style:italic}
/* ── Port Picker Autocomplete (ship forms) ── */
.port-picker-dd{position:absolute;top:100%;left:0;right:0;z-index:200;background:var(--dropdown-bg,var(--card));border:1px solid var(--border);border-radius:var(--radius-sm);max-height:220px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,0.45);margin-top:2px}
.port-picker-item{padding:8px 12px;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:background .1s}
.port-picker-item:hover{background:var(--accent-muted,rgba(255,255,255,0.08))}
.port-picker-item:first-child{border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.port-picker-item:last-child{border-radius:0 0 var(--radius-sm) var(--radius-sm)}
.pos-set-btn{cursor:pointer;font-size:12px;opacity:.5;transition:opacity .15s;vertical-align:middle}
.pos-set-btn:hover{opacity:1}
.rs-chip{font-size:10px;padding:2px 8px;border-radius:var(--radius-badge);background:var(--bg3);color:var(--text2);cursor:pointer;transition:all .15s;user-select:none}
.rs-chip:hover{background:var(--accent);color:var(--bg)}
.rs-chip-active{background:var(--accent);color:var(--bg)}

/* ── Overview: Drag & Drop Cards ──────────────── */
.ov-drag-card{position:relative;transition:transform .2s,opacity .2s;min-width:0}
.ov-drag-card .card-title[data-ov-drag-handle]{cursor:grab;user-select:none}
.ov-drag-card .card-title[data-ov-drag-handle]:active{cursor:grabbing}
.ov-drag-card.drag-ready>.card{outline:2px solid var(--accent);outline-offset:-2px;cursor:grabbing}
.ov-drag-card.dragging{opacity:0.2;transform:scale(0.97)}
.ov-drag-card.swap-highlight>.card{outline:2px dashed var(--accent);outline-offset:-2px}
.ov-drag-ghost{position:fixed;pointer-events:none;z-index:300;opacity:0.85;transform:rotate(0.5deg);box-shadow:0 12px 40px rgba(0,0,0,0.25);transition:none;border-radius:var(--radius);max-width:500px;overflow:hidden}

/* ── Time Picker (compact + dropdown) ─────────────────── */
.time-compact{display:inline-flex;align-items:center;justify-content:space-between;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;font-size:13px;color:var(--text);cursor:pointer;user-select:none;width:100%;transition:border-color var(--transition);font-variant-numeric:tabular-nums;font-weight:500}
.time-compact:hover{border-color:var(--accent)}
.time-compact.open{border-color:var(--accent);box-shadow:0 0 0 2px rgba(56,132,244,0.15)}
.time-compact svg{width:12px;height:12px;fill:none;stroke:var(--text3);stroke-width:1.5;flex-shrink:0}
.time-dropdown{position:fixed;min-width:120px;z-index:9999;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 16px rgba(0,0,0,0.4);display:none;padding:8px;animation:modalIn .15s ease}
.time-dropdown.active{display:block}
.time-manual-row{margin-bottom:6px}
.time-manual-input{width:100%;padding:5px 8px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--text);outline:none;font-family:inherit;letter-spacing:1px}
.time-manual-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(56,132,244,0.15)}
.time-cols-wrap{display:flex;gap:4px}
.time-col{flex:1;max-height:180px;overflow-y:auto;scroll-snap-type:y mandatory}
.time-col::-webkit-scrollbar{width:3px}
.time-col::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.time-col-label{font-size:9px;text-transform:uppercase;color:var(--text3);letter-spacing:0.5px;padding:0 4px 4px;font-weight:600;text-align:center;position:sticky;top:0;background:var(--bg);z-index:1}
.time-item{padding:4px 6px;text-align:center;font-size:12px;cursor:pointer;border-radius:var(--radius-xs);color:var(--text2);transition:all .1s;font-variant-numeric:tabular-nums;scroll-snap-align:center}
.time-item:hover{background:var(--surface);color:var(--text)}
.time-item.selected{background:var(--accent);color:var(--bg);font-weight:600}

/* ── Date Picker (compact + dropdown) ─────────────────── */
.date-compact{display:inline-flex;align-items:center;justify-content:space-between;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;font-size:13px;color:var(--text);cursor:pointer;user-select:none;width:100%;transition:border-color var(--transition);font-variant-numeric:tabular-nums;font-weight:500}
.date-compact:hover{border-color:var(--accent)}
.date-compact.open{border-color:var(--accent);box-shadow:0 0 0 2px rgba(56,132,244,0.15)}
.date-compact svg{width:12px;height:12px;fill:none;stroke:var(--text3);stroke-width:1.5;flex-shrink:0}
.date-dropdown{position:fixed;min-width:220px;z-index:9999;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 16px rgba(0,0,0,0.4);display:none;padding:8px;animation:modalIn .15s ease}
.date-dropdown.active{display:block}
.date-nav{display:flex;align-items:center;justify-content:space-between;padding:0 2px 6px;gap:4px}
.date-nav-btn{background:none;border:none;cursor:pointer;color:var(--text2);padding:2px 6px;border-radius:var(--radius-xs);font-size:14px;line-height:1;transition:all .1s}
.date-nav-btn:hover{background:var(--surface);color:var(--text)}
.date-nav-label{font-size:12px;font-weight:600;color:var(--text);user-select:none}
.date-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.date-dow{text-align:center;font-size:9px;color:var(--text3);font-weight:600;padding:2px 0;text-transform:uppercase}
.date-cell{text-align:center;font-size:12px;padding:4px 2px;cursor:pointer;border-radius:var(--radius-xs);color:var(--text2);transition:all .1s;font-variant-numeric:tabular-nums}
.date-cell:hover{background:var(--surface);color:var(--text)}
.date-cell.selected{background:var(--accent);color:var(--bg);font-weight:600}
.date-cell.today{box-shadow:inset 0 0 0 1px var(--accent)}
.date-cell.outside{color:var(--text3);opacity:0.4;cursor:default}
.date-cell.outside:hover{background:none;color:var(--text3)}
.date-ym-picker{padding:4px 0}
.date-ym-section{margin-bottom:6px}
.date-ym-label{font-size:9px;text-transform:uppercase;color:var(--text3);letter-spacing:0.5px;padding:0 4px 4px;font-weight:600}
.date-ym-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:0 2px}
.date-ym-item{padding:5px 4px;text-align:center;font-size:11px;cursor:pointer;border-radius:var(--radius-xs);color:var(--text2);transition:all .1s}
.date-ym-item:hover{background:var(--surface);color:var(--text)}
.date-ym-item.selected{background:var(--accent);color:var(--bg);font-weight:600}
.date-nav-label:hover{background:var(--surface);border-radius:var(--radius-xs)}

/* ── Status Badge (clickable dropdown) ─────────────────── */
.status-btn{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--radius-badge);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;cursor:pointer;border:1px solid transparent;transition:all var(--transition);user-select:none;position:relative}
.status-btn:hover{filter:brightness(1.15)}
.status-btn[data-status="estimate"]{background:var(--surface);color:var(--text2);border-color:var(--border)}
.status-btn[data-status="negotiating"]{background:rgba(250,204,21,0.15);color:#facc15;border-color:rgba(250,204,21,0.3)}
.status-btn[data-status="on_subs"]{background:rgba(251,146,60,0.15);color:#fb923c;border-color:rgba(251,146,60,0.3)}
.status-btn[data-status="fixed"]{background:rgba(34,197,94,0.15);color:#22c55e;border-color:rgba(34,197,94,0.3)}
.status-dropdown{position:absolute;top:calc(100% + 4px);left:0;min-width:160px;z-index:1000;background:var(--dropdown-bg,#1e1e22);border:1px solid var(--dropdown-border,rgba(255,255,255,0.12));border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,0.7);display:none;padding:4px;animation:modalIn .15s ease}
.status-dropdown.active{display:block}
.status-option{padding:8px 12px;border-radius:var(--radius-xs);font-size:12px;font-weight:500;cursor:pointer;transition:background .15s;color:var(--text)}
.status-option:hover{background:var(--accent-muted,rgba(255,255,255,0.1))}
.status-option .status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}

/* ── Buttons ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 20px;border-radius:var(--radius-sm);font-weight:500;font-size:13px;
  cursor:pointer;border:1px solid transparent;transition:all var(--transition);
  user-select:none;white-space:nowrap;
}
.btn-primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn-secondary:hover{background:var(--border)}
.btn-accent{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.btn-accent:hover{background:var(--accent-hover)}
.btn-success{background:var(--success);color:#000}
.btn-warning{background:var(--warning);color:#000}
.btn-error{background:var(--error);color:var(--bg)}
.btn-xs{padding:2px 6px;font-size:10px}
.btn-sm{padding:4px 10px;font-size:11px}
.btn-md{padding:6px 14px;font-size:12px}
.btn-lg{padding:8px 18px;font-size:13px}
.btn:disabled{opacity:0.5;cursor:not-allowed}
.btn-group{display:flex;gap:8px;flex-wrap:wrap}
/* ── Unified close button ── */
.btn-close{background:none;border:none;color:var(--text2);font-size:16px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);transition:color var(--transition),background var(--transition)}
.btn-close:hover{color:var(--text);background:var(--surface)}

/* ── Badges ─────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-badge);font-size:11px;font-weight:500}
.badge-success{background:rgba(48,209,88,0.15);color:var(--success)}
.badge-warning{background:rgba(255,214,10,0.15);color:var(--warning)}
.badge-error{background:rgba(255,69,58,0.15);color:var(--error)}
.badge-info{background:rgba(56,132,244,0.15);color:var(--accent)}

/* ── Loading ────────────────────────────────────────────── */
.spinner{
  width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);
  border-radius:50%;animation:spin 0.6s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes indeterminate{0%{transform:translateX(-100%)}50%{transform:translateX(0)}100%{transform:translateX(100%)}}
.loading-state{display:flex;align-items:center;justify-content:center;gap:10px;padding:40px;color:var(--text2);font-size:13px}
.empty-state{text-align:center;padding:40px;color:var(--text3);font-size:13px}
.stem-consumed td{text-decoration:line-through;opacity:0.5}

/* ── Notifications ──────────────────────────────────────── */
.notif{padding:12px 16px;border-radius:var(--radius-sm);border-left:3px solid;margin-bottom:8px;font-size:13px}
.notif-info{border-color:var(--accent);background:rgba(56,132,244,0.08)}
.notif-warning{border-color:var(--warning);background:rgba(255,214,10,0.08)}
.notif-error{border-color:var(--error);background:rgba(255,69,58,0.08)}
.notif-success{border-color:var(--success);background:rgba(48,209,88,0.08)}
.notif-title{font-weight:600;margin-bottom:2px}
.notif-body{color:var(--text2)}

/* ── Toast ──────────────────────────────────────────────── */
.toast-container{position:fixed;top:60px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{
  padding:12px 20px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;
  box-shadow:0 8px 30px rgba(0,0,0,0.4);animation:toastIn 0.3s ease;min-width:260px;
  display:flex;align-items:center;gap:8px;
}
.toast-success{background:var(--success);color:#000}
.toast-error{background:var(--error);color:var(--bg)}
.toast-info{background:var(--accent);color:var(--bg)}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* ── Sections ───────────────────────────────────────────── */
.section-title{font-size:15px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.section-subtitle{font-size:12px;color:var(--text2);margin-bottom:12px}

/* ── Result Panel ───────────────────────────────────────── */
.result-panel{
  background:linear-gradient(135deg,rgba(56,132,244,0.05),rgba(48,209,88,0.05));
  border:1px solid var(--border);border-radius:var(--radius);padding:var(--pad);
}
.result-value{font-size:24px;font-weight:700;color:var(--accent)}
.result-label{font-size:12px;color:var(--text2);text-transform:uppercase;letter-spacing:0.5px}

/* ── Progress Bar ──────────────────────────────────────── */
.progress-wrap{background:var(--surface);border-radius:var(--radius-sm);height:8px;overflow:hidden;margin-bottom:12px}
.progress-bar{height:100%;border-radius:var(--radius-sm);transition:width 0.4s ease;background:var(--accent)}
.progress-bar.green{background:var(--success)}
.progress-bar.yellow{background:var(--warning)}
.progress-bar.red{background:var(--error)}

/* ── KPI highlight variants ────────────────────────────── */
.kpi-card.highlight{border-color:var(--accent);background:rgba(56,132,244,0.05)}
.kpi-card.success{border-color:var(--success)}
.kpi-card.error{border-color:var(--error)}
.kpi-value.green{color:var(--success)}
.kpi-value.red{color:var(--error)}
.kpi-value.accent{color:var(--accent)}

/* ── Overview Command Center ─────────────────────────── */
.ovOpenChip.active,.ovCargoChip.active{background:var(--accent)!important;color:var(--bg)!important;border-color:var(--accent)!important}
.ov-ship-row{padding:8px 10px;border-bottom:1px solid var(--border);cursor:default}
.ov-ship-row:hover{background:var(--bg1)}
.ov-ship-name{font-weight:600;font-size:12px}
.ov-ship-meta{font-size:11px;color:var(--text2);margin-top:2px}
.ov-l3c{display:inline-flex;gap:4px;margin-top:3px}
.ov-l3c-tag{font-size:9px;padding:1px 5px;border-radius:3px;background:var(--bg1);color:var(--text2);font-weight:600;letter-spacing:0.03em}
.ov-cargo-row{padding:8px 10px;border-bottom:1px solid var(--border)}
.ov-cargo-row:hover{background:var(--bg1)}
.ov-cargo-name{font-weight:600;font-size:12px}
.ov-cargo-meta{font-size:11px;color:var(--text2);margin-top:2px}
.ov-cargo-priority{font-size:9px;padding:1px 5px;border-radius:3px;font-weight:600}
.ov-cargo-priority.high{background:rgba(255,69,58,0.15);color:var(--error)}
.ov-cargo-priority.normal{background:rgba(48,209,88,0.15);color:var(--success)}
.ov-cargo-priority.low{background:var(--bg1);color:var(--text3)}
.ov-activity-row{padding:8px 10px;border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:flex-start}
.ov-activity-row:hover{background:var(--bg1)}
.ov-activity-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;margin-top:1px}
.ov-activity-icon.ffa{background:rgba(10,132,255,0.15);color:#0A84FF}
.ov-activity-icon.cargo{background:rgba(48,209,88,0.15);color:#30D158}
.ov-activity-icon.voyage{background:rgba(255,159,10,0.15);color:#FF9F0A}
.ov-activity-icon.snp{background:rgba(191,90,242,0.15);color:#BF5AF2}
.ov-activity-msg{font-size:12px;line-height:1.4;flex:1}
.ov-activity-time{font-size:10px;color:var(--text3);white-space:nowrap;margin-top:2px}

/* ── Investment Appraisal — Compact Dense Layout ─────── */
#snp-investments .inv-param-card{padding:10px 12px;margin-bottom:8px}
#snp-investments .inv-section-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--accent);margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid var(--border)}
#snp-investments .inv-param-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
/* Fixture-card style: flat grid of label-value pairs, inputs look like values */
#snp-investments .inv-param-grid .inv-flat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:4px 8px}
#snp-investments .inv-param-grid .inv-field{display:flex;flex-direction:column}
#snp-investments .inv-param-grid .inv-field label{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:0.3px;margin-bottom:0;line-height:1.3}
#snp-investments .inv-param-grid .inv-field input,
#snp-investments .inv-param-grid .inv-field select{border:1px solid transparent;background:transparent;padding:1px 2px;font-size:12px;font-weight:600;color:var(--text);border-radius:var(--radius-xs);outline:none;width:100%;transition:border-color 0.15s,background 0.15s}
#snp-investments .inv-param-grid .inv-field input:hover,
#snp-investments .inv-param-grid .inv-field select:hover{border-color:var(--border);background:var(--surface)}
#snp-investments .inv-param-grid .inv-field input:focus,
#snp-investments .inv-param-grid .inv-field select:focus{border-color:var(--accent);background:rgba(56,132,244,0.04)}
#snp-investments .inv-param-grid .inv-field.wide{grid-column:1 / -1}
/* Legacy form-group fallback for financing dynamic fields */
#snp-investments .inv-param-grid .form-group{margin-bottom:4px}
#snp-investments .inv-param-grid .form-label{font-size:9px;margin-bottom:0;color:var(--text3);text-transform:uppercase;letter-spacing:0.3px}
#snp-investments .inv-param-grid .form-input,
#snp-investments .inv-param-grid .form-select{padding:2px 4px;font-size:12px;font-weight:600}
#snp-investments .inv-param-grid .inv-2col{display:grid;grid-template-columns:1fr 1fr;gap:4px 6px;margin-bottom:4px}
#snp-investments .inv-param-grid .inv-2col .form-group{margin-bottom:0}
#snp-investments .inv-kpi-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
#snp-investments .inv-kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;border-left:3px solid var(--border);transition:all var(--transition)}
#snp-investments .inv-kpi:hover{border-color:var(--accent);transform:translateY(-1px)}
#snp-investments .inv-kpi-label{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:2px}
#snp-investments .inv-kpi-value{font-family:var(--font-mono);font-size:18px;font-weight:700;letter-spacing:-0.4px;line-height:1.1}
#snp-investments .inv-kpi-sub{font-size:9px;color:var(--text3);margin-top:2px}
#snp-investments .inv-kpi.positive{border-left-color:var(--success)}
#snp-investments .inv-kpi.negative{border-left-color:var(--error)}
#snp-investments .inv-kpi.warning{border-left-color:var(--warning)}
#snp-investments .inv-kpi.accent{border-left-color:var(--accent)}
#snp-investments .inv-actions{display:flex;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
/* Sensitivity KPI tiles */
.sens-kpi{background:var(--surface);border-radius:var(--radius-xs);padding:6px 8px;text-align:center;border:1px solid var(--border);transition:border-color 0.2s}
.sens-kpi-label{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em}
.sens-kpi-value{font-family:var(--font-mono);font-size:16px;font-weight:700;margin-top:2px;line-height:1.1}
.sens-kpi-delta{font-size:9px;margin-top:1px}
/* Sensitivity step chips */
.sens-step-chip{font-size:9px;font-family:var(--font-mono);padding:4px 0;text-align:center;border:1px solid var(--border);border-radius:var(--radius-xs);cursor:pointer;background:var(--surface);color:var(--text3);transition:all 0.15s;line-height:1.2}
.sens-step-chip:hover{border-color:var(--accent);color:var(--text2)}
.sens-step-chip.active{border-color:var(--accent);background:rgba(56,132,244,0.08);color:var(--accent);font-weight:700}
.sens-step-chip.base{border-bottom:2px solid var(--accent)}
.btn-stepper{border:none;background:var(--surface);padding:4px 8px;cursor:pointer;color:var(--text2);font-size:14px;line-height:1;transition:all 0.15s}
.btn-stepper:hover{background:var(--border);color:var(--accent)}
/* Header strip */
#snp-investments .inv-header-strip{display:flex;align-items:center;gap:10px;margin-bottom:8px}
#snp-investments .inv-header-strip select{width:220px;padding:5px 8px;font-size:12px}
#snp-investments .inv-header-strip .inv-header-badges{display:flex;gap:6px;flex:1}
#snp-investments .inv-header-strip .inv-badge{font-size:10px;font-weight:600;padding:3px 8px;border-radius:var(--radius-badge);background:var(--surface);color:var(--text2)}
/* TC Rate cells */
.tc-cell{position:relative;flex:0 0 auto;min-width:64px;text-align:center;border:1px solid var(--border);border-right:none;background:var(--card);transition:border-color 0.15s}
.tc-cell:last-child{border-right:1px solid var(--border)}
.tc-cell:first-child{border-radius:var(--radius-xs) 0 0 var(--radius-xs)}
.tc-cell:last-child{border-radius:0 var(--radius-xs) var(--radius-xs) 0}
.tc-cell-label{font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;color:var(--text3);padding:3px 4px 1px;user-select:none}
.tc-cell input{width:100%;border:none;background:transparent;text-align:center;font-size:11px;font-family:var(--font-mono);font-weight:600;padding:1px 3px 4px;color:var(--text);outline:none}
.tc-cell input:focus{background:rgba(56,132,244,0.06)}
.tc-cell.tc-drag-over{border-color:var(--accent);background:rgba(56,132,244,0.08)}
.tc-cell.tc-drag-source{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.tc-cell .tc-handle{position:absolute;bottom:1px;right:1px;width:6px;height:6px;background:var(--accent);cursor:crosshair;opacity:0;transition:opacity 0.15s;border-radius:1px}
.tc-cell:hover .tc-handle,.tc-cell.tc-drag-source .tc-handle{opacity:1}
/* TC rate section header */
#invTcRateSection{margin-top:8px;border-top:1px solid var(--border);padding-top:8px}
#invTcRateSection .inv-section-label{margin-bottom:4px;padding-bottom:0;border-bottom:none}
/* Timeline & sensitivity compact */
#snp-investments #invTimelineCard{margin-top:8px}
#snp-investments #invTimelineCard .card-title{font-size:11px;margin-bottom:4px}
#snp-investments .tbl td{padding:3px 6px;font-size:11px}
#snp-investments .tbl th{padding:3px 6px;font-size:9px}
#snp-investments #invAnalysisGrid{margin-top:8px}
#snp-investments #invAnalysisGrid .card-title{font-size:11px;margin-bottom:4px}

/* ── Fixtures: Segment Badges ─────────────────────────── */
.fix-seg-vlcc{background:rgba(255,69,58,0.15);color:#FF453A}
.fix-seg-suez{background:rgba(255,214,10,0.15);color:#FFD60A}
.fix-seg-afra{background:rgba(56,132,244,0.15);color:#0A84FF}
.fix-seg-mr{background:rgba(48,209,88,0.15);color:#30D158}
.fix-seg-small{background:rgba(191,90,242,0.15);color:#BF5AF2}
/* ── Fixtures: Sea Performance Badges ─────────────────── */
.fix-perf-faster{background:rgba(48,209,88,0.1);color:var(--success)}
.fix-perf-slower{background:rgba(255,69,58,0.1);color:var(--error)}

/* ── Risk Badge ────────────────────────────────────────── */
.risk-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--radius-badge);font-size:11px;font-weight:600}
.risk-low{background:rgba(48,209,88,0.15);color:var(--success)}
.risk-medium{background:rgba(255,214,10,0.15);color:var(--warning)}
.risk-high{background:rgba(255,69,58,0.15);color:var(--error)}

/* ── TWAP Bars ─────────────────────────────────────────── */
.twap-bar-wrap{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.twap-label{width:50px;font-size:12px;color:var(--text2);text-align:right}
.twap-track{flex:1;background:var(--surface);border-radius:var(--radius-xs);height:24px;overflow:hidden}
.twap-fill{height:100%;border-radius:var(--radius-xs);display:flex;align-items:center;padding-left:8px;font-size:11px;font-weight:600;color:var(--bg);transition:width 0.5s ease}

/* ── Inline Edit ───────────────────────────────────────── */
.inline-edit{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xs);padding:4px 8px;color:var(--text);font-size:13px;width:80px;text-align:right}
.inline-edit:focus{border-color:var(--accent);outline:none}
.detail-label{font-size:11px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px}
.detail-block{min-width:0}
.blotter-row:hover{background:var(--surface-hover,rgba(255,255,255,0.03))}
.position-detail td{background:transparent !important}

/* ── Scenario Bar ──────────────────────────────────────── */
.scenario-bar{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:8px 12px;background:var(--surface);border-radius:var(--radius-sm);border:1px solid var(--border)}
.scenario-bar select{max-width:200px}

/* ── Toggle / Switch ────────────────────────────────────── */
.toggle{position:relative;width:44px;height:24px;cursor:pointer;display:inline-block}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{
  position:absolute;inset:0;background:var(--border);border-radius:var(--radius);transition:var(--transition);
}
.toggle-slider::before{
  content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;
  top:3px;left:3px;transition:var(--transition);
}
.toggle input:checked+.toggle-slider{background:var(--accent)}
.toggle input:checked+.toggle-slider::before{transform:translateX(20px)}

/* ── Inner Tabs — matches subtab-pill style ────────────── */
.inner-tabs{display:flex;gap:4px;margin-bottom:10px;padding:2px 0 4px;border-bottom:none}
.inner-tab{
  padding:4px 12px;font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;
  border:1px solid var(--border);border-radius:var(--radius-badge);background:transparent;
  transition:all var(--transition);white-space:nowrap;
}
.inner-tab:hover{border-color:var(--accent);color:var(--text1)}
.inner-tab.active{background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:500}
.inner-tabs-sub{margin-top:2px;margin-bottom:10px;margin-left:0;padding:0 0 0;border:none;background:none;border-radius:0;width:auto;border-bottom:1px solid var(--border)}
.inner-tabs-sub .inner-tab{font-size:11px;padding:4px 10px 6px;border-radius:0;border:none;background:none !important;box-shadow:none;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--text3);font-weight:400}
.inner-tabs-sub .inner-tab:hover{color:var(--text);background:none !important;border-color:transparent}
.inner-tabs-sub .inner-tab.active{color:var(--accent);border-bottom-color:var(--accent);background:none !important;box-shadow:none;font-weight:500}
.autocomplete-list{position:absolute;z-index:9000;background:var(--dropdown-bg,var(--card,#fff));border:1px solid var(--dropdown-border,var(--border));border-radius:var(--radius);max-height:220px;overflow-y:auto;width:100%;box-shadow:0 4px 16px rgba(0,0,0,0.4)}
.autocomplete-list .ac-item{padding:6px 10px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--border)}
.autocomplete-list .ac-item:hover{background:var(--hover)}
.autocomplete-list .ac-item .ac-region{font-size:11px;color:var(--text2);margin-left:6px}

/* ── Entity Modal / Detail Panel ───────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:10000;display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.modal-overlay.open{display:flex}
.modal{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  width:100%;max-width:600px;padding:16px;position:relative;animation:modalIn 0.25s ease;
  margin:auto;max-height:calc(100vh - 40px);display:flex;flex-direction:column;overflow:visible;
}
@keyframes modalIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.modal-title{font-size:16px;font-weight:600}
.modal-close{background:none;border:none;color:var(--text);font-size:20px;line-height:1;cursor:pointer;padding:6px 10px;border-radius:var(--radius-sm);opacity:0.7;transition:opacity var(--transition),background var(--transition)}
.modal-close:hover{opacity:1;background:var(--surface)}
.modal-fullscreen{max-width:100vw!important;width:100vw!important;height:100vh!important;max-height:100vh!important;margin:0!important;border-radius:0!important}
.modal-body{flex:1;overflow-y:auto;min-height:0}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.detail-item{padding:8px 0}
.detail-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.3px;margin-bottom:2px}
.detail-value{font-size:14px;font-weight:500}
.audit-footer{margin-top:12px;padding-top:8px;border-top:1px solid var(--border);font-size:11px;color:var(--text3);letter-spacing:0.2px}
.detail-section{margin-top:10px;padding-top:8px;border-top:1px solid var(--border)}
.detail-section-title{font-size:12px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:12px}
.entity-row{cursor:pointer;transition:background var(--transition)}
.entity-row:hover td{background:rgba(56,132,244,0.06) !important}
.entity-actions{display:flex;gap:2px;align-items:center;justify-content:center;opacity:0.4;transition:opacity var(--transition)}
.entity-row:hover .entity-actions{opacity:1}
.btn-icon{padding:2px 6px;font-size:12px;line-height:1;border-radius:var(--radius-sm);background:none;border:1px solid transparent;cursor:pointer;color:var(--text3);transition:all var(--transition)}
.btn-icon:hover{background:var(--surface);border-color:var(--border);color:var(--text)}
.btn-icon.danger:hover{color:var(--error);border-color:var(--error)}
/* ── Wide modal variant (vessel detail) ── */
.modal-wide{max-width:860px !important}
.modal-wide .detail-grid{grid-template-columns:1fr 1fr 1fr}
.vd-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:14px}
.vd-tab{padding:8px 16px;font-size:12px;font-weight:500;cursor:pointer;color:var(--text2);border-bottom:2px solid transparent;transition:all var(--transition)}
.vd-tab:hover{color:var(--text)}
.vd-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.ops-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.ops-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;text-align:center}
.ops-kpi-label{font-size:9px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text3);margin-bottom:3px}
.ops-kpi-value{font-family:var(--font-mono);font-size:18px;font-weight:700;letter-spacing:-0.3px}
.l3c-chip{display:inline-block;padding:2px 8px;font-size:11px;border-radius:10px;background:var(--surface);border:1px solid var(--border);margin:2px}
/* ── Q88 Vessel Details Tab ── */
.q88-upload-zone{border:2px dashed var(--border);border-radius:var(--radius);padding:16px;text-align:center;margin-bottom:10px;transition:all var(--transition)}
.q88-upload-zone:hover{border-color:var(--text3)}
.q88-upload-inner{display:flex;flex-direction:column;align-items:center;gap:2px}
#vdTabQ88 .detail-grid{gap:8px 12px}
#vdTabQ88 .detail-item{padding:3px 0}
#vdTabQ88 .detail-label{font-size:10px;margin-bottom:1px}
#vdTabQ88 .detail-value{font-size:13px}
#vdTabQ88 .form-group{margin-bottom:4px}
#vdTabQ88 .form-label{font-size:10px;margin-bottom:1px}
#vdTabQ88 .form-input,#vdTabQ88 .form-select{font-size:12px;padding:4px 6px}
#vdTabQ88 .voy-collapse-section{margin:1px 0}
/* ── Confirm Dialog ── */
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeIn .15s ease}
.confirm-box{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;width:340px;max-width:90vw;animation:modalIn .2s ease}
.confirm-box h3{font-size:14px;font-weight:600;color:var(--text);margin:0 0 8px}
.confirm-box p{font-size:13px;color:var(--text2);margin:0 0 12px;line-height:1.4}
.confirm-box .confirm-actions{display:flex;gap:8px;justify-content:flex-end}
.confirm-box .confirm-actions button{padding:6px 16px;font-size:12px;font-weight:500;border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--border);transition:all var(--transition)}
.confirm-box .btn-cancel{background:var(--surface);color:var(--text2)}
.confirm-box .btn-cancel:hover{background:var(--border);color:var(--text)}
.confirm-box .btn-confirm-del{background:var(--error);color:var(--bg);border-color:var(--error)}
.confirm-box .btn-confirm-del:hover{opacity:0.85}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── Voyage 3-Column Layout ─────────────────────────────── */
/* Voyage tab uses full width — break out of .content constraints */
.content.voy-fullwidth{max-width:none;padding:4px 6px 6px}
.grid-voy-3col{display:grid;grid-template-columns:minmax(240px,16%) 1fr minmax(260px,20%);gap:8px;align-items:stretch;height:calc(100vh - 60px)}
.grid-voy-3col .voy-left-panel{overflow-y:auto;overflow-x:hidden;min-height:0;height:100%;padding:10px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);scrollbar-width:thin;scrollbar-color:var(--border) transparent;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.grid-voy-3col .voy-center-panel{overflow-y:auto;overflow-x:hidden;min-height:0;height:100%;padding:0 2px;scrollbar-width:thin;scrollbar-color:var(--border) transparent;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.grid-voy-3col .voy-right-panel{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;min-height:0;height:100%;padding:10px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);scrollbar-width:thin;scrollbar-color:var(--border) transparent;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.grid-voy-3col .voy-left-panel::-webkit-scrollbar,.grid-voy-3col .voy-right-panel::-webkit-scrollbar,.grid-voy-3col .voy-center-panel::-webkit-scrollbar{width:6px}
.grid-voy-3col .voy-left-panel::-webkit-scrollbar-thumb,.grid-voy-3col .voy-right-panel::-webkit-scrollbar-thumb,.grid-voy-3col .voy-center-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.grid-voy-3col .voy-left-panel::-webkit-scrollbar-thumb:hover,.grid-voy-3col .voy-right-panel::-webkit-scrollbar-thumb:hover,.grid-voy-3col .voy-center-panel::-webkit-scrollbar-thumb:hover{background:var(--text3)}
/* Prevent scroll-to-change on number/date/time inputs in voyage panels */
.voy-left-panel input[type="number"],.voy-right-panel input[type="number"]{-moz-appearance:textfield}
/* Right panel section styling */
.voy-right-panel .voy-collapse-section{margin:0 0 4px 0}
.voy-right-panel .voy-collapse-header{padding:6px 8px}
.voy-left-panel .form-group,.voy-right-panel .form-group{margin-bottom:5px;min-width:0;overflow:hidden}
.voy-left-panel .form-label,.voy-right-panel .form-label{font-size:10px;margin-bottom:1px}
.voy-left-panel .form-input,.voy-left-panel .form-select,.voy-right-panel .form-input,.voy-right-panel .form-select{padding:5px 8px 4px;font-size:12px;min-width:0;max-width:100%;box-sizing:border-box}
.voy-left-panel .form-row,.voy-left-panel .form-row-3,.voy-right-panel .form-row,.voy-right-panel .form-row-3{gap:6px}
.voy-left-panel .card-title,.voy-right-panel .card-title{font-size:10px;margin-bottom:4px;color:var(--accent)}
.voy-left-panel .voy-rp-title,.voy-right-panel .voy-rp-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--bg);background:var(--accent);margin:-10px -10px 8px -10px;padding:7px 10px;border-radius:var(--radius) var(--radius) 0 0}
/* Voyage form panel styling — uses style variables */
.voy-left-panel,.voy-right-panel{border-color:var(--accent) !important}
.voy-left-panel .form-label,.voy-right-panel .form-label{color:var(--accent);font-weight:600}
.voy-left-panel .form-group,.voy-right-panel .form-group{position:relative}
.voy-left-panel .port-picker,.voy-right-panel .port-picker{padding:4px 2px;min-height:32px}
.voy-left-panel .voy-collapse-header,.voy-right-panel .voy-collapse-header{background:var(--accent-muted)}
.voy-left-panel .voy-collapse-title,.voy-right-panel .voy-collapse-title{color:var(--accent);font-weight:600}

/* ── Routing panel: route choice groups ───────────────── */
.route-choice-group{display:flex;align-items:center;gap:6px}
.route-choice-label{font-size:10px;color:var(--text2);min-width:58px;flex-shrink:0;text-align:right}
.route-choice-options{display:flex;gap:3px;flex-wrap:wrap}
.route-choice-btn{background:transparent;border:1px solid var(--border);color:var(--text2);font-size:11px;padding:3px 10px;border-radius:10px;cursor:pointer;transition:all 0.15s;white-space:nowrap}
.route-choice-btn:hover{border-color:var(--accent);color:var(--accent)}
.route-choice-btn.active{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:600}

/* ── Voyage Comparison ──────────────────────────────────── */
.grid-voy-compare{display:grid;grid-template-columns:300px 1fr;gap:12px;align-items:start;transition:grid-template-columns 0.3s ease;overflow:hidden}
.grid-voy-compare.form-collapsed{grid-template-columns:0px 1fr;gap:0;overflow:hidden}
.grid-voy-compare.form-collapsed>.stack:first-child{overflow:hidden;max-width:0;padding:0;margin:0}
.grid-voy-compare.form-collapsed #voyFormCard{opacity:0;pointer-events:none;overflow:hidden;max-width:0;padding:0;margin:0}
.voy-form-compact .form-input,.voy-form-compact .form-select{padding:5px 8px 4px;font-size:12px}
.voy-form-compact .form-label{font-size:10px;margin-bottom:2px}
.voy-form-compact .form-group{margin-bottom:6px}
.voy-form-compact .card-title{font-size:13px;margin-bottom:8px}
.voy-form-compact .form-row,.voy-form-compact .form-row-3{gap:6px}
.voy-form-compact .card{padding:12px}
.voy-form-compact .section-label{font-size:10px;margin:6px 0 4px}
/* ── Voyage form ultra-compact mode ──────────── */
#voyFormCard.voy-form-ultra{padding:10px 12px}
#voyFormCard.voy-form-ultra .card-title{font-size:12px;margin-bottom:4px}
#voyFormCard.voy-form-ultra .form-group{margin-bottom:4px}
#voyFormCard.voy-form-ultra .form-label{font-size:10px;margin-bottom:1px}
#voyFormCard.voy-form-ultra .form-input,#voyFormCard.voy-form-ultra .form-select{padding:4px 8px 3px;font-size:12px}
#voyFormCard.voy-form-ultra .form-row,#voyFormCard.voy-form-ultra .form-row-3,#voyFormCard.voy-form-ultra .form-row-4{gap:6px}
#voyFormCard.voy-form-ultra #voyFifoFO,#voyFormCard.voy-form-ultra #voyFifoMGO{min-height:0}
#voyFormCard.voy-form-ultra .voy-section-remove{display:none}
.form-row-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px}
/* ── Collapsible section styles ──────────────── */
.voy-collapse-section{margin:2px 0}
.voy-collapse-header{display:flex;align-items:center;gap:6px;padding:5px 8px;background:var(--surface);border-radius:var(--radius-sm);cursor:pointer;user-select:none}
.voy-collapse-title{font-size:10px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:0.5px}
.voy-collapse-summary{font-size:10px;color:var(--text3);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%;text-align:right}
.comparison-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;padding:6px 0;align-items:stretch}
.cmp-card{background:var(--card);border:2px solid var(--accent);border-radius:var(--radius);padding:8px;position:relative;transition:border-color var(--transition),transform 0.2s,box-shadow 0.2s;display:flex;flex-direction:column;min-width:0}
.cmp-card:hover{box-shadow:0 2px 12px rgba(0,0,0,0.2)}
.cmp-card.cmp-saved{border-color:var(--success)}
.cmp-card.cmp-selected{border-color:var(--error);background:rgba(255,69,58,0.04)}
.cmp-selected-badge{display:inline-block;background:var(--error);color:var(--bg);font-size:8px;font-weight:700;padding:1px 5px;border-radius:3px;letter-spacing:0.5px;text-transform:uppercase;margin-right:3px}
.cmp-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.cmp-code{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--accent);letter-spacing:0.5px}
.cmp-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px;line-height:1;padding:0}
.cmp-close:hover{color:var(--error)}
.cmp-vessel{font-size:11px;font-weight:600;color:var(--text);margin-bottom:1px}
.cmp-status-row{margin:2px 0 3px}
.cmp-status-row .status-btn{font-size:10px;padding:1px 6px}
.cmp-status-row .status-dropdown{min-width:120px}
.cmp-route{font-size:10px;color:var(--text3);margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.cmp-laycan{font-size:9px;color:var(--text3);margin-bottom:2px;font-variant-numeric:tabular-nums}
.cmp-parties{margin-bottom:4px}
.cmp-party{font-size:9px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;line-height:1.4}
.cmp-party-role{color:var(--text3);opacity:0.7;font-weight:600;text-transform:uppercase;letter-spacing:0.3px}
.cmp-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;border-bottom:1px solid var(--border);font-size:11px}
.cmp-row:last-of-type{border-bottom:none}
.cmp-row-label{color:var(--text3);font-size:10px}
.cmp-row-value{font-weight:600;font-variant-numeric:tabular-nums;font-size:11px}
.cmp-actions{display:flex;gap:3px;margin-top:auto;padding-top:6px;flex-wrap:wrap}
.cmp-actions .btn-xs{padding:3px 8px;font-size:10px}
.cmp-icon-btn{min-width:28px;text-align:center;line-height:1.2}
.cmp-toolbar{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:6px;flex-wrap:wrap;gap:4px}
.cmp-toolbar .btn{font-size:10px;padding:3px 7px}
.cmp-counter{font-size:12px;color:var(--text2)}
.cmp-counter strong{color:var(--accent)}
.cmp-section{font-size:8px;text-transform:uppercase;letter-spacing:0.8px;color:var(--text3);padding:5px 0 2px;margin-top:3px;border-top:1px solid var(--border);font-weight:600}
.cmp-add-card{background:transparent;border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;min-height:140px;cursor:pointer;transition:border-color var(--transition),background var(--transition)}
.cmp-add-card:hover{border-color:var(--accent);background:rgba(0,122,255,0.04)}
.cmp-add-inner{text-align:center;pointer-events:none}
.cmp-add-icon{font-size:24px;color:var(--text3);line-height:1;margin-bottom:6px;transition:color var(--transition)}
.cmp-add-card:hover .cmp-add-icon{color:var(--accent)}
.cmp-add-label{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:4px}
.cmp-add-hint{font-size:10px;color:var(--text3)}
/* ── Comparison Board (dense table view) ── */
.cmp-board{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto;margin-bottom:6px}
.cmp-board table{width:100%;border-collapse:collapse;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cmp-board th{background:var(--surface);text-align:left;padding:4px 6px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;color:var(--text3);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1}
.cmp-board td{padding:3px 6px;border-bottom:1px solid var(--border)}
.cmp-board tr:last-child td{border-bottom:none}
.cmp-board tr:hover{background:rgba(255,255,255,0.02)}
.cmp-board .cb-voyage{font-weight:700;color:var(--accent);font-size:11px}
.cmp-board .cb-vessel{font-weight:600;color:var(--text);max-width:100px;overflow:hidden;text-overflow:ellipsis}
.cmp-board .cb-route{color:var(--text2);font-size:10px;max-width:95px;overflow:hidden;text-overflow:ellipsis}
.cmp-board .cb-best{color:var(--success);font-weight:700}
.cmp-board .cb-worst{color:var(--error);font-weight:700}
.cmp-board .cb-rank{font-weight:800;font-size:12px;text-align:center}
.cmp-board .cb-accept{background:rgba(63,185,80,0.12);color:var(--success);font-weight:700;padding:2px 8px;border-radius:var(--radius-xs);font-size:10px;display:inline-block}
.cmp-board .cb-consider{background:rgba(210,153,34,0.12);color:var(--warning);font-weight:700;padding:2px 8px;border-radius:var(--radius-xs);font-size:10px;display:inline-block}
.cmp-board .cb-reject{background:rgba(248,81,73,0.12);color:var(--error);font-weight:700;padding:2px 8px;border-radius:var(--radius-xs);font-size:10px;display:inline-block}
.cmp-board .cb-cii{font-weight:700;padding:1px 6px;border-radius:3px;font-size:10px;display:inline-block}
.cmp-board-toggle.active{background:var(--accent)!important;color:var(--bg)!important}
/* ── Speed Quick-Pick Buttons ── */
.btn.spd-pick{font-size:10px;padding:2px 8px;min-width:36px;font-weight:600;letter-spacing:.03em;border-radius:var(--radius-sm)}
.btn.spd-pick.active{background:var(--accent);color:var(--bg);border-color:var(--accent)}
/* ── Weather Factor Display ── */
.wx-badge{display:inline-block;font-size:10px;font-weight:700;padding:1px 6px;border-radius:3px}
.wx-calm{background:rgba(16,185,129,0.12);color:var(--success)}
.wx-mod{background:rgba(234,179,8,0.12);color:var(--warning)}
.wx-rough{background:rgba(249,115,22,0.12);color:#f97316}
.wx-heavy{background:rgba(239,68,68,0.12);color:var(--error)}
.wx-storm{background:rgba(127,29,29,0.15);color:#7f1d1d}
/* ── Drag & Drop ── */
.cmp-grip{cursor:grab;color:var(--text3);font-size:14px;padding:2px 4px;user-select:none;line-height:1;transition:color var(--transition)}
.cmp-grip:hover{color:var(--accent)}
.cmp-grip:active{cursor:grabbing}
.cmp-card.cmp-dragging{opacity:0.35;transform:scale(0.96)}
.cmp-ghost{position:fixed;pointer-events:none;z-index:200;opacity:0.85;transform:rotate(2deg);box-shadow:0 12px 40px rgba(0,0,0,0.5)}
.cmp-drop-marker{width:100%;height:3px;background:var(--accent);border-radius:2px;grid-column:1/-1;transition:opacity 0.15s}
/* ── Swap Button (removed — grid layout uses drag reorder only) ── */
/* ── Collapsed Cards ── */
.cmp-card .cmp-details{transition:max-height 0.3s ease,opacity 0.3s ease;overflow:hidden}
.cmp-card .cmp-details.cmp-collapsed{max-height:0!important;opacity:0;padding:0;margin:0}
/* ── Preview Card — REMOVED (Hide Result creates real VOY entries now) ── */
/* ── VOY Badge (numbered cards) ── */
.cmp-voy-badge{display:inline-block;background:var(--surface);color:var(--text2);font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;letter-spacing:0.3px;margin-right:4px;border:1px solid var(--border)}
/* ── Active Result Card — REMOVED (unified VOY cards with selection) ── */
/* ── Floating Windows ── */
.fw-overlay{position:fixed;inset:0;background:rgba(10,10,12,0.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:100;opacity:0;transition:opacity 0.25s}
.fw-overlay.fw-open{opacity:1}
.fw-window{position:fixed;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 24px rgba(0,0,0,0.2);display:flex;flex-direction:column;z-index:101;transform:scale(0.95);opacity:0;transition:transform 0.2s ease,opacity 0.2s ease;max-height:90vh;overflow:hidden}
.fw-window.fw-open{transform:scale(1);opacity:1}
.fw-titlebar{padding:10px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);cursor:move;user-select:none;background:var(--bg);border-radius:var(--radius) var(--radius) 0 0}
.fw-title{font-size:13px;font-weight:600;color:var(--text2);letter-spacing:0.3px}
.fw-close{background:none;border:none;color:var(--text2);font-size:16px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);transition:color var(--transition),background var(--transition)}
.fw-close:hover{color:var(--text);background:var(--surface)}
.fw-body{padding:10px 12px;overflow-y:auto;flex:1}
.voy-form-floating{background:transparent !important;border:none !important;box-shadow:none !important;padding:0 !important;margin:0 !important}
.grid-voy-compare.form-detached{grid-template-columns:1fr}
/* ── Retractable Form Tab ── */
.form-tab-strip{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:50;writing-mode:vertical-rl;text-orientation:mixed;background:var(--accent);color:var(--bg);padding:12px 8px;border-radius:0 8px 8px 0;cursor:pointer;font-size:12px;font-weight:600;letter-spacing:0.5px;box-shadow:2px 0 12px rgba(0,0,0,0.3);transition:background var(--transition),transform 0.2s;user-select:none;display:none}
.form-tab-strip:hover{background:var(--accent-hover);transform:translateY(-50%) translateX(2px)}
.grid-voy-compare.form-retracted{grid-template-columns:1fr}
/* ── Pin Button in Floating Window ── */
.fw-pin{background:none;border:none;color:var(--text3);font-size:14px;cursor:pointer;padding:2px 6px;border-radius:var(--radius-xs);transition:color var(--transition),background var(--transition);margin-right:4px}
.fw-pin:hover{color:var(--accent);background:rgba(88,166,255,0.1)}
/* ── P&L Detail Panel (inline below cards) ── */
.cmp-pnl-panel{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-top:6px;display:none;animation:fadeSlideIn 0.25s ease}
.cmp-pnl-panel.open{display:block}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.cmp-pnl-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.cmp-pnl-title{font-size:14px;font-weight:600;color:var(--text)}
.cmp-pnl-kpis{display:flex;gap:10px;margin-bottom:8px}
.cmp-pnl-kpi{text-align:center;padding:6px 10px;background:var(--surface);border-radius:var(--radius-sm);border:1px solid var(--border)}
.cmp-pnl-kpi-label{font-size:9px;text-transform:uppercase;letter-spacing:0.5px;color:var(--text3);margin-bottom:2px}
.cmp-pnl-kpi-value{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.cmp-pnl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.cmp-pnl-section{background:var(--surface);border-radius:var(--radius-sm);padding:10px;border:1px solid var(--border)}
.cmp-pnl-section-title{font-size:9px;text-transform:uppercase;letter-spacing:0.6px;color:var(--text3);font-weight:600;margin-bottom:6px}
.cmp-pnl-row{display:flex;justify-content:space-between;font-size:11px;padding:2px 0;border-bottom:1px solid var(--border)}
.cmp-pnl-row:last-child{border-bottom:none}
.cmp-pnl-row.indent{padding-left:10px;font-size:10px;color:var(--text2)}
.cmp-pnl-row-label{color:var(--text3)}
.cmp-pnl-row-value{font-weight:600;font-variant-numeric:tabular-nums}
/* ── P&L Group Card Layout ─────────────────── */
.pnl-grp-header{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;cursor:pointer;min-height:42px}
.pnl-grp-header-left{display:flex;align-items:center;gap:8px;min-width:0}
.pnl-grp-arrow{font-size:10px;color:var(--text3);flex-shrink:0;width:12px}
.pnl-grp-name{font-weight:700;font-size:13px;white-space:nowrap}
.pnl-grp-chips{display:flex;gap:4px;align-items:center;margin-left:2px}
.pnl-grp-chip{font-size:10px;color:var(--text3);background:var(--surface);padding:2px 8px;border-radius:3px;white-space:nowrap}
.pnl-grp-header-right{display:flex;align-items:center;gap:14px;flex-shrink:0;margin-left:auto;padding-left:16px}
.pnl-grp-count{font-size:10px;color:var(--text3);white-space:nowrap;min-width:70px;text-align:right}
.pnl-grp-pnl{font-family:var(--font-mono);font-size:14px;font-weight:700;white-space:nowrap;min-width:90px;text-align:right}
.pnl-grp-edit{font-size:12px;cursor:pointer;padding:2px 4px;opacity:0.5;transition:opacity .15s}
.pnl-grp-edit:hover{opacity:1}
.pnl-grp-footer{padding:8px 14px;border-top:1px solid var(--border);font-size:11px;color:var(--text2);display:flex;gap:16px;flex-wrap:wrap;align-items:center;min-height:34px}
.pnl-grp-sep{color:var(--border)}

/* ── Voyage Layout — Ultra-Dense (all content preserved, maximum compression) ── */
#voyLayoutGrid{gap:10px !important}
#voyLayoutGrid .stack{gap:6px}
#voyLayoutGrid .card{padding:8px 10px}
#voyLayoutGrid .card-title{margin-bottom:4px;font-size:11px}
#voyLayoutGrid .form-group{margin-bottom:6px}
#voyLayoutGrid .form-group label{font-size:10px;margin-bottom:1px}
#voyLayoutGrid .form-row,#voyLayoutGrid .form-row-3{gap:6px}
/* Align inputs at bottom: stretch groups to equal height, labels stay at top, inputs pushed down */
#voyLayoutGrid .form-row,#voyLayoutGrid .form-row-3{align-items:stretch}
#voyLayoutGrid .form-row>.form-group,#voyLayoutGrid .form-row-3>.form-group{display:flex;flex-direction:column;margin-bottom:0}
#voyLayoutGrid .form-row>.form-group>.form-label,#voyLayoutGrid .form-row-3>.form-group>.form-label{flex:0 0 auto}
#voyLayoutGrid .form-row>.form-group>.form-input,#voyLayoutGrid .form-row>.form-group>.form-select,#voyLayoutGrid .form-row>.form-group>.time-compact,#voyLayoutGrid .form-row>.form-group>.date-compact,
#voyLayoutGrid .form-row-3>.form-group>.form-input,#voyLayoutGrid .form-row-3>.form-group>.form-select,#voyLayoutGrid .form-row-3>.form-group>.time-compact,#voyLayoutGrid .form-row-3>.form-group>.date-compact{margin-top:auto}
#voyLayoutGrid .form-group{position:relative}
/* Compact sizing for voyage calculator inputs */
#voyLayoutGrid input,#voyLayoutGrid select{padding:5px 8px 4px;font-size:12px;-webkit-appearance:none;appearance:none}
#voyLayoutGrid .kpi-grid{grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:6px}
#voyLayoutGrid .kpi-card{padding:5px 8px}
#voyLayoutGrid .kpi-label{margin-bottom:1px;font-size:9px}
#voyLayoutGrid .kpi-value{font-size:16px;letter-spacing:-0.3px}
#voyLayoutGrid .kpi-change{margin-top:1px;font-size:9px}
#voyLayoutGrid .section-label{margin:1px 0 1px;font-size:10px}
#voyLayoutGrid .result-panel{padding:8px 10px}
#voyLayoutGrid .result-value{font-size:18px}
#voyLayoutGrid .result-label{font-size:11px}
#voyLayoutGrid #voyLegBreakdown{margin-top:4px}
#voyLayoutGrid .table-wrap{margin-top:4px}
#voyLayoutGrid .tbl td{padding:3px 8px;font-size:12px}
#voyLayoutGrid .tbl th{padding:3px 8px;font-size:9px}
#voyLayoutGrid .tbl thead th[colspan]{font-size:12px !important;padding-bottom:4px !important}
#voyLayoutGrid .btn-group{gap:3px}
#voyLayoutGrid .btn-group .btn{font-size:10px;padding:3px 8px}
#voyLayoutGrid #voyLegBreakdown .card{padding:6px 8px}
#voyLayoutGrid #voyLegBreakdown>div{margin-bottom:4px;gap:6px}
#voyLayoutGrid #pnlFixtureCard{margin-bottom:4px}
#voyLayoutGrid #pnlFixtureCard .card-title{margin-bottom:4px}
#voyLayoutGrid #voyCIIBadge{margin-bottom:4px}
#voyLayoutGrid #voyDemurrageResult{margin-top:4px}
#voyLayoutGrid #voyWSCompare{margin-top:4px}
#voyLayoutGrid .detail-grid{gap:6px}
#voyLayoutGrid .detail-item{padding:4px 0}
#voyLayoutGrid .detail-label{font-size:10px;margin-bottom:1px}
#voyLayoutGrid .detail-value{font-size:12px}
#voyLayoutGrid .detail-section{margin-top:8px;padding-top:6px}
#voyLayoutGrid .detail-section-title{font-size:10px;margin-bottom:6px}
#voyLayoutGrid .tbl tr[onclick]{cursor:pointer;user-select:none}
#voyLayoutGrid .tbl tr[onclick]:hover td{background:rgba(56,132,244,0.06)}

/* ── Tier 1 Validation (Bible Ch.17) ────────────────────── */
.validation-banner{padding:10px 14px;border-radius:var(--radius);margin-bottom:12px;font-size:12px;line-height:1.5}
.validation-banner ul{margin:4px 0 0 16px;padding:0}
.validation-banner li{margin:2px 0}
.validation-error{background:rgba(220,38,38,0.08);border:1px solid rgba(220,38,38,0.3);color:#dc2626}
.validation-warning{background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.3);color:#d97706}
.validation-info{background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.3);color:#3b82f6}
.field-error{border-color:#dc2626 !important;box-shadow:0 0 0 1px rgba(220,38,38,0.2)}
/* Ownership + Employment badges */
.badge-owned{background:var(--accent);color:#fff;padding:2px 6px;border-radius:3px;font-size:10px;font-weight:600}
.badge-tc-in{background:transparent;color:var(--accent);border:1px solid var(--accent);padding:1px 5px;border-radius:3px;font-size:10px;font-weight:600}
.badge-spot{background:#22c55e;color:#fff;padding:2px 6px;border-radius:3px;font-size:10px}
.badge-tc-out{background:#3b82f6;color:#fff;padding:2px 6px;border-radius:3px;font-size:10px}
.badge-idle{background:#9ca3af;color:#fff;padding:2px 6px;border-radius:3px;font-size:10px}
.badge-drydock{background:#f59e0b;color:#fff;padding:2px 6px;border-radius:3px;font-size:10px}

/* ── Calculator V2 — Horizontal Strip Layout ─────────── */
.calc-strip{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:flex-end}
.calc-ig{display:flex;flex-direction:column;gap:1px}
.calc-ig label{font-size:9px;text-transform:uppercase;letter-spacing:0.5px;color:var(--text3);font-weight:500;white-space:nowrap}
.calc-ig input,.calc-ig select{font-size:11px;padding:4px 6px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text)}
.calc-ig input:focus,.calc-ig select:focus{border-color:var(--accent);outline:none}
.calc-ig input[readonly]{background:var(--bg);color:var(--text2)}
.calc-ig-e input{border-color:var(--accent-dim);background:var(--bg)}
.calc-ig-ws input{border-color:var(--accent);font-weight:600;color:var(--accent)!important;font-family:var(--font-mono);font-size:13px;text-align:center}
.calc-pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;font-size:9px}
.calc-pills span{padding:2px 8px;border-radius:99px;background:var(--surface);color:var(--text2);border:1px solid var(--border);white-space:nowrap;font-family:var(--font-mono);letter-spacing:-0.2px}
.calc-pills .pill-book{background:var(--accent-dim);color:var(--accent);font-weight:500;font-family:var(--font-sans)}
.calc-pills .pill-adv{cursor:pointer;color:var(--accent);border-color:var(--accent-dim);font-family:var(--font-sans)}
.calc-cb{padding:6px 16px;border-radius:var(--radius-sm);background:var(--accent);color:#fff;font-weight:600;font-size:11px;border:none;cursor:pointer;white-space:nowrap;font-family:inherit;transition:opacity .15s}
.calc-cb:hover{opacity:.88}

/* Result header */
.calc-rh{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--radius);margin-top:8px;background:var(--card);border:1px solid var(--border);overflow-x:auto;flex-wrap:nowrap;animation:calcFadeUp .25s ease .05s both}
.calc-rh.ok{border-left:3px solid var(--success)}
.calc-rh.bad{border-left:3px solid var(--error)}
.calc-rh .rm{display:flex;flex-direction:column;gap:0;min-width:fit-content;text-align:center;min-width:72px}
.calc-rh .rm-l{font-size:8px;text-transform:uppercase;letter-spacing:0.4px;color:var(--text3);margin-bottom:1px}
.calc-rh .rm-v{font-size:15px;font-weight:500;font-family:var(--font-mono);letter-spacing:-0.5px}
.calc-rh .sp{width:1px;height:28px;background:var(--border);flex-shrink:0}

/* Warnings */
.calc-wn{display:flex;align-items:center;gap:6px;padding:6px 12px;margin-top:6px;border-radius:var(--radius-sm);font-size:10px;background:var(--surface);border:1px solid var(--border)}
.calc-wn .wd{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.calc-wr{border-color:var(--error);background:color-mix(in srgb,var(--error) 8%,var(--bg))}
.calc-wa{background:color-mix(in srgb,var(--warning) 8%,var(--bg));border-color:rgba(0,0,0,0.06);color:var(--warning)}

/* Detail cards */
.calc-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
@media(max-width:900px){.calc-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.calc-cards{grid-template-columns:1fr}}
.calc-dc{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;animation:calcFadeUp .25s ease both}
.calc-dc:nth-child(1){animation-delay:.08s}
.calc-dc:nth-child(2){animation-delay:.12s}
.calc-dc:nth-child(3){animation-delay:.16s}
.calc-dc:nth-child(4){animation-delay:.2s}
.calc-dc-t{font-size:8px;text-transform:uppercase;letter-spacing:0.7px;color:var(--text3);font-weight:500;margin-bottom:5px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.calc-dr{display:flex;justify-content:space-between;align-items:baseline;padding:1.5px 0;font-size:11px}
.calc-dr-l{color:var(--text2)}
.calc-dr-v{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:-0.3px}
.calc-dr-s{font-size:9px;color:var(--text3);font-family:var(--font-mono);padding:0 0 1px}
.calc-dr-d{border-top:1px solid var(--border);margin:3px 0}
.calc-dr-t{font-weight:500}
.calc-dr-t .calc-dr-l,.calc-dr-t .calc-dr-v{font-weight:500;color:var(--text)}

/* Action buttons */
.calc-ac{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.calc-ab{padding:5px 14px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--border);font-size:10px;cursor:pointer;color:var(--text);font-family:inherit;transition:all .15s}
.calc-ab:hover{background:var(--card);border-color:var(--accent-dim)}
.calc-ab.ap{background:var(--accent);color:var(--bg);border-color:transparent;font-weight:500}

/* Sensitivity matrix */
.calc-sn{margin-top:8px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:9px 11px}
.calc-sn .tg{display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.calc-sn .tg-t{font-size:8px;font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:0.7px}
.calc-sn .tg-a{transition:transform .2s;font-size:9px;color:var(--text3)}
.calc-sn .tg-a.op{transform:rotate(90deg)}
.calc-sn table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:10px;font-family:var(--font-mono)}
.calc-sn td,.calc-sn th{padding:4px 3px;text-align:center}
.calc-sn .sh{color:var(--text3);font-weight:500;font-size:9px}
.calc-sn .srl{text-align:left;color:var(--text2);font-size:9px;font-family:var(--font-sans)}
.calc-sn .sy{background:var(--accent-dim);color:var(--accent);border-radius:3px;font-weight:500}
.calc-sn .sok{color:var(--success)}
.calc-sn .sbd{color:var(--error)}

/* Comparison cards */
.calc-cp{margin-top:10px}
.calc-ct{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:11px;font-weight:500}
.calc-cg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.calc-cc{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:10px;cursor:pointer;position:relative;transition:all .15s;width:calc(33.33% - 4px);min-width:240px}
.calc-cc:hover{border-color:var(--border);background:var(--surface)}
.calc-cc.cc-b{border-color:var(--accent)}
.calc-cc.ed{border:2px solid var(--accent)}
.calc-cc .ch{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:5px}
.calc-cc .cn{font-size:12px;font-weight:500}
.calc-cc .cr{font-size:10px;color:var(--text2)}
.calc-cc .cm{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.calc-cc .cv{padding:4px 6px;border-radius:var(--radius-sm);background:var(--surface);text-align:center}
.calc-cc .cl{font-size:8px;color:var(--text3);text-transform:uppercase;letter-spacing:0.3px}
.calc-cc .cvv{font-size:13px;font-weight:500;font-family:var(--font-mono);letter-spacing:-0.4px;margin-top:1px}
.calc-cc .cd{font-size:9px;color:var(--text3);font-family:var(--font-mono);margin-top:4px}
.calc-cc .ca{position:absolute;top:4px;right:4px;display:flex;gap:4px;opacity:0;transition:opacity .12s}
.calc-cc:hover .ca{opacity:1}
.calc-cc .cx{font-size:9px;padding:2px 5px;border-radius:3px;border:1px solid var(--border);background:var(--card);color:var(--text2);cursor:pointer;font-family:inherit}
.calc-cc .cx:hover{color:var(--text);border-color:var(--text3)}
.calc-cc .cx.xd{color:var(--error)!important;border-color:rgba(220,38,38,.2)!important}
.calc-cc .cx.xd:hover{background:color-mix(in srgb,var(--error) 8%,var(--bg))!important}
.calc-cc .eh{display:none;font-size:8px;color:var(--accent);margin-top:3px;font-style:italic}
.calc-cc.ed .eh{display:block}

/* Badges */
.calc-bd{display:inline-block;padding:1px 6px;border-radius:3px;font-size:8px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase}
.calc-bo{background:color-mix(in srgb,var(--success) 15%,var(--bg));color:var(--success)}
.calc-bt{background:color-mix(in srgb,var(--accent) 15%,var(--bg));color:var(--accent)}
.calc-bs{background:color-mix(in srgb,var(--info) 15%,var(--bg));color:var(--info)}

/* Animations */
@keyframes calcFadeUp{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

/* ── Calculator V2 Input Groups ─────────── */
.calc2-ig{display:flex;flex-direction:column;gap:1px}
.calc2-ig label{font-size:9px;text-transform:uppercase;letter-spacing:0.5px;color:var(--text3);font-weight:500;white-space:nowrap}
.calc2-ig input,.calc2-ig select{font-size:11px;padding:4px 6px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);pointer-events:auto!important;opacity:1!important;position:relative;z-index:1}
.calc2-ig-e input{border-color:var(--accent-dim,var(--border))}
.calc2-ig-ws input{border-color:var(--accent);font-weight:600;color:var(--accent)!important;font-family:var(--font-mono)}

/* ── Mobile ─────────────────────────────────────────────── */
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:90}
@media(max-width:768px){
  .topnav{flex-wrap:wrap;height:auto;min-height:var(--topnav-h);padding:6px 12px}
  .topnav-brand{margin-right:auto}
  .topnav-groups{order:3;width:100%;overflow-x:auto;padding:4px 0 2px}
  .topnav-group-btn{padding:4px 8px;font-size:11px}
  .topnav-right{order:2}
  .hamburger{display:none}
  .grid-2,.grid-3,.grid-4,.grid-1-2,.grid-2-1,.grid-voy-compare,.grid-voy-3col{grid-template-columns:1fr}
  .grid-voy-3col{height:auto}
  .grid-voy-3col .voy-left-panel,.grid-voy-3col .voy-center-panel,.grid-voy-3col .voy-right-panel{height:auto}
  .content.voy-fullwidth{padding:6px}
  .comparison-row{gap:8px}
  .comparison-row{grid-template-columns:1fr}
  .cmp-card{width:100%}
  .form-row,.form-row-3,.form-row-4{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .content{padding:10px}
  .modal{max-width:100%}
  .detail-grid{grid-template-columns:1fr}
  .modal-wide .detail-grid{grid-template-columns:1fr}
  .ops-kpi-grid{grid-template-columns:repeat(2,1fr)}
  #vdTabQ88 .detail-grid{grid-template-columns:1fr 1fr}
  .subtab-bar{overflow-x:auto;flex-wrap:nowrap;padding:4px 0 8px}
  .subtab-pill{font-size:11px;padding:4px 10px}
}
/* ── Leaflet dark overrides ────────────────────────────── */
.leaflet-container{background:var(--bg)!important;font-family:var(--font)}
.leaflet-control-zoom a{background:var(--card)!important;color:var(--text)!important;border-color:var(--border)!important}
.leaflet-control-zoom a:hover{background:var(--surface)!important}
.leaflet-tooltip{background:var(--bg);color:var(--text);border:1px solid var(--border);font-size:12px;padding:4px 8px;border-radius:var(--radius-xs);box-shadow:0 2px 8px rgba(0,0,0,0.4)}
.leaflet-tooltip-top:before{border-top-color:var(--border)}
.marker-cluster div{background:rgba(10,132,255,0.7)!important;color:#fff!important}
.marker-cluster{background:rgba(10,132,255,0.3)!important}
/* ── Port autocomplete dropdown ──────────────────────────── */
.port-autocomplete{position:fixed;z-index:9999;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);max-height:280px;overflow-y:auto;display:none;box-shadow:0 4px 16px rgba(0,0,0,0.5)}
.port-autocomplete.active{display:block}
.port-ac-item{padding:8px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.port-ac-item:last-child{border-bottom:none}
.port-ac-item:hover,.port-ac-item.selected{background:var(--surface)}
.port-ac-item .port-name{font-weight:500}
.port-ac-item .port-region{font-size:11px;color:var(--text2)}
/* ── SOF view switchboard pills ──────────────────────────── */
.sof-view-pill { background: var(--surface2); color: var(--text2); border: 1px solid var(--border); }
.sof-view-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ══ SOF Timeline Component ══════════════════════════════════
   Vertical timeline: time left, connector line center, details right.
   Color-coded badges. Works in all 9 themes via CSS custom properties.
   ════════════════════════════════════════════════════════════ */
.sof-timeline{position:relative;padding:8px 0}
.sof-timeline-item{display:flex;align-items:flex-start;gap:12px;padding:6px 0;position:relative;min-height:42px}
.sof-timeline-item:not(:last-child)::after{
  content:'';position:absolute;left:92px;top:30px;bottom:-6px;width:2px;background:var(--border)
}
.sof-timeline-time{width:80px;flex-shrink:0;text-align:right;font-family:var(--font-mono,'monospace');font-size:11px;color:var(--text2);padding-top:3px;line-height:1.3}
.sof-timeline-time .sof-date{font-size:10px;color:var(--text3);display:block}
.sof-timeline-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;margin-top:4px;border:2px solid var(--card);box-shadow:0 0 0 2px var(--border)}
.sof-timeline-body{flex:1;min-width:0}
.sof-timeline-title{font-size:12px;font-weight:600;color:var(--text);line-height:1.4}
.sof-timeline-meta{font-size:11px;color:var(--text2);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}
.sof-timeline-remarks{font-size:11px;color:var(--text3);font-style:italic;margin-top:2px}
.sof-timeline-laytime{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;padding:1px 6px;border-radius:var(--radius-badge);margin-left:6px}

/* Badge colors: green=cargo ops, blue=sailing, amber=NOR/anchor, red=delays */
.sof-dot-cargo{background:var(--success);box-shadow:0 0 0 2px rgba(var(--success),0.2)}
.sof-dot-sailing{background:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent),0.2)}
.sof-dot-nor{background:var(--warning);box-shadow:0 0 0 2px rgba(var(--warning),0.2)}
.sof-dot-delay{background:var(--error);box-shadow:0 0 0 2px rgba(var(--error),0.2)}
.sof-dot-default{background:var(--text3);box-shadow:0 0 0 2px var(--border)}

.sof-badge-cargo{background:rgba(48,209,88,0.12);color:var(--success)}
.sof-badge-sailing{background:rgba(56,132,244,0.12);color:var(--accent)}
.sof-badge-nor{background:rgba(255,214,10,0.12);color:var(--warning)}
.sof-badge-delay{background:rgba(255,69,58,0.12);color:var(--error)}

.sof-laytime-on{background:rgba(48,209,88,0.1);color:var(--success)}
.sof-laytime-off{background:rgba(255,69,58,0.1);color:var(--error)}
.sof-laytime-count{background:rgba(56,132,244,0.1);color:var(--accent)}

/* Empty timeline state */
.sof-timeline-empty{text-align:center;padding:32px 16px;color:var(--text3);font-size:12px}
.sof-timeline-empty svg{width:24px;height:24px;margin-bottom:8px;opacity:0.4}

/* Actions row */
.sof-timeline-actions{display:flex;gap:6px;margin-top:4px}
.sof-timeline-actions .btn{font-size:10px;padding:2px 8px}

/* ── Agent Chat UI — Floating Modal ──────────────────────── */
.agent-chat-fab{
  position:fixed;bottom:24px;right:24px;z-index:9998;
  width:44px;height:44px;border-radius:50%;border:none;
  background:var(--accent);color:#fff;cursor:grab;
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
  display:flex;align-items:center;justify-content:center;
  transition:all 0.2s ease;font-size:18px;
  opacity:0.65;
}
.agent-chat-fab:hover{transform:scale(1.08);box-shadow:0 6px 24px rgba(0,0,0,0.3);opacity:1}
.agent-chat-fab:active{cursor:grabbing}
.agent-chat-fab-active{background:var(--accent-hover)}
.agent-chat-fab-icon{line-height:1}

.agent-chat-modal{
  position:fixed;bottom:88px;right:24px;z-index:9999;
  width:420px;height:560px;max-height:80vh;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,0.15);
  display:flex;flex-direction:column;overflow:hidden;
  transition:opacity 0.2s ease, transform 0.2s ease;
}
.agent-chat-hidden{display:none!important}
.agent-chat-minimized .agent-chat-body,
.agent-chat-minimized .agent-chat-footer{display:none}
.agent-chat-minimized{height:auto}

.agent-chat-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--border);
  background:var(--surface);cursor:move;user-select:none;
  border-radius:var(--radius) var(--radius) 0 0;
}
.agent-chat-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--text)}
.agent-chat-icon{font-size:18px}
.agent-chat-header-btns{display:flex;gap:4px}
.agent-chat-btn-min,.agent-chat-btn-close{
  background:none;border:none;cursor:pointer;
  width:28px;height:28px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--text2);font-size:16px;line-height:1;transition:all 0.15s;
}
.agent-chat-btn-min:hover{background:var(--surface);color:var(--text)}
.agent-chat-btn-close:hover{background:var(--surface);color:var(--text)}

.agent-chat-body{
  flex:1;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:12px;
}

/* Welcome screen */
.agent-chat-welcome{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:20px 8px;flex:1;
}
.agent-chat-welcome-icon{font-size:36px;margin-bottom:8px;opacity:0.6}
.agent-chat-welcome-title{font-size:16px;font-weight:600;color:var(--text);margin-bottom:4px}
.agent-chat-welcome-text{font-size:12px;color:var(--text2);margin-bottom:16px;line-height:1.5}
.agent-chat-suggestions{display:flex;flex-direction:column;gap:6px;width:100%}
.agent-chat-suggestion{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:8px 12px;font-size:11px;color:var(--text2);cursor:pointer;
  text-align:left;transition:all 0.15s;line-height:1.4;
}
.agent-chat-suggestion:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Messages */
.agent-msg{display:flex;flex-direction:column}
.agent-msg-user{align-items:flex-end}
.agent-msg-assistant{align-items:flex-start}
.agent-msg-bubble{
  max-width:85%;padding:10px 14px;border-radius:var(--radius-sm);
  font-size:13px;line-height:1.5;word-wrap:break-word;
}
.agent-msg-user-bubble{
  background:var(--accent);color:#fff;
  border-bottom-right-radius:var(--radius-xs);
}
.agent-msg-assistant-bubble{
  background:var(--surface);color:var(--text);
  border:1px solid var(--border);
  border-bottom-left-radius:var(--radius-xs);
}
.agent-msg-assistant-bubble strong{color:var(--accent)}
.agent-msg-assistant-bubble code{
  background:var(--border);padding:1px 4px;border-radius:3px;
  font-family:var(--font-mono);font-size:11px;
}
.agent-bullet{color:var(--accent);font-weight:700;margin-right:4px}
.agent-money{color:var(--success);font-weight:600}

/* Tool execution indicator */
.agent-msg-tool{
  display:flex;align-items:center;gap:6px;
  padding:4px 8px;font-size:11px;color:var(--text3);
  font-style:italic;
}
.agent-msg-tool-icon{font-size:13px}
.agent-msg-tool-name{font-family:var(--font-mono);font-size:10px}

/* Feedback buttons */
.agent-feedback-row{
  display:flex;align-items:center;gap:4px;
  margin-top:2px;padding-left:2px;flex-wrap:wrap;
}
.agent-feedback-btn{
  background:none;border:none;cursor:pointer;
  font-size:14px;opacity:0.3;padding:2px 4px;
  border-radius:4px;transition:opacity 0.15s, background 0.15s;
  line-height:1;
}
.agent-feedback-btn:hover{opacity:0.8;background:var(--surface)}
.agent-feedback-btn.agent-feedback-active{opacity:1}
.agent-feedback-confirm{
  font-size:12px;color:var(--success);margin-left:4px;
  transition:opacity 0.5s;
}
.agent-feedback-form{
  display:flex;flex-direction:column;gap:6px;
  width:100%;margin-top:6px;
}
.agent-feedback-select{
  font-size:11px;padding:4px 8px;border:1px solid var(--border);
  border-radius:var(--radius-xs);background:var(--surface);
  color:var(--text);font-family:var(--font);
}
.agent-feedback-text{
  font-size:11px;padding:6px 8px;border:1px solid var(--border);
  border-radius:var(--radius-xs);background:var(--surface);
  color:var(--text);font-family:var(--font);resize:vertical;
}
.agent-feedback-submit{
  align-self:flex-end;font-size:11px;padding:4px 12px;
  background:var(--accent);color:#fff;border:none;
  border-radius:var(--radius-xs);cursor:pointer;
  font-family:var(--font);
}
.agent-feedback-submit:hover{opacity:0.9}

/* Typing indicator */
.agent-typing .agent-msg-bubble{padding:10px 18px}
.agent-typing-dots span{
  animation:agentDot 1.4s infinite ease-in-out;
  font-size:18px;font-weight:700;color:var(--text3);
}
.agent-typing-dots span:nth-child(2){animation-delay:0.2s}
.agent-typing-dots span:nth-child(3){animation-delay:0.4s}
@keyframes agentDot{
  0%,80%,100%{opacity:0.2}
  40%{opacity:1}
}

/* Footer / Input */
.agent-chat-footer{
  border-top:1px solid var(--border);padding:10px 12px 8px;
  background:var(--card);
}
.agent-chat-input-row{display:flex;align-items:flex-end;gap:8px}
.agent-chat-input{
  flex:1;resize:none;border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:8px 12px;
  font-size:13px;font-family:var(--font);color:var(--text);
  background:var(--surface);outline:none;
  max-height:120px;line-height:1.4;
  transition:border-color 0.15s;
}
.agent-chat-input:focus{border-color:var(--accent)}
.agent-chat-input::placeholder{color:var(--text3)}
.agent-chat-send{
  background:var(--accent);border:none;border-radius:var(--radius-sm);
  width:36px;height:36px;cursor:pointer;color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.15s;flex-shrink:0;
}
.agent-chat-send:hover{background:var(--accent-hover)}
.agent-chat-send:disabled{opacity:0.5;cursor:not-allowed}
.agent-chat-footer-meta{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:6px;
}
.agent-chat-status{font-size:10px;color:var(--text3)}
.agent-chat-clear{
  background:none;border:none;font-size:10px;color:var(--text3);
  cursor:pointer;padding:2px 6px;border-radius:var(--radius-xs);
}
.agent-chat-clear:hover{color:var(--accent);background:var(--surface)}

/* ── Mode Navigation Bar ───────────────────────────── */
.nav-mode-bar{
  display:flex;gap:2px;padding:4px 8px;
  border-bottom:1px solid var(--border);
  background:var(--bg);
}
.nav-mode-btn{
  padding:6px 16px;border:none;border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  background:transparent;color:var(--text2);font-size:12px;font-weight:600;
  cursor:pointer;text-transform:uppercase;letter-spacing:0.5px;
  transition:all 0.15s ease;
}
.nav-mode-btn:hover{background:var(--surface);color:var(--text)}
.nav-mode-btn.active{
  background:var(--accent);color:#fff;
}
/* T-002: Two-row nav — modes on top, children below. Visible in all themes. */
.nav-modes-row{display:flex;justify-content:center;gap:6px;padding:6px 0 4px;flex-shrink:0}
.nav-mode-btn{border:1px solid var(--border);background:var(--card);color:var(--text);font-size:12px;font-weight:600;letter-spacing:0.04em;padding:6px 18px;cursor:pointer;border-radius:var(--radius);transition:all var(--transition);font-family:var(--font);white-space:nowrap}
.nav-mode-btn:hover{background:var(--surface);border-color:var(--accent)}
.nav-mode-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}
.nav-mode-sep{width:1px;height:16px;background:var(--border);opacity:0.3;flex-shrink:0;margin:0 2px}
/* FD-011: Segment selector pills (Tanker / Dry Bulk) */
.nav-segment-pills{display:flex;gap:2px;padding:1px;background:rgba(255,255,255,0.04);border-radius:var(--radius-sm);margin-right:2px;flex-shrink:0}
.nav-segment-pill{border:none;background:transparent;color:var(--sidebar-text);font-size:10px;font-weight:600;letter-spacing:0.05em;padding:4px 8px;cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition);font-family:var(--font);opacity:0.55;white-space:nowrap}
.nav-segment-pill:hover{opacity:0.85;background:rgba(255,255,255,0.06)}
.nav-segment-pill.active{background:var(--success);color:var(--bg);opacity:1}
.nav-tabs-row{display:flex;gap:2px;padding:0 4px;flex:1;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.nav-tabs-row::-webkit-scrollbar{height:3px}
.nav-tabs-row::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.nav-tabs-row::-webkit-scrollbar-track{background:transparent}

/* ── Entity Cards ──────────────────────────────────── */
.entity-card{
  display:inline-flex;align-items:center;gap:4px;
  cursor:pointer;padding:2px 6px;border-radius:var(--radius-xs);
  transition:background 0.1s ease;
}
.entity-card:hover{background:var(--surface);}
.entity-card strong{color:var(--accent);font-weight:600;}
.entity-card.compact{font-size:12px;}
.entity-card .text-muted{color:var(--text3);font-size:11px;}

/* ═══ Calculator V2 ═══ */
.calc2-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius,8px);padding:10px 12px;margin-bottom:6px;animation:calc2fade .25s ease}
.calc2-strip{display:flex;gap:5px;align-items:flex-end;flex-wrap:wrap}
.calc2-ig{display:flex;flex-direction:column;gap:1px}
.calc2-ig label{font-size:8px;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;font-weight:500}
.calc2-ig input,.calc2-ig select{font-family:var(--font-body,system-ui);font-size:11px;padding:5px 6px;border:1px solid var(--border);border-radius:4px;background:var(--surface);color:var(--text);outline:none;transition:border-color .15s}
.calc2-ig input:focus,.calc2-ig select:focus{border-color:var(--accent)}
.calc2-ig input[readonly]{background:var(--bg);color:var(--text2)}
.calc2-ig-e input{font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:11px}
.calc2-ig-ws input{font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:13px;font-weight:500;color:var(--accent);text-align:center;width:52px}
.calc2-pills{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.calc2-pills span{font-size:9px;color:var(--text3);background:var(--surface);padding:2px 7px;border-radius:3px;font-family:var(--font-mono,'JetBrains Mono',monospace);letter-spacing:-.2px}
.calc2-pill-fifo{color:var(--success)!important;background:rgba(34,197,94,.06)!important;border:1px solid rgba(34,197,94,.15)}
.calc2-pill-book{color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 8%,var(--bg))!important}
.calc2-pill-adv{color:var(--accent)!important;cursor:pointer;background:none!important;font-family:var(--font-body,system-ui)!important}
.calc2-btn{font-size:11px;font-weight:500;padding:6px 16px;background:var(--accent);color:#000;border:none;border-radius:5px;cursor:pointer;transition:opacity .15s;white-space:nowrap}
.calc2-btn:hover{opacity:.88}
@keyframes calc2fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

/* Result header */
.calc2-rh{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:var(--radius,8px);margin-top:6px;background:var(--card);border:1px solid var(--border);overflow-x:auto;flex-wrap:nowrap;animation:calc2fade .25s ease .05s both}
.calc2-rh-ok{border-left:3px solid var(--success)}
.calc2-rh-bad{border-left:3px solid var(--error)}
.calc2-sp{width:1px;height:28px;background:var(--border);flex-shrink:0}
.calc2-rm{text-align:center;min-width:72px}
.calc2-rm-l{font-size:8px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:1px}
.calc2-rm-v{font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:15px;font-weight:500;letter-spacing:-.5px}

/* Badges */
.calc2-bd{display:inline-block;padding:2px 5px;border-radius:3px;font-size:8px;font-weight:600;letter-spacing:.2px;text-transform:uppercase}
.calc2-bd-own{background:color-mix(in srgb,var(--success) 12%,var(--bg));color:var(--success)}
.calc2-bd-tc{background:color-mix(in srgb,var(--warning,#FBBF24) 12%,var(--bg));color:var(--warning,#FBBF24)}
.calc2-bd-spot{background:color-mix(in srgb,var(--info,#60A5FA) 12%,var(--bg));color:var(--info,#60A5FA)}

/* Detail cards */
.calc2-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:6px}
@media(max-width:900px){.calc2-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.calc2-cards{grid-template-columns:1fr}}
.calc2-dc{background:var(--card);border:1px solid var(--border);border-radius:var(--radius,8px);padding:9px 11px;animation:calc2fade .25s ease both}
.calc2-dc:nth-child(1){animation-delay:.08s}.calc2-dc:nth-child(2){animation-delay:.12s}.calc2-dc:nth-child(3){animation-delay:.16s}.calc2-dc:nth-child(4){animation-delay:.2s}
.calc2-dc-t{font-size:8px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;margin-bottom:5px;padding-bottom:4px;border-bottom:1px solid var(--border)}
.calc2-dr{display:flex;justify-content:space-between;align-items:baseline;padding:1.5px 0;font-size:11px}
.calc2-dr-l{color:var(--text2)}
.calc2-dr-v{font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:500;font-size:11px;letter-spacing:-.3px}
.calc2-dr-s{font-size:9px;color:var(--text3);font-family:var(--font-mono,'JetBrains Mono',monospace);padding:0 0 1px}
.calc2-dr-d{border-top:1px solid var(--border);margin:3px 0}
.calc2-dr-t .calc2-dr-l,.calc2-dr-t .calc2-dr-v{font-weight:600;color:var(--text)}

/* Action buttons */
.calc2-actions{display:flex;gap:5px;margin-top:6px}
.calc2-ab{font-size:10px;padding:4px 12px;background:transparent;border:1px solid var(--border);border-radius:4px;color:var(--text2);cursor:pointer;transition:all .15s}
.calc2-ab:hover{border-color:var(--text3);color:var(--text);background:var(--surface)}
.calc2-ab-primary{background:var(--accent);color:#000;border-color:transparent;font-weight:500}

/* Comparison cards */
.calc2-cmp-grid{display:flex;gap:6px;flex-wrap:wrap}
.calc2-cc{background:var(--card);border:1px solid var(--border);border-radius:var(--radius,8px);padding:9px 11px;min-width:180px;cursor:pointer;transition:border-color .15s}
.calc2-cc:hover{border-color:var(--accent)}

/* Sensitivity matrix */
.calc2-sn{background:var(--card);border:1px solid var(--border);border-radius:var(--radius,8px);padding:0;margin-top:6px}
.calc2-sn-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;cursor:pointer;user-select:none}
.calc2-sn-title{font-size:8px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.7px}
.calc2-sn-arrow{color:var(--text3);font-size:9px;transition:transform .2s}
.calc2-sn-table{width:100%;border-collapse:collapse;margin:0 12px 8px;width:calc(100% - 24px)}
.calc2-sn-table td{padding:4px 8px;text-align:center;font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:10px;border:1px solid var(--border)}
.calc2-sn-sh{font-weight:600;color:var(--text2);background:var(--surface);font-size:9px}
.calc2-sn-rl{text-align:right!important;color:var(--text2);font-size:9px;background:var(--surface)}
.calc2-sn-cur{background:color-mix(in srgb,var(--accent) 15%,var(--bg));color:var(--accent);font-weight:700;border-radius:3px}
.calc2-sn-ok{color:var(--success)}
.calc2-sn-bad{color:var(--error)}

/* Comparison cards improved */
.calc2-cmp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:11px;font-weight:500}
.calc2-cc-best{border-color:var(--accent)}
.calc2-cc-edit{border:2px solid var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent)}
.calc2-cc-actions{position:absolute;top:4px;right:4px;display:flex;gap:3px;opacity:0;transition:opacity .12s}
.calc2-cc:hover .calc2-cc-actions{opacity:1}
.calc2-cc-btn{font-size:8px;padding:2px 5px;border-radius:3px;border:1px solid var(--border);background:var(--card);color:var(--text2);cursor:pointer}
.calc2-cc-btn:hover{color:var(--text);border-color:var(--text3)}
.calc2-cc-del{color:var(--error)!important;border-color:color-mix(in srgb,var(--error) 30%,var(--border))!important}
.calc2-cc-del:hover{background:color-mix(in srgb,var(--error) 10%,var(--bg))!important}
.calc2-cc-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:5px}
.calc2-cc-name{font-size:11px;font-weight:600}
.calc2-cc-route{font-size:9px;color:var(--text3)}
.calc2-cc-metrics{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-bottom:4px}
.calc2-cc-metric{padding:4px 6px;border-radius:4px;background:var(--surface);text-align:center}
.calc2-cc-ml{font-size:8px;color:var(--text3);text-transform:uppercase;letter-spacing:.3px}
.calc2-cc-mv{font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:13px;font-weight:600;letter-spacing:-.4px;margin-top:1px}
.calc2-cc-detail{font-size:9px;color:var(--text3);font-family:var(--font-mono,'JetBrains Mono',monospace);margin-top:4px}
.calc2-cc-editing{font-size:8px;color:var(--accent);margin-top:3px;font-style:italic;display:block}
/* Warnings strip */
.calc2-warn-strip{display:flex;flex-wrap:wrap;gap:8px 16px;padding:6px 12px;background:color-mix(in srgb,var(--warning,#e5a00d) 8%,var(--bg));border:1px solid color-mix(in srgb,var(--warning,#e5a00d) 20%,var(--border));border-radius:var(--radius,8px);margin-top:6px}
.calc2-warn-item{display:flex;align-items:center;gap:5px;font-size:9px;color:var(--text2)}
.calc2-warn-dot{width:6px;height:6px;border-radius:50%;background:var(--warning,#e5a00d);flex-shrink:0}
/* ═══ Calculator V2 additions — cv2-* — do not touch existing variables ═══ */
#tab-voyage{font-family:'DM Sans',var(--font-sans,-apple-system,system-ui,sans-serif)}
#tab-voyage .mono{font-family:'JetBrains Mono',var(--font-mono,monospace)}
.cv2-group{display:flex;gap:4px;align-items:flex-end;padding:0 8px;border-right:1px solid var(--border)}
.cv2-group:last-child{border-right:none;padding-right:0}
.cv2-group-label{font-size:8px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;width:100%;margin-bottom:2px}
.cv2-row2{margin-top:4px;padding-top:4px;border-top:1px solid var(--border)}
/* Result bar */
.cv2-rb{display:flex;align-items:stretch;margin-top:6px;border-radius:var(--radius-sm,4px);overflow:visible;border:1px solid var(--border);border-left:3px solid var(--success)}
.cv2-rb.neg{border-left-color:var(--error)}
.cv2-rb-cell{display:flex;flex-direction:column;justify-content:center;padding:5px 9px;background:var(--card);border-right:1px solid var(--border);min-width:fit-content}
.cv2-rb-cell:last-child{border-right:none}
.cv2-rb-l{font-size:8px;color:var(--text3);font-weight:500;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.cv2-rb-v{font-size:13px;font-weight:700;font-family:'JetBrains Mono',var(--font-mono,monospace);white-space:nowrap}
/* BE cell */
.cv2-be-cell{background:var(--surface);cursor:pointer;position:relative;padding:5px 10px}
.cv2-be-cell:hover{background:var(--card)}
.cv2-be-row{display:flex;align-items:baseline;gap:6px;flex-wrap:nowrap}
.cv2-be-dots{display:flex;gap:3px;align-items:center;margin-left:4px}
.cv2-be-dot{width:4px;height:4px;border-radius:50%;background:var(--warning);flex-shrink:0}
.cv2-be-dot-red{background:var(--error)}
.cv2-be-pop{display:none;position:absolute;top:calc(100% + 2px);left:0;z-index:100;padding:8px 12px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm,4px);box-shadow:0 8px 24px rgba(0,0,0,.5);min-width:260px}
.cv2-be-pop.open{display:block}
.cv2-be-pop-row{display:flex;justify-content:space-between;padding:2px 0;font-size:10px}
.cv2-be-pop-l{color:var(--text2)}
.cv2-be-pop-v{font-family:'JetBrains Mono',var(--font-mono,monospace);font-weight:600}
.cv2-be-pop-sep{border-top:1px solid var(--border);margin:3px 0}
.cv2-be-pop-bold .cv2-be-pop-v{font-weight:700}
.cv2-be-pop-hint{font-size:8px;color:var(--text3);font-style:italic;margin-top:3px}
.cv2-be-pop-warns{margin-top:5px;padding-top:4px;border-top:1px solid var(--border)}
.cv2-be-warn-item{font-size:8px;color:var(--text2);padding:1px 0;display:flex;align-items:center;gap:4px}
.cv2-be-warn-item::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--warning);flex-shrink:0}
.cv2-be-warn-red::before{background:var(--error)}
/* VOY-001 chip */
.cv2-voy-id{font-family:'JetBrains Mono',var(--font-mono,monospace);font-size:9px;font-weight:700;color:var(--accent);padding:2px 5px;background:rgba(200,169,96,.08);border-radius:var(--radius-sm,4px);border:1px solid rgba(200,169,96,.18);white-space:nowrap}
/* Demurrage inline result tag */
.cv2-dem-tag{font-size:9px;color:var(--warning);font-family:'JetBrains Mono',var(--font-mono,monospace);padding:3px 8px;background:rgba(234,179,8,.06);border:1px solid rgba(234,179,8,.12);border-radius:var(--radius-sm,4px);height:26px;display:flex;align-items:center}
/* Popbar */
.cv2-popbar{display:flex;gap:3px;margin-top:5px}
.cv2-pop{padding:4px 10px;border-radius:var(--radius-sm,4px);background:var(--card);border:1px solid var(--border);font-size:9px;cursor:pointer;color:var(--text3)}
.cv2-pop:hover{border-color:var(--text3);color:var(--text)}
/* Comparison section */
.cv2-comp-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.cv2-comp-title{font-size:12px;font-weight:700}
.cv2-comp-stat{font-size:10px;color:var(--text2);font-family:'JetBrains Mono',var(--font-mono,monospace)}
.cv2-tog{display:flex;background:var(--surface);border-radius:var(--radius-sm,4px);padding:1px;border:1px solid var(--border)}
.cv2-tog button{padding:3px 8px;border-radius:3px;font-size:10px;cursor:pointer;border:none;background:transparent;color:var(--text3)}
.cv2-tog button.on{background:var(--card);color:var(--accent);font-weight:600}
.cv2-cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px}
/* Individual comparison card */
.cv2-c{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm,4px);padding:10px 12px;cursor:pointer;position:relative}
.cv2-c:hover{border-color:color-mix(in srgb,var(--text3) 40%,var(--border))}
.cv2-c-pre{border:2px solid #3b82f6;background:rgba(59,130,246,.06)}
.cv2-c-edit{border:2px solid var(--accent);background:rgba(200,169,96,.06)}
.cv2-c-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:3px}
.cv2-c-voy{font-family:'JetBrains Mono',var(--font-mono,monospace);font-size:11px;font-weight:700;color:var(--accent)}
.cv2-c-badges{display:flex;gap:3px;align-items:center}
.cv2-c-badge{font-size:8px;padding:2px 5px;border-radius:2px;font-weight:700}
.cv2-cb-pre{background:rgba(59,130,246,.08);color:#3b82f6;border:1px solid rgba(59,130,246,.2)}
.cv2-cb-edit{background:rgba(200,169,96,.08);color:var(--accent);border:1px solid rgba(200,169,96,.18)}
.cv2-cb-best{background:rgba(63,185,80,.08);color:var(--success);border:1px solid rgba(63,185,80,.15)}
.cv2-c-name{font-size:12px;font-weight:700;color:var(--text)}
.cv2-c-sub{font-size:10px;color:var(--text2)}
.cv2-c-route{font-size:10px;color:var(--text);margin-top:2px}
.cv2-c-dist{font-size:9px;color:var(--text2);font-family:'JetBrains Mono',var(--font-mono,monospace)}
.cv2-c-kpi{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:6px 0}
.cv2-c-kpi-box{padding:5px 6px;border-radius:var(--radius-sm,4px);background:var(--card);text-align:center;border:1px solid var(--border)}
.cv2-c-kpi-k{font-size:8px;color:var(--text2);text-transform:uppercase;font-weight:500}
.cv2-c-kpi-v{font-size:14px;font-weight:700;font-family:'JetBrains Mono',var(--font-mono,monospace)}
.cv2-c-foot{font-size:9px;color:var(--text2);font-family:'JetBrains Mono',var(--font-mono,monospace);margin-top:2px}
.cv2-c-btns{display:flex;gap:3px;margin-top:5px;flex-wrap:wrap}
.cv2-c-btn{font-size:9px;padding:3px 8px;border-radius:var(--radius-sm,4px);border:1px solid var(--border);background:var(--card);color:var(--text2);cursor:pointer}
.cv2-c-btn:hover{color:var(--text)}
.cv2-c-btn-gold{color:var(--accent);border-color:rgba(200,169,96,.3)}
/* Basis toggle in freight group */
.cv2-group .cv2-tog{margin-top:2px}