/* ==================================================================
   Fwdia app - account. Plan & billing, account, 2FA, admin, auth (login/register).
   Loaded after app.css (foundation) on every app page; values come
   from the app theme tokens (theme-app.css). No hex literals.
   ================================================================== */

/* --- shared ---------------------------------------------------------- */
.fw-check-list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; font-size: .9rem; color: var(--fw-ink); }
.fw-check-list li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
.fw-check-list li > svg {
    flex: none; width: 20px; height: 20px; padding: 3px; margin-top: -1px;
    border-radius: var(--fw-radius-pill); background: var(--fw-accent-soft); color: var(--fw-accent); stroke-width: 2.6;
}

/* --- plan & billing -------------------------------------------------- */
.fwb { max-width: 960px; }
.fwb .fw-num, .fwb-price { font-variant-numeric: tabular-nums; }

/* Status box after checkout: shown by script via the hidden attribute */
.fwb-activating { display: flex; align-items: center; gap: 10px; font-weight: 550; }
.fwb-activating[hidden] { display: none; }

/* Current plan summary */
.fwb-current { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px 40px; align-items: center; }
.fwb-current-plan { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.fwb-plan-icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border-radius: var(--fw-radius-md); background: var(--fw-accent-soft); color: var(--fw-accent);
}
.fwb-current .fw-panel-title { font-size: .8rem; font-weight: 600; color: var(--fw-ink-soft); letter-spacing: 0; margin: 0 0 2px; }
.fwb-current-name {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 4px;
    font-family: var(--fw-font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
}
.fwb-current-name .badge { font-family: var(--fw-font-sans); letter-spacing: .01em; }
.fwb-current-meta { margin: 0; color: var(--fw-ink-soft); font-size: .9rem; line-height: 1.5; }
.fwb-current-meta b { color: var(--fw-ink); font-weight: 600; }

.fwb-usage { padding: 16px 18px; border-radius: var(--fw-radius-md); background: var(--fw-surface-sunk); }
.fwb-usage-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; font-size: .86rem; color: var(--fw-ink-soft); font-weight: 550; }
.fwb-usage-head b { font-size: 1rem; font-weight: 700; color: var(--fw-ink); }
.fwb-usage-head b span { font-size: .8rem; font-weight: 550; color: var(--fw-ink-soft); }
.fwb-meter { height: 8px; border-radius: var(--fw-radius-pill); background: color-mix(in srgb, var(--fw-border) 70%, var(--fw-surface)); overflow: hidden; }
.fwb-meter span { display: block; height: 100%; border-radius: inherit; background: var(--fw-accent); }
.fwb-meter.is-full span { background: var(--fw-highlight); }
.fwb-usage-note { margin: 10px 0 0; font-size: .8rem; color: var(--fw-ink-soft); line-height: 1.4; }

/* Plan cards */
.fwb-section-title { font-size: 1rem; font-weight: 650; letter-spacing: -.01em; margin: 34px 0 14px; }
.fwb-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; align-items: stretch; }
.fwb-plan { display: flex; flex-direction: column; margin: 0; padding: 26px 26px 24px; }
.fwb-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.fwb-plan-name { font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; margin: 0; }
.fwb-plan-tagline { color: var(--fw-ink-soft); font-size: .9rem; margin: 0 0 18px; min-height: 2.8em; line-height: 1.4; }
.fwb-price { display: flex; align-items: baseline; gap: 4px; margin: 0 0 4px; line-height: 1; }
.fwb-price-amount { font-family: var(--fw-font-display); font-size: 2.2rem; font-weight: 750; letter-spacing: -.035em; color: var(--fw-ink); }
.fwb-price-unit { font-size: .9rem; font-weight: 550; color: var(--fw-ink-soft); }
.fwb-price-alt { margin: 6px 0 0; font-size: .86rem; color: var(--fw-ink-soft); }
.fwb-price-alt b { color: var(--fw-ink); font-weight: 650; }
.fwb-plan .fw-check-list { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--app-line); flex: 1 0 auto; align-content: start; }
.fwb-plan-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fwb-plan-actions .btn { flex: 1 1 auto; }
.fwb-included { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin-bottom: 0; }

