/* ========================================================
   GRACE · 管理页
   颜色、字体、字号、间距、圆角、阴影、缓动、时长全部取自
   规则内核/设计/tokens.grace.yaml，变量名与令牌里的 css 字段一致。
   令牌只有夜色一套，所以浏览器无论选浅色还是深色，这页都用这一套（color-scheme: dark）。
   ======================================================== */

:root {
  color-scheme: dark;

  --color-bg-void: #030406;
  --color-bg-deep: #07090e;
  --color-bg-surface: rgba(14, 18, 28, 0.72);
  --color-bg-surface-hover: rgba(22, 28, 44, 0.88);
  --color-bg-pill: rgba(255, 255, 255, 0.06);
  --color-text-pure: #ffffff;
  --color-text-muted: #94a3b8;
  --color-text-dim: #64748b;
  --color-accent-purple: #a78bfa;
  --color-accent-cyan: #38bdf8;
  --color-accent-rose: #f472b6;
  --color-accent-gold: #fbbf24;
  --color-accent-glow: rgba(167, 139, 250, 0.28);
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-glow: rgba(167, 139, 250, 0.4);
  --color-border-pill: rgba(255, 255, 255, 0.15);
  --color-success: #10b981;

  --font-family: "Quicksand", "Outfit", "Plus Jakarta Sans", "PingFang SC", sans-serif;

  --size-display: 48px;
  --size-heading: 42px;
  --size-title: 18px;
  --size-body: 16px;
  --size-label: 13px;
  --size-caption: 11px;

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  --shadow-rest: 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-float: 0 30px 80px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 16px rgba(167, 139, 250, 0.28);

  --radius-full: 9999px;
  --radius-card: 36px;
  --radius-card-sm: 24px;
  --radius-inner: 18px;

  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

  --time-micro: 0.2s;
  --time-base: 0.3s;
  --time-soft: 0.4s;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { background: var(--color-bg-void); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: var(--space-96);
  font-family: var(--font-family);
  font-size: var(--size-body);
  line-height: 1.6;
  color: var(--color-text-muted);
  background:
    radial-gradient(ellipse at 50% 0%, var(--color-accent-glow), transparent 55%),
    linear-gradient(180deg, var(--color-bg-deep), var(--color-bg-void) 60%);
  background-color: var(--color-bg-void);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }

.skip-link {
  position: absolute;
  left: var(--space-16);
  top: calc(-1 * var(--space-64));
  z-index: 100;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-full);
  background: var(--color-accent-purple);
  color: var(--color-bg-void);
  font-size: var(--size-label);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--time-micro) var(--ease-smooth);
}
.skip-link:focus { top: var(--space-8); }

/* ---------- 顶栏与分屏标签 ---------- */
.sticky-head { position: sticky; top: 0; z-index: 20; }
.topbar {
  background: var(--color-bg-surface);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid var(--color-border-subtle);
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  max-width: 45rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-16);
}
.brand {
  font-size: var(--size-title);
  font-weight: 700;
  color: var(--color-text-pure);
  white-space: nowrap;
}
.who {
  flex: 1;
  min-width: 0;
  text-align: right;
  font-size: var(--size-label);
  color: var(--color-text-muted);
}
.who strong { color: var(--color-text-pure); font-weight: 700; }

.tabs {
  background: var(--color-bg-deep);
  border-bottom: 1px solid var(--color-border-subtle);
}
.tabs-inner {
  display: flex;
  gap: var(--space-8);
  max-width: 45rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-16);
  overflow-x: auto;
}
.tab {
  flex: 1 0 auto;
  min-height: var(--space-48);
  padding: 0 var(--space-16);
  border: 1px solid var(--color-border-pill);
  border-radius: var(--radius-full);
  background: var(--color-bg-pill);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--size-label);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--time-base) var(--ease-smooth), color var(--time-base) var(--ease-smooth),
    border-color var(--time-base) var(--ease-smooth), transform var(--time-micro) var(--ease-elastic);
}
.tab:hover { color: var(--color-text-pure); background: var(--color-bg-surface-hover); }
.tab:active { transform: scale(0.97); }
.tab[aria-selected="true"] {
  color: var(--color-bg-void);
  background: var(--color-accent-purple);
  border-color: var(--color-accent-purple);
  box-shadow: var(--shadow-glow);
}

