/* Daily Savings Studio — standalone, responsive page styles */
.daily-savings-page {
  --ds-ink: #10251f;
  --ds-muted: #65756f;
  --ds-line: #dfe9e4;
  --ds-paper: #fbfdfb;
  --ds-green: #087354;
  --ds-green-dark: #052d23;
  --ds-gold: #d8b46a;
  background: var(--ds-paper);
  color: var(--ds-ink);
}
.ds-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f4fbf7;
  background:
    radial-gradient(ellipse at 84% 12%, rgba(45, 139, 101, .32), transparent 33%),
    radial-gradient(ellipse at 12% 100%, rgba(17, 91, 68, .38), transparent 38%),
    linear-gradient(118deg, #041c16 0%, #062e23 52%, #0c3b2d 100%);
}
.ds-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, transparent, #000 40%, #000);
}
.ds-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .82fr);
  align-items: center;
  gap: clamp(38px, 7vw, 96px);
  padding-block: clamp(58px, 7.5vw, 104px) clamp(64px, 7vw, 92px);
}
.ds-hero-copy { max-width: 680px; }
.ds-eyebrow, .ds-section-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-size: .7rem;
  line-height: 1.4;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ds-eyebrow { color: #bfe7d7; }
.ds-eyebrow-dot, .ds-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #d8b46a;
  box-shadow: 0 0 0 4px rgba(216, 180, 106, .12);
}
.ds-eyebrow-divider { color: rgba(216, 180, 106, .65); }
.ds-hero h1 {
  max-width: 720px;
  margin: 0;
  color: #fff;
  font-size: clamp(2.65rem, 5.6vw, 5rem);
  font-weight: 770;
  line-height: 1.02;
  letter-spacing: -.062em;
  text-wrap: balance;
}
.ds-hero h1 span {
  color: #d8eadf;
  background: linear-gradient(92deg, #d7eee0 0%, #f0d39a 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ds-hero-lede {
  max-width: 600px;
  margin: 26px 0 0;
  color: #c8d9d1;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.8;
}
.ds-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.ds-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 12px 17px;
  border: 1px solid transparent;
  border-radius: 12px;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 760;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ds-button:hover { transform: translateY(-2px); }
.ds-button:focus-visible, .ds-text-link:focus-visible { outline: 3px solid #e9c878; outline-offset: 3px; }
.ds-button-primary {
  color: #09281f;
  background: linear-gradient(115deg, #e8cf96, #d7b46b);
  box-shadow: 0 12px 25px rgba(1, 14, 10, .18);
}
.ds-button-primary:hover { background: linear-gradient(115deg, #f2dba7, #e2c17e); }
.ds-button-quiet { color: #e9f3ed; border-color: rgba(220, 240, 229, .25); background: rgba(255,255,255,.045); }
.ds-button-quiet:hover { background: rgba(255,255,255,.1); border-color: rgba(220, 240, 229, .45); }
.ds-trust-line { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 26px; color: #a9c4b8; font-size: .77rem; }
.ds-trust-line i { color: #d8b46a; }
.ds-trust-separator { color: #70978a; }
.ds-hero-visual {
  position: relative;
  min-width: 0;
  padding: 22px 23px 18px;
  overflow: hidden;
  border: 1px solid rgba(224, 243, 232, .19);
  border-radius: 28px;
  background: linear-gradient(150deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
  box-shadow: 0 28px 80px rgba(0, 12, 8, .23), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(14px);
}
.ds-visual-glow {
  position: absolute;
  top: 100px;
  left: 50%;
  width: 255px;
  height: 255px;
  border-radius: 50%;
  background: rgba(64, 167, 123, .22);
  filter: blur(64px);
  transform: translateX(-50%);
  pointer-events: none;
}
.ds-visual-topline { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #d0e5d9; font-size: .65rem; font-weight: 850; letter-spacing: .12em; }
.ds-visual-topline > span:first-child { display: inline-flex; align-items: center; gap: 9px; }
.ds-live-dot { width: 6px; height: 6px; flex-basis: 6px; background: #9bdeb6; box-shadow: 0 0 0 4px rgba(155, 222, 182, .1); }
.ds-preview-label { padding: 6px 8px; border: 1px solid rgba(226, 239, 230, .18); border-radius: 7px; color: #a7c5b7; font-size: .57rem; letter-spacing: .1em; }
.ds-orbit-stage { position: relative; display: grid; place-items: center; height: 280px; margin: 7px 0 0; }
.ds-orbit { position: absolute; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(216, 234, 221, .18); }
.ds-orbit-outer { width: 246px; border-style: dashed; border-color: rgba(216, 180, 106, .35); animation: ds-orbit-drift 42s linear infinite; }
.ds-orbit-middle { width: 194px; border-color: rgba(188, 224, 202, .24); }
.ds-orbit-inner { width: 136px; border-color: rgba(216, 234, 221, .22); background: radial-gradient(circle, rgba(39, 112, 81, .35), transparent 69%); }
.ds-orbit-core {
  display: grid;
  position: relative;
  z-index: 2;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(255, 234, 187, .6);
  border-radius: 24px;
  color: #0b3a2b;
  background: linear-gradient(145deg, #f0d99f, #cba85c);
  box-shadow: 0 0 0 9px rgba(216, 180, 106, .08), 0 14px 45px rgba(0,0,0,.2);
  font-size: 1.6rem;
  transform: rotate(-8deg);
}
.ds-orbit-core i { transform: rotate(8deg); }
.ds-orbit-node {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(225, 242, 231, .23);
  border-radius: 14px;
  color: #d5ebdf;
  background: linear-gradient(135deg, rgba(27, 92, 67, .96), rgba(13, 54, 40, .98));
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.ds-node-one { top: 36px; left: calc(50% - 19px); }
.ds-node-two { bottom: 43px; left: calc(50% - 117px); color: #f1d8a0; }
.ds-node-three { right: calc(50% - 116px); top: 96px; }
.ds-visual-caption { position: relative; padding: 17px 17px 16px; border: 1px solid rgba(227, 242, 232, .14); border-radius: 17px; background: rgba(2, 25, 18, .34); }
.ds-visual-kicker { color: #d8b46a; font-size: .64rem; font-weight: 850; letter-spacing: .14em; }
.ds-visual-caption strong { display: block; margin-top: 6px; color: #f4fbf7; font-size: 1.25rem; letter-spacing: -.03em; }
.ds-visual-caption p { margin: 5px 0 0; color: #adc8bb; font-size: .82rem; line-height: 1.55; }
.ds-visual-footer { display: flex; justify-content: space-between; gap: 10px; padding: 13px 2px 0; color: #bfd8cb; font-size: .68rem; }
.ds-visual-footer span { display: flex; align-items: center; gap: 6px; }
.ds-visual-footer i { color: #d8b46a; font-size: .76rem; }
.ds-hero-bottom-rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(216, 180, 106, .42), transparent); }

.ds-intro-section { padding: clamp(58px, 7vw, 90px) 0 clamp(60px, 8vw, 100px); background: #fbfdfb; }
.ds-section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr); align-items: end; gap: 36px; margin-bottom: 32px; }
.ds-section-kicker { margin-bottom: 13px; color: #087354; }
.ds-section-heading h2, .ds-routine-copy h2, .ds-cta-copy h2 {
  margin: 0;
  color: #112b22;
  font-size: clamp(1.8rem, 3.1vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.05em;
  text-wrap: balance;
}
.ds-section-heading > p { margin: 0; color: #63756d; font-size: .98rem; line-height: 1.8; }
.ds-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ds-feature-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 21px 20px 18px;
  border: 1px solid #e0e9e3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(18, 50, 35, .035);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ds-feature-card:hover { transform: translateY(-4px); border-color: #b8d9c9; box-shadow: 0 18px 36px rgba(18, 50, 35, .075); }
.ds-feature-card-featured { border-color: #badbcc; background: linear-gradient(160deg, #f2fbf5, #fff 68%); }
.ds-feature-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ds-feature-index { color: #94a79d; font-size: .72rem; font-weight: 850; letter-spacing: .12em; }
.ds-feature-symbol { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font-size: 1.08rem; }
.ds-symbol-expense { color: #146b4e; background: #d9f2e2; }
.ds-symbol-micro { color: #8c6823; background: #fbefd2; }
.ds-symbol-challenge { color: #6153a7; background: #ebe6ff; }
.ds-symbol-forecast { color: #276a9d; background: #e0f1ff; }
.ds-feature-label { margin: 24px 0 7px; color: #789087; font-size: .59rem; font-weight: 850; letter-spacing: .11em; line-height: 1.45; }
.ds-feature-card h3 { margin: 0 0 9px; color: #17352a; font-size: 1.12rem; line-height: 1.25; letter-spacing: -.025em; }
.ds-feature-card > p:not(.ds-feature-label) { margin: 0 0 22px; color: #65776e; font-size: .83rem; line-height: 1.68; }
.ds-feature-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 13px; border-top: 1px solid #e9f0eb; color: #64796f; font-size: .7rem; font-weight: 720; }
.ds-status-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #15845d; box-shadow: 0 0 0 3px #d9f2e4; }
.ds-status-planned { background: #c29a4f; box-shadow: 0 0 0 3px #fbf0d7; }
.ds-feature-note { display: flex; align-items: flex-start; gap: 10px; margin: 17px 0 0; color: #6f8077; font-size: .78rem; line-height: 1.6; }
.ds-feature-note i { margin-top: 3px; color: #8c6823; }

.ds-routine-section { padding: clamp(58px, 7vw, 86px) 0; border-block: 1px solid #e5ece7; background: linear-gradient(180deg, #f2f8f4, #f8fbf8); }
.ds-routine-layout { display: grid; grid-template-columns: minmax(0, .83fr) minmax(0, 1fr); align-items: center; gap: clamp(36px, 8vw, 100px); }
.ds-routine-copy > p:not(.ds-section-kicker) { max-width: 490px; margin: 18px 0 20px; color: #62746b; font-size: .96rem; line-height: 1.8; }
.ds-text-link { display: inline-flex; align-items: center; gap: 9px; color: #087354; text-decoration: none; font-size: .88rem; font-weight: 800; }
.ds-text-link:hover { color: #064c38; }
.ds-routine-steps { display: grid; gap: 11px; }
.ds-routine-step { display: grid; grid-template-columns: 42px minmax(0, 1fr) 36px; align-items: center; gap: 15px; padding: 17px 18px; border: 1px solid #dfebe3; border-radius: 15px; background: rgba(255,255,255,.82); box-shadow: 0 8px 24px rgba(19, 52, 36, .035); }
.ds-step-number { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #0d6247; background: #e2f4e8; font-size: .75rem; font-weight: 850; }
.ds-routine-step h3 { margin: 0 0 3px; color: #1b3c2e; font-size: .99rem; }
.ds-routine-step p { margin: 0; color: #6a7a72; font-size: .81rem; line-height: 1.55; }
.ds-step-icon { justify-self: end; color: #7e9b8c; font-size: 1.1rem; }

.ds-bottom-cta { padding: clamp(44px, 5vw, 62px) 0; background: #fbfdfb; }
.ds-bottom-cta-inner { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: clamp(22px, 4vw, 38px); border: 1px solid #dbe8df; border-radius: 23px; background: linear-gradient(112deg, #eef8f1, #fff8e9); }
.ds-cta-mark { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid #cce2d2; border-radius: 17px; color: #087354; background: #fff; font-size: 1.3rem; }
.ds-cta-copy .ds-section-kicker { margin-bottom: 8px; font-size: .62rem; }
.ds-cta-copy h2 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
.ds-cta-copy p:not(.ds-section-kicker) { margin: 7px 0 0; color: #63756d; font-size: .86rem; line-height: 1.65; }
.ds-button-dark { color: #f4fbf7; background: #0b3a2b; box-shadow: 0 8px 20px rgba(11, 58, 43, .12); white-space: nowrap; }
.ds-button-dark:hover { background: #14553f; }
.ds-footer { padding-block: 23px; }
.ds-footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.ds-footer-brand { color: #0b4a34; font-size: 1.03rem; font-weight: 850; letter-spacing: -.04em; text-decoration: none; }
.ds-footer-brand em { color: #13865d; font-style: normal; }
.ds-footer p { margin: 0; color: #76867e; font-size: .75rem; text-align: center; }
.ds-footer-inner > a:last-child { color: #4b6e5d; font-size: .78rem; font-weight: 750; text-decoration: none; }

@keyframes ds-orbit-drift { to { transform: rotate(360deg); } }

html.dark-mode .daily-savings-page { background: #091710; color: #e2f0e7; }
html.dark-mode .ds-intro-section, html.dark-mode .ds-bottom-cta { background: #091710; }
html.dark-mode .ds-section-heading h2,
html.dark-mode .ds-routine-copy h2,
html.dark-mode .ds-cta-copy h2 { color: #eff9f2; }
html.dark-mode .ds-section-heading > p,
html.dark-mode .ds-routine-copy > p:not(.ds-section-kicker),
html.dark-mode .ds-cta-copy p:not(.ds-section-kicker) { color: #a5bcb0; }
html.dark-mode .ds-feature-card { border-color: #253e31; background: #10241a; box-shadow: 0 10px 30px rgba(0,0,0,.13); }
html.dark-mode .ds-feature-card-featured { border-color: #315a43; background: linear-gradient(160deg, #173628, #10241a 70%); }
html.dark-mode .ds-feature-card h3 { color: #e8f5ec; }
html.dark-mode .ds-feature-label, html.dark-mode .ds-feature-index { color: #a3bbae; }
html.dark-mode .ds-feature-card > p:not(.ds-feature-label),
html.dark-mode .ds-feature-foot, html.dark-mode .ds-feature-note { color: #a1b6a9; }
html.dark-mode .ds-feature-foot { border-color: #273f32; }
html.dark-mode .ds-routine-section { border-color: #21382b; background: linear-gradient(180deg, #102219, #0c1c13); }
html.dark-mode .ds-routine-step { border-color: #2a4033; background: #13271c; }
html.dark-mode .ds-routine-step h3 { color: #e0f0e5; }
html.dark-mode .ds-routine-step p { color: #a4b8aa; }
html.dark-mode .ds-step-icon { color: #a0b8a8; }
html.dark-mode .ds-bottom-cta-inner { border-color: #2e4737; background: linear-gradient(112deg, #142f21, #29251a); }
html.dark-mode .ds-cta-mark { border-color: #31513d; background: #173526; color: #c8e8d3; }
html.dark-mode .ds-text-link { color: #8ce0b7; }
html.dark-mode .ds-text-link:hover { color: #b5f0d0; }
html.dark-mode .ds-footer-brand { color: #c2e8d1; }
html.dark-mode .ds-footer-brand em, html.dark-mode .ds-footer-inner > a:last-child { color: #9adab8; }
html.dark-mode .ds-footer p { color: #9aada2; }

@media (max-width: 1050px) {
  .ds-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr); gap: 34px; }
  .ds-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-feature-card { padding: 22px; }
}
@media (max-width: 800px) {
  .ds-hero-grid { grid-template-columns: 1fr; gap: 40px; padding-block: 54px 62px; }
  .ds-hero-copy { max-width: 720px; }
  .ds-hero-visual { width: min(100%, 510px); margin-inline: auto; }
  .ds-section-heading { grid-template-columns: 1fr; gap: 16px; }
  .ds-routine-layout { grid-template-columns: 1fr; gap: 32px; }
  .ds-bottom-cta-inner { grid-template-columns: 52px minmax(0, 1fr); }
  .ds-bottom-cta-inner > .ds-button { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 560px) {
  .ds-eyebrow { align-items: flex-start; font-size: .59rem; letter-spacing: .11em; }
  .ds-hero h1 { font-size: clamp(2.4rem, 12vw, 3.4rem); }
  .ds-hero-actions { align-items: stretch; flex-direction: column; }
  .ds-button { width: 100%; }
  .ds-hero-visual { padding: 17px 15px 15px; border-radius: 22px; }
  .ds-orbit-stage { height: 250px; }
  .ds-orbit-outer { width: 220px; }
  .ds-orbit-middle { width: 174px; }
  .ds-orbit-inner { width: 124px; }
  .ds-node-one { top: 31px; }
  .ds-node-two { bottom: 35px; left: calc(50% - 104px); }
  .ds-node-three { right: calc(50% - 104px); top: 84px; }
  .ds-visual-footer { flex-direction: column; gap: 7px; }
  .ds-feature-grid { grid-template-columns: 1fr; }
  .ds-feature-card { padding: 21px; }
  .ds-routine-step { grid-template-columns: 38px minmax(0, 1fr); gap: 11px; padding: 14px; }
  .ds-step-icon { display: none; }
  .ds-bottom-cta-inner { grid-template-columns: 1fr; gap: 14px; }
  .ds-bottom-cta-inner > .ds-button { width: 100%; }
  .ds-footer-inner { flex-direction: column; gap: 10px; }
  .ds-footer p { max-width: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-orbit-outer { animation: none; }
  .ds-feature-card, .ds-button { transition: none; }
}


/* ===== Live Daily Expense Tracker ===== */
.ds-tracker-section {
  padding: clamp(58px, 7vw, 92px) 0;
  color: #152e24;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(222, 243, 229, .55), transparent 34%),
    #f2f7f3;
  border-top: 1px solid #e2ebe4;
}
.ds-tracker-heading { margin-bottom: 26px; }
.ds-tracker-heading .ds-section-kicker { align-items: center; }
.ds-live-mark { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #118557; box-shadow: 0 0 0 4px #d7f0e1; }
.ds-tracker-local { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; color: #187152; font-size: .76rem; font-weight: 760; }
.ds-tracker-toolbar {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid #dce9df;
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 10px 30px rgba(26, 65, 43, .035);
}
.ds-country-control label { display: block; margin-bottom: 8px; color: #385346; font-size: .77rem; font-weight: 820; }
.ds-country-select-wrap { position: relative; display: flex; align-items: center; }
.ds-country-select-wrap > i { position: absolute; left: 13px; z-index: 1; color: #197452; pointer-events: none; }
.ds-country-select-wrap select {
  width: 100%; min-width: 0; min-height: 47px; padding: 10px 12px 10px 39px;
  color: #203c2e; border: 1px solid #d5e2d9; border-radius: 11px; background: #fbfdfb;
  font: inherit; font-size: .84rem; font-weight: 650;
}
#ds-country-help { margin: 7px 0 0; color: #78887f; font-size: .69rem; line-height: 1.5; }
.ds-toolbar-note { display: flex; align-items: center; gap: 13px; min-height: 72px; padding: 14px 16px; border: 1px solid #e6ecdf; border-radius: 13px; background: linear-gradient(120deg, #f8fbf4, #fffaf0); }
.ds-toolbar-note-icon { display: grid; place-items: center; width: 39px; height: 39px; flex: 0 0 39px; border-radius: 12px; color: #8b6b28; background: #f8edcf; }
.ds-toolbar-note strong, .ds-toolbar-note span { display: block; }
.ds-toolbar-note strong { color: #385041; font-size: .79rem; }
.ds-toolbar-note div > span { margin-top: 3px; color: #738178; font-size: .72rem; line-height: 1.5; }
.ds-expense-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin: 16px 0; }
.ds-summary-card { min-width: 0; padding: 17px 18px; border: 1px solid #e0e9e2; border-radius: 15px; background: #fff; box-shadow: 0 7px 22px rgba(19, 54, 35, .025); }
.ds-summary-today { border-color: #b9ddc8; background: linear-gradient(145deg, #f0faf3, #fff 74%); }
.ds-summary-top { display: flex; justify-content: space-between; align-items: center; gap: 9px; color: #6d8075; font-size: .76rem; font-weight: 780; }
.ds-summary-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: #0e7950; background: #dcf3e4; font-size: .8rem; }
.ds-icon-blue { color: #2e6e9f; background: #e3f1ff; }
.ds-icon-violet { color: #6f59ab; background: #eee8ff; }
.ds-icon-slate { color: #516e60; background: #eaf1ed; }
.ds-summary-card > strong { display: block; margin-top: 10px; color: #153c2c; font-size: clamp(1.18rem, 2vw, 1.7rem); font-weight: 820; line-height: 1.2; letter-spacing: -.045em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ds-summary-caption { display: block; margin-top: 6px; color: #88968e; font-size: .68rem; }
.ds-tracker-workbench { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: stretch; gap: 16px; }
.ds-tracker-form-panel, .ds-spending-panel, .ds-ledger-panel { min-width: 0; padding: 23px; border: 1px solid #dfe9e2; border-radius: 19px; background: #fff; box-shadow: 0 12px 32px rgba(21, 56, 37, .035); }
.ds-panel-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ds-panel-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; color: #0b7650; background: #e2f4e8; font-size: .95rem; }
.ds-panel-icon-gold { color: #896722; background: #fcf0d2; }
.ds-panel-icon-slate { color: #4d6b5b; background: #eaf1ed; }
.ds-panel-heading h3 { margin: 0; color: #1b3b2c; font-size: 1.03rem; letter-spacing: -.025em; }
.ds-panel-heading p { margin: 3px 0 0; color: #819087; font-size: .75rem; line-height: 1.45; }
#ds-expense-form { margin-top: 22px; }
.ds-form-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin-bottom: 15px; }
.ds-form-field label { color: #40584a; font-size: .76rem; font-weight: 800; }
.ds-form-field input, .ds-form-field select {
  width: 100%; min-width: 0; min-height: 46px; padding: 11px 12px;
  color: #253f31; border: 1px solid #d7e4db; border-radius: 10px; background: #fbfdfb;
  font: inherit; font-size: .85rem; transition: border-color .16s ease, box-shadow .16s ease;
}
.ds-form-field input::placeholder { color: #a1afa6; }
.ds-form-field input:focus, .ds-form-field select:focus, .ds-country-select-wrap select:focus, .ds-ledger-controls input:focus, .ds-ledger-controls select:focus {
  outline: none; border-color: #2a9a6b; box-shadow: 0 0 0 3px rgba(42, 154, 107, .12);
}
.ds-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ds-expense-submit { display: inline-flex; justify-content: center; align-items: center; gap: 9px; width: 100%; min-height: 47px; padding: 12px 15px; border: 0; border-radius: 11px; color: #f4fbf7; background: linear-gradient(115deg, #0b7250, #064a35); font: inherit; font-size: .86rem; font-weight: 820; cursor: pointer; box-shadow: 0 8px 18px rgba(6, 74, 53, .14); transition: transform .18s ease, box-shadow .18s ease; }
.ds-expense-submit:hover { transform: translateY(-1px); box-shadow: 0 11px 22px rgba(6, 74, 53, .2); }
.ds-expense-submit:focus-visible, .ds-export-button:focus-visible, .ds-entry-delete:focus-visible { outline: 3px solid #35a978; outline-offset: 3px; }
.ds-expense-status { min-height: 1.2em; margin: 9px 0 0; color: #0b8054; font-size: .76rem; font-weight: 700; }
.ds-expense-status.is-error { color: #b42318; }
.ds-data-note { display: flex; gap: 9px; margin-top: 14px; padding: 11px 12px; border: 1px solid #e0ede3; border-radius: 11px; background: #f6fbf7; color: #6e8275; }
.ds-data-note > i { margin-top: 3px; color: #177451; }
.ds-data-note p { margin: 0; font-size: .69rem; line-height: 1.55; }
.ds-category-breakdown { display: grid; gap: 15px; margin-top: 23px; }
.ds-breakdown-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
.ds-breakdown-name { display: flex; align-items: center; gap: 9px; min-width: 0; color: #465f50; font-size: .76rem; font-weight: 740; }
.ds-breakdown-symbol { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid #e1ebe3; border-radius: 10px; color: #247555; background: #f2f8f3; font-size: .73rem; }
.ds-breakdown-name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-breakdown-value { color: #264a37; font-size: .76rem; font-weight: 820; font-variant-numeric: tabular-nums; }
.ds-breakdown-track { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 999px; background: #edf3ee; }
.ds-breakdown-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #0a8055, #7bc89c); transition: width .25s ease; }
.ds-breakdown-empty { display: grid; justify-items: center; padding: 34px 18px; text-align: center; border: 1px dashed #dbe6de; border-radius: 13px; color: #7b8d81; background: #fafcfa; }
.ds-breakdown-empty > i { color: #75a78b; font-size: 1.55rem; }
.ds-breakdown-empty p { max-width: 230px; margin: 10px 0 0; font-size: .78rem; line-height: 1.6; }
.ds-insight-footer { display: flex; gap: 9px; margin-top: 19px; padding: 12px; border-radius: 11px; color: #7a704e; background: #fff9eb; }
.ds-insight-footer > i { margin-top: 3px; color: #b58b35; }
.ds-insight-footer p { margin: 0; font-size: .72rem; line-height: 1.58; }
.ds-ledger-panel { margin-top: 16px; padding: 23px; }
.ds-ledger-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.ds-export-button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 41px; padding: 9px 13px; border: 1px solid #cae1d2; border-radius: 10px; color: #176746; background: #f4fbf6; font: inherit; font-size: .77rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.ds-export-button:hover { background: #e5f5e9; }
.ds-ledger-controls { display: grid; grid-template-columns: minmax(150px, .6fr) minmax(0, 1.4fr); gap: 11px; margin: 21px 0 5px; }
.ds-ledger-filter, .ds-ledger-search { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid #dfe8e1; border-radius: 10px; color: #809187; background: #fbfdfb; }
.ds-ledger-filter select, .ds-ledger-search input { width: 100%; min-width: 0; height: 42px; padding: 0; border: 0; outline: 0; color: #3b5546; background: transparent; font: inherit; font-size: .78rem; }
.ds-ledger-filter select { cursor: pointer; }
.ds-expense-list { display: grid; margin-top: 12px; }
.ds-expense-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 13px; padding: 13px 3px; border-bottom: 1px solid #edf2ee; }
.ds-expense-entry:last-child { border-bottom: 0; }
.ds-entry-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ds-entry-symbol { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; color: #236d4d; background: #eef8f0; font-size: .84rem; }
.ds-entry-text { min-width: 0; }
.ds-entry-description { display: block; max-width: 100%; overflow: hidden; color: #284635; font-size: .82rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.ds-entry-meta { display: block; margin-top: 4px; color: #89978e; font-size: .68rem; }
.ds-entry-amount { color: #254b36; font-size: .84rem; font-weight: 850; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-entry-delete { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #e6e9e6; border-radius: 9px; color: #9b625d; background: #fff; cursor: pointer; }
.ds-entry-delete:hover { border-color: #edc8c5; color: #ad3930; background: #fff7f6; }
.ds-ledger-empty { display: grid; justify-items: center; padding: 35px 18px; text-align: center; color: #7e8e84; }
.ds-ledger-empty-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #e2ebe4; border-radius: 15px; color: #6b9d7e; background: #f4faf5; font-size: 1.05rem; }
.ds-ledger-empty strong { margin-top: 11px; color: #3d5847; font-size: .85rem; }
.ds-ledger-empty p { max-width: 300px; margin: 6px 0 0; font-size: .75rem; line-height: 1.6; }
.ds-ledger-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 13px; border-top: 1px solid #e8eee9; color: #8a988f; font-size: .69rem; }
.ds-ledger-footer i { margin-left: 4px; color: #277651; }
.ds-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

html.dark-mode .ds-tracker-section { color: #e2f0e7; border-color: #223b2b; background: radial-gradient(ellipse at 0% 0%, rgba(31, 71, 46, .28), transparent 35%), #0b1b12; }
html.dark-mode .ds-tracker-toolbar, html.dark-mode .ds-summary-card, html.dark-mode .ds-tracker-form-panel, html.dark-mode .ds-spending-panel, html.dark-mode .ds-ledger-panel { border-color: #2a4334; background: #12261a; box-shadow: 0 12px 32px rgba(0,0,0,.12); }
html.dark-mode .ds-summary-today { border-color: #335d42; background: linear-gradient(145deg, #1a3826, #12261a 74%); }
html.dark-mode .ds-country-control label, html.dark-mode .ds-form-field label { color: #c0d7c8; }
html.dark-mode .ds-country-select-wrap select, html.dark-mode .ds-form-field input, html.dark-mode .ds-form-field select { border-color: #354f3f; color: #e0f0e5; background: #0d2015; }
html.dark-mode .ds-country-select-wrap > i { color: #8ac5a4; }
html.dark-mode #ds-country-help, html.dark-mode .ds-toolbar-note div > span { color: #9eb4a5; }
html.dark-mode .ds-toolbar-note { border-color: #3c4835; background: linear-gradient(120deg, #182e20, #2c281b); }
html.dark-mode .ds-toolbar-note strong { color: #e0ebdf; }
html.dark-mode .ds-summary-top, html.dark-mode .ds-summary-caption { color: #a5b9aa; }
html.dark-mode .ds-summary-card > strong { color: #e2f3e8; }
html.dark-mode .ds-panel-heading h3 { color: #e1f0e5; }
html.dark-mode .ds-panel-heading p { color: #9bb0a1; }
html.dark-mode .ds-data-note { border-color: #2e4a36; color: #a4b9a9; background: #172f20; }
html.dark-mode .ds-data-note > i { color: #8ed4a9; }
html.dark-mode .ds-breakdown-name, html.dark-mode .ds-breakdown-value { color: #c5d9cb; }
html.dark-mode .ds-breakdown-symbol, html.dark-mode .ds-entry-symbol { border-color: #30493a; color: #b2e0c2; background: #1b3926; }
html.dark-mode .ds-breakdown-track { background: #223b2b; }
html.dark-mode .ds-breakdown-empty { border-color: #324a39; color: #a1b4a5; background: #15291c; }
html.dark-mode .ds-insight-footer { color: #d4c49c; background: #2a281b; }
html.dark-mode .ds-ledger-filter, html.dark-mode .ds-ledger-search { border-color: #324a39; background: #0d2015; color: #9bb0a1; }
html.dark-mode .ds-ledger-filter select, html.dark-mode .ds-ledger-search input { color: #d9eadf; }
html.dark-mode .ds-entry-description, html.dark-mode .ds-entry-amount { color: #d7eadc; }
html.dark-mode .ds-entry-meta, html.dark-mode .ds-ledger-footer { color: #9aafa0; }
html.dark-mode .ds-expense-entry, html.dark-mode .ds-ledger-footer { border-color: #2b4433; }
html.dark-mode .ds-entry-delete { border-color: #35473a; color: #d3a6a1; background: #19271d; }
html.dark-mode .ds-ledger-empty { color: #9eb2a3; }
html.dark-mode .ds-ledger-empty strong { color: #d8eadf; }
html.dark-mode .ds-export-button { border-color: #365c42; color: #abdfbb; background: #183222; }
html.dark-mode .ds-export-button:hover { background: #21432d; }
html.dark-mode .ds-tracker-local { color: #9cddb4; }
html.dark-mode .ds-live-mark { background: #7bd59f; box-shadow: 0 0 0 4px rgba(123,213,159,.14); }

@media (max-width: 1050px) {
  .ds-expense-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .ds-tracker-toolbar, .ds-tracker-workbench { grid-template-columns: 1fr; }
  .ds-tracker-workbench { gap: 14px; }
}
@media (max-width: 560px) {
  .ds-tracker-toolbar, .ds-tracker-form-panel, .ds-spending-panel, .ds-ledger-panel { padding: 17px; border-radius: 15px; }
  .ds-expense-summary { gap: 9px; }
  .ds-summary-card { padding: 13px; }
  .ds-summary-top { align-items: flex-start; font-size: .7rem; }
  .ds-summary-icon { width: 27px; height: 27px; flex: 0 0 27px; border-radius: 9px; font-size: .7rem; }
  .ds-summary-card > strong { font-size: clamp(1rem, 5vw, 1.4rem); }
  .ds-form-grid { gap: 9px; }
  .ds-ledger-heading { align-items: flex-start; flex-direction: column; }
  .ds-export-button { width: 100%; }
  .ds-ledger-controls { grid-template-columns: 1fr; }
  .ds-expense-entry { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
  .ds-entry-delete { grid-column: 3; grid-row: 1; align-self: center; }
  .ds-entry-amount { grid-column: 2; grid-row: 1; margin-right: 0; }
}


/* ===== Live Micro-Savings Jar ===== */
.ds-micro-section {
  padding: clamp(58px, 7vw, 92px) 0;
  background: #fbfaf5;
  border-top: 1px solid #ece7d9;
}
.ds-micro-heading { margin-bottom: 27px; }
.ds-micro-live-mark { display: inline-block; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #9a782d; box-shadow: 0 0 0 4px #f5ebcf; }
.ds-micro-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: start; gap: 17px; }
.ds-micro-jar-card {
  position: relative; min-width: 0; padding: 23px 24px 21px; overflow: hidden;
  border: 1px solid #264b39; border-radius: 22px;
  color: #f4faf5;
  background: radial-gradient(ellipse at 50% 18%, rgba(61, 140, 93, .28), transparent 38%), linear-gradient(155deg, #0b3829, #07271d 72%);
  box-shadow: 0 22px 50px rgba(18, 49, 33, .13);
}
.ds-micro-jar-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .13; background-image: radial-gradient(rgba(255,255,255,.5) .7px, transparent .7px); background-size: 17px 17px; mask-image: linear-gradient(180deg, #000, transparent 88%); }
.ds-micro-jar-top { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.ds-micro-overline { display: flex; align-items: center; gap: 8px; color: #d9e7dc; font-size: .65rem; font-weight: 850; letter-spacing: .13em; }
.ds-micro-overline i { color: #e2c67d; font-size: .82rem; }
.ds-micro-safe { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; color: #c7e4cf; border: 1px solid rgba(198, 232, 206, .2); border-radius: 999px; background: rgba(255,255,255,.045); font-size: .61rem; font-weight: 750; white-space: nowrap; }
.ds-micro-safe i { color: #a5d6b2; }
.ds-jar-illustration { position: relative; display: grid; place-items: center; height: 212px; margin: 3px auto 0; }
.ds-jar-ring { position: absolute; width: 168px; height: 168px; border: 1px solid rgba(226, 200, 124, .16); border-radius: 50%; }
.ds-jar-ring-one { width: 190px; height: 190px; border-style: dashed; animation: ds-orbit-drift 50s linear infinite; }
.ds-jar-ring-two { width: 145px; height: 145px; border-color: rgba(208, 236, 214, .17); }
.ds-jar-glow { position: absolute; width: 150px; height: 120px; border-radius: 50%; background: rgba(91, 174, 113, .32); filter: blur(36px); }
.ds-jar-glass { position: relative; display: flex; align-items: center; justify-content: center; width: 100px; height: 124px; margin-top: 12px; overflow: hidden; border: 2px solid rgba(205, 237, 215, .7); border-top: 0; border-radius: 14px 14px 24px 24px; color: #e9d497; background: linear-gradient(90deg, rgba(222,246,227,.16), rgba(255,255,255,.055) 48%, rgba(218,243,223,.12)); box-shadow: inset 7px 0 14px rgba(255,255,255,.055), inset -7px 0 14px rgba(0,0,0,.08), 0 18px 35px rgba(0,0,0,.16); }
.ds-jar-lid { position: absolute; top: 0; left: -3px; right: -3px; height: 12px; border: 1px solid #efd99a; border-radius: 5px; background: linear-gradient(90deg, #c4a454, #f2df9f, #b28c3b); }
.ds-jar-fill { position: absolute; left: 2px; right: 2px; bottom: 2px; height: 12%; border-radius: 0 0 20px 20px; background: linear-gradient(180deg, rgba(128, 207, 138, .65), rgba(37, 142, 85, .85)); transition: height .3s ease; }
.ds-jar-coins { position: absolute; z-index: 2; width: 19px; height: 7px; border: 1px solid #f5e2a9; border-radius: 50%; background: linear-gradient(180deg, #ffecb1, #caa04a); box-shadow: 0 3px 0 #ac8031; }
.ds-jar-coin-one { bottom: 25px; left: 24px; transform: rotate(-18deg); }
.ds-jar-coin-two { bottom: 31px; right: 24px; transform: rotate(14deg); }
.ds-jar-coin-three { bottom: 43px; left: 38px; transform: rotate(3deg); }
.ds-jar-glass > i { position: relative; z-index: 3; margin-top: 10px; font-size: 1.65rem; text-shadow: 0 2px 8px rgba(0,0,0,.2); }
.ds-jar-balance-label { position: relative; margin: 2px 0 4px; color: #b9d2c2; text-align: center; font-size: .76rem; }
.ds-jar-balance { position: relative; display: block; color: #f4d994; text-align: center; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 830; line-height: 1.18; letter-spacing: -.05em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ds-jar-target-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; color: #c2d9c8; font-size: .74rem; }
.ds-jar-target-row strong { color: #efdaa0; font-size: .81rem; }
.ds-jar-progress-track { position: relative; height: 9px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: rgba(231, 248, 234, .14); }
.ds-jar-progress-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8dce9b, #f0d38b); transition: width .3s ease; }
.ds-jar-target-stats { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 7px; margin-top: 8px; color: #a9c7b2; font-size: .68rem; }
.ds-jar-period-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 21px; padding-top: 16px; border-top: 1px solid rgba(227, 242, 230, .15); }
.ds-jar-period-grid > div { min-width: 0; }
.ds-jar-period-grid span, .ds-jar-period-grid strong { display: block; }
.ds-jar-period-grid span { color: #a5c3af; font-size: .69rem; }
.ds-jar-period-grid strong { margin-top: 6px; color: #eff8ef; font-size: clamp(.8rem, 1.5vw, .98rem); font-weight: 780; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ds-jar-footnote { position: relative; display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; color: #9bb9a5; font-size: .68rem; line-height: 1.55; }
.ds-jar-footnote > i { margin-top: 3px; color: #dfc57c; }
.ds-micro-action-column { display: grid; gap: 14px; min-width: 0; }
.ds-micro-form-panel, .ds-micro-target-panel, .ds-micro-history-panel { min-width: 0; padding: 22px; border: 1px solid #e7e3d5; border-radius: 19px; background: #fff; box-shadow: 0 12px 32px rgba(58, 49, 24, .035); }
.ds-micro-quick { margin: 21px 0 16px; }
.ds-form-field-label { display: block; margin-bottom: 9px; color: #40584a; font-size: .76rem; font-weight: 800; }
.ds-micro-quick-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ds-quick-amount { min-width: 0; min-height: 39px; padding: 8px 5px; border: 1px solid #e2d7b8; border-radius: 10px; color: #7b6023; background: #fffaf0; font: inherit; font-size: .78rem; font-weight: 830; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.ds-quick-amount:hover { transform: translateY(-1px); border-color: #c9ab5f; background: #fcf0d2; }
.ds-quick-amount.is-selected { border-color: #af8531; color: #fff; background: #9a742c; box-shadow: 0 0 0 3px rgba(184, 141, 48, .12); }
.ds-quick-amount:focus-visible { outline: 3px solid #caa34e; outline-offset: 2px; }
.ds-micro-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ds-micro-optional { color: #8c9b91; font-weight: 500; }
.ds-micro-submit { margin-top: 1px; }
.ds-micro-target-panel { display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: start; gap: 12px; background: linear-gradient(120deg, #fffdf6, #fff); }
.ds-micro-target-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #eadcae; border-radius: 12px; color: #93702a; background: #fff3d1; }
.ds-micro-target-copy h3 { margin: 1px 0 4px; color: #274435; font-size: .94rem; }
.ds-micro-target-copy p { margin: 0; color: #7a897f; font-size: .73rem; line-height: 1.55; }
.ds-micro-target-form { grid-column: 1 / -1; margin-top: 3px; }
.ds-micro-target-form > label { display: block; margin-bottom: 7px; color: #40584a; font-size: .74rem; font-weight: 800; }
.ds-micro-target-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.ds-micro-target-input-row input { width: 100%; min-width: 0; min-height: 42px; padding: 9px 11px; border: 1px solid #e1e3d7; border-radius: 10px; color: #2e4838; background: #fbfcf7; font: inherit; font-size: .81rem; }
.ds-micro-target-input-row button { min-height: 42px; padding: 8px 12px; border: 0; border-radius: 10px; color: #fffaf0; background: #263f2d; font: inherit; font-size: .75rem; font-weight: 800; cursor: pointer; }
.ds-micro-target-input-row button:hover { background: #3c5a3f; }
.ds-micro-target-status { grid-column: 1 / -1; min-height: 1em; margin: 7px 0 0; color: #218153; font-size: .7rem; font-weight: 700; }
.ds-micro-target-status.is-error { color: #b42318; }
.ds-micro-history-panel { margin-top: 15px; padding: 23px; }
.ds-micro-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ds-micro-history-list { display: grid; margin-top: 15px; }
.ds-micro-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 13px 3px; border-bottom: 1px solid #edf0e8; }
.ds-micro-entry:last-child { border-bottom: 0; }
.ds-micro-entry-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ds-micro-entry-icon { display: grid; place-items: center; width: 39px; height: 39px; flex: 0 0 39px; border: 1px solid #ece3c7; border-radius: 12px; color: #8b6b2b; background: #fff8e7; }
.ds-micro-entry-copy { min-width: 0; }
.ds-micro-entry-title { display: block; overflow: hidden; color: #2e4c39; font-size: .8rem; font-weight: 810; text-overflow: ellipsis; white-space: nowrap; }
.ds-micro-entry-meta { display: block; margin-top: 4px; color: #89958a; font-size: .68rem; line-height: 1.5; overflow-wrap: anywhere; }
.ds-micro-entry-note { display: block; margin-top: 3px; color: #778578; font-size: .7rem; overflow-wrap: anywhere; }
.ds-micro-entry-amount { color: #16714b; font-size: .83rem; font-weight: 850; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds-micro-entry-delete { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid #e9e7dd; border-radius: 9px; color: #9b625d; background: #fff; cursor: pointer; }
.ds-micro-entry-delete:hover { color: #b1372c; border-color: #edc8c5; background: #fff7f6; }

html.dark-mode .ds-micro-section { border-color: #283c2d; background: #0a1710; }
html.dark-mode .ds-micro-jar-card { border-color: #244b37; background: radial-gradient(ellipse at 50% 18%, rgba(61,140,93,.18), transparent 38%), linear-gradient(155deg, #0b3325, #071d14 72%); }
html.dark-mode .ds-micro-form-panel, html.dark-mode .ds-micro-history-panel { border-color: #2b4030; background: #122319; box-shadow: 0 12px 32px rgba(0,0,0,.12); }
html.dark-mode .ds-micro-target-panel { border-color: #3c4130; background: linear-gradient(120deg, #1c2a1e, #142319); }
html.dark-mode .ds-micro-target-copy h3 { color: #e2f0e5; }
html.dark-mode .ds-micro-target-copy p, html.dark-mode .ds-micro-optional { color: #a0b3a4; }
html.dark-mode .ds-form-field-label, html.dark-mode .ds-micro-target-form > label { color: #c4d7c8; }
html.dark-mode .ds-quick-amount { border-color: #4b4934; color: #e5d39b; background: #24271b; }
html.dark-mode .ds-quick-amount:hover { border-color: #b2934a; background: #34311e; }
html.dark-mode .ds-quick-amount.is-selected { border-color: #dfbe66; color: #132719; background: #dfbe66; }
html.dark-mode .ds-micro-target-icon { border-color: #4f4930; color: #e8cf87; background: #302c1c; }
html.dark-mode .ds-micro-target-input-row input { border-color: #354a39; color: #e0efe3; background: #0d1d13; }
html.dark-mode .ds-micro-target-input-row button { color: #f4f8ed; background: #31513a; }
html.dark-mode .ds-micro-entry { border-color: #2b4030; }
html.dark-mode .ds-micro-entry-title { color: #e1efe4; }
html.dark-mode .ds-micro-entry-meta, html.dark-mode .ds-micro-entry-note { color: #a0b2a4; }
html.dark-mode .ds-micro-entry-amount { color: #9de0b4; }
html.dark-mode .ds-micro-entry-icon { border-color: #4c4731; color: #dfcb8c; background: #27291c; }
html.dark-mode .ds-micro-entry-delete { border-color: #3a4538; color: #d3a6a1; background: #19271d; }
html.dark-mode .ds-micro-live-mark { background: #e3c978; box-shadow: 0 0 0 4px rgba(227,201,120,.13); }

@media (max-width: 1000px) {
  .ds-micro-grid { grid-template-columns: minmax(0, 1fr); }
  .ds-micro-jar-card { max-width: none; }
  .ds-micro-action-column { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: stretch; }
  .ds-micro-target-panel { align-content: start; }
}
@media (max-width: 700px) {
  .ds-micro-action-column { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ds-micro-jar-card, .ds-micro-form-panel, .ds-micro-target-panel, .ds-micro-history-panel { padding: 17px; border-radius: 16px; }
  .ds-micro-safe { font-size: .55rem; }
  .ds-jar-illustration { height: 192px; }
  .ds-jar-ring-one { width: 170px; height: 170px; }
  .ds-jar-ring-two { width: 132px; height: 132px; }
  .ds-jar-period-grid { gap: 6px; }
  .ds-jar-period-grid span { font-size: .64rem; }
  .ds-jar-period-grid strong { font-size: .75rem; }
  .ds-micro-form-grid { gap: 9px; }
  .ds-micro-quick-options { gap: 6px; }
  .ds-quick-amount { font-size: .72rem; }
  .ds-micro-history-heading { align-items: flex-start; flex-direction: column; }
  .ds-micro-history-heading .ds-export-button { width: 100%; }
  .ds-micro-entry { grid-template-columns: minmax(0,1fr) auto auto; gap: 7px; }
  .ds-micro-entry-amount { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-jar-ring-one { animation: none; }
  .ds-quick-amount { transition: none; }
}


/* Skip & Save Challenge — daily habit loop, connected to the Micro-Savings Jar */
.ds-skip-section { padding: clamp(58px, 7vw, 88px) 0; border-block: 1px solid #e4ece5; background: radial-gradient(ellipse at 8% 14%, rgba(225, 195, 119, .12), transparent 33%), linear-gradient(180deg, #f8fbf7, #f0f7f1 100%); }
.ds-skip-section-heading { margin-bottom: 28px; }
.ds-skip-live-mark { display: inline-block; width: 7px; height: 7px; margin-right: 8px; vertical-align: middle; border-radius: 50%; background: #c3a04c; box-shadow: 0 0 0 4px rgba(195,160,76,.14); }
.ds-skip-layout { display: grid; grid-template-columns: minmax(260px, .73fr) minmax(0, 1.27fr); align-items: start; gap: 17px; }
.ds-skip-setup-panel, .ds-skip-active-panel, .ds-skip-empty-panel { min-width: 0; padding: 23px; border: 1px solid #e1e9df; border-radius: 20px; background: #fff; box-shadow: 0 14px 38px rgba(19,49,32,.045); }
.ds-skip-setup-panel { position: sticky; top: 18px; }
.ds-skip-setup-panel .ds-panel-heading { margin-bottom: 19px; }
.ds-skip-config-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 11px; }
.ds-skip-config-status, .ds-skip-status { min-height: 1.25em; margin: 9px 0 0; color: #24764e; font-size: .76rem; font-weight: 700; line-height: 1.5; }
.ds-skip-config-status.is-error, .ds-skip-status.is-error { color: #b42318; }
.ds-skip-start-button { margin-top: 2px; }
.ds-skip-guidance { display: flex; align-items: flex-start; gap: 10px; margin-top: 19px; padding: 13px; border: 1px solid #ece5d1; border-radius: 13px; color: #77673c; background: #fffbf0; }
.ds-skip-guidance > i { margin-top: 3px; }
.ds-skip-guidance p { margin: 0; font-size: .72rem; line-height: 1.65; }
.ds-skip-active-panel { border-color: #d7e5d7; background: radial-gradient(ellipse at 93% 2%, rgba(210,185,112,.13), transparent 33%), linear-gradient(145deg, #fff, #fbfdf8); }
.ds-skip-active-panel[hidden], .ds-skip-empty-panel[hidden] { display: none !important; }
.ds-skip-active-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 17px; border-bottom: 1px solid #e9eee5; }
.ds-skip-overline { color: #a08036; font-size: .62rem; font-weight: 900; letter-spacing: .11em; }
.ds-skip-active-top h3 { margin: 9px 0 4px; color: #173b2b; font-size: clamp(1.15rem, 2.2vw, 1.55rem); letter-spacing: -.035em; overflow-wrap: anywhere; }
.ds-skip-active-top p { margin: 0; color: #849187; font-size: .73rem; }
.ds-skip-active-flare { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 7px 10px; border: 1px solid #e8dfc7; border-radius: 100px; color: #8b6e2b; background: #fff9e8; font-size: .65rem; font-weight: 800; }
.ds-skip-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 17px; }
.ds-skip-stats article { min-width: 0; padding: 13px 12px 12px; border: 1px solid #e5ebe1; border-radius: 13px; background: rgba(255,255,255,.84); }
.ds-skip-stats article > span { display: flex; align-items: center; gap: 5px; min-height: 27px; color: #7a897d; font-size: .62rem; font-weight: 800; line-height: 1.35; }
.ds-skip-stats article > span i { color: #a78336; }
.ds-skip-stats strong { display: block; margin-top: 7px; color: #1e5438; font-size: clamp(1.05rem, 2.1vw, 1.5rem); font-weight: 900; letter-spacing: -.04em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ds-skip-stats small { display: block; margin-top: 4px; color: #95a095; font-size: .59rem; line-height: 1.4; }
.ds-skip-progress-block { margin-top: 18px; padding: 15px; border: 1px solid #e6eadd; border-radius: 14px; background: #f8fbf4; }
.ds-skip-progress-copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #5d6f60; font-size: .75rem; font-weight: 800; }
.ds-skip-progress-copy strong { color: #1c6b45; font-size: .88rem; font-variant-numeric: tabular-nums; }
.ds-skip-progress-track { height: 8px; margin-top: 10px; overflow: hidden; border-radius: 100px; background: #e0e8dc; }
.ds-skip-progress-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1b7650, #c8a556); transition: width .2s ease; }
.ds-skip-progress-block > p { margin: 7px 0 0; color: #8b998c; font-size: .67rem; }
.ds-skip-calendar-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 22px 0 11px; }
.ds-skip-calendar-heading h4, .ds-skip-history-heading h4 { margin: 0; color: #254634; font-size: .9rem; letter-spacing: -.015em; }
.ds-skip-calendar-heading p, .ds-skip-history-heading p { margin: 4px 0 0; color: #8a978b; font-size: .67rem; line-height: 1.45; }
.ds-skip-calendar-heading > span { flex: 0 0 auto; color: #36794f; font-size: .64rem; font-weight: 800; }
.ds-skip-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.ds-skip-day { display: flex; min-width: 0; aspect-ratio: 1 / .82; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid #e2e9df; border-radius: 9px; color: #a0aaa0; background: #f8faf6; }
.ds-skip-day > span { font-size: .67rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.ds-skip-day > i { font-size: .6rem; }
.ds-skip-day.is-done { border-color: #b8ddc3; color: #176b43; background: linear-gradient(150deg, #e4f7e9, #f4fbf4); }
.ds-skip-day.is-today:not(.is-done) { outline: 2px solid #c4a054; outline-offset: 1px; color: #8a6c2d; background: #fff9e8; }
.ds-skip-day.is-future { color: #b6c0b7; background: #fafbf9; }
.ds-skip-day.is-missed { color: #b5a28b; background: #fcf7ef; border-color: #f0e5d6; }
.ds-skip-completion-note { margin: 12px 0 0; color: #6a7d6d; font-size: .7rem; line-height: 1.6; }
.ds-skip-checkin-card { margin-top: 19px; padding: 17px; border: 1px solid #dbe8dc; border-radius: 15px; background: linear-gradient(140deg, #f7fcf7, #fffdf6); }
.ds-skip-checkin-card .ds-panel-heading { margin-bottom: 14px; }
.ds-skip-checkin-card .ds-panel-heading h4 { margin: 0; color: #274735; font-size: .93rem; }
.ds-skip-checkin-card .ds-panel-heading p { margin: 4px 0 0; color: #88958a; font-size: .7rem; }
.ds-skip-log-button { margin-top: 2px; }
.ds-skip-history { margin-top: 20px; }
.ds-skip-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ds-skip-history-heading .ds-export-button { flex: 0 0 auto; }
.ds-skip-history-list { display: grid; }
.ds-skip-entry { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 2px; border-bottom: 1px solid #ebefe8; }
.ds-skip-entry:last-child { border-bottom: 0; }
.ds-skip-entry-check { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #e6ddc4; border-radius: 11px; color: #96752d; background: #fff8e6; }
.ds-skip-entry-copy { min-width: 0; }
.ds-skip-entry-copy strong { display: block; overflow: hidden; color: #31513b; font-size: .75rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.ds-skip-entry-copy > span { display: block; margin-top: 4px; color: #89968b; font-size: .66rem; line-height: 1.45; overflow-wrap: anywhere; }
.ds-skip-entry-amount { color: #1c744b; font-size: .78rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds-skip-entry-actions { grid-column: 2 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ds-skip-jar-btn, .ds-skip-jar-done, .ds-skip-delete { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 31px; padding: 6px 9px; border: 1px solid #e5e3d6; border-radius: 9px; color: #80672b; background: #fffaf0; font: inherit; font-size: .66rem; font-weight: 800; cursor: pointer; }
.ds-skip-jar-btn:hover { border-color: #c7ad65; background: #fff3d2; }
.ds-skip-jar-done { border-color: #c8e5d0; color: #27784b; background: #f1fbf2; cursor: default; }
.ds-skip-delete { min-width: 31px; color: #9e6d67; background: #fff; }
.ds-skip-delete:hover:not(:disabled) { border-color: #efc7c2; color: #b0372c; background: #fff5f3; }
.ds-skip-delete:disabled { opacity: .55; cursor: not-allowed; }
.ds-skip-history-empty { display: grid; justify-items: center; padding: 24px 16px; color: #829184; text-align: center; }
.ds-skip-history-empty > i { color: #c5a353; font-size: 1.5rem; }
.ds-skip-history-empty strong { margin-top: 10px; color: #3a5a43; font-size: .8rem; }
.ds-skip-history-empty p { max-width: 330px; margin: 6px 0 0; font-size: .7rem; line-height: 1.6; }
.ds-skip-empty-panel { display: flex; min-height: 280px; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(26px, 4vw, 44px); background: radial-gradient(ellipse at 90% 0%, rgba(211,181,100,.17), transparent 36%), linear-gradient(145deg, #fff, #f6fbf5); }
.ds-skip-empty-icon { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid #e7d9b5; border-radius: 16px; color: #96752e; background: #fff7df; font-size: 1.25rem; }
.ds-skip-empty-panel > .ds-section-kicker { margin: 22px 0 9px; color: #9a7b37; }
.ds-skip-empty-panel h3 { max-width: 400px; margin: 0; color: #244735; font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -.045em; }
.ds-skip-empty-panel > p:not(.ds-section-kicker) { max-width: 430px; margin: 13px 0 19px; color: #76877a; font-size: .82rem; line-height: 1.7; }
.ds-skip-empty-steps { display: grid; gap: 10px; margin-bottom: 20px; color: #617363; font-size: .71rem; }
.ds-skip-empty-steps span { display: flex; align-items: center; gap: 9px; }
.ds-skip-empty-steps i { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid #e8dfc6; border-radius: 7px; color: #92722e; background: #fffaeb; font-size: .58rem; font-style: normal; }

html.dark-mode .ds-skip-section { border-color: #263c2e; background: radial-gradient(ellipse at 8% 14%, rgba(168,136,62,.08), transparent 33%), linear-gradient(180deg, #0b1911, #0b1d13); }
html.dark-mode .ds-skip-setup-panel, html.dark-mode .ds-skip-active-panel, html.dark-mode .ds-skip-empty-panel { border-color: #2b4332; background: #122319; box-shadow: 0 12px 32px rgba(0,0,0,.14); }
html.dark-mode .ds-skip-active-top { border-color: #2c4433; }
html.dark-mode .ds-skip-active-top h3, html.dark-mode .ds-skip-calendar-heading h4, html.dark-mode .ds-skip-history-heading h4, html.dark-mode .ds-skip-checkin-card .ds-panel-heading h4, html.dark-mode .ds-skip-empty-panel h3 { color: #e2f1e5; }
html.dark-mode .ds-skip-active-top p, html.dark-mode .ds-skip-calendar-heading p, html.dark-mode .ds-skip-history-heading p, html.dark-mode .ds-skip-progress-block > p, html.dark-mode .ds-skip-completion-note { color: #a0b3a4; }
html.dark-mode .ds-skip-active-flare { border-color: #4a4730; color: #e4ce8b; background: #292a1c; }
html.dark-mode .ds-skip-stats article { border-color: #2d4734; background: #172a1d; }
html.dark-mode .ds-skip-stats article > span, html.dark-mode .ds-skip-stats small { color: #a4b8a7; }
html.dark-mode .ds-skip-stats strong { color: #9ed9b2; }
html.dark-mode .ds-skip-progress-block, html.dark-mode .ds-skip-checkin-card { border-color: #314a36; background: #18291d; }
html.dark-mode .ds-skip-progress-copy { color: #c5d7c6; }
html.dark-mode .ds-skip-progress-copy strong { color: #a2dfb5; }
html.dark-mode .ds-skip-progress-track { background: #2c4430; }
html.dark-mode .ds-skip-day { border-color: #344637; color: #a2b2a3; background: #15261a; }
html.dark-mode .ds-skip-day.is-done { border-color: #356749; color: #a6e0b8; background: #183c2a; }
html.dark-mode .ds-skip-day.is-today:not(.is-done) { color: #e2cf91; background: #302a19; }
html.dark-mode .ds-skip-day.is-future { color: #728477; background: #122118; }
html.dark-mode .ds-skip-day.is-missed { color: #c0a98a; background: #2a241a; border-color: #51422b; }
html.dark-mode .ds-skip-entry { border-color: #2a4031; }
html.dark-mode .ds-skip-entry-copy strong { color: #dcefe0; }
html.dark-mode .ds-skip-entry-copy > span { color: #a4b5a6; }
html.dark-mode .ds-skip-entry-amount { color: #a2dfb5; }
html.dark-mode .ds-skip-jar-btn, html.dark-mode .ds-skip-delete { border-color: #3d4b35; color: #e0ca89; background: #25291c; }
html.dark-mode .ds-skip-jar-done { border-color: #365b40; color: #a4dcb0; background: #193522; }
html.dark-mode .ds-skip-history-empty strong { color: #d3e7d5; }
html.dark-mode .ds-skip-history-empty p, html.dark-mode .ds-skip-empty-panel > p:not(.ds-section-kicker) { color: #a0b3a4; }
html.dark-mode .ds-skip-empty-steps { color: #b4c6b6; }
html.dark-mode .ds-skip-empty-steps i { border-color: #4d4831; color: #e2cf91; background: #2b291c; }
html.dark-mode .ds-skip-guidance { border-color: #51462a; color: #e0d19b; background: #282719; }

@media (max-width: 1080px) {
  .ds-skip-layout { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
  .ds-skip-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-skip-setup-panel { position: static; }
}
@media (max-width: 820px) {
  .ds-skip-layout { grid-template-columns: minmax(0, 1fr); }
  .ds-skip-active-panel, .ds-skip-empty-panel { min-height: 0; }
}
@media (max-width: 560px) {
  .ds-skip-section-heading { gap: 12px; }
  .ds-skip-setup-panel, .ds-skip-active-panel, .ds-skip-empty-panel { padding: 16px; border-radius: 16px; }
  .ds-skip-config-grid { gap: 8px; grid-template-columns: minmax(0, 1fr); }
  .ds-skip-active-top { flex-direction: column; }
  .ds-skip-stats { gap: 7px; }
  .ds-skip-stats article { padding: 11px 10px; }
  .ds-skip-stats article > span { font-size: .6rem; }
  .ds-skip-calendar { gap: 5px; }
  .ds-skip-day { border-radius: 7px; }
  .ds-skip-calendar-heading { align-items: flex-start; flex-direction: column; }
  .ds-skip-history-heading { align-items: flex-start; flex-direction: column; }
  .ds-skip-history-heading .ds-export-button { width: 100%; }
  .ds-skip-entry { grid-template-columns: 31px minmax(0, 1fr) auto; gap: 8px; }
  .ds-skip-entry-check { width: 31px; height: 31px; }
  .ds-skip-entry-amount { font-size: .72rem; }
  .ds-skip-entry-actions { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-skip-progress-track > span { transition: none; }
}


/* Savings Outlook — realistic contribution forecasting */
.ds-outlook-section { padding: clamp(58px, 7vw, 88px) 0; border-block: 1px solid #e4ece5; background: radial-gradient(ellipse at 93% 5%, rgba(210,183,103,.13), transparent 35%), linear-gradient(180deg, #fbfcf8, #f2f8f3); }
.ds-outlook-section-heading { margin-bottom: 28px; }
.ds-outlook-live-mark { display: inline-block; width: 7px; height: 7px; margin-right: 8px; vertical-align: middle; border-radius: 50%; background: #c5a24d; box-shadow: 0 0 0 4px rgba(197,162,77,.14); }
.ds-outlook-workbench { display: grid; grid-template-columns: minmax(275px, .76fr) minmax(0, 1.24fr); align-items: start; gap: 17px; }
.ds-outlook-input-panel, .ds-outlook-summary-panel, .ds-outlook-goal-panel { min-width: 0; padding: 23px; border: 1px solid #e0e9de; border-radius: 20px; background: #fff; box-shadow: 0 14px 38px rgba(19,49,32,.045); }
.ds-outlook-input-panel { position: sticky; top: 18px; }
.ds-outlook-input-panel .ds-panel-heading { margin-bottom: 20px; }
.ds-outlook-amount-row { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 9px; }
.ds-outlook-amount-row > span { display: flex; align-items: center; justify-content: center; padding: 8px 10px; border: 1px solid #dfe6db; border-radius: 10px; color: #54705c; background: #f5f8f1; font-size: .75rem; font-weight: 850; white-space: nowrap; }
.ds-outlook-amount-row input { min-width: 0; }
.ds-outlook-input-panel input:not([type="range"]), .ds-outlook-input-panel select { width: 100%; min-width: 0; min-height: 43px; padding: 10px 12px; border: 1px solid #dfe6db; border-radius: 10px; color: #2b4937; background: #fcfdf9; font: inherit; font-size: .82rem; }
.ds-outlook-input-panel input:focus-visible, .ds-outlook-input-panel select:focus-visible { outline: 3px solid rgba(197,162,77,.42); outline-offset: 2px; }
.ds-outlook-slider-field { padding: 13px 14px; border: 1px solid #e4e9dc; border-radius: 13px; background: #f8faf4; }
.ds-outlook-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ds-outlook-label-row label { margin: 0 !important; }
.ds-outlook-label-row strong { color: #19734b; font-size: .9rem; font-variant-numeric: tabular-nums; }
.ds-outlook-slider-field input[type="range"] { display: block; width: 100%; margin: 14px 0 8px; accent-color: #14724c; cursor: pointer; }
.ds-outlook-slider-labels { display: flex; justify-content: space-between; gap: 8px; color: #879487; font-size: .62rem; }
.ds-outlook-slider-field > p { margin: 8px 0 0; color: #6e806f; font-size: .68rem; }
.ds-outlook-form-divider { height: 1px; margin: 18px 0; background: #e8eee5; }
.ds-outlook-use-jar { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0; border: 0; color: #84692d; background: transparent; font: inherit; font-size: .72rem; font-weight: 850; cursor: pointer; text-align: left; }
.ds-outlook-use-jar:hover { color: #176b46; text-decoration: underline; }
.ds-outlook-field-hint { display: block; margin-top: 6px; color: #8a9789; font-size: .66rem; line-height: 1.5; }
.ds-outlook-form-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 9px; margin-top: 17px; }
.ds-outlook-form-actions .ds-expense-submit { margin: 0; }
.ds-outlook-reset { min-height: 42px; padding: 8px 11px; border: 1px solid #dfe7db; border-radius: 10px; color: #6d7e6e; background: #fff; font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; }
.ds-outlook-reset:hover { border-color: #c0d7c4; color: #176b46; background: #f5faf4; }
.ds-outlook-status { min-height: 1.25em; margin: 10px 0 0; color: #24764e; font-size: .73rem; font-weight: 700; line-height: 1.5; }
.ds-outlook-status.is-error { color: #b42318; }
.ds-outlook-results-column { display: grid; gap: 15px; min-width: 0; }
.ds-outlook-summary-panel { overflow: hidden; position: relative; color: #f4faf4; border-color: #193e2c; background: radial-gradient(ellipse at 95% 3%, rgba(215,189,112,.22), transparent 38%), linear-gradient(130deg, #082c20, #16452f 70%, #25573a); box-shadow: 0 18px 38px rgba(9,47,30,.1); }
.ds-outlook-summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.ds-outlook-overline { margin: 0 0 9px; color: #dfc982; font-size: .63rem; font-weight: 900; letter-spacing: .11em; }
.ds-outlook-summary-head h3 { margin: 0; color: #f3faf3; font-size: clamp(1.2rem, 2.4vw, 1.72rem); letter-spacing: -.045em; line-height: 1.15; }
.ds-outlook-summary-head > div > p:last-child { margin: 7px 0 0; color: #bbd2c1; font-size: .72rem; }
.ds-outlook-summary-emblem { display: grid; place-items: center; width: 45px; height: 45px; flex: 0 0 45px; border: 1px solid rgba(221,201,132,.45); border-radius: 14px; color: #e5d18b; background: rgba(255,255,255,.06); font-size: 1.1rem; }
.ds-outlook-summary-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; margin-top: 22px; }
.ds-outlook-summary-metrics > div { min-width: 0; padding: 14px; border: 1px solid rgba(229,238,223,.16); border-radius: 13px; background: rgba(255,255,255,.055); }
.ds-outlook-summary-metrics span { display: block; color: #c6d8c9; font-size: .68rem; line-height: 1.4; }
.ds-outlook-summary-metrics strong { display: block; margin-top: 7px; color: #f0d990; font-size: clamp(1.05rem, 2.1vw, 1.5rem); font-weight: 900; letter-spacing: -.035em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ds-outlook-period-section { padding: 4px 0 0; }
.ds-outlook-period-heading { display: flex; align-items: end; justify-content: space-between; gap: 13px; margin: 3px 0 12px; }
.ds-outlook-period-heading h3 { margin: 0; color: #274634; font-size: .98rem; letter-spacing: -.02em; }
.ds-outlook-period-heading p { max-width: 390px; margin: 5px 0 0; color: #89958a; font-size: .67rem; line-height: 1.5; }
.ds-outlook-no-returns { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; color: #7e6a38; font-size: .63rem; font-weight: 850; }
.ds-outlook-results-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.ds-outlook-period-card { min-width: 0; padding: 16px; border: 1px solid #e2e9df; border-radius: 15px; background: #fff; box-shadow: 0 8px 24px rgba(21,55,34,.025); }
.ds-outlook-period-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #7f8e80; font-size: .7rem; font-weight: 850; }
.ds-outlook-period-icon { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #e2e8d7; border-radius: 9px; color: #9a7c36; background: #fffaeb; }
.ds-outlook-period-amount { margin-top: 11px; color: #1a6040; font-size: clamp(1.05rem, 2vw, 1.55rem); font-weight: 900; line-height: 1.15; letter-spacing: -.04em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ds-outlook-period-detail { display: block; margin-top: 5px; color: #929d91; font-size: .63rem; }
.ds-outlook-bar-track { height: 6px; margin-top: 14px; overflow: hidden; border-radius: 99px; background: #e7eee3; }
.ds-outlook-bar-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #17754b, #c9a957); transition: width .18s ease; }
.ds-outlook-period-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; margin-top: 10px; color: #849285; font-size: .65rem; }
.ds-outlook-period-foot strong { color: #355640; font-size: .7rem; text-align: right; overflow-wrap: anywhere; }
.ds-outlook-period-foot.ds-outlook-goal-foot { padding-top: 8px; border-top: 1px solid #eef1e9; }
.ds-outlook-invalid { grid-column: 1 / -1; padding: 23px; border: 1px solid #efd3cb; border-radius: 15px; color: #9e4235; background: #fff7f4; }
.ds-outlook-invalid strong { display: block; margin-top: 8px; font-size: .85rem; }
.ds-outlook-invalid p { margin: 6px 0 0; font-size: .72rem; line-height: 1.6; }
.ds-outlook-goal-panel { padding: 19px 21px; background: linear-gradient(125deg, #fff, #f9fbf3); }
.ds-outlook-goal-heading { display: flex; align-items: center; gap: 10px; }
.ds-outlook-goal-heading-icon, .ds-outlook-goal-icon { display: grid; place-items: center; width: 37px; height: 37px; flex: 0 0 37px; border: 1px solid #e8dfc5; border-radius: 11px; color: #96762d; background: #fff8e6; }
.ds-outlook-goal-heading h3 { margin: 0; color: #274735; font-size: .9rem; }
.ds-outlook-goal-heading p { margin: 4px 0 0; color: #8b988a; font-size: .67rem; }
.ds-outlook-goal-result { display: flex; align-items: flex-start; gap: 12px; margin-top: 15px; padding-top: 15px; border-top: 1px solid #e8ede4; }
.ds-outlook-goal-result strong { display: block; color: #1c6644; font-size: .82rem; line-height: 1.5; }
.ds-outlook-goal-result p { margin: 5px 0 0; color: #7c8c7d; font-size: .7rem; line-height: 1.65; }
.ds-outlook-goal-result > div:last-child { min-width: 0; }
.ds-outlook-export-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 18px; border: 1px solid #e2e9df; border-radius: 15px; background: rgba(255,255,255,.72); }
.ds-outlook-export-row > div:first-child strong { color: #35533e; font-size: .77rem; }
.ds-outlook-export-row > div:first-child p { margin: 4px 0 0; color: #879487; font-size: .65rem; line-height: 1.5; }
.ds-outlook-export-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 7px; }
.ds-outlook-export-actions .ds-export-button { padding-inline: 11px; }
.ds-outlook-assumptions { display: flex; align-items: flex-start; gap: 9px; max-width: 1000px; margin: 17px 0 0; color: #758576; font-size: .72rem; line-height: 1.7; }
.ds-outlook-assumptions > i { margin-top: 4px; color: #9a7a34; }

html.dark-mode .ds-outlook-section { border-color: #283c2d; background: radial-gradient(ellipse at 93% 5%, rgba(168,136,62,.08), transparent 35%), linear-gradient(180deg, #0b1911, #0b1d13); }
html.dark-mode .ds-outlook-input-panel, html.dark-mode .ds-outlook-period-card, html.dark-mode .ds-outlook-goal-panel, html.dark-mode .ds-outlook-export-row { border-color: #2c4432; background: #122319; box-shadow: 0 12px 32px rgba(0,0,0,.12); }
html.dark-mode .ds-outlook-input-panel input:not([type="range"]), html.dark-mode .ds-outlook-input-panel select { border-color: #354b38; color: #e0eee2; background: #0d1d13; }
html.dark-mode .ds-outlook-amount-row > span, html.dark-mode .ds-outlook-slider-field { border-color: #344a35; color: #c4d6c4; background: #1b2b1d; }
html.dark-mode .ds-outlook-label-row strong { color: #9bd9b0; }
html.dark-mode .ds-outlook-slider-labels, html.dark-mode .ds-outlook-slider-field > p, html.dark-mode .ds-outlook-field-hint { color: #a0b3a4; }
html.dark-mode .ds-outlook-form-divider, html.dark-mode .ds-outlook-period-foot.ds-outlook-goal-foot, html.dark-mode .ds-outlook-goal-result { border-color: #2e4432; }
html.dark-mode .ds-outlook-use-jar { color: #e0cb88; }
html.dark-mode .ds-outlook-reset { border-color: #3a4c39; color: #cadacb; background: #18291d; }
html.dark-mode .ds-outlook-period-heading h3, html.dark-mode .ds-outlook-goal-heading h3, html.dark-mode .ds-outlook-export-row > div:first-child strong { color: #e0eee2; }
html.dark-mode .ds-outlook-period-heading p, html.dark-mode .ds-outlook-no-returns, html.dark-mode .ds-outlook-period-top, html.dark-mode .ds-outlook-period-detail, html.dark-mode .ds-outlook-period-foot, html.dark-mode .ds-outlook-goal-heading p, html.dark-mode .ds-outlook-goal-result p, html.dark-mode .ds-outlook-export-row > div:first-child p, html.dark-mode .ds-outlook-assumptions { color: #a3b7a6; }
html.dark-mode .ds-outlook-period-amount, html.dark-mode .ds-outlook-period-foot strong, html.dark-mode .ds-outlook-goal-result strong { color: #9fe0b5; }
html.dark-mode .ds-outlook-bar-track { background: #304633; }
html.dark-mode .ds-outlook-goal-heading-icon, html.dark-mode .ds-outlook-goal-icon, html.dark-mode .ds-outlook-period-icon { border-color: #4e482f; color: #e0cc8a; background: #2b2a1c; }
html.dark-mode .ds-outlook-invalid { border-color: #604039; color: #f0b7a7; background: #2b1d19; }
html.dark-mode .ds-outlook-invalid p { color: #e0b3a8; }
html.dark-mode .ds-outlook-goal-panel { background: linear-gradient(125deg, #14251a, #192a1d); }

@media (max-width: 1080px) {
  .ds-outlook-workbench { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
  .ds-outlook-input-panel { position: static; }
  .ds-outlook-export-row { align-items: flex-start; flex-direction: column; }
  .ds-outlook-export-actions { width: 100%; }
  .ds-outlook-export-actions .ds-export-button { flex: 1; }
}
@media (max-width: 820px) {
  .ds-outlook-workbench { grid-template-columns: minmax(0,1fr); }
  .ds-outlook-input-panel { position: static; }
}
@media (max-width: 560px) {
  .ds-outlook-input-panel, .ds-outlook-summary-panel, .ds-outlook-goal-panel { padding: 16px; border-radius: 16px; }
  .ds-outlook-summary-metrics { gap: 8px; }
  .ds-outlook-summary-metrics > div { padding: 12px; }
  .ds-outlook-summary-metrics strong { font-size: 1rem; }
  .ds-outlook-period-heading { align-items: flex-start; flex-direction: column; }
  .ds-outlook-results-grid { gap: 8px; }
  .ds-outlook-period-card { padding: 12px; border-radius: 12px; }
  .ds-outlook-period-amount { font-size: 1.05rem; }
  .ds-outlook-period-foot { gap: 5px; font-size: .61rem; }
  .ds-outlook-period-foot strong { font-size: .64rem; }
  .ds-outlook-export-actions { flex-direction: column; align-items: stretch; }
  .ds-outlook-export-actions .ds-export-button { width: 100%; }
  .ds-outlook-form-actions { grid-template-columns: minmax(0,1fr); }
  .ds-outlook-goal-result { gap: 9px; }
}
@media print {
  body.ds-printing-outlook > * { visibility: hidden !important; }
  body.ds-printing-outlook .ds-outlook-section,
  body.ds-printing-outlook .ds-outlook-section * { visibility: visible !important; }
  body.ds-printing-outlook .ds-outlook-section { position: absolute; inset: 0 auto auto 0; width: 100%; padding: 12px 0; background: #fff !important; color: #172b20 !important; }
  body.ds-printing-outlook .ds-outlook-input-panel, body.ds-printing-outlook .ds-outlook-use-jar, body.ds-printing-outlook .ds-outlook-form-actions, body.ds-printing-outlook .ds-outlook-status, body.ds-printing-outlook .ds-outlook-export-row { display: none !important; }
  body.ds-printing-outlook .ds-outlook-workbench { display: block; }
  body.ds-printing-outlook .ds-outlook-results-column { display: block; }
  body.ds-printing-outlook .ds-outlook-summary-panel { color: #172b20 !important; background: #fff !important; border: 1px solid #aaa; box-shadow: none; }
  body.ds-printing-outlook .ds-outlook-summary-head h3, body.ds-printing-outlook .ds-outlook-summary-metrics strong { color: #172b20 !important; }
  body.ds-printing-outlook .ds-outlook-summary-metrics span, body.ds-printing-outlook .ds-outlook-summary-head > div > p:last-child { color: #333 !important; }
  body.ds-printing-outlook .ds-outlook-period-card, body.ds-printing-outlook .ds-outlook-goal-panel { break-inside: avoid; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-outlook-bar-track > span { transition: none; }
}

/* Smart Expense Manager */
.sem-section { padding: 76px 0; background: #f5faf6; color: #1d3528; border-top: 1px solid #e3eee5; }
.sem-heading { margin-bottom: 25px; }
.sem-live-mark { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #16895b; box-shadow: 0 0 0 4px rgba(22,137,91,.12); vertical-align: middle; }
.sem-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin: 0 0 16px; padding: 13px 16px; border: 1px solid #deebe1; border-radius: 14px; background: #fff; }
.sem-market-control { display: flex; align-items: center; gap: 10px; }
.sem-market-control label { font-size: .76rem; font-weight: 800; color: #466150; }
.sem-market-control select { min-height: 39px; min-width: 205px; padding: 8px 10px; border: 1px solid #d7e5d9; border-radius: 9px; background: #f9fcf9; color: #244332; font: inherit; font-size: .78rem; }
.sem-period-note { display: flex; align-items: center; gap: 7px; color: #718477; font-size: .76rem; }
.sem-period-note i { color: #1a8559; }
.sem-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 0 0 14px; }
.sem-stat-card { min-width: 0; padding: 18px; border: 1px solid #e1ebe3; border-radius: 15px; background: #fff; box-shadow: 0 8px 25px rgba(24,62,38,.035); }
.sem-stat-budget { background: linear-gradient(145deg,#e9f8ee,#fff 80%); border-color: #c9e7d0; }
.sem-stat-label { display: block; color: #738477; font-size: .72rem; font-weight: 760; letter-spacing: .015em; }
.sem-stat-card strong { display: block; margin: 9px 0 5px; color: #163d2a; font-size: clamp(1.15rem,2vw,1.55rem); letter-spacing: -.045em; overflow-wrap: anywhere; }
.sem-stat-card > span:last-child { display: block; color: #87968c; font-size: .69rem; line-height: 1.45; }
.sem-budget-alert { display: flex; align-items: flex-start; gap: 13px; margin: 0 0 17px; padding: 15px 17px; border: 1px solid #d8e8db; border-radius: 13px; background: #f0f8f1; color: #1e6441; }
.sem-alert-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid #c4e4cc; border-radius: 11px; background: #e0f3e5; color: #17764a; }
.sem-budget-alert strong { display: block; margin: 1px 0 4px; font-size: .87rem; }
.sem-budget-alert p { margin: 0; color: #597866; font-size: .77rem; line-height: 1.55; }
.sem-budget-alert.is-warning { border-color: #f0d6a0; background: #fff9e9; color: #88550a; }
.sem-budget-alert.is-warning .sem-alert-icon { border-color: #ead19b; background: #fff0c8; color: #a3650b; }
.sem-budget-alert.is-warning p { color: #866c3d; }
.sem-budget-alert.is-danger { border-color: #efc3c0; background: #fff0ef; color: #9c2822; }
.sem-budget-alert.is-danger .sem-alert-icon { border-color: #e9b8b4; background: #ffe0dd; color: #ac2d27; }
.sem-budget-alert.is-danger p { color: #96514c; }
.sem-workbench { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 16px; align-items: start; }
.sem-panel, .sem-quick-entry-panel { min-width: 0; padding: 22px; border: 1px solid #e0eae2; border-radius: 17px; background: #fff; box-shadow: 0 9px 28px rgba(24,62,38,.035); }
.sem-quick-entry-panel { margin-bottom: 16px; }
.sem-panel-heading { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 19px; }
.sem-panel-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid #cce8d4; border-radius: 12px; background: #eef9f0; color: #19744a; }
.sem-panel-icon-gold { border-color: #eee0b7; background: #fff8e3; color: #9b7722; }
.sem-panel-heading h3 { margin: 1px 0 4px; color: #1b3b2c; font-size: 1rem; letter-spacing: -.025em; }
.sem-panel-heading p { margin: 0; color: #7b8b80; font-size: .75rem; line-height: 1.55; }
.sem-field { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.sem-field label { color: #40584a; font-size: .74rem; font-weight: 800; }
.sem-field input, .sem-field select { width: 100%; min-width: 0; min-height: 43px; padding: 10px 11px; border: 1px solid #dce7dd; border-radius: 9px; outline: 0; color: #263f30; background: #fbfdfb; font: inherit; font-size: .81rem; }
.sem-field input:focus, .sem-field select:focus, .sem-market-control select:focus { border-color: #289e66; box-shadow: 0 0 0 3px rgba(40,158,102,.12); }
.sem-budget-form { display: grid; gap: 13px; }
.sem-category-form { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 11px; align-items: end; }
.sem-category-form > .sem-secondary-button, .sem-category-form > .ds-expense-status { grid-column: 1 / -1; }
.sem-secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 13px; border: 1px solid #d3e5d7; border-radius: 10px; color: #24613f; background: #f4faf5; font: inherit; font-size: .75rem; font-weight: 800; text-decoration: none; cursor: pointer; }
.sem-secondary-button:hover { border-color: #a8d4b5; background: #eaf7ed; }
.sem-subdivider { height: 1px; margin: 23px 0 19px; background: #e9f0ea; }
.sem-budget-panel h4 { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 6px; color: #284734; font-size: .87rem; }
.sem-budget-panel h4 > span { padding: 4px 7px; border-radius: 7px; color: #75877a; background: #f0f5f1; font-size: .61rem; font-weight: 760; text-transform: uppercase; letter-spacing: .05em; }
.sem-support-copy { margin: 0 0 13px; color: #809084; font-size: .72rem; line-height: 1.5; }
.sem-category-budgets { display: grid; gap: 9px; margin-top: 15px; }
.sem-category-budget-card { padding: 12px 13px; border: 1px solid #e2ece4; border-radius: 11px; background: #fbfdfb; }
.sem-category-budget-card.is-warning { border-color: #ecd9ac; background: #fffbf0; }
.sem-category-budget-card.is-danger { border-color: #edc8c5; background: #fff6f5; }
.sem-category-budget-head, .sem-category-budget-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sem-category-budget-head strong { color: #385441; font-size: .75rem; }
.sem-category-budget-head > span { color: #62766a; font-size: .71rem; font-weight: 730; text-align: right; }
.sem-progress-track { width: 100%; height: 7px; overflow: hidden; margin: 10px 0 7px; border-radius: 100px; background: #e9f1ea; }
.sem-progress-fill { display: block; height: 100%; max-width: 100%; border-radius: inherit; background: linear-gradient(90deg,#44b77a,#178858); transition: width .22s ease; }
.sem-progress-fill.is-warning { background: #d99a26; }
.sem-progress-fill.is-danger { background: #d14b43; }
.sem-category-budget-foot { color: #809084; font-size: .66rem; }
.sem-remove-budget { padding: 3px 6px; border: 0; border-radius: 5px; color: #94716d; background: transparent; font: inherit; cursor: pointer; }
.sem-remove-budget:hover { color: #a52f2a; background: #fff0ee; }
.sem-empty-copy { margin: 0; color: #859389; font-size: .76rem; line-height: 1.6; }
.sem-insight-list { display: grid; gap: 10px; }
.sem-insight { display: flex; gap: 11px; padding: 12px; border: 1px solid #e8eee8; border-radius: 12px; background: #fbfdfb; }
.sem-insight-warning { border-color: #f0d6a4; background: #fffaed; }
.sem-insight-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; color: #24764b; background: #eaf7ed; }
.sem-insight-warning .sem-insight-icon { color: #9b690d; background: #fff0c9; }
.sem-insight-copy { min-width: 0; }
.sem-insight-copy strong { display: block; margin: 0 0 4px; color: #314b39; font-size: .76rem; line-height: 1.4; }
.sem-insight-copy p { margin: 0; color: #7b8c80; font-size: .71rem; line-height: 1.55; overflow-wrap: anywhere; }
.sem-breakdown-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 21px 0 12px; }
.sem-breakdown-heading h4 { margin: 0; color: #284734; font-size: .85rem; }
.sem-breakdown-heading span { color: #829085; font-size: .68rem; }
.sem-breakdown { display: grid; gap: 12px; }
.sem-breakdown-row { display: grid; gap: 6px; }
.sem-breakdown-top { display: flex; justify-content: space-between; gap: 12px; color: #6f8375; font-size: .71rem; }
.sem-breakdown-top strong { color: #314e3a; font-size: .71rem; text-align: right; }
.sem-breakdown-row .sem-progress-track { margin: 0; height: 6px; }
.sem-insight-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 20px; padding: 12px; border: 1px solid #eee4c9; border-radius: 11px; background: #fffcf3; color: #967629; }
.sem-insight-note > i { margin-top: 2px; }
.sem-insight-note p { margin: 0; color: #887d5c; font-size: .69rem; line-height: 1.55; }
.sem-action-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 16px; padding: 17px 19px; border: 1px solid #dce9de; border-radius: 14px; background: #fff; }
.sem-action-row > div:first-child strong { display: block; color: #294834; font-size: .81rem; }
.sem-action-row > div:first-child p { margin: 4px 0 0; color: #829085; font-size: .7rem; }
.sem-action-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.sem-action-buttons .ds-export-button { width: auto; min-height: 40px; padding: 9px 12px; font-size: .72rem; }
.sem-privacy-note { display: flex; gap: 8px; margin: 13px 0 0; color: #829286; font-size: .69rem; line-height: 1.6; }
.sem-privacy-note i { margin-top: 3px; color: #278458; }
.sem-suggestion { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 9px 0 0; color: #617769; font-size: .71rem; line-height: 1.5; }
.sem-suggestion[hidden] { display: none; }
.sem-suggestion-button { padding: 5px 8px; border: 1px solid #c9e6d0; border-radius: 7px; color: #196940; background: #eff9f1; font: inherit; font-size: .68rem; font-weight: 800; cursor: pointer; }
.sem-suggestion-button:hover { background: #dff3e4; }
.sem-quick-form { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; align-items: end; gap: 12px; }
.sem-quick-form > button, .sem-quick-form > .ds-expense-status { grid-column: 1 / -1; }
.sem-quick-form > .ds-expense-status { margin: -4px 0 0; }
.sem-landing-hero { padding-top: 40px; }
.sem-hero-visual { display: grid; place-items: center; min-height: 370px; }
.sem-hero-card { width: min(100%, 405px); padding: 23px; border: 1px solid rgba(181,220,192,.55); border-radius: 23px; background: linear-gradient(155deg,#103c2c,#08271d); color: #e7f8eb; box-shadow: 0 25px 65px rgba(6,52,33,.24); transform: rotate(1deg); }
.sem-hero-card-top { display: flex; justify-content: space-between; gap: 10px; color: #a8c7b0; font-size: .66rem; }
.sem-hero-card-top span:first-child { display: flex; gap: 8px; align-items: center; }
.sem-hero-card-top span:first-child i { color: #75d39a; }
.sem-hero-card-top span:last-child { color: #e5ce83; font-weight: 800; }
.sem-hero-ring { display: grid; place-items: center; width: 174px; height: 174px; margin: 23px auto; border: 12px solid #e1bc63; border-left-color: #2a8c5d; border-bottom-color: #2a8c5d; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transform: rotate(-20deg); }
.sem-hero-ring > div { display: grid; gap: 4px; text-align: center; transform: rotate(20deg); }
.sem-hero-ring strong { color: #fff4cc; font-size: 2.15rem; letter-spacing: -.07em; }
.sem-hero-ring span { color: #a8c7b0; font-size: .65rem; }
.sem-hero-lines { display: grid; gap: 11px; padding-top: 4px; }
.sem-hero-lines span { display: flex; align-items: center; gap: 8px; color: #bfd7c5; font-size: .74rem; }
.sem-hero-lines span > i { width: 7px; height: 7px; border-radius: 50%; background: #70cc96; }
.sem-hero-lines span:nth-child(2) > i { background: #6ab4e5; }
.sem-hero-lines span:nth-child(3) > i { background: #dfc56d; }
.sem-hero-lines strong { margin-left: auto; color: #e6f7e9; font-size: .68rem; }
.sem-hero-card > p { margin: 17px 0 0; padding-top: 15px; border-top: 1px solid rgba(215,243,222,.13); color: #8fd9a7; font-size: .71rem; }
.sem-hero-card > p i { margin-right: 5px; }
.sem-guide-content { padding: 80px 0; background: #fff; }
.sem-guide-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(270px,.72fr); gap: 55px; align-items: start; }
.sem-guide-grid article h2, .sem-faq-section h2 { margin: 0 0 20px; color: #193b29; font-size: clamp(1.8rem,3vw,2.4rem); letter-spacing: -.045em; line-height: 1.15; }
.sem-guide-grid article h3 { margin: 26px 0 7px; color: #244b34; font-size: 1rem; }
.sem-guide-grid article p { color: #66796c; font-size: .88rem; line-height: 1.85; }
.sem-guide-aside { position: sticky; top: 24px; padding: 25px; border: 1px solid #dfece2; border-radius: 18px; background: linear-gradient(150deg,#f1faf3,#fff); }
.sem-guide-aside-icon { display: grid; place-items: center; width: 45px; height: 45px; margin-bottom: 15px; border-radius: 13px; color: #17764a; background: #dff4e4; font-size: 1.05rem; }
.sem-guide-aside h3 { margin: 0 0 14px; color: #244532; font-size: 1.1rem; }
.sem-guide-aside ol { display: grid; gap: 12px; padding-left: 22px; color: #63796b; font-size: .79rem; line-height: 1.6; }
.sem-guide-aside p { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #dceadf; color: #6b7e70; font-size: .75rem; line-height: 1.65; }
.sem-guide-aside a { color: #127647; font-weight: 800; }
.sem-faq-section { padding: 70px 0 85px; background: #f6faf6; }
.sem-faq-section .ds-section-kicker { margin-bottom: 12px; }
.sem-faq-section details { margin-top: 10px; padding: 16px 18px; border: 1px solid #dfe9e1; border-radius: 12px; background: #fff; }
.sem-faq-section summary { color: #2e4c38; font-size: .84rem; font-weight: 800; cursor: pointer; }
.sem-faq-section details p { margin: 11px 0 0; color: #718276; font-size: .78rem; line-height: 1.65; }
.smart-expense-page .ds-footer-inner > div { display: flex; flex-wrap: wrap; gap: 15px; }
.smart-expense-page .ds-footer-inner > div a { color: #8da296; font-size: .75rem; text-decoration: none; }
html.dark-mode .sem-section { background: #0d1a12; border-color: #253c2b; color: #dfecdf; }
html.dark-mode .sem-toolbar, html.dark-mode .sem-stat-card, html.dark-mode .sem-panel, html.dark-mode .sem-quick-entry-panel, html.dark-mode .sem-action-row { border-color: #2d4432; background: #14231a; box-shadow: none; }
html.dark-mode .sem-stat-budget { border-color: #355c40; background: linear-gradient(145deg,#193725,#14231a 82%); }
html.dark-mode .sem-market-control label, html.dark-mode .sem-stat-card strong, html.dark-mode .sem-panel-heading h3, html.dark-mode .sem-budget-panel h4, html.dark-mode .sem-breakdown-heading h4, html.dark-mode .sem-action-row > div:first-child strong { color: #e1f1e4; }
html.dark-mode .sem-market-control select, html.dark-mode .sem-field input, html.dark-mode .sem-field select { border-color: #354b39; color: #e1eee3; background: #0c1a11; }
html.dark-mode .sem-stat-label, html.dark-mode .sem-stat-card > span:last-child, html.dark-mode .sem-panel-heading p, html.dark-mode .sem-period-note, html.dark-mode .sem-support-copy, html.dark-mode .sem-category-budget-foot, html.dark-mode .sem-breakdown-heading span, html.dark-mode .sem-action-row > div:first-child p, html.dark-mode .sem-privacy-note { color: #a1b5a4; }
html.dark-mode .sem-stat-card strong { color: #a9e1b8; }
html.dark-mode .sem-budget-alert { border-color: #34573e; background: #162e20; color: #aee2ba; }
html.dark-mode .sem-budget-alert p { color: #a5bea9; }
html.dark-mode .sem-budget-alert.is-warning { border-color: #5b4a2e; background: #2a2417; color: #f0d49b; }
html.dark-mode .sem-budget-alert.is-warning p { color: #cfb98b; }
html.dark-mode .sem-budget-alert.is-danger { border-color: #60403d; background: #2b1d1c; color: #f0b5ae; }
html.dark-mode .sem-budget-alert.is-danger p { color: #d9aaa4; }
html.dark-mode .sem-category-budget-card, html.dark-mode .sem-insight { border-color: #2e4433; background: #101f15; }
html.dark-mode .sem-category-budget-card.is-warning, html.dark-mode .sem-insight-warning { border-color: #5a4a30; background: #282318; }
html.dark-mode .sem-category-budget-card.is-danger { border-color: #603e39; background: #291c1a; }
html.dark-mode .sem-category-budget-head strong, html.dark-mode .sem-category-budget-head > span, html.dark-mode .sem-insight-copy strong, html.dark-mode .sem-breakdown-top strong { color: #dcebdd; }
html.dark-mode .sem-insight-copy p, html.dark-mode .sem-breakdown-top, html.dark-mode .sem-empty-copy { color: #a1b4a4; }
html.dark-mode .sem-progress-track { background: #2a4130; }
html.dark-mode .sem-progress-fill { background: linear-gradient(90deg,#49b87a,#2e9d68); }
html.dark-mode .sem-secondary-button, html.dark-mode .sem-suggestion-button { border-color: #355943; color: #a8e0b7; background: #193324; }
html.dark-mode .sem-budget-panel h4 > span { color: #a5b8a6; background: #203327; }
html.dark-mode .sem-insight-note { border-color: #514a2f; background: #262317; color: #e4cb83; }
html.dark-mode .sem-insight-note p { color: #c9ba8f; }
html.dark-mode .sem-suggestion { color: #a9c3b0; }
html.dark-mode .sem-guide-content { background: #0e1912; }
html.dark-mode .sem-guide-grid article h2, html.dark-mode .sem-guide-grid article h3, html.dark-mode .sem-faq-section h2 { color: #e1eee2; }
html.dark-mode .sem-guide-grid article p, html.dark-mode .sem-guide-aside p, html.dark-mode .sem-guide-aside ol, html.dark-mode .sem-faq-section details p { color: #a4b6a6; }
html.dark-mode .sem-guide-aside { border-color: #2c4733; background: linear-gradient(150deg,#172b1d,#101b13); }
html.dark-mode .sem-guide-aside h3 { color: #d9eadc; }
html.dark-mode .sem-guide-aside p { border-color: #2b4331; }
html.dark-mode .sem-faq-section { background: #0b160f; }
html.dark-mode .sem-faq-section details { border-color: #2e4433; background: #14231a; }
html.dark-mode .sem-faq-section summary { color: #d9e9dc; }
html.dark-mode .sem-guide-aside a { color: #8fe0a8; }
@media (max-width: 1080px) {
  .sem-workbench { grid-template-columns: minmax(0,1fr); }
  .sem-quick-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sem-guide-grid { gap: 30px; }
}
@media (max-width: 800px) {
  .sem-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sem-action-row { align-items: flex-start; flex-direction: column; }
  .sem-action-buttons { justify-content: flex-start; }
  .sem-guide-grid { grid-template-columns: minmax(0,1fr); }
  .sem-guide-aside { position: static; }
}
@media (max-width: 560px) {
  .sem-section { padding: 48px 0; }
  .sem-toolbar { align-items: stretch; flex-direction: column; }
  .sem-market-control { align-items: flex-start; flex-direction: column; }
  .sem-market-control select { width: 100%; }
  .sem-summary-grid { gap: 8px; }
  .sem-stat-card { padding: 12px; border-radius: 12px; }
  .sem-stat-card strong { font-size: 1rem; }
  .sem-stat-label, .sem-stat-card > span:last-child { font-size: .64rem; }
  .sem-panel, .sem-quick-entry-panel { padding: 16px; border-radius: 14px; }
  .sem-category-form, .sem-quick-form { grid-template-columns: minmax(0,1fr); }
  .sem-quick-form > button, .sem-quick-form > .ds-expense-status { grid-column: auto; }
  .sem-category-form > .sem-secondary-button, .sem-category-form > .ds-expense-status { grid-column: auto; }
  .sem-action-buttons { width: 100%; flex-direction: column; align-items: stretch; }
  .sem-action-buttons > * { width: 100% !important; }
  .sem-hero-card { padding: 18px; }
  .sem-hero-visual { min-height: 320px; }
  .sem-hero-card-top { font-size: .59rem; }
  .sem-guide-content, .sem-faq-section { padding: 55px 0; }
}
@media print {
  body.sem-printing > * { visibility: hidden !important; }
  body.sem-printing .sem-section, body.sem-printing .sem-section * { visibility: visible !important; }
  body.sem-printing .sem-section { position: absolute; inset: 0 auto auto 0; width: 100%; padding: 10px 0; background: #fff !important; color: #172b20 !important; }
  body.sem-printing .sem-quick-entry-panel, body.sem-printing .sem-toolbar, body.sem-printing .sem-budget-panel, body.sem-printing .sem-action-row, body.sem-printing .sem-privacy-note, body.sem-printing .sem-remove-budget { display: none !important; }
  body.sem-printing .sem-workbench { display: block; }
  body.sem-printing .sem-insights-panel { border: 0; box-shadow: none; }
  body.sem-printing .sem-stat-card, body.sem-printing .sem-insight { break-inside: avoid; box-shadow: none; background: #fff !important; }
  body.sem-printing .sem-stat-card strong, body.sem-printing .sem-insight-copy strong, body.sem-printing .sem-breakdown-top strong { color: #172b20 !important; }
  body.sem-printing .sem-stat-label, body.sem-printing .sem-stat-card > span:last-child, body.sem-printing .sem-insight-copy p { color: #47574b !important; }
}


/* Shared-market control is shown on the standalone page; Daily Savings already has one at the top. */
body.daily-savings-page:not(.smart-expense-page) .sem-market-control { display: none; }
.ds-feature-more { margin: 10px 0 0; color: #718477; font-size: .68rem; line-height: 1.5; }
.ds-feature-more a { color: #167447; font-weight: 800; text-decoration: none; }
.ds-feature-more a:hover { text-decoration: underline; }
html.dark-mode .ds-feature-more { color: #a1b4a4; }
html.dark-mode .ds-feature-more a { color: #95dfaa; }