/* ============================================================
   FLOW STATE — concept 08
   Theme: indigo (#2B3D6B) · coral (#D89B5C) · slate (#5C6F88) ·
   parchment cream (#F2EBDD) · charcoal (#1F1A18)
   Dark-mode-safe variable remap inside [data-theme="dark"].
   ============================================================ */

.page-flow-state {
    --fl-cream:     #F2EBDD;
    --fl-cream-2:   #E7DEC8;
    --fl-indigo:    #2B3D6B;
    --fl-indigo-d:  #1A284E;
    --fl-coral:     #D89B5C;
    --fl-coral-d:   #B0763C;
    --fl-slate:     #5C6F88;
    --fl-slate-d:   #3F5066;
    --fl-charcoal:  #1F1A18;
    --fl-mute:      #6A604F;
    --fl-rose:      #B23A48;
    --fl-warning:   #C9742B;

    --c-gold:    var(--fl-coral);
    --c-bg:      var(--fl-cream);
    --c-ink:     var(--fl-charcoal);
    --c-mute:    var(--fl-mute);
    --c-accent:  var(--fl-indigo);

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

[data-theme="dark"] .page-flow-state,
[data-theme="dark"].page-flow-state {
    --fl-cream:    #0F1118;
    --fl-cream-2:  #161A23;
    --fl-charcoal: #EDE5CB;
    --fl-mute:     #ADA890;
    /* lift dark-tone variables to lighter cousins for dark bg */
    --fl-indigo:   #8DA6D8;
    --fl-indigo-d: #6883B5;
    --fl-coral-d:  #EAB078;
    --fl-slate:    #8B9DB4;
    --fl-slate-d:  #6F8298;
    --fl-rose:     #E27082;
    --fl-warning:  #E4A064;
    --c-bg:        #0F1118;
    --c-ink:       #EDE5CB;
    --c-mute:      #ADA890;
    background: #0F1118;
    color: #EDE5CB;
}

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

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

.fl-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='%232B3D6B'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    padding-right: 2.2rem !important;
}

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

/* checkboxes / radios shared --- */
.fl-check {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2, 0.5rem);
    padding: var(--s-3, 0.75rem);
    background: var(--fl-cream);
    border: 1px solid rgba(43, 61, 107, 0.22);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}
[data-theme="dark"] .fl-check { background: #14182A; }
.fl-check:hover { border-color: var(--fl-indigo); }
.fl-check input { position: absolute; opacity: 0; pointer-events: none; }
.fl-check-box {
    flex: 0 0 16px;
    width: 16px; height: 16px;
    border: 2px solid var(--fl-mute);
    border-radius: 3px;
    margin-top: 2px;
    background: white;
    position: relative;
}
[data-theme="dark"] .fl-check-box { background: #0B0D14; }
.fl-check input:checked ~ .fl-check-box {
    background: var(--fl-indigo);
    border-color: var(--fl-indigo);
}
.fl-check input:checked ~ .fl-check-box::after {
    content: '✓';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 11px;
    font-weight: bold;
}
.fl-check-text {
    font-size: 0.94rem;
    line-height: 1.5;
    color: var(--fl-charcoal);
}
.fl-check-text b { color: var(--fl-indigo); }
.fl-check:has(input:checked) { background: rgba(43, 61, 107, 0.07); border-color: var(--fl-indigo); }
[data-theme="dark"] .fl-check:has(input:checked) { background: rgba(141, 166, 216, 0.12); }

.fl-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 1rem;
    background: var(--fl-cream);
    border: 1px solid rgba(43, 61, 107, 0.3);
    border-radius: 20px;
    cursor: pointer;
    font-family: var(--f-mono, monospace);
    font-size: 0.86rem;
    color: var(--fl-charcoal);
    transition: all 0.15s;
}
[data-theme="dark"] .fl-radio { background: #14182A; }
.fl-radio:hover { border-color: var(--fl-indigo); }
.fl-radio input { position: absolute; opacity: 0; pointer-events: none; }
.fl-radio-mark {
    width: 12px; height: 12px;
    border: 2px solid var(--fl-mute);
    border-radius: 50%;
    background: white;
    position: relative;
}
[data-theme="dark"] .fl-radio-mark { background: #0B0D14; }
.fl-radio input:checked ~ .fl-radio-mark { border-color: var(--fl-coral); }
.fl-radio input:checked ~ .fl-radio-mark::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 6px; height: 6px;
    background: var(--fl-coral);
    border-radius: 50%;
}
.fl-radio:has(input:checked) {
    background: var(--fl-indigo);
    color: white;
    border-color: var(--fl-indigo);
}
.fl-radio:has(input:checked) .fl-radio-mark { border-color: white; }
.fl-radio:has(input:checked) .fl-radio-mark::after { background: white; }

/* result blocks shared --- */
.fl-result-tag {
    font-family: var(--f-mono, monospace);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fl-coral-d);
    margin-bottom: var(--s-2, 0.5rem);
}
.fl-result-num {
    font-family: var(--f-mono, monospace);
    font-size: 3rem;
    color: var(--fl-indigo);
    font-weight: 600;
    line-height: 1;
    margin-bottom: var(--s-2, 0.5rem);
}
.fl-result-of { font-size: 1.2rem; color: var(--fl-mute); font-weight: 400; }
.fl-result-band {
    font-family: var(--f-mono, monospace);
    font-size: 1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fl-coral-d);
    margin-bottom: var(--s-3, 0.75rem);
}
.fl-result-note {
    font-size: 0.96rem;
    color: var(--fl-charcoal);
    line-height: 1.55;
    max-width: 60ch;
    margin: 0 auto;
}
.fl-result-note em { color: var(--fl-coral-d); font-style: italic; }
.fl-result-synth {
    font-family: var(--f-serif, serif);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--fl-charcoal);
    max-width: 60ch;
    margin: 0 auto;
}

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

