/* ==========================================================================
   IAC ACOUSTICS — Room Configurator 3D Engine  v17
   All viewer controls. Always-dark context. Full light+dark select legibility.
   ========================================================================== */

/* ══ Tokens ══════════════════════════════════════════════════════════════ */
:root {
    --nl3d-v-gold: #f7ca52;
    --nl3d-v-gold-glow: rgba(241,184,40,.18);
    --nl3d-v-gold-ink: #150900;
    --nl3d-v-chip: rgba(255,255,255,.07);
    --nl3d-v-chip-bd: rgba(255,255,255,.13);
    --nl3d-v-chip-fg: rgba(200,220,255,.72);
    --nl3d-v-chip-act: rgba(241,184,40,.18);
    --nl3d-v-chip-act-bd: rgba(241,184,40,.50);
    --nl3d-v-chip-act-fg: #f7ca52;
    --nl3d-v-blue-act: rgba(14,165,233,.18);
    --nl3d-v-blue-act-bd: rgba(14,165,233,.45);
    --nl3d-v-blue-act-fg: #7dd3fc;
    --nl3d-v-in-bg: rgba(255,255,255,.08);
    --nl3d-v-in-fg: rgba(220,238,255,.92);
    --nl3d-v-in-bd: rgba(255,255,255,.16);
    --nl3d-v-in-focus: rgba(241,184,40,.70);
    --nl3d-v-muted: rgba(160,190,235,.48);
    --nl3d-v-strip: rgba(7,14,28,.97);
    --nl3d-v-strip-bd: rgba(255,255,255,.08);
    --nl3d-v-t: .14s ease;
    /* Page-side (Blazor) arrow — light mode */
    --nl3d-sel-arrow-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23002855' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    /* dark mode arrow */
    --nl3d-sel-arrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(200%2C220%2C255%2C0.55)' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ══ SELECT LEGIBILITY — page-side selects ════════════════════════════ */
.nl3d-page select,
.nl3d-page .form-select {
    -webkit-appearance: none;
    appearance: none;
    background-image: var(--nl3d-sel-arrow-light);
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 12px;
    padding-right: 34px;
    color: #0f1f38;
    background-color: #ffffff;
    border: 1.5px solid rgba(0,40,85,.18);
    border-radius: 8px;
    height: 36px;
    padding-left: 11px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

    .nl3d-page select:hover,
    .nl3d-page .form-select:hover {
        border-color: rgba(241,184,40,.50);
    }

    .nl3d-page select:focus,
    .nl3d-page .form-select:focus {
        border-color: rgba(241,184,40,.70);
        box-shadow: 0 0 0 3px rgba(241,184,40,.16);
        outline: none;
    }

    .nl3d-page select option {
        color: #0f1f38;
        background: #ffffff;
    }

[data-bs-theme="dark"] .nl3d-page select,
[data-theme="dark"] .nl3d-page select,
[data-bs-theme="dark"] .nl3d-page .form-select,
[data-theme="dark"] .nl3d-page .form-select {
    background-image: var(--nl3d-sel-arrow-dark);
    color: rgba(228,240,255,.94);
    background-color: rgba(14,24,44,.98);
    border-color: rgba(255,255,255,.14);
}

    [data-bs-theme="dark"] .nl3d-page select option,
    [data-theme="dark"] .nl3d-page select option {
        color: rgba(228,240,255,.94);
        background: #0d1a2e;
    }

/* 3D shell selects — always dark */
#nl3d-shell-root select,
.nl3d-cfg-shell select,
.nl3d-strip select,
.nl3d-feat-editor select,
.nl3d-ff select,
.nl3d-bg-picker select {
    -webkit-appearance: none;
    appearance: none;
    background-image: var(--nl3d-sel-arrow-dark);
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 11px;
    padding: 0 26px 0 9px;
    color: var(--nl3d-v-in-fg);
    background-color: var(--nl3d-v-in-bg);
    border: 1px solid var(--nl3d-v-in-bd);
    border-radius: 7px;
    height: 28px;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    transition: border-color var(--nl3d-v-t);
}

    #nl3d-shell-root select:hover,
    .nl3d-cfg-shell select:hover {
        border-color: rgba(241,184,40,.50);
    }

    #nl3d-shell-root select:focus,
    .nl3d-cfg-shell select:focus {
        border-color: var(--nl3d-v-in-focus);
        box-shadow: 0 0 0 2px var(--nl3d-v-gold-glow);
    }

    #nl3d-shell-root select option,
    .nl3d-cfg-shell select option {
        background: #0d1a2e;
        color: rgba(228,240,255,.94);
    }

.nl3d-bg-picker select {
    min-width: 168px;
}


/* ══ SHELL & CANVAS ════════════════════════════════════════════════════ */
.nl3d-cfg-shell, .nl3d-shell {
    position: relative;
    width: 100%;
    border-radius: 14px;
    background: #071220;
    border: 1px solid rgba(241,184,40,.20);
    box-shadow: 0 0 0 1px rgba(241,184,40,.06), 0 4px 24px rgba(0,0,0,.30);
    overflow: visible;
}

.nl3d-canvas-wrap, .nl3d-cfg-canvas-wrap {
    position: relative;
    width: 100%;
    min-height: 520px;
    height: 58vh;
    max-height: 680px;
    overflow: hidden;
    background: #07111f;
    pointer-events: auto;
}

@media (max-width: 1100px) {
    .nl3d-canvas-wrap, .nl3d-cfg-canvas-wrap {
        min-height: 460px;
        height: 52vh;
        max-height: none;
    }
}

@media (max-width: 700px) {
    .nl3d-canvas-wrap, .nl3d-cfg-canvas-wrap {
        min-height: 420px;
        height: 50vh;
        max-height: none;
    }
}

#nl3d-3d-host, #nl3d-cfg-3d-host {
    position: absolute;
    inset: 0;
    pointer-events: auto;
}

    #nl3d-3d-host canvas, #nl3d-cfg-3d-host canvas {
        display: block;
        pointer-events: auto !important;
        touch-action: none !important;
        user-select: none;
        -webkit-user-select: none;
        cursor: grab;
    }

        #nl3d-3d-host canvas:active, #nl3d-cfg-3d-host canvas:active {
            cursor: grabbing;
        }

.nl3d-3d-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(160,190,235,.55);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    background: #07111f;
    pointer-events: none;
}


/* ══ TOOLBAR ═══════════════════════════════════════════════════════════ */
.nl3d-cfg-toolbar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    background: rgba(8,16,32,.94);
    border-bottom: 1px solid rgba(255,255,255,.08);
    border-radius: 14px 14px 0 0;
    flex-wrap: wrap;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

    .nl3d-cfg-toolbar > * {
        pointer-events: auto;
    }

    .nl3d-cfg-toolbar::after {
        content: "Drag · orbit  |  Shift+drag · pan  |  Wheel · zoom";
        margin-left: auto;
        color: rgba(148,170,210,.36);
        font-size: 8px;
        font-weight: 700;
        letter-spacing: .05em;
        white-space: nowrap;
        pointer-events: none;
    }

@media (max-width: 860px) {
    .nl3d-cfg-toolbar::after {
        display: none;
    }
}

/* Shared button base — dark toolbar */
.nl3d-vt__btn, .nl3d-tb-btn, .nl3d-cam,
.nl3d-cfg-btn, .nl3d-cfg-cam-chips button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 28px;
    padding: 0 12px;
    border-radius: 7px;
    border: 1px solid var(--nl3d-v-chip-bd);
    background: var(--nl3d-v-chip);
    color: var(--nl3d-v-chip-fg);
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--nl3d-v-t), border-color var(--nl3d-v-t), color var(--nl3d-v-t);
    -webkit-appearance: none;
}

    .nl3d-vt__btn:hover, .nl3d-tb-btn:hover, .nl3d-cam:hover,
    .nl3d-cfg-btn:hover, .nl3d-cfg-cam-chips button:hover {
        background: rgba(255,255,255,.12);
        border-color: rgba(255,255,255,.24);
        color: rgba(230,242,255,.95);
    }

    .nl3d-vt__btn--active, .nl3d-cam.active, .nl3d-cfg-cam-chips button.active,
    .nl3d-tb-btn--active {
        background: var(--nl3d-v-chip-act);
        border-color: var(--nl3d-v-chip-act-bd);
        color: var(--nl3d-v-chip-act-fg);
    }

    .nl3d-vt__btn:focus, .nl3d-tb-btn:focus {
        outline: none;
    }

    .nl3d-tb-btn--off, .nl3d-cfg-btn.is-off {
        opacity: .35;
    }

/* View toggle pill */
.nl3d-vt {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--nl3d-v-chip-bd);
    background: rgba(0,0,0,.38);
}

    .nl3d-vt .nl3d-vt__btn {
        border-radius: 0;
        border: 0;
    }

        .nl3d-vt .nl3d-vt__btn + .nl3d-vt__btn {
            border-left: 1px solid var(--nl3d-v-chip-bd);
        }

/* Camera chips */
.nl3d-cfg-cam-chips {
    display: flex;
    gap: 3px;
}

    .nl3d-cfg-cam-chips button {
        padding: 0 9px;
        height: 26px;
        font-size: 9px;
    }

/* Bg picker */
.nl3d-bg-picker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding-left: 10px;
    margin-left: 4px;
    border-left: 1px solid rgba(255,255,255,.10);
    color: rgba(160,190,235,.55);
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

/* Wall badge */
.nl3d-wall-badge {
    position: absolute;
    bottom: 10px;
    left: 12px;
    z-index: 15;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(0,10,30,.84);
    border: 1px solid rgba(14,165,233,.40);
    color: #7dd3fc;
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    pointer-events: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.nl3d-wall-badge--hidden {
    opacity: .22;
}


/* ══ WALL + FEATURE STRIP ══════════════════════════════════════════════ */
.nl3d-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0;
    padding: 10px 14px;
    background: var(--nl3d-v-strip);
    border-top: 1px solid var(--nl3d-v-strip-bd);
}

.nl3d-strip__col {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-right: 16px;
    margin-right: 16px;
    border-right: 1px solid var(--nl3d-v-strip-bd);
    min-width: 0;
}

    .nl3d-strip__col:last-child {
        border-right: none;
        padding-right: 0;
        margin-right: 0;
        flex: 1;
    }

.nl3d-strip__lbl {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(241,184,40,.72);
    white-space: nowrap;
}

/* Wall tabs */
.nl3d-wall-tabs {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}

.nl3d-wtab {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 11px;
    border-radius: 7px;
    border: 1px solid var(--nl3d-v-chip-bd);
    background: var(--nl3d-v-chip);
    color: var(--nl3d-v-chip-fg);
    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--nl3d-v-t);
    -webkit-appearance: none;
}

    .nl3d-wtab:hover {
        background: rgba(255,255,255,.12);
        border-color: rgba(255,255,255,.24);
        color: rgba(230,242,255,.95);
    }

.nl3d-wtab--active {
    background: var(--nl3d-v-blue-act);
    border-color: var(--nl3d-v-blue-act-bd);
    color: var(--nl3d-v-blue-act-fg);
}

/* Panel count */
.nl3d-panel-count-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.nl3d-pc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: 1px solid var(--nl3d-v-chip-bd);
    background: var(--nl3d-v-chip);
    color: var(--nl3d-v-chip-fg);
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--nl3d-v-t);
    -webkit-appearance: none;
}

    .nl3d-pc-btn:hover {
        background: var(--nl3d-v-chip-act);
        border-color: var(--nl3d-v-chip-act-bd);
        color: var(--nl3d-v-chip-act-fg);
    }

.nl3d-pc-val {
    min-width: 36px;
    text-align: center;
    font-size: 11px;
    font-weight: 900;
    color: rgba(220,238,255,.90);
}

.nl3d-pc-val--custom {
    color: var(--nl3d-v-gold) !important;
}

/* Wall run select / site limit */
.nl3d-wall-run-select {
    height: 26px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 700;
    padding: 0 24px 0 9px;
    -webkit-appearance: none;
    appearance: none;
    background-image: var(--nl3d-sel-arrow-dark);
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 10px;
    background-color: var(--nl3d-v-in-bg);
    color: var(--nl3d-v-in-fg);
    border: 1px solid var(--nl3d-v-in-bd);
    outline: none;
    cursor: pointer;
}

.nl3d-panel-edit-toggle {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid rgba(241,184,40,.28);
    background: rgba(241,184,40,.08);
    color: var(--nl3d-v-gold);
    font-family: inherit;
    font-size: 8.5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
    cursor: pointer;
    transition: all var(--nl3d-v-t);
    -webkit-appearance: none;
}

    .nl3d-panel-edit-toggle:hover {
        background: var(--nl3d-v-chip-act);
        border-color: var(--nl3d-v-chip-act-bd);
    }

.nl3d-site-limit-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9px;
    font-weight: 700;
    color: var(--nl3d-v-muted);
    cursor: pointer;
}

    .nl3d-site-limit-toggle input {
        accent-color: var(--nl3d-v-gold);
    }

.nl3d-site-limit-box {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    background: rgba(0,0,0,.22);
    border-radius: 8px;
    border: 1px solid var(--nl3d-v-strip-bd);
}

    .nl3d-site-limit-box label {
        display: flex;
        flex-direction: column;
        gap: 3px;
        font-size: 8px;
        font-weight: 800;
        color: var(--nl3d-v-muted);
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    .nl3d-site-limit-box input {
        width: 64px;
        height: 26px;
        border-radius: 6px;
        border: 1px solid var(--nl3d-v-in-bd);
        background: var(--nl3d-v-in-bg);
        color: var(--nl3d-v-in-fg);
        font-size: 11px;
        font-weight: 700;
        padding: 0 8px;
        outline: none;
        -webkit-appearance: none;
    }

/* Panel sel hint */
.nl3d-panel-sel-hint {
    font-size: 9px;
    color: var(--nl3d-v-muted);
    font-style: italic;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all var(--nl3d-v-t);
}

.nl3d-panel-sel-hint--active {
    border-color: rgba(241,184,40,.50);
    background: rgba(241,184,40,.10);
    color: var(--nl3d-v-gold);
    font-style: normal;
    font-weight: 800;
}

/* Panel width list + quick-edit */
.nl3d-panel-width-list {
    display: none;
}

.nl3d-panel-width-list--show {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nl3d-panel-width-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--nl3d-v-strip-bd);
}

    .nl3d-panel-width-cell label {
        font-size: 9px;
        font-weight: 800;
        color: var(--nl3d-v-muted);
        min-width: 32px;
    }

    .nl3d-panel-width-cell input {
        width: 72px;
        height: 24px;
        border-radius: 5px;
        border: 1px solid var(--nl3d-v-in-bd);
        background: var(--nl3d-v-in-bg);
        color: var(--nl3d-v-in-fg);
        font-size: 11px;
        font-weight: 700;
        padding: 0 7px;
        outline: none;
        -webkit-appearance: none;
    }

.nl3d-panel-quick-edit {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 6px 0;
}

    .nl3d-panel-quick-edit label {
        display: flex;
        flex-direction: column;
        gap: 3px;
        font-size: 8.5px;
        font-weight: 800;
        color: var(--nl3d-v-muted);
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    .nl3d-panel-quick-edit input {
        height: 28px;
        border-radius: 7px;
        border: 1px solid var(--nl3d-v-in-bd);
        background: var(--nl3d-v-in-bg);
        color: var(--nl3d-v-in-fg);
        font-size: 12px;
        font-weight: 700;
        padding: 0 8px;
        outline: none;
        min-width: 0;
        width: 80px;
        font-family: inherit;
        -webkit-appearance: none;
    }

        .nl3d-panel-quick-edit input:focus {
            border-color: var(--nl3d-v-in-focus);
            box-shadow: 0 0 0 2px var(--nl3d-v-gold-glow);
        }

#nl3d-panel-width-set {
    height: 28px;
    padding: 0 14px;
    border-radius: 7px;
    border: 0;
    background: linear-gradient(135deg, var(--nl3d-v-gold), #c47e00);
    color: var(--nl3d-v-gold-ink);
    font-family: inherit;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity var(--nl3d-v-t);
    -webkit-appearance: none;
}

    #nl3d-panel-width-set:hover {
        opacity: .85;
    }

/* Panel feature list */
.nl3d-panel-feature-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.nl3d-pfl-empty {
    font-size: 9px;
    color: var(--nl3d-v-muted);
    font-style: italic;
}

.nl3d-pfl-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--nl3d-v-strip-bd);
    font-size: 10px;
    color: rgba(210,228,255,.80);
}

    .nl3d-pfl-row b {
        font-weight: 800;
        color: rgba(220,238,255,.95);
    }

    .nl3d-pfl-row small {
        font-size: 8.5px;
        color: var(--nl3d-v-muted);
        margin-left: 6px;
    }

    .nl3d-pfl-row button {
        height: 22px;
        padding: 0 8px;
        border-radius: 5px;
        border: 1px solid var(--nl3d-v-chip-bd);
        background: var(--nl3d-v-chip);
        color: var(--nl3d-v-chip-fg);
        font-size: 8.5px;
        font-weight: 800;
        cursor: pointer;
        font-family: inherit;
        transition: all var(--nl3d-v-t);
        -webkit-appearance: none;
    }

        .nl3d-pfl-row button:hover {
            background: rgba(255,255,255,.14);
            color: rgba(230,242,255,.95);
        }


/* ══ FEATURE CHIPS ═════════════════════════════════════════════════════ */
.nl3d-feat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.nl3d-feat-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 13px;
    border-radius: 7px;
    border: 1px solid var(--nl3d-v-chip-bd);
    background: var(--nl3d-v-chip);
    color: var(--nl3d-v-chip-fg);
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--nl3d-v-t);
    -webkit-appearance: none;
}

    .nl3d-feat-chip:hover {
        background: var(--nl3d-v-chip-act);
        border-color: var(--nl3d-v-chip-act-bd);
        color: var(--nl3d-v-chip-act-fg);
        transform: translateY(-1px);
    }

.nl3d-feat-chip--active {
    background: rgba(241,184,40,.22);
    border-color: rgba(241,184,40,.58);
    color: var(--nl3d-v-gold);
}


/* ══ FEATURE EDITOR ════════════════════════════════════════════════════ */
.nl3d-feat-editor, #nl3d-feat-editor {
    padding: 12px 16px 14px;
    background: rgba(5,10,22,.98);
    border-top: 1px solid var(--nl3d-v-strip-bd);
    z-index: 25;
    position: relative;
}

.nl3d-feat-editor__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.nl3d-feat-editor__title {
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nl3d-v-gold);
}

.nl3d-feat-editor__close {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid rgba(248,113,113,.28);
    background: rgba(248,113,113,.07);
    color: #fca5a5;
    font-family: inherit;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    transition: all var(--nl3d-v-t);
    -webkit-appearance: none;
}

    .nl3d-feat-editor__close:hover {
        background: rgba(248,113,113,.18);
        border-color: rgba(248,113,113,.55);
    }

