:root {
        --black: #111;
        --dark: #1a1a1f;
        --white: #fff;
        --off-white: #f7f7f5;
        --cream: #efeee8;
        --accent: #b8e600;
        --accent-dark: #8fb800;
        --accent-bright: #d4ff2a;
        --charcoal: #2d2d33;
        --text-dark: #1a1a1f;
        --text-mid: #555;
        --text-light: #888;
        --border: rgba(0, 0, 0, 0.08);
        --danger: #e53935;
        --success: #43a047;
      }
      * { margin: 0; padding: 0; box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        font-family: "Outfit", sans-serif;
        background: var(--off-white);
        color: var(--text-dark);
        -webkit-font-smoothing: antialiased;
        min-height: 100vh;
      }
      ::-webkit-scrollbar { width: 5px; }
      ::-webkit-scrollbar-track { background: var(--off-white); }
      ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }

      /* NAV */
      .top-bar {
        background: var(--dark);
        padding: 14px 0;
        position: sticky;
        top: 0;
        z-index: 100;
        border-bottom: 2px solid var(--accent);
      }
      .top-bar .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .top-bar img { height: 28px; filter: brightness(0) invert(1); }
      .top-bar a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 0.82rem; font-weight: 500; transition: color 0.3s; }
      .top-bar a:hover { color: var(--accent); }
      .top-bar .back-link { display: inline-flex; align-items: center; gap: 6px; }
      .top-bar .back-link svg { width: 16px; height: 16px; }

      .container { max-width: 680px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }

      /* PAGE HEADER */
      .page-header {
        text-align: center;
        padding: 48px 0 32px;
      }
      .page-header .tag {
        display: inline-block;
        font-family: "Space Mono", monospace;
        font-size: 0.68rem;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--accent-dark);
        border: 1.5px solid var(--accent);
        padding: 6px 18px;
        border-radius: 100px;
        background: rgba(184, 230, 0, 0.08);
        margin-bottom: 16px;
      }
      .page-header h1 {
        font-size: clamp(1.8rem, 4vw, 2.6rem);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.02em;
      }
      .page-header h1 .accent { color: var(--accent-dark); }
      .page-header p { color: var(--text-mid); font-size: 0.95rem; margin-top: 10px; max-width: 480px; margin-left: auto; margin-right: auto; line-height: 1.5; }

      /* CONFIGURATOR STYLES */
      .configurator {
        max-width: 680px;
        margin: 0 auto 60px;
      }

      /* Error message */
      .configurator .config-message {
        display: none;
        padding: 14px 18px;
        margin-bottom: 16px;
        border-radius: 12px;
        font-size: 0.88rem;
        font-weight: 500;
      }
      .configurator .config-message.red {
        background: rgba(229, 57, 53, 0.08);
        border: 1.5px solid rgba(229, 57, 53, 0.2);
        color: var(--danger);
      }
      .configurator .config-message.green {
        background: rgba(67, 160, 71, 0.08);
        border: 1.5px solid rgba(67, 160, 71, 0.2);
        color: var(--success);
      }

      /* Blocks */
      .configurator .block {
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: clamp(18px, 3vw, 28px);
        margin-bottom: 12px;
        transition: border-color 0.3s;
      }
      .configurator .block:hover {
        border-color: rgba(184, 230, 0, 0.3);
      }
      .configurator .block .name {
        font-weight: 700;
        font-size: 0.95rem;
        margin-bottom: 4px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
      }

      /* Inner blocks */
      .configurator .block .inner-block {
        background: var(--off-white);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 18px;
        margin: 12px 0;
      }
      .configurator .block .inner-block .item-name {
        font-size: 1.05rem;
        font-weight: 700;
        margin-bottom: 10px;
        color: var(--text-dark);
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
      }

      /* Measurements grid */
      .configurator .block .measurements {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        font-size: 0.9rem;
      }
      .configurator .block .measurements div { display: block; }
      .configurator .block .measurements label {
        display: block;
        margin: 0 0 6px 0;
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--text-mid);
        font-family: "Space Mono", monospace;
        letter-spacing: 0.03em;
      }
      .configurator .block .measurements .input-container {
        display: block;
        position: relative;
        background: var(--white);
        border: 1.5px solid var(--border);
        border-radius: 10px;
        padding: 12px 14px;
        transition: border-color 0.3s;
      }
      .configurator .block .measurements .input-container:focus-within {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(184, 230, 0, 0.1);
      }
      .configurator .block .measurements .input-container input {
        background: transparent;
        border: 0;
        width: calc(100% - 40px);
        outline: 0;
        margin: 0;
        padding: 0;
        font-size: 1.15rem;
        font-weight: 700;
        font-family: "Outfit", sans-serif;
        color: var(--text-dark);
      }
      .configurator .block .measurements .input-container span {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        font-family: "Space Mono", monospace;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--text-light);
        letter-spacing: 0.05em;
        pointer-events: none;
      }
      .configurator .block.full .measurements {
        grid-template-columns: 1fr;
      }

      /* Choose buttons */
      .configurator .block .choose {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 10px 0 0 0;
      }
      .configurator .block .choose div {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--white);
        font-size: 0.82rem;
        font-weight: 500;
        padding: 9px 18px;
        border: 1.5px solid var(--border);
        border-radius: 100px;
        cursor: pointer;
        transition: all 0.25s;
        user-select: none;
      }
      .configurator .block .choose div:hover {
        border-color: var(--accent);
        background: rgba(184, 230, 0, 0.04);
      }
      .configurator .block .choose div.active {
        background: var(--dark);
        color: var(--accent);
        border-color: var(--dark);
        font-weight: 700;
      }
      .configurator .block .choose.number div {
        width: 46px;
        height: 46px;
        padding: 0;
        font-size: 1.05rem;
        font-weight: 700;
        border-radius: 12px;
      }

      /* Add-ons header */
      .addons-header {
        font-family: "Space Mono", monospace;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--accent-dark);
        margin: 28px 0 12px;
        padding-bottom: 10px;
        border-bottom: 1.5px solid rgba(184, 230, 0, 0.2);
      }

      /* Base extension total */
      .base-extension-total {
        background: linear-gradient(135deg, rgba(184,230,0,0.06) 0%, rgba(184,230,0,0.02) 100%);
        border: 1.5px solid rgba(184, 230, 0, 0.2);
        border-radius: 14px;
        padding: 20px;
        margin-top: 16px;
      }
      .base-extension-total strong { font-size: 0.92rem; }
      .base-extension-total span {
        font-size: 1.8rem;
        font-weight: 800;
        color: var(--accent-dark);
        line-height: 1.2;
      }
      .base-extension-total .base-vat { font-size: 0.88rem !important; color: var(--text-mid) !important; font-weight: 400 !important; }

      .superstrux-config-information {
        background: var(--off-white);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 18px;
        margin-top: 14px;
      }
      .superstrux-config-information img {
        width: 180px;
        border-radius: 10px;
        margin: 10px 0;
      }
      .tick-list { list-style: none; padding: 0; margin: 6px 0; }
      .tick-list strong { font-size: 0.85rem; }
      .tick-list li {
        position: relative;
        padding-left: 1.6em;
        margin-bottom: 0.4em;
        font-size: 0.85rem;
        color: var(--text-mid);
      }
      .tick-list li::before {
        content: "✓";
        color: var(--accent-dark);
        font-weight: 700;
        position: absolute;
        left: 0;
      }

      /* Installation message */
      .installation-message {
        color: var(--accent-dark) !important;
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        padding: 10px 14px;
        background: rgba(184, 230, 0, 0.06);
        border-radius: 8px;
        margin-top: 10px;
      }
      .insulation-description {
        font-size: 0.82rem;
        color: var(--text-light);
        margin: 4px 0 8px;
      }

      /* Item price tags */
      .item-price {
        display: inline-flex;
        align-items: center;
        background: rgba(184, 230, 0, 0.1);
        color: var(--accent-dark);
        font-weight: 700;
        font-size: 0.78rem;
        padding: 3px 10px;
        border-radius: 100px;
        margin-left: 6px;
        font-family: "Space Mono", monospace;
        letter-spacing: 0.02em;
      }

      /* Item errors */
      .item-error {
        color: var(--danger);
        background: rgba(229, 57, 53, 0.06);
        border: 1px solid rgba(229, 57, 53, 0.15);
        padding: 8px 14px;
        margin-top: 10px;
        border-radius: 8px;
        font-size: 0.82rem;
        font-weight: 500;
      }

      /* Totals */
      .configurator .totals {
        border: 2px solid var(--accent);
        border-radius: 20px;
        padding: 28px;
        margin-top: 24px;
        text-align: right;
        background: linear-gradient(135deg, rgba(184,230,0,0.04) 0%, var(--white) 100%);
      }
      .configurator .totals > div:first-child {
        font-size: 0.92rem;
        font-weight: 600;
        color: var(--text-mid);
      }
      .configurator .totals span {
        font-size: clamp(2rem, 5vw, 2.8rem);
        font-weight: 900;
        color: var(--accent-dark);
        line-height: 1.2;
      }
      .configurator .totals .total-vat {
        font-size: 0.92rem !important;
        color: var(--text-mid) !important;
        font-weight: 500 !important;
      }

      /* Save button */
      .configurator button#save-custom-quote-button {
        display: block;
        width: 100%;
        padding: 18px 34px;
        margin-top: 16px;
        background: var(--accent);
        color: var(--black);
        font-family: "Outfit", sans-serif;
        font-size: 1.05rem;
        font-weight: 700;
        border: none;
        border-radius: 100px;
        cursor: pointer;
        transition: all 0.3s;
      }
      .configurator button#save-custom-quote-button:hover:not(:disabled) {
        background: var(--accent-bright);
        transform: translateY(-2px);
        box-shadow: 0 10px 40px rgba(184, 230, 0, 0.25);
      }
      .configurator button#save-custom-quote-button:disabled {
        background: var(--cream) !important;
        color: var(--text-light) !important;
        cursor: not-allowed !important;
        transform: none !important;
        box-shadow: none !important;
      }

      /* Calculating indicator */
      .calculating-indicator {
        position: fixed;
        top: 70px;
        right: 20px;
        background: var(--dark);
        color: var(--accent);
        padding: 10px 22px;
        border-radius: 100px;
        font-weight: 700;
        font-size: 0.82rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        z-index: 10000;
        display: none;
        font-family: "Space Mono", monospace;
        letter-spacing: 0.05em;
        border: 1.5px solid var(--accent);
      }

      /* Modal overlay */
      .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        padding: 20px;
      }
      .modal-content {
        background: var(--white);
        padding: 36px;
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
        max-width: 500px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
      }
      .modal-content h2 {
        font-size: 1.4rem;
        font-weight: 800;
        margin: 0 0 20px;
      }

      /* Form groups (modal) */
      .form-group { margin-bottom: 16px; }
      .form-group label {
        display: block;
        margin-bottom: 6px;
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--text-mid);
      }
      .form-group input, .form-group textarea {
        width: 100%;
        padding: 12px 14px;
        border: 1.5px solid var(--border);
        border-radius: 10px;
        font-size: 0.92rem;
        font-family: "Outfit", sans-serif;
        color: var(--text-dark);
        background: var(--off-white);
        transition: all 0.3s;
        outline: none;
      }
      .form-group input:focus, .form-group textarea:focus {
        border-color: var(--accent);
        background: var(--white);
        box-shadow: 0 0 0 3px rgba(184, 230, 0, 0.1);
      }
      .form-group textarea { resize: vertical; min-height: 70px; }

      .form-actions {
        display: flex;
        gap: 10px;
        margin-top: 24px;
      }
      .form-actions button {
        flex: 1;
        padding: 14px 24px;
        border: none;
        border-radius: 100px;
        font-size: 0.92rem;
        font-weight: 700;
        font-family: "Outfit", sans-serif;
        cursor: pointer;
        transition: all 0.3s;
      }
      .btn-cancel {
        background: var(--off-white);
        color: var(--text-mid);
        border: 1.5px solid var(--border) !important;
      }
      .btn-cancel:hover { background: var(--cream); }
      .btn-submit, .btn-do-login {
        background: var(--accent) !important;
        color: var(--black) !important;
      }
      .btn-submit:hover, .btn-do-login:hover {
        background: var(--accent-bright) !important;
      }
      .btn-save-logged-in {
        background: var(--accent) !important;
        color: var(--black) !important;
        border: none !important;
        padding: 14px 30px !important;
        border-radius: 100px !important;
        font-weight: 700 !important;
        font-family: "Outfit", sans-serif !important;
        cursor: pointer;
      }

      /* Success message */
      .success-message {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1001;
        padding: 20px;
      }
      .success-content {
        background: var(--white);
        padding: 48px 36px;
        border-radius: 20px;
        text-align: center;
        max-width: 480px;
        width: 100%;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
      }
      .success-content h2 {
        color: var(--accent-dark);
        font-size: 1.5rem;
        margin-bottom: 16px;
      }
      .success-content p { margin-bottom: 12px; color: var(--text-mid); font-size: 0.95rem; }
      .success-content strong { color: var(--text-dark); font-size: 1.2rem; }

      /* Gate screen styles */
      #calculator-gate { max-width: 480px; margin: 40px auto; }
      #gate-login-view, #gate-signup-view {
        background: var(--white);
        border-radius: 20px;
        border: 1px solid var(--border);
        padding: 36px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
      }
      #gate-login-view h2, #gate-signup-view h2 { font-size: 1.4rem; font-weight: 800; text-align: center; }
      #gate-login-view p, #gate-signup-view p { color: var(--text-mid); text-align: center; font-size: 0.92rem; }

      /* Session bar */
      #calculator-session-bar {
        background: rgba(184, 230, 0, 0.06) !important;
        border: 1.5px solid rgba(184, 230, 0, 0.2) !important;
        border-radius: 12px !important;
        padding: 12px 20px !important;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
      }

      /* Footer */
      .page-footer {
        text-align: center;
        padding: 36px 0;
        font-size: 0.75rem;
        color: var(--text-light);
        border-top: 1px solid var(--border);
      }
      .page-footer a { color: var(--accent-dark); text-decoration: none; }

      @media (max-width: 480px) {
        .configurator .block .measurements { grid-template-columns: 1fr; }
        .form-actions { flex-direction: column; }
      }
      @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Shell Selector — Flat-Pack vs Installed ── */
