/**
 * Demian Solar Assessment
 * Premium Frontend Interface
 *
 * Part 1:
 * - Design variables
 * - Plugin reset
 * - Main application container
 * - Header
 * - Progress indicator
 * - Step navigation
 * - Main wizard layout
 * - Basic form container
 */

/* =========================================================
   1. DESIGN SYSTEM
   ========================================================= */

:root {
    --dsa-primary: #0754a6;
    --dsa-primary-dark: #033b78;
    --dsa-primary-light: #eaf4ff;
    --dsa-primary-lighter: #f5faff;

    --dsa-accent: #ffd84d;
    --dsa-accent-dark: #ddb51e;
    --dsa-accent-light: #fff8d8;

    --dsa-success: #16855b;
    --dsa-success-light: #ecf9f3;

    --dsa-warning: #c97500;
    --dsa-warning-light: #fff6e7;

    --dsa-danger: #bd3731;
    --dsa-danger-light: #fff0ef;

    --dsa-info: #0870aa;
    --dsa-info-light: #edf8ff;

    --dsa-heading: #10243c;
    --dsa-text: #24364b;
    --dsa-muted: #647386;
    --dsa-light-text: #8490a0;

    --dsa-white: #ffffff;
    --dsa-page: #f4f7fa;
    --dsa-surface: #ffffff;
    --dsa-soft-surface: #f7fafd;

    --dsa-border: #dce5ee;
    --dsa-border-dark: #c8d4e0;

    --dsa-shadow-small:
        0 8px 24px rgba(16, 36, 60, 0.07);

    --dsa-shadow-medium:
        0 18px 45px rgba(16, 36, 60, 0.11);

    --dsa-shadow-primary:
        0 15px 32px rgba(7, 84, 166, 0.20);

    --dsa-radius-small: 10px;
    --dsa-radius-medium: 16px;
    --dsa-radius-large: 24px;
    --dsa-radius-round: 999px;

    --dsa-transition: 180ms ease;
}


/* =========================================================
   2. PLUGIN RESET
   Keeps the WordPress theme from distorting the software
   ========================================================= */

.dsa-assessment-app,
.dsa-assessment-app *,
.dsa-assessment-app *::before,
.dsa-assessment-app *::after {
    box-sizing: border-box;
}

.dsa-assessment-app {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 8px 0 40px;
    color: var(--dsa-text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

.dsa-assessment-app h1,
.dsa-assessment-app h2,
.dsa-assessment-app h3,
.dsa-assessment-app h4,
.dsa-assessment-app h5,
.dsa-assessment-app h6 {
    margin-top: 0;
    color: var(--dsa-heading);
    font-family: inherit;
    font-weight: 800;
    line-height: 1.18;
}

.dsa-assessment-app p {
    margin-top: 0;
}

.dsa-assessment-app button,
.dsa-assessment-app input,
.dsa-assessment-app select,
.dsa-assessment-app textarea {
    font-family: inherit;
}

.dsa-assessment-app button {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.dsa-assessment-app button:disabled {
    cursor: not-allowed;
}

.dsa-assessment-app button,
.dsa-assessment-app input,
.dsa-assessment-app select,
.dsa-assessment-app textarea {
    box-shadow: none;
}

.dsa-assessment-app [hidden] {
    display: none !important;
}


/* WordPress accessibility helper */

.dsa-assessment-app .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* =========================================================
   3. MAIN SOFTWARE HEADER
   ========================================================= */

.dsa-app-header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    padding: 34px;
    margin-bottom: 22px;

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 216, 77, 0.28),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f1f8ff 100%
        );

    border: 1px solid var(--dsa-border);
    border-radius: var(--dsa-radius-large);
    box-shadow: var(--dsa-shadow-small);
}

.dsa-app-header::before {
    content: "";
    position: absolute;
    top: -90px;
    right: -80px;
    width: 260px;
    height: 260px;
    pointer-events: none;
    border: 45px solid rgba(7, 84, 166, 0.035);
    border-radius: 50%;
}

.dsa-brand-block {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    min-width: 0;
}

.dsa-brand-mark {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    color: var(--dsa-white);
    font-size: 29px;

    background:
        linear-gradient(
            145deg,
            var(--dsa-primary),
            #0b78d7
        );

    border-radius: 18px;
    box-shadow: var(--dsa-shadow-primary);
}

.dsa-eyebrow {
    margin: 0 0 8px;
    color: var(--dsa-primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.dsa-app-title {
    max-width: 900px;
    margin: 0;
    color: var(--dsa-heading);
    font-size: clamp(32px, 4vw, 52px);
    letter-spacing: -0.035em;
}

.dsa-app-description {
    max-width: 900px;
    margin: 15px 0 0;
    color: var(--dsa-muted);
    font-size: 17px;
    line-height: 1.65;
}

.dsa-system-status {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 16px;
    color: var(--dsa-primary-dark);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;

    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(7, 84, 166, 0.15);
    border-radius: var(--dsa-radius-round);
    backdrop-filter: blur(10px);
}

.dsa-status-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    background: var(--dsa-success);
    border-radius: 50%;
    box-shadow:
        0 0 0 5px rgba(22, 133, 91, 0.12);
}


/* =========================================================
   4. PROGRESS BAR
   ========================================================= */

.dsa-progress {
    padding: 18px 20px;
    margin-bottom: 16px;
    background: var(--dsa-surface);
    border: 1px solid var(--dsa-border);
    border-radius: var(--dsa-radius-medium);
    box-shadow:
        0 4px 16px rgba(16, 36, 60, 0.04);
}

.dsa-progress-track {
    position: relative;
    width: 100%;
    height: 9px;
    overflow: hidden;
    background: #e8eef4;
    border-radius: var(--dsa-radius-round);
}

.dsa-progress-fill {
    width: 12.5%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--dsa-primary) 0%,
            #0b83df 55%,
            var(--dsa-accent) 100%
        );

    border-radius: inherit;
    transition: width 300ms ease;
}

.dsa-progress-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 11px;
    color: var(--dsa-muted);
    font-size: 13px;
}

#dsa-progress-label {
    font-weight: 800;
}

#dsa-progress-title {
    color: var(--dsa-primary);
    font-weight: 800;
}


/* =========================================================
   5. STEP NAVIGATION
   ========================================================= */

.dsa-step-navigation {
    display: grid;
    grid-template-columns:
        repeat(8, minmax(135px, 1fr));
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 16px;
    margin-bottom: 2px;
    scrollbar-width: thin;
    scrollbar-color:
        var(--dsa-border-dark)
        transparent;
}

.dsa-step-navigation::-webkit-scrollbar {
    height: 6px;
}

.dsa-step-navigation::-webkit-scrollbar-track {
    background: transparent;
}

.dsa-step-navigation::-webkit-scrollbar-thumb {
    background: var(--dsa-border-dark);
    border-radius: var(--dsa-radius-round);
}

.dsa-step-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    min-width: 0;
    min-height: 60px;
    padding: 10px 12px;
    color: var(--dsa-muted);
    text-align: left;

    background: var(--dsa-surface);
    border: 1px solid var(--dsa-border);
    border-radius: 14px;

    transition:
        transform var(--dsa-transition),
        color var(--dsa-transition),
        background var(--dsa-transition),
        border-color var(--dsa-transition),
        box-shadow var(--dsa-transition);
}

.dsa-step-tab:hover:not(:disabled) {
    transform: translateY(-2px);
    color: var(--dsa-primary-dark);
    border-color: #9fc3e8;
    box-shadow:
        0 9px 22px rgba(16, 36, 60, 0.08);
}

.dsa-step-tab:focus-visible {
    outline: 3px solid rgba(7, 84, 166, 0.20);
    outline-offset: 3px;
}

.dsa-step-number {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    color: var(--dsa-primary);
    font-size: 13px;
    font-weight: 900;

    background: var(--dsa-primary-light);
    border-radius: 9px;
}

