:root {
    --bg-deep:#020c1a;--bg-base:#040e1e;--bg-card:#081626;--bg-elevated:#0c1d32;--bg-input:#091527;
    --border:#12283f;--border-soft:#1a3a58;
    --accent:#0ea5e9;--accent-dim:rgba(14,165,233,0.12);--accent-glow:rgba(14,165,233,0.35);
    --success:#10b981;--success-dim:rgba(16,185,129,0.12);
    --warning:#f59e0b;--warning-dim:rgba(245,158,11,0.12);
    --danger:#ef4444;--danger-dim:rgba(239,68,68,0.12);
    --purple:#8b5cf6;--teal:#14b8a6;
    --urgent:#f43f5e;--urgent-dim:rgba(244,63,94,0.15);
    --sanction:#ff4500;--sanction-dim:rgba(255,69,0,0.15);
    --text-main:#c8d8e8;--text-soft:#4e6a84;--text-muted:#243648;
    --mono:'DM Mono',monospace;--sans:'Syne',system-ui,sans-serif;
    --radius:10px;--radius-lg:14px;--header-h:58px;--bottom-h:62px;
}
/* LIGHT THEME */
[data-theme="light"] {
    --bg-deep:#f0f4f8;--bg-base:#f5f7fa;--bg-card:#ffffff;--bg-elevated:#edf1f7;--bg-input:#f8f9fb;
    --border:#d0dae6;--border-soft:#bcc8d6;
    --accent:#0284c7;--accent-dim:rgba(2,132,199,0.1);--accent-glow:rgba(2,132,199,0.25);
    --success:#059669;--success-dim:rgba(5,150,105,0.1);
    --warning:#d97706;--warning-dim:rgba(217,119,6,0.1);
    --danger:#dc2626;--danger-dim:rgba(220,38,38,0.1);
    --purple:#7c3aed;--teal:#0d9488;
    --urgent:#e11d48;--urgent-dim:rgba(225,29,72,0.12);
    --sanction:#dc2626;--sanction-dim:rgba(220,38,38,0.1);
    --text-main:#1e293b;--text-soft:#64748b;--text-muted:#94a3b8;
}
[data-theme="light"] .app-header{background:linear-gradient(180deg,#e8eef5 0%,var(--bg-base) 100%);}
[data-theme="light"] .brand-text h1{color:#1e293b;}
[data-theme="light"] .vessel-name{color:#0f172a;}
[data-theme="light"] .filter-menu-header h3{color:#1e293b;}
[data-theme="light"] .alert-header h2{color:#1e293b;}
[data-theme="light"] .modal-header h2{color:#1e293b;}
[data-theme="light"] #map{background:#e2e8f0;}
[data-theme="light"] .badge{border-color:var(--bg-base);}
[data-theme="light"] .btn-primary{color:#fff;}
[data-theme="light"] .leaflet-popup-content-wrapper{box-shadow:0 4px 16px rgba(0,0,0,.12)!important;}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:var(--border);}
[data-theme="light"] .radar-core{border-color:var(--accent);background:radial-gradient(circle,rgba(2,132,199,0.15) 0%,transparent 70%);}
[data-theme="light"] .radar-ring{border-color:var(--accent);}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;touch-action:pan-x pan-y;}
body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:pan-x pan-y;}
input,textarea,[contenteditable]{-webkit-user-select:text;-moz-user-select:text;user-select:text;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border-soft);border-radius:2px;}
body{font-family:var(--sans);background:var(--bg-deep);color:var(--text-main);min-height:100vh;line-height:1.5;overscroll-behavior-y:contain;}

/* HEADER */
.app-header{background:linear-gradient(180deg,#030f20 0%,var(--bg-base) 100%);border-bottom:1px solid var(--border);padding:0 max(16px,env(safe-area-inset-left));height:var(--header-h);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:300;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.header-brand{display:flex;align-items:center;gap:10px;}
.radar-wrap{position:relative;width:30px;height:30px;flex-shrink:0;}
.radar-core{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,0.2) 0%,transparent 70%);border:1px solid var(--accent);display:flex;align-items:center;justify-content:center;position:relative;z-index:2;}
.radar-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);}
.radar-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.5);width:30px;height:30px;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:radar-pulse 2.5s ease-out infinite;}
.radar-ring:nth-child(2){animation-delay:.85s;}.radar-ring:nth-child(3){animation-delay:1.7s;}
@keyframes radar-pulse{0%{transform:translate(-50%,-50%) scale(0.5);opacity:.8;}100%{transform:translate(-50%,-50%) scale(3.5);opacity:0;}}
.brand-text h1{font-size:.95rem;font-weight:800;letter-spacing:.06em;color:#fff;line-height:1;}
.brand-text span{font-family:var(--mono);font-size:.58rem;color:var(--accent);letter-spacing:.1em;}
.header-right{display:flex;align-items:center;gap:6px;}
.header-clock{font-family:var(--mono);font-size:.72rem;color:var(--text-soft);padding:4px 9px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);}
.icon-btn{background:var(--bg-elevated);border:1px solid var(--border-soft);color:var(--text-soft);padding:7px 9px;border-radius:var(--radius);cursor:pointer;font-size:.85rem;display:flex;align-items:center;justify-content:center;position:relative;transition:all .15s;min-width:36px;min-height:36px;font-family:var(--sans);font-weight:700;}
.icon-btn:hover,.icon-btn:active{background:var(--border-soft);color:var(--text-main);}
.icon-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);}
.badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:9px;background:var(--danger);color:#fff;font-family:var(--mono);font-size:.6rem;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg-base);padding:0 3px;}
.badge.hidden{display:none!important;}