.nl3d-feat-editor__fields, .nl3d-ff {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 10px 12px;
    margin-bottom: 12px;
}

    .nl3d-ff-field, .nl3d-feat-editor__fields > div {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .nl3d-ff-lbl, .nl3d-feat-editor__fields label {
        display: block;
        font-size: 8.5px;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: rgba(160,190,235,.58);
        margin-bottom: 0;
    }

    .nl3d-ff input, .nl3d-ff-input,
    .nl3d-feat-editor__fields input[type="number"],
    .nl3d-feat-editor__fields input[type="text"] {
        height: 30px;
        border-radius: 7px;
        border: 1px solid var(--nl3d-v-in-bd);
        background: var(--nl3d-v-in-bg);
        color: var(--nl3d-v-in-fg);
        font-family: inherit;
        font-size: 12px;
        font-weight: 700;
        padding: 0 9px;
        outline: none;
        width: 100%;
        transition: border-color var(--nl3d-v-t), box-shadow var(--nl3d-v-t);
        -webkit-appearance: none;
    }

        .nl3d-ff input:focus, .nl3d-feat-editor__fields input:focus {
            border-color: var(--nl3d-v-in-focus);
            box-shadow: 0 0 0 2px var(--nl3d-v-gold-glow);
        }

.nl3d-feat-editor__actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.nl3d-feat-apply {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 20px;
    border-radius: 8px;
    border: 0;
    background: linear-gradient(135deg, var(--nl3d-v-gold), #c47e00);
    color: var(--nl3d-v-gold-ink);
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity var(--nl3d-v-t), transform var(--nl3d-v-t);
    -webkit-appearance: none;
}

    .nl3d-feat-apply:hover {
        opacity: .88;
        transform: translateY(-1px);
    }

.nl3d-feat-remove {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid rgba(248,113,113,.30);
    background: rgba(248,113,113,.07);
    color: #fca5a5;
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--nl3d-v-t);
    -webkit-appearance: none;
}

    .nl3d-feat-remove:hover {
        background: rgba(248,113,113,.18);
        border-color: rgba(248,113,113,.55);
        transform: translateY(-1px);
    }

.nl3d-feat-error, #nl3d-feat-error, .nl3d-feat-err {
    color: #fecaca;
    background: rgba(185,28,28,.18);
    border: 1px solid rgba(248,113,113,.35);
    border-radius: 7px;
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 800;
}


/* ══ BLAZOR INPUT BAR ══════════════════════════════════════════════════ */
.nl3d-cfg-blazor-inputs {
    background: #09162a;
    border-top: 1px solid rgba(255,255,255,.09);
    padding: 10px 14px 12px;
}

.nl3d-cfg-bi-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
}

.nl3d-cfg-bi-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.nl3d-cfg-bi-group--wide {
    min-width: 88px;
}

.nl3d-cfg-bi-group--finish {
    min-width: 154px;
}

.nl3d-cfg-bi-group--carpet {
    min-width: 130px;
}

.nl3d-cfg-bi-group--check {
    justify-content: flex-end;
}

.nl3d-cfg-bi-lbl {
    display: block;
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(160,190,235,.52);
    white-space: nowrap;
}

.nl3d-cfg-bi-inputwrap {
    display: flex;
    align-items: stretch;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--nl3d-v-in-bd);
    background: var(--nl3d-v-in-bg);
    transition: border-color var(--nl3d-v-t), box-shadow var(--nl3d-v-t);
}

    .nl3d-cfg-bi-inputwrap:focus-within {
        border-color: var(--nl3d-v-in-focus);
        box-shadow: 0 0 0 2px var(--nl3d-v-gold-glow);
    }

.nl3d-cfg-bi-input {
    height: 32px;
    min-width: 0;
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--nl3d-v-in-fg);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 0 9px;
    outline: none;
    -webkit-appearance: none;
}

.nl3d-cfg-bi-input--sm {
    max-width: 60px;
}

.nl3d-cfg-bi-unit {
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: 10px;
    font-weight: 800;
    color: rgba(160,190,235,.48);
    background: rgba(255,255,255,.04);
    border-left: 1px solid var(--nl3d-v-in-bd);
    white-space: nowrap;
}

.nl3d-cfg-bi-select {
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--nl3d-v-in-bd);
    background-color: var(--nl3d-v-in-bg);
    color: var(--nl3d-v-in-fg);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 0 28px 0 9px;
    outline: none;
    cursor: pointer;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background-image: var(--nl3d-sel-arrow-dark);
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 11px;
    transition: border-color var(--nl3d-v-t), box-shadow var(--nl3d-v-t);
}

    .nl3d-cfg-bi-select:focus {
        border-color: var(--nl3d-v-in-focus);
        box-shadow: 0 0 0 2px var(--nl3d-v-gold-glow);
    }

    .nl3d-cfg-bi-select option {
        background: #0d1a2e;
        color: rgba(228,240,255,.94);
    }

.nl3d-cfg-bi-chk-lbl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(200,220,255,.72);
    cursor: pointer;
    padding: 6px 0;
}

    .nl3d-cfg-bi-chk-lbl input[type="checkbox"] {
        accent-color: var(--nl3d-v-gold);
        width: 14px;
        height: 14px;
    }

.nl3d-cfg-bi-dim-readout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 7px 10px;
    background: rgba(0,0,0,.20);
    border-radius: 8px;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(160,190,235,.52);
}

.nl3d-cfg-bi-dim-val {
    font-size: 12px;
    font-weight: 900;
    color: rgba(220,238,255,.90);
}

.nl3d-cfg-bi-dim-sep {
    opacity: .38;
}


/* ══ ADVANCED DETAILS SUMMARY (Blazor side — light/dark aware) ═════════ */
.nl3d-cfg-advanced-details {
    border-top: 1px solid rgba(0,40,85,.10);
    background: transparent;
    border-radius: 0 0 14px 14px;
    overflow: hidden;
}

[data-bs-theme="dark"] .nl3d-cfg-advanced-details, [data-theme="dark"] .nl3d-cfg-advanced-details {
    border-color: rgba(255,255,255,.08);
}

.nl3d-cfg-advanced-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    font-size: 11.5px;
    font-weight: 800;
    color: #4a6080;
    cursor: pointer;
    letter-spacing: .04em;
    list-style: none;
    user-select: none;
    transition: color .15s, background .15s;
}

    .nl3d-cfg-advanced-summary:hover {
        color: #0f1f38;
        background: rgba(0,40,85,.04);
    }

[data-bs-theme="dark"] .nl3d-cfg-advanced-summary, [data-theme="dark"] .nl3d-cfg-advanced-summary {
    color: rgba(160,190,235,.55);
}

    [data-bs-theme="dark"] .nl3d-cfg-advanced-summary:hover, [data-theme="dark"] .nl3d-cfg-advanced-summary:hover {
        color: rgba(220,238,255,.95);
        background: rgba(255,255,255,.04);
    }

.nl3d-cfg-advanced-summary::-webkit-details-marker {
    display: none;
}

.nl3d-cfg-advanced-details[open] > .nl3d-cfg-advanced-summary {
    border-bottom: 1px solid rgba(0,40,85,.10);
}

[data-bs-theme="dark"] .nl3d-cfg-advanced-details[open] > .nl3d-cfg-advanced-summary,
[data-theme="dark"] .nl3d-cfg-advanced-details[open] > .nl3d-cfg-advanced-summary {
    border-color: rgba(255,255,255,.08);
}

.nl3d-cfg-advanced-hint {
    margin-left: auto;
    font-size: 9px;
    font-weight: 600;
    opacity: .60;
}


/* ══ 3D CARD WRAPPER ═══════════════════════════════════════════════════ */
.nl3d-card--configurator3d {
    padding: 0 !important;
    overflow: visible !important;
    border-radius: 14px;
    background: #071220;
    border-color: rgba(241,184,40,.22);
    box-shadow: 0 0 0 1px rgba(241,184,40,.08), 0 4px 24px rgba(0,0,0,.30);
    margin-bottom: 12px;
}

    .nl3d-card--configurator3d::before {
        display: none;
    }

    .nl3d-card--configurator3d .nl3d-svg-wrap, .nl3d-card--configurator3d .nl3d-svg-wrap--interactive3d {
        min-height: 0 !important;
        height: auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
    }

.nl3d-svg-iso--fallback {
    display: none !important;
}

.nl3d-3d-viewer {
    display: none !important;
}

.nl3d-3d-controls {
    display: none !important;
}


/* ══ DIM GATE ══════════════════════════════════════════════════════════ */
#nl3d-dim-gate input {
    height: 38px;
    border-radius: 9px;
    border: 1.5px solid rgba(255,255,255,.20);
    background: rgba(255,255,255,.08);
    color: #eaf2ff;
    font-size: 16px;
    font-weight: 700;
    padding: 0 10px;
    outline: 0;
    width: 115px;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
}

    #nl3d-dim-gate input:focus {
        border-color: rgba(241,184,40,.65);
        box-shadow: 0 0 0 3px var(--nl3d-v-gold-glow);
    }

#nl3d-dg-go {
    height: 42px;
    padding: 0 36px;
    border-radius: 10px;
    border: 0;
    background: linear-gradient(135deg, var(--nl3d-v-gold), #c47e00);
    color: var(--nl3d-v-gold-ink);
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 4px;
    transition: opacity .15s, transform .15s;
    -webkit-appearance: none;
}

    #nl3d-dg-go:hover {
        opacity: .88;
        transform: translateY(-1px);
    }


/* ══ LEGACY STRIP + VIS BTNS ═══════════════════════════════════════════ */
.nl3d-cfg-wall-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 12px;
    background: var(--nl3d-v-strip);
    border-top: 1px solid var(--nl3d-v-strip-bd);
    gap: 0;
}

.nl3d-cfg-wall-strip__section {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-right: 12px;
    margin-right: 12px;
    border-right: 1px solid var(--nl3d-v-strip-bd);
}

    .nl3d-cfg-wall-strip__section:last-child {
        border-right: 0;
        padding-right: 0;
        margin-right: 0;
        flex: 1;
    }

.nl3d-cfg-wall-strip__lbl {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--nl3d-v-muted);
    white-space: nowrap;
}

.nl3d-cfg-vis-btn, .nl3d-vis-btn {
    height: 22px;
    padding: 0 7px;
    border-radius: 5px;
    border: 1px solid var(--nl3d-v-chip-bd);
    background: var(--nl3d-v-chip);
    color: var(--nl3d-v-chip-fg);
    font-size: 8.5px;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: .03em;
    transition: all var(--nl3d-v-t);
    font-family: inherit;
    -webkit-appearance: none;
}

    .nl3d-cfg-vis-btn:hover, .nl3d-vis-btn:hover {
        background: rgba(255,255,255,.14);
        border-color: rgba(255,255,255,.24);
        color: rgba(230,242,255,.95);
    }

    .nl3d-cfg-vis-btn.is-hidden, .nl3d-vis-btn.is-hidden {
        background: rgba(220,50,50,.12);
        border-color: rgba(220,80,80,.35);
        color: #f87171;
        text-decoration: line-through;
    }

.nl3d-cfg-cam-chips {
    display: flex;
    gap: 3px;
    margin-left: auto;
    flex-wrap: nowrap;
}

/* Live views grid */
.nl3d-live-views-grid--plans2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 4px;
}

.nl3d-live-views-grid--plans3 {
    display: none;
}

@media (max-width: 900px) {
    .nl3d-live-views-grid--plans2 {
        grid-template-columns: 1fr;
    }
}

/* Refresh pulse */
.nl3d-tb-btn--refresh {
    border-color: rgba(125,211,252,.28);
    color: #a9d7ff;
}

.nl3d-tb-btn--pulse {
    box-shadow: 0 0 0 3px rgba(125,211,252,.18), 0 0 18px rgba(125,211,252,.22);
}

/* Responsive */
@media (max-width: 640px) {
    .nl3d-cfg-toolbar {
        padding: 7px 9px;
    }

    .nl3d-cfg-cam-chips {
        order: 3;
        width: 100%;
        flex-wrap: wrap;
        margin-left: 0;
    }

    .nl3d-strip {
        flex-direction: column;
    }

    .nl3d-strip__col {
        border-right: none;
        padding-right: 0;
        margin-right: 0;
        border-bottom: 1px solid var(--nl3d-v-strip-bd);
        padding-bottom: 10px;
        margin-bottom: 10px;
        width: 100%;
    }

        .nl3d-strip__col:last-child {
            border-bottom: none;
            padding-bottom: 0;
            margin-bottom: 0;
        }

    .nl3d-cfg-wall-strip {
        flex-direction: column;
        align-items: flex-start;
    }

    .nl3d-cfg-wall-strip__section {
        border-right: 0;
        padding-right: 0;
        margin-right: 0;
        border-bottom: 1px solid var(--nl3d-v-strip-bd);
        padding-bottom: 7px;
        margin-bottom: 7px;
        width: 100%;
    }

        .nl3d-cfg-wall-strip__section:last-child {
            border-bottom: 0;
        }
}

/* ========================================================================
   UI POLISH PASS — 3D viewer control surface
   Scope: injected 3D shell only. Keeps engine behavior intact.
   ======================================================================== */
#nl3d-shell-root {
    --nl3d-ui-gold: #f7ca52;
    --nl3d-ui-gold-soft: rgba(247,202,82,.14);
    --nl3d-ui-blue: #7dd3fc;
    --nl3d-ui-panel: rgba(8,16,32,.94);
    --nl3d-ui-panel-2: rgba(13,26,46,.96);
    --nl3d-ui-line: rgba(255,255,255,.12);
    --nl3d-ui-line-strong: rgba(247,202,82,.34);
    --nl3d-ui-text: rgba(232,242,255,.94);
    --nl3d-ui-muted: rgba(170,198,238,.62);
    --nl3d-ui-radius: 12px;
}

    #nl3d-shell-root .nl3d-cfg-toolbar {
        gap: 10px;
        padding: 11px 14px;
        background: linear-gradient(180deg, rgba(11,22,42,.98), rgba(6,14,28,.96));
        border-bottom: 1px solid rgba(247,202,82,.18);
    }

    #nl3d-shell-root .nl3d-cam-row,
    #nl3d-shell-root .nl3d-vis-row--toolbar,
    #nl3d-shell-root .nl3d-vt,
    #nl3d-shell-root .nl3d-bg-picker {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        padding: 5px;
        border: 1px solid var(--nl3d-ui-line);
        border-radius: 12px;
        background: rgba(255,255,255,.045);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    }

    #nl3d-shell-root .nl3d-bg-picker {
        gap: 8px;
        padding: 5px 7px 5px 9px;
    }

        /* Shared label styling */
        #nl3d-shell-root .nl3d-bg-picker span,
        #nl3d-shell-root .nl3d-cam-label,
        #nl3d-shell-root .nl3d-strip__lbl,
        #nl3d-shell-root .nl3d-ff-lbl,
        #nl3d-shell-root .nl3d-feat-editor__fields label,
        #nl3d-shell-root .nl3d-panel-quick-edit label,
        #nl3d-shell-root .nl3d-site-limit-box label {
            font-size: 9px;
            font-weight: 900;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

/* Dark mode - keep the brighter gold */
html[data-bs-theme="dark"] #nl3d-shell-root .nl3d-bg-picker span,
html[data-bs-theme="dark"] #nl3d-shell-root .nl3d-cam-label,
html[data-bs-theme="dark"] #nl3d-shell-root .nl3d-strip__lbl,
html[data-bs-theme="dark"] #nl3d-shell-root .nl3d-ff-lbl,
html[data-bs-theme="dark"] #nl3d-shell-root .nl3d-feat-editor__fields label,
html[data-bs-theme="dark"] #nl3d-shell-root .nl3d-panel-quick-edit label,
html[data-bs-theme="dark"] #nl3d-shell-root .nl3d-site-limit-box label,
body.dark #nl3d-shell-root .nl3d-bg-picker span,
body.dark #nl3d-shell-root .nl3d-cam-label,
body.dark #nl3d-shell-root .nl3d-strip__lbl,
body.dark #nl3d-shell-root .nl3d-ff-lbl,
body.dark #nl3d-shell-root .nl3d-feat-editor__fields label,
body.dark #nl3d-shell-root .nl3d-panel-quick-edit label,
body.dark #nl3d-shell-root .nl3d-site-limit-box label {
    color: rgba(247, 202, 82, .82);
}

/* Light mode - softer, less bright */
html[data-bs-theme="light"] #nl3d-shell-root .nl3d-bg-picker span,
html[data-bs-theme="light"] #nl3d-shell-root .nl3d-cam-label,
html[data-bs-theme="light"] #nl3d-shell-root .nl3d-strip__lbl,
html[data-bs-theme="light"] #nl3d-shell-root .nl3d-ff-lbl,
html[data-bs-theme="light"] #nl3d-shell-root .nl3d-feat-editor__fields label,
html[data-bs-theme="light"] #nl3d-shell-root .nl3d-panel-quick-edit label,
html[data-bs-theme="light"] #nl3d-shell-root .nl3d-site-limit-box label,
body.light #nl3d-shell-root .nl3d-bg-picker span,
body.light #nl3d-shell-root .nl3d-cam-label,
body.light #nl3d-shell-root .nl3d-strip__lbl,
body.light #nl3d-shell-root .nl3d-ff-lbl,
body.light #nl3d-shell-root .nl3d-feat-editor__fields label,
body.light #nl3d-shell-root .nl3d-panel-quick-edit label,
body.light #nl3d-shell-root .nl3d-site-limit-box label {
    color: rgba(34, 73, 115, .78);
}

#nl3d-shell-root .nl3d-vt__btn,
#nl3d-shell-root .nl3d-tb-btn,
#nl3d-shell-root .nl3d-cam,
#nl3d-shell-root .nl3d-vis-btn,
#nl3d-shell-root .nl3d-feat-chip,
#nl3d-shell-root .nl3d-panel-edit-toggle,
#nl3d-shell-root .nl3d-panel-quick-edit button,
#nl3d-shell-root .nl3d-panel-width-cell button,
#nl3d-shell-root .nl3d-pfl-row button,
#nl3d-shell-root .nl3d-feat-editor button,
#nl3d-shell-root .nl3d-site-limit-toggle {
    -webkit-appearance: none;
    appearance: none;
    min-height: 30px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.13);
    background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
    color: var(--nl3d-ui-text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 3px rgba(0,0,0,.16);
    font-weight: 850;
    letter-spacing: .045em;
    transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease, color .14s ease;
}

    #nl3d-shell-root .nl3d-vt__btn:hover,
    #nl3d-shell-root .nl3d-tb-btn:hover,
    #nl3d-shell-root .nl3d-cam:hover,
    #nl3d-shell-root .nl3d-vis-btn:hover,
    #nl3d-shell-root .nl3d-feat-chip:hover,
    #nl3d-shell-root .nl3d-panel-edit-toggle:hover,
    #nl3d-shell-root .nl3d-feat-editor button:hover {
        transform: translateY(-1px);
        border-color: rgba(247,202,82,.44);
        background: linear-gradient(180deg, rgba(247,202,82,.16), rgba(255,255,255,.06));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.20);
        color: #fff7db;
    }

    #nl3d-shell-root .nl3d-vt__btn:active,
    #nl3d-shell-root .nl3d-tb-btn:active,
    #nl3d-shell-root .nl3d-cam:active,
    #nl3d-shell-root .nl3d-vis-btn:active,
    #nl3d-shell-root .nl3d-feat-chip:active,
    #nl3d-shell-root .nl3d-panel-edit-toggle:active,
    #nl3d-shell-root .nl3d-feat-editor button:active {
        transform: translateY(0);
    }

    #nl3d-shell-root .nl3d-vt__btn--active,
    #nl3d-shell-root .nl3d-tb-btn--active,
    #nl3d-shell-root .nl3d-cam--active,
    #nl3d-shell-root .nl3d-cam.active,
    #nl3d-shell-root .nl3d-feat-chip--active,
    #nl3d-shell-root .nl3d-vis-btn:not(.nl3d-vis-btn--off) {
        border-color: rgba(247,202,82,.56);
        background: linear-gradient(180deg, rgba(247,202,82,.24), rgba(247,202,82,.10));
        color: var(--nl3d-ui-gold);
    }

