/* ============================================================
   末日房车：尸海行商 —— 统一界面规范
   布局：顶栏(日/时段/阶段+资源) · 左主视区 · 右侧栏(房车/船员/声望) · 底部日志
   视觉：炭黑 #12141a / 琥珀 #e8a33d / 势力标识色 / 车载终端质感
   ============================================================ */
:root{
  --bg:#101318; --bg2:#161a22; --panel:#1a1f2a; --panel2:#20263336;
  --line:#2c3444; --line2:#3a4356;
  --ink:#cfd6e4; --ink-dim:#8b94a8; --ink-faint:#5d6678;
  --amber:#e8a33d; --amber-dim:#a97726; --amber-bg:rgba(232,163,61,.08);
  --red:#d4574e; --green:#6fae6a; --blue:#5b8db8; --purple:#9a7fc0;
  --warn-bg:rgba(212,87,78,.1); --ok-bg:rgba(111,174,106,.1);
  --mono:"Consolas","JetBrains Mono",ui-monospace,monospace;
  --sans:"Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;
  --f-police:#5b8db8; --f-watch:#6fae6a; --f-militia:#c46a4a; --f-church:#c9a96a;
  --f-syndicate:#9a7fc0; --f-guard:#6a8f6a; --f-hall:#d4b054;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55;overflow:hidden}
#app{height:100vh;display:flex;flex-direction:column}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
button:disabled{cursor:not-allowed;opacity:.4}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#2c3444;border-radius:5px}
::-webkit-scrollbar-track{background:transparent}
.num{font-family:var(--mono)}

/* ---------- 启动屏 / 标题屏 ---------- */
.boot-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%, #1a2030 0%, #101318 65%);z-index:50}
.boot-inner{text-align:center}
.boot-rv{width:200px;filter:drop-shadow(0 6px 24px rgba(232,163,61,.25))}
.boot-title{font-size:52px;letter-spacing:14px;margin:18px 0 4px;color:var(--ink);text-shadow:0 0 30px rgba(232,163,61,.35)}
.boot-sub{font-size:17px;letter-spacing:8px;color:var(--amber)}
.boot-en{font-size:11px;letter-spacing:3px;color:var(--ink-faint)}
.boot-loading{margin-top:46px;color:var(--ink-faint);font-size:12px;letter-spacing:2px;animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.35}}