/* ---------- 页面与卡片 ---------- */
.page {
  max-width: 45rem;
  margin: 0 auto;
  padding: var(--space-24) var(--space-16) 0;
  outline: none;
}
.screen { display: flex; flex-direction: column; gap: var(--space-24); }

.card {
  padding: var(--space-24);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card-sm);
  background: var(--color-bg-surface);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: var(--shadow-rest);
}
.card-title { font-size: var(--size-title); font-weight: 700; color: var(--color-text-pure); }
.card-text { margin-top: var(--space-8); font-size: var(--size-body); color: var(--color-text-muted); }

.screen-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
}
.screen-title { font-size: var(--size-title); font-weight: 700; color: var(--color-text-pure); }
.screen-sub { margin-top: var(--space-4); font-size: var(--size-label); color: var(--color-text-muted); }

.eyebrow {
  font-size: var(--size-caption);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-accent-purple);
}

.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-24); }
@media (min-width: 600px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* ---------- 登录 ---------- */
.screen-login { padding-top: var(--space-32); }
.login-card {
  max-width: 28rem;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-32) var(--space-24);
  border-radius: var(--radius-card-sm);
  border-color: var(--color-border-glow);
  box-shadow: var(--shadow-float), var(--shadow-glow);
}
.login-title { margin-top: var(--space-8); font-size: var(--size-heading); font-weight: 700; line-height: 1.2; color: var(--color-text-pure); }
.lead { margin-top: var(--space-8); color: var(--color-text-muted); }
.form { display: flex; flex-direction: column; gap: var(--space-16); margin-top: var(--space-24); }
.hint { margin-top: var(--space-16); font-size: var(--size-label); color: var(--color-text-muted); }

.field { display: flex; flex-direction: column; gap: var(--space-8); }
.field-label { font-size: var(--size-label); font-weight: 700; color: var(--color-text-pure); }
.input {
  width: 100%;
  min-height: var(--space-48);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-border-pill);
  border-radius: var(--radius-inner);
  background: var(--color-bg-deep);
  color: var(--color-text-pure);
  font: inherit;
  font-size: var(--size-body);
  transition: border-color var(--time-base) var(--ease-smooth), box-shadow var(--time-base) var(--ease-smooth);
}
.input::placeholder { color: var(--color-text-muted); opacity: 0.7; }
.input:hover { border-color: var(--color-border-glow); }
.input:focus-visible { outline: none; border-color: var(--color-accent-purple); box-shadow: var(--shadow-glow); }
.textarea { resize: vertical; line-height: 1.5; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--space-48);
  padding: 0 var(--space-24);
  border: 1px solid var(--color-border-pill);
  border-radius: var(--radius-full);
  background: var(--color-bg-pill);
  color: var(--color-text-pure);
  font: inherit;
  font-size: var(--size-label);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--time-base) var(--ease-smooth), border-color var(--time-base) var(--ease-smooth),
    box-shadow var(--time-base) var(--ease-smooth), transform var(--time-micro) var(--ease-elastic);
}
.btn:hover { background: var(--color-bg-surface-hover); border-color: var(--color-border-glow); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible, .tab:focus-visible, .switch:focus-visible { outline: 2px solid var(--color-accent-purple); outline-offset: 2px; box-shadow: var(--shadow-glow); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-ghost { background: transparent; padding: 0 var(--space-16); }
.btn-primary { background: var(--color-accent-purple); border-color: var(--color-accent-purple); color: var(--color-bg-void); }
.btn-primary:hover:not(:disabled) { background: var(--color-accent-purple); box-shadow: var(--shadow-glow); filter: brightness(1.08); }
.btn-warn { background: transparent; border-color: var(--color-accent-gold); color: var(--color-accent-gold); }
.btn-warn:hover:not(:disabled) { background: var(--color-bg-surface-hover); border-color: var(--color-accent-gold); }
.btn-block { width: 100%; }

/* ---------- 提示条 ---------- */
.notice {
  padding: var(--space-12) var(--space-16);
  border: 1px solid;
  border-radius: var(--radius-inner);
  font-size: var(--size-label);
  background: var(--color-bg-deep);
}
.notice-rose { border-color: var(--color-accent-rose); color: var(--color-accent-rose); }
.notice-gold { border-color: var(--color-accent-gold); color: var(--color-accent-gold); }
.field-error { font-size: var(--size-label); color: var(--color-accent-rose); }

/* ---------- 用量 ---------- */
.hero-stat { padding: var(--space-32) var(--space-24); border-color: var(--color-border-glow); }
.hero-number { margin-top: var(--space-8); font-size: var(--size-display); font-weight: 700; line-height: 1.1; color: var(--color-text-pure); font-variant-numeric: tabular-nums; }
.hero-unit, .mid-unit { font-size: var(--size-title); font-weight: 600; color: var(--color-text-muted); }
.mid-number { margin-top: var(--space-8); font-size: var(--size-heading); font-weight: 700; line-height: 1.2; color: var(--color-text-pure); font-variant-numeric: tabular-nums; }
.stat-note { margin-top: var(--space-8); font-size: var(--size-label); color: var(--color-text-muted); }

.meter {
  margin-top: var(--space-16);
  height: var(--space-8);
  border-radius: var(--radius-full);
  background: var(--color-bg-pill);
  overflow: hidden;
}
.meter-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-accent-purple);
  transform-origin: left center;
  transform: scaleX(var(--ratio, 0));
  transition: transform var(--time-soft) var(--ease-cinematic);
}
.meter[data-level="high"] .meter-fill { background: var(--color-accent-gold); }
.meter[data-level="full"] .meter-fill { background: var(--color-accent-rose); }