#nl3d-shell-root .nl3d-tb-btn--off,
#nl3d-shell-root .nl3d-vis-btn--off {
    opacity: .48;
    color: rgba(170,198,238,.50);
    background: rgba(255,255,255,.035);
}

#nl3d-shell-root .nl3d-strip {
    gap: 14px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(7,14,28,.98), rgba(5,12,24,.98));
    border-top: 1px solid rgba(255,255,255,.07);
}

#nl3d-shell-root .nl3d-strip__col,
#nl3d-shell-root .nl3d-feat-editor,
#nl3d-shell-root #nl3d-feat-editor,
#nl3d-shell-root .nl3d-panel-width-list,
#nl3d-shell-root .nl3d-cfg-advanced-details {
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(16,30,54,.92), rgba(9,18,34,.94));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(0,0,0,.18);
    padding: 13px;
}

#nl3d-shell-root .nl3d-strip__col {
    min-width: 0;
}

#nl3d-shell-root .nl3d-feat-editor__head,
#nl3d-shell-root .nl3d-panel-width-list__head,
#nl3d-shell-root .nl3d-cfg-advanced-summary {
    border-bottom: 1px solid rgba(255,255,255,.09);
    padding-bottom: 9px;
    margin-bottom: 11px;
}

#nl3d-shell-root .nl3d-feat-editor__title {
    color: var(--nl3d-ui-text);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .01em;
}

#nl3d-shell-root .nl3d-ff,
#nl3d-shell-root .nl3d-feat-editor__fields {
    gap: 10px;
}

#nl3d-shell-root input[type="text"],
#nl3d-shell-root input[type="number"],
#nl3d-shell-root select,
#nl3d-shell-root textarea {
    min-height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    background-color: rgba(255,255,255,.075);
    color: var(--nl3d-ui-text);
    font-weight: 700;
    outline: none;
}

    #nl3d-shell-root input:focus,
    #nl3d-shell-root select:focus,
    #nl3d-shell-root textarea:focus {
        border-color: rgba(247,202,82,.62);
        box-shadow: 0 0 0 3px rgba(247,202,82,.14);
    }

    #nl3d-shell-root select:disabled,
    #nl3d-shell-root input:disabled,
    #nl3d-shell-root button:disabled {
        opacity: .52;
        cursor: not-allowed;
        transform: none;
    }

#nl3d-shell-root .nl3d-feat-editor__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
}

#nl3d-shell-root .nl3d-wall-badge {
    border: 1px solid rgba(247,202,82,.38);
    background: rgba(7,14,28,.72);
    color: var(--nl3d-ui-gold);
    border-radius: 999px;
    padding: 6px 11px;
    box-shadow: 0 6px 18px rgba(0,0,0,.24);
}

@media (max-width: 980px) {
    #nl3d-shell-root .nl3d-strip {
        grid-template-columns: 1fr !important;
    }

    #nl3d-shell-root .nl3d-cfg-toolbar::after {
        display: none;
    }
}


/* =======================================================================
   PATCH — viewer polish fixes requested after screenshot review
   ======================================================================= */
#nl3d-shell-root .nl3d-cfg-toolbar {
    gap: 10px;
    padding: 11px 14px;
    align-items: center;
}

#nl3d-shell-root .nl3d-cam-row {
    margin-left: auto;
    max-width: 100%;
    padding: 6px 8px;
    border-radius: 14px;
}

#nl3d-shell-root .nl3d-bg-picker {
    min-height: 34px;
    padding: 4px 8px 4px 10px;
    align-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,.055);
    max-width: 310px;
}

    #nl3d-shell-root .nl3d-bg-picker span {
        line-height: 1;
        white-space: nowrap;
    }

    #nl3d-shell-root .nl3d-bg-picker select,
    #nl3d-shell-root #nl3d-bg-select {
        height: 30px;
        min-height: 30px;
        min-width: 210px;
        max-width: 240px;
        border-radius: 10px;
        padding: 0 32px 0 12px;
        line-height: 30px;
        background-color: rgba(18,32,56,.98);
        background-position: right 11px center;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    }

#nl3d-shell-root .nl3d-strip {
    display: grid;
    grid-template-columns: minmax(300px,.8fr) minmax(430px,1.05fr) minmax(620px,1.8fr);
    align-items: start;
    gap: 16px;
    padding: 16px;
}

#nl3d-shell-root .nl3d-strip__col {
    width: 100%;
    align-items: flex-start;
}

#nl3d-shell-root .nl3d-strip__col--wall,
#nl3d-shell-root .nl3d-strip__col--panels,
#nl3d-shell-root .nl3d-strip__col--feat {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#nl3d-shell-root .nl3d-strip__col--panels {
    min-width: 430px;
}

#nl3d-shell-root .nl3d-panel-count-row,
#nl3d-shell-root .nl3d-wall-tabs,
#nl3d-shell-root .nl3d-feat-chips {
    width: 100%;
}

#nl3d-shell-root .nl3d-wall-run-select {
    width: 130px;
}

#nl3d-shell-root .nl3d-site-limit-toggle {
    width: max-content;
}

#nl3d-shell-root .nl3d-panel-quick-edit {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(96px,1fr) minmax(110px,1fr) auto;
    gap: 8px;
    align-items: end;
}

    #nl3d-shell-root .nl3d-panel-quick-edit label {
        width: 100%;
    }

    #nl3d-shell-root .nl3d-panel-quick-edit input {
        width: 100%;
    }

#nl3d-shell-root .nl3d-feat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

#nl3d-shell-root .nl3d-feat-chip {
    min-height: 32px;
    padding: 0 11px;
    border-radius: 10px;
}

#nl3d-shell-root .nl3d-panel-sel-hint {
    width: 100%;
    margin-top: 2px;
    border-radius: 10px;
    padding: 8px 10px;
    background: rgba(247,202,82,.05);
    border: 1px dashed rgba(247,202,82,.24);
}

@media (max-width:1450px) {
    #nl3d-shell-root .nl3d-strip {
        grid-template-columns: minmax(280px,.9fr) minmax(390px,1.05fr) minmax(520px,1.5fr);
    }

    #nl3d-shell-root .nl3d-strip__col--panels {
        min-width: 390px;
    }
}

@media (max-width:1150px) {
    #nl3d-shell-root .nl3d-strip {
        grid-template-columns: 1fr;
    }

    #nl3d-shell-root .nl3d-strip__col--panels {
        min-width: 0;
    }

    #nl3d-shell-root .nl3d-cam-row {
        margin-left: 0;
    }
}

/* ========================================================================
   IAC ROOM CONFIGURATOR — Guided setup / Build View flow polish
   Added to support the cleaned pre-build state and card-based editor layout.
   ======================================================================== */
#nl3d-cfg-shell.nl3d-cfg-shell--prebuild #nl3d-editor-strip,
#nl3d-cfg-shell.nl3d-cfg-shell--prebuild .nl3d-feat-editor {
    display: none !important;
}

/* Keep the 3D preview visible immediately. The editor strip stays hidden until Build 3D Room. */
#nl3d-cfg-shell.nl3d-cfg-shell--prebuild .nl3d-cfg-toolbar,
#nl3d-cfg-shell.nl3d-cfg-shell--prebuild .nl3d-canvas-wrap {
    display: flex !important;
}

#nl3d-cfg-shell.nl3d-cfg-shell--prebuild .nl3d-canvas-wrap {
    display: block !important;
}

.nl3d-cfg-shell--built .nl3d-room-setup-card {
    display: none !important;
}

.nl3d-toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 8px;
    border-left: 1px solid rgba(255,255,255,.10);
}

.nl3d-wall-tabs--toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

    .nl3d-wall-tabs--toolbar .nl3d-wtab {
        height: 25px;
        padding: 0 9px;
        font-size: 8px;
    }

.nl3d-toolbar-group--hidewalls .nl3d-cam-label {
    min-width: 52px;
}

#nl3d-editor-strip.nl3d-strip {
    grid-template-columns: minmax(560px,1.2fr) minmax(430px,.95fr) !important;
    align-items: start;
}

@media (max-width: 1200px) {
    #nl3d-editor-strip.nl3d-strip {
        grid-template-columns: 1fr !important;
    }
}

.nl3d-room-setup-card {
    margin: 0;
    padding: 24px;
    border-radius: 18px;
    background: linear-gradient(145deg,#ffffff,#f6f8fc);
    border: 1px solid rgba(15,31,56,.10);
    box-shadow: 0 18px 48px rgba(15,31,56,.12);
    color: #102037;
}

[data-bs-theme="dark"] .nl3d-room-setup-card,
[data-theme="dark"] .nl3d-room-setup-card,
.dark .nl3d-room-setup-card {
    background: linear-gradient(145deg,#071220,#101c31);
    border-color: rgba(247,202,82,.22);
    box-shadow: 0 18px 48px rgba(0,0,0,.34);
    color: #e8f1ff;
}

.nl3d-room-setup-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

    .nl3d-room-setup-card__header h3 {
        margin: 3px 0 6px;
        font-size: 22px;
        line-height: 1.15;
        font-weight: 900;
        letter-spacing: -.02em;
        color: inherit;
    }

    .nl3d-room-setup-card__header p {
        margin: 0;
        max-width: 740px;
        font-size: 13px;
        line-height: 1.55;
        color: rgba(15,31,56,.64);
    }

[data-bs-theme="dark"] .nl3d-room-setup-card__header p,
[data-theme="dark"] .nl3d-room-setup-card__header p,
.dark .nl3d-room-setup-card__header p {
    color: rgba(220,236,255,.68);
}

.nl3d-kicker {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(247,202,82,.18);
    color: #8a5a00;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

[data-bs-theme="dark"] .nl3d-kicker,
[data-theme="dark"] .nl3d-kicker,
.dark .nl3d-kicker {
    color: #f7ca52;
    background: rgba(247,202,82,.12);
}

.nl3d-room-setup-card__icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(247,202,82,.16);
    font-size: 26px;
    flex: 0 0 auto;
}

.nl3d-room-setup-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(120px,1fr)) minmax(260px,1.2fr);
    gap: 14px;
    align-items: stretch;
}

.nl3d-setup-field,
.nl3d-setup-site-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: 14px;
    border: 1px solid rgba(15,31,56,.11);
    background: rgba(255,255,255,.72);
    padding: 14px;
}

[data-bs-theme="dark"] .nl3d-setup-field,
[data-theme="dark"] .nl3d-setup-field,
.dark .nl3d-setup-field,
[data-bs-theme="dark"] .nl3d-setup-site-card,
[data-theme="dark"] .nl3d-setup-site-card,
.dark .nl3d-setup-site-card {
    background: rgba(255,255,255,.055);
    border-color: rgba(255,255,255,.11);
}

.nl3d-setup-field span {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(15,31,56,.66);
}

.nl3d-setup-field em {
    font-style: normal;
    color: #a06d00;
}

[data-bs-theme="dark"] .nl3d-setup-field span,
[data-theme="dark"] .nl3d-setup-field span,
.dark .nl3d-setup-field span {
    color: rgba(220,236,255,.68);
}

.nl3d-setup-field input {
    height: 42px;
    border-radius: 10px;
    border: 1.5px solid rgba(15,31,56,.15);
    background: #fff;
    color: #102037;
    padding: 0 12px;
    font-size: 17px;
    font-weight: 800;
    outline: 0;
}

    .nl3d-setup-field input:focus {
        border-color: rgba(247,202,82,.88);
        box-shadow: 0 0 0 4px rgba(247,202,82,.18);
    }

[data-bs-theme="dark"] .nl3d-setup-field input,
[data-theme="dark"] .nl3d-setup-field input,
.dark .nl3d-setup-field input {
    background: #0b1628;
    color: #e8f1ff;
    border-color: rgba(255,255,255,.15);
}

.nl3d-room-setup-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
}

.nl3d-empty-state-copy {
    font-size: 13px;
    font-weight: 700;
    color: rgba(15,31,56,.58);
}

[data-bs-theme="dark"] .nl3d-empty-state-copy,
[data-theme="dark"] .nl3d-empty-state-copy,
.dark .nl3d-empty-state-copy {
    color: rgba(220,236,255,.60);
}

.nl3d-build-view-btn {
    height: 44px;
    padding: 0 28px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg,#f7ca52,#c47e00);
    color: #160a00;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(196,126,0,.25);
}

    .nl3d-build-view-btn:hover {
        filter: brightness(1.04);
        transform: translateY(-1px);
    }

    .nl3d-build-view-btn:focus {
        outline: 3px solid rgba(247,202,82,.28);
        outline-offset: 2px;
    }

.nl3d-dim-gate {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 20;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: linear-gradient(160deg,rgba(7,18,32,.94),rgba(13,30,53,.94));
    text-align: center;
}

.nl3d-dim-gate__card {
    max-width: 430px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(8,16,32,.82);
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 20px 50px rgba(0,0,0,.28);
}

.nl3d-dim-gate__icon {
    font-size: 34px;
    margin-bottom: 8px;
}

.nl3d-dim-gate h3 {
    margin: 0 0 8px;
    color: #e8f0ff;
    font-size: 18px;
    font-weight: 900;
}

.nl3d-dim-gate p {
    margin: 0;
    color: rgba(180,200,240,.68);
    font-size: 12.5px;
    line-height: 1.55;
}

.nl3d-cfg-toolbar {
    gap: 8px;
    padding: 12px 14px;
}

.nl3d-cam-row {
    margin-left: auto;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.nl3d-cam-label {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(247,202,82,.72);
    margin-right: 3px;
}

.nl3d-bg-picker {
    margin-left: 8px;
    padding-left: 12px;
}

    .nl3d-bg-picker select {
        height: 32px;
        min-width: 220px;
        border-radius: 10px;
        background-color: #111d31 !important;
    }

/* ── Brightness/light slider ───────────────────────────────────────── */
.nl3d-light-picker {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 6px;
    color: rgba(220,235,255,.58);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

    .nl3d-light-picker input[type="range"] {
        -webkit-appearance: none;
        appearance: none;
        width: 76px;
        height: 4px;
        border-radius: 2px;
        background: linear-gradient(90deg,rgba(247,202,82,.55),rgba(247,202,82,.18));
        outline: none;
        cursor: pointer;
        border: 0;
    }

        .nl3d-light-picker input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #f7ca52;
            border: 2px solid rgba(255,255,255,.85);
            box-shadow: 0 1px 5px rgba(0,0,0,.45);
            cursor: pointer;
        }

        .nl3d-light-picker input[type="range"]::-moz-range-thumb {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #f7ca52;
            border: 2px solid rgba(255,255,255,.85);
            cursor: pointer;
        }

/* Light mode overrides for the picker */
#nl3d-shell-root .nl3d-light-picker {
    color: #31527a !important;
}

    #nl3d-shell-root .nl3d-light-picker input[type="range"] {
        background: linear-gradient(90deg,rgba(37,99,235,.55),rgba(37,99,235,.18)) !important;
    }

        #nl3d-shell-root .nl3d-light-picker input[type="range"]::-webkit-slider-thumb {
            background: #2563eb !important;
            border-color: rgba(255,255,255,.90) !important;
        }

[data-bs-theme="dark"] #nl3d-shell-root .nl3d-light-picker,
[data-theme="dark"] #nl3d-shell-root .nl3d-light-picker,
.dark #nl3d-shell-root .nl3d-light-picker {
    color: rgba(220,235,255,.60) !important;
}

    [data-bs-theme="dark"] #nl3d-shell-root .nl3d-light-picker input[type="range"],
    [data-theme="dark"] #nl3d-shell-root .nl3d-light-picker input[type="range"],
    .dark #nl3d-shell-root .nl3d-light-picker input[type="range"] {
        background: linear-gradient(90deg,rgba(247,202,82,.60),rgba(247,202,82,.18)) !important;
    }

        [data-bs-theme="dark"] #nl3d-shell-root .nl3d-light-picker input[type="range"]::-webkit-slider-thumb,
        [data-theme="dark"] #nl3d-shell-root .nl3d-light-picker input[type="range"]::-webkit-slider-thumb,
        .dark #nl3d-shell-root .nl3d-light-picker input[type="range"]::-webkit-slider-thumb {
            background: #f7ca52 !important;
        }

