:root {
    --bg: #03111f;
    --bg2: #041827;
    --panel: #06192b;
    --panel-open: #082237;
    --input: #031426;

    --border: #14506b;
    --border2: #23647b;

    --cyan: #22d8ec;
    --white: #ffffff;
    --muted: #aabcc8;
    --success: #71dfa4;
    --danger: #ff8b8b;
    --warning: #ffd66b;
    --text: #ffffff;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg);
    color: var(--white);
    font-family: Arial, Helvetica, sans-serif;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

.site-header{min-height:94px;padding:9px 4.5%;display:flex;align-items:center;justify-content:space-between;gap:20px;background:rgba(1,11,24,.96);border-bottom:1px solid rgba(255,255,255,.08)}
.site-logo{display:block;flex:0 0 auto}.site-logo img{display:block;width:auto;height:76px}.main-nav{display:flex;align-items:center;gap:clamp(18px,2.3vw,38px);margin:0 auto}.main-nav a{position:relative;padding:12px 0;color:#eaf4fb;font-size:.98rem;font-weight:700;text-decoration:none;transition:color .25s ease}.main-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:2px;background:#13d8ef;transition:right .25s ease}.main-nav a:hover,.main-nav a:focus-visible{color:var(--cyan)}.main-nav a:hover::after,.main-nav a:focus-visible::after{right:0}.site-header-controls{display:flex;align-items:center;gap:10px;flex:0 0 auto}.header-fb-btn img{display:block;width:34px;height:34px;object-fit:contain}.ce-language-switch{display:flex;gap:6px}.ce-language-switch a{display:grid;place-items:center;width:36px;height:30px;border:1px solid transparent;border-radius:6px}.ce-language-switch img{display:block;max-width:26px;max-height:19px}.ce-language-switch a.active{border-color:var(--cyan)}
#calculatorThemeBtn{min-height:36px;padding:7px 11px;border:1px solid var(--border2);border-radius:9px;background:var(--input);color:var(--text);font-weight:800}.mobile-menu-btn{display:none;padding:7px;border:0;background:transparent}.mobile-menu-btn span{display:block;width:26px;height:2px;margin:5px 0;background:#fff}

.ce-help {
    display: block;
    margin-top: 7px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.ce-app {
    width: min(1180px, calc(100% - 24px));
    margin: 28px auto;
}

.ce-shell {
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg2);
}

.ce-header {
    padding: 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg2);
}

.ce-eyebrow {
    color: var(--cyan);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ce-header h1 {
    margin: 5px 0 7px;
    color: var(--text);
    font-size: clamp(25px, 4vw, 38px);
}

.ce-header p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.ce-privacy {
    margin-top: 14px;
    padding: 12px 14px;
    border-left: 3px solid var(--cyan);
    border-radius: 8px;
    background: rgba(34,216,236,.05);
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.ce-progress {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg2);
}

.ce-progress-item {
    flex: 0 0 auto;
    appearance: none;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--bg2);
    color: #ff5c67;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.ce-progress-item:disabled {
    cursor: not-allowed;
    opacity: 1;
}

.ce-progress-item:not(:disabled):hover {
    border-color: var(--border2);
}

.ce-progress-item.active {
    color: var(--cyan);
    border-color: var(--cyan);
    background: var(--bg2);
    scrollbar-width: none;
}

.ce-progress::-webkit-scrollbar {
    display: none;
}

.ce-progress-item.done {
    color: var(--success);
}

body.light-mode{--bg:#eef7fb;--bg2:#f8fcfe;--panel:#fff;--panel-open:#edf7fb;--input:#f5f9fc;--border:#c4dfe9;--border2:#73b6c8;--cyan:#007f98;--white:#102235;--text:#102235;--muted:#52697d;--success:#158452;background:radial-gradient(circle at 85% 5%,rgba(19,216,239,.12),transparent 30%),#eef7fb;color:var(--text)}
body.light-mode .ce-shell,body.light-mode .ce-site-bar{box-shadow:0 12px 34px rgba(26,66,94,.09)}body.light-mode .ce-header{background:#f7fbfe}
body.light-mode .ce-header h1,body.light-mode .ce-title,body.light-mode .ce-subtitle,body.light-mode .ce-check,body.light-mode .ce-load-room-picker>strong,body.light-mode .ce-table td,body.light-mode .ce-metric strong,body.light-mode .ce-btn-secondary{color:var(--text)}
body.light-mode .ce-card{background:rgba(255,255,255,.78)}body.light-mode input,body.light-mode select,body.light-mode textarea{color:var(--text);background:var(--input)}
body.light-mode .ce-progress-item{background:var(--bg2);color:#c62835}body.light-mode .ce-progress-item.active{color:var(--cyan);border-color:var(--cyan)}body.light-mode .ce-progress-item.done{color:var(--success)}
body.light-mode .ce-privacy strong{color:var(--text)!important}
body.light-mode .site-header{background:#f8fbfe;border-bottom-color:rgba(2,45,76,.13);box-shadow:0 5px 22px rgba(6,35,59,.09)}body.light-mode .main-nav a{color:#102235}body.light-mode .mobile-menu-btn span{background:#102235}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:var(--text)!important;caret-color:var(--text)!important;box-shadow:0 0 0 1000px var(--input) inset!important;transition:background-color 9999s ease-out 0s}

.ce-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
    gap: 16px;
    padding: 16px;
}

.ce-card {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: rgba(255,255,255,.025);
}

.ce-sidebar {
    position: sticky;
    top: 10px;
    align-self: start;
}

.ce-page {
    display: none;
}

.ce-page.active {
    display: block;
}

.ce-title {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 25px;
}

.ce-description {
    margin: 0 0 16px;
    color: var(--muted);
    line-height: 1.5;
}

.ce-room-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ce-room-card {
    min-height: 108px;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--panel-open);
}

.ce-room-card.selected {
    border-color: var(--cyan);
}

.ce-room-name {
    margin-bottom: 14px;
    color: var(--text);
    font-size: 17px;
    font-weight: 800;
}

.ce-counter {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    gap: 8px;
    align-items: center;
}

.ce-counter button {
    height: 44px;
    border: 1px solid var(--border2);
    border-radius: 9px;
    background: var(--input);
    color: var(--text);
    font-size: 22px;
    font-weight: 900;
}

.ce-counter button:hover {
    border-color: var(--cyan);
}

.ce-count {
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: rgba(34,216,236,.07);
    color: var(--text);
    font-size: 18px;
    font-weight: 900;
}

/* ACCORDION */

.ce-accordion {
    margin-bottom: 9px;
    border: 1px solid var(--border);
    border-radius: 11px;
    overflow: hidden;
    background: var(--panel);
}

.ce-accordion.open {
    border-color: var(--cyan);
}

.ce-accordion-head {
    width: 100%;
    min-height: 66px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 0;
    background: var(--panel);
    color: var(--text);
    text-align: left;
}

.ce-accordion.open .ce-accordion-head {
    background: var(--panel-open);
}

.ce-acc-name {
    display: block;
    color: var(--cyan);
    font-weight: 850;
}

.ce-acc-summary {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
}

.ce-status {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    text-align: right;
}

.ce-status.done {
    color: var(--success);
}

.ce-accordion-body {
    display: none;
    padding: 0 14px 14px;
}

.ce-accordion.open .ce-accordion-body {
    display: block;
}

/* FORM */

.ce-grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
}

.ce-grid3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
}

.ce-grid4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 8px;
}