.kv { margin-top: var(--space-16); display: flex; flex-direction: column; gap: var(--space-12); }
.kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-16); }
.kv dt { font-size: var(--size-label); color: var(--color-text-muted); }
.kv dd { font-size: var(--size-title); font-weight: 700; color: var(--color-text-pure); text-align: right; font-variant-numeric: tabular-nums; }

.status-line { margin-top: var(--space-12); display: flex; align-items: center; gap: var(--space-12); font-size: var(--size-title); font-weight: 700; color: var(--color-text-pure); }
.dot { flex: none; width: var(--space-12); height: var(--space-12); border-radius: var(--radius-full); background: var(--color-text-dim); }
.dot[data-on="ok"] { background: var(--color-success); box-shadow: 0 0 var(--space-8) var(--color-success); }
.dot[data-on="paused"] { background: var(--color-accent-gold); box-shadow: 0 0 var(--space-8) var(--color-accent-gold); }

/* ---------- 开关 ---------- */
.switch-list, .floor-list { margin-top: var(--space-16); display: flex; flex-direction: column; }
.switch-row, .switch-list > li, .floor-list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) 0;
  border-top: 1px solid var(--color-border-subtle);
}
.switch-row { margin-top: var(--space-16); }
.switch-text { min-width: 0; }
.switch-name { font-size: var(--size-body); font-weight: 700; color: var(--color-text-pure); }
.switch-meta { margin-top: var(--space-4); font-size: var(--size-label); color: var(--color-text-muted); }

.switch {
  position: relative;
  flex: none;
  width: var(--space-64);
  height: var(--space-32);
  padding: 0;
  border: 1px solid var(--color-border-pill);
  border-radius: var(--radius-full);
  background: var(--color-bg-pill);
  cursor: pointer;
  transition: background var(--time-base) var(--ease-smooth), border-color var(--time-base) var(--ease-smooth);
}
/* 点击热区：视觉高 32，可点区域撑到 48 */
.switch::before { content: ""; position: absolute; inset: calc(-1 * var(--space-8)) calc(-1 * var(--space-4)); }
.switch::after {
  content: "";
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  width: var(--space-24);
  height: var(--space-24);
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
  transition: transform var(--time-base) var(--ease-elastic), background var(--time-base) var(--ease-smooth);
}
.switch[aria-checked="true"] { background: var(--color-accent-purple); border-color: var(--color-accent-purple); }
.switch[aria-checked="true"]::after { transform: translateX(var(--space-32)); background: var(--color-bg-void); }
.switch:hover:not(:disabled) { border-color: var(--color-border-glow); box-shadow: var(--shadow-glow); }
.switch:disabled { opacity: 0.5; cursor: not-allowed; }

