/* GENERATED FILE - edit scripts/dark-theme-base.css, scripts/dark-theme-overrides.css,
   or the color map in scripts/generate-dark-theme.mjs, then re-run: node scripts/generate-dark-theme.mjs */
@media screen {
/* ---- hand-written dark-theme base (prepended to the generated rules) ---- */

/* Theme toggle button (styled for both themes; markup lives in each header nav) */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-left:22px;border:1px solid #cdd3d9;border-radius:50%;background:transparent;cursor:pointer;font-size:15px;line-height:1;padding:0;flex-shrink:0}
.theme-toggle::before{content:'\1F319'}
.theme-toggle:hover{border-color:#004ECC}
html[data-theme="dark"] .theme-toggle{border-color:#3a444f}
html[data-theme="dark"] .theme-toggle::before{content:'\2600\FE0F'}
html[data-theme="dark"] .theme-toggle:hover{border-color:#6ea8ff}
@media (max-width:768px){.theme-toggle{margin-left:12px;width:32px;height:32px}}

/* Base surfaces and text */
html[data-theme="dark"]{color-scheme:dark;background-color:#14181d}
html[data-theme="dark"] body{background-color:#14181d;color:#e3e7ec}
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{background-color:#20262e;color:#e6e9ee;border-color:#3a444f}
html[data-theme="dark"] ::placeholder{color:#8b95a1;opacity:1}
html[data-theme="dark"] img{filter:brightness(.92)}

/* Header (shared across all pages) */
html[data-theme="dark"] .inline-header{background-color:#181d23;border-bottom-color:#2a323c;box-shadow:0 2px 10px rgba(0,0,0,0.4)}
html[data-theme="dark"] nav a{color:#dde3ea}
html[data-theme="dark"] nav a:hover{color:#6ea8ff}
html[data-theme="dark"] nav a::after{background-color:#6ea8ff}

/* Info-icon tooltips: the inline svg icons use black stroke/fill attributes */
html[data-theme="dark"] .info-icon svg circle[stroke="#000000"]{stroke:#9aa4b0}
html[data-theme="dark"] .info-icon svg g[fill="#000000"]{fill:#9aa4b0}

/* ---- Lease calculator highlight states ----
   The two signing modes highlight rows via JS inline styles and CSS variables:
   Zero Due at Signing  -> #FFE187 (also .first-pmt-row / .added-to-adjusted-row)
   Custom Due at Signing -> #FFCA2D
   Both yellows are kept identical in dark mode; only the text inside those rows
   flips to near-black so it stays readable on yellow. */
/* NOTE on selectors: highlights authored in markup keep their hex text in the
   style attribute, but colors set from JS via element.style serialize to
   rgb() — both spellings must be matched.
   #FFE187 = rgb(255, 225, 135)   (Show Zero Due at Signing)
   #FFCA2D = rgb(255, 202, 45)    (Show Custom Due at Signing)
   #dedede = rgb(222, 222, 222)   (zero-due row chrome) */
html[data-theme="dark"] .row[style*="FFE187"] > .label,
html[data-theme="dark"] .row[style*="FFE187"] > .operator,
html[data-theme="dark"] .row[style*="FFE187"] > .value :is(span,div),
html[data-theme="dark"] .row[style*="rgb(255, 225, 135)"] > .label,
html[data-theme="dark"] .row[style*="rgb(255, 225, 135)"] > .operator,
html[data-theme="dark"] .row[style*="rgb(255, 225, 135)"] > .value :is(span,div),
html[data-theme="dark"] .row[style*="FFCA2D"] > .label,
html[data-theme="dark"] .row[style*="FFCA2D"] > .operator,
html[data-theme="dark"] .row[style*="FFCA2D"] > .value :is(span,div),
html[data-theme="dark"] .row[style*="rgb(255, 202, 45)"] > .label,
html[data-theme="dark"] .row[style*="rgb(255, 202, 45)"] > .operator,
html[data-theme="dark"] .row[style*="rgb(255, 202, 45)"] > .value :is(span,div),
html[data-theme="dark"] .first-pmt-row > .label,
html[data-theme="dark"] .first-pmt-row > .operator,
html[data-theme="dark"] .first-pmt-row > .value :is(span,div),
html[data-theme="dark"] .added-to-adjusted-row > .label,
html[data-theme="dark"] .added-to-adjusted-row > .operator,
html[data-theme="dark"] .added-to-adjusted-row > .value :is(span,div){color:#181d24 !important}
html[data-theme="dark"] .row[style*="FFE187"] .nowrap-text,
html[data-theme="dark"] .row[style*="rgb(255, 225, 135)"] .nowrap-text,
html[data-theme="dark"] .row[style*="FFCA2D"] .nowrap-text,
html[data-theme="dark"] .row[style*="rgb(255, 202, 45)"] .nowrap-text,
html[data-theme="dark"] .first-pmt-row .nowrap-text{color:#181d24 !important}
/* Info icons sitting on a yellow row stay dark */
html[data-theme="dark"] .row[style*="FFE187"] .info-icon svg circle[stroke="#000000"],
html[data-theme="dark"] .row[style*="rgb(255, 225, 135)"] .info-icon svg circle[stroke="#000000"],
html[data-theme="dark"] .row[style*="FFCA2D"] .info-icon svg circle[stroke="#000000"],
html[data-theme="dark"] .row[style*="rgb(255, 202, 45)"] .info-icon svg circle[stroke="#000000"],
html[data-theme="dark"] .first-pmt-row .info-icon svg circle[stroke="#000000"],
html[data-theme="dark"] .added-to-adjusted-row .info-icon svg circle[stroke="#000000"]{stroke:#181d24}
html[data-theme="dark"] .row[style*="FFE187"] .info-icon svg g[fill="#000000"],
html[data-theme="dark"] .row[style*="rgb(255, 225, 135)"] .info-icon svg g[fill="#000000"],
html[data-theme="dark"] .row[style*="FFCA2D"] .info-icon svg g[fill="#000000"],
html[data-theme="dark"] .row[style*="rgb(255, 202, 45)"] .info-icon svg g[fill="#000000"],
html[data-theme="dark"] .first-pmt-row .info-icon svg g[fill="#000000"],
html[data-theme="dark"] .added-to-adjusted-row .info-icon svg g[fill="#000000"]{fill:#181d24}
/* JS sets the zero-due row chrome grey inline; remap it for dark */
html[data-theme="dark"] #zero_due_row[style*="dedede"],
html[data-theme="dark"] #zero_due_row[style*="rgb(222, 222, 222)"]{background-color:#323a45 !important}
/* Markup-level inline styles the generator cannot see: white/blue-tint panels, spacers, inputs */
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color: white"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] .payment-section-spacer,
html[data-theme="dark"] .blank-row{background-color:#1e242c !important}
html[data-theme="dark"] [style*="background-color: #f9f9f9"],
html[data-theme="dark"] [style*="background:#f9f9f9"],
html[data-theme="dark"] [style*="background: #f9f9f9"]{background-color:#20262e !important}
html[data-theme="dark"] [style*="#ECF2F9"],
html[data-theme="dark"] [style*="#f5f9ff"]{background-color:#1d2a3b !important}
/* Clear Saved Data button carries inline colors in markup + JS hover handlers */
html[data-theme="dark"] #clear_saved_data{background-color:#432625 !important;color:#f0d5d2 !important}

html[data-theme="dark"] .hero h1{color:#dbe3ee}
html[data-theme="dark"] .hero{border-bottom:1px solid #313a45}
html[data-theme="dark"] .inline-header{background-color:#1e242c;border-bottom:1px solid #313a45}
html[data-theme="dark"] nav a{color:#e3e7ec}
html[data-theme="dark"] nav a:hover{color:#6ea8ff}
html[data-theme="dark"] .cta-buttons.light a{background:#1e242c}
html[data-theme="dark"] .section-fade{background:linear-gradient(135deg,#171d25 0%,#1c2531 100%)}
html[data-theme="dark"] body{color:#e3e7ec;background-color:#1d2a3b}
html[data-theme="dark"] .error-container{background-color:#1e242c}
html[data-theme="dark"] .error-code{color:#6ea8ff}
html[data-theme="dark"] .error-title{color:#dbe3ee}
html[data-theme="dark"] .error-message{color:#9aa4b0}
html[data-theme="dark"] .search-suggestion{background-color:#1d2a3b}
html[data-theme="dark"] .calculator-option{background-color:#1d2a3b}
html[data-theme="dark"] .calculator-option h3{color:#6ea8ff}
html[data-theme="dark"] .hero{background:linear-gradient(135deg,#171d25 0%,#1c2531 100%);border-bottom:1px solid #313a45}
html[data-theme="dark"] .section-title{color:#dbe3ee}
html[data-theme="dark"] .features,html[data-theme="dark"] .benefits,html[data-theme="dark"] .testimonials,html[data-theme="dark"] .process,html[data-theme="dark"] .faq,html[data-theme="dark"] .comparison{border-bottom:1px solid #313a45}
html[data-theme="dark"] section:nth-child(even){background-color:#1d2a3b}
html[data-theme="dark"] .coming-soon-container{background-color:#1e242c}
html[data-theme="dark"] .coming-soon-title{color:#dbe3ee}
html[data-theme="dark"] .coming-soon-subtitle{color:#6ea8ff}
html[data-theme="dark"] .preview-image{border:1px solid #313a45}
html[data-theme="dark"] .feature-icon{background:#1d2a3b;color:#6ea8ff}
html[data-theme="dark"] .feature-text h3{color:#dbe3ee}
html[data-theme="dark"] .eta-notice{background-color:#1d2a3b}
html[data-theme="dark"] .eta-notice p{color:#dbe3ee}
html[data-theme="dark"] .privacy-header{border-bottom:1px solid #313a45}
html[data-theme="dark"] .privacy-header h1{color:#dbe3ee}
html[data-theme="dark"] .privacy-header p{color:#9aa4b0}
html[data-theme="dark"] .last-updated{background-color:#1d2a3b;color:#9aa4b0}
html[data-theme="dark"] .privacy-content h2{color:#6ea8ff;border-bottom:1px solid #313a45}
html[data-theme="dark"] .privacy-content h3{color:#dbe3ee}
html[data-theme="dark"] .privacy-content blockquote{background-color:#1d2a3b;color:#c6cdd6}
html[data-theme="dark"] .privacy-content a{color:#6ea8ff}
html[data-theme="dark"] .privacy-content a:hover{color:#6ea8ff}
html[data-theme="dark"] .contact-info{background-color:#1d2a3b;border:1px solid #313a45}
html[data-theme="dark"] .contact-info h3{color:#dbe3ee}
html[data-theme="dark"] table th,html[data-theme="dark"] table td{border-bottom:1px solid #313a45}
html[data-theme="dark"] table th{background-color:#1d2a3b;color:#dbe3ee}
html[data-theme="dark"] table tr:hover{background-color:#1d2a3b}
html[data-theme="dark"] .text-muted{color:#9aa4b0}
html[data-theme="dark"] .terms-header{border-bottom:1px solid #313a45}
html[data-theme="dark"] .terms-header h1{color:#dbe3ee}
html[data-theme="dark"] .terms-header p{color:#9aa4b0}
html[data-theme="dark"] .terms-content h2{color:#6ea8ff;border-bottom:1px solid #313a45}
html[data-theme="dark"] .terms-content h3{color:#dbe3ee}
html[data-theme="dark"] .terms-content blockquote{background-color:#1d2a3b;color:#c6cdd6}
html[data-theme="dark"] .terms-content a{color:#6ea8ff}
html[data-theme="dark"] .terms-content a:hover{color:#6ea8ff}
html[data-theme="dark"] body{color:#e3e7ec;background-color:#14181d}
html[data-theme="dark"] body.calculator-only-mode{background-color:#1e242c}
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] h4,html[data-theme="dark"] h5,html[data-theme="dark"] h6{color:#e3e7ec}
html[data-theme="dark"] h2{border-bottom:1px solid #313a45}
html[data-theme="dark"] hr{background-color:#323a45}
html[data-theme="dark"] .calculator-section{background-color:#1e242c}
html[data-theme="dark"] .cta-section{background-color:#1d2a3b}
html[data-theme="dark"] .toggle-switch{background:#1d2a3b;border:1px solid #313a45}
html[data-theme="dark"] .toggle-switch .toggle-slider{background:#22303f}
html[data-theme="dark"] .toggle-switch .toggle-slider:before{background:#1e242c}
html[data-theme="dark"] body{background-color:#14181d}
html[data-theme="dark"] .sticky-header{background-color:#1e242c;border:2px solid #313a45}
html[data-theme="dark"] .calculator-container{background-color:#1e242c;border:2.5px solid #313a45}
html[data-theme="dark"] .headingBg{background:#323a45}
html[data-theme="dark"] input[type="text"].input-error{background-color:#432625 !important}
html[data-theme="dark"] input[type="text"]{border:1px solid #313a45;background-color:#1e242c}
html[data-theme="dark"] input[type="text"].title-input{border:1px solid #313a45}
html[data-theme="dark"] .title-input::placeholder{color:#9aa4b0}
html[data-theme="dark"] .resultDivStyle_1{background:#14181d}
html[data-theme="dark"] .darkGrey{background:#323a45}
html[data-theme="dark"] .custom-field input[type="text"].field-label{border:1px solid #313a45}
html[data-theme="dark"] .tooltip .tooltiptext{border:1px solid #313a45}
html[data-theme="dark"] .section-break{background:#1e242c}
html[data-theme="dark"] .apr-display{color:#c6cdd6}
html[data-theme="dark"] .final-result{background:#323a45}
html[data-theme="dark"] .apr-description{color:#c6cdd6}
html[data-theme="dark"] .lightGrey{background-color:#14181d}
html[data-theme="dark"] .tax-input{background-color:#1e242c}
html[data-theme="dark"] .pdf-export-container{background-color:#1e242c}
html[data-theme="dark"] .pdf-export-container .calculator-column.column-left-combined{border-right:1px solid #313a45}
html[data-theme="dark"] .pdf-export-container .calculator-column.column-left{border-right:1px solid #313a45}
html[data-theme="dark"] h1{color:#e3e7ec}
html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] h4,html[data-theme="dark"] h5,html[data-theme="dark"] h6{color:#e3e7ec}
html[data-theme="dark"] .features,html[data-theme="dark"] .benefits,html[data-theme="dark"] .testimonials,html[data-theme="dark"] .process,html[data-theme="dark"] .faq,html[data-theme="dark"] .comparison,html[data-theme="dark"] .content-section{border-bottom:1px solid #313a45}
html[data-theme="dark"] .three-column > div{background:#1e242c}
html[data-theme="dark"] .three-column h3{color:#6ea8ff}
html[data-theme="dark"] td{border-bottom:1px solid #313a45}
html[data-theme="dark"] tr:nth-child(even){background-color:#1d2a3b}
html[data-theme="dark"] tr:hover{background-color:#1d2a3b}
html[data-theme="dark"] table th,html[data-theme="dark"] table td{border:1px solid #313a45}
html[data-theme="dark"] table tbody tr:nth-child(even){background-color:#14181d}
html[data-theme="dark"] table tbody tr:hover{background-color:#1d2a3b}
html[data-theme="dark"] .container{border:1px solid #313a45;background-color:#1e242c}
html[data-theme="dark"] input{border:1px solid #313a45;background-color:#1e242c}
html[data-theme="dark"] input:focus{background-color:#1d2a3b}
html[data-theme="dark"] input:active{background-color:#1d2a3b}
html[data-theme="dark"] input.active-input{background-color:#1d2a3b}
html[data-theme="dark"] input.error{background-color:#432625}
html[data-theme="dark"] #daysError{color:#ff7a70}
html[data-theme="dark"] .result{background-color:#1d2a3b}
html[data-theme="dark"] .result.updated{background-color:#1d2a3b}
html[data-theme="dark"] .additional-result{border-bottom:1px solid #313a45}
html[data-theme="dark"] .debug-output{color:#e3e7ec;border-top:1px solid #313a45}
html[data-theme="dark"] #disclaimer{color:#c6cdd6}
html[data-theme="dark"] #shareBtn:before{background-color:#1e242c}
html[data-theme="dark"] #shareURL{border:1px solid #313a45}
html[data-theme="dark"] .chart-container{background-color:#1e242c}
html[data-theme="dark"] #toggleAmortization{background-color:#1d2a3b;color:#e3e7ec;border:1px solid #313a45}
html[data-theme="dark"] #toggleAmortization:hover{background-color:#14181d}
html[data-theme="dark"] #toggleAmortization:active{background-color:#323a45}
html[data-theme="dark"] #viewMode{border:1px solid #313a45;background-color:#1d2a3b;color:#e3e7ec}
html[data-theme="dark"] .content-section{background:#1e242c}
html[data-theme="dark"] .info-block h3,html[data-theme="dark"] .faq-item h3,html[data-theme="dark"] .tip-item h3{color:#dbe3ee}
html[data-theme="dark"] .table-caption{color:#c6cdd6}
html[data-theme="dark"] .option-card{background:#1d2a3b;border:1px solid #313a45}
html[data-theme="dark"] .option-card h3{color:#dbe3ee}
html[data-theme="dark"] .highlight-card{background:#1d2a3b}
html[data-theme="dark"] .internal-link{color:#6ea8ff}
html[data-theme="dark"] .internal-link:hover{color:#6ea8ff}
html[data-theme="dark"] .cta-section{background:linear-gradient(135deg,#171d25 0%,#1c2531 100%)}
html[data-theme="dark"] .cta-item{background:#1e242c}
html[data-theme="dark"] .cta-item h3{color:#dbe3ee}
html[data-theme="dark"] .current-tool{background:#1d2a3b;color:#c6cdd6}
html[data-theme="dark"] .cta-note{color:#9aa4b0}
html[data-theme="dark"] .founder-quote{background:#1d2a3b}
html[data-theme="dark"] .founder-quote:before{color:#6ea8ff}
html[data-theme="dark"] .founder-quote p{color:#dbe3ee}
html[data-theme="dark"] .hero{background:linear-gradient(135deg,#171d25 0%,#1c2531 100%)}
html[data-theme="dark"] .feature-card{background:#1e242c}
html[data-theme="dark"] .step-item{background:#1e242c}
html[data-theme="dark"] .testimonial-card{background:#1e242c}
html[data-theme="dark"] .pricing-card{background:#1e242c}
html[data-theme="dark"] .comparison-table td{border-bottom:1px solid #313a45}
html[data-theme="dark"] .comparison-table tr:hover{background-color:#1d2a3b}
html[data-theme="dark"] .faq-item{background:#1e242c}
html[data-theme="dark"] .faq-answer{border-top:1px solid #313a45}
html[data-theme="dark"] .cta-section .section-title::after{background:#1e242c}
html[data-theme="dark"] .cta-buttons.light a:hover{background:#1d2a3b}
html[data-theme="dark"] .copyright{border-top:1px solid #313a45}
@media (min-width: 1165px) {
html[data-theme="dark"] .calculator-container::before{background-color:#323a45}
}
@media (min-width: 1565px) {
html[data-theme="dark"] .calculator-only-mode .calculator-column.column-left,html[data-theme="dark"] .calculator-only-mode .calculator-column.column-middle,html[data-theme="dark"] .calculator-only-mode .calculator-column.column-right{border-right:1px solid #313a45}
}
@media print {
html[data-theme="dark"] body{background-color:#1e242c}
html[data-theme="dark"] .calculator-column.column-left{border-right:1px solid #313a45}
}
@media (max-width: 480px) {
html[data-theme="dark"] #amortizationTable tr:nth-child(even){background-color:#14181d}
html[data-theme="dark"] #amortizationTable tr:hover{background-color:#1d2a3b}
}
@media (max-width: 655px) {
html[data-theme="dark"] input{background-color:#1e242c}
html[data-theme="dark"] input:active{background-color:#1d2a3b}
html[data-theme="dark"] .row{background-color:#1d2a3b !important}
html[data-theme="dark"] .row:hover{background-color:#1d2a3b}
html[data-theme="dark"] .row.active-row{background-color:#1d2a3b}
}
/* ---- hand-written dark-theme overrides (appended AFTER the generated rules,
        so they win ties against them) ---- */

/* Bottom CTA buttons on the home page: white-on-blue in light mode, which the
   generator turned dark-on-dark. Solid brand blue reads clearly on dark. */
html[data-theme="dark"] .cta-buttons.light a{background:#0d5ae0;color:#fff}
html[data-theme="dark"] .cta-buttons.light a:hover{background:#2f77ec;color:#fff}

/* Pricing cards: .price uses var(--secondary-blue) navy, invisible on dark */
html[data-theme="dark"] .price{color:#e8edf4}
html[data-theme="dark"] .price.free{color:#4da3ff}
html[data-theme="dark"] .price-description{color:#9aa4b0}

/* Lease page "Calculator Only" toggle: pill, track, and knob all went dark */
html[data-theme="dark"] .toggle-switch{background:#2a3441;border:1px solid #3a4757;box-shadow:0 2px 4px rgba(0,0,0,0.4)}
html[data-theme="dark"] .toggle-switch .toggle-label{color:#dbe3ee}
html[data-theme="dark"] .toggle-switch .toggle-slider{background:#55637a}
html[data-theme="dark"] .toggle-switch .toggle-slider:before{background:#ffffff}
html[data-theme="dark"] .toggle-switch.active .toggle-slider{background:#2f77ec}

/* Header logo: the mark and wordmark are inline-SVG paths with inline
   fill:rgb(26,112,198), too dim on the dark header. Brighten the blue;
   the thin white separation strokes stay. */
html[data-theme="dark"] .inline-header .logo svg path{fill:#5f9dfa !important}

/* Lease page "Lease Calculator" heading carries an inline #004ECC color */
html[data-theme="dark"] h2[style*="004ECC"]{color:#6ea8ff !important}

/* Mobile-width signing-mode highlights: the LOAN page's light CSS forces
   .row{background-color:#f8f9fa !important} under (max-width: 655px), which the
   generator mirrors into the shared dark sheet as
   html[data-theme="dark"] .row{background-color:#1d2a3b !important}. That rule
   also hits the LEASE page at phone widths and beats its inline yellow
   highlights (inline styles lose to !important), leaving near-black text on a
   dark row. Restore both exact yellows with more-specific !important rules;
   at desktop widths these match what the inline styles already paint. */
html[data-theme="dark"] .row[style*="FFE187"],
html[data-theme="dark"] .row[style*="rgb(255, 225, 135)"],
html[data-theme="dark"] .row.first-pmt-row,
html[data-theme="dark"] .row.added-to-adjusted-row{background-color:#FFE187 !important}
html[data-theme="dark"] .row[style*="FFCA2D"],
html[data-theme="dark"] .row[style*="rgb(255, 202, 45)"]{background-color:#FFCA2D !important}
/* Same leaked mobile rule vs the zero-due row's grey chrome (#dedede inline):
   the base-sheet remap targets it by id, which out-specifies .row — no fix
   needed there. */

}