.ce-field {
    display: block;
}

.ce-field label,
.ce-label {
    display: block;
    margin-bottom: 6px;
    color: var(--text);
    font-size: 13px;
    font-weight: 750;
}

.ce-field input,
.ce-field select,
.ce-field textarea {
    width: 100%;
    min-height: 45px;
    padding: 9px 10px;
    border: 1px solid var(--border2);
    border-radius: 8px;
    background: var(--input);
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--text);
    font-size: 15px;
}

.ce-field textarea {
    min-height: 90px;
    resize: vertical;
}

.ce-field input:focus,
.ce-field select:focus,
.ce-field textarea:focus {
    outline: none;
    border-color: var(--cyan);
}

.ce-field option {
    background: var(--input);
    color: var(--text);
}

.ce-field input::placeholder,
.ce-field textarea::placeholder {
    color: #7f98a9;
}

/* Step 3: keep the three lighting controls on one clean baseline even when a label wraps. */
.ce-lighting-grid .ce-field label {
    display: flex;
    align-items: flex-end;
    min-height: 36px;
    margin-bottom: 8px;
}

.ce-lighting-grid .ce-field input,
.ce-lighting-grid .ce-field select {
    height: 56px;
    min-height: 56px;
}

.ce-note {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--cyan);
    border-radius: 7px;
    background: rgba(34,216,236,.05);
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.ce-note strong {
    color: var(--text);
}

.ce-cable-help {
    margin-top: 8px;
    border: 2px solid rgba(224, 45, 55, .72);
    border-radius: 8px;
    background: rgba(224, 45, 55, .08);
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.ce-cable-help summary {
    padding: 9px 10px;
    color: #f0444f;
    font-weight: 800;
    cursor: pointer;
}

.ce-cable-help summary::marker {
    color: #f0444f;
}

.ce-cable-help[open] summary {
    border-bottom: 1px solid rgba(224, 45, 55, .5);
    background: rgba(224, 45, 55, .12);
}

.ce-cable-help dl {
    margin: 0;
    padding: 10px;
}

.ce-cable-help dt {
    margin-top: 8px;
    color: var(--text);
    font-weight: 800;
}

.ce-cable-help dt:first-child {
    margin-top: 0;
}

.ce-cable-help dd {
    margin: 2px 0 0;
}

.ce-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
}

.ce-check {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--input);
    color: var(--text);
    font-size: 13px;
}

.ce-check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--cyan);
}

.ce-actions-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 13px;
}