.dsa-step-label {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dsa-step-lock {
    margin-left: auto;
    font-size: 12px;
    opacity: 0.82;
}


/* Active step */

.dsa-step-tab.is-active {
    color: var(--dsa-white);

    background:
        linear-gradient(
            135deg,
            var(--dsa-primary),
            #0a73cb
        );

    border-color: var(--dsa-primary);
    box-shadow: var(--dsa-shadow-primary);
}

.dsa-step-tab.is-active .dsa-step-number {
    color: var(--dsa-white);
    background: rgba(255, 255, 255, 0.18);
}


/* Completed step */

.dsa-step-tab.is-complete:not(.is-active) {
    color: var(--dsa-primary-dark);
    background: var(--dsa-primary-light);
    border-color: #b8d6f3;
}

.dsa-step-tab.is-complete:not(.is-active)
.dsa-step-number {
    color: var(--dsa-white);
    background: var(--dsa-success);
}


/* Locked step */

.dsa-step-tab.is-locked {
    color: #8490a0;
    background: #f4f6f8;
    border-color: #e1e6eb;
    opacity: 0.74;
}

.dsa-step-tab.is-locked .dsa-step-number {
    color: #8793a1;
    background: #e7ebef;
}


/* Remove theme purple/pink button styling */

.dsa-assessment-app .dsa-step-tab,
.dsa-assessment-app .dsa-step-tab:hover,
.dsa-assessment-app .dsa-step-tab:focus,
.dsa-assessment-app .dsa-step-tab:active {
    text-decoration: none;
}


/* =========================================================
   6. MAIN WIZARD LAYOUT
   ========================================================= */

.dsa-wizard-shell {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(290px, 350px);
    gap: 24px;
    align-items: start;
}

.dsa-wizard-main {
    min-width: 0;
}

.dsa-assessment-form {
    width: 100%;
    min-width: 0;
    padding: 30px;
    background: var(--dsa-surface);
    border: 1px solid var(--dsa-border);
    border-radius: var(--dsa-radius-large);
    box-shadow: var(--dsa-shadow-small);
}

.dsa-step-panel {
    width: 100%;
    min-width: 0;
}

.dsa-step-panel[hidden] {
    display: none !important;
}

.dsa-step-panel.is-active {
    animation: dsa-panel-entry 260ms ease;
}

@keyframes dsa-panel-entry {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   7. STEP INTRODUCTION
   ========================================================= */

.dsa-step-intro {
    max-width: 960px;
    margin-bottom: 26px;
}

.dsa-step-kicker {
    margin: 0 0 7px;
    color: var(--dsa-primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.dsa-step-intro h2 {
    margin: 0;
    color: var(--dsa-heading);
    font-size: clamp(28px, 3vw, 40px);
    letter-spacing: -0.025em;
}

.dsa-step-intro > p:last-child {
    max-width: 900px;
    margin: 13px 0 0;
    color: var(--dsa-muted);
    font-size: 16px;
    line-height: 1.65;
}


/* =========================================================
   8. LIVE SUMMARY CONTAINER
   More detailed summary styling comes in a later section
   ========================================================= */

.dsa-live-summary {
    position: sticky;
    top: 24px;
    min-width: 0;
}

.dsa-summary-card {
    padding: 22px;
    background: var(--dsa-surface);
    border: 1px solid var(--dsa-border);
    border-radius: var(--dsa-radius-large);
    box-shadow: var(--dsa-shadow-small);
}


/* =========================================================
   9. LARGE-SCREEN RESPONSIVENESS
   Full mobile rules will be added in Part 5
   ========================================================= */

@media (max-width: 1200px) {
    .dsa-step-navigation {
        grid-template-columns:
            repeat(8, 150px);
    }

    .dsa-wizard-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .dsa-live-summary {
        position: static;
    }
}

@media (max-width: 760px) {
    .dsa-assessment-app {
        padding-top: 0;
    }

    .dsa-app-header {
        flex-direction: column;
        gap: 18px;
        padding: 22px;
        border-radius: 18px;
    }

    .dsa-brand-block {
        gap: 13px;
    }

    .dsa-brand-mark {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        font-size: 23px;
        border-radius: 14px;
    }

    .dsa-app-title {
        font-size: 32px;
    }

    .dsa-app-description {
        font-size: 15px;
    }

    .dsa-system-status {
        align-self: flex-start;
    }

    .dsa-progress-copy {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .dsa-assessment-form {
        padding: 19px;
        border-radius: 18px;
    }

    .dsa-summary-card {
        padding: 18px;
        border-radius: 18px;
    }
}

/* =========================================================
   PART 2
   CHOICE CARDS, FORMS, HELP PANELS AND NAVIGATION BUTTONS
   ========================================================= */


/* =========================================================
   10. GENERIC CHOICE FIELDSETS
   ========================================================= */

.dsa-choice-fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

.dsa-choice-fieldset > legend:not(.screen-reader-text) {
    display: block;
    margin: 0 0 14px;
    color: var(--dsa-heading);
    font-size: 16px;
    font-weight: 800;
}


/* =========================================================
   11. CARD GRIDS
   ========================================================= */

.dsa-building-grid,
.dsa-purpose-grid,
.dsa-budget-grid,
.dsa-future-grid {
    display: grid;
    gap: 14px;
}

.dsa-building-grid {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.dsa-purpose-grid,
.dsa-budget-grid,
.dsa-future-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


/* =========================================================
   12. SELECTABLE CARDS
   ========================================================= */

.dsa-choice-card {
    position: relative;
    display: block;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.dsa-choice-card > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.dsa-choice-card-content {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    min-height: 100%;
    padding: 18px;
    color: var(--dsa-text);

    background:
        linear-gradient(
            145deg,
            var(--dsa-white),
            #fbfdff
        );

    border: 1px solid var(--dsa-border);
    border-radius: var(--dsa-radius-medium);

    transition:
        transform var(--dsa-transition),
        border-color var(--dsa-transition),
        background var(--dsa-transition),
        box-shadow var(--dsa-transition);
}

.dsa-choice-card:hover .dsa-choice-card-content {
    transform: translateY(-3px);
    border-color: #a3c5e7;
    box-shadow:
        0 13px 28px rgba(16, 36, 60, 0.09);
}

.dsa-choice-card > input:focus-visible
+ .dsa-choice-card-content {
    outline:
        3px solid rgba(7, 84, 166, 0.20);
    outline-offset: 3px;
}


/* Selected card */

.dsa-choice-card > input:checked
+ .dsa-choice-card-content {
    color: var(--dsa-primary-dark);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            var(--dsa-primary-light)
        );

    border: 2px solid var(--dsa-primary);

    box-shadow:
        0 14px 30px rgba(7, 84, 166, 0.13);
}


/* Card icon */

.dsa-choice-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    color: var(--dsa-primary);
    font-size: 22px;
    background: var(--dsa-primary-light);
    border-radius: 13px;
}

.dsa-choice-card > input:checked
+ .dsa-choice-card-content
.dsa-choice-icon {
    color: var(--dsa-white);

    background:
        linear-gradient(
            145deg,
            var(--dsa-primary),
            #0a78d5
        );

    box-shadow:
        0 8px 18px rgba(7, 84, 166, 0.18);
}


/* Card text */

.dsa-choice-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    padding-right: 28px;
}

.dsa-choice-copy strong {
    color: var(--dsa-heading);
    font-size: 16px;
    font-weight: 850;
    line-height: 1.28;
}

.dsa-choice-copy small {
    color: var(--dsa-muted);
    font-size: 13px;
    line-height: 1.48;
}


/* Selection indicator */

.dsa-choice-check {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    color: transparent;
    font-size: 13px;
    font-weight: 900;

    background: var(--dsa-white);
    border: 1px solid var(--dsa-border-dark);
    border-radius: 50%;

    transition:
        color var(--dsa-transition),
        background var(--dsa-transition),
        border-color var(--dsa-transition),
        transform var(--dsa-transition);
}

.dsa-choice-card > input:checked
+ .dsa-choice-card-content
.dsa-choice-check {
    color: var(--dsa-white);
    background: var(--dsa-success);
    border-color: var(--dsa-success);
    transform: scale(1.06);
}


/* =========================================================
   13. PURPOSE DETAILS AND CONDITIONAL SECTIONS
   ========================================================= */

.dsa-purpose-details,
.dsa-conditional-field,
.dsa-custom-budget-section,
.dsa-future-options-wrap {
    margin-top: 22px;
}

.dsa-purpose-details,
.dsa-conditional-field,
.dsa-future-options-wrap {
    padding: 21px;
    background: var(--dsa-soft-surface);
    border: 1px solid var(--dsa-border);
    border-radius: var(--dsa-radius-medium);
}

.dsa-conditional-field[hidden],
.dsa-future-options-wrap[hidden] {
    display: none !important;
}


/* =========================================================
   14. LABELS AND FORM FIELDS
   ========================================================= */

.dsa-field-group {
    min-width: 0;
}

.dsa-field-group + .dsa-field-group {
    margin-top: 19px;
}

.dsa-field-group label,
.dsa-conditional-field > label {
    display: block;
    margin: 0 0 8px;
    color: var(--dsa-heading);
    font-size: 13px;
    font-weight: 850;
}

.dsa-assessment-app input[type="text"],
.dsa-assessment-app input[type="email"],
.dsa-assessment-app input[type="tel"],
.dsa-assessment-app input[type="number"],
.dsa-assessment-app input[type="search"],
.dsa-assessment-app select,
.dsa-assessment-app textarea {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    color: var(--dsa-text);
    font-size: 14px;

    background: var(--dsa-white);
    border: 1px solid var(--dsa-border-dark);
    border-radius: 12px;
    outline: none;

    transition:
        border-color var(--dsa-transition),
        box-shadow var(--dsa-transition),
        background var(--dsa-transition);
}

.dsa-assessment-app textarea {
    min-height: 115px;
    resize: vertical;
}

.dsa-assessment-app input::placeholder,
.dsa-assessment-app textarea::placeholder {
    color: #98a4b2;
}

.dsa-assessment-app input:hover,
.dsa-assessment-app select:hover,
.dsa-assessment-app textarea:hover {
    border-color: #a9bdcf;
}

.dsa-assessment-app input:focus,
.dsa-assessment-app select:focus,
.dsa-assessment-app textarea:focus {
    background: var(--dsa-white);
    border-color: var(--dsa-primary);

    box-shadow:
        0 0 0 4px rgba(7, 84, 166, 0.11);
}

.dsa-assessment-app input:invalid:not(:placeholder-shown) {
    border-color: var(--dsa-danger);
}

.dsa-field-help {
    margin: 7px 0 0;
    color: var(--dsa-muted);
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   15. INLINE RADIO OPTIONS
   ========================================================= */

.dsa-inline-options {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
}

.dsa-small-choice {
    position: relative;
    display: inline-flex;
    margin: 0;
    cursor: pointer;
}

.dsa-small-choice > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.dsa-small-choice > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 47px;
    padding: 10px 15px;
    color: var(--dsa-muted);
    font-size: 13px;
    font-weight: 800;
    text-align: center;

    background: var(--dsa-white);
    border: 1px solid var(--dsa-border);
    border-radius: 12px;

    transition:
        color var(--dsa-transition),
        background var(--dsa-transition),
        border-color var(--dsa-transition),
        box-shadow var(--dsa-transition),
        transform var(--dsa-transition);
}

.dsa-small-choice:hover > span {
    transform: translateY(-1px);
    color: var(--dsa-primary-dark);
    border-color: #a6c3e1;
}

.dsa-small-choice > input:focus-visible + span {
    outline:
        3px solid rgba(7, 84, 166, 0.18);
    outline-offset: 3px;
}

.dsa-small-choice > input:checked + span {
    color: var(--dsa-primary-dark);
    background: var(--dsa-primary-light);
    border-color: var(--dsa-primary);

    box-shadow:
        0 0 0 3px rgba(7, 84, 166, 0.08);
}


/* =========================================================
   16. EXACT BUDGET INPUT
   ========================================================= */

.dsa-text-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    color: var(--dsa-primary);
    font-size: 13px;
    font-weight: 850;

    background: transparent;
    border: 0;
    text-decoration: none;
}

.dsa-text-button:hover {
    color: var(--dsa-primary-dark);
    text-decoration: underline;
}

.dsa-text-button:focus-visible {
    outline:
        3px solid rgba(7, 84, 166, 0.17);
    outline-offset: 4px;
    border-radius: 4px;
}

.dsa-money-input {
    position: relative;
}

.dsa-money-input > span {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 1;
    color: var(--dsa-primary);
    font-size: 17px;
    font-weight: 900;
    transform: translateY(-50%);
}

.dsa-money-input input {
    padding-left: 43px !important;
}


/* =========================================================
   17. INFORMATION AND HELP CARDS
   ========================================================= */

.dsa-step-help-card,
.dsa-budget-truth-card,
.dsa-appliance-guidance,
.dsa-premium-value-box,
.dsa-preview-professional-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    margin-top: 22px;

    background:
        linear-gradient(
            145deg,
            var(--dsa-soft-surface),
            var(--dsa-white)
        );

    border: 1px solid var(--dsa-border);
    border-radius: var(--dsa-radius-medium);
}

.dsa-step-help-card > span,
.dsa-budget-truth-icon,
.dsa-appliance-guidance-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    font-size: 20px;
    background: var(--dsa-accent-light);
    border-radius: 12px;
}

.dsa-step-help-card strong,
.dsa-budget-truth-card strong,
.dsa-appliance-guidance strong,
.dsa-premium-value-box strong {
    display: block;
    margin-bottom: 5px;
    color: var(--dsa-heading);
}

.dsa-step-help-card p,
.dsa-budget-truth-card p,
.dsa-appliance-guidance p,
.dsa-premium-value-box p,
.dsa-preview-professional-notice p {
    margin: 0;
    color: var(--dsa-muted);
    font-size: 13px;
    line-height: 1.6;
}

.dsa-budget-truth-card ul {
    margin: 12px 0 0;
    padding-left: 20px;
    color: var(--dsa-text);
}

.dsa-budget-truth-card li {
    margin-bottom: 5px;
}


/* Special truth card accent */

.dsa-budget-truth-card {
    background:
        linear-gradient(
            145deg,
            #fffdf5,
            #ffffff
        );

    border-color: #ead99a;
}


/* =========================================================
   18. FUTURE-EXPANSION SECTION
   ========================================================= */

.dsa-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.dsa-section-heading h3 {
    margin: 0;
    font-size: 22px;
}

.dsa-section-heading > p {
    max-width: 500px;
    margin: 0;
    color: var(--dsa-muted);
    font-size: 13px;
}

.dsa-category-kicker {
    margin: 0 0 5px;
    color: var(--dsa-primary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.dsa-future-load-summary {
    padding: 18px;
    margin-top: 20px;

    background:
        linear-gradient(
            135deg,
            var(--dsa-primary-light),
            var(--dsa-white)
        );

    border: 1px solid #bfd8f2;
    border-radius: 14px;
}

.dsa-future-load-summary > span {
    display: block;
    color: var(--dsa-muted);
    font-size: 12px;
    font-weight: 700;
}

.dsa-future-load-summary > strong {
    display: block;
    margin-top: 4px;
    color: var(--dsa-primary);
    font-size: 27px;
    font-weight: 900;
}

.dsa-future-load-summary > p {
    margin: 7px 0 0;
    color: var(--dsa-muted);
    font-size: 12px;
}


/* =========================================================
   19. WIZARD ACTION BUTTONS
   ========================================================= */

.dsa-wizard-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
    padding-top: 22px;
    margin-top: 28px;
    border-top: 1px solid var(--dsa-border);
}

.dsa-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;

    border: 1px solid transparent;
    border-radius: 12px;

    transition:
        transform var(--dsa-transition),
        color var(--dsa-transition),
        background var(--dsa-transition),
        border-color var(--dsa-transition),
        box-shadow var(--dsa-transition),
        opacity var(--dsa-transition);
}

.dsa-button:hover:not(:disabled) {
    transform: translateY(-2px);
    text-decoration: none;
}

.dsa-button:focus-visible {
    outline:
        3px solid rgba(7, 84, 166, 0.20);
    outline-offset: 3px;
}


/* Primary button */

.dsa-button-primary {
    color: var(--dsa-white);

    background:
        linear-gradient(
            135deg,
            var(--dsa-primary),
            #0a75ce
        );

    border-color: var(--dsa-primary);
    box-shadow: var(--dsa-shadow-primary);
}

.dsa-button-primary:hover:not(:disabled) {
    color: var(--dsa-white);

    background:
        linear-gradient(
            135deg,
            var(--dsa-primary-dark),
            var(--dsa-primary)
        );

    box-shadow:
        0 17px 34px rgba(7, 84, 166, 0.25);
}


/* Disabled primary button */

.dsa-button-primary:disabled {
    color: #a1acb8;
    background: #e7ebef;
    border-color: #d9e0e7;
    box-shadow: none;
    opacity: 1;
}


/* Secondary button */

.dsa-button-secondary {
    color: var(--dsa-primary);
    background: var(--dsa-white);
    border-color: #b9cddd;
}

.dsa-button-secondary:hover:not(:disabled) {
    color: var(--dsa-primary-dark);
    background: var(--dsa-primary-light);
    border-color: var(--dsa-primary);
}


/* Forcefully remove theme pink/purple styles */

.dsa-assessment-app .dsa-button,
.dsa-assessment-app .dsa-button:hover,
.dsa-assessment-app .dsa-button:focus,
.dsa-assessment-app .dsa-button:active {
    text-decoration: none;
}


/* =========================================================
   20. VALIDATION AND STATUS MESSAGES
   ========================================================= */

.dsa-form-message,
.dsa-inline-message {
    padding: 14px 16px;
    margin-top: 17px;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.5;
    border-radius: 12px;
}

.dsa-form-message[hidden],
.dsa-inline-message[hidden] {
    display: none !important;
}

.dsa-form-message[data-type="error"],
.dsa-inline-message[data-type="error"] {
    color: #89231e;
    background: var(--dsa-danger-light);
    border: 1px solid #e9afab;
}

.dsa-form-message[data-type="success"],
.dsa-inline-message[data-type="success"] {
    color: #11623f;
    background: var(--dsa-success-light);
    border: 1px solid #a8d9c2;
}

.dsa-form-message[data-type="warning"],
.dsa-inline-message[data-type="warning"] {
    color: #754900;
    background: var(--dsa-warning-light);
    border: 1px solid #e8c681;
}

.dsa-form-message[data-type="info"],
.dsa-inline-message[data-type="info"] {
    color: #0b557f;
    background: var(--dsa-info-light);
    border: 1px solid #abd5eb;
}


/* =========================================================
   21. PART 2 RESPONSIVE RULES
   ========================================================= */

@media (max-width: 1080px) {
    .dsa-building-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .dsa-building-grid,
    .dsa-purpose-grid,
    .dsa-budget-grid,
    .dsa-future-grid {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .dsa-choice-card-content {
        padding: 16px;
    }

    .dsa-choice-icon {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }

    .dsa-purpose-details,
    .dsa-conditional-field,
    .dsa-future-options-wrap {
        padding: 17px;
    }

    .dsa-section-heading {
        flex-direction: column;
        gap: 7px;
    }

    .dsa-inline-options {
        flex-direction: column;
    }

    .dsa-small-choice,
    .dsa-small-choice > span {
        width: 100%;
    }

    .dsa-wizard-actions {
        flex-direction: column-reverse;
    }

    .dsa-wizard-actions .dsa-button {
        width: 100%;
    }
}

/* =========================================================
   PART 3
   APPLIANCE SELECTION AND LIVE ENERGY CALCULATOR
   ========================================================= */


/* =========================================================
   22. APPLIANCE TOOLBAR
   ========================================================= */

.dsa-appliance-toolbar {
    display: grid;
    grid-template-columns:
        minmax(260px, 0.9fr)
        minmax(0, 1.6fr);
    gap: 18px;
    align-items: end;
    padding: 19px;
    margin-bottom: 20px;

    background:
        linear-gradient(
            145deg,
            var(--dsa-soft-surface),
            var(--dsa-white)
        );

    border: 1px solid var(--dsa-border);
    border-radius: var(--dsa-radius-medium);
}

.dsa-appliance-search-wrap,
.dsa-category-filter-wrap {
    min-width: 0;
}

.dsa-appliance-search-wrap label,
.dsa-filter-label {
    display: block;
    margin: 0 0 8px;
    color: var(--dsa-heading);
    font-size: 13px;
    font-weight: 850;
}

.dsa-search-input {
    position: relative;
}

.dsa-search-input > span {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 1;
    color: var(--dsa-muted);
    transform: translateY(-50%);
}

.dsa-search-input input {
    padding-left: 44px !important;
}


/* =========================================================
   23. CATEGORY FILTER BUTTONS
   ========================================================= */

.dsa-category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dsa-category-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 13px;
    color: var(--dsa-muted);
    font-size: 12px;
    font-weight: 850;

    background: var(--dsa-white);
    border: 1px solid var(--dsa-border);
    border-radius: var(--dsa-radius-round);

    transition:
        color var(--dsa-transition),
        background var(--dsa-transition),
        border-color var(--dsa-transition),
        transform var(--dsa-transition),
        box-shadow var(--dsa-transition);
}

.dsa-category-filter:hover {
    transform: translateY(-1px);
    color: var(--dsa-primary-dark);
    border-color: #9ebfe0;
}

.dsa-category-filter.is-active {
    color: var(--dsa-white);

    background:
        linear-gradient(
            135deg,
            var(--dsa-primary),
            #0a75cf
        );

    border-color: var(--dsa-primary);

    box-shadow:
        0 8px 18px rgba(7, 84, 166, 0.17);
}


/* =========================================================
   24. APPLIANCE GUIDANCE PANEL
   ========================================================= */

.dsa-appliance-guidance {
    margin-bottom: 22px;
}

.dsa-appliance-guidance-icon {
    color: var(--dsa-primary);
}


/* =========================================================
   25. APPLIANCE CATEGORY SECTIONS
   ========================================================= */

.dsa-appliance-category-list {
    display: block;
}

.dsa-appliance-category-section {
    margin-top: 28px;
}

.dsa-appliance-category-section:first-child {
    margin-top: 0;
}

.dsa-appliance-category-section[hidden] {
    display: none !important;
}

.dsa-category-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 17px;
    margin-bottom: 14px;

    background:
        linear-gradient(
            90deg,
            var(--dsa-primary-light),
            var(--dsa-white)
        );

    border-left: 5px solid var(--dsa-primary);
    border-radius: 13px;
}

.dsa-category-heading h3 {
    margin: 0;
    font-size: 22px;
}

.dsa-category-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 11px;
    color: var(--dsa-primary-dark);
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;

    background: var(--dsa-white);
    border: 1px solid #c6ddf3;
    border-radius: var(--dsa-radius-round);
}


/* =========================================================
   26. APPLIANCE CARD GRID
   ========================================================= */

.dsa-appliance-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.dsa-appliance-card {
    position: relative;
    min-width: 0;
    padding: 19px;

    background:
        linear-gradient(
            145deg,
            var(--dsa-white),
            #fbfdff
        );

    border: 1px solid var(--dsa-border);
    border-radius: var(--dsa-radius-medium);

    transition:
        transform var(--dsa-transition),
        background var(--dsa-transition),
        border-color var(--dsa-transition),
        box-shadow var(--dsa-transition);
}

.dsa-appliance-card:hover {
    transform: translateY(-3px);
    border-color: #abc8e4;

    box-shadow:
        0 15px 30px rgba(16, 36, 60, 0.09);
}

.dsa-appliance-card[hidden] {
    display: none !important;
}


/* Selected appliance */

.dsa-appliance-card.is-selected {
    background:
        linear-gradient(
            145deg,
            var(--dsa-white),
            var(--dsa-primary-lighter)
        );

    border: 2px solid var(--dsa-primary);

    box-shadow:
        0 16px 32px rgba(7, 84, 166, 0.12);
}


/* High-impact selected appliance */

.dsa-appliance-card.is-heavy-selected {
    background:
        linear-gradient(
            145deg,
            var(--dsa-white),
            #fffaf0
        );

    border-color: var(--dsa-warning);
}


/* =========================================================
   27. APPLIANCE CARD HEADER
   ========================================================= */

.dsa-appliance-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 17px;
}

.dsa-appliance-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.dsa-appliance-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    color: var(--dsa-primary);
    font-size: 23px;

    background: var(--dsa-primary-light);
    border-radius: 14px;
}

.dsa-appliance-card.is-selected
.dsa-appliance-icon {
    color: var(--dsa-white);

    background:
        linear-gradient(
            145deg,
            var(--dsa-primary),
            #0a78d5
        );

    box-shadow:
        0 8px 18px rgba(7, 84, 166, 0.17);
}

.dsa-appliance-identity h4 {
    margin: 0;
    color: var(--dsa-heading);
    font-size: 18px;
}

.dsa-appliance-identity p {
    margin: 3px 0 0;
    color: var(--dsa-muted);
    font-size: 12px;
}

.dsa-appliance-load-badge {
    flex: 0 0 auto;
    min-width: 105px;
    padding: 9px 11px;
    text-align: right;

    background: var(--dsa-soft-surface);
    border: 1px solid var(--dsa-border);
    border-radius: 11px;
}

.dsa-appliance-load-badge span {
    display: block;
    color: var(--dsa-muted);
    font-size: 10px;
    font-weight: 750;
}

.dsa-appliance-load-badge strong {
    display: block;
    margin-top: 2px;
    color: var(--dsa-primary);
    font-size: 15px;
    font-weight: 900;
}


/* =========================================================
   28. APPLIANCE INPUT FIELDS
   ========================================================= */

.dsa-appliance-fields {
    display: grid;
    grid-template-columns:
        minmax(175px, 1.4fr)
        minmax(135px, 0.85fr)
        minmax(150px, 0.9fr);
    gap: 12px;
}

.dsa-appliance-fields .dsa-field-group + .dsa-field-group {
    margin-top: 0;
}

.dsa-appliance-fields label {
    font-size: 12px;
}


/* =========================================================
   29. QUANTITY CONTROL
   ========================================================= */

.dsa-quantity-control {
    display: grid;
    grid-template-columns:
        42px
        minmax(58px, 1fr)
        42px;
    gap: 6px;
}

.dsa-quantity-control input {
    min-width: 0;
    padding-left: 6px !important;
    padding-right: 6px !important;
    text-align: center;
    font-weight: 850;
}

.dsa-quantity-button {
    display: grid;
    place-items: center;
    min-height: 50px;
    padding: 0;
    color: var(--dsa-primary);
    font-size: 22px;
    font-weight: 900;

    background: var(--dsa-primary-light);
    border: 1px solid #c5dcf2;
    border-radius: 11px;

    transition:
        color var(--dsa-transition),
        background var(--dsa-transition),
        border-color var(--dsa-transition),
        transform var(--dsa-transition);
}

