/* ============================================================
   Hanuman Land Investment Simulator — simulator.css v2.0.0
   Design: Clean light modern — white cards, green accent
   ============================================================ */

/* ---- Reset & Root ---- */
.hpw-wrapper *,
.hpw-wrapper *::before,
.hpw-wrapper *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.hpw-wrapper {
    --hpw-bg:       #f4f7f5;
    --hpw-surface:  #ffffff;
    --hpw-surface2: #f0fdf4;
    --hpw-border:   #e2ede8;
    --hpw-border2:  #d1fae5;
    --hpw-green:    #10b981;
    --hpw-green-dk: #065f46;
    --hpw-green-lt: #d1fae5;
    --hpw-teal:     #0d9488;
    --hpw-text:     #0f172a;
    --hpw-text2:    #334155;
    --hpw-muted:    #64748b;
    --hpw-muted2:   #94a3b8;
    --hpw-good:     #10b981;
    --hpw-warn:     #f59e0b;
    --hpw-bad:      #ef4444;
    --hpw-radius:   14px;
    --hpw-shadow:   0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
    --hpw-shadow-lg:0 8px 32px rgba(16,185,129,.10), 0 2px 8px rgba(0,0,0,.06);
    --hpw-font:     'Sarabun', 'Noto Sans Thai', sans-serif;

    font-family: var(--hpw-font);
    background: var(--hpw-bg);
    color: var(--hpw-text);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 40px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
    max-width: 1200px;
    margin: 0 auto;
}

/* ============================================================
   HEADER
============================================================ */
.hpw-header {
    background: linear-gradient(135deg, #065f46 0%, #0f766e 40%, #10b981 100%);
    padding: 28px 32px 0;
    position: relative;
    overflow: hidden;
}

.hpw-header::before {
    content: '';
    position: absolute;
    right: -60px; top: -80px;
    width: 260px; height: 260px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    pointer-events: none;
}

.hpw-header::after {
    content: '';
    position: absolute;
    right: 80px; top: 60px;
    width: 120px; height: 120px;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    pointer-events: none;
}

.hpw-logo-row {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.hpw-logo {
    height: 42px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .92;
}

.hpw-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: rgba(255,255,255,.72);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.hpw-title {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.18;
    letter-spacing: -.3px;
}

.hpw-title-desc {
    max-width: 680px;
    margin-top: 6px;
    color: rgba(255,255,255,.78);
    font-size: 13px;
    line-height: 1.65;
}

/* Glossary strip */
.hpw-glossary-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
    position: relative;
    z-index: 1;
}

.hpw-glossary-strip span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.88);
    font-size: 11px;
    line-height: 1.25;
    backdrop-filter: blur(4px);
}

.hpw-glossary-strip strong {
    color: #ffffff;
    font-weight: 800;
    letter-spacing: .4px;
}

/* ============================================================
   TAB NAVIGATION
============================================================ */
.hpw-tab-nav {
    display: flex;
    gap: 2px;
    margin-top: 20px;
    position: relative;
    z-index: 1;
}

.hpw-tab {
    background: rgba(255,255,255,.10);
    border: none;
    border-radius: 10px 10px 0 0;
    color: rgba(255,255,255,.72);
    font-family: var(--hpw-font);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 20px 11px;
    cursor: pointer;
    transition: background .18s, color .18s;
}

.hpw-tab:hover {
    background: rgba(255,255,255,.18);
    color: #fff;
}

.hpw-tab.active {
    background: var(--hpw-bg);
    color: var(--hpw-green-dk);
    font-weight: 800;
}

.hpw-tab-panel {
    display: none;
}

.hpw-tab-panel.active {
    display: block;
}

/* ============================================================
   KPI CARDS ROW
============================================================ */
.hpw-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--hpw-surface);
    border-bottom: 1px solid var(--hpw-border);
}

.hpw-kpi-card {
    padding: 20px 22px 18px;
    border-right: 1px solid var(--hpw-border);
    background: var(--hpw-surface);
    transition: background .18s;
}

.hpw-kpi-card:last-child {
    border-right: none;
}

.hpw-kpi-label {
    font-size: 11px;
    color: var(--hpw-muted);
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 7px;
}

.hpw-kpi-label small,
.hpw-field-row label small,
.hpw-sum-label small {
    display: block;
    margin-top: 2px;
    color: var(--hpw-muted2);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.hpw-kpi-value {
    font-size: 30px;
    font-weight: 900;
    color: var(--hpw-green);
    line-height: 1;
    letter-spacing: -1px;
    transition: color .3s;
}

.hpw-kpi-value span#hpw-irr,
.hpw-kpi-value span#hpw-npv,
.hpw-kpi-value span#hpw-payback,
.hpw-kpi-value span#hpw-yield {
    display: inline-block;
    transition: transform .2s, color .3s;
}

.hpw-kpi-unit {
    font-size: 14px;
    font-weight: 600;
    color: var(--hpw-muted);
    margin-left: 2px;
}

.hpw-kpi-sub {
    font-size: 11px;
    color: var(--hpw-muted2);
    margin-top: 5px;
    min-height: 15px;
}

.hpw-kpi-good  { color: var(--hpw-good)  !important; }
.hpw-kpi-warn  { color: var(--hpw-warn)  !important; }
.hpw-kpi-bad   { color: var(--hpw-bad)   !important; }

