:root{
  color-scheme:dark;
  --bg:#101419;
  --panel:#18212d;
  --panel2:#1d2734;
  --border:#2a3848;
  --text:#f2f6fb;
  --muted:#9aabbe;
  --accent:#5aa7ff;
  --accent2:#317fd7;
  --success:#51d49b;
  --warning:#f3b65a;
  --danger:#ff737f;
  --shadow:0 12px 34px rgba(0,0,0,.22);
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(circle at 20% 0%,rgba(49,127,215,.12),transparent 32rem),
    var(--bg);
  font:15px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif
}
button,input,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
.shell{width:min(1020px,100%);margin:0 auto;padding:32px 18px 54px}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}
.brand-kicker,.section-label{display:block;margin:0 0 4px;color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.08em}
h1{margin:0;font-size:clamp(32px,5vw,48px);letter-spacing:-.04em}
h2{margin:0;font-size:21px}
h3{margin:0 0 9px;font-size:14px;color:var(--muted)}
.subtitle{margin:7px 0 0;color:var(--muted)}
.notice{display:grid;gap:4px;margin-bottom:18px;padding:13px 15px;border:1px solid rgba(243,182,90,.26);border-left:4px solid var(--warning);border-radius:12px;background:rgba(243,182,90,.075)}
.notice span{color:#c9d4e0}
.card{padding:19px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,var(--panel),#161e29);box-shadow:var(--shadow);margin-bottom:16px}
.login-card{max-width:520px;margin:34px auto 0}
.card-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.field{display:grid;gap:7px;margin:8px 0 12px;color:var(--muted)}
input,textarea{width:100%;padding:12px 13px;border:1px solid var(--border);border-radius:10px;outline:none;color:var(--text);background:#111821}
input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(90,167,255,.12)}
textarea{resize:vertical}
.btn{min-height:44px;padding:10px 15px;border-radius:10px;border:1px solid transparent;font-weight:750}
.primary{width:100%;color:#fff;background:linear-gradient(180deg,var(--accent),var(--accent2))}
.secondary{color:var(--text);border-color:#35485e;background:#243247}
.ghost{color:var(--muted);border-color:var(--border);background:transparent}
.compact{width:auto;min-width:92px}
.error{min-height:22px;margin:8px 0 0;color:var(--danger)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 16px}
.status-cluster,.actions{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;min-height:32px;padding:5px 10px;border:1px solid var(--border);border-radius:999px;font-size:13px;font-weight:750;white-space:nowrap}
.good{color:#aaf1d1;background:rgba(81,212,155,.09);border-color:rgba(81,212,155,.28)}
.warning{color:#ffdca7;background:rgba(243,182,90,.09);border-color:rgba(243,182,90,.28)}
.bad{color:#ffbcc2;background:rgba(255,115,127,.09);border-color:rgba(255,115,127,.28)}
.muted{color:var(--muted);background:rgba(154,171,190,.06)}
.offline-banner{display:flex;align-items:center;gap:13px;margin-bottom:16px;padding:15px 16px;border:1px solid rgba(255,115,127,.30);border-radius:14px;background:linear-gradient(180deg,rgba(255,115,127,.09),rgba(255,115,127,.04))}
.offline-banner p{margin:3px 0 0;color:#e0b7bc}
.offline-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;border-radius:50%;color:#fff;font-weight:900;background:#a33d4b}
.grid{display:grid;gap:16px;margin-bottom:0}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.primary-status{display:flex;align-items:end;justify-content:space-between;gap:14px;padding:14px 0 16px;border-bottom:1px solid rgba(154,171,190,.13)}
.primary-status span{color:var(--muted)}
.primary-status strong{font-size:26px}
.info-list,.health-list{display:grid}
.info-list>div,.health-list>div{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:11px 0;border-bottom:1px solid rgba(154,171,190,.11)}
.info-list>div:last-child,.health-list>div:last-child{border-bottom:0}
.info-list span,.health-list span{color:var(--muted)}
.info-list strong,.health-list strong{text-align:right}
.status-dot,.timeline-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.good-dot{background:var(--success);box-shadow:0 0 0 5px rgba(81,212,155,.10)}
.bad-dot{background:var(--danger);box-shadow:0 0 0 5px rgba(255,115,127,.10)}
.muted-dot{background:#657589;box-shadow:0 0 0 5px rgba(101,117,137,.10)}
.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.metric{min-height:92px;padding:13px;border:1px solid rgba(154,171,190,.13);border-radius:12px;background:rgba(255,255,255,.025)}
.metric span{display:block;color:var(--muted);font-size:13px}
.metric strong{display:block;margin-top:8px;font-size:18px;word-break:break-word}
.timeline{display:grid}
.timeline-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid rgba(154,171,190,.11)}
.timeline-item:last-child{border-bottom:0}
.timeline-item strong{display:block}
.timeline-item small{display:block;color:var(--muted);margin-top:2px}
.timeline-item time{color:var(--muted);font-size:13px;text-align:right}
.chat-window{border:1px solid #33475e;border-radius:14px;overflow:hidden;background:#101720}
.chat-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid rgba(154,171,190,.12);background:#151e29}
.chat-header strong{display:block}
.chat-header span{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.chat-lock{padding:4px 8px;border:1px solid var(--border);border-radius:999px}
.chat-messages{display:grid;place-items:center;min-height:260px;padding:20px}
.chat-empty{text-align:center}
.chat-icon{font-size:30px;margin-bottom:8px}
.chat-empty p{max-width:620px;margin:6px auto 0;color:var(--muted)}
.composer{display:flex;gap:10px;align-items:flex-end;padding:12px;border-top:1px solid rgba(154,171,190,.12);background:#151e29}
.chat-progress{margin-top:12px;border:1px solid rgba(154,171,190,.12);border-radius:12px;padding:11px 13px;background:rgba(255,255,255,.02)}
.chat-progress summary{cursor:pointer;font-weight:750;color:#c5d1df}
.roadmap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:12px}
.road{display:flex;align-items:flex-start;gap:9px;padding:11px;border:1px solid rgba(154,171,190,.12);border-radius:11px;background:rgba(255,255,255,.02)}
.road>span{display:grid;place-items:center;width:24px;height:24px;flex:0 0 auto;border-radius:50%;font-size:12px;font-weight:900}
.road.done>span{color:#092218;background:var(--success)}
.road.todo>span{color:#16110a;background:var(--warning)}
.road strong{display:block;font-size:13px}
.road small{display:block;margin-top:2px;color:var(--muted)}
.good-text{color:var(--success)}
.bad-text{color:var(--danger)}
.warning-text{color:var(--warning)}
.muted-text{color:var(--muted)}
.advanced summary{cursor:pointer;font-weight:800;color:#c1cede}
.advanced-note{margin:8px 0 0;color:var(--muted)}
.tech-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.tech-summary>div{display:flex;justify-content:space-between;gap:12px;padding:11px;border:1px solid rgba(154,171,190,.12);border-radius:10px;background:rgba(255,255,255,.02)}
.tech-summary span{color:var(--muted)}
.advanced-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.advanced-grid .full{grid-column:1/-1}
pre{margin:0;max-height:300px;overflow:auto;padding:12px;border:1px solid rgba(154,171,190,.12);border-radius:10px;background:#0d131b;color:#c8d4e3;white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}
@media(max-width:860px){.roadmap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.shell{padding:21px 13px 40px}.topbar,.toolbar{flex-direction:column;align-items:stretch}.grid.two,.advanced-grid,.tech-summary{grid-template-columns:1fr}.advanced-grid .full{grid-column:auto}.actions>button{flex:1}.timeline-item{grid-template-columns:auto 1fr}.timeline-item time{grid-column:2;text-align:left}}
@media(max-width:500px){.card{padding:15px}.metrics,.roadmap{grid-template-columns:1fr}.composer{flex-direction:column}.compact{width:100%}.status-cluster{display:grid;grid-template-columns:1fr}.pill{justify-content:center}.primary-status strong{font-size:23px}}
.chat-card .chat-messages{display:block;max-height:460px;overflow-y:auto;overscroll-behavior:contain}
.chat-card .chat-message-list{display:flex;flex-direction:column;gap:12px;min-width:0}
.chat-card .chat-message{max-width:88%;padding:10px 13px;border:1px solid var(--border);border-radius:12px;min-width:0}
.chat-card .chat-message.parent{align-self:flex-end;background:var(--panel2)}
.chat-card .chat-message.child{align-self:flex-start;background:var(--panel)}
.chat-card .chat-body{white-space:pre-wrap;overflow-wrap:anywhere}
.chat-card .chat-metadata,.chat-card .chat-status{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.chat-card .chat-empty{padding:30px 0}
.chat-card .chat-empty[hidden]{display:none}
.chat-card #chatError{padding:0 12px;overflow-wrap:anywhere}
.chat-card #loadOlderChat{margin:8px 12px}
.game-control-card .game-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:14px 0}
.game-control-card .game-metrics>div{padding:11px;border:1px solid var(--border);border-radius:10px;background:var(--panel2)}
.game-control-card .game-metrics span{display:block;color:var(--muted);font-size:13px}
.game-control-card .game-metrics strong{display:block;margin-top:5px}
.game-control-card .game-adjustments{display:grid;gap:8px}
.game-control-card .game-adjustments>span{color:var(--muted);font-size:13px}
.game-control-card .game-adjustments .actions{display:flex;flex-wrap:wrap;gap:8px}
.game-control-card .composer{margin-top:2px}
.game-control-card input{min-width:0}
.game-control-card #gameCommandError{margin:10px 0 0;padding:0}

/* ===== 修复：离线横幅必须真正遵守 hidden，避免与「在线」状态自相矛盾 ===== */
.offline-banner[hidden]{display:none}
.page[hidden]{display:none}

/* ===== 微信式分页：第一页聊天，第二页控制面板 ===== */
.page{min-width:0}
.page-chat{display:flex;flex-direction:column;min-height:min(72vh,720px)}
.page-chat .chat-card{display:flex;flex-direction:column;flex:1;min-height:0;margin-bottom:0}
.page-chat .chat-card .chat-window{display:flex;flex-direction:column;flex:1;min-height:0}
.page-chat .chat-card .chat-messages{flex:1;min-height:240px;max-height:none}
.page-control{display:block}

/* 微信式底部标签栏：固定在视口底部，保证手机上始终可点 */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0 auto 0;padding:7px 7px calc(7px + env(safe-area-inset-bottom,0px));border:1px solid var(--border);border-radius:18px 18px 0 0;background:linear-gradient(180deg,#18212f,#131a24);box-shadow:0 -8px 24px rgba(0,0,0,.35);width:min(1020px,100%)}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 6px;border:0;border-radius:13px;background:transparent;color:var(--muted);font:inherit;font-size:13px;line-height:1.15;cursor:pointer;transition:background .15s ease,color .15s ease}
.tab .tab-icon{font-size:19px;line-height:1}
.tab .tab-icon{position:relative;display:inline-block}
.tab-badge{position:absolute;top:-4px;right:-14px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ff4d4f;color:#fff;font-size:11px;line-height:18px;text-align:center;font-weight:700}
.tab-badge[hidden]{display:none}
.tab.active{color:#fff;background:rgba(77,163,255,.16)}
.tab:hover{color:#dce7f4}
body{padding-bottom:72px}

/* ===== 微信式外壳：表头与底部标签栏固定，中间内容独立滚动 ===== */
html,body{height:100%;overflow:hidden}
.shell{height:100dvh;max-height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
.topbar{flex:0 0 auto;margin-bottom:12px}
.notice{flex:0 0 auto}
#login{flex:0 0 auto;overflow-y:auto}
#portal{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow:hidden}
#portal .toolbar{flex:0 0 auto;margin:0 0 10px}
#portal .offline-banner{flex:0 0 auto}
.page{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* 聊天页整屏：聊天卡片铺满，只有消息列表滚动，输入框固定在下方。 */
.page-chat{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden}
.page-chat .chat-card{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin-bottom:0}
.page-chat .chat-card .chat-window{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.page-chat .chat-card .chat-header{flex:0 0 auto}
.page-chat .chat-card #loadOlderChat{flex:0 0 auto}
.page-chat .chat-card .chat-messages{flex:1 1 auto;min-height:120px;max-height:none;overflow-y:auto}
.page-chat .chat-card .composer{flex:0 0 auto;margin-top:8px}
.page-chat .chat-card .composer textarea{min-height:44px}
.page-chat .chat-card .chat-progress{flex:0 0 auto}
/* 聊天页去掉标题行（信息已在顶部与聊天头部呈现），保留聊天区结构不变。 */
.page-chat .chat-card>.card-title{display:none}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap}
.topbar .brand-kicker{margin:0;font-size:14px;letter-spacing:.06em}
.topbar-status{display:flex;align-items:center;gap:8px;justify-content:flex-end;min-width:0}
.topbar-status .pill{flex:0 0 auto}

/* ===== 聊天页尽量占满屏幕（微信式）：去掉卡片留白/边框，输入区紧凑 ===== */
.page-chat .chat-card{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.page-chat .chat-card .chat-header{padding:8px 2px 6px}
.page-chat .chat-card #loadOlderChat{margin:0 0 6px}
.page-chat .chat-card .chat-messages{padding:0 2px}
.page-chat .chat-card .composer{margin-top:6px;gap:6px;padding:0}
.page-chat .chat-card .composer textarea{min-height:40px;max-height:96px;padding:8px 10px}
.page-chat .chat-card .composer .btn{padding:8px 14px}
@media(max-width:760px){
  .shell{padding:10px 10px 0}
  .topbar{margin-bottom:8px}
  .page-chat .chat-card{padding:0}
  .tabbar{padding:5px;gap:4px;margin-top:6px}
  .tab{font-size:12px;padding:7px 4px}
}
.tabbar{position:static;left:auto;right:auto;bottom:auto;flex:0 0 auto;margin:8px 0 0;border-radius:18px 18px 0 0;width:100%}
body{padding-bottom:0}

@media(max-width:760px){
  .shell{padding:14px 12px 0}
  .notice{display:none}
  .page-chat .chat-card{padding:12px}
  .page-chat .chat-card .chat-progress{display:none}
  .topbar .brand-kicker{font-size:13px}
  .topbar-status .pill{font-size:12px;padding:5px 9px}
}