/* 安评汇品牌主题：深蓝 + 暖橙，覆盖旧版绿色主题 */
:root {
  --bg: #f7f8fa;
  --panel: #ffffff;
  --ink: #1f2937;
  --muted: #5b6675;
  --line: #e5e7eb;
  --line-strong: #d1d5db;
  --brand: #0b3d91;
  --brand-dark: #072b68;
  --brand-soft: #eef3fb;
  --side: #071e46;
  --side-muted: #a9c2ea;
  --danger: #b42318;
  --danger-soft: #fef3f2;
  --serious: #b54708;
  --serious-soft: #fffaeb;
  --suggest: #175cd3;
  --suggest-soft: #eff8ff;
  --shadow: 0 16px 44px rgba(11, 61, 145, 0.10);
  --shadow-soft: 0 4px 16px rgba(11, 61, 145, 0.06);
  --radius: 10px;
  --radius-sm: 8px;
}

body {
  background-color: #f7f8fa;
}

.sidebar {
  background: #071e46;
}

.sidebar .nav-item.is-active {
  color: #fff;
  background: rgba(245, 158, 11, 0.14);
  box-shadow: inset 3px 0 0 #f59e0b;
}

.sidebar .nav-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

.brand-mark {
  color: #fff;
  background: linear-gradient(145deg, #0b3d91, #072b68);
}

.topbar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
}

.btn-primary,
button.primary,
.button-primary {
  background: #0b3d91;
  border-color: #0b3d91;
  color: #fff;
}

.btn-primary:hover,
button.primary:hover,
.button-primary:hover {
  background: #072b68;
  border-color: #072b68;
}

.btn-primary:disabled {
  background: #e5e7eb;
  border-color: #e5e7eb;
  color: #98a2b3;
  box-shadow: none;
}

.env-pill .dot {
  background: #f59e0b;
}

a {
  color: #0b3d91;
}

.eyebrow {
  color: #0b3d91;
}

.icon-btn:hover {
  color: #0b3d91;
  border-color: #b9c9e8;
}

.upload-zone.is-drag,
.upload-zone:hover {
  border-color: #0b3d91;
  background: #eef3fb;
}

.tab.is-active,
.tab.active {
  color: #0b3d91;
  border-color: #0b3d91;
}

.step-index,
.quota-ring strong {
  color: #071e46;
}

.status-pill.ok {
  color: #067647;
  background: #ecfdf3;
}

/* ---------- 套餐与额度 ---------- */
.usage-grid { align-items: stretch; }
.billing-current-name { margin: 4px 0 6px; font-size: 20px; font-weight: 800; color: var(--brand); }
.billing-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  margin: 30px 0 14px;
}
.billing-head h2 { margin: 4px 0 0; font-size: 24px; }
.billing-head p { margin: 6px 0 0; }
.billing-toggle {
  display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px;
  background: #edf1f7; border: 1px solid #dde3ec;
}
.billing-toggle button {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 700;
}
.billing-toggle button.is-active { background: #fff; color: var(--brand); box-shadow: 0 2px 8px rgba(11,61,145,.12); }
.billing-plans {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  margin-bottom: 26px;
}
.plan-card {
  position: relative; display: flex; flex-direction: column;
  padding: 22px 20px 18px; border: 1px solid var(--line); border-radius: 14px;
  background: #fff; box-shadow: var(--shadow-soft); min-height: 280px;
}
.plan-card.is-featured { border-color: #f2b84b; box-shadow: 0 10px 30px rgba(245,158,11,.14); }
.plan-card.is-single { background: #fbfcff; }
.plan-badge {
  position: absolute; top: 14px; right: 14px; padding: 4px 9px; border-radius: 999px;
  background: #fff3d6; color: #9a5b00; font-size: 11px; font-weight: 800;
}
.plan-name { font-size: 15px; font-weight: 800; color: var(--ink); }
.plan-price { display: flex; align-items: baseline; gap: 5px; margin: 16px 0 8px; }
.plan-price strong { font-size: 32px; letter-spacing: -.03em; color: var(--brand); }
.plan-price span { color: var(--muted); font-size: 13px; }
.plan-unit { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.plan-discount { padding: 2px 7px; border-radius: 999px; background: #fff1d6; color: #9a5b00; font-weight: 800; }
.plan-savings { margin: 5px 0 10px; color: #b45309; font-size: 11px; line-height: 1.5; }
.plan-desc { min-height: 38px; margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.plan-points { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 7px; }
.plan-points li { position: relative; padding-left: 16px; color: #3f4a5a; font-size: 12px; }
.plan-points li::before { content: "✓"; position: absolute; left: 0; color: #d97706; font-weight: 900; }
.plan-buy { margin-top: auto; width: 100%; }
.billing-orders { margin-top: 4px; }
.billing-orders .section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.billing-order-line { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.billing-order-line strong { color: var(--brand); }
.btn-small { padding: 7px 12px; font-size: 12px; }
@media (max-width: 1080px) { .billing-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .billing-head { align-items: flex-start; flex-direction: column; }
  .billing-plans { grid-template-columns: 1fr; }
  .plan-card { min-height: 0; }
}