:root{
  --bg:#0d1017; --panel:#151a25; --panel2:#1b2130; --row:#131824;
  --line:#2a3348; --line2:#3d4864;
  --tx:#e8ecf6; --dim:#8b95b0; --dim2:#5d6680;
  --gold:#f2c14e; --gold2:#a8801f;
  --up:#5fbf6a; --down:#e2574c;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 50% -10%, #1a2133 0%, transparent 70%),
    var(--bg);
  color:var(--tx);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", monospace;
  font-size:13px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding:14px;
}
#app{max-width:1060px;margin:0 auto;display:flex;flex-direction:column;gap:12px}

/* ---------- 通用面板 ---------- */
.panel{background:var(--panel);border:2px solid var(--line);box-shadow:0 6px 0 -2px #070910}
.panel > .ph{
  display:flex;align-items:center;gap:8px;
  padding:6px 10px;background:var(--panel2);
  border-bottom:2px solid var(--line);
  font-size:11px;letter-spacing:.16em;color:var(--dim);
}

/* ---------- 顶栏 ---------- */
#hud{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px}
.brand{font-size:15px;letter-spacing:.22em;color:var(--gold);text-shadow:0 2px 0 #6b4f0d}
.brand small{display:block;font-size:9px;letter-spacing:.3em;color:var(--dim2);text-shadow:none}
.hsep{width:2px;height:26px;background:var(--line);margin:0 2px}
.stat{display:flex;flex-direction:column;line-height:1.25}
.stat span{font-size:9px;letter-spacing:.16em;color:var(--dim2)}
.stat b{font-size:14px;font-weight:400;font-variant-numeric:tabular-nums}
.stat b.g{color:var(--gold)}
.stat b.dim{color:var(--dim)}
#goalWrap{margin-left:auto;min-width:190px}
#goalWrap .lab{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.14em;color:var(--dim2);margin-bottom:3px}
.bar{height:10px;background:#0a0d14;border:2px solid var(--line)}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width .25s}
.bar i.done{background:linear-gradient(90deg,#3f9e4a,var(--up))}

/* ---------- 布局 ---------- */
#main{display:grid;grid-template-columns:1fr 330px;gap:12px;align-items:start}
@media (max-width:880px){#main{grid-template-columns:1fr}}

/* ---------- 市场 ---------- */
#unitBar{display:flex;align-items:center;gap:6px;padding:7px 10px;border-bottom:2px solid var(--line);background:var(--row);flex-wrap:wrap}
#unitBar .lb{font-size:10px;letter-spacing:.14em;color:var(--dim2);margin-right:2px}
.seg{display:flex;border:2px solid var(--line2)}
.seg button{
  background:transparent;border:0;border-right:2px solid var(--line2);color:var(--dim);
  font:inherit;font-size:11px;padding:3px 9px;cursor:pointer
}
.seg button:last-child{border-right:0}
.seg button:hover{background:#232b3d;color:var(--tx)}
.seg button.on{background:var(--gold);color:#1a1408;font-weight:700}
#unitBar .tip{margin-left:auto;font-size:10px;color:var(--dim2)}

#mkt{display:flex;flex-direction:column}
.row{
  display:grid;grid-template-columns:34px minmax(0,1fr) 72px 58px 84px;
  gap:9px;align-items:center;
  padding:7px 10px;border-bottom:1px solid #212a3c;
  transition:background .12s
}
.row:last-child{border-bottom:0}
.row:hover{background:#1a2130}
.row.hot{background:#241a1c}
.row.hot:hover{background:#2c2022}
.row img{width:32px;height:32px;image-rendering:pixelated;display:block}
.nm{min-width:0}
.nm .t{display:flex;align-items:center;gap:5px}
.nm .t b{font-weight:400;font-size:13px}
.nm .sub{font-size:10px;color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nm .sub em{color:var(--dim);font-style:normal}
.tag{font-size:9px;padding:0 3px;border:1px solid var(--down);color:var(--down);letter-spacing:.08em;font-style:normal}
.tag.ev{font-size:9px;padding:0 3px;border:1px solid var(--down);background:#3a1a1a;color:#ff9d8f;letter-spacing:.08em;font-style:normal}
.bg{font-size:9px;padding:0 3px;letter-spacing:.06em;font-style:normal;border:1px solid}
.bg.buy{border-color:var(--up);color:var(--up)}
.bg.sell{border-color:var(--gold);color:var(--gold)}
.pr{text-align:right;font-variant-numeric:tabular-nums;line-height:1.2}
.pr b{font-size:14px;font-weight:400;color:var(--tx)}
.pr b.lo{color:var(--up)}
.pr b.hi{color:var(--gold)}
.pr i{font-style:normal;font-size:10px;margin-left:2px}
.pr i.u{color:var(--up)} .pr i.d{color:var(--down)} .pr i.f{color:var(--dim2)}
.hold{text-align:right;font-variant-numeric:tabular-nums;color:var(--dim);font-size:12px}
.hold.has{color:var(--tx)}
.act{display:flex;gap:5px;justify-content:flex-end}

button.b{
  font:inherit;font-size:11px;cursor:pointer;
  background:#1f2739;border:2px solid var(--line2);color:var(--tx);
  padding:3px 0;width:38px;text-align:center;
}
button.b:hover:not(:disabled){background:#2c3852;border-color:#59688c}
button.b:active:not(:disabled){transform:translateY(1px)}
button.b:disabled{opacity:.3;cursor:not-allowed}
button.b.bs{border-color:#4a7f52;color:#a8e0b0}
button.b.bs:hover:not(:disabled){background:#22402a;border-color:var(--up)}
button.b.bh{border-color:#8a7233;color:#f5d98a}
button.b.bh:hover:not(:disabled){background:#3d3418;border-color:var(--gold)}

/* ---------- 侧栏 ---------- */
/* 商路图：地铁风格环线。金色实心=当前站，金色空心=从当前站可前往的相邻站。
   它住在「行程」面板里，与前往按钮列表互相切换显示。 */
#travelBar{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--row);border-bottom:2px solid var(--line)}
#travelBar .tip{margin-left:auto;font-size:10px;color:var(--dim2);text-align:right}
#mapWrap{padding:6px 8px}
#mapWrap.hide,#travel.hide{display:none}
#mapWrap svg{display:block;width:100%;height:auto}
#mapWrap .rail{stroke:var(--line2);stroke-width:5;stroke-linecap:butt}
#mapWrap .rail.hot{stroke:var(--gold)}
#mapWrap .st{fill:#0f131c;stroke:var(--dim2);stroke-width:2}
#mapWrap .st.cur{fill:var(--gold);stroke:#fff2c8}
#mapWrap .st.nb{fill:#1d1a10;stroke:var(--gold)}
#mapWrap .lb{font:11px ui-monospace,Menlo,Consolas,"PingFang SC","Microsoft YaHei",monospace;fill:var(--dim2);dominant-baseline:middle}
#mapWrap .lb.cur{fill:var(--gold)}
#mapWrap .lb.nb{fill:var(--tx)}
/* ---- 地图地形（背景层：左大陆右海洋，海岸线穿过港口镇）---- */
#mapWrap .terrain{pointer-events:none}          /* 背景不抢点击，站点热区仍在上层 */
#mapWrap .sea{fill:#05090f}
#mapWrap .wave{stroke:#1d2f4a;stroke-width:1.6;stroke-linecap:round;fill:none}
#mapWrap .land{fill:#212c3c}
#mapWrap .coast{fill:none;stroke:#54708f;stroke-width:1.8}
#mapWrap .shore{fill:none;stroke:#2b4a6b;stroke-width:5;opacity:.5}   /* 沿海浅滩光带 */
#mapWrap .peak{fill:#2b3849;stroke:#3d4f68;stroke-width:1}
#mapWrap .peak.hi{fill:#37485f}
#mapWrap .forest{fill:#223c2b;stroke:#2f5238;stroke-width:.8}
#mapWrap .tree{fill:#2f5238}
#mapWrap .field{fill:none;stroke:#2e3d51;stroke-width:0.8}
#mapWrap .river{fill:none;stroke:#27567f;stroke-width:2.2;stroke-linecap:round}
#mapWrap .isle{fill:#27354a;stroke:#54708f;stroke-width:1.4}
#mapWrap .pier,#mapWrap .canal{stroke:#4a5f7a;stroke-width:1.4;fill:none}
#mapWrap .grid{stroke:#1b2738;stroke-width:0.6;stroke-dasharray:2 5}
#mapWrap .geo{font:9px ui-monospace,Menlo,Consolas,"PingFang SC",monospace;fill:#66748f;letter-spacing:.18em;dominant-baseline:middle}
#mapWrap .compass circle,#mapWrap .compass path{fill:none;stroke:#4a5f7a;stroke-width:1}
#mapWrap .compass .compass-n{fill:var(--gold);stroke:none}
#mapWrap .scale path{fill:none;stroke:#4a5f7a;stroke-width:1}
#mapWrap .scale-t{font:8px ui-monospace,Menlo,Consolas,"PingFang SC",monospace;fill:#66748f;dominant-baseline:middle}

/* 站点可点击：能去的方向给指针与悬停高亮；远处站点不给指针，但点了会有说明 */
#mapWrap .hit{fill:transparent}
#mapWrap .stop.go{cursor:pointer}
#mapWrap .stop.go:hover .hit{fill:rgba(242,193,78,.14)}
#mapWrap .stop.go:hover .st{stroke-width:3}
#mapWrap .stop.go:hover .lb{fill:var(--tx)}
/* 海路：线路与站点用偏蓝的色调，和内陆一眼区分开 */
#mapWrap .rail.sea{stroke:#3f6a8c}
#mapWrap .rail.sea.hot{stroke:var(--gold)}
#mapWrap .st.sea{stroke:#5a9ce0}
#mapWrap .st.sea.cur{fill:var(--gold);stroke:#fff2c8}
#mapWrap .st.sea.nb{fill:#101a24;stroke:var(--gold)}
/* 行程面板里被文牒挡住的海路去处 */
.tbtn.locked{opacity:.6}
.tbtn.locked:hover{opacity:.85}
.tbtn .nm2 i.sea{font-style:normal;font-size:9px;color:#5a9ce0;border:1px solid #3f6a8c;padding:0 3px;margin-left:4px}

#scene{width:300px;height:168px;max-width:100%;image-rendering:pixelated;display:block;border:2px solid var(--line);background:#000}
#townInfo{padding:9px 10px;border-top:2px solid var(--line)}
#townInfo .tn{display:flex;align-items:baseline;gap:7px}
#townInfo .tn b{font-size:15px;font-weight:400;color:var(--gold)}
#townInfo .tn i{font-style:normal;font-size:10px;color:var(--dim2)}
#townInfo .ds{font-size:10px;color:var(--dim);margin:4px 0 6px}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{font-size:10px;padding:1px 5px;border:1px solid var(--line2);color:var(--dim)}
.chip.cheap{border-color:#3f7a48;color:#8fd89a}
.chip.dear{border-color:#8a7233;color:#f5d98a}

.slot{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid #212a3c}
.slot:last-child{border-bottom:0}
.slot .sk{flex:1;min-width:0}
.slot .sk b{display:block;font-weight:400;font-size:12px}
.slot .sk s{display:block;text-decoration:none;font-size:10px;color:var(--dim2)}
.slot button.b{width:auto;padding:3px 8px}
.slot button.b.on{border-color:var(--line);color:var(--dim2);background:transparent;cursor:default}

#travel{padding:9px 10px}
#travel .lb{font-size:10px;letter-spacing:.14em;color:var(--dim2);margin-bottom:6px}
.tbtn{
  display:flex;align-items:center;gap:7px;width:100%;text-align:left;cursor:pointer;
  font:inherit;background:#1f2739;border:2px solid var(--line2);color:var(--tx);
  padding:6px 8px;margin-bottom:6px;
}
.tbtn:hover{background:#2c3852;border-color:#59688c}
.tbtn:active{transform:translateY(1px)}
.tbtn .ar{color:var(--gold);font-size:14px}
.tbtn .nm2{flex:1;font-size:12px}
.tbtn .dy{font-size:10px;color:var(--dim2)}
.tbtn .ev{font-size:10px;color:#ff9d8f}
.tbtn.rest{border-color:#3a4460;color:var(--dim)}
.tbtn.rest:hover{color:var(--tx)}

#log{height:186px;overflow-y:auto;padding:6px 10px;font-size:11px;line-height:1.65}
#log div{padding:1px 0;border-bottom:1px solid #1a2130}
#log div:last-child{border-bottom:0}
#log .d{color:var(--dim2);margin-right:5px}
#log .good{color:#8fd89a} #log .bad{color:#ff9d8f} #log .gold{color:var(--gold)} #log .info{color:var(--dim)} #log .event{color:#c9a0f0}
#log::-webkit-scrollbar{width:8px}
#log::-webkit-scrollbar-thumb{background:var(--line2)}
#log::-webkit-scrollbar-track{background:#0a0d14}

/* ---------- 仓库 ---------- */
.phr{margin-left:auto;color:var(--dim2);font-size:10px;letter-spacing:.08em}
#whTop{
  display:flex;align-items:center;gap:8px;padding:6px 10px;
  background:var(--row);border-bottom:2px solid var(--line);
  font-size:10px;letter-spacing:.12em;color:var(--dim2);
}
#whTop .bar{flex:1;height:8px}
#whTop .bar i.full{background:linear-gradient(90deg,#8a2f2a,var(--down))}
#whCapN{font-variant-numeric:tabular-nums;color:var(--tx);letter-spacing:0}
#whSum{
  display:flex;gap:12px;flex-wrap:wrap;padding:5px 10px;
  border-bottom:2px solid var(--line);font-size:10px;color:var(--dim2);
}
#whSum b{font-weight:400;color:var(--tx);font-variant-numeric:tabular-nums;margin-left:3px}
#whSum b.up,.wrow .wv i.up{color:var(--up)}
#whSum b.dn,.wrow .wv i.dn{color:var(--down)}
#whSum b.fl,.wrow .wv i.fl{color:var(--dim2)}
#whList{display:flex;flex-direction:column}
.wrow{display:flex;align-items:center;gap:9px;padding:6px 10px;border-bottom:1px solid #212a3c}
.wrow:last-child{border-bottom:0}
.wrow img{width:28px;height:28px;image-rendering:pixelated;display:block}
.wrow .wk{flex:1;min-width:0}
.wrow .wk .l1{display:flex;align-items:center;gap:5px;min-width:0}
.wrow .wk .l1 b{font-weight:400;font-size:13px}
.wrow .wk .q{font-size:12px;color:var(--gold);font-variant-numeric:tabular-nums}
.wrow .wk .l2{font-size:10px;color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wrow .wk .l2 em{font-style:normal;color:var(--dim);font-variant-numeric:tabular-nums}
.wrow .wv{text-align:right;font-variant-numeric:tabular-nums;line-height:1.3;white-space:nowrap}
.wrow .wv b{display:block;font-size:13px;font-weight:400}
.wrow .wv i{font-style:normal;font-size:10px}
#whEmpty{padding:16px 10px;text-align:center;font-size:11px;color:var(--dim2)}

/* ---------- 浮动提示 ---------- */
#toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);pointer-events:none;z-index:60;display:flex;flex-direction:column;align-items:center;gap:5px}
#toast div{background:#252d40;border:2px solid var(--line2);padding:5px 12px;font-size:12px;animation:tf 1.5s forwards}
@keyframes tf{0%{opacity:0;transform:translateY(8px)}12%{opacity:1;transform:translateY(0)}75%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}

/* ---------- 遮罩弹窗 ---------- */
#ov{position:fixed;inset:0;background:rgba(6,8,13,.86);display:none;align-items:center;justify-content:center;padding:18px;z-index:80}
#ov.show{display:flex}
#ovBox{background:var(--panel);border:2px solid var(--line2);box-shadow:0 10px 0 -4px #070910;max-width:520px;width:100%;max-height:88vh;overflow:auto}
#ovBox .oh{padding:11px 16px;background:var(--panel2);border-bottom:2px solid var(--line);font-size:14px;letter-spacing:.2em;color:var(--gold)}
#ovBox .ob{padding:14px 16px;font-size:12px;line-height:1.85;color:var(--dim)}
#ovBox .ob b{color:var(--tx);font-weight:400}
#ovBox .ob .k{color:var(--gold)}
#ovBox .ob ul{margin:6px 0 6px 16px}
#ovBox .ob li{margin:2px 0}
#ovBox .of{padding:0 16px 16px;display:flex;gap:8px;flex-wrap:wrap}
#ovBox .of button{
  font:inherit;font-size:12px;cursor:pointer;padding:7px 16px;
  background:var(--gold);border:2px solid var(--gold);color:#1a1408;
}
#ovBox .of button:hover{background:#ffd35c}
#ovBox .of button.alt{background:transparent;border-color:var(--line2);color:var(--tx)}
#ovBox .of button.alt:hover{background:#222a3c}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px}
.statline{display:flex;justify-content:space-between;border-bottom:1px solid #212a3c;padding:3px 0}
.statline span{color:var(--dim2)} .statline b{font-weight:400;color:var(--tx)}

/* ---------- 设置 ---------- */
/* 顶栏右上角的齿轮按钮，紧跟在目标进度条之后 */
#bSettings{
  flex:0 0 auto;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  font:inherit;font-size:14px;line-height:1;cursor:pointer;
  background:#1f2739;border:2px solid var(--line2);color:var(--gold);
  padding:0;
}
#bSettings:hover{background:#2c3852;border-color:#59688c}
#bSettings:active{transform:translateY(1px)}
#ovBox .menu{display:flex;flex-direction:column;gap:6px}
#ovBox .mitem{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  font:inherit;font-size:12px;color:var(--tx);
  background:#1f2739;border:2px solid var(--line2);padding:8px 11px;
}
#ovBox .mitem:hover{background:#2c3852;border-color:#59688c}
#ovBox .mitem:active{transform:translateY(1px)}
#ovBox .mitem .ic{width:15px;text-align:center;font-size:14px;color:var(--gold)}
#ovBox .mitem .tx{flex:1;min-width:0}
#ovBox .mitem .tx b{display:block;font-weight:400;color:var(--tx)}
#ovBox .mitem .tx s{display:block;text-decoration:none;font-size:10px;color:var(--dim2);line-height:1.5}
#ovBox .mitem .ar{color:var(--dim2)}

/* ---------- 全图行情表 ---------- */
.ph .mini{
  font:inherit;font-size:10px;letter-spacing:0;cursor:pointer;
  background:#1f2739;border:2px solid var(--line2);color:var(--tx);
  padding:2px 7px;
}
.ph .mini:hover{background:#2c3852;border-color:#59688c}
.ph .mini.lock{color:var(--dim2);border-color:var(--line)}
.ph #bBoard{margin-left:auto}
#ovBox .board{width:100%;border-collapse:collapse;font-size:11px;font-variant-numeric:tabular-nums}
#ovBox .board th,#ovBox .board td{border:1px solid #212a3c;padding:3px 4px;text-align:right;white-space:nowrap}
#ovBox .board th{text-align:center;font-weight:400;font-size:10px;color:var(--dim2)}
#ovBox .board th.cur{color:var(--gold)}
#ovBox .board td:first-child,#ovBox .board th:first-child{text-align:left}
#ovBox .board td.lo{color:var(--up)}
#ovBox .board td.hi{color:var(--gold)}
#ovBox .board td.cur{background:#1d2331}