/* ── Root ── */
        .vpo-root { display:flex; flex-direction:column; gap:1.25rem; width:100%; }

        /* ── Stats ── */
        .vpo-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.75rem; }
        .vpo-stat-card {
            background:#fff; border:1px solid #e2e8f0; border-radius:1rem;
            padding:1rem 1.25rem; display:flex; align-items:center; gap:.9rem;
            box-shadow:0 1px 4px rgba(15,23,42,.05);
        }
        .dark .vpo-stat-card { background:#1e293b; border-color:#334155; box-shadow:none; }
        .vpo-stat-icon { width:2.6rem; height:2.6rem; border-radius:.75rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
        .vpo-stat-icon svg { width:1.2rem; height:1.2rem; }
        .vsi-blue   { background:#dbeafe; color:#1d4ed8; } .dark .vsi-blue   { background:rgba(59,130,246,.15);  color:#93c5fd; }
        .vsi-violet { background:#ede9fe; color:#6d28d9; } .dark .vsi-violet { background:rgba(139,92,246,.15); color:#a78bfa; }
        .vsi-amber  { background:#fef3c7; color:#b45309; } .dark .vsi-amber  { background:rgba(245,158,11,.15);  color:#fbbf24; }
        .vsi-green  { background:#d1fae5; color:#065f46; } .dark .vsi-green  { background:rgba(16,185,129,.15);  color:#34d399; }
        .vpo-stat-value { font-size:1.45rem; font-weight:800; color:#0f172a; line-height:1; }
        .dark .vpo-stat-value { color:#f8fafc; }
        .vpo-stat-label { font-size:.72rem; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:.04em; margin-top:.15rem; }

        /* ── Toolbar ── */
        .vpo-toolbar {
            background:#fff; border:1px solid #e2e8f0; border-radius:1rem;
            padding:1rem 1.25rem; display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
        }
        .dark .vpo-toolbar { background:#1e293b; border-color:#334155; }
        .vpo-search-wrap { position:relative; flex:1 1 200px; min-width:0; }
        .vpo-search-icon { position:absolute; left:.85rem; top:50%; transform:translateY(-50%); width:1rem; height:1rem; color:#94a3b8; pointer-events:none; }
        .vpo-search-input {
            width:100%; padding:.65rem .9rem .65rem 2.4rem; border-radius:.75rem;
            border:1px solid #cbd5e1; background:#f8fafc; color:#0f172a; font-size:.875rem; font-weight:600;
        }
        .vpo-search-input:focus { outline:none; border-color:#6366f1; background:#fff; box-shadow:0 0 0 3px rgba(99,102,241,.12); }
        .dark .vpo-search-input { background:#0f172a; border-color:#334155; color:#f8fafc; }
        .vpo-search-input::placeholder { color:#94a3b8; }
        .vpo-hint { font-size:.78rem; color:#94a3b8; font-weight:600; margin-left:auto; white-space:nowrap; }
        .dark .vpo-hint { color:#64748b; }

        /* ── Vessel grid ── */
        .vpo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
        .vpo-vessel-card {
            background:#fff; border:1.5px solid #e2e8f0; border-radius:1.25rem;
            padding:1.25rem; cursor:pointer; transition:all .18s;
            box-shadow:0 1px 4px rgba(15,23,42,.05);
        }
        .vpo-vessel-card:hover { border-color:#6366f1; box-shadow:0 6px 20px rgba(99,102,241,.12); transform:translateY(-2px); }
        .vpo-vessel-card.active { border-color:#4f46e5; background:#f0f0ff; box-shadow:0 6px 20px rgba(79,70,229,.15); }
        .dark .vpo-vessel-card { background:#1e293b; border-color:#334155; }
        .dark .vpo-vessel-card:hover { border-color:#6366f1; box-shadow:0 6px 20px rgba(99,102,241,.15); }
        .dark .vpo-vessel-card.active { border-color:#4f46e5; background:#1e1e40; }

        .vpo-vessel-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1rem; }
        .vpo-vessel-icon {
            width:3rem; height:3rem; border-radius:.875rem;
            background:linear-gradient(135deg,#4f46e5,#7c3aed);
            display:flex; align-items:center; justify-content:center; flex-shrink:0;
        }
        .vpo-vessel-icon svg { width:1.4rem; height:1.4rem; color:#fff; }
        .vpo-vessel-total { text-align:right; }
        .vpo-vessel-total-num { font-size:1.6rem; font-weight:900; color:#4f46e5; line-height:1; }
        .dark .vpo-vessel-total-num { color:#818cf8; }
        .vpo-vessel-total-lbl { font-size:.68rem; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em; }
        .vpo-vessel-name { font-size:1rem; font-weight:800; color:#0f172a; margin-bottom:.2rem; }
        .dark .vpo-vessel-name { color:#f1f5f9; }
        .vpo-vessel-code { font-size:.78rem; color:#94a3b8; font-weight:600; }
        .vpo-vessel-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:1rem; }
        .vpo-vs-item { text-align:center; background:#f8fafc; border-radius:.6rem; padding:.4rem; }
        .dark .vpo-vs-item { background:#0f172a; }
        .vpo-vs-num { font-size:.9rem; font-weight:800; }
        .vpo-vs-lbl { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#94a3b8; }
        .vpo-vs-inprogress { color:#f59e0b; } .vpo-vs-converted { color:#10b981; } .vpo-vs-other { color:#ef4444; }

        .vpo-chevron { width:1.2rem; height:1.2rem; color:#94a3b8; transition:transform .2s; }
        .vpo-vessel-card.active .vpo-chevron { transform:rotate(90deg); color:#4f46e5; }

        /* ── Empty ── */
        .vpo-empty { text-align:center; padding:5rem 2rem; }
        .vpo-empty svg { width:4rem; height:4rem; color:#cbd5e1; margin:0 auto; }
        .vpo-empty-title { font-size:1.1rem; font-weight:700; color:#475569; margin-top:1rem; }
        .vpo-empty-sub   { font-size:.875rem; color:#94a3b8; margin-top:.25rem; }
        .dark .vpo-empty-title { color:#94a3b8; }

        /* ── Panel ── */
        .vpo-panel-backdrop { position:fixed; inset:0; z-index:8000; background:rgba(2,6,23,.5); backdrop-filter:blur(3px); animation:vpoFade .2s ease; }
        @keyframes vpoFade  { from{opacity:0} to{opacity:1} }
        @keyframes vpoSlide { from{transform:translateX(100%)} to{transform:translateX(0)} }
        .vpo-panel {
            position:fixed; top:0; right:0; bottom:0; width:min(700px,100vw);
            background:#fff; box-shadow:-8px 0 40px rgba(2,6,23,.18);
            z-index:8001; display:flex; flex-direction:column;
            animation:vpoSlide .25s cubic-bezier(.22,1,.36,1); overflow:hidden;
        }
        .dark .vpo-panel { background:#0f172a; }
        .vpo-panel-header {
            padding:1.5rem 1.75rem 1.25rem; border-bottom:1px solid #e2e8f0; flex-shrink:0;
            background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);
            display:flex; align-items:flex-start; justify-content:space-between;
        }
        .dark .vpo-panel-header { border-bottom-color:#1e293b; }
        .vpo-ph-kicker { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.7); }
        .vpo-ph-title  { font-size:1.4rem; font-weight:900; color:#fff; }
        .vpo-ph-close  { width:2.25rem; height:2.25rem; border-radius:.6rem; border:1.5px solid rgba(255,255,255,.3); background:rgba(255,255,255,.15); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
        .vpo-ph-close:hover { background:rgba(255,255,255,.28); }
        .vpo-ph-close svg { width:1.1rem; height:1.1rem; }
        .vpo-panel-body { flex:1; overflow-y:auto; padding:1.5rem 1.75rem; display:flex; flex-direction:column; gap:1rem; }

        /* PR list in panel */
        .vpo-pr-item {
            background:#f8fafc; border:1px solid #e2e8f0; border-radius:.875rem;
            padding:1rem 1.1rem; display:flex; align-items:center; gap:1rem;
        }
        .dark .vpo-pr-item { background:#1e293b; border-color:#334155; }
        .vpo-pr-item-left { flex:1; min-width:0; }
        .vpo-pr-num { font-weight:800; color:#4f46e5; font-size:.9rem; }
        .dark .vpo-pr-num { color:#818cf8; }
        .vpo-pr-needs { font-size:.82rem; color:#64748b; margin-top:.15rem; font-weight:500; }
        .dark .vpo-pr-needs { color:#94a3b8; }
        .vpo-pr-meta { font-size:.75rem; color:#94a3b8; margin-top:.1rem; }
        .vpo-pr-right { display:flex; flex-direction:column; align-items:flex-end; gap:.35rem; flex-shrink:0; }
        .vpo-pr-status { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .7rem; border-radius:9999px; font-size:.7rem; font-weight:800; white-space:nowrap; }
        .vpo-dot { width:.45rem; height:.45rem; border-radius:50%; }
        .vps-warning { background:#fffbeb; color:#92400e; } .vps-dot-warning { background:#f59e0b; }
        .vps-danger  { background:#fef2f2; color:#991b1b; } .vps-dot-danger  { background:#ef4444; }
        .vps-info    { background:#eff6ff; color:#1e40af; } .vps-dot-info    { background:#3b82f6; }
        .vps-success { background:#ecfdf5; color:#065f46; } .vps-dot-success { background:#10b981; }
        .vps-gray    { background:#f9fafb; color:#4b5563; } .vps-dot-gray    { background:#9ca3af; }
        .vps-violet  { background:#ede9fe; color:#5b21b6; } .vps-dot-violet  { background:#8b5cf6; }
        .dark .vps-warning { background:rgba(245,158,11,.12); color:#fbbf24; }
        .dark .vps-danger  { background:rgba(239,68,68,.12);  color:#f87171; }
        .dark .vps-info    { background:rgba(59,130,246,.12); color:#60a5fa; }
        .dark .vps-success { background:rgba(16,185,129,.12); color:#34d399; }
        .dark .vps-gray    { background:rgba(107,114,128,.1); color:#d1d5db; }
        .dark .vps-violet  { background:rgba(139,92,246,.12); color:#a78bfa; }
        .vpo-pr-date { font-size:.72rem; color:#94a3b8; }
        .vpo-panel-footer { flex-shrink:0; padding:1rem 1.75rem; border-top:1px solid #e2e8f0; background:#f8fafc; display:flex; justify-content:flex-end; }
        .dark .vpo-panel-footer { border-top-color:#1e293b; background:#0f172a; }
        .vpo-close-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.65rem 1.4rem; border-radius:.75rem; border:1.5px solid #e2e8f0; background:#fff; color:#374151; font-size:.875rem; font-weight:700; cursor:pointer; }
        .vpo-close-btn:hover { background:#f1f5f9; }
        .dark .vpo-close-btn { background:#1e293b; border-color:#334155; color:#cbd5e1; }
        .dark .vpo-close-btn:hover { background:#334155; }
        .vpo-item-remaining { font-weight:800; color:#0f172a; }
        .dark .vpo-item-remaining { color:#ffffff; }

        /* ── Table ── */
        .vpo-table-wrap { overflow-x:auto; border-radius:.75rem; border:1px solid #e2e8f0; }
        .dark .vpo-table-wrap { border-color:#334155; }
        .vpo-table { width:100%; border-collapse:collapse; text-align:left; }
        .vpo-table th { background:#f8fafc; padding:.75rem 1rem; font-size:.75rem; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid #e2e8f0; white-space:nowrap; }
        .dark .vpo-table th { background:#1e293b; color:#94a3b8; border-bottom-color:#334155; }
        .vpo-table td { padding:.875rem 1rem; border-bottom:1px solid #f1f5f9; vertical-align:middle; font-size:.85rem; color:#1e293b; }
        .dark .vpo-table td { border-bottom-color:#1e293b; color:#f1f5f9; }
        .vpo-table tr:last-child td { border-bottom:none; }
        .vpo-table tr:hover td { background:#f8fafc; }
        .dark .vpo-table tr:hover td { background:#1e293b; }
        .vpo-btn-action { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem; border-radius:.5rem; background:#eff6ff; color:#1d4ed8; font-size:.75rem; font-weight:700; cursor:pointer; transition:all .2s; border:none; }
        .vpo-btn-action:hover { background:#dbeafe; }
        .dark .vpo-btn-action { background:rgba(59,130,246,.2); color:#93c5fd; }
        .dark .vpo-btn-action:hover { background:rgba(59,130,246,.3); }

        /* ── Items Modal ── */
        .vpo-modal-backdrop { position:fixed; inset:0; z-index:9000; background:rgba(15,23,42,.6); backdrop-filter:blur(4px); animation:vpoFade .2s ease; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
        .vpo-modal { background:#fff; border-radius:1.25rem; width:min(900px,100%); max-height:90vh; display:flex; flex-direction:column; box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1); animation:vpoPop .25s cubic-bezier(.175,.885,.32,1.275); }
        .dark .vpo-modal { background:#0f172a; border:1px solid #334155; }
        @keyframes vpoPop { from{transform:scale(.95);opacity:0} to{transform:scale(1);opacity:1} }
        .vpo-modal-header { padding:1.25rem 1.5rem; border-bottom:1px solid #e2e8f0; display:flex; align-items:center; justify-content:space-between; }
        .dark .vpo-modal-header { border-bottom-color:#1e293b; }
        .vpo-modal-title { font-size:1.15rem; font-weight:800; color:#0f172a; }
        .dark .vpo-modal-title { color:#f1f5f9; }
        .vpo-modal-close { width:2rem; height:2rem; border-radius:.5rem; display:flex; align-items:center; justify-content:center; background:#f1f5f9; color:#64748b; cursor:pointer; border:none; transition:all .2s; }
        .vpo-modal-close:hover { background:#e2e8f0; color:#0f172a; }
        .dark .vpo-modal-close { background:#1e293b; color:#94a3b8; }
        .dark .vpo-modal-close:hover { background:#334155; color:#f1f5f9; }
        .vpo-modal-body { padding:1.5rem; overflow-y:auto; flex:1; }

        @media(max-width:640px){ .vpo-panel{width:100vw;} .vpo-panel-body,.vpo-panel-header{padding:1.1rem;} .vpo-grid{grid-template-columns:1fr;} }