.shell-options{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
.shell-card{background:var(--white,#fff);border:2px solid var(--border,rgba(0,0,0,.08));border-radius:16px;overflow:hidden;cursor:pointer;transition:all .25s ease;position:relative}
.shell-card:hover{border-color:var(--accent,#b8e600);box-shadow:0 4px 20px rgba(184,230,0,.1)}
.shell-card.active{border-color:var(--accent,#b8e600);box-shadow:0 4px 24px rgba(184,230,0,.15)}
.shell-card.active::after{content:'✓';position:absolute;top:12px;right:12px;background:var(--accent,#b8e600);color:var(--dark,#1a1a1f);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;z-index:2}
.shell-card img{width:100%;height:160px;object-fit:cover;display:block}
.shell-card-body{padding:16px}
.shell-card-body h3{font-size:1.05rem;font-weight:700;margin:0 0 4px;color:var(--dark,#1a1a1f)}
.shell-card-body p{font-size:.82rem;color:var(--text-mid,#555);margin:0 0 12px;line-height:1.4}
.shell-price{background:var(--off-white,#f7f7f5);border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin-bottom:12px}
.shell-price .price-amount{display:block;font-size:1.5rem;font-weight:800;font-family:'Space Mono',monospace;color:var(--dark,#1a1a1f)}
.shell-price .price-vat{font-size:.78rem;color:var(--text-light,#888);font-family:'Space Mono',monospace}
.shell-card.active .shell-price{background:var(--accent,#b8e600);border-color:transparent}
.shell-card.active .shell-price .price-amount{color:var(--dark,#1a1a1f)}
.shell-card.active .shell-price .price-vat{color:rgba(26,26,31,.6)}
.tick-list.compact{padding-left:0;list-style:none;margin:0}
.tick-list.compact li{font-size:.78rem;color:var(--text-mid,#555);padding:2px 0 2px 18px;position:relative}
.tick-list.compact li::before{content:'✓';position:absolute;left:0;color:var(--accent-dark,#8fb300);font-weight:700;font-size:.75rem}
.shell-install-note{font-size:.75rem;color:var(--text-light,#888);margin-top:8px;font-style:italic}
@media(max-width:600px){.shell-options{grid-template-columns:1fr}.shell-card img{height:120px}}

/* ── Step Labels ── */
.step-label{display:inline-block;font-family:'Space Mono',monospace;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-dark,#8fb300);background:rgba(184,230,0,.1);border:1px solid rgba(184,230,0,.2);padding:4px 12px;border-radius:100px;margin-bottom:10px}
.step-optional{font-weight:400;color:var(--text-light,#888);text-transform:none;letter-spacing:0}

/* ── Guide Prices Header & Collapsible ── */
.guide-prices-header{margin:32px 0 0;padding:20px 22px;background:var(--white,#fff);border:2px solid var(--border);border-radius:16px;cursor:pointer;transition:border-color .3s}
.guide-prices-header:hover{border-color:var(--accent,#b8e600)}
.guide-prices-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.guide-prices-title > div:first-child{flex:1}
.guide-prices-title span{font-size:1.05rem;font-weight:700;color:var(--dark,#1a1a1f);letter-spacing:-.01em}
.guide-prices-desc{font-size:.78rem;color:var(--text-mid,#555);line-height:1.5;margin:6px 0 0}
.guide-toggle-btn{display:flex;align-items:center;gap:8px;background:var(--accent,#b8e600);color:var(--dark,#1a1a1f);padding:10px 18px;border-radius:100px;white-space:nowrap;flex-shrink:0;transition:all .2s}
.guide-prices-header:hover .guide-toggle-btn{background:var(--accent-dark,#8fb300)}
.guide-toggle-text{font-size:.82rem;font-weight:700;font-family:'Outfit',sans-serif}
.guide-chevron{transition:transform .3s ease}
.guide-prices-header.open .guide-chevron{transform:rotate(180deg)}
.guide-prices-header.open .guide-toggle-text{display:none}
.guide-prices-header.open .guide-toggle-btn{background:var(--off-white,#f7f7f5);padding:8px}

/* Tap hint — animated nudge */
.guide-tap-hint{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 14px;background:rgba(184,230,0,.06);border:1px dashed rgba(184,230,0,.3);border-radius:10px;animation:guideHintPulse 2s ease-in-out infinite}
.guide-tap-hint svg{color:var(--accent-dark,#8fb300);flex-shrink:0}
.guide-tap-hint span{font-size:.78rem;color:var(--text-mid,#555);font-weight:500}
.guide-prices-header.open .guide-tap-hint{display:none}
@keyframes guideHintPulse{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:.7;transform:translateY(-2px)}}

/* Guide section — spacing when open */
.guide-prices-section{overflow:hidden;transition:max-height .4s ease,opacity .3s ease;max-height:0;opacity:0;padding-top:0}
.guide-prices-section.open{max-height:8000px;opacity:1;padding-top:18px}

/* ── Guide blocks — compact, less prominent ── */
.guide-block{background:var(--white,#fff) !important;border:1px solid var(--border) !important;padding:14px 18px !important;border-radius:12px !important}
.guide-block .name{font-size:.88rem !important;color:var(--text-mid,#555) !important;font-weight:600 !important}
.guide-block .choose > div{font-size:.82rem !important;padding:8px 14px !important}
.guide-block .inner-block{padding:10px 12px !important}
.guide-block .item-name{font-size:.85rem !important}
.guide-block .measurements label{font-size:.78rem !important}
.guide-block .measurements input{font-size:.85rem !important;padding:8px 10px !important}
.guide-block .item-price{font-size:.78rem !important}

/* ── Add-on installation message ── */
.addon-install-message{margin-top:12px;padding:12px 16px;background:rgba(184,230,0,.08);border:1px solid rgba(184,230,0,.2);border-radius:10px;font-size:.82rem;color:var(--text-mid,#555);line-height:1.5;display:none}