/* Account-only visual polish. Public marketing pages keep their existing styles. */
body.stb-account-page {
    --account-surface: #121f32;
    --account-surface-raised: #18283e;
    --account-control: #0d1828;
    --account-border: #34465f;
    --account-accent: #5adbd3;
    --account-accent-soft: rgba(90, 219, 211, .12);
    --account-shadow: 0 18px 48px rgba(0, 0, 0, .2);
    background:
        radial-gradient(ellipse at 12% 0%, rgba(77, 217, 232, .10), transparent 34%),
        linear-gradient(150deg, #0b1422 0%, #111d30 58%, #1c192b 100%);
}

html[data-theme="light"] body.stb-account-page {
    --account-surface: #fff;
    --account-surface-raised: #f4f7fa;
    --account-control: #fff;
    --account-border: #c6d1dc;
    --account-accent: #087d83;
    --account-accent-soft: #e5f5f4;
    --account-shadow: 0 14px 36px rgba(31, 49, 68, .08);
}

body.stb-account-page .wrap { width: min(1160px, calc(100% - 36px)); }
body.stb-account-page .page { padding: clamp(28px, 5vw, 56px) 0 26px; }
body.stb-account-page .section { padding: 20px 0 28px; }
body.stb-account-page h1 {
    max-width: 820px;
    margin-bottom: 14px;
    font-size: clamp(34px, 4.5vw, 54px);
    line-height: 1.08;
    letter-spacing: -.025em;
}
body.stb-account-page .lead { max-width: 780px; line-height: 1.65; }
body.stb-account-page .panel,
body.stb-account-page .card,
body.stb-account-page .ms-plan {
    min-height: 0;
    border: 1px solid var(--account-border);
    border-radius: 14px;
    background: linear-gradient(155deg, var(--account-surface-raised), var(--account-surface) 72%);
    box-shadow: var(--account-shadow);
}
body.stb-account-page .page > .panel {
    width: min(100%, 700px);
    margin-inline: auto;
    padding: clamp(22px, 4vw, 36px);
}
body.stb-account-page .pill,
body.stb-account-page .card span {
    align-items: center;
    min-height: 26px;
    padding: 4px 10px;
    border: 1px solid color-mix(in srgb, var(--account-accent) 40%, transparent);
    border-radius: 999px;
    background: var(--account-accent-soft);
    color: var(--account-accent);
    letter-spacing: .045em;
}
body.stb-account-page .form { gap: 17px; margin-top: 22px; }
body.stb-account-page .form label,
body.stb-account-page .ms-form label { gap: 8px; color: var(--text); line-height: 1.4; }
body.stb-account-page .form input,
body.stb-account-page .form select,
body.stb-account-page .form textarea,
body.stb-account-page .ms-form input,
body.stb-account-page .ms-form select {
    min-height: 48px;
    border: 1px solid var(--account-border);
    border-radius: 10px;
    background: var(--account-control);
    color: var(--text);
}
body.stb-account-page :is(input, select, textarea)::placeholder { color: var(--muted); opacity: .82; }
body.stb-account-page :is(input, select, textarea):hover { border-color: var(--account-accent); }
body.stb-account-page :is(input, select, textarea):focus-visible {
    border-color: var(--account-accent);
    outline: 3px solid color-mix(in srgb, var(--account-accent) 25%, transparent);
    outline-offset: 1px;
}
body.stb-account-page .btn,
body.stb-account-page button.btn {
    min-height: 48px;
    border-radius: 10px;
    transition: transform .16s ease, filter .16s ease, background-color .16s ease;
}
body.stb-account-page .btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
body.stb-account-page .btn.primary {
    border-color: var(--account-accent);
    background: var(--account-accent);
    color: #071821;
    box-shadow: 0 7px 18px color-mix(in srgb, var(--account-accent) 22%, transparent);
}
html[data-theme="light"] body.stb-account-page .btn.primary { color: #fff; }
body.stb-account-page .btn.quiet {
    border-color: var(--account-border);
    background: var(--account-surface-raised);
    color: var(--text);
}
body.stb-account-page .actions { gap: 10px; margin-top: 22px; }
body.stb-account-page .account-switch-link { margin-top: 20px; }
body.stb-account-page .setup-mode-actions { margin-top: 0; }
body.stb-account-page .notice,
body.stb-account-page .error,
body.stb-account-page .ms-warning,
body.stb-account-page .ms-error {
    border-radius: 10px;
    padding: 13px 15px;
    line-height: 1.55;
}
body.stb-account-page .notice { color: #c9fffa; border-color: rgba(90, 219, 211, .48); background: rgba(20, 126, 123, .18); }
body.stb-account-page .error { color: #ffe0e4; border-color: rgba(255, 105, 120, .5); background: rgba(123, 34, 52, .24); }
html[data-theme="light"] body.stb-account-page .notice { color: #15545a; border-color: #83c7c3; background: #e8f7f5; }
html[data-theme="light"] body.stb-account-page .error { color: #7b1e2b; border-color: #d8959e; background: #fff1f2; }
body.stb-account-page .page > .panel details { margin-top: 18px; }
body.stb-account-page .page > .panel details summary { padding: 12px 0; color: var(--text); cursor: pointer; font-weight: 800; }
body.stb-account-page .page > .panel details form { padding-bottom: 12px; }
body.stb-account-page .section-head { margin-bottom: 20px; }
body.stb-account-page .section-head h2 { font-size: clamp(25px, 3vw, 34px); line-height: 1.18; }
body.stb-account-page .setup-mode-bar { gap: 16px; margin-bottom: 20px; }
body.stb-account-page .setup-view { gap: 20px; padding: clamp(20px, 3vw, 30px); }
body.stb-account-page .run-card,
body.stb-account-page .prelive-item,
body.stb-account-page .advanced-settings,
body.stb-account-page .setup-row,
body.stb-account-page .export-block {
    border-color: var(--account-border);
    border-radius: 10px;
    background: var(--account-surface-raised);
}
body.stb-account-page .run-card { padding: 18px; }
body.stb-account-page .run-card span,
body.stb-account-page .prelive-item strong,
body.stb-account-page .advanced-settings summary { color: var(--text); }
body.stb-account-page .setup-row { padding: 14px 16px; }
body.stb-account-page .ms { padding-top: clamp(24px, 4vw, 44px); padding-bottom: 42px; }
body.stb-account-page .ms-heading { align-items: flex-start; margin-bottom: 18px; }
body.stb-account-page .ms-heading h1 { margin: 0; }
body.stb-account-page .ms-tabs { gap: 9px; padding: 12px 0 22px; }
body.stb-account-page .ms-tabs a {
    min-height: 42px;
    padding: 10px 16px;
    border-color: var(--account-border);
    border-radius: 10px;
    background: var(--account-surface-raised);
}
body.stb-account-page .ms-tabs [aria-current="page"] { border-color: var(--account-accent); background: var(--account-accent-soft); color: var(--text); }
body.stb-account-page .ms-plan-grid { gap: 16px; margin: 22px 0 28px; }
body.stb-account-page .ms-plan { gap: 17px; padding: 22px; }
body.stb-account-page .ms-plan-featured { border-color: var(--account-accent); box-shadow: 0 0 0 1px var(--account-accent), var(--account-shadow); }
body.stb-account-page .ms-plan h2 { font-size: 22px; line-height: 1.2; }
body.stb-account-page .ms-plan-price { margin: 0; font-size: 32px; line-height: 1.15; }
body.stb-account-page .ms-plan ul { display: grid; gap: 9px; padding-left: 20px; line-height: 1.48; }
body.stb-account-page .ms-plan li { margin: 0; padding-left: 2px; }
body.stb-account-page .ms-billing-form { gap: 14px; }
body.stb-account-page .ms-billing-form label { line-height: 1.5; }
body.stb-account-page .ms-billing-form input[type="checkbox"] { accent-color: var(--account-accent); }
body.stb-account-page .ms-subscription,
body.stb-account-page .ms-usage {
    margin-block: 14px;
    padding: 22px;
    border: 1px solid var(--account-border);
    border-radius: 12px;
    background: var(--account-surface);
}
body.stb-account-page .ms-usage progress { accent-color: var(--account-accent); }
body.stb-account-page .ms-events li { gap: 10px 16px; padding: 16px 0; border-color: var(--account-border); }
body.stb-account-page a:not(.btn):hover { color: var(--account-accent); }

@media (max-width: 700px) {
    body.stb-account-page .wrap { width: min(100% - 28px, 1160px); }
    body.stb-account-page .page { padding-top: 28px; }
    body.stb-account-page .page > .panel { padding: 22px 18px; }
    body.stb-account-page .setup-view { padding: 20px 16px; }
    body.stb-account-page .ms-plan-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    body.stb-account-page .ms-plan { padding: 20px; }
    body.stb-account-page .ms-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body.stb-account-page .ms-tabs a { display: flex; align-items: center; justify-content: center; padding: 9px 7px; text-align: center; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    body.stb-account-page *,
    body.stb-account-page *::before,
    body.stb-account-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}