/* ============================================================
   LONGEVITY — concept 07
   Theme: evergreen (#2D5F3F) · salmon (#E27B5A) · ocean (#1B5B7A) ·
   oat cream (#F4ECD8) · charcoal (#2A2622)
   Dark-mode-safe: "dark-toned text" variables remap to lighter
   cousins inside [data-theme="dark"]; decorative uses keep working.
   ============================================================ */

.page-longevity {
    --lg-cream:    #F4ECD8;
    --lg-cream-2:  #ECE0BD;
    --lg-evergreen:#2D5F3F;
    --lg-evergreen-d:#1E4530;
    --lg-salmon:   #E27B5A;
    --lg-salmon-d: #B85D3C;
    --lg-ocean:    #1B5B7A;
    --lg-ocean-d:  #114159;
    --lg-charcoal: #2A2622;
    --lg-mute:     #6F6253;
    --lg-rose:     #B23A48;
    --lg-warning:  #C9742B;

    --c-gold:    var(--lg-salmon);
    --c-bg:      var(--lg-cream);
    --c-ink:     var(--lg-charcoal);
    --c-mute:    var(--lg-mute);
    --c-accent:  var(--lg-evergreen);

    background: var(--lg-cream);
    color: var(--lg-charcoal);
}

[data-theme="dark"] .page-longevity,
[data-theme="dark"].page-longevity {
    --lg-cream:    #13140F;
    --lg-cream-2:  #1A1C15;
    --lg-charcoal: #EDE5CB;
    --lg-mute:     #B0A78B;
    /* lift dark-tone text variables for dark bg */
    --lg-evergreen:   #6FB389;
    --lg-evergreen-d: #4F9069;
    --lg-salmon-d:    #EE9A7D;
    --lg-ocean:       #6BA8C4;
    --lg-ocean-d:     #5092B0;
    --lg-rose:        #E27082;
    --lg-warning:     #E4A064;
    --c-bg:       #13140F;
    --c-ink:      #EDE5CB;
    --c-mute:     #B0A78B;
    background: #13140F;
    color: #EDE5CB;
}

/* shared building blocks --------------------------------- */
.lg-section { padding: var(--s-10, 4rem) 0; position: relative; }
.lg-section-head {
    max-width: 820px;
    margin: 0 auto var(--s-7, 2.5rem);
    text-align: center;
}
.lg-eyebrow {
    font-family: var(--f-mono, "JetBrains Mono", monospace);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lg-salmon-d);
    margin-bottom: var(--s-3, 0.75rem);
}
.lg-h2 {
    font-family: var(--f-serif, "Cormorant Garamond", serif);
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    line-height: 1.2;
    color: var(--lg-charcoal);
    margin-bottom: var(--s-4, 1rem);
    font-weight: 600;
}
.lg-h2 em { font-style: italic; color: var(--lg-evergreen); font-weight: 500; }
.lg-sub {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--lg-mute);
    max-width: 70ch;
    margin: 0 auto;
}
.lg-sub em { color: var(--lg-evergreen); font-style: italic; }
.lg-sub b  { color: var(--lg-charcoal); }
.lg-data {
    font-family: var(--f-mono, "JetBrains Mono", monospace);
    font-feature-settings: "tnum";
    letter-spacing: 0.01em;
}
.container.narrow { max-width: 800px; }