/* ============================================================
   1. HERO
   ============================================================ */
.fl-hero {
    position: relative;
    min-height: 78vh;
    padding: var(--s-12, 5rem) 0 var(--s-10, 4rem);
    background: linear-gradient(180deg, var(--fl-cream) 0%, var(--fl-cream-2) 100%);
    overflow: hidden;
}
[data-theme="dark"] .fl-hero { background: linear-gradient(180deg, #0F1118 0%, #161A23 100%); }
.fl-hero-canvas { position: absolute; inset: 0; color: var(--fl-indigo); pointer-events: none; }
.fl-channel-bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.7; }
.fl-spark {
    position: absolute;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    height: 220px;
    animation: flSparkPulse 4s ease-in-out infinite;
}
@keyframes flSparkPulse {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.04); }
}
.fl-spark-rings circle {
    transform-origin: 100px 100px;
    animation: flSparkBreath 5s ease-in-out infinite;
}
.fl-spark-rings circle:nth-child(2) { animation-delay: 0.2s; }
.fl-spark-rings circle:nth-child(3) { animation-delay: 0.4s; }
.fl-spark-rings circle:nth-child(4) { animation-delay: 0.6s; }
@keyframes flSparkBreath {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.85; }
}

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

/* ============================================================
   2. FLOW CHANNEL plot
   ============================================================ */
.fl-channel { background: var(--fl-cream-2); }
[data-theme="dark"] .fl-channel { background: #161A23; }

.fl-channel-stage {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--s-6, 1.5rem);
    max-width: 1180px;
    margin: 0 auto;
    align-items: start;
}
@media (max-width: 880px) { .fl-channel-stage { grid-template-columns: 1fr; } }

.fl-channel-form,
.fl-channel-plot {
    background: var(--fl-cream);
    border: 1px solid rgba(43, 61, 107, 0.3);
    padding: var(--s-5, 1.25rem);
    border-radius: 4px;
}
[data-theme="dark"] .fl-channel-form,
[data-theme="dark"] .fl-channel-plot { background: #14182A; }

.fl-slider-row { margin-bottom: var(--s-4, 1rem); }
.fl-slider-row label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}
.fl-slider-label { font-size: 0.92rem; color: var(--fl-charcoal); font-weight: 500; }
.fl-slider-value { font-family: var(--f-mono, monospace); color: var(--fl-coral-d); font-weight: 600; }