.dsa-quantity-button:hover {
    transform: translateY(-1px);
    color: var(--dsa-white);
    background: var(--dsa-primary);
    border-color: var(--dsa-primary);
}

.dsa-quantity-button:focus-visible {
    outline:
        3px solid rgba(7, 84, 166, 0.18);
    outline-offset: 2px;
}


/* =========================================================
   30. PER-APPLIANCE CALCULATION METRICS
   ========================================================= */

.dsa-appliance-calculation {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.dsa-appliance-calculation > div {
    min-width: 0;
    padding: 12px;

    background: var(--dsa-soft-surface);
    border: 1px solid var(--dsa-border);
    border-radius: 11px;
}

.dsa-appliance-calculation span {
    display: block;
    color: var(--dsa-muted);
    font-size: 10px;
    font-weight: 750;
    line-height: 1.35;
}

.dsa-appliance-calculation strong {
    display: block;
    margin-top: 4px;
    color: var(--dsa-heading);
    font-size: 14px;
    font-weight: 900;
}


/* =========================================================
   31. HEAVY-APPLIANCE WARNING
   ========================================================= */

.dsa-heavy-appliance-warning,
.dsa-heavy-appliance-summary {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    margin-top: 14px;
    color: #7b4b00;

    background:
        linear-gradient(
            145deg,
            var(--dsa-warning-light),
            #fffdf8
        );

    border: 1px solid #ecc474;
    border-radius: 12px;
}

.dsa-heavy-appliance-warning[hidden],
.dsa-heavy-appliance-summary[hidden] {
    display: none !important;
}

.dsa-heavy-appliance-warning > span,
.dsa-heavy-appliance-summary > span {
    flex: 0 0 auto;
    font-size: 18px;
}

.dsa-heavy-appliance-warning strong {
    display: block;
    margin-bottom: 3px;
}

.dsa-heavy-appliance-warning p,
.dsa-heavy-appliance-summary p {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
}


/* =========================================================
   32. APPLIANCE DATA STATUS
   ========================================================= */

.dsa-appliance-source {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 12px;
    color: var(--dsa-light-text);
    font-size: 10px;
}

.dsa-appliance-source strong {
    color: var(--dsa-muted);
}


/* =========================================================
   33. NO APPLIANCE RESULTS
   ========================================================= */

.dsa-empty-state {
    padding: 42px 22px;
    text-align: center;
    color: var(--dsa-muted);

    background: var(--dsa-soft-surface);
    border: 1px dashed var(--dsa-border-dark);
    border-radius: var(--dsa-radius-medium);
}

.dsa-empty-state[hidden] {
    display: none !important;
}

.dsa-empty-state > span {
    display: block;
    margin-bottom: 8px;
    font-size: 30px;
}

.dsa-empty-state h3 {
    margin-bottom: 6px;
}

.dsa-empty-state p {
    margin: 0;
}


/* =========================================================
   34. CUSTOM APPLIANCE SECTION
   ========================================================= */

.dsa-custom-appliance-section {
    margin-top: 24px;
}

.dsa-custom-appliance-form {
    padding: 20px;
    margin-top: 14px;
    background: var(--dsa-soft-surface);
    border: 1px solid var(--dsa-border);
    border-radius: var(--dsa-radius-medium);
}

.dsa-custom-appliance-form[hidden] {
    display: none !important;
}

.dsa-custom-appliance-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.dsa-custom-appliance-grid .dsa-field-group + .dsa-field-group {
    margin-top: 0;
}

.dsa-custom-appliance-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}


/* =========================================================
   35. SELECTED APPLIANCE SUMMARY
   ========================================================= */

.dsa-selected-appliances-summary {
    padding: 21px;
    margin-top: 24px;

    background:
        linear-gradient(
            145deg,
            #f3f9ff,
            var(--dsa-white)
        );

    border: 1px solid #c5dcf2;
    border-radius: var(--dsa-radius-medium);
}

.dsa-selected-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.dsa-selected-summary-header h3 {
    margin: 0;
    font-size: 23px;
}

.dsa-summary-eyebrow {
    margin: 0 0 5px;
    color: var(--dsa-primary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.dsa-selected-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    color: var(--dsa-white);
    font-size: 12px;
    font-weight: 900;

    background: var(--dsa-primary);
    border-radius: var(--dsa-radius-round);
}


/* =========================================================
   36. TOTAL ENERGY METRICS
   ========================================================= */

.dsa-appliance-totals {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-top: 16px;
}

.dsa-appliance-totals > div {
    min-width: 0;
    padding: 15px;

    background: var(--dsa-white);
    border: 1px solid var(--dsa-border);
    border-radius: 12px;
}

.dsa-appliance-totals span {
    display: block;
    color: var(--dsa-muted);
    font-size: 11px;
    font-weight: 750;
}

.dsa-appliance-totals strong {
    display: block;
    margin-top: 4px;
    color: var(--dsa-primary-dark);
    font-size: 21px;
    font-weight: 900;
}


/* =========================================================
   37. LIVE SUMMARY PANEL
   ========================================================= */

.dsa-summary-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--dsa-border);
}

.dsa-summary-heading > span {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    font-size: 20px;
    background: var(--dsa-accent-light);
    border-radius: 12px;
}

.dsa-summary-heading h2 {
    margin: 0;
    font-size: 21px;
}

.dsa-summary-list {
    margin: 9px 0 0;
}

.dsa-summary-list > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #edf1f5;
}

.dsa-summary-list > div:last-child {
    border-bottom: 0;
}

.dsa-summary-list dt {
    color: var(--dsa-muted);
    font-size: 12px;
}

.dsa-summary-list dd {
    margin: 0;
    color: var(--dsa-heading);
    text-align: right;
    font-size: 13px;
    font-weight: 900;
}

.dsa-summary-notice {
    padding: 15px;
    margin-top: 15px;

    background:
        linear-gradient(
            145deg,
            var(--dsa-accent-light),
            #fffdf5
        );

    border: 1px solid #ead58c;
    border-radius: 12px;
}

.dsa-summary-notice strong {
    color: var(--dsa-heading);
}

.dsa-summary-notice p {
    margin: 5px 0 0;
    color: var(--dsa-muted);
    font-size: 12px;
    line-height: 1.55;
}


/* =========================================================
   38. OPTIONAL CONSULTANT-STYLE STATUS ELEMENTS
   These styles are ready for later dynamic messages.
   ========================================================= */

.dsa-consultant-insight {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    margin-top: 14px;
    color: var(--dsa-primary-dark);

    background:
        linear-gradient(
            145deg,
            var(--dsa-primary-light),
            var(--dsa-white)
        );

    border: 1px solid #bdd8f1;
    border-radius: 12px;
}

.dsa-consultant-insight-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    background: var(--dsa-white);
    border-radius: 10px;
}

.dsa-consultant-insight strong {
    display: block;
    margin-bottom: 3px;
}

.dsa-consultant-insight p {
    margin: 0;
    color: var(--dsa-muted);
    font-size: 12px;
}


/* =========================================================
   39. POTENTIAL SAVINGS CARD
   Prepared for later backend pricing data.
   ========================================================= */

.dsa-savings-card {
    padding: 18px;
    margin-top: 15px;

    background:
        linear-gradient(
            145deg,
            var(--dsa-success-light),
            var(--dsa-white)
        );

    border: 1px solid #addbc5;
    border-radius: 13px;
}

.dsa-savings-card span {
    display: block;
    color: var(--dsa-muted);
    font-size: 11px;
    font-weight: 750;
}

.dsa-savings-card strong {
    display: block;
    margin-top: 3px;
    color: var(--dsa-success);
    font-size: 25px;
    font-weight: 900;
}

.dsa-savings-card p {
    margin: 6px 0 0;
    color: var(--dsa-muted);
    font-size: 11px;
}


/* =========================================================
   40. PART 3 RESPONSIVE RULES
   ========================================================= */

@media (max-width: 1100px) {
    .dsa-appliance-grid {
        grid-template-columns:
            minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .dsa-appliance-toolbar {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .dsa-appliance-fields {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .dsa-appliance-fields
    .dsa-field-group + .dsa-field-group {
        margin-top: 0;
    }
}

@media (max-width: 760px) {
    .dsa-category-heading,
    .dsa-selected-summary-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dsa-category-count,
    .dsa-selected-count {
        align-self: flex-start;
    }

    .dsa-appliance-card {
        padding: 16px;
    }

    .dsa-appliance-card-header {
        flex-direction: column;
        align-items: stretch;
    }

    .dsa-appliance-load-badge {
        width: 100%;
        text-align: left;
    }

    .dsa-appliance-calculation,
    .dsa-appliance-totals {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .dsa-custom-appliance-grid {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .dsa-custom-appliance-actions {
        flex-direction: column;
    }

    .dsa-custom-appliance-actions
    .dsa-button {
        width: 100%;
    }
}

/* =========================================================
   PART 4
   FREE PREVIEW, PAYMENT, AND PREMIUM SOLAR BLUEPRINT
   ========================================================= */


/* =========================================================
   41. PREVIEW LOADING STATE
   ========================================================= */

.dsa-preview-loading,
.dsa-payment-loader {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    margin-top: 16px;

    background:
        linear-gradient(
            145deg,
            var(--dsa-primary-light),
            var(--dsa-white)
        );

    border: 1px solid #bfd8f1;
    border-radius: var(--dsa-radius-medium);
}

.dsa-preview-loading[hidden],
.dsa-payment-loader[hidden] {
    display: none !important;
}

.dsa-loading-spinner {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;

    border: 4px solid rgba(7, 84, 166, 0.16);
    border-top-color: var(--dsa-primary);
    border-radius: 50%;

    animation: dsa-spin 0.8s linear infinite;
}

@keyframes dsa-spin {
    to {
        transform: rotate(360deg);
    }
}

.dsa-preview-loading strong,
.dsa-payment-loader strong {
    display: block;
    color: var(--dsa-heading);
}

.dsa-preview-loading p,
.dsa-payment-loader p {
    margin: 3px 0 0;
    color: var(--dsa-muted);
    font-size: 12px;
}


/* =========================================================
   42. FREE PREVIEW HERO
   ========================================================= */

.dsa-preview-hero {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 24px;
    padding: 26px;

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 216, 77, 0.24),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            var(--dsa-primary-light),
            var(--dsa-white)
        );

    border: 1px solid #c8def3;
    border-radius: var(--dsa-radius-large);
}

.dsa-preview-hero-copy {
    min-width: 0;
}

.dsa-preview-badge,
.dsa-premium-label {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    margin: 0 0 10px;
    color: var(--dsa-primary-dark);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;

    background: rgba(255, 255, 255, 0.86);
    border: 1px solid #c9def3;
    border-radius: var(--dsa-radius-round);
}

.dsa-preview-hero h3 {
    margin: 0;
    color: var(--dsa-heading);
    font-size: clamp(27px, 3vw, 39px);
    letter-spacing: -0.025em;
}

.dsa-preview-hero-copy > p {
    max-width: 780px;
    margin: 12px 0 0;
    color: var(--dsa-muted);
    font-size: 15px;
    line-height: 1.65;
}

.dsa-preview-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 165px;
    padding: 20px;
    text-align: center;

    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--dsa-border);
    border-radius: 17px;
    box-shadow:
        0 8px 20px rgba(16, 36, 60, 0.06);
}

.dsa-preview-score > span {
    color: var(--dsa-muted);
    font-size: 11px;
    font-weight: 750;
}

.dsa-preview-score > strong {
    display: block;
    margin: 6px 0 2px;
    color: var(--dsa-primary);
    font-size: 39px;
    font-weight: 900;
    line-height: 1;
}

.dsa-preview-score > small {
    color: var(--dsa-muted);
}


/* =========================================================
   43. PREVIEW METRICS
   ========================================================= */

.dsa-preview-metrics {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 17px;
}

.dsa-preview-metric-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 15px;

    background: var(--dsa-white);
    border: 1px solid var(--dsa-border);
    border-radius: 13px;
}

.dsa-preview-metric-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    font-size: 20px;
    background: var(--dsa-primary-light);
    border-radius: 12px;
}

.dsa-preview-metric-card small {
    display: block;
    color: var(--dsa-muted);
    font-size: 10px;
    font-weight: 750;
}

.dsa-preview-metric-card strong {
    display: block;
    margin-top: 3px;
    color: var(--dsa-heading);
    font-size: 16px;
    font-weight: 900;
}


/* =========================================================
   44. PREVIEW ANALYSIS PANELS
   ========================================================= */

.dsa-preview-analysis-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 17px;
}

.dsa-preview-panel {
    min-width: 0;
    padding: 20px;
    background: var(--dsa-white);
    border: 1px solid var(--dsa-border);
    border-radius: var(--dsa-radius-medium);
}

.dsa-preview-panel-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--dsa-border);
}

.dsa-preview-panel-heading > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    font-size: 19px;
    background: var(--dsa-primary-light);
    border-radius: 12px;
}

.dsa-preview-panel-heading small {
    display: block;
    color: var(--dsa-primary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.dsa-preview-panel-heading h3 {
    margin: 2px 0 0;
    font-size: 21px;
}

.dsa-preview-details {
    margin: 9px 0 0;
}

.dsa-preview-details > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid #edf1f5;
}

.dsa-preview-details > div:last-child {
    border-bottom: 0;
}

.dsa-preview-details dt {
    color: var(--dsa-muted);
    font-size: 12px;
}

.dsa-preview-details dd {
    margin: 0;
    color: var(--dsa-heading);
    text-align: right;
    font-size: 13px;
    font-weight: 900;
}


/* =========================================================
   45. PREVIEW GUIDANCE
   ========================================================= */

.dsa-preview-guidance-list {
    display: grid;
    gap: 10px;
    margin-top: 15px;
}

.dsa-preview-guidance-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;

    background: var(--dsa-soft-surface);
    border: 1px solid var(--dsa-border);
    border-radius: 11px;
}

.dsa-preview-guidance-item > span {
    color: var(--dsa-success);
    font-weight: 900;
}

.dsa-preview-guidance-item p {
    margin: 0;
    color: var(--dsa-text);
    font-size: 13px;
}


/* =========================================================
   46. HEAVY-LOAD PREVIEW WARNING
   ========================================================= */

.dsa-preview-warning-panel {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    margin-top: 17px;
    color: #704500;

    background:
        linear-gradient(
            145deg,
            var(--dsa-warning-light),
            var(--dsa-white)
        );

    border: 1px solid #e7bd6a;
    border-radius: var(--dsa-radius-medium);
}

.dsa-preview-warning-panel[hidden] {
    display: none !important;
}

.dsa-preview-warning-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    font-size: 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
}

.dsa-preview-warning-panel strong {
    color: #5b3900;
}

.dsa-preview-warning-panel p {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.6;
}

.dsa-preview-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 11px;
}

.dsa-preview-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    color: #704500;
    font-size: 11px;
    font-weight: 850;
    background: var(--dsa-white);
    border: 1px solid #dfb45e;
    border-radius: var(--dsa-radius-round);
}


/* =========================================================
   47. PREMIUM UNLOCK CARD
   ========================================================= */

.dsa-premium-unlock-card {
    position: relative;
    overflow: hidden;
    padding: 25px;
    margin-top: 21px;

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 216, 77, 0.26),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f2f8ff
        );

    border: 1px solid #c6dcf2;
    border-radius: var(--dsa-radius-large);
    box-shadow: var(--dsa-shadow-small);
}

.dsa-premium-unlock-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 19px;
}

.dsa-premium-unlock-header h3 {
    margin: 0;
    font-size: clamp(25px, 3vw, 36px);
    letter-spacing: -0.025em;
}

.dsa-premium-unlock-header p {
    max-width: 760px;
    margin: 10px 0 0;
    color: var(--dsa-muted);
}

.dsa-premium-lock-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    font-size: 27px;

    background: var(--dsa-accent-light);
    border: 1px solid #ecd98e;
    border-radius: 16px;
}

.dsa-locked-feature-list {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.dsa-locked-feature {
    display: grid;
    grid-template-columns:
        44px
        minmax(0, 1fr)
        auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 14px;

    background: var(--dsa-white);
    border: 1px solid var(--dsa-border);
    border-radius: 13px;
}

.dsa-locked-feature-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font-size: 19px;
    background: var(--dsa-primary-light);
    border-radius: 12px;
}

.dsa-locked-feature strong {
    display: block;
    color: var(--dsa-heading);
}

.dsa-locked-feature p {
    margin: 3px 0 0;
    color: var(--dsa-muted);
    font-size: 12px;
}

.dsa-locked-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    color: #6f5400;
    font-size: 10px;
    font-weight: 900;
    background: #fff2bc;
    border-radius: var(--dsa-radius-round);
}

.dsa-premium-value-box {
    margin-top: 17px;
}


/* =========================================================
   48. PAYMENT LAYOUT
   ========================================================= */

.dsa-payment-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 350px);
    gap: 20px;
}

.dsa-payment-card,
.dsa-payment-summary-card {
    min-width: 0;
    padding: 22px;
    background: var(--dsa-white);
    border: 1px solid var(--dsa-border);
    border-radius: var(--dsa-radius-medium);
}