.title-screen{display:flex;flex-direction:column;height:100%;background:linear-gradient(180deg,#131722 0%,#101318 100%);overflow:auto}
.title-head{padding:44px 0 10px;text-align:center}
.title-head h1{font-size:40px;letter-spacing:12px}
.title-tagline{color:var(--ink-dim);font-size:13px;letter-spacing:2px;margin-top:6px}
.title-body{flex:1;display:flex;gap:22px;justify-content:center;align-items:stretch;padding:24px 4vw;flex-wrap:wrap}
.title-menu{display:flex;flex-direction:column;gap:12px;min-width:250px;justify-content:center}
.menu-btn{border:1px solid var(--line);background:var(--panel);padding:14px 22px;font-size:15px;letter-spacing:3px;text-align:left;transition:.15s;position:relative}
.menu-btn:hover{border-color:var(--amber);color:var(--amber);background:var(--amber-bg)}
.menu-btn small{display:block;font-size:11px;color:var(--ink-faint);letter-spacing:1px;margin-top:2px}
.menu-btn.primary{border-color:var(--amber-dim);color:var(--amber)}
.title-side{max-width:430px;background:var(--panel);border:1px solid var(--line);padding:20px 24px;overflow:auto}
.title-side h3{color:var(--amber);font-size:13px;letter-spacing:3px;margin-bottom:10px;border-bottom:1px dashed var(--line2);padding-bottom:8px}
.title-side p{color:var(--ink-dim);font-size:12.5px;margin-bottom:8px}
.title-foot{text-align:center;color:var(--ink-faint);font-size:11px;padding:14px;letter-spacing:2px}
.meta-stats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.meta-chip{border:1px solid var(--line2);padding:3px 9px;font-size:11px;color:var(--ink-dim);border-radius:2px}
.meta-chip b{color:var(--amber)}

/* ---------- 车卡屏 ---------- */
.card-screen{display:flex;flex-direction:column;height:100%;background:#101318;overflow:auto}
.card-screen-head{text-align:center;padding:26px 0 6px}
.card-screen-head h2{font-size:22px;letter-spacing:6px;color:var(--amber)}
.card-screen-head p{color:var(--ink-faint);font-size:12px;margin-top:4px;letter-spacing:1px}
.vehicle-row{display:flex;gap:20px;justify-content:center;padding:26px 4vw;flex-wrap:wrap}
.vehicle-card{width:290px;background:var(--panel);border:1px solid var(--line);padding:18px;position:relative;transition:.15s;text-align:left}
.vehicle-card:not(.locked):hover{border-color:var(--amber);transform:translateY(-3px)}
.vehicle-card.locked{opacity:.55;filter:grayscale(.5)}
.vehicle-card .v-name{font-size:17px;color:var(--amber);letter-spacing:2px}
.vehicle-card .v-en{font-size:10px;color:var(--ink-faint);letter-spacing:2px}
.vehicle-card svg{width:100%;height:110px;margin:10px 0}
.v-stats{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;font-size:12px;color:var(--ink-dim);margin:8px 0}
.v-stats b{color:var(--ink)}
.v-desc{font-size:12px;color:var(--ink-dim);border-top:1px dashed var(--line2);padding-top:8px;min-height:52px}
.v-lock{position:absolute;top:12px;right:12px;font-size:10px;color:var(--ink-faint);border:1px solid var(--line2);padding:2px 7px;letter-spacing:1px}
.v-pick{margin-top:10px;width:100%;border:1px solid var(--amber-dim);color:var(--amber);padding:9px;letter-spacing:4px;background:var(--amber-bg)}
.v-pick:hover{background:var(--amber);color:#12141a}
.card-screen-foot{text-align:center;padding:8px 0 22px}
.link-btn{color:var(--ink-dim);font-size:12px;letter-spacing:2px;border-bottom:1px dashed var(--line2);padding-bottom:2px}
.link-btn:hover{color:var(--amber)}

/* ---------- 主界面框架 ---------- */
.main-screen{display:flex;flex-direction:column;height:100%}
.topbar{display:flex;align-items:center;gap:14px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.topbar .tb-day{display:flex;align-items:baseline;gap:8px}
.tb-day .d{font-size:18px;color:var(--amber);letter-spacing:1px}
.tb-day .slot{font-size:12px;color:var(--ink-dim)}
.phase-chip{font-size:11px;padding:2px 9px;border:1px solid;letter-spacing:2px}
.phase-chip.p1{color:var(--blue);border-color:var(--blue)}
.phase-chip.p2{color:var(--amber);border-color:var(--amber)}
.phase-chip.p3{color:var(--red);border-color:var(--red)}
.tb-res{display:flex;gap:5px;flex-wrap:wrap;margin-left:auto}
.res-chip{display:flex;align-items:center;gap:5px;background:var(--bg2);border:1px solid var(--line);padding:3px 8px;font-size:12px}
.res-chip .ico{font-size:13px}
.res-chip.low{color:var(--red);border-color:var(--red)}
.res-chip b{font-family:var(--mono)}
.tb-radio{border:1px solid var(--line2);padding:4px 10px;font-size:12px;color:var(--ink-dim)}
.tb-radio:hover{color:var(--amber);border-color:var(--amber)}
.tb-radio .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:5px;animation:pulse 1s infinite}

.main-body{flex:1;display:flex;min-height:0}
.view-area{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.sidebar{width:272px;border-left:1px solid var(--line);background:var(--bg2);overflow-y:auto;padding:12px;flex-shrink:0}
.bottombar{border-top:1px solid var(--line);background:var(--panel);height:158px;display:flex}
.action-bar{width:340px;border-right:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;flex-shrink:0}
.log-area{flex:1;overflow-y:auto;padding:8px 14px;font-size:12.5px}

/* ---------- 动作按钮 ---------- */
.act-btn{border:1px solid var(--line2);background:var(--bg2);padding:8px 12px;text-align:left;font-size:13px;transition:.12s;display:flex;justify-content:space-between;align-items:center;gap:8px}
.act-btn:hover:not(:disabled){border-color:var(--amber);color:var(--amber)}
.act-btn .cost{font-size:11px;color:var(--ink-faint);font-family:var(--mono);white-space:nowrap}
.act-btn.primary{border-color:var(--amber-dim);color:var(--amber)}
.act-btn.danger{border-color:#6a3a38;color:#d47f78}
.act-btn.danger:hover:not(:disabled){border-color:var(--red);color:var(--red)}
.act-title{color:var(--amber);font-size:11px;letter-spacing:3px;margin:6px 0 2px;opacity:.85}

/* ---------- 侧栏组件 ---------- */
.sb-block{border:1px solid var(--line);background:var(--panel);padding:10px 12px;margin-bottom:10px}
.sb-title{font-size:11px;letter-spacing:3px;color:var(--amber);margin-bottom:8px;display:flex;justify-content:space-between}
.sb-title small{color:var(--ink-faint);letter-spacing:1px}
.res-line{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-dim);padding:2px 0}
.res-line b{font-family:var(--mono);color:var(--ink)}
.bar{height:7px;background:#0d1015;border:1px solid var(--line);position:relative;margin:3px 0 7px}
.bar>i{display:block;height:100%;background:var(--amber);transition:width .3s}
.bar>i.low{background:var(--red)}
.crew-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:3px 0;border-bottom:1px dashed #232a38}
.crew-row:last-child{border-bottom:none}
.crew-hp{font-family:var(--mono);color:var(--ink-dim);font-size:11px}
.crew-hp.hurt{color:var(--red)}
.rep-row{display:flex;align-items:center;gap:7px;font-size:11.5px;padding:2px 0}
.rep-name{width:74px;color:var(--ink-dim);white-space:nowrap}
.rep-bar{flex:1;height:6px;background:#0d1015;border:1px solid var(--line);position:relative}
.rep-bar>i{position:absolute;top:0;bottom:0}
.rep-val{font-family:var(--mono);width:26px;text-align:right}
.q-mini{font-size:11.5px;color:var(--ink-dim);padding:4px 0;border-bottom:1px dashed #232a38}
.q-mini b{color:var(--ink);font-weight:normal}
.q-mini .dl{color:var(--red);font-size:10.5px}
.intel-row{font-size:11px;color:var(--ink-dim);padding:3px 0;border-bottom:1px dashed #232a38}
.intel-row::before{content:"▸ ";color:var(--amber)}

/* ---------- 地图 ---------- */
.map-wrap{flex:1;position:relative;background:radial-gradient(ellipse at 50% 45%,#171c26 0%,#101318 70%);overflow:hidden}
.map-svg{width:100%;height:100%;display:block}
.road-line{stroke:#3a4356;stroke-width:2.5;stroke-dasharray:none;cursor:pointer}
.road-line:hover{stroke:var(--amber)}
.road-line.blocked{stroke:#4a2c2c;stroke-dasharray:5 6}
.road-line.rough{stroke-dasharray:2 5}
.road-label{fill:#6d7688;font-size:2.3px;pointer-events:none;paint-order:stroke;stroke:#101318;stroke-width:.45}
.d-node{cursor:pointer}
.d-node circle.core{fill:#1e2430;stroke:#3a4356;stroke-width:.5;transition:.15s}
.d-node:hover circle.core{stroke:var(--amber)}
.d-node.here circle.core{stroke:var(--amber);stroke-width:.9}
.d-node text.dn{fill:var(--ink);font-size:4.4px;font-weight:bold;text-anchor:middle;paint-order:stroke;stroke:#101318;stroke-width:.7}
.d-node text.den{fill:#6d7688;font-size:2.2px;text-anchor:middle;letter-spacing:.3px}
.horde-band{fill:rgba(212,87,78,.13)}
.map-hud{position:absolute;top:10px;left:12px;right:12px;display:flex;justify-content:space-between;pointer-events:none}
.map-tip{background:rgba(16,19,24,.88);border:1px solid var(--line);padding:8px 12px;font-size:12px;color:var(--ink-dim);max-width:330px;pointer-events:auto}
.map-tip b{color:var(--amber)}
.map-legend{font-size:10.5px;color:var(--ink-faint);background:rgba(16,19,24,.8);border:1px solid var(--line);padding:4px 9px;max-width:250px;text-align:right;align-self:flex-end}
.dest-panel{position:absolute;bottom:10px;right:12px;width:330px;background:rgba(20,24,32,.96);border:1px solid var(--amber-dim);padding:14px}
.dest-panel h4{color:var(--amber);font-size:14px;margin-bottom:4px}
.dest-panel .desc{font-size:12px;color:var(--ink-dim);margin-bottom:8px;max-height:100px;overflow-y:auto}
.dest-panel .roadinfo{font-size:11.5px;color:var(--ink-faint);font-family:var(--mono);margin-bottom:10px}
.dest-panel .warn{color:var(--red);font-size:12px;margin-bottom:8px}

/* ---------- 大区/驻点视图 ---------- */
.loc-view{flex:1;overflow-y:auto;padding:20px 26px}
.loc-head{display:flex;align-items:baseline;gap:14px;margin-bottom:4px}
.loc-head h2{font-size:24px;letter-spacing:4px}
.loc-head .en{color:var(--ink-faint);font-size:12px;letter-spacing:2px}
.loc-faction{font-size:12px;padding:2px 10px;border:1px solid;letter-spacing:2px}
.loc-vibe{color:var(--ink-dim);font-size:13px;margin:8px 0 16px;max-width:760px;font-style:italic}
.poi-grid{display:flex;flex-wrap:wrap;gap:12px;max-width:960px}
.poi-card{width:300px;background:var(--panel);border:1px solid var(--line);padding:13px 15px;text-align:left;transition:.13s;position:relative}
.poi-card:hover{border-color:var(--amber);transform:translateY(-2px)}
.poi-card.current{border-color:var(--amber);background:var(--amber-bg)}
.poi-card .p-name{font-size:15px;color:var(--ink)}
.poi-card .p-type{font-size:10px;color:var(--ink-faint);letter-spacing:2px;margin:1px 0 6px}
.poi-card .p-desc{font-size:12px;color:var(--ink-dim)}
.poi-card .p-svcs{margin-top:8px;display:flex;gap:5px;flex-wrap:wrap}
.svc-tag{font-size:10px;border:1px solid var(--line2);color:var(--ink-dim);padding:1px 6px}
.poi-card .p-goto{position:absolute;top:10px;right:12px;font-size:11px;color:var(--amber);opacity:0;transition:.13s}
.poi-card:hover .p-goto{opacity:1}
.back-strip{font-size:12px;color:var(--ink-faint);margin-bottom:12px}
.back-strip a{color:var(--amber);cursor:pointer;text-decoration:none;border-bottom:1px dashed var(--amber-dim)}

/* ---------- 模态 ---------- */
.modal-mask{position:fixed;inset:0;background:rgba(8,10,14,.78);display:flex;align-items:center;justify-content:center;z-index:30;animation:fadein .18s}
@keyframes fadein{from{opacity:0}}
.modal{width:min(720px,92vw);max-height:88vh;background:var(--panel);border:1px solid var(--line2);display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:slideup .22s}
@keyframes slideup{from{transform:translateY(16px);opacity:0}}
.modal-head{padding:13px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.modal-head h3{font-size:16px;letter-spacing:3px;color:var(--amber)}
.modal-head .m-tag{font-size:10px;color:var(--ink-faint);letter-spacing:2px;border:1px solid var(--line2);padding:2px 8px}
.modal-body{padding:16px 20px;overflow-y:auto;flex:1}
.modal-foot{padding:10px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}
.x-btn{color:var(--ink-faint);font-size:16px;padding:0 4px}
.x-btn:hover{color:var(--red)}

/* 事件卡 */
.ev-intro{font-size:13.5px;color:var(--ink);background:var(--bg2);border-left:3px solid var(--amber);padding:12px 15px;margin-bottom:14px;line-height:1.7}
.ev-opt{display:block;width:100%;text-align:left;border:1px solid var(--line2);background:var(--bg2);padding:10px 14px;margin-bottom:8px;transition:.12s}
.ev-opt:hover:not(:disabled){border-color:var(--amber);background:var(--amber-bg)}
.ev-opt .o-label{font-size:13.5px}
.ev-opt .o-req{font-size:11px;color:var(--ink-faint);margin-top:2px;font-family:var(--mono)}
.ev-opt .o-req.bad{color:var(--red)}
.ev-result{font-size:13.5px;background:var(--warn-bg);border-left:3px solid var(--red);padding:12px 15px;line-height:1.7;white-space:pre-wrap}
.ev-result.good{background:var(--ok-bg);border-left-color:var(--green)}
.ev-delta{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.delta-chip{font-size:11px;font-family:var(--mono);border:1px solid var(--line2);padding:2px 8px;color:var(--ink-dim)}
.delta-chip.neg{color:var(--red);border-color:#5a3030}
.delta-chip.pos{color:var(--green);border-color:#2e4a2c}

/* 序章场景 */
.prologue-screen{position:fixed;inset:0;background:#0c0e13;display:flex;flex-direction:column;align-items:center;overflow-y:auto;z-index:40;padding:40px 16px}
.pro-card{width:min(760px,94vw)}
.pro-scene{font-size:11px;letter-spacing:3px;color:var(--amber);border-left:3px solid var(--amber);padding-left:10px;margin-bottom:14px}
.pro-art{border:1px solid var(--line);background:linear-gradient(180deg,#171c26,#12141a);padding:26px;text-align:center;margin-bottom:14px}
.pro-art .art{font-size:44px;line-height:1;letter-spacing:6px;filter:drop-shadow(0 0 18px rgba(232,163,61,.2))}
.pro-art .cap{color:var(--ink-faint);font-size:11px;margin-top:10px;letter-spacing:1px}
.pro-narr{font-size:14px;line-height:1.9;color:var(--ink);margin-bottom:18px;white-space:pre-wrap}
.pro-narr::before{content:"“";color:var(--amber-dim);font-size:20px}
.pro-narr::after{content:"”";color:var(--amber-dim);font-size:20px}
.pro-tut{font-size:11px;color:var(--ink-faint);border:1px dashed var(--line2);padding:6px 12px;margin-bottom:14px}

/* 交易面板 */
.trade-wrap{display:flex;gap:14px;align-items:flex-start}
.trade-list{flex:1;min-width:0}
.trade-head,.trade-row{display:grid;grid-template-columns:1fr 64px 84px 84px;gap:6px;align-items:center}
.trade-head{font-size:10.5px;color:var(--ink-faint);letter-spacing:1px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.trade-row{padding:6px 0;border-bottom:1px dashed #232a38;font-size:12.5px}
.trade-row .t-name{color:var(--ink)}
.trade-row .t-name small{display:block;color:var(--ink-faint);font-size:10px}
.trade-row .t-price{font-family:var(--mono);text-align:right}
.trade-row .t-price.up{color:var(--red)}
.trade-row .t-price.down{color:var(--green)}
.t-btn{border:1px solid var(--line2);padding:3px 8px;font-size:11px;color:var(--ink-dim)}
.t-btn:hover:not(:disabled){border-color:var(--amber);color:var(--amber)}
.trade-side{width:210px;flex-shrink:0;background:var(--bg2);border:1px solid var(--line);padding:12px;font-size:12px}
.trade-side .trend{color:var(--ink-faint);font-size:11px;margin-top:8px;line-height:1.6}

/* 委托板 */
.quest-card{border:1px solid var(--line2);background:var(--bg2);padding:12px 14px;margin-bottom:10px}
.quest-card h4{font-size:14px;color:var(--ink);display:flex;justify-content:space-between}
.quest-card h4 .q-type{font-size:10px;color:var(--amber);letter-spacing:2px;border:1px solid var(--amber-dim);padding:1px 7px}
.quest-card .q-desc{font-size:12.5px;color:var(--ink-dim);margin:6px 0}
.quest-card .q-need{font-size:12px;color:var(--ink-faint);font-family:var(--mono)}
.quest-card .q-reward{font-size:12px;color:var(--green);margin:6px 0}
.quest-card .q-offer{font-size:12px;color:var(--ink-dim);font-style:italic;border-left:2px solid var(--line2);padding-left:10px;margin:8px 0}
.quest-card .q-dl{font-size:11px;color:var(--amber)}

/* 车库/改装 */
.mod-row{display:flex;align-items:center;gap:10px;border-bottom:1px dashed #232a38;padding:9px 0}
.mod-row .m-info{flex:1}
.mod-row .m-name{font-size:13.5px}
.mod-row .m-eff{font-size:11px;color:var(--ink-faint)}
.mod-pips{display:flex;gap:3px}
.pip{width:14px;height:8px;border:1px solid var(--line2);background:#0d1015}
.pip.on{background:var(--amber);border-color:var(--amber)}
.mod-row .m-cost{font-size:11px;font-family:var(--mono);color:var(--ink-dim);width:150px;text-align:right}

/* 结局屏 */
.ending-screen{position:fixed;inset:0;background:radial-gradient(ellipse at 50% 30%,#1a2030,#0c0e13 70%);display:flex;align-items:center;justify-content:center;overflow-y:auto;z-index:45;padding:30px 16px}
.ending-card{width:min(700px,94vw);text-align:center;padding:30px 10px}
.ending-title{font-size:34px;letter-spacing:8px;margin-bottom:6px}
.ending-en{font-size:13px;color:var(--ink-faint);letter-spacing:5px;margin-bottom:26px}
.ending-quote{font-size:14.5px;line-height:2;color:var(--ink);text-align:left;background:var(--bg2);border:1px solid var(--line);padding:22px 26px;margin-bottom:20px;position:relative}
.ending-quote::before{content:"“";position:absolute;top:2px;left:8px;font-size:30px;color:var(--amber-dim)}
.ending-notes{text-align:left;margin-bottom:22px}
.ending-notes div{font-size:12.5px;color:var(--ink-dim);padding:5px 0;border-bottom:1px dashed #232a38}
.ending-notes div::before{content:"— "}
.ending-stats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.ending-foot{display:flex;gap:12px;justify-content:center}

/* 日志 */
.log-line{padding:2.5px 0;border-bottom:1px dashed #1d2330;color:var(--ink-dim)}
.log-line.sys{color:var(--amber);opacity:.9}
.log-line.bad{color:#cf7a72}
.log-line.good{color:#8fbe89}
.log-day{color:var(--ink-faint);font-size:10px;font-family:var(--mono);margin-right:6px}

/* 广播屏 */
.radio-modal .b-item{border:1px solid var(--line2);background:var(--bg2);padding:12px 15px;margin-bottom:10px}
.radio-modal .b-item .b-title{color:var(--amber);font-size:13px;letter-spacing:2px}
.radio-modal .b-item .b-meta{font-size:10px;color:var(--ink-faint);letter-spacing:1px;margin:2px 0 8px}
.radio-modal .b-item .b-text{font-size:13px;color:var(--ink);line-height:1.8;white-space:pre-wrap}
.radio-static{font-size:11px;color:var(--ink-faint);text-align:center;letter-spacing:4px;padding:20px 0;animation:pulse 1.2s infinite}

/* toast */
.toast{position:fixed;top:56px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--amber-dim);color:var(--amber);padding:9px 22px;font-size:13px;z-index:60;box-shadow:0 8px 30px rgba(0,0,0,.5);animation:slideup .2s}

/* 响应式 */
@media (max-width:1080px){
  .sidebar{width:225px}
  .action-bar{width:290px}
  .bottombar{height:190px}
}