.nl3d-strip {
    display: grid !important;
    grid-template-columns: minmax(160px,.7fr) minmax(320px,1.05fr) minmax(360px,1.4fr);
    gap: 14px;
    padding: 14px;
    background: linear-gradient(180deg,#081020,#0b1424);
    border-top: 1px solid rgba(255,255,255,.08);
}

.nl3d-strip__col {
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 14px;
    background: rgba(255,255,255,.045);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.nl3d-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.nl3d-strip__lbl {
    font-size: 9px;
    color: rgba(247,202,82,.82);
}

.nl3d-panel-count-row {
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    padding: 6px;
    align-self: flex-start;
}

.nl3d-wall-run-select,
.nl3d-panel-edit-toggle {
    width: 100%;
    max-width: 220px;
    height: 32px !important;
    border-radius: 9px !important;
}

.nl3d-panel-quick-edit {
    display: grid !important;
    grid-template-columns: minmax(90px,1fr) minmax(90px,1fr) auto;
    gap: 8px;
    align-items: end;
    background: rgba(0,0,0,.16);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    padding: 10px;
    margin-top: 4px;
}

    .nl3d-panel-quick-edit[style*="display:none"] {
        display: none !important;
    }

    .nl3d-panel-quick-edit label {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

        .nl3d-panel-quick-edit label span {
            font-size: 8px;
            font-weight: 900;
            letter-spacing: .09em;
            text-transform: uppercase;
            color: rgba(247,202,82,.72);
        }

    .nl3d-panel-quick-edit input {
        height: 32px;
        border-radius: 8px;
        border: 1px solid rgba(255,255,255,.14);
        background: #101b2c;
        color: #eaf2ff;
        padding: 0 9px;
        font-weight: 800;
    }

    .nl3d-panel-quick-edit button {
        height: 32px;
        border-radius: 8px;
        border: 1px solid rgba(247,202,82,.45);
        background: rgba(247,202,82,.16);
        color: #f7ca52;
        font-weight: 900;
        cursor: pointer;
    }

.nl3d-feat-chips {
    display: grid !important;
    grid-template-columns: repeat(auto-fit,minmax(135px,1fr));
    gap: 8px;
}

.nl3d-feat-chip {
    height: 34px !important;
    justify-content: flex-start !important;
    border-radius: 10px !important;
    padding: 0 11px !important;
    font-size: 10px !important;
    background: rgba(255,255,255,.065) !important;
}

    .nl3d-feat-chip:hover {
        background: rgba(247,202,82,.13) !important;
        border-color: rgba(247,202,82,.42) !important;
        color: #f7ca52 !important;
    }

.nl3d-site-limit-toggle {
    height: 34px !important;
    width: max-content;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    background: rgba(247,202,82,.10) !important;
    border-color: rgba(247,202,82,.28) !important;
    color: #8a5a00 !important;
}

[data-bs-theme="dark"] .nl3d-site-limit-toggle,
[data-theme="dark"] .nl3d-site-limit-toggle,
.dark .nl3d-site-limit-toggle {
    color: #f7ca52 !important;
}

.nl3d-site-limit-box {
    gap: 8px !important;
    margin-top: 8px !important;
}

    .nl3d-site-limit-box label {
        font-size: 8px !important;
    }

    .nl3d-site-limit-box input {
        height: 32px !important;
        width: 82px !important;
        border-radius: 8px !important;
    }

@media (max-width:1080px) {
    .nl3d-room-setup-grid {
        grid-template-columns: repeat(3,1fr);
    }

    .nl3d-setup-site-card {
        grid-column: 1 / -1;
    }

    .nl3d-strip {
        grid-template-columns: 1fr 1fr;
    }

    .nl3d-strip__col--feat {
        grid-column: 1 / -1;
    }
}

@media (max-width:720px) {
    .nl3d-room-setup-grid,
    .nl3d-strip {
        grid-template-columns: 1fr !important;
    }

    .nl3d-room-setup-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .nl3d-build-view-btn {
        width: 100%;
    }

    .nl3d-bg-picker {
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }

        .nl3d-bg-picker select {
            width: 100%;
            min-width: 0;
        }

    .nl3d-panel-quick-edit {
        grid-template-columns: 1fr;
    }
}


/* Aggressive pass: viewer priority + lighter editor footprint */
#nl3d-cfg-shell.nl3d-cfg-shell--built {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

#nl3d-cfg-toolbar[hidden],
#nl3d-canvas-wrap[hidden],
#nl3d-editor-strip[hidden],
#nl3d-feat-editor[hidden] {
    display: none !important;
}

#nl3d-editor-strip.nl3d-strip {
    grid-template-columns: minmax(660px,1.45fr) minmax(370px,.80fr) !important;
    align-items: start;
    gap: 14px;
    padding: 0;
    background: transparent;
    border-top: 0;
}

#nl3d-editor-strip .nl3d-strip__col {
    padding: 14px 14px 16px;
    margin: 0;
    border-right: 0;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg,rgba(11,22,39,.92),rgba(7,16,29,.94));
    box-shadow: 0 12px 28px rgba(0,0,0,.20);
}

#nl3d-editor-strip .nl3d-strip__col--panels {
    min-width: 0;
}

#nl3d-editor-strip .nl3d-strip__col--feat {
    max-width: 100%;
}

.nl3d-feat-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
    gap: 8px;
}

.nl3d-feat-chip {
    min-height: 34px;
    padding: 8px 12px;
    justify-content: flex-start;
    border-radius: 10px;
}

.nl3d-panel-feature-list {
    max-height: 170px;
    overflow: auto;
}

.nl3d-cfg-toolbar {
    gap: 8px;
}

.nl3d-toolbar-group {
    background: rgba(255,255,255,.04);
    border-radius: 10px;
    padding: 4px 8px;
    border-left: 0;
}

.nl3d-bg-picker {
    margin-left: auto;
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,.10);
}

@media (max-width: 1280px) {
    #nl3d-editor-strip.nl3d-strip {
        grid-template-columns: 1fr !important;
    }
}


/* v4 cleanups */
#nl3d-editor-strip .nl3d-card-head {
    margin-bottom: 2px;
}

#nl3d-editor-strip .nl3d-strip__lbl {
    display: block;
    margin-bottom: 6px;
}

#nl3d-editor-strip .nl3d-panel-count-row,
#nl3d-editor-strip .nl3d-panel-quick-edit {
    background: rgba(0,0,0,.14);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    padding: 10px;
}

#nl3d-editor-strip .nl3d-panel-quick-edit {
    display: grid !important;
    grid-template-columns: minmax(160px,.9fr) minmax(160px,.9fr) auto;
    align-items: end;
    gap: 12px;
}

    #nl3d-editor-strip .nl3d-panel-quick-edit input {
        max-width: none;
        width: 100%;
    }

#nl3d-editor-strip .nl3d-panel-sel-hint {
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(247,202,82,.06);
    border: 1px dashed rgba(247,202,82,.24);
}

#nl3d-editor-strip .nl3d-feat-chip {
    font-size: 10px;
}

.nl3d-feat-editor {
    margin-top: 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg,rgba(8,18,33,.97),rgba(7,16,29,.98));
    box-shadow: 0 18px 36px rgba(0,0,0,.22);
}

@media (max-width: 900px) {
    #nl3d-editor-strip .nl3d-panel-quick-edit {
        grid-template-columns: 1fr;
    }
}


/* v5 viewer-dominant layout */
#nl3d-canvas-wrap.nl3d-canvas-wrap {
    min-height: 520px;
    height: 58vh;
    max-height: 680px;
    border-radius: 0 0 18px 18px;
}

#nl3d-editor-strip.nl3d-strip {
    margin-top: 10px;
    grid-template-columns: minmax(520px, .9fr) minmax(460px, 1.1fr) !important;
    gap: 10px;
}

#nl3d-editor-strip .nl3d-strip__col {
    padding: 10px 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(10,20,36,.84), rgba(7,15,27,.88));
    box-shadow: none;
}

#nl3d-editor-strip .nl3d-card-head,
#nl3d-editor-strip .nl3d-strip__lbl {
    margin-bottom: 4px;
}

#nl3d-editor-strip .nl3d-panel-count-row {
    display: grid;
    grid-template-columns: auto max-content auto 1fr;
    gap: 8px;
    align-items: center;
    padding: 8px;
}

#nl3d-editor-strip .nl3d-wall-run-select,
#nl3d-editor-strip .nl3d-panel-edit-toggle {
    max-width: 220px;
}

#nl3d-editor-strip .nl3d-panel-quick-edit {
    padding: 8px;
    grid-template-columns: minmax(120px,.8fr) minmax(120px,.8fr) auto;
}

#nl3d-editor-strip .nl3d-panel-feature-list {
    max-height: 115px;
}

#nl3d-editor-strip .nl3d-feat-chips {
    grid-template-columns: repeat(auto-fit,minmax(128px,1fr));
    gap: 7px;
}

#nl3d-editor-strip .nl3d-feat-chip {
    min-height: 30px;
    padding: 6px 9px;
    font-size: 9px;
    border-radius: 9px;
}

/* Feature editor now opens as a visible drawer so it cannot get lost below the big viewer. */
.nl3d-feat-editor.nl3d-feat-editor--active {
    position: fixed;
    right: 28px;
    top: 112px;
    z-index: 9999;
    width: min(760px, calc(100vw - 56px));
    max-height: calc(100vh - 150px);
    overflow: auto;
    display: block !important;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(247,202,82,.28);
    background: linear-gradient(180deg, rgba(11,22,39,.98), rgba(6,13,24,.98));
    box-shadow: 0 26px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
}

    .nl3d-feat-editor.nl3d-feat-editor--active .nl3d-feat-editor__fields {
        grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
    }

@media (max-width: 1100px) {
    #nl3d-canvas-wrap.nl3d-canvas-wrap {
        min-height: 460px;
        height: 52vh;
    }

    #nl3d-editor-strip.nl3d-strip {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    #nl3d-canvas-wrap.nl3d-canvas-wrap {
        min-height: 360px;
        height: 44vh;
    }

    .nl3d-feat-editor.nl3d-feat-editor--active {
        right: 12px;
        left: 12px;
        top: 88px;
        width: auto;
        max-height: calc(100vh - 110px);
    }
}


/* v6 viewer width/clean drawer */
#nl3d-3d-host {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

    #nl3d-3d-host canvas {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        image-rendering: auto !important;
    }

.nl3d-feat-editor__headcopy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nl3d-feat-editor__sub {
    font-size: 11px;
    color: rgba(220,235,255,.68);
    font-weight: 700;
}

.nl3d-feat-editor__actions {
    justify-content: flex-end;
}

.nl3d-feat-apply {
    min-width: 180px;
}

.nl3d-feat-editor.nl3d-feat-editor--active {
    top: auto;
    bottom: 24px;
    right: 24px;
    width: min(560px, calc(100vw - 48px));
    max-height: min(72vh, 680px);
}

@media (max-width: 760px) {
    .nl3d-feat-editor.nl3d-feat-editor--active {
        right: 12px;
        left: 12px;
        bottom: 12px;
        width: auto;
        max-height: 70vh;
    }
}


/* v7: feature drawer must be obvious and camera/viewer must not feel over-zoomed */
.nl3d-feat-editor.nl3d-feat-editor--active {
    position: fixed !important;
    top: 96px !important;
    right: 32px !important;
    bottom: auto !important;
    width: min(620px, calc(100vw - 64px)) !important;
    max-height: calc(100vh - 132px) !important;
    overflow: auto !important;
    z-index: 2147483000 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    border: 1px solid rgba(247,202,82,.46) !important;
    background: linear-gradient(180deg, rgba(12,26,48,.99), rgba(5,12,22,.99)) !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.70), 0 0 0 1px rgba(255,255,255,.08) inset !important;
}

    .nl3d-feat-editor.nl3d-feat-editor--active .nl3d-feat-editor__head {
        position: sticky;
        top: 0;
        z-index: 2;
        padding-bottom: 12px;
        background: linear-gradient(180deg, rgba(12,26,48,.99), rgba(12,26,48,.92));
    }

.nl3d-feat-editor__sub {
    color: rgba(220,235,255,.78) !important;
}

.nl3d-feat-apply {
    height: 40px !important;
    min-width: 190px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg,#f7ca52,#c47e00) !important;
    color: #150900 !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
}

.nl3d-feat-remove,
.nl3d-feat-editor__close {
    height: 36px !important;
    border-radius: 10px !important;
}

@media (max-width: 800px) {
    .nl3d-feat-editor.nl3d-feat-editor--active {
        left: 12px !important;
        right: 12px !important;
        top: 72px !important;
        width: auto !important;
        max-height: calc(100vh - 96px) !important;
    }
}


/* v8 hard fixes: crisp canvas + unmissable feature drawer */
#nl3d-canvas-wrap.nl3d-canvas-wrap {
    min-height: 520px !important;
    height: 56vh !important;
    max-height: 660px !important;
}

#nl3d-3d-host {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

    #nl3d-3d-host canvas {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        image-rendering: auto !important;
    }

.nl3d-feat-editor.nl3d-feat-editor--active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 82px !important;
    right: 24px !important;
    width: min(640px,calc(100vw - 48px)) !important;
    max-height: calc(100vh - 116px) !important;
    overflow: auto !important;
    z-index: 2147483647 !important;
    padding: 18px !important;
    border-radius: 18px !important;
    border: 2px solid rgba(247,202,82,.70) !important;
    background: linear-gradient(180deg,rgba(12,26,48,.99),rgba(5,12,22,.99)) !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.08) inset !important;
}

    .nl3d-feat-editor.nl3d-feat-editor--active .nl3d-feat-apply {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 190px !important;
        height: 42px !important;
        background: linear-gradient(135deg,#f7ca52,#c47e00) !important;
        color: #150900 !important;
        font-weight: 950 !important;
    }

@media (max-width: 800px) {
    .nl3d-feat-editor.nl3d-feat-editor--active {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
    }
}


/* v9 fixes: feature drawer should be impossible to miss, and view is no longer over-zoomed/out */
.nl3d-feat-editor.nl3d-feat-editor--active {
    top: auto !important;
    right: 22px !important;
    bottom: 22px !important;
    width: min(620px, calc(100vw - 44px)) !important;
    max-height: min(70vh, 680px) !important;
    z-index: 2147483647 !important;
}

.nl3d-feat-editor__sub {
    color: rgba(220,235,255,.72) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    margin-top: 3px !important;
}

.nl3d-feat-editor .nl3d-feat-apply {
    min-width: 190px !important;
    height: 42px !important;
    border-radius: 12px !important;
}

@media (max-width: 760px) {
    .nl3d-feat-editor.nl3d-feat-editor--active {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        width: auto !important;
        max-height: 70vh !important;
    }
}


/* v13 corner-run selector */
.nl3d-run-row {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 8px;
    align-items: end
}

.nl3d-run-control {
    display: flex;
    flex-direction: column;
    gap: 4px
}

    .nl3d-run-control span {
        font-size: 7px;
        font-weight: 900;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: rgba(247,202,82,.70)
    }

.nl3d-run-control--corner select {
    min-width: 190px
}

@media(max-width:900px) {
    .nl3d-run-row {
        grid-template-columns: 1fr
    }
}

/* ========================================================================== 
   v18 realism cleanup — selection/readability polish tied to 3D engine update
   ========================================================================== */
#nl3d-shell-root .nl3d-cfg-shell,
.nl3d-cfg-shell.nl3d-cfg-shell--built {
    border-color: rgba(143, 170, 194, .24);
    box-shadow: 0 18px 54px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .055);
    background: linear-gradient(180deg, #0a1422 0%, #08101d 100%);
}

#nl3d-shell-root .nl3d-canvas-wrap,
#nl3d-shell-root .nl3d-cfg-canvas-wrap {
    background: radial-gradient(circle at 50% 18%, rgba(120, 150, 170, .16), transparent 42%), linear-gradient(180deg, #101b29 0%, #07111f 68%, #060d18 100%);
}

#nl3d-shell-root .nl3d-cfg-toolbar {
    background: rgba(7, 15, 28, .86);
    border-bottom-color: rgba(190, 212, 230, .10);
}

#nl3d-shell-root .nl3d-panel-sel-hint,
.nl3d-panel-sel-hint {
    background: rgba(120, 170, 200, .055);
    border-color: rgba(170, 220, 245, .16);
    color: rgba(216, 235, 246, .74);
}

#nl3d-shell-root .nl3d-panel-sel-hint--active,
.nl3d-panel-sel-hint--active {
    background: rgba(98, 162, 198, .13);
    border-color: rgba(190, 230, 248, .42);
    color: #dff4ff;
    font-style: normal;
    font-weight: 850;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

#nl3d-shell-root .nl3d-vt__btn--active,
#nl3d-shell-root .nl3d-cam.active,
#nl3d-shell-root .nl3d-cfg-cam-chips button.active,
#nl3d-shell-root .nl3d-tb-btn--active {
    background: rgba(102, 164, 198, .16);
    border-color: rgba(190, 230, 248, .36);
    color: #dff4ff;
}

#nl3d-shell-root select,
.nl3d-cfg-shell select,
.nl3d-strip select,
.nl3d-feat-editor select,
.nl3d-ff select,
.nl3d-bg-picker select {
    background-color: rgba(12, 23, 39, .96);
    border-color: rgba(195, 220, 238, .17);
}

    #nl3d-shell-root select:hover,
    .nl3d-cfg-shell select:hover {
        border-color: rgba(190, 230, 248, .36);
    }

    #nl3d-shell-root select:focus,
    .nl3d-cfg-shell select:focus {
        border-color: rgba(190, 230, 248, .50);
        box-shadow: 0 0 0 3px rgba(91, 151, 188, .16);
    }

/* ========================================================================== 
   IAC ROOM CONFIGURATOR CSS — v22 CLEAN THEME REPAIR
   One authoritative repair layer. Keep this as the final block in this file.
   Fixes: light-mode surfaces, muted colored dark buttons, real checkbox ticks,
   feature editor modal positioning, compact selected wall/add-feature layout,
   readable dropdowns, and smaller framed 2D previews.
   ========================================================================== */

:root {
    --nl3d-iac-surface-0: #f6f8fb;
    --nl3d-iac-surface-1: #ffffff;
    --nl3d-iac-surface-2: #eef4fb;
    --nl3d-iac-surface-3: #e5edf7;
    --nl3d-iac-text-1: #0f172a;
    --nl3d-iac-text-2: #334155;
    --nl3d-iac-text-3: #64748b;
    --nl3d-iac-border: #c8d6e4;
    --nl3d-iac-border-strong: #9fb4ca;
    --nl3d-iac-blue: #255f9e;
    --nl3d-iac-blue-2: #1e4f86;
    --nl3d-iac-gold: #c58513;
    --nl3d-iac-gold-2: #a66a0a;
    --nl3d-iac-green: #18794e;
    --nl3d-iac-red: #b4232c;
    --nl3d-iac-violet: #5b4b9a;
    --nl3d-iac-shadow: 0 12px 32px rgba(15,23,42,.12),0 2px 8px rgba(15,23,42,.06);
    --nl3d-iac-shadow-soft: 0 6px 18px rgba(15,23,42,.09);
    --nl3d-iac-radius: 14px;
    --nl3d-iac-radius-lg: 18px;
    --nl3d-iac-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-bs-theme="dark"],
