/* «Балтик Лайн» — sea container demo. Palette: harbour grey, sea blue, container orange */
:root{--bg:#e8eef0;--surface:#fff;--s2:#f3f6f7;--sheet:#f7f9fa;--line:#dde4e7;--line2:#cbd5da;--ink:#17202a;--ink2:#3c4752;--muted:#76818c;--sea:#1f5f8b;--sea2:#3a86b7;--sea-soft:#e3eef5;--or:#ff5a1f;--or-soft:#fff0e8;--ok:#1f9a6e;--ok-soft:#e3f4ec;--bad:#e0443e;--bad-soft:#fde5e4;--warn:#e8a32e;--warn-soft:#fdf1dc;--violet:#8b6fd0;--shadow:0 1px 2px rgba(20,40,60,.04),0 12px 30px -18px rgba(20,40,60,.35);--font:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;--ease:cubic-bezier(.23,1,.32,1);color-scheme:light}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow:hidden;font-size:14px}
button,select,input{font:inherit;color:inherit}button{cursor:pointer}
:focus-visible{outline:2px solid var(--sea2);outline-offset:2px;border-radius:8px}
#world{position:fixed;inset:0}#world canvas{display:block}
.top{position:fixed;left:18px;top:16px;z-index:5;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.brand{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px 16px 10px 10px;box-shadow:var(--shadow)}
.logo{width:36px;height:36px;border-radius:10px;background:var(--sea);display:grid;place-items:center;color:#fff;font-weight:800}
.brand b{display:block;font-size:17px}.brand span{font-size:12px;color:var(--muted)}
.kpis{display:flex;gap:8px}.kpi{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px 14px;box-shadow:var(--shadow);text-align:left}
.kpi small{display:block;font-size:11.5px;color:var(--muted)}.kpi b{font-size:19px;letter-spacing:-.02em;white-space:nowrap}.up{color:var(--ok);font-size:12px;font-weight:700;margin-left:4px}
/* vessels card */
.fleet{position:fixed;right:18px;top:16px;z-index:5;width:330px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:12px 12px 8px}
.fleet h3{margin:0 4px 8px;font-size:13px;display:flex;justify-content:space-between;align-items:center}.fleet h3 small{color:var(--muted);font-weight:600}
.live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:7px;box-shadow:0 0 0 3px var(--ok-soft)}
.vrow{display:grid;grid-template-columns:1fr auto;gap:2px 10px;width:100%;border:0;background:transparent;text-align:left;padding:8px;border-radius:12px;transition:background .15s}
.vrow:hover{background:var(--s2)}.vrow b{font-size:13.5px}.vrow .eta{font-weight:800;font-size:13px;text-align:right}.vrow .eta.late{color:var(--bad)}
.vrow span{font-size:12px;color:var(--muted)}.vrow .mix{grid-column:1/-1;font-size:11.5px;color:var(--ink2)}
.cbadge{display:inline-block;border-radius:5px;padding:0 5px;font-weight:700;font-size:11px;margin-right:3px}.c20{background:var(--sea-soft);color:var(--sea)}.c40{background:var(--or-soft);color:#c2410c}
.fleet .all{width:100%;margin-top:4px;border:1px solid var(--line);background:var(--s2);border-radius:10px;padding:8px;font-weight:700;font-size:12.5px;color:var(--sea)}
/* tags */
.tag{position:fixed;z-index:4;transform:translate(-50%,-100%);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:9px 12px 10px;box-shadow:0 14px 34px -16px rgba(20,40,60,.4);min-width:130px;cursor:pointer;text-align:left}
.tag:after{content:"";position:absolute;left:50%;bottom:-12px;width:1px;height:12px;background:#b9c4ca}
.tag i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px}
.tag small{font-size:11.5px;color:var(--muted);font-weight:700}.tag b{display:block;font-size:16px;letter-spacing:-.02em;margin:2px 0 1px;white-space:nowrap}
.tag span{display:block;font-size:12px;color:var(--muted)}.tag .warn{color:var(--bad);font-weight:600}.tag em{display:block;font-style:normal;font-size:12px;font-weight:700;color:var(--sea);margin-top:5px}
@media (hover:hover) and (pointer:fine){.tag{transition:transform .18s var(--ease)}.tag:hover{transform:translate(-50%,-100%) translateY(-2px)}}
.dock{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:2px;padding:5px;background:var(--surface);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow);z-index:6;max-width:calc(100% - 24px);overflow-x:auto;scrollbar-width:none}
.dock::-webkit-scrollbar{display:none}
.dock button{border:0;background:transparent;padding:9px 14px;border-radius:999px;font-size:13px;font-weight:650;color:var(--muted);white-space:nowrap}.dock button:hover{color:var(--ink)}.dock button.on{background:var(--ink);color:#fff}
.hint{position:fixed;left:18px;bottom:22px;font-size:12px;color:var(--muted);z-index:5;max-width:180px}
/* panel */
.panel{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-start;justify-content:center;padding:16px;pointer-events:none;opacity:0;transition:opacity .2s}
.panel.on{opacity:1;pointer-events:auto;background:color-mix(in srgb,var(--bg) 60%,transparent);backdrop-filter:blur(6px)}
.sheet{width:min(1240px,100%);max-height:100%;background:var(--sheet);border:1px solid var(--line);border-radius:26px;box-shadow:0 40px 80px -40px rgba(0,0,0,.45);overflow:auto;padding:0 22px 26px;transform:translateY(16px) scale(.98);transition:transform .25s var(--ease)}
.panel.on .sheet{transform:none}
@media(prefers-reduced-motion:reduce){.panel,.sheet{transition:opacity .15s}.sheet{transform:none}}
.sh-head{position:sticky;top:0;z-index:3;background:var(--sheet);padding:14px 0 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tabs{display:flex;gap:2px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1}.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:transparent;border-radius:999px;padding:7px 13px;font-size:13px;font-weight:650;color:var(--muted);white-space:nowrap}.tabs button.on{background:var(--ink);color:#fff}
.close{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:16px;flex:none}
.sh-title{margin:18px 0 14px}.sh-title h2{margin:0;font-size:26px;letter-spacing:-.03em}.sh-title p{margin:4px 0 0;color:var(--muted);font-size:13px}
.grid{display:grid;gap:12px}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g21{grid-template-columns:2fr 1fr}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;min-width:0}
.card h4{margin:0 0 2px;font-size:14px}.card .sub{font-size:12px;color:var(--muted);margin-bottom:10px}
.stat small{display:block;color:var(--muted);font-size:12px}.stat b{display:block;font-size:24px;letter-spacing:-.03em;margin-top:4px}.stat span{font-size:12px;color:var(--muted)}
.pos{color:var(--ok)}.neg{color:var(--bad)}
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 8px;font-size:11.5px;font-weight:700;white-space:nowrap}
.chip.ok{background:var(--ok-soft);color:var(--ok)}.chip.busy{background:var(--bad-soft);color:var(--bad)}.chip.up{background:var(--warn-soft);color:#a86a06}.chip.wait{background:var(--s2);color:var(--muted)}.chip.auto{background:var(--or-soft);color:#c2410c}.chip.rail{background:var(--ok-soft);color:var(--ok)}
table.t{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}
.t th{text-align:left;font-size:11.5px;color:var(--muted);font-weight:700;padding:8px 6px;border-bottom:1px solid var(--line)}
.t td{padding:9px 6px;border-bottom:1px solid var(--line);vertical-align:middle;overflow:hidden;text-overflow:ellipsis}
.t tr:last-child td{border-bottom:0}.t .r{text-align:right}.t td b{font-weight:700}
.t tr.sel td{background:var(--sea-soft)}
.t td .muted,.muted{color:var(--muted);font-size:12px}
.bar{height:8px;border-radius:99px;background:var(--s2);overflow:hidden}.bar i{display:block;height:100%;border-radius:99px;background:var(--sea2)}
select.pick{width:100%;border:1px solid var(--line2);border-radius:10px;padding:7px 8px;background:var(--surface);font-size:12.5px;font-weight:600}
.map{width:100%;height:auto;display:block;border-radius:14px;background:#d6e6ef}
.map .land{fill:#f4f2ec;stroke:#d9d4c8;stroke-width:.4}
.map .route{fill:none;stroke:var(--sea2);stroke-width:1.1;stroke-dasharray:3 3;opacity:.55}
.map .done{fill:none;stroke:var(--sea);stroke-width:1.4;opacity:.9}
.map .port{fill:var(--ink)}.map text{font:700 5.4px var(--font);fill:var(--ink2);paint-order:stroke;stroke:#d6e6ef;stroke-width:1.6px}
.map .ship{cursor:pointer}.map .ship circle{fill:var(--or);stroke:#fff;stroke-width:1.2}.map .ship.on circle{fill:var(--sea)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
svg.ch{width:100%;height:auto;display:block;overflow:visible}svg.ch text{font:600 10px var(--font);fill:var(--muted)}
.heat{display:grid;grid-template-columns:150px repeat(8,minmax(0,1fr)) 64px;gap:4px;align-items:center;font-size:12.5px}
.heat .c{height:26px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:700}
.funnel .st{display:grid;grid-template-columns:150px 1fr 70px;gap:10px;align-items:center;margin:8px 0;font-size:13px}
.funnel .st div{height:28px;border-radius:8px;background:var(--sea2);display:flex;align-items:center;padding:0 10px;color:#fff;font-weight:700;font-size:12px}
.note{font-size:12.5px;color:var(--ink2);background:var(--warn-soft);border-radius:12px;padding:10px 12px}
.totals{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline}.totals div small{display:block;color:var(--muted);font-size:12px}.totals div b{font-size:20px}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3,.g21{grid-template-columns:1fr}.fleet{width:290px}}
@media(max-width:700px){
 .top{left:12px;right:12px;top:10px}.brand span{display:none}.kpis{width:100%}.kpi{flex:1;padding:6px 9px}.kpi b{font-size:15px}.kpi small{font-size:10.5px}.up{display:none}
 .fleet{left:12px;right:12px;top:auto;bottom:72px;width:auto;padding:8px}.fleet .vrow:nth-of-type(n+3){display:none}.fleet h3{margin-bottom:2px}
 .tag{min-width:0;padding:6px 9px}.tag span{display:none}.tag span.warn{display:block}.tag b{font-size:13.5px}.hint{display:none}
 .dock{left:12px;right:12px;transform:none;bottom:12px;max-width:none}
 .panel{padding:0}.sheet{border-radius:0;padding:0 14px 40px;max-height:100%;height:100%}.g2{grid-template-columns:1fr}.sh-title h2{font-size:22px}
 .t.cards thead{display:none}.t.cards,.t.cards tbody,.t.cards tr,.t.cards td{display:block;width:100%}.t.cards tr{border:1px solid var(--line);border-radius:14px;padding:8px 10px;margin-bottom:8px;background:var(--surface)}
 .t.cards td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:10px;text-align:right}.t.cards td:before{content:attr(data-l);color:var(--muted);font-size:12px;text-align:left}
 .t.cards td.full{display:block;text-align:left}.t.cards td.full:before{display:block;margin-bottom:4px}
 .heat{grid-template-columns:96px repeat(8,minmax(0,1fr)) 40px;font-size:11px}.heat .c{height:22px;font-size:9.5px}
 .funnel .st{grid-template-columns:100px 1fr 46px;font-size:12px}
 .wk i{display:none}.fleet .mix{display:none}.fleet .vrow{padding:5px 6px}.tag em{display:none}.tag small{font-size:10.5px}
}