.fl-plot-svg { width: 100%; height: auto; max-width: 340px; display: block; margin: 0 auto; }
.fl-plot-label {
    font-family: var(--f-mono, monospace);
    font-size: 9px;
    fill: var(--fl-mute);
    text-anchor: middle;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.fl-plot-label-flow { fill: var(--fl-coral-d); font-weight: 700; }
.fl-plot-label-mute { opacity: 0.3; }
.fl-plot-axis {
    font-family: var(--f-mono, monospace);
    font-size: 8px;
    fill: var(--fl-mute);
    letter-spacing: 0.16em;
}
.fl-channel-readout {
    text-align: center;
    margin-top: var(--s-3, 0.75rem);
    font-family: var(--f-serif, serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--fl-charcoal);
}

/* ============================================================
   3. CHARACTERISTICS
   ============================================================ */
.fl-chars-form, .fl-trig-form, .fl-dark-form, .fl-auto-form, .fl-sess-form, .fl-dist-form, .fl-stack-form, .fl-rit-form {
    max-width: 1100px;
    margin: 0 auto;
    background: var(--fl-cream);
    border: 1px solid rgba(43, 61, 107, 0.3);
    padding: var(--s-5, 1.25rem);
    border-radius: 4px;
}
[data-theme="dark"] .fl-chars-form,
[data-theme="dark"] .fl-trig-form,
[data-theme="dark"] .fl-dark-form,
[data-theme="dark"] .fl-auto-form,
[data-theme="dark"] .fl-sess-form,
[data-theme="dark"] .fl-dist-form,
[data-theme="dark"] .fl-stack-form,
[data-theme="dark"] .fl-rit-form { background: #14182A; }

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

.fl-chars-result,
.fl-trig-result,
.fl-auto-result,
.fl-stack-result {
    max-width: 800px;
    margin: var(--s-5, 1.25rem) auto 0;
    padding: var(--s-5, 1.25rem);
    background: var(--fl-cream);
    border-left: 3px solid var(--fl-indigo);
    border-radius: 4px;
    text-align: center;
}
[data-theme="dark"] .fl-chars-result,
[data-theme="dark"] .fl-trig-result,
[data-theme="dark"] .fl-auto-result,
[data-theme="dark"] .fl-stack-result { background: #14182A; }

/* ============================================================
   4. TRIGGERS
   ============================================================ */
.fl-triggers { background: var(--fl-cream-2); }
[data-theme="dark"] .fl-triggers { background: #161A23; }

.fl-trig-section {
    margin-bottom: var(--s-4, 1rem);
    padding-bottom: var(--s-3, 0.75rem);
    border-bottom: 1px dashed rgba(43, 61, 107, 0.3);
}
.fl-trig-section:last-of-type { border-bottom: none; }
.fl-trig-h {
    font-family: var(--f-mono, monospace);
    font-size: 0.86rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fl-coral-d);
    margin-bottom: var(--s-3, 0.75rem);
}
.fl-trig-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2, 0.5rem);
}
@media (max-width: 700px) { .fl-trig-grid { grid-template-columns: 1fr; } }

/* ============================================================
   5. DARK SIDE
   ============================================================ */
.fl-darkside {
    background: linear-gradient(180deg, var(--fl-cream-2) 0%, var(--fl-cream) 100%);
    position: relative;
}
[data-theme="dark"] .fl-darkside { background: linear-gradient(180deg, #161A23 0%, #0F1118 100%); }
.fl-darkside::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--fl-rose), var(--fl-warning), var(--fl-indigo));
}

.fl-dark-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3, 0.75rem);
    margin-bottom: var(--s-4, 1rem);
}
@media (max-width: 800px) { .fl-dark-grid { grid-template-columns: 1fr; } }

.fl-dark-card {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2, 0.5rem);
    padding: var(--s-4, 1rem);
    background: var(--fl-cream-2);
    border: 1px solid rgba(178, 58, 72, 0.25);
    border-left: 3px solid var(--fl-rose);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}