.lg-field { display: block; }
.lg-field-label {
    display: block;
    font-size: 0.92rem;
    color: var(--lg-charcoal);
    font-weight: 500;
    margin-bottom: 4px;
}
.lg-hint-inline {
    font-weight: 400;
    color: var(--lg-mute);
    font-size: 0.84em;
    font-style: italic;
}
.lg-data,
.lg-field input[type=number],
.lg-field input[type=text],
.lg-field select,
.lg-input-text {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid rgba(45, 95, 63, 0.3);
    border-radius: 4px;
    background: var(--lg-cream-2);
    color: var(--lg-charcoal);
    font-family: var(--f-mono, monospace);
    font-size: 1rem;
    box-sizing: border-box;
}
.lg-input-text { font-family: inherit; }
.lg-field input:focus,
.lg-field select:focus,
.lg-input-text:focus { outline: none; border-color: var(--lg-evergreen); }
[data-theme="dark"] .lg-field input,
[data-theme="dark"] .lg-field select,
[data-theme="dark"] .lg-input-text { background: #0E0F0B; color: #EDE5CB; }

.lg-slider {
    width: 100%;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    outline: none;
    background: rgba(45, 95, 63, 0.22);
}
.lg-slider::-webkit-slider-thumb {
    appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--lg-evergreen);
    border: 2px solid var(--lg-cream);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.lg-slider::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--lg-evergreen);
    border: 2px solid var(--lg-cream);
    cursor: pointer;
}

.lg-select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%232D5F3F'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    padding-right: 2.2rem !important;
}

/* fade-up shared --------------------------------------- */
.page-longevity .fade-up {
    opacity: 0; transform: translateY(16px);
    animation: lgFadeUp 0.7s ease-out forwards;
}
.page-longevity .fade-up.delay-1 { animation-delay: 0.12s; }
.page-longevity .fade-up.delay-2 { animation-delay: 0.24s; }
.page-longevity .fade-up.delay-3 { animation-delay: 0.36s; }
.page-longevity .fade-up.delay-4 { animation-delay: 0.48s; }
@keyframes lgFadeUp { to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   1. HERO
   ============================================================ */
.lg-hero {
    position: relative;
    min-height: 78vh;
    padding: var(--s-12, 5rem) 0 var(--s-10, 4rem);
    background: linear-gradient(180deg, var(--lg-cream) 0%, var(--lg-cream-2) 100%);
    overflow: hidden;
}
[data-theme="dark"] .lg-hero { background: linear-gradient(180deg, #13140F 0%, #1A1C15 100%); }
.lg-hero-canvas { position: absolute; inset: 0; color: var(--lg-evergreen); pointer-events: none; }
.lg-rings { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.7; }
.lg-ecg {
    position: absolute;
    left: 0; right: 0;
    bottom: 15%;
    height: 50px;
    width: 100%;
    color: var(--lg-salmon);
    opacity: 0.7;
}
.lg-ecg-line {
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
    animation: lgEcgDraw 8s linear infinite;
}
@keyframes lgEcgDraw { to { stroke-dashoffset: 0; } }

.lg-hero-content { position: relative; z-index: 1; max-width: 720px; }
.lg-hero-title {
    font-family: var(--f-serif, serif);
    font-size: clamp(2.4rem, 5.6vw, 4.4rem);
    line-height: 1.05;
    color: var(--lg-charcoal);
    margin: var(--s-4, 1rem) 0;
    font-weight: 600;
}
.lg-hero-title span, .lg-hero-title em { display: block; }
.lg-hero-title em {
    font-style: italic;
    color: var(--lg-evergreen);
    font-weight: 500;
    padding-left: 1.4em;
}
.lg-hero-line-3 { padding-left: 0.4em; }
.lg-hero-sub, .lg-hero-promise {
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--lg-mute);
    margin-bottom: var(--s-4, 1rem);
    max-width: 60ch;
}
.lg-hero-sub b { color: var(--lg-charcoal); font-weight: 600; }
.lg-hero-sub em, .lg-hero-promise em { color: var(--lg-salmon-d); font-style: italic; }
.lg-hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3, 0.75rem); margin-top: var(--s-6, 1.5rem); }

/* ============================================================
   2. ESTIMATOR
   ============================================================ */
.lg-estimator { background: var(--lg-cream-2); }
[data-theme="dark"] .lg-estimator { background: #1A1C15; }

.lg-est-form {
    max-width: 1100px;
    margin: 0 auto;
    background: var(--lg-cream);
    border: 1px solid rgba(45, 95, 63, 0.3);
    padding: var(--s-5, 1.25rem);
    border-radius: 4px;
}
[data-theme="dark"] .lg-est-form { background: #181A14; }

.lg-est-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--s-3, 0.75rem);
    margin-bottom: var(--s-4, 1rem);
}

