:root{--navy:#123d4c;--ink:#173b46;--paper:#f5f1e7;--muted:#788583;--line:#d9dfd8;--orange:#dc8058;--gold:#edbd61;--green:#427466}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{background:var(--paper);color:var(--ink);font:12px Arial,sans-serif;display:flex;flex-direction:column}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #cdd6ce;padding:10px 12px;background:#fffdf7;color:var(--ink);border-radius:4px}button:hover{background:#e8eee5}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #d9a34a;outline-offset:2px}a{color:inherit}h1,h2,h3,p{margin:0}header{height:82px;flex-shrink:0;background:#f6f2e8;display:flex;align-items:center;justify-content:space-between;padding:0 25px;border-bottom:1px solid #d3dcd1;gap:20px}.wordmark{display:flex;gap:12px;align-items:center;text-decoration:none;font-size:20px;font-weight:900;letter-spacing:-.7px}.wordmark i{font-family:Georgia;font-weight:400}.wordmark small{display:block;font-size:8px;font-weight:600;letter-spacing:1.6px;margin-top:5px;color:#748982}.mark{display:grid;place-items:center;height:43px;width:43px;background:var(--navy);color:#fff4d8;font-size:28px;font-weight:900;position:relative;border-radius:2px}.mark span{position:absolute;right:-5px;top:-6px;font-size:20px;color:#dd8056}.top-metrics{display:flex;gap:42px}.top-metrics small{display:block;font-size:8px;letter-spacing:1.2px;color:#7b8a84;margin-bottom:6px}.top-metrics strong{font:600 23px ui-monospace,monospace;letter-spacing:-1px}.top-metrics em{font:10px Arial;color:#7c8f86;letter-spacing:0;margin-left:3px}.menu-button{font-size:12px;padding:10px 15px;background:transparent}.workspace{display:flex;flex:1;min-height:0}nav{width:76px;flex-shrink:0;background:#e9eee4;border-right:1px solid #d0dbd0;padding:16px 7px;display:flex;flex-direction:column;gap:9px}nav button{background:transparent;border:0;color:#748980;padding:13px 2px;min-height:60px}nav button b{display:block;font-size:23px;margin-bottom:5px;font-weight:400}nav button span{font-size:9px}nav button.active{background:#123d4c;color:#fff7df;box-shadow:0 4px 9px #153f4920}main{flex:1;min-width:0;display:flex;flex-direction:column}.ocean{position:relative;flex:1;min-height:0;overflow:hidden;background:#164452}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.chart-label{position:absolute;top:24px;left:26px;color:#dbe7de;pointer-events:none}.chart-label small{font-size:7px;letter-spacing:1.5px;color:#82a8aa}.chart-label h1{font:600 22px Georgia,serif;margin:7px 0}.chart-label>span{font-size:9px;color:#8eafb0}.weather{position:absolute;top:25px;right:24px;font-size:8px;letter-spacing:1px;color:#e5c789;background:#123746a8;border:1px solid #47636a;padding:9px 12px;border-radius:20px}.map-tools{position:absolute;left:23px;bottom:22px;display:flex;gap:6px}.map-tools button{width:31px;height:31px;padding:0;background:#123746db;border-color:#526b70;color:#d8e4d7;font-size:18px}.paused{position:absolute;right:24px;bottom:20px;font-size:7px;letter-spacing:1.4px;color:#acbfb7;padding:10px;background:#113b46b8;border-radius:3px;pointer-events:none}.fleet-strip{overflow-y:hidden;scrollbar-width:thin;height:108px;background:#123443;display:flex;gap:10px;align-items:center;overflow:auto;padding:13px 18px;flex-shrink:0;border-top:1px solid #385965}.ship-chip{min-width:195px;max-width:225px;background:#224956;color:#e6ebdf;border:1px solid #41636b;text-align:left;padding:10px 12px}.ship-chip:hover{background:#2b5560}.ship-chip.selected{border-color:#edbd61;background:#2c505b}.ship-chip strong{font-size:12px;display:flex;justify-content:space-between}.ship-chip small{display:block;font-size:8px;color:#b3c8c2;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ship-chip .mini-progress{height:3px;background:#123746;margin-top:9px}.ship-chip .mini-progress i{display:block;height:100%;background:#e5b96a}.add-ship{min-width:80px;background:transparent;border:1px dashed #5d787a;color:#b9ccc4;align-self:stretch;font-size:10px}aside{width:360px;flex-shrink:0;padding:25px 22px;background:var(--paper);overflow:auto;border-left:1px solid #c8d5cd;scrollbar-width:thin}h2{font-size:27px;line-height:1.06;letter-spacing:-1px;font-weight:800;margin-bottom:10px}h3{font-size:17px;letter-spacing:-.4px;margin-bottom:8px}.eyebrow{font-size:8px;font-weight:700;letter-spacing:1.4px;color:#7c8d81;margin-bottom:9px}.intro{font-size:11px;line-height:1.7;color:var(--muted);margin-bottom:20px}.section{padding-top:20px;margin-top:20px;border-top:1px solid var(--line)}.section-label{font-size:8px;font-weight:700;letter-spacing:1.2px;margin-bottom:12px;color:#71867c}.row{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:9px}.row strong{font-weight:700}.row small{font-size:9px;color:#7c8b82}.positive{color:#3b7d5b}.negative{color:#ae6043}.note{font-size:10px;line-height:1.7;color:#7b8880;margin:10px 0}.notice{background:#e9dfc7;border-left:3px solid #cfa65b;padding:12px;font-size:10px;line-height:1.7;margin:13px 0}.pill{display:inline-block;border:1px solid #b9ccc0;color:#587d6c;padding:4px 6px;border-radius:3px;font-size:8px;font-weight:600;white-space:nowrap}.pill.orange{border-color:#dec2a5;color:#b0754c}.primary{background:var(--navy);color:#fff5df;border-color:var(--navy)}.primary:hover{background:#285666}.accent{background:#edbd61;border-color:#dbad57;color:#163e49}.accent:hover{background:#f5d18a}.danger{color:#a45c43}.full{width:100%}.card{background:#fffdf7;border:1px solid #d5ded3;border-radius:5px;margin-bottom:12px;padding:14px}.card.selected{border-color:#ce9d53;background:#f4e8cd}.card p{font-size:10px;line-height:1.7;color:#7a8980;margin:7px 0 10px}.card button{font-size:10px;padding:8px 10px}.card h3{margin:0}.port-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:15px 0}.port-picker button{font-size:9px;padding:8px 4px}.port-picker button.active{background:#dfbe7a;border-color:#c6a15f}.port-selector,.ship-selector{width:100%;border:1px solid #cad5ca;border-radius:4px;background:#fffdf7;padding:10px;color:var(--ink);font-size:11px;margin:0 0 12px}input,select{color:var(--ink);background:#fffef8;border:1px solid #c8d2c7;border-radius:4px;padding:10px;min-width:0}input[type=number]{width:65px}.trade-table{width:100%;border-collapse:collapse;font-size:10px;margin:10px 0}.trade-table th{text-align:left;font-size:7px;letter-spacing:1px;font-weight:600;color:#8a958a;padding:8px 4px}.trade-table td{padding:12px 4px;border-top:1px solid #d9e0d4}.trade-table tr.selected td{background:#e8e9d7}.trade-table button{padding:0;border:0;background:transparent;font-weight:600;display:flex;align-items:center;gap:6px;font-size:10px}.good-icon{font-size:15px}.trade-table .muted{color:#93a094}.trade-box{background:#e6e9dc;border:1px solid #cfd8c8;border-radius:5px;padding:14px}.trade-box .row:last-child{margin:0}.trade-box h3{font-size:16px}.input-line{display:flex;align-items:center;gap:8px;margin:12px 0}.input-line label{font-size:10px;color:#78897b;flex:1}.input-line input{width:70px}.two-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px}.two-buttons button{font-size:10px;padding:10px 6px}.price{font:600 18px ui-monospace,monospace;letter-spacing:-.7px}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stat{background:#e8ecdf;padding:12px;border-radius:4px}.stat small{display:block;font-size:7px;letter-spacing:1px;color:#829080}.stat strong{display:block;font:600 20px ui-monospace,monospace;margin-top:7px;letter-spacing:-1px}.bar{height:4px;background:#d7dfd1;margin:8px 0 12px}.bar i{display:block;height:100%;background:#769582}.cargo-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #e1e5d9;font-size:10px}.route-form label{display:block;font-size:9px;margin:12px 0 6px;color:#7c8c80}.route-form select{width:100%;font-size:11px}.progress-goal{display:flex;gap:12px;border-bottom:1px solid #d5ded2;padding:14px 0}.progress-goal>span{font:600 21px ui-monospace,monospace;color:#c29451}.progress-goal h3{font-size:14px}.progress-goal p{font-size:10px;line-height:1.65;color:#859080}.progress-goal.done{opacity:.55}.progress-goal.current{border-left:3px solid #d7ad61;padding-left:10px}.log{font-size:10px;line-height:1.6;padding:9px 0;border-bottom:1px solid #dce2d5}.log small{display:block;font-size:7px;color:#97a192;margin-bottom:4px}.finance-chart{height:100px;width:100%;background:#e6ebdf;border-radius:4px}.legend{font-size:7px;letter-spacing:.8px;color:#8a9889;margin:7px 0 15px}.empty{padding:15px;background:#e8ecdf;border-radius:5px;font-size:10px;line-height:1.8;color:#7b8b7b}footer{height:58px;display:flex;align-items:center;gap:20px;background:#e9ede2;border-top:1px solid #c8d5c7;flex-shrink:0;padding:0 20px}.date{min-width:120px}.date strong{display:block;font:600 11px ui-monospace,monospace}.date small{font-size:7px;display:block;margin-top:5px;color:#81917d}.speeds{display:flex;gap:3px}.speeds button{font-size:10px;padding:8px 9px;min-width:30px}.speeds button[aria-pressed=true]{background:#173e49;border-color:#173e49;color:#f7e7c5}footer p{flex:1;color:#708575;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#save-status{font-size:7px;color:#8b9c86;letter-spacing:.5px}#toast{position:fixed;z-index:80;left:50%;bottom:78px;transform:translateX(-50%);background:#fbefd3;border:1px solid #d2b26d;color:#244751;padding:14px 20px;max-width:85vw;font-size:11px;box-shadow:0 7px 25px #0003;border-radius:5px;opacity:0;pointer-events:none;transition:opacity .2s}#toast.show{opacity:1}.modal[hidden]{display:none}.modal{position:fixed;inset:0;z-index:90;background:#0c2e3ad4;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:22px}.modal-card{width:610px;max-width:100%;max-height:92vh;overflow:auto;background:#f7f1e2;border:1px solid #d5c198;border-radius:6px;padding:36px;position:relative;box-shadow:0 30px 90px #0005}.modal-card h1{font-size:49px;line-height:.98;letter-spacing:-2px;margin:15px 0 20px}.modal-card h1 em{font:italic 49px Georgia}.modal-card h2{font-size:30px;padding-right:25px}.modal-card>p{font-size:12px;line-height:1.9;color:#7c887b;margin-bottom:20px}.modal-card label{display:block;font-size:9px;color:#7e8a79;letter-spacing:1px;margin:15px 0 8px}.modal-card input{width:100%}.modal-card .close{position:absolute;right:15px;top:15px;background:none;border:0;font-size:24px}.scenario-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.scenario{padding:17px;text-align:left;background:#eee7d4}.scenario strong{display:block;font-size:16px;margin-bottom:8px}.scenario small{font-size:10px;line-height:1.6;color:#7d8676}.scenario.active{border:2px solid #b58c4d;padding:16px;background:#e9dfbf}.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:24px}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.guide-grid h3{font-size:16px}.guide-grid p{font-size:11px;line-height:1.8;color:#7a8779}
@media(max-width:1100px){header{padding:0 17px}.top-metrics{gap:25px}.top-metrics strong{font-size:20px}.wordmark{font-size:17px}.mark{width:35px;height:35px;font-size:25px}nav{width:64px}aside{width:320px;padding:20px 18px}.chart-label h1{font-size:19px}.chart-label{left:20px;top:20px}.weather{top:20px;right:18px}#save-status{display:none}}
@media(max-width:760px){header{height:64px;gap:10px;padding:0 12px}.wordmark{font-size:15px;gap:8px}.wordmark small{font-size:6px;max-width:135px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mark{width:29px;height:29px;font-size:21px}.mark span{font-size:15px}.top-metrics{gap:12px}.top-metrics>div:not(:first-child){display:none}.top-metrics strong{font-size:17px}.top-metrics small{font-size:6px}.menu-button{padding:7px 9px}.menu-button span{display:none}.workspace{flex-wrap:wrap;position:relative;align-content:stretch}nav{width:100%;height:49px;flex-direction:row;padding:0 6px;border-right:0;border-bottom:1px solid #ccd7c9;overflow:auto;gap:0}nav button{flex:1;min-height:0;padding:5px 10px;white-space:nowrap;min-width:58px;border-radius:0}nav button b{display:none}nav button span{font-size:9px}main{width:100%;height:calc(55% - 25px);flex:0 0 100%}.fleet-strip{height:72px;padding:7px 10px;gap:7px}.ship-chip{min-width:150px;padding:7px 9px}.ship-chip strong{font-size:10px}.ship-chip small{font-size:7px;margin-top:4px}.ship-chip .mini-progress{margin-top:5px}.add-ship{min-width:56px;font-size:9px}.ocean{min-height:170px}aside{height:calc(45% - 24px);width:100%;border:0;border-top:1px solid #c7d4c8;padding:17px 18px}.chart-label{top:10px;left:14px}.chart-label h1{font-size:15px;margin:5px 0}.chart-label small{font-size:5px}.chart-label>span{display:none}.weather{font-size:6px;top:11px;right:12px;padding:6px 8px}.map-tools{bottom:10px;left:12px;gap:4px}.map-tools button{width:25px;height:25px;font-size:14px}.paused{bottom:10px;right:10px;font-size:5px;padding:7px}footer{height:49px;padding:0 12px;gap:10px}footer p{display:none}.date{min-width:125px}.date strong{font-size:10px}.date small{font-size:6px}.speeds button{padding:7px 9px}h2{font-size:23px}.intro{margin-bottom:12px}.port-picker{grid-template-columns:repeat(6,1fr)}.port-picker button{font-size:8px;padding:7px 2px}.modal-card{padding:26px}.modal-card h1{font-size:38px}.modal-card h1 em{font-size:38px}.guide-grid{grid-template-columns:1fr}.modal-actions{flex-wrap:wrap}}
@media(max-height:520px) and (orientation:landscape){header{height:49px}.wordmark{font-size:15px}.mark{height:28px;width:28px;font-size:20px}.top-metrics strong{font-size:17px}.workspace{flex-wrap:nowrap}nav{width:56px;height:auto;flex-direction:column;padding:3px;gap:3px;overflow:auto;flex-shrink:0}nav button{min-width:0;flex:none;min-height:35px}nav button b{display:none}main{height:auto;flex:1;width:auto}.ocean{min-height:0}aside{height:auto;width:300px;border-left:1px solid #cad6c7;padding:15px}.fleet-strip{height:64px}.chart-label{display:none}.weather{font-size:6px;padding:6px}footer{height:42px}.port-picker{grid-template-columns:repeat(3,1fr)}.modal-card{max-height:95vh;padding:22px}.modal-card h1{font-size:28px}.modal-card h1 em{font-size:28px}.scenario-grid{gap:8px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}