[data-theme="dark"],
body.dark {
    --nl3d-iac-surface-0: #070d15;
    --nl3d-iac-surface-1: #0d1726;
    --nl3d-iac-surface-2: #111f33;
    --nl3d-iac-surface-3: #172a44;
    --nl3d-iac-text-1: #eef5ff;
    --nl3d-iac-text-2: #c7d4e7;
    --nl3d-iac-text-3: #8fa1b9;
    --nl3d-iac-border: #263d5c;
    --nl3d-iac-border-strong: #3b5c82;
    --nl3d-iac-blue: #2d5f9e;
    --nl3d-iac-blue-2: #214b7f;
    --nl3d-iac-gold: #b77912;
    --nl3d-iac-gold-2: #8f5c0b;
    --nl3d-iac-green: #1e6f4c;
    --nl3d-iac-red: #96333b;
    --nl3d-iac-violet: #50417f;
    --nl3d-iac-shadow: 0 16px 36px rgba(0,0,0,.38),0 2px 8px rgba(0,0,0,.24);
    --nl3d-iac-shadow-soft: 0 8px 22px rgba(0,0,0,.30);
    --nl3d-iac-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c7d4e7' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

#nl3d-shell-root,
.nl3d-cfg-shell,
.nl3d-shell {
    background: var(--nl3d-iac-surface-0) !important;
    border: 1px solid var(--nl3d-iac-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--nl3d-iac-shadow) !important;
    color: var(--nl3d-iac-text-1) !important;
    overflow: clip !important;
}

    /* Viewer top toolbar */
    #nl3d-shell-root .nl3d-cfg-toolbar,
    .nl3d-cfg-toolbar {
        background: var(--nl3d-iac-surface-2) !important;
        border-bottom: 1px solid var(--nl3d-iac-border) !important;
        border-radius: 18px 18px 0 0 !important;
        padding: 10px 14px !important;
        gap: 8px !important;
        color: var(--nl3d-iac-text-1) !important;
    }

        .nl3d-cfg-toolbar::after {
            color: var(--nl3d-iac-text-3) !important;
            font-size: 10px !important;
            font-weight: 700 !important;
            opacity: .88 !important;
        }

    /* Selected wall / add feature strip — compact two-card system */
    #nl3d-shell-root .nl3d-strip,
    .nl3d-strip {
        display: grid !important;
        grid-template-columns: minmax(420px,1.15fr) minmax(360px,.85fr) !important;
        gap: 12px !important;
        align-items: start !important;
        background: var(--nl3d-iac-surface-0) !important;
        border-top: 1px solid var(--nl3d-iac-border) !important;
        padding: 14px !important;
        color: var(--nl3d-iac-text-1) !important;
    }

.nl3d-strip__col {
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid var(--nl3d-iac-border) !important;
    border-radius: var(--nl3d-iac-radius-lg) !important;
    background: linear-gradient(180deg,var(--nl3d-iac-surface-1),var(--nl3d-iac-surface-2)) !important;
    box-shadow: var(--nl3d-iac-shadow-soft) !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

    .nl3d-strip__col:last-child {
        flex: unset !important;
    }

.nl3d-strip__lbl,
.nl3d-cfg-bi-lbl,
.nl3d-lbl,
.nl3d-ff-lbl,
.nl3d-feat-editor__fields label,
.nl3d-quick-add-title,
.nl3d-chip-label,
.nl3d-editor-eyebrow {
    color: var(--nl3d-iac-text-3) !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    letter-spacing: .075em !important;
    text-transform: uppercase !important;
}

/* Colored but not neon buttons */
#nl3d-shell-root button,
.nl3d-cfg-shell button,
.nl3d-strip button,
.nl3d-cfg-toolbar button,
.nl3d-cfg-blazor-inputs button,
.nl3d-feat-editor button {
    font-family: inherit !important;
    border-radius: 11px !important;
    transition: background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease !important;
}

.nl3d-vt__btn, .nl3d-tb-btn, .nl3d-cam, .nl3d-cfg-btn, .nl3d-cfg-cam-chips button,
.nl3d-wtab, .nl3d-pc-btn, .nl3d-panel-edit-toggle, .nl3d-feat-chip, .nl3d-quick-btn, .nl3d-ebtn, .nl3d-pfl-row button,
.nl3d-chip, .nl3d-ap-mini-action {
    background: linear-gradient(180deg,var(--nl3d-iac-blue),var(--nl3d-iac-blue-2)) !important;
    border: 1px solid rgba(147,197,253,.28) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(30,79,134,.18) !important;
    min-height: 32px !important;
}

    .nl3d-vt__btn:hover, .nl3d-tb-btn:hover, .nl3d-cam:hover, .nl3d-cfg-btn:hover, .nl3d-cfg-cam-chips button:hover,
    .nl3d-wtab:hover, .nl3d-pc-btn:hover, .nl3d-panel-edit-toggle:hover, .nl3d-feat-chip:hover, .nl3d-quick-btn:hover, .nl3d-ebtn:hover, .nl3d-pfl-row button:hover,
    .nl3d-chip:hover, .nl3d-ap-mini-action:hover {
        transform: translateY(-1px) !important;
        filter: brightness(1.06) !important;
        box-shadow: 0 12px 24px rgba(30,79,134,.24) !important;
    }

    .nl3d-vt__btn--active, .nl3d-cam.active, .nl3d-cfg-cam-chips button.active, .nl3d-tb-btn--active,
    .nl3d-wtab--active, .nl3d-feat-chip--active, .nl3d-chip.active, .nl3d-chip.selected {
        background: linear-gradient(180deg,var(--nl3d-iac-gold),var(--nl3d-iac-gold-2)) !important;
        border-color: rgba(245,158,11,.55) !important;
        color: #111827 !important;
        box-shadow: 0 10px 22px rgba(180,119,18,.28) !important;
    }

    .nl3d-tb-btn--off, .nl3d-cfg-btn.is-off, button:disabled {
        opacity: .55 !important;
        filter: saturate(.65) !important;
        cursor: not-allowed !important;
    }

.nl3d-panel-edit-toggle, #nl3d-panel-width-set, .nl3d-feat-apply {
    background: linear-gradient(180deg,var(--nl3d-iac-gold),var(--nl3d-iac-gold-2)) !important;
    border: 1px solid rgba(245,158,11,.45) !important;
    color: #111827 !important;
    font-weight: 900 !important;
}

.nl3d-feat-remove, .nl3d-ebtn--danger {
    background: linear-gradient(180deg,#b9444d,var(--nl3d-iac-red)) !important;
    border-color: rgba(248,113,113,.38) !important;
    color: #fff !important;
}

.nl3d-ebtn--done {
    background: linear-gradient(180deg,#23825a,var(--nl3d-iac-green)) !important;
    color: #fff !important;
}

.nl3d-ebtn--ghost {
    background: linear-gradient(180deg,#43516a,#303b50) !important;
    color: #fff !important;
}

/* Forms and dropdowns */
#nl3d-shell-root input, #nl3d-shell-root select, #nl3d-shell-root textarea,
.nl3d-cfg-shell input, .nl3d-cfg-shell select, .nl3d-cfg-shell textarea,
.nl3d-strip input, .nl3d-strip select, .nl3d-strip textarea,
.nl3d-feat-editor input, .nl3d-feat-editor select, .nl3d-feat-editor textarea,
.nl3d-cfg-blazor-inputs input, .nl3d-cfg-blazor-inputs select, .nl3d-cfg-blazor-inputs textarea {
    min-height: 36px !important;
    border-radius: 11px !important;
    border: 1px solid var(--nl3d-iac-border-strong) !important;
    background-color: var(--nl3d-iac-surface-1) !important;
    color: var(--nl3d-iac-text-1) !important;
    box-shadow: none !important;
}

#nl3d-shell-root select, .nl3d-cfg-shell select, .nl3d-strip select, .nl3d-feat-editor select, .nl3d-cfg-blazor-inputs select, .nl3d-bg-picker select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: var(--nl3d-iac-select-arrow) !important;
    background-repeat: no-repeat !important;
    background-position: right 11px center !important;
    background-size: 14px !important;
    padding-right: 36px !important;
}

    #nl3d-shell-root select option, .nl3d-cfg-shell select option, .nl3d-strip select option, .nl3d-feat-editor select option, .nl3d-cfg-blazor-inputs select option {
        color: var(--nl3d-iac-text-1) !important;
        background: var(--nl3d-iac-surface-1) !important;
    }

    #nl3d-shell-root input:focus, #nl3d-shell-root select:focus, #nl3d-shell-root textarea:focus,
    .nl3d-cfg-shell input:focus, .nl3d-cfg-shell select:focus, .nl3d-cfg-shell textarea:focus,
    .nl3d-strip input:focus, .nl3d-strip select:focus, .nl3d-strip textarea:focus,
    .nl3d-feat-editor input:focus, .nl3d-feat-editor select:focus, .nl3d-feat-editor textarea:focus {
        outline: 0 !important;
        border-color: var(--nl3d-iac-blue) !important;
        box-shadow: 0 0 0 3px rgba(47,115,200,.18) !important;
    }

/* Real checked checkboxes */
#nl3d-shell-root input[type="checkbox"], .nl3d-cfg-shell input[type="checkbox"], .nl3d-strip input[type="checkbox"],
.nl3d-cfg-blazor-inputs input[type="checkbox"], .nl3d-feat-editor input[type="checkbox"], .nl3d-page input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin: 0 7px 0 0 !important;
    border: 2px solid var(--nl3d-iac-border-strong) !important;
    border-radius: 5px !important;
    background: var(--nl3d-iac-surface-1) !important;
    display: inline-grid !important;
    place-content: center !important;
    vertical-align: middle !important;
}

    #nl3d-shell-root input[type="checkbox"]::before, .nl3d-cfg-shell input[type="checkbox"]::before, .nl3d-strip input[type="checkbox"]::before,
    .nl3d-cfg-blazor-inputs input[type="checkbox"]::before, .nl3d-feat-editor input[type="checkbox"]::before, .nl3d-page input[type="checkbox"]::before {
        content: "";
        width: 10px;
        height: 10px;
        transform: scale(0);
        transition: transform 120ms ease;
        background: #fff;
        clip-path: polygon(14% 44%,0 62%,39% 100%,100% 18%,82% 0,35% 66%);
    }

    #nl3d-shell-root input[type="checkbox"]:checked, .nl3d-cfg-shell input[type="checkbox"]:checked, .nl3d-strip input[type="checkbox"]:checked,
    .nl3d-cfg-blazor-inputs input[type="checkbox"]:checked, .nl3d-feat-editor input[type="checkbox"]:checked, .nl3d-page input[type="checkbox"]:checked {
        background: var(--nl3d-iac-blue) !important;
        border-color: var(--nl3d-iac-blue) !important;
    }

        #nl3d-shell-root input[type="checkbox"]:checked::before, .nl3d-cfg-shell input[type="checkbox"]:checked::before, .nl3d-strip input[type="checkbox"]:checked::before,
        .nl3d-cfg-blazor-inputs input[type="checkbox"]:checked::before, .nl3d-feat-editor input[type="checkbox"]:checked::before, .nl3d-page input[type="checkbox"]:checked::before {
            transform: scale(1);
        }

.nl3d-site-limit-toggle, .nl3d-cfg-bi-chk-lbl {
    color: var(--nl3d-iac-text-2) !important;
    gap: 7px !important;
}

/* Blazor input bar under viewer */
.nl3d-cfg-blazor-inputs {
    background: var(--nl3d-iac-surface-2) !important;
    border-top: 1px solid var(--nl3d-iac-border) !important;
    padding: 12px 14px !important;
}

.nl3d-cfg-bi-row {
    gap: 12px 16px !important;
    align-items: end !important;
}

.nl3d-cfg-bi-dim-readout {
    background: transparent !important;
    color: var(--nl3d-iac-text-2) !important;
    border: 0 !important;
    font-size: 12px !important;
}

.nl3d-cfg-bi-dim-val {
    color: var(--nl3d-iac-blue) !important;
}

.nl3d-cfg-bi-unit {
    color: var(--nl3d-iac-text-3) !important;
    background: var(--nl3d-iac-surface-2) !important;
    border-color: var(--nl3d-iac-border) !important;
}

/* Feature editor as an actual modal */
#nl3d-feat-editor[hidden], .nl3d-feat-editor[hidden] {
    display: none !important;
}

#nl3d-shell-root .nl3d-feat-editor.nl3d-feat-editor--active,
#nl3d-shell-root #nl3d-feat-editor:not([hidden]),
.nl3d-feat-editor.nl3d-feat-editor--active,
#nl3d-feat-editor:not([hidden]) {
    position: fixed !important;
    inset: auto !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%,-50%) !important;
    z-index: 2147483000 !important;
    width: min(820px,calc(100vw - 36px)) !important;
    max-height: min(82vh,720px) !important;
    overflow: auto !important;
    padding: 0 !important;
    border-radius: 20px !important;
    border: 1px solid var(--nl3d-iac-border) !important;
    background: var(--nl3d-iac-surface-1) !important;
    color: var(--nl3d-iac-text-1) !important;
    box-shadow: 0 28px 80px rgba(0,0,0,.36) !important;
}

.nl3d-feat-editor__head {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    padding: 16px 18px !important;
    margin: 0 !important;
    background: linear-gradient(180deg,var(--nl3d-iac-surface-2),var(--nl3d-iac-surface-1)) !important;
    border-bottom: 1px solid var(--nl3d-iac-border) !important;
}

.nl3d-feat-editor__title {
    color: var(--nl3d-iac-gold) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

.nl3d-feat-editor__sub, .nl3d-feat-editor__subtitle, .nl3d-feat-editor small {
    color: var(--nl3d-iac-text-3) !important;
}

.nl3d-feat-editor__close {
    background: rgba(180,35,44,.10) !important;
    border: 1px solid rgba(180,35,44,.35) !important;
    color: var(--nl3d-iac-red) !important;
    min-height: 32px !important;
    padding: 0 12px !important;
}

.nl3d-feat-editor__fields, .nl3d-ff {
    display: grid !important;
    grid-template-columns: repeat(auto-fit,minmax(190px,1fr)) !important;
    gap: 14px !important;
    padding: 18px !important;
    margin: 0 !important;
}

.nl3d-feat-editor__actions {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--nl3d-iac-surface-1) !important;
    border-top: 1px solid var(--nl3d-iac-border) !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

.nl3d-feat-apply {
    min-width: 170px !important;
    height: 42px !important;
}

/* Feature buttons compact */
.nl3d-feat-chips {
    display: grid !important;
    grid-template-columns: repeat(auto-fit,minmax(150px,1fr)) !important;
    gap: 8px !important;
}

.nl3d-feat-chip {
    height: 36px !important;
    justify-content: flex-start !important;
    padding: 0 12px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: .01em !important;
}

.nl3d-panel-count-row {
    background: var(--nl3d-iac-surface-2) !important;
    border: 1px solid var(--nl3d-iac-border) !important;
    border-radius: 14px !important;
    padding: 8px !important;
    width: max-content !important;
}

.nl3d-pc-val {
    color: var(--nl3d-iac-text-1) !important;
    min-width: 54px !important;
    font-size: 12px !important;
}

.nl3d-panel-sel-hint--active {
    background: rgba(37,95,158,.10) !important;
    border: 1px solid rgba(37,95,158,.32) !important;
    color: var(--nl3d-iac-blue) !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
}

.nl3d-panel-quick-edit, .nl3d-panel-width-cell, .nl3d-pfl-row, .nl3d-site-limit-box {
    background: var(--nl3d-iac-surface-1) !important;
    border: 1px solid var(--nl3d-iac-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--nl3d-iac-shadow-soft) !important;
    color: var(--nl3d-iac-text-2) !important;
}

    .nl3d-pfl-row b {
        color: var(--nl3d-iac-text-1) !important;
    }

.nl3d-pfl-empty {
    color: var(--nl3d-iac-text-3) !important;
}

/* 2D preview: reduce giant view feel and frame it */
.nl3d-card--preview,
.nl3d-preview-card,
.nl3d-elevation-card,
.nl3d-2d-card {
    background: var(--nl3d-iac-surface-1) !important;
    border: 1px solid var(--nl3d-iac-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--nl3d-iac-shadow-soft) !important;
    overflow: hidden !important;
}

    .nl3d-card--preview svg,
    .nl3d-elevations svg,
    .nl3d-plan-svg,
    svg.nl3d-wall-elevation-svg,
    .nl3d-svg-wrap svg {
        width: 100% !important;
        height: auto !important;
        max-height: 340px !important;
        border-radius: 16px !important;
        background: #f7fbff !important;
        border: 1px solid var(--nl3d-iac-border) !important;
    }

    .nl3d-card--preview .nl3d-svg-wrap,
    .nl3d-svg-wrap,
    .nl3d-preview-svg-wrap,
    .nl3d-elevation-wrap {
        max-height: 360px !important;
        overflow: hidden !important;
        border-radius: 16px !important;
    }

.nl3d-svg-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: .015em !important;
}

.nl3d-preview-section h3, .nl3d-preview-section h4, .nl3d-card-title {
    color: var(--nl3d-iac-text-1) !important;
}

.nl3d-card-subtitle, .nl3d-preview-section p, .nl3d-canvas-hint {
    color: var(--nl3d-iac-text-3) !important;
}

@media (max-width:1100px) {
    #nl3d-shell-root .nl3d-strip, .nl3d-strip {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width:760px) {
    .nl3d-cfg-toolbar {
        align-items: flex-start !important;
    }

    .nl3d-bg-picker {
        width: 100% !important;
        border-left: 0 !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    #nl3d-shell-root .nl3d-feat-editor.nl3d-feat-editor--active,
    #nl3d-shell-root #nl3d-feat-editor:not([hidden]),
    .nl3d-feat-editor.nl3d-feat-editor--active,
    #nl3d-feat-editor:not([hidden]) {
        width: calc(100vw - 20px) !important;
    }
}

/* ==========================================================================
   RPC 3D ENGINE CSS — v23 CLEAN FIX
   One consolidated engine repair block: light backgrounds, readable labels,
   colored dark-mode buttons, fixed modal host, and checkboxes.
   ========================================================================== */

:root {
    --nl3d-legacy-panel: #f4f8fc;
    --nl3d-legacy-panel-2: #ffffff;
    --nl3d-legacy-text: #0d1b2f;
    --nl3d-legacy-text-2: #263b55;
    --nl3d-legacy-muted: #5f7390;
    --nl3d-legacy-border: #b9cde1;
    --nl3d-legacy-blue: #2766a8;
    --nl3d-legacy-blue-2: #1f548c;
    --nl3d-legacy-gold: #c7820c;
    --nl3d-legacy-gold-2: #9e6508;
    --nl3d-legacy-red: #a7353f;
    --nl3d-legacy-shadow: 0 12px 30px rgba(15,23,42,.10);
    --nl3d-legacy-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23263b55' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-bs-theme="dark"] #nl3d-shell-root,
[data-theme="dark"] #nl3d-shell-root,
body.dark #nl3d-shell-root {
    --nl3d-legacy-panel: #0c1624;
    --nl3d-legacy-panel-2: #101c2d;
    --nl3d-legacy-text: #eef5ff;
    --nl3d-legacy-text-2: #c7d6e8;
    --nl3d-legacy-muted: #91a5bd;
    --nl3d-legacy-border: #2a4261;
    --nl3d-legacy-blue: #2d609c;
    --nl3d-legacy-blue-2: #224f82;
    --nl3d-legacy-gold: #b87810;
    --nl3d-legacy-gold-2: #8f5d0b;
    --nl3d-legacy-red: #8e3440;
    --nl3d-legacy-shadow: 0 16px 36px rgba(0,0,0,.35);
    --nl3d-legacy-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c7d6e8' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Light mode engine sections must be light, not dark slabs */
#nl3d-shell-root .nl3d-cfg-toolbar,
#nl3d-shell-root .nl3d-strip,
#nl3d-shell-root .nl3d-cfg-blazor-inputs {
    background: var(--nl3d-legacy-panel) !important;
    border-color: var(--nl3d-legacy-border) !important;
    color: var(--nl3d-legacy-text) !important;
    box-shadow: none !important;
}

    #nl3d-shell-root .nl3d-cfg-toolbar::after,
    #nl3d-shell-root .nl3d-strip__lbl,
    #nl3d-shell-root .nl3d-cfg-bi-lbl,
    #nl3d-shell-root .nl3d-panel-sel-hint,
    #nl3d-shell-root .nl3d-bg-picker,
    #nl3d-shell-root .nl3d-cfg-bi-unit,
    #nl3d-shell-root .nl3d-pfl-empty,
    #nl3d-shell-root .nl3d-lbl {
        color: var(--nl3d-legacy-muted) !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }

