body.ns-widget-body{ background: var(--ns-paper-0); color: var(--ns-ink-0); min-height:100vh; }

.ns-widget{ max-width: 640px; margin: 0 auto; min-height: 100vh; display:flex; flex-direction:column; }

.ns-topbar{ display:flex; align-items:center; justify-content:space-between; padding: 20px 24px 0; }
.ns-brand{ font-family: var(--ns-font-display); font-weight:800; font-size: 1.05rem; letter-spacing:0.02em; }
.ns-brand .ns-brand-sub{ display:block; font-family: var(--ns-font-mono); font-size:0.62rem; color: var(--ns-ink-mute); letter-spacing:0.08em; text-transform:uppercase; }

.ns-progress{ height:4px; background: var(--ns-line); border-radius:4px; margin: 14px 24px 0; overflow:hidden; }
.ns-progress-fill{ height:100%; background: var(--ns-grad); width:0%; transition: width 0.5s ease; }

.ns-screen{ flex:1; display:flex; flex-direction:column; justify-content:center; padding: 28px 24px 48px; animation: ns-fade-in 0.45s ease both; }
@keyframes ns-fade-in{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none; } }

.ns-eyebrow{ font-family: var(--ns-font-mono); font-size:0.72rem; color: var(--ns-ink-mute); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:10px; }
.ns-question{ font-size: clamp(1.4rem, 4vw, 2.1rem); font-weight:700; line-height:1.15; margin: 0 0 28px; }

.ns-address-form{ display:flex; gap:10px; flex-wrap:wrap; }
.ns-input{ flex:1; min-width:220px; padding:16px 18px; border-radius: var(--ns-radius-sm); border:1.5px solid var(--ns-line); background:var(--ns-paper-panel); font-size:1rem; color:var(--ns-ink-0); }
.ns-input:focus{ outline:2px solid var(--ns-ember); outline-offset:1px; }

.ns-btn{ border:none; border-radius: var(--ns-radius-sm); padding: 16px 22px; font-weight:700; font-size:1rem; background: var(--ns-grad); color:#1c1108; box-shadow: var(--ns-shadow-soft); transition: transform 0.15s ease; }
.ns-btn:hover{ transform: translateY(-1px); }
.ns-btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none; }
.ns-btn-ghost{ background:transparent; border:1.5px solid var(--ns-line); color:var(--ns-ink-0); box-shadow:none; }

.ns-card-grid{ display:grid; gap:14px; grid-template-columns: 1fr; }
@media(min-width:520px){ .ns-card-grid.ns-cols-2{ grid-template-columns: 1fr 1fr; } }

.ns-card-btn{ text-align:left; border:1.5px solid var(--ns-line); background: var(--ns-paper-panel); border-radius: var(--ns-radius); padding: 20px 22px; box-shadow: var(--ns-shadow-soft); transition: all 0.15s ease; }
.ns-card-btn:hover{ border-color: var(--ns-ember); transform: translateY(-2px); }
.ns-card-btn.ns-selected{ border-color: var(--ns-ember); background: linear-gradient(0deg, rgba(255,138,61,0.08), rgba(255,138,61,0.08)), var(--ns-paper-panel); }
.ns-card-title{ font-weight:700; font-size:1.05rem; margin-bottom:4px; }
.ns-card-sub{ font-size:0.85rem; color: var(--ns-ink-mute); }

.ns-nav-row{ display:flex; justify-content:space-between; align-items:center; margin-top:26px; }