.dsa-payment-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.dsa-payment-card-header h3,
.dsa-payment-summary-card h3 {
    margin: 0;
    font-size: 25px;
}

.dsa-payment-card-header p {
    margin: 8px 0 0;
    color: var(--dsa-muted);
}

.dsa-payment-security-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    font-size: 22px;
    background: var(--dsa-primary-light);
    border-radius: 14px;
}


/* =========================================================
   49. PAYMENT PRICE
   ========================================================= */

.dsa-payment-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 18px;
    margin: 18px 0;

    background:
        linear-gradient(
            135deg,
            var(--dsa-accent-light),
            var(--dsa-white)
        );

    border: 1px solid #ead58c;
    border-radius: 14px;
}

.dsa-payment-price > span {
    color: var(--dsa-muted);
    font-size: 12px;
    font-weight: 750;
}

.dsa-payment-price > strong {
    color: var(--dsa-primary);
    font-size: 34px;
    font-weight: 900;
}

.dsa-payment-price > small {
    color: var(--dsa-muted);
}


/* =========================================================
   50. PAYMENT BENEFITS
   ========================================================= */

.dsa-payment-benefits {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 18px;
}

.dsa-payment-benefits > div {
    padding: 10px 12px;
    color: var(--dsa-text);
    font-size: 12px;
    font-weight: 750;
    background: var(--dsa-soft-surface);
    border: 1px solid var(--dsa-border);
    border-radius: 10px;
}

.dsa-payment-benefits > div span {
    margin-right: 5px;
    color: var(--dsa-success);
    font-weight: 900;
}


/* =========================================================
   51. PAYMENT FORM
   ========================================================= */

.dsa-payment-form-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.dsa-payment-form-grid .dsa-field-group + .dsa-field-group {
    margin-top: 0;
}

.dsa-consent-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0;
    color: var(--dsa-muted);
    font-size: 12px;
    cursor: pointer;
}

.dsa-consent-row input {
    margin-top: 3px;
    accent-color: var(--dsa-primary);
}

.dsa-payment-button {
    width: 100%;
    min-height: 56px;
    font-size: 15px;
}


/* =========================================================
   52. PAYMENT TRUST ELEMENTS
   ========================================================= */

.dsa-payment-trust {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 15px;
}

.dsa-payment-trust > div {
    padding: 10px 7px;
    color: var(--dsa-muted);
    text-align: center;
    font-size: 10px;
    font-weight: 850;

    background: var(--dsa-soft-surface);
    border: 1px solid var(--dsa-border);
    border-radius: 10px;
}

.dsa-payment-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    margin-top: 15px;
    color: var(--dsa-muted);
    background: var(--dsa-soft-surface);
    border: 1px solid var(--dsa-border);
    border-radius: 12px;
}

.dsa-payment-notice p {
    margin: 0;
    font-size: 12px;
}


/* =========================================================
   53. PAYMENT SUMMARY SIDEBAR
   ========================================================= */

.dsa-payment-summary-list {
    margin: 13px 0 0;
}

.dsa-payment-summary-list > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid #edf1f5;
}

.dsa-payment-summary-list > div:last-child {
    border-bottom: 0;
}

.dsa-payment-summary-list dt {
    color: var(--dsa-muted);
    font-size: 12px;
}

.dsa-payment-summary-list dd {
    margin: 0;
    color: var(--dsa-heading);
    text-align: right;
    font-size: 13px;
    font-weight: 900;
}

.dsa-payment-summary-note {
    padding: 14px;
    margin-top: 15px;
    background: var(--dsa-primary-light);
    border: 1px solid #c3daf1;
    border-radius: 12px;
}

.dsa-payment-summary-note p {
    margin: 4px 0 0;
    color: var(--dsa-muted);
    font-size: 12px;
}


/* =========================================================
   54. PREMIUM BLUEPRINT
   ========================================================= */

.dsa-premium-blueprint-container {
    min-height: 260px;
}

.dsa-premium-placeholder {
    padding: 48px 22px;
    text-align: center;
    background: var(--dsa-soft-surface);
    border: 1px dashed var(--dsa-border-dark);
    border-radius: var(--dsa-radius-large);
}

.dsa-premium-placeholder-icon {
    display: block;
    margin-bottom: 10px;
    font-size: 34px;
}

.dsa-premium-placeholder h2 {
    margin-bottom: 8px;
}

.dsa-premium-placeholder p {
    margin: 0;
    color: var(--dsa-muted);
}

.dsa-blueprint {
    display: block;
}

.dsa-blueprint-hero {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 24px;
    padding: 27px;

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 216, 77, 0.26),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            var(--dsa-primary-light),
            var(--dsa-white)
        );

    border: 1px solid #c6dcf2;
    border-radius: var(--dsa-radius-large);
}

.dsa-blueprint-hero h2 {
    margin: 0;
    font-size: clamp(28px, 3vw, 42px);
    letter-spacing: -0.03em;
}

.dsa-blueprint-hero p {
    margin: 11px 0 0;
    color: var(--dsa-muted);
}

.dsa-blueprint-confidence {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 175px;
    padding: 20px;
    text-align: center;

    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--dsa-border);
    border-radius: 17px;
}

.dsa-blueprint-confidence span {
    color: var(--dsa-muted);
    font-size: 11px;
}

.dsa-blueprint-confidence strong {
    display: block;
    margin: 6px 0 2px;
    color: var(--dsa-primary);
    font-size: 39px;
    line-height: 1;
}

.dsa-blueprint-confidence small {
    color: var(--dsa-muted);
}


/* =========================================================
   55. BLUEPRINT METRICS
   ========================================================= */

.dsa-blueprint-metrics {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 17px;
}

.dsa-blueprint-metrics > article {
    padding: 15px;
    background: var(--dsa-white);
    border: 1px solid var(--dsa-border);
    border-radius: 13px;
}

.dsa-blueprint-metrics span {
    display: block;
    color: var(--dsa-muted);
    font-size: 10px;
    font-weight: 750;
}

.dsa-blueprint-metrics strong {
    display: block;
    margin-top: 3px;
    color: var(--dsa-heading);
    font-size: 17px;
    font-weight: 900;
}


/* =========================================================
   56. BLUEPRINT CARDS AND SECTIONS
   ========================================================= */

.dsa-blueprint-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 17px;
}

.dsa-blueprint-card,
.dsa-blueprint-section {
    min-width: 0;
    padding: 21px;
    background: var(--dsa-white);
    border: 1px solid var(--dsa-border);
    border-radius: var(--dsa-radius-medium);
}

.dsa-blueprint-section {
    margin-top: 17px;
}

.dsa-blueprint-card-icon {
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    margin-bottom: 13px;
    font-size: 20px;
    background: var(--dsa-primary-light);
    border-radius: 12px;
}

.dsa-blueprint-card h3 {
    margin-bottom: 10px;
    font-size: 21px;
}

.dsa-blueprint-card p {
    margin: 7px 0 0;
    color: var(--dsa-text);
}

.dsa-blueprint-card small {
    display: block;
    margin-top: 10px;
    color: var(--dsa-muted);
}


/* =========================================================
   57. BLUEPRINT SECTION HEADING
   ========================================================= */

.dsa-blueprint-section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dsa-blueprint-section-heading > span {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    font-size: 19px;
    background: var(--dsa-primary-light);
    border-radius: 12px;
}