.lg-est-result {
    max-width: 720px;
    margin: var(--s-5, 1.25rem) auto 0;
    padding: var(--s-5, 1.25rem);
    background: var(--lg-cream);
    border-left: 3px solid var(--lg-evergreen);
    border-radius: 4px;
    text-align: center;
}
[data-theme="dark"] .lg-est-result { background: #181A14; }
.lg-est-tag {
    font-family: var(--f-mono, monospace);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lg-salmon-d);
    margin-bottom: var(--s-3, 0.75rem);
}
.lg-est-num {
    font-family: var(--f-mono, monospace);
    font-size: 3.6rem;
    line-height: 1;
    color: var(--lg-evergreen);
    font-weight: 600;
    margin-bottom: var(--s-2, 0.5rem);
}
.lg-est-num.is-negative { color: var(--lg-rose); }
.lg-est-unit { font-size: 1.2rem; color: var(--lg-mute); font-weight: 400; }
.lg-est-synth {
    font-family: var(--f-serif, serif);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--lg-charcoal);
    max-width: 60ch;
    margin: 0 auto;
}

/* ============================================================
   3. FOUR HORSEMEN
   ============================================================ */
.lg-horsemen-form {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4, 1rem);
}
@media (max-width: 720px) { .lg-horsemen-form { grid-template-columns: 1fr; } }
.lg-horsemen-form > button,
.lg-horsemen-form > p { grid-column: 1 / -1; }

.lg-horseman {
    background: var(--lg-cream-2);
    border: 1px solid rgba(45, 95, 63, 0.3);
    border-left: 3px solid var(--lg-evergreen);
    padding: var(--s-4, 1rem);
    border-radius: 4px;
}
[data-theme="dark"] .lg-horseman { background: #181A14; }
.lg-horseman[data-h="cardio"]    { border-left-color: var(--lg-rose); }
.lg-horseman[data-h="cancer"]    { border-left-color: var(--lg-warning); }
.lg-horseman[data-h="neuro"]     { border-left-color: var(--lg-ocean); }
.lg-horseman[data-h="metabolic"] { border-left-color: var(--lg-evergreen); }
.lg-horseman h3 {
    font-family: var(--f-serif, serif);
    font-size: 1.3rem;
    color: var(--lg-charcoal);
    margin-bottom: var(--s-2, 0.5rem);
}
.lg-horseman-line {
    font-size: 0.94rem;
    color: var(--lg-mute);
    line-height: 1.5;
    margin-bottom: var(--s-3, 0.75rem);
}
.lg-horseman label { display: block; }
.lg-range-out {
    display: inline-block;
    margin-left: 8px;
    font-family: var(--f-mono, monospace);
    color: var(--lg-salmon-d);
    font-weight: 600;
}

.lg-horsemen-result {
    max-width: 800px;
    margin: var(--s-5, 1.25rem) auto 0;
    padding: var(--s-5, 1.25rem);
    background: var(--lg-cream);
    border-left: 3px solid var(--lg-salmon);
    border-radius: 4px;
}
[data-theme="dark"] .lg-horsemen-result { background: #181A14; }
.lg-horsemen-tag {
    font-family: var(--f-mono, monospace);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lg-salmon-d);
}
.lg-horsemen-top {
    font-family: var(--f-serif, serif);
    font-size: 2rem;
    color: var(--lg-evergreen);
    margin: var(--s-2, 0.5rem) 0;
    text-transform: capitalize;
}
.lg-horsemen-guidance {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--lg-charcoal);
}

/* ============================================================
   4. ZONE 2
   ============================================================ */