/* ============================================================
   BODY: Two columns
============================================================ */
.hpw-body {
    display: grid;
    grid-template-columns: 390px 1fr;
    min-height: 600px;
    background: var(--hpw-bg);
}

.hpw-panel {
    padding: 24px 22px 36px;
}

.hpw-panel-inputs {
    background: var(--hpw-surface);
    border-right: 1px solid var(--hpw-border);
    overflow-y: visible;
}

.hpw-panel-results {
    background: var(--hpw-bg);
}

.hpw-panel-heading {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--hpw-green-dk);
    border-bottom: 2px solid var(--hpw-green-lt);
    padding-bottom: 8px;
    margin-bottom: 14px;
}

.hpw-panel-help,
.hpw-section-help {
    color: var(--hpw-muted);
    font-size: 12px;
    line-height: 1.65;
    margin: -4px 0 16px;
    padding: 10px 13px;
    border: 1px solid var(--hpw-border);
    border-left: 3px solid var(--hpw-green);
    border-radius: 0 10px 10px 0;
    background: var(--hpw-surface2);
}

.hpw-section-help {
    margin: -4px 0 12px;
    color: var(--hpw-muted);
}

.hpw-panel-help-results {
    background: #f0fdf4;
    border-color: var(--hpw-border);
    border-left-color: var(--hpw-teal);
}

/* ---- Section labels ---- */
.hpw-section-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--hpw-green-dk);
    margin: 22px 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hpw-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--hpw-border);
}

/* ============================================================
   FIELDS & SLIDERS
============================================================ */
.hpw-field {
    margin-bottom: 18px;
}

.hpw-field-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 7px;
}

.hpw-field-row label {
    font-size: 13px;
    color: var(--hpw-text2);
    font-weight: 600;
}

.hpw-field-val {
    font-size: 13px;
    font-weight: 800;
    color: var(--hpw-green-dk);
    white-space: nowrap;
    background: var(--hpw-green-lt);
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--hpw-border2);
}

/* Slider track */
.hpw-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 99px;
    background: var(--hpw-border);
    outline: none;
    cursor: pointer;
    border: none;
    accent-color: var(--hpw-green);
}

.hpw-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--hpw-green);
    box-shadow: 0 0 0 3px rgba(16,185,129,.22), 0 2px 6px rgba(16,185,129,.28);
    cursor: pointer;
    transition: background .15s, box-shadow .15s, transform .1s;
}

.hpw-slider::-webkit-slider-thumb:hover {
    background: var(--hpw-green-dk);
    box-shadow: 0 0 0 5px rgba(16,185,129,.3), 0 2px 8px rgba(16,185,129,.35);
    transform: scale(1.1);
}

.hpw-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--hpw-green);
    border: none;
    cursor: pointer;
}

.hpw-minmax {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--hpw-muted2);
    margin-top: 5px;
}

/* ============================================================
   SUMMARY GRID (results panel)
============================================================ */
.hpw-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.hpw-sum-item {
    background: var(--hpw-surface);
    border: 1px solid var(--hpw-border);
    border-radius: var(--hpw-radius);
    padding: 14px 16px;
    box-shadow: var(--hpw-shadow);
}

.hpw-sum-label {
    font-size: 11px;
    color: var(--hpw-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 6px;
    font-weight: 600;
}

.hpw-sum-note {
    font-size: 9px;
    opacity: .7;
    text-transform: none;
    letter-spacing: 0;
}

.hpw-sum-val {
    font-size: 20px;
    font-weight: 800;
    color: var(--hpw-text);
    letter-spacing: -.5px;
    transition: color .3s;
}

/* ============================================================
   CHART
============================================================ */
.hpw-chart-wrap {
    background: var(--hpw-surface);
    border: 1px solid var(--hpw-border);
    border-radius: var(--hpw-radius);
    padding: 16px;
    box-shadow: var(--hpw-shadow);
}

#hpw-cashflow-chart {
    display: block;
    width: 100% !important;
}

/* ============================================================
   COMPARE GRID
============================================================ */
.hpw-compare-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.hpw-compare-card {
    background: var(--hpw-surface);
    border: 1.5px solid var(--hpw-border);
    border-radius: var(--hpw-radius);
    padding: 16px;
    transition: border-color .2s, box-shadow .2s;
    box-shadow: var(--hpw-shadow);
}

.hpw-compare-card.hpw-best {
    border-color: var(--hpw-green);
    background: #f0fdf4;
    box-shadow: var(--hpw-shadow-lg);
}

.hpw-compare-card-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--hpw-muted2);
    margin-bottom: 5px;
}

.hpw-compare-card-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--hpw-text);
    margin-bottom: 10px;
}

.hpw-compare-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--hpw-muted);
    margin-bottom: 4px;
}

.hpw-compare-row span:last-child {
    font-weight: 700;
    color: var(--hpw-text2);
}

.hpw-best-badge {
    display: inline-block;
    background: var(--hpw-green);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 99px;
    margin-top: 8px;
}

/* ============================================================
   VERDICT BANNER
============================================================ */
.hpw-verdict-banner {
    margin-top: 18px;
    border-radius: var(--hpw-radius);
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    display: none;
}

.hpw-verdict-banner.good {
    display: block;
    background: #f0fdf4;
    border: 1.5px solid #6ee7b7;
    color: #065f46;
}

