:root {
    --solar-bg: #030817;
    --solar-bg-2: #071126;
    --solar-panel: rgba(9, 19, 43, 0.78);
    --solar-panel-strong: rgba(12, 25, 54, 0.94);
    --solar-border: rgba(78, 130, 255, 0.20);
    --solar-blue: #168cff;
    --solar-cyan: #00d9ff;
    --solar-purple: #7c3cff;
    --solar-violet: #b026ff;
    --solar-green: #21f58b;
    --solar-yellow: #ffc928;
    --solar-orange: #ff8a30;
    --solar-text: #f5f7ff;
    --solar-muted: #8995b5;
}

html { scroll-behavior: smooth; }
body {
    background:
        radial-gradient(circle at 78% 8%, rgba(124,60,255,.15), transparent 28%),
        radial-gradient(circle at 15% 55%, rgba(0,217,255,.08), transparent 25%),
        linear-gradient(135deg, var(--solar-bg), #020611 60%, var(--solar-bg-2));
    color: var(--solar-text);
    min-height: 100vh;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .18;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, black, transparent 80%);
    z-index: -1;
}

.app-shell { min-height: 100vh; }
.app-sidebar {
    background: rgba(3, 10, 28, .92);
    border-right: 1px solid rgba(80,130,255,.14);
    backdrop-filter: blur(20px);
    box-shadow: 20px 0 60px rgba(0,0,0,.18);
}
.app-brand-mark {
    box-shadow: 0 0 24px rgba(124,60,255,.28);
    border: 1px solid rgba(0,217,255,.24);
}
.app-nav-link {
    color: #8290b0 !important;
    border: 1px solid transparent;
    transition: .25s ease;
}
.app-nav-link:hover {
    color: #fff !important;
    background: rgba(22,140,255,.08) !important;
    border-color: rgba(22,140,255,.14);
    transform: translateX(2px);
}
.app-nav-link.active {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(22,140,255,.24), rgba(124,60,255,.34)) !important;
    border-color: rgba(124,60,255,.38);
    box-shadow: 0 0 28px rgba(124,60,255,.18), inset 0 0 22px rgba(0,217,255,.05);
}
.app-nav-link.active i { color: var(--solar-cyan); }
.app-mobile-header {
    background: rgba(3,10,28,.88);
    border-bottom: 1px solid rgba(80,130,255,.16);
    backdrop-filter: blur(18px);
}
.app-content { min-width: 0; }

.solar-glass,
.solar-calculator-page .bg-white,
.solar-calculator-page .glass-effect,
main .bg-white {
    background: var(--solar-panel) !important;
    border-color: var(--solar-border) !important;
    color: var(--solar-text) !important;
    box-shadow: 0 16px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035) !important;
    backdrop-filter: blur(18px);
}

.solar-calculator-page .bg-white:hover,
.solar-glass:hover { border-color: rgba(22,140,255,.34) !important; }