/* STATUS BAR */
.status-bar{background:var(--bg-card);border-bottom:1px solid var(--border);padding:4px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.status-msg{font-size:.72rem;font-family:var(--mono);color:var(--text-soft);}
.status-msg.success{color:var(--success);}.status-msg.warning{color:var(--warning);}.status-msg.error{color:var(--danger);}
.health-pill{padding:2px 8px;border-radius:20px;font-size:.66rem;font-weight:700;border:1px solid var(--border-soft);font-family:var(--mono);color:var(--text-soft);}

/* KPI BAR */
.kpi-bar{background:var(--bg-card);border-bottom:1px solid var(--border);display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:0;position:sticky;top:var(--header-h);z-index:250;width:100%;}
.kpi-bar::-webkit-scrollbar{display:none;}
.kpi-item{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:7px 10px;border-right:1px solid var(--border);gap:1px;position:relative;}
.kpi-item:last-child{border-right:none;}
.kpi-label{font-size:.58rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-soft);white-space:nowrap;}
.kpi-value{font-family:var(--mono);font-size:1.1rem;font-weight:500;line-height:1;color:var(--text-main);}
.kpi-value.green{color:var(--success);}.kpi-value.yellow{color:var(--warning);}.kpi-value.red{color:var(--danger);}.kpi-value.blue{color:var(--accent);}.kpi-value.orange{color:var(--sanction);}
.kpi-health-bar{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--border);}
.kpi-health-fill{height:100%;transition:width .8s ease,background .3s;}

/* PTR - HIDDEN */
.ptr-indicator{display:none;}

/* FILTER BUTTON */
.filter-button{position:sticky;top:calc(var(--header-h) + 58px);left:0;right:0;margin:12px 14px 0;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 16px;font-size:.78rem;font-weight:700;color:var(--text-main);cursor:pointer;transition:all .15s;text-align:center;z-index:100;}
.filter-button:active{background:var(--border-soft);}

/* FILTER MENU (Mobile) */
.filter-menu{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:400;display:none;align-items:flex-end;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.filter-menu.show{display:flex;}
.filter-menu-content{background:var(--bg-card);border-top:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;width:100%;max-height:80vh;overflow-y:auto;animation:slideUp .3s ease-out;}
@keyframes slideUp{from{transform:translateY(100%);} to{transform:translateY(0);}}
.filter-menu-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border);}
.filter-menu-header h3{font-size:.85rem;font-weight:700;color:#fff;}
.filter-menu-body{padding:16px calc(16px + env(safe-area-inset-bottom));}

/* MAIN CONTAINER */
.main-container{max-width:860px;margin:0 auto;padding:14px 14px calc(var(--bottom-h) + 20px + env(safe-area-inset-bottom));width:100%;overflow-x:hidden;}

/* CARD */
.card{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border);margin-bottom:12px;overflow:hidden;}
.card-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.card-title{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text-soft);}
.card-body{padding:14px 16px;}

