/* account + reseller pages: extends checkout.css (same tokens, panels, buttons) */
.wrap.wide, #dash { max-width: 720px; display: grid; gap: 14px; }
.wrap.wide .brand { margin-bottom: 0; }
.acct-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.acct-top nav { display: flex; gap: 16px; font-size: 14px; }
.acct-top nav a { color: var(--muted); text-decoration: none; }
.acct-top nav a:hover, .acct-top nav a[aria-current] { color: var(--text); }
h2 { margin: 0 0 12px; font-size: 17px; letter-spacing: -0.01em; }
.center-text { text-align: center; margin: 14px 0 0; }

input[type=text], input[type=password], input[type=number], input[type=email] {
  height: 44px; padding: 0 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  outline: none; transition: border-color .15s; color: var(--text); font: inherit; width: 100%;
}
input:focus { border-color: var(--accent); }

.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: none; padding: 9px 6px; border-radius: 8px; color: var(--muted); cursor: pointer; font-weight: 550; }
.seg button[aria-pressed="true"] { background: var(--line-hi); color: var(--text); }

.bal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.bal { font-size: 38px; letter-spacing: -0.025em; margin: 2px 0 4px; font-variant-numeric: tabular-nums; }
.badge { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.badge.ok { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }
.badge.wait { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.badge.bad { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }
.badge.dim { background: var(--card); color: var(--muted); }

.amount-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.amount-row input { width: 130px; flex: none; }
.cur-sign { color: var(--muted); font-weight: 600; }
.quick { display: flex; gap: 6px; flex-wrap: wrap; }
.quick button { height: 34px; padding: 0 12px; border-radius: 8px; background: var(--card); border: 1px solid var(--line);
  color: var(--text); cursor: pointer; font-size: 13px; }
.quick button:hover { border-color: var(--accent); }

.progress { height: 8px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); overflow: hidden; margin: 6px 0 8px; }
.progress i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .4s ease; }
.api-box { margin-top: 16px; display: grid; gap: 8px; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; }

.list-head { display: flex; justify-content: space-between; align-items: baseline; }
.list { display: grid; }
.row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 11px 0; border-top: 1px solid var(--line);
  text-decoration: none; color: inherit; }
.row:first-child { border-top: 0; }
a.row:hover .r-title { color: var(--accent); }
.r-title { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-sub { font-size: 12.5px; color: var(--muted); }
.r-right { text-align: right; display: grid; gap: 4px; justify-items: end; font-variant-numeric: tabular-nums; }
.plus { color: var(--good); }
.empty { color: var(--muted); font-size: 14px; padding: 8px 0; }
.more { margin-top: 10px; }

.cta-slot:empty { display: none; }
.cta-slot { margin-top: 16px; }

/* reseller page */
.small-h { margin: 16px 0 4px; font-size: 14.5px; }
.hero h1 { font-size: 28px; letter-spacing: -0.02em; }
.hero p { margin: 8px 0 0; }
.tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 12px; }
.tier { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.tier b { display: block; font-size: 22px; letter-spacing: -0.02em; }
.tier span { font-size: 12.5px; color: var(--muted); }
.steps { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.contacts { display: grid; gap: 8px; margin-top: 14px; }
.contact { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.contact code { font-family: "IBM Plex Mono", ui-monospace, monospace; }

/* API docs */
.doc h2 { margin-top: 6px; }
.doc h3 { margin: 18px 0 8px; font-size: 15px; }
.doc p, .doc li { font-size: 14.5px; }
.doc pre { margin: 8px 0; padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  overflow-x: auto; font: 13px/1.5 "IBM Plex Mono", ui-monospace, monospace; }
.doc code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 8px 0; }
.doc th, .doc td { text-align: left; padding: 7px 8px; border-top: 1px solid var(--line); vertical-align: top; }
.doc th { color: var(--muted); font-weight: 550; border-top: 0; }
.method { display: inline-block; min-width: 44px; font: 600 11.5px "IBM Plex Mono", monospace; padding: 2px 6px; border-radius: 6px;
  text-align: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.method.post { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }

@media (max-width: 560px) {
  .bal { font-size: 32px; }
  .row { grid-template-columns: 1fr; }
  .r-right { justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; }
}