/* Shared visual language from Saldo's welcome and recovery screens.
   Layout and behaviour remain in styles.css; these tokens cover every view. */
:root {
  --bg: #070711;
  --surface: #151425;
  --raised: #242237;
  --muted: #bcb8d0;
  --faint: #aaa5bf;
  --line: #dad4ff1c;
  --stage: radial-gradient(ellipse 95% 850px at 50% 140px, #29215b 0%, #13122b 48%, #070711 100%);
  --panel-fill: linear-gradient(145deg, #242139f5, #141322fa 70%);
  --panel-quiet: linear-gradient(150deg, #1c1b2df7, #12121efa);
  --panel-edge: #dfd7ff24;
  --panel-shine: inset 0 1px 0 #ffffff12, 0 12px 38px #03030b24;
  --field-fill: #e0d9ff09;
  --field-edge: #e0d9ff26;
  --pill-fill: #ddd5ff0c;
  --sheet-stage: radial-gradient(ellipse 110% 520px at 50% 0, #2b2450, #151327 52%, #10101c);
  --sheet-top: #211d37f5;
  --sheet-bottom: #11111f;
  --focus-glow: #aa98ff33;
}

html[data-theme=light] {
  --bg: #f5f3fb;
  --surface: #fcfbff;
  --raised: #eae5f6;
  --muted: #615b76;
  --faint: #716a84;
  --line: #3727551c;
  --stage: radial-gradient(ellipse 95% 850px at 50% 140px, #e0d7fc 0%, #efebfa 48%, #f5f3fb 100%);
  --panel-fill: linear-gradient(145deg, #fffffffa, #f8f5fff7);
  --panel-quiet: linear-gradient(150deg, #fffffffa, #f9f7fef7);
  --panel-edge: #fff;
  --panel-shine: inset 0 1px 0 #fff, 0 0 0 1px #59438a12, 0 12px 38px #3725550a;
  --field-fill: #ffffffc9;
  --field-edge: #55427533;
  --pill-fill: #6950960a;
  --sheet-stage: radial-gradient(ellipse 110% 520px at 50% 0, #eee6ff, #faf7ff 52%, #fff);
  --sheet-top: #f3edfff5;
  --sheet-bottom: #fff;
  --focus-glow: #7056bb29;
}

body, html[data-theme=light] body {
  isolation: isolate;
  background: var(--stage);
  background-attachment: fixed;
}
body::before { opacity: .035; }
.app-shell { background: transparent; }
.brand { letter-spacing: -.055em; }
.brand img { box-shadow: 0 6px 22px #100c272b; }
.brand-caption, .zone-label { letter-spacing: .13em; }
.hero-kicker { letter-spacing: .07em; }
.zone-label { color: var(--muted); }
.plan-page-title { font-weight: 650; letter-spacing: -.045em; }

/* Quiet, luminous surfaces continue the welcome's central light. */
:is(.panel, .todo-panel, .trend-panel, .month-close, .plan-hero, .wallet-card, .afford-cta),
html[data-theme=light] :is(.panel, .todo-panel, .trend-panel, .month-close, .plan-hero, .wallet-card, .afford-cta) {
  background: var(--panel-quiet);
  border: 1px solid var(--panel-edge);
  border-radius: 26px;
  box-shadow: var(--panel-shine);
}
.hero-current, html[data-theme=light] .hero-current {
  background: radial-gradient(ellipse 95% 135% at 0 0, #a592ff19, transparent 70%), var(--panel-fill);
  border: 1px solid var(--panel-edge);
  border-radius: 30px;
  box-shadow: inset 0 1px 0 #ffffff24, 0 24px 70px -38px #8e70e880;
}
.hero-current .hero-amount, .forecast-amount, .detail-amount {
  font-weight: 600;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}
.hero-current .hero-amount { text-shadow: 0 3px 32px #c9bbff14; }
.hero-figures { border-top-color: var(--line); }
.hero-figures > :is(div, button) { border-left-color: var(--line); }
.hero-figures strong { font-weight: 600; }
.hero-figures small, .hero-figures-note { color: var(--muted); }
.hero-status, .hero-card-top .month-switch,
html[data-theme=light] .hero-card-top .month-switch {
  background: var(--pill-fill);
  border-color: var(--panel-edge);
  box-shadow: inset 0 1px 0 #ffffff0c;
}
.budget-strip, html[data-theme=light] .budget-strip {
  background: var(--panel-quiet);
  border-color: var(--panel-edge);
  box-shadow: var(--panel-shine);
}
.section-toggle-title, .section-heading h2, .todo-head h2 { font-weight: 600; letter-spacing: -.025em; }
.section-caption { font-weight: 400; line-height: 1.6; }
.section-toggle > .icon, .setting-row > .icon { color: var(--faint); }

/* Planning uses the same visual hierarchy as the dashboard. */
.afford-cta, html[data-theme=light] .afford-cta {
  background: radial-gradient(ellipse at 0 0, #a38aff20, transparent 75%), var(--panel-fill);
  min-height: 96px;
  padding: 22px;
}
.afford-cta > .icon:first-child {
  width: 42px; height: 42px; padding: 10px; border-radius: 15px;
  background: var(--pill-fill); color: var(--accent); border: 1px solid var(--panel-edge);
}
.afford-cta strong { font-weight: 600; letter-spacing: -.025em; }
.afford-cta small { color: var(--muted); line-height: 1.6; }
.view-piano .plan-tools, .view-piano .scenario-section, .view-piano .plan-details {
  background: var(--panel-quiet); border: 1px solid var(--panel-edge);
  border-radius: 26px; padding: 8px 24px; box-shadow: var(--panel-shine);
}
.view-piano .plan-tools { margin: 14px 0 24px; }
.view-piano .scenario-section, .view-piano .plan-details { padding-top: 16px; padding-bottom: 12px; }
.view-piano .plan-hero { padding: 28px; }
.plan-title-row h2 { font-weight: 600; letter-spacing: -.025em; }
.forecast-split { border-top: 1px solid var(--line); padding-top: 20px; }
.forecast-assumption { padding: 0 6px; }
.trend-chart .trend-line { filter: drop-shadow(0 2px 5px #ab93ff24); }
.trend-keys, .trend-figures { border-color: var(--line); }
.category-track { background: var(--pill-fill); }
.category-fill { background: linear-gradient(90deg, #7561b3, #b4a3ed); }
.category-done { background: var(--accent); }

/* All sheets share the recovery screen's violet stage and readable fields. */
dialog, html[data-theme=light] dialog {
  background: var(--sheet-stage);
  border: 1px solid var(--panel-edge);
  border-radius: 30px;
  box-shadow: inset 0 1px 0 #ffffff1c, 0 35px 100px #03030b80;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  scrollbar-color: var(--field-edge) transparent;
}
dialog::backdrop { background: #0606109c; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dialog-header { background: var(--sheet-top); border-bottom: 1px solid var(--line); padding: 18px 22px; margin-bottom: 16px; }
.dialog-header h2 { flex: 1; text-align: left; font-size: 1.25rem; font-weight: 600; letter-spacing: -.035em; line-height: 1.3; }
.dialog-header .header-spacer { display: none; }
.dialog-header .icon-button { background: var(--pill-fill); border: 1px solid var(--panel-edge); color: var(--ink); }
.dialog-body { padding: 4px 28px 30px; }
.dialog-body .section-heading h2 { font-size: 1rem; }
.sheet-intro { line-height: 1.75; color: var(--muted); }
.sheet-footnote, .inline-note, .info-note { color: var(--muted); }
.dialog-body :is(.field label, .disclosure > summary) { color: var(--muted); }
.dialog-body :is(.form-input, .search-box .form-input),
html[data-theme=light] .dialog-body :is(.form-input, .search-box .form-input) {
  background: var(--field-fill); border: 1px solid var(--field-edge);
  border-radius: 16px; min-height: 50px; box-shadow: inset 0 1px 0 #ffffff09;
  color: var(--ink);
}
.dialog-body .form-input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
  border-color: var(--accent); box-shadow: 0 0 0 5px var(--focus-glow);
}
.dialog-body.security-body input:not([type=checkbox]),
html[data-theme=light] .dialog-body.security-body input:not([type=checkbox]) {
  background: var(--field-fill); border: 1px solid var(--field-edge);
  border-radius: 16px; min-height: 50px; color: var(--ink);
}
.dialog-body.security-body input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-glow);
}
.dialog-body input[type=range].form-input { background: transparent; border: 0; box-shadow: none; }
.amount-field { padding: 20px; border: 1px solid var(--panel-edge); border-radius: 22px; background: var(--pill-fill); }
.amount-input-wrap { padding-top: 8px; padding-bottom: 0; border: 0; }
.amount-input-wrap input { font-weight: 550; font-size: clamp(2rem, 9vw, 2.875rem); }
.amount-input-wrap input::placeholder { color: var(--faint); }
.dialog-body select option { background: var(--surface); color: var(--ink); }
.dialog-body .form-actions { background: linear-gradient(180deg, transparent, var(--sheet-bottom) 28%); }
.dialog-body .form-actions > .button { min-height: 52px; }
.setting-row .row-symbol, .profile-avatar {
  width: 38px; height: 38px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pill-fill); color: var(--accent); border: 1px solid var(--panel-edge);
}
.setting-row .row-symbol .icon { width: 19px; height: 19px; }
.setting-row .row-title { font-weight: 500; }
.setting-row .row-subtitle { color: var(--muted); }
.setting-row, .transaction-row, .todo-row, .wallet-costs, .value-line, .disclosure { border-color: var(--line); }
.wallet-card { margin-bottom: 12px; padding: 18px 20px 10px; }
.wallet-card-heading strong { font-weight: 600; }
.recovery-code, .sync-comparison section, .sync-difference, .review-item {
  background: var(--pill-fill); border-color: var(--panel-edge); border-radius: 18px;
}
.import-review, .afford-compare > div,
html[data-theme=light] :is(.import-review, .afford-compare > div) {
  background: var(--pill-fill); border-color: var(--panel-edge);
}
.security-body .security-emblem { box-shadow: inset 0 1px 0 #ffffff21, 0 12px 35px #7860c633; }
.disclosure > summary { font-weight: 500; }
.chip, .tag, .pill, .small-pill { border-radius: 999px; }
.chip.active, .chip[aria-pressed=true], html[data-theme=light] .chip.active {
  background: var(--raised); border-color: var(--field-edge); color: var(--ink);
  box-shadow: inset 0 1px 0 #ffffff18;
}
.segmented { padding: 4px; border-radius: 18px; background: var(--pill-fill); border: 1px solid var(--line); }
.segmented label span { border-radius: 13px; }
.switch:checked { background: #9075d9; }
html[data-theme=light] .switch:checked { background: #7153b1; }
input[type=checkbox]:not(.switch), input[type=radio] { accent-color: var(--accent); }
.button.secondary, html[data-theme=light] .button.secondary { background: var(--pill-fill); border-color: var(--field-edge); color: var(--ink); }
.unlock-screen .button.secondary, html[data-theme=light] .unlock-screen .button.secondary { color: #fff; background: #ffffff12; border-color: #ffffff30; }

@media (hover:hover) {
  .setting-row:hover, .transaction-row:hover, .todo-row:hover { background: var(--pill-fill); }
  .afford-cta:hover { border-color: var(--accent); }
  .button.secondary:hover { background: var(--raised); }
}
@media (prefers-reduced-motion:no-preference) {
  dialog[open] { animation: appearance-sheet .28s cubic-bezier(.2,.8,.2,1); }
  .button, .afford-cta, .chip { transition: background .18s, border-color .18s, box-shadow .18s, transform .18s; }
  @keyframes appearance-sheet { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
}
@media (max-width:680px) {
  :is(.panel, .todo-panel, .trend-panel, .month-close, .plan-hero, .wallet-card, .afford-cta) { border-radius: 24px; }
  .view-piano .plan-tools, .view-piano .scenario-section, .view-piano .plan-details { padding-left: 18px; padding-right: 18px; border-radius: 24px; }
  .view-piano .plan-hero { padding: 24px 20px; }
  .afford-cta { padding: 18px; gap: 12px; }
  dialog, html[data-theme=light] dialog { border-radius: 28px; }
  .dialog-header { padding: 14px 18px; margin-bottom: 12px; min-height: 74px; }
  .dialog-header h2 { font-size: 1.125rem; }
  .dialog-body { padding: 4px 20px 24px; }
}
@media (max-width:380px) {
  .dialog-header { padding-left: 14px; padding-right: 14px; gap: 8px; }
  .dialog-body { padding-left: 14px; padding-right: 14px; }
  .amount-field { padding: 16px; }
  .setting-row { gap: 9px; }
  .setting-row .row-symbol { width: 32px; height: 34px; }
}

/* Preferences apply equally to the new surfaces and existing navigation. */
html.reduce-transparency { --panel-fill: var(--surface); --panel-quiet: var(--surface); --sheet-stage: var(--surface); --sheet-top: var(--surface); --field-fill: var(--raised); }
html.reduce-transparency dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
html.reduce-transparency dialog { background: var(--surface) !important; }
@media (prefers-reduced-transparency:reduce) {
  :root { --panel-fill: var(--surface); --panel-quiet: var(--surface); --sheet-stage: var(--surface); --sheet-top: var(--surface); --field-fill: var(--raised); }
  dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
  dialog { background: var(--surface) !important; }
  html[data-theme=light] :is(.header-group, .desktop-nav, .bottom-nav.glass, #toast, dialog) { background: var(--surface) !important; color: var(--ink); }
}
@media (prefers-contrast:more) {
  :root { --muted: #e1dbf2; --faint: #d0c9e3; --panel-edge: #d0c9e380; --field-edge: #d0c9e380; --line: #d0c9e380; }
  html[data-theme=light] { --muted: #332544; --faint: #493759; --panel-edge: #49375980; --field-edge: #49375980; --line: #49375980; }
}
@media (prefers-reduced-motion:reduce) {
  dialog[open] { animation: none; }
  .button, .afford-cta, .chip { transition: none; }
}
@media (forced-colors:active) {
  body, html[data-theme=light] body { background: Canvas; }
  :root, html[data-theme=light] { --stage: Canvas; --panel-fill: Canvas; --panel-quiet: Canvas; --panel-edge: CanvasText; --panel-shine: none; --field-fill: Canvas; --field-edge: CanvasText; --pill-fill: Canvas; --sheet-stage: Canvas; --sheet-top: Canvas; --line: CanvasText; --muted: CanvasText; --faint: CanvasText; --raised: Canvas; --surface: Canvas; --ink: CanvasText; --accent: LinkText; }
  .hero-current, html[data-theme=light] .hero-current, .afford-cta, html[data-theme=light] .afford-cta { background: Canvas; box-shadow: none; }
  .dialog-header .icon-button, .chip.active, .setting-row .row-symbol { border: 1px solid ButtonText; }
  .hero-current .hero-amount { text-shadow: none; }
  .trend-chart .trend-line { filter: none; }
}