/* ---- dark / premium reveal mode ---- */
.ns-dark-screen{
  background: radial-gradient(circle at 50% 0%, var(--ns-black-1), var(--ns-black-0) 70%);
  color: #f4ede2; min-height:100vh; display:flex; flex-direction:column;
}
.ns-dark-screen .ns-topbar .ns-brand{ color:#f4ede2; }
.ns-dark-screen .ns-brand-sub{ color:#a8998a; }

.ns-loading-wrap{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:24px; text-align:center; }
.ns-spinner{ width:54px; height:54px; border-radius:50%; border:3px solid rgba(255,200,97,0.18); border-top-color: var(--ns-gold); animation: ns-spin 0.9s linear infinite; }
@keyframes ns-spin{ to{ transform: rotate(360deg); } }
.ns-loading-line{ font-family: var(--ns-font-mono); font-size:0.85rem; color:#c9bda9; min-height:1.2em; }

.ns-reveal-wrap{ flex:1; display:flex; flex-direction:column; padding: 20px 20px 12px; }
.ns-roof-canvas{ width:100%; height: 46vh; min-height:280px; border-radius: var(--ns-radius); overflow:hidden; background: radial-gradient(circle at 50% 30%, #1d1712, #0c0a08); position:relative; }
.ns-roof-hint{ position:absolute; bottom:10px; left:0; right:0; text-align:center; font-family: var(--ns-font-mono); font-size:0.7rem; color:#9a8c7c; pointer-events:none; }
.ns-seg-tooltip{ position:absolute; background: rgba(23,19,15,0.95); border:1px solid rgba(255,200,97,0.35); border-radius:10px; padding:10px 14px; font-size:0.82rem; max-width:220px; pointer-events:none; opacity:0; transition: opacity 0.2s ease; }
.ns-seg-tooltip.ns-visible{ opacity:1; }
.ns-seg-tooltip .ns-tt-title{ font-weight:700; color: var(--ns-gold); margin-bottom:2px; }
.ns-download-btn{ position:absolute; top:10px; right:10px; background: rgba(23,19,15,0.85); border:1px solid rgba(255,200,97,0.4); color:#f4ede2; font-family: var(--ns-font-mono); font-size:0.72rem; padding:7px 12px; border-radius:999px; cursor:pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.ns-download-btn:hover{ background: rgba(255,200,97,0.18); border-color: rgba(255,200,97,0.7); }


.ns-estimate-block{ text-align:center; padding: 22px 10px 6px; }
.ns-estimate-label{ font-family: var(--ns-font-mono); font-size:0.72rem; color:#a8998a; text-transform:uppercase; letter-spacing:0.12em; margin-bottom:8px; }
.ns-estimate-number{ font-family: var(--ns-font-display); font-weight:900; font-size: clamp(2.4rem, 9vw, 3.6rem); background: var(--ns-grad); -webkit-background-clip:text; background-clip:text; color:transparent; filter: drop-shadow(0 0 0 rgba(255,138,61,0)); transition: filter 0.4s ease; }
.ns-estimate-number.ns-glow{ filter: drop-shadow(0 0 22px rgba(255,168,80,0.55)); }
.ns-estimate-range{ margin-top:6px; color:#c9bda9; font-size:0.95rem; }
.ns-disclaimer{ margin-top:14px; font-size:0.78rem; color:#8a7d6d; max-width:440px; margin-left:auto; margin-right:auto; }

.ns-lineitems{ max-width:440px; margin: 18px auto 0; background: var(--ns-panel); border-radius: var(--ns-radius); padding: 16px 20px; }
.ns-lineitem-row{ display:flex; justify-content:space-between; padding:7px 0; font-size:0.88rem; border-bottom:1px solid rgba(255,255,255,0.06); }
.ns-lineitem-row:last-child{ border-bottom:none; font-weight:700; color: var(--ns-gold); }

.ns-insurance-figs{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; max-width:460px; margin: 16px auto 0; }
.ns-insurance-fig{ background: var(--ns-panel); border-radius: var(--ns-radius-sm); padding:14px 10px; text-align:center; }
.ns-insurance-fig .ns-fig-label{ font-family: var(--ns-font-mono); font-size:0.62rem; color:#a8998a; text-transform:uppercase; }
.ns-insurance-fig .ns-fig-value{ font-weight:800; font-size:1.15rem; margin-top:4px; }

.ns-contact-form{ max-width:420px; margin: 24px auto 0; width:100%; display:flex; flex-direction:column; gap:12px; }
.ns-contact-form .ns-input{ background: var(--ns-panel); border:1.5px solid rgba(255,255,255,0.12); color:#f4ede2; }

.ns-confirm-wrap{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; padding: 24px; background: var(--ns-paper-0); color: var(--ns-ink-0); }
.ns-confirm-icon{ width:64px; height:64px; border-radius:50%; background: var(--ns-grad); display:flex; align-items:center; justify-content:center; font-size:1.8rem; }
.ns-confirm-title{ font-size:1.5rem; font-weight:800; }
.ns-confirm-sub{ color: var(--ns-ink-1); max-width:380px; }
.ns-confirm-tag{ margin-top:8px; font-family: var(--ns-font-mono); font-size:0.72rem; color: var(--ns-ink-mute); text-transform:uppercase; letter-spacing:0.1em; }