/* Portolan components v2 (Together) — built on portolan.css tokens */
/* logo swaps with theme */
.logo-l{display:block}.logo-d{display:none}[data-theme="dark"] .logo-l{display:none}[data-theme="dark"] .logo-d{display:block}

/* app shell */
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.side{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 12px;gap:2px}
.side .brand{padding:4px 8px 18px}.side .brand img{height:28px}
.nav-i{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:var(--r);color:var(--ink-2);text-decoration:none;font-size:13.5px;font-weight:500}
.nav-i svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2}
.nav-i:hover{background:var(--surface-2)}.nav-i.on{background:var(--ink);color:var(--bg)}
.nav-i .ct{margin-left:auto;font:500 10px var(--f-mono);padding:1px 6px;background:var(--risk);color:#fff}
.nav-g{font:500 10px var(--f-mono);color:var(--faint);padding:16px 10px 6px}
.topbar{height:56px;display:flex;align-items:center;gap:12px;padding:0 24px;border-bottom:1px solid var(--line);background:var(--surface)}
.topbar .search{flex:1;max-width:460px;height:34px;display:flex;align-items:center;gap:8px;padding:0 10px;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font-size:13px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--acc-tint);color:var(--acc);display:grid;place-items:center;font:600 12px var(--f-ui)}
.main{padding:24px 28px;min-width:0}
.crumb{font:500 11px var(--f-mono);color:var(--muted)}

/* lane search bar */
.lane{display:grid;grid-template-columns:1.3fr auto 1.3fr 1fr 1fr auto;gap:0;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong)}
.lane .field{box-shadow:none;border-left:1px solid var(--line);border-radius:0;min-height:60px}
.lane .field:first-child{border-left:0}
.lane .swap{width:36px;display:grid;place-items:center;border-left:1px solid var(--line);color:var(--muted)}
.lane .go{border-radius:0;height:auto;padding:0 22px}
.lane .field b{font-size:16px}

/* segmented */
.seg{display:inline-flex;box-shadow:inset 0 0 0 1px var(--line);background:var(--surface)}
.seg button{height:32px;padding:0 12px;border:0;background:none;font:500 11px var(--f-mono);color:var(--muted);cursor:pointer;border-left:1px solid var(--line)}
.seg button:first-child{border-left:0}.seg button.on{background:var(--ink);color:var(--bg)}

/* toggle + checkbox */
.tgl{width:34px;height:20px;border-radius:10px;background:var(--surface-3);position:relative;display:inline-block;vertical-align:middle}
.tgl:after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}
.tgl.on{background:var(--acc)}.tgl.on:after{left:16px}
.cb{width:16px;height:16px;box-shadow:inset 0 0 0 1.5px var(--ink);display:inline-grid;place-items:center;vertical-align:middle}
.cb.on{background:var(--acc);box-shadow:none}.cb.on:after{content:"";width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}

/* price calendar */
.cal{display:grid;grid-template-columns:repeat(6,1fr);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.wk{position:relative;padding:12px 12px 14px;border-left:1px solid var(--line);cursor:pointer;display:flex;flex-direction:column;gap:6px;min-height:118px}
.wk:first-child{border-left:0}
.wk .d{font:500 10px var(--f-mono);color:var(--muted)}
.wk .p{font:500 19px var(--f-mono);letter-spacing:-.02em}
.wk .bar{height:34px;display:flex;align-items:flex-end}.wk .bar i{display:block;width:100%;background:var(--surface-3)}
.wk .s{font:400 11px var(--f-ui);color:var(--muted)}
.wk.low .bar i{background:var(--acc-soft)}.wk.low .p{color:var(--acc)}
.wk.on{background:var(--acc-tint);box-shadow:inset 0 3px var(--acc)}
.wk.on .bar i{background:var(--acc)}
.wk .tag{position:absolute;right:10px;top:10px}

/* result row */
.res{display:grid;grid-template-columns:200px 1fr 120px 150px 150px;align-items:center;gap:20px;padding:16px 18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);margin-top:-1px;position:relative}
.res.sel{background:var(--acc-tint);box-shadow:inset 0 0 0 1px var(--acc),inset 3px 0 var(--acc);z-index:1}
.carrier{display:flex;gap:10px;align-items:center}
.cmark{width:34px;height:34px;display:grid;place-items:center;font:800 14px var(--f-ui);background:var(--ink);color:var(--bg);flex:none}
.carrier b{display:block;font-size:14px}.carrier span{font:400 11px var(--f-mono);color:var(--muted)}
.leg{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}
.leg .pt b{display:block;font:800 18px/1 var(--f-ui);}.leg .pt span{font:400 11px var(--f-mono);color:var(--muted)}
.leg .pt.r{text-align:right}
.leg .mid{text-align:center;font:400 11px var(--f-mono);color:var(--muted)}
.leg .mid .route{margin:4px 0}
.allin{text-align:right}.allin .t-price{display:block}.allin span{font:400 11px var(--f-mono);color:var(--muted)}
.res .rl{display:flex;flex-direction:column;gap:4px;font:400 11px var(--f-mono);color:var(--muted)}

