:root {
  --wb-bg: #0f141c;
  --wb-panel: #171d28;
  --wb-line: #2a3344;
  --wb-text: #e8eaed;
  --wb-muted: #9aa3b2;
  --wb-accent: #3d9cfd;
  --wb-accent-dim: #1e3a5f;
  --wb-ok: #3dd68c;
  --wb-warn: #f5a524;
  --wb-top: 56px;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--wb-bg); color: var(--wb-text); }

.wb-root { display: flex; flex-direction: column; height: 100%; }

.wb-top {
  height: var(--wb-top);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 16px;
  background: var(--wb-panel);
  border-bottom: 1px solid var(--wb-line);
}

.wb-brand { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.wb-brand h1 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: 0.02em; }
.wb-brand p { margin: 2px 0 0; font-size: 11px; color: var(--wb-muted); }
.wb-logo {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(145deg, #3d9cfd, #7c5cff 55%, #2dd4bf);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}

.wb-nav { display: flex; gap: 6px; flex: 1; }
.wb-tab {
  appearance: none; border: 1px solid transparent; background: transparent;
  color: var(--wb-muted); padding: 7px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.wb-tab:hover { color: var(--wb-text); background: rgba(255,255,255,0.04); }
.wb-tab.on {
  color: var(--wb-text);
  background: var(--wb-accent-dim);
  border-color: rgba(61, 156, 253, 0.35);
}

.wb-meta { display: flex; align-items: center; gap: 10px; }
.wb-refresh {
  appearance: none; border: 1px solid rgba(61, 156, 253, 0.45);
  background: var(--wb-accent-dim); color: var(--wb-text);
  border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 650;
  cursor: pointer;
}
.wb-refresh:hover { border-color: var(--wb-accent); }
.wb-pill {
  font-size: 11px; padding: 3px 8px; border-radius: 999px;
  background: #222a38; color: var(--wb-muted); border: 1px solid var(--wb-line);
}
.wb-pill.ok { color: var(--wb-ok); border-color: rgba(61, 214, 140, 0.35); }
.wb-pill.warn { color: var(--wb-warn); border-color: rgba(245, 165, 36, 0.35); }
.wb-ver { font-size: 11px; color: var(--wb-muted); }

.wb-main { flex: 1; min-height: 0; position: relative; background: #0b0f16; }
.wb-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: none; background: #fff;
}
.wb-frame.wb-frame-dark { background: #0b0f16; }
.wb-frame.on { display: block; }

.wb-banner {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  max-width: min(560px, 92vw); padding: 10px 14px; border-radius: 10px;
  background: #1b2433; border: 1px solid var(--wb-line); color: var(--wb-text);
  font-size: 13px; box-shadow: 0 12px 40px rgba(0,0,0,0.4); z-index: 20;
}

@media (max-width: 720px) {
  .wb-top { flex-wrap: wrap; height: auto; padding: 10px 12px; gap: 10px; }
  .wb-brand { min-width: 0; }
  .wb-nav { order: 3; width: 100%; }
  .wb-tab { flex: 1; text-align: center; }
}