/* ADD VESSEL */
.add-vessel-form{display:flex;gap:8px;}
.input-field{background:var(--bg-input);border:1px solid var(--border-soft);border-radius:var(--radius);color:var(--text-main);font-family:var(--mono);font-size:.88rem;padding:10px 13px;outline:none;transition:border-color .2s,box-shadow .2s;width:100%;-webkit-appearance:none;appearance:none;}
.input-field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
.form-hint{font-size:.68rem;color:var(--text-muted);margin-top:6px;}
#namePreview{margin-top:8px;font-size:.8rem;min-height:22px;}

/* BUTTONS */
button{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.04em;border:none;border-radius:var(--radius);padding:10px 16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;transition:all .15s;white-space:nowrap;-webkit-appearance:none;}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 0 18px var(--accent-glow);}
.btn-primary:hover:not(:disabled){background:#38bdf8;transform:translateY(-1px);}
.btn-secondary{background:var(--bg-elevated);color:var(--text-main);border:1px solid var(--border-soft);}
.btn-secondary:hover:not(:disabled){background:var(--border-soft);}
.btn-danger{background:var(--danger-dim);color:var(--danger);border:1px solid rgba(239,68,68,.3);}
.btn-danger:hover:not(:disabled){background:rgba(239,68,68,.22);}
.btn-ghost{background:transparent;color:var(--text-soft);border:1px solid var(--border);}
.btn-ghost:hover:not(:disabled){background:var(--bg-elevated);color:var(--text-main);}
.btn-urgent{background:var(--urgent-dim);color:var(--urgent);border:1px solid rgba(244,63,94,.3);}
button:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none!important;}

/* FILTER SECTION */
.filter-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:12px;}
.filter-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.filter-header h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-soft);}
.filter-group{margin-bottom:10px;}
.filter-group label{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-soft);margin-bottom:5px;}
.select-field{background:var(--bg-input);border:1px solid var(--border-soft);border-radius:var(--radius);color:var(--text-main);font-family:var(--mono);font-size:.82rem;padding:8px 12px;outline:none;width:100%;-webkit-appearance:none;appearance:none;cursor:pointer;}
.select-field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
.filter-info{font-family:var(--mono);font-size:.65rem;color:var(--text-soft);margin-top:8px;}

/* SEARCH */
.search-row{display:flex;gap:8px;margin-bottom:10px;}
.search-input{flex:1;}

/* FILTER CHIPS */
.filter-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.chip{padding:5px 10px;border-radius:20px;font-size:.7rem;font-weight:700;border:1px solid var(--border-soft);background:var(--bg-elevated);color:var(--text-soft);cursor:pointer;transition:all .15s;white-space:nowrap;}
.chip:hover{border-color:var(--accent);color:var(--text-main);}
.chip.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);}
.chip.priority-chip.active{background:var(--urgent-dim);border-color:var(--urgent);color:var(--urgent);}
.chip.sanction-chip.active{background:var(--sanction-dim);border-color:var(--sanction);color:var(--sanction);}

/* VIEW TOGGLE */
.view-toggle{display:flex;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.view-toggle button{border-radius:0;border:none;background:transparent;color:var(--text-soft);padding:6px 13px;font-size:.72rem;}
.view-toggle button.active{background:var(--accent-dim);color:var(--accent);}

/* SECTION HEADER */
.section-header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.section-title{font-weight:700;font-size:.88rem;color:var(--text-main);}
.section-count{font-family:var(--mono);font-size:.7rem;color:var(--text-soft);margin-top:1px;}
.section-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}

