:root {
  --sider:#141414;
  --sider-2:#1f1f1f;
  --sider-line:#303030;
  --primary:#1677ff;
  --primary-soft:#e6f4ff;
  --success:#52c41a;
  --error:#ff4d4f;
  --text:#262626;
  --text-secondary:#595959;
  --text-tertiary:#8c8c8c;
  --border:#f0f0f0;
  --border-strong:#d9d9d9;
  --bg:#f5f5f5;
  --container:#ffffff;
}

* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; letter-spacing:0; }
button, input, a { font:inherit; letter-spacing:0; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.45; }
.hidden { display:none !important; }

.hub-layout { min-height:100vh; display:grid; grid-template-columns:272px minmax(0,1fr); }
.hub-sidebar { position:sticky; top:0; height:100vh; overflow:auto; padding:18px 12px; background:var(--sider); color:#fff; }
.brand-block { padding:6px 10px 16px; border-bottom:1px solid var(--sider-line); }
.brand-block span { display:block; color:#bfbfbf; font-size:11px; font-weight:700; }
.brand-block h1 { margin:8px 0 8px; font-size:21px; line-height:1.2; font-weight:700; }
.brand-block small, #hubStatus { color:#8c8c8c; font-size:12px; line-height:1.5; }

.side-menu { display:grid; gap:8px; }
.menu-game { padding:8px; border:1px solid transparent; border-radius:8px; background:transparent; }
.menu-game.current { background:var(--sider-2); border-color:var(--sider-line); }
.menu-game-head button, .menu-system button, .submenu button { width:100%; border:0; background:transparent; color:inherit; text-align:left; }
.menu-game-head button { padding:6px 8px; border-radius:6px; }
.menu-game-head button:hover { background:#262626; }
.menu-game-head b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:650; }
.menu-game-head small { display:block; margin-top:4px; color:#8c8c8c; font-size:12px; line-height:1.4; }
.submenu { display:grid; gap:4px; margin-top:6px; }
.submenu button, .menu-system button { min-height:34px; padding:7px 12px; border-radius:6px; color:#d9d9d9; font-size:14px; }
.submenu button:hover, .menu-system button:hover { background:#262626; color:#fff; }
.submenu button.active, .menu-system button.active { background:var(--primary); color:#fff; }
.menu-system { margin-top:4px; padding:8px; border-top:1px solid var(--sider-line); }

.hub-main { min-width:0; padding:24px; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:16px; padding:18px 20px; border:1px solid var(--border); border-radius:8px; background:var(--container); }
.topbar p { margin:0 0 5px; color:var(--text-tertiary); font-size:12px; font-weight:700; }
.topbar h2 { margin:0; font-size:24px; line-height:1.25; font-weight:650; }
.topbar small { display:block; margin-top:7px; color:var(--text-secondary); font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
.front-link { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:0 14px; border:1px solid var(--border-strong); border-radius:6px; background:#fff; color:var(--text); text-decoration:none; font-size:14px; font-weight:500; }
.front-link:hover { border-color:var(--primary); color:var(--primary); }

.metrics-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.metric { min-height:78px; padding:14px 16px; border:1px solid var(--border); border-radius:8px; background:var(--container); }
.metric span { display:block; color:var(--text-tertiary); font-size:12px; font-weight:600; }
.metric b { display:block; margin-top:6px; color:var(--text); font-size:24px; line-height:1.1; font-weight:650; }
.metric small { display:block; margin-top:6px; color:var(--text-secondary); font-size:12px; }

.view-panel { display:block; }
.subsection, .view-panel { margin-bottom:16px; }
.subsection, #materialsView, #changelogView { padding:18px 20px; border:1px solid var(--border); border-radius:8px; background:var(--container); }
#statsView { padding:0; border:0; background:transparent; }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:14px; margin:0 0 12px; }
.section-head.compact { align-items:flex-start; }
.section-head h3 { margin:0; font-size:18px; line-height:1.25; font-weight:650; }
.section-head small { display:block; margin-top:5px; color:var(--text-secondary); font-size:12px; }
.search-input { width:min(420px, 100%); height:34px; padding:4px 11px; border:1px solid var(--border-strong); border-radius:6px; background:#fff; color:var(--text); outline:none; }
.search-input:hover { border-color:#4096ff; }
.search-input:focus { border-color:var(--primary); box-shadow:0 0 0 2px rgba(5,145,255,.1); }

.tabs { display:flex; align-items:center; gap:0; margin:0 0 16px; border-bottom:1px solid var(--border-strong); background:transparent; }
.tabs button { position:relative; min-height:42px; padding:0 18px; border:0; background:transparent; color:var(--text-secondary); font-size:14px; }
.tabs button:hover { color:var(--primary); }
.tabs button.active { color:var(--primary); font-weight:600; }
.tabs button.active::after { content:""; position:absolute; left:16px; right:16px; bottom:-1px; height:2px; background:var(--primary); border-radius:2px 2px 0 0; }
.stats-pane { margin-bottom:16px; }

.pill-row { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.pill { display:inline-flex; align-items:center; gap:8px; min-height:24px; padding:2px 8px; border:1px solid #b7eb8f; border-radius:4px; background:#f6ffed; color:#389e0d; font-size:12px; }
.pill b { color:#237804; font-weight:600; }
.pill i { font-style:normal; }

.table-wrap { width:100%; overflow:auto; border:1px solid var(--border); border-radius:8px; background:#fff; }
.admin-table { width:100%; min-width:920px; border-collapse:separate; border-spacing:0; }
.admin-table th, .admin-table td { padding:12px 16px; border-bottom:1px solid var(--border); text-align:center; vertical-align:middle; font-size:14px; }
.admin-table th { position:sticky; top:0; z-index:1; background:#fafafa; color:var(--text-secondary); font-size:13px; font-weight:600; }
.admin-table tr:last-child td { border-bottom:0; }
.admin-table tr:hover td { background:#fafafa; }
.admin-table b { display:block; color:var(--text); font-weight:600; }
.admin-table small { display:block; margin-top:4px; color:var(--text-tertiary); font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
.materials-table { min-width:1120px; }
.users-table { min-width:1080px; }
.records-table { min-width:980px; }
.empty { height:84px; color:var(--text-tertiary); text-align:center !important; vertical-align:middle !important; }
.empty-card { min-height:84px; display:grid; place-items:center; border:1px solid var(--border); border-radius:8px; color:var(--text-tertiary); background:#fff; }

.pager { display:flex; justify-content:flex-end; align-items:center; gap:12px; min-height:34px; margin-top:12px; color:var(--text-secondary); font-size:13px; }
.pager div { display:flex; gap:8px; }
.pager button { height:32px; padding:0 12px; border:1px solid var(--border-strong); border-radius:6px; background:#fff; color:var(--text); }
.pager button:hover:not(:disabled) { border-color:var(--primary); color:var(--primary); }

.material-title { min-width:210px; }
.status { display:inline-flex; align-items:center; min-height:22px; padding:0 8px; border:1px solid #d9d9d9; border-radius:4px; background:#fafafa; color:var(--text-secondary); font-size:12px; }
.status.on { border-color:#b7eb8f; background:#f6ffed; color:#389e0d; }
.status.off { border-color:#ffd591; background:#fff7e6; color:#d46b08; }
.status.deleted { border-color:#ffccc7; background:#fff2f0; color:var(--error); text-decoration:line-through; }
.status-actions, .row-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.audio-cell { display:grid; justify-items:center; gap:6px; min-width:250px; }
.audio-cell audio { width:250px; height:32px; }
.tag-cloud { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; max-width:300px; margin:0 auto; }
.tag-cloud i { max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:1px 7px; border:1px solid #d9d9d9; border-radius:4px; background:#fafafa; color:var(--text-secondary); font-style:normal; font-size:12px; }
.text-button { height:30px; padding:0 10px; border:1px solid var(--border-strong); border-radius:6px; background:#fff; color:var(--text); font-size:13px; }
.text-button:hover { border-color:var(--primary); color:var(--primary); }
.text-button.danger { color:var(--error); }
.text-button.danger:hover { border-color:var(--error); }
.filter-control { display:flex; align-items:center; gap:8px; color:var(--text-secondary); font-size:13px; }
.filter-control select { height:34px; padding:0 28px 0 10px; border:1px solid var(--border-strong); border-radius:6px; background:#fff; color:var(--text); }

.client-main { max-width:260px; margin:0 auto; }
.client-main b, .client-main small { display:block; }
.answer-summary { display:flex; flex-wrap:wrap; justify-content:center; gap:5px; max-width:430px; margin:0 auto; }
.answer-summary i { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:1px 7px; border:1px solid #d9d9d9; border-radius:4px; background:#fafafa; color:var(--text-secondary); font-style:normal; font-size:12px; }
.answer-summary i.ok { border-color:#91caff; background:var(--primary-soft); color:#0958d9; }

.changelog-list { display:grid; gap:12px; }
.changelog-item { padding:14px 16px; border:1px solid var(--border); border-radius:8px; background:#fff; }
.changelog-item b { color:var(--text); font-size:15px; font-weight:650; }
.changelog-item p { margin:7px 0 0; color:var(--text-secondary); line-height:1.58; font-size:14px; }

.raw-modal { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:22px; }
.raw-backdrop { position:absolute; inset:0; border:0; background:rgba(0,0,0,.45); }
.raw-panel { position:relative; width:min(860px,100%); max-height:min(760px,calc(100vh - 44px)); display:grid; grid-template-rows:auto minmax(0,1fr); border-radius:8px; overflow:hidden; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12), 0 9px 28px 8px rgba(0,0,0,.05); }
.raw-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:14px 16px; border-bottom:1px solid var(--border); }
.raw-head span { display:block; color:var(--text-tertiary); font-size:12px; }
.raw-head b { display:block; margin-top:4px; color:var(--text); font-size:18px; font-weight:650; }
.icon-button { width:32px; height:32px; border:1px solid var(--border-strong); border-radius:6px; background:#fff; color:var(--text); font-size:20px; line-height:1; }
.icon-button:hover { border-color:var(--primary); color:var(--primary); }
.raw-panel pre { margin:0; padding:16px; overflow:auto; background:#141414; color:#f5f5f5; font-size:12px; line-height:1.5; tab-size:2; }
.dialog-form { display:grid; gap:16px; padding:18px; }
.dialog-form label span { display:block; margin-bottom:7px; color:var(--text-secondary); font-size:13px; font-weight:600; }
.dialog-form textarea { width:100%; resize:vertical; padding:9px 11px; border:1px solid var(--border-strong); border-radius:6px; color:var(--text); line-height:1.5; outline:none; }
.dialog-form textarea:focus { border-color:var(--primary); box-shadow:0 0 0 2px rgba(5,145,255,.1); }
.dialog-form > small { color:var(--text-tertiary); line-height:1.5; }
.primary-button { justify-self:end; min-height:34px; padding:0 16px; border:0; border-radius:6px; background:var(--primary); color:#fff; }
.feedback-panel { width:min(680px,100%); }
.feedback-list { display:grid; gap:0; padding:0 18px 18px; overflow:auto; }
.feedback-item { padding:16px 0; border-bottom:1px solid var(--border); }
.feedback-item:last-child { border-bottom:0; }
.feedback-item time { color:var(--text-tertiary); font-size:12px; }
.feedback-item p { margin:7px 0 0; white-space:pre-wrap; color:var(--text); line-height:1.65; }

@media (max-width:1100px) {
  .hub-layout { grid-template-columns:244px minmax(0,1fr); }
  .metrics-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:820px) {
  .hub-layout { display:block; }
  .hub-sidebar { position:relative; height:auto; max-height:none; }
  .hub-main { padding:16px; }
  .topbar, .section-head, .pager { flex-direction:column; align-items:flex-start; }
  .front-link, .search-input { width:100%; }
  .metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:560px) {
  .metrics-grid { grid-template-columns:1fr; }
}