[data-theme="dark"] .fl-dark-card { background: #1B1A20; }
.fl-dark-card:hover { transform: translateY(-1px); }
.fl-dark-card:has(input:checked) {
    background: rgba(178, 58, 72, 0.06);
    border-left-color: var(--fl-coral);
}
[data-theme="dark"] .fl-dark-card:has(input:checked) { background: rgba(226, 112, 130, 0.1); }

.fl-dark-card input { position: absolute; opacity: 0; pointer-events: none; }
.fl-dark-mark {
    flex: 0 0 16px;
    width: 16px; height: 16px;
    border: 2px solid var(--fl-mute);
    border-radius: 3px;
    margin-top: 2px;
    background: white;
    position: relative;
}
[data-theme="dark"] .fl-dark-mark { background: #0B0D14; }
.fl-dark-card input:checked ~ .fl-dark-mark {
    background: var(--fl-rose);
    border-color: var(--fl-rose);
}
.fl-dark-card input:checked ~ .fl-dark-mark::after {
    content: '✓';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 11px;
    font-weight: bold;
}
.fl-dark-body {
    font-size: 0.94rem;
    line-height: 1.55;
    color: var(--fl-charcoal);
}
.fl-dark-body b { color: var(--fl-rose); }
.fl-dark-body em { color: var(--fl-coral-d); font-style: italic; }

.fl-dark-pick {
    display: block;
    max-width: 700px;
    margin: var(--s-4, 1rem) auto;
    padding: var(--s-4, 1rem);
    background: var(--fl-cream);
    border-radius: 4px;
    border: 1px solid rgba(43, 61, 107, 0.3);
}
[data-theme="dark"] .fl-dark-pick { background: #14182A; }

/* ============================================================
   6. AUTOTELIC
   ============================================================ */
.fl-autotelic { background: var(--fl-cream-2); }
[data-theme="dark"] .fl-autotelic { background: #161A23; }

.fl-auto-list { display: flex; flex-direction: column; gap: var(--s-2, 0.5rem); margin-bottom: var(--s-3, 0.75rem); }

/* ============================================================
   7. SESSION LOG
   ============================================================ */
.fl-sess-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--s-3, 0.75rem);
    margin-bottom: var(--s-3, 0.75rem);
}
.fl-sess-row:nth-of-type(2) {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
@media (max-width: 600px) { .fl-sess-row { grid-template-columns: 1fr; } }

.fl-sess-totals {
    max-width: 720px;
    margin: var(--s-5, 1.25rem) auto 0;
    padding: var(--s-4, 1rem);
    background: var(--fl-cream);
    border-left: 3px solid var(--fl-coral);
    border-radius: 4px;
}
[data-theme="dark"] .fl-sess-totals { background: #14182A; }
.fl-totals-tag {
    font-family: var(--f-mono, monospace);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fl-coral-d);
    margin-bottom: var(--s-3, 0.75rem);
    text-align: center;
}
.fl-totals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3, 0.75rem);
}
@media (max-width: 500px) { .fl-totals-grid { grid-template-columns: 1fr; } }
.fl-total-block { text-align: center; }
.fl-total-num {
    font-family: var(--f-mono, monospace);
    font-size: 2.2rem;
    color: var(--fl-indigo);
    font-weight: 600;
    line-height: 1;
    margin-bottom: 4px;
}
.fl-total-label {
    font-family: var(--f-mono, monospace);
    font-size: 0.78rem;
    color: var(--fl-mute);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fl-sess-recent {
    max-width: 720px;
    margin: var(--s-4, 1rem) auto 0;
}
.fl-sess-recent h3 {
    font-family: var(--f-mono, monospace);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fl-coral-d);
    margin-bottom: var(--s-3, 0.75rem);
    text-align: center;
}
.fl-sess-recent ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2, 0.5rem); }
.fl-sess-recent li {
    background: var(--fl-cream);
    border-left: 2px solid var(--fl-indigo);
    padding: var(--s-2, 0.5rem) var(--s-3, 0.75rem);
    border-radius: 0 4px 4px 0;
}
[data-theme="dark"] .fl-sess-recent li { background: #14182A; }
.fl-sess-line { font-size: 0.92rem; color: var(--fl-charcoal); margin-bottom: 2px; }
.fl-sess-line b { color: var(--fl-indigo); }
.fl-sess-date {
    font-family: var(--f-mono, monospace);
    font-size: 0.76rem;
    color: var(--fl-mute);
    letter-spacing: 0.06em;
}

/* ============================================================
   8. DISTRACTION
   ============================================================ */
.fl-distraction { background: var(--fl-cream-2); }
[data-theme="dark"] .fl-distraction { background: #161A23; }

.fl-dist-result {
    max-width: 800px;
    margin: var(--s-5, 1.25rem) auto 0;
    padding: var(--s-5, 1.25rem);
    background: var(--fl-cream);
    border-left: 3px solid var(--fl-rose);
    border-radius: 4px;
}
[data-theme="dark"] .fl-dist-result { background: #14182A; }
.fl-dist-blocks {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: var(--s-3, 0.75rem);
    margin-bottom: var(--s-3, 0.75rem);
    padding-bottom: var(--s-3, 0.75rem);
    border-bottom: 1px dashed rgba(43, 61, 107, 0.3);
}
@media (max-width: 600px) { .fl-dist-blocks { grid-template-columns: 1fr; } }
.fl-dist-block { text-align: center; }
.fl-dist-num {
    font-family: var(--f-mono, monospace);
    font-size: 1.8rem;
    color: var(--fl-charcoal);
    font-weight: 600;
    line-height: 1;
    margin-bottom: 4px;
}
.fl-dist-big .fl-dist-num { font-size: 3rem; color: var(--fl-rose); }
.fl-dist-label {
    font-family: var(--f-mono, monospace);
    font-size: 0.8rem;
    color: var(--fl-mute);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.fl-dist-note {
    font-size: 0.96rem;
    color: var(--fl-charcoal);
    line-height: 1.55;
}
.fl-dist-note em { color: var(--fl-coral-d); font-style: italic; }

/* ============================================================
   9. FLOW STACK
   ============================================================ */
.fl-stack-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-3, 0.75rem);
    max-width: 1280px;
    margin: 0 auto var(--s-5, 1.25rem);
}
@media (max-width: 900px) { .fl-stack-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .fl-stack-grid { grid-template-columns: 1fr; } }
.fl-stack-card {
    background: var(--fl-cream);
    border: 1px solid rgba(43, 61, 107, 0.3);
    border-top: 3px solid var(--fl-indigo);
    padding: var(--s-4, 1rem);
    border-radius: 4px;
}
[data-theme="dark"] .fl-stack-card { background: #14182A; }
.fl-stack-card[data-phase="struggle"] { border-top-color: var(--fl-rose); }
.fl-stack-card[data-phase="release"]  { border-top-color: var(--fl-slate); }
.fl-stack-card[data-phase="flow"]     { border-top-color: var(--fl-coral); }
.fl-stack-card[data-phase="recovery"] { border-top-color: var(--fl-indigo); }
.fl-stack-num {
    font-family: var(--f-mono, monospace);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fl-coral-d);
    margin-bottom: var(--s-2, 0.5rem);
}
.fl-stack-card h3 {
    font-family: var(--f-serif, serif);
    font-size: 1.35rem;
    color: var(--fl-charcoal);
    margin-bottom: var(--s-2, 0.5rem);
}
.fl-stack-card p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--fl-mute);
    margin-bottom: var(--s-2, 0.5rem);
}
.fl-stack-card p em { color: var(--fl-coral-d); font-style: italic; }
.fl-stack-do {
    background: var(--fl-cream-2);
    padding: var(--s-2, 0.5rem) var(--s-3, 0.75rem);
    border-radius: 3px;
    color: var(--fl-charcoal) !important;
}
[data-theme="dark"] .fl-stack-do { background: #0F1118; }
.fl-stack-do b { color: var(--fl-indigo); }

.fl-stack-form { max-width: 720px; }
.fl-stack-q {
    font-family: var(--f-serif, serif);
    font-size: 1.1rem;
    color: var(--fl-charcoal);
    margin-bottom: var(--s-3, 0.75rem);
    font-style: italic;
}
.fl-stack-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2, 0.5rem);
    margin-bottom: var(--s-3, 0.75rem);
}