/* Add-on rows */
.fwb-addons { padding-bottom: 8px; }
.fwb-addons .fw-panel-title { margin-bottom: 4px; }
.fwb-addon {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px 18px; align-items: center;
    padding: 18px 0; border-top: 1px solid var(--app-line);
}
.fwb-addons .fw-panel-title + .fwb-addon { border-top: 0; }
.fwb-addon-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: var(--fw-radius-md); background: var(--fw-surface-sunk); color: var(--fw-ink-soft);
}
.fwb-addon-name { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 650; margin: 0 0 2px; letter-spacing: -.005em; }
.fwb-addon-desc { margin: 0; font-size: .86rem; color: var(--fw-ink-soft); line-height: 1.45; }
.fwb-addon-desc b { color: var(--fw-ink); }
.fwb-addon-price { font-weight: 650; font-size: .9rem; color: var(--fw-ink); white-space: nowrap; text-align: right; }
.fwb-addon-action { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.fwb-addon-action form { margin: 0; }
.fwb-addon-buy .form-select { width: auto; max-width: 220px; }
.fwb-icon-btn { width: 34px; padding-left: 0; padding-right: 0; }
.fwb-active {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 0 12px; border-top: 1px solid var(--app-line);
    font-size: .8rem; color: var(--fw-ink-soft);
}
.fwb-active-label { font-weight: 600; margin-right: 4px; }

.fwb-trust { display: flex; gap: 10px; align-items: flex-start; margin: 8px 2px 0; font-size: .86rem; line-height: 1.5; color: var(--fw-ink-soft); max-width: 75ch; }
.fwb-trust svg { flex: none; margin-top: 2px; color: var(--fw-ink-soft); }

/* --- account settings ------------------------------------------------ */
.fwset { max-width: 1040px; }
.fwset-section {
    display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px 48px;
    padding: 28px 0; border-top: 1px solid var(--app-line);
}
.fwset-section:first-of-type { border-top: 0; padding-top: 4px; }
.fwset-intro h2 { font-size: 1rem; font-weight: 650; letter-spacing: -.01em; margin: 0 0 6px; }
.fwset-intro p { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--fw-ink-soft); max-width: 36ch; }
.fwset-card { margin: 0; }
.fwset-card .fw-panel-title svg { color: var(--fw-ink-soft); }
.fwset-card.fw-panel-danger .fw-panel-title svg { color: var(--fw-danger); }
.fwset-card .form-control[readonly] { background: var(--fw-surface-sunk); color: var(--fw-ink-soft); }
.fwset-note { font-size: .86rem; line-height: 1.5; color: var(--fw-ink-soft); margin: -6px 0 16px; max-width: 65ch; }
.fwset-actions { display: flex; gap: 8px; padding-top: 4px; }
.fwset-divider { height: 1px; background: var(--app-line); margin: 26px -24px 24px; }
.fwset-confirm { max-width: 440px; }
.fwset-confirm .btn { flex: none; }
.fwset-row { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.fwset-row > div { flex: 1 1 280px; min-width: 0; }
.fwset-row .fw-panel-title { margin-bottom: 6px; }
.fwset-row .fwset-note { margin-top: 0; }

/* --- two-factor setup ------------------------------------------------ */
.fwtfa { max-width: 860px; }
.fwtfa-back { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.fwtfa-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; }
.fwtfa-step { display: flex; gap: 14px; min-width: 0; }
.fwtfa-step + .fwtfa-step { padding-left: 40px; border-left: 1px solid var(--app-line); margin-left: -20px; }
.fwtfa-num {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border-radius: var(--fw-radius-pill); background: var(--fw-accent-soft); color: var(--fw-accent);
    font-size: .86rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.fwtfa-step-body { min-width: 0; flex: 1; }
.fwtfa-step-body .fw-panel-title { margin: 3px 0 6px; }
.fwtfa-help { font-size: .86rem; color: var(--fw-ink-soft); margin: 0 0 14px; line-height: 1.5; }
.fwtfa-qr { margin: 0 0 14px; justify-content: flex-start; }
.fwtfa-secret {
    display: block; padding: 10px 12px; border-radius: var(--fw-radius-sm); background: var(--fw-surface-sunk);
    border: 1px solid var(--app-line); color: var(--fw-ink); font-size: .86rem; letter-spacing: .08em; word-break: break-all;
}
.fwtfa-verify { display: flex; gap: 8px; flex-wrap: wrap; }
.fwtfa-verify .form-control { flex: 1 1 160px; max-width: 220px; }

/* --- admin ----------------------------------------------------------- */
.fwadm-table td { vertical-align: middle; }
.fwadm-table form { margin: 0; }
.fwadm-id { width: 56px; color: var(--fw-ink-faint); }
.fwadm-yes { display: inline-flex; vertical-align: middle; color: var(--fw-success); }
.fwadm-no { color: var(--fw-ink-faint); }
.fwadm-empty { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--fw-radius-md); background: var(--fw-surface-sunk); }
.fwadm-empty p { margin: 0; font-size: .9rem; color: var(--fw-ink-soft); }
.fwadm-empty-icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border-radius: var(--fw-radius-pill); background: var(--fw-surface); color: var(--fw-ink-soft); box-shadow: var(--fw-shadow-sm);
}

