/* ============================================================
   面面俱道面试助手 / Offerway AI — 后台管理样式
   品牌令牌取自 pivotcareer.cn 实测计算样式: 深海军蓝 + 金色强调
   ============================================================ */
:root {
  /* ---- 品牌令牌 ---- */
  --brand-navy-deep: #0d1f40;
  --brand-navy: #1a3260;
  --brand-blue: #1e4c9c;
  --gold: #f0a020;
  --gold-2: #ffb740;
  --grad-brand: linear-gradient(140deg, #0d1f40 0%, #1a3260 55%, #1e4c9c 100%);
  --grad-gold: linear-gradient(90deg, #f0a020, #ffb740);
  --shadow-card: 0 2px 10px rgba(0, 0, 0, .07), 0 0 1px rgba(0, 0, 0, .04);
  --shadow-gold: 0 4px 16px rgba(240, 160, 32, .38);

  /* ---- 语义令牌 ---- */
  --bg: #f5f5f7;               /* 官网浅色底 */
  --panel: #ffffff;
  --border: rgba(26, 50, 96, .14);
  --text: #1d1d1f;
  --dim: #6e6e73;
  --accent: #1a3260;           /* 浅底上用品牌深蓝(金色对比度不足) */
  --accent-2: #1e4c9c;
  --surface: rgba(26, 50, 96, .06);
  --danger: #e5484d;
  --ok: #16a34a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--bg); color: var(--text); }
.hidden { display: none !important; }
.muted { color: var(--dim); font-size: 13px; line-height: 1.7; }

label { display: block; font-size: 12px; color: var(--dim); margin: 10px 0 4px; }
input {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 13px; outline: none; background: #fff; color: var(--text);
}
input:focus { border-color: var(--accent); }
.btn { border: none; border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 700;
  cursor: pointer; background: var(--surface); color: var(--text); transition: filter .15s, box-shadow .15s; }
.btn:hover { filter: brightness(.97); }
/* 主按钮=品牌深蓝底白字(同官网"提交预约申请") */
.btn.primary { background: var(--brand-navy); color: #fff; box-shadow: 0 4px 12px rgba(26, 50, 96, .3); }
.btn.primary:hover { background: var(--brand-blue); filter: none; }
/* 强调按钮=金底深蓝字(同官网主 CTA), 留给"新建/立即"类动作 */
.btn.gold { background: var(--grad-gold); color: var(--brand-navy-deep); box-shadow: var(--shadow-gold); }
.btn.ghost { background: transparent; border: 1px solid var(--border); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.block { width: 100%; margin-top: 14px; padding: 11px; }
.btn.sm { padding: 7px 12px; font-size: 12px; }
.err { color: var(--danger); font-size: 12px; min-height: 16px; margin-top: 8px; }
.ok-msg { color: var(--ok); font-size: 12px; margin-left: 10px; }

/* ---- 登录: 品牌深蓝渐变整屏 + 白卡片 ---- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--grad-brand); position: relative; overflow: hidden; }
/* 右上角金色光晕(呼应官网首屏装饰) */
.login-wrap::before { content: ''; position: absolute; top: -140px; right: -120px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,160,32,.28), rgba(240,160,32,0) 70%); pointer-events: none; }
.login-card { width: 380px; background: var(--panel); border: none;
  border-radius: 16px; padding: 32px 30px; box-shadow: 0 12px 40px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12);
  position: relative; z-index: 1; }
/* 品牌标记: 金色竖条 + 公司名 */
.login-card .brandline { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.login-card .brandline i { width: 3px; height: 15px; border-radius: 2px; background: var(--grad-gold); }
.login-card .brandline span { font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; color: var(--gold); }
.login-card h1 { font-size: 19px; color: var(--brand-navy); }
.login-card .sub { color: var(--dim); font-size: 13px; margin: 4px 0 10px; }
.login-card .tip { font-size: 11px; color: var(--dim); margin-top: 14px; text-align: center; }

/* ---- 主面板 ---- */
/* ---- 主面板: 侧栏用品牌深蓝渐变(整站最强的品牌识别位) ---- */
.app { display: flex; min-height: 100vh; }
.sidebar { width: 220px; background: var(--grad-brand); border-right: none;
  display: flex; flex-direction: column; padding: 20px 14px; color: #fff; }
.sidebar .brandline { display: flex; align-items: center; gap: 7px; padding: 0 8px 4px; }
.sidebar .brandline i { width: 3px; height: 13px; border-radius: 2px; background: var(--grad-gold); }
.sidebar .brandline span { font-size: 10px; font-weight: 700; letter-spacing: 1.6px; color: var(--gold); }
.brand { font-size: 14.5px; font-weight: 700; padding: 4px 8px 18px; color: #fff; }
nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.nav-item { padding: 9px 12px; border-radius: 10px; font-size: 13.5px; color: rgba(255,255,255,.72);
  cursor: pointer; text-decoration: none; transition: background .15s, color .15s; }
.nav-item:hover { background: rgba(255,255,255,.10); color: #fff; }
/* 选中项: 金色左标 + 金字, 与官网强调色一致 */
.nav-item.active { background: rgba(240,160,32,.16); color: var(--gold); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--gold); }
.side-foot { border-top: 1px solid rgba(255,255,255,.14); padding-top: 12px; display: flex;
  align-items: center; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,.6); }
.side-foot .btn.ghost { border-color: rgba(255,255,255,.24); color: rgba(255,255,255,.85); }
.side-foot .btn.ghost:hover { background: rgba(255,255,255,.10); }
.side-copyright { display: block; margin-top: 10px; padding: 0 4px; font-size: 10.5px; line-height: 1.5;
  color: rgba(255,255,255,.42); text-decoration: none; transition: color .15s; }
.side-copyright:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }

.content { flex: 1; padding: 26px 32px; overflow-y: auto; }
.content h2 { font-size: 20px; margin-bottom: 18px; }
.content h3 { font-size: 15px; margin-bottom: 10px; }

.cards { display: flex; gap: 16px; margin-bottom: 20px; }
/* 数据卡: 顶部一道金色细线, 官网统计数字用的就是金色 */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 22px; min-width: 150px; box-shadow: var(--shadow-card);
  position: relative; overflow: hidden; }
.card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-gold); }
.card-num { font-size: 28px; font-weight: 700; color: var(--brand-navy); }
.card-label { font-size: 12px; color: var(--dim); margin-top: 4px; }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 20px; margin-bottom: 18px; max-width: 620px; box-shadow: var(--shadow-card); }
.row2 { display: flex; gap: 14px; }
.row2 > div { flex: 1; }
.row-inline { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.row-inline input { width: 160px; }
.pill { font-size: 11px; padding: 2px 9px; border-radius: 10px; background: var(--surface); color: var(--dim); font-weight: 400; }
.pill.on { background: rgba(22,163,74,.12); color: var(--ok); }
.qr { width: 150px; height: 150px; border: 1px solid var(--border); border-radius: 8px; margin: 10px 0; display: block; }

/* ---- 表格 ---- */
.page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.tbl { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden; font-size: 13px; }
.tbl th, .tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl th { background: var(--surface); color: var(--dim); font-weight: 600; font-size: 12px; }
.tbl tr:last-child td { border-bottom: none; }
.badge { font-size: 11px; padding: 2px 9px; border-radius: 10px; }
.badge.active { background: rgba(22,163,74,.12); color: var(--ok); }
.badge.disabled { background: var(--surface); color: var(--dim); }
.badge.expired { background: rgba(229,72,77,.12); color: var(--danger); }
.badge.admin { background: rgba(229,72,77,.12); color: var(--danger); }
.badge.member { background: rgba(240,160,32,.16); color: #8a5d00; }
.act { display: flex; gap: 8px; flex-wrap: wrap; }
.act a { font-size: 12px; color: var(--accent); cursor: pointer; text-decoration: none; }
.act a:hover { text-decoration: underline; }
.act a.danger { color: var(--danger); }

/* ---- 弹窗 ---- */
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex;
  align-items: center; justify-content: center; z-index: 50; }
.modal { width: 520px; max-height: 90vh; overflow-y: auto; background: var(--panel);
  border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.2); }