/* TAGS */
.tag{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:6px;font-size:.7rem;font-weight:600;white-space:nowrap;}
.tag.status-underway{background:var(--success-dim);color:var(--success);border:1px solid rgba(16,185,129,.2);}
.tag.status-stalled{background:var(--danger-dim);color:var(--danger);border:1px solid rgba(239,68,68,.2);}
.tag.status-at_port{background:var(--accent-dim);color:var(--accent);border:1px solid rgba(14,165,233,.2);}
.tag.status-at_anchor{background:var(--warning-dim);color:var(--warning);border:1px solid rgba(245,158,11,.2);}
.tag.status-unknown{background:var(--bg-elevated);color:var(--text-soft);border:1px solid var(--border-soft);}
.tag.speed{background:var(--success-dim);color:var(--success);}
.tag.depth{background:rgba(20,184,166,.1);color:var(--teal);}
.tag.weather{background:rgba(139,92,246,.1);color:var(--purple);}
.tag.position{background:var(--accent-dim);color:var(--accent);font-family:var(--mono);font-size:.66rem;}
.tag.distance{background:var(--warning-dim);color:var(--warning);}
.tag.sanction-tag{background:var(--sanction-dim);color:var(--sanction);border:1px solid rgba(255,69,0,.3);animation:sanction-pulse 2s ease-in-out infinite;}
@keyframes sanction-pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* SANCTION BANNER */
.sanction-banner{padding:9px 16px;background:var(--sanction-dim);border-bottom:1px solid rgba(255,69,0,.25);display:flex;align-items:flex-start;gap:9px;font-size:.76rem;}
.sanction-banner-icon{font-size:.95rem;flex-shrink:0;margin-top:1px;}
.sanction-banner-title{font-weight:700;color:var(--sanction);margin-bottom:2px;}
.sanction-banner-detail{color:var(--text-main);font-size:.7rem;line-height:1.4;}

/* PRIORITY INDICATOR */
.priority-indicator{width:5px;flex-shrink:0;background:var(--urgent);animation:sanction-pulse 1.5s ease-in-out infinite;}

/* VESSELS */
.vessels-container{display:flex;flex-direction:column;gap:10px;min-height:200px;contain: layout style;}
.vessel-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .2s,box-shadow .2s;display:flex;flex-direction:column;contain:layout style;}
.vessel-card.priority{border-color:rgba(244,63,94,.4);box-shadow:0 0 16px rgba(244,63,94,.1);}
.vessel-card.sanctioned{border-color:rgba(255,69,0,.5);box-shadow:0 0 20px rgba(255,69,0,.15);}
.vessel-card:not(.sanctioned):not(.priority){border-left:3px solid transparent;}
.vessel-card.underway{border-left-color:var(--success);}
.vessel-card.at_port{border-left-color:var(--accent);}
.vessel-card.at_anchor{border-left-color:var(--warning);}
.vessel-card.stalled{border-left-color:var(--danger);}
.vessel-card-inner{display:flex;flex:1;}
.vessel-main{padding:13px 15px;cursor:pointer;flex:1;}
.vessel-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px;}
.vessel-name-block{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.vessel-name{font-size:.93rem;font-weight:700;color:#fff;}
.vessel-imo{font-family:var(--mono);font-size:.66rem;color:var(--text-soft);margin-top:2px;margin-left:1px;}
.vessel-loa{font-family:var(--mono);font-size:.66rem;color:var(--text-soft);background:var(--bg-elevated);padding:2px 6px;border-radius:4px;border:1px solid var(--border);}
.flag-icon{width:24px;height:17px;aspect-ratio:24/17;object-fit:cover;border:1px solid var(--border-soft);border-radius:2px;flex-shrink:0;}
.flag-placeholder{width:24px;height:17px;aspect-ratio:24/17;background:var(--bg-elevated);border:1px solid var(--border);border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;}
.vessel-meta{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin:8px 0;}
.meta-row{display:flex;align-items:baseline;gap:5px;font-size:.75rem;}
.meta-label{color:var(--text-soft);font-size:.67rem;min-width:55px;flex-shrink:0;}
.meta-val{color:var(--text-main);font-family:var(--mono);font-size:.75rem;}
.meta-val.age-recent{color:var(--success);}.meta-val.age-moderate{color:var(--warning);}.meta-val.age-stale{color:var(--danger);}
.meta-val.status-critical{color:var(--danger);animation:blink 1s step-start infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.tag-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;}
.hint-text{font-size:.63rem;color:var(--text-muted);margin-top:7px;}
.eta-countdown{font-family:var(--mono);font-size:.7rem;color:var(--accent);font-weight:500;}
.eta-countdown.arrived{color:var(--success);}.eta-countdown.overdue{color:var(--danger);}

/* EXPANDED */
.vessel-expanded{max-height:0;overflow:hidden;padding:0 16px;background:var(--bg-elevated);border-top:1px solid transparent;transition:max-height .4s ease,padding .3s,border-color .3s;}
.vessel-expanded.open{max-height:1600px;padding:16px;border-top-color:var(--border);}
.expanded-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:12px;}
.exp-item{display:flex;flex-direction:column;gap:2px;}
.exp-label{font-size:.62rem;text-transform:uppercase;letter-spacing:.09em;color:var(--text-soft);}
.exp-val{font-family:var(--mono);font-size:.8rem;color:var(--text-main);font-weight:500;}
.section-divider{height:1px;background:var(--border);margin:12px 0;}
.section-mini-title{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-soft);margin-bottom:8px;font-weight:700;}