.fwadm-muted { color: var(--fw-ink-faint); }
.fwadm-tabs { margin: 0 0 20px; width: fit-content; max-width: 100%; overflow-x: auto; }
.fwadm-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px;
    border-radius: var(--fw-radius-pill); background: var(--fw-highlight); color: var(--fw-highlight-ink); font-size: .72rem; font-weight: 700;
}
.fwadm-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.fwadm-panel-head .fw-panel-title { margin-bottom: 12px; }
.fwadm-range { font-size: .8rem; color: var(--fw-ink-soft); }

/* overview */
.fwadm-callout {
    display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding: 14px 18px; text-decoration: none; color: var(--fw-ink);
    background: var(--fw-highlight-soft); border: 1px solid color-mix(in srgb, var(--fw-highlight) 40%, transparent); border-radius: var(--fw-radius-lg);
    transition: border-color var(--fw-dur) var(--fw-ease);
}
.fwadm-callout:hover { color: var(--fw-ink); border-color: var(--fw-highlight); }
.fwadm-callout-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: var(--fw-radius-sm); background: var(--fw-surface); color: var(--fw-highlight-deep); }
.fwadm-callout-text { flex: 1; display: grid; line-height: 1.35; }
.fwadm-callout-text small { color: var(--fw-ink-soft); font-size: .8rem; }
.fwadm-list { list-style: none; margin: 0; padding: 0; }
.fwadm-list li + li { border-top: 1px solid var(--app-line); }
.fwadm-list a { display: flex; align-items: center; gap: 12px; padding: 10px 4px; text-decoration: none; color: var(--fw-ink); border-radius: var(--fw-radius-sm); }
.fwadm-list a:hover { background: var(--fw-surface-sunk); }
.fwadm-list-main { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.fwadm-list-main b, .fwadm-list-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fwadm-list-main small, .fwadm-list-meta { font-size: .8rem; color: var(--fw-ink-soft); }
.fwadm-avatar {
    display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%;
    background: var(--fw-accent-soft); color: var(--fw-accent); font-size: .86rem; font-weight: 700;
}
.fwadm-avatar-lg { width: 52px; height: 52px; font-size: 1.15rem; }

/* users list */
.fwadm-filters { display: grid; gap: 14px; }
.fwadm-search { position: relative; }
.fwadm-search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--fw-ink-faint); pointer-events: none; }
.fwadm-search .form-control { padding-left: 38px; }
.fwadm-filter-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.fwadm-filter-row .form-label { font-size: .8rem; margin-bottom: 4px; }
.fwadm-filter-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fwadm-filter-foot .form-check { margin: 0; }
.fwadm-filter-actions { display: flex; gap: 8px; }
.fwadm-user { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fw-ink); vertical-align: middle; margin-right: 6px; }
.fwadm-user > span:last-child { display: grid; line-height: 1.3; }
.fwadm-user small { font-size: .8rem; color: var(--fw-ink-soft); }
.fwadm-user:hover b { color: var(--fw-accent); }
.fwadm-verified { display: inline-flex; vertical-align: -2px; margin-left: 6px; color: var(--fw-accent); }
.fwadm-deleted td { opacity: .6; }
.fwadm-pager { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.fwadm-pages { display: inline-flex; align-items: center; gap: 4px; }
.fwadm-page {
    display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: var(--fw-radius-sm);
    text-decoration: none; color: var(--fw-ink-soft); font-size: .86rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.fwadm-page:hover { background: var(--fw-surface-sunk); color: var(--fw-ink); }
.fwadm-page.is-current { background: var(--fw-accent); color: var(--fw-accent-contrast); }
.fwadm-gap { color: var(--fw-ink-faint); padding: 0 2px; }

/* user detail */
.fwadm-back { display: flex; width: fit-content; align-items: center; gap: 6px; margin-bottom: 12px; font-size: .86rem; font-weight: 600; color: var(--fw-ink-soft); text-decoration: none; }
.fwadm-back:hover { color: var(--fw-accent); }
.fwadm-profile { display: flex; align-items: center; gap: 16px; }
.fwadm-profile h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 2px; font-size: 1.3rem; }
.fwadm-profile p { margin: 0; color: var(--fw-ink-soft); font-size: .9rem; }
.fwadm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.fwadm-grid > .fw-panel { margin-bottom: 0; }
.fwadm-grid + .fw-panel { margin-top: 20px; }
.fwadm-dl { margin: 0; display: grid; }
.fwadm-dl > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 9px 0; font-size: .9rem; align-items: center; }
.fwadm-dl > div + div { border-top: 1px solid var(--app-line); }
.fwadm-dl dt { font-weight: 600; color: var(--fw-ink-soft); font-size: .86rem; }
.fwadm-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fwadm-dl dd form { margin-left: 8px; }
.fwadm-sub { margin: 16px 0 6px; font-size: .86rem; font-weight: 700; color: var(--fw-ink-soft); }
.fwadm-rows { list-style: none; margin: 0; padding: 0; }
.fwadm-rows li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 9px 0; font-size: .9rem; }
.fwadm-rows li + li { border-top: 1px solid var(--app-line); }
.fwadm-rows li > span:first-child { flex: 1; min-width: 0; }
.fwadm-rows small { color: var(--fw-ink-soft); font-size: .8rem; }
.fwadm-plan-now { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font-size: .9rem; margin-bottom: 6px; }
.fwadm-comp { display: grid; gap: 10px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--app-line); }
.fwadm-comp .fwadm-sub { margin: 0; }
.fwadm-comp-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.fwadm-comp-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 16px; }
.fwadm-comp-row .form-label { font-size: .8rem; margin-bottom: 4px; }
.fwadm-comp-row .form-check { margin: 0 0 10px; }
.fwadm-comp .fwadm-hint { margin: 0; }
.fwadm-comp + form { margin-top: 10px; }
.fwadm-hint { margin: -4px 0 14px; font-size: .86rem; color: var(--fw-ink-soft); }
.fwadm-sites { list-style: none; margin: 0; padding: 0; }
.fwadm-sites li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px 16px; padding: 12px 0; }
.fwadm-sites li + li { border-top: 1px solid var(--app-line); }
.fwadm-sites form { margin: 0; }
.fwadm-site-main { display: grid; min-width: 0; line-height: 1.35; }
.fwadm-site-main a { font-size: .86rem; color: var(--fw-ink-soft); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fwadm-site-main a:hover { color: var(--fw-accent); }
.fwadm-site-state { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.fwadm-verified-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--fw-radius-pill); background: var(--fw-accent-soft); color: var(--fw-accent); font-size: .72rem; font-weight: 700; }
.fwadm-activity { list-style: none; margin: 0; padding: 0; font-size: .86rem; }
.fwadm-activity li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 7px 0; }
.fwadm-activity li + li { border-top: 1px solid var(--app-line); }
.fwadm-activity span { color: var(--fw-ink-soft); }
.fwadm-activity code { font-size: .8rem; color: var(--fw-ink); background: none; padding: 0; overflow-wrap: anywhere; }

