:root{
  --bg:#08131d;--bg2:#0d1d29;--panel:#102431;--panel2:#142b3a;--line:#274355;
  --text:#ecf4f7;--muted:#8ea8b6;--cyan:#58c8e8;--cyan2:#2f8fb0;--green:#6ad59a;
  --amber:#f0be63;--red:#f06f70;--white:#fff;--ink:#15232c;--shadow:0 18px 40px rgba(0,0,0,.22)
}
*{box-sizing:border-box}html{background:var(--bg)}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 15% -10%,rgba(68,155,188,.18),transparent 32rem),linear-gradient(180deg,#071019 0,#0a1822 45%,#071019 100%);color:var(--text);min-height:100vh}
button,input,select{font:inherit}button{border:1px solid var(--line);background:#142b38;color:var(--text);border-radius:10px;padding:10px 14px;cursor:pointer;transition:.15s}button:hover{border-color:#4c7b91;background:#193846}button.primary{background:linear-gradient(135deg,#1983a9,#2fb4c7);border-color:#4bc3dc;color:#fff;font-weight:750}button.tiny{font-size:12px;padding:7px 10px}
.app-shell{max-width:1680px;margin:0 auto;padding:18px}.topbar{display:flex;align-items:center;gap:18px;justify-content:space-between;background:rgba(12,30,42,.92);border:1px solid var(--line);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow);position:sticky;top:8px;z-index:30;backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:13px}.brand-mark{display:grid;place-items:center;width:52px;height:52px;border:1px solid #35677d;border-radius:14px;background:linear-gradient(145deg,#12394a,#0c2633);font-size:28px;color:var(--cyan)}.brand h1{font-size:23px;margin:0 0 3px}.brand p{margin:0;color:var(--muted);font-size:13px}.top-actions{display:flex;gap:8px;flex-wrap:wrap}
.safety-banner{margin:12px 0 16px;border:1px solid rgba(240,190,99,.35);background:rgba(106,79,29,.2);color:#ead9ae;border-radius:12px;padding:10px 14px;font-size:12px;line-height:1.45}.safety-banner strong{color:#ffd37b}
.layout{display:grid;grid-template-columns:minmax(340px,.78fr) minmax(420px,1.1fr);gap:16px}.panel{background:linear-gradient(180deg,rgba(15,35,48,.98),rgba(10,26,36,.98));border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}.panel-head h2{margin:2px 0 0;font-size:18px}.eyebrow{font-size:10px;letter-spacing:.16em;color:#7ea8ba;font-weight:800}
.inputs-panel{grid-row:span 4}.input-groups{padding:12px}fieldset{border:1px solid #244252;border-radius:13px;padding:14px;margin:0 0 12px;background:#0d202c}legend{padding:0 8px;color:#bcd4dd;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.grid-3{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}label{display:flex;flex-direction:column;gap:6px;color:#bdd0d8;font-size:12px;font-weight:650}label span{font-size:10px;color:#6f8b99;font-weight:550}input,select{width:100%;border:1px solid #315166;background:#081924;color:#f2f7f8;border-radius:8px;padding:9px 10px;outline:none}input:focus,select:focus{border-color:#50b8d0;box-shadow:0 0 0 3px rgba(77,180,208,.12)}.wide-label{width:100%}.formula-note,.help{font-size:11px;line-height:1.45;color:#7f9ba8;margin:10px 0 0}.bridge-fieldset{border-color:#365e70;background:linear-gradient(180deg,#0d2330,#0c1d28)}
.result-panel{min-height:620px}.status-badge{border:1px solid #315166;border-radius:999px;padding:7px 12px;font-size:11px;font-weight:900;letter-spacing:.08em}.status-badge.pass,.inline-status.pass,.mini-status.pass{color:#8be4ad;border-color:#3d8960;background:#113c2a}.status-badge.tight,.inline-status.tight,.mini-status.tight{color:#ffd27a;border-color:#9a7331;background:#3b2c12}.status-badge.fail,.inline-status.fail,.mini-status.fail{color:#ff9999;border-color:#9e4145;background:#3c171a}.status-badge.na,.inline-status.na,.mini-status.disabled{color:#9bb0ba;border-color:#46616d;background:#172933}
.hero-result{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}.hero-result-3{grid-template-columns:repeat(3,1fr)}.hero-result>div{padding:22px 18px}.hero-result>div+div{border-left:1px solid var(--line)}.hero-result span{display:block;color:#82a5b4;font-size:10px;font-weight:800;letter-spacing:.1em}.hero-result strong{font-size:40px;line-height:1.1;margin-top:6px;display:inline-block}.hero-result small{font-size:16px;color:#7f9ba8;margin-left:4px}
.status-split{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);background:#0b1e29}.status-split>div{display:flex;align-items:center;justify-content:space-between;padding:10px 18px}.status-split>div+div{border-left:1px solid var(--line)}.status-split span{font-size:10px;color:#7999a6;font-weight:800;letter-spacing:.12em}.inline-status,.mini-status{display:inline-flex;padding:5px 9px;border:1px solid #355365;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.05em}
.breakdown,.bridge-breakdown{padding:14px 18px}.bridge-breakdown{padding-top:0}.subsection-title{margin:1px 0 8px;color:#75bcd4;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.break-row{display:grid;grid-template-columns:1fr auto;gap:14px;padding:8px 0;border-bottom:1px dashed #213b4a;font-size:13px}.break-row span{color:#9ab3be}.break-row b{font-variant-numeric:tabular-nums}.break-row.total{font-size:15px;border-top:1px solid #3b6175;border-bottom:0;margin-top:5px;padding-top:13px}.break-row.negative b,.negative-text{color:#ff9797}.positive-text{color:#84e0aa}.bridge-disabled{padding:12px;border:1px dashed #365464;border-radius:10px;color:#7f9aa6;font-size:11px;background:#0a1c27}
.speed-advisor{margin:8px 18px 16px;padding:14px;border:1px solid #2a5d72;border-radius:13px;background:linear-gradient(135deg,rgba(27,98,123,.24),rgba(17,47,63,.38));display:grid;grid-template-columns:1fr auto;gap:8px 20px;align-items:center}.speed-advisor h3{margin:2px 0;font-size:14px}.speed-advisor p{grid-column:1/-1;margin:0;color:#83a7b7;font-size:11px}.speed-value b{font-size:34px;color:#84def3}.speed-value span{color:#8aa4b0;margin-left:4px}.method-card{margin:0 18px 18px;display:grid;grid-template-columns:1fr 1fr;border:1px solid #233f50;border-radius:12px;overflow:hidden}.method-card div{padding:11px 13px;background:#0b1c27;border-right:1px solid #233f50;border-bottom:1px solid #233f50}.method-card div:nth-child(2n){border-right:0}.method-card div:nth-last-child(-n+2){border-bottom:0}.method-card span{display:block;color:#7593a0;font-size:10px}.method-card b{display:block;margin-top:4px;font-size:14px}.errors{margin:14px 18px 0;padding:12px;background:#3d171b;border:1px solid #7f343a;color:#ffb8ba;border-radius:10px;font-size:12px}.hidden{display:none!important}
.diagram-panel,.bridge-diagram-panel{grid-column:2}.ship-diagram{padding:16px}.ship-diagram svg{display:block;width:100%;height:auto;max-height:480px}.bridge-diagram svg{max-height:430px}.bridge-diagram-panel .panel-head{background:linear-gradient(90deg,rgba(240,190,99,.08),transparent)}
.charts-panel,.tide-panel,.table-panel,.scenarios-panel,.formula-panel{grid-column:1/-1}.chart-controls{font-size:12px}.chart-controls label{flex-direction:row;align-items:center}.chart-controls input{width:76px;padding:6px 8px}.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px}.chart-card{background:#0b1c27;border:1px solid #223f4e;border-radius:12px;padding:14px;min-height:330px}.chart-card h3{font-size:13px;margin:0 0 12px;color:#bdd1da}.chart-card canvas{max-height:285px}
.tide-summary{display:flex;flex-direction:column;align-items:flex-end}.tide-summary span{font-size:9px;color:#7695a3;letter-spacing:.12em}.tide-summary b{font-size:24px;color:#7ddcac}.tide-layout{display:grid;grid-template-columns:minmax(360px,.75fr) minmax(460px,1.25fr);gap:12px;padding:14px}.tide-settings,.tide-chart-card{background:#0b1c27;border:1px solid #223f4e;border-radius:12px;padding:14px}.tide-chart-card{min-height:360px}.tide-chart-card canvas{max-height:330px}.tide-events-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;margin:16px 0 8px}.tide-events-head span{display:block;font-size:11px;font-weight:850;color:#bdd2db;text-transform:uppercase;letter-spacing:.08em}.tide-events-head small{display:block;color:#718e9b;font-size:10px;line-height:1.4;margin-top:4px;max-width:520px}.tide-events{display:grid;gap:7px}.tide-event{display:grid;grid-template-columns:58px 1fr 1fr 20px;gap:7px;align-items:center}.tide-event>span{font-size:10px;font-weight:900;color:#8bb2c1}.tide-event input{padding:7px 8px}.tide-event em{font-style:normal;color:#6f8d99;font-size:10px}.tide-note{font-size:10px;color:#819eaa;line-height:1.5;padding:10px;margin-top:12px;border:1px solid #294555;border-radius:9px;background:#0d2430}.tide-note strong{color:#abd1df}.window-cards{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:10px;padding:0 14px 14px}.window-card{border:1px solid #2b6550;background:linear-gradient(145deg,rgba(42,105,78,.20),rgba(12,32,43,.9));border-radius:12px;padding:13px}.window-card.fail{grid-column:1/-1;border-color:#773f44;background:rgba(94,32,37,.2)}.window-card>span{display:block;font-size:9px;color:#74c795;font-weight:900;letter-spacing:.13em}.window-card>b{display:block;font-size:16px;margin:5px 0 4px}.window-card>small{display:block;color:#829da8;font-size:10px;line-height:1.45}.window-card>div{display:grid;grid-template-columns:1fr auto;gap:5px 12px;margin-top:10px;padding-top:9px;border-top:1px solid #274b42}.window-card em{font-style:normal;color:#7896a3;font-size:10px}.window-card strong{font-size:11px}.tide-table-wrap{padding-top:0}.window-pill{display:inline-block;border-radius:999px;padding:4px 7px;font-size:9px;font-weight:900}.window-pill.safe{background:#143d2b;color:#87e1a8}.window-pill.unsafe{background:#431d21;color:#ff9a9d}
.table-legend{font-size:10px;color:#829aa6;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.table-legend i{width:10px;height:10px;border-radius:2px;display:inline-block}.table-legend .safe{background:#194d36}.table-legend .unsafe{background:#59262a}.table-wrap{overflow:auto;padding:0 14px 14px}table{width:100%;border-collapse:collapse;min-width:760px}th,td{border:1px solid #254351;padding:8px;text-align:center;font-size:11px;font-variant-numeric:tabular-nums}th{position:sticky;top:0;background:#163445;color:#d8e8ed;z-index:2}td.depth{font-weight:800;background:#102b39;color:#bfe2ee}.cell-safe{background:rgba(42,118,77,.22)}.cell-unsafe{background:rgba(153,57,63,.28);color:#ffb5b8}.cell-current{outline:2px solid #68cce6;outline-offset:-2px}
.scenario-cards{display:grid;grid-template-columns:repeat(4,minmax(200px,1fr));gap:12px;padding:14px}.scenario-card{border:1px solid #27495a;border-radius:12px;background:#0c202c;padding:13px}.scenario-card h3{margin:0 0 9px;font-size:13px}.scenario-card dl{display:grid;grid-template-columns:1fr auto;gap:6px 10px;margin:0;font-size:11px}.scenario-card dt{color:#7896a3}.scenario-card dd{margin:0;font-weight:800}.scenario-card .card-actions{display:flex;gap:6px;margin-top:11px}.scenario-card button{font-size:10px;padding:6px 8px}.formula-trace{padding:14px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.trace-card{background:#0a1b25;border:1px solid #234250;border-radius:10px;padding:12px}.trace-card span{display:block;color:#7694a2;font-size:10px;letter-spacing:.06em}.trace-card code{display:block;color:#d6edf4;margin-top:7px;white-space:normal;font-size:12px;line-height:1.55}.trace-card b{color:#7bd3e9}footer{display:flex;justify-content:space-between;gap:20px;color:#607b88;font-size:10px;padding:16px 4px 4px}
@media(max-width:1120px){.layout{grid-template-columns:1fr}.inputs-panel{grid-row:auto}.diagram-panel,.bridge-diagram-panel{grid-column:1}.charts-panel,.tide-panel,.table-panel,.scenarios-panel,.formula-panel{grid-column:1}.scenario-cards{grid-template-columns:repeat(2,1fr)}.tide-layout{grid-template-columns:1fr}.window-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.app-shell{padding:8px}.topbar{position:static;padding:12px;border-radius:12px;align-items:flex-start}.brand-mark{display:none}.brand h1{font-size:19px}.brand p{font-size:10px}.top-actions{justify-content:flex-end}.top-actions button{padding:8px 9px;font-size:11px}.grid-2,.grid-3,.hero-result,.hero-result-3,.chart-grid,.formula-trace{grid-template-columns:1fr}.hero-result>div+div{border-left:0;border-top:1px solid var(--line)}.hero-result strong{font-size:36px}.scenario-cards,.window-cards{grid-template-columns:1fr}.method-card{grid-template-columns:1fr}.method-card div{border-right:0!important}.speed-advisor{grid-template-columns:1fr auto}.panel-head{padding:13px}.panel-head h2{font-size:16px}.input-groups{padding:8px}.tide-layout{padding:8px}.tide-event{grid-template-columns:50px 1fr 1fr 16px}.tide-events-head{align-items:flex-start;flex-direction:column}.status-split{grid-template-columns:1fr}.status-split>div+div{border-left:0;border-top:1px solid var(--line)}footer{flex-direction:column}}
@media print{body{background:#fff;color:#111}.app-shell{max-width:none;padding:0}.topbar{position:static;box-shadow:none;background:#fff;border:1px solid #aaa}.brand p,.eyebrow{color:#555}.top-actions,.chart-controls,#sampleBtn,#addScenarioBtn,#applyCurrentTide,.scenario-card .card-actions{display:none!important}.safety-banner{background:#fff4d8;color:#5a481d;border-color:#c5a761}.layout{display:block}.panel{break-inside:avoid;background:#fff;color:#111;border:1px solid #bbb;box-shadow:none;margin:0 0 10px}.panel-head{border-color:#ccc}.input-groups{display:grid;grid-template-columns:1fr 1fr;gap:8px}.input-groups fieldset{background:#fff;border-color:#bbb;margin:0}.inputs-panel input,.inputs-panel select{border:0;padding:2px;background:#fff;color:#111}.hero-result,.breakdown,.bridge-breakdown,.method-card,.speed-advisor,.tide-settings,.tide-chart-card,.window-card{color:#111;background:#fff}.diagram-panel,.bridge-diagram-panel,.result-panel,.formula-panel{display:block}.charts-panel,.tide-panel,.table-panel,.scenarios-panel{break-before:page}.trace-card,.chart-card,.scenario-card{background:#fff;color:#111;border-color:#bbb}footer{color:#555}}