:root {
  --account-bg: var(--bg, #f7faf5);
  --account-surface: var(--surface, #fff);
  --account-surface-2: var(--surface-2, #f1f6f1);
  --account-text: var(--text, #17221d);
  --account-muted: var(--muted, #6d786f);
  --account-line: var(--line, #d2ddd4);
  --account-line-strong: var(--line-strong, #aebfb4);
  --account-shadow: 0 20px 60px rgba(30, 48, 38, .08);
}
* { box-sizing: border-box; }
body.account-page {
  margin: 0;
  min-height: 100vh;
  color: var(--account-text);
  background: var(--account-bg);
}
body.account-page.theme-dark {
  --account-bg: #202020;
  --account-surface: #262626;
  --account-surface-2: #303030;
  --account-text: #f4f4f0;
  --account-muted: #b6bab4;
  --account-line: #555;
  --account-line-strong: #686868;
  --account-shadow: none;
}
.account-topbar {
  min-height: 48px;
  color: var(--account-text);
  background: var(--account-surface);
}
.account-brand { min-width:420px; }
.account-logo { border:1px solid var(--account-line-strong); font-weight:950; }
.account-nav { gap:6px; }
.account-nav a {
  height:28px;
  min-width:54px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:var(--radius);
  color:var(--account-muted);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:850;
}
.account-nav a:hover { border-color:var(--account-line-strong); color:var(--account-text); }
.account-nav a.active { color:var(--account-text); }
.account-button,.account-page button { height:38px; padding:0 16px; border:1px solid var(--account-line-strong); border-radius:999px; background:var(--account-surface); color:var(--account-text); text-decoration:none; display:inline-flex; align-items:center; justify-content:center; font-weight:900; font-size:14px; }
.account-button.primary { background:var(--account-text); color:var(--account-bg); border-color:var(--account-text); }
.account-topbar .account-button,
.account-topbar button {
  height:32px;
  padding:0 11px;
  border-radius:var(--radius);
  font-size:13px;
  font-weight:650;
}
.account-shell { max-width:1440px; margin:0 auto; padding:28px 34px; display:grid; grid-template-columns:220px minmax(0,1fr); gap:18px; }
.account-sidebar { position:sticky; top:94px; height:calc(100vh - 122px); padding:12px; border:1px solid var(--account-line); border-radius:24px; background:var(--account-surface); box-shadow:var(--account-shadow); }
.account-sidebar-title { padding:12px 12px 14px; color:var(--account-muted); font-size:13px; font-weight:900; }
.account-sidebar button { width:100%; height:46px; justify-content:flex-start; margin-bottom:8px; border-radius:15px; background:transparent; box-shadow:none; }
.account-sidebar button.active { background:var(--account-surface-2); box-shadow:inset 0 0 0 1px var(--account-line); }
.account-main { min-width:0; }
.account-muted { margin:6px 0 0; color:var(--account-muted); font-size:13px; font-weight:750; }
.account-user-badge { min-height:32px; padding:0 11px; display:inline-flex; align-items:center; border:1px solid var(--account-line); border-radius:var(--radius); background:var(--account-surface); color:var(--account-muted); font-weight:850; }
.account-panel.hidden { display:none; }
.credit-overview { display:grid; grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr); gap:12px; margin-bottom:12px; }
.credit-balance-card,.account-card,.account-stat-grid > div { border:1px solid var(--account-line); border-radius:24px; background:var(--account-surface); box-shadow:var(--account-shadow); }
.credit-balance-card { min-height:180px; padding:24px; display:grid; align-content:center; }
.credit-balance-card span,.credit-balance-card em,.account-stat-grid span { color:var(--account-muted); font-size:12px; font-style:normal; font-weight:850; }
.credit-balance-card strong { margin-top:8px; color:var(--account-text); font-size:72px; line-height:.9; letter-spacing:-.06em; }
.account-stat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.account-stat-grid.compact { grid-template-columns:repeat(4,minmax(0,1fr)); }
.account-stat-grid > div { min-height:84px; padding:16px; box-shadow:none; background:var(--account-surface-2); }
.account-stat-grid strong { display:block; margin-top:8px; font-size:24px; color:var(--account-text); }
.account-grid-two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.account-card { padding:18px; margin-bottom:12px; }
.account-card-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.account-card h2 { margin:0 0 12px; font-size:20px; }
.account-card-head h2 { margin:0; }
.credit-ledger-list { display:grid; gap:8px; }
.ledger-filter-row { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.account-page .ledger-filter-row button { height:34px; padding:0 14px; border-radius:999px; }
.account-page .ledger-filter-row button.active { background:var(--account-text); color:var(--account-bg); border-color:var(--account-text); }
.credit-ledger-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border:1px solid var(--account-line); border-radius:15px; background:var(--account-surface-2); }
.credit-ledger-row div { min-width:0; display:grid; gap:3px; }
.credit-ledger-row strong { color:var(--account-text); font-size:14px; }
.credit-ledger-row span { min-width:0; overflow:hidden; color:var(--account-muted); font-size:12px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.credit-ledger-row b { font-size:15px; font-weight:950; color:var(--account-text); }
.credit-ledger-row b.is-plus { color:#2f8a69; }
.credit-ledger-row b.is-minus { color:#b65449; }
.account-rule-grid { display:grid; grid-template-columns:repeat(5,minmax(100px,1fr)); gap:8px; }
.account-rule-grid div { padding:12px; border:1px solid var(--account-line); border-radius:15px; background:var(--account-surface-2); }
.account-rule-grid span { color:var(--account-muted); font-size:12px; font-weight:850; }
.account-rule-grid strong { display:block; margin-top:7px; color:var(--account-text); font-size:15px; }
.account-input-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }
.account-input-row.small { grid-template-columns:190px auto; }
.recharge-quick-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:10px; }
.account-page .recharge-quick-row button { height:42px; border-radius:15px; }
.recharge-input-row { grid-template-columns:minmax(0,1fr) 128px; }
.recharge-plan-card .account-card-head { margin-bottom:14px; }
.recharge-plan-card .account-card-head span { display:none; }
.recharge-plan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; }
.recharge-plan-option {
  position:relative;
  min-height:96px;
  width:100%;
  padding:14px 16px;
  display:grid !important;
  grid-template-rows:18px 26px 24px;
  align-content:start;
  justify-content:stretch !important;
  justify-items:start;
  gap:6px;
  border-radius:18px !important;
  text-align:left;
  background:var(--account-surface-2) !important;
  border-color:var(--account-line) !important;
  box-shadow:none !important;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.recharge-plan-option:hover { border-color:var(--account-line-strong) !important; transform:translateY(-1px); }
.recharge-plan-option .plan-name {
  width:100%;
  color:var(--account-text);
  font-size:16px;
  line-height:18px;
  font-weight:950;
  letter-spacing:-.02em;
  text-align:left;
}
.recharge-plan-option .plan-price {
  width:100%;
  display:flex;
  align-items:baseline;
  gap:6px;
  color:var(--account-muted);
  font-size:12px;
  font-weight:850;
  line-height:26px;
}
.recharge-plan-option .plan-price b {
  color:var(--account-text);
  font-size:23px;
  font-weight:950;
  letter-spacing:-.04em;
}
.recharge-plan-option .plan-price em {
  color:var(--account-muted);
  font-style:normal;
  font-size:12px;
  font-weight:800;
}
.recharge-plan-option .plan-benefits {
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  gap:5px;
  overflow:hidden;
}
.recharge-plan-option .plan-benefits i {
  min-width:0;
  height:24px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--account-line);
  border-radius:999px;
  background:var(--account-surface);
  color:var(--account-muted);
  font-size:11px;
  line-height:24px;
  font-style:normal;
  font-weight:900;
  text-align:center;
  white-space:nowrap;
  transform:translateY(1px);
}
.recharge-plan-option.active {
  background:color-mix(in srgb, var(--account-surface-2) 72%, var(--account-surface)) !important;
  border-color:var(--account-line-strong) !important;
}
.recharge-plan-option.active::after {
  content:"";
  position:absolute;
  right:14px;
  top:14px;
  width:10px;
  height:10px;
  border:1px solid var(--account-line);
  border-radius:50%;
  background:var(--account-text);
  box-shadow:0 0 0 4px var(--account-surface);
}
.account-page input,.account-page select { width:100%; height:38px; border:1px solid var(--account-line); border-radius:13px; background:var(--account-surface); color:var(--account-text); padding:0 12px; font-weight:800; }
.account-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.account-form-grid label { display:grid; gap:5px; color:var(--account-muted); font-size:13px; font-weight:850; }
.account-form-grid label.full { grid-column:1 / -1; }
.account-param-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.account-param-grid label { padding:10px; border:1px solid var(--account-line); border-radius:18px; background:var(--account-surface-2); }
.account-param-grid input,.account-param-grid select { background:var(--account-surface); }
.param-help { display:block; margin-top:8px; color:color-mix(in srgb, var(--account-muted) 82%, transparent); font-size:12px; line-height:1.45; font-weight:750; }
.param-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.param-mini-actions { display:flex; gap:6px; }
.account-page .param-mini-actions button { height:24px; padding:0 8px; border-radius:999px; font-size:11px; font-weight:900; }
.linked-param-row { display:grid; grid-template-columns:1fr; gap:8px; align-items:center; }
.linked-title-row { display:flex; align-items:center; gap:10px; }
.linked-title-row em { color:color-mix(in srgb, var(--account-muted) 72%, transparent); font-size:12px; font-style:normal; font-weight:750; }
.linked-param-note { color:color-mix(in srgb, var(--account-muted) 82%, transparent); font-size:12px; font-weight:800; line-height:1.35; }
.linked-param-field input[type="number"] { text-align:center; }
.signed-number { position:relative; display:block; }
.signed-number em { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--account-muted); font-style:normal; font-weight:950; pointer-events:none; }
.signed-number input { padding-left:24px; }

.text-input-backdrop { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; background:rgba(0,0,0,.42); }
.text-input-card { width:min(420px,calc(100vw - 40px)); padding:18px; border:1px solid var(--account-line-strong); border-radius:22px; background:var(--account-surface); color:var(--account-text); }
.text-input-card h3 { margin:0 0 12px; font-size:18px; }
.text-input-control { width:100%; height:46px; border:1px solid var(--account-line); border-radius:14px; background:var(--account-surface-2); color:var(--account-text); padding:0 12px; font-weight:900; }
.text-input-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }
.account-save { margin-top:14px; min-width:160px; }
.account-tips { min-height:42px; padding:10px 12px; border:1px dashed var(--account-line); border-radius:14px; color:var(--account-muted); font-weight:800; }
.account-project-table-wrap table { width:100%; border-collapse:collapse; }
.account-project-table-wrap th,.account-project-table-wrap td { padding:13px 10px; border-bottom:1px solid var(--account-line); text-align:left; }
.account-project-table-wrap th { color:var(--account-muted); font-size:12px; }
.account-project-actions { display:flex; gap:8px; }
.account-pagination { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; }
.empty-list { color:var(--account-muted); padding:18px; text-align:center; }
@media (max-width:1000px){ .account-shell,.credit-overview,.account-grid-two{grid-template-columns:1fr}.account-sidebar{position:static;height:auto}.account-stat-grid.compact,.account-rule-grid,.account-param-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.account-nav{display:none} }
.handle-settings-card { width:min(460px,calc(100vw - 40px)); }
.handle-settings-list { display:grid; gap:10px; }
.handle-settings-list label { display:grid; grid-template-columns:1fr 110px; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--account-line); color:var(--account-text); font-weight:900; }
.handle-settings-list label:last-child { border-bottom:0; }
.handle-settings-list input { width:100%; height:40px; text-align:center; }