/* ============================================================
   10. RITUAL
   ============================================================ */
.fl-ritual { background: var(--fl-cream-2); }
[data-theme="dark"] .fl-ritual { background: #161A23; }

.fl-rit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2, 0.5rem);
    margin-bottom: var(--s-3, 0.75rem);
}
@media (max-width: 600px) { .fl-rit-grid { grid-template-columns: 1fr; } }
.fl-rit-item {
    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(--fl-cream-2);
    border: 1px solid rgba(43, 61, 107, 0.2);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
}
[data-theme="dark"] .fl-rit-item { background: #0F1118; }
.fl-rit-item:hover { border-color: var(--fl-indigo); }
.fl-rit-item input { position: absolute; opacity: 0; pointer-events: none; }
.fl-rit-item input:checked ~ .fl-check-box {
    background: var(--fl-coral);
    border-color: var(--fl-coral);
}
.fl-rit-item input:checked ~ .fl-check-box::after {
    content: '✓';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 11px;
    font-weight: bold;
}
.fl-rit-label {
    font-size: 0.92rem;
    color: var(--fl-charcoal);
    line-height: 1.4;
}
.fl-rit-item:has(input:checked) { background: rgba(216, 155, 92, 0.1); border-color: var(--fl-coral); }
[data-theme="dark"] .fl-rit-item:has(input:checked) { background: rgba(216, 155, 92, 0.15); }

.fl-rit-tracker {
    max-width: 1100px;
    margin: var(--s-5, 1.25rem) auto 0;
    text-align: center;
    padding: var(--s-4, 1rem);
    background: var(--fl-cream);
    border-radius: 4px;
    border: 1px solid rgba(43, 61, 107, 0.3);
}
[data-theme="dark"] .fl-rit-tracker { background: #14182A; }
.fl-rit-streak {
    margin-top: var(--s-3, 0.75rem);
    font-family: var(--f-mono, monospace);
    font-size: 0.96rem;
    color: var(--fl-coral-d);
    font-weight: 500;
}

/* ============================================================
   11. VOICES — own dark palette
   ============================================================ */
.fl-voices {
    background: linear-gradient(180deg, #1A284E 0%, #0F1936 100%);
    color: #F2EBDD;
}
.fl-voices .fl-h2 { color: #F2EBDD; }
.fl-voices .fl-h2 em { color: #D89B5C; }
.fl-voices .fl-eyebrow { color: #D89B5C; }
.fl-voices .fl-sub { color: rgba(242, 235, 221, 0.78); }
.fl-voices .fl-sub em { color: #D89B5C; }

.fl-quote-card {
    background: rgba(242, 235, 221, 0.06);
    border: 1px solid rgba(216, 155, 92, 0.3);
    padding: var(--s-7, 2.5rem) var(--s-6, 1.5rem);
    border-radius: 4px;
    text-align: center;
    position: relative;
}
.fl-quote-mark {
    font-family: var(--f-serif, serif);
    font-size: 5rem;
    color: #D89B5C;
    line-height: 1;
    margin-bottom: var(--s-2, 0.5rem);
    opacity: 0.7;
}
.fl-quote-text {
    font-family: var(--f-serif, serif);
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    line-height: 1.5;
    color: #F2EBDD;
    margin-bottom: var(--s-4, 1rem);
    font-style: italic;
    font-weight: 400;
}
.fl-quote-cite { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--s-4, 1rem); }
.fl-quote-author {
    font-family: var(--f-mono, monospace);
    font-size: 0.92rem;
    color: #D89B5C;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.fl-quote-source { font-size: 0.84rem; color: rgba(242, 235, 221, 0.55); font-style: italic; }
.fl-quote-actions { display: flex; justify-content: center; gap: var(--s-3, 0.75rem); flex-wrap: wrap; }
.fl-quote-fav {
    background: transparent;
    border: 1px solid rgba(216, 155, 92, 0.4);
    color: #F2EBDD;
    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;
}
.fl-quote-fav:hover         { border-color: #D89B5C; color: #D89B5C; }
.fl-quote-fav.is-favorited  { background: #D89B5C; color: #1A284E; border-color: #D89B5C; }

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