.dsa-blueprint-section-heading small {
    display: block;
    color: var(--dsa-primary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.dsa-blueprint-section-heading h3 {
    margin: 2px 0 0;
    font-size: 22px;
}


/* =========================================================
   58. BLUEPRINT HIGHLIGHT
   ========================================================= */

.dsa-blueprint-highlight {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px;
    margin-top: 16px;

    background:
        linear-gradient(
            135deg,
            var(--dsa-primary-light),
            var(--dsa-white)
        );

    border: 1px solid #bfd8f1;
    border-radius: 13px;
}

.dsa-blueprint-highlight strong {
    color: var(--dsa-primary-dark);
    font-size: 22px;
    font-weight: 900;
}

.dsa-blueprint-highlight span {
    color: var(--dsa-muted);
    font-size: 12px;
}

.dsa-blueprint-reasons {
    margin: 16px 0 0;
    padding-left: 20px;
}

.dsa-blueprint-reasons li {
    margin-bottom: 6px;
}


/* =========================================================
   59. BLUEPRINT MATERIALS
   ========================================================= */

.dsa-blueprint-materials,
.dsa-cost-driver-list {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.dsa-blueprint-materials > div,
.dsa-cost-driver-list > article {
    min-width: 0;
    padding: 13px;
    background: var(--dsa-soft-surface);
    border: 1px solid var(--dsa-border);
    border-radius: 11px;
}

.dsa-blueprint-materials > div {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.dsa-blueprint-materials > div > span {
    color: var(--dsa-success);
    font-weight: 900;
}

.dsa-blueprint-materials p {
    margin: 0;
}

.dsa-blueprint-materials small,
.dsa-cost-driver-list small {
    display: block;
    margin-top: 4px;
    color: var(--dsa-muted);
}


/* =========================================================
   60. BLUEPRINT NOTICES
   ========================================================= */

.dsa-blueprint-notice,
.dsa-blueprint-footer-notice {
    padding: 14px;
    margin-top: 16px;
    color: var(--dsa-muted);
    background: var(--dsa-soft-surface);
    border: 1px solid var(--dsa-border);
    border-radius: 12px;
}

.dsa-blueprint-footer-notice p {
    margin: 0;
}

.dsa-blueprint-footer-notice p + p {
    margin-top: 8px;
}


/* =========================================================
   61. PART 4 RESPONSIVE RULES
   ========================================================= */

@media (max-width: 980px) {
    .dsa-payment-layout {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .dsa-preview-analysis-grid,
    .dsa-blueprint-grid {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .dsa-preview-metrics,
    .dsa-blueprint-metrics {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .dsa-preview-hero,
    .dsa-blueprint-hero,
    .dsa-premium-unlock-header,
    .dsa-payment-card-header,
    .dsa-blueprint-highlight {
        flex-direction: column;
        align-items: flex-start;
    }

    .dsa-preview-score,
    .dsa-blueprint-confidence {
        width: 100%;
        min-width: 0;
    }

    .dsa-preview-metrics,
    .dsa-blueprint-metrics,
    .dsa-payment-form-grid,
    .dsa-payment-benefits,
    .dsa-payment-trust,
    .dsa-locked-feature-list,
    .dsa-blueprint-materials,
    .dsa-cost-driver-list {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .dsa-locked-feature {
        grid-template-columns:
            44px
            minmax(0, 1fr);
    }

    .dsa-locked-pill {
        grid-column: 2;
        justify-self: start;
    }

    .dsa-payment-price {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   PART 5
   FINAL RESPONSIVE, ACCESSIBILITY, PRINT & THEME PROTECTION
   ========================================================= */


/* ---------- Smooth animations ---------- */

.dsa-fade-in{
    animation:dsaFade .35s ease;
}

@keyframes dsaFade{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:none;
    }
}


/* ---------- Card Hover ---------- */

.dsa-card-hover{
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.dsa-card-hover:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 35px rgba(0,0,0,.08);
}


/* ---------- Buttons ---------- */

.dsa-button{
    transition:all .18s ease;
}

.dsa-button:active{
    transform:scale(.98);
}


/* ---------- Images ---------- */

.dsa-assessment-app img{
    max-width:100%;
    height:auto;
}


/* ---------- Tables ---------- */

.dsa-assessment-app table{
    width:100%;
    border-collapse:collapse;
}

.dsa-assessment-app th,
.dsa-assessment-app td{
    padding:12px;
    border:1px solid #e4e7ea;
}

.dsa-assessment-app th{
    background:#f5f7fa;
}


/* ---------- Scrollbars ---------- */

.dsa-assessment-app ::-webkit-scrollbar{
    width:8px;
    height:8px;
}

.dsa-assessment-app ::-webkit-scrollbar-thumb{
    background:#cfd8e3;
    border-radius:20px;
}

.dsa-assessment-app ::-webkit-scrollbar-track{
    background:transparent;
}


/* ---------- Focus ---------- */

.dsa-assessment-app *:focus-visible{
    outline:3px solid rgba(7,84,166,.18);
    outline-offset:3px;
}


/* ---------- Loading ---------- */

.dsa-loading{
    opacity:.6;
    pointer-events:none;
}


/* ---------- Disabled ---------- */

.dsa-disabled{
    opacity:.45;
    pointer-events:none;
}


/* ---------- Locked Overlay ---------- */

.dsa-locked-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(4px);

    border-radius:inherit;

    z-index:50;

}

.dsa-locked-overlay span{

    background:#0754a6;

    color:#fff;

    padding:10px 18px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

}


/* ---------- Mobile ---------- */

@media(max-width:768px){

.dsa-step-navigation{

display:flex;

overflow:auto;

}

.dsa-step-tab{

min-width:170px;

}

.dsa-preview-metrics,

.dsa-blueprint-metrics,

.dsa-appliance-grid,

.dsa-building-grid,

.dsa-budget-grid,

.dsa-purpose-grid{

grid-template-columns:1fr;

}

}


/* ---------- Large Screen ---------- */

@media(min-width:1500px){

.dsa-assessment-app{

max-width:1600px;

}

}


/* ---------- Print ---------- */

@media print{

.dsa-button,

.dsa-step-navigation,

.dsa-progress,

.dsa-payment-layout{

display:none!important;

}

body{

background:#fff;

}

}


/* ---------- Elementor Protection ---------- */

.elementor .dsa-assessment-app button{

font-family:inherit;

}

.elementor .dsa-assessment-app input{

font-family:inherit;

}

.elementor .dsa-assessment-app select{

font-family:inherit;

}


/* ---------- Astra Protection ---------- */

.ast-theme-transparent-header .dsa-assessment-app{

margin-top:0;

}


/* ---------- GeneratePress ---------- */

.generatepress .dsa-assessment-app{

font-family:inherit;

}


/* ---------- Twenty Twenty ---------- */

.dsa-assessment-app{

isolation:isolate;

}


/* ---------- Selection ---------- */

.dsa-assessment-app ::selection{

background:#0754a6;

color:#fff;

}


/* ============================================================
   DEMIAN SOLAR ARCHITECT
   PROFESSIONAL SAAS / SOFTWARE SHELL OVERRIDE
   ------------------------------------------------------------
   Add this ENTIRE section at the very bottom of frontend.css.
   It intentionally overrides earlier frontend layout rules.
   ============================================================ */


/* ============================================================
   1. SOFTWARE DESIGN TOKENS
   ============================================================ */

.dsa-assessment-app.dsa-software-shell {
    --dsa-shell-navy: #071d36;
    --dsa-shell-navy-soft: #0d2948;

    --dsa-shell-blue: #0868c8;
    --dsa-shell-blue-dark: #0754a6;
    --dsa-shell-blue-light: #eaf4ff;

    --dsa-shell-yellow: #ffd84d;
    --dsa-shell-green: #149267;

    --dsa-shell-bg: #f3f7fb;
    --dsa-shell-bg-soft: #f8fbfe;

    --dsa-shell-card: #ffffff;
    --dsa-shell-border: #dce6f1;
    --dsa-shell-border-dark: #cbd8e6;

    --dsa-shell-text: #102a43;
    --dsa-shell-muted: #66778d;

    --dsa-shell-shadow:
        0 10px 30px rgba(16, 42, 67, 0.06);

    --dsa-shell-shadow-lg:
        0 24px 60px rgba(16, 42, 67, 0.10);

    --dsa-shell-radius: 18px;
    --dsa-shell-radius-lg: 24px;

    width: 100%;
    max-width: 1720px;

    margin:
        24px auto
        50px;

    padding: 0;

    overflow: hidden;

    color: var(--dsa-shell-text);

    background: var(--dsa-shell-bg);

    border:
        1px solid
        var(--dsa-shell-border);

    border-radius: 26px;

    box-shadow:
        var(--dsa-shell-shadow-lg);

    isolation: isolate;
}


/* ============================================================
   2. TOP SOFTWARE HEADER
   ============================================================ */

.dsa-software-shell .dsa-software-topbar {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 28px;

    min-height: 110px;

    padding:
        22px
        32px;

    margin: 0;

    background: #ffffff;

    border: 0;
    border-bottom:
        1px solid
        var(--dsa-shell-border);

    border-radius: 0;

    box-shadow: none;
}


.dsa-software-shell .dsa-brand-block {
    display: flex;
    align-items: center;

    gap: 16px;

    min-width: 0;
}


.dsa-software-shell .dsa-brand-mark {
    display: grid;
    place-items: center;

    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    margin: 0;

    color: #ffffff;

    font-size: 24px;

    background:
        linear-gradient(
            135deg,
            var(--dsa-shell-blue),
            var(--dsa-shell-blue-dark)
        );

    border: 0;

    border-radius: 16px;

    box-shadow:
        0 12px 24px
        rgba(8, 104, 200, 0.20);
}


.dsa-software-shell .dsa-brand-copy {
    min-width: 0;
}


.dsa-software-shell .dsa-eyebrow {
    margin:
        0 0
        4px;

    color:
        var(--dsa-shell-blue);

    font-size: 11px;

    font-weight: 900;

    line-height: 1.2;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.dsa-software-shell .dsa-app-title {
    margin: 0;

    color:
        var(--dsa-shell-text);

    font-size:
        clamp(
            22px,
            2vw,
            29px
        );

    font-weight: 900;

    line-height: 1.15;

    letter-spacing: -0.025em;
}


.dsa-software-shell .dsa-app-description {
    max-width: 760px;

    margin:
        6px 0
        0;

    color:
        var(--dsa-shell-muted);

    font-size: 13px;

    line-height: 1.55;
}


.dsa-software-shell .dsa-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 11px;

    flex-wrap: wrap;
}


.dsa-software-shell .dsa-system-status,
.dsa-software-shell .dsa-secure-session {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    min-height: 38px;

    padding:
        0
        13px;

    font-size: 11px;

    font-weight: 800;

    border-radius: 999px;
}


.dsa-software-shell .dsa-system-status {
    color: #14674b;

    background: #edf8f3;

    border:
        1px solid
        #c7e9da;
}


.dsa-software-shell .dsa-secure-session {
    color:
        var(--dsa-shell-muted);

    background:
        #f5f8fb;

    border:
        1px solid
        var(--dsa-shell-border);
}


.dsa-software-shell .dsa-status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--dsa-shell-green);

    box-shadow:
        0 0 0 4px
        rgba(20, 146, 103, 0.10);
}


/* ============================================================
   3. MAIN APPLICATION GRID
   ============================================================ */

.dsa-software-shell .dsa-application-layout {
    display: grid;

    grid-template-columns:
        250px
        minmax(0, 1fr);

    min-height: 900px;

    background:
        var(--dsa-shell-bg);
}


/* ============================================================
   4. LEFT SOFTWARE SIDEBAR
   ============================================================ */

.dsa-software-shell .dsa-software-sidebar {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    padding:
        25px
        18px;

    color: #ffffff;

    background:
        linear-gradient(
            180deg,
            var(--dsa-shell-navy),
            #071a31
        );

    border-right:
        1px solid
        rgba(255, 255, 255, 0.04);
}


.dsa-software-shell .dsa-sidebar-brand {
    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        4px 8px
        26px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.08);
}


.dsa-software-shell .dsa-sidebar-logo {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    color: #ffffff;

    font-size: 18px;

    background:
        var(--dsa-shell-blue);

    border-radius: 13px;

    box-shadow:
        0 10px 22px
        rgba(8, 104, 200, 0.28);
}


.dsa-software-shell .dsa-sidebar-brand strong {
    display: block;

    color: #ffffff;

    font-size: 15px;

    font-weight: 900;

    letter-spacing: 0.08em;
}


.dsa-software-shell .dsa-sidebar-brand span {
    display: block;

    margin-top: 3px;

    color: #a7bbd0;

    font-size: 11px;

    font-weight: 600;
}


/* ============================================================
   5. DESKTOP STEP NAVIGATION
   ============================================================ */

.dsa-software-shell .dsa-sidebar-navigation {
    display: grid;

    grid-template-columns: 1fr;

    gap: 7px;

    margin:
        24px 0
        0;

    padding: 0;

    overflow: visible;

    background: transparent;
}


.dsa-software-shell
.dsa-sidebar-navigation
.dsa-step-tab {

    display: grid;

    grid-template-columns:
        30px
        28px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 8px;

    width: 100%;

    min-width: 0;
    min-height: 50px;

    padding:
        8px
        10px;

    color: #b6c6d8;

    text-align: left;

    background: transparent;

    border:
        1px solid
        transparent;

    border-radius: 12px;

    box-shadow: none;

    transform: none;
}


.dsa-software-shell
.dsa-sidebar-navigation
.dsa-step-tab:hover:not(:disabled) {

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.07);

    border-color:
        rgba(255, 255, 255, 0.06);

    transform: none;

    box-shadow: none;
}


.dsa-software-shell
.dsa-sidebar-navigation
.dsa-sidebar-step-icon {

    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    color: #9eb4c9;

    font-size: 15px;
}


.dsa-software-shell
.dsa-sidebar-navigation
.dsa-step-number {

    display: grid;
    place-items: center;

    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    margin: 0;

    color: #94aac0;

    font-size: 11px;

    font-weight: 900;

    background:
        rgba(255, 255, 255, 0.07);

    border-radius: 8px;
}


.dsa-software-shell
.dsa-sidebar-navigation
.dsa-step-label {

    color: inherit;

    font-size: 12px;

    font-weight: 800;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.dsa-software-shell
.dsa-sidebar-navigation
.dsa-step-lock {

    margin-left: auto;

    font-size: 10px;

    opacity: 0.62;
}


/* active */

.dsa-software-shell
.dsa-sidebar-navigation
.dsa-step-tab.is-active {

    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.11);

    border-color:
        rgba(255, 255, 255, 0.08);

    box-shadow:
        inset
        4px 0
        0
        var(--dsa-shell-yellow);
}


.dsa-software-shell
.dsa-sidebar-navigation
.dsa-step-tab.is-active
.dsa-step-number {

    color:
        var(--dsa-shell-navy);

    background:
        var(--dsa-shell-yellow);
}


.dsa-software-shell
.dsa-sidebar-navigation
.dsa-step-tab.is-active
.dsa-sidebar-step-icon {

    color:
        var(--dsa-shell-yellow);
}


/* completed */

.dsa-software-shell
.dsa-sidebar-navigation
.dsa-step-tab.is-complete:not(.is-active) {

    color: #d9e5f1;

    background:
        rgba(20, 146, 103, 0.09);

    border-color:
        rgba(20, 146, 103, 0.16);
}


.dsa-software-shell
.dsa-sidebar-navigation
.dsa-step-tab.is-complete:not(.is-active)
.dsa-step-number {

    color: #ffffff;

    background:
        var(--dsa-shell-green);
}


/* locked */

.dsa-software-shell
.dsa-sidebar-navigation
.dsa-step-tab.is-locked {

    color: #71879d;

    background: transparent;

    border-color: transparent;

    opacity: 0.76;
}


/* ============================================================
   6. SIDEBAR FOOTER
   ============================================================ */

.dsa-software-shell .dsa-sidebar-footer {
    margin-top: auto;

    padding:
        22px
        7px
        4px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.08);
}


.dsa-software-shell .dsa-sidebar-trust {
    display: flex;

    gap: 10px;

    padding:
        13px;

    background:
        rgba(255, 255, 255, 0.055);

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius: 12px;
}


.dsa-software-shell
.dsa-sidebar-trust > span {

    display: grid;
    place-items: center;

    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    color:
        var(--dsa-shell-yellow);

    font-size: 12px;

    background:
        rgba(255, 216, 77, 0.10);

    border-radius: 50%;
}


.dsa-software-shell
.dsa-sidebar-trust strong {

    display: block;

    color: #ffffff;

    font-size: 10px;

    line-height: 1.35;
}


.dsa-software-shell
.dsa-sidebar-trust small {

    display: block;

    margin-top: 4px;

    color: #93a9bf;

    font-size: 9px;

    line-height: 1.5;
}


.dsa-software-shell
.dsa-sidebar-company {

    margin-top: 15px;

    color: #71869b;

    font-size: 9px;

    text-align: center;

    text-transform: uppercase;

    letter-spacing: 0.11em;
}


/* ============================================================
   7. MAIN WORKSPACE
   ============================================================ */

.dsa-software-shell .dsa-workspace {
    min-width: 0;

    padding:
        28px
        30px
        22px;

    background:
        var(--dsa-shell-bg);
}


/* ============================================================
   8. WORKSPACE HEADING
   ============================================================ */

.dsa-software-shell
.dsa-workspace-header {

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 24px;

    margin:
        0 0
        18px;

    padding:
        0
        2px;
}


.dsa-software-shell
.dsa-workspace-eyebrow {

    margin:
        0 0
        6px;

    color:
        var(--dsa-shell-blue);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.dsa-software-shell
.dsa-workspace-header h2 {

    margin: 0;

    color:
        var(--dsa-shell-text);

    font-size:
        clamp(
            24px,
            2.5vw,
            34px
        );

    font-weight: 900;

    line-height: 1.12;

    letter-spacing: -0.035em;
}


.dsa-software-shell
.dsa-workspace-header p:not(.dsa-workspace-eyebrow) {

    max-width: 720px;

    margin:
        8px 0
        0;

    color:
        var(--dsa-shell-muted);

    font-size: 13px;

    line-height: 1.6;
}


.dsa-software-shell
.dsa-workspace-step-status {

    min-width: 145px;

    padding:
        12px
        14px;

    text-align: right;

    background:
        var(--dsa-shell-card);

    border:
        1px solid
        var(--dsa-shell-border);

    border-radius: 13px;

    box-shadow:
        0 6px 18px
        rgba(16, 42, 67, 0.04);
}


.dsa-software-shell
.dsa-workspace-step-status span {

    display: block;

    margin-bottom: 4px;

    color:
        var(--dsa-shell-muted);

    font-size: 9px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.06em;
}


.dsa-software-shell
.dsa-workspace-step-status strong {

    color:
        var(--dsa-shell-text);

    font-size: 13px;
}


/* ============================================================
   9. PROGRESS CARD
   ============================================================ */

.dsa-software-shell .dsa-progress {
    display: block;

    margin:
        0 0
        18px;

    padding:
        15px
        17px;

    background:
        var(--dsa-shell-card);

    border:
        1px solid
        var(--dsa-shell-border);

    border-radius: 15px;

    box-shadow:
        0 7px 20px
        rgba(16, 42, 67, 0.04);
}


.dsa-software-shell
.dsa-progress-copy {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    margin:
        0 0
        10px;
}


.dsa-software-shell
#dsa-progress-label {

    color:
        var(--dsa-shell-muted);

    font-size: 11px;

    font-weight: 800;
}


.dsa-software-shell
#dsa-progress-title {

    color:
        var(--dsa-shell-blue-dark);

    font-size: 11px;

    font-weight: 900;
}


.dsa-software-shell
.dsa-progress-track {

    width: 100%;
    height: 7px;

    overflow: hidden;

    background:
        #e6edf4;

    border-radius: 999px;
}


.dsa-software-shell
.dsa-progress-fill {

    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--dsa-shell-blue),
            #1494e8 58%,
            var(--dsa-shell-yellow)
        );

    border-radius: inherit;

    box-shadow:
        0 0 12px
        rgba(8, 104, 200, 0.15);

    transition:
        width
        0.35s ease;
}


/* ============================================================
   10. MOBILE STEP NAVIGATION
   ============================================================ */

.dsa-software-shell
.dsa-mobile-step-navigation {

    display: none;
}


/* ============================================================
   11. MAIN CONTENT / ENERGY PROFILE GRID
   ============================================================ */

.dsa-software-shell .dsa-wizard-shell {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(275px, 330px);

    gap: 20px;

    align-items: start;

    margin: 0;

    padding: 0;

    background: transparent;
}


/* ============================================================
   12. ASSESSMENT WORKSPACE CARD
   ============================================================ */

.dsa-software-shell
.dsa-wizard-main {

    min-width: 0;

    padding: 0;

    background: transparent;

    border: 0;

    border-radius: 0;

    box-shadow: none;
}


.dsa-software-shell
.dsa-assessment-form {

    padding:
        24px;

    background:
        var(--dsa-shell-card);

    border:
        1px solid
        var(--dsa-shell-border);

    border-radius:
        var(--dsa-shell-radius-lg);

    box-shadow:
        var(--dsa-shell-shadow);
}


/* ============================================================
   13. STEP PANEL COMPACT PROFESSIONAL SPACING
   ============================================================ */

.dsa-software-shell
.dsa-step-panel {

    margin: 0;

    padding: 0;

    background: transparent;

    border: 0;

    box-shadow: none;
}


.dsa-software-shell
.dsa-step-panel > *:first-child {

    margin-top: 0;
}


.dsa-software-shell
.dsa-step-panel h1,
.dsa-software-shell
.dsa-step-panel h2 {

    letter-spacing: -0.035em;
}


/*
   Reduce excessively large step headings from the old
   marketing-style interface.
*/

.dsa-software-shell
.dsa-step-panel
.dsa-step-title,

.dsa-software-shell
.dsa-step-panel
h2[id^="dsa-step-heading"] {

    max-width: 840px;

    margin-bottom: 10px;

    color:
        var(--dsa-shell-text);

    font-size:
        clamp(
            27px,
            3vw,
            42px
        );

    line-height: 1.08;

    font-weight: 900;
}


/* general body copy */

.dsa-software-shell
.dsa-step-panel p {

    color:
        var(--dsa-shell-muted);

    line-height: 1.65;
}


/* ============================================================
   14. OPTION / SELECTION CARDS
   ============================================================ */

/*
   Preserve the current controls but make all major choice cards
   feel like modern SaaS controls.
*/

.dsa-software-shell
.dsa-building-option,

.dsa-software-shell
.dsa-purpose-option,

.dsa-software-shell
.dsa-budget-option,

.dsa-software-shell
.dsa-option-card {

    background:
        #ffffff;

    border:
        1px solid
        var(--dsa-shell-border);

    border-radius: 16px;

    box-shadow:
        0 5px 14px
        rgba(16, 42, 67, 0.035);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease,
        background 0.2s ease;
}


.dsa-software-shell
.dsa-building-option:hover,

.dsa-software-shell
.dsa-purpose-option:hover,

.dsa-software-shell
.dsa-budget-option:hover,

.dsa-software-shell
.dsa-option-card:hover {

    transform:
        translateY(-2px);

    border-color:
        #a8caeb;

    box-shadow:
        0 11px 24px
        rgba(16, 42, 67, 0.07);
}


/* selected state */

.dsa-software-shell
.is-selected.dsa-building-option,

.dsa-software-shell
.dsa-building-option.is-selected,

.dsa-software-shell
.dsa-purpose-option.is-selected,

.dsa-software-shell
.dsa-budget-option.is-selected,

.dsa-software-shell
.dsa-option-card.is-selected {

    background:
        #f2f8ff;

    border-color:
        var(--dsa-shell-blue);

    box-shadow:
        0 0 0 3px
        rgba(8, 104, 200, 0.08);
}


/* ============================================================
   15. FORM INPUTS
   ============================================================ */

.dsa-software-shell
input[type="text"],

.dsa-software-shell
input[type="email"],

.dsa-software-shell
input[type="number"],

.dsa-software-shell
input[type="tel"],

.dsa-software-shell
input[type="search"],

.dsa-software-shell
select,

.dsa-software-shell
textarea {

    color:
        var(--dsa-shell-text);

    background:
        #fbfdff;

    border:
        1px solid
        var(--dsa-shell-border-dark);

    border-radius: 12px;

    box-shadow: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.dsa-software-shell
input[type="text"]:focus,

.dsa-software-shell
input[type="email"]:focus,

.dsa-software-shell
input[type="number"]:focus,

.dsa-software-shell
input[type="tel"]:focus,

.dsa-software-shell
input[type="search"]:focus,

.dsa-software-shell
select:focus,

.dsa-software-shell
textarea:focus {

    outline: none;

    background:
        #ffffff;

    border-color:
        var(--dsa-shell-blue);

    box-shadow:
        0 0 0 4px
        rgba(8, 104, 200, 0.09);
}


/* ============================================================
   16. LIVE ENERGY PROFILE
   ============================================================ */

.dsa-software-shell
.dsa-live-summary {

    position: sticky;

    top: 18px;

    min-width: 0;

    padding: 0;

    margin: 0;
}


.dsa-software-shell
.dsa-summary-card {

    position: relative;

    overflow: hidden;

    padding:
        20px;

    background:
        var(--dsa-shell-card);

    border:
        1px solid
        var(--dsa-shell-border);

    border-radius:
        var(--dsa-shell-radius-lg);

    box-shadow:
        var(--dsa-shell-shadow);
}


.dsa-software-shell
.dsa-summary-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--dsa-shell-blue),
            #1e91df,
            var(--dsa-shell-yellow)
        );
}


.dsa-software-shell
.dsa-summary-heading {

    display: flex;
    align-items: center;

    gap: 12px;

    padding-bottom: 17px;

    margin-bottom: 4px;

    border-bottom:
        1px solid
        var(--dsa-shell-border);
}


.dsa-software-shell
.dsa-summary-icon {

    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    font-size: 21px;

    background:
        #fff7d8;

    border-radius: 13px;
}