.hpw-verdict-banner.warn {
    display: block;
    background: #fffbeb;
    border: 1.5px solid #fcd34d;
    color: #92400e;
}

.hpw-verdict-banner.bad {
    display: block;
    background: #fef2f2;
    border: 1.5px solid #fca5a5;
    color: #7f1d1d;
}

/* ============================================================
   GLOSSARY / TERM BOX
============================================================ */
.hpw-term-box {
    margin-top: 22px;
    padding: 18px;
    border: 1.5px solid var(--hpw-border2);
    border-radius: 16px;
    background: var(--hpw-surface2);
}

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

.hpw-term-grid div {
    padding: 12px;
    border: 1px solid var(--hpw-border);
    border-radius: 10px;
    background: var(--hpw-surface);
}

.hpw-term-grid strong {
    display: block;
    color: var(--hpw-green-dk);
    font-size: 13px;
    letter-spacing: .5px;
    margin-bottom: 4px;
    font-weight: 800;
}

.hpw-term-grid span {
    display: block;
    color: var(--hpw-muted);
    font-size: 12px;
    line-height: 1.55;
}

/* ============================================================
   FOOTER
============================================================ */
.hpw-footer {
    background: var(--hpw-surface);
    border-top: 1px solid var(--hpw-border);
    padding: 12px 28px;
    font-size: 11px;
    color: var(--hpw-muted2);
    text-align: center;
}

/* ============================================================
   NUMBER PULSE ANIMATION
============================================================ */
@keyframes hpw-pulse {
    0%   { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.hpw-pulse {
    animation: hpw-pulse .22s ease-out both;
}

/* ============================================================
   SELECT INPUT
============================================================ */
.hpw-select-label {
    display: block;
    font-size: 13px;
    color: var(--hpw-text2);
    font-weight: 600;
    margin-bottom: 6px;
}

/* Land ownership toggle */
.hpw-land-ownership-toggle {
    display: flex;
    gap: 8px;
}
.hpw-own-btn {
    flex: 1;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid var(--hpw-border);
    background: var(--hpw-surface);
    color: var(--hpw-muted);
    font-family: var(--hpw-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}
.hpw-own-btn:hover {
    border-color: var(--hpw-accent);
    color: var(--hpw-text);
    background: var(--hpw-surface);
    box-shadow: 0 0 0 3px rgba(45,212,160,.10);
}
.hpw-own-btn.active {
    background: rgba(45,212,160,.12);
    border-color: var(--hpw-accent);
    color: var(--hpw-accent);
    box-shadow: none;
}
.hpw-own-btn.active:hover {
    background: rgba(45,212,160,.18);
    border-color: var(--hpw-accent);
    color: var(--hpw-accent);
    box-shadow: 0 0 0 3px rgba(45,212,160,.14);
}
.hpw-own-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(45,212,160,.30);
}

.hpw-select {
    width: 100%;
    background: var(--hpw-surface);
    border: 1.5px solid var(--hpw-border);
    border-radius: 10px;
    color: var(--hpw-text);
    font-family: var(--hpw-font);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 12px;
    cursor: pointer;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
    box-shadow: var(--hpw-shadow);
}

.hpw-select option {
    background: var(--hpw-surface);
    color: var(--hpw-text);
}

.hpw-select:focus {
    border-color: var(--hpw-green);
    box-shadow: 0 0 0 3px rgba(16,185,129,.15);
}

/* ============================================================
   ZONING RESULTS
============================================================ */
.hpw-zone-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--hpw-surface);
    border: 1.5px solid var(--hpw-border);
    border-radius: var(--hpw-radius);
    padding: 16px 18px;
    box-shadow: var(--hpw-shadow);
}

.hpw-zone-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(0,0,0,.12);
}

.hpw-zone-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--hpw-text);
}

.hpw-zone-desc {
    font-size: 12px;
    color: var(--hpw-muted);
    margin-top: 3px;
}

.hpw-allowed-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hpw-allowed-tag {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 13px;
    border-radius: 99px;
    border: 1.5px solid;
}

.hpw-allowed-tag.allowed {
    background: #f0fdf4;
    border-color: #6ee7b7;
    color: #065f46;
}

.hpw-allowed-tag.partial {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #92400e;
}

.hpw-allowed-tag.denied {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #7f1d1d;
    text-decoration: line-through;
    opacity: .75;
}

.hpw-zoning-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.hpw-zn-item {
    background: var(--hpw-surface);
    border: 1px solid var(--hpw-border);
    border-radius: var(--hpw-radius);
    padding: 14px;
    text-align: center;
    box-shadow: var(--hpw-shadow);
}

.hpw-zn-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--hpw-muted);
    margin-bottom: 6px;
    font-weight: 600;
}

.hpw-zn-val {
    font-size: 22px;
    font-weight: 900;
    color: var(--hpw-green-dk);
}

.hpw-zn-note {
    font-size: 10px;
    color: var(--hpw-muted2);
    margin-top: 4px;
}

/* Setback table */
.hpw-setback-table {
    background: var(--hpw-surface);
    border: 1px solid var(--hpw-border);
    border-radius: var(--hpw-radius);
    overflow: hidden;
    box-shadow: var(--hpw-shadow);
}

.hpw-sb-row {
    display: grid;
    grid-template-columns: 1fr 120px 80px;
    padding: 10px 16px;
    font-size: 13px;
    border-bottom: 1px solid var(--hpw-border);
    align-items: center;
}

