/* Cosmetic-only polish layer. No finance/Plaid behavior lives here. */

/* Customer UI should not expose backend implementation details. */
.rail__foot { display: none; }

/* Give the app a little more breathing room without making it feel sparse. */
.main { padding-top: 26px; }
.viewhead { margin-bottom: 20px; }
.viewhead h1 { font-size: 24px; line-height: 1.15; }
.viewhead p { margin-top: 5px; line-height: 1.45; }
.section { margin-top: 30px; }
.section > h2 { margin-bottom: 11px; }

/* Cleaner, quieter surfaces. */
.card { border-color: var(--line-soft); box-shadow: 0 12px 32px -24px rgba(29,33,48,.22); }
.card--tight { padding: 16px 18px; }
.hero { border-color: var(--line-soft); box-shadow: 0 16px 38px -26px rgba(29,33,48,.25); }

/* Make the primary money number the obvious focal point. */
.hero__num { margin-top: 13px; }
.hero__sub { line-height: 1.45; }
.hero__meta { margin-top: 17px; padding-top: 15px; }

/* More scannable account / activity rows. */
.row { min-height: 58px; padding: 13px 0; gap: 16px; }
.row__title { font-size: 14px; line-height: 1.3; }
.row__sub { margin-top: 4px; line-height: 1.35; }
.row__amt { font-size: 15.5px; }

/* Buttons should feel intentional rather than browser-default compact. */
.btn { min-height: 38px; border-radius: 10px; font-weight: 700; }
.btn--sm { min-height: 34px; padding-left: 13px; padding-right: 13px; }
.btn--primary { box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--brand) 65%, transparent); }

/* Status chips are useful, but should not compete with dollar amounts. */
.chip { font-size: 11.5px; padding: 5px 10px; }

/* Pay schedule: five common choices, with the calendar math handled by DollarSafe. */
.pay-schedule-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pay-schedule-options button { min-width: 0; padding-left: 8px; padding-right: 8px; white-space: normal; line-height: 1.2; }
.pay-cycle-readonly { min-height: 44px; display: flex; align-items: center; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft, rgba(0,0,0,.025)); font-weight: 700; color: var(--muted); }
.pay-schedule-fields { animation: payScheduleIn .16s ease-out; }
@keyframes payScheduleIn { from { opacity: .4; transform: translateY(-2px); } to { opacity: 1; transform: none; } }

/* Settings: keep long forms readable instead of stretching across the entire desktop viewport. */
@media (min-width: 900px) {
  .main { max-width: 1120px; padding: 34px 40px 64px; }
  .viewhead { margin-bottom: 24px; }
  .section { margin-top: 36px; }
  .card { border-radius: 16px; }
  .rail__list { gap: 3px; }
  body:has([data-route='settings'][aria-current='page']) .main,
  body:has(.viewhead h1:first-child) .main:has(.section .seg[aria-label='Pay schedule']) { max-width: 920px; }
  .main:has(.seg[aria-label='Pay schedule']) .card { padding: 20px 22px; }
  .main:has(.seg[aria-label='Pay schedule']) .editor__grid { grid-template-columns: minmax(0, 1fr) minmax(180px, .7fr); gap: 14px; }
  .main:has(.seg[aria-label='Pay schedule']) .field input,
  .main:has(.seg[aria-label='Pay schedule']) .field select { min-height: 44px; }
  .main:has(.seg[aria-label='Pay schedule']) .footnote { max-width: 72ch; }
}

/* Mobile: preserve useful tap targets while reducing edge crowding. */
@media (max-width: 700px) {
  .pay-schedule-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; background: transparent; }
  .pay-schedule-options button:last-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .main { padding-left: 18px; padding-right: 18px; }
  .card { padding: 19px; }
  .card--tight { padding: 14px 16px; }
  .hero { padding: 22px 20px 20px; }
  .hero__num { font-size: clamp(54px, 16vw, 72px); }
  .editor__grid { grid-template-columns: 1fr; }
  .pay-schedule-fields.editor__grid { grid-template-columns: 1fr; }
}