.dsa-software-shell
.dsa-summary-eyebrow {

    margin:
        0 0
        4px;

    color:
        var(--dsa-shell-blue);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.dsa-software-shell
.dsa-summary-heading h2 {

    margin: 0;

    color:
        var(--dsa-shell-text);

    font-size: 19px;

    line-height: 1.2;

    font-weight: 900;
}


/* ============================================================
   17. SUMMARY LIST
   ============================================================ */

.dsa-software-shell
.dsa-summary-list {

    margin:
        5px 0
        0;
}


.dsa-software-shell
.dsa-summary-list > div {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(90px, auto);

    align-items: center;

    gap: 12px;

    min-height: 54px;

    padding:
        10px 0;

    border-bottom:
        1px solid
        #edf1f5;
}


.dsa-software-shell
.dsa-summary-list dt {

    color:
        var(--dsa-shell-muted);

    font-size: 11px;

    font-weight: 600;
}


.dsa-software-shell
.dsa-summary-list dd {

    margin: 0;

    color:
        var(--dsa-shell-text);

    font-size: 11px;

    font-weight: 850;

    line-height: 1.35;

    text-align: right;
}


/* ============================================================
   18. FREE PREVIEW NOTICE
   ============================================================ */

.dsa-software-shell
.dsa-summary-notice {

    display: flex;

    gap: 10px;

    margin-top: 17px;

    padding:
        14px;

    background:
        #fff9e8;

    border:
        1px solid
        #f1d98a;

    border-radius: 13px;
}


.dsa-software-shell
.dsa-summary-notice-icon {

    display: grid;
    place-items: center;

    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    color:
        #9d7400;

    font-size: 12px;

    background:
        rgba(255, 216, 77, 0.25);

    border-radius: 50%;
}


.dsa-software-shell
.dsa-summary-notice strong {

    display: block;

    margin-bottom: 5px;

    color:
        var(--dsa-shell-text);

    font-size: 11px;

    font-weight: 900;
}


.dsa-software-shell
.dsa-summary-notice p {

    margin: 0;

    color:
        var(--dsa-shell-muted);

    font-size: 10px;

    line-height: 1.55;
}


.dsa-software-shell
.dsa-summary-trust {

    display: flex;
    align-items: center;

    gap: 7px;

    margin-top: 12px;

    color:
        var(--dsa-shell-muted);

    font-size: 9px;

    font-weight: 700;
}


.dsa-software-shell
.dsa-summary-trust > span {

    color:
        var(--dsa-shell-green);

    font-weight: 900;
}


/* ============================================================
   19. WIZARD ACTION BAR
   ============================================================ */

.dsa-software-shell
.dsa-wizard-actions {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-top: 24px;

    padding-top: 19px;

    border-top:
        1px solid
        var(--dsa-shell-border);
}


.dsa-software-shell
.dsa-button {

    min-height: 44px;

    padding:
        0
        17px;

    border-radius: 11px;

    font-size: 12px;

    font-weight: 850;

    box-shadow: none;
}


.dsa-software-shell
.dsa-button-primary {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--dsa-shell-blue),
            var(--dsa-shell-blue-dark)
        );

    border-color:
        var(--dsa-shell-blue);

    box-shadow:
        0 10px 20px
        rgba(8, 104, 200, 0.16);
}


.dsa-software-shell
.dsa-button-primary:hover:not(:disabled) {

    transform:
        translateY(-1px);

    box-shadow:
        0 14px 26px
        rgba(8, 104, 200, 0.21);
}


.dsa-software-shell
.dsa-button-secondary {

    color:
        var(--dsa-shell-blue-dark);

    background:
        #ffffff;

    border:
        1px solid
        #bcd1e6;
}


.dsa-software-shell
.dsa-button:disabled {

    color:
        #8c98a6;

    background:
        #eef2f5;

    border-color:
        #e0e5ea;

    box-shadow: none;

    opacity: 1;
}


/* ============================================================
   20. PREMIUM / PAYMENT / BLUEPRINT PANELS
   ============================================================ */

.dsa-software-shell
.dsa-premium-blueprint-container,

.dsa-software-shell
.dsa-payment-layout,

.dsa-software-shell
.dsa-blueprint-wrapper,

.dsa-software-shell
.dsa-premium-result {

    border-radius:
        var(--dsa-shell-radius);

}


.dsa-software-shell
.dsa-premium-placeholder {

    min-height: 310px;

    padding:
        42px
        28px;

    background:
        linear-gradient(
            135deg,
            #f2f8ff,
            #ffffff 65%
        );

    border:
        1px dashed
        #b7d0e8;

    border-radius:
        var(--dsa-shell-radius);

    text-align: center;
}


/* ============================================================
   21. SOFTWARE FOOTER
   ============================================================ */

.dsa-software-shell
.dsa-software-footer {

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin-top: 22px;

    padding:
        16px
        4px
        4px;

    color:
        var(--dsa-shell-muted);

    border-top:
        1px solid
        var(--dsa-shell-border);
}


.dsa-software-shell
.dsa-software-footer > div:first-child strong {

    display: block;

    color:
        var(--dsa-shell-text);

    font-size: 10px;
}


.dsa-software-shell
.dsa-software-footer > div:first-child span {

    display: block;

    margin-top: 3px;

    font-size: 9px;
}


.dsa-software-shell
.dsa-footer-badges {

    display: flex;
    align-items: center;

    gap: 8px;

    flex-wrap: wrap;
}


.dsa-software-shell
.dsa-footer-badges span {

    display: inline-flex;

    align-items: center;

    min-height: 29px;

    padding:
        0
        9px;

    color:
        var(--dsa-shell-muted);

    font-size: 9px;

    font-weight: 700;

    background:
        #ffffff;

    border:
        1px solid
        var(--dsa-shell-border);

    border-radius: 999px;
}


/* ============================================================
   22. TABLET
   ============================================================ */

@media
(max-width: 1180px) {

    .dsa-assessment-app.dsa-software-shell {

        max-width:
            calc(
                100% - 24px
            );

        margin:
            12px auto
            36px;

        border-radius: 22px;
    }


    .dsa-software-shell
    .dsa-application-layout {

        grid-template-columns:
            210px
            minmax(0, 1fr);
    }


    .dsa-software-shell
    .dsa-software-sidebar {

        padding:
            22px
            12px;
    }


    .dsa-software-shell
    .dsa-sidebar-navigation
    .dsa-step-tab {

        grid-template-columns:
            26px
            24px
            minmax(0, 1fr)
            auto;

        gap: 6px;

        padding:
            7px
            8px;
    }


    .dsa-software-shell
    .dsa-sidebar-navigation
    .dsa-sidebar-step-icon {

        width: 26px;
        height: 26px;

        font-size: 13px;
    }


    .dsa-software-shell
    .dsa-workspace {

        padding:
            24px
            20px
            20px;
    }


    .dsa-software-shell
    .dsa-wizard-shell {

        grid-template-columns:
            minmax(0, 1fr)
            285px;
    }


    .dsa-software-shell
    .dsa-assessment-form {

        padding: 20px;
    }
}


/* ============================================================
   23. TABLET / SMALL LAPTOP
   ============================================================ */

@media
(max-width: 960px) {

    .dsa-software-shell
    .dsa-software-topbar {

        min-height: 90px;

        padding:
            18px
            22px;
    }


    .dsa-software-shell
    .dsa-app-description {

        display: none;
    }


    .dsa-software-shell
    .dsa-secure-session {

        display: none;
    }


    /*
       Hide permanent sidebar.
       Mobile navigation becomes the step navigation.
    */

    .dsa-software-shell
    .dsa-software-sidebar {

        display: none;
    }


    .dsa-software-shell
    .dsa-application-layout {

        display: block;

        min-height: auto;
    }


    .dsa-software-shell
    .dsa-mobile-step-navigation {

        display: flex;

        gap: 9px;

        margin:
            0 0
            18px;

        padding:
            2px
            0
            8px;

        overflow-x: auto;

        scrollbar-width: thin;
    }


    .dsa-software-shell
    .dsa-mobile-step-navigation
    .dsa-step-tab {

        flex:
            0 0
            155px;

        min-width: 155px;

        min-height: 53px;

        padding:
            8px
            10px;

        background:
            #ffffff;

        border:
            1px solid
            var(--dsa-shell-border);

        border-radius: 13px;

        box-shadow: none;
    }


    .dsa-software-shell
    .dsa-mobile-step-navigation
    .dsa-step-tab.is-active {

        color: #ffffff;

        background:
            linear-gradient(
                135deg,
                var(--dsa-shell-blue),
                var(--dsa-shell-blue-dark)
            );

        border-color:
            var(--dsa-shell-blue);
    }


    .dsa-software-shell
    .dsa-mobile-step-navigation
    .dsa-step-tab.is-complete:not(.is-active) {

        color:
            var(--dsa-shell-text);

        background:
            #eef8f4;

        border-color:
            #bde4d5;
    }


    .dsa-software-shell
    .dsa-wizard-shell {

        grid-template-columns: 1fr;
    }


    .dsa-software-shell
    .dsa-live-summary {

        position: static;

        order: -1;
    }


    .dsa-software-shell
    .dsa-summary-card {

        display: grid;

        grid-template-columns:
            minmax(0, 1fr);

        margin-bottom: 18px;
    }


    .dsa-software-shell
    .dsa-summary-list {

        display: grid;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap: 0 14px;
    }


    .dsa-software-shell
    .dsa-summary-list > div {

        display: block;

        min-height: auto;

        padding:
            12px 0;
    }


    .dsa-software-shell
    .dsa-summary-list dd {

        margin-top: 4px;

        text-align: left;
    }
}


/* ============================================================
   24. MOBILE
   ============================================================ */

