/* ---------------------------------------------------------------------------
   Settings area (Account, Appearance, Usage, Billing), usage chart and plan sheet.
--------------------------------------------------------------------------- */

.bz-settings { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: start; }
.bz-settings-nav { position: sticky; top: 66px; display: flex; flex-direction: column; gap: 2px; }
.bz-settings-heading { padding: 0 10px 8px; color: var(--mud-palette-text-secondary); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bz-settings-nav a {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px;
    color: var(--mud-palette-text-primary); font-size: .88rem; text-decoration: none;
}
.bz-settings-nav a .mud-icon-root { color: var(--mud-palette-text-secondary); }
.bz-settings-nav a:hover { background: var(--bz-card); }
.bz-settings-nav a.active { background: var(--bz-selection); color: var(--bz-selection-text); font-weight: 600; }
.bz-settings-nav a.active .mud-icon-root { color: inherit; }
.bz-settings-body { min-width: 0; }

@media (max-width: 900px) {
    .bz-settings { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .bz-settings-nav { position: static; flex-direction: row; overflow-x: auto; border-bottom: 1px solid var(--bz-border); padding-bottom: 6px; }
    .bz-settings-heading { display: none; }
    .bz-settings-nav a { white-space: nowrap; }
}

/* Appearance */
.bz-theme-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.bz-theme-option {
    align-items: stretch;
    display: flex; flex-direction: column; gap: 8px; padding: 8px; border: 2px solid var(--bz-border); border-radius: 10px;
    background: var(--bz-card); color: inherit; font: inherit; cursor: pointer; text-align: left;
}
.bz-theme-option.selected { border-color: var(--bz-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bz-accent) 20%, transparent); }
.bz-theme-preview { position: relative; display: block; width: 100%; height: 96px; border-radius: 6px; overflow: hidden; }
.bz-theme-preview.dark { background: #2A2E35; }
.bz-theme-preview.light { background: #E9EDF2; }
.bz-theme-preview .bar { position: absolute; inset: 0 0 auto 0; height: 14px; }
.bz-theme-preview.dark .bar { background: #24282F; border-bottom: 1px solid #4E5764; }
.bz-theme-preview.light .bar { background: #FFFFFF; border-bottom: 1px solid #C9D2DD; }
.bz-theme-preview .rail { position: absolute; left: 0; top: 14px; bottom: 0; width: 34px; }
.bz-theme-preview.dark .rail { background: #24282F; }
.bz-theme-preview.light .rail { background: #F4F7FB; }
.bz-theme-preview .card { position: absolute; left: 46px; right: 12px; top: 26px; height: 24px; border-radius: 4px; }
.bz-theme-preview .card.short { top: 58px; right: 60px; }
.bz-theme-preview.dark .card { background: #2F353E; }
.bz-theme-preview.light .card { background: #FFFFFF; box-shadow: 0 1px 2px rgba(31, 42, 55, .1); }
.bz-theme-preview .card::before { content: ""; position: absolute; left: 8px; top: 9px; width: 36%; height: 6px; border-radius: 3px; background: var(--mud-palette-primary); }
.bz-theme-name { display: flex; align-items: center; gap: 6px; padding: 0 4px 2px; font-size: .88rem; font-weight: 600; }

.bz-accent-options { display: flex; flex-wrap: wrap; gap: 10px; }
.bz-accent-option {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border: 2px solid var(--bz-border); border-radius: 18px;
    background: var(--bz-card); color: inherit; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
}
.bz-accent-option .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--swatch); }
.bz-accent-option.selected { border-color: var(--swatch); }

.bz-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; }
.bz-setting-row + .bz-setting-row { border-top: 1px solid var(--bz-line); }
.bz-setting-row strong { display: block; font-size: .9rem; }
.bz-setting-row span { color: var(--mud-palette-text-secondary); font-size: .8rem; }

/* Usage chart: series 1 (Botty) blue, 2 (CAPTCHA) orange, 3 (cloud runs) aqua; the reference palette, stepped per mode. */
.bz-usage-chart { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; }
.app-theme-dark .bz-usage-chart { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; }
.bz-chart-legend { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; color: var(--mud-palette-text-secondary); font-size: .8rem; }
.bz-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.swatch.botty { background: var(--series-1); }
.swatch.captcha { background: var(--series-2); }
.swatch.cloud { background: var(--series-3); }
.bz-link-button { border: 0; background: none; color: var(--bz-accent); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }

.bz-chart-plot { position: relative; height: 220px; margin-left: 40px; }
.bz-chart-grid { position: absolute; inset: 0; pointer-events: none; }
.bz-chart-grid span { position: absolute; left: 0; right: 0; border-top: 1px solid var(--bz-line); }
.bz-chart-grid em { position: absolute; right: calc(100% + 8px); top: -8px; color: var(--mud-palette-text-secondary); font-size: .7rem; font-style: normal; font-variant-numeric: tabular-nums; }
.bz-chart-columns { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.bz-chart-col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; outline: 0; }
.bz-chart-col:hover, .bz-chart-col:focus-visible { background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent); }
.bz-chart-col .stack { width: 100%; max-width: 22px; margin: 0 auto; display: flex; flex-direction: column; gap: 2px; }
.bz-chart-col .seg { display: block; min-height: 2px; }
.bz-chart-col .seg:first-child { border-radius: 4px 4px 0 0; }
.bz-chart-col .seg.botty { background: var(--series-1); }
.bz-chart-col .seg.captcha { background: var(--series-2); }
.bz-chart-col .seg.cloud { background: var(--series-3); }
.bz-chart-col .tip {
    position: absolute; bottom: calc(100% + 6px); left: 50%; z-index: 3; display: none; flex-direction: column; gap: 3px; min-width: 140px;
    padding: 8px 10px; border: 1px solid var(--bz-border); border-radius: 6px; background: var(--mud-palette-surface);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25); color: var(--mud-palette-text-primary); font-size: .76rem; transform: translateX(-50%); pointer-events: none;
}
.bz-chart-col .tip span { display: flex; align-items: center; gap: 6px; }
.bz-chart-col .tip b { margin-left: auto; font-variant-numeric: tabular-nums; }
.bz-chart-col:hover .tip, .bz-chart-col:focus-visible .tip { display: flex; }
.bz-chart-col:first-child .tip { left: 0; transform: none; }
.bz-chart-col:last-child .tip { left: auto; right: 0; transform: none; }
.bz-chart-axis { display: flex; gap: 2px; margin: 6px 0 0 40px; }
.bz-chart-axis span { flex: 1; overflow: visible; color: var(--mud-palette-text-secondary); font-size: .7rem; white-space: nowrap; }

.bz-data-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.bz-data-table th { padding: 6px 8px; border-bottom: 1px solid var(--bz-border); color: var(--mud-palette-text-secondary); font-weight: 600; text-align: left; }
.bz-data-table td { padding: 6px 8px; border-bottom: 1px solid var(--bz-line); font-variant-numeric: tabular-nums; }
.bz-data-table td + td, .bz-data-table th + th { text-align: right; }

.bz-amount { min-width: 70px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bz-amount.plus { color: var(--bz-ok); }
.bz-amount.minus { color: var(--mud-palette-text-secondary); }

/* Plan sheet */
.bz-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; padding-bottom: 8px; }
.bz-plan { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--bz-border); border-radius: 10px; background: var(--bz-panel); }
.bz-plan.featured { border-color: color-mix(in srgb, var(--bz-accent) 60%, var(--bz-border)); background: linear-gradient(160deg, color-mix(in srgb, var(--bz-accent) 12%, var(--bz-panel)), var(--bz-panel) 60%); }
.bz-plan.current { box-shadow: 0 0 0 2px var(--bz-accent); }
.bz-plan header { display: flex; align-items: center; justify-content: space-between; }
.bz-plan h3 { margin: 0; font-size: 1.1rem; }
.bz-plan-price { font-size: 1.8rem; font-weight: 700; }
.bz-plan-price span { color: var(--mud-palette-text-secondary); font-size: .9rem; font-weight: 400; }
.bz-plan-credits { color: var(--mud-palette-text-secondary); font-size: .82rem; }
.bz-plan ul { flex: 1; margin: 6px 0 10px; padding: 0; list-style: none; }
.bz-plan li { display: flex; gap: 8px; padding: 4px 0; font-size: .86rem; }
.bz-plan li .mud-icon-root { color: var(--bz-ok); }

/* Account > Security */
.bz-security-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0 4px; }
.bz-security-row + .bz-security-row { border-top: 1px solid var(--bz-line); margin-top: 10px; }
.bz-security-row strong { display: block; font-size: .9rem; }
.bz-security-row span { color: var(--mud-palette-text-secondary); font-size: .82rem; }
.bz-security-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 8px 12px; border-radius: 6px; background: color-mix(in srgb, var(--bz-ok) 12%, transparent); color: var(--mud-palette-text-primary); font-size: .82rem; }
.bz-security-note .mud-icon-root { color: var(--bz-ok); }
@media (max-width: 600px) { .bz-security-row { flex-direction: column; align-items: stretch; } }