.modal-head { display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 15px; }
.modal-head .x { border: none; background: none; font-size: 22px; cursor: pointer; color: var(--dim); line-height: 1; }
.modal-body { padding: 16px 20px; }
.modal-body h4 { font-size: 12px; margin: 16px 0 4px; color: var(--dim); font-weight: 600; }
.quota-topup-action { display: flex; flex-direction: column; justify-content: flex-end; }
.quota-topup-action label { visibility: hidden; }
.quota-topup-hint { margin: 4px 0 0; font-size: 11px; }
.quota-topup-msg { min-height: 18px; margin: 4px 0 0; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); }
select { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; background: #fff; color: var(--text); outline: none; }
select:focus { border-color: var(--accent); }
input:disabled { background: var(--surface); color: var(--dim); }
textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 13px; font-family: inherit; outline: none; resize: vertical; color: var(--text); }
textarea:focus { border-color: var(--accent); }
.checks { display: flex; gap: 18px; margin-top: 6px; }
.ck { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); margin: 0; }
.ck input { width: auto; }
/* 迷你柱状趋势 */
.spark { display: flex; align-items: flex-end; gap: 6px; height: 90px; padding-top: 6px; }
.spark .bar { flex: 1; background: linear-gradient(180deg, var(--gold-2), var(--gold));
  border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.spark .bar span { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center;
  font-size: 9px; color: var(--dim); white-space: nowrap; }
.spark .bar b { position: absolute; top: -16px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--dim); }
.alert-item { padding: 8px 10px; border: 1px solid rgba(229,72,77,.25); background: rgba(229,72,77,.06);
  border-radius: 8px; margin-bottom: 6px; font-size: 13px; }
.alert-item b { color: var(--danger); }
.badge.warn { background: rgba(229,72,77,.12); color: var(--danger); }
/* 剩余时长告急 */
.remain-low { color: var(--danger); font-weight: 700; }