:root { --bg:#0b0d10; --card:#11151a; --text:#eaeef2; --muted:#97a1ab; --line:#20262c; }
* { box-sizing:border-box; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial; color:var(--text); background:linear-gradient(180deg,#0b0d10,#101419); min-height:100vh; }
.center { display:grid; place-items:center; padding:24px; }
.card { width:min(420px, 92vw); background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:0 10px 30px rgba(0,0,0,.35); }
h1 { margin:0 0 16px 0; font-size:24px; }
label { display:block; font-size:13px; color:var(--muted); margin-top:12px; }
input { width:100%; margin-top:6px; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:#0d1116; color:var(--text); outline:none; }
button { width:100%; margin-top:16px; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:#dde3ea; color:#0b0d10; font-weight:600; cursor:pointer; }
button.secondary { background:transparent; color:var(--text); }
.muted { color:var(--muted); margin-top:8px; font-size:12px; }
.msg { margin-top:12px; font-size:13px; color:#b7ffb7; }
.actions { margin-top:8px; display:flex; gap:8px; }
/* 页面充满窗口 */
.fill { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }

/* 顶部栏 */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(13,17,22,0.65);
  backdrop-filter: saturate(150%) blur(6px);
  position: sticky; top: 0; z-index: 10;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 8px; }

/* 主区域：垂直水平居中 */
.hero {
  width: min(720px, 92vw);
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.hero h1 { font-size: 28px; margin: 0 0 8px 0; }
/* 布局 */
.fill { min-height:100vh; display:grid; grid-template-rows:auto 1fr; }

/* 顶部栏与标签 */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--line);
  background:rgba(13,17,22,0.65); backdrop-filter:saturate(150%) blur(6px);
  position:sticky; top:0; z-index:10;
}
.tabs { display:flex; gap:8px; }
.tab {
  border:1px solid var(--line); background:transparent; color:var(--text);
  padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:600;
}
.tab.active { background:#dde3ea; color:#0b0d10; }

/* 面板显隐 */
.panel { display:none; width:100%; }
.panel.show { display:block; }

/* hero/card（沿用前面风格） */
.hero, .card {
  width:min(720px,92vw); background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:32px 24px; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.hero h1, .card h1 { margin:0 0 8px 0; }