/* 账户页 */

.account { padding: 40px 0 80px; }
.account > h1 { font-size: 26px; margin: 0 0 22px; font-weight: 700; letter-spacing: -.7px; }

.panel { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 20px; overflow: hidden; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: 15px; font-weight: 650; }
.panel-head .hint { font-size: 12.5px; color: var(--text-3); }
.panel .loading { padding: 40px; text-align: center; color: var(--text-3); }

/* ── 当前套餐 ── */
.plan-cur { display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 22px 20px; flex-wrap: wrap; }
.plan-label { font-size: 12.5px; color: var(--text-3); margin-bottom: 5px; }
.plan-name { font-size: 22px; font-weight: 700; letter-spacing: -.5px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-tip { margin: 10px 0 0; font-size: 13px; color: var(--text-2); max-width: 60ch; line-height: 1.7; }
.plan-tip b { color: var(--text); }
.plan-act { flex: none; }

.tag { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 5px;
  border: 1px solid transparent; letter-spacing: .01em; }
.tag.ok   { background: var(--up-soft);   color: var(--up);   border-color: var(--up-line); }
.tag.off  { background: var(--down-soft); color: var(--down); border-color: var(--down-line); }
.tag.wait { background: var(--surface-3); color: var(--text-2); border-color: var(--line-strong); }

/* ── 额度 ── */
.usage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--line); }
@media (max-width: 860px) { .usage-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .usage-grid { grid-template-columns: 1fr; } }

.uitem { background: var(--surface); padding: 18px 20px; }
.ulabel { font-size: 12.5px; color: var(--text-3); margin-bottom: 8px; }
.uval { display: flex; align-items: baseline; gap: 6px; margin-bottom: 12px; }
.uval b { font-size: 26px; font-weight: 700; letter-spacing: -.6px; line-height: 1.1; }
.uval span { font-size: 13px; color: var(--text-3); }
.unote { margin: 0; font-size: 12px; color: var(--text-3); line-height: 1.6; }

/* 进度条:正常 → 接近上限 → 已超,只靠颜色表意,不加装饰 */
.bar { height: 5px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px;
  transition: width .3s var(--ease); }
.bar.warn i { background: var(--warn); }
.bar.over i { background: var(--down); }

/* ── 提醒条 ── */
.alert { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid; border-radius: var(--radius); padding: 13px 16px; margin-bottom: 14px;
  font-size: 13.5px; }
.alert b { font-weight: 650; flex: none; }
.alert span { color: var(--text-2); flex: 1; min-width: 200px; }
.alert .btn { flex: none; }
.alert.down { background: var(--down-soft); border-color: var(--down-line); }
.alert.down b { color: var(--down); }
.alert.warn { background: #fdf4e3; border-color: #e8d0a0; }
.alert.warn b { color: var(--warn); }

/* ── 订单表 ── */
.ord-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
.ord-table th, .ord-table td { padding: 11px 16px; text-align: left;
  border-bottom: 1px solid var(--line); white-space: nowrap; }
.ord-table thead th { background: var(--surface-2); font-weight: 600;
  font-size: 12.5px; color: var(--text-2); }
.ord-table tbody tr:last-child td { border-bottom: 0; }
.ord-table tbody tr:hover { background: var(--surface-2); }
.ord-table .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ord-table .ono { font-size: 11.5px; color: var(--text-2); }
.ord-table .meta { font-size: 12px; color: var(--text-3); }
.ord-table .empty { text-align: center; color: var(--text-3); padding: 36px; }