.hpw-sb-row:last-child {
    border-bottom: none;
}

.hpw-sb-header {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--hpw-muted2);
    background: var(--hpw-bg);
    font-weight: 700;
}

.hpw-sb-status {
    font-size: 12px;
    font-weight: 700;
}

.hpw-sb-ok   { color: var(--hpw-good); }
.hpw-sb-warn { color: var(--hpw-warn); }
.hpw-sb-bad  { color: var(--hpw-bad); }

/* Info boxes (transfer type, title deed, flood) */
.hpw-info-box {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.55;
    background: rgba(255,255,255,.05);
    border-left: 3px solid rgba(255,255,255,.15);
    color: var(--hpw-muted);
}
.hpw-info-box.good { border-color: var(--hpw-good); color: var(--hpw-good); background: rgba(45,212,160,.07); }
.hpw-info-box.warn { border-color: var(--hpw-warn); color: var(--hpw-warn); background: rgba(201,168,76,.07); }
.hpw-info-box.bad  { border-color: var(--hpw-bad);  color: var(--hpw-bad);  background: rgba(240,108,108,.07); }
.hpw-info-box:empty { display: none; }

/* Tax breakdown box */
.hpw-tax-box {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    padding: 16px;
    margin-top: 12px;
}
.hpw-tax-box-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--hpw-accent);
    margin-bottom: 12px;
}
.hpw-tax-grid { display: flex; flex-direction: column; gap: 6px; }
.hpw-tax-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--hpw-muted);
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.hpw-tax-row.total {
    border-top: 1px solid rgba(255,255,255,.2);
    border-bottom: none;
    font-weight: 700;
    color: var(--hpw-text);
    padding-top: 8px;
    margin-top: 4px;
}
.hpw-tax-note {
    font-size: 11px;
    color: var(--hpw-muted2);
    margin-top: 8px;
    line-height: 1.5;
}

.hpw-eia-result { margin-top: 6px; }

/* ============================================================
   LEAD FORM (TAB 4)
============================================================ */
.hpw-lead-wrap {
    padding: 36px 32px;
    max-width: 900px;
    margin: 0 auto;
}

.hpw-lead-intro {
    margin-bottom: 28px;
}

.hpw-lead-heading {
    font-size: 22px;
    font-weight: 900;
    color: var(--hpw-text);
    margin-bottom: 8px;
    letter-spacing: -.3px;
}

.hpw-lead-sub {
    font-size: 14px;
    color: var(--hpw-muted);
    line-height: 1.6;
}

.hpw-lead-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.hpw-lead-summary {
    background: var(--hpw-surface2);
    border: 1.5px solid var(--hpw-border2);
    border-radius: var(--hpw-radius);
    padding: 20px;
    align-self: start;
}

.hpw-lead-summary-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--hpw-green-dk);
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.hpw-lead-sum-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 7px 0;
    border-bottom: 1px solid var(--hpw-border);
}

.hpw-lead-sum-row:last-child {
    border-bottom: none;
}

.hpw-lead-sum-row span:first-child {
    color: var(--hpw-muted);
}

.hpw-lead-sum-row span:last-child {
    font-weight: 700;
    color: var(--hpw-text2);
}

/* Form inputs */
.hpw-lead-form-wrap {
    background: var(--hpw-surface);
    border: 1px solid var(--hpw-border);
    border-radius: var(--hpw-radius);
    padding: 24px;
    box-shadow: var(--hpw-shadow);
}

.hpw-input {
    width: 100%;
    background: var(--hpw-bg);
    border: 1.5px solid var(--hpw-border);
    border-radius: 10px;
    color: var(--hpw-text);
    font-family: var(--hpw-font);
    font-size: 14px;
    padding: 11px 14px;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
}

.hpw-input:focus {
    border-color: var(--hpw-green);
    box-shadow: 0 0 0 3px rgba(16,185,129,.12);
    background: var(--hpw-surface);
}

.hpw-input::placeholder {
    color: var(--hpw-muted2);
}

.hpw-textarea {
    min-height: 100px;
    resize: vertical;
}

.hpw-req {
    color: var(--hpw-bad);
}

.hpw-btn-submit {
    width: 100%;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-family: var(--hpw-font);
    font-size: 15px;
    font-weight: 800;
    padding: 14px;
    cursor: pointer;
    letter-spacing: .3px;
    transition: opacity .18s, transform .12s, box-shadow .18s;
    margin-top: 4px;
    box-shadow: 0 4px 16px rgba(16,185,129,.32);
    text-decoration: none;
    display: block;
    text-align: center;
}

.hpw-btn-submit:hover {
    opacity: .92;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16,185,129,.4);
}

.hpw-btn-submit:active {
    transform: translateY(0);
}

.hpw-btn-submit:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.hpw-lead-msg {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    min-height: 20px;
}

.hpw-lead-msg.success { color: var(--hpw-good); }
.hpw-lead-msg.error   { color: var(--hpw-bad); }

