/* A quiet account surface, using the existing SpeechCombat palette. */
.account-club { scroll-margin-top:100px; margin-bottom:28px; }
.account-club h2 { margin:0; }
.account-club > p,.account-club-connect > p { max-width:66ch; line-height:1.6; }
.account-club-actions { display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; margin:20px 0 12px; }
.account-club-actions form { margin:0; }
.account-club-actions button,.account-club-connect button { font-family:inherit; cursor:pointer; border:0; }
.account-club-actions button:disabled { opacity:.65; cursor:wait; }
.account-club-actions button:focus-visible,.account-club-connect button:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.account-club .account-action:not(.secondary),.account-club-connect .account-action:not(.secondary) { background:#D6002B; color:#fff; }
.account-club .account-action:not(.secondary):hover,.account-club-connect .account-action:not(.secondary):hover { background:#BA0026; filter:none; }
.account-club-benefits { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:24px 0; }
.account-club-benefits dt { color:var(--text2); font-size:13px; margin-bottom:6px; }
.account-club-benefits dd { margin:0; font-size:17px; font-weight:600; }
.account-club-notice { padding:12px 16px; background:var(--surface-hover); border-radius:12px; }
.account-club-join { margin-top:24px; padding-top:24px; border-top:1px solid var(--border); }
.account-club-join h3 { margin:0 0 8px; }
.account-club-join p { max-width:66ch; }
.account-club-currency { display:inline-flex; align-items:center; min-height:44px; text-underline-offset:4px; }
.account-club-connect .auth-telegram { justify-content:flex-start; margin:28px 0 16px; }
@media(max-width:520px) {
  .account-club-benefits { grid-template-columns:1fr; gap:16px; }
  .account-club .account-card-top { flex-direction:column; }
  .account-club-actions .account-action { white-space:normal; text-align:center; }
}
.sc-profile-avatar { font-family:inherit; flex-shrink:0; width:44px; height:44px; }
.sc-profile-dropdown { width:280px; max-width:calc(100vw - 32px); border-radius:16px; box-shadow:var(--header-menu-shadow); padding:8px; }
.account-menu-heading { padding:10px 12px 14px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.account-menu-heading strong,.account-menu-heading span { display:block; overflow-wrap:anywhere; }
.account-menu-heading strong { font-size:14px; }
.account-menu-heading span { font-size:12px; color:var(--text2); margin-top:5px; }
.sc-profile-dropdown-item { min-height:44px; border-radius:9px; text-decoration:none; padding:10px 12px; box-sizing:border-box; }
.sc-profile-dropdown-item svg { flex-shrink:0; }
.sc-profile-menu a:focus-visible,.sc-profile-menu button:focus-visible,.account-wrap a:focus-visible,.account-wrap summary:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.account-wrap { max-width:960px; margin:12px auto 48px; color:var(--text); }
.account-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:24px; }
.account-heading h1 { font-size:28px; line-height:1.2; letter-spacing:-.7px; margin:16px 0 8px; }
.account-heading p { margin:0; color:var(--text2); font-size:14px; }
.account-back { color:var(--text2); text-decoration:none; font-size:13px; display:inline-flex; align-items:center; min-height:36px; }
.account-action { display:inline-flex; justify-content:center; align-items:center; padding:12px 18px; min-height:44px; box-sizing:border-box; border-radius:10px; background:var(--blue); color:#fff; font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; }
.account-action:hover { filter:brightness(1.08); }
.account-action.secondary { background:var(--surface-hover); color:var(--text); border:1px solid var(--border); }
.account-nav { display:flex; gap:8px; border-bottom:1px solid var(--border); margin-bottom:24px; }
.account-nav a { display:block; padding:14px 16px; min-height:44px; box-sizing:border-box; color:var(--text2); text-decoration:none; font-size:14px; }
.account-nav a[aria-current] { color:var(--text); border-bottom:2px solid var(--red); font-weight:600; }
@media(max-width:380px) { .account-nav { gap:4px; } .account-nav a { flex:1; min-width:0; padding:14px 8px; text-align:center; font-size:13px; } }
.account-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:20px; align-items:start; }
.account-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px; margin-bottom:20px; min-width:0; }
.account-card h2,.account-help h2 { font-size:18px; line-height:1.4; margin:0 0 12px; font-weight:650; }
.account-card p { font-size:14px; color:var(--text2); line-height:1.6; margin:8px 0 16px; }
.account-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.account-status { color:var(--blue); background:var(--surface-hover); border:1px solid var(--border); font-size:12px; border-radius:7px; padding:5px 8px; white-space:nowrap; }
.account-limits { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:20px 0; margin:0; border-block:1px solid var(--border); }
.account-limits dt { font-size:12px; color:var(--text2); margin-bottom:8px; }
.account-limits dd { margin:0; font-size:22px; font-weight:650; letter-spacing:-.5px; }
.account-card .account-note,.account-note { color:var(--text2); font-size:12px; line-height:1.55; }
.account-notice { margin-top:20px; padding:14px 0 0; border-top:1px solid var(--border); }
.account-notice strong { font-size:13px; font-weight:600; }
.account-notice span { display:block; color:var(--text2); font-size:12px; line-height:1.5; margin-top:6px; }
.account-email { overflow-wrap:anywhere; }
.account-link-row { display:flex; justify-content:space-between; padding:16px 0; color:var(--text); text-decoration:none; border-block:1px solid var(--border); font-size:14px; }
.account-auth-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:20px; font-size:13px; }
.account-wrap a:not(.account-action):not(.account-back):not(.account-link-row) { color:var(--text); }
.account-history { scroll-margin-top:90px; }
.account-history-item { padding:18px 0; border-top:1px solid var(--border); }
.account-history-top { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.account-history-top h3 { margin:0 0 6px; font-size:14px; line-height:1.4; font-weight:600; }
.account-history-top p { margin:0; font-size:12px; }
.account-history-top a { font-size:13px; padding:12px 0; }
.account-history summary,.account-help summary { font-size:13px; cursor:pointer; padding:12px 0; min-height:44px; box-sizing:border-box; }
.account-result { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; font-size:14px; padding:12px 0; max-width:70ch; }
.account-empty { padding:20px 0; }
.account-empty h3 { font-size:16px; font-weight:600; }
.account-empty a { display:inline-block; padding:10px 0; font-size:14px; }
.account-help { padding:8px 4px; max-width:700px; }
.account-help details { border-bottom:1px solid var(--border); }
.account-help p { font-size:13px; line-height:1.6; color:var(--text2); }
.account-settings-intro { color:var(--text2); font-size:13px; line-height:1.5; margin:0 0 20px; }
@media(max-width:700px) {
  .account-wrap { margin-top:0; }
  .account-heading { flex-direction:column; align-items:flex-start; gap:20px; }
  .account-heading h1 { font-size:25px; }
  .account-heading>.account-action { width:100%; }
  .account-grid { grid-template-columns:1fr; gap:0; }
  .account-card { padding:20px; }
  .account-history-top { align-items:flex-start; flex-wrap:wrap; gap:8px; }
  .sc-profile-avatar { width:44px; height:44px; }
}
@media(prefers-reduced-motion:reduce) { .sc-profile-dropdown.show { animation:none; } }

/* Sandbox-inspired account sheet; all content is still rendered by Django. */
.account-wrap { max-width:720px; background:var(--surface); border:1px solid var(--border); border-radius:24px; padding:32px; box-sizing:border-box; }
.account-heading { display:block; margin-bottom:24px; }
.account-heading h1 { font-size:26px; margin:8px 0 10px; }
.account-heading .account-eyebrow { color:var(--red); font-size:10px; font-weight:700; letter-spacing:1.8px; margin-top:12px; }
.account-wrap p { font-size:14px; line-height:1.65; color:var(--text2); }
.account-wrap h2 { font-size:18px; line-height:1.4; margin:0 0 12px; font-weight:650; }
.account-wrap h3 { font-size:15px; }
.account-tabs { display:flex; gap:24px; border-bottom:1px solid var(--border); margin:0 0 28px; }
.account-tabs a { padding:14px 0; min-height:48px; font-size:14px; font-weight:600; text-decoration:none; border-bottom:2px solid transparent; }
.account-wrap .account-tabs a[aria-selected=true] { border-color:var(--red); color:var(--red); }
.account-wrap [hidden] { display:none!important; }
.account-access-hero { background:color-mix(in srgb,var(--red) 6%,var(--surface)); border:1px solid color-mix(in srgb,var(--red) 15%,var(--border)); padding:24px; border-radius:16px; }
.account-access-hero h2 { font-size:23px; letter-spacing:-.4px; margin-top:20px; }
.account-status { color:var(--text); background:var(--surface); border-color:var(--border); border-radius:6px; }
.account-action { background:var(--red); border:0; gap:20px; font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; white-space:normal; line-height:1.4; }
.account-section { margin-top:28px; }
.account-limits { border:0; padding:8px 0 4px; }
.account-limits dd { font-size:23px; }
.account-wrap .account-note { font-size:12px; }
.account-package { border:1px solid var(--border); border-radius:14px; padding:18px; margin-top:14px; }
.account-package p { margin:8px 0; }
.account-package meter { width:100%; height:8px; display:block; margin:16px 0; }
.account-package meter::-webkit-meter-bar { background:var(--surface-hover); border:0; }
.account-package meter::-webkit-meter-optimum-value { background:var(--red); }
.account-plan-price { font-size:26px; font-weight:700; margin-top:18px; }
.account-plans-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:18px; }
.account-package.account-plan { min-width:0; margin-top:0; display:flex; flex-direction:column; padding:22px; }
.account-plan-featured { border-color:var(--red); }
.account-plan .account-card-top { align-items:center; gap:8px; flex-wrap:wrap; }
.account-plan h3 { margin:0; font-size:22px; }
.account-plan > p:first-of-type { min-height:4.8em; line-height:1.6; }
.account-plan-badge { font-size:11px; line-height:1.4; color:var(--text2); border:1px solid var(--border); border-radius:6px; padding:5px 8px; }
.account-plan-featured .account-plan-badge { color:var(--red); border-color:var(--red); }
.account-plan-price span { display:block; font-size:12px; font-weight:400; line-height:1.6; color:var(--text2); }
.account-plan-allowance { padding-bottom:14px; border-bottom:1px solid var(--border); }
.account-plan-footer { margin-top:auto; padding-top:14px; }
.account-plan-footer .account-action { width:100%; box-sizing:border-box; justify-content:center; }
.account-plan-pending { padding:12px; border-radius:10px; background:var(--surface); text-align:center; font-size:13px; }
@media(max-width:700px) { .account-plans-grid { grid-template-columns:minmax(0,1fr); } .account-package.account-plan { padding:20px; } .account-plan > p:first-of-type { min-height:0; } }
.account-package ul { font-size:13px; line-height:1.8; padding-left:20px; color:var(--text2); }
.account-identity { display:flex; gap:16px; align-items:center; }
.account-identity h2 { margin:0; overflow-wrap:anywhere; }
.account-identity p { margin:6px 0 0; }
.account-identity>div { min-width:0; }
.account-avatar { width:56px; height:56px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--red); font-size:22px; font-weight:650; flex-shrink:0; }
.account-settings-link { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px; margin:24px 0; border:1px solid var(--border); border-radius:14px; text-decoration:none; font-size:14px; }
.account-settings-link div span { display:block; font-size:12px; color:var(--text2); margin-top:6px; line-height:1.5; }
.account-legal { display:flex; flex-wrap:wrap; gap:12px 24px; margin:24px 0 0; font-size:12px; }
.account-wrap a:focus-visible,.account-wrap button:focus-visible,.account-close:focus-visible { outline:2px solid var(--red); outline-offset:4px; }
.account-dialog { position:fixed; inset:0; margin:auto; width:min(720px,calc(100vw - 40px)); max-height:calc(100dvh - 48px); padding:0; border:1px solid var(--border); border-radius:24px; background:var(--surface); color:var(--text); overflow:auto; overscroll-behavior:contain; box-shadow:0 24px 90px #0003; }
.account-dialog::backdrop { background:#090b1466; backdrop-filter:blur(5px); }
.account-dialog .account-wrap { margin:0; border:0; border-radius:0; max-width:none; }
.account-dialog .account-back { display:none; }
.account-dialog .account-heading { padding-right:36px; }
.account-close { position:absolute; z-index:1; top:22px; right:22px; width:44px; height:44px; border:0; border-radius:50%; background:var(--surface-hover); color:var(--text2); font-family:inherit; font-size:28px; line-height:1; cursor:pointer; }
.account-loading { margin:0; padding:80px 32px; line-height:1.7; }
.account-loading .account-action { margin-top:20px; }
.account-access-hero>.account-action { margin-top:16px; }
.account-section>p { margin:10px 0; }
@media(max-width:600px) {
  .account-wrap { padding:24px 20px; border-radius:20px; }
  .account-heading h1 { font-size:23px; }
  .account-tabs { justify-content:space-between; gap:12px; }
  .account-access-hero { padding:20px; }
  .account-access-hero h2 { font-size:21px; }
  .account-dialog { width:calc(100vw - 24px); max-height:calc(100dvh - 32px); border-radius:20px; }
  .account-close { top:14px; right:12px; }
  .account-dialog .account-wrap { padding-bottom:max(24px,env(safe-area-inset-bottom)); }
}

/* Billing stays a service surface: one current access, then comparable options. */
.account-wrap.billing-surface { padding:0; border:0; border-radius:0; background:none; }
.billing-surface { font-variant-numeric:tabular-nums; }
.billing-surface ::selection { background:var(--text); color:var(--surface); }
.billing-surface a { text-underline-offset:4px; }
.billing-current { padding:28px; border:1px solid var(--border); border-radius:16px; background:var(--surface); scroll-margin-top:110px; }
.billing-title-row { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px 16px; }
.billing-current .billing-title-row h2 { margin:0; font-size:24px; letter-spacing:-.02em; overflow-wrap:anywhere; }
.billing-status { color:var(--text2); font-size:12px; line-height:1.5; }
.billing-current .billing-quota { color:var(--text); font-size:20px; font-weight:600; line-height:1.4; margin:18px 0 8px; }
.billing-current .billing-description,.billing-current .billing-expiry { margin:6px 0; max-width:65ch; }
.billing-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin-top:24px; }
.billing-surface .account-action { background:#D6002B; min-height:44px; }
.billing-surface .account-action:hover { background:#BA0026; filter:none; }
.billing-surface .account-action.secondary { background:var(--surface-hover); color:var(--text); border:1px solid var(--border); }
.billing-surface .account-action.secondary:hover { border-color:var(--text2); }
.billing-text-action { display:inline-flex; align-items:center; justify-content:flex-start; min-height:44px; padding:10px 0; box-sizing:border-box; font-size:13px; font-weight:600; line-height:1.5; font-family:inherit; color:var(--text); background:none; border:0; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.billing-text-action:disabled { opacity:.65; cursor:wait; }
.billing-details { border-bottom:1px solid var(--border); padding:0; margin-top:16px; }
.billing-details summary,.billing-plan-details summary { min-height:44px; padding:14px 0; box-sizing:border-box; cursor:pointer; color:var(--text2); font-size:13px; line-height:1.5; }
.billing-details summary:hover,.billing-plan-details summary:hover { color:var(--text); }
.billing-details p { max-width:65ch; }
.billing-details>p:last-child { margin-bottom:20px; }
.billing-current .billing-details { margin-top:20px; border-top:1px solid var(--border); border-bottom:0; }
.billing-grant { padding:16px 0; border-top:1px solid var(--border); }
.billing-grant h3 { margin:0; }
.billing-grant p { margin:6px 0; }
.billing-plans { margin-top:36px; scroll-margin-top:110px; }
.billing-plans>h2 { margin-bottom:16px; font-size:20px; }
.billing-plan-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:16px; }
.billing-plan { display:flex; flex-direction:column; min-width:0; padding:22px; border:1px solid var(--border); border-radius:16px; background:var(--surface); scroll-margin-top:110px; }
.billing-plan .billing-title-row { align-items:flex-start; min-height:50px; flex-wrap:nowrap; gap:8px; }
.billing-plan .billing-title-row .billing-status { padding-top:4px; }
.billing-plan h3 { font-size:19px; line-height:1.4; letter-spacing:-.01em; margin:0; overflow-wrap:anywhere; }
.billing-plan .billing-plan-quota { color:var(--text2); margin:10px 0 0; font-size:13px; min-height:43px; }
.billing-plan .billing-price { font-size:25px; color:var(--text); font-weight:650; line-height:1.3; margin:20px 0 16px; letter-spacing:-.02em; }
.billing-price span { display:block; font-size:12px; font-weight:400; line-height:1.6; color:var(--text2); letter-spacing:normal; margin-top:5px; }
.billing-plan .billing-price-unconfirmed { font-size:19px; letter-spacing:normal; }
.billing-features { font-size:13px; color:var(--text2); line-height:1.65; margin:0 0 16px; padding-left:18px; }
.billing-features li+li { margin-top:6px; }
.billing-plan-action { margin-top:4px; }
.billing-plan-action .account-action { width:100%; font-size:13px; padding:12px; }
.billing-plan-action form { margin:0; }
.billing-plan-details { margin-top:auto; border-top:1px solid var(--border); padding-top:2px; }
.billing-plan-action { margin-bottom:16px; }
.billing-plan-details p,.billing-plan-details ul { color:var(--text2); font-size:13px; line-height:1.65; }
.billing-plan-details ul { padding-left:18px; }
.billing-plan-details summary { padding-bottom:0; }
.billing-plan-details[open] summary { padding-bottom:12px; }
.billing-club-checkout { display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.billing-plan .billing-checkout-note { margin:0 0 16px; }
.billing-membership { display:flex; align-items:center; justify-content:space-between; gap:12px 24px; padding:22px 0; border-bottom:1px solid var(--border); scroll-margin-top:110px; }
.billing-membership h2 { font-size:15px; margin:0; }
.billing-membership p { font-size:13px; margin:6px 0 0; max-width:60ch; }
.billing-membership form { flex-shrink:0; }
.billing-notice { padding:12px; background:var(--surface-hover); border-radius:10px; }
.billing-overview { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:24px 0; margin-top:24px; border-block:1px solid var(--border); text-decoration:none; }
.billing-overview strong { font-size:17px; font-weight:650; }
.billing-overview>span:first-child { min-width:0; }
.billing-overview strong,.billing-overview>span>span { display:block; overflow-wrap:anywhere; }
.billing-overview>span>span { font-size:13px; line-height:1.6; color:var(--text2); margin-top:6px; }
.billing-overview-link { flex-shrink:0; font-size:13px; text-decoration:underline; text-underline-offset:4px; }
@media(max-width:600px) {
  .billing-current { padding:22px 20px; }
  .billing-current .billing-title-row h2 { font-size:22px; }
  .billing-current .billing-quota { font-size:18px; }
  .billing-plan { padding:20px; }
  .billing-plan-grid { grid-template-columns:1fr; gap:12px; }
  .billing-plan .billing-title-row,.billing-plan .billing-plan-quota { min-height:0; }
  .billing-membership { flex-direction:column; align-items:flex-start; gap:4px; }
  .billing-overview { flex-direction:column; align-items:flex-start; gap:12px; }
}
/* Compact training packages share native radio interactions with the landing. */
.package-options{display:flex;gap:8px;border:0;padding:0;margin:16px 0 22px;min-width:0}
.package-options[hidden],[data-package-panel][hidden]{display:none!important}
.package-options legend{font-size:.85rem;margin-bottom:10px;color:var(--text2)}
.package-options label{flex:1;position:relative;cursor:pointer}
.package-options input{position:absolute;opacity:0;width:1px;height:1px}
.package-options span{display:block;text-align:center;border:1px solid var(--border,#b9c7d9);border-radius:12px;padding:12px 8px;font-weight:700;background:var(--surface);color:var(--text,#121d30)}
.package-options input:checked+span{background:#2365a8;color:#fff;border-color:#2365a8}
.package-options label:hover span{border-color:#2365a8}
.package-options input:focus-visible+span{outline:3px solid #2365a8;outline-offset:3px}
.package-unit{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.85rem;font-variant-numeric:tabular-nums}
.package-saving{color:#1c5087;background:#e9f2fc;border-radius:8px;padding:4px 8px;font-weight:700}
.package-picker .billing-price{font-variant-numeric:tabular-nums}
.package-picker .billing-price span{display:block}