/* landed cost stack */
.stack{display:flex;height:14px;gap:2px}.stack i{display:block;height:100%}
.costs{list-style:none;margin:0;padding:0}
.costs li{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.costs li i{width:10px;height:10px}.costs li .n{font:500 13px var(--f-mono)}
.costs li small{display:block;font:400 11px var(--f-mono);color:var(--muted)}
.costs li.tot{border-bottom:0;border-top:2px solid var(--line-strong);font-weight:600;padding-top:12px}
.costs li.tot .n{font-size:20px}
.c1{background:var(--acc)}.c2{background:#5E8F79}.c3{background:#C8F03C}.c4{background:var(--ink)}.c5{background:var(--faint)}
[data-theme="dark"] .c2{background:#7FB59B}[data-theme="dark"] .c3{background:#2F4F41}[data-theme="dark"] .c4{background:#8FA39A}

/* ETA window */
.eta{position:relative;padding-top:26px}
.eta .track{height:8px;background:var(--surface-2);position:relative}
.eta .win{position:absolute;top:0;height:8px;background:var(--acc)}
.eta .ghost{position:absolute;top:-4px;height:16px;box-shadow:inset 0 0 0 1px var(--faint);background:repeating-linear-gradient(135deg,transparent 0 4px,var(--line) 4px 5px)}
.eta .now{position:absolute;top:-22px;bottom:-6px;width:1px;background:var(--ink)}
.eta .now span{position:absolute;top:0;left:4px;font:500 10px var(--f-mono);white-space:nowrap}
.eta .ticks{display:flex;justify-content:space-between;margin-top:8px;font:400 10px var(--f-mono);color:var(--muted)}
.eta-big{display:flex;align-items:baseline;gap:12px}.eta-big b{font:800 40px/1 var(--f-ui);}

/* timeline */
.tl{list-style:none;margin:0;padding:0}
.tl li{display:grid;grid-template-columns:20px 1fr auto;gap:12px;position:relative;padding-bottom:18px}
.tl li:before{content:"";position:absolute;left:9px;top:16px;bottom:0;width:2px;background:var(--ink)}
.tl li:last-child:before{display:none}
.tl li.next:before,.tl li.next~li:before{background:repeating-linear-gradient(var(--line) 0 4px,transparent 4px 8px)}
.tl .dot{width:20px;height:20px;border-radius:50%;background:var(--ink);display:grid;place-items:center;position:relative;z-index:1}
.tl .dot:after{content:"";width:6px;height:6px;border-radius:50%;background:var(--bg)}
.tl li.now .dot{background:var(--acc);box-shadow:0 0 0 5px var(--acc-tint)}
.tl li.next .dot,.tl li.next~li .dot{background:var(--surface);box-shadow:inset 0 0 0 2px var(--line)}
.tl li.next .dot:after,.tl li.next~li .dot:after{background:none}
.tl li.warn .dot{background:var(--warn)}
.tl b{display:block;font-size:13.5px;font-weight:600}.tl span{font-size:12px;color:var(--muted)}
.tl .tm{font:400 11px var(--f-mono);color:var(--muted);text-align:right;white-space:nowrap}

/* free time countdown */
.ft{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.ft .big{font:800 44px/0.9 var(--f-ui);}.ft .big small{display:block;font:500 10px var(--f-mono);color:var(--muted);margin-top:6px}
.ft .cells{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}.ft .cells i{height:22px;background:var(--surface-3)}
.ft .cells i.used{background:var(--ink)}.ft .cells i.left{background:var(--warn)}.ft .cells i.dem{background:repeating-linear-gradient(135deg,var(--risk-tint) 0 4px,transparent 4px 7px);box-shadow:inset 0 0 0 1px var(--risk)}
.ft .lg{display:flex;justify-content:space-between;font:400 10px var(--f-mono);color:var(--muted);margin-top:6px;}

/* alert with fix */
.alert{display:grid;grid-template-columns:4px 1fr;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.alert>i{background:var(--warn)}.alert.risk>i{background:var(--risk)}.alert.ok>i{background:var(--ok)}
.alert .bd{padding:14px 16px}
.alert .hd{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.alert h5{margin:6px 0 4px;font-size:15px;font-weight:600}.alert p{margin:0;color:var(--ink-2);font-size:13px}
.fix{margin-top:12px;padding:12px;background:var(--acc-tint);display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.fix .t-label{color:var(--acc)}.fix b{display:block;font-size:13.5px;margin-top:3px}
.fix .acts{display:flex;gap:6px}

/* doc row with AI confidence */
.drop{border:1.5px dashed var(--acc);background:var(--acc-tint);padding:22px;display:flex;gap:16px;align-items:center}
.drop .ic{width:44px;height:52px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);position:relative;flex:none}
.drop .ic:after{content:"PDF";position:absolute;left:6px;bottom:6px;font:500 9px var(--f-mono);color:var(--risk)}
.xf{display:grid;grid-template-columns:150px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.xf .t-label{font-size:10px}.xf b{font-weight:600}.xf b.mono{font-weight:500}
.xf.chk{background:var(--warn-tint);margin:0 -12px;padding:10px 12px;border-bottom:0;box-shadow:inset 3px 0 var(--warn)}
.src{font:400 10px var(--f-mono);color:var(--muted);display:block;margin-top:2px}
.conf{display:inline-flex;align-items:center;gap:6px;font:500 10px var(--f-mono);}
.conf i{width:22px;height:4px;background:var(--surface-3);position:relative;overflow:hidden}.conf i:after{content:"";position:absolute;inset:0;width:var(--c);background:var(--ok)}
.conf.lo{color:var(--warn)}.conf.lo i:after{background:var(--warn)}

/* chart map (portolan style, abstract) */
.chart{position:relative;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.chart svg{display:block;width:100%;height:100%}
.chart .rh{stroke:var(--line);stroke-width:1}
.chart .land{fill:var(--surface-2);stroke:var(--line)}
.chart .rt{fill:none;stroke:var(--ink);stroke-width:2}
.chart .rt.fut{stroke-dasharray:6 6;stroke:var(--faint)}
.chart .pin{fill:var(--surface);stroke:var(--ink);stroke-width:2}
.chart .pin.end{fill:var(--ink)}
.chart .lbl{font:800 13px var(--f-ui);fill:var(--ink)}
.chart .lbs{font:400 10px var(--f-mono);fill:var(--muted)}
.chart .ves{fill:var(--acc)}
.chart .halo{fill:var(--acc);opacity:.18}

/* tabs */
.tabs{display:flex;gap:22px;border-bottom:1px solid var(--line)}
.tabs a{padding:10px 0;font:500 12px var(--f-mono);color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--ink);border-color:var(--ink)}
.tabs a .ct{font-size:10px;margin-left:4px;color:var(--faint)}

/* toast + empty + skeleton */
.toast{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--bg);padding:10px 14px;font-size:13px}
.toast a{color:var(--acc-soft);font:500 11px var(--f-mono);}
[data-theme="dark"] .toast a{color:var(--acc)}
.empty{padding:32px;text-align:center;box-shadow:inset 0 0 0 1px var(--line);background:var(--surface)}
.empty b{display:block;font:800 22px var(--f-ui);margin:12px 0 4px}
.sk{height:12px;background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:sk 1.4s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
.copy{display:inline-flex;align-items:center;gap:6px;font:500 13px var(--f-mono);cursor:pointer}
.copy svg{width:12px;height:12px;stroke:var(--muted);fill:none;stroke-width:1.6}
.carrier .pill,.allin .pill{display:inline-block;font:500 9px var(--f-mono);color:var(--acc-ink);margin-left:4px}
.allin .t-price{font:500 20px var(--f-mono);color:var(--ink);letter-spacing:-.02em}
.cmark{color:var(--bg)}
.carrier .cmark{font:800 14px var(--f-ui);color:var(--bg)}

/* ===== v2 Together layer: rounded, friendly, Alliance No.2 ===== */
body{font-feature-settings:"lnum" 1}
.t-display{font:800 60px/.98 var(--f-ui);letter-spacing:-.035em}
.t-h1{font:800 38px/1 var(--f-ui);letter-spacing:-.03em}
.t-h2{font:800 25px/1.08 var(--f-ui);letter-spacing:-.02em}
.t-label{font:500 12px/1.25 var(--f-ui);color:var(--muted)}
.t-price{font:800 22px var(--f-ui);letter-spacing:-.02em}
.t-code{font-family:var(--f-ui);font-weight:500}
.btn{border-radius:var(--r-pill);font:600 13px var(--f-ui);height:38px;padding:0 18px}
.btn-lg{height:48px;padding:0 24px;font-size:15px}.btn-sm{height:30px;padding:0 12px;font-size:12px}
.chip{border-radius:var(--r-pill);font:500 12px var(--f-ui);height:26px;padding:0 10px}
.pill{border-radius:var(--r-pill);background:var(--sig);color:var(--sig-ink);font:600 10px var(--f-ui);padding:3px 8px}
.carrier .pill,.allin .pill{color:var(--sig-ink);font:600 10px var(--f-ui)}
.panel,.card,.cal,.chart,.empty,.alert,.res,.lane{border-radius:var(--r-lg)}
.card,.cal,.chart,.alert,.lane{overflow:hidden}
.field{border-radius:12px}
.lane{box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.seg{border-radius:var(--r-pill);padding:3px;gap:2px}.seg button{border-radius:var(--r-pill);border-left:0;font:500 12px var(--f-ui);height:30px}
.nav-i{border-radius:12px}.nav-i.on{background:var(--acc);color:var(--acc-ink)}
.nav-i .ct{border-radius:var(--r-pill);font:600 10px var(--f-ui);padding:2px 7px}
.nav-g{font:500 11px var(--f-ui)}
.topbar .search{border-radius:var(--r-pill);padding:0 14px;background:var(--surface-2);box-shadow:none}
.crumb{font:500 12px var(--f-ui)}
.avatar{background:var(--sig);color:var(--sig-ink)}
.tbl th{font:500 12px var(--f-ui);border-bottom:1px solid var(--line)}
.kbd{border-radius:6px;font:500 11px var(--f-ui)}
.cb{border-radius:5px}
.rel{gap:3px}.rel i{border-radius:3px;width:5px}
.wk{border-left:0;margin:6px 0 6px 6px;border-radius:12px}.wk:last-child{margin-right:6px}
.wk .d{font:500 11px var(--f-ui)}.wk .p{font:800 20px var(--f-ui);letter-spacing:-.02em}
.wk .bar i{border-radius:6px}
.wk.on{background:var(--acc);color:var(--acc-ink);box-shadow:none}.wk.on .d,.wk.on .s{color:inherit;opacity:.8}.wk.on .p{color:inherit}
.wk.on .bar i{background:var(--sig)}
.cmark{border-radius:10px}
.res{margin-bottom:8px}.res.sel{box-shadow:inset 0 0 0 2px var(--acc)}
.leg .pt b{font-weight:800;letter-spacing:-.01em}
.stack{gap:3px}.stack i{border-radius:4px}.costs li i{border-radius:3px}
.costs li.tot{border-top:1.5px solid var(--line-strong)}
.eta .track,.eta .win{border-radius:4px}
.ft .cells i{border-radius:4px}
.alert{grid-template-columns:5px 1fr}
.fix{border-radius:12px}
.drop{border-radius:var(--r-lg)}.drop .ic{border-radius:6px}
.xf.chk{border-radius:10px}
.conf i{border-radius:3px}
.chart .ves,.chart .halo{fill:var(--acc)}
.tabs a{font:500 13px var(--f-ui)}.tabs a.on{border-color:var(--acc)}
.toast{border-radius:var(--r-pill);padding:10px 18px}
.toast a{color:var(--sig)}
.sk{border-radius:6px}
.copy{font:500 13px var(--f-ui)}
.mono,.t-num{font-family:var(--f-ui)}

/* dark mode comfort: darker canvas, lime only on the main action */
[data-theme="dark"] .nav-i.on{background:var(--surface-3);color:var(--ink)}
[data-theme="dark"] .nav-i.on svg{stroke:var(--acc)}
[data-theme="dark"] .side,[data-theme="dark"] .topbar{background:#090F0D}
[data-theme="dark"] .card,[data-theme="dark"] .panel,[data-theme="dark"] .res,[data-theme="dark"] .cal,[data-theme="dark"] .alert{box-shadow:inset 0 0 0 1px var(--line)}
[data-theme="dark"] .wk.on{background:var(--surface-3);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--acc)}
[data-theme="dark"] .ink-lime{color:var(--acc)}
[data-theme="dark"] .seg button.on{background:var(--surface-3);color:var(--ink)}
[data-theme="dark"] .st-ink{background:var(--surface-3);color:var(--ink-2)}