/* PORT COMPATIBILITY */
.compat-grid{display:flex;gap:7px;flex-wrap:wrap;}
.compat-port{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:7px 10px;display:flex;align-items:center;gap:7px;font-size:.74rem;}
.compat-port-name{color:var(--text-main);font-weight:700;}
.compat-port-depth{font-family:var(--mono);font-size:.65rem;color:var(--text-soft);}
.compat-ok{color:var(--success);}.compat-warn{color:var(--warning);}.compat-no{color:var(--danger);}.compat-unk{color:var(--text-soft);}

/* NOTES */
textarea{background:var(--bg-input);border:1px solid var(--border-soft);border-radius:var(--radius);color:var(--text-main);font-family:var(--mono);font-size:.78rem;padding:10px 13px;outline:none;width:100%;resize:vertical;min-height:54px;transition:border-color .2s;}
textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
.notes-saved{font-size:.62rem;color:var(--success);margin-left:7px;opacity:0;transition:opacity .3s;}
.notes-saved.show{opacity:1;}

/* VESSEL FOOTER */
.vessel-footer{padding:9px 15px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--bg-base);flex-wrap:wrap;}
.vessel-footer-meta{font-family:var(--mono);font-size:.63rem;color:var(--text-soft);}
.vessel-footer-actions{display:flex;gap:5px;}

/* MAP */
.map-view{display:none;}
#map{height:460px;border-radius:var(--radius);overflow:hidden;background:#0a1520;}
.map-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;padding:8px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);}
.legend-item{display:flex;align-items:center;gap:5px;font-size:.7rem;color:var(--text-soft);}
.legend-color{width:10px;height:10px;border-radius:50%;}
.legend-color.underway{background:var(--success);}
.legend-color.port{background:var(--accent);}
.legend-color.anchor{background:var(--warning);}
.legend-color.stalled{background:var(--danger);}
.leaflet-popup-content-wrapper{background:var(--bg-card)!important;border:1px solid var(--border-soft)!important;border-radius:var(--radius)!important;box-shadow:0 8px 32px rgba(0,0,0,.6)!important;color:var(--text-main)!important;font-family:var(--sans)!important;}
.leaflet-popup-tip{background:var(--bg-card)!important;}
.leaflet-popup-close-button{color:var(--text-soft)!important;}

