/* 备用卡密验证服务 - 共享样式（默认页 + 管理面板，支持深色模式） */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #f5f6fa;
  --card: #fff;
  --text: #333;
  --muted: #909399;
  --border: #ebeef5;
  --head-bg: #fafafa;
  --hover: #f5f7fa;
  --code-bg: #f5f7fa;
  --accent: #409eff;
  --accent-hover: #66b1ff;
  --danger: #f56c6c;
  --success: #67c23a;
  --warning: #e6a23c;
  --shadow: 0 2px 12px rgba(0, 0, 0, .08);
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #121417;
  --card: #1c1f24;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: #2c3036;
  --head-bg: #23272d;
  --hover: #23272d;
  --code-bg: #23272d;
  --shadow: 0 2px 12px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* 跟随系统深色模式（未手动指定主题时生效） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121417;
    --card: #1c1f24;
    --text: #e5e7eb;
    --muted: #9ca3af;
    --border: #2c3036;
    --head-bg: #23272d;
    --hover: #23272d;
    --code-bg: #23272d;
    --shadow: 0 2px 12px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background .2s, color .2s;
}

.wrap { max-width: 980px; margin: 40px auto; padding: 0 16px; }
.card { background: var(--card); border-radius: 10px; box-shadow: var(--shadow); padding: 32px; }
h1 { font-size: 20px; }

/* 按钮 */
.btn {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--head-bg);
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { opacity: .88; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }

/* 顶部右侧固定角（主题切换 / 管理员入口） */
.fixed-corner { position: fixed; top: 14px; right: 14px; z-index: 50; display: flex; gap: 8px; align-items: center; }

/* 提示条 */
.msg { padding: 10px 14px; border-radius: 6px; font-size: 14px; margin-bottom: 16px; }
.msg-error { background: rgba(245, 108, 108, .12); color: var(--danger); }
.msg-notice { background: rgba(103, 194, 58, .12); color: var(--success); }

/* ---------- 登录页 ---------- */
.login-card {
  max-width: 400px;
  margin: 80px auto;
  text-align: center;
  padding: 44px 36px;
  border-top: 3px solid var(--accent);
}
.login-icon { color: var(--accent); margin-bottom: 14px; }
.login-card h1 { font-size: 20px; margin-bottom: 28px; }
.login-form input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-size: 15px;
  margin-bottom: 14px;
  transition: border-color .2s, box-shadow .2s;
}
.login-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(64, 158, 255, .18); }
.login-form .login-btn { width: 100%; padding: 12px; font-size: 15px; border-radius: 8px; }

/* ---------- 默认页 ---------- */
.landing { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.landing-card { max-width: 560px; width: 100%; text-align: center; padding: 60px 40px; }
.status-dot {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--warning);
  box-shadow: 0 0 0 12px rgba(230, 162, 60, .15);
  margin: 0 auto 28px;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.warn-badge {
  display: inline-block;
  padding: 5px 18px;
  border-radius: 999px;
  background: rgba(230, 162, 60, .14);
  color: var(--warning);
  border: 1px solid rgba(230, 162, 60, .45);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  margin-bottom: 20px;
}
.landing-title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.4;
  background: linear-gradient(135deg, var(--warning) 0%, var(--danger) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 14px;
}
.landing-sub { color: var(--muted); font-size: 14px; }

/* ---------- 管理面板 ---------- */
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 10px; flex-wrap: wrap; }
.topbar .actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.stat .num { font-size: 22px; font-weight: 700; }
.stat .label { font-size: 12px; color: var(--muted); margin-top: 4px; }

.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar input[type="text"] {
  flex: 1; min-width: 200px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  font-size: 13px;
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); word-break: break-all; }
th { background: var(--head-bg); color: var(--muted); font-weight: 600; white-space: nowrap; }
tr:hover td { background: var(--hover); }
.empty { text-align: center; color: var(--muted); padding: 40px 0; font-size: 14px; }
.no { color: var(--muted); white-space: nowrap; }
code { background: var(--code-bg); padding: 1px 5px; border-radius: 4px; }

/* 修改密码 */
.chg { margin-top: 18px; }
.chg summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.pwd-form { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.pwd-form input {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  font-size: 13px;
}
.pwd-form input[type="password"] { min-width: 170px; flex: 1; }