.lg-zone2 { background: var(--lg-cream-2); }
[data-theme="dark"] .lg-zone2 { background: #1A1C15; }
.lg-z2-form,
.lg-vo2-form,
.lg-prot-form,
.lg-str-form,
.lg-bh-form {
    max-width: 720px;
    margin: 0 auto;
    background: var(--lg-cream);
    border: 1px solid rgba(45, 95, 63, 0.3);
    padding: var(--s-5, 1.25rem);
    border-radius: 4px;
}
[data-theme="dark"] .lg-z2-form,
[data-theme="dark"] .lg-vo2-form,
[data-theme="dark"] .lg-prot-form,
[data-theme="dark"] .lg-str-form,
[data-theme="dark"] .lg-bh-form { background: #181A14; }
.lg-z2-row, .lg-vo2-row, .lg-prot-row, .lg-str-row, .lg-bh-grid, .lg-str-grid {
    display: grid;
    gap: var(--s-3, 0.75rem);
    margin-bottom: var(--s-3, 0.75rem);
}
.lg-z2-row { grid-template-columns: 1fr 1fr; }
.lg-vo2-row, .lg-prot-row { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.lg-str-row { grid-template-columns: 1fr 1fr; }
.lg-str-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lg-bh-grid  { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (max-width: 500px) {
    .lg-z2-row, .lg-str-row { grid-template-columns: 1fr; }
}

.lg-z2-result, .lg-vo2-result, .lg-prot-result, .lg-str-result, .lg-bh-result, .lg-sleep-result {
    max-width: 720px;
    margin: var(--s-5, 1.25rem) auto 0;
    padding: var(--s-5, 1.25rem);
    background: var(--lg-cream);
    border-left: 3px solid var(--lg-evergreen);
    border-radius: 4px;
    text-align: center;
}
[data-theme="dark"] .lg-z2-result,
[data-theme="dark"] .lg-vo2-result,
[data-theme="dark"] .lg-prot-result,
[data-theme="dark"] .lg-str-result,
[data-theme="dark"] .lg-bh-result,
[data-theme="dark"] .lg-sleep-result { background: #181A14; }

.lg-z2-tag, .lg-vo2-tag, .lg-prot-tag, .lg-sleep-tag, .lg-str-tag, .lg-bh-tag {
    font-family: var(--f-mono, monospace);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lg-salmon-d);
    margin-bottom: var(--s-2, 0.5rem);
}
.lg-z2-range, .lg-vo2-num, .lg-prot-num, .lg-bh-num {
    font-family: var(--f-mono, monospace);
    font-size: 3rem;
    color: var(--lg-evergreen);
    line-height: 1;
    margin-bottom: var(--s-2, 0.5rem);
    font-weight: 600;
}
.lg-bh-num { color: var(--lg-rose); }
.lg-z2-unit, .lg-vo2-unit, .lg-prot-unit, .lg-bh-unit { font-size: 1.1rem; color: var(--lg-mute); font-weight: 400; }
.lg-z2-note, .lg-vo2-note, .lg-prot-note, .lg-sleep-note, .lg-str-note, .lg-bh-note {
    font-size: 0.96rem;
    color: var(--lg-charcoal);
    line-height: 1.55;
    margin-top: var(--s-2, 0.5rem);
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}
.lg-z2-note em, .lg-vo2-note em, .lg-prot-note em, .lg-sleep-note em, .lg-str-note em, .lg-bh-note em {
    color: var(--lg-salmon-d); font-style: italic;
}

/* VO2 band */
.lg-vo2-band {
    font-family: var(--f-mono, monospace);
    font-size: 0.86rem;
    color: var(--lg-mute);
    letter-spacing: 0.06em;
    margin-bottom: var(--s-2, 0.5rem);
}
.lg-vo2-band-tag {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: var(--lg-evergreen);
    color: var(--lg-cream);
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.84rem;
    font-weight: 600;
}
.lg-vo2-band-tag.is-elite     { background: var(--lg-salmon); }
.lg-vo2-band-tag.is-excellent { background: var(--lg-evergreen); }
.lg-vo2-band-tag.is-good      { background: var(--lg-ocean); }
.lg-vo2-band-tag.is-average   { background: var(--lg-warning); color: #1A1410; }
.lg-vo2-band-tag.is-below     { background: var(--lg-warning); color: white; }
.lg-vo2-band-tag.is-poor      { background: var(--lg-rose); }

/* ============================================================
   5. SLEEP AUDIT
   ============================================================ */
.lg-sleep { background: var(--lg-cream-2); }
[data-theme="dark"] .lg-sleep { background: #1A1C15; }

.lg-sleep-form {
    max-width: 800px;
    margin: 0 auto;
    background: var(--lg-cream);
    border: 1px solid rgba(45, 95, 63, 0.3);
    padding: var(--s-5, 1.25rem);
    border-radius: 4px;
}
[data-theme="dark"] .lg-sleep-form { background: #181A14; }

.lg-sleep-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2, 0.5rem);
    margin-bottom: var(--s-3, 0.75rem);
}
@media (max-width: 600px) { .lg-sleep-list { grid-template-columns: 1fr; } }

.lg-check {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2, 0.5rem);
    padding: var(--s-2, 0.5rem) var(--s-3, 0.75rem);
    background: var(--lg-cream-2);
    border: 1px solid rgba(45, 95, 63, 0.2);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
}
[data-theme="dark"] .lg-check { background: #0F100B; }
.lg-check:hover { border-color: var(--lg-evergreen); }
.lg-check input { position: absolute; opacity: 0; pointer-events: none; }
.lg-check-box {
    flex: 0 0 16px;
    width: 16px; height: 16px;
    border: 2px solid var(--lg-mute);
    border-radius: 3px;
    margin-top: 2px;
    background: white;
    position: relative;
}
[data-theme="dark"] .lg-check-box { background: #0F100B; }
.lg-check input:checked ~ .lg-check-box {
    background: var(--lg-evergreen);
    border-color: var(--lg-evergreen);
}
.lg-check input:checked ~ .lg-check-box::after {
    content: '✓';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 11px;
    font-weight: bold;
}
.lg-check-text {
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--lg-charcoal);
}
.lg-check:has(input:checked) { background: rgba(45, 95, 63, 0.08); border-color: var(--lg-evergreen); }
[data-theme="dark"] .lg-check:has(input:checked) { background: rgba(111, 179, 137, 0.12); }

.lg-sleep-score, .lg-str-score {
    font-family: var(--f-mono, monospace);
    font-size: 3rem;
    color: var(--lg-evergreen);
    line-height: 1;
    font-weight: 600;
    margin-bottom: var(--s-2, 0.5rem);
}
.lg-sleep-of, .lg-str-of { font-size: 1.2rem; color: var(--lg-mute); }
.lg-sleep-band, .lg-str-band {
    font-family: var(--f-mono, monospace);
    font-size: 1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lg-salmon-d);
    margin-bottom: var(--s-3, 0.75rem);
}

/* ============================================================
   6. PROTEIN
   ============================================================ */
.lg-prot-examples {
    margin-top: var(--s-4, 1rem);
    padding-top: var(--s-3, 0.75rem);
    border-top: 1px dashed rgba(45, 95, 63, 0.3);
    text-align: left;
}
.lg-prot-ex-tag {
    font-family: var(--f-mono, monospace);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lg-salmon-d);
    margin-bottom: var(--s-2, 0.5rem);
}
.lg-prot-examples ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px var(--s-3, 0.75rem);
}
@media (max-width: 500px) { .lg-prot-examples ul { grid-template-columns: 1fr; } }
.lg-prot-examples li {
    padding: 3px 0 3px 14px;
    font-size: 0.92rem;
    color: var(--lg-charcoal);
    position: relative;
}
.lg-prot-examples li::before {
    content: '◆';
    color: var(--lg-salmon);
    position: absolute; left: 0;
    font-size: 0.7em;
    top: 5px;
}

/* ============================================================
   7. STRENGTH
   ============================================================ */

/* ============================================================
   8. BLUE ZONES
   ============================================================ */
.lg-bluezones { background: var(--lg-cream-2); }
[data-theme="dark"] .lg-bluezones { background: #1A1C15; }

.lg-bz-form {
    max-width: 1180px;
    margin: 0 auto;
}
.lg-bz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s-3, 0.75rem);
    margin-bottom: var(--s-4, 1rem);
}
.lg-bz-card {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2, 0.5rem);
    padding: var(--s-3, 0.75rem);
    background: var(--lg-cream);
    border: 1px solid rgba(45, 95, 63, 0.25);
    border-left: 3px solid var(--lg-salmon);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
[data-theme="dark"] .lg-bz-card { background: #181A14; }
.lg-bz-card:hover { transform: translateY(-1px); border-color: var(--lg-evergreen); }
.lg-bz-card:has(input:checked) {
    border-left-color: var(--lg-evergreen);
    background: rgba(45, 95, 63, 0.06);
}
[data-theme="dark"] .lg-bz-card:has(input:checked) { background: rgba(111, 179, 137, 0.1); }
.lg-bz-card input { position: absolute; opacity: 0; pointer-events: none; }
.lg-bz-mark {
    flex: 0 0 16px;
    width: 16px; height: 16px;
    border: 2px solid var(--lg-mute);
    border-radius: 3px;
    margin-top: 2px;
    background: white;
    position: relative;
}
[data-theme="dark"] .lg-bz-mark { background: #0F100B; }
.lg-bz-card input:checked ~ .lg-bz-mark {
    background: var(--lg-evergreen);
    border-color: var(--lg-evergreen);
}
.lg-bz-card input:checked ~ .lg-bz-mark::after {
    content: '✓';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 11px;
    font-weight: bold;
}
.lg-bz-content {
    font-size: 0.94rem;
    line-height: 1.5;
    color: var(--lg-charcoal);
}
.lg-bz-content b { color: var(--lg-evergreen); }
.lg-bz-pledge {
    display: block;
    max-width: 720px;
    margin: var(--s-4, 1rem) auto;
    background: var(--lg-cream);
    border: 1px solid rgba(45, 95, 63, 0.3);
    border-radius: 4px;
    padding: var(--s-4, 1rem);
}
[data-theme="dark"] .lg-bz-pledge { background: #181A14; }
.lg-bz-pledge .lg-field-label { color: var(--lg-evergreen); }

/* ============================================================
   9. BAD HABITS
   ============================================================ */
.lg-bh-breakdown {
    list-style: none;
    padding: 0;
    margin: var(--s-3, 0.75rem) 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}
.lg-bh-breakdown li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 12px;
    background: var(--lg-cream-2);
    border-radius: 3px;
    font-size: 0.92rem;
    color: var(--lg-charcoal);
}
[data-theme="dark"] .lg-bh-breakdown li { background: #0F100B; }
.lg-bh-breakdown li.is-zero { opacity: 0.4; }
.lg-bh-line-num {
    font-family: var(--f-mono, monospace);
    color: var(--lg-rose);
    font-weight: 600;
}

/* ============================================================
   10. DAILY COMMITMENTS
   ============================================================ */
.lg-habits { background: var(--lg-cream-2); }
[data-theme="dark"] .lg-habits { background: #1A1C15; }

.lg-habit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--s-3, 0.75rem);
    max-width: 1280px;
    margin: 0 auto;
}
.lg-habit-card {
    background: var(--lg-cream);
    border: 1px solid rgba(45, 95, 63, 0.3);
    border-left: 3px solid var(--lg-salmon);
    padding: var(--s-4, 1rem);
    border-radius: 4px;
    transition: all 0.2s;
}
[data-theme="dark"] .lg-habit-card { background: #181A14; }
.lg-habit-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(45, 95, 63, 0.1); }
.lg-habit-card.is-committed {
    border-left-color: var(--lg-evergreen);
    background: rgba(45, 95, 63, 0.05);
}
[data-theme="dark"] .lg-habit-card.is-committed { background: rgba(111, 179, 137, 0.08); }
.lg-habit-card h3 {
    font-family: var(--f-serif, serif);
    font-size: 1.2rem;
    color: var(--lg-charcoal);
    margin-bottom: var(--s-2, 0.5rem);
}
.lg-habit-line {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--lg-mute);
    margin-bottom: var(--s-3, 0.75rem);
}
.lg-habit-action {
    width: 100%;
    background: transparent;
    border: 1px solid var(--lg-evergreen);
    color: var(--lg-evergreen);
    padding: 0.5rem 0.8rem;
    border-radius: 3px;
    font-family: var(--f-mono, monospace);
    font-size: 0.84rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.15s;
}
.lg-habit-action:hover { background: var(--lg-evergreen); color: white; }
.lg-habit-tick {
    background: var(--lg-evergreen);
    color: white;
    border-color: var(--lg-evergreen);
}
.lg-habit-tick:hover { background: var(--lg-salmon); border-color: var(--lg-salmon); }
.lg-habit-streak {
    margin-top: var(--s-2, 0.5rem) !important;
    text-align: center;
    font-family: var(--f-mono, monospace);
    font-size: 0.84rem !important;
    color: var(--lg-evergreen) !important;
    font-weight: 500;
}

/* ============================================================
   11. VOICES — keeps own dark palette
   ============================================================ */
.lg-voices {
    background: linear-gradient(180deg, #114159 0%, #082E40 100%);
    color: #F4ECD8;
}
.lg-voices .lg-h2 { color: #F4ECD8; }
.lg-voices .lg-h2 em { color: #E27B5A; }
.lg-voices .lg-eyebrow { color: #E27B5A; }
.lg-voices .lg-sub { color: rgba(244, 236, 216, 0.78); }
.lg-voices .lg-sub em { color: #E27B5A; }

.lg-quote-card {
    background: rgba(244, 236, 216, 0.06);
    border: 1px solid rgba(226, 123, 90, 0.3);
    padding: var(--s-7, 2.5rem) var(--s-6, 1.5rem);
    border-radius: 4px;
    text-align: center;
    position: relative;
}
.lg-quote-mark {
    font-family: var(--f-serif, serif);
    font-size: 5rem;
    color: #E27B5A;
    line-height: 1;
    margin-bottom: var(--s-2, 0.5rem);
    opacity: 0.7;
}
.lg-quote-text {
    font-family: var(--f-serif, serif);
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    line-height: 1.5;
    color: #F4ECD8;
    margin-bottom: var(--s-4, 1rem);
    font-style: italic;
    font-weight: 400;
}
.lg-quote-cite { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--s-4, 1rem); }
.lg-quote-author {
    font-family: var(--f-mono, monospace);
    font-size: 0.92rem;
    color: #E27B5A;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.lg-quote-source { font-size: 0.84rem; color: rgba(244, 236, 216, 0.55); font-style: italic; }
.lg-quote-actions { display: flex; justify-content: center; gap: var(--s-3, 0.75rem); flex-wrap: wrap; }
.lg-quote-fav {
    background: transparent;
    border: 1px solid rgba(226, 123, 90, 0.4);
    color: #F4ECD8;
    padding: 0.5rem 1rem;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    transition: all 0.15s;
}
.lg-quote-fav:hover         { border-color: #E27B5A; color: #E27B5A; }
.lg-quote-fav.is-favorited  { background: #E27B5A; color: #114159; border-color: #E27B5A; }

/* ============================================================
   12. FINAL
   ============================================================ */
.lg-final { background: var(--lg-cream); text-align: center; padding: var(--s-12, 5rem) 0; }
[data-theme="dark"] .lg-final { background: #13140F; }
.lg-final-mark {
    font-family: var(--f-serif, serif);
    font-size: 3.6rem;
    color: var(--lg-evergreen);
    line-height: 1;
    margin-bottom: var(--s-4, 1rem);
}
.lg-final-quote {
    font-family: var(--f-serif, serif);
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    line-height: 1.4;
    color: var(--lg-charcoal);
    font-style: italic;
    max-width: 800px;
    margin: 0 auto var(--s-3, 0.75rem);
    font-weight: 500;
}
.lg-final-quote em { color: var(--lg-salmon-d); font-style: italic; }
.lg-final-cite {
    font-family: var(--f-mono, monospace);
    font-size: 0.92rem;
    color: var(--lg-mute);
    letter-spacing: 0.08em;
    margin-bottom: var(--s-5, 1.25rem);
}