:root {
  color-scheme: light;
  --ink: #0f172a;
  --muted: #64748b;
  --petrol: #6366f1;
  --petrol-2: #4f46e5;
  --mint: #e0e7ff;
  --mint-strong: #a5b4fc;
  --paper: #f1f5f9;
  --line: #e2e8f0;
  --white: #fff;
  --peach: #fef3c7;
  --red: #ef4444;
  --green: #10b981;
  --yellow: #f59e0b;
  font-family: Inter, "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e2e8f0;
  --muted: #94a3b8;
  --petrol: #818cf8;
  --petrol-2: #a5b4fc;
  --mint: #252a4c;
  --mint-strong: #4b4b86;
  --paper: #0f172a;
  --line: #293449;
  --white: #172033;
  --peach: #44371f;
  --red: #f87171;
  --green: #34d399;
  --yellow: #fbbf24;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #818cf8; outline-offset: 2px; }
a { color: inherit; text-decoration: none; }
.brand { align-items: center; color: var(--ink); display: inline-flex; font-family: "Segoe UI", Arial, sans-serif; font-size: 25px; font-weight: 800; gap: 9px; letter-spacing: -1.2px; }
.brand-logo { background: white; border-radius: 10px; display: block; flex: 0 0 38px; height: 38px; object-fit: cover; width: 38px; }
.brand-light { color: white; }
.brand-light .brand-logo { background: white; }
.eyebrow { color: #829593; display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.65px; }
.button { align-items: center; border: 1px solid transparent; border-radius: 9px; display: inline-flex; font-size: 13px; font-weight: 700; gap: 14px; justify-content: center; min-height: 45px; padding: 0 19px; transition: background .18s, transform .18s, border-color .18s; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--petrol); color: white; }
.button-primary:hover { background: var(--petrol-2); }
.button-primary:disabled { cursor: wait; opacity: .7; transform: none; }
.button-outline { background: #fff; border-color: #d9e2df; color: var(--petrol); }
.button-outline:hover { background: #f3f8f6; border-color: #a9c7c0; }
.button-wide { width: 100%; }
.text-link { background: none; border: 0; color: #4f46e5; font-size: inherit; font-weight: 700; padding: 0; text-decoration: none; }
.text-link:hover { color: var(--petrol); text-decoration: underline; }
.field-label { color: #425554; display: block; font-size: 12px; font-weight: 700; margin: 16px 0 7px; }
.text-input, .input-wrap input, .money-input input { background: white; border: 1px solid #dce5e2; border-radius: 8px; color: var(--ink); min-height: 47px; padding: 0 13px; width: 100%; }
.text-input::placeholder, .input-wrap input::placeholder, .money-input input::placeholder { color: #aab5b3; }
.text-input:focus, .input-wrap input:focus, .money-input input:focus { border-color: #818cf8; outline: 3px solid #e0e7ff; }

/* Account entry */
/* Paleta de autenticacion, tomada del logotipo de Duvia. Tambien aplica a los dialogos de privacidad y terminos abiertos desde esta pantalla. */
.auth-shell, .auth-shell ~ .modal-backdrop {
  --auth-navy: #14204a;
  --auth-primary: #5231e8;
  --auth-primary-hover: #4122c9;
  --auth-violet: #7554fb;
  --auth-blue: #407bfd;
  --auth-purple: #914dfc;
  --auth-amber: #febf0e;
  --auth-orange: #ff7a1a;
  --auth-text: #2b3560;
  --auth-muted: #4f5878;
  --auth-subtle: #626b8c;
  --auth-border: #8f98bd;
  --auth-soft: #f1f2fc;
}
.auth-shell { background: white; color: var(--auth-navy); display: grid; grid-template-columns: minmax(360px, .92fr) 1.08fr; min-height: 100vh; }
.auth-visual { background: var(--auth-navy); color: white; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; overflow: hidden; padding: 44px clamp(34px, 6vw, 90px); position: relative; }
.auth-visual::before { background: radial-gradient(ellipse at 14% 95%, rgba(117, 84, 251, .55), transparent 50%), radial-gradient(ellipse at 92% 6%, rgba(64, 123, 253, .3), transparent 42%), radial-gradient(ellipse at 80% 102%, rgba(255, 122, 26, .2), transparent 36%); content: ""; inset: 0; pointer-events: none; position: absolute; }
.auth-visual > *:not(.visual-decoration) { position: relative; z-index: 2; }
.auth-promise { margin: auto 0; max-width: 490px; padding: 48px 0 78px; }
.auth-promise .eyebrow { color: #c4cbff; }
.auth-promise h1 { font-family: "Segoe UI", Arial, sans-serif; font-size: clamp(37px, 4.4vw, 60px); letter-spacing: -2.8px; line-height: 1.12; margin: 20px 0 18px; }
.auth-promise p { color: #e6e9fb; font-size: 15px; line-height: 1.8; margin: 0; max-width: 385px; }
.visual-bottom { align-items: center; color: #e6e9fb; display: flex; font-size: 13px; gap: 16px; line-height: 1.6; }
.orbit { align-items: center; border: 1px solid rgba(255,255,255,.56); border-radius: 50%; color: var(--auth-amber); display: inline-flex; font-size: 28px; height: 54px; justify-content: center; width: 54px; }
.visual-decoration { border: 1px solid rgba(255,255,255,.14); border-radius: 50%; height: 300px; position: absolute; right: -170px; top: 18%; width: 300px; }
.decoration-two { height: 440px; right: -240px; top: 9%; width: 440px; }
.auth-panel { display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: 38px clamp(34px, 6.8vw, 100px) 24px; }
.auth-top { align-items: center; display: flex; justify-content: flex-end; }
.secure-note { align-items: center; color: var(--auth-subtle); display: flex; font-size: 11px; gap: 8px; }
.secure-dot, .demo-pill i { background: #71ae92; border-radius: 50%; height: 7px; width: 7px; }
.auth-shell .secure-dot { background: var(--auth-violet); }
.mobile-brand { display: none; }
.auth-card { margin: 35px auto; max-width: 410px; width: 100%; }
.auth-heading .eyebrow { color: var(--auth-primary); margin-bottom: 12px; }
.auth-heading h2, .modal-heading h2 { font-family: "Segoe UI", Arial, sans-serif; font-size: 30px; letter-spacing: -1.1px; line-height: 1.2; margin: 0 0 9px; }
.auth-heading p { color: var(--auth-muted); font-size: 13px; margin: 0 0 21px; }
.mode-notice { align-items: center; background: var(--auth-soft); border-radius: 8px; color: var(--auth-muted); display: flex; font-size: 11px; gap: 9px; line-height: 1.5; margin-bottom: 17px; padding: 10px 12px; }
.notice-icon { align-items: center; color: var(--auth-primary); display: inline-flex; flex: 0 0 18px; font-size: 18px; height: 18px; justify-content: center; }
.auth-card .field-label { color: var(--auth-text); margin-top: 13px; }
.input-wrap { position: relative; }
.input-wrap input { padding-left: 41px; }
.input-icon { align-items: center; color: var(--auth-subtle); display: inline-flex; font-size: 17px; left: 14px; pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); }
.input-wrap:focus-within .input-icon { color: var(--auth-primary); }
.consent-check { align-items: flex-start; color: var(--auth-muted); display: flex; font-size: 11px; gap: 8px; line-height: 1.65; margin: 15px 0 2px; }
.consent-check input { accent-color: var(--auth-primary); flex: 0 0 auto; margin: 3px 0 0; }
.auth-card form > .button { margin-top: 17px; }
.auth-switch { color: var(--auth-muted); font-size: 12px; margin: 20px 0 0; text-align: center; }
.auth-switch .text-link { margin-left: 5px; }
.demo-button { margin-top: 19px; }
.demo-caption { color: var(--auth-subtle); font-size: 10px; margin: 8px 0 0; text-align: center; }
.legal-foot { color: var(--auth-subtle); font-size: 10px; line-height: 1.7; margin: 22px 0 0; text-align: center; }
.legal-foot .text-link { font-size: inherit; }
.auth-footer { color: var(--auth-subtle); display: flex; font-size: 10px; justify-content: space-between; }
.form-error, .form-success { border-radius: 7px; font-size: 12px; line-height: 1.5; margin: 12px 0 0; padding: 9px 11px; }
.form-error { background: #fff0ee; color: #a43d3d; }
.form-success { background: #ecf7ef; color: #387354; }
/* Componentes compartidos, con la paleta de marca solo dentro de la pantalla de autenticacion y sus dialogos */
.auth-shell .brand { color: var(--auth-navy); }
.auth-shell .brand-light { color: white; }
.auth-shell .button-primary { background: var(--auth-primary); }
.auth-shell .button-primary:hover { background: var(--auth-primary-hover); }
.auth-shell .button-primary:disabled { opacity: .85; }
.auth-shell .button-outline { background: white; border-color: var(--auth-border); color: var(--auth-primary); }
.auth-shell .button-outline:hover { background: var(--auth-soft); border-color: var(--auth-primary); }
.auth-shell .text-link, .auth-shell ~ .modal-backdrop .text-link { color: var(--auth-primary); }
.auth-shell .text-link:hover, .auth-shell ~ .modal-backdrop .text-link:hover { color: var(--auth-primary-hover); }
.auth-shell .input-wrap input { border-color: var(--auth-border); color: var(--auth-navy); }
.auth-shell .input-wrap input::placeholder { color: #6b7497; }
.auth-shell .input-wrap input:hover { border-color: var(--auth-subtle); }
.auth-shell .input-wrap input:focus { border-color: var(--auth-primary); outline: 3px solid rgba(117, 84, 251, .3); outline-offset: 0; }
.auth-shell button:focus-visible, .auth-shell a:focus-visible, .auth-shell ~ .modal-backdrop button:focus-visible { outline-color: var(--auth-violet); }
.auth-shell .form-error { background: #fff1f3; border: 1px solid #f6c3cb; color: #b3261e; }
.auth-shell .form-success { background: #e9f8f1; border: 1px solid #b4e3cf; color: #0d6446; }
.auth-shell ~ .modal-backdrop { background: rgba(20, 32, 74, .55); }
.auth-shell ~ .modal-backdrop .eyebrow { color: var(--auth-primary); }
.auth-shell ~ .modal-backdrop .modal-heading h2 { color: var(--auth-navy); }
.auth-shell ~ .modal-backdrop .info-copy { color: var(--auth-muted); }
.auth-shell ~ .modal-backdrop .close-button { background: var(--auth-soft); color: var(--auth-subtle); }
.auth-shell ~ .modal-backdrop .button-primary { background: var(--auth-primary); }
.auth-shell ~ .modal-backdrop .button-primary:hover { background: var(--auth-primary-hover); }

/* Setup */
.setup-shell { background: #fbfcfb; min-height: 100vh; }
.setup-header { align-items: center; border-bottom: 1px solid var(--line); display: flex; height: 78px; justify-content: space-between; padding: 0 clamp(24px, 6vw, 90px); }
.setup-step-label { color: #91a09d; font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.setup-step-label span { color: #4c716b; margin-left: 10px; }
.setup-header > .text-link { font-size: 12px; }
.setup-content { margin: 0 auto; max-width: 500px; padding: 55px 22px 40px; }
.setup-progress { display: flex; gap: 7px; margin-bottom: 40px; }
.setup-progress span { background: #e7edeb; border-radius: 8px; height: 4px; width: 40px; }
.setup-progress .active { background: #386d65; width: 80px; }
.setup-progress .complete { background: #96c8bc; }
.setup-content h1 { font-family: "Segoe UI", Arial, sans-serif; font-size: 39px; letter-spacing: -2px; line-height: 1.15; margin: 13px 0 12px; }
.setup-content h1 em { color: #6f9c92; font-style: normal; }
.setup-intro { color: #7c8987; font-size: 13px; line-height: 1.7; margin: 0 0 22px; max-width: 415px; }
.setup-form .field-label { margin-top: 15px; }
.setup-form > .button { margin-top: 23px; }
.money-input { position: relative; }
.money-input > span { color: #687b77; font-size: 13px; left: 13px; position: absolute; top: 15px; }
.money-input input { padding-left: 38px; }
.fixed-onboarding-form > .button { margin-top: 18px; }
.setup-cost-list { margin-top: 16px; }
.setup-cost { align-items: center; border-bottom: 1px solid var(--line); display: flex; font-size: 12px; gap: 8px; padding: 11px 3px; }
.setup-cost span { flex: 1; }
.setup-cost strong { font-size: 12px; }
.setup-cost button { background: none; border: 0; color: #92a09c; font-size: 20px; }
.quiet-empty { background: #f2f5f4; border-radius: 8px; color: #87938f; font-size: 11px; margin-top: 16px; padding: 13px; text-align: center; }
.skip-link { background: none; border: 0; color: #71817e; display: block; font-size: 11px; margin: 14px auto 0; padding: 5px; }
.skip-link:hover { color: var(--petrol); text-decoration: underline; }
.privacy-note { align-items: center; color: #8c9996; display: flex; font-size: 10px; gap: 9px; line-height: 1.5; margin-top: 28px; }
.privacy-note span { color: #5d887f; font-size: 17px; }

/* Main dashboard */
.app-layout { min-height: 100vh; }
.sidebar { background: #0f172a; bottom: 0; color: #d5dcef; display: flex; flex-direction: column; left: 0; padding: 29px 18px 17px; position: fixed; top: 0; width: 240px; z-index: 5; }
.sidebar-brand { margin: 0 12px 54px; }
.side-caption { color: #77918b; font-size: 9px; font-weight: 700; letter-spacing: 1.55px; margin: 0 12px 13px; }
.side-nav { display: grid; gap: 5px; }
.nav-item { align-items: center; background: transparent; border: 0; border-radius: 7px; color: #b1c4bf; display: flex; font-size: 12px; gap: 13px; min-height: 42px; padding: 0 12px; text-align: left; width: 100%; }
.nav-item:hover { background: rgba(255,255,255,.07); color: white; }
.nav-item.selected { background: rgba(99,102,241,.24); color: white; }
.nav-icon { align-items: center; color: #91b2aa; display: inline-flex; font-size: 17px; justify-content: center; width: 19px; }
.selected .nav-icon { color: #b8ddd4; }
.nav-count { background: #54746d; border-radius: 10px; font-size: 10px; margin-left: auto; padding: 2px 7px; }
.side-bottom { margin-top: auto; }
.side-bottom > .nav-item { margin-bottom: 5px; }
.sidebar-tip { background: #18233a; border: 1px solid rgba(255,255,255,.06); border-radius: 9px; margin: 15px 2px 21px; padding: 14px; }
.tip-spark { color: #b8d7ce; display: block; font-size: 18px; margin-bottom: 8px; }
.sidebar-tip strong { color: #e2ece9; font-size: 11px; }
.sidebar-tip p { color: #9fb6b0; font-size: 10px; line-height: 1.6; margin: 6px 0 0; }
.profile-chip { align-items: center; background: transparent; border: 0; border-top: 1px solid #293449; color: white; display: flex; gap: 10px; padding: 15px 2px 2px; text-align: left; width: 100%; }
.avatar { align-items: center; background: #b6d8d0; border-radius: 50%; color: #193d39; display: inline-flex; flex: 0 0 32px; font-size: 12px; font-weight: 700; height: 32px; justify-content: center; width: 32px; }
.profile-words { display: grid; gap: 3px; min-width: 0; }
.profile-words strong { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-words small { color: #91a8a2; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout-mark { color: #91a8a2; font-size: 14px; margin-left: auto; transform: rotate(45deg); }
.main-content { margin-left: 240px; min-height: 100vh; }
.topbar { align-items: center; background: rgba(255,255,255,.9); border-bottom: 1px solid #edf0ef; display: flex; height: 66px; justify-content: space-between; padding: 0 clamp(22px, 4vw, 55px); }
.breadcrumbs { color: #98a3a1; font-size: 11px; font-weight: 600; }
.breadcrumbs span { color: #c8d0ce; margin: 0 8px; }
.topbar-right { align-items: center; display: flex; gap: 19px; }
.theme-toggle { align-items: center; background: #dce9e5; border: 0; border-radius: 20px; display: inline-flex; height: 25px; padding: 3px; width: 45px; }
.theme-toggle-thumb { align-items: center; background: white; border-radius: 50%; color: #536c64; display: inline-flex; font-size: 13px; height: 19px; justify-content: center; transition: transform .18s; width: 19px; }
.theme-toggle.is-dark { background: #31544d; }
.theme-toggle.is-dark .theme-toggle-thumb { background: #d8e9e4; transform: translateX(20px); }
.today-label { color: #71807d; font-size: 11px; }
.avatar-top { flex-basis: 30px; height: 30px; width: 30px; }
.demo-pill { align-items: center; background: #f2eee5; border-radius: 14px; color: #88774d; display: inline-flex; font-size: 9px; gap: 6px; padding: 6px 9px; }
.demo-pill i { background: #d6b96f; height: 6px; width: 6px; }
.mobile-menu { background: none; border: 0; color: var(--petrol); display: none; font-size: 20px; }
.sidebar-backdrop { display: none; }
.page-content { margin: 0 auto; max-width: 1430px; padding: 41px clamp(22px, 4vw, 55px) 45px; }
.welcome-row, .page-heading { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 26px; }
.welcome-row h1, .page-heading h1 { font-family: "Segoe UI", Arial, sans-serif; font-size: 32px; letter-spacing: -1.4px; margin: 9px 0 5px; }
.welcome-row p, .page-heading p { color: #879390; font-size: 12px; margin: 0; }
.welcome-row .eyebrow, .page-heading .eyebrow { text-transform: uppercase; }
.heading-actions { align-items: center; display: flex; gap: 9px; }
.month-picker-label { color: #76837f; display: grid; font-size: 10px; gap: 6px; min-width: 185px; }
.month-picker-label .text-input { min-height: 40px; text-transform: capitalize; }
.wave { color: #7c3aed; font-size: 22px; vertical-align: 4px; }
.add-main { margin-bottom: 2px; }
.summary-grid { display: grid; gap: 13px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.summary-card { background: #fff; border: 1px solid #e8edf4; border-left: 3px solid #cbd5e1; border-radius: 13px; box-shadow: 0 3px 12px rgba(15,23,42,.035); min-height: 139px; min-width: 0; padding: 17px 17px 15px; }
.summary-mint { border-left-color: #10b981; }
.summary-peach { border-left-color: #ef4444; }
.summary-dark { border-left-color: #6366f1; }
.summary-credit { border-left-color: #7c3aed; }
.summary-top { align-items: center; color: #64748b; display: flex; font-size: 11px; font-weight: 600; gap: 5px; justify-content: space-between; }
.summary-icon { align-items: center; background: #ecfdf5; border-radius: 9px; color: #059669; display: inline-flex; flex: 0 0 32px; font-size: 16px; height: 32px; justify-content: center; width: 32px; }
.summary-peach .summary-icon { background: #fff1f2; color: #e11d48; }
.summary-dark .summary-icon { background: #eef2ff; color: #4f46e5; }
.summary-credit .summary-icon { background: #f5f3ff; color: #7c3aed; }
.summary-value { color: #0f172a; display: block; font-family: "Segoe UI", Arial, sans-serif; font-size: clamp(22px, 2.25vw, 30px); letter-spacing: -.8px; line-height: 1.15; margin: 15px 0 7px; overflow-wrap: anywhere; }
.summary-mint .summary-value { color: #059669; }
.summary-peach .summary-value { color: #e11d48; }
.summary-card small { color: #94a3b8; font-size: 10px; }
.dashboard-visual-grid, .dashboard-detail-grid { display: grid; gap: 16px; margin-top: 17px; }
.dashboard-visual-grid { grid-template-columns: minmax(0, 1.45fr) minmax(330px, .95fr); }
.dashboard-detail-grid { grid-template-columns: minmax(0, 1.35fr) minmax(310px, .9fr); }
.surface { background: #fff; border: 1px solid #e8edf4; border-radius: 13px; box-shadow: 0 3px 12px rgba(15,23,42,.035); }
.overview-card, .quick-card, .recent-card, .category-card { min-width: 0; padding: 20px 21px; }
.section-heading { align-items: center; display: flex; justify-content: space-between; }
.section-heading .eyebrow { margin-bottom: 6px; }
.section-heading h2 { font-family: "Segoe UI", Arial, sans-serif; font-size: 16px; letter-spacing: -.4px; margin: 0; }
.month-tag { background: #f1f5f9; border-radius: 20px; color: #64748b; font-size: 10px; font-weight: 600; padding: 7px 10px; }
.flow-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 20px 0 11px 72px; }
.flow-legend span { align-items: center; color: #64748b; display: inline-flex; font-size: 10px; font-weight: 600; gap: 7px; }
.flow-legend i { border-radius: 3px; height: 9px; width: 9px; }
.legend-income { background: #10b981; }.legend-expense { background: #ef4444; }
.flow-chart-wrap { display: grid; gap: 10px; grid-template-columns: 62px minmax(0, 1fr); height: 222px; margin-top: 6px; }
.flow-axis { align-items: flex-end; color: #94a3b8; display: flex; flex-direction: column; font-size: 9px; justify-content: space-between; padding: 0 0 25px; white-space: nowrap; }
.flow-periods { background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(50% - .5px), #edf1f6 calc(50% - .5px), #edf1f6 50%, transparent calc(50% + .5px), transparent calc(100% - 1px), #edf1f6 calc(100% - 1px)); display: grid; gap: 6px; grid-template-columns: repeat(var(--period-count), minmax(0, 1fr)); min-width: 0; }
.flow-period { align-items: center; display: grid; grid-template-rows: minmax(0, 1fr) 25px; min-width: 0; }
.flow-bars { align-items: flex-end; display: flex; gap: clamp(3px, .8vw, 9px); height: 100%; justify-content: center; min-width: 0; }
.flow-bar { border-radius: 5px 5px 2px 2px; height: var(--bar-height); max-width: 25px; min-height: 0; transition: height .25s ease; width: min(28%, 22px); }
.flow-bar-income { background: linear-gradient(180deg, #34d399, #10b981); }
.flow-bar-expense { background: linear-gradient(180deg, #fb7185, #ef4444); }
.flow-period-label { align-self: end; color: #64748b; font-size: 9px; overflow: hidden; padding-top: 7px; text-align: center; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.chart-empty { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 240px; padding: 18px; text-align: center; }
.chart-empty .empty-illustration { background: #eef2ff; color: #6366f1; margin-bottom: 12px; }
.chart-empty > strong { color: #334155; font-size: 13px; }
.chart-empty p { color: #64748b; font-size: 11px; line-height: 1.55; margin: 7px 0 12px; max-width: 270px; }
.chart-empty .text-link { font-size: 11px; }
.category-breakdown { align-items: center; display: flex; gap: clamp(17px, 2vw, 28px); justify-content: center; min-height: 260px; padding: 15px 0 2px; }
.category-donut { align-items: center; border-radius: 50%; display: flex; flex: 0 0 176px; height: 176px; justify-content: center; position: relative; width: 176px; }
.category-donut::before { background: #fff; border-radius: inherit; content: ""; height: 68%; position: absolute; width: 68%; }
.donut-center { align-items: center; display: flex; flex-direction: column; max-width: 110px; position: relative; text-align: center; }
.donut-center strong { color: #0f172a; font-size: 16px; letter-spacing: -.4px; overflow-wrap: anywhere; }
.donut-center span { color: #94a3b8; font-size: 9px; margin-top: 4px; }
.category-legend { display: grid; gap: 11px; list-style: none; margin: 0; min-width: 0; padding: 0; width: min(100%, 220px); }
.category-legend li { align-items: center; display: grid; gap: 3px 7px; grid-template-columns: 9px minmax(0, 1fr) auto; min-width: 0; }
.category-swatch { background: var(--category-color); border-radius: 3px; grid-row: span 2; height: 9px; width: 9px; }
.category-name { color: #475569; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-legend li > strong { color: #334155; font-size: 10px; }
.category-legend li > small { color: #94a3b8; font-size: 9px; grid-column: 2 / -1; }
.icon-button { align-items: center; background: #f4f7f6; border: 0; border-radius: 7px; color: #71827d; display: inline-flex; height: 30px; justify-content: center; width: 30px; }
.icon-button:hover { background: #e9f1ef; color: var(--petrol); }
.commitment-total { border-bottom: 1px solid #edf1f6; display: flex; flex-direction: column; gap: 3px; padding: 17px 0 13px; }
.commitment-total strong { color: #0f172a; font-family: "Segoe UI", Arial, sans-serif; font-size: 25px; letter-spacing: -.7px; }
.commitment-total span { color: #64748b; font-size: 10px; }
.mini-list { border-bottom: 1px solid #edf1f6; padding: 8px 0; }
.mini-list > div { align-items: center; color: #687875; display: flex; font-size: 10px; gap: 8px; padding: 8px 0; }
.mini-dot { background: #10b981; border-radius: 50%; flex: 0 0 7px; height: 7px; }
.mini-list strong { color: #334155; font-size: 10px; margin-left: auto; white-space: nowrap; }
.commitment-name { display: grid; gap: 3px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commitment-name small { color: #94a3b8; font-size: 9px; }
.empty-inline { border-bottom: 1px solid #edf1f6; color: #64748b; display: grid; font-size: 10px; gap: 8px; padding: 15px 0; }
.empty-inline .text-link { font-size: 10px; justify-self: start; }
.month-jump { align-items: center; display: flex; gap: 10px; padding-top: 15px; }
.month-jump-icon { align-items: center; background: #eef2ff; border-radius: 9px; color: #6366f1; display: inline-flex; flex: 0 0 34px; font-size: 15px; height: 34px; justify-content: center; }
.month-jump > span:nth-child(2) { display: grid; gap: 4px; }
.month-jump strong { color: #334155; font-size: 10px; }
.month-jump small { color: #94a3b8; font-size: 9px; }
.month-jump button { background: none; border: 0; color: #6366f1; font-size: 19px; margin-left: auto; }
.dashboard-reminders { align-items: flex-start; background: #fffbeb; border: 1px solid #fde68a; border-radius: 9px; display: flex; gap: 9px; margin-top: 12px; padding: 10px; }
.dashboard-reminders .reminder-icon { background: #fef3c7; color: #b45309; flex-basis: 30px; height: 30px; }
.dashboard-reminders > div { display: grid; gap: 3px; min-width: 0; }
.dashboard-reminders strong { color: #92400e; font-size: 10px; }
.dashboard-reminders small { color: #a16207; font-size: 9px; line-height: 1.5; }
.dashboard-credit-card { margin-top: 17px; padding: 17px 21px; }
.dashboard-credit-card .section-heading { gap: 10px; }
.dashboard-credit-card .section-heading .text-link { font-size: 10px; }
.dashboard-credit-total { align-items: center; color: #64748b; display: flex; font-size: 10px; justify-content: space-between; margin-top: 12px; }
.dashboard-credit-total strong { color: #7c3aed; font-family: "Segoe UI", Arial, sans-serif; font-size: 20px; }
.dashboard-credit-total span { margin-left: auto; }
.dashboard-credit-list { border-top: 1px solid #edf1f6; display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 12px; padding-top: 12px; }
.dashboard-credit-list > div { align-items: center; color: #6f7e79; display: flex; font-size: 10px; gap: 8px; min-width: 160px; }
.dashboard-credit-list strong { color: #475569; margin-left: auto; }
.dashboard-credit-empty { color: #94a3b8; font-size: 10px; margin: 12px 0 0; }
.payment-reminder-banner { align-items: center; background: #f3f4e9; border: 1px solid #e8e9d8; border-radius: 9px; display: flex; gap: 13px; margin-top: 15px; padding: 14px 17px; }
.reminder-icon { align-items: center; background: #fff; border-radius: 8px; color: #88895e; display: inline-flex; flex: 0 0 34px; font-size: 17px; height: 34px; justify-content: center; }
.payment-reminder-banner > div { min-width: 0; }
.payment-reminder-banner strong { color: #595b41; font-size: 11px; }
.payment-reminder-banner p { color: #89896d; font-size: 10px; line-height: 1.55; margin: 4px 0 0; }
.payment-reminder-banner > .text-link { font-size: 10px; margin-left: auto; white-space: nowrap; }
.recent-card { margin-top: 0; }
.recent-card .section-heading, .category-card .section-heading, .overview-card .section-heading { margin-bottom: 14px; }
.recent-card .text-link { font-size: 10px; }
.dashboard-movement-list { display: grid; }
.dashboard-movement-row { align-items: center; border-top: 1px solid #f1f5f9; display: grid; gap: 10px; grid-template-columns: 34px minmax(0, 1fr) auto auto; min-height: 59px; }
.movement-kind { align-items: center; border-radius: 10px; display: inline-flex; font-size: 15px; height: 34px; justify-content: center; width: 34px; }
.movement-kind-income { background: #ecfdf5; color: #059669; }
.movement-kind-expense { background: #fff1f2; color: #e11d48; }
.dashboard-movement-name { display: grid; gap: 4px; min-width: 0; }
.dashboard-movement-name strong { color: #334155; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-movement-name small { color: #94a3b8; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-movement-row time { color: #94a3b8; font-size: 9px; white-space: nowrap; }
.dashboard-movement-amount { color: #e11d48; font-size: 10px; text-align: right; white-space: nowrap; }
.dashboard-movement-amount.amount-income { color: #059669; }
.transaction-table { width: 100%; }
.table-head, .transaction-row { align-items: center; display: grid; gap: 12px; grid-template-columns: minmax(135px, 1.4fr) .8fr .7fr .8fr auto; }
.table-head { border-bottom: 1px solid #eff2f1; color: #9aa5a2; font-size: 8px; font-weight: 700; letter-spacing: .8px; padding: 8px 0 10px; }
.transaction-row { border-bottom: 1px solid #f1f3f2; color: #657571; font-size: 10px; min-height: 53px; }
.transaction-row:last-child { border-bottom: 0; }
.transaction-name { align-items: center; display: flex; gap: 9px; min-width: 0; }
.transaction-name > span { display: grid; gap: 3px; min-width: 0; }
.transaction-name strong { color: #42534f; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transaction-name small { color: #a0aaa7; font-size: 9px; }
.entry-income, .entry-expense { align-items: center; border-radius: 7px; display: inline-flex; flex: 0 0 29px; font-size: 13px; font-style: normal; height: 29px; justify-content: center; }
.entry-income { background: #e9f4ef; color: #579278; }.entry-expense { background: #f7eee9; color: #b28368; }
.category-cell, .date-cell { color: #86928e; font-size: 9px; }
.amount-cell { color: #5d6966; font-size: 10px; text-align: right; }
.amount-cell.positive { color: #4a9473; }
.align-right { text-align: right; }
.privacy-banner { align-items: center; background: #eff4f1; border-radius: 8px; display: flex; gap: 11px; margin-top: 16px; padding: 12px 15px; }
.privacy-banner-icon { color: #638d7f; font-size: 17px; }
.privacy-banner > span:last-child { display: grid; gap: 3px; }
.privacy-banner strong { color: #5e716a; font-size: 10px; }
.privacy-banner small { color: #879591; font-size: 9px; }
.empty-state { align-items: center; display: flex; flex-direction: column; padding: 35px 15px 30px; text-align: center; }
.empty-illustration { align-items: center; background: #eef5f2; border-radius: 50%; color: #83aa9e; display: flex; font-size: 28px; height: 52px; justify-content: center; margin-bottom: 13px; width: 52px; }
.empty-state > strong { color: #42534f; font-family: "Segoe UI", Arial, sans-serif; font-size: 13px; }
.empty-state p { color: #929d9a; font-size: 10px; margin: 6px 0 14px; }
.empty-state .button { min-height: 36px; }
.page-heading { margin-bottom: 22px; }
.page-heading .button { flex: 0 0 auto; }
.list-surface { padding: 3px 22px; }
.list-surface .empty-state { padding: 53px 15px; }
.simple-row { align-items: center; border-bottom: 1px solid #eef1f0; display: flex; gap: 13px; min-height: 69px; }
.simple-row:last-child { border-bottom: 0; }
.simple-icon { align-items: center; background: #eaf3f0; border-radius: 8px; color: #6a998d; display: inline-flex; flex: 0 0 35px; font-size: 16px; height: 35px; justify-content: center; }
.simple-name { display: grid; gap: 4px; min-width: 0; }
.simple-name strong { color: #455651; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.simple-name small { color: #9aa5a2; font-size: 9px; }
.simple-amount { color: #43534f; font-size: 12px; margin-left: auto; }
.payment-status { border-radius: 12px; font-size: 9px; padding: 5px 8px; white-space: nowrap; }
.status-paid { background: #e8f3ed; color: #4a8769; }
.status-pending { background: #f5f0e4; color: #927a45; }
.small-button { font-size: 9px; min-height: 31px; padding: 0 10px; white-space: nowrap; }
.field-hint { color: #899691; font-size: 10px; line-height: 1.5; margin: 8px 0; }
.month-history-card { margin-top: 18px; padding: 20px 21px; }
.month-history-card .section-heading { margin-bottom: 13px; }
.month-credit-note { margin: 0 0 10px; }
.credit-overview { margin-bottom: 15px; }
.credit-total-card { align-items: center; background: #e9f0ee; border: 1px solid #dfe9e6; border-radius: 10px; display: flex; gap: 13px; padding: 17px 20px; }
.credit-total-card > span:nth-child(2) { display: grid; gap: 4px; }
.credit-total-card small { color: #7e918c; font-size: 8px; font-weight: 700; letter-spacing: 1px; }
.credit-total-card strong { color: #254742; font-family: "Segoe UI", Arial, sans-serif; font-size: 22px; }
.credit-source-grid { display: grid; gap: 13px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.credit-source-card { padding: 16px; }
.credit-source-title { align-items: center; display: flex; gap: 10px; }
.credit-source-title > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.credit-source-title strong { color: #42534f; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.credit-source-title small { color: #899591; font-size: 9px; }
.credit-source-title .delete-row { margin-left: auto; }
.credit-source-stats { border-top: 1px solid #eef1f0; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 15px; padding-top: 13px; }
.credit-source-stats > div { display: grid; gap: 5px; }
.credit-source-stats small { color: #9aa5a1; font-size: 8px; font-weight: 700; letter-spacing: .6px; }
.credit-source-stats strong { color: #3d514b; font-size: 13px; }
.credit-source-card > p { color: #98a29f; font-size: 9px; margin: 12px 0 0; }
.credit-payment-button { margin-top: 13px; }
.credit-empty { align-items: center; display: flex; flex-direction: column; grid-column: 1 / -1; padding: 28px 16px; text-align: center; }
.credit-empty > strong { color: #42534f; font-size: 12px; }
.credit-empty > p { color: #929d9a; font-size: 10px; margin: 7px 0 13px; }
.credit-empty .empty-illustration { height: 43px; width: 43px; }
.credit-purchases { margin-top: 16px; }
.credit-purchases .section-heading { margin-bottom: 12px; }
.purchase-row { gap: 11px; }
.purchase-installment { color: #60726d; display: grid; font-size: 10px; gap: 3px; white-space: nowrap; }
.purchase-installment small { color: #9aa4a1; font-size: 8px; }
.modal-intro { color: #7b8985; font-size: 11px; line-height: 1.6; margin: -6px 0 15px; }
.payment-prompt-list { display: grid; gap: 8px; }
.payment-prompt-row { align-items: center; background: #f7f9f8; border: 1px solid #edf1ef; border-radius: 8px; display: flex; gap: 10px; justify-content: space-between; padding: 10px; }
.payment-prompt-row > span { display: grid; gap: 4px; min-width: 0; }
.payment-prompt-row strong { color: #42534f; font-size: 11px; }
.payment-prompt-row small { color: #899591; font-size: 9px; }
.payment-prompt-row select { max-width: 150px; min-height: 36px; padding: 0 8px; }
.delete-row { background: transparent; border: 0; color: #a2aeaa; font-size: 18px; line-height: 1; padding: 5px 3px; }
.delete-row:hover { color: var(--red); }
.fixed-total-card { align-items: center; background: #e7f1ed; border: 1px solid #dae9e3; border-radius: 10px; display: flex; gap: 13px; margin-bottom: 15px; padding: 19px 22px; }
.total-symbol { align-items: center; background: rgba(255,255,255,.7); border-radius: 9px; color: #598679; display: inline-flex; font-size: 19px; height: 43px; justify-content: center; width: 43px; }
.fixed-total-card > span:nth-child(2) { display: grid; gap: 3px; }
.fixed-total-card small { color: #7d9690; font-size: 8px; font-weight: 700; letter-spacing: 1px; }
.fixed-total-card strong { color: #254742; font-family: "Segoe UI", Arial, sans-serif; font-size: 20px; }
.total-note { color: #7d928c; font-size: 10px; margin-left: auto; }
.soft-note { color: #929d99; font-size: 10px; line-height: 1.6; margin: 14px 4px; }
.settings-surface { margin-bottom: 15px; padding: 23px; }
.settings-surface .section-heading { margin-bottom: 15px; }
.settings-fields { display: grid; gap: 15px; grid-template-columns: 1fr 1fr; max-width: 690px; }
.settings-fields > div:last-child { grid-column: 1 / -1; max-width: 330px; }
.settings-fields .field-label { margin-top: 0; }
.settings-form > .button { margin-top: 20px; }
.data-settings { align-items: center; display: flex; justify-content: space-between; }
.data-settings h2 { font-family: "Segoe UI", Arial, sans-serif; font-size: 15px; margin: 6px 0; }
.data-settings p { color: #8b9793; font-size: 10px; line-height: 1.6; margin: 0; }
.support-surface { align-items: flex-start; display: flex; flex-direction: column; gap: 15px; max-width: 720px; padding: clamp(24px, 5vw, 46px); }
.support-icon { align-items: center; background: #eef2ff; border-radius: 15px; color: #6366f1; display: inline-flex; font-size: 28px; height: 58px; justify-content: center; width: 58px; }
.support-status { background: #fef3c7; border-radius: 20px; color: #92400e; font-size: 11px; font-weight: 700; padding: 7px 12px; }
.support-surface h2 { color: var(--ink); font-size: clamp(20px, 3vw, 27px); margin: 0; }
.support-surface p { color: var(--muted); font-size: 14px; line-height: 1.75; margin: 0 0 5px; max-width: 590px; }
.support-surface .button:disabled { cursor: not-allowed; opacity: .55; }
.transaction-summary, .credit-summary { margin-bottom: 17px; }
.transaction-surface { padding-bottom: 16px; padding-top: 18px; }
.transaction-filters { align-items: end; display: grid; gap: 11px; grid-template-columns: minmax(190px, 1.5fr) repeat(3, minmax(125px, 1fr)); }
.transaction-filters label { display: grid; gap: 6px; min-width: 0; }
.transaction-filters label > span { color: #73817d; font-size: 9px; font-weight: 700; letter-spacing: .4px; }
.transaction-filters .text-input { min-height: 39px; }
.transaction-results-heading { border-bottom: 1px solid #eef1f0; margin-top: 20px; padding-bottom: 13px; }
.transaction-results-heading .eyebrow { margin-bottom: 5px; }
.transaction-results-heading h2 { font-size: 14px; }
.transaction-results-heading + .transaction-table { margin-top: 3px; }
.transaction-row { grid-template-columns: minmax(135px, 1.4fr) .8fr .7fr .8fr auto; }
.fixed-summary-grid { display: grid; gap: 13px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; }
.fixed-summary-card { background: #fff; border: 1px solid #e8edf4; border-radius: 13px; box-shadow: 0 3px 12px rgba(15,23,42,.035); display: grid; gap: 8px; min-width: 0; padding: 17px; }
.fixed-summary-card > .summary-icon { margin-bottom: 3px; }
.fixed-summary-card > small { color: #778680; font-size: 9px; font-weight: 700; letter-spacing: .6px; }
.fixed-summary-card > strong { color: #1f3531; font-size: clamp(20px, 2.2vw, 27px); letter-spacing: -.6px; overflow-wrap: anywhere; }
.fixed-summary-card > span:last-child { color: #86938f; font-size: 9px; }
.fixed-summary-primary { background: #f1f7f4; border-color: #dcebe4; }
.fixed-summary-primary > strong { color: #23735c; }
.fixed-summary-count { color: #9aa6a1; font-size: 15px; }
.fixed-list-surface { padding-top: 18px; }
.fixed-list-surface > .section-heading { margin-bottom: 5px; }
.fixed-expense-row { display: grid; gap: 12px; grid-template-columns: 35px minmax(140px, 1fr) auto minmax(115px, auto) auto auto auto; padding: 8px 0; }
.fixed-expense-amount { color: #344a44; display: grid; font-size: 11px; gap: 3px; white-space: nowrap; }
.fixed-expense-amount small { color: #9aa5a2; font-size: 8px; font-weight: 400; }
.fixed-due-date { color: #7c8985; font-size: 9px; white-space: nowrap; }
.month-comparison-card { margin-top: 17px; padding: 20px 21px 14px; }
.month-comparison-legend { display: flex; gap: 15px; margin: 15px 0 8px; }
.month-comparison-legend > span { align-items: center; color: #71807b; display: inline-flex; font-size: 9px; gap: 6px; }
.month-comparison-legend i { border-radius: 3px; height: 9px; width: 9px; }
.month-comparison-chart { align-items: stretch; border-bottom: 1px solid #edf1f6; display: grid; gap: 8px; grid-template-columns: repeat(var(--period-count), minmax(0, 1fr)); height: 145px; padding: 8px 3px 0; }
.month-comparison-period { display: grid; grid-template-rows: minmax(0, 1fr) 28px; min-width: 0; }
.month-comparison-bars { align-items: flex-end; border-bottom: 1px solid #edf1f6; display: flex; gap: 4px; justify-content: center; min-height: 0; }
.month-comparison-bar { border-radius: 4px 4px 0 0; height: var(--bar-height); max-width: 26px; min-height: 0; transition: height .2s ease; width: 30%; }
.month-comparison-income { background: #10b981; }
.month-comparison-expense { background: #f87171; }
.month-comparison-period.is-selected .month-comparison-bars { border-bottom: 2px solid #6366f1; }
.month-comparison-label { background: transparent; border: 0; color: #75827e; font-size: 9px; text-transform: capitalize; }
.month-comparison-period.is-selected .month-comparison-label { color: #4f46e5; font-weight: 700; }
.month-comparison-card .soft-note { margin: 10px 2px 0; }
.credit-summary .summary-card { min-height: 127px; }
.credit-intro-note { margin: 0 3px 19px; }
.credit-section-heading { margin: 0 0 11px; }
.credit-section-heading h2 { font-size: 16px; }
.credit-source-card { padding: 18px; }
.credit-limit-display { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 17px; }
.credit-limit-display > div { display: grid; gap: 5px; min-width: 0; }
.credit-limit-display span, .credit-meter > div:first-child span { color: #85928e; font-size: 9px; }
.credit-limit-display strong { color: #344a44; font-size: 13px; overflow-wrap: anywhere; }
.credit-meter { margin-top: 14px; }
.credit-meter > div:first-child { align-items: center; display: flex; justify-content: space-between; }
.credit-meter > div:first-child strong { color: #5e6c67; font-size: 10px; }
.credit-meter-track { background: #edf1f0; border-radius: 8px; height: 7px; margin-top: 8px; overflow: hidden; }
.credit-meter-track > span { background: linear-gradient(90deg, #818cf8, #6366f1); border-radius: inherit; display: block; height: 100%; }
.credit-meter > small, .credit-meter-note { color: #9aa5a1; display: block; font-size: 8px; margin: 6px 0 0; }
.credit-source-stats { margin-top: 13px; }
.credit-source-stats strong { font-size: 11px; }
.credit-payment-history { margin-top: 16px; padding: 20px 21px; }
.credit-payment-history .section-heading { margin-bottom: 8px; }
.credit-payment-history .simple-row { min-height: 61px; }
.credit-payment-history .simple-amount { color: #4c8a70; }
.credit-sync-label { color: #71807b; font-size: 9px; margin-left: auto; text-align: right; }
.appearance-settings { align-items: center; display: flex; justify-content: space-between; }
.appearance-settings h2, .settings-surface .section-heading h2 { color: #344a44; font-family: "Segoe UI", Arial, sans-serif; font-size: 15px; margin: 6px 0; }
.appearance-settings p, .settings-surface .section-heading p { color: #87938f; font-size: 10px; line-height: 1.5; margin: 4px 0 0; }
.appearance-control { align-items: center; display: flex; gap: 13px; }
.appearance-mode { color: #64736e; font-size: 10px; }
.support-surface { align-items: stretch; background: linear-gradient(120deg, #fff 0%, #f7f8ff 58%, #eef0ff 100%); flex-direction: row; justify-content: space-between; max-width: 900px; min-height: 300px; overflow: hidden; padding: 0; }
.support-content { align-items: flex-start; display: flex; flex: 1 1 60%; flex-direction: column; gap: 15px; padding: clamp(24px, 5vw, 46px); }
.support-content h2 { max-width: 470px; }
.support-content p { max-width: 470px; }
.support-aside { align-items: flex-start; background: linear-gradient(145deg, #6d70ed, #5148bb); color: #fff; display: flex; flex: 0 1 280px; flex-direction: column; justify-content: center; min-width: 210px; padding: 30px; position: relative; }
.support-aside > span { font-size: 9px; font-weight: 700; letter-spacing: 2px; opacity: .7; }
.support-aside > strong { font-size: clamp(21px, 3vw, 31px); line-height: 1.25; margin-top: 21px; }
.support-aside > i { bottom: 9px; font-size: 120px; font-style: normal; opacity: .12; position: absolute; right: 12px; }
.support-note-card { align-items: flex-start; display: flex; gap: 13px; margin-top: 15px; max-width: 900px; padding: 17px 20px; }
.support-note-icon { align-items: center; background: #f2f1ff; border-radius: 9px; color: #6562d8; display: inline-flex; flex: 0 0 34px; height: 34px; justify-content: center; }
.support-note-card strong { color: #3e514a; font-size: 11px; }
.support-note-card p { color: #87938f; font-size: 10px; line-height: 1.5; margin: 5px 0 0; }
.support-feedback { display: grid; gap: 18px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); margin-top: 16px; max-width: 900px; padding: 22px; }
.support-feedback h2 { font-size: 18px; margin: 12px 0 7px; }
.support-feedback > div > p { color: #87938f; font-size: 11px; line-height: 1.6; margin: 0; }
.support-feedback textarea { min-height: 125px; padding: 12px; resize: vertical; }
.account-total { align-items: center; display: flex; gap: 16px; margin-bottom: 16px; padding: 20px; }
.account-total > div { display: grid; gap: 4px; }
.account-total small, .account-opening { color: #87938f; font-size: 9px; font-weight: 700; letter-spacing: .5px; }
.account-total strong { color: #4f46e5; font-size: 26px; }
.account-total p { color: #87938f; font-size: 10px; margin: 0; }
.account-grid { display: grid; gap: 13px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.account-card { align-items: center; display: grid; gap: 10px; grid-template-columns: 35px minmax(0, 1fr) auto; padding: 16px; }
.account-card-copy { display: grid; gap: 4px; min-width: 0; }
.account-card-copy small { color: #87938f; font-size: 9px; }
.account-card-copy strong { overflow-wrap: anywhere; }
.account-balance { color: #334155; font-size: 17px; }
.account-card .account-opening { grid-column: 2; font-weight: 400; letter-spacing: 0; }
.account-card .delete-row { grid-column: 3; grid-row: 2; justify-self: end; }
.amount-transfer { color: #6366f1; }
.admin-section { margin-bottom: 16px; padding: 20px; }
.admin-list { display: grid; }
.admin-list article { align-items: center; border-top: 1px solid #eef1f0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding: 12px 0; }
.admin-list article > span:first-child { display: grid; gap: 4px; min-width: 0; }
.admin-list small, .admin-activity { color: #87938f; font-size: 10px; }
.admin-list p { font-size: 12px; line-height: 1.6; margin: 6px 0 0; overflow-wrap: anywhere; }
.tutorial-modal { max-width: 480px; }
.tutorial-progress { display: flex; gap: 6px; margin: 3px 0 24px; }
.tutorial-progress span { background: #e2e8f0; border-radius: 5px; flex: 1; height: 5px; }
.tutorial-progress span.active { background: #6366f1; }
.tutorial-content { padding: 8px 0 18px; }
.tutorial-icon { align-items: center; background: #eef2ff; border-radius: 15px; color: #4f46e5; display: flex; font-size: 27px; height: 58px; justify-content: center; margin-bottom: 18px; width: 58px; }
.tutorial-content .eyebrow { color: #6366f1; margin-bottom: 7px; }
.tutorial-content h3 { font-size: 23px; margin: 0 0 9px; }
.tutorial-content p { color: #64748b; font-size: 13px; line-height: 1.7; margin: 0; }
.tutorial-actions { align-items: center; display: flex; justify-content: space-between; margin-top: 18px; }
.date-input { display: block; min-width: 0; max-width: 100%; padding-right: 8px; width: 100%; }
.date-input::-webkit-date-and-time-value { text-align: left; }

/* Dialogs */
.modal-backdrop { align-items: center; background: rgba(14, 32, 30, .48); display: flex; inset: 0; justify-content: center; padding: 18px; position: fixed; z-index: 20; }
.modal-card { animation: modal-in .17s ease-out; background: #fff; border-radius: 13px; box-shadow: 0 18px 60px rgba(14, 32, 30, .22); max-height: calc(100vh - 36px); max-width: 440px; overflow-y: auto; padding: 25px; width: 100%; }
@keyframes modal-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.modal-heading { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: 17px; }
.modal-heading .eyebrow { margin-bottom: 7px; }
.modal-heading h2 { font-size: 22px; }
.close-button { background: #f4f6f5; color: #788783; font-size: 22px; }
.modal-form .field-label { margin-top: 13px; }
.modal-form > .button { margin-top: 22px; }
.optional-label { color: #9da7a4; font-size: 10px; font-weight: 400; margin-left: 5px; }
.info-modal { max-width: 510px; }
.info-copy { color: #6f7d79; font-size: 12px; line-height: 1.75; }
.info-copy p { margin: 12px 0; }
.info-modal > .button { margin-top: 9px; }

:root[data-theme="dark"] body { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] .sidebar { background: #080e1d; }
:root[data-theme="dark"] .support-icon { background: #262a52; color: #a5b4fc; }
:root[data-theme="dark"] .support-status { background: #44391d; color: #fbbf24; }
:root[data-theme="dark"] .support-surface h2 { color: var(--ink); }
:root[data-theme="dark"] .side-caption { color: #9ab2ab; }
:root[data-theme="dark"] .text-link { color: #a5b4fc; }
:root[data-theme="dark"] .text-link:hover { color: #c7d2fe; }
:root[data-theme="dark"] .eyebrow { color: #a4b9b3; }
:root[data-theme="dark"] .main-content .topbar { background: rgba(15, 23, 42, .96); border-color: #293449; }
:root[data-theme="dark"] .breadcrumbs,
:root[data-theme="dark"] .today-label,
:root[data-theme="dark"] .welcome-row p,
:root[data-theme="dark"] .page-heading p,
:root[data-theme="dark"] .soft-note,
:root[data-theme="dark"] .date-cell,
:root[data-theme="dark"] .category-cell { color: #9aaba6; }
:root[data-theme="dark"] .surface,
:root[data-theme="dark"] .list-surface,
:root[data-theme="dark"] .settings-surface,
:root[data-theme="dark"] .modal-card,
:root[data-theme="dark"] .fixed-total-card,
:root[data-theme="dark"] .credit-total-card,
:root[data-theme="dark"] .privacy-banner { background: #172033; border-color: #293449; color: var(--ink); }
:root[data-theme="dark"] .summary-mint { background: #252a4c; border-color: #383b68; }
:root[data-theme="dark"] .summary-peach { background: #44371f; border-color: #64512a; }
:root[data-theme="dark"] .summary-dark { background: #1e293b; border-color: #334155; }
:root[data-theme="dark"] .summary-credit { background: #202d49; border-color: #35486c; }
:root[data-theme="dark"] .summary-card { background: #172033; border-color: #293449; }
:root[data-theme="dark"] .summary-mint { border-left-color: #34d399; }
:root[data-theme="dark"] .summary-peach { border-left-color: #fb7185; }
:root[data-theme="dark"] .summary-dark { border-left-color: #818cf8; }
:root[data-theme="dark"] .summary-credit { border-left-color: #a78bfa; }
:root[data-theme="dark"] .summary-mint .summary-value { color: #34d399; }
:root[data-theme="dark"] .summary-peach .summary-value { color: #fb7185; }
:root[data-theme="dark"] .summary-top,
:root[data-theme="dark"] .summary-value,
:root[data-theme="dark"] .section-heading h2,
:root[data-theme="dark"] .commitment-total strong,
:root[data-theme="dark"] .mini-list strong,
:root[data-theme="dark"] .month-jump strong,
:root[data-theme="dark"] .transaction-name strong,
:root[data-theme="dark"] .simple-name strong,
:root[data-theme="dark"] .credit-source-title strong,
:root[data-theme="dark"] .credit-source-stats strong,
:root[data-theme="dark"] .modal-heading h2,
:root[data-theme="dark"] .payment-prompt-row strong { color: var(--ink); }
:root[data-theme="dark"] .summary-icon,
:root[data-theme="dark"] .icon-button,
:root[data-theme="dark"] .close-button,
:root[data-theme="dark"] .month-tag { background: #293449; color: #cbd5e1; }
:root[data-theme="dark"] .summary-icon { background: rgba(0, 0, 0, .16); }
:root[data-theme="dark"] .summary-mint .summary-icon { background: #123a32; color: #34d399; }
:root[data-theme="dark"] .summary-peach .summary-icon { background: #44252e; color: #fb7185; }
:root[data-theme="dark"] .summary-dark .summary-icon { background: #292b55; color: #a5b4fc; }
:root[data-theme="dark"] .summary-credit .summary-icon { background: #392b55; color: #c4b5fd; }
:root[data-theme="dark"] .summary-card small,
:root[data-theme="dark"] .flow-axis,
:root[data-theme="dark"] .flow-period-label,
:root[data-theme="dark"] .category-name,
:root[data-theme="dark"] .dashboard-movement-row time,
:root[data-theme="dark"] .dashboard-movement-name small,
:root[data-theme="dark"] .category-legend li > small,
:root[data-theme="dark"] .chart-label,
:root[data-theme="dark"] .chart-bar span,
:root[data-theme="dark"] .month-jump small,
:root[data-theme="dark"] .transaction-name small,
:root[data-theme="dark"] .purchase-installment small,
:root[data-theme="dark"] .credit-source-stats small,
:root[data-theme="dark"] .fixed-total-card small,
:root[data-theme="dark"] .credit-total-card small,
:root[data-theme="dark"] .privacy-banner small { color: #a3b4af; }
:root[data-theme="dark"] .credit-total-card strong,
:root[data-theme="dark"] .fixed-total-card strong,
:root[data-theme="dark"] .dashboard-credit-total strong,
:root[data-theme="dark"] .dashboard-credit-list strong,
:root[data-theme="dark"] .flow-legend strong { color: #d6e7e1; }
:root[data-theme="dark"] .total-symbol { background: #293a36; color: #a9d2c7; }
:root[data-theme="dark"] .total-note { color: #b0c2bc; }
:root[data-theme="dark"] .privacy-banner strong { color: #d1e2dc; }
:root[data-theme="dark"] .demo-pill { background: #39372c; color: #e3d49c; }
:root[data-theme="dark"] .demo-pill i { background: #e1c878; }
:root[data-theme="dark"] .button-outline { background: #1e293b; border-color: #334155; color: #c7d2fe; }
:root[data-theme="dark"] .button-outline:hover { background: #29364b; }
:root[data-theme="dark"] .button-primary { background: #6366f1; color: white; }
:root[data-theme="dark"] .button-primary:hover { background: #818cf8; }
:root[data-theme="dark"] .text-input,
:root[data-theme="dark"] .input-wrap input,
:root[data-theme="dark"] .money-input input { background: #0f172a; border-color: #334155; color: var(--ink); }
:root[data-theme="dark"] .field-label,
:root[data-theme="dark"] .month-picker-label,
:root[data-theme="dark"] .transaction-row .amount-cell,
:root[data-theme="dark"] .simple-amount,
:root[data-theme="dark"] .credit-source-title small,
:root[data-theme="dark"] .credit-source-card > p,
:root[data-theme="dark"] .info-copy,
:root[data-theme="dark"] .payment-prompt-row small { color: #a7b7b2; }
:root[data-theme="dark"] .transaction-row,
:root[data-theme="dark"] .simple-row,
:root[data-theme="dark"] .flow-legend,
:root[data-theme="dark"] .commitment-total,
:root[data-theme="dark"] .mini-list,
:root[data-theme="dark"] .empty-inline,
:root[data-theme="dark"] .credit-source-stats,
:root[data-theme="dark"] .payment-prompt-row { border-color: #293449; }
:root[data-theme="dark"] .entry-expense { background: #43342e; color: #e6b99e; }
:root[data-theme="dark"] .entry-income { background: #29443a; color: #9dd0b7; }
:root[data-theme="dark"] .simple-icon { background: #293a36; color: #a9d2c7; }
:root[data-theme="dark"] .status-paid { background: #29443a; color: #a4d6b8; }
:root[data-theme="dark"] .status-pending { background: #433d2b; color: #e4d198; }
:root[data-theme="dark"] .empty-illustration { background: #293a36; color: #a9d2c7; }
:root[data-theme="dark"] .empty-state > strong,
:root[data-theme="dark"] .credit-empty > strong { color: #dce9e4; }
:root[data-theme="dark"] .empty-state p,
:root[data-theme="dark"] .credit-empty > p { color: #a3b4af; }
:root[data-theme="dark"] .dashboard-credit-empty { color: #a3b4af; }
:root[data-theme="dark"] .payment-reminder-banner { background: #343227; border-color: #514b34; color: #e5d9a8; }
:root[data-theme="dark"] .payment-reminder-banner strong { color: #eee2b0; }
:root[data-theme="dark"] .payment-reminder-banner p { color: #d3c991; }
:root[data-theme="dark"] .payment-reminder-banner .reminder-icon { background: #494630; color: #e3d587; }
:root[data-theme="dark"] .quiet-empty,
:root[data-theme="dark"] .empty-state,
:root[data-theme="dark"] .credit-empty { color: #a7b7b2; }
:root[data-theme="dark"] .modal-intro,
:root[data-theme="dark"] .field-hint { color: #9aaba6; }
:root[data-theme="dark"] .payment-prompt-row { background: #22312e; }
:root[data-theme="dark"] .form-error { background: #482b2a; color: #f1b0a8; }
:root[data-theme="dark"] .form-success { background: #263f34; color: #a5d8b8; }
:root[data-theme="dark"] .modal-backdrop { background: rgba(3, 10, 9, .72); }
:root[data-theme="dark"] .delete-row { background: #372a29; color: #dd9890; }
:root[data-theme="dark"] .dashboard-credit-card { background: #172033; border-color: #293449; }
:root[data-theme="dark"] .dashboard-credit-total,
:root[data-theme="dark"] .dashboard-credit-list > div,
:root[data-theme="dark"] .mini-list > div,
:root[data-theme="dark"] .flow-legend span,
:root[data-theme="dark"] .commitment-total span { color: #a7b7b2; }
:root[data-theme="dark"] .flow-legend span { color: #cbd5e1; }
:root[data-theme="dark"] .flow-periods { background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(50% - .5px), #293449 calc(50% - .5px), #293449 50%, transparent calc(50% + .5px), transparent calc(100% - 1px), #293449 calc(100% - 1px)); }
:root[data-theme="dark"] .category-donut::before { background: #172033; }
:root[data-theme="dark"] .donut-center strong,
:root[data-theme="dark"] .category-legend li > strong,
:root[data-theme="dark"] .dashboard-movement-name strong,
:root[data-theme="dark"] .dashboard-credit-total strong,
:root[data-theme="dark"] .commitment-total strong,
:root[data-theme="dark"] .mini-list strong,
:root[data-theme="dark"] .month-jump strong { color: #e2e8f0; }
:root[data-theme="dark"] .dashboard-credit-total strong { color: #c4b5fd; }
:root[data-theme="dark"] .chart-empty > strong { color: #e2e8f0; }
:root[data-theme="dark"] .chart-empty p,
:root[data-theme="dark"] .commitment-name small { color: #94a3b8; }
:root[data-theme="dark"] .dashboard-movement-row { border-color: #293449; }
:root[data-theme="dark"] .dashboard-movement-amount { color: #fb7185; }
:root[data-theme="dark"] .dashboard-movement-amount.amount-income { color: #34d399; }
:root[data-theme="dark"] .movement-kind-income { background: #123a32; color: #34d399; }
:root[data-theme="dark"] .movement-kind-expense { background: #44252e; color: #fb7185; }
:root[data-theme="dark"] .dashboard-reminders { background: #3b3017; border-color: #67501d; }
:root[data-theme="dark"] .dashboard-reminders .reminder-icon { background: #524019; color: #fbbf24; }
:root[data-theme="dark"] .dashboard-reminders strong { color: #fde68a; }
:root[data-theme="dark"] .dashboard-reminders small { color: #fcd34d; }
:root[data-theme="dark"] .category-card .month-tag { background: #293449; }
:root[data-theme="dark"] .flow-bar-income { background: linear-gradient(180deg, #6ee7b7, #10b981); }
:root[data-theme="dark"] .flow-bar-expense { background: linear-gradient(180deg, #fda4af, #f43f5e); }
:root[data-theme="dark"] .month-jump-icon { background: #292b55; color: #a5b4fc; }
:root[data-theme="dark"] .chart-empty .empty-illustration { background: #262a52; color: #a5b4fc; }
:root[data-theme="dark"] .mobile-menu { color: #c5ded6; }
:root[data-theme="dark"] .theme-toggle { background: #31544d; }
:root[data-theme="dark"] .theme-toggle-thumb { background: #d8e9e4; color: #35584e; }
:root[data-theme="dark"] .fixed-summary-card,
:root[data-theme="dark"] .fixed-summary-primary { background: #172033; border-color: #293449; }
:root[data-theme="dark"] .fixed-summary-primary > strong,
:root[data-theme="dark"] .fixed-summary-card > strong,
:root[data-theme="dark"] .fixed-expense-amount,
:root[data-theme="dark"] .credit-limit-display strong,
:root[data-theme="dark"] .credit-meter > div:first-child strong,
:root[data-theme="dark"] .settings-surface .section-heading h2,
:root[data-theme="dark"] .appearance-settings h2,
:root[data-theme="dark"] .support-note-card strong { color: #e2e8f0; }
:root[data-theme="dark"] .tutorial-content h3,
:root[data-theme="dark"] .account-balance { color: #e2e8f0; }
:root[data-theme="dark"] .support-feedback > div > p,
:root[data-theme="dark"] .account-total p,
:root[data-theme="dark"] .tutorial-content p { color: #9aaba6; }
:root[data-theme="dark"] .tutorial-progress span { background: #293449; }
:root[data-theme="dark"] .tutorial-progress span.active { background: #818cf8; }
:root[data-theme="dark"] .tutorial-icon { background: #252a4c; color: #a5b4fc; }
:root[data-theme="dark"] .fixed-summary-card > small,
:root[data-theme="dark"] .fixed-summary-card > span:last-child,
:root[data-theme="dark"] .fixed-due-date,
:root[data-theme="dark"] .fixed-expense-amount small,
:root[data-theme="dark"] .credit-limit-display span,
:root[data-theme="dark"] .credit-meter > div:first-child span,
:root[data-theme="dark"] .credit-meter > small,
:root[data-theme="dark"] .credit-meter-note,
:root[data-theme="dark"] .transaction-filters label > span,
:root[data-theme="dark"] .month-comparison-label,
:root[data-theme="dark"] .month-comparison-legend > span,
:root[data-theme="dark"] .appearance-mode,
:root[data-theme="dark"] .appearance-settings p,
:root[data-theme="dark"] .settings-surface .section-heading p,
:root[data-theme="dark"] .support-note-card p { color: #9aaba6; }
:root[data-theme="dark"] .transaction-results-heading,
:root[data-theme="dark"] .month-comparison-chart,
:root[data-theme="dark"] .month-comparison-bars { border-color: #293449; }
:root[data-theme="dark"] .credit-meter-track { background: #293449; }
:root[data-theme="dark"] .credit-sync-label { color: #a3b4af; }
:root[data-theme="dark"] .month-comparison-period.is-selected .month-comparison-label { color: #a5b4fc; }
:root[data-theme="dark"] .support-surface { background: linear-gradient(120deg, #172033 0%, #1b2441 58%, #252852 100%); }
:root[data-theme="dark"] .support-aside { background: linear-gradient(145deg, #5054bb, #39338c); }
:root[data-theme="dark"] .support-note-icon { background: #292b55; color: #a5b4fc; }

@media (min-width: 1500px) {
  .sidebar { width: 260px; padding-left: 23px; padding-right: 23px; }
  .main-content { margin-left: 260px; }
}
@media (max-width: 1060px) {
  .sidebar { width: 210px; }
  .main-content { margin-left: 210px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-card { min-height: 250px; }
  .dashboard-visual-grid, .dashboard-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-shell { grid-template-columns: .85fr 1.15fr; }
  .auth-visual { padding-left: 38px; padding-right: 38px; }
  .auth-panel { padding-left: 45px; padding-right: 45px; }
}
@media (max-width: 900px) {
  .dashboard-visual-grid, .dashboard-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .quick-card { min-height: 0; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .heading-actions { align-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .transaction-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .transaction-search-label { grid-column: 1 / -1; }
  .fixed-expense-row { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; }
  .fixed-expense-row .simple-name { flex: 1 1 calc(100% - 50px); }
  .fixed-expense-row .fixed-expense-amount { margin-left: 43px; }
  .fixed-expense-row .fixed-due-date { margin-right: auto; }
}
@media (max-width: 760px) {
  .auth-shell { display: block; }
  .auth-visual { display: none; }
  .auth-panel { min-height: 100vh; padding: 21px 24px 19px; }
  .auth-top { justify-content: space-between; }
  .mobile-brand { display: inline-flex; font-size: 21px; }
  .mobile-brand .brand-logo { flex-basis: 30px; height: 30px; width: 30px; }
  .secure-note { font-size: 9px; }
  .auth-card { margin: 48px auto 35px; max-width: 430px; }
  .auth-footer { font-size: 9px; }
  .setup-header { height: 66px; padding: 0 18px; }
  .setup-header .brand { font-size: 22px; }
  .setup-header .brand-logo { flex-basis: 30px; height: 30px; width: 30px; }
  .setup-step-label { font-size: 8px; letter-spacing: .5px; }
  .setup-step-label span { margin-left: 4px; }
  .setup-content { padding-top: 38px; }
  .sidebar { box-shadow: 12px 0 30px rgba(15,23,42,.2); -webkit-overflow-scrolling: touch; overflow-y: auto; overscroll-behavior: contain; transform: translateX(-105%); transition: transform .2s; width: 250px; z-index: 30; }
  .sidebar.sidebar-open { transform: translateX(0); }
  .sidebar-backdrop:not([hidden]) { background: rgba(15,23,42,.48); border: 0; display: block; inset: 0 0 0 250px; padding: 0; position: fixed; z-index: 20; }
  .sidebar-backdrop:focus-visible { outline-offset: -4px; }
  .main-content { margin-left: 0; }
  .topbar { height: 58px; padding: 0 17px; }
  .mobile-menu { display: inline-flex; }
  .mobile-menu { position: relative; z-index: 31; }
  .breadcrumbs { margin-right: auto; padding-left: 11px; }
  .topbar-right { gap: 10px; }
  .today-label { display: none; }
  .page-content { padding: 28px 17px 35px; }
  .welcome-row, .page-heading { align-items: flex-start; gap: 14px; }
  .welcome-row { flex-direction: column; }
  .welcome-row h1, .page-heading h1 { font-size: 28px; }
  .welcome-row .button { align-self: stretch; }
  .summary-grid { gap: 9px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-card { min-height: 105px; padding: 12px 10px; }
  .summary-value { font-size: 24px; margin-top: 7px; }
  .dashboard-visual-grid, .dashboard-detail-grid { gap: 11px; grid-template-columns: minmax(0, 1fr); margin-top: 11px; }
  .flow-chart-wrap { grid-template-columns: 77px minmax(0, 1fr); height: 205px; }
  .flow-legend { margin: 17px 0 10px 87px; }
  .flow-axis { font-size: 8px; }
  .category-breakdown { gap: 12px; justify-content: space-between; min-height: 205px; }
  .category-donut { flex-basis: 150px; height: 150px; width: 150px; }
  .donut-center strong { font-size: 14px; }
  .category-legend { gap: 9px; width: auto; }
  .dashboard-movement-row { gap: 7px; grid-template-columns: 32px minmax(0, 1fr) auto; min-height: 57px; }
  .dashboard-movement-row time { display: none; }
  .dashboard-movement-amount { font-size: 9px; }
  .dashboard-grid { gap: 11px; margin-top: 11px; }
  .overview-card, .quick-card, .recent-card { padding: 17px 15px; }
  .recent-card { margin-top: 11px; }
  .dashboard-credit-card { padding: 16px 13px; }
  .dashboard-credit-card .section-heading { align-items: flex-start; gap: 8px; }
  .dashboard-credit-card .section-heading h2 { font-size: 14px; }
  .dashboard-credit-card .section-heading > .text-link { flex: 0 0 auto; font-size: 9px; }
  .dashboard-credit-list > div { flex: 1 1 100%; }
  .table-head { display: none; }
  .transaction-row { gap: 7px; grid-template-columns: minmax(100px, 1fr) auto auto; min-height: 58px; }
  .transaction-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .transaction-search-label { grid-column: 1 / -1; }
  .transaction-results-heading { align-items: flex-start; }
  .transaction-results-heading .month-tag { margin-top: 4px; }
  .category-cell { display: none; }
  .date-cell { text-align: right; }
  .amount-cell { min-width: 85px; }
  .transaction-row .delete-row { grid-column: 3; grid-row: 1; justify-self: end; }
  .transaction-row:has(.delete-row) { grid-template-columns: minmax(90px, 1fr) auto auto; }
  .transaction-row:has(.delete-row) .date-cell { grid-column: 2; }
  .transaction-row:has(.delete-row) .amount-cell { grid-column: 2; grid-row: 2; }
  .transaction-row:has(.delete-row) .delete-row { grid-column: 3; grid-row: 1 / span 2; }
  .page-heading { flex-direction: column; }
  .page-heading .button { align-self: stretch; }
  .heading-actions { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .heading-actions .button { font-size: 10px; gap: 5px; padding: 0 8px; }
  .month-picker-label { align-self: stretch; width: 100%; }
  .payment-reminder-banner { align-items: flex-start; flex-wrap: wrap; padding: 12px; }
  .payment-reminder-banner > div { flex: 1; }
  .payment-reminder-banner > .text-link { margin: 0 0 0 47px; }
  .credit-source-grid { grid-template-columns: 1fr; }
  .credit-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purchase-row { flex-wrap: wrap; }
  .purchase-installment { margin-left: 44px; }
  .purchase-row .simple-amount { margin-left: auto; }
  .payment-status { display: none; }
  .simple-row .small-button { font-size: 8px; padding: 0 7px; }
  .fixed-total-card { align-items: flex-start; flex-wrap: wrap; padding: 15px; }
  .fixed-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fixed-summary-primary { grid-column: 1 / -1; }
  .fixed-expense-row { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; }
  .fixed-expense-row .simple-name { flex: 1 1 calc(100% - 50px); }
  .fixed-expense-row .fixed-expense-amount { margin-left: 43px; }
  .fixed-expense-row .fixed-due-date { margin-right: auto; }
  .fixed-expense-row .payment-status { display: inline-flex; }
  .total-note { flex-basis: 100%; margin: 2px 0 0 56px; }
  .list-surface { padding: 3px 14px; }
  .settings-fields { grid-template-columns: 1fr; }
  .settings-fields > div:last-child { grid-column: auto; max-width: none; }
  .settings-surface { padding: 17px; }
  .data-settings { align-items: flex-start; flex-direction: column; gap: 15px; }
  .appearance-settings { align-items: flex-start; flex-direction: column; gap: 14px; }
  .support-surface { flex-direction: column; }
  .support-aside { flex-basis: auto; min-height: 180px; min-width: 0; }
  .support-aside > strong { margin-top: 12px; }
  .support-feedback { grid-template-columns: 1fr; padding: 17px; }
  .account-total { align-items: flex-start; padding: 16px; }
  .account-total strong { font-size: 22px; }
  .admin-section { padding: 15px; }
  .modal-backdrop { align-items: flex-end; padding: 8px; }
  .modal-card { border-radius: 16px 16px 10px 10px; max-height: calc(100dvh - 16px); padding: 20px 17px; }
  .modal-form .text-input, .modal-form .money-input, .modal-form input[type="date"] { min-width: 0; max-width: 100%; }
  .month-comparison-card { padding: 17px 14px 12px; }
  .month-comparison-chart { gap: 3px; }
}
@media (max-width: 390px) {
  .auth-panel { padding-left: 18px; padding-right: 18px; }
  .secure-note { max-width: 145px; }
  .setup-content h1 { font-size: 34px; }
  .welcome-row h1, .page-heading h1 { font-size: 25px; }
  .summary-value { font-size: 19px; }
  .summary-top { font-size: 9px; }
  .summary-card small { font-size: 8px; }
  .flow-legend { gap: 10px; }
  .flow-legend span { font-size: 8px; }
  .category-donut { flex-basis: 128px; height: 128px; width: 128px; }
  .category-legend li { gap: 2px 5px; }
  .category-name, .category-legend li > strong { font-size: 9px; }
  .category-legend li > small { font-size: 8px; }
  .flow-chart-wrap { grid-template-columns: 70px minmax(0, 1fr); }
  .flow-legend { margin-left: 80px; }
  .transaction-row { grid-template-columns: minmax(85px, 1fr) auto auto; }
  .transaction-filters { gap: 8px; }
  .credit-limit-display { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

.verify-shell { align-items: center; background: var(--paper); display: flex; justify-content: center; min-height: 100vh; padding: 24px 16px; }
.verify-card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 30px rgba(15,23,42,.06); display: flex; flex-direction: column; gap: 14px; max-width: 440px; padding: clamp(24px, 6vw, 40px); text-align: center; width: 100%; align-items: center; }
.verify-brand { margin-bottom: 6px; }
.verify-card h1 { color: var(--ink); font-size: clamp(22px, 5vw, 27px); letter-spacing: -.6px; margin: 4px 0 0; }
.verify-card p { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 0; }
.verify-card .button { margin-top: 6px; }
.verify-icon { align-items: center; border-radius: 50%; display: inline-flex; height: 64px; justify-content: center; width: 64px; }
.verify-icon-success { background: rgba(16,185,129,.14); color: var(--green); }
.verify-icon-error { background: rgba(239,68,68,.12); color: var(--red); }
.verify-icon-info { background: var(--mint); color: var(--petrol); }
.verify-spinner { animation: verify-spin .8s linear infinite; border: 3px solid var(--mint-strong); border-radius: 50%; border-top-color: var(--petrol); height: 26px; width: 26px; }
@keyframes verify-spin { to { transform: rotate(360deg); } }
.verify-resend { align-self: stretch; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; text-align: left; }
.verify-resend .field-label { margin: 0; }
@media (prefers-reduced-motion: reduce) { .verify-spinner { animation: none; } }

/* Icons: SVG en linea (ver ICON_PATHS en app.js). Heredan color y tamano (1em) del contenedor; el trazo mide lo mismo a cualquier tamano. */
.icon { display: inline-block; fill: none; flex: none; height: 1em; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8px; vertical-align: -.125em; width: 1em; }
.icon * { vector-effect: non-scaling-stroke; }
.sr-only { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
.button { gap: 10px; }
.button .icon { font-size: 16px; }
.text-link .icon { font-size: 14px; margin: 0 2px; vertical-align: -2px; }
.nav-icon { font-size: 18px; }
.tip-spark .icon { display: block; }
.logout-mark { align-items: center; display: inline-flex; font-size: 16px; transform: none; }
.theme-toggle-thumb { font-size: 14px; }
.mobile-menu { align-items: center; font-size: 22px; justify-content: center; }
.wave { display: inline-block; line-height: 1; vertical-align: 3px; }
.summary-icon { font-size: 17px; }
.empty-illustration { font-size: 24px; }
.credit-empty .empty-illustration { font-size: 20px; }
.movement-kind { font-size: 16px; }
.entry-income, .entry-expense { font-size: 15px; }
.simple-icon { font-size: 17px; }
.month-jump-icon { font-size: 16px; }
.month-jump button { align-items: center; display: inline-flex; font-size: 18px; padding: 4px; }
.privacy-banner-icon { align-items: center; display: inline-flex; font-size: 18px; }
.privacy-note span { align-items: center; display: inline-flex; }
.icon-button .icon { font-size: 16px; }
.delete-row { align-items: center; display: inline-flex; }
.delete-row .icon { font-size: 17px; }
.close-button .icon { font-size: 18px; }
.support-icon { line-height: 0; }
.support-note-icon { font-size: 17px; }
.support-aside > i { line-height: 0; }

/* Donations */
.support-status-active { background: var(--mint); color: var(--petrol-2); }
:root[data-theme="dark"] .support-status-active { background: var(--mint); color: var(--petrol-2); }
.support-cta { align-self: flex-start; }
.support-surface .support-fineprint { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0; max-width: 420px; }
.support-surface .support-pending { align-items: flex-start; background: var(--white); border: 1px dashed var(--mint-strong); border-radius: 12px; color: var(--muted); display: flex; font-size: 13px; gap: 10px; line-height: 1.6; max-width: 470px; padding: 13px 15px; }
.support-pending .icon { color: var(--petrol); font-size: 18px; margin-top: 2px; }
.support-pending > span { display: grid; gap: 2px; }
.support-pending strong { color: var(--ink); }
@media (max-width: 480px) { .support-cta { align-self: stretch; } }