/* ============================================================
   ACTION BUTTONS (PDF / Save)
============================================================ */
.hpw-action-row {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.hpw-btn-action {
    flex: 1;
    min-width: 120px;
    padding: 11px 14px;
    border: none;
    border-radius: 10px;
    font-family: var(--hpw-font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: opacity .15s, transform .1s;
    text-decoration: none;
    display: inline-block;
}

.hpw-btn-action:hover { opacity: .85; transform: translateY(-1px); }
.hpw-btn-action:active { transform: translateY(0); }

.hpw-btn-pdf {
    background: var(--hpw-bg);
    border: 1.5px solid var(--hpw-border);
    color: var(--hpw-text2);
}

.hpw-btn-save {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 3px 10px rgba(16,185,129,.28);
}

.hpw-btn-login {
    background: var(--hpw-bg);
    border: 1.5px solid var(--hpw-border);
    color: var(--hpw-muted);
    line-height: 1.3;
}

.hpw-save-msg {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    min-height: 18px;
    text-align: center;
}

.hpw-save-msg.success { color: var(--hpw-good); }
.hpw-save-msg.error   { color: var(--hpw-bad); }

/* ============================================================
   SAVED REPORTS TAB
============================================================ */
.hpw-reports-wrap {
    padding: 28px 28px 36px;
}

.hpw-reports-list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hpw-reports-loading {
    color: var(--hpw-muted2);
    font-size: 13px;
    padding: 24px 0;
    text-align: center;
}

.hpw-report-card {
    background: var(--hpw-surface);
    border: 1.5px solid var(--hpw-border);
    border-radius: var(--hpw-radius);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: border-color .18s, box-shadow .18s;
    box-shadow: var(--hpw-shadow);
}

.hpw-report-card:hover {
    border-color: var(--hpw-green);
    box-shadow: var(--hpw-shadow-lg);
}

.hpw-report-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.hpw-report-info {
    flex: 1;
    min-width: 0;
}

.hpw-report-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--hpw-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hpw-report-meta {
    font-size: 11px;
    color: var(--hpw-muted2);
    margin-top: 3px;
}

.hpw-report-kpis {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.hpw-report-kpi {
    text-align: center;
}

.hpw-report-kpi-val {
    font-size: 15px;
    font-weight: 800;
    color: var(--hpw-green-dk);
}

.hpw-report-kpi-label {
    font-size: 9px;
    color: var(--hpw-muted2);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.hpw-report-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.hpw-report-btn {
    background: none;
    border: 1.5px solid var(--hpw-border);
    border-radius: 8px;
    color: var(--hpw-muted);
    font-family: var(--hpw-font);
    font-size: 12px;
    padding: 6px 10px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}

.hpw-report-btn:hover { color: var(--hpw-text2); border-color: var(--hpw-green); }
.hpw-report-btn.delete:hover { color: var(--hpw-bad); border-color: var(--hpw-bad); }

.hpw-reports-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--hpw-muted);
}

.hpw-reports-empty-icon {
    font-size: 42px;
    margin-bottom: 12px;
}

.hpw-reports-empty p {
    font-size: 14px;
}

.hpw-reports-login-prompt {
    text-align: center;
    padding: 60px 20px;
}

.hpw-reports-login-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.hpw-reports-login-prompt h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--hpw-text);
    margin-bottom: 8px;
}

.hpw-reports-login-prompt p {
    font-size: 14px;
    color: var(--hpw-muted);
    margin-bottom: 24px;
}

/* ============================================================
   MODAL (Save report)
============================================================ */
.hpw-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}

.hpw-modal {
    background: var(--hpw-surface);
    border: 1px solid var(--hpw-border);
    border-radius: 18px;
    padding: 28px 28px 24px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 24px 60px rgba(0,0,0,.18);
}

.hpw-modal-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--hpw-text);
    margin-bottom: 16px;
}