#nl3d-shell-root input:not([type="checkbox"]):not([type="radio"]),
#nl3d-shell-root select,
#nl3d-shell-root textarea,
#nl3d-shell-root .form-control,
#nl3d-shell-root .form-select {
    min-height: 34px !important;
    background-color: var(--nl3d-legacy-panel-2) !important;
    border: 1px solid var(--nl3d-legacy-border) !important;
    color: var(--nl3d-legacy-text) !important;
    border-radius: 11px !important;
    font-weight: 750 !important;
    box-shadow: none !important;
}

#nl3d-shell-root select,
#nl3d-shell-root .form-select,
#nl3d-shell-root .nl3d-bg-picker select {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: var(--nl3d-legacy-arrow) !important;
    background-repeat: no-repeat !important;
    background-size: 14px !important;
    background-position: right 12px center !important;
    padding-right: 40px !important;
}

    #nl3d-shell-root select option {
        background: var(--nl3d-legacy-panel-2) !important;
        color: var(--nl3d-legacy-text) !important;
    }

/* Buttons are colored in dark mode all the time, not only hover */
#nl3d-shell-root .nl3d-vt__btn,
#nl3d-shell-root .nl3d-tb-btn,
#nl3d-shell-root .nl3d-cam,
#nl3d-shell-root .nl3d-cfg-btn,
#nl3d-shell-root .nl3d-cfg-cam-chips button,
#nl3d-shell-root .nl3d-wtab,
#nl3d-shell-root .nl3d-feat-chip,
#nl3d-shell-root .nl3d-chip,
#nl3d-shell-root .nl3d-quick-btn,
#nl3d-shell-root .nl3d-pc-btn,
#nl3d-shell-root .nl3d-panel-edit-toggle,
#nl3d-shell-root .nl3d-ebtn {
    background: color-mix(in srgb,var(--nl3d-legacy-blue) 16%,var(--nl3d-legacy-panel-2)) !important;
    border: 1px solid color-mix(in srgb,var(--nl3d-legacy-blue) 42%,var(--nl3d-legacy-border)) !important;
    color: var(--nl3d-legacy-text-2) !important;
    box-shadow: 0 5px 14px color-mix(in srgb,var(--nl3d-legacy-blue) 12%,transparent) !important;
    border-radius: 11px !important;
    opacity: 1 !important;
}

    #nl3d-shell-root .nl3d-vt__btn--active,
    #nl3d-shell-root .nl3d-tb-btn--active,
    #nl3d-shell-root .nl3d-cam.active,
    #nl3d-shell-root .nl3d-cfg-cam-chips button.active,
    #nl3d-shell-root .nl3d-wtab--active,
    #nl3d-shell-root .nl3d-feat-chip--active,
    #nl3d-shell-root .nl3d-chip.active,
    #nl3d-shell-root .nl3d-chip.selected,
    #nl3d-shell-root .nl3d-vt__btn:hover,
    #nl3d-shell-root .nl3d-tb-btn:hover,
    #nl3d-shell-root .nl3d-cam:hover,
    #nl3d-shell-root .nl3d-cfg-btn:hover,
    #nl3d-shell-root .nl3d-cfg-cam-chips button:hover,
    #nl3d-shell-root .nl3d-wtab:hover,
    #nl3d-shell-root .nl3d-feat-chip:hover,
    #nl3d-shell-root .nl3d-chip:hover,
    #nl3d-shell-root .nl3d-quick-btn:hover,
    #nl3d-shell-root .nl3d-ebtn:hover {
        background: linear-gradient(180deg,var(--nl3d-legacy-blue),var(--nl3d-legacy-blue-2)) !important;
        border-color: var(--nl3d-legacy-blue) !important;
        color: #fff !important;
    }

    #nl3d-shell-root .nl3d-vt__btn:first-child,
    #nl3d-shell-root .nl3d-tb-btn--gold,
    #nl3d-shell-root .nl3d-panel-edit-toggle,
    #nl3d-shell-root #nl3d-panel-width-set,
    #nl3d-shell-root .nl3d-feat-apply {
        background: linear-gradient(180deg,var(--nl3d-legacy-gold),var(--nl3d-legacy-gold-2)) !important;
        border-color: var(--nl3d-legacy-gold) !important;
        color: #111827 !important;
    }

#nl3d-shell-root .nl3d-ebtn--danger,
#nl3d-shell-root .nl3d-feat-remove {
    background: color-mix(in srgb,var(--nl3d-legacy-red) 15%,var(--nl3d-legacy-panel-2)) !important;
    border-color: color-mix(in srgb,var(--nl3d-legacy-red) 55%,var(--nl3d-legacy-border)) !important;
    color: var(--nl3d-legacy-red) !important;
}

/* Checkboxes */
#nl3d-shell-root input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 6px !important;
    border: 2px solid var(--nl3d-legacy-border) !important;
    background: var(--nl3d-legacy-panel-2) !important;
    display: inline-grid !important;
    place-items: center !important;
}

    #nl3d-shell-root input[type="checkbox"]:checked {
        background: linear-gradient(180deg,var(--nl3d-legacy-blue),var(--nl3d-legacy-blue-2)) !important;
        border-color: var(--nl3d-legacy-blue) !important;
    }

        #nl3d-shell-root input[type="checkbox"]:checked::after {
            content: "✓";
            color: #fff;
            font-size: 14px;
            font-weight: 950;
            line-height: 1;
        }

/* Modal editor */
#nl3d-shell-root #nl3d-feat-editor.nl3d-feat-editor--modal-open,
#nl3d-shell-root .nl3d-feat-editor.nl3d-feat-editor--modal-open {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%,-50%) !important;
    z-index: 10070 !important;
    width: min(920px,calc(100vw - 44px)) !important;
    max-height: min(78vh,720px) !important;
    overflow: auto !important;
    background: var(--nl3d-legacy-panel-2) !important;
    border: 1px solid var(--nl3d-legacy-border) !important;
    color: var(--nl3d-legacy-text) !important;
    border-radius: 20px !important;
    box-shadow: 0 28px 80px rgba(0,0,0,.42) !important;
}


/* =====================================================================
   v24 STABLE APP-SHELL POLISH
   Scope: Blazor/page controls outside the 3D editor + non-invasive modal
   styling for the RPC editor. 3D editor button styling is intentionally
   left alone because those buttons were approved.
   ===================================================================== */
:root {
    --nl3d-ap24-bg: #f5f8fc;
    --nl3d-ap24-surface: #ffffff;
    --nl3d-ap24-surface-2: #eaf1f9;
    --nl3d-ap24-card: #ffffff;
    --nl3d-ap24-text: #0b1728;
    --nl3d-ap24-muted: #53657d;
    --nl3d-ap24-soft: #7c8da3;
    --nl3d-ap24-border: #b9c9da;
    --nl3d-ap24-border-2: #d7e2ee;
    --nl3d-ap24-blue: #1f5f9f;
    --nl3d-ap24-blue-2: #174978;
    --nl3d-ap24-gold: #c97f00;
    --nl3d-ap24-gold-2: #a96900;
    --nl3d-ap24-red: #b94a48;
    --nl3d-ap24-green: #237a55;
    --nl3d-ap24-shadow: 0 12px 32px rgba(30,55,85,.12);
    --nl3d-ap24-shadow-sm: 0 5px 16px rgba(30,55,85,.10);
    --nl3d-ap24-radius: 14px;
    --nl3d-ap24-radius-sm: 10px;
    --nl3d-ap24-font: inherit;
    --nl3d-ap24-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23284663' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-bs-theme="dark"], [data-theme="dark"], body.dark, .dark {
    --nl3d-ap24-bg: #08111d;
    --nl3d-ap24-surface: #101b2a;
    --nl3d-ap24-surface-2: #152437;
    --nl3d-ap24-card: #0f1b2a;
    --nl3d-ap24-text: #eaf2ff;
    --nl3d-ap24-muted: #a5b4c8;
    --nl3d-ap24-soft: #7f90a8;
    --nl3d-ap24-border: #31445d;
    --nl3d-ap24-border-2: #26384f;
    --nl3d-ap24-blue: #255f9a;
    --nl3d-ap24-blue-2: #1b4776;
    --nl3d-ap24-gold: #b87715;
    --nl3d-ap24-gold-2: #8f5c12;
    --nl3d-ap24-red: #944747;
    --nl3d-ap24-green: #276c52;
    --nl3d-ap24-shadow: 0 16px 38px rgba(0,0,0,.38);
    --nl3d-ap24-shadow-sm: 0 7px 18px rgba(0,0,0,.26);
    --nl3d-ap24-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23aebed2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Page sections outside the 3D editor */
.nl3d-page :where(.nl3d-ap-agent-card,.nl3d-section-slab,.nl3d-slab-card,.card,.nl3d-ap-enclosure-builder,.nl3d-card):not(#nl3d-shell-root *):not(.nl3d-card--configurator3d) {
    background: var(--nl3d-ap24-card) !important;
    color: var(--nl3d-ap24-text) !important;
    border: 1px solid var(--nl3d-ap24-border-2) !important;
    border-radius: var(--nl3d-ap24-radius) !important;
    box-shadow: var(--nl3d-ap24-shadow-sm) !important;
}

.nl3d-page :where(label,.form-label,.nl3d-cfg-bi-lbl,.nl3d-quick-field label,.nl3d-ap-agent-kicker,.nl3d-card-title,.nl3d-card-subtitle,.nl3d-slab-card__title):not(#nl3d-shell-root *) {
    color: var(--nl3d-ap24-muted) !important;
    font-weight: 800 !important;
    letter-spacing: .055em !important;
}

.nl3d-page :where(.form-label,.nl3d-cfg-bi-lbl,.nl3d-quick-field label):not(#nl3d-shell-root *) {
    text-transform: uppercase !important;
    font-size: 11px !important;
}

.nl3d-page :where(h1,h2,h3,h4,h5,h6,strong,.nl3d-ap-agent-section__title,.nl3d-preview-section-title,.nl3d-lv-label):not(#nl3d-shell-root *) {
    color: var(--nl3d-ap24-text) !important;
}

.nl3d-page :where(.text-muted,.form-text,.nl3d-card-subtitle,small):not(#nl3d-shell-root *) {
    color: var(--nl3d-ap24-muted) !important;
}

/* Inputs/selects outside 3D editor */
.nl3d-page :where(input:not([type='checkbox']):not([type='radio']),select,textarea,.form-control,.form-select):not(#nl3d-shell-root *) {
    min-height: 38px !important;
    background-color: var(--nl3d-ap24-surface) !important;
    color: var(--nl3d-ap24-text) !important;
    border: 1px solid var(--nl3d-ap24-border) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}

.nl3d-page :where(select,.form-select):not(#nl3d-shell-root *) {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: var(--nl3d-ap24-select-arrow) !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
    padding-right: 38px !important;
}

.nl3d-page :where(input:not([type='checkbox']):not([type='radio']),select,textarea,.form-control,.form-select):not(#nl3d-shell-root *):focus {
    border-color: var(--nl3d-ap24-blue) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--nl3d-ap24-blue) 20%,transparent) !important;
    outline: none !important;
}

.nl3d-page select:not(#nl3d-shell-root *) option,
.nl3d-page .form-select:not(#nl3d-shell-root *) option {
    background: var(--nl3d-ap24-surface) !important;
    color: var(--nl3d-ap24-text) !important;
}

/* App buttons outside the 3D editor. Muted color by default in dark mode too. */
.nl3d-page :where(.btn,.nl3d-ap-btn,button):not(#nl3d-shell-root *):not(.nl3d-tab):not(.nl3d-chip):not(.nl3d-quick-btn):not(.nl3d-ebtn) {
    border-radius: 11px !important;
    min-height: 36px !important;
    border: 1px solid var(--nl3d-ap24-border) !important;
    background: linear-gradient(180deg,var(--nl3d-ap24-surface-2),color-mix(in srgb,var(--nl3d-ap24-surface-2) 75%,var(--nl3d-ap24-card))) !important;
    color: var(--nl3d-ap24-text) !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
    box-shadow: var(--nl3d-ap24-shadow-sm) !important;
    transition: background .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .14s ease !important;
}

    .nl3d-page :where(.btn,.nl3d-ap-btn,button):not(#nl3d-shell-root *):not(.nl3d-tab):not(.nl3d-chip):not(.nl3d-quick-btn):not(.nl3d-ebtn):hover {
        transform: translateY(-1px) !important;
        border-color: color-mix(in srgb,var(--nl3d-ap24-blue) 55%,var(--nl3d-ap24-border)) !important;
        background: linear-gradient(180deg,color-mix(in srgb,var(--nl3d-ap24-blue) 18%,var(--nl3d-ap24-surface-2)),var(--nl3d-ap24-surface-2)) !important;
        color: var(--nl3d-ap24-text) !important;
    }

.nl3d-page :where(.btn,.nl3d-ap-btn,button):not(#nl3d-shell-root *):disabled,
.nl3d-page :where(.btn,.nl3d-ap-btn,button):not(#nl3d-shell-root *)[disabled] {
    opacity: .52 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.nl3d-page :where(.btn-primary,.nl3d-iac-btn,.nl3d-ap-build-bom-btn,.nl3d-ap-final-action--order):not(#nl3d-shell-root *) {
    background: linear-gradient(180deg,var(--nl3d-ap24-blue),var(--nl3d-ap24-blue-2)) !important;
    border-color: var(--nl3d-ap24-blue) !important;
    color: #fff !important;
}

.nl3d-page :where(.nl3d-ap-header-btn,.nl3d-ap-mini-action,.btn-outline-primary):not(#nl3d-shell-root *) {
    background: linear-gradient(180deg,color-mix(in srgb,var(--nl3d-ap24-blue) 16%,var(--nl3d-ap24-surface)),var(--nl3d-ap24-surface)) !important;
    border-color: color-mix(in srgb,var(--nl3d-ap24-blue) 50%,var(--nl3d-ap24-border)) !important;
    color: var(--nl3d-ap24-blue) !important;
}

.nl3d-page :where(.nl3d-ap-clear-order-btn,.btn-outline-secondary,.nl3d-ap-final-action--pdf,.nl3d-ap-export-btn):not(#nl3d-shell-root *) {
    background: linear-gradient(180deg,color-mix(in srgb,var(--nl3d-ap24-gold) 13%,var(--nl3d-ap24-surface)),var(--nl3d-ap24-surface)) !important;
    border-color: color-mix(in srgb,var(--nl3d-ap24-gold) 48%,var(--nl3d-ap24-border)) !important;
    color: color-mix(in srgb,var(--nl3d-ap24-gold) 75%,var(--nl3d-ap24-text)) !important;
}

.nl3d-page :where(.btn-outline-danger,.nl3d-ap-clear-confirm__yes):not(#nl3d-shell-root *) {
    background: linear-gradient(180deg,color-mix(in srgb,var(--nl3d-ap24-red) 16%,var(--nl3d-ap24-surface)),var(--nl3d-ap24-surface)) !important;
    border-color: color-mix(in srgb,var(--nl3d-ap24-red) 55%,var(--nl3d-ap24-border)) !important;
    color: var(--nl3d-ap24-red) !important;
}

.nl3d-page :where(.nl3d-ap-build-bom-btn):not(#nl3d-shell-root *) {
    min-height: 42px !important;
    padding-inline: 22px !important;
}

/* checkbox visibility outside and inside editor */
.nl3d-page input[type='checkbox'],
#nl3d-shell-root input[type='checkbox'] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    border-radius: 6px !important;
    border: 2px solid var(--nl3d-ap24-border) !important;
    background: var(--nl3d-ap24-surface) !important;
    display: inline-grid !important;
    place-content: center !important;
    vertical-align: middle !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16) !important;
}

    .nl3d-page input[type='checkbox']::after,
    #nl3d-shell-root input[type='checkbox']::after {
        content: '✓';
        color: #fff;
        font-size: 13px;
        font-weight: 900;
        line-height: 1;
        transform: scale(0);
        transition: transform .12s ease;
    }

    .nl3d-page input[type='checkbox']:checked,
    #nl3d-shell-root input[type='checkbox']:checked {
        background: linear-gradient(180deg,var(--nl3d-ap24-blue),var(--nl3d-ap24-blue-2)) !important;
        border-color: var(--nl3d-ap24-blue) !important;
    }

        .nl3d-page input[type='checkbox']:checked::after,
        #nl3d-shell-root input[type='checkbox']:checked::after {
            transform: scale(1);
        }

/* Two-up 2D drawings */
.nl3d-page .nl3d-live-views-grid,
.nl3d-page .nl3d-live-views-grid--elev4 {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 18px !important;
    align-items: start !important;
}

.nl3d-page .nl3d-live-view,
.nl3d-page .nl3d-live-view--wide {
    min-width: 0 !important;
    background: var(--nl3d-ap24-card) !important;
    border: 1px solid var(--nl3d-ap24-border-2) !important;
    border-radius: 16px !important;
    padding: 14px !important;
    box-shadow: var(--nl3d-ap24-shadow-sm) !important;
}

.nl3d-page .nl3d-svg-wrap:not(.nl3d-svg-wrap--interactive3d) {
    height: clamp(250px,30vw,410px) !important;
    max-height: 430px !important;
    overflow: hidden !important;
    border-radius: 15px !important;
    border: 1px solid var(--nl3d-ap24-border-2) !important;
    background: #f6faff !important;
}

    .nl3d-page .nl3d-svg-wrap:not(.nl3d-svg-wrap--interactive3d) svg {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }

.nl3d-page .nl3d-svg-wrap .nl3d-svg-title {
    font-size: 18px !important;
    font-weight: 900 !important;
}

.nl3d-page .nl3d-svg-wrap .nl3d-svg-mark {
    font-size: 12px !important;
}

@media (max-width:1100px) {
    .nl3d-page .nl3d-live-views-grid,
    .nl3d-page .nl3d-live-views-grid--elev4 {
        grid-template-columns: 1fr !important;
    }
}