/* verifications */
.fwadm-status-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--app-line); }
.fwadm-status-tabs a {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent;
    font-size: .9rem; font-weight: 600; color: var(--fw-ink-soft); text-decoration: none;
}
.fwadm-status-tabs a span { font-size: .8rem; color: var(--fw-ink-faint); }
.fwadm-status-tabs a:hover { color: var(--fw-ink); }
.fwadm-status-tabs a.is-active { color: var(--fw-accent); border-bottom-color: var(--fw-accent); }
.fwadm-status-tabs a.is-active span { color: var(--fw-accent); }
.fwadm-reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fwadm-review { margin: 0; }
.fwadm-review-pending { border-color: color-mix(in srgb, var(--fw-highlight) 45%, var(--app-line)); }
.fwadm-review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.fwadm-review-site { display: grid; min-width: 0; line-height: 1.4; }
.fwadm-review-site a { font-size: .86rem; color: var(--fw-ink-soft); text-decoration: none; }
.fwadm-review-site a:hover { color: var(--fw-accent); }
.fwadm-warn { color: var(--fw-highlight-deep); font-size: .86rem; }
.fwadm-dl-inline > div { grid-template-columns: 90px minmax(0, 1fr); padding: 6px 0; }
.fwadm-review-actions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--app-line); }
.fwadm-review-actions form { margin: 0; }
.fwadm-approve { display: flex; gap: 8px; flex: 1 1 360px; max-width: 520px; }
.fwadm-approve .form-control { min-width: 0; }
.fwadm-approve .btn { flex: none; white-space: nowrap; }
.fwadm-reject summary { list-style: none; cursor: pointer; }
.fwadm-reject summary::-webkit-details-marker { display: none; }
.fwadm-reject[open] summary { margin-bottom: 10px; }
.fwadm-reject form { display: grid; gap: 8px; width: min(420px, 100%); }
.fwadm-reject form .btn { justify-self: start; }

