*, *::before, *::after { box-sizing: border-box; }

        html, body {
            overflow-x: hidden;
            width: 100%;
            max-width: 100vw;
        }

        html {
            -webkit-text-size-adjust: 100%;
        }

        body {
            margin: 0;
            padding: 0;
            background-color: #01060e;
            background-image: none;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            min-height: 100dvh;
            overflow-y: auto;
            font-family: 'Inter', sans-serif;
            transition: background-image 0.5s ease-in-out, background-color 0.5s ease-in-out;
            background-attachment: fixed;
        }

        .scene {
            min-height: 100vh;
            min-height: 100dvh;
            height: 95vh;
            height: 95dvh;
            width: 100%;
            max-width: min(1200px, 100%);
            perspective: 2000px;
            -webkit-perspective: 2000px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 30px;
            padding: 0 12px;
            overflow-x: hidden;
            overflow-y: visible;
        }

        h1, h2, h3, h4,
        .report-title, .modal-title, .variants-title,
        .v-title, .q-title, .ai-plan-title, .lead-modal-title {
            max-width: 100%;
            overflow-wrap: break-word;
            word-wrap: break-word;
            hyphens: auto;
        }

        .card {
            height: 100%;
            width: 100%;
            max-width: 100%;
            position: relative;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 30px;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9);
            overflow: visible;
        }
        .card.flipped { transform: rotateY(180deg); }
        .card__face {
            height: 100%;
            width: 100%;
            border-radius: 30px;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            overflow: hidden;
        }
        .card__face--front { z-index: 2; display: flex; justify-content: center; align-items: center; overflow: hidden; }
        .card.flipped .card__face--front { z-index: 0; pointer-events: none; }
        .card__face--back { z-index: 1; }
        .card.flipped .card__face--back { z-index: 2; }
        .front-bg-wrap { position: absolute; inset: 0; overflow: hidden; border-radius: 30px; z-index: 0; pointer-events: none; }
        .bg-image { height: 100%; width: 100%; object-fit: cover; object-position: center; display: block; }
        
        .interactive-widget {
            position: absolute;
            top: 57%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: min(85%, calc(100% - 24px));
            max-width: 500px;
            z-index: 50;
            border-radius: 40px;
            overflow: hidden;
        }

        .search-bar-container {
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 100%;
            border: 5px solid #00e5ff;
            border-radius: 40px;
            box-shadow: 0 0 40px rgba(0, 242, 255, 0.7);
            position: relative;
            z-index: 101;
            overflow: hidden;
            isolation: isolate;
            padding: 0;
            background: transparent;
            clip-path: inset(0 round 40px);
        }

        .search-bar-container::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: rgba(2, 11, 24, 0.88);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            z-index: 0;
            pointer-events: none;
        }

        .search-bar-container::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            box-shadow: inset 0 0 12px rgba(0, 242, 255, 0.35);
            z-index: 2;
            pointer-events: none;
        }

        .search-bar-container input,
        .search-bar-container input:focus,
        .search-bar-container input:focus-visible,
        .search-bar-container input:active {
            position: relative;
            z-index: 1;
            display: block;
            width: 100%;
            margin: 0;
            padding: 25px 30px;
            color: #ffffff;
            font-size: 1.2rem;
            font-weight: 600;
            font-family: inherit;
            text-transform: uppercase;
            text-align: center;
            box-sizing: border-box;
            background: transparent;
            background-color: transparent;
            border: none;
            outline: none;
            box-shadow: none;
            border-radius: 0;
            -webkit-appearance: none;
            appearance: none;
            -webkit-tap-highlight-color: transparent;
        }

        .search-bar-container input::placeholder {
            color: rgba(0, 229, 255, 0.6);
            text-transform: none;
            font-weight: 400;
            opacity: 1;
        }

        .search-bar-container input:-webkit-autofill,
        .search-bar-container input:-webkit-autofill:hover,
        .search-bar-container input:-webkit-autofill:focus {
            -webkit-text-fill-color: #ffffff;
            caret-color: #ffffff;
            box-shadow: 0 0 0 1000px rgba(2, 11, 24, 0.88) inset;
            transition: background-color 9999s ease-out 0s;
        }
        
        .invisible-action-btn { position: absolute; top: 78%; left: 50%; transform: translate(-50%, -50%); width: 40%; height: 15%; background: transparent; border: none; cursor: pointer; z-index: 10; }
        
        .custom-dropdown { display: none; position: fixed; left: 0; top: 0; width: min(500px, 90vw); background-color: #020b18; border: 3px solid #00e5ff; border-radius: 0 0 20px 20px; padding-top: 8px; box-shadow: 0 20px 40px rgba(0,229,255,0.45); max-height: min(280px, 40dvh); overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 10000; }
        .custom-dropdown.is-open { display: block; }
        .custom-dropdown::-webkit-scrollbar { width: 6px; background: transparent; }
        .custom-dropdown::-webkit-scrollbar-thumb { background: rgba(0,229,255,0.35); border-radius: 6px; }
        .dropdown-item { color: #8892b0; padding: 15px 20px; border-top: 1px solid rgba(0,229,255,0.1); cursor: pointer; text-align: left; font-size: 0.9rem; transition: 0.2s; }
        .dropdown-item:hover, .dropdown-item.active { background-color: rgba(0,229,255,0.15); color: #ffffff; font-weight: bold; border-left: 4px solid #00e5ff; }
        .dropdown-item.is-message { cursor: default; font-size: 0.85rem; line-height: 1.4; }
        .dropdown-item.is-error { color: #fc8181; border-left: 4px solid #fc8181; }
        #addressStatus { display: none; position: fixed; left: 50%; transform: translateX(-50%); bottom: 12px; max-width: min(520px, 92vw); padding: 10px 14px; border-radius: 10px; background: rgba(2,11,24,0.92); border: 1px solid rgba(0,229,255,0.35); color: #a0aec0; font-size: 0.78rem; z-index: 10001; line-height: 1.4; pointer-events: none; }
        #addressStatus.is-visible { display: block; }
        #addressStatus.is-error { border-color: rgba(252,129,129,0.6); color: #feb2b2; }
        
        .card__face--back { background-color: #020b18; background-image: linear-gradient(rgba(2,11,24,0.7), rgba(2,11,24,0.7)), url('https://ik.imagekit.io/iwx5svscw/SolarIQ.ai/SolarIQ%20Background%201.png?updatedAt=1774819525895'); background-size: cover; background-position: center; transform: rotateY(180deg); padding: 40px 30px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; border: 5px solid #00e5ff; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; touch-action: pan-y; z-index: 1; }
        .card__face--back.back-shared-building { background-image: linear-gradient(rgba(2,11,24,0.7), rgba(2,11,24,0.7)), url('https://ik.imagekit.io/iwx5svscw/SolarIQ.ai/Manual%20Energy%20Profile.png'); }
        .card__face--back::-webkit-scrollbar { width: 0px; background: transparent; }
        .card__face--back::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(rgba(0, 229, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, 0.05) 1px, transparent 1px); background-size: 20px 20px; z-index: -1; opacity: 0.5; pointer-events: none; }
        
        .report-header { text-align: center; margin-bottom: 20px; width: 100%; max-width: 100%; z-index: 2;}
        .report-title { font-size: 1.8rem; font-weight: 800; color: white; margin-bottom: 5px; transition: color 0.3s;}
        
        .visual-section { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; gap: 16px; width: 100%; max-width: 450px; margin-bottom: 30px; z-index: 2; }
        .satellite-container {
            width: 140px;
            height: 140px;
            border-radius: 20px;
            overflow: hidden;
            border: 2px solid #00e5ff;
            box-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
            position: relative;
            background-color: #0a1128;
            flex-shrink: 0;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .satellite-container:hover {
            transform: scale(1.05);
            box-shadow: 0 0 30px rgba(0, 229, 255, 0.6);
        }
        .satellite-container img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

        #fullscreenSatModal {
            position: fixed;
            inset: 0;
            display: none;
            justify-content: center;
            align-items: center;
            background: rgba(0, 0, 0, 0.9);
            z-index: 99999;
            padding: 24px;
            box-sizing: border-box;
        }
        #fullscreenSatModal.active {
            display: flex;
        }
        #fullscreenSatModal img {
            width: 100%;
            height: 100%;
            max-width: 100vw;
            max-height: 100vh;
            object-fit: contain;
            border-radius: 12px;
            border: 2px solid #00e5ff;
            box-shadow: 0 20px 50px rgba(0, 229, 255, 0.35);
        }
        .fullscreen-sat-close {
            position: fixed;
            top: 20px;
            right: 20px;
            background: none;
            border: none;
            color: #ffffff;
            font-size: 2rem;
            cursor: pointer;
            z-index: 100000;
            line-height: 1;
            padding: 8px 12px;
            transition: color 0.2s ease, transform 0.2s ease;
        }
        .fullscreen-sat-close:hover {
            color: #00e5ff;
            transform: scale(1.1);
        }
        
        .solar-graphic-wrapper { position: relative; width: 130px; height: 130px; flex-shrink: 0; }
        .solar-graphic-container { width: 100%; height: 100%; transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1); }
        .solar-progress-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
        .solar-progress-bg { fill: none; stroke: rgba(255, 183, 0, 0.1); stroke-width: 7; }
        .solar-progress-bar { 
            fill: none; stroke: #ffb700; stroke-width: 7; stroke-linecap: round; 
            stroke-dasharray: 283; stroke-dashoffset: 283; 
            transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);
            filter: drop-shadow(0 0 8px rgba(255,183,0,0.6));
        }
        .solar-percentage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.2rem; font-weight: 800; color: #ffb700; text-shadow: 0 0 10px rgba(255, 183, 0, 0.5); z-index: 5; }
        
        .explanation-box { background: rgba(0, 229, 255, 0.08); border-left: 4px solid #00e5ff; padding: 20px; margin-bottom: 30px; border-radius: 0 12px 12px 0; width: 100%; max-width: 450px; box-sizing: border-box; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); z-index: 2; transition: all 0.3s; backdrop-filter: blur(5px); }
        .explanation-box p { margin: 0 0 15px 0; font-size: 1rem; color: #e2e8f0; line-height: 1.6; font-weight: 400; }
        .explanation-box p strong { color: #ffffff; font-weight: 800; }
        .highlight-text { color: #00e5ff; font-weight: 800; font-size: 1.15rem; text-shadow: 0 0 8px rgba(0, 229, 255, 0.5); }
        .highlight-gold { color: #ffb700; font-weight: 800; font-size: 1.15rem; text-shadow: 0 0 8px rgba(255, 183, 0, 0.5); }

        .variants-title { width: 100%; max-width: 450px; text-align: left; color: white; font-size: 1.1rem; font-weight: 800; margin-bottom: 15px; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 5px; z-index: 2;}
        .variants-container { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 450px; margin-bottom: 30px; z-index: 2;}
        .variant-card { display: flex; justify-content: space-between; align-items: center; background: rgba(2, 11, 24, 0.6); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 15px; transition: all 0.3s ease; cursor: pointer; }
        .variant-card:hover { transform: translateY(-3px); background: rgba(0, 229, 255, 0.15); border-color: #00e5ff; box-shadow: 0 5px 15px rgba(0, 229, 255, 0.2); }
        .variant-card.optimal { border-color: #ffb700; background: rgba(255, 183, 0, 0.15); box-shadow: inset 0 0 15px rgba(255, 183, 0, 0.1); }
        .v-info { display: flex; flex-direction: column; pointer-events: none; }
        .v-title { font-weight: 800; font-size: 1rem; color: white; text-transform: uppercase; margin-bottom: 3px;}
        .v-desc { font-size: 0.75rem; color: #8892b0; }
        .v-data { text-align: right; pointer-events: none; }
        .v-energy { font-weight: 800; color: #00e5ff; font-size: 1.1rem; }
        .variant-card.optimal .v-energy, .variant-card.optimal .v-title { color: #ffb700; }
        .v-panels { color: #ffffff; font-weight: 600; font-size: 0.85rem; margin-top: 3px; letter-spacing: 0.5px; }

        .action-buttons-container { display: flex; flex-direction: column; gap: 15px; width: 100%; max-width: 450px; margin-bottom: 20px; z-index: 2; }
        .primary-cta-btn { padding: 18px 30px; background: linear-gradient(135deg, #ffb700, #ff8c00); color: #01060e; border: none; border-radius: 12px; font-weight: 800; font-size: 1.1rem; cursor: pointer; text-transform: uppercase; box-shadow: 0 10px 25px rgba(255, 183, 0, 0.3); transition: all 0.3s ease; }
        .primary-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(255, 183, 0, 0.5); background: linear-gradient(135deg, #ffcf40, #ffa500); }
        .secondary-btn { padding: 12px 30px; background: rgba(2, 11, 24, 0.8); color: #8892b0; border: 1px solid rgba(136, 146, 176, 0.3); border-radius: 12px; font-weight: 600; cursor: pointer; text-transform: uppercase; }
        .secondary-btn:hover { color: #ffffff; border-color: #ffffff; background: rgba(255, 255, 255, 0.1); }
        
        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; min-height: 100dvh; background: rgba(1, 6, 14, 0.6); backdrop-filter: blur(8px); display: none; justify-content: center; align-items: center; z-index: 100; opacity: 0; transition: opacity 0.3s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; }
        .modal-overlay.active { display: flex; opacity: 1; }
        
        .modal-box { background: rgba(2, 11, 24, 0.95); border: 2px solid #00e5ff; border-radius: 20px; width: 90%; max-width: 500px; padding: 30px; box-sizing: border-box; box-shadow: 0 20px 50px rgba(0, 229, 255, 0.3); transform: scale(0.9); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; max-height: 90vh; max-height: 90dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
        .modal-box::-webkit-scrollbar { width: 8px; }
        .modal-box::-webkit-scrollbar-track { background: rgba(2, 11, 24, 0.3); border-radius: 20px; margin: 15px 0; }
        .modal-box::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, 0.3); border-radius: 20px; border: 1px solid rgba(0, 229, 255, 0.1); }
        .modal-box::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 255, 0.6); }
        
        .modal-box.dashboard-expanded { max-width: 800px; }
        .modal-overlay.active .modal-box { transform: scale(1); }
        .modal-close { position: absolute; top: 15px; right: 15px; color: #8892b0; background: none; border: none; font-size: 1.5rem; cursor: pointer; z-index: 10; transition: 0.2s;}
        .modal-close:hover { color: #00e5ff; transform: scale(1.1); }
        
        .modal-title { color: #ffb700; font-size: 1.5rem; font-weight: 800; margin: 0 0 15px 0; text-transform: uppercase; border-bottom: 1px solid rgba(255, 183, 0, 0.3); padding-bottom: 10px; }
        .modal-body { color: #e2e8f0; font-size: 1rem; line-height: 1.6; }
        .modal-body h4 { color: white; margin: 20px 0 10px 0; font-size: 1.1rem; text-transform: uppercase; }
        .modal-body ul { padding-left: 20px; margin-top: 5px; }
        .modal-body li { margin-bottom: 12px; }
        .modal-body strong { color: #00e5ff; }

        .help-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #ffb700; color: #01060e; border: none; border-radius: 50%; font-size: 12px; font-weight: 800; cursor: pointer; margin-left: 8px; transition: 0.2s; box-shadow: 0 0 8px rgba(255, 183, 0, 0.6); }
        .help-icon:hover { transform: scale(1.15); box-shadow: 0 0 15px rgba(255, 183, 0, 0.9); }
        
        .sub-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; min-height: 100dvh; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); display: none; justify-content: center; align-items: center; z-index: 200; opacity: 0; transition: opacity 0.3s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; }
        .sub-modal-overlay.active { display: flex; opacity: 1; }
        .sub-modal-box { background: #020b18; border: 1px solid #ffb700; border-radius: 16px; width: 90%; max-width: 400px; padding: 25px; box-shadow: 0 10px 40px rgba(255, 183, 0, 0.2); position: relative; color: #e2e8f0; font-size: 0.95rem; line-height: 1.5; transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .sub-modal-overlay.active .sub-modal-box { transform: scale(1); }

        .lead-modal-box { max-width: 650px; border-color: #ffb700; box-shadow: 0 20px 50px rgba(255, 183, 0, 0.2); transition: max-width 0.4s ease; }
        .lead-modal-title { color: white; border-bottom: none; margin-bottom: 5px; text-align: center; }
        .quote-subtitle { text-align: center; color: #a0aec0; font-size: 0.95rem; margin-bottom: 30px; }
        
        .quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .q-card { background: rgba(0, 229, 255, 0.05); border: 1px solid rgba(0, 229, 255, 0.2); border-radius: 16px; padding: 30px 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
        .q-card:hover { transform: translateY(-5px); background: rgba(0, 229, 255, 0.1); border-color: #00e5ff; box-shadow: 0 10px 30px rgba(0, 229, 255, 0.2); }
        .q-card.recommended { border-color: #ffb700; background: rgba(255, 183, 0, 0.08); }
        .q-card.recommended:hover { border-color: #ffb700; background: rgba(255, 183, 0, 0.15); box-shadow: 0 10px 30px rgba(255, 183, 0, 0.2); }
        
        .q-badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); background: #ffb700; color: #01060e; font-size: 0.7rem; font-weight: 800; padding: 5px 15px; border-radius: 0 0 8px 8px; text-transform: uppercase; letter-spacing: 1px; }
        .q-icon { font-size: 3rem; margin-bottom: 15px; display: block; text-shadow: 0 0 15px rgba(0, 229, 255, 0.5); }
        .q-card.recommended .q-icon { text-shadow: 0 0 15px rgba(255, 183, 0, 0.5); }
        
        .q-title { color: white; font-size: 1.15rem; font-weight: 800; margin-bottom: 10px; text-transform: uppercase; }
        .q-desc { color: #a0aec0; font-size: 0.85rem; line-height: 1.5; margin-bottom: 25px; flex-grow: 1; }
        
        .q-btn { background: transparent; border: 1px solid #00e5ff; color: #00e5ff; padding: 12px 20px; border-radius: 8px; font-weight: bold; font-family: 'Inter', sans-serif; text-transform: uppercase; width: 100%; transition: 0.3s; cursor: pointer; }
        .q-card:hover .q-btn { background: #00e5ff; color: #01060e; }
        .q-card.recommended .q-btn { border-color: #ffb700; color: #ffb700; }
        .q-card.recommended:hover .q-btn { background: #ffb700; color: #01060e; }
        
        .input-group { margin-bottom: 15px; width: 100%; position: relative;}
        .input-group input { width: 100%; background: rgba(0, 229, 255, 0.03); border: 1px solid rgba(0, 229, 255, 0.2); padding: 15px 20px; color: #fff; border-radius: 8px; font-size: 1rem; box-sizing: border-box; transition: 0.3s; }
        .input-group input:focus { border-color: #00e5ff; background: rgba(0, 229, 255, 0.1); outline: none; box-shadow: 0 0 15px rgba(0, 229, 255, 0.2); }
        
        .scan-btn { background: rgba(0, 229, 255, 0.1); border: 1px solid #00e5ff; color: #00e5ff; border-radius: 8px; padding: 0 15px; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 600; font-family: 'Inter', sans-serif; text-transform: uppercase; white-space: nowrap; }
        .scan-btn:hover { background: #00e5ff; color: #01060e; box-shadow: 0 0 15px rgba(0, 229, 255, 0.5); }

        .ihd-svg-container { background: #e2e8f0; border-radius: 8px; padding: 15px; display: inline-block; margin-bottom: 25px; border: 3px solid #00e5ff; box-shadow: 0 0 20px rgba(0,229,255,0.3); color: #000; font-family: monospace; position: relative;}
        .sync-status { color: #00e5ff; font-size: 1.1rem; margin-top: 15px; font-weight: 600; height: 25px; }
        
        @keyframes spinner-anim { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        .spinner { width: 70px; height: 70px; border: 6px solid rgba(0, 229, 255, 0.1); border-top: 6px solid #00e5ff; border-radius: 50%; animation: spinner-anim 1s linear infinite; margin: 0 auto 20px auto; }
        .neon-tick { font-size: 5rem; color: #39ff14; text-shadow: 0 0 20px rgba(57, 255, 20, 0.8), 0 0 40px rgba(57, 255, 20, 0.5); margin-bottom: 15px; display: block; animation: pulse 1.5s infinite; }
        @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

        #b2cStepDashboard .report-title { font-size: 1.6rem; }
        .dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 10px; margin-bottom: 25px;}
        .dash-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 20px 10px; text-align: center; }
        .dash-card.highlight-card { background: rgba(57,255,20,0.08); border-color: #39ff14; box-shadow: 0 5px 20px rgba(57,255,20,0.15); }
        .d-label { color: #a0aec0; font-size: 0.8rem; text-transform: uppercase; margin-bottom: 5px; font-weight: 600;}
        .d-value { color: white; font-size: 2rem; font-weight: 800; margin-bottom: 2px; }
        
        .ai-plans-section { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; text-align: left; }
        .ai-plan-card { background: rgba(0,0,0,0.4); border-radius: 10px; padding: 18px; border-left: 4px solid #64748b; }
        .ai-plan-card.t1 { border-color: #a0aec0; }
        .ai-plan-card.t2 { border-color: #ffb700; background: rgba(255,183,0,0.1); box-shadow: 0 5px 15px rgba(255,183,0,0.05); }
        .ai-plan-card.t3 { border-color: #00e5ff; }
        .ai-plan-title { color: white; font-weight: 800; font-size: 1.05rem; margin-bottom: 8px; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center;}
        .ai-plan-title span { font-size: 0.75rem; background: rgba(255,255,255,0.1); padding: 3px 8px; border-radius: 4px;}
        .ai-plan-text { color: #a0aec0; font-size: 0.9rem; line-height: 1.6; }
        .ai-highlight { color: #ffffff; font-weight: 600; }
        
        .centered-action-btn-container { display: flex; justify-content: center; width: 100%; margin-bottom: 30px; }
        #b2cStepDashboard .primary-cta-btn { padding: 18px 25px; font-size: 1.1rem; width: 100%; max-width: 400px; box-shadow: 0 10px 30px rgba(255, 183, 0, 0.4);}
        
        .chart-container { width: 100%; max-width: 100%; height: 200px; background: rgba(2, 11, 24, 0.5); border-radius: 12px; padding: 15px; box-sizing: border-box; border: 1px solid rgba(0, 229, 255, 0.2); box-shadow: inset 0 0 20px rgba(0,0,0,0.5); margin-bottom: 25px; overflow: hidden; }

        @media (max-width: 768px) {
            body {
                align-items: flex-start;
                background-attachment: scroll;
            }

            .scene {
                height: calc(100dvh - 16px);
                min-height: calc(100dvh - 16px);
                align-items: stretch;
                padding: 8px;
                border-radius: 0;
            }

            .card {
                min-height: 100%;
                height: 100%;
                border-radius: 20px;
                box-shadow: 0 16px 32px rgba(0, 0, 0, 0.85);
            }

            .card__face {
                border-radius: 20px;
            }

            .card__face--back {
                padding: 24px 16px;
            }

            .report-title {
                font-size: 1.45rem;
            }

            .search-bar-container input {
                font-size: 1rem;
                padding: 18px 16px;
            }

            .variant-card {
                flex-wrap: wrap;
                gap: 8px;
            }

            .v-data {
                width: 100%;
                text-align: left;
            }

            .quote-grid {
                grid-template-columns: 1fr;
            }

            .dash-grid {
                grid-template-columns: 1fr;
            }

            .modal-box {
                width: calc(100% - 24px);
                padding: 20px 16px;
            }
        }

        @media (max-width: 380px) {
            .satellite-container,
            .solar-graphic-wrapper {
                width: 110px;
                height: 110px;
            }

            .solar-percentage {
                font-size: 1.8rem;
            }
        }

/* Electricity profile: clear labels and optional detail. */
#b2cStepForm .input-group, .energy-settings { text-align:left; }
#b2cStepForm label, .energy-settings label { display:block; color:#fff; margin-bottom:8px; font-size:1rem; }
#energyInputMode { box-sizing:border-box; width:100%; padding:16px; border:1px solid #164152; border-radius:12px; background:#071522; color:#fff; font:inherit; }
.field-help { color:#a0aec0; font-size:.85rem; line-height:1.5; margin:8px 0 16px; }
.energy-settings { margin:20px 0; padding:16px; border:1px solid #164152; border-radius:12px; color:#fff; }
.energy-settings summary { cursor:pointer; color:#ffb700; padding:4px 0; }
.energy-settings[open] summary { margin-bottom:16px; }
#emailEstimateForm { margin-top:24px; }
.meter-check { display:flex; align-items:flex-start; gap:12px; margin:18px 0; text-align:left; color:var(--ink); font-size:.95rem; line-height:1.55; }
.meter-check input { flex:0 0 auto; width:20px; height:20px; margin:3px 0 0; accent-color:#1859b7; }
.meter-status { padding:14px; background:#edf3fa; color:#142535; border-radius:10px; line-height:1.6; }
.meter-link { display:block; text-align:center; box-sizing:border-box; text-decoration:none; }
.text-button { background:none; border:0; padding:12px 0; color:#1859b7; font:inherit; text-decoration:underline; cursor:pointer; }
.meter-prompt h3 { margin:0 0 8px; color:var(--ink); }
#b2cStepSmartForm .input-group label { display:block; margin:0 0 8px; color:var(--ink); }
.q-btn:disabled, .primary-cta-btn:disabled { opacity:.6; cursor:default; }
[hidden] { display:none !important; }