@media
(max-width: 680px) {

    .dsa-assessment-app.dsa-software-shell {

        width: 100%;
        max-width: 100%;

        margin: 0;

        border:
            0;

        border-radius: 0;

        box-shadow: none;
    }


    .dsa-software-shell
    .dsa-software-topbar {

        align-items: flex-start;

        min-height: auto;

        padding:
            15px
            16px;
    }


    .dsa-software-shell
    .dsa-brand-mark {

        width: 44px;
        height: 44px;

        flex-basis: 44px;

        border-radius: 13px;

        font-size: 19px;
    }


    .dsa-software-shell
    .dsa-eyebrow {

        font-size: 9px;
    }


    .dsa-software-shell
    .dsa-app-title {

        font-size: 20px;
    }


    .dsa-software-shell
    .dsa-system-status {

        display: none;
    }


    .dsa-software-shell
    .dsa-workspace {

        padding:
            18px
            14px
            16px;
    }


    .dsa-software-shell
    .dsa-workspace-header {

        margin-bottom: 15px;
    }


    .dsa-software-shell
    .dsa-workspace-header h2 {

        font-size: 25px;
    }


    .dsa-software-shell
    .dsa-workspace-header p:not(.dsa-workspace-eyebrow) {

        font-size: 12px;
    }


    .dsa-software-shell
    .dsa-workspace-step-status {

        display: none;
    }


    .dsa-software-shell
    .dsa-progress {

        padding:
            13px
            14px;

        border-radius: 13px;
    }


    .dsa-software-shell
    .dsa-mobile-step-navigation
    .dsa-step-tab {

        flex-basis: 135px;

        min-width: 135px;

        min-height: 50px;
    }


    .dsa-software-shell
    .dsa-mobile-step-navigation
    .dsa-step-label {

        font-size: 11px;
    }


    .dsa-software-shell
    .dsa-assessment-form {

        padding:
            18px
            15px;

        border-radius: 17px;
    }


    .dsa-software-shell
    .dsa-step-panel
    .dsa-step-title,

    .dsa-software-shell
    .dsa-step-panel
    h2[id^="dsa-step-heading"] {

        font-size: 27px;
    }


    .dsa-software-shell
    .dsa-summary-card {

        padding:
            17px;

        border-radius: 17px;
    }


    .dsa-software-shell
    .dsa-summary-list {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .dsa-software-shell
    .dsa-summary-notice {

        padding: 12px;
    }


    .dsa-software-shell
    .dsa-wizard-actions {

        gap: 9px;
    }


    .dsa-software-shell
    .dsa-button {

        min-height: 43px;

        padding:
            0
            14px;

        font-size: 11px;
    }


    .dsa-software-shell
    .dsa-software-footer {

        align-items: flex-start;

        flex-direction: column;
    }
}


/* ============================================================
   25. VERY SMALL MOBILE
   ============================================================ */

@media
(max-width: 420px) {

    .dsa-software-shell
    .dsa-workspace {

        padding:
            16px
            11px;
    }


    .dsa-software-shell
    .dsa-summary-list {

        grid-template-columns: 1fr;
    }


    .dsa-software-shell
    .dsa-summary-list > div {

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap: 10px;
    }


    .dsa-software-shell
    .dsa-summary-list dd {

        margin-top: 0;

        text-align: right;
    }


    .dsa-software-shell
    .dsa-assessment-form {

        padding:
            16px
            13px;
    }


    .dsa-software-shell
    .dsa-wizard-actions {

        align-items: stretch;

        flex-direction: column-reverse;
    }


    .dsa-software-shell
    .dsa-wizard-actions
    .dsa-button {

        width: 100%;
    }


    .dsa-software-shell
    .dsa-footer-badges {

        align-items: flex-start;

        flex-direction: column;
    }
}


/* ============================================================
   26. PRINT
   ============================================================ */

@media print {

    .dsa-software-shell
    .dsa-software-sidebar,

    .dsa-software-shell
    .dsa-mobile-step-navigation,

    .dsa-software-shell
    .dsa-software-topbar,

    .dsa-software-shell
    .dsa-software-footer,

    .dsa-software-shell
    .dsa-wizard-actions {

        display: none !important;
    }


    .dsa-assessment-app.dsa-software-shell {

        max-width: none;

        margin: 0;

        border: 0;

        box-shadow: none;
    }


    .dsa-software-shell
    .dsa-workspace {

        padding: 0;
    }


    .dsa-software-shell
    .dsa-wizard-shell {

        display: block;


    }
}


/* ============================================================
   DEMIAN SOLAR ARCHITECT
   PROFESSIONAL OPTION CARD FIX
   Micro / Admin-style selection cards
   ============================================================ */


/* ------------------------------------------------------------
   1. BUILDING OPTIONS GRID
   ------------------------------------------------------------ */

.dsa-software-shell .dsa-building-options,
.dsa-software-shell .dsa-building-grid,
.dsa-software-shell [class*="building-options"] {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 16px !important;

    width: 100%;

    margin-top: 22px;
}


/* ------------------------------------------------------------
   2. BUILDING CARD
   ------------------------------------------------------------ */

.dsa-software-shell .dsa-building-option {
    position: relative;

    display: flex !important;

    align-items: flex-start;

    gap: 16px;

    width: 100% !important;

    min-width: 0 !important;

    min-height: 150px;

    padding: 20px !important;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #dce6f1;

    border-radius: 16px;

    box-shadow:
        0 5px 18px rgba(16, 42, 67, 0.04);

    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


/* Micro-style subtle hover */

.dsa-software-shell .dsa-building-option:hover {
    transform: translateY(-2px);

    border-color: #9fc4e8;

    box-shadow:
        0 12px 28px rgba(16, 42, 67, 0.08);
}


/* ------------------------------------------------------------
   3. ICON
   ------------------------------------------------------------ */

.dsa-software-shell
.dsa-building-option
.dsa-option-icon,

.dsa-software-shell
.dsa-building-option
.dsa-building-icon {

    display: grid;
    place-items: center;

    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    margin: 0 !important;

    background: #eaf4ff;

    border-radius: 14px;

    font-size: 24px;
}


/* ------------------------------------------------------------
   4. CARD CONTENT
   ------------------------------------------------------------ */

.dsa-software-shell
.dsa-building-option
.dsa-option-content,

.dsa-software-shell
.dsa-building-option
.dsa-building-content {

    min-width: 0;

    flex: 1;
}


.dsa-software-shell
.dsa-building-option h3,

.dsa-software-shell
.dsa-building-option strong {

    display: block;

    margin:
        2px 36px
        7px 0;

    color: #102a43;

    font-size: 17px !important;

    font-weight: 850;

    line-height: 1.25;

    letter-spacing: -0.015em;

    overflow-wrap: normal;
    word-break: normal;
}


.dsa-software-shell
.dsa-building-option p {

    max-width: 100%;

    margin: 0 !important;

    color: #66778d;

    font-size: 13px !important;

    line-height: 1.55 !important;

    word-break: normal !important;
    overflow-wrap: normal !important;

    white-space: normal;
}


/* ------------------------------------------------------------
   5. RADIO / SELECTION INDICATOR
   ------------------------------------------------------------ */

.dsa-software-shell
.dsa-building-option
input[type="radio"] {

    position: absolute;

    top: 18px;
    right: 18px;

    width: 20px;
    height: 20px;

    margin: 0;

    accent-color: #0868c8;
}


/* If your custom circular selector uses a class */

.dsa-software-shell
.dsa-building-option
.dsa-option-check,

.dsa-software-shell
.dsa-building-option
.dsa-selection-indicator {

    position: absolute;

    top: 17px;
    right: 17px;

    width: 22px;
    height: 22px;

    border: 1px solid #bfd0e1;

    border-radius: 50%;

    background: #ffffff;
}


/* ------------------------------------------------------------
   6. SELECTED CARD
   ------------------------------------------------------------ */

.dsa-software-shell
.dsa-building-option.is-selected,

.dsa-software-shell
.dsa-building-option:has(input[type="radio"]:checked) {

    background:
        linear-gradient(
            135deg,
            #f2f8ff,
            #ffffff
        );

    border-color: #0868c8;

    box-shadow:
        0 0 0 3px rgba(8, 104, 200, 0.08),
        0 10px 26px rgba(16, 42, 67, 0.07);
}


/* ------------------------------------------------------------
   7. PURPOSE / BUDGET CARDS
   Use the same professional card language.
   ------------------------------------------------------------ */

.dsa-software-shell
.dsa-purpose-option,

.dsa-software-shell
.dsa-budget-option {

    min-height: 145px !important;

    padding: 20px !important;

    border-radius: 16px !important;

    background: #ffffff;

    border: 1px solid #dce6f1;

    box-shadow:
        0 5px 18px rgba(16, 42, 67, 0.04);
}


.dsa-software-shell
.dsa-purpose-option:hover,

.dsa-software-shell
.dsa-budget-option:hover {

    transform: translateY(-2px);

    border-color: #9fc4e8;

    box-shadow:
        0 12px 28px rgba(16, 42, 67, 0.08);
}


/* ------------------------------------------------------------
   8. MAKE MAIN ASSESSMENT AREA SLIGHTLY WIDER
   This is important.
   ------------------------------------------------------------ */

@media (min-width: 1181px) {

    .dsa-software-shell .dsa-wizard-shell {
        grid-template-columns:
            minmax(0, 1fr)
            310px !important;

        gap: 22px;
    }

}


/* ------------------------------------------------------------
   9. LARGE MONITOR
   Three cards are allowed only when there is genuinely
   enough horizontal space.
   ------------------------------------------------------------ */

@media (min-width: 1500px) {

    .dsa-software-shell .dsa-building-options,
    .dsa-software-shell .dsa-building-grid,
    .dsa-software-shell [class*="building-options"] {

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }

}


/* ------------------------------------------------------------
   10. TABLET
   ------------------------------------------------------------ */

@media (max-width: 1000px) {

    .dsa-software-shell .dsa-building-options,
    .dsa-software-shell .dsa-building-grid,
    .dsa-software-shell [class*="building-options"] {

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}


/* ------------------------------------------------------------
   11. MOBILE
   ------------------------------------------------------------ */

@media (max-width: 620px) {

    .dsa-software-shell .dsa-building-options,
    .dsa-software-shell .dsa-building-grid,
    .dsa-software-shell [class*="building-options"] {

        grid-template-columns:
            1fr !important;

        gap: 12px !important;
    }


    .dsa-software-shell .dsa-building-option {

        min-height: 120px;

        padding: 16px !important;

        gap: 13px;
    }


    .dsa-software-shell
    .dsa-building-option
    .dsa-option-icon,

    .dsa-software-shell
    .dsa-building-option
    .dsa-building-icon {

        width: 48px;
        height: 48px;

        flex-basis: 48px;
    }


    .dsa-software-shell
    .dsa-building-option h3,

    .dsa-software-shell
    .dsa-building-option strong {

        font-size: 15px !important;
    }


    .dsa-software-shell
    .dsa-building-option p {

        font-size: 12px !important;
    }

}

/* ============================================================
   END DEMIAN PROFESSIONAL SAAS UI OVERRIDE
   ============================================================ */


/* ---------- End ---------- */

/* ============================================================
   DEMIAN SOLAR ARCHITECT — FINAL PROFESSIONAL UI PASS
   Sticky SaaS shell + appliance toolbar + Demian states + pricing
   ============================================================ */

:root {
    --dsa-pro-blue: #0754a6;
    --dsa-pro-blue-2: #0a75cf;
    --dsa-pro-navy: #071d36;
    --dsa-pro-text: #102a43;
    --dsa-pro-muted: #66778d;
    --dsa-pro-bg: #f3f7fb;
    --dsa-pro-card: #ffffff;
    --dsa-pro-border: #dce6f1;
    --dsa-pro-yellow: #ffd84d;
    --dsa-pro-green: #149267;
}

/* Desktop app behaves like a real dashboard. */
@media (min-width: 961px) {
    .dsa-software-shell .dsa-software-sidebar {
        position: sticky !important;
        top: 0 !important;
        align-self: start !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        z-index: 50;
    }

    .dsa-software-shell .dsa-workspace {
        overflow: visible !important;
        padding-top: 0 !important;
    }

    /* Micro1-style sticky workspace heading. */
    .dsa-software-shell .dsa-assessment-workspace > .dsa-workspace-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 42 !important;
        min-height: 104px;
        margin: 0 -32px 0 !important;
        padding: 20px 32px 14px !important;
        align-items: center !important;
        background: rgba(243, 247, 251, 0.98) !important;
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(220,230,241,.92);
    }

    .dsa-software-shell .dsa-assessment-workspace > .dsa-progress {
        position: sticky !important;
        top: 104px !important;
        z-index: 41 !important;
        margin: 0 -32px 22px !important;
        padding: 14px 32px 16px !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 0 !important;
        background: rgba(255,255,255,.99) !important;
        box-shadow: 0 8px 18px rgba(16,42,67,.055) !important;
    }

    /* Cards disappear below the sticky header rather than bleeding through it. */
    .dsa-software-shell .dsa-assessment-form {
        position: relative;
        z-index: 1;
    }

    /* Appliance search/category row acts like Micro1's fixed tabs. */
    .dsa-software-shell [data-step-panel="4"] .dsa-appliance-toolbar {
        position: sticky !important;
        top: 179px !important;
        z-index: 35 !important;
        margin: 0 -2px 20px !important;
        padding: 16px 18px !important;
        background: rgba(255,255,255,.98) !important;
        backdrop-filter: blur(10px);
        border: 1px solid var(--dsa-pro-border) !important;
        box-shadow: 0 10px 22px rgba(16,42,67,.07) !important;
    }
}

/* Correct workspace heading alignment. */
.dsa-software-shell .dsa-workspace-header {
    box-sizing: border-box;
    width: auto;
}
.dsa-software-shell .dsa-workspace-header > div:first-child {
    min-width: 0;
    max-width: 900px;
}
.dsa-software-shell .dsa-workspace-header h2 {
    margin: 0 !important;
    color: var(--dsa-pro-text) !important;
    font-size: clamp(27px, 2.4vw, 36px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
}
.dsa-software-shell .dsa-workspace-header p:not(.dsa-workspace-eyebrow) {
    margin-top: 7px !important;
    color: var(--dsa-pro-muted) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

/* Full-width assessment content — no old right-side reservation. */
.dsa-assessment-app.dsa-software-shell .dsa-assessment-workspace .dsa-wizard-shell,
.dsa-assessment-app.dsa-software-shell .dsa-assessment-workspace .dsa-wizard-shell-full {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: none !important;
    gap: 0 !important;
}
.dsa-assessment-app.dsa-software-shell .dsa-assessment-workspace .dsa-wizard-main,
.dsa-assessment-app.dsa-software-shell .dsa-assessment-workspace .dsa-assessment-form {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}
.dsa-software-shell .dsa-wizard-shell > .dsa-live-summary,
.dsa-software-shell .dsa-assessment-workspace .dsa-live-summary {
    display: none !important;
}

/* Demian-only active/hover/focus palette. Kills legacy orange/pink states. */
.dsa-software-shell .dsa-category-filter,
.dsa-software-shell .dsa-sidebar-view-button,
.dsa-software-shell .dsa-step-tab,
.dsa-software-shell .dsa-button {
    -webkit-tap-highlight-color: transparent;
}
.dsa-software-shell .dsa-category-filter:hover,
.dsa-software-shell .dsa-category-filter:focus,
.dsa-software-shell .dsa-category-filter:focus-visible {
    color: var(--dsa-pro-blue) !important;
    background: #eef6ff !important;
    border-color: #9fc5e9 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(7,84,166,.08) !important;
}
.dsa-software-shell .dsa-category-filter.is-active,
.dsa-software-shell .dsa-category-filter.is-active:hover,
.dsa-software-shell .dsa-category-filter.is-active:focus,
.dsa-software-shell .dsa-category-filter.is-active:focus-visible {
    color: #fff !important;
    background: linear-gradient(135deg, var(--dsa-pro-blue), var(--dsa-pro-blue-2)) !important;
    border-color: var(--dsa-pro-blue) !important;
    box-shadow: 0 8px 18px rgba(7,84,166,.16) !important;
}
.dsa-software-shell .dsa-sidebar-view-button:hover,
.dsa-software-shell .dsa-sidebar-view-button:focus-visible {
    color: #fff !important;
    background: rgba(255,255,255,.075) !important;
    border-color: rgba(255,255,255,.08) !important;
    outline: none !important;
}
.dsa-software-shell .dsa-sidebar-view-button.is-active,
.dsa-software-shell .dsa-sidebar-view-button.is-active:hover,
.dsa-software-shell .dsa-sidebar-view-button.is-active:focus-visible {
    color: #fff !important;
    background: rgba(10,117,207,.22) !important;
    border-color: rgba(102,184,255,.28) !important;
    border-left: 4px solid var(--dsa-pro-yellow) !important;
    box-shadow: none !important;
}

/* Appliance toolbar and cards. */
.dsa-software-shell .dsa-appliance-toolbar {
    grid-template-columns: minmax(280px,.8fr) minmax(0,1.4fr) !important;
    gap: 18px !important;
    border-radius: 16px !important;
}
.dsa-software-shell .dsa-category-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
.dsa-software-shell .dsa-category-filter {
    min-height: 36px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
}
.dsa-software-shell .dsa-appliance-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 16px !important;
}
.dsa-software-shell .dsa-appliance-card {
    min-width: 0 !important;
    border: 1px solid var(--dsa-pro-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 5px 18px rgba(16,42,67,.045) !important;
}
.dsa-software-shell .dsa-appliance-card:hover {
    border-color: #a6c8e8 !important;
    box-shadow: 0 12px 28px rgba(16,42,67,.075) !important;
}
.dsa-software-shell .dsa-appliance-card.is-selected,
.dsa-software-shell .dsa-appliance-card.has-load {
    border-color: #8dbde8 !important;
    box-shadow: 0 0 0 3px rgba(7,84,166,.055),0 10px 24px rgba(16,42,67,.06) !important;
}
.dsa-software-shell .dsa-appliance-fields {
    grid-template-columns: minmax(0,1.35fr) minmax(145px,.65fr) minmax(155px,.7fr) !important;
    gap: 14px !important;
}
.dsa-software-shell .dsa-quantity-control {
    width: 100% !important;
    max-width: 190px;
}

/* Building cards: explicit exact markup. */
.dsa-software-shell .dsa-building-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
}
.dsa-software-shell .dsa-building-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}
.dsa-software-shell .dsa-building-card .dsa-choice-card-content {
    display: grid !important;
    grid-template-columns: 58px minmax(0,1fr) !important;
    gap: 16px !important;
    width: 100% !important;
    min-height: 142px !important;
    padding: 21px 56px 21px 20px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--dsa-pro-border) !important;
    border-radius: 17px !important;
    background: #fff !important;
}
.dsa-software-shell .dsa-building-card .dsa-choice-copy strong {
    font-size: 17px !important;
    line-height: 1.3 !important;
    color: var(--dsa-pro-text) !important;
}
.dsa-software-shell .dsa-building-card .dsa-choice-copy small {
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: var(--dsa-pro-muted) !important;
}

/* Dedicated Live Assessment = dashboard page, not sidebar squeeze. */
.dsa-software-shell .dsa-live-assessment-view {
    width: 100%;
}
.dsa-software-shell .dsa-live-metric-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 16px;
}
.dsa-software-shell .dsa-live-metric-card,
.dsa-software-shell .dsa-live-dashboard-card {
    background: #fff;
    border: 1px solid var(--dsa-pro-border);
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(16,42,67,.045);
}

/* ------------------------------------------------------------
   PREMIUM BLUEPRINT — pricing is paid value, therefore dominant.
   ------------------------------------------------------------ */
.dsa-premium-blueprint-container .dsa-blueprint-highlight {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 18px 20px !important;
    background: #f6faff !important;
    border: 1px solid #bfd7ee !important;
    border-radius: 15px !important;
}
.dsa-premium-blueprint-container .dsa-blueprint-highlight > strong {
    color: var(--dsa-pro-text) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}
.dsa-premium-blueprint-container .dsa-blueprint-highlight > span,
.dsa-premium-blueprint-container .dsa-price-value,
.dsa-premium-blueprint-container .dsa-component-price-value {
    color: #064b8e !important;
    font-size: 17px !important;
    line-height: 1.3 !important;
    font-weight: 900 !important;
    opacity: 1 !important;
    text-align: right;
}
.dsa-premium-blueprint-container .dsa-blueprint-price-line {
    padding: 12px 14px !important;
    margin: 10px 0 !important;
    background: #f7fbff !important;
    border: 1px solid #d7e7f5 !important;
    border-radius: 12px !important;
}
.dsa-premium-blueprint-container .dsa-blueprint-price-line strong {
    color: #064b8e !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}
.dsa-premium-blueprint-container .dsa-fair-market-section {
    padding: 28px !important;
    background: linear-gradient(145deg,#f2f8ff,#fff 64%,#fff9e7) !important;
    border: 1px solid #9fc7ec !important;
    box-shadow: 0 14px 34px rgba(7,84,166,.09) !important;
}
.dsa-premium-blueprint-container .dsa-fair-market-section .dsa-blueprint-highlight,
.dsa-premium-blueprint-container .dsa-price-hero {
    display: block !important;
    padding: 22px 24px !important;
    background: #fff !important;
    border: 2px solid #8dbde8 !important;
    box-shadow: 0 8px 24px rgba(7,84,166,.08) !important;
}
.dsa-premium-blueprint-container .dsa-fair-market-section .dsa-blueprint-highlight > strong,
.dsa-premium-blueprint-container .dsa-price-hero > strong {
    display: block !important;
    margin-bottom: 8px !important;
    color: var(--dsa-pro-muted) !important;
    font-size: 11px !important;
    letter-spacing: .045em !important;
    text-transform: uppercase !important;
}
.dsa-premium-blueprint-container .dsa-fair-market-section .dsa-blueprint-highlight > span,
.dsa-premium-blueprint-container .dsa-system-price-value {
    display: block !important;
    color: var(--dsa-pro-blue) !important;
    font-size: clamp(27px,3vw,40px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.035em !important;
    font-weight: 950 !important;
    text-align: left !important;
    opacity: 1 !important;
}
.dsa-premium-blueprint-container .dsa-blueprint-card p strong,
.dsa-premium-blueprint-container .dsa-blueprint-section p strong {
    color: var(--dsa-pro-text);
    opacity: 1 !important;
}
.dsa-premium-blueprint-container .dsa-budget-shortfall-value {
    color: #9a5700 !important;
    font-size: 17px !important;
    font-weight: 900 !important;
}

/* Quote checker becomes a proper tool card; external !important overrides old inline styles. */
.dsa-premium-blueprint-container .dsa-quote-checker {
    background: #fff !important;
    border: 1px solid var(--dsa-pro-border) !important;
    border-radius: 18px !important;
}
.dsa-premium-blueprint-container #dsa-installer-quote {
    width: 100% !important;
    min-height: 50px !important;
    padding: 11px 14px !important;
    color: var(--dsa-pro-text) !important;
    background: #fff !important;
    border: 1px solid #b9cde0 !important;
    border-radius: 11px !important;
    box-shadow: none !important;
}
.dsa-premium-blueprint-container #dsa-installer-quote:focus {
    outline: none !important;
    border-color: var(--dsa-pro-blue) !important;
    box-shadow: 0 0 0 4px rgba(7,84,166,.09) !important;
}
.dsa-premium-blueprint-container #dsa-check-installer-quote {
    min-height: 50px !important;
    padding: 0 20px !important;
    color: #fff !important;
    background: linear-gradient(135deg,var(--dsa-pro-blue),var(--dsa-pro-blue-2)) !important;
    border: 0 !important;
    border-radius: 11px !important;
    font-weight: 850 !important;
    box-shadow: 0 9px 20px rgba(7,84,166,.16) !important;
}
.dsa-premium-blueprint-container #dsa-quote-check-result {
    padding: 16px 18px !important;
    color: var(--dsa-pro-text) !important;
    background: #f6faff !important;
    border: 1px solid #bfd7ee !important;
    border-radius: 13px !important;
}
.dsa-premium-blueprint-container #dsa-quote-check-result strong {
    color: #064b8e !important;
    font-weight: 900 !important;
}