@media (max-width: 991.98px) {
    .fwadm-filter-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fwadm-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .fwadm-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fwadm-sites li { grid-template-columns: 1fr; }
    .fwadm-site-state { justify-content: flex-start; }
    .fwadm-dl > div { grid-template-columns: 1fr; gap: 2px; }
    .fwadm-activity li { grid-template-columns: 1fr; gap: 0; }
    .fwadm-tabs { width: 100%; }
    .fwadm-wide { display: none; }
    .fwadm-approve { flex-direction: column; max-width: none; }
    .fwadm-approve .btn { align-self: flex-start; }
}

/* --- auth (login, register, reset, 2FA) ------------------------------ */
.fwauth { background: var(--fw-paper); }
.fwauth-layout { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
.fwauth-brand { display: none; }
.fwauth-main { display: flex; align-items: center; justify-content: center; min-width: 0; }
.fwauth-wrap { width: 100%; max-width: 440px; margin: 0 auto; padding: 56px 20px 40px; display: grid; gap: 22px; justify-items: center; }
.fwauth-card {
    background: var(--fw-surface); border: 1px solid var(--app-line); box-shadow: var(--fw-shadow-sm);
    border-radius: var(--fw-radius-lg); padding: 32px; width: 100%;
}
.fwauth-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 18px;
    border-radius: var(--fw-radius-md); background: var(--fw-accent-soft); color: var(--fw-accent);
}
.fwauth-title {
    font-family: var(--fw-font-display); font-weight: var(--fw-display-weight);
    letter-spacing: var(--fw-display-track); font-size: 1.6rem; line-height: 1.2; margin: 0 0 6px; text-wrap: balance;
}
.fwauth-sub { color: var(--fw-ink-soft); font-size: .9rem; line-height: 1.5; margin: 0 0 24px; }
.fwauth-field { margin-bottom: 18px; }
.fwauth-field .form-label { margin-bottom: 6px; }
.fwauth-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fwauth-check { margin: 0 0 22px; }
.fwauth-checks { display: grid; gap: 10px; margin: 4px 0 22px; font-size: .9rem; }
.fwauth-checks .form-check { margin: 0; }
.fwauth-card .btn-lg { font-size: .9rem; }
.fwauth-switch { text-align: center; margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--app-line); font-size: .9rem; color: var(--fw-ink-soft); }
.fwauth-switch a { font-weight: 600; text-decoration: none; }
.fwauth-switch a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fwauth-switch-row { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.fwauth-switch-row form { margin: 0; }
.fwauth-alert { width: 100%; margin: 0; }
.fwauth-link { font-size: .86rem; font-weight: 600; text-decoration: none; }
.fwauth-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.fwauth-back { display: inline-flex; align-items: center; gap: 6px; }
.fwauth-code { font-size: 1.3rem; letter-spacing: .35em; text-align: center; font-family: var(--fw-font-mono); font-variant-numeric: tabular-nums; }
.fwauth-code::placeholder { color: var(--fw-ink-faint); opacity: 1; }

/* Legal links under the card */
.fwauth-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font-size: .8rem; }
.fwauth-footer a { color: var(--fw-ink-soft); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; transition: color var(--fw-dur) var(--fw-ease); }
.fwauth-footer a:hover { color: var(--fw-accent); }