/* ----------------------------------------------------- simpler app flow */
/* One predictable Add entry point. Desktop keeps it with navigation; mobile
   uses a floating action above the stable five-tab bar. */
.navadd { margin-top: 10px; }
.tab--add {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--ink);
  color: var(--paper);
}
.navadd__plus {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 20px;
  line-height: 1;
}
.mobileadd { display: none; }

.addchooser { max-width: 560px; }
.addchooser__note {
  margin: 0 0 14px;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--paper-2, rgba(0,0,0,.035));
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.addchooser__grid {
  display: grid;
  gap: 9px;
}
.addchoice {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 11px;
  align-items: center;
  text-align: left;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  padding: 13px;
  cursor: pointer;
}
.addchoice:hover { border-color: var(--ink); }
.addchoice__plus {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font-size: 22px;
  line-height: 1;
}
.addchoice b, .addchoice small { display: block; }
.addchoice b { font-size: 15px; }
.addchoice small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 760px) {
  .mobileadd {
    display: grid;
    position: fixed;
    right: 18px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    z-index: 35;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 16px;
    background: var(--ink);
    color: var(--paper);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    font-size: 28px;
    line-height: 1;
  }
}


/* ================================================== 2026 web dashboard */
/* The dashboard is deliberately richer visually without becoming a reporting
   cockpit: one decision, three summaries, then short previews of what matters. */
