/* ============================================================
   AuthSite 主题变量（日夜双主题）
   与火山引擎风格一致：品牌红橙渐变 + 双主题切换
   ============================================================ */

:root,
[data-theme="dark"] {
  --brand: #F53F3F;
  --brand-deep: #FF6B5E;
  --brand-orange: #FF7A18;
  --brand-grad: linear-gradient(135deg, #F53F3F 0%, #FF7A18 100%);
  --page: #0B0C10;
  --page-2: #101218;
  --card: #14161D;
  --card-border: rgba(255, 255, 255, .08);
  --text-1: #E8EAF0;
  --text-2: #A6ABB8;
  --text-3: #6E7482;
  --line: rgba(255, 255, 255, .08);
  --nav-bg: rgba(11, 12, 16, .82);
  --ghost-bg: rgba(255, 255, 255, .08);
  --ghost-border: rgba(255, 255, 255, .22);
  --ghost-color: #fff;
  --input-bg: rgba(255, 255, 255, .05);
  --table-hover: rgba(255, 255, 255, .04);
  --ok: #28C840;
  --warn: #FEBC2E;
  --danger: #FF5F57;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, .5);
  --shadow-brand: 0 8px 24px rgba(245, 63, 63, .32);
  color-scheme: dark;
}

[data-theme="light"] {
  --brand: #F53F3F;
  --brand-deep: #D91E1E;
  --brand-orange: #FF7A18;
  --brand-grad: linear-gradient(135deg, #F53F3F 0%, #FF7A18 100%);
  --page: #F7F8FA;
  --page-2: #FFFFFF;
  --card: #FFFFFF;
  --card-border: #E5E6EB;
  --text-1: #1D2129;
  --text-2: #4E5969;
  --text-3: #86909C;
  --line: #E5E6EB;
  --nav-bg: rgba(255, 255, 255, .88);
  --ghost-bg: #FFFFFF;
  --ghost-border: #E5E6EB;
  --ghost-color: #1D2129;
  --input-bg: #FFFFFF;
  --table-hover: #F7F8FA;
  --ok: #1FA637;
  --warn: #D9930D;
  --danger: #D9363E;
  --shadow-sm: 0 2px 8px rgba(29, 33, 41, .06);
  --shadow-md: 0 8px 24px rgba(29, 33, 41, .1);
  --shadow-brand: 0 8px 24px rgba(245, 63, 63, .28);
  color-scheme: light;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: var(--text-1);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease, color .35s ease;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

::selection { background: rgba(245, 63, 63, .28); color: var(--text-1); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 通用组件 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 14px; font-weight: 500; font-family: inherit;
  border-radius: 6px; cursor: pointer; transition: all .25s;
  border: none; white-space: nowrap; padding: 8px 18px;
}
.btn-brand { color: #fff; background: var(--brand); }
.btn-brand:hover { box-shadow: var(--shadow-brand); transform: translateY(-1px); }
.btn-grad { color: #fff; background: var(--brand-grad); }
.btn-grad:hover { box-shadow: var(--shadow-brand); transform: translateY(-1px); }
.btn-ghost { color: var(--ghost-color); background: var(--ghost-bg); border: 1px solid var(--ghost-border); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-sm { padding: 4px 12px; font-size: 12.5px; border-radius: 5px; }
.btn-danger-ghost { color: var(--danger); background: transparent; border: 1px solid currentColor; opacity: .85; }
.btn-danger-ghost:hover { opacity: 1; background: rgba(245, 63, 63, .08); }

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  transition: background-color .35s ease, border-color .35s ease;
}

.input, .select, .textarea {
  width: 100%; padding: 9px 12px;
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-1);
  font-size: 14px; font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(245, 63, 63, .12);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }

/* 主题切换按钮（日月旋转） */
.theme-toggle {
  position: relative; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--ghost-border); background: var(--ghost-bg);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-2); transition: all .25s; overflow: hidden; flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--brand); color: var(--brand); transform: rotate(15deg); }
.theme-toggle svg { position: absolute; transition: transform .45s cubic-bezier(.6, .1, .3, 1.4), opacity .3s; }
.theme-toggle .icon-sun { opacity: 0; transform: rotate(-120deg) scale(.4); }
.theme-toggle .icon-moon { opacity: 1; transform: none; }
[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: none; }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(120deg) scale(.4); }

/* 状态徽章 */
.badge { display: inline-block; padding: 2px 10px; border-radius: 100px; font-size: 12px; font-weight: 500; }
.badge-ok { color: var(--ok); background: rgba(40, 200, 64, .12); }
.badge-warn { color: var(--warn); background: rgba(254, 188, 46, .12); }
.badge-danger { color: var(--danger); background: rgba(245, 63, 63, .12); }
.badge-muted { color: var(--text-3); background: var(--page); }
.badge-brand { color: #fff; background: var(--brand-grad); }

/* 消息提示 */
.flash { padding: 12px 16px; border-radius: 8px; font-size: 14px; margin-bottom: 18px; }
.flash-ok { color: var(--ok); background: rgba(40, 200, 64, .1); border: 1px solid rgba(40, 200, 64, .3); }
.flash-error { color: var(--danger); background: rgba(245, 63, 63, .1); border: 1px solid rgba(245, 63, 63, .3); }