:root{
  --bg:#f4f7fa;
  --surface:#ffffff;
  --surface-2:#f2f5f8;
  --line:rgba(23,43,64,.12);
  --line-2:rgba(23,43,64,.22);
  --text:#16222e;
  --text-2:#5d6b7a;
  --text-3:#8d99a6;
  --blue:#185FA5;
  --blue-bg:#E6F1FB;
  --amber:#BA7517;
  --amber-bg:#FAEEDA;
  --teal:#0F6E56;
  --teal-bg:#E1F5EE;
  --green:#3B6D11;
  --red:#A32D2D;
  --red-bg:#FCEBEB;
  --radius-s:8px;
  --radius:12px;
  --radius-l:16px;
  --sky-1:#7EC0F0;
  --sky-2:#DCEEFB;
}
body[data-weather="clear"]{--sky-1:#7EC0F0;--sky-2:#DFF0FC}
body[data-weather="cloudy"]{--sky-1:#9CC0DC;--sky-2:#E4EDF4}
body[data-weather="overcast"]{--sky-1:#9CAAB8;--sky-2:#D6DDE3}
body[data-weather="lightrain"]{--sky-1:#8397AB;--sky-2:#C4CFD9}
body[data-weather="shower"]{--sky-1:#68758C;--sky-2:#A3AEBD}
body[data-weather="frontal"]{--sky-1:#6E7F96;--sky-2:#ADB9C8}
body[data-weather="typhoon"]{--sky-1:#4C5870;--sky-2:#8B98AE}
body[data-weather="coldwave"]{--sky-1:#8AA4BC;--sky-2:#D8E4EC}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:14px;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p{margin:0}
h1{font-size:17px;font-weight:600;letter-spacing:.2px}
h2{font-size:14px;font-weight:600}
button{font-family:inherit}

.sky{position:fixed;inset:0;z-index:0;background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 100%);transition:background .8s ease}
.sky-deco{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:.55}
.sky-deco i{position:absolute;display:block;border-radius:50%;background:#fff;filter:blur(1px)}
.sky-deco i:nth-child(1){width:180px;height:56px;left:6%;top:8%;animation:drift 90s linear infinite}
.sky-deco i:nth-child(2){width:120px;height:40px;left:44%;top:14%;opacity:.7;animation:drift 130s linear infinite}
.sky-deco i:nth-child(3){width:220px;height:64px;left:72%;top:5%;opacity:.5;animation:drift 110s linear infinite}
@keyframes drift{from{transform:translateX(-12vw)}to{transform:translateX(112vw)}}
@media (prefers-reduced-motion:reduce){.sky-deco i{animation:none}}

.app{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:20px 20px 40px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:38px;height:38px;border-radius:10px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--blue)}
.logo svg{width:24px;height:24px}
.brand-text p{font-size:12px;color:var(--text-2)}
.topbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.modes{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.mode{border:0;background:transparent;color:var(--text-2);font-size:12.5px;padding:5px 12px;border-radius:999px;cursor:pointer;transition:.15s}
.mode:hover{color:var(--text)}
.mode.active{background:var(--blue-bg);color:var(--blue);font-weight:600}

.btn{border:1px solid var(--line-2);background:var(--surface);color:var(--text);font-size:12.5px;padding:6px 12px;border-radius:8px;cursor:pointer;transition:.15s}
.btn:hover{border-color:var(--line-2);background:var(--surface-2)}
.btn.ghost{background:var(--surface)}
.btn.link{border:0;background:transparent;color:var(--text-3);text-decoration:underline;padding:2px 4px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.weatherbar{margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.wb-left{display:flex;align-items:center;gap:10px}
.wb-icon{width:34px;height:34px;border-radius:9px;background:var(--blue-bg);color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none}
.wb-icon svg{width:22px;height:22px}
.wb-name{font-weight:600}
.wb-sub{font-size:12px;color:var(--text-2)}
.wb-mods{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px}
.wb-mods b{font-weight:600}
.up{color:var(--red)}
.down{color:var(--green)}
.flat{color:var(--text-3)}

.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.metric .lb{font-size:12px;color:var(--text-2);display:flex;align-items:center;gap:5px}
.metric .vl{font-size:22px;font-weight:600;margin-top:2px;letter-spacing:-.3px}
.metric .rt{font-size:12px;color:var(--text-3);margin-top:1px}

.board{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;align-items:start}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.head-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tier-tabs,.buy-tabs{display:flex;gap:4px}
.tab{border:1px solid var(--line);background:transparent;color:var(--text-2);font-size:12px;padding:3px 9px;border-radius:7px;cursor:pointer}
.tab.active{background:var(--blue-bg);color:var(--blue);border-color:transparent;font-weight:600}

.facility-list{display:flex;flex-direction:column}
.fac{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.fac:first-child{border-top:0}
.fac-ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--text-2)}
.fac-ico svg{width:22px;height:22px}
.fac.t1 .fac-ico{background:var(--blue-bg);color:var(--blue)}
.fac.t2 .fac-ico{background:#DCEBFA;color:var(--blue)}
.fac.t3 .fac-ico{background:#C9DDF3;color:#0C447C}
.fac.t4 .fac-ico{background:var(--amber-bg);color:var(--amber)}
.fac-name{font-weight:600;display:flex;align-items:center;gap:6px}
.fac-name .lv{font-size:12px;font-weight:600;color:var(--blue);background:var(--blue-bg);padding:0 6px;border-radius:6px}
.fac-desc{font-size:12px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.fac-right{display:flex;align-items:center;gap:10px}
.fac-rate{font-size:12px;color:var(--text-2);text-align:right;min-width:74px}
.fac-rate b{display:block;font-size:12.5px;color:var(--text);font-weight:600}
.btn-buy{min-width:96px;text-align:center;border:1px solid var(--blue);background:var(--blue);color:#fff;font-size:12.5px;padding:6px 10px;border-radius:8px;cursor:pointer;font-weight:600}
.btn-buy:hover{opacity:.9}
.btn-buy:disabled{background:var(--surface-2);border-color:var(--line);color:var(--text-3);cursor:not-allowed}
.btn-buy.locked{background:var(--amber-bg);border-color:transparent;color:var(--amber)}
.fac.locked .fac-ico{filter:grayscale(.5);opacity:.7}

.side{display:flex;flex-direction:column;gap:14px}
.skyview{padding:0;overflow:hidden;position:relative;height:170px;background:linear-gradient(180deg,var(--sky-1),var(--sky-2));transition:background .8s ease}
.skyview svg{position:absolute;inset:0;width:100%;height:100%}
.skyview .cap{position:absolute;left:12px;bottom:10px;font-size:12px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.skyview .prog{position:absolute;left:12px;right:12px;top:12px;height:3px;border-radius:2px;background:rgba(255,255,255,.45);overflow:hidden}
.skyview .prog i{display:block;height:100%;background:#fff;border-radius:2px;transition:width .3s}

.event-text{font-size:12.5px;color:var(--text-2);margin:6px 0 10px}
.event-choices{display:flex;flex-direction:column;gap:7px}
.choice{border:1px solid var(--line-2);background:var(--surface);border-radius:9px;padding:9px 11px;text-align:left;cursor:pointer;transition:.15s}
.choice:hover{border-color:var(--blue);background:var(--blue-bg)}
.choice .cl{font-weight:600;font-size:12.5px}
.choice .ch{font-size:12px;color:var(--text-2);margin-top:1px}
.event-empty{font-size:12.5px;color:var(--text-3);padding:6px 0}
.event-wait{font-size:12px;color:var(--text-3);margin-top:8px}

.log-list{list-style:none;margin:0;padding:0;max-height:190px;overflow-y:auto}
.log-list li{font-size:12.5px;color:var(--text-2);padding:5px 0;border-top:1px solid var(--line);display:flex;gap:8px}
.log-list li:first-child{border-top:0}
.log-list time{color:var(--text-3);font-variant-numeric:tabular-nums;flex:none}

.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;font-size:12px;color:var(--text-3)}

.modal-mask{position:fixed;inset:0;z-index:50;background:rgba(16,26,38,.42);display:flex;align-items:center;justify-content:center;padding:20px}
.modal-mask[hidden]{display:none}
.modal{background:var(--surface);border-radius:var(--radius-l);max-width:620px;width:100%;max-height:84vh;overflow-y:auto;padding:24px 26px;position:relative}
.modal-close{position:absolute;right:12px;top:10px;border:0;background:transparent;font-size:22px;line-height:1;color:var(--text-3);cursor:pointer;padding:4px 8px;border-radius:8px}
.modal-close:hover{background:var(--surface-2);color:var(--text)}
.k-tag{display:inline-block;font-size:11.5px;padding:2px 8px;border-radius:999px;background:var(--blue-bg);color:var(--blue);margin-bottom:8px}
.k-short{font-size:15px;font-weight:600;margin-bottom:10px}
.k-body p{font-size:13.5px;color:var(--text-2);margin-bottom:9px}
.k-body p b{color:var(--text);font-weight:600}
.k-note{background:var(--amber-bg);border-radius:var(--radius-s);padding:9px 12px;font-size:12.5px;color:#633806;margin-top:4px}
.k-foot{font-size:12px;color:var(--text-3);margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.codex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.codex-item{border:1px solid var(--line);border-radius:var(--radius-s);padding:10px;cursor:pointer;background:var(--surface);text-align:left}
.codex-item:hover{border-color:var(--blue)}
.codex-item .cn{font-weight:600;font-size:13px}
.codex-item .cd{font-size:11.5px;color:var(--text-3);margin-top:2px}
.codex-item.locked{opacity:.45;cursor:default;background:var(--surface-2)}
.codex-item.locked:hover{border-color:var(--line)}
.sec-title{font-size:13px;font-weight:600;margin:18px 0 0}
.mode-hint{font-size:12.5px;color:var(--text-2);background:var(--surface-2);border-radius:var(--radius-s);padding:9px 12px;margin-bottom:6px}
.big-num{font-size:30px;font-weight:600;letter-spacing:-.5px}
.stat-row{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-top:1px solid var(--line)}
.stat-row:first-of-type{border-top:0}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.btn.primary:hover{opacity:.92}

.toasts{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toast{background:#16222e;color:#fff;font-size:12.5px;padding:9px 14px;border-radius:9px;animation:pop .2s ease}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (max-width:920px){
  .board{grid-template-columns:1fr}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fac{grid-template-columns:34px minmax(0,1fr);grid-template-areas:"ico info" ". right"}
  .fac-ico{grid-area:ico}
  .fac-info{grid-area:info}
  .fac-right{grid-area:right;justify-content:flex-start}
}