.solar-calculator-page .bg-gradient-to-r,
.solar-calculator-page .gradient-solar {
    background: linear-gradient(135deg, #168cff 0%, #7c3cff 58%, #b026ff 100%) !important;
}
.solar-calculator-page .bg-gradient-to-br.from-amber-50,
.solar-calculator-page .bg-gradient-to-r.from-amber-500 {
    background: linear-gradient(135deg, rgba(255,138,48,.18), rgba(255,201,40,.07)) !important;
}
.solar-calculator-page .bg-gradient-to-r.from-emerald-500 {
    background: linear-gradient(135deg, rgba(33,245,139,.20), rgba(0,217,255,.12)) !important;
}

.solar-calculator-page > .space-y-8:first-child,
.solar-calculator-page { position: relative; }
.solar-hero {
    position: relative;
    overflow: hidden;
    padding: 48px 34px !important;
    border: 1px solid rgba(80,130,255,.18);
    border-radius: 26px;
    background:
        radial-gradient(circle at 75% 35%, rgba(255,138,48,.28), transparent 22%),
        radial-gradient(circle at 55% 80%, rgba(124,60,255,.30), transparent 34%),
        linear-gradient(135deg, rgba(10,17,47,.98), rgba(4,10,28,.92));
    box-shadow: 0 24px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
}
.solar-hero::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -220px;
    bottom: -330px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,138,48,.65), rgba(124,60,255,.18) 45%, transparent 70%);
    filter: blur(5px);
}
.solar-hero-icon {
    background: linear-gradient(135deg, #168cff, #7c3cff 60%, #ff8a30) !important;
    box-shadow: 0 0 40px rgba(124,60,255,.45);
}
.solar-hero h1 {
    color: #fff !important;
    letter-spacing: -.035em;
}
.solar-hero p { color: #aeb9d5 !important; }
.solar-hero h1 .bg-clip-text {
    background: linear-gradient(135deg, var(--solar-cyan), var(--solar-blue) 55%, var(--solar-violet)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

.solar-calculator-page label { color: #dce4f8 !important; }
.solar-calculator-page label i { color: var(--solar-cyan) !important; }
.solar-calculator-page input,
.solar-calculator-page select,
main input,
main select,
main textarea {
    background: rgba(3,10,28,.82) !important;
    color: #f5f7ff !important;
    border-color: rgba(92,132,205,.28) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
}
.solar-calculator-page input::placeholder,
main input::placeholder,
main textarea::placeholder { color: #61708f !important; }
.solar-calculator-page input:focus,
.solar-calculator-page select:focus,
main input:focus,
main select:focus,
main textarea:focus {
    border-color: var(--solar-cyan) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0,217,255,.10), 0 0 24px rgba(22,140,255,.10) !important;
}
.solar-calculator-page option,
main option { background: #071126; color: #fff; }

.solar-calculator-page .text-gray-900,
.solar-calculator-page .text-gray-700,
.solar-calculator-page .text-gray-600,
.solar-calculator-page .text-gray-500,
.solar-calculator-page .text-gray-400,
main .text-gray-900,
main .text-gray-700,
main .text-gray-600,
main .text-gray-500 { color: #aeb9d5 !important; }
.solar-calculator-page .text-gray-900 { color: #f5f7ff !important; }
.solar-calculator-page .text-primary-500,
.solar-calculator-page .text-primary-600,
.solar-calculator-page .text-primary-700 { color: var(--solar-cyan) !important; }
.solar-calculator-page .text-green-600,
.solar-calculator-page .text-green-500 { color: var(--solar-green) !important; }
.solar-calculator-page .text-amber-500,
.solar-calculator-page .text-amber-600,
.solar-calculator-page .text-amber-700 { color: var(--solar-yellow) !important; }

.solar-calculator-page .bg-blue-100,
.solar-calculator-page .bg-cyan-100,
.solar-calculator-page .bg-green-100,
.solar-calculator-page .bg-purple-100,
.solar-calculator-page .bg-emerald-100,
.solar-calculator-page .bg-primary-100,
.solar-calculator-page .bg-primary-50,
.solar-calculator-page .bg-gray-50,
.solar-calculator-page .bg-gray-100,
.solar-calculator-page .bg-amber-50,
.solar-calculator-page .bg-orange-50,
.solar-calculator-page .bg-orange-100,
.solar-calculator-page .bg-green-50,
.solar-calculator-page .bg-red-50,
.solar-calculator-page .bg-red-100 {
    background: rgba(22,140,255,.08) !important;
    border-color: rgba(80,130,255,.16) !important;
}
.solar-calculator-page .border-gray-100,
.solar-calculator-page .border-gray-200,
.solar-calculator-page .border-gray-300 { border-color: rgba(80,130,255,.16) !important; }
.solar-calculator-page .border-b { border-color: rgba(80,130,255,.14) !important; }

.solar-calculator-page .shadow-lg,
.solar-calculator-page .shadow-xl { box-shadow: 0 16px 50px rgba(0,0,0,.28) !important; }
.card-hover { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important; }
.card-hover:hover { transform: translateY(-5px); box-shadow: 0 22px 55px rgba(0,0,0,.38) !important; }

.solar-calculator-page button[type="submit"] {
    background: linear-gradient(135deg, #168cff, #7c3cff 65%, #b026ff) !important;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 0 30px rgba(124,60,255,.28), 0 14px 35px rgba(0,0,0,.28) !important;
}
.solar-calculator-page button[type="submit"]:hover { box-shadow: 0 0 45px rgba(0,217,255,.24), 0 18px 40px rgba(0,0,0,.32) !important; }

.solar-calculator-page table { color: #dce4f8; }
.solar-calculator-page thead { background: rgba(22,140,255,.07); }
.solar-calculator-page tbody tr:hover { background: rgba(22,140,255,.055) !important; }
.solar-calculator-page .text-red-600,
.solar-calculator-page .text-red-700,
.solar-calculator-page .text-red-900 { color: #ff7187 !important; }

.result-kpi {
    position: relative;
    overflow: hidden;
}
.result-kpi::after {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    right: -70px;
    top: -70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,217,255,.18), transparent 70%);
}
.result-kpi-value { color: #fff !important; text-shadow: 0 0 22px rgba(0,217,255,.14); }

.mobile-nav {
    display: none;
}

@media (max-width: 767px) {
    .app-sidebar { display: none; }
    .mobile-nav { display: block; }
    .solar-hero { padding: 34px 22px !important; }
    .solar-hero h1 { font-size: 2.25rem !important; }
}

/* Other pages inherit the same futuristic surface without requiring rewrites. */
main > .bg-white,
main .bg-white {
    background: var(--solar-panel) !important;
    border-color: var(--solar-border) !important;
}
main .text-gray-900 { color: #f5f7ff !important; }
main .text-gray-700, main .text-gray-600, main .text-gray-500 { color: #aeb9d5 !important; }
main .border-gray-100, main .border-gray-200, main .border-gray-300 { border-color: rgba(80,130,255,.16) !important; }
main .bg-gray-50, main .bg-gray-100 { background: rgba(22,140,255,.06) !important; }
main .hover\:bg-gray-50:hover, main .hover\:bg-gray-100:hover, main .hover\:bg-gray-200:hover { background: rgba(22,140,255,.14) !important; }
main .bg-primary-50, main .bg-primary-100 { background: rgba(124,60,255,.12) !important; }
main .text-primary-600, main .text-primary-700 { color: var(--solar-cyan) !important; }

/* Calculator step wizard */
.calc-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    max-width: 640px;
    margin: 0 auto;
    padding: 6px 4px;
}
.calc-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 16px;
    border: 1px solid transparent;
    background: transparent;
    cursor: default;
    text-align: left;
    font: inherit;
}
button.calc-step.done { cursor: pointer; }
.calc-step-num {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .9rem;
    background: rgba(80,130,255,.10);
    border: 1px solid rgba(80,130,255,.22);
    color: #8290b0;
}
.calc-step-text { display: flex; flex-direction: column; }
.calc-step-text strong { color: #8290b0; font-size: .9rem; }
.calc-step-text small { color: #5b6885; font-size: .72rem; }
.calc-step.active { background: rgba(22,140,255,.10); border-color: rgba(22,140,255,.24); }
.calc-step.active .calc-step-num {
    background: linear-gradient(135deg, #168cff, #7c3cff);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 18px rgba(124,60,255,.4);
}
.calc-step.active .calc-step-text strong { color: #fff; }
.calc-step.active .calc-step-text small { color: #aeb9d5; }
.calc-step.done .calc-step-num { background: rgba(33,245,139,.16); border-color: rgba(33,245,139,.4); color: var(--solar-green); }
.calc-step.done .calc-step-text strong { color: #dce4f8; }
.calc-step-line { width: 60px; height: 2px; background: rgba(80,130,255,.18); border-radius: 2px; }
.calc-step-line.done { background: linear-gradient(90deg, var(--solar-green), rgba(80,130,255,.3)); }
@media (max-width: 640px) {
    .calc-stepper { gap: 6px; }
    .calc-step { padding: 8px 10px; }
    .calc-step-text small { display: none; }
    .calc-step-line { width: 28px; }
}

.results-summary-banner {
    border: 1px solid rgba(33,245,139,.28);
    background: linear-gradient(135deg, rgba(33,245,139,.10), rgba(0,217,255,.06) 60%, rgba(124,60,255,.08));
    box-shadow: 0 16px 50px rgba(0,0,0,.28);
}
.results-summary-check {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(33,245,139,.16);
    border: 1px solid rgba(33,245,139,.4);
    color: var(--solar-green);
    font-size: 1.1rem;
}
.results-summary-banner strong { color: var(--solar-cyan); }
.edit-inputs-btn {
    color: #fff;
    background: linear-gradient(135deg, #168cff, #7c3cff 65%, #b026ff);
    border: 1px solid rgba(255,255,255,.24);
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 800;
    font-size: .95rem;
    box-shadow: 0 0 0 0 rgba(22,140,255,.5), 0 10px 30px rgba(0,0,0,.3);
    transition: transform .2s ease, box-shadow .2s ease;
    animation: editBtnPulse 2.4s ease-out 1;
}
.edit-inputs-btn:hover {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 0 40px rgba(0,217,255,.35), 0 12px 32px rgba(0,0,0,.34);
}
@keyframes editBtnPulse {
    0%   { box-shadow: 0 0 0 0 rgba(22,140,255,.55), 0 10px 30px rgba(0,0,0,.3); }
    70%  { box-shadow: 0 0 0 16px rgba(22,140,255,0), 0 10px 30px rgba(0,0,0,.3); }
    100% { box-shadow: 0 0 0 0 rgba(22,140,255,0), 0 10px 30px rgba(0,0,0,.3); }
}
@media (max-width: 767px) { .edit-inputs-btn { width: 100%; } }

.roof-warning-banner {
    border: 1px solid rgba(255,201,40,.3);
    background: linear-gradient(135deg, rgba(255,180,0,.12), rgba(255,90,0,.05));
}
.roof-warning-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,201,40,.16);
    border: 1px solid rgba(255,201,40,.4);
    color: var(--solar-yellow);
    font-size: 1.05rem;
}

/* Subtle scrollbar styling */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #020611; }
::-webkit-scrollbar-thumb { background: linear-gradient(#168cff, #7c3cff); border-radius: 10px; border: 2px solid #020611; }