/* Each world changes the artwork, type, surfaces, controls, and dashboard composition. */
.theme-default-badge{display:inline-flex;margin:1px 7px 7px;padding:4px 8px;border-radius:99px;background:var(--soft);color:var(--green);font-size:.62rem;font-weight:700}
.theme-choice-name{line-height:1.4;overflow-wrap:anywhere}.theme-preview{min-height:88px}.theme-preview-art{width:105px;right:5px}.theme-preview-symbol{position:relative;z-index:1}.theme-preview-art .scene-accent{fill-opacity:.7}
.theme-scene>div:first-child{min-width:0}.scene-eyebrow{line-height:1.55}.dashboard-layout-label{line-height:1.5;min-width:0}
:root[data-mode=dark] .theme-choice,:root[data-mode=dark] .bill-card,:root[data-mode=dark] .subscription-card{box-shadow:none}
:root[data-mode=dark] .metric-icon,:root[data-mode=dark] .category-icon{background:var(--soft);color:var(--green)}
:root[data-mode=dark] .hero-badge{color:var(--hero-text)}
/* Black and gold / red and gold: a stadium concourse and scoreboard. */
:root[data-design=stadium] body{background:repeating-linear-gradient(135deg,transparent 0 110px,color-mix(in srgb,var(--lime) 5%,transparent) 110px 150px),var(--page)}
:root[data-design=stadium] h1,:root[data-design=stadium] h2,:root[data-design=stadium] .theme-scene strong{font-family:Impact,'Arial Narrow',sans-serif;font-weight:700;letter-spacing:.015em}
:root[data-design=stadium] .theme-scene{border-radius:12px;border-left:7px solid var(--lime);background:linear-gradient(120deg,var(--card),var(--soft));box-shadow:0 5px 0 color-mix(in srgb,var(--ink) 7%,transparent)}
:root[data-design=stadium] .dashboard-hero{border-radius:12px;border-top:5px solid var(--lime);background:linear-gradient(120deg,var(--navy),color-mix(in srgb,var(--navy) 90%,var(--green)));box-shadow:0 7px 0 color-mix(in srgb,var(--ink) 10%,transparent)}
:root[data-design=stadium] .hero-number,:root[data-design=stadium] .metric-card strong{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-variant-numeric:tabular-nums;font-weight:650;letter-spacing:-.045em}
:root[data-design=stadium] .panel,:root[data-design=stadium] .envelope-card,:root[data-design=stadium] .metric-card{border-radius:12px;border-top:3px solid var(--line)}
:root[data-design=stadium] .metric-card{border-bottom:3px solid var(--lime)}
:root[data-design=stadium] .section-eyebrow,:root[data-design=stadium] .scene-eyebrow{text-transform:uppercase;font-weight:800;letter-spacing:.13em}
:root[data-design=stadium] .primary,:root[data-design=stadium] .secondary{border-radius:8px}
:root[data-design=stadium] .widget-envelopes{grid-column:span 8}:root[data-design=stadium] .widget-upcoming{grid-column:span 4}
:root[data-design=stadium][data-mode=dark] .theme-scene{background:radial-gradient(ellipse at 90% 0,color-mix(in srgb,var(--lime) 15%,transparent),transparent 70%),var(--card)}
:root[data-design=stadium][data-mode=dark] .dashboard-hero{box-shadow:0 0 24px color-mix(in srgb,var(--lime) 8%,transparent)}
.theme-preview[data-design=stadium]{border-radius:5px;border-top:5px solid var(--preview-accent);background-image:repeating-linear-gradient(90deg,transparent 0 22px,#ffffff08 22px 23px)}
/* LCARS-inspired bridge: asymmetric corners and coloured instrument rails. */
:root[data-design=bridge] body{background:radial-gradient(circle at 15% 30%,#ffffff3b 1px,transparent 2px),radial-gradient(circle at 80% 70%,#ffffff2b 1px,transparent 2px),var(--page);background-size:141px 167px,193px 239px}
:root[data-design=bridge] h1,:root[data-design=bridge] h2,:root[data-design=bridge] .scene-eyebrow,:root[data-design=bridge] .section-eyebrow{font-family:'Courier New',monospace;letter-spacing:.025em}
:root[data-design=bridge] .theme-scene{border-radius:42px 12px 12px 12px;border-left:12px solid var(--lime);border-top:6px solid var(--green);background:var(--card)}
:root[data-design=bridge] .theme-scene strong{font-family:'Courier New',monospace;font-weight:700}
:root[data-design=bridge] .dashboard-hero{border-radius:12px 12px 12px 42px;border-left:12px solid var(--lime);border-bottom:6px solid var(--green);background:var(--navy);box-shadow:none}
:root[data-design=bridge] .panel,:root[data-design=bridge] .metric-card,:root[data-design=bridge] .envelope-card{border-radius:12px;border-top:5px solid var(--green);box-shadow:none}
:root[data-design=bridge] .metric-card:nth-child(1){border-top-color:var(--lime)}
:root[data-design=bridge] .progress-track,:root[data-design=bridge] .week-bar-space i{border-radius:0}
:root[data-design=bridge] .primary,:root[data-design=bridge] .secondary{border-radius:30px 8px 8px 30px}
:root[data-design=bridge] .desktop-nav .nav-item.active{border-radius:30px 8px 8px 30px;border-left:6px solid var(--lime)}
:root[data-design=bridge] .widget-rhythm{grid-column:span 8}:root[data-design=bridge] .widget-breakdown{grid-column:span 4}
.theme-preview[data-design=bridge]{border-radius:30px 4px 4px 4px;border-left:10px solid var(--preview-accent);border-top:5px solid var(--preview-secondary)}
/* Company 8: brigade-blue panels, orange flames, manga and reflective stripes. */
:root[data-design=brigade] body{background:repeating-linear-gradient(135deg,transparent 0 5px,#ffffff03 5px 6px),var(--page)}
:root[data-design=brigade] h1,:root[data-design=brigade] h2,:root[data-design=brigade] .theme-scene strong{font-family:Impact,'Arial Narrow',sans-serif;letter-spacing:.03em;font-weight:700}
:root[data-design=brigade] .theme-scene{border-radius:8px 28px 8px 8px;border:2px solid var(--green);background:linear-gradient(135deg,var(--soft),var(--card));box-shadow:5px 5px 0 var(--navy)}
:root[data-design=brigade] .dashboard-hero{border-radius:8px;border-top:6px solid var(--lime);border-bottom:6px solid var(--green);background:var(--navy)}
:root[data-design=brigade] .panel,:root[data-design=brigade] .envelope-card,:root[data-design=brigade] .metric-card{border-radius:8px;border:1px solid var(--line);box-shadow:4px 4px 0 var(--navy)}
:root[data-design=brigade] .metric-icon{border-radius:6px;border:1px solid var(--green)}
:root[data-design=brigade] .primary,:root[data-design=brigade] .secondary{border-radius:6px}
:root[data-design=brigade] .section-eyebrow{text-transform:uppercase;letter-spacing:.14em}
.theme-preview[data-design=brigade]{border-radius:4px 18px 4px 4px;border-top:5px solid var(--preview-accent);border-bottom:4px solid var(--preview-secondary)}
/* Psycho-Pass: a quiet inspection screen, reticles, and fine technical grids. */
:root[data-design=scanner] body{background-image:linear-gradient(#90f8d408 1px,transparent 1px),linear-gradient(90deg,#90f8d408 1px,transparent 1px);background-size:32px 32px;background-color:var(--page)}
:root[data-design=scanner] h1,:root[data-design=scanner] h2,:root[data-design=scanner] .theme-scene strong,:root[data-design=scanner] .hero-number{font-family:'Courier New',monospace;font-weight:700;letter-spacing:-.04em}
:root[data-design=scanner] .theme-scene{border-radius:3px;border:1px solid var(--green);background:linear-gradient(90deg,var(--card),var(--soft));outline:1px solid var(--line);outline-offset:-7px}
:root[data-design=scanner] .dashboard-hero{border-radius:3px;background:var(--navy);border-left:4px solid var(--lime);box-shadow:0 0 20px #90f8d40a}
:root[data-design=scanner] .panel,:root[data-design=scanner] .envelope-card,:root[data-design=scanner] .metric-card{border-radius:3px;border:1px solid var(--line);box-shadow:none}
:root[data-design=scanner] .metric-icon,:root[data-design=scanner] .primary,:root[data-design=scanner] .secondary,:root[data-design=scanner] .category-icon{border-radius:3px}
:root[data-design=scanner] .section-eyebrow,:root[data-design=scanner] .scene-eyebrow{font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:.1em}
:root[data-design=scanner] .progress-track,:root[data-design=scanner] .week-bar-space i{border-radius:0}
:root[data-design=scanner] .widget-activity{grid-column:span 8}:root[data-design=scanner] .widget-breakdown{grid-column:span 4}
.theme-preview[data-design=scanner]{border-radius:0;border:1px solid var(--preview-accent);background-image:linear-gradient(#ffffff12 1px,transparent 1px),linear-gradient(90deg,#ffffff12 1px,transparent 1px);background-size:13px 13px}
/* An original energy-drink world: bright cans, racing stripes, and oversized numerals. */
:root[data-design=energy] body{background:repeating-linear-gradient(125deg,transparent 0 85px,#d5ff5b05 85px 100px),var(--page)}
:root[data-design=energy] h1,:root[data-design=energy] h2,:root[data-design=energy] .theme-scene strong{font-family:Impact,'Arial Narrow',sans-serif;font-weight:700;font-style:italic;letter-spacing:.01em}
:root[data-design=energy] .theme-scene{border-radius:22px 4px 22px 4px;border:1px solid var(--lime);background:repeating-linear-gradient(125deg,transparent 0 15px,#d5ff5b06 15px 18px),var(--card)}
:root[data-design=energy] .dashboard-hero{border-radius:22px 4px 22px 4px;border-left:7px solid var(--lime);background:var(--navy);box-shadow:0 8px 30px #d5ff5b09}
:root[data-design=energy] .hero-number{font-weight:800;font-style:italic}
:root[data-design=energy] .panel,:root[data-design=energy] .envelope-card,:root[data-design=energy] .metric-card{border-radius:18px 4px 18px 4px;box-shadow:none}
:root[data-design=energy] .metric-card{border-top:3px solid var(--lime)}
:root[data-design=energy] .primary,:root[data-design=energy] .secondary{border-radius:12px 3px 12px 3px}
:root[data-design=energy] .scene-eyebrow{text-transform:uppercase;letter-spacing:.14em}
:root[data-design=energy] .widget-rhythm{grid-column:span 8}:root[data-design=energy] .widget-envelopes{grid-column:span 4}
.theme-preview[data-design=energy]{border-radius:20px 3px 20px 3px;border-left:5px solid var(--preview-accent);background-image:repeating-linear-gradient(125deg,transparent 0 12px,#ffffff09 12px 16px)}
/* Garber-inspired fairytale: rose stationery, gilded pages, and a broken-heart illustration. */
:root[data-design=storybook] body{background:radial-gradient(ellipse at 100% 0,#efc49936,transparent 50%),radial-gradient(ellipse at 0 70%,#993f6210,transparent 60%),var(--page)}
:root[data-design=storybook] h1,:root[data-design=storybook] h2,:root[data-design=storybook] .theme-scene strong,:root[data-design=storybook] .envelope-name{font-family:Georgia,'Times New Roman',serif;font-weight:500}
:root[data-design=storybook] .theme-scene{border-radius:60px 60px 8px 8px;background:linear-gradient(140deg,var(--card),var(--soft));border:1px solid var(--ring);outline:1px solid var(--line);outline-offset:-7px;padding:28px 30px}
:root[data-design=storybook] .theme-scene strong{font-style:italic;font-size:1.35rem}
:root[data-design=storybook] .dashboard-hero{border-radius:35px 35px 8px 8px;border:1px solid var(--lime);box-shadow:inset 0 0 0 5px var(--navy),inset 0 0 0 6px #efc49966}
:root[data-design=storybook] .panel,:root[data-design=storybook] .envelope-card{border-radius:8px;border:1px solid var(--line);box-shadow:4px 4px 0 var(--soft)}
:root[data-design=storybook] .metric-card{border-radius:24px 24px 8px 8px;border-bottom:3px solid var(--lime)}
:root[data-design=storybook] .primary,:root[data-design=storybook] .secondary{border-radius:99px}
:root[data-design=storybook] .section-eyebrow{letter-spacing:.13em}
:root[data-design=storybook] .widget-envelopes{grid-column:span 8}:root[data-design=storybook] .widget-upcoming{grid-column:span 4}
.theme-preview[data-design=storybook]{border-radius:40px 40px 4px 4px;border:1px solid var(--preview-accent);outline:1px solid #ffffff33;outline-offset:-5px}
/* Fahrenheit 451: a printed ledger in charcoal, paper, and ember orange. */
:root[data-design=editorial] body{background:repeating-linear-gradient(0deg,transparent 0 5px,#ffb16c03 5px 6px),var(--page)}
:root[data-design=editorial] h1,:root[data-design=editorial] h2,:root[data-design=editorial] .theme-scene strong,:root[data-design=editorial] .envelope-name{font-family:Georgia,'Times New Roman',serif;font-weight:500}
:root[data-design=editorial] .theme-scene{border-radius:0;border-top:3px solid var(--lime);border-bottom:1px solid var(--lime);background:var(--card)}
:root[data-design=editorial] .dashboard-hero{border-radius:0;background:var(--navy);border-left:8px solid var(--lime);box-shadow:none}
:root[data-design=editorial] .panel,:root[data-design=editorial] .metric-card,:root[data-design=editorial] .envelope-card{border-radius:0;border-top:2px solid var(--line);box-shadow:none}
:root[data-design=editorial] .section-eyebrow,:root[data-design=editorial] .scene-eyebrow{font-family:'Courier New',monospace;text-transform:uppercase;letter-spacing:.1em}
:root[data-design=editorial] .primary,:root[data-design=editorial] .secondary{border-radius:3px}
:root[data-design=editorial] .widget-activity{grid-column:span 8}:root[data-design=editorial] .widget-upcoming{grid-column:span 4}
.theme-preview[data-design=editorial]{border-radius:0;border-top:3px solid var(--preview-accent);border-bottom:1px solid var(--preview-accent)}
@media(max-width:1100px){:root[data-design] .widget-rhythm,:root[data-design] .widget-breakdown{grid-column:span 6}}
@media(max-width:800px){:root[data-design] .widget-rhythm,:root[data-design] .widget-breakdown{grid-column:span 2!important}:root[data-design=bridge] .theme-scene{border-left-width:8px;padding:20px 17px}:root[data-design=bridge] .dashboard-hero{border-left-width:8px}:root[data-design=storybook] .theme-scene{padding:24px 20px}:root[data-design=storybook] .theme-scene strong{font-size:1.12rem}.theme-preview-art{width:95px}.theme-preview{min-height:80px}}
@media(max-width:350px){.theme-grid{grid-template-columns:1fr}.theme-preview-art{width:110px}.theme-choice-name{font-size:.86rem}.theme-choice-description{font-size:.75rem}.theme-default-badge{font-size:.68rem}:root[data-design=bridge] .theme-scene{padding:18px 13px}:root[data-design=storybook] .theme-scene strong{font-size:1rem}}
/* A full-width field replaces the dial in the four football themes. */
:root[data-design=stadium] .balance-layout{display:block}
:root[data-design=stadium] .hero-number{font-size:clamp(2.5rem,5vw,3.8rem);line-height:1.13;margin:17px 0 9px;overflow-wrap:anywhere}
:root[data-design=stadium] .money-fraction{font-size:.64em;font-weight:500;letter-spacing:-.025em}
:root[data-design=stadium] .metric-card strong{letter-spacing:-.03em}
.football-tracker{margin-top:25px;--field-accent:var(--lime)}
.field-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;font-size:.76rem;color:var(--hero-muted)}
.field-heading strong{color:var(--lime);font-size:.82rem;font-weight:650;text-align:right}
.football-track{width:100%;overflow:hidden;border-radius:10px;box-shadow:0 4px 16px #00000020}
.football-track svg{width:100%;height:auto;display:block;stroke:none}
.field-grass{fill:#143b31}.field-stripe{fill:#ffffff07}.field-endzone{fill:var(--brand-bg)}.field-fill{fill:var(--field-accent);opacity:.18}
.field-line{stroke:#ffffff58;stroke-width:1}.field-goalline{stroke:#ffffffb3;stroke-width:1.5}.field-hash{stroke:#ffffff7d;stroke-width:1}
.football-track text{fill:#ffffffc9;font-family:system-ui,-apple-system,sans-serif;font-size:20px;text-anchor:middle;font-weight:550}
.football-track .field-team{fill:var(--lime);font-size:15px;font-weight:800;letter-spacing:1.7px;dominant-baseline:middle}
.field-position{stroke:var(--field-accent);stroke-width:2;stroke-dasharray:4 3}
.field-ball ellipse{fill:#754021;stroke:#fff3dc;stroke-width:2.2}.field-ball path{stroke:#fff3dc;stroke-width:1.8;fill:none;stroke-linecap:round}
.field-outline{stroke:#ffffff42;stroke-width:1.5;fill:none}
.field-caption{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.63rem;color:var(--hero-muted);margin:8px 0 0}
.field-caption strong{color:var(--hero-text);font-weight:550;font-size:.69rem}
.field-hint{color:var(--hero-muted);font-size:.64rem;line-height:1.6;margin:9px 0 0}
.field-over{--field-accent:#ff9eaa}.field-over .field-heading strong{color:var(--field-accent)}
@media(max-width:800px){:root[data-design=stadium] .hero-number{font-size:clamp(2.45rem,10vw,3.2rem)}.football-tracker{margin-top:22px}.field-heading{font-size:.68rem;gap:8px}.field-heading strong{font-size:.73rem}.field-caption{font-size:.58rem}.field-hint{font-size:.6rem}}
@media(max-width:350px){:root[data-design=stadium] .hero-number{font-size:2.35rem}.field-heading{align-items:flex-start;flex-direction:column;gap:5px}.field-heading strong{text-align:left}.football-tracker{margin-top:19px}.field-caption strong{font-size:.63rem}.field-caption{font-size:.54rem}}
.brand-mark img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
:root[data-design=stadium] .hero-number.negative{color:#ffb9c1}