.floor-list li { justify-content: flex-start; align-items: flex-start; flex-direction: column; gap: var(--space-4); }
.floor-name { font-size: var(--size-body); font-weight: 700; color: var(--color-text-pure); }
.floor-name::after { content: "始终开启"; margin-left: var(--space-12); padding: var(--space-4) var(--space-8); border: 1px solid var(--color-border-pill); border-radius: var(--radius-full); font-size: var(--size-caption); font-weight: 700; color: var(--color-success); vertical-align: middle; }
.floor-desc { font-size: var(--size-label); color: var(--color-text-muted); }

/* ---------- 动作与锁定 ---------- */
.lock-list, .audit-list { margin-top: var(--space-16); display: flex; flex-direction: column; }
.lock-list > li, .audit-list > li {
  padding: var(--space-12) 0;
  border-top: 1px solid var(--color-border-subtle);
}
.empty { padding: var(--space-12) 0; border-top: 1px solid var(--color-border-subtle); font-size: var(--size-label); color: var(--color-text-muted); }
.lock-main, .audit-main { font-size: var(--size-body); color: var(--color-text-pure); overflow-wrap: anywhere; }
.lock-main strong, .audit-main strong { font-weight: 700; }
.lock-sub, .audit-sub { margin-top: var(--space-4); font-size: var(--size-label); color: var(--color-text-muted); overflow-wrap: anywhere; }
.tag { display: inline-block; margin-right: var(--space-8); padding: 0 var(--space-8); border: 1px solid var(--color-border-pill); border-radius: var(--radius-full); font-size: var(--size-caption); font-weight: 700; vertical-align: middle; }
.tag-ok { color: var(--color-success); }
.tag-bad { color: var(--color-accent-rose); border-color: var(--color-accent-rose); }
.tag-write { color: var(--color-accent-gold); border-color: var(--color-accent-gold); }
.tag-plain { color: var(--color-text-muted); }

/* ---------- 对话框 ---------- */
.dialog {
  width: calc(100% - var(--space-32));
  max-width: 30rem;
  padding: 0;
  border: 1px solid var(--color-border-glow);
  border-radius: var(--radius-card-sm);
  background: var(--color-bg-deep);
  color: var(--color-text-muted);
  box-shadow: var(--shadow-float), var(--shadow-glow);
}
.dialog::backdrop { background: rgba(3, 4, 6, 0.72); backdrop-filter: blur(4px); }
.dialog-form { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-24); }
.dialog-title { font-size: var(--size-title); font-weight: 700; color: var(--color-text-pure); }
.actor-line { font-size: var(--size-label); }
.actor-line strong { color: var(--color-text-pure); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-12); flex-wrap: wrap; }

/* ---------- 演示角标与提示 ---------- */
.demo-badge {
  position: fixed;
  right: var(--space-16);
  bottom: var(--space-16);
  z-index: 60;
  max-width: calc(100% - var(--space-32));
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-16);
  border: 1px solid var(--color-accent-gold);
  border-radius: var(--radius-card-sm);
  background: var(--color-bg-deep);
  box-shadow: var(--shadow-rest);
}
.demo-tag { font-size: var(--size-label); font-weight: 700; color: var(--color-accent-gold); }
.demo-text { font-size: var(--size-caption); color: var(--color-text-muted); }
.demo-btn { min-height: var(--space-48); }

.toast {
  position: fixed;
  left: 50%;
  top: var(--space-16);
  z-index: 70;
  max-width: calc(100% - var(--space-32));
  padding: var(--space-12) var(--space-24);
  border: 1px solid var(--color-border-glow);
  border-radius: var(--radius-full);
  background: var(--color-bg-deep);
  color: var(--color-text-pure);
  font-size: var(--size-label);
  font-weight: 700;
  box-shadow: var(--shadow-float);
  opacity: 0;
  transform: translate(-50%, calc(-1 * var(--space-16)));
  pointer-events: none;
  transition: opacity var(--time-base) var(--ease-smooth), transform var(--time-soft) var(--ease-cinematic);
}
.toast[data-show="true"] { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 480px) {
  .card { padding: var(--space-16); }
  .hero-stat { padding: var(--space-24) var(--space-16); }
  .login-card { padding: var(--space-24) var(--space-16); }
  .brand { font-size: var(--size-body); }
  .demo-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}