.hpw-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.hpw-modal-btn {
    flex: 1;
    padding: 11px;
    border: none;
    border-radius: 10px;
    font-family: var(--hpw-font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.hpw-modal-btn.confirm {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
}

.hpw-modal-btn.cancel {
    background: var(--hpw-bg);
    color: var(--hpw-muted);
    border: 1.5px solid var(--hpw-border);
}

/* ============================================================
   RESPONSIVE
============================================================ */
/* ============================================================
   TAB: GUIDE (คู่มือ)
============================================================ */

.hpw-tab.hpw-tab-guide {
    background: linear-gradient(135deg, #065f46, #10b981);
    color: #fff;
    font-weight: 800;
    border-radius: 10px;
}
.hpw-tab.hpw-tab-guide.active,
.hpw-tab.hpw-tab-guide:hover {
    background: linear-gradient(135deg, #064e35, #059669);
    color: #fff;
    box-shadow: 0 3px 12px rgba(16,185,129,.35);
}

.hpw-guide-wrap {
    padding: 0 0 40px;
}

.hpw-guide-hero {
    background: linear-gradient(135deg, #064e35 0%, #10b981 60%, #34d399 100%);
    padding: 48px 36px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hpw-guide-hero::before {
    content: '';
    position: absolute;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    top: -80px; right: -60px;
}
.hpw-guide-hero::after {
    content: '';
    position: absolute;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    bottom: -60px; left: -40px;
}
.hpw-guide-hero-icon {
    font-size: 52px;
    margin-bottom: 14px;
    line-height: 1;
    position: relative; z-index: 1;
}
.hpw-guide-hero-title {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 10px;
    position: relative; z-index: 1;
}
.hpw-guide-hero-sub {
    font-size: 15px;
    color: rgba(255,255,255,.85);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
    position: relative; z-index: 1;
}

.hpw-guide-section {
    padding: 32px 32px 0;
}
.hpw-guide-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.hpw-guide-section-icon {
    font-size: 18px;
    width: 40px; height: 40px;
    background: var(--hpw-surface2);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hpw-guide-section-head h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--hpw-text);
}
.hpw-guide-intro-text {
    font-size: 14px;
    color: var(--hpw-muted);
    margin-bottom: 16px;
}

.hpw-guide-card {
    background: var(--hpw-surface);
    border: 1.5px solid var(--hpw-border);
    border-radius: var(--hpw-radius);
    padding: 20px 22px;
    box-shadow: var(--hpw-shadow);
    font-size: 15px;
    line-height: 1.7;
    color: var(--hpw-text2);
}
.hpw-guide-card-highlight {
    border-left: 4px solid var(--hpw-green);
    background: var(--hpw-surface2);
}

.hpw-guide-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.hpw-guide-step {
    display: flex;
    gap: 16px;
    background: var(--hpw-surface);
    border: 1.5px solid var(--hpw-border);
    border-radius: var(--hpw-radius);
    padding: 18px 20px;
    box-shadow: var(--hpw-shadow);
    align-items: flex-start;
}
.hpw-guide-step-num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #065f46, #10b981);
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(16,185,129,.28);
}
.hpw-guide-step-body strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--hpw-text);
    margin-bottom: 5px;
}
.hpw-guide-step-body p {
    font-size: 13px;
    color: var(--hpw-text2);
    line-height: 1.6;
}

.hpw-guide-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.hpw-guide-kpi-card {
    background: var(--hpw-surface);
    border: 1.5px solid var(--hpw-border);
    border-radius: var(--hpw-radius);
    padding: 18px 20px;
    box-shadow: var(--hpw-shadow);
    border-top: 4px solid transparent;
}
.hpw-guide-kpi-irr     { border-top-color: #10b981; }
.hpw-guide-kpi-npv     { border-top-color: #3b82f6; }
.hpw-guide-kpi-payback { border-top-color: #f59e0b; }
.hpw-guide-kpi-yield   { border-top-color: #8b5cf6; }
.hpw-guide-kpi-name {
    font-size: 20px;
    font-weight: 900;
    color: var(--hpw-text);
    margin-bottom: 2px;
}
.hpw-guide-kpi-full {
    font-size: 11px;
    color: var(--hpw-muted);
    margin-bottom: 10px;
}
.hpw-guide-kpi-desc {
    font-size: 13px;
    color: var(--hpw-text2);
    line-height: 1.6;
    margin-bottom: 12px;
}
.hpw-guide-kpi-scale {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.hpw-guide-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.hpw-badge-great { background: #d1fae5; color: #065f46; }
.hpw-badge-ok    { background: #fef3c7; color: #92400e; }
.hpw-badge-bad   { background: #fee2e2; color: #991b1b; }

.hpw-guide-slider-groups {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.hpw-guide-slider-group {
    background: var(--hpw-surface);
    border: 1.5px solid var(--hpw-border);
    border-radius: var(--hpw-radius);
    overflow: hidden;
    box-shadow: var(--hpw-shadow);
}
.hpw-guide-group-label {
    background: var(--hpw-surface2);
    border-bottom: 1.5px solid var(--hpw-border2);
    padding: 10px 18px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #065f46;
}
.hpw-guide-slider-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--hpw-border);
    align-items: baseline;
}
.hpw-guide-slider-row:last-child { border-bottom: none; }
.hpw-guide-slider-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--hpw-text);
}
.hpw-guide-slider-desc {
    font-size: 13px;
    color: var(--hpw-text2);
    line-height: 1.5;
}

.hpw-guide-zone-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hpw-guide-zone-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--hpw-surface);
    border: 1.5px solid var(--hpw-border);
    border-left: 4px solid var(--hpw-border);
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: var(--hpw-shadow);
}
.hpw-guide-zone-row > div { flex: 1; }
.hpw-guide-zone-dot { font-size: 22px; flex-shrink: 0; }
.hpw-guide-zone-row strong { font-size: 14px; font-weight: 800; color: var(--hpw-text); display: block; }
.hpw-guide-zone-row p { font-size: 12px; color: var(--hpw-muted); margin-top: 2px; line-height: 1.4; }
.hpw-zone-great { border-left-color: #10b981; }
.hpw-zone-ok    { border-left-color: #f59e0b; }
.hpw-zone-bad   { border-left-color: #ef4444; }

.hpw-guide-example {
    display: flex;
    align-items: stretch;
    border-radius: var(--hpw-radius);
    overflow: hidden;
    border: 1.5px solid var(--hpw-border);
    box-shadow: var(--hpw-shadow);
}
.hpw-guide-example-inputs,
.hpw-guide-example-results {
    flex: 1;
    padding: 20px 22px;
}
.hpw-guide-example-inputs  { background: var(--hpw-bg); }
.hpw-guide-example-results { background: var(--hpw-surface); }
.hpw-guide-example-arrow {
    display: flex; align-items: center; justify-content: center;
    background: var(--hpw-border);
    font-size: 20px; color: var(--hpw-muted);
    padding: 0 14px;
    font-weight: 900;
}
.hpw-guide-example-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--hpw-muted);
    margin-bottom: 12px;
}
.hpw-guide-example-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--hpw-border);
    color: var(--hpw-text2);
}
.hpw-guide-example-row:last-child { border-bottom: none; }
.hpw-guide-example-row strong { color: var(--hpw-text); font-weight: 700; }
.hpw-guide-result-great strong { color: #059669; }
.hpw-guide-example-verdict {
    margin-top: 14px;
    font-size: 14px;
    font-weight: 800;
    color: #065f46;
    background: #d1fae5;
    border-radius: 8px;
    padding: 8px 14px;
    text-align: center;
}

.hpw-guide-glossary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.hpw-guide-glossary-item {
    background: var(--hpw-surface);
    border: 1.5px solid var(--hpw-border);
    border-radius: 10px;
    padding: 12px 16px;
    box-shadow: var(--hpw-shadow);
}
.hpw-guide-glossary-item dt {
    font-size: 14px;
    font-weight: 900;
    color: var(--hpw-green);
    margin-bottom: 4px;
}
.hpw-guide-glossary-item dd {
    font-size: 12px;
    color: var(--hpw-text2);
    line-height: 1.5;
    margin: 0;
}

.hpw-guide-cta {
    margin: 36px 32px 0;
    background: linear-gradient(135deg, #064e35, #10b981);
    border-radius: 16px;
    padding: 28px 28px;
    text-align: center;
    box-shadow: 0 6px 24px rgba(16,185,129,.22);
}
.hpw-guide-cta p {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255,255,255,.9);
    margin-bottom: 16px;
}
.hpw-guide-cta-btn {
    background: #fff;
    color: #065f46;
    border: none;
    border-radius: 12px;
    font-family: var(--hpw-font);
    font-size: 15px;
    font-weight: 800;
    padding: 13px 28px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    box-shadow: 0 3px 12px rgba(0,0,0,.15);
}
.hpw-guide-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
}

/* ============================================================
   RESPONSIVE — TABLET (≤ 900px)
============================================================ */
@media (max-width: 900px) {
    .hpw-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .hpw-kpi-card:nth-child(2) {
        border-right: none;
    }
    .hpw-body {
        grid-template-columns: 1fr;
    }
    .hpw-panel-inputs {
        border-right: none;
        border-bottom: 1px solid var(--hpw-border);
        max-height: none;
    }
    .hpw-compare-grid {
        grid-template-columns: 1fr;
    }
    .hpw-zoning-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hpw-lead-grid {
        grid-template-columns: 1fr;
    }
    .hpw-tab {
        font-size: 12px;
        padding: 9px 13px 10px;
    }
    .hpw-term-grid {
        grid-template-columns: 1fr;
    }
    .hpw-guide-kpi-grid { grid-template-columns: 1fr 1fr; }
    .hpw-guide-glossary { grid-template-columns: 1fr; }
    .hpw-guide-slider-row { grid-template-columns: 130px 1fr; }
    .hpw-guide-example { flex-direction: column; }
    .hpw-guide-example-arrow { padding: 8px 0; writing-mode: horizontal-tb; }

    /* Summary grid 1 col on tablet */
    .hpw-summary-grid {
        grid-template-columns: 1fr 1fr;
    }
    /* Zoning setback table */
    .hpw-sb-table { font-size: 12px; }
    /* Tax grid */
    .hpw-tax-row { font-size: 12px; }
    /* Report card */
    .hpw-report-card { gap: 10px; }
}

/* ============================================================
   RESPONSIVE — LARGE PHONE (≤ 640px)
============================================================ */
@media (max-width: 640px) {
    /* Wrapper */
    .hpw-wrapper {
        border-radius: 0;
        margin: 0 -16px; /* bleed to edges on narrow screens */
    }

    /* Header */
    .hpw-header {
        padding: 20px 16px 0;
    }
    .hpw-header-title { font-size: 18px; }
    .hpw-header-sub   { font-size: 12px; }
    .hpw-header-badges { gap: 6px; }
    .hpw-header-badge { font-size: 10px; padding: 3px 8px; }

    /* Tab nav — scrollable horizontal row */
    .hpw-tab-nav {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 4px;
        padding: 0 16px;
    }
    .hpw-tab-nav::-webkit-scrollbar { display: none; }
    .hpw-tab {
        flex: 0 0 auto;
        font-size: 11px;
        padding: 8px 12px 9px;
        white-space: nowrap;
    }

    /* KPI row — 2 per row */
    .hpw-kpi-row {
        grid-template-columns: 1fr 1fr;
        gap: 1px;
    }
    .hpw-kpi-card {
        border-right: none;
        padding: 16px 12px 14px;
    }
    .hpw-kpi-value { font-size: 22px; }
    .hpw-kpi-label { font-size: 10px; }
    .hpw-kpi-verdict { font-size: 10px; }

    /* Body — single column, inputs above results */
    .hpw-body { grid-template-columns: 1fr; }
    .hpw-panel-inputs {
        border-right: none;
        border-bottom: 1px solid var(--hpw-border);
        max-height: none;
        padding: 16px;
    }
    .hpw-panel-results { padding: 16px; }

    /* Sliders — tighter */
    .hpw-field { margin-bottom: 14px; }
    .hpw-field-label { font-size: 12px; }
    .hpw-field-val { font-size: 12px; }
    .hpw-section-label { font-size: 10px; margin-top: 16px; }

    /* Summary grid — 1 col */
    .hpw-summary-grid { grid-template-columns: 1fr; }
    .hpw-sum-item { padding: 10px 12px; }
    .hpw-sum-label { font-size: 11px; }
    .hpw-sum-val   { font-size: 14px; }

    /* Chart */
    .hpw-chart-wrap { padding: 12px; }

    /* Verdict banner */
    .hpw-verdict-banner { font-size: 12px; padding: 12px 14px; }

    /* Tax box */
    .hpw-tax-box { padding: 12px; }
    .hpw-tax-row { font-size: 11px; }
    .hpw-info-box { font-size: 12px; }

    /* Compare grid — 1 col */
    .hpw-compare-grid { grid-template-columns: 1fr; }

    /* Zoning */
    .hpw-zoning-grid { grid-template-columns: 1fr; }
    .hpw-zoning-wrap { padding: 16px; }

    /* Lead form */
    .hpw-lead-wrap { padding: 16px; }
    .hpw-lead-grid { grid-template-columns: 1fr; }
    .hpw-lead-heading { font-size: 18px; }

    /* Reports */
    .hpw-reports-wrap { padding: 16px; }
    .hpw-report-card { flex-wrap: wrap; gap: 8px; }
    .hpw-report-kpis { display: none; }
    .hpw-report-actions { flex-direction: row; gap: 6px; }
    .hpw-action-row { flex-direction: column; gap: 8px; }

    /* Modal */
    .hpw-modal { margin: 16px; padding: 20px 16px; width: auto; }
}

/* ============================================================
   RESPONSIVE — SMALL PHONE (≤ 400px) — Samsung A/M, Redmi
============================================================ */
@media (max-width: 400px) {
    .hpw-header { padding: 16px 12px 0; }
    .hpw-panel-inputs,
    .hpw-panel-results { padding: 12px; }

    /* KPI value — smaller */
    .hpw-kpi-value { font-size: 19px; }

    /* Tab text even smaller */
    .hpw-tab { font-size: 10px; padding: 7px 10px 8px; }

    /* Sum val — fit on narrow screen */
    .hpw-sum-val { font-size: 13px; }

    /* Info box */
    .hpw-info-box { font-size: 11px; padding: 8px 10px; }

    /* Tax row — stack label/value */
    .hpw-tax-row {
        flex-direction: column;
        gap: 2px;
        align-items: flex-start;
    }
    .hpw-tax-row span:last-child {
        font-weight: 700;
        color: var(--hpw-text);
    }

    /* Section label */
    .hpw-section-label { letter-spacing: 0; }

    /* Zoning allowed tags — wrap */
    .hpw-allowed-tags { gap: 4px; }
    .hpw-allowed-tag  { font-size: 10px; padding: 2px 6px; }
}

/* ============================================================
   RESPONSIVE — LANDSCAPE PHONE (height ≤ 480px)
============================================================ */
@media (max-height: 480px) and (orientation: landscape) {
    .hpw-panel-inputs { max-height: 65vh; overflow-y: auto; }
    .hpw-kpi-row { grid-template-columns: repeat(3, 1fr); }
    .hpw-kpi-card { padding: 12px 10px; }
    .hpw-kpi-value { font-size: 18px; }

    /* ============================================================
       EXISTING ≤540px rules kept intact below
    ============================================================ */
}

/* ============================================================
   RESPONSIVE — LEGACY ≤540px (preserve original rules)
============================================================ */
@media (max-width: 540px) {
    .hpw-header {
        padding: 22px 18px 0;
    }
    .hpw-kpi-row {
        grid-template-columns: 1fr 1fr;
    }
    .hpw-summary-grid {
        grid-template-columns: 1fr;
    }
    .hpw-kpi-value {
        font-size: 24px;
    }
    .hpw-lead-wrap {
        padding: 24px 18px;
    }
    .hpw-report-kpis { display: none; }
    .hpw-report-card { flex-wrap: wrap; }
    .hpw-action-row  { flex-direction: column; }
    .hpw-tab-nav { flex-wrap: wrap; }
    .hpw-guide-hero { padding: 36px 20px 30px; }
    .hpw-guide-section { padding: 24px 18px 0; }
    .hpw-guide-kpi-grid { grid-template-columns: 1fr; }
    .hpw-guide-slider-row { grid-template-columns: 1fr; gap: 4px; }
    .hpw-guide-cta { margin: 28px 18px 0; padding: 22px 18px; }
}

/* ============================================================
   TOUCH / MOBILE UX improvements (all touch screens)
============================================================ */
@media (hover: none) and (pointer: coarse) {
    /* Larger tap targets for sliders */
    .hpw-slider {
        height: 6px;
    }
    .hpw-slider::-webkit-slider-thumb {
        width: 26px;
        height: 26px;
    }
    .hpw-slider::-moz-range-thumb {
        width: 26px;
        height: 26px;
    }

    /* Select — bigger */
    .hpw-select {
        font-size: 15px;
        padding: 10px 12px;
        min-height: 44px;
    }

    /* Buttons — at least 44px tall (WCAG 2.5.5) */
    .hpw-lead-submit,
    .hpw-btn-pdf,
    .hpw-btn-save,
    .hpw-modal-btn,
    .hpw-report-btn {
        min-height: 44px;
    }

    /* Tab — easier to tap */
    .hpw-tab { min-height: 40px; }

    /* Cheat codes clickable area */
    .hpw-guide-eg-code { padding: 10px 12px; }
}