/* QuidCast account page. Uses the shared design tokens from qc-design.css
   (--bg, --paper, --paper2, --ink, --muted, --accent, --border, --teal, ...),
   so it follows the [data-theme="dark"] switch automatically. */
.qc-account{max-width:840px!important;padding:32px 24px 80px!important;margin-inline:auto;font-family:var(--font-body,'Plus Jakarta Sans',Arial,sans-serif)}
.qc-account *{box-sizing:border-box}
.qc-account h1,.qc-account h2,.qc-account h3{font-family:inherit;letter-spacing:-.03em;line-height:1.15;color:var(--ink)}
.qc-account h2{font-size:clamp(21px,2.4vw,27px);margin:0 0 12px}
.qc-account h3{font-size:19px;margin:0 0 10px}
.qc-account p{line-height:1.7;margin:0 0 14px}
.qc-account a{color:var(--accent)}
.qc-account a:focus-visible,.qc-account button:focus-visible,.qc-account summary:focus-visible,.qc-account input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.acct-hero{padding:34px 0 26px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:24px}
.acct-eyebrow{font-size:10px!important;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 14px!important}
.acct-hero h1{font-size:clamp(34px,4.6vw,52px);line-height:1.05;margin:0 0 16px}
.acct-lede{max-width:620px;color:var(--muted);font-size:17px;margin:0!important}