/* Desktop: split layout with a quiet brand panel */
@media (min-width: 992px) {
    .fwauth-layout { grid-template-columns: minmax(380px, 5fr) minmax(0, 7fr); }
    .fwauth-brand {
        display: flex; flex-direction: column; gap: 40px;
        padding: 44px clamp(36px, 4vw, 64px); background: var(--fw-accent-soft);
        border-right: 1px solid color-mix(in srgb, var(--fw-accent) 12%, transparent);
        position: sticky; top: 0; height: 100vh; height: 100dvh;
    }
    .fwauth-brand-body { max-width: 420px; margin: auto 0; padding-bottom: 48px; }
    .fwauth-brand-title {
        font-family: var(--fw-font-display); font-weight: var(--fw-display-weight); letter-spacing: -.028em;
        font-size: clamp(1.7rem, 2.3vw, 2.2rem); line-height: 1.15; color: var(--fw-ink); margin: 0 0 32px; text-wrap: balance;
    }
    .fwauth-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
    .fwauth-points li { display: flex; gap: 14px; align-items: flex-start; font-size: .9rem; line-height: 1.5; color: var(--fw-ink-soft); }
    .fwauth-point-icon {
        flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
        border-radius: var(--fw-radius-sm); background: var(--fw-surface); color: var(--fw-accent); box-shadow: var(--fw-shadow-sm);
    }
    .fwauth-main { background: var(--fw-surface); }
    .fwauth-logo-top { display: none; }
    .fwauth-wrap { max-width: 420px; padding: 64px 24px 32px; }
    .fwauth-card { border: 0; box-shadow: none; padding: 0; border-radius: 0; }
    .fwauth-title { font-size: 1.7rem; }
}

/* --- tablets & phones ------------------------------------------------ */
@media (max-width: 860px) {
    .fwb-current { grid-template-columns: minmax(0, 1fr); }
    .fwset-section { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 24px 0; }
    .fwset-intro p { max-width: 60ch; }
    .fwtfa-steps { grid-template-columns: minmax(0, 1fr); }
    .fwtfa-step + .fwtfa-step { padding: 24px 0 0; margin: 0; border-left: 0; border-top: 1px solid var(--app-line); }
}

@media (max-width: 720px) {
    .fwb-plans { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .fwb-plan { padding: 20px 18px; }
    .fwb-plan-tagline { min-height: 0; }
    .fwb-plan-pro { order: -1; } /* recommended plan first on phones */
    .fwb-included { grid-template-columns: minmax(0, 1fr); }
    .fwb-current-name { font-size: 1.3rem; }
    .fwb-addon { grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; }
    .fwb-addon-action { grid-column: 2 / -1; justify-content: flex-start; padding-top: 8px; flex-wrap: wrap; }
    .fwb-addon-buy .form-select { flex: 1 1 160px; max-width: none; }
    .fwb-icon-btn { width: 40px; }
    .fwset-divider { margin: 22px -16px 20px; }
    .fwset-row .btn { width: 100%; }

    .fwauth-wrap { padding: 32px 16px 28px; gap: 18px; }
    .fwauth-card { padding: 24px 20px; }
    .fwauth-title { font-size: 1.3rem; }
    .fwauth-link { display: inline-flex; align-items: center; min-height: 40px; }
    .fwauth-label-row .fwauth-link { min-height: 0; padding: 6px 0; margin: -6px 0; }
}
@media (max-width: 380px) { .fwauth-code { font-size: 1.15rem; letter-spacing: .25em; } }

@media (prefers-reduced-motion: reduce) {
    .fwb-meter span, .fwauth-footer a { transition: none; }
}