/* Dashboard controls and theme-specific spaces share the same financial widgets. */
.dashboard-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:-5px 0 17px}.dashboard-layout-label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.76rem}.dashboard-layout-label svg{width:17px;height:17px}.dashboard-toolbar .secondary{font-size:.76rem;min-height:40px;padding:9px 13px;flex-shrink:0}.dashboard-toolbar .secondary svg{width:15px;height:15px}
.theme-scene{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:125px;border:1px solid var(--line);border-radius:23px;padding:22px 27px;background:linear-gradient(120deg,var(--card),var(--soft));margin-bottom:18px;color:var(--ink)}.scene-eyebrow{display:block;color:var(--muted);font-size:.6rem;font-weight:700;letter-spacing:.1em;margin-bottom:8px}.theme-scene strong{font-size:1.2rem;letter-spacing:-.03em;font-weight:650;max-width:320px;display:block;line-height:1.3}.scene-art{flex-shrink:0;width:170px;height:100px;color:var(--green)}.scene-art svg{width:100%;height:100%;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.scene-fill{fill:var(--soft);stroke:var(--green)}.scene-accent{fill:var(--lime);stroke:var(--green)}
.widget-board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:19px;align-items:stretch}.dashboard-widget{min-width:0;grid-column:span 6}.dashboard-widget>.panel,.dashboard-widget>.metric-card{height:100%;margin-bottom:0}.widget-wide{grid-column:span 12}.widget-small{grid-column:span 3}.dashboard-widget>.dashboard-hero{margin:0;height:100%}.dashboard-widget .metric-card{width:100%;min-height:158px}.dashboard-widget .panel{margin:0}.dashboard-widget .metric-card>div{min-width:0}.dashboard-widget .metric-card strong{font-variant-numeric:tabular-nums}.widget-board .metric-button{display:flex}
.widget-choices{display:grid;gap:10px;margin-bottom:24px}.widget-choice{display:flex;align-items:center;gap:7px;padding:13px 9px 13px 12px;border:1px solid var(--line);border-radius:15px;background:var(--page)}.widget-choice label{display:flex;gap:9px;align-items:center;flex:1;min-width:0;cursor:pointer}.widget-choice label>span:last-child{min-width:0}.widget-choice input{width:19px;height:19px;accent-color:var(--green);flex-shrink:0}.widget-choice-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--soft);color:var(--green);flex-shrink:0}.widget-choice-icon svg{width:17px;height:17px}.widget-choice-icon .theme-emoji{font-size:20px}.widget-choice strong{font-size:.81rem;display:block}.widget-choice small{font-size:.67rem;color:var(--muted);display:block;line-height:1.45;margin-top:4px}.widget-move{display:flex;gap:2px;flex-shrink:0}.widget-move .icon-button{width:32px;min-width:32px;min-height:44px;font-size:1.1rem;background:var(--card);border:1px solid var(--line)}.widget-move .icon-button:disabled{opacity:.3;cursor:default}.widget-save-hint{margin:0 0 10px}.transaction-kind{font-size:.79rem;color:var(--green);margin:16px 0}
.theme-preview{position:relative;overflow:hidden}.theme-preview-art{position:absolute;width:89px;right:2px;bottom:0;color:var(--preview-accent);opacity:.85}.theme-preview-art svg{width:100%;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.theme-preview-art .scene-fill{fill:var(--preview-secondary);stroke:var(--preview-accent);fill-opacity:.25}.theme-preview-art .scene-accent{fill:var(--preview-accent);stroke:var(--preview-accent)}.theme-preview-lines{display:none}.theme-preview[data-design=arcade]{border-radius:3px;background-image:repeating-linear-gradient(0deg,transparent 0 5px,#ffffff0b 5px 6px)}.theme-preview[data-design=wizard]{border-radius:24px 24px 5px 5px;border:1px solid var(--preview-accent)}.theme-preview[data-design=journal]{border-radius:4px;border-left:8px solid var(--preview-accent)}.theme-preview[data-design=garden]{border-radius:28px 8px 28px 8px}.theme-preview[data-design=blueprint]{border-radius:0;background-image:linear-gradient(#ffffff18 1px,transparent 1px),linear-gradient(90deg,#ffffff18 1px,transparent 1px);background-size:12px 12px}.theme-preview[data-design=sticker]{border-radius:20px 8px 16px 6px}
/* Parchment, crests, and arched frames. */
:root[data-design=wizard] body{background:radial-gradient(circle at 0 0,color-mix(in srgb,var(--lime) 15%,transparent),transparent 40%),repeating-linear-gradient(0deg,transparent 0 6px,color-mix(in srgb,var(--ink) 2%,transparent) 6px 7px),var(--page)}
:root[data-design=wizard] h1,:root[data-design=wizard] h2,:root[data-design=wizard] .theme-scene strong,:root[data-design=wizard] .envelope-name{font-family:Georgia,'Times New Roman',serif;font-weight:600;letter-spacing:-.025em}
:root[data-design=wizard] .theme-scene{border-radius:60px 60px 15px 15px;border:1px solid var(--ring);background:radial-gradient(ellipse at top,color-mix(in srgb,var(--lime) 24%,var(--card)),var(--card));padding:25px 30px;box-shadow:inset 0 0 0 6px var(--page),inset 0 0 0 7px var(--line)}
:root[data-design=wizard] .panel,:root[data-design=wizard] .envelope-card{border-radius:18px;border:1px solid var(--ring);background:linear-gradient(160deg,color-mix(in srgb,var(--lime) 7%,var(--card)),var(--card));box-shadow:inset 0 0 0 4px var(--card),inset 0 0 0 5px var(--line),0 5px 16px #00000005}
:root[data-design=wizard] .dashboard-hero{border-radius:44px 44px 18px 18px;border:1px solid var(--lime);box-shadow:inset 0 0 0 5px var(--navy),inset 0 0 0 6px color-mix(in srgb,var(--lime) 45%,transparent)}
:root[data-design=wizard] .widget-envelopes{grid-column:span 8}:root[data-design=wizard] .widget-upcoming{grid-column:span 4}:root[data-design=wizard] .section-eyebrow{letter-spacing:.13em;font-size:.58rem}:root[data-design=wizard] .desktop-nav .nav-item.active{border:1px solid var(--ring);border-radius:8px}
/* Cockpit cards and orbital art on a static starfield. */
:root[data-design=space] body{background-image:radial-gradient(circle at 20% 16%,#ffffff70 1px,transparent 1.7px),radial-gradient(circle at 70% 37%,#ffffff45 1px,transparent 1.8px),radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--green) 12%,transparent),transparent 48%);background-size:127px 157px,183px 221px,100% 100%;background-color:var(--page)}
:root[data-design=space] .panel,:root[data-design=space] .metric-card,:root[data-design=space] .envelope-card,:root[data-design=space] .subscription-card{border-radius:16px;background:color-mix(in srgb,var(--card) 94%,transparent);border:1px solid var(--line);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--green) 14%,transparent),0 9px 25px #00000010}
:root[data-design=space] .theme-scene{border-radius:16px;background:radial-gradient(ellipse at 80% 30%,color-mix(in srgb,var(--green) 16%,var(--card)),var(--card));border:1px solid var(--ring)}
:root[data-design=space] .dashboard-hero{border-radius:16px;background:linear-gradient(130deg,var(--navy),var(--soft));border:1px solid var(--ring)}:root[data-design=space] .budget-dial{box-shadow:0 0 0 6px color-mix(in srgb,var(--green) 8%,transparent),0 0 0 13px color-mix(in srgb,var(--green) 4%,transparent)}
:root[data-design=space] .section-eyebrow,:root[data-design=space] .scene-eyebrow,:root[data-design=space] .hero-eyebrow{font-family:ui-monospace,monospace;letter-spacing:.1em}:root[data-design=space] .widget-balance{grid-column:span 8}:root[data-design=space] .widget-small{grid-column:span 4}:root[data-design=space] .desktop-nav .nav-item{border-radius:8px}
/* Pixel frames and bold, stepped controls. */
:root[data-design=arcade] body{background-image:linear-gradient(color-mix(in srgb,var(--ring) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ring) 6%,transparent) 1px,transparent 1px);background-size:24px 24px;background-color:var(--page)}
:root[data-design=arcade] h1,:root[data-design=arcade] h2,:root[data-design=arcade] .theme-scene strong,:root[data-design=arcade] .metric-card strong,:root[data-design=arcade] .hero-number{font-family:ui-monospace,'Courier New',monospace;letter-spacing:-.04em}
:root[data-design=arcade] .panel,:root[data-design=arcade] .metric-card,:root[data-design=arcade] .envelope-card,:root[data-design=arcade] .bill-card,:root[data-design=arcade] .subscription-card{border:2px solid var(--line);border-radius:5px;box-shadow:4px 4px 0 color-mix(in srgb,var(--ring) 22%,transparent)}
:root[data-design=arcade] .theme-scene,:root[data-design=arcade] .dashboard-hero{border-radius:5px;border:2px solid var(--ring);box-shadow:5px 5px 0 var(--soft);background-image:repeating-linear-gradient(0deg,transparent 0 5px,#ffffff04 5px 6px)}
:root[data-design=arcade] .primary,:root[data-design=arcade] .secondary,:root[data-design=arcade] .filter{border-radius:4px}:root[data-design=arcade] .category-icon,:root[data-design=arcade] .service-mark{border-radius:6px}:root[data-design=arcade] .week-bar-space i{border-radius:0}:root[data-design=arcade] .desktop-nav .nav-item{border-radius:4px}
/* A journal desk with ruled pages and bookish headings. */
:root[data-design=journal] body{background-image:repeating-linear-gradient(0deg,transparent 0 30px,color-mix(in srgb,var(--line) 42%,transparent) 30px 31px);background-color:var(--page)}
:root[data-design=journal] h1,:root[data-design=journal] h2,:root[data-design=journal] .theme-scene strong,:root[data-design=journal] .envelope-name{font-family:Georgia,serif;letter-spacing:-.03em}
:root[data-design=journal] .panel,:root[data-design=journal] .envelope-card,:root[data-design=journal] .subscription-card{border-radius:9px;border-left:5px solid var(--line);box-shadow:3px 5px 0 color-mix(in srgb,var(--line) 50%,transparent)}
:root[data-design=journal] .theme-scene{border-radius:8px;border-left:9px solid var(--green);background:var(--card)}:root[data-design=journal] .dashboard-hero{border-radius:9px;border-left:8px solid var(--lime)}:root[data-design=journal] .panel-header{border-bottom:1px dashed var(--line);margin-bottom:9px;padding-bottom:17px}
:root[data-design=journal] .widget-activity{grid-column:span 8}:root[data-design=journal] .widget-upcoming{grid-column:span 4}:root[data-design=journal] .spending-distribution{height:12px;border-radius:3px}:root[data-design=journal] .metric-card{border-radius:8px}:root[data-design=journal] .primary,:root[data-design=journal] .secondary{border-radius:8px}
/* Botanical cards and a garden illustration. */
:root[data-design=garden] body{background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--lime) 28%,transparent),transparent 46%),radial-gradient(ellipse at 100% 100%,color-mix(in srgb,var(--green) 8%,transparent),transparent 40%),var(--page)}
:root[data-design=garden] .theme-scene{border-radius:36px 12px 36px 12px;background:linear-gradient(120deg,var(--card),var(--soft));border-bottom:3px solid color-mix(in srgb,var(--green) 30%,var(--line))}
:root[data-design=garden] .theme-scene strong,:root[data-design=garden] h1{font-family:Georgia,serif}:root[data-design=garden] .panel,:root[data-design=garden] .envelope-card{border-radius:30px 12px 30px 12px}:root[data-design=garden] .dashboard-hero{border-radius:36px 16px 36px 16px}:root[data-design=garden] .category-icon{border-radius:17px 7px 17px 7px}:root[data-design=garden] .week-bar-space i{border-radius:30px 30px 4px 4px}:root[data-design=garden] .metric-card{border-radius:23px 10px 23px 10px}
/* Postcard panels and an illustrated horizon. */
:root[data-design=coast] .theme-scene{border-radius:5px;background:linear-gradient(170deg,var(--soft) 60%,var(--card) 60%);outline:1px dashed var(--ring);outline-offset:-9px;padding:26px 29px}
:root[data-design=coast] .panel,:root[data-design=coast] .envelope-card,:root[data-design=coast] .subscription-card{border-radius:10px;box-shadow:0 5px 0 var(--line);border:5px solid var(--card);outline:1px solid var(--line)}
:root[data-design=coast] .dashboard-hero{border-radius:12px 12px 32px 12px;background:linear-gradient(160deg,var(--navy),color-mix(in srgb,var(--navy) 70%,var(--green)));border-bottom:7px solid color-mix(in srgb,var(--lime) 85%,var(--card))}
:root[data-design=coast] .theme-scene strong,:root[data-design=coast] h1{font-family:Georgia,serif}:root[data-design=coast] .date-tile{border:1px dashed var(--ring);background:var(--soft)}
/* Sticker frames, washi-tape accents, and cheerful artwork. */
:root[data-design=sticker] .theme-scene{border-radius:22px 8px 30px 10px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--soft);background:var(--card)}
:root[data-design=sticker] .panel,:root[data-design=sticker] .envelope-card,:root[data-design=sticker] .metric-card{border-radius:22px 9px 24px 12px;border:2px solid color-mix(in srgb,var(--ink) 30%,var(--line));box-shadow:3px 3px 0 var(--soft)}
:root[data-design=sticker] .dashboard-hero{border-radius:26px 10px 30px 10px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--lime)}
:root[data-design=sticker] .category-icon{transform:rotate(-6deg);border:2px solid var(--card);box-shadow:2px 2px 0 var(--line)}:root[data-design=sticker] .scene-art{transform:rotate(4deg)}:root[data-design=sticker] .section-pill{background:var(--lime);color:var(--navy);border-radius:4px;transform:rotate(3deg)}:root[data-design=sticker] .primary,:root[data-design=sticker] .secondary{border:1px solid var(--ink);box-shadow:2px 2px 0 var(--soft)}
/* An architectural drafting sheet. */
:root[data-design=blueprint] body{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px;background-color:var(--page)}
:root[data-design=blueprint] h1,:root[data-design=blueprint] h2,:root[data-design=blueprint] .theme-scene strong,:root[data-design=blueprint] .section-eyebrow{font-family:ui-monospace,'Courier New',monospace;letter-spacing:-.025em}
:root[data-design=blueprint] .theme-scene,:root[data-design=blueprint] .panel,:root[data-design=blueprint] .metric-card,:root[data-design=blueprint] .envelope-card,:root[data-design=blueprint] .dashboard-hero{border-radius:0;border:1px solid var(--ring);box-shadow:4px 4px 0 color-mix(in srgb,var(--ring) 18%,var(--page))}
:root[data-design=blueprint] .theme-scene{background:var(--card);outline:1px dashed var(--line);outline-offset:-8px}:root[data-design=blueprint] .primary,:root[data-design=blueprint] .secondary,:root[data-design=blueprint] .category-icon{border-radius:3px}:root[data-design=blueprint] .progress-track,:root[data-design=blueprint] .week-bar-space i{border-radius:0}
@media(max-width:1100px){.widget-small{grid-column:span 6}.widget-board{gap:16px}.widget-balance{grid-column:span 12!important}:root[data-design=space] .widget-small{grid-column:span 6}.theme-scene strong{font-size:1.1rem}}
@media(max-width:800px){.dashboard-layout-label{font-size:.7rem}.dashboard-toolbar{gap:10px}.dashboard-toolbar .secondary{font-size:.71rem;padding:8px 11px}.theme-scene{padding:20px;min-height:107px;gap:10px;margin-bottom:16px}.scene-art{width:112px;height:76px}.theme-scene strong{font-size:1.04rem}.scene-eyebrow{font-size:.54rem;letter-spacing:.07em}.widget-board{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.dashboard-widget,.widget-wide,.widget-regular,:root[data-design] .widget-balance,:root[data-design] .widget-envelopes,:root[data-design] .widget-upcoming,:root[data-design] .widget-activity{grid-column:span 2!important}.widget-small,:root[data-design=space] .widget-small{grid-column:span 1!important}.dashboard-widget .metric-card{min-height:145px}.widget-board .dashboard-hero{padding:24px}.dashboard-toolbar+ .theme-scene{margin-top:0}:root[data-design=wizard] .theme-scene{padding:24px 22px}:root[data-design=coast] .theme-scene{padding:23px}:root[data-design=arcade] .hero-number{font-size:2.45rem}:root[data-design=arcade] .dashboard-layout-label{font-size:.65rem}.widget-choice{padding:11px 8px}.widget-choice-icon{display:none}.widget-choice strong{font-size:.78rem}.widget-choice small{font-size:.65rem}.widget-move .icon-button{min-width:30px;width:30px}.widget-choices{gap:9px}}
@media(max-width:350px){.theme-scene{padding:18px;gap:8px}.scene-art{width:86px;height:70px}.theme-scene strong{font-size:.96rem}.scene-eyebrow{font-size:.5rem}.dashboard-layout-label{max-width:160px;line-height:1.4}.widget-board{gap:12px}.widget-board .dashboard-hero{padding:21px}:root[data-design=arcade] .hero-number{font-size:2.02rem}.widget-choice small{font-size:.61rem}.widget-choice label{gap:7px}.widget-choice input{width:17px;height:17px}}