.dash { display: grid; gap: 16px; }
.dashhero {
  position: relative;
  min-height: 194px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 30px 34px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background:
    linear-gradient(120deg, #16221d 0%, #1f332a 58%, rgba(31,168,107,.92) 150%),
    var(--ink);
  color: #fff;
  box-shadow: 0 18px 45px -30px rgba(0,0,0,.7);
}
.dashhero::after {
  content: '';
  position: absolute;
  width: 360px; height: 360px;
  right: -150px; top: -175px;
  border: 48px solid rgba(60,242,160,.14);
  border-radius: 38%;
  rotate: 28deg;
}
.dashhero__copy { position: relative; z-index: 1; }
.dashhero__eyebrow {
  margin: 0 0 8px;
  color: rgba(255,255,255,.7);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.dashhero__num {
  margin: 0;
  color: #fff;
  font-size: clamp(56px, 7vw, 78px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.055em;
}
.dashhero__num .cents { font-size: .52em; letter-spacing: -.02em; }
.dashhero__message { margin: 11px 0 0; color: rgba(255,255,255,.82); font-size: 14px; }
.dashhero__mark {
  position: absolute; right: 58px; top: 50%; z-index: 1;
  width: 76px; height: 76px; translate: 0 -50%;
  color: #3cf2a0; opacity: .96;
}
.dashhero__mark svg { width: 100%; height: 100%; }
.dashhero__link {
  position: absolute; right: 26px; bottom: 20px; z-index: 2;
  display: flex; gap: 8px; align-items: center;
  border: 0; background: transparent; color: rgba(255,255,255,.84);
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.dashhero__link span { color: #3cf2a0; font-size: 21px; }

.dashstats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.dashstat {
  min-width: 0; display: grid; grid-template-columns: 42px 1fr auto;
  gap: 12px; align-items: center; padding: 16px;
  border: 1px solid var(--line-soft); border-radius: 15px;
  background: var(--surface); color: var(--text); text-align: left; font: inherit;
  box-shadow: 0 12px 32px -26px rgba(29,33,48,.28); cursor: pointer;
}
.dashstat:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--line-soft)); translate: 0 -1px; }
.dashstat__icon {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; color: var(--brand); background: var(--brand-wash);
}
.dashstat__icon svg { width: 20px; height: 20px; }
.dashstat__icon--green { color: #168653; background: #e7f6ee; }
.dashstat__icon--purple { color: #6d4de3; background: #f0ecff; }
.dashstat__icon--blue { color: #287bdc; background: #eaf3ff; }
.dashstat span:nth-child(2) { min-width: 0; }
.dashstat small, .dashstat b, .dashstat em { display: block; }
.dashstat small { color: var(--text-mute); font-size: 11.5px; font-weight: 600; }
.dashstat b { margin-top: 2px; font-size: 20px; letter-spacing: -.03em; }
.dashstat em { margin-top: 2px; color: var(--text-mute); font-size: 10.5px; font-style: normal; }
.dashstat > i { color: var(--text-mute); font-size: 22px; font-style: normal; }

.dashgrid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .9fr); gap: 16px; align-items: start; }
.dashgrid__main, .dashgrid__side { display: grid; gap: 16px; }
.dashgrid .card { margin-top: 0 !important; }
.dashgrid__main > .card {
  border-radius: 16px;
  border-color: var(--line-soft);
  box-shadow: 0 12px 32px -26px rgba(29,33,48,.24);
}
.dashgrid__main > .card .rowhead { margin-bottom: 8px; }
.dashgrid__main > .card .cardh2 { font-size: 15px; }
.dashgrid__main > .card .notice { padding: 4px 0; background: transparent; border: 0; }
.dashpanel {
  overflow: hidden; border: 1px solid var(--line-soft); border-radius: 16px;
  background: var(--surface); box-shadow: 0 12px 32px -26px rgba(29,33,48,.24);
}
.dashpanel__head {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 15px 17px 12px; border-bottom: 1px solid var(--line-soft);
}
.dashpanel__head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14.5px; }
.dashpanel__head h2 svg { width: 17px; height: 17px; }
.dashpanel__head .linklike { color: var(--brand); font-size: 11.5px; text-decoration: none; }
.dashlist { padding: 0 17px; }
.dashrow {
  width: 100%; min-width: 0; display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto 12px;
  gap: 10px; align-items: center; padding: 11px 0;
  border: 0; border-bottom: 1px solid var(--line-soft);
  background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer;
}
.dashrow:last-child { border-bottom: 0; }
.dashrow:hover .dashrow__main b { color: var(--brand); }
.merchantmark {
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 10px; background: var(--surface-3); color: var(--text-dim);
  font-size: 13px; font-weight: 800;
}
.merchantmark--bill { background: var(--brand-wash); color: var(--brand); }
.dashrow__main { min-width: 0; }
.dashrow__main b, .dashrow__main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashrow__main b { font-size: 12.5px; }
.dashrow__main small { margin-top: 2px; color: var(--text-mute); font-size: 10.5px; }
.dashrow__amount { font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.dashrow__chev { color: var(--text-mute); font-size: 18px; }
.dashpanel__empty { margin: 0; padding: 18px; color: var(--text-mute); font-size: 12.5px; line-height: 1.5; }

.dashgoals { padding: 3px 17px 10px; }
.dashgoal {
  width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 8px;
  padding: 11px 0; border: 0; border-bottom: 1px solid var(--line-soft);
  background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer;
}
.dashgoal:last-child { border-bottom: 0; }
.dashgoal b, .dashgoal small { display: block; }
.dashgoal b { font-size: 12.5px; }
.dashgoal small { margin-top: 3px; color: var(--text-mute); font-size: 10.5px; }
.dashgoal__pct { align-self: end; color: var(--text-dim); font-size: 11px; font-weight: 700; }
.dashgoal .goalbar { grid-column: 1 / -1; display: block; height: 5px; margin: 0; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.dashgoal .goalbar > span { display: block; height: 100%; border-radius: inherit; background: #15965d; }

.dashprotect {
  display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 12px; align-items: center;
  padding: 15px 18px; border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line-soft));
  border-radius: 15px; background: color-mix(in srgb, var(--brand) 4%, var(--surface));
}
.dashprotect__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--brand); background: var(--brand-wash); }
.dashprotect b { font-size: 12.5px; }
.dashprotect p { margin: 2px 0 0; color: var(--text-mute); font-size: 10.5px; line-height: 1.4; }
.dashprotect .linklike { font-size: 11px; white-space: nowrap; }

/* Desktop competitor-level visual structure: dark navigation, orange active state,
   but only DollarSafe's five core destinations. */
@media (min-width: 900px) {
  .rail {
    width: 226px;
    padding: 24px 14px;
    background: linear-gradient(180deg, #232c32 0%, #1c2429 100%);
    border-right: 0;
    color: #fff;
  }
  .rail__brand { padding: 0 10px 26px; color: rgba(255,255,255,.8); }
  .rail__word { color: #fff; font-size: 20px; }
  .rail__list { gap: 7px; }
  .rail__list .tab {
    min-height: 45px; padding: 11px 13px; border-radius: 11px;
    color: rgba(255,255,255,.78); font-size: 13px; font-weight: 600;
  }
  .rail__list .tab svg { width: 19px; height: 19px; }
  .rail__list .tab:hover { color: #fff; background: rgba(255,255,255,.06); }
  .rail__list .tab[aria-current='page'] {
    color: #fff;
    background: linear-gradient(135deg, #e2711d, #ff7a22);
    box-shadow: 0 8px 24px -16px rgba(226,113,29,.8);
  }
  .main { margin-left: 226px; max-width: none; width: calc(100% - 226px); padding: 26px 30px 54px; }
  .view { max-width: 1280px; margin: 0 auto; }
}

/* The mobile website keeps the same information hierarchy without pretending
   to be a native app. */
@media (max-width: 899px) {
  .dashhero { min-height: 176px; padding: 24px; }
  .dashhero__mark { right: 32px; width: 58px; height: 58px; }
  .dashstats { grid-template-columns: 1fr; }
  .dashgrid { grid-template-columns: 1fr; }
  .dashgrid__side { grid-template-columns: 1fr; }
  .dashprotect { grid-template-columns: 38px 1fr; }
  .dashprotect .linklike { grid-column: 2; justify-self: start; }
}
@media (max-width: 520px) {
  .dash { gap: 12px; }
  .dashhero { min-height: 160px; padding: 22px 19px; border-radius: 15px; }
  .dashhero__num { font-size: 54px; }
  .dashhero__mark { display: none; }
  .dashhero__link { right: 17px; bottom: 13px; }
  .dashstat { padding: 13px; }
  .dashpanel__head { padding: 14px 15px 11px; }
  .dashlist, .dashgoals { padding-left: 15px; padding-right: 15px; }
  .dashprotect { padding: 13px 14px; }
  .tabbar .tab span { font-size: 9.5px; }
}


/* ================================================== approved DollarSafe visual system
   Black navigation + orange brand actions + bright neutral workspace.
   Green is reserved for positive money/status signals only. */
[data-theme='light'] {
  --bg: #f6f7f8;
  --bg-glow: #ffffff;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --surface-3: #f1f3f5;
  --line: #dfe3e7;
  --line-soft: #eceff2;
  --text: #232b31;
  --text-dim: #59636d;
  --text-mute: #87919b;
  --brand: #ff641c;
  --brand-2: #ff7a32;
  --brand-dim: #d94b08;
  --brand-wash: rgba(255,100,28,.10);
  --brand-gradient: linear-gradient(135deg,#ff7a32,#ff5a12);
  --brand-ink: #fff;
  --accent: #15965d;
  --accent-2: #21ad70;
  --accent-wash: rgba(21,150,93,.10);
  --shadow: 0 12px 30px -24px rgba(18,23,27,.25);
}
[data-theme='light'] body {
  background: #f6f7f8;
}
[data-theme='light'] .card,
[data-theme='light'] .dashpanel,
[data-theme='light'] .dashstat {
  border-color: #e5e8eb;
  box-shadow: 0 8px 24px -22px rgba(18,23,27,.28);
}
[data-theme='light'] .btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
[data-theme='light'] .btn--primary:hover {
  background: #e95713;
  border-color: #e95713;
}
[data-theme='light'] .seg button[aria-pressed='true'],
[data-theme='light'] .pay-schedule-options button[aria-pressed='true'] {
  background: var(--brand);
  color: #fff;
}
[data-theme='light'] .goalbar > div,
[data-theme='light'] .dashgoal .goalbar > span {
  background: var(--accent);
}
[data-theme='light'] .pos { color: var(--accent); }
[data-theme='light'] .rail {
  background: linear-gradient(180deg,#232c32 0%,#1a2126 100%);
  color: #fff;
}
[data-theme='light'] .rail__brand,
[data-theme='light'] .rail__word { color: #fff; }
[data-theme='light'] .rail__list .tab {
  color: rgba(255,255,255,.82);
}
[data-theme='light'] .rail__list .tab:hover {
  color: #fff;
  background: rgba(255,255,255,.07);
}
[data-theme='light'] .rail__list .tab[aria-current='page'] {
  color: #fff;
  background: linear-gradient(135deg,#ff6b20,#ff5a12);
  box-shadow: 0 10px 24px -16px rgba(255,100,28,.9);
}
[data-theme='light'] .dashhero {
  background:
    linear-gradient(120deg,#17251f 0%,#22362d 60%,rgba(31,168,107,.94) 155%);
}
[data-theme='light'] .dashhero__mark,
[data-theme='light'] .dashhero__link span {
  color: #3cf2a0;
}
[data-theme='light'] .dashpanel__head .linklike,
[data-theme='light'] .dashprotect__icon {
  color: var(--brand);
}
[data-theme='light'] .dashprotect {
  border-color: rgba(255,100,28,.18);
  background: rgba(255,100,28,.035);
}
[data-theme='light'] input[type='text'],
[data-theme='light'] input[type='number'],
[data-theme='light'] input[type='date'],
[data-theme='light'] input[type='email'],
[data-theme='light'] input[type='password'],
[data-theme='light'] select {
  background: #fff;
  border-color: #dfe3e7;
}
[data-theme='light'] input:focus,
[data-theme='light'] select:focus {
  border-color: var(--brand);
}
[data-theme='light'] .toggle[aria-checked='true'] {
  background: var(--brand-wash);
  border-color: var(--brand);
}
[data-theme='light'] .toggle[aria-checked='true']::after {
  background: var(--brand);
}
[data-theme='light'] .badge--counts {
  color: var(--accent);
  background: var(--accent-wash);
  border-color: rgba(21,150,93,.25);
}
@media (min-width:900px) {
  [data-theme='light'] .main {
    background: #f7f8f9;
    min-height: 100vh;
  }
  [data-theme='light'] .viewhead h1 { font-size: 30px; }
  [data-theme='light'] .viewhead p { font-size: 13px; }
  [data-theme='light'] .section { margin-top: 24px; }
  [data-theme='light'] .section > h2 { color: #4d5862; }
}


/* ============ v12 polish: neutral hierarchy + tactile states ============ */
[data-theme='light'] .dashstat__icon--purple,
[data-theme='light'] .dashstat__icon--blue{
  color:#66727b;
  background:#eef0f1;
}
[data-theme='light'] .dashstat,
[data-theme='light'] .dashpanel,
[data-theme='light'] .card{transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
@media(hover:hover){
  [data-theme='light'] .dashstat:hover{border-color:#d3d8dc;box-shadow:0 14px 28px -22px rgba(18,23,27,.34)}
  [data-theme='light'] .dashrow:hover{background:rgba(35,43,49,.025)}
}
[data-theme='light'] .dashhero__num,
[data-theme='light'] .dashstat b,
[data-theme='light'] .dashrow__amount{font-variant-numeric:tabular-nums}
[data-theme='light'] .dashpanel__head h2{letter-spacing:-.01em}
[data-theme='light'] .dashrow{border-radius:8px;padding-left:5px;padding-right:5px}
[data-theme='light'] .dashlist{padding-left:12px;padding-right:12px}
[data-theme='light'] .linklike:focus-visible,
[data-theme='light'] .btn:focus-visible,
[data-theme='light'] .tab:focus-visible,
[data-theme='light'] .dashrow:focus-visible,
[data-theme='light'] .dashstat:focus-visible{outline:3px solid rgba(255,100,28,.25);outline-offset:2px}
@media(max-width:520px){
  [data-theme='light'] .main{padding-left:14px;padding-right:14px}
  [data-theme='light'] .dashhero__message{max-width:30ch}
  [data-theme='light'] .dashrow{grid-template-columns:32px minmax(0,1fr) auto 10px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}


/* Compact utility row inspired by modern finance dashboards. */
.rail__tools{display:flex;gap:6px;padding:4px 14px 12px;margin:0 0 6px;border-bottom:1px solid rgba(255,255,255,.09)}
.railtool{width:34px;height:34px;border:0;border-radius:9px;background:transparent;color:inherit;opacity:.72;display:grid;place-items:center;cursor:pointer}
.railtool:hover,.railtool:focus-visible{opacity:1;background:rgba(255,255,255,.09);outline:none}
.railtool svg{width:17px;height:17px}
@media (max-width: 760px){.rail__tools{display:none}}

/* Green dashboard reference rebuild */
.greenDash{display:grid;gap:18px;color:#10202a}
.greenDash__welcome{display:flex;justify-content:space-between;align-items:end;padding:8px 4px 12px}
.greenDash__welcome h1{font-size:32px;letter-spacing:-.045em;color:#071b25}
.greenDash__welcome p{margin-top:4px;font-size:15px;color:#31434b}
.greenDash__top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(310px,1fr);gap:18px;align-items:start}
.greenSafe{position:relative;min-height:306px;padding:30px 34px;border-radius:16px;background:linear-gradient(135deg,#00523f,#003d31);color:#fff;box-shadow:0 18px 34px -28px rgba(0,55,43,.55)}
.greenSafe__label{font-size:20px;font-weight:800}.greenSafe__amount{margin-top:8px;font-size:68px;font-weight:800;letter-spacing:-.06em;line-height:1}.greenSafe__amount small{font-size:.48em}.greenSafe__period{margin:2px 0 24px;font-size:12px}.greenSafe__rule{height:1px;background:rgba(255,255,255,.2);margin-bottom:18px}
.greenSafe__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.greenSafe__stats small,.greenSafe__stats b{display:block}.greenSafe__stats small{font-size:11px;color:rgba(255,255,255,.78)}.greenSafe__stats b{margin-top:4px;font-size:18px}
.greenSafe__why{margin-top:22px;padding:10px 14px;border:1px solid rgba(255,255,255,.35);border-radius:9px;background:transparent;color:#fff;font-weight:700;cursor:pointer}.greenSafe__why span{margin-left:28px}.greenSafe__arrow{position:absolute;right:28px;top:74px;width:44px;height:44px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:24px;cursor:pointer}
.greenCard,.greenProtected,.greenPlanDetails{border:1px solid #deddd4;border-radius:15px;background:#fffdf8;box-shadow:0 12px 26px -25px rgba(22,39,31,.45)}
.greenCard{padding:24px}.greenCard__head{display:flex;justify-content:space-between;gap:16px;align-items:center}.greenCard h2{font-size:18px}.greenCard p{margin-top:14px}.greenAttention{min-height:132px}.greenAttention p{font-size:16px;color:#285b49}
.greenLink{border:0;background:transparent;color:#00664d;font:inherit;cursor:pointer;padding:0}.greenMuted{color:#687876}
.greenProtected{padding:0 20px}.greenProtected summary,.greenPlanDetails summary{padding:18px 0;cursor:pointer;font-weight:700}.greenProtected__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 0 18px}.greenProtected__grid span{display:flex;justify-content:space-between;gap:12px;padding:12px;border-radius:10px;background:#f4f1e8}
.greenActions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.greenActions button{min-height:104px;border:1px solid #deddd4;border-radius:12px;background:#fffdf8;color:#10202a;display:grid;place-items:center;align-content:center;gap:4px;cursor:pointer}.greenActions button span{display:grid;place-items:center;width:28px;height:28px}.greenActions button svg{width:22px;height:22px}.greenActions button b{font-size:13px}.greenActions button small{font-size:11px;color:#6e7b7a}
.greenDash__middle,.greenDash__lower{display:grid;grid-template-columns:1fr 1fr;gap:18px}.greenSpending__body{display:grid;grid-template-columns:190px 1fr;gap:24px;align-items:center;margin-top:20px}.greenDonut{width:160px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#0a8d66 calc(var(--p)*1%),#e9e5da 0);position:relative}.greenDonut:after{content:'';position:absolute;inset:24px;border-radius:50%;background:#fffdf8}.greenDonut div{position:relative;z-index:1;text-align:center}.greenDonut b,.greenDonut small{display:block}.greenCatList{display:grid;gap:9px}.greenCatList div{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid #ece8df;padding-bottom:7px}
.greenCheckin{display:flex;align-items:center;justify-content:space-between;gap:20px}.greenBtn{border:0;border-radius:10px;background:#e8e3d5;color:#10202a;font-weight:700;padding:12px 18px;cursor:pointer}.greenMetric{font-size:34px;font-weight:800;margin-top:14px}.greenTip{margin-top:20px;padding:14px;border-radius:10px;background:#e5efdc;display:grid;gap:4px}.greenTip span{font-size:12px}
.greenDash__lower>.dashpanel{margin:0;border:1px solid #deddd4;border-radius:15px;background:#fffdf8;box-shadow:0 12px 26px -25px rgba(22,39,31,.45)}
.greenDash__lower .dashpanel__head{padding:20px 22px}.greenDash__lower .dashlist{padding-bottom:8px}.greenPlanDetails{padding:0 18px}.greenPlanDetails__body{display:grid;gap:16px;padding-bottom:18px}.greenPlanDetails__body>.card,.greenPlanDetails__body>.dashpanel{margin-top:0!important}
[data-theme='light'] .greenDash{color:#10202a}
@media(min-width:900px){[data-theme='light'] .main:has(.greenDash){background:#f7f3e9}.greenDash{padding-bottom:22px}}
@media(max-width:1050px){.greenDash__top,.greenDash__middle,.greenDash__lower{grid-template-columns:1fr}.greenActions{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.greenDash__welcome h1{font-size:26px}.greenSafe{min-height:auto;padding:24px 20px}.greenSafe__amount{font-size:56px}.greenSafe__stats{grid-template-columns:1fr 1fr}.greenSafe__arrow{display:none}.greenActions{grid-template-columns:1fr 1fr}.greenProtected__grid{grid-template-columns:1fr 1fr}.greenSpending__body{grid-template-columns:1fr}.greenDonut{width:140px}.greenCheckin{align-items:flex-start;flex-direction:column}}

@media(min-width:900px){
  body:has(.greenDash) .rail{width:260px;background:#004738;border-right-color:#0b5a49;color:#fff}
  body:has(.greenDash) .rail__brand{color:#fff}
  body:has(.greenDash) .rail__word{color:#fff;font-family:Georgia,'Times New Roman',serif;font-size:22px}
  body:has(.greenDash) .rail__word span{color:#fff}
  body:has(.greenDash) .rail__list .tab{color:rgba(255,255,255,.9);font-size:14px;padding:12px 13px}
  body:has(.greenDash) .rail__list .tab:hover{color:#fff;background:rgba(255,255,255,.07)}
  body:has(.greenDash) .rail__list .tab[aria-current='page']{color:#fff;background:#12634f}
  body:has(.greenDash) .rail__foot{border-top-color:rgba(255,255,255,.14);color:rgba(255,255,255,.8)}
  body:has(.greenDash) .main{margin-left:260px;max-width:1600px;padding:22px 28px 70px;background:#f7f3e9;min-height:100vh}
}

/* Compact Accounts: overview and management in one place. */
.accountstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0 20px}
.accountstats>div{padding:22px;border:1px solid #e1ded4;border-radius:12px;background:#fffdf8}
.accountstats span,.accountstats b{display:block}.accountstats span{font-size:13px;color:#455b61}.accountstats b{margin-top:8px;font-size:26px;letter-spacing:-.035em;color:#08212b}
.accountcompactlist{overflow:hidden;border:1px solid #deddd4;border-radius:15px;background:#fffdf8;padding:18px 24px}
.accountfilters{display:flex;gap:7px;flex-wrap:wrap;padding-bottom:18px}.accountfilter{padding:8px 12px;border-radius:7px;background:#f0ede4;font-size:12px;color:#40545a}.accountfilter--active{background:#00634b;color:#fff}
.accountcompact{border-top:1px solid #e8e3d8}.accountcompact:first-of-type{border-top:0}.accountcompact__summary{list-style:none;display:grid;grid-template-columns:44px minmax(0,1fr) auto 24px;align-items:center;gap:14px;padding:18px 4px;cursor:pointer}.accountcompact__summary::-webkit-details-marker{display:none}
.accountcompact__main,.accountcompact__balance{display:grid;gap:3px}.accountcompact__main b{font-size:16px}.accountcompact__main small,.accountcompact__balance small,.accountcompact__controls small{font-size:12px;color:#607177}.accountcompact__balance{text-align:right}.accountcompact__balance b{font-size:16px}.accountcompact__chev{font-size:18px;color:#617176;transition:transform .18s ease}.accountcompact[open] .accountcompact__chev{transform:rotate(180deg)}
.accountcompact__controls{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 4px 16px 58px;padding:14px 16px;border-radius:10px;background:#f6f3eb}.accountcompact__controls>div:first-child{display:grid;gap:3px}.accountcompact__actions{display:flex;align-items:center;gap:10px}.accountcompact__actions .toggle{margin:0;padding:0;border:0}.accountcompact__actions .toggle__copy{display:none}
@media(max-width:850px){.accountstats{grid-template-columns:1fr 1fr}.accountcompactlist{padding:12px 14px}.accountcompact__summary{grid-template-columns:40px minmax(0,1fr) auto}.accountcompact__chev{display:none}.accountcompact__controls{margin-left:0}}
@media(max-width:560px){.accountstats{grid-template-columns:1fr 1fr;gap:8px}.accountstats>div{padding:15px}.accountstats b{font-size:20px}.accountcompact__summary{grid-template-columns:36px minmax(0,1fr);gap:10px}.accountcompact__balance{grid-column:2;text-align:left}.accountcompact__controls{align-items:flex-start;flex-direction:column}.accountcompact__actions{width:100%;justify-content:space-between}}

.accountcompact__primaryaction{appearance:none;border:1px solid #00634b;border-radius:10px;background:#00634b;color:#fff;padding:10px 14px;font:inherit;font-size:13px;font-weight:800;line-height:1.15;cursor:pointer;white-space:nowrap;box-shadow:0 2px 5px rgba(0,99,75,.14)}
.accountcompact__primaryaction:hover{background:#004f3d;border-color:#004f3d;transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,99,75,.18)}
.accountcompact__primaryaction:focus-visible{outline:3px solid rgba(0,99,75,.24);outline-offset:2px}