/* Non-JS centered feature editor: no body-wide MutationObserver required */
#nl3d-shell-root .nl3d-feat-editor.nl3d-feat-editor--active,
#nl3d-shell-root #nl3d-feat-editor.nl3d-feat-editor--active {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%,-50%) !important;
    width: min(880px,calc(100vw - 42px)) !important;
    max-height: min(76vh,720px) !important;
    overflow: auto !important;
    z-index: 2147483000 !important;
    background: var(--nl3d-ap24-card) !important;
    color: var(--nl3d-ap24-text) !important;
    border: 1px solid var(--nl3d-ap24-border) !important;
    border-radius: 22px !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.42) !important;
    padding: 22px !important;
}

    #nl3d-shell-root .nl3d-feat-editor.nl3d-feat-editor--active .nl3d-feat-editor__head {
        background: transparent !important;
        border-bottom: 1px solid var(--nl3d-ap24-border-2) !important;
        padding: 0 0 14px !important;
        margin-bottom: 18px !important;
    }

    #nl3d-shell-root .nl3d-feat-editor.nl3d-feat-editor--active .nl3d-feat-editor__title {
        color: var(--nl3d-ap24-gold) !important;
        font-size: 16px !important;
    }

    #nl3d-shell-root .nl3d-feat-editor.nl3d-feat-editor--active :where(label,.nl3d-ff-lbl) {
        color: var(--nl3d-ap24-muted) !important;
        font-weight: 900 !important;
    }

    #nl3d-shell-root .nl3d-feat-editor.nl3d-feat-editor--active :where(input:not([type='checkbox']),select,textarea) {
        background: var(--nl3d-ap24-surface) !important;
        color: var(--nl3d-ap24-text) !important;
        border: 1px solid var(--nl3d-ap24-border) !important;
        border-radius: 11px !important;
        min-height: 40px !important;
    }

    #nl3d-shell-root .nl3d-feat-editor.nl3d-feat-editor--active .nl3d-feat-apply {
        background: linear-gradient(180deg,var(--nl3d-ap24-gold),var(--nl3d-ap24-gold-2)) !important;
        color: #111827 !important;
        border: 1px solid var(--nl3d-ap24-gold) !important;
        border-radius: 12px !important;
        min-height: 42px !important;
        padding-inline: 24px !important;
    }

    #nl3d-shell-root .nl3d-feat-editor.nl3d-feat-editor--active .nl3d-feat-editor__close,
    #nl3d-shell-root .nl3d-feat-editor.nl3d-feat-editor--active .nl3d-feat-remove {
        background: color-mix(in srgb,var(--nl3d-ap24-red) 15%,var(--nl3d-ap24-surface)) !important;
        border: 1px solid color-mix(in srgb,var(--nl3d-ap24-red) 55%,var(--nl3d-ap24-border)) !important;
        color: var(--nl3d-ap24-red) !important;
    }


/* ======================================================================
   NL3D ENGINE POLISH — isolated viewer controls, professional light/dark
   ====================================================================== */
#nl3d-shell-root {
    --nl3d-viewer-bg: #07111f;
    --nl3d-viewer-card: rgba(11, 22, 42, .96);
    --nl3d-viewer-card-2: rgba(16, 30, 54, .94);
    --nl3d-viewer-border: rgba(226, 238, 255, .12);
    --nl3d-viewer-text: rgba(232, 242, 255, .94);
    --nl3d-viewer-muted: rgba(170, 198, 238, .66);
    --nl3d-viewer-gold: #f7ca52;
    --nl3d-viewer-blue: #7dd3fc;
    color: var(--nl3d-viewer-text);
}

    #nl3d-shell-root .nl3d-cfg-toolbar,
    #nl3d-shell-root .nl3d-strip,
    #nl3d-shell-root .nl3d-cfg-blazor-inputs {
        border-color: var(--nl3d-viewer-border) !important;
    }

    #nl3d-shell-root .nl3d-cfg-toolbar {
        background: linear-gradient(180deg, rgba(12, 24, 44, .98), rgba(7, 17, 31, .98)) !important;
    }

    #nl3d-shell-root .nl3d-canvas-wrap,
    #nl3d-shell-root .nl3d-cfg-canvas-wrap {
        background: radial-gradient(circle at 50% 0%, rgba(125,211,252,.10), transparent 35%), #07111f !important;
    }

    #nl3d-shell-root .nl3d-strip__col,
    #nl3d-shell-root .nl3d-feat-editor,
    #nl3d-shell-root .nl3d-room-setup-card,
    #nl3d-shell-root .nl3d-setup-field,
    #nl3d-shell-root .nl3d-setup-site-card {
        border-color: var(--nl3d-viewer-border) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 34px rgba(0,0,0,.22) !important;
    }

    #nl3d-shell-root button,
    #nl3d-shell-root .nl3d-vt__btn,
    #nl3d-shell-root .nl3d-tb-btn,
    #nl3d-shell-root .nl3d-cam,
    #nl3d-shell-root .nl3d-feat-chip,
    #nl3d-shell-root .nl3d-wtab,
    #nl3d-shell-root .nl3d-vis-btn,
    #nl3d-shell-root .nl3d-pc-btn {
        border-radius: 10px !important;
        font-weight: 850 !important;
    }

        #nl3d-shell-root .nl3d-vt__btn--active,
        #nl3d-shell-root .nl3d-tb-btn--active,
        #nl3d-shell-root .nl3d-cam.active,
        #nl3d-shell-root .nl3d-wtab--active,
        #nl3d-shell-root .nl3d-feat-chip--active {
            color: var(--nl3d-viewer-gold) !important;
            border-color: rgba(247,202,82,.52) !important;
            background: linear-gradient(180deg, rgba(247,202,82,.22), rgba(247,202,82,.08)) !important;
        }

    #nl3d-shell-root input,
    #nl3d-shell-root select,
    #nl3d-shell-root textarea {
        background-color: rgba(255,255,255,.075) !important;
        border-color: rgba(226,238,255,.15) !important;
        color: var(--nl3d-viewer-text) !important;
    }

        #nl3d-shell-root input:focus,
        #nl3d-shell-root select:focus,
        #nl3d-shell-root textarea:focus {
            border-color: rgba(247,202,82,.68) !important;
            box-shadow: 0 0 0 3px rgba(247,202,82,.16) !important;
        }

    #nl3d-shell-root .nl3d-panel-sel-hint--active {
        color: var(--nl3d-viewer-gold) !important;
        background: rgba(247,202,82,.10) !important;
        border-color: rgba(247,202,82,.38) !important;
    }


    /* ========================================================================
   FIX PASS — keep viewer visible and make controls read professionally
   ======================================================================== */
    #nl3d-shell-root,
    #nl3d-shell-root * {
        box-sizing: border-box;
    }

        #nl3d-shell-root .nl3d-cfg-shell {
            border-radius: 18px;
            overflow: hidden;
            border: 1px solid rgba(30, 73, 118, .28);
            background: linear-gradient(180deg, #071426 0%, #0b1728 100%);
            box-shadow: 0 22px 60px rgba(6, 18, 34, .30), 0 0 0 1px rgba(255,255,255,.04) inset;
        }

        #nl3d-shell-root .nl3d-cfg-toolbar {
            display: flex !important;
            min-height: 54px;
            gap: 10px;
            padding: 12px 14px;
            background: linear-gradient(135deg, rgba(7,18,34,.98), rgba(16,35,60,.96));
            border-bottom: 1px solid rgba(247,202,82,.18);
        }

        #nl3d-shell-root .nl3d-canvas-wrap {
            display: block !important;
            min-height: 430px;
            height: clamp(430px, 48vh, 620px);
            background: radial-gradient(circle at 18% 15%, rgba(125,211,252,.13), transparent 34%), radial-gradient(circle at 82% 12%, rgba(247,202,82,.10), transparent 30%), linear-gradient(160deg, #07111f 0%, #0c1b31 52%, #08121f 100%);
        }

        #nl3d-shell-root .nl3d-room-setup-card {
            margin: 0;
            border-radius: 0;
            border-width: 0 0 1px 0;
            border-color: rgba(247,202,82,.18);
            background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,246,255,.96));
            box-shadow: none;
        }

[data-bs-theme="dark"] #nl3d-shell-root .nl3d-room-setup-card,
[data-theme="dark"] #nl3d-shell-root .nl3d-room-setup-card,
.dark #nl3d-shell-root .nl3d-room-setup-card {
    background: linear-gradient(135deg, rgba(7,18,34,.98), rgba(13,28,49,.98));
    border-color: rgba(247,202,82,.20);
}

#nl3d-shell-root :where(.nl3d-vt__btn,.nl3d-tb-btn,.nl3d-cam,.nl3d-wtab,.nl3d-vis-btn,.nl3d-feat-chip,.nl3d-panel-edit-toggle,.nl3d-build-view-btn) {
    border-radius: 11px !important;
    min-height: 34px;
    padding-inline: 13px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .055em;
    text-transform: uppercase;
    border: 1px solid rgba(147,197,253,.20) !important;
    color: rgba(226,240,255,.92) !important;
    background: linear-gradient(180deg, rgba(30,64,110,.78), rgba(13,31,55,.82)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.16);
}

    #nl3d-shell-root :where(.nl3d-vt__btn,.nl3d-tb-btn,.nl3d-cam,.nl3d-wtab,.nl3d-vis-btn,.nl3d-feat-chip,.nl3d-panel-edit-toggle,.nl3d-build-view-btn):hover {
        transform: translateY(-1px);
        border-color: rgba(247,202,82,.55) !important;
        background: linear-gradient(180deg, rgba(45,88,145,.92), rgba(21,47,82,.94)) !important;
        color: #fff7db !important;
    }

#nl3d-shell-root :where(.nl3d-vt__btn--active,.nl3d-tb-btn--active,.nl3d-wtab--active,.nl3d-cam.active,.nl3d-feat-chip--active) {
    border-color: rgba(247,202,82,.70) !important;
    color: #1b1200 !important;
    background: linear-gradient(135deg, #f8d66a, #d89c21) !important;
    box-shadow: 0 10px 24px rgba(216,156,33,.22), inset 0 1px 0 rgba(255,255,255,.30) !important;
}

#nl3d-shell-root .nl3d-tb-btn--refresh {
    border-color: rgba(34,211,238,.45) !important;
    background: linear-gradient(135deg, rgba(8,145,178,.92), rgba(14,116,144,.96)) !important;
    color: #ecfeff !important;
}

#nl3d-shell-root .nl3d-tb-btn--off,
#nl3d-shell-root .nl3d-vis-btn--off {
    opacity: .68;
    color: rgba(190,205,225,.68) !important;
    background: linear-gradient(180deg, rgba(31,41,55,.82), rgba(15,23,42,.88)) !important;
}

#nl3d-shell-root :where(.nl3d-cam-label,.nl3d-strip__lbl,.nl3d-ff-lbl,.nl3d-feat-editor__fields label,.nl3d-panel-quick-edit label span,.nl3d-site-limit-box label) {
    color: #f8d66a !important;
    text-shadow: 0 1px 10px rgba(248,214,106,.14);
}

#nl3d-shell-root :where(input, select, textarea) {
    border-radius: 11px !important;
    border: 1px solid rgba(148, 180, 220, .28) !important;
    background-color: rgba(9, 24, 44, .92) !important;
    color: rgba(235,246,255,.96) !important;
}

    #nl3d-shell-root :where(input, select, textarea):focus {
        border-color: rgba(247,202,82,.76) !important;
        box-shadow: 0 0 0 4px rgba(247,202,82,.16) !important;
    }

#nl3d-shell-root .nl3d-wall-badge {
    background: rgba(5,16,31,.82);
    border-color: rgba(247,202,82,.48);
    color: #f8d66a;
}

/* ======================================================================
   NL3D 3D ENGINE FINAL THEME BALANCE PASS
   Light mode viewer controls are no longer near-black; dark mode is dark
   but not black. Every toolbar button gets color instead of ghost styling.
   ====================================================================== */
#nl3d-shell-root {
    --nl3d-engine-shell: #eef4fb;
    --nl3d-engine-toolbar: #dfeaf6;
    --nl3d-engine-toolbar-2: #edf5fc;
    --nl3d-engine-card: #ffffff;
    --nl3d-engine-card-2: #f6f9fd;
    --nl3d-engine-border: rgba(50, 86, 124, .22);
    --nl3d-engine-text: #102033;
    --nl3d-engine-muted: #4f6785;
    --nl3d-engine-blue: #2563eb;
    --nl3d-engine-blue-2: #1d4ed8;
    --nl3d-engine-gold: #b97905;
    --nl3d-engine-teal: #0891b2;
    --nl3d-engine-green: #059669;
    --nl3d-engine-purple: #6d28d9;
    --nl3d-engine-shadow: 0 16px 40px rgba(15,31,56,.13);
}

[data-bs-theme="dark"] #nl3d-shell-root,
[data-theme="dark"] #nl3d-shell-root,
.dark #nl3d-shell-root,
body.dark #nl3d-shell-root {
    --nl3d-engine-shell: #1a2433;
    --nl3d-engine-toolbar: #223047;
    --nl3d-engine-toolbar-2: #293a54;
    --nl3d-engine-card: #1f2c40;
    --nl3d-engine-card-2: #273852;
    --nl3d-engine-border: rgba(190, 210, 238, .18);
    --nl3d-engine-text: #eef5ff;
    --nl3d-engine-muted: #b7c7dc;
    --nl3d-engine-blue: #3b82f6;
    --nl3d-engine-blue-2: #2563eb;
    --nl3d-engine-gold: #dca72a;
    --nl3d-engine-teal: #14b8a6;
    --nl3d-engine-green: #10b981;
    --nl3d-engine-purple: #8b5cf6;
    --nl3d-engine-shadow: 0 18px 42px rgba(0,0,0,.26);
}

#nl3d-shell-root .nl3d-cfg-shell,
#nl3d-shell-root.nl3d-cfg-shell,
#nl3d-shell-root .nl3d-shell {
    background: linear-gradient(180deg, var(--nl3d-engine-shell), var(--nl3d-engine-card-2)) !important;
    border: 1px solid var(--nl3d-engine-border) !important;
    box-shadow: var(--nl3d-engine-shadow) !important;
}

#nl3d-shell-root .nl3d-cfg-toolbar {
    background: linear-gradient(135deg, var(--nl3d-engine-toolbar), var(--nl3d-engine-toolbar-2)) !important;
    border-bottom: 1px solid var(--nl3d-engine-border) !important;
    color: var(--nl3d-engine-text) !important;
    gap: 10px !important;
    padding: 12px 14px !important;
}

    #nl3d-shell-root .nl3d-cfg-toolbar::after {
        color: var(--nl3d-engine-muted) !important;
        opacity: .82 !important;
    }

#nl3d-shell-root :where(.nl3d-cam-row,.nl3d-vis-row--toolbar,.nl3d-vt,.nl3d-bg-picker,.nl3d-toolbar-group,.nl3d-toolbar-group--hidewalls) {
    background: rgba(255,255,255,.48) !important;
    border: 1px solid var(--nl3d-engine-border) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.56) !important;
}

[data-bs-theme="dark"] #nl3d-shell-root :where(.nl3d-cam-row,.nl3d-vis-row--toolbar,.nl3d-vt,.nl3d-bg-picker,.nl3d-toolbar-group,.nl3d-toolbar-group--hidewalls),
[data-theme="dark"] #nl3d-shell-root :where(.nl3d-cam-row,.nl3d-vis-row--toolbar,.nl3d-vt,.nl3d-bg-picker,.nl3d-toolbar-group,.nl3d-toolbar-group--hidewalls),
.dark #nl3d-shell-root :where(.nl3d-cam-row,.nl3d-vis-row--toolbar,.nl3d-vt,.nl3d-bg-picker,.nl3d-toolbar-group,.nl3d-toolbar-group--hidewalls),
body.dark #nl3d-shell-root :where(.nl3d-cam-row,.nl3d-vis-row--toolbar,.nl3d-vt,.nl3d-bg-picker,.nl3d-toolbar-group,.nl3d-toolbar-group--hidewalls) {
    background: rgba(255,255,255,.055) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

#nl3d-shell-root :where(.nl3d-cam-label,.nl3d-bg-picker span,.nl3d-strip__lbl,.nl3d-ff-lbl,.nl3d-feat-editor__fields label,.nl3d-panel-quick-edit label,.nl3d-site-limit-box label) {
    color: var(--nl3d-engine-gold) !important;
    font-weight: 950 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
}

#nl3d-shell-root :where(.nl3d-vt__btn,.nl3d-tb-btn,.nl3d-cam,.nl3d-vis-btn,.nl3d-cfg-btn,.nl3d-cfg-cam-chips button,.nl3d-feat-chip,.nl3d-panel-edit-toggle,.nl3d-panel-quick-edit button,.nl3d-pfl-row button,.nl3d-feat-editor button,.nl3d-site-limit-toggle,.nl3d-wtab,.nl3d-pc-btn,.nl3d-build-view-btn) {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--nl3d-engine-blue), var(--nl3d-engine-blue-2)) !important;
    border: 1px solid rgba(29,78,216,.52) !important;
    border-radius: 11px !important;
    box-shadow: 0 8px 18px rgba(37,99,235,.18) !important;
    font-weight: 900 !important;
    opacity: 1 !important;
}

    #nl3d-shell-root :where(.nl3d-vt__btn,.nl3d-tb-btn,.nl3d-cam,.nl3d-vis-btn,.nl3d-cfg-btn,.nl3d-cfg-cam-chips button,.nl3d-feat-chip,.nl3d-panel-edit-toggle,.nl3d-panel-quick-edit button,.nl3d-pfl-row button,.nl3d-feat-editor button,.nl3d-site-limit-toggle,.nl3d-wtab,.nl3d-pc-btn,.nl3d-build-view-btn):hover:not(:disabled) {
        transform: translateY(-1px) !important;
        filter: saturate(1.05) brightness(1.04) !important;
        box-shadow: 0 12px 24px rgba(37,99,235,.24) !important;
    }

/* Button color families */
#nl3d-shell-root .nl3d-vt__btn:first-child,
#nl3d-shell-root .nl3d-tb-btn[data-mode="outside"],
#nl3d-shell-root .nl3d-tb-btn:has(input),
#nl3d-shell-root .nl3d-tb-btn--outside {
    color: #1f1200 !important;
    background: linear-gradient(135deg, #f0b735, #c98106) !important;
    border-color: rgba(185,119,0,.58) !important;
}

#nl3d-shell-root .nl3d-vt__btn:nth-child(2),
#nl3d-shell-root .nl3d-tb-btn--inside {
    color: #102033 !important;
    background: linear-gradient(135deg, #e9d5ff, #c4b5fd) !important;
    border-color: rgba(109,40,217,.32) !important;
}

[data-bs-theme="dark"] #nl3d-shell-root .nl3d-vt__btn:nth-child(2),
[data-theme="dark"] #nl3d-shell-root .nl3d-vt__btn:nth-child(2),
.dark #nl3d-shell-root .nl3d-vt__btn:nth-child(2) {
    color: #f3e8ff !important;
    background: linear-gradient(135deg, #6d28d9, #4c1d95) !important;
}

#nl3d-shell-root .nl3d-tb-btn--apply,
#nl3d-shell-root .nl3d-feat-apply {
    background: linear-gradient(135deg, var(--nl3d-engine-teal), #0e7490) !important;
    border-color: rgba(14,116,144,.58) !important;
}

#nl3d-shell-root .nl3d-feat-remove,
#nl3d-shell-root .nl3d-feat-editor__close {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    border-color: rgba(185,28,28,.60) !important;
    color: #fff !important;
}

#nl3d-shell-root :where(.nl3d-vt__btn--active,.nl3d-tb-btn--active,.nl3d-cam.active,.nl3d-cam--active,.nl3d-wtab--active,.nl3d-feat-chip--active,.nl3d-cfg-cam-chips button.active) {
    background: linear-gradient(135deg, var(--nl3d-engine-green), #047857) !important;
    border-color: rgba(4,120,87,.65) !important;
    color: #ffffff !important;
}