.acct-status{min-height:1.5em;margin:0 0 18px;padding:0;font-size:14.5px;color:var(--muted)}
.acct-status:empty{display:none}
.acct-status[data-tone="ok"]{color:var(--teal)}
.acct-status[data-tone="warn"]{color:var(--accent)}
.acct-status[data-tone="error"]{color:var(--loss,#b93530)}

.acct-card{background:var(--paper);border:1px solid var(--border);border-radius:4px;padding:28px;margin-bottom:22px}
.acct-card-teal{border-left:4px solid var(--teal)}
.acct-card-warn{border-left:4px solid var(--accent)}
.acct-card[hidden]{display:none}
.acct-muted{color:var(--muted)}
.acct-help{font-size:13px;color:var(--muted);margin:10px 0 0!important}
.acct-fineprint{font-size:12.5px;color:var(--muted);margin:16px 0 0!important}
.acct-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.acct-form label{display:block;font-size:13px;font-weight:700;margin:0 0 8px;color:var(--ink)}
.acct-form-row{display:flex;gap:10px;flex-wrap:wrap}
.acct-form-row input{flex:1 1 240px;min-height:48px;padding:10px 14px;font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--border2,var(--border));border-radius:4px}
.acct-form-row input::placeholder{color:var(--dim,var(--muted));opacity:.8}
.acct-form-row input[aria-invalid="true"]{border-color:var(--loss,#b93530)}

.acct-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 18px;border-radius:4px;border:1px solid var(--accent);background:var(--accent);color:var(--bg)!important;font:inherit;font-size:13px;font-weight:700;letter-spacing:.01em;cursor:pointer;text-decoration:none;line-height:1.3;transition:filter .15s,border-color .15s}
.acct-btn:hover{filter:brightness(.94)}
.acct-btn[disabled],.acct-btn[aria-busy="true"]{opacity:.6;cursor:progress;filter:none}
.acct-btn-secondary{background:transparent;color:var(--ink)!important;border-color:var(--border)}
.acct-btn-secondary:hover{border-color:var(--accent);filter:none}
.acct-btn-danger{background:transparent;color:var(--loss,#b93530)!important;border-color:var(--loss,#b93530)}
.acct-btn-danger:hover{background:var(--loss,#b93530);color:#fff!important;filter:none}
.acct-linklike{background:none;border:0;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}

.acct-details{border:1px solid var(--border);border-radius:4px;background:var(--paper2);margin-top:18px}
.acct-details summary{cursor:pointer;padding:12px 16px;font-weight:700;font-size:14.5px;list-style:none;position:relative;color:var(--ink)}
.acct-details summary::-webkit-details-marker{display:none}
.acct-details summary::after{content:'+';position:absolute;right:16px;color:var(--accent);font-weight:700}
.acct-details[open] summary::after{content:'\2212'}
.acct-details>*:not(summary){padding:0 16px}
.acct-details>p{font-size:14.5px;color:var(--muted)}
.acct-details>form{padding-bottom:16px}
.acct-danger{border-color:color-mix(in srgb,var(--loss,#b93530) 35%,var(--border))}
.acct-danger summary{color:var(--loss,#b93530)}
.acct-danger summary::after{color:var(--loss,#b93530)}

.acct-list{margin:0 0 6px 18px;padding:0;line-height:1.65}
.acct-list li{margin-bottom:6px}

.acct-row-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.acct-row-head h2{margin:0}
.acct-plan-badge{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:2px;background:var(--paper2);color:var(--muted);border:1px solid var(--border)}
.acct-plan-badge[data-plan="plus"]{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.acct-plan-badge[data-plan="attention"]{background:var(--accent-dim,#f8e9df);color:var(--accent);border-color:var(--accent)}

.acct-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px 22px;margin:14px 0 14px}
.acct-facts>div{border-top:1px solid var(--border);padding-top:10px}
.acct-facts dt{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.acct-facts dd{margin:4px 0 0;font-size:16px;color:var(--ink);overflow-wrap:anywhere}
.acct-facts [hidden]{display:none}

.acct-meter{height:6px;border-radius:3px;background:var(--paper2);overflow:hidden;margin:0 0 22px}
.acct-meter span{display:block;height:100%;background:var(--teal);border-radius:3px;transition:width .3s}
.acct-meter span[data-full="true"]{background:var(--accent)}

.acct-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}

.acct-upgrade{margin-top:26px;padding-top:22px;border-top:1px solid var(--border)}
.acct-upgrade>p{color:var(--muted);font-size:15px}
.acct-plans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.acct-plan{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:18px;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--ink);font:inherit;cursor:pointer;min-height:96px;transition:border-color .15s,transform .15s}
.acct-plan:hover{border-color:var(--accent)}
.acct-plan[aria-busy="true"]{opacity:.6;cursor:progress}
.acct-plan-featured{border-color:var(--accent);border-top:3px solid var(--accent)}
.acct-plan-price{font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1}
.acct-plan-price small{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.acct-plan-note{font-size:12.5px;color:var(--muted)}
.acct-plan-tag{position:absolute;top:10px;right:10px;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);background:var(--accent-dim,#f8e9df);padding:4px 7px;border-radius:2px}
.acct-plan::after{content:'Continue to Stripe \2192';font-size:12px;font-weight:700;color:var(--accent);margin-top:6px}

.acct-plus-note{margin-top:22px;padding:18px 20px;border-left:3px solid var(--teal);background:var(--teal-dim,rgba(26,122,110,.07));border-radius:0 4px 4px 0}
.acct-plus-note h3{margin-bottom:8px}

.acct-footnote{margin-top:36px;padding-top:26px;border-top:2px solid var(--border)}
.acct-footnote h2{font-size:19px}
.acct-table{width:100%;border-collapse:collapse;font-size:14.5px;margin:10px 0 14px;background:var(--paper);border:1px solid var(--border);border-radius:4px;overflow:hidden}
.acct-table th,.acct-table td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:top}
.acct-table th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--paper2)}
.acct-table th:first-child,.acct-table td:first-child{color:var(--teal);width:50%}
.acct-table td:last-child{color:var(--muted)}
.acct-table tr:last-child td{border-bottom:0}

.qc-plus-badge{font-size:12px;color:var(--muted)}
.qc-plus-badge .qc-plus-badge-link{color:var(--accent);font-weight:700;text-decoration:none}

@media (max-width:640px){
  .qc-account{padding:24px 16px 72px!important}
  .acct-card{padding:20px}
  .acct-plans{grid-template-columns:1fr}
  .acct-form-row .acct-btn{width:100%}
  .acct-table th:first-child,.acct-table td:first-child{width:auto}
}
@media (prefers-reduced-motion:reduce){.acct-meter span,.acct-btn,.acct-plan{transition:none}}