@media (max-width: 1100px) {
    .dsa-software-shell .dsa-appliance-grid { grid-template-columns: 1fr !important; }
    .dsa-software-shell .dsa-appliance-fields { grid-template-columns: minmax(0,1fr) minmax(145px,.6fr) !important; }
    .dsa-software-shell .dsa-appliance-fields .dsa-field-group:last-child { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
    .dsa-software-shell .dsa-workspace { padding-top: 18px !important; }
    .dsa-software-shell .dsa-workspace-header,
    .dsa-software-shell .dsa-progress,
    .dsa-software-shell [data-step-panel="4"] .dsa-appliance-toolbar {
        position: static !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .dsa-software-shell .dsa-appliance-toolbar { grid-template-columns: 1fr !important; }
    .dsa-software-shell .dsa-live-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 680px) {
    .dsa-software-shell .dsa-building-grid,
    .dsa-software-shell .dsa-live-metric-grid { grid-template-columns: 1fr !important; }
    .dsa-software-shell .dsa-appliance-fields { grid-template-columns: 1fr !important; }
    .dsa-software-shell .dsa-appliance-fields .dsa-field-group:last-child { grid-column: auto; }
    .dsa-premium-blueprint-container .dsa-blueprint-highlight { display: block !important; }
    .dsa-premium-blueprint-container .dsa-blueprint-highlight > span { margin-top: 7px; text-align: left; }
}

/* END FINAL PROFESSIONAL UI PASS */


/* ============================================================
   DEMIAN SOLAR ARCHITECT — APPLICATION SHELL V2
   Airtm / Micro1-style fixed desktop frame
   ------------------------------------------------------------
   This block is intentionally LAST in frontend.css.
   It supersedes earlier sticky experiments without changing
   calculation, payment, or Blueprint logic.
   ============================================================ */

:root {
    --dsa-shell-v2-sidebar: 286px;
    --dsa-shell-v2-header: 112px;
    --dsa-shell-v2-progress: 82px;
    --dsa-shell-v2-blue: #0754a6;
    --dsa-shell-v2-blue-2: #0a75cf;
    --dsa-shell-v2-navy: #071d36;
    --dsa-shell-v2-bg: #f3f7fb;
    --dsa-shell-v2-card: #ffffff;
    --dsa-shell-v2-border: #d8e4ef;
    --dsa-shell-v2-muted: #66778d;
    --dsa-shell-v2-yellow: #ffd84d;
    --dsa-shell-v2-green: #16855b;
}

/* ------------------------------------------------------------
   1. REAL DESKTOP APPLICATION FRAME
   ------------------------------------------------------------ */

@media (min-width: 961px) {

    html:has(.dsa-assessment-app.dsa-software-shell),
    body:has(.dsa-assessment-app.dsa-software-shell) {
        overscroll-behavior: none;
    }

    .dsa-assessment-app.dsa-software-shell {
        width: 100% !important;
        max-width: 1480px !important;
        height: 100dvh !important;
        min-height: 680px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: var(--dsa-shell-v2-bg) !important;
        border: 1px solid var(--dsa-shell-v2-border);
    }

    body.admin-bar .dsa-assessment-app.dsa-software-shell {
        height: calc(100dvh - 32px) !important;
    }

    /* Desktop already has brand identity inside the sidebar.
       Removing the old top hero gives the software a true SaaS shell. */
    .dsa-assessment-app.dsa-software-shell > .dsa-app-header {
        display: none !important;
    }

    .dsa-software-shell .dsa-application-layout {
        display: grid !important;
        grid-template-columns:
            var(--dsa-shell-v2-sidebar)
            minmax(0, 1fr) !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
        background: var(--dsa-shell-v2-bg) !important;
    }

    /* LEFT COLUMN NEVER MOVES WITH CARD SCROLLING. */
    .dsa-software-shell .dsa-software-sidebar {
        position: relative !important;
        inset: auto !important;
        align-self: stretch !important;
        width: var(--dsa-shell-v2-sidebar) !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        z-index: 30 !important;
        border-radius: 0 !important;
        box-shadow: 8px 0 24px rgba(7, 29, 54, .07) !important;
    }

    .dsa-software-shell .dsa-sidebar-brand {
        padding-top: 24px !important;
        padding-bottom: 22px !important;
    }

    .dsa-software-shell .dsa-sidebar-section {
        min-height: 0 !important;
    }

    .dsa-software-shell .dsa-sidebar-navigation {
        gap: 5px !important;
        overflow: visible !important;
    }

    .dsa-software-shell
    .dsa-sidebar-navigation
    .dsa-step-tab {
        min-height: 46px !important;
        padding-top: 7px !important;
        padding-bottom: 7px !important;
    }

    .dsa-software-shell .dsa-sidebar-footer {
        margin-top: auto !important;
    }

    /* WORKSPACE ITSELF DOES NOT SCROLL. */
    .dsa-software-shell .dsa-workspace {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: var(--dsa-shell-v2-bg) !important;
    }

    .dsa-software-shell .dsa-workspace-view {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    /* Assessment page is a vertical application frame:
       title, progress, then independently scrolling content. */
    .dsa-software-shell .dsa-assessment-workspace {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* TITLE BAR DOES NOT MOVE. */
    .dsa-software-shell
    .dsa-assessment-workspace
    > .dsa-workspace-header {
        position: relative !important;
        top: auto !important;
        z-index: 20 !important;
        flex: 0 0 var(--dsa-shell-v2-header) !important;
        min-height: var(--dsa-shell-v2-header) !important;
        max-height: var(--dsa-shell-v2-header) !important;
        margin: 0 !important;
        padding: 22px 34px 14px !important;
        overflow: hidden !important;
        background: rgba(243, 247, 251, .995) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--dsa-shell-v2-border) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    .dsa-software-shell .dsa-workspace-header h2 {
        margin: 0 !important;
        max-width: 880px !important;
        color: #102a43 !important;
        font-size: clamp(27px, 2.3vw, 36px) !important;
        line-height: 1.08 !important;
        letter-spacing: -.035em !important;
    }

    .dsa-software-shell
    .dsa-workspace-header
    p:not(.dsa-workspace-eyebrow) {
        max-width: 900px !important;
        margin: 7px 0 0 !important;
        color: var(--dsa-shell-v2-muted) !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    /* PROGRESS BAR DOES NOT MOVE. */
    .dsa-software-shell
    .dsa-assessment-workspace
    > .dsa-progress {
        position: relative !important;
        top: auto !important;
        z-index: 19 !important;
        flex: 0 0 var(--dsa-shell-v2-progress) !important;
        min-height: var(--dsa-shell-v2-progress) !important;
        max-height: var(--dsa-shell-v2-progress) !important;
        margin: 0 !important;
        padding: 14px 34px 16px !important;
        overflow: hidden !important;
        background: #ffffff !important;
        border: 0 !important;
        border-bottom: 1px solid var(--dsa-shell-v2-border) !important;
        border-radius: 0 !important;
        box-shadow: 0 6px 16px rgba(16, 42, 67, .045) !important;
    }

    .dsa-software-shell .dsa-progress-copy {
        margin: 0 0 9px !important;
    }

    .dsa-software-shell .dsa-progress-track {
        height: 7px !important;
    }

    /* Mobile navigation must not consume desktop height. */
    .dsa-software-shell .dsa-mobile-step-navigation {
        display: none !important;
    }

    /* ONLY THIS REGION SCROLLS. */
    .dsa-assessment-app.dsa-software-shell
    .dsa-assessment-workspace
    .dsa-wizard-shell-full {
        display: block !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 24px 34px 42px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        scrollbar-gutter: stable;
        scroll-behavior: smooth;
        background: var(--dsa-shell-v2-bg) !important;
    }

    .dsa-software-shell
    .dsa-wizard-shell-full::-webkit-scrollbar {
        width: 10px;
    }

    .dsa-software-shell
    .dsa-wizard-shell-full::-webkit-scrollbar-track {
        background: transparent;
    }

    .dsa-software-shell
    .dsa-wizard-shell-full::-webkit-scrollbar-thumb {
        background: #c7d5e3;
        border: 3px solid var(--dsa-shell-v2-bg);
        border-radius: 999px;
    }

    .dsa-software-shell .dsa-wizard-main,
    .dsa-software-shell .dsa-assessment-form {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /* Live Assessment gets its own scrolling dashboard while sidebar stays still. */
    .dsa-software-shell .dsa-live-assessment-view {
        display: block;
        height: 100% !important;
        min-height: 0 !important;
        padding: 0 34px 42px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        scrollbar-gutter: stable;
        background: var(--dsa-shell-v2-bg) !important;
    }

    .dsa-software-shell .dsa-live-assessment-view[hidden] {
        display: none !important;
    }

    .dsa-software-shell .dsa-live-view-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 18 !important;
        margin: 0 -34px 22px !important;
        padding: 22px 34px 18px !important;
        background: rgba(243, 247, 251, .985) !important;
        border-bottom: 1px solid var(--dsa-shell-v2-border) !important;
        box-shadow: 0 6px 16px rgba(16, 42, 67, .045) !important;
    }
}

/* ------------------------------------------------------------
   2. LIVE ASSESSMENT — REMOVE LEGACY PINK / RED
   ------------------------------------------------------------ */

.dsa-software-shell .dsa-live-assessment-nav,
.dsa-software-shell .dsa-mobile-live-assessment,
.dsa-software-shell .dsa-sidebar-view-button {
    color: #cfe2f5 !important;
    border-color: transparent !important;
    background: transparent !important;
}

.dsa-software-shell .dsa-live-assessment-nav:hover,
.dsa-software-shell .dsa-live-assessment-nav:focus-visible,
.dsa-software-shell .dsa-mobile-live-assessment:hover,
.dsa-software-shell .dsa-mobile-live-assessment:focus-visible,
.dsa-software-shell .dsa-sidebar-view-button:hover,
.dsa-software-shell .dsa-sidebar-view-button:focus-visible {
    color: #ffffff !important;
    background: rgba(255, 255, 255, .075) !important;
    border-color: rgba(255, 255, 255, .10) !important;
    box-shadow: none !important;
    outline: none !important;
}

.dsa-software-shell .dsa-live-assessment-nav.is-active,
.dsa-software-shell .dsa-mobile-live-assessment.is-active,
.dsa-software-shell .dsa-sidebar-view-button.is-active {
    color: #ffffff !important;
    background: rgba(10, 117, 207, .22) !important;
    border-color: rgba(111, 190, 255, .22) !important;
    border-left: 4px solid var(--dsa-shell-v2-yellow) !important;
    box-shadow: none !important;
}

.dsa-software-shell .dsa-live-assessment-nav::before,
.dsa-software-shell .dsa-live-assessment-nav::after {
    background: none !important;
}

/* ------------------------------------------------------------
   3. APPLIANCE TOOLBAR — FIXED INSIDE SCROLLING CONTENT
   ------------------------------------------------------------ */

@media (min-width: 961px) {

    .dsa-software-shell
    [data-step-panel="4"]
    .dsa-appliance-toolbar {
        position: sticky !important;
        top: -1px !important;
        z-index: 15 !important;
        grid-template-columns:
            minmax(260px, .75fr)
            minmax(0, 1.35fr) !important;
        gap: 18px !important;
        margin: 0 0 22px !important;
        padding: 15px 17px !important;
        background: rgba(255, 255, 255, .985) !important;
        border: 1px solid var(--dsa-shell-v2-border) !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 24px rgba(16, 42, 67, .065) !important;
        backdrop-filter: blur(10px);
    }
}

/* Search/filter controls become obvious but restrained. */
.dsa-software-shell .dsa-appliance-search-wrap label,
.dsa-software-shell .dsa-filter-label {
    display: block !important;
    margin-bottom: 7px !important;
    color: #223b58 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .025em !important;
}

.dsa-software-shell .dsa-category-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
}

.dsa-software-shell .dsa-category-filter {
    min-height: 35px !important;
    padding: 0 13px !important;
    color: #51667d !important;
    background: #ffffff !important;
    border: 1px solid #cfdeeb !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

.dsa-software-shell .dsa-category-filter:hover,
.dsa-software-shell .dsa-category-filter:focus-visible {
    color: var(--dsa-shell-v2-blue) !important;
    background: #eef6ff !important;
    border-color: #9dc6ea !important;
    outline: none !important;
}

.dsa-software-shell .dsa-category-filter.is-active,
.dsa-software-shell .dsa-category-filter.is-active:hover,
.dsa-software-shell .dsa-category-filter.is-active:focus-visible {
    color: #ffffff !important;
    background:
        linear-gradient(
            135deg,
            var(--dsa-shell-v2-blue),
            var(--dsa-shell-v2-blue-2)
        ) !important;
    border-color: var(--dsa-shell-v2-blue) !important;
    box-shadow: 0 7px 17px rgba(7, 84, 166, .16) !important;
}

/* ------------------------------------------------------------
   4. APPLIANCE CATEGORIES MUST BE EASY TO SCAN
   ------------------------------------------------------------ */

.dsa-software-shell .dsa-appliance-category-section {
    margin: 0 0 28px !important;
    scroll-margin-top: 100px;
}

.dsa-software-shell .dsa-category-heading {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    min-height: 88px !important;
    margin: 0 0 15px !important;
    padding: 17px 20px 17px 22px !important;
    background:
        linear-gradient(
            110deg,
            #eaf4ff 0%,
            #f8fbff 70%,
            #ffffff 100%
        ) !important;
    border: 1px solid #cfe0ef !important;
    border-left: 6px solid var(--dsa-shell-v2-blue) !important;
    border-radius: 15px !important;
    box-shadow: 0 5px 16px rgba(16, 42, 67, .035) !important;
}

.dsa-software-shell .dsa-category-kicker {
    margin: 0 0 4px !important;
    color: var(--dsa-shell-v2-blue) !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}

.dsa-software-shell .dsa-category-heading h3 {
    margin: 0 !important;
    color: #0d2947 !important;
    font-size: clamp(23px, 2vw, 29px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.025em !important;
}

.dsa-software-shell .dsa-category-count {
    flex: 0 0 auto !important;
    padding: 7px 13px !important;
    color: var(--dsa-shell-v2-blue) !important;
    background: #ffffff !important;
    border: 1px solid #a9cdec !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

/* ------------------------------------------------------------
   5. APPLIANCE CARDS — NO MORE COLLIDING LABELS
   ------------------------------------------------------------ */

.dsa-software-shell .dsa-appliance-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.dsa-software-shell .dsa-appliance-card {
    min-width: 0 !important;
    padding: 20px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid var(--dsa-shell-v2-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 5px 18px rgba(16, 42, 67, .045) !important;
}

.dsa-software-shell .dsa-appliance-card:hover {
    border-color: #a9cceb !important;
    box-shadow: 0 12px 28px rgba(16, 42, 67, .07) !important;
}

.dsa-software-shell .dsa-appliance-card-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
}

.dsa-software-shell .dsa-appliance-identity {
    min-width: 0 !important;
}

.dsa-software-shell .dsa-appliance-load-badge {
    flex: 0 0 auto !important;
    min-width: 118px !important;
    max-width: 132px !important;
}

/* Professional two-row control layout:
   appliance type gets a full line; quantity and hours share next line. */
.dsa-software-shell .dsa-appliance-fields {
    display: grid !important;
    grid-template-columns:
        minmax(190px, .85fr)
        minmax(190px, 1.15fr) !important;
    gap: 13px 16px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 17px !important;
}

.dsa-software-shell
.dsa-appliance-fields
> .dsa-field-group:first-child {
    grid-column: 1 / -1 !important;
}

.dsa-software-shell .dsa-appliance-fields .dsa-field-group {
    min-width: 0 !important;
    width: 100% !important;
}

.dsa-software-shell .dsa-appliance-fields label {
    display: block !important;
    min-height: auto !important;
    margin: 0 0 7px !important;
    color: #213951 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
}

.dsa-software-shell .dsa-appliance-option,
.dsa-software-shell .dsa-appliance-hours {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
}

.dsa-software-shell .dsa-quantity-control {
    display: grid !important;
    grid-template-columns: 48px minmax(58px, 1fr) 48px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    gap: 7px !important;
}

.dsa-software-shell .dsa-quantity-button,
.dsa-software-shell .dsa-appliance-quantity {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 48px !important;
}

.dsa-software-shell .dsa-appliance-calculation {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.dsa-software-shell .dsa-appliance-calculation > div {
    min-width: 0 !important;
}

/* ------------------------------------------------------------
   6. BUILDING / CHOICE CARDS
   ------------------------------------------------------------ */

.dsa-software-shell .dsa-building-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 17px !important;
}

.dsa-software-shell .dsa-building-card .dsa-choice-card-content {
    min-height: 136px !important;
    padding: 19px 54px 19px 20px !important;
    border-color: var(--dsa-shell-v2-border) !important;
    box-shadow: 0 4px 15px rgba(16, 42, 67, .035) !important;
}

.dsa-software-shell
.dsa-building-card:hover
.dsa-choice-card-content {
    border-color: #a7cbea !important;
    box-shadow: 0 10px 24px rgba(16, 42, 67, .065) !important;
}

/* ------------------------------------------------------------
   7. PAID BLUEPRINT PRICE HIERARCHY
   ------------------------------------------------------------ */

.dsa-premium-blueprint-container .dsa-blueprint-highlight > span,
.dsa-premium-blueprint-container .dsa-price-value,
.dsa-premium-blueprint-container .dsa-component-price-value,
.dsa-premium-blueprint-container .dsa-system-price-value {
    color: #064b8e !important;
    font-weight: 900 !important;
    opacity: 1 !important;
}

.dsa-premium-blueprint-container
.dsa-fair-market-section
.dsa-blueprint-highlight > span,
.dsa-premium-blueprint-container .dsa-system-price-value {
    color: var(--dsa-shell-v2-blue) !important;
    font-size: clamp(28px, 3vw, 40px) !important;
    line-height: 1.1 !important;
    letter-spacing: -.035em !important;
}

.dsa-premium-blueprint-container .dsa-blueprint-card p,
.dsa-premium-blueprint-container .dsa-blueprint-section p {
    color: #52677f !important;
}

.dsa-premium-blueprint-container .dsa-blueprint-card p strong,
.dsa-premium-blueprint-container .dsa-blueprint-section p strong {
    color: #16324f !important;
    font-weight: 850 !important;
    opacity: 1 !important;
}

/* ------------------------------------------------------------
   8. SHORT HEIGHT DESKTOPS
   Keeps the sidebar static without clipping important navigation.
   ------------------------------------------------------------ */

@media (min-width: 961px) and (max-height: 780px) {

    .dsa-software-shell .dsa-sidebar-brand {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    .dsa-software-shell .dsa-sidebar-section-title {
        margin-top: 8px !important;
        margin-bottom: 6px !important;
    }

    .dsa-software-shell
    .dsa-sidebar-navigation
    .dsa-step-tab {
        min-height: 40px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .dsa-software-shell .dsa-sidebar-divider {
        margin-top: 7px !important;
        margin-bottom: 7px !important;
    }

    .dsa-software-shell .dsa-sidebar-footer {
        display: none !important;
    }
}

/* ============================================================
   END APPLICATION SHELL V2
   ============================================================ */