#nl3d-shell-root :where(.nl3d-tb-btn--off,.nl3d-vis-btn--off,.nl3d-cfg-btn.is-off) {
    color: var(--nl3d-engine-muted) !important;
    background: linear-gradient(135deg, var(--nl3d-engine-card-2), var(--nl3d-engine-card)) !important;
    border-color: var(--nl3d-engine-border) !important;
    box-shadow: none !important;
    opacity: .82 !important;
}

#nl3d-shell-root :where(select,input[type="text"],input[type="number"],textarea,.nl3d-cfg-bi-select,.nl3d-cfg-bi-input) {
    background-color: var(--nl3d-engine-card) !important;
    color: var(--nl3d-engine-text) !important;
    border: 1.5px solid var(--nl3d-engine-border) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
}

#nl3d-shell-root .nl3d-bg-picker select,
#nl3d-shell-root #nl3d-bg-select {
    min-height: 32px !important;
    background-color: var(--nl3d-engine-card) !important;
    color: var(--nl3d-engine-text) !important;
}

#nl3d-shell-root .nl3d-strip,
#nl3d-shell-root .nl3d-feat-editor,
#nl3d-shell-root .nl3d-panel-width-list,
#nl3d-shell-root .nl3d-cfg-advanced-details {
    background: linear-gradient(180deg, var(--nl3d-engine-card), var(--nl3d-engine-card-2)) !important;
    border-color: var(--nl3d-engine-border) !important;
    color: var(--nl3d-engine-text) !important;
}

#nl3d-shell-root .nl3d-canvas-wrap,
#nl3d-shell-root .nl3d-cfg-canvas-wrap,
#nl3d-shell-root .nl3d-3d-loading {
    background: linear-gradient(180deg, #d8e2ec, #cbd6e1) !important;
}

[data-bs-theme="dark"] #nl3d-shell-root .nl3d-canvas-wrap,
[data-bs-theme="dark"] #nl3d-shell-root .nl3d-cfg-canvas-wrap,
[data-bs-theme="dark"] #nl3d-shell-root .nl3d-3d-loading,
[data-theme="dark"] #nl3d-shell-root .nl3d-canvas-wrap,
[data-theme="dark"] #nl3d-shell-root .nl3d-cfg-canvas-wrap,
[data-theme="dark"] #nl3d-shell-root .nl3d-3d-loading,
.dark #nl3d-shell-root .nl3d-canvas-wrap,
.dark #nl3d-shell-root .nl3d-cfg-canvas-wrap,
.dark #nl3d-shell-root .nl3d-3d-loading {
    background: linear-gradient(180deg, #1f2937, #172033) !important;
}

@supports not selector(:has(*)) {
    #nl3d-shell-root .nl3d-vt__btn:first-child {
        color: #1f1200 !important;
        background: linear-gradient(135deg, #f0b735, #c98106) !important;
    }
}


/* ========================================================================
   FINAL 3D VIEWER LIGHT/DARK POLISH — light mode is not black; dark mode is
   not harsh white/black. Controls remain colored and readable.
   ======================================================================== */
#nl3d-shell-root {
    --nl3d-viewer-bg: #f5f8fc;
    --nl3d-viewer-surface: #ffffff;
    --nl3d-viewer-surface-2: #edf5ff;
    --nl3d-viewer-line: #bfd3ea;
    --nl3d-viewer-ink: #102033;
    --nl3d-viewer-muted: #58708e;
    --nl3d-viewer-blue: #2563eb;
    --nl3d-viewer-cyan: #0e8fb2;
    --nl3d-viewer-gold: #b97909;
}

[data-bs-theme="dark"] #nl3d-shell-root,
[data-theme="dark"] #nl3d-shell-root,
.dark #nl3d-shell-root {
    --nl3d-viewer-bg: #121b2b;
    --nl3d-viewer-surface: #1a263a;
    --nl3d-viewer-surface-2: #22324b;
    --nl3d-viewer-line: #40536d;
    --nl3d-viewer-ink: #e8eef7;
    --nl3d-viewer-muted: #a9b8cb;
    --nl3d-viewer-blue: #6ea2ff;
    --nl3d-viewer-cyan: #38bdf8;
    --nl3d-viewer-gold: #f0b84b;
}

#nl3d-shell-root .nl3d-cfg-shell,
#nl3d-shell-root .nl3d-shell {
    background: var(--nl3d-viewer-bg) !important;
    border-color: var(--nl3d-viewer-line) !important;
    box-shadow: 0 14px 36px rgba(28,55,90,.14) !important;
}

#nl3d-shell-root .nl3d-cfg-toolbar {
    background: linear-gradient(180deg,#ffffff,#eef6ff) !important;
    border-bottom-color: var(--nl3d-viewer-line) !important;
    color: var(--nl3d-viewer-ink) !important;
}

    #nl3d-shell-root .nl3d-cfg-toolbar::after {
        color: #6c8099 !important;
    }

#nl3d-shell-root :where(.nl3d-cam-row,.nl3d-vis-row--toolbar,.nl3d-vt,.nl3d-bg-picker,.nl3d-toolbar-group) {
    background: rgba(237,245,255,.92) !important;
    border: 1px solid var(--nl3d-viewer-line) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.70), 0 8px 18px rgba(37,99,235,.08) !important;
}

#nl3d-shell-root :where(.nl3d-cam-label,.nl3d-bg-picker span,.nl3d-strip__lbl) {
    color: #31527a !important;
}

#nl3d-shell-root :where(.nl3d-vt__btn,.nl3d-tb-btn,.nl3d-cam,.nl3d-vis-btn,.nl3d-feat-chip,.nl3d-panel-edit-toggle,.nl3d-cfg-btn,.nl3d-wtab) {
    background: linear-gradient(180deg,#f8fbff,#dcecff) !important;
    color: #143b68 !important;
    border: 1px solid #9fc3ff !important;
    box-shadow: 0 8px 18px rgba(37,99,235,.10) !important;
}

#nl3d-shell-root :where(.nl3d-vt__btn:hover,.nl3d-tb-btn:hover,.nl3d-cam:hover,.nl3d-vis-btn:hover,.nl3d-feat-chip:hover,.nl3d-panel-edit-toggle:hover,.nl3d-cfg-btn:hover,.nl3d-wtab:hover) {
    background: linear-gradient(180deg,#dbeafe,#bfdbfe) !important;
    color: #082f6f !important;
    border-color: #60a5fa !important;
    transform: translateY(-1px) !important;
}

#nl3d-shell-root :where(.nl3d-vt__btn--active,.nl3d-tb-btn--active,.nl3d-cam.active,.nl3d-cam--active,.nl3d-wtab--active,.nl3d-feat-chip--active) {
    background: linear-gradient(135deg,#2563eb,#1d4ed8) !important;
    color: #ffffff !important;
    border-color: #1e40af !important;
}

#nl3d-shell-root .nl3d-bg-picker select,
#nl3d-shell-root select,
#nl3d-shell-root input {
    background-color: #ffffff !important;
    color: #102033 !important;
    border-color: #b8d3f6 !important;
}

#nl3d-shell-root .nl3d-canvas-wrap {
    background: #e8eef6 !important;
}

#nl3d-shell-root .nl3d-strip,
#nl3d-shell-root .nl3d-strip__col,
#nl3d-shell-root .nl3d-feat-editor,
#nl3d-shell-root .nl3d-cfg-advanced-details {
    background: linear-gradient(180deg,#ffffff,#f2f7fd) !important;
    border-color: var(--nl3d-viewer-line) !important;
    color: var(--nl3d-viewer-ink) !important;
}

#nl3d-shell-root .nl3d-wall-badge {
    background: #eff6ff !important;
    color: #0f4d8a !important;
    border-color: #93c5fd !important;
}

[data-bs-theme="dark"] #nl3d-shell-root .nl3d-cfg-toolbar,
[data-theme="dark"] #nl3d-shell-root .nl3d-cfg-toolbar,
.dark #nl3d-shell-root .nl3d-cfg-toolbar {
    background: linear-gradient(180deg,#1e2d45,#172235) !important;
    border-bottom-color: var(--nl3d-viewer-line) !important;
}

[data-bs-theme="dark"] #nl3d-shell-root :where(.nl3d-cam-row,.nl3d-vis-row--toolbar,.nl3d-vt,.nl3d-bg-picker,.nl3d-toolbar-group),
[data-theme="dark"] #nl3d-shell-root :where(.nl3d-cam-row,.nl3d-vis-row--toolbar,.nl3d-vt,.nl3d-bg-picker,.nl3d-toolbar-group),
.dark #nl3d-shell-root :where(.nl3d-cam-row,.nl3d-vis-row--toolbar,.nl3d-vt,.nl3d-bg-picker,.nl3d-toolbar-group) {
    background: rgba(34,50,75,.92) !important;
    border-color: var(--nl3d-viewer-line) !important;
}

[data-bs-theme="dark"] #nl3d-shell-root :where(.nl3d-vt__btn,.nl3d-tb-btn,.nl3d-cam,.nl3d-vis-btn,.nl3d-feat-chip,.nl3d-panel-edit-toggle,.nl3d-cfg-btn,.nl3d-wtab),
[data-theme="dark"] #nl3d-shell-root :where(.nl3d-vt__btn,.nl3d-tb-btn,.nl3d-cam,.nl3d-vis-btn,.nl3d-feat-chip,.nl3d-panel-edit-toggle,.nl3d-cfg-btn,.nl3d-wtab),
.dark #nl3d-shell-root :where(.nl3d-vt__btn,.nl3d-tb-btn,.nl3d-cam,.nl3d-vis-btn,.nl3d-feat-chip,.nl3d-panel-edit-toggle,.nl3d-cfg-btn,.nl3d-wtab) {
    background: linear-gradient(180deg,#263955,#1d2b42) !important;
    color: #dbeafe !important;
    border-color: #4b668a !important;
}

[data-bs-theme="dark"] #nl3d-shell-root :where(.nl3d-vt__btn--active,.nl3d-tb-btn--active,.nl3d-cam.active,.nl3d-cam--active,.nl3d-wtab--active,.nl3d-feat-chip--active),
[data-theme="dark"] #nl3d-shell-root :where(.nl3d-vt__btn--active,.nl3d-tb-btn--active,.nl3d-cam.active,.nl3d-cam--active,.nl3d-wtab--active,.nl3d-feat-chip--active),
.dark #nl3d-shell-root :where(.nl3d-vt__btn--active,.nl3d-tb-btn--active,.nl3d-cam.active,.nl3d-cam--active,.nl3d-wtab--active,.nl3d-feat-chip--active) {
    background: linear-gradient(135deg,#315fd6,#274bb0) !important;
    border-color: #5b82ff !important;
    color: #f8fbff !important;
}

[data-bs-theme="dark"] #nl3d-shell-root .nl3d-bg-picker select,
[data-theme="dark"] #nl3d-shell-root .nl3d-bg-picker select,
.dark #nl3d-shell-root .nl3d-bg-picker select,
[data-bs-theme="dark"] #nl3d-shell-root select,
[data-theme="dark"] #nl3d-shell-root select,
.dark #nl3d-shell-root select,
[data-bs-theme="dark"] #nl3d-shell-root input,
[data-theme="dark"] #nl3d-shell-root input,
.dark #nl3d-shell-root input {
    background-color: #1b293e !important;
    color: #e8eef7 !important;
    border-color: #40536d !important;
}

[data-bs-theme="dark"] #nl3d-shell-root .nl3d-strip,
[data-theme="dark"] #nl3d-shell-root .nl3d-strip,
.dark #nl3d-shell-root .nl3d-strip,
[data-bs-theme="dark"] #nl3d-shell-root .nl3d-strip__col,
[data-theme="dark"] #nl3d-shell-root .nl3d-strip__col,
.dark #nl3d-shell-root .nl3d-strip__col,
[data-bs-theme="dark"] #nl3d-shell-root .nl3d-feat-editor,
[data-theme="dark"] #nl3d-shell-root .nl3d-feat-editor,
.dark #nl3d-shell-root .nl3d-feat-editor {
    background: linear-gradient(180deg,#1a263a,#152033) !important;
    border-color: #40536d !important;
}


/* =======================================================================
   FINAL FEATURE MODAL CLEANUP — wider, cleaner add door/window/light boxes
   ======================================================================= */
#nl3d-shell-root .nl3d-feat-editor.nl3d-feat-editor--active,
#nl3d-shell-root #nl3d-feat-editor:not([hidden]),
.nl3d-feat-editor.nl3d-feat-editor--active,
#nl3d-feat-editor:not([hidden]) {
    width: min(760px, calc(100vw - 48px)) !important;
    max-height: min(78vh, 680px) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #0d1b2e 0%, #0a1626 100%) !important;
    border: 1px solid rgba(86, 143, 204, .42) !important;
    box-shadow: 0 30px 80px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.04) inset !important;
}

.nl3d-feat-editor__head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 18px 22px 14px !important;
    background: linear-gradient(180deg, rgba(18,36,60,.98), rgba(12,25,43,.98)) !important;
    border-bottom: 1px solid rgba(110, 155, 205, .32) !important;
}

    .nl3d-feat-editor__headcopy,
    .nl3d-feat-editor__head > div:first-child {
        min-width: 0 !important;
    }

.nl3d-feat-editor__title {
    margin: 0 0 6px !important;
    color: #f4b423 !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.nl3d-feat-editor__sub,
.nl3d-feat-editor__subtitle,
.nl3d-feat-editor small {
    color: #93b8df !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.nl3d-feat-editor__close {
    flex: 0 0 auto !important;
    height: 36px !important;
    min-width: 72px !important;
    border-radius: 10px !important;
    background: rgba(190, 48, 64, .12) !important;
    border: 1px solid rgba(248, 113, 113, .42) !important;
    color: #fb7185 !important;
    font-size: 10px !important;
    font-weight: 850 !important;
}

.nl3d-feat-editor__fields,
.nl3d-ff {
    grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    gap: 18px 24px !important;
    padding: 22px 24px !important;
    max-height: calc(min(78vh, 680px) - 160px) !important;
    overflow: auto !important;
}

    .nl3d-ff-field,
    .nl3d-feat-editor__fields > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    .nl3d-ff-lbl,
    .nl3d-feat-editor__fields label {
        color: #9fb4ce !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        letter-spacing: .07em !important;
        text-transform: uppercase !important;
    }

.nl3d-feat-editor input[type="number"],
.nl3d-feat-editor input[type="text"],
.nl3d-feat-editor select,
.nl3d-feat-editor textarea {
    width: 100% !important;
    height: 42px !important;
    border-radius: 11px !important;
    padding: 0 12px !important;
    background-color: #091625 !important;
    border: 1px solid rgba(100, 160, 220, .58) !important;
    color: #f1f7ff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.03) inset !important;
}

    .nl3d-feat-editor input[type="number"]:focus,
    .nl3d-feat-editor input[type="text"]:focus,
    .nl3d-feat-editor select:focus,
    .nl3d-feat-editor textarea:focus {
        border-color: #2ea7ff !important;
        box-shadow: 0 0 0 3px rgba(46,167,255,.18), 0 1px 0 rgba(255,255,255,.05) inset !important;
    }

.nl3d-feat-editor__actions {
    padding: 16px 24px 18px !important;
    background: linear-gradient(180deg, rgba(10,22,38,.92), rgba(8,18,32,.98)) !important;
    border-top: 1px solid rgba(110, 155, 205, .30) !important;
}

.nl3d-feat-editor .nl3d-feat-apply,
#nl3d-shell-root .nl3d-feat-editor .nl3d-feat-apply {
    min-width: 190px !important;
    height: 44px !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #ffd057, #d89500) !important;
    border: 1px solid rgba(255, 221, 107, .72) !important;
    color: #160a00 !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: .04em !important;
    box-shadow: 0 14px 30px rgba(216,149,0,.26) !important;
}

    .nl3d-feat-editor .nl3d-feat-apply:hover {
        transform: translateY(-1px) !important;
        filter: brightness(1.04) !important;
    }

@media (max-width: 680px) {
    .nl3d-feat-editor__fields,
    .nl3d-ff {
        grid-template-columns: 1fr !important;
    }

    #nl3d-shell-root .nl3d-feat-editor.nl3d-feat-editor--active,
    #nl3d-shell-root #nl3d-feat-editor:not([hidden]),
    .nl3d-feat-editor.nl3d-feat-editor--active,
    #nl3d-feat-editor:not([hidden]) {
        width: calc(100vw - 24px) !important;
    }
}

/* ==========================================================================
   FINAL PATCH — Feature editor true light/dark mode cleanup
   ========================================================================== */
html:not([data-bs-theme="dark"]):not([data-theme="dark"]) body:not(.dark) #nl3d-shell-root .nl3d-feat-editor.nl3d-feat-editor--active,
html:not([data-bs-theme="dark"]):not([data-theme="dark"]) body:not(.dark) #nl3d-shell-root #nl3d-feat-editor.nl3d-feat-editor--active {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, .16) !important;
    box-shadow: 0 28px 70px rgba(15, 23, 42, .22) !important;
}

html:not([data-bs-theme="dark"]):not([data-theme="dark"]) body:not(.dark) #nl3d-feat-editor .nl3d-feat-editor__head {
    background: #f8fbff !important;
    border-color: #d7e4f5 !important;
}

html:not([data-bs-theme="dark"]):not([data-theme="dark"]) body:not(.dark) #nl3d-feat-editor :is(label,.nl3d-ff-lbl) {
    color: #375371 !important;
}

html:not([data-bs-theme="dark"]):not([data-theme="dark"]) body:not(.dark) #nl3d-feat-editor :is(input,select,textarea) {
    background: #ffffff !important;
    color: #0f223a !important;
    border-color: #a9c3df !important;
}

    html:not([data-bs-theme="dark"]):not([data-theme="dark"]) body:not(.dark) #nl3d-feat-editor :is(input,select,textarea):focus {
        border-color: #d08a00 !important;
        box-shadow: 0 0 0 3px rgba(208, 138, 0, .18) !important;
    }

[data-bs-theme="dark"] #nl3d-shell-root .nl3d-feat-editor.nl3d-feat-editor--active,
[data-theme="dark"] #nl3d-shell-root .nl3d-feat-editor.nl3d-feat-editor--active,
.dark #nl3d-shell-root .nl3d-feat-editor.nl3d-feat-editor--active {
    background: #0d1b2e !important;
    color: #e8f0ff !important;
    border-color: rgba(247, 183, 49, .32) !important;
    box-shadow: 0 32px 80px rgba(0,0,0,.70) !important;
}


/* === Realistic 3D editor panel/layout controls patch === */
.nl3d-panel-width-list__note {
    color: rgba(220,238,255,.72);
    font-size: 10px;
    font-weight: 700;
    padding: 6px 8px 2px;
}

.nl3d-panel-size-btn,
.nl3d-panel-width-cell button {
    border: 1px solid rgba(247,202,82,.34);
    background: rgba(247,202,82,.10);
    color: #f7ca52;
    border-radius: 7px;
    height: 24px;
    padding: 0 8px;
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
}

    .nl3d-panel-size-btn:hover,
    .nl3d-panel-width-cell button:hover {
        background: rgba(247,202,82,.20);
        border-color: rgba(247,202,82,.55);
    }

.nl3d-light-picker input[type=range] {
    width: 92px;
}