:root {
        --accent: #FF7A00;
        --accent-ink: #ffffff;
        --gridMinor: rgba(0, 0, 0, 0.08);
        --gridMajor: rgba(0, 0, 0, 0.16);
        --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
        --z-floor: 1;
        --z-overlay: 2;
        --z-labels: 3;
        --z-toolbar: 8;
        --z-toast: 9999;
      }
      body { font-size: clamp(14px, 1.2vw, 16px); font-family: var(--font-sans); }
      /* Generic viewport layering skeleton */
      #viewport { position: relative; }
      #floor, #overlay, #labels { position: absolute; inset: 0; }
      #floor { z-index: var(--z-floor); }
      #overlay { z-index: var(--z-overlay); }
      #labels { z-index: var(--z-labels); pointer-events: none; }
      /* Minimal toolbar styling */
      #toolbar {
        position: sticky; top: 0; z-index: var(--z-toolbar);
        display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
        padding: 8px 12px; border-bottom: 1px solid rgba(0,0,0,.1);
        background: rgba(255, 255, 255, 0.04);
        backdrop-filter: saturate(120%) blur(6px);
      }
      #toolbar .spacer { flex: 1; }
      /* Language switcher (toolbar) */
      .hdr-lang { position: relative; margin-left: 8px; }
      /* Make the language button same size as theme toggle */
      .hdr-btn { width:62px; height:28px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 8px; border-radius:20px; border:1px solid var(--line); background: var(--soft); color: var(--ink); cursor:pointer; }
      .hdr-btn .hdr-flag { font-size: 14px; line-height: 1; }
      .hdr-btn .hdr-lang-code { font-weight: 700; letter-spacing: .5px; font-size: 12px; }
      /* Override global .vp svg sizing for this tiny chevron icon */
      #toolbar .hdr-ico { width:14px !important; height:14px !important; display:inline-block !important; background: none !important; }
      .hdr-popover { position:absolute; right:0; top:calc(100% + 6px); background: var(--card); border:1px solid var(--line); border-radius:12px; padding:6px; box-shadow: 0 12px 28px rgba(0,0,0,.25); min-width: 220px; z-index: 50; }
      .hdr-popover[hidden] { display: none; }
      .hdr-lang-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
      .hdr-lang-list button { width:100%; display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:var(--rad); border:1px solid transparent; background:transparent; color:inherit; cursor:pointer; }
      .hdr-lang-list button[aria-checked="true"] { background: var(--soft); border-color: var(--line); }
      .hdr-lang-list b { min-width: 26px; text-align:center; }
      .hdr-lang-list em { opacity:.8; font-style: normal; }
      #toolbar button {
        appearance: none; border: none; cursor: pointer;
        background: var(--accent); color: var(--accent-ink);
        padding: 6px 10px; border-radius: var(--rad); font-weight: 600;
      }
      #toolbar button.secondary {
        background: transparent; color: inherit; border: 1px dashed rgba(127,127,127,.35);
      }
      #toolbar #status { margin-left: auto; color: inherit; opacity: .85; }
      /* Toast */
      #toast {
        position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
        z-index: var(--z-toast); display: none;
        background: var(--accent); color: var(--accent-ink);
        padding: 8px 12px; border-radius: var(--rad); box-shadow: 0 8px 24px rgba(0,0,0,.18);
      }
      /* ===================== THEME TOKENS ===================== */
      .vp {
        --bg: #0f1117;
        --ink: #e8eef9;
        --muted: #9fb0ca;
        --accent: #ff5a00;
        --accent-ink: #fff;
        --ok: #1fcf6d;
        --bad: #ff4d4f;
        --line: #223047;
        --card: #121a2b;
        --soft: #1a2236;
        --rad: 12px;
        --gap: 12px;
        --grid: 5;
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial,
          sans-serif;
        color: var(--ink);
      }
      @media (prefers-color-scheme: light) {
        .vp:not([data-theme="dark"]) {
          --bg: #f5f7fb;
          --ink: #141a2a;
          --muted: #5b6a85;
          --accent: #ef5a00;
          --accent-ink: #fff;
          --ok: #0f9b5f;
          --bad: #d43030;
          --line: #d5dcef;
          --card: #ffffff;
          --soft: #f0f3fa;
        }
      }
      .vp[data-theme="light"] {
        --bg: #f5f7fb;
        --ink: #141a2a;
        --muted: #5b6a85;
        --accent: #ef5a00;
        --accent-ink: #fff;
        --ok: #0f9b5f;
        --bad: #d43030;
        --line: #d5dcef;
        --card: #ffffff;
        --soft: #f0f3fa;
      }

      /* Sepia / Reading mode (ciepły, żółtawy) */
      .vp[data-theme="sepia"] {
        --bg: #f6f1e3;       /* kremowe tło */
        --ink: #2b2110;      /* brązowy tusz */
        --muted: #6b5b45;
        --accent: #c36a00;   /* przygaszony pomarańcz */
        --accent-ink: #fff;
        --ok: #0f9b5f;
        --bad: #c0392b;
        --line: #d9ccb1;     /* delikatne linie */
        --card: #fffaf0;     /* jaśniejsze karty */
        --soft: #f2eadb;     /* miękki panel */
        --gridMinor: rgba(43, 33, 16, 0.08); /* cieplejsza siatka */
        --gridMajor: rgba(43, 33, 16, 0.16);
      }

      /* ===================== BASE ===================== */
      .vp * {
        box-sizing: border-box;
      }
      .vp a {
        color: var(--accent);
      }
      /* Brand (VanFit) */
      .vp .brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 6px;
      }
      .vp .brand-name {
        font-weight: 800;
        letter-spacing: .3px;
        color: var(--accent);
        font-size: 1.05rem;
      }
      
      /* Goodloading-style header */
      .vp .header-bar {
        background: #1e3a8a;
        color: white;
        padding: 12px 20px;
        border-radius: var(--rad) var(--rad) 0 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: -16px -16px 16px -16px;
      }
      
      .vp .header-left {
        display: flex;
        gap: 12px;
        align-items: center;
      }
      
      .vp .header-icon {
        width: 32px;
        height: 32px;
        background: rgba(255,255,255,0.1);
        border-radius: var(--rad);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s;
      }
      
      .vp .header-icon:hover {
        background: rgba(255,255,255,0.2);
      }
      
      .vp .header-right {
        display: flex;
        gap: 12px;
        align-items: center;
      }
      
      .vp .pro-button {
        background: #10b981;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: var(--rad);
        font-weight: 600;
        cursor: pointer;
      }
      
      .vp .user-icon {
        width: 32px;
        height: 32px;
        background: #3b82f6;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
      }
      
      /* Welcome banner */
      .vp .welcome-banner {
        background: #d1fae5;
        border: 1px solid #10b981;
        border-radius: var(--rad);
        padding: 16px;
        margin-bottom: 20px;
        position: relative;
      }
      
      .vp .welcome-banner .close-btn {
        position: absolute;
        top: 8px;
        right: 8px;
        background: none;
        border: none;
        font-size: 18px;
        cursor: pointer;
        color: #065f46;
      }
      
      /* Left sidebar styling */
      .vp .side {
        background: #dbeafe;
        border: 1px solid #93c5fd;
        border-radius: var(--rad);
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        position: relative;
        color: #1e40af;
      }
      
      .vp .side h4 {
        margin: 0;
        font-size: 1rem;
        color: #1e40af;
        font-weight: 600;
      }
      
      .vp .side .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
      }
      
      .vp .side .add-btn {
        background: #3b82f6;
        color: white;
        border: none;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        cursor: pointer;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .vp .side .menu-btn {
        background: none;
        border: none;
        color: #1e40af;
        cursor: pointer;
        font-size: 18px;
      }
      
      /* Algorithm settings */
      .vp .algorithm-settings {
        background: white;
        border: 1px solid #93c5fd;
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 16px;
      }
      
      .vp .radio-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 12px;
      }
      
      .vp .radio-item {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
      }
      
      .vp .radio-item input[type="radio"] {
        accent-color: #3b82f6;
      }
      
      .vp .info-icon {
        color: #6b7280;
        cursor: help;
        font-size: 14px;
      }
      
      /* Cargo list styling */
      .vp .cargo-item {
        background: white;
        border: 1px solid #93c5fd;
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 8px;
      }
      
      .vp .cargo-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
      }
      
      .vp .cargo-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
      }
      
      .vp .cargo-icon {
        width: 20px;
        height: 20px;
        background: #3b82f6;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 12px;
      }
      
      .vp .cargo-dropdown {
        background: none;
        border: none;
        color: #1e40af;
        cursor: pointer;
        font-size: 16px;
      }
      
      .vp .cargo-menu {
        background: none;
        border: none;
        color: #1e40af;
        cursor: pointer;
        font-size: 18px;
      }
      
      .vp .pallet-item {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        padding: 8px;
        margin: 4px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      
      .vp .pallet-count {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      
      .vp .count-btn {
        background: #3b82f6;
        color: white;
        border: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        cursor: pointer;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .vp .vp-wrap {
        position: relative;
        background: var(--bg);
        border: 1px solid var(--line);
        border-radius: var(--rad);
        padding: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        /* Widen the workspace for better readability on long cargo spaces */
        max-width: 98vw;
        margin: 0 auto;
      }
      .vp .topbar {
        display: flex;
        gap: 12px;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      .vp .title {
        font-weight: 700;
        letter-spacing: 0.2px;
      }
      .vp .row {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 10px;
      }
      /* Hide original vehicle row in main 2D UI; panel przenosi #vehRow do siebie */
      .vp > .vp-wrap .row#vehRow { display: none !important; }
      /* Inline custom vehicle bar */
      .vp .veh-inline { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
      .vp .veh-inline label { color: var(--muted); font-size: .9rem; }
      .vp .veh-inline input.small { width: 84px; padding: 6px 8px; border-radius: var(--rad); }
      .vp[data-theme="light"] .veh-inline input.small { background:#fff; }
      .vp[data-theme="sepia"] .veh-inline input.small { background:#fffaf0; color:#2b2110; }
      /* Expander (nowoczesne rozwijanie) */
      .vp .expander { border:1px solid var(--line); border-radius:12px; background:var(--soft); margin:8px 0; overflow:hidden; }
      .vp .expander-head { display:flex; align-items:center; gap:10px; padding:8px 10px; cursor:pointer; user-select:none; }
      .vp .expander-head .spacer{ flex:1; }
      .vp .expander-head .head-actions { display:flex; align-items:center; gap:8px; }
      .vp .expander-head .caret { width:10px; height:10px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform: rotate(-45deg); margin-left:6px; transition: transform .18s ease; opacity:.7; }
      .vp .expander[data-open="true"] .expander-head .caret { transform: rotate(45deg); }
      .vp .expander-body { overflow:hidden; max-height:0; opacity:.0; transition: max-height .22s ease, opacity .22s ease, padding .22s ease; padding:0 10px; }
      .vp .expander[data-open="true"] .expander-body { opacity:1; padding:10px; }
      /* Detale (help) – ujednolicone z expanderem */
      .vp details { background: var(--soft); border:1px solid var(--line); border-radius:12px; padding:0; }
      .vp details > summary { list-style:none; cursor:pointer; padding:10px; margin:0; font-weight:600; }
      .vp details > summary::-webkit-details-marker{ display:none; }
      .vp details[open] { padding-bottom:8px; }
      /* Tiny buttons (ikonowe) */
      .vp .btn.tiny { padding: 4px 8px; min-width: 32px; line-height: 1; }
      /* Vehicle picker (kolumny wg grup) */
      .vp .veh-picker { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:10px; }
      .vp .veh-col { background: var(--card); border:1px solid var(--line); border-radius:var(--rad); padding:8px; }
      .vp .veh-col h5 { margin:4px 0 8px; font-size:.95rem; color: var(--muted); }
      .vp .veh-opt { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px; border:1px solid var(--line); border-radius:var(--rad); cursor:pointer; background: var(--soft); }
      .vp .veh-opt:hover { border-color: var(--accent); }
      .vp .veh-opt small { color: var(--muted); }
      .vp .veh-dd { position:absolute; z-index: 40; background: var(--card); border:1px solid var(--line); border-radius:12px; padding:10px; box-shadow: 0 12px 28px rgba(0,0,0,.25); display:none; }
      .vp select,
      .vp input[type="number"],
      .vp input[type="text"],
      .vp input[type="date"],
      .vp input[type="time"],
      .vp textarea {
        background: #0c1322;
        color: var(--ink);
        border: 1px solid var(--line);
        border-radius: var(--rad);
        padding: 8px;
      }
      .vp[data-theme="light"] select,
      .vp[data-theme="light"] input[type="number"],
      .vp[data-theme="light"] input[type="text"],
      .vp[data-theme="light"] input[type="date"],
      .vp[data-theme="light"] input[type="time"],
      .vp[data-theme="light"] textarea { background:#fff; color:#141a2a; }
      .vp[data-theme="sepia"] select,
      .vp[data-theme="sepia"] input[type="number"],
      .vp[data-theme="sepia"] input[type="text"],
      .vp[data-theme="sepia"] input[type="date"],
      .vp[data-theme="sepia"] input[type="time"],
      .vp[data-theme="sepia"] textarea { background:#fffaf0; color:#2b2110; }
      /* Select "Pojazd" – szerokość dopasowana do treści */
      .vp #vehSel { width:auto; min-width: 160px; max-width: 70vw; }
      /* Własny dropdown dla Pojazd – select jako hotspot */
      .vp #vehRow { position: relative; }
      .vp #vehSel { pointer-events: auto; user-select: none; }
      .vp[data-theme="light"] select,
      .vp[data-theme="light"] input,
      .vp[data-theme="light"] textarea {
        background: #fff;
      }
      .vp label {
        color: var(--muted);
        font-size: 0.95rem;
      }
      .vp .chip {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 6px 10px;
        font-size: 0.9rem;
        color: var(--muted);
      }
      /* Make inline plus icon green for visibility */
      .vp .chip .plus-green { color: var(--ok); }
      .vp .chip.click { cursor:pointer; user-select:none; }

      /* Theme toggle */
      .vp .theme {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .vp .toggle {
        width: 62px;
        height: 28px;
        border-radius: 20px;
        border: 1px solid var(--line);
        background: var(--soft);
        position: relative;
        cursor: pointer;
      }
      .vp .knob {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #ffd166;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s ease;
      }
      .vp[data-theme="light"] .knob {
        transform: translateX(34px);
        background: #ffe08a;
      }
      .vp[data-theme="dark"] .knob {
        transform: translateX(0);
      }
      /* Grid */
      .vp .grid {
        display: grid;
        grid-template-columns: minmax(240px, 1fr) 400px;
        gap: 16px;
      }
      @media (max-width: 1120px) {
        .vp .grid {
          grid-template-columns: 1fr;
        }
      }

      /* Stage */
      .vp .stage-card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--rad);
        padding: 10px;
        position: relative;
      }
      .vp .stage-wrap {
        position: relative;
        width: 100%;
        /* More responsive height for better visibility */
        height: clamp(520px, 68vh, 860px);
      }
      /* Floating controls inside cargo stage */
      .vp .floating-view { position: absolute; right: 10px; top: 10px; z-index: 9; }
      .vp .floating-reset { position: absolute; right: 10px; bottom: 10px; z-index: 9; display:flex; gap:8px; }
      .vp .stage-wrap.compare {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        align-items: stretch;
      }
      @media (min-width: 1400px) {
        .vp .stage-wrap {
          height: 640px;
        }
      }
      .vp svg {
        width: 100%;
        height: 100%;
        display: block;
        /* Subtle orange‑tinted gradient for nicer depth */
        background: radial-gradient(1000px 520px at 20% 0%, rgba(255,90,0,.08), rgba(255,90,0,0) 60%),
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.02),
            rgba(255, 255, 255, 0) 30%
          ),
          var(--soft);
        border-radius: var(--rad);
        /* Better touch precision on iOS/Android */
        touch-action: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
      }
      /* Reading mode (Sepia): make board background creamy, not dark */
      .vp[data-theme="sepia"] svg {
        background: radial-gradient(1000px 520px at 20% 0%, rgba(195,106,0,.06), rgba(195,106,0,0) 60%),
          linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0) 30%),
          #f2eadb !important;
      }
      /* Sunlight: stronger contrast and outlines */
      html.sunlight .vp .gridline { stroke: #1f2b44; stroke-width: 0.35; }
      html.sunlight .vp .hull { stroke-width: 1.2; }
      html.sunlight .vp .item { stroke-width: 1.1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
      html.sunlight .vp .label { stroke-width: 0.9; }
      .vp svg.boardB { display: none; }
      .vp canvas.board3d {
        width: 100%;
        height: 100%;
        display: none;
        background: radial-gradient(1200px 600px at 50% 30%, rgba(255,255,255,0.05), transparent 60%), var(--soft);
        border-radius: 10px;
      }
      .vp .board { outline: 1px solid #2b3958; }
      .vp[data-theme="light"] .board { outline-color: #d5dcef; }
      .vp[data-theme="sepia"] .board { outline-color: #d9ccb1; }
      .vp[data-theme="sepia"] .board { background: #f2eadb !important; }
      .vp .gridline { stroke: #26334e; stroke-width: 0.2; }
      .vp[data-theme="light"] .gridline { stroke: #e8eef9; }
      .vp[data-theme="sepia"] .gridline { stroke: #d9ccb1; }
      .vp .gridline.major { stroke-width: 0.6; opacity: .9; }
      .vp .hull {
        fill: #0e1526;
        stroke: #3a4d77;
        stroke-width: 0.8;
      }
      .vp[data-theme="light"] .hull {
        fill: #f2f5fb;
        stroke: #d5dcef;
      }
      .vp .sectionline {
        stroke: var(--accent);
        stroke-width: 0.8;
        stroke-dasharray: 3 3;
        opacity: 0.8;
      }
      /* Axle/CoG overlay */
      .vp .axline { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; opacity: .9; }
      .vp .axmark { fill: var(--accent); opacity: .9; }
      .vp .axbar { fill: rgba(255,90,0,.18); stroke: var(--accent); stroke-width: .6; }
      .vp .axtext { font-size: 3.2px; fill: var(--muted); }
      /* HUD overlay for readable labels */
      .vp .hud-layer {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }
      /* Overlay viewport: canvas -> svg -> div(labels) order */
      .vp #viewport {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 5;
        display: block;
      }
      /* Print mode: show overlay viewport */
      html.print .vp #viewport { display: block !important; }
      .vp #viewport > canvas,
      .vp #viewport > svg,
      .vp #viewport > div {
        position: absolute;
        inset: 0;
      }
      .vp #floor { width: 100%; height: 100%; display: block; background: transparent; }
      .vp #overlay { width: 100%; height: 100%; display: block; background: transparent !important; }
      .vp #labels { width: 100%; height: 100%; pointer-events: none; }
      /* Three.js viewport container */
      .vp #view3d { position: absolute; inset: 0; display: none; pointer-events: auto;
        /* subtle studio background for 3D */
        background: linear-gradient(180deg, rgba(248,250,252,0.95) 0%, rgba(255,255,255,1) 55%, rgba(241,245,249,0.95) 100%);
      }
      .vp[data-theme="dark"] #view3d { background: linear-gradient(180deg, rgba(10,14,24,0.95) 0%, rgba(12,19,34,1) 50%, rgba(8,12,20,0.95) 100%); }
      .vp[data-theme="sepia"] #view3d { background: linear-gradient(180deg, rgba(249,245,233,0.95) 0%, rgba(255,250,240,1) 55%, rgba(244,237,222,0.95) 100%); }
      /* Minimal label style (non-scaling DOM labels) → bubble */
      .vp #labels .label {
        position: absolute;
        font: 600 clamp(10px, 0.95vw, 14px)/1.25 system-ui;
        display: inline-block;
        width: max-content;
        max-width: 320px;
        padding: 8px 10px;
        border-radius: 10px;
        white-space: normal; /* auto-size to content */
        pointer-events: none; /* body re-enables for interactive parts */
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
        background: rgba(0, 0, 0, 0.85);
        color: #fff;
        /* Auto-show on hover with smooth motion */
        opacity: 0;
        transform: translateY(2px) scale(.985);
        transform-origin: 50% 100%;
        transition: opacity 140ms ease, transform 140ms ease;
        /* Readability boost over saturated fills */
        text-shadow: 0 1px 2px rgba(0,0,0,.35);
      }
      /* Bubble tail (defaults downward; positioning handled by JS) */
      .vp #labels .label::after {
        content: "";
        position: absolute;
        left: 50%; transform: translateX(-50%) rotate(45deg);
        bottom: -6px;
        width: 12px; height: 12px;
        background: inherit; filter: brightness(1.0);
        box-shadow: 0 4px 10px rgba(0,0,0,.25);
      }
      /* Tail flip for top side */
      .vp #labels .label[data-side="top"]::after {
        top: -6px; bottom: auto;
      }
      /* Tail for left/right (optional) */
      .vp #labels .label[data-side="left"]::after {
        left: auto; right: -6px; top: 50%; bottom: auto; transform: translateY(-50%) rotate(45deg);
      }
      .vp #labels .label[data-side="right"]::after {
        left: -6px; top: 50%; bottom: auto; transform: translateY(-50%) rotate(45deg);
      }
      .vp #labels .label.is-hot { opacity: 1; transform: translateY(0) scale(1); }
      .vp #labels .label .lineA { display: block; font-weight: 800; letter-spacing: .2px; }
      .vp #labels .label .lineB { display: block; opacity: .9; font-weight: 600; }
      /* Light pill variant for better contrast on dark backgrounds */
      .vp #labels .label.label--contrast {
        background: rgba(255, 255, 255, 0.92);
        color: #121212;
      }
      /* Severity variants */
      .vp #labels .label[data-kind="warn"]   { background:#f59e0b; color:#fff; }
      .vp #labels .label[data-kind="danger"] { background:#e11d48; color:#fff; }
      .vp #labels .label[data-kind="ok"]     { background: rgba(0,0,0,0.85); color:#fff; }
      .vp #labels .label .body { pointer-events:auto; }
      .vp #labels .label.is-selected { outline:2px solid var(--accent); box-shadow:0 0 0 2px rgba(255,90,0,0.35); background:var(--accent); color:var(--accent-ink); z-index: 20; }
      .vp .leaderline { stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 3 2; opacity:.85; display: none !important; }
      /* Icon inside overlay label */
      .label .ico { width:1em; height:1em; vertical-align:-0.15em; margin-left:.35em; fill:currentColor; opacity:.9; }
      .vp .hud {
        position: absolute;
        padding: 2px 4px;
        border-radius: 6px;
        font-size: 12px;
        line-height: 1;
        color: var(--ink);
        background: rgba(0, 0, 0, 0.25);
      }
      .vp[data-theme="light"] .hud {
        background: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(0, 0, 0, 0.08);
      }
      .vp[data-theme="sepia"] .hud {
        background: rgba(255, 250, 240, 0.82);
        border: 1px solid #e3d4b7;
        color: #2b2110;
      }

      .vp .item {
        /* Default fill/stroke are overridden via JS for per-item colors */
        fill: #2a3b60;
        stroke: #83a1ff;
        stroke-width: 0.7;
        cursor: grab;
        /* Add subtle drop shadow for a pseudo‑3D effect */
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
      }
      /* Larger, invisible hit area for easier dragging on touch devices */
      .vp .dragHit { fill: transparent; stroke: none; pointer-events: all; cursor: grab; }
      /* Ensure in-rect texts/icons never steal pointer events */
      .vp svg.board .label,
      .vp svg.board text { pointer-events: none; }
      .vp[data-theme="light"] .item {
        fill: #cdd7f7;
        stroke: #4a77ff;
      }
      .vp .dragging .item.selected {
        cursor: grabbing;
      }
      .vp .item.collide {
        stroke: var(--bad);
      }
      .vp .item.selected {
        filter: drop-shadow(0 0 10px rgba(90, 163, 255, 0.6));
      }
      /* Hover highlight for items (2D) */
      .vp svg .item.is-hot {
        stroke: var(--accent);
        filter: drop-shadow(0 0 8px rgba(255, 122, 0, 0.6));
      }
      /* Larger, responsive in-SVG text (inside pallets) */
      .vp .label {
        font-size: clamp(11px, 1.0vw, 18px);
        fill: #d7e3ff;
        paint-order: stroke;
        stroke: #0b1020;
        stroke-width: 0.6;
        /* Try to improve readability on saturated backgrounds */
        text-shadow: 0 1px 2px rgba(0,0,0,.35);
      }
      .vp .label.dimA { font-size: clamp(8px, 0.7vw, 12px); font-weight: 800; }
      .vp .label.dimB { font-size: clamp(7px, 0.6vw, 10px); opacity: .98; }
      /* Compact label mode: hide the secondary line when zoomed out */
      .vp g.compact .label.dimB { display: none; }
      /* Print: hide in-rect labels, rely on overlay labels placed outside */
      html.print .vp .label { display: none !important; }
      /* Print: show all overlay labels */
      html.print .vp #labels .label { opacity: 1 !important; }
      /* Print: small frame for printable areas */
      html.print .vp .board { outline: 2px solid #000; background: #fff; }
      html.print .vp svg.section { outline: 1px solid #000; background: #fff; }
      .vp .rulerText { font-size: 4.8px; fill: var(--muted); }
      .vp .rulerTick { stroke: #435273; stroke-width: 1.1; }
      .vp[data-theme="light"] .rulerTick { stroke: #c6d2ef; }
      /* Ukryj drobne liczby F/R na górnej krawędzi (overlay osi) */
      .vp .axtext { display: none !important; }
      .vp .rotBtn {
        fill: #0c1322;
        stroke: #83a1ff;
        stroke-width: 0.5;
        cursor: pointer;
      }
      .vp .rotHit {
        fill: transparent;
        pointer-events: all;
        cursor: pointer;
      }

      /* Side cut (W×H) preview */
      .vp .section-cut {
        margin-top: 10px;
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 8px;
      }
      .vp svg.section {
        width: 100%;
        height: 180px;
        display: block;
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.02),
            rgba(255, 255, 255, 0) 30%
          ),
          var(--soft);
        border-radius: 8px;
      }
      .vp .sec-gridline { stroke: #26334e; stroke-width: 0.2; }
      .vp[data-theme="light"] .sec-gridline { stroke: #e8eef9; }
      .vp[data-theme="sepia"] .sec-gridline { stroke: #d9ccb1; }

      /* Underbar */
      .vp .underbar {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 10px;
        border-top: 1px dashed #2b3958;
        margin-top: 10px;
      }

      /* Metrics bar inside underbar */
      .vp .metrics-bar .card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--rad);
        padding: 8px;
        min-width: 120px;
      }
      .vp .metrics-bar progress {
        width: 100%;
        height: 10px;
      }
      .vp .metrics-bar progress::-webkit-progress-value {
        background: var(--accent);
      }
      .vp .metrics-bar progress::-webkit-progress-bar {
        background: #23314d;
      }
      .vp[data-theme="light"] .metrics-bar progress::-webkit-progress-bar {
        background: #e8eef9;
      }
      .vp .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: var(--accent);
        color: var(--accent-ink);
        border: none;
        border-radius: var(--rad);
        padding: 10px 12px;
        cursor: pointer;
        /* Interactive: smooth transform/shadow for hover/press */
        transition: transform 120ms ease, box-shadow 180ms ease, filter 180ms ease, background-color 180ms ease;
        transform: translateZ(0);
        will-change: transform, box-shadow, filter;
      }
      .vp .btn.secondary {
        background: var(--soft);
        color: var(--ink);
        border: 1px solid var(--line);
      }
      .vp .btn.ghost {
        background: transparent;
        border: 1px dashed var(--line);
      }
      /* Hover lift effect for primary/secondary/ghost */
      .vp .btn:hover {
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
        filter: brightness(1.04);
      }
      /* Press effect (mousedown) */
      .vp .btn:active,
      .vp .btn.is-pressing {
        transform: translateY(0) scale(0.98);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
        filter: brightness(0.98);
      }
      /* Toolbar buttons get same interaction */
      #toolbar button {
        transition: transform 120ms ease, box-shadow 180ms ease, filter 180ms ease, background-color 180ms ease;
        transform: translateZ(0);
        will-change: transform, box-shadow, filter;
      }
      #toolbar button:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 18px rgba(0,0,0,.22); filter: brightness(1.04); }
      #toolbar button:active, #toolbar button.is-pressing { transform: translateY(0) scale(0.98); box-shadow: 0 4px 10px rgba(0,0,0,.16); filter: brightness(0.98); }
      /* Language trigger button hover/press */
      .hdr-btn { transition: transform 120ms ease, box-shadow 180ms ease, filter 180ms ease; transform: translateZ(0); will-change: transform, box-shadow, filter; }
      .hdr-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 18px rgba(0,0,0,.22); filter: brightness(1.04); }
      .hdr-btn:active, .hdr-btn.is-pressing { transform: translateY(0) scale(0.98); box-shadow: 0 4px 10px rgba(0,0,0,.16); filter: brightness(0.98); }

      /* Floating glass buttons (3D/2D toggle and Reset) */
      .vp .stage-fab { position:absolute; z-index: 12; pointer-events:auto; }
      .vp .glass-btn {
        appearance:none; border:1px solid var(--line); color: var(--ink);
        background: var(--glass-bg, rgba(255,255,255,0.08));
        backdrop-filter: saturate(160%) blur(10px);
        -webkit-backdrop-filter: saturate(160%) blur(10px);
        border-radius: 10px; padding: 8px 12px; font-weight: 700; cursor:pointer;
        box-shadow: 0 6px 18px rgba(0,0,0,.18);
        transition: transform 120ms ease, box-shadow 180ms ease, filter 180ms ease;
      }
      .vp .glass-btn:hover { transform: translateY(-1px) scale(1.02); box-shadow:0 10px 24px rgba(0,0,0,.25); }
      .vp .glass-btn:active { transform: translateY(0) scale(0.98); box-shadow:0 6px 14px rgba(0,0,0,.18); }
      .vp { --glass-bg: rgba(255,255,255,0.10); }
      .vp[data-theme="light"] { --glass-bg: rgba(255,255,255,0.70); }
      .vp[data-theme="sepia"] { --glass-bg: rgba(255,250,240,0.75); }

      /* Theme‑specific contrast for glass buttons */
      .vp[data-theme="dark"] .glass-btn { color: #ffffff; border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.10); }
      .vp[data-theme="light"] .glass-btn { color: #141a2a; border-color: rgba(0,0,0,0.15); background: rgba(255,255,255,0.72); }
      .vp[data-theme="sepia"] .glass-btn { color: #2b2110; border-color: #e3d4b7; background: rgba(255,250,240,0.78); }

      /* Permanent rule: side panel button sizing matches other buttons */
      #side2d { position: fixed; left: 8px; top: 80px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
      #side2d .glass-btn { height: 36px; min-width: 36px; padding: 6px 10px; display: inline-flex; align-items: center; justify-content: center; }
      #side2d .glass-btn svg { width: 18px; height: 18px; display: block; }

      /* ======== Side2D Mega Menu (layout + styles) ======== */
      /* Solid panel background (readable, not transparent) */
      #side2d-panel { background: var(--card) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
      /* Align launcher column to top when mega layout active */
      #side2d { align-items: flex-start; gap: 10px; }
      #side2d .vf-btncol { display: flex; flex-direction: column; gap: 8px; }
      /* Drawer base + wide state */
      #side2d-panel.vf-drawer { transition: width .18s ease, transform .16s ease, opacity .16s ease; }
      /* Wide mode adapts to content but stays within viewport */
      #side2d[data-mode="pinned"] #side2d-panel.vf-wide { width: auto !important; min-width: 380px; max-width: min(92vw, 720px); }
      /* Grid layout: left nav + right content */
      .vf-mega-layout { display: grid; grid-template-columns: minmax(148px, 168px) minmax(0, 1fr); gap: 12px; align-items: start; }
      /* Ensure panel can always scroll if content is taller than screen */
      #side2d[data-mode="pinned"] #side2d-panel { max-height: calc(100vh - 100px); overflow: auto; overscroll-behavior: contain; }
      #side2d[data-mode="overlay"] #side2d-panel { max-height: calc(100vh - 32px); overflow: auto; overscroll-behavior: contain; }
      #side2d[data-mode="overlay"] .vf-mega-layout,
      #side2d[data-mode="sheet"] .vf-mega-layout { display: block; }
      /* Left nav */
      .vf-mega-nav { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 6px; align-self: start; }
      .vf-nav-item { all: unset; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--soft); color: var(--ink); transition: transform .06s ease, box-shadow .2s ease, background .2s ease; }
      .vf-nav-item:hover { transform: translateY(-1px); }
      .vf-nav-item.is-active { box-shadow: 0 0 0 1px var(--line) inset, 0 6px 14px rgba(0,0,0,.16); }
      .vf-nav-item svg { width: 18px; height: 18px; opacity: .9; }
      .vf-badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; font-size: .78rem; font-weight: 700; color: #0b1020; background: linear-gradient(180deg,#ffe08a,#ffd166); border-radius: 999px; }
      .vf-divider { height: 1px; background: var(--line); border: 0; margin: 6px 0; }
      /* Right content */
      .vf-mega-main { display: block; }
      /* Ensure section wrappers have measurable height even when body is collapsed */
      #side2d-panel .vf-sec { min-height: 32px; }
      /* Collapsible sections */
      .vf-sec { border: 1px solid var(--line); border-radius: 12px; background: var(--soft); margin: 8px 0; overflow: hidden; }
      .vf-sec__head { all: unset; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 12px; font-weight: 700; color: var(--ink); background: linear-gradient(180deg, rgba(255,255,255,.04), transparent); }
      .vf-sec__chev { margin-left: auto; transition: transform .15s ease; opacity: .8; }
      .vf-sec.is-collapsed .vf-sec__chev { transform: rotate(-90deg); }
      .vf-sec__body { padding: 10px; border-top: 1px dashed var(--line); }
      .vf-sec__body > *:first-child { margin-top: 0 }
      .vf-sec__body > *:last-child { margin-bottom: 0 }
      /* Hide legacy tabs in pinned wide mode (left nav replaces them) */
      #side2d[data-mode="pinned"] #side2d-panel.vf-wide .vf-tabs { display: none !important; }
      /* Subtle chip lift */
      #side2d .vf-chip { backdrop-filter: saturate(120%); }

      /* Ensure sidebar section titles use theme ink (fix odd blues) */
      .vp .side h4 { color: var(--ink) !important; }

      /* ======== Responsive device modes ======== */
      /* Mobile-only helper */
      .mobile-only { display: none; }
      .vp[data-device="mobile"] .mobile-only { display: inline-flex; }
      /* Hide 3D view on mobile */
/* Allow 3D view on mobile as well; visibility is controlled by JS */
/* .vp[data-device="mobile"] #view3d { display: none !important; } */
      /* Hide 3D control buttons on mobile */
      .vp[data-device="mobile"] .actions-bar [data-act^="cam"],
      .vp[data-device="mobile"] .actions-bar #view3D,
      .vp[data-device="mobile"] .actions-bar [data-act="sectionToggle"],
      .vp[data-device="mobile"] #sectionSlider,
      .vp[data-device="mobile"] .actions-bar [data-act^="layer"] {
        display: none !important;
      }
      /* Tablet: hide clipping controls */
      .vp[data-device="tablet"] .actions-bar [data-act="sectionToggle"],
      .vp[data-device="tablet"] #sectionSlider {
        display: none !important;
      }

      /* Bottom sheet for side panel on mobile */
      .vp[data-device="mobile"] .side {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        max-height: 72vh;
        overflow: auto;
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -10px 30px rgba(0,0,0,.35);
        transform: translateY(92%);
        transition: transform .24s ease;
        z-index: 20;
      }
      .vp[data-device="mobile"] .side.open { transform: translateY(0); }
      .vp[data-device="mobile"] #toggleSheet { display: inline-flex; }
      .vp:not([data-device="mobile"]) #toggleSheet { display: none; }
      /* Provide some bottom spacing for main content when sheet handle is used */
      .vp[data-device="mobile"] .stage-card { padding-bottom: 48px; }

      /* Side */
      .vp .side {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--rad);
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: relative;
      }
      .vp .side h4 {
        margin: 0;
        font-size: 1rem;
        color: #d7e3ff;
      }
      .vp[data-theme="light"] .side h4 {
        color: #1a2233;
      }
      .vp .preset-list {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 8px;
      }
      .vp .preset {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 8px;
      }
      .vp .preset small {
        color: var(--muted);
      }
      .vp .qty {
        display: flex;
        gap: 6px;
        align-items: center;
      }
      .vp .qty input {
        width: 64px;
      }

      /* Bulk */
      .vp .bulk {
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: var(--rad);
        padding: 10px;
      }
      .vp .bulk .out {
        background: #0c1322;
        border: 1px dashed #33425f;
        border-radius: var(--rad);
        padding: 8px;
        min-height: 40px;
        color: #c9d6f0;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        white-space: pre-wrap;
      }
      .vp[data-theme="light"] .bulk .out { background: #fff; color: #2b3b55; border-color: #cfd8ef; }
      .vp[data-theme="sepia"] .bulk .out { background: #fffaf0; color: #2b2110; border-color: #e3d4b7; }
      .vp .note {
        color: var(--muted);
        font-size: 0.9rem;
      }

      /* Custom small form */
      .vp .custom {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
      }
      .vp .custom .row {
        display: flex;
        flex-direction: column;
      }
      .vp .custom .wide {
        grid-column: 1 / -1;
      }

      /* New one‑line custom input */
      .vp .custom-line {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
      }
      .vp .custom-line input[type="text"] {
        flex: 1 1 240px;
        min-width: 180px;
      }
      .vp .custom-hint {
        color: var(--muted);
        font-size: .85rem;
        margin: 6px 0 12px 0;
      }

      /* Add vehicle */
      .vp .vehbox {
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 8px;
      }
      .vp .vehgrid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
      }
      @media (max-width: 560px) {
        .vp .vehgrid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      .vp .meters {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      .vp .meters .card {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 8px;
      }
      progress {
        width: 100%;
        height: 10px;
      }
      progress::-webkit-progress-value {
        background: var(--accent);
      }
      progress::-webkit-progress-bar {
        background: #23314d;
      }
      .vp[data-theme="light"] progress::-webkit-progress-bar {
        background: #e8eef9;
      }

      .vp .status {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }
      .vp .badge {
        padding: 6px 10px;
        border-radius: 999px;
        font-weight: 600;
      }
      .vp .badge.ok {
        background: rgba(31, 207, 109, 0.12);
        color: #0be481;
        border: 1px solid #1fcf6d;
      }
      .vp .badge.bad {
        background: rgba(255, 77, 79, 0.12);
        color: #ff4d4f;
        border: 1px solid #ff4d4f;
      }

      .vp .actions {
        display: flex;
        gap: 8px;
        flex-wrap: nowrap; /* jedna linia */
        align-items: center;
      }
      .vp .actions .btn { padding: 8px 10px; white-space: nowrap; }
      .vp details {
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 8px;
      }

      /* Selected item panel */
      .vp .selected-panel {
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: var(--rad);
        padding: 8px;
        display: none;
      }
      .vp .selected-panel.active {
        display: block;
      }
      .vp .selected-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
      }

      /* Modal styles removed */

      /* Focus & a11y */
      .vp [tabindex]:focus {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
      /* Do not show orange focus ring on the loading board/viewport */
      .vp svg.board:focus,
      .vp #viewport:focus,
      .vp #view3d:focus,
      .vp canvas.board3d:focus {
        outline: none !important;
        outline-offset: 0 !important;
      }

      /* Error box */
      .vp .error {
        background: #2b1111;
        color: #ffd7d7;
        border: 1px solid #7a2b2b;
        border-radius: var(--rad);
        padding: 10px;
        display: none;
      }
  .vp .error[aria-hidden="false"] {
    display: block;
  }

      /* ---------- Modal (STAGING) ---------- */
      .vp-modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); z-index: var(--z-toast); }
      .vp-modal[hidden] { display: none; }
      .vp-modal__content { position: relative; width: min(720px, 92vw); max-height: 82vh; overflow: auto; background: var(--card); color: var(--ink); border-radius: 12px; box-shadow: 0 18px 48px rgba(0,0,0,.35); padding: 16px; }
      .vp-modal__content .close-btn { position: absolute; top: 8px; right: 8px; }

      /* Fancy checkbox (stackable) */
      .vp .chk {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--soft);
        cursor: pointer;
        user-select: none;
      }
      .vp .chk input {
        appearance: none;
        width: 16px;
        height: 16px;
        border: 1px solid #41527a;
        border-radius: 4px;
        display: inline-block;
        background: #0c1322;
        position: relative;
      }
      .vp .chk input:checked {
        background: #0d2418;
        border-color: #2a9d6f;
      }
      .vp .chk input:checked::after {
        content: "";
        position: absolute;
        inset: 2px;
        background: #2dd07a;
        border-radius: 2px;
      }
      .vp .chk span {
        color: var(--muted);
      }

      /* ---------- Card helpers (panel spójny) ---------- */
      .vp .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--rad); padding: 8px; }
      .vp .card + .card { margin-top: 10px; }
      .vp .card .card-title { font-weight: 700; margin-bottom: 6px; }
      .vp .card .row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
      .vp .card label { color: var(--muted); }

/* Modal (STAGING) — appended per request */
.vp-modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); z-index: var(--z-toast); }
.vp-modal[hidden] { display: none; }
.vp-modal__content { position: relative; width: min(720px, 92vw); max-height: 82vh; overflow: auto;  background: var(--card); color: var(--ink); border-radius: 12px; box-shadow: 0 18px 48px rgba(0,0,0,.35); padding: 16px; }
.vp-modal__content .close-btn { position: absolute; top: 8px; right: 8px; }