/* Atlantic Trade 7 — Canary Options palette, four sections and a lighter, playful look.
   Loaded after the base sheets: it restyles components without changing their markup. */
:root{
  --c-blue:#1688B4;--c-yellow:#E3BB32;--c-orange:#E17B46;--c-green:#77A56B;--c-red:#D15B63;--c-violet:#8174B3;--c-grey:#8B929B;
  --c-blue-l:#5fc0e6;--c-yellow-l:#f3d677;--c-orange-l:#f2a27a;--c-green-l:#a6cf9a;--c-red-l:#ec8f96;--c-violet-l:#b0a6e0;
  --bg:#071726;--bg2:#0b2136;--panel:#0f263d;--panel2:#132e49;--line:#ffffff14;--line2:#ffffff22;
  --ink:#f2f6fa;--muted:#9fb1c3;--mint:var(--c-green-l);--gold:var(--c-yellow);--red:var(--c-red-l);
  --blue:var(--c-blue-l);--green:var(--c-green-l);--yellow:var(--c-yellow);
  --accent:var(--c-blue);--accent-l:var(--c-blue-l);
  --radius:20px;--shadow:0 14px 40px #0006,0 2px 0 #ffffff08 inset;
  --font:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
  font:14px/1.5 var(--font);
}
body[data-section=port]{--accent:var(--c-green);--accent-l:var(--c-green-l)}
body[data-section=fleet]{--accent:var(--c-yellow);--accent-l:var(--c-yellow-l)}
body[data-section=company]{--accent:var(--c-violet);--accent-l:var(--c-violet-l)}
body{font-family:var(--font);background:
  radial-gradient(900px 500px at 85% -10%,#1688b433,transparent 60%),
  radial-gradient(700px 500px at -10% 110%,#8174b322,transparent 60%),
  linear-gradient(180deg,var(--bg2),var(--bg) 60%) fixed;color:var(--ink)}
button,input,select{font-family:var(--font)}
h1,h2,h3{letter-spacing:-.3px}
h1{font-weight:800;font-size:28px}
h2{font-weight:750}
h3{font-weight:700}
p{color:var(--muted)}
.eyebrow,body .eyebrow{color:var(--accent-l);letter-spacing:1.6px;font-weight:800;font-size:10px}
a{color:var(--c-blue-l)}

/* ---------- Buttons ---------- */
button,body button{background:#ffffff0d;border:1px solid var(--line2);color:var(--ink);border-radius:12px;font-weight:650;transition:transform .12s,background .15s,border-color .15s,box-shadow .2s}
button:hover,body button:hover{background:#ffffff1a;border-color:#ffffff38}
button:active{transform:translateY(1px) scale(.985)}
button.ghost,body button.ghost{background:transparent}
button.primary,body button.primary{background:linear-gradient(180deg,#22a0cf,var(--c-blue));border:0;color:#fff;font-weight:800;box-shadow:0 6px 18px #1688b455,0 -2px 0 #0003 inset}
button.primary:hover,body button.primary:hover{background:linear-gradient(180deg,#36b2df,#1a93c2);border:0;box-shadow:0 8px 24px #1688b477,0 -2px 0 #0003 inset}
body[data-section=port] button.primary{background:linear-gradient(180deg,#86b67a,#5f9154);box-shadow:0 6px 18px #77a56b55,0 -2px 0 #0003 inset}
body[data-section=fleet] button.primary{background:linear-gradient(180deg,#f0c94a,#d3a51e);color:#2b2005;box-shadow:0 6px 18px #e3bb3244,0 -2px 0 #0002 inset}
body[data-section=company] button.primary{background:linear-gradient(180deg,#968bd0,#6f62a6);box-shadow:0 6px 18px #8174b355,0 -2px 0 #0003 inset}
button.active,body button.active{background:color-mix(in srgb,var(--accent) 28%,transparent);border-color:var(--accent);color:#fff}
button.danger,body button.danger{background:#d15b6322;border:1px solid #d15b6388;color:#ffc9cd}
button[data-unavailable="true"]{opacity:.5;filter:saturate(.4)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--c-yellow);outline-offset:3px}
input,select,body input,body select{background:#061525;border:1px solid var(--line2);border-radius:12px;color:var(--ink)}
input:focus,select:focus{border-color:var(--accent-l)}
label{color:var(--muted);font-weight:650;letter-spacing:.4px}
details>summary{cursor:pointer;color:var(--accent-l);font-weight:700;font-size:12px;list-style:none;display:flex;align-items:center;gap:8px;padding:6px 0;user-select:none}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:'›';display:inline-grid;place-items:center;width:20px;height:20px;border-radius:7px;background:#ffffff12;transition:transform .2s;font-size:14px}
details[open]>summary::before{transform:rotate(90deg)}

/* ---------- Shell ---------- */
.app-shell{grid-template-columns:104px minmax(0,1fr)}
.sidebar,body .sidebar{background:linear-gradient(180deg,#0b2136f2,#08192af2);border-right:1px solid var(--line);padding:22px 10px;align-items:center}
.brand{flex-direction:column;gap:8px;text-align:center;font-size:9px;letter-spacing:2px;color:#cfe3f0;line-height:1.2}
.brand b{display:block;letter-spacing:3.5px;color:var(--c-yellow);font-size:11px}
.brand-mark svg{width:46px;height:46px;display:block;filter:drop-shadow(0 6px 14px #1688b466)}
#navigation{margin-top:34px;gap:10px;width:100%}
#navigation button,body #navigation button{flex-direction:column;gap:6px;justify-content:center;padding:12px 4px;border-radius:16px;font-size:11px;font-weight:750;color:var(--muted);background:transparent;border:1px solid transparent;text-align:center}
#navigation button[data-tone=blue]{--t:var(--c-blue);--tl:var(--c-blue-l)}
#navigation button[data-tone=green]{--t:var(--c-green);--tl:var(--c-green-l)}
#navigation button[data-tone=yellow]{--t:var(--c-yellow);--tl:var(--c-yellow-l)}
#navigation button[data-tone=violet]{--t:var(--c-violet);--tl:var(--c-violet-l)}
#navigation button .nav-icon,body #navigation button .nav-icon{position:relative;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--t) 16%,transparent);color:var(--tl);border:1px solid color-mix(in srgb,var(--t) 30%,transparent);transition:transform .2s}
#navigation button:hover .nav-icon{transform:translateY(-2px)}
#navigation button.active,body #navigation button.active{color:#fff;background:color-mix(in srgb,var(--t) 14%,transparent);border-color:color-mix(in srgb,var(--t) 40%,transparent)}
#navigation button.active .nav-icon,body #navigation button.active .nav-icon{background:var(--t);color:#fff;box-shadow:0 8px 20px color-mix(in srgb,var(--t) 55%,transparent)}
#navigation button[data-tone=yellow].active .nav-icon{color:#2b2005}
#navigation button span:not(.nav-icon){display:block}
.nav-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:9px;background:var(--c-red);color:#fff;font:800 10px/17px var(--font);font-style:normal;text-align:center;box-shadow:0 0 0 3px #0b2136;animation:pop .4s}
.sidebar-bottom{margin-top:auto;text-align:center}
.canary{font-size:8px;letter-spacing:1.4px;color:#7f97ab;margin:0}
.canary span{font-size:7px;letter-spacing:3px}
.workspace{display:flex;flex-direction:column;min-height:100vh}
.topbar,body .topbar{position:sticky;top:0;z-index:50;min-height:74px;padding:12px 28px;gap:18px;background:#081a2bd9;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hud-company{min-width:0}
.hud-company strong{display:block;font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.session-line{margin-top:2px;font-size:11px}
#modeLabel{color:var(--c-green-l);font-weight:700}
.hud-clock{display:flex;align-items:center;gap:10px;background:#ffffff0a;border:1px solid var(--line);padding:5px 6px 5px 14px;border-radius:16px}
#clock{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;color:#e5eef6}
.time-control,body .time-control{background:transparent;border:0;padding:0;gap:4px}
.time-control button,body .time-control button{background:#ffffff12;border:0;border-radius:10px;min-height:34px;padding:5px 9px;font-size:12px;color:#d9e7f2}
.time-control .play,body .time-control .play{width:38px;background:var(--c-blue);color:#fff;font-size:13px;box-shadow:0 4px 14px #1688b466}
.time-control[data-paused=true] .play{background:var(--c-orange);box-shadow:0 4px 14px #e17b4666;animation:breathe 2s infinite}
.time-control select,body .time-control select{background:#ffffff12;border:0;border-radius:10px;min-height:34px;padding:4px 6px;font-size:12px;font-weight:700}
.time-control.online small{padding-right:8px}
.accounts,body .accounts{gap:16px}
.accounts>div,body .accounts>div{border:0;padding:0}
.cash-box,.accounts .worth{position:relative;padding:6px 14px!important;border-radius:14px;background:#ffffff08;border:1px solid var(--line)!important}
.cash-box{background:linear-gradient(135deg,#77a56b24,#77a56b08)!important;border-color:#77a56b44!important}
.accounts .worth{background:linear-gradient(135deg,#e3bb3220,#e3bb3206)!important;border-color:#e3bb3240!important}
.accounts small{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.accounts strong{font-size:18px;font-weight:850;letter-spacing:-.4px}
#cash{color:var(--c-green-l)}
#worth{color:var(--c-yellow)}
.hud-buttons{display:flex;gap:6px}
.icon-button,body .icon-button,.sound-toggle{width:40px;height:40px;min-height:40px;padding:0;border-radius:12px;display:grid;place-items:center;font-size:16px;font-weight:800}
.cash-fx{position:absolute;right:8px;top:-4px;font:800 13px var(--font);pointer-events:none;opacity:0;white-space:nowrap}
.cash-fx.up{color:var(--c-green-l)}
.cash-fx.down{color:var(--c-red-l)}
.cash-fx.show{animation:floatUp 1.6s ease-out}
main,body main{padding:22px 28px 30px;width:100%;max-width:1680px;flex:1}
.app-footer{padding:14px 28px 20px;color:#6f879b}
.app-footer b{color:var(--c-yellow)}

/* ---------- Headings, tabs and guide ---------- */
.page-heading{margin-bottom:16px}
.page-heading h1::after{display:none!important}
.subtabs{display:inline-flex;gap:4px;padding:5px;margin-bottom:18px;background:#ffffff0a;border:1px solid var(--line);border-radius:16px}
.subtabs button{position:relative;border:0;background:transparent;border-radius:12px;padding:9px 18px;min-height:40px;font-weight:750;color:var(--muted)}
.subtabs button.active{background:var(--accent);color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 45%,transparent)}
body[data-section=fleet] .subtabs button.active{color:#2b2005}
.tab-dot{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--c-red);box-shadow:0 0 0 2px #0b2136}
.captain-guide,body .captain-guide{margin:16px 28px 0;padding:14px 18px;border-radius:18px;border:1px solid #e3bb3240;background:linear-gradient(110deg,#e3bb321c,#1688b414 70%);display:flex;align-items:center;gap:16px;justify-content:space-between;animation:slideIn .4s}
.captain-guide::before{content:'🧭';font-size:26px;flex:none}
.captain-guide>div:first-of-type{flex:1;min-width:0}
.captain-guide .eyebrow{color:var(--c-yellow)}
.captain-guide h2{font-size:16px;margin:2px 0}
.captain-guide p{font-size:12px;line-height:1.5}
.captain-actions{display:flex;gap:8px;flex:none}
.captain-guide button.primary{background:linear-gradient(180deg,#f0c94a,#d3a51e)!important;color:#2b2005!important}

/* ---------- Panels ---------- */
.panel,body .panel{background:linear-gradient(160deg,#ffffff08,transparent 40%),var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel-head,body .panel-head{background:transparent;border-bottom:1px solid var(--line);padding:16px 20px}
.panel-head h2,body .panel-head h2{color:#fff;font-size:16px}
.body{padding:18px 20px}
.pill,body .pill{background:#1688b42a;color:var(--c-blue-l);border:1px solid #1688b455;border-radius:999px;font-weight:800;letter-spacing:.6px;padding:4px 9px}
.pill.gold,body .pill.gold{background:#e3bb3224;color:var(--c-yellow);border-color:#e3bb3255}
.notice,body .notice{background:#1688b414;border:1px solid #1688b444;color:#cfe6f3;border-radius:14px}
.notice.warning,body .notice.warning{background:#e17b4618;border-color:#e17b4655;color:#ffd5bf}
.notice.danger,body .notice.danger{background:#d15b631c;border-color:#d15b6366;color:#ffd0d4}
.progress,body .progress{height:8px;background:#ffffff12;border-radius:8px}
.progress i,body .progress i{background:linear-gradient(90deg,var(--c-blue),var(--c-blue-l));border-radius:8px;box-shadow:0 0 12px #1688b488}
.progress.gold i,body .progress.gold i{background:linear-gradient(90deg,var(--c-orange),var(--c-yellow));box-shadow:0 0 12px #e3bb3266}
.progress.red i,body .progress.red i{background:linear-gradient(90deg,#b8434c,var(--c-red))}
.gain{color:var(--c-green-l)!important}
.loss{color:var(--c-red-l)!important}
.divider{background:var(--line)}
.list-item{border-bottom-color:var(--line)}
.dot{box-shadow:0 0 0 3px #ffffff10}
.empty{color:var(--muted)}
.source-note{color:#7f95a8!important}
.metric-grid>div,body .metric-grid>div{border-left:3px solid var(--c-blue);border-radius:2px}
.metric-grid>div:nth-child(4n+2),body .metric-grid>div:nth-child(4n+2){border-left-color:var(--c-yellow)}
.metric-grid>div:nth-child(4n+3),body .metric-grid>div:nth-child(4n+3){border-left-color:var(--c-green)}
.metric-grid>div:nth-child(4n+4),body .metric-grid>div:nth-child(4n+4){border-left-color:var(--c-red)}

/* Tiles: quick stats with a colored icon. */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}
.tile{--t:var(--c-blue);display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;padding:9px 10px;border-radius:14px;background:color-mix(in srgb,var(--t) 10%,#ffffff05);border:1px solid color-mix(in srgb,var(--t) 22%,transparent)}
.tile.green{--t:var(--c-green)}.tile.yellow{--t:var(--c-yellow)}.tile.red{--t:var(--c-red)}.tile.violet{--t:var(--c-violet)}.tile.blue{--t:var(--c-blue)}
.tile-icon{grid-row:1/3;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--t);color:#fff;font-size:14px;font-weight:800}
.tile.yellow .tile-icon{color:#2b2005}
.tile small{font-size:10px;font-weight:700;color:var(--muted);line-height:1.2}
.tile strong{font-size:15px;font-weight:850;line-height:1.25;white-space:nowrap}
.tile strong small{font-size:10px;font-weight:600}

/* ---------- Map ---------- */
.map-layout{grid-template-columns:minmax(0,1fr) 350px;gap:18px}
.map-panel .panel-head{padding:14px 18px}
.map-controls,body .map-controls{padding:10px 18px 12px;border-bottom:1px solid var(--line)}
.map-view-buttons{gap:6px}
.map-view-buttons button,body .map-view-buttons button{min-height:36px;padding:6px 13px;border-radius:999px;font-size:12px;background:#ffffff0c;border:1px solid var(--line2)}
.map-view-buttons button[aria-pressed="true"],body .map-view-buttons button[aria-pressed="true"]{background:var(--c-blue);border-color:var(--c-blue);color:#fff;box-shadow:0 4px 14px #1688b466}
.map-secondary{display:block;margin-top:8px}
.map-secondary[open]{display:block}
.map-secondary label{display:inline-grid;min-width:180px;margin:6px 10px 0 0}
.map-area,body .map-area{height:460px;background:radial-gradient(ellipse at 45% 35%,#1f6d9a,#0f3f63 55%,#0a2b47 95%)}
.map-area::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-radial-gradient(circle at 50% 120%,#ffffff05 0 2px,transparent 2px 22px);mix-blend-mode:screen}
#worldMap g[fill="#294552"]{fill:#3e7457;stroke:#5c9a74}
#worldMap rect[fill^="url(#sea-grid)"]{opacity:.5}
.map-caption{color:#bfe3f5!important;font-weight:800;letter-spacing:2px;background:#0a2b47aa;padding:4px 9px;border-radius:999px}
.map-compass{color:#d8eefa}
.map-compass span{color:var(--c-yellow)}
.port-label rect,body .port-label rect{fill:#0a2236e6;stroke:#ffffff26;rx:7px}
.port-label text,body .port-label text{fill:#e6f1f8;font-weight:650}
.port-label.selected rect,body .port-label.selected rect{fill:#E3BB32;stroke:#fff6}
.port-label.selected text,body .port-label.selected text{fill:#2b2005!important;font-weight:850}
.port-dot:hover circle{fill:var(--c-yellow)!important}
.map-legend,body .map-legend{background:transparent;border-top:1px solid var(--line);gap:14px;font-weight:650}
.map-legend span:last-child{margin-left:0}
.legend-line{background:var(--c-blue-l);height:3px;border-radius:2px}
.legend-line.rival{background:var(--c-yellow)}
.port-intel,body .port-intel{border-top:1px solid var(--line)}
.production-chip{background:#77a56b26!important;color:var(--c-green-l)!important;border:1px solid #77a56b55!important;border-radius:999px!important;font-weight:750}
.radar-high{color:var(--c-red-l)!important}
.radar-low{color:var(--c-green-l)!important}
.below-map{gap:18px;margin-top:18px}
.feed time{color:var(--c-yellow)}

/* Ship bridge */
.selected-ship,body .selected-ship{position:sticky;top:92px}
.selected-ship .panel-head,body .selected-ship .panel-head{background:linear-gradient(110deg,#1688b42a,transparent)}
.ship-image,body .ship-image{border-radius:0}
.ship-tag,body .ship-tag{background:#081a2bcc;border:1px solid #ffffff30;color:#fff;border-radius:999px;font-weight:800}
.ship-status{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:12px;color:var(--muted)}
.ship-status strong{color:#fff;font-size:12px;text-align:right}
.ship-picker{margin-bottom:12px}
.route-selection,body .route-selection{margin-top:4px;gap:10px}
.route-metrics,body .route-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.route-metrics>div{background:#ffffff08;border:1px solid var(--line);border-radius:12px;padding:8px 9px}
.route-metrics small{display:block;font-size:10px;font-weight:700}
.route-metrics strong,body .route-metrics strong{font-size:13px;color:#fff;font-weight:850;margin:0}
.depart-button,body .route-selection .depart-button{min-height:54px;font-size:15px;border-radius:16px;background:linear-gradient(180deg,#f2a06c,var(--c-orange))!important;color:#fff!important;box-shadow:0 10px 26px #e17b4666,0 -3px 0 #0003 inset!important}
.depart-button:not([data-unavailable="true"]){animation:glow 2.4s infinite}
.depart-button:hover{background:linear-gradient(180deg,#f6b085,#e8884f)!important}
.weather-chip{background:#e17b4622!important;border:1px solid #e17b4677!important;color:#ffd1b8!important;border-radius:12px;font-size:12px}
.engine{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.engine-label{font-weight:800;letter-spacing:1.5px;font-size:10px}
.throttle,body .throttle{gap:6px;margin-top:8px}
.throttle button,body .throttle button{border-radius:12px;min-height:50px;display:grid;gap:1px;font-size:11px}
.throttle button[data-value=eco],body .throttle button[data-value=eco]{--t:var(--c-green)}
.throttle button[data-value=cruise],body .throttle button[data-value=cruise]{--t:var(--c-blue)}
.throttle button[data-value=max],body .throttle button[data-value=max]{--t:var(--c-red)}
.throttle button.active,body .throttle button.active{background:var(--t,var(--c-blue))!important;border-color:transparent!important;color:#fff!important;box-shadow:0 6px 16px #0005}
.throttle-lamp{font-size:10px}
.ship-details{margin-top:14px;border-top:1px solid var(--line);padding-top:8px}
.ship-details[open]>*:not(summary){animation:fadeIn .25s}
.ship-details .throttle-status,.ship-details .throttle-rates,.ship-details .weather-route{margin-top:10px}
.crew-readiness,body .crew-readiness{border-radius:14px;margin:12px 0}
.crew-readiness.incomplete,body .crew-readiness.incomplete{background:#e17b4618!important;border:1px solid #e17b4660!important}
.crew-readiness.complete,body .crew-readiness.complete{background:#77a56b16!important;border:1px solid #77a56b44!important}

/* ---------- Market ---------- */
.market-tools{gap:10px}
.market-layout{grid-template-columns:minmax(0,1fr) 330px;gap:18px}
.market-layout>aside{display:grid;gap:18px;align-content:start}
.market-intro{display:grid;gap:10px}
.port-summary{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0}
.port-summary .pill{background:#77a56b22;color:var(--c-green-l);border-color:#77a56b55}
.price-badge{border-radius:999px!important;font-weight:800}
.price-badge.buy{background:#77a56b26!important;color:var(--c-green-l)!important}
.price-badge.sell{background:#e3bb3224!important;color:var(--c-yellow)!important}
table th,body th{background:#ffffff06;color:#9fb1c3;font-weight:800}
td,body td{border-bottom:1px solid var(--line)}
tbody tr[data-good]{transition:background .15s}
tbody tr[data-good]:hover,body tbody tr[data-good]:hover{background:#ffffff0a}
tr.active,body tr.active{background:color-mix(in srgb,var(--accent) 18%,transparent)!important;box-shadow:inset 4px 0 0 var(--accent)}
.good-icon,body .good-icon{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#e3bb3233,#e17b4622);color:var(--c-yellow);font-size:16px}
tr.competitive-buy .good-icon{background:linear-gradient(135deg,#77a56b55,#77a56b22);color:#d9f0d2}
tr.competitive-sell .good-icon{background:linear-gradient(135deg,#e3bb3266,#e17b4633);color:#fff2c4}
.trade-form,body .trade-form{padding:20px;display:grid;gap:12px;align-content:start}
.trade-form h2{margin:0;font-size:24px}
.trade-form .buy-sell,body .trade-form .buy-sell{background:#ffffff0a;padding:4px;border-radius:14px;gap:4px}
.trade-form .buy-sell button{border:0;background:transparent;border-radius:11px}
.trade-form .buy-sell button.active[data-side=buy]{background:var(--c-blue);color:#fff}
.trade-form .buy-sell button.active[data-side=sell]{background:var(--c-yellow);color:#2b2005}
.qty-chips{display:flex;gap:6px;flex-wrap:wrap}
.qty-chips button{flex:1;border-radius:999px}
.trade-total,body .trade-total{font-size:30px;font-weight:900;color:var(--c-yellow);padding:4px 0 0;letter-spacing:-.8px}
.trade-confirm{width:100%;min-height:50px;font-size:15px}
.where-sell .list-item button{margin-top:8px}

/* ---------- Fleet, crew, warehouses ---------- */
.info-grid .panel{position:relative;min-height:74px}
.info-grid .panel:has(.info-icon){padding:16px 16px 16px 64px!important}
.info-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent-l);font-size:17px}
.info-grid strong,body .info-grid strong{font-size:18px;font-weight:850}
.fleet-card,body .fleet-card{transition:transform .2s,box-shadow .2s}
.fleet-card:hover{transform:translateY(-3px);box-shadow:0 20px 50px #0007}
.fleet-card.selected,body .fleet-card.selected{border-color:var(--c-yellow);box-shadow:0 0 0 2px #e3bb3240,var(--shadow)}
.fleet-card.locked .ship-image{filter:grayscale(.75) brightness(.7)}
.fleet-card h2{font-size:18px}
.fleet-actions{gap:8px}
.fleet-actions button{flex:1}
.fleet-more{margin-top:12px;border-top:1px solid var(--line);padding-top:6px}
.fleet-more button{width:100%;margin-top:8px}
.shipyard .primary{width:100%;margin-top:12px}
.ship-unlock-reason{font-size:11px;color:var(--c-yellow-l);margin-top:8px}
.fleet-progress,body .fleet-progress{margin-top:20px}
.milestone,body .milestone{border-radius:14px}
.milestone.unlocked,body .milestone.unlocked{border-color:#77a56b77!important;background:#77a56b14!important}
.section-title h2{font-size:20px}
.crew-avatar,body .crew-avatar{background:linear-gradient(135deg,var(--c-violet),var(--c-blue));color:#fff;font-weight:800}
.crew-vacancy .crew-avatar,body .crew-vacancy .crew-avatar{background:#ffffff12;color:var(--muted)}
.crew-hire{width:100%;margin:12px 0}
.warehouse-hero,body .warehouse-hero{border-radius:var(--radius);background:linear-gradient(120deg,#77a56b2a,#1688b41c)!important;border:1px solid #77a56b44!important}
.warehouse-tabs button.active,body .warehouse-tabs button.active{background:var(--c-green)!important;color:#fff!important;border-color:transparent!important}
.warehouse-card.selected,body .warehouse-card.selected{border-color:var(--c-green)!important}

/* ---------- Company ---------- */
.goal-card{display:grid;grid-template-columns:1fr minmax(200px,320px);gap:20px;align-items:center;padding:20px 22px;margin-bottom:18px;background:linear-gradient(120deg,#8174b333,#e3bb3214 70%),var(--panel)!important}
.goal-card h2{font-size:22px;margin:4px 0}
.goal-card p{font-size:12px}
.goal-meter strong{font-size:32px;font-weight:900;color:var(--c-yellow)}
.goal-meter small{display:block;margin-top:6px}
.score-card,body .score-card{border-radius:18px}
.score-card .rank,body .score-card .rank{font-family:var(--font);font-weight:900;color:#ffffff40}
.stack>.score-card:nth-child(1) .rank{color:var(--c-yellow)}
.stack>.score-card:nth-child(2) .rank{color:#c9d2db}
.stack>.score-card:nth-child(3) .rank{color:var(--c-orange)}
.score-card.me,body .score-card.me{border-color:var(--c-violet)!important;background:linear-gradient(110deg,#8174b333,transparent),var(--panel)!important}
.score-card .score{font-weight:850}
.settings-grid{gap:18px}
.form-details summary{font-size:13px}
.form-details[open]{display:grid;gap:14px}
.sound-switch-row{gap:12px}
.lobby-code{color:var(--c-yellow)!important;font-weight:800}

/* ---------- Dialogs, toast, tutorial ---------- */
dialog,body dialog{background:linear-gradient(170deg,#143452,#0c2238);border:1px solid #ffffff22;border-radius:26px;box-shadow:0 40px 120px #000a}
dialog[open]{animation:popIn .28s cubic-bezier(.2,1.3,.4,1)}
dialog h2{font-weight:850}
.action-error,body .action-error{background:linear-gradient(170deg,#3a1f2a,#1f1420);border-color:#d15b6377}
.error-symbol{background:var(--c-red)!important;color:#fff!important}
#toast,body #toast{background:#0f2d47f2;border:1px solid #1688b477;border-radius:16px;font-weight:650;box-shadow:0 20px 60px #000a;backdrop-filter:blur(10px)}
#toast:not([hidden]){animation:toastIn .35s cubic-bezier(.2,1.3,.4,1)}
.tutorial-guide,body .tutorial-guide{border-radius:20px}
.tutorial-highlight{outline:3px solid var(--c-yellow)!important;outline-offset:4px;border-radius:16px;animation:highlight 1.6s infinite}
.finish-banner{border-radius:20px;background:linear-gradient(110deg,#e3bb3233,#8174b333)!important;border:1px solid #e3bb3266!important}
.connection-banner{background:#e17b4622;color:#ffd1b8;border-bottom-color:#e17b4666}

/* ---------- Main menu ---------- */
.main-menu,body .main-menu{background:linear-gradient(180deg,#0b2136,#061423)}
.menu-ocean,body .menu-ocean{background:#0b2a46!important;padding:0;justify-content:flex-end}
.menu-ocean:before,.menu-ocean:after{display:none!important}
.ocean-scene{position:absolute;inset:0;width:100%;height:100%}
.menu-ocean p{position:relative;z-index:1;margin-bottom:34px;color:#e6f2fa;font-weight:800;letter-spacing:5px;font-size:11px;background:#06142399;padding:8px 16px;border-radius:999px}
.ocean-scene .wave{animation:waveMove 9s linear infinite}
.ocean-scene .w2{animation-duration:6.5s;animation-direction:reverse}
.ocean-scene .w3{animation-duration:12s}
.ocean-scene .w4{animation-duration:16s;animation-direction:reverse}
.ocean-scene .scene-ship{animation:bob 4s ease-in-out infinite;transform-origin:300px 450px}
.ocean-scene .sun{animation:breathe 6s ease-in-out infinite}
.ocean-scene .stars circle{animation:twinkle 3s ease-in-out infinite}
.ocean-scene .stars circle:nth-child(even){animation-delay:1.5s}
.menu-brand strong{color:var(--c-yellow)!important}
.menu-content>h1,body .menu-content>h1{font-family:var(--font)!important;font-weight:850!important;letter-spacing:-1.5px}
.main-menu-buttons{gap:10px}
.main-menu-buttons button,body .main-menu-buttons button{border-radius:16px;min-height:56px;font-weight:750}
.main-menu-buttons button span{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#ffffff12}
.main-menu-buttons button.primary span{background:#ffffff30}

/* ---------- FX ---------- */
.fx-layer{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.fx-coins,.fx-confetti{position:absolute;top:70px;display:grid;place-items:center;animation:burst var(--d) cubic-bezier(.15,.6,.35,1) forwards;font-style:normal}
.fx-coins{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b5,#E3BB32 55%,#b98f14);color:#7a5a00;font:900 12px var(--font);box-shadow:0 2px 6px #0006}
.fx-confetti{top:-10px;width:10px;height:16px;border-radius:3px;background:var(--c);animation-name:fall;animation-duration:calc(var(--d) * 2)}
@keyframes burst{0%{transform:translate(0,0) scale(.4) rotate(0);opacity:1}70%{opacity:1}100%{transform:translate(var(--x),calc(var(--y) * -1 + 30vh)) scale(1) rotate(var(--r));opacity:0}}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--x),110vh) rotate(var(--r))}}
@keyframes floatUp{0%{opacity:0;transform:translateY(8px)}15%{opacity:1}100%{opacity:0;transform:translateY(-28px)}}
@keyframes waveMove{from{transform:translateX(0)}to{transform:translateX(200px)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(7px) rotate(.8deg)}}
@keyframes breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.9}}
@keyframes glow{0%,100%{box-shadow:0 10px 26px #e17b4655,0 -3px 0 #0003 inset}50%{box-shadow:0 10px 34px #e17b46aa,0 -3px 0 #0003 inset}}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes popIn{0%{transform:scale(.92);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes toastIn{0%{transform:translate(-50%,20px);opacity:0}100%{transform:translate(-50%,0);opacity:1}}
@keyframes slideIn{0%{transform:translateY(-8px);opacity:0}100%{transform:none;opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes highlight{0%,100%{outline-color:#E3BB32}50%{outline-color:#E3BB3255}}

/* ---------- Responsive ---------- */
@media(min-width:1500px){.map-area,body .map-area{height:540px}.map-layout{grid-template-columns:minmax(0,1fr) 380px}}
@media(max-width:1200px){.map-layout{grid-template-columns:minmax(0,1fr) 320px}.topbar,body .topbar{padding:10px 18px}main,body main{padding:20px 18px}.captain-guide,body .captain-guide{margin:14px 18px 0}.accounts .worth{display:none}}
@media(max-width:1000px){
  .app-shell{grid-template-columns:88px minmax(0,1fr)}
  .sidebar,body .sidebar{padding:20px 6px}
  #navigation button span:not(.nav-icon),body #navigation button span:not(.nav-icon){display:block;font-size:10px}
  .brand>span:last-child{display:none}
  .map-layout{grid-template-columns:1fr}
  .selected-ship,body .selected-ship{position:static;display:block}
  .selected-ship .ship-image,body .selected-ship .ship-image{min-height:0;height:200px}
  .market-layout{grid-template-columns:1fr}
  .market-layout>aside{grid-template-columns:1fr 1fr}
  .hud-company{display:none}
}
@media(max-width:700px){
  .app-shell{display:block}
  .sidebar,body .sidebar{position:fixed;top:auto;bottom:0;left:0;right:0;height:auto;z-index:60;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:#081a2bf2;backdrop-filter:blur(14px);border-top:1px solid var(--line);border-right:0}
  .brand,.sidebar-bottom{display:none!important}
  #navigation,body #navigation{margin:0;grid-template-columns:repeat(4,1fr);gap:4px}
  #navigation button,body #navigation button{padding:5px 2px;min-height:58px;gap:3px;border-radius:14px}
  #navigation button .nav-icon,body #navigation button .nav-icon{width:36px;height:32px;border-radius:11px}
  #navigation button .nav-icon svg{width:19px;height:19px}
  .topbar,body .topbar{display:grid;grid-template-columns:1fr auto;grid-template-areas:"clock buttons" "money money";gap:8px;padding:8px 12px 10px;min-height:0;align-items:center}
  .hud-company{display:none}
  .hud-clock{grid-area:clock;padding:4px 4px 4px 10px;gap:6px;min-width:0;justify-content:space-between}
  #clock{font-size:12px}
  .time-control button,body .time-control button{min-height:32px;padding:4px 7px;font-size:11px}
  .time-control .play{width:34px}
  .time-control select{min-height:32px}
  .accounts,body .accounts{display:contents}
  .cash-box,.accounts .worth{display:block!important;padding:5px 12px!important}
  .accounts>.cash-box{grid-area:money;justify-self:start;width:calc(50% - 4px)}
  .accounts>.worth{grid-area:money;justify-self:end;width:calc(50% - 4px)}
  .hud-buttons{grid-area:buttons}
  .hud-buttons .icon-button,.hud-buttons .sound-toggle{width:36px;height:36px;min-height:36px}
  .hud-buttons [data-action=help]{display:none}
  .accounts strong{font-size:16px}
  main,body main{padding:14px 12px 16px}
  .captain-guide,body .captain-guide{margin:10px 12px 0;padding:12px;flex-wrap:wrap;gap:10px}
  .captain-guide::before{display:none}
  .captain-actions{width:100%}
  .captain-actions button{flex:1}
  .subtabs{display:flex;width:100%}
  .subtabs button{flex:1;padding:8px}
  .map-area,body .map-area{height:340px}
  .map-view-buttons,body .map-view-buttons{display:flex;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;padding-bottom:2px}
  .map-view-buttons button,body .map-view-buttons button{width:auto;flex:none}
  .map-controls,body .map-controls{padding:10px 12px}
  .market-layout>aside{grid-template-columns:1fr}
  .market-tools,body .market-tools{grid-template-columns:1fr 1fr}
  .goal-card{grid-template-columns:1fr}
  .info-grid,body .info-grid{grid-template-columns:1fr 1fr}
  .info-grid .panel:has(.info-icon){padding:12px 12px 12px 54px!important}
  .info-icon{left:12px;width:32px;height:32px}
  .info-grid strong{font-size:15px}
  #toast,body #toast{bottom:92px}
  .app-footer,body .app-footer{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.fx-layer{display:none}}

/* ---------- Fixes over legacy sheets ---------- */
html{background:var(--bg)}
body{background-attachment:scroll;min-height:100vh}
body .voyage-forecast{grid-template-columns:repeat(3,1fr);gap:6px;background:none;padding:0;border:0}
body .voyage-forecast>div:first-child{grid-column:auto}
body .voyage-forecast #routeEta{font-size:13px;color:#fff;font-weight:850}
body .route-selection .depart-button[data-unavailable="true"]{background:#ffffff10!important;color:#cbd8e3!important;box-shadow:none!important;animation:none;opacity:1;filter:none;border:1px dashed #ffffff30}
body .port-label.market-map-label text{font:650 10px var(--font)}
body .port-label.market-map-label rect{fill:#0a2236e6;stroke:#ffffff26}
body .port-label.market-map-label .market-map-name{fill:#e6f1f8}
body .port-label.market-map-label.selected rect{fill:#E3BB32;stroke:#fff8}
body .port-label.market-map-label.selected .market-map-name{fill:#2b2005;font-weight:850}
body .port-label.market-map-label.selected .market-map-high{fill:#8a1c25}
body .port-label.market-map-label.selected .market-map-low{fill:#1f4a17}
body .radar-table th,body .radar-table td{border-bottom-color:var(--line);background:transparent}
body .radar-table .cargo-row{background:#e3bb3214}
body .radar-table .cargo-row th strong{color:var(--c-yellow)}
.menu-extra{display:flex;gap:8px;margin-top:6px}
.menu-extra button{flex:1;min-height:42px!important;border-radius:12px!important;font-size:13px!important;justify-content:center!important}
.main-menu-buttons button:nth-child(2) span{color:var(--c-yellow)}
.main-menu-buttons button:nth-child(3) span{color:var(--c-green-l)}
.main-menu-buttons button:nth-child(4) span{color:var(--c-blue-l)}
.main-menu-buttons button:nth-child(5) span{color:var(--c-violet-l)}
@media(max-width:760px){body .menu-ocean{display:flex!important;position:relative;height:210px;margin:0}.menu-ocean p{margin-bottom:14px;font-size:9px}}
body tbody tr[data-good] td{border-left:0!important;border-right:0!important;border-top:0!important}
body tbody tr.competitive-buy,body tbody tr.competitive-sell{background:transparent}
body tbody tr.competitive-buy td:first-child{box-shadow:inset 3px 0 0 var(--c-green)}
body tbody tr.competitive-sell td:first-child{box-shadow:inset 3px 0 0 var(--c-yellow)}
td .product .price-badge{display:table;margin:3px 0 0!important}
.progress-head{display:grid;grid-template-columns:1fr minmax(240px,380px);gap:20px;align-items:center}
.progress-head h2{margin:4px 0}
.next-milestone>small{display:block;margin-bottom:6px;font-weight:800;color:var(--c-yellow)}
.fleet-progress details{margin-top:12px}
.shipyard{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.shipyard .ship-tag,.shipyard .ship-number{display:none}
.shipyard .ship-image{height:130px!important}
.shipyard .body{padding:14px}
.shipyard .tiles{gap:6px}
.shipyard .tile{grid-template-columns:24px 1fr;padding:7px}
.shipyard .tile-icon{width:24px;height:24px;font-size:11px}
.shipyard .tile strong{font-size:13px}
@media(max-width:1200px){.shipyard{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:700px){.progress-head{grid-template-columns:1fr}.shipyard{grid-template-columns:1fr 1fr!important}.shipyard .ship-image{height:100px!important}.shipyard .tiles{grid-template-columns:1fr}}
body .settings-grid .sound-panel{grid-column:auto}
body .settings-grid .sound-settings{grid-template-columns:1fr}
.captain-guide p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.map-layout>div{min-width:0}
@media(max-width:1000px){
  .map-layout{display:flex;flex-direction:column}
  .map-layout>div{display:contents}
  .map-layout .map-panel{order:1}
  .map-layout .selected-ship{order:2}
  .map-layout .below-map{order:3;margin-top:0}
}
@media(max-width:700px){
  body .topbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"clock clock clock" "cash worth buttons";gap:6px 6px}
  body .hud-clock{grid-area:clock;justify-content:space-between}
  body .time-control::before{display:none}
  body .accounts>.cash-box{grid-area:cash;width:auto;justify-self:stretch;min-width:0}
  body .accounts>.worth{grid-area:worth;width:auto;justify-self:stretch;min-width:0}
  body .accounts strong{font-size:14px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body .accounts small{font-size:9px}
  body .cash-box,body .accounts .worth{padding:4px 10px!important;border-radius:12px}
  .hud-buttons{gap:4px;align-self:center}
  .hud-buttons .icon-button,.hud-buttons .sound-toggle{width:34px!important;height:34px!important;min-height:34px!important}
  body .selected-ship .ship-image{height:180px}
}
.map-layout .map-panel,.map-layout .selected-ship,.map-layout .below-map{min-width:0;max-width:100%}
@media(max-width:700px){body .topbar .accounts{display:contents!important}}
@media(max-width:1000px){body .map-layout .selected-ship{width:100%}}
@media(max-width:700px){
 body .topbar .hud-clock{grid-column:1/-1;grid-row:1}
 body .topbar .accounts>.cash-box{grid-column:1!important;grid-row:2!important}
 body .topbar .accounts>.worth{grid-column:2!important;grid-row:2!important}
 body .topbar .accounts>.hud-buttons{grid-column:3!important;grid-row:2!important}
}
body td .product .price-badge{display:table!important;margin:4px 0 2px!important;white-space:nowrap;border:0!important}
@media(max-width:700px){
 body .table-wrap table{min-width:0}
 body .market-layout .table-wrap th:nth-child(4),body .market-layout .table-wrap td:nth-child(4){display:none}
 body .market-layout .table-wrap th,body .market-layout .table-wrap td{padding:10px 8px}
 body .market-layout .table-wrap td .product{gap:8px}
 body .market-layout .good-icon{width:28px;height:28px;font-size:13px}
 body td .product .price-badge{white-space:normal;font-size:9px!important}
 .market-tools button{grid-column:1/-1}
}
.cash-fx{top:auto;bottom:-20px;right:10px;background:#071726;padding:1px 8px;border-radius:8px}
body .accounts>div{text-align:left}