.ce-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.ce-nav #newQuoteBtn {
    margin-left: auto;
}

.ce-captcha-actions {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-top: 14px;
}

.ce-captcha-actions #newQuoteBtn {
    margin-left: auto;
}

@media (max-width: 640px) {
    .ce-captcha-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ce-captcha-actions #newQuoteBtn {
        align-self: flex-end;
        margin-left: 0;
    }
}

.ce-btn {
    min-height: 44px;
    padding: 9px 15px;
    border-radius: 8px;
    font-weight: 850;
}

.ce-btn-primary {
    border: 0;
    background: var(--cyan);
    color: #00151d;
}

.ce-btn-primary:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.ce-btn-secondary {
    border: 1px solid var(--border2);
    background: transparent;
    color: var(--text);
}

.ce-btn-danger {
    border: 1px solid rgba(255,139,139,.4);
    background: transparent;
    color: #ffd0d0;
}

/* CONTACT WALLS */

.ce-wall {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--input);
}

.ce-wall-title {
    margin-bottom: 8px;
    color: var(--cyan);
    font-weight: 850;
}

.ce-position-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 7px;
}

/* LOADS */

.ce-load-room-picker {
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--border2);
    border-radius: 9px;
    background: rgba(18, 205, 226, .07);
}
.ce-low-voltage-box{margin-top:12px;padding:12px;border:1px solid var(--border2);border-radius:9px;background:rgba(34,216,236,.055)}.ce-low-voltage-box h4{margin:0 0 5px;color:var(--cyan)}.ce-low-voltage-box p{margin:0 0 10px;color:var(--muted);font-size:13px}

.ce-load-room-picker > strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text);
}

.ce-load-room-picker > p {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 13px;
}

.ce-no-loads-check {
    margin-top: 10px;
}

.ce-note-required {
    border-color: rgba(224, 45, 55, .55);
    color: #ffd5d5;
}

.ce-load-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) 90px 100px;
    gap: 8px;
    align-items: end;
    margin-bottom: 8px;
    padding: 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--input);
}

.ce-custom-load-row {
    grid-template-columns: minmax(150px,1fr) 70px 110px 105px auto;
}

/* REVIEW */

.ce-review {
    display: grid;
    gap: 9px;
}

.ce-review-box {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--input);
}

.ce-review-box h4 {
    margin: 0 0 8px;
    color: var(--cyan);
}

.ce-review-box p {
    margin: 4px 0;
    color: var(--muted);
    line-height: 1.45;
}

.ce-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ce-table th,
.ce-table td {
    padding: 8px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    color: var(--text);
}

.ce-table th {
    color: var(--cyan);
}

.ce-metric {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.ce-metric span {
    color: var(--muted);
}

.ce-metric strong {
    color: var(--text);
    text-align: right;
}

.ce-success {
    padding: 16px;
    border: 1px solid rgba(113,223,164,.45);
    border-radius: 10px;
    background: rgba(113,223,164,.07);
    color: #dff9e9;
    line-height: 1.5;
}

.ce-success .ce-btn {
    display: block;
    margin: 16px auto 0;
}

.ce-hidden {
    display: none !important;
}

@media (max-width: 850px) {
    .site-header{flex-wrap:wrap;padding:10px 4%;gap:10px}.site-logo img{height:58px}.site-header-controls{order:2;margin-left:auto}.mobile-menu-btn{display:block;order:3;margin-left:0}.main-nav{display:none;order:4;width:100%;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 0}.main-nav.active{display:flex}.main-nav a{width:100%;padding:9px 4px}
    .ce-layout {
        grid-template-columns: 1fr;
    }

    .ce-sidebar {
        position: static;
    }

    .ce-grid4 {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 650px) {
    .site-header-controls{gap:6px}#calculatorThemeBtn{padding:6px 8px;font-size:.75rem}.header-fb-btn img{width:30px;height:30px}.ce-language-switch a{width:30px}.ce-language-switch img{max-width:23px}
    .ce-room-grid,
    .ce-grid2,
    .ce-grid3,
    .ce-grid4,
    .ce-check-grid,
    .ce-position-grid {
        grid-template-columns: 1fr;
    }

    .ce-load-row {
        grid-template-columns: 1fr;
    }

    .ce-lighting-grid .ce-field label {
        min-height: 0;
    }

    .ce-app {
        width: calc(100% - 14px);
        margin: 10px auto;
    }

    .ce-layout {
        padding: 10px;
    }
}

.ce-board-list{display:grid;gap:16px;margin:16px 0 22px}.ce-board-card h3{margin:0 0 12px;color:var(--cyan)}.ce-board-room-grid{display:grid;gap:8px;margin-top:12px}.ce-board-room-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(120px,.45fr) minmax(220px,1fr);gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}.ce-board-room-row label{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center}.ce-board-room-row input,.ce-board-room-row select{min-width:0}@media(max-width:760px){.ce-board-room-row{grid-template-columns:1fr}.ce-board-room-row label{grid-template-columns:1fr}}