/* ── Avora Design System v3 — Dark Theme ───────────────────────── */

:root {
  --bg:       #121212;
  --surface:  #1e1e1e;
  --surface2: #2a2a2c;
  --surface3: #333333;
  --text:     #ffffff;
  --text2:    #aaaaaa;
  --label:    #888888;
  --accent:   #00e5ff;
  --accent2:  #00b8cc;
  --ok:       #34c759;
  --warn:     #ff9f0a;
  --err:      #ff3b30;
  --line:     #333333;
  --radius:   16px;
  --radius-sm: 12px;
  --shadow:   0 2px 16px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 6px rgba(0,0,0,.25);

  /* legacy compat */
  --muted:   #888888;
  --panel:   #1e1e1e;
  --primary: #00e5ff;
}

/* ── Base ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
  animation: pageFade .2s ease-out;
}
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }

/* ── 字号规范 ────────────────────────────────────────────────────── */
p, td, li { font-size: 16px; line-height: 1.6; }
small, .time, .msg-time { font-size: 13px !important; color: var(--label); }
.card-val, .stat-val { font-size: 32px !important; font-weight: 800 !important; }
button, .btn { font-size: 16px; }
input, select, textarea { font-size: 16px; }

/* ── 卡片 ────────────────────────────────────────────────────────── */
.card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ── Toast ───────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: max(28px, env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: #fff;
  padding: 11px 22px; border-radius: 14px;
  font-size: 15px; font-weight: 500;
  white-space: nowrap; opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999; pointer-events: none;
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { color: var(--ok); }
.toast.error   { color: var(--err); }

/* ── 按钮 ────────────────────────────────────────────────────────── */
button, .btn {
  transition: opacity .2s, transform .12s, background .2s;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer; font-family: inherit; font-size: 16px;
  border-radius: var(--radius-sm);
}
button:active, .btn:active { transform: scale(.96); opacity: .88; }
button:disabled, .btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.btn.loading {
  position: relative; color: transparent !important; pointer-events: none;
}
.btn.loading::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px;
  border: 2px solid rgba(0,0,0,.15);
  border-top-color: var(--accent);
  border-radius: 50%; animation: spin .5s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 表单 ────────────────────────────────────────────────────────── */
input, select, textarea {
  font-size: 16px; font-family: inherit;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  outline: none; line-height: 1.5;
  transition: border-color .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder { color: var(--label); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(0,229,255,.2) !important;
}
select option { background: var(--surface); color: var(--text); }

/* ── Skeleton ────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, #e0e0e0 50%, var(--surface2) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite;
  border-radius: 8px;
}
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── Offline Banner ──────────────────────────────────────────────── */
.offline-banner {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--err); color: #fff;
  font-size: 14px; font-weight: 600; text-align: center; padding: 8px;
  z-index: 8888; transform: translateY(-100%); transition: transform .3s ease;
}
.offline-banner.show { transform: translateY(0); }

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 500px) {
  .stats-bar { flex-wrap: wrap; height: auto !important; padding: 8px 16px; gap: 10px 20px; }
  .grid { grid-template-columns: 1fr !important; }
  table { font-size: 14px; }
  th, td { padding: 10px 8px; }
  .wrap { padding: 0 12px; }
}