/* FAB FILTER */
.fab-filter{position:fixed;bottom:calc(var(--bottom-h) + 14px + env(safe-area-inset-bottom));right:16px;z-index:150;background:var(--accent);color:#fff;border:none;border-radius:24px;padding:10px 18px;font-size:.78rem;font-weight:700;letter-spacing:.05em;box-shadow:0 4px 20px var(--accent-glow);display:none;}

/* ALERT PANEL */
.alert-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1499;display:none;}
.alert-overlay.show{display:block;}
.alert-panel{position:fixed;top:0;right:0;width:min(360px,100vw);height:100vh;background:var(--bg-card);border-left:1px solid var(--border);z-index:1500;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(0,0,0,.6);padding-bottom:env(safe-area-inset-bottom);}
.alert-panel.open{transform:translateX(0);}
.alert-header{padding:15px 17px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;flex-wrap:wrap;}
.alert-header h2{font-weight:700;font-size:.9rem;color:#fff;}
.alert-list{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:7px;-webkit-overflow-scrolling:touch;}
.alert-item{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;font-size:.78rem;}
.alert-item.unread{border-left:3px solid var(--accent);}
.alert-item.type-stalled{border-left-color:var(--danger);}
.alert-item.type-arrived{border-left-color:var(--success);}
.alert-item.type-stale{border-left-color:var(--warning);}
.alert-item.type-approaching{border-left-color:var(--purple);}
.alert-item.type-added{border-left-color:var(--accent);}
.alert-item.type-sanctioned{border-left-color:var(--sanction);background:var(--sanction-dim);}
.alert-msg{color:var(--text-main);line-height:1.4;}
.alert-time{font-family:var(--mono);font-size:.62rem;color:var(--text-soft);margin-top:3px;}
.alert-empty{text-align:center;padding:40px 20px;color:var(--text-soft);font-size:.82rem;}

/* CONFIRM MODAL */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:2000;backdrop-filter:blur(4px);padding:20px;}
.modal-content{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:24px;max-width:400px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.7);}
.modal-header h2{font-size:1rem;font-weight:700;color:#fff;margin-bottom:8px;}
.modal-body{font-size:.82rem;color:var(--text-soft);line-height:1.5;margin-bottom:20px;}
.modal-footer{display:flex;gap:8px;justify-content:flex-end;}

/* LOADING */
.loading-overlay{position:fixed;inset:0;background:rgba(2,12,26,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2000;backdrop-filter:blur(6px);}
.loading-overlay.hidden{display:none!important;}
.spinner{width:34px;height:34px;border:2px solid var(--border-soft);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* EMPTY STATE */
.empty-state{text-align:center;padding:50px 20px;color:var(--text-soft);}
.empty-state .icon{font-size:2.2rem;margin-bottom:12px;opacity:.35;}
.empty-state p{font-size:.86rem;margin-bottom:5px;}
.empty-state small{font-family:var(--mono);font-size:.7rem;color:var(--accent);}

/* SYSTEM INFO */
.system-info{padding:6px 14px;font-size:.65rem;font-family:var(--mono);color:var(--text-muted);text-align:right;}

/* BOTTOM NAV */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:calc(var(--bottom-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--bg-card);border-top:1px solid var(--border);display:none;align-items:center;justify-content:space-around;z-index:200;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 12px;cursor:pointer;color:var(--text-soft);transition:color .15s;border-radius:var(--radius);flex:1;}
.nav-item.active{color:var(--accent);}
.nav-item span:first-child{font-size:1.15rem;}
.nav-item span:last-child{font-size:.56rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}

/* SANCTIONS STATUS */
.sanctions-loading{display:flex;align-items:center;gap:5px;font-size:.68rem;color:var(--text-soft);font-family:var(--mono);}
.sanctions-dot{width:6px;height:6px;border-radius:50%;background:var(--warning);animation:blink 1s step-start infinite;}

/* HIDDEN */
.hidden{display:none!important;}

/* AUTCOMPLETE DROPDOWN */
.ac-wrap{position:relative;flex:1;}
#acDropdown{position:fixed;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--radius);z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,.55);max-height:280px;overflow-y:auto;display:none;}
#acDropdown.show{display:block;}
.ac-item{display:flex;align-items:center;gap:9px;padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s;}
.ac-item:last-child{border-bottom:none;}
.ac-item:hover,.ac-item.ac-active{background:var(--bg-elevated);}
.ac-item img{flex-shrink:0;border:1px solid var(--border);border-radius:2px;}
.ac-flag-ph{width:24px;height:17px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:2px;flex-shrink:0;}
.ac-name{font-size:.84rem;font-weight:700;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}
.ac-meta{font-size:.66rem;color:var(--text-soft);white-space:nowrap;}
.ac-imo{font-family:var(--mono);font-size:.66rem;color:var(--accent);margin-left:auto;flex-shrink:0;}
.ac-empty{padding:10px 14px;font-size:.78rem;color:var(--text-soft);}

/* SOF MODAL STYLES */
.sof-section-title{font-weight:600;font-size:.82rem;color:var(--accent);margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--border);}
.sof-row{display:flex;flex-direction:column;gap:3px;margin-bottom:10px;}
.sof-label{font-size:.72rem;color:var(--text-soft);}
.sof-input{background:var(--bg-elevated);border:1px solid var(--border);border-radius:7px;padding:7px 10px;color:var(--text-main);font-size:.8rem;outline:none;width:100%;box-sizing:border-box;}
.sof-input:focus{border-color:var(--accent);}
.sof-th{padding:5px 6px;text-align:left;border:1px solid var(--border);font-weight:600;color:var(--text-soft);font-size:.65rem;white-space:nowrap;}
.sof-td{padding:2px 3px;border:1px solid var(--border);vertical-align:middle;}
.sof-cell{background:var(--bg-elevated);border:none;color:var(--text-main);font-size:.7rem;padding:3px 4px;width:100%;outline:none;border-radius:3px;}
.sof-cell:focus{background:var(--bg-card);border:1px solid var(--accent);}

/* PORT CALLS MODAL */
.pc-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1600;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .2s;}
.pc-overlay.open{opacity:1;pointer-events:all;}
.pc-modal{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;width:100%;max-width:540px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4);}
.pc-modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border);flex-shrink:0;}
.pc-modal-title{font-size:.85rem;font-weight:700;color:var(--text-main);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pc-modal-close{background:none;border:none;color:var(--text-soft);font-size:1rem;cursor:pointer;padding:4px 8px;border-radius:6px;flex-shrink:0;}
.pc-modal-close:hover{color:var(--text-main);background:var(--bg-elevated);}
.pc-modal-body{overflow-y:auto;padding:12px 14px;flex:1;}
.pc-notice{font-size:.68rem;color:var(--text-soft);background:var(--bg-elevated);border-radius:6px;padding:6px 10px;margin-bottom:10px;line-height:1.5;}
.pc-row{border:1px solid var(--border);border-radius:8px;margin-bottom:6px;background:var(--bg-elevated);overflow:hidden;}
.pc-row.is-manual{border-left:3px solid var(--accent);}
.pc-row-view{display:flex;align-items:flex-start;gap:8px;padding:9px 10px;}
.pc-row-index{font-family:var(--mono);font-size:.62rem;color:var(--text-soft);min-width:16px;padding-top:3px;text-align:right;}
.pc-row-info{flex:1;min-width:0;}
.pc-row-name{font-size:.8rem;font-weight:700;color:var(--text-main);display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.pc-manual-badge{font-size:.58rem;background:var(--accent-dim);color:var(--accent);border-radius:3px;padding:1px 5px;font-weight:600;letter-spacing:.04em;}
.pc-row-dates{font-family:var(--mono);font-size:.66rem;color:var(--text-soft);margin-top:3px;display:flex;flex-wrap:wrap;gap:10px;}
.pc-row-dur{font-size:.65rem;color:var(--text-soft);margin-top:2px;}
.pc-row-actions{display:flex;gap:3px;flex-shrink:0;align-items:flex-start;padding-top:1px;}
.pc-row-actions button{background:none;border:1px solid transparent;border-radius:5px;padding:3px 7px;font-size:.7rem;cursor:pointer;color:var(--text-soft);line-height:1;}
.pc-row-actions .pc-btn-edit{border-color:var(--border);}
.pc-row-actions .pc-btn-edit:hover{border-color:var(--accent);color:var(--accent);}
.pc-row-actions .pc-btn-del:hover{border-color:var(--danger);color:var(--danger);}
.pc-edit-form{padding:10px 12px;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--border);}
.pc-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.pc-field{display:flex;flex-direction:column;gap:3px;}
.pc-field label{font-size:.6rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text-soft);}
.pc-field input{background:var(--bg-input);border:1px solid var(--border-soft);border-radius:6px;color:var(--text-main);font-family:var(--mono);font-size:.74rem;padding:6px 8px;outline:none;width:100%;box-sizing:border-box;}
.pc-field input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim);}
.pc-full{grid-column:1/-1;}
.pc-form-actions{display:flex;gap:6px;justify-content:flex-end;}
.pc-btn-save{background:var(--accent);color:#fff;border:none;border-radius:6px;padding:6px 16px;font-size:.74rem;font-weight:600;cursor:pointer;}
.pc-btn-save:disabled{opacity:.45;cursor:default;}
.pc-btn-cancel-edit{background:none;border:1px solid var(--border);border-radius:6px;padding:6px 12px;font-size:.74rem;color:var(--text-soft);cursor:pointer;}
.pc-add-btn{width:100%;margin-top:6px;background:none;border:1px dashed var(--border);border-radius:8px;padding:9px;font-size:.74rem;color:var(--text-soft);cursor:pointer;transition:all .15s;}
.pc-add-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);}
.pc-loading,.pc-empty{text-align:center;padding:24px 16px;font-size:.78rem;color:var(--text-soft);}

/* SKELETON CARDS */
.sk{background:linear-gradient(90deg,var(--bg-elevated) 25%,var(--border-soft) 50%,var(--bg-elevated) 75%);background-size:200% 100%;animation:sk-shimmer 1.4s ease-in-out infinite;border-radius:4px;display:block;}
@keyframes sk-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.sk-line{height:9px;margin-bottom:6px;}
.sk-circle{width:24px;height:17px;flex-shrink:0;border-radius:2px;}
.sk-badge{width:74px;height:22px;border-radius:6px;}
.sk-tag{width:55px;height:20px;border-radius:20px;}
.skeleton-card{pointer-events:none;opacity:.85;}

/* RESPONSIVE */
@media(max-width:640px){
    .bottom-nav{display:flex;}
    .header-clock{display:none;}
    .desktop-only{display:none!important;}
    .filter-button{display:block;}
    .vessel-meta{grid-template-columns:1fr;}
    #map{height:360px;}
    .kpi-bar{grid-template-columns:repeat(auto-fit,minmax(60px,1fr));}
    .kpi-item{padding:6px 6px;}
    .kpi-label{font-size:.52rem;}
    .kpi-value{font-size:.95rem;}
    .filter-chips{gap:4px;margin-bottom:8px;flex-wrap:wrap;}
    .chip{padding:4px 8px;font-size:.63rem;}
    .main-container{padding:10px 10px calc(var(--bottom-h) + 14px + env(safe-area-inset-bottom));}
    .add-vessel-form{flex-direction:column;}
    .add-vessel-form .input-field{width:100%;}
    .add-vessel-form .btn-primary{width:100%;justify-content:center;}
    .icon-btn{min-width:40px;min-height:40px;}
    .nav-item{padding:6px 8px;min-width:52px;}
    .header-right{gap:4px;}
    .brand-text h1{font-size:.82rem;}
    .brand-text span{font-size:.55rem;}
    .vessel-footer{flex-direction:column;align-items:flex-start;gap:6px;}
    .vessel-footer-actions{width:100%;justify-content:flex-end;}
    .expanded-grid{grid-template-columns:1fr 1fr;}
    .status-bar{flex-wrap:wrap;gap:4px;}
}
@media(min-width:641px){.mobile-only{display:none!important;} .filter-button{display:none!important;}}
@media(max-width:400px){
    .expanded-grid{grid-template-columns:1fr;}
    .brand-text h1{font-size:.75rem;}
}