:root {
      --navy:       #0E2340;
      --navy-mid:   #1A3A6E;
      --blue:       #1565C0;
      --blue-mid:   #1976D2;
      --accent:     #29B6F6;
      --danger:     #C62828;
      --danger-bg:  #FFEBEE;
      --warn:       #BF360C;
      --warn-bg:    #FBE9E7;
      --ok:         #2E7D32;
      --ok-bg:      #E8F5E9;
      --amber:      #E65100;
      --amber-bg:   #FFF3E0;
      --bg:         #EEF2F8;
      --card:       #FFFFFF;
      --border:     #DAE2EF;
      --text:       #18283F;
      --muted:      #5F7089;
      --r:          12px;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
    }

    /* ── Header ───────────────────────────────────────────────────── */
    .site-header {
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
      padding: 12px 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 16px rgba(0,0,0,.3);
      position: sticky; top: 0; z-index: 100;
    }
    .logo { display: flex; align-items: center; justify-content: center; }
    .logo-img { height: 64px; width: auto; }
    .logo-icon {
      width: 36px; height: 36px;
      background: rgba(255,255,255,.13);
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 9px;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px;
    }
    .logo h1 { color: #fff; font-size: 1.2rem; font-weight: 700; letter-spacing: -.2px; }
    .logo .tagline { color: rgba(255,255,255,.55); font-size: .72rem; margin-top: 1px; }
    .site-nav { display: flex; gap: 4px; align-items: center; position: absolute; right: 32px; }
    .site-nav a {
      color: rgba(255,255,255,.65); font-size: .8rem; text-decoration: none;
      padding: 6px 12px; border-radius: 7px; transition: all .15s;
    }
    .site-nav a:hover { background: rgba(255,255,255,.12); color: #fff; }

    /* ── Tenant bar ──────────────────────────────────────────────── */
    .tenant-divider { width: 1px; height: 28px; background: rgba(255,255,255,.18); margin: 0 8px; }
    .tenant-bar { display: flex; align-items: center; gap: 8px; }
    .tenant-bar-logged { display: none; align-items: center; gap: 8px; }
    .tenant-bar-login { display: flex; align-items: center; gap: 6px; }
    .tenant-bar input[type=password] {
      padding: 6px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 7px;
      background: rgba(255,255,255,.08); color: #fff; font-size: .8rem; width: 180px;
    }
    .tenant-bar input::placeholder { color: rgba(255,255,255,.4); }
    .tenant-bar input:focus { outline: none; background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.4); }
    .tenant-btn {
      padding: 6px 12px; background: rgba(41,182,246,.15); color: var(--accent);
      border: 1px solid var(--accent); border-radius: 7px; font-size: .75rem;
      font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap;
    }
    .tenant-btn:hover { background: rgba(41,182,246,.3); color: #fff; }
    .tenant-btn.disconnect { background: rgba(198,40,40,.15); color: #EF5350; border-color: #EF5350; }
    .tenant-btn.disconnect:hover { background: rgba(198,40,40,.3); color: #fff; }
    .tenant-name-badge {
      background: rgba(41,182,246,.15); color: var(--accent); padding: 4px 10px;
      border-radius: 12px; font-size: .75rem; font-weight: 600; max-width: 160px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .tenant-error { color: #EF5350; font-size: .72rem; position: absolute; top: 100%; right: 0; white-space: nowrap; padding-top: 4px; }

    /* ── Layout ───────────────────────────────────────────────────── */
    .main { max-width: 900px; margin: 0 auto; padding: 28px 20px 60px; }

    /* ── Cards ────────────────────────────────────────────────────── */
    .card {
      background: var(--card);
      border-radius: var(--r);
      box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 24px rgba(0,0,0,.07);
      margin-bottom: 20px;
      overflow: hidden;
    }
    .card-body { padding: 24px; }

    /* ── Form ─────────────────────────────────────────────────────── */
    .form-lead {
      font-size: .92rem; font-weight: 700; color: var(--navy);
      margin-bottom: 18px; display: flex; align-items: center; gap: 8px;
    }
    .form-row { display: flex; gap: 12px; }
    .form-group { flex: 1; }
    label {
      display: block;
      font-size: .73rem; font-weight: 700; color: var(--muted);
      text-transform: uppercase; letter-spacing: .5px;
      margin-bottom: 5px;
    }
    input[type=text], input[type=number] {
      width: 100%;
      padding: 11px 14px;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      font-size: .95rem;
      color: var(--text);
      background: #F8FAFD;
      transition: border-color .15s, box-shadow .15s;
    }
    input:focus {
      outline: none;
      border-color: var(--blue);
      background: #fff;
      box-shadow: 0 0 0 3px rgba(21,101,192,.13);
    }
    .form-sep {
      text-align: center; color: var(--muted); font-size: .73rem;
      font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
      margin: 14px 0; display: flex; align-items: center; gap: 10px;
    }
    .form-sep::before, .form-sep::after {
      content: ''; flex: 1; height: 1px; background: var(--border);
    }
    .btn-check {
      width: 100%; padding: 13px;
      background: linear-gradient(135deg, var(--blue) 0%, #0D47A1 100%);
      color: #fff; border: none; border-radius: 9px;
      font-size: 1rem; font-weight: 700; cursor: pointer;
      margin-top: 16px;
      box-shadow: 0 3px 12px rgba(21,101,192,.4);
      transition: opacity .15s, transform .1s, box-shadow .15s;
      letter-spacing: .2px;
    }
    .btn-check:hover  { opacity: .92; transform: translateY(-1px); box-shadow: 0 5px 16px rgba(21,101,192,.45); }
    .btn-check:active { transform: translateY(0); }
    .btn-check:disabled { background: #9EA8B6; box-shadow: none; cursor: not-allowed; transform: none; opacity: 1; }

    /* ── Map ──────────────────────────────────────────────────────── */
    #map-maplibre { height: 430px; }
    .map-controls {
      position: absolute; top: 12px; right: 12px; z-index: 10;
      display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
    }
    .map-controls-btns {
      display: flex; gap: 8px;
    }
    .map-btn {
      background: rgba(14,35,64,.85); color: #fff; border: none; border-radius: 7px;
      padding: 7px 13px; font-size: .78rem; font-weight: 600; cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,.35);
      backdrop-filter: blur(4px);
      transition: background .15s;
    }
    .map-btn:hover { background: rgba(26,58,110,.95); }
    .map-btn.sv   { background: rgba(21,101,192,.88); }
    .map-btn.sv:hover  { background: rgba(13,71,161,.95); }
    .map-btn.sv.active { background: rgba(46,125,50,.9); }

    /* Layer control */
    .map-layer-control {
      display: flex; flex-direction: column; gap: 3px;
      margin-top: 6px;
    }
    .map-layer-control label {
      display: flex; align-items: center; gap: 5px; cursor: pointer;
      user-select: none; font-size: .74rem; font-weight: 600; color: #fff;
      background: rgba(14,35,64,.55); backdrop-filter: blur(6px);
      border-radius: 6px; padding: 4px 10px;
      box-shadow: 0 1px 4px rgba(0,0,0,.25);
      transition: background .15s, opacity .15s;
    }
    .map-layer-control label:hover { background: rgba(26,58,110,.7); }
    .map-layer-control label.lc-off { opacity: .45; }
    .map-layer-control input[type="checkbox"] {
      display: none;
    }
    .map-layer-control .lc-swatch {
      display: inline-block; width: 10px; height: 10px; border-radius: 3px;
      border: 1.5px solid rgba(255,255,255,.5); flex-shrink: 0;
      transition: opacity .15s;
    }
    .map-layer-control label.lc-off .lc-swatch {
      opacity: .35; border-color: rgba(255,255,255,.2);
    }

    /* Zone hover tooltip */
    .zone-hover-popup .maplibregl-popup-content {
      background: rgba(14,35,64,.9); color: #fff; font-size: .78rem;
      padding: 8px 12px; border-radius: 6px; line-height: 1.5;
      box-shadow: 0 2px 10px rgba(0,0,0,.4); backdrop-filter: blur(4px);
    }
    .zone-hover-popup .maplibregl-popup-tip {
      border-top-color: rgba(14,35,64,.9);
    }

    /* Street View */
    #sv-panel {
      display: none; position: relative; height: 480px;
      background: #0E0E1A; border-top: 2px solid var(--blue-mid);
    }
    #sv-pano { width: 100%; height: 100%; }
    #sv-unavail {
      display: none; position: absolute; inset: 0;
      background: #131326; color: #6B7F99;
      align-items: center; justify-content: center;
      font-size: .88rem; flex-direction: column; gap: 12px;
    }
    #sv-timeline {
      display: none; position: absolute; bottom: 0; left: 0; right: 0;
      background: rgba(0,0,0,.75); backdrop-filter: blur(4px);
      padding: 8px 16px; z-index: 5;
      align-items: center; justify-content: center; gap: 12px;
      color: #fff; font-size: .82rem;
    }
    #sv-timeline button {
      background: rgba(255,255,255,.15); border: none; color: #fff;
      border-radius: 50%; width: 32px; height: 32px; cursor: pointer;
      font-size: 1rem; display: flex; align-items: center; justify-content: center;
      transition: background .15s;
    }
    #sv-timeline button:disabled { opacity: .3; cursor: default; }
    #sv-timeline button:hover:not(:disabled) { background: rgba(255,255,255,.3); }
    #sv-timeline .sv-date { font-weight: 600; min-width: 110px; text-align: center; }
    #sv-timeline .sv-counter { font-size: .72rem; color: rgba(255,255,255,.6); }

    /* Analyze building button */
    .sv-analyze-btn {
      position: absolute; top: 12px; left: 12px; z-index: 6;
      background: rgba(21,101,192,.9); color: #fff; border: none;
      border-radius: 7px; padding: 8px 16px; font-size: .82rem;
      font-weight: 600; cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,.4); backdrop-filter: blur(4px);
      transition: background .15s;
    }
    .sv-analyze-btn:hover { background: rgba(13,71,161,.95); }
    .sv-analyze-btn:disabled { opacity: .6; cursor: wait; }

    /* Analysis result block */
    #sv-analysis { display: none; }
    .sv-analysis-loading {
      display: flex; align-items: center; gap: 12px;
      padding: 18px 24px; color: var(--muted); font-size: .85rem;
      background: var(--card-bg); border-top: 2px solid var(--blue-mid);
    }
    .sv-spinner {
      width: 20px; height: 20px; border: 3px solid var(--border);
      border-top-color: var(--accent); border-radius: 50%;
      animation: sv-spin .8s linear infinite; flex-shrink: 0;
    }
    @keyframes sv-spin { to { transform: rotate(360deg); } }
    .sv-analysis-error {
      padding: 16px 24px; color: #E53935; font-size: .85rem;
      background: var(--card-bg); border-top: 2px solid var(--blue-mid);
    }
    .sv-analysis-result {
      padding: 20px 24px; background: var(--card-bg);
      border-top: 2px solid var(--blue-mid); font-size: .85rem; line-height: 1.6;
    }
    .sv-analysis-header {
      display: flex; align-items: center; gap: 16px; margin-bottom: 14px;
    }
    .sv-score-circle {
      width: 56px; height: 56px; border-radius: 50%;
      border: 3px solid; display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem; font-weight: 800; flex-shrink: 0;
    }
    .sv-analysis-summary {
      display: flex; flex-direction: column; gap: 2px;
    }
    .sv-analysis-summary strong { font-size: .95rem; }
    .sv-analysis-meta { font-size: .74rem; color: var(--muted); }
    .sv-analysis-section {
      padding: 6px 0; border-top: 1px solid var(--border);
    }
    .sv-analysis-label {
      font-weight: 700; color: var(--blue-mid); margin-right: 6px;
    }
    .sv-analysis-evo {
      background: rgba(21,101,192,.06); border-radius: 6px;
      padding: 8px 12px; margin-top: 6px;
    }

    /* Info button next to meta */
    .sv-info-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 18px; height: 18px; border-radius: 50%;
      background: var(--blue-mid); color: #fff; font-size: .65rem;
      cursor: pointer; margin-left: 6px; vertical-align: middle;
      font-weight: 700; line-height: 1; user-select: none;
      transition: background .15s; font-style: normal;
    }
    .sv-info-btn:hover { background: var(--navy-mid); }

    /* Vision modal image grid */
    .sv-modal-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 10px; margin-top: 10px;
    }
    .sv-modal-img {
      border-radius: 8px; overflow: hidden; background: #f5f7fa;
      border: 1px solid #e2e8f0;
    }
    .sv-modal-img img {
      width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
    }
    .sv-modal-img span {
      display: block; font-size: .72rem; padding: 6px 8px;
      color: #64748b; text-align: center; line-height: 1.3;
    }

    /* Evolution trend pill (inline) */
    .sv-evo-pill {
      display: inline-block; font-size: .68rem; font-weight: 700;
      color: #fff; padding: 2px 10px; border-radius: 10px;
      vertical-align: middle; margin-right: 4px;
    }
    /* Evolution badge (modal) */
    .sv-evo-badge {
      display: inline-block; font-size: .78rem; font-weight: 700;
      color: #fff; padding: 4px 14px; border-radius: 12px;
      margin-bottom: 8px;
    }
    /* Before/after comparison */
    .sv-evo-compare {
      display: flex; align-items: center; gap: 8px; margin-top: 12px;
    }
    .sv-evo-img {
      flex: 1; border-radius: 8px; overflow: hidden;
      background: #f5f7fa; border: 1px solid #e2e8f0;
    }
    .sv-evo-img img {
      width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
    }
    .sv-evo-img span {
      display: block; font-size: .68rem; padding: 5px 8px;
      color: #64748b; text-align: center; line-height: 1.3;
    }
    .sv-evo-arrow {
      font-size: 1.6rem; color: var(--blue-mid); font-weight: 700;
      flex-shrink: 0;
    }

    /* ── Result ───────────────────────────────────────────────────── */
    #result { display: none; }

    .meta-row {
      padding: 10px 24px;
      border-bottom: 1px solid var(--border);
      font-size: .76rem; color: var(--muted);
      display: flex; flex-wrap: wrap; gap: 16px;
      background: #FAFBFE;
    }
    .meta-row span { display: flex; align-items: center; gap: 4px; }

    /* ── Synthesis banner ────────────────────────────────────────── */
    .synth {
      display: flex; align-items: stretch; gap: 0;
      border-bottom: 2px solid var(--border);
    }
    .synth-left {
      flex: 1; padding: 20px 24px;
    }
    .synth-verdict {
      font-size: 1.15rem; font-weight: 800; margin-bottom: 8px;
      display: flex; align-items: center; gap: 8px;
    }
    .synth-phrases {
      font-size: .88rem; color: var(--muted); line-height: 1.6;
    }
    .synth-phrases div { padding-left: 2px; }
    .synth-score-box {
      width: 140px; display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 16px 12px;
      border-left: 1px solid var(--border);
      background: #FAFBFE;
    }
    .synth-score-num {
      font-size: 3rem; font-weight: 800; line-height: 1;
    }
    .synth-score-denom { font-size: .85rem; color: var(--muted); margin-top: 2px; }
    .synth-score-label {
      display: inline-block; margin-top: 6px;
      padding: 3px 12px; border-radius: 20px;
      font-size: .78rem; font-weight: 700;
    }
    .synth.s-ok   .synth-verdict { color: var(--ok); }
    .synth.s-ok   .synth-score-num { color: var(--ok); }
    .synth.s-ok   { border-bottom-color: #A5D6A7; }
    .synth.s-amb  .synth-verdict { color: var(--amber); }
    .synth.s-amb  .synth-score-num { color: var(--amber); }
    .synth.s-amb  { border-bottom-color: #FFCC80; }
    .synth.s-high .synth-verdict { color: var(--warn); }
    .synth.s-high .synth-score-num { color: var(--warn); }
    .synth.s-high { border-bottom-color: #FFAB91; }
    .synth.s-crit .synth-verdict { color: var(--danger); }
    .synth.s-crit .synth-score-num { color: var(--danger); }
    .synth.s-crit { border-bottom-color: #EF9A9A; }
    .sl-lbl { background: #E8F5E9; color: #2E7D32; }
    .sm-lbl { background: #FFF3E0; color: #E65100; }
    .sh-lbl { background: #FBE9E7; color: #BF360C; }
    .sc-lbl { background: #FFEBEE; color: #C62828; }
    .pse-bars { display: flex; flex-direction: column; gap: 3px; width: 100%; margin-top: 8px; }
    .pse-row { display: flex; align-items: center; gap: 4px; font-size: .72rem; }
    .pse-lbl { width: 12px; font-weight: 700; color: var(--muted); }
    .pse-track { flex: 1; height: 6px; background: #ECEFF1; border-radius: 3px; overflow: hidden; }
    .pse-fill { height: 100%; border-radius: 3px; transition: width .3s; }
    .pse-fill-p { background: #42A5F5; }
    .pse-fill-s { background: #EF5350; }
    .pse-fill-e { background: #FFA726; }
    .pse-val { width: 28px; text-align: right; font-size: .70rem; color: var(--muted); }

    /* ── KPI grid ────────────────────────────────────────────────── */
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border-bottom: 1px solid var(--border);
    }
    .kpi-card {
      padding: 16px 18px;
      border-right: 1px solid var(--border);
      text-align: center;
    }
    .kpi-card:last-child { border-right: none; }
    .kpi-icon { font-size: 1.3rem; margin-bottom: 4px; }
    .kpi-label {
      font-size: .67rem; font-weight: 700; color: var(--muted);
      text-transform: uppercase; letter-spacing: .4px;
      margin-bottom: 6px;
    }
    .kpi-value {
      font-size: 1.35rem; font-weight: 800; color: var(--navy);
      line-height: 1.2;
    }
    .kpi-sub {
      font-size: .72rem; color: var(--muted); margin-top: 4px;
      line-height: 1.3;
    }

    @media (max-width: 700px) {
      .kpi-grid { grid-template-columns: repeat(2, 1fr); }
      .kpi-card:nth-child(2) { border-right: none; }
      .kpi-card:nth-child(1), .kpi-card:nth-child(2) { border-bottom: 1px solid var(--border); }
    }

    /* ── Section titles ──────────────────────────────────────────── */
    .sec {
      padding: 20px 24px 10px;
      font-size: .72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .7px; color: var(--muted);
      display: flex; align-items: center; gap: 7px;
    }
    .sec::after {
      content: ''; flex: 1; height: 1px;
      background: linear-gradient(90deg, var(--border) 0%, transparent 100%);
      margin-left: 6px;
    }

    /* ── Breakdown chips ─────────────────────────────────────────── */
    .bk-row {
      padding: 0 24px 20px;
      display: flex; flex-wrap: wrap; gap: 6px;
    }
    .bk-chip {
      background: var(--bg); border: 1px solid var(--border);
      border-radius: 6px; padding: 5px 11px;
      font-size: .77rem; color: var(--muted);
    }
    .bk-chip b { color: var(--blue); font-weight: 700; }

    /* ── History ──────────────────────────────────────────────────── */
    .history-list { padding: 0 24px 20px; display: flex; flex-direction: column; gap: 8px; }
    .hcard {
      border-radius: 9px; padding: 12px 16px;
      display: flex; flex-direction: column; gap: 5px;
      border-left: 4px solid;
    }
    .hcard.catastrophic { border-color: #C62828; background: #FFF5F5; }
    .hcard.major        { border-color: #E64A19; background: #FFF8F5; }
    .hcard.moderate     { border-color: #F9A825; background: #FFFDE7; }
    .hcard.minor        { border-color: #2E7D32; background: #F1F8E9; }
    .hcard-title { font-weight: 700; font-size: .9rem; color: var(--navy); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
    .hcard-meta  { font-size: .76rem; color: var(--muted); }

    .pill {
      display: inline-block; padding: 2px 9px; border-radius: 20px;
      font-size: .71rem; font-weight: 700;
    }
    .p-danger { background: #C62828; color: #fff; }
    .p-warn   { background: #E64A19; color: #fff; }
    .p-amber  { background: #F9A825; color: #333; }
    .p-ok     { background: #2E7D32; color: #fff; }
    .p-blue   { background: #1565C0; color: #fff; }
    .p-gray   { background: #78909C; color: #fff; }

    /* ── Neighborhood claims ─────────────────────────────────────── */
    .nb-claims-card {
      border-radius: 10px; padding: 16px 20px; margin: 0 24px 12px;
      background: #EBF5FB; border-left: 4px solid #2980B9;
      display: flex; align-items: flex-start; gap: 14px;
    }
    .nb-claims-card .nbc-icon {
      width: 38px; height: 38px; border-radius: 9px; background: #D4E6F1;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
      font-size: 1.1rem;
    }
    .nb-claims-card .nbc-body { flex: 1; }
    .nb-claims-card .nbc-title {
      font-weight: 700; font-size: .88rem; color: #1A5276; margin-bottom: 4px;
    }
    .nb-claims-card .nbc-stats {
      display: flex; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: #2C3E50;
    }
    .nb-claims-card .nbc-stats b { color: #1A5276; }
    .nb-claims-card .nbc-sub {
      font-size: .75rem; color: #7F8C8D; margin-top: 6px;
    }
    .nb-detail-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
      padding: 4px 0;
    }
    .nb-detail-item {
      background: #F0F7FC; border-radius: 8px; padding: 12px 14px; text-align: center;
    }
    .nb-detail-item .nbd-val {
      font-size: 1.1rem; font-weight: 700; color: #1A5276;
    }
    .nb-detail-item .nbd-label {
      font-size: .72rem; color: #7F8C8D; margin-top: 2px;
    }
    .nb-causes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
    .nb-cause-tag {
      display: inline-block; padding: 3px 10px; border-radius: 14px;
      font-size: .75rem; font-weight: 600; background: #D6EAF8; color: #1A5276;
    }

    /* ── Accordions ──────────────────────────────────────────────── */
    .acc {
      border: 1px solid var(--border); border-radius: 9px;
      margin: 0 24px 8px; overflow: hidden;
      background: var(--card);
    }
    .acc summary {
      padding: 12px 16px;
      font-size: .86rem; font-weight: 600; color: var(--navy);
      cursor: pointer; list-style: none;
      display: flex; align-items: center; gap: 8px;
      transition: background .15s;
      user-select: none;
    }
    .acc summary:hover { background: #F5F7FA; }
    .acc summary::before {
      content: '\25B6'; font-size: .65rem; color: var(--muted);
      transition: transform .2s; flex-shrink: 0;
    }
    .acc[open] summary::before { transform: rotate(90deg); }
    .acc summary::-webkit-details-marker { display: none; }
    .acc-count {
      margin-left: auto; background: var(--bg); border: 1px solid var(--border);
      border-radius: 12px; padding: 1px 8px;
      font-size: .7rem; font-weight: 700; color: var(--muted);
    }
    .acc-body { padding: 0 16px 16px; }

    /* ── Zone cards (inside accordion) ───────────────────────────── */
    .zones-list { display: flex; flex-direction: column; gap: 8px; }
    .zone-card {
      display: flex; align-items: center; gap: 12px;
      padding: 11px 15px; border-radius: 9px; border-left: 4px solid;
    }
    .zone-card.ze { border-color: #C62828; background: #FFF5F5; }
    .zone-card.zm { border-color: #E64A19; background: #FFF8F5; }
    .zone-card.zf { border-color: #F9A825; background: #FFFDE7; }

    .hz-badge {
      padding: 3px 11px; border-radius: 20px;
      font-size: .74rem; font-weight: 700; white-space: nowrap;
    }
    .ze .hz-badge { background: #C62828; color: #fff; }
    .zm .hz-badge { background: #E64A19; color: #fff; }
    .zf .hz-badge { background: #F9A825; color: #333; }

    .zone-info { flex: 1; font-size: .83rem; color: var(--muted); }
    .zone-info b { color: var(--text); }
    .depth-tag {
      font-size: .76rem; font-weight: 600;
      background: #E3F2FD; color: #1565C0;
      padding: 3px 9px; border-radius: 20px;
    }

    /* ── Info grid (inside accordions) ───────────────────────────── */
    .info-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 12px;
    }
    .info-chip {
      background: var(--bg); border: 1px solid var(--border);
      border-radius: 9px; padding: 13px 15px;
      display: flex; align-items: flex-start; gap: 10px;
    }
    .ic-icon { font-size: 1.3rem; line-height: 1; padding-top: 1px; }
    .ic-label { font-size: .7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
    .ic-value { font-size: .88rem; font-weight: 600; color: var(--text); margin-top: 3px; }
    .ic-sub   { font-size: .74rem; color: var(--muted); margin-top: 2px; }

    /* Tooltip calcul surface habitable */
    .calc-tooltip-wrap { position: relative; display: inline; }
    .calc-tooltip-btn {
      cursor: pointer; font-size: .72rem; color: #1a73e8; margin-left: 4px;
      border: 1px solid #1a73e8; border-radius: 50%; width: 16px; height: 16px;
      display: inline-flex; align-items: center; justify-content: center;
      font-weight: 700; line-height: 1; vertical-align: middle;
      background: transparent; padding: 0;
    }
    .calc-tooltip-btn:hover { background: #e8f0fe; }
    .calc-tooltip {
      display: none; position: fixed;
      background: #1e293b; color: #f1f5f9; border-radius: 8px; padding: 12px 14px;
      font-size: .76rem; line-height: 1.5; white-space: nowrap; z-index: 10000;
      box-shadow: 0 4px 24px rgba(0,0,0,.35); min-width: 320px; max-width: 420px;
      font-weight: 400; max-height: 80vh; overflow-y: auto;
    }
    .calc-tooltip.visible { display: block; }
    .calc-tooltip::after { display: none; }
    .calc-tooltip .ct-title { font-weight: 700; font-size: .8rem; margin-bottom: 6px; color: #93c5fd; }
    .calc-tooltip .ct-row { display: flex; justify-content: space-between; gap: 12px; }
    .calc-tooltip .ct-sep { border-top: 1px solid #475569; margin: 4px 0; }
    .calc-tooltip .ct-total { font-weight: 700; color: #93c5fd; }
    .calc-tooltip .ct-src-tag { color: #93c5fd; font-size: .72rem; }
    .calc-tooltip .ct-src { font-size: .7rem; color: #94a3b8; }
    .calc-tooltip .ct-section { font-weight: 600; font-size: .72rem; color: #93c5fd; margin: 2px 0 4px; }
    .calc-tooltip .ct-note { font-size: .68rem; color: #94a3b8; font-style: italic; margin: 3px 0 2px; line-height: 1.3; white-space: normal; }
    .calc-tooltip .ct-ai-highlight { background: rgba(22,163,74,.15); border-radius: 4px; padding: 1px 4px; margin: 1px -4px; }


    /* ── Footprint switch (segmented control) ── */
    .ct-fp-switch { display: flex; gap: 0; margin: 4px 0 6px; border-radius: 6px; overflow: hidden; border: 1px solid #475569; }
    .ct-fp-btn {
      flex: 1; padding: 6px 8px; cursor: pointer; text-align: center;
      font-size: .72rem; line-height: 1.3; border: none; background: transparent;
      color: #94a3b8; transition: all .15s;
    }
    .ct-fp-btn + .ct-fp-btn { border-left: 1px solid #475569; }
    .ct-fp-btn:hover:not(.ct-fp-disabled) { background: rgba(148,163,184,.1); }
    .ct-fp-btn .ct-fp-area { font-size: .82rem; font-weight: 700; display: block; }
    .ct-fp-btn .ct-fp-badge { font-size: .6rem; display: block; margin-top: 2px; opacity: .7; }

    /* Sélectionné + recommandé */
    .ct-fp-btn.ct-fp-active-rec { background: #1a73e8; color: #fff; }
    .ct-fp-btn.ct-fp-active-rec .ct-fp-badge { opacity: 1; }
    /* Sélectionné + override (non recommandé) */
    .ct-fp-btn.ct-fp-active-ovr { background: #f59e0b; color: #fff; }
    .ct-fp-btn.ct-fp-active-ovr .ct-fp-badge { opacity: 1; }
    /* Non-sélectionné mais recommandé */
    .ct-fp-btn.ct-fp-rec { color: #93c5fd; border-color: #1a73e8; }
    /* Désactivé (non disponible) */
    .ct-fp-btn.ct-fp-disabled { color: #cbd5e1; cursor: not-allowed; background: rgba(241,245,249,.05); }

    .ct-fp-reason { font-size: .66rem; color: #94a3b8; font-style: italic; margin: 2px 0 4px; line-height: 1.3; white-space: normal; }
    .ct-fp-sat-info { font-size: .66rem; color: #7dd3fc; margin: 2px 0; line-height: 1.3; white-space: normal; }

    /* KPI footprint mini-tag */
    .kpi-fp-tag {
      display: inline-block; font-size: 9px; padding: 1px 5px; border-radius: 6px;
      margin-left: 4px; cursor: pointer; font-weight: 600; vertical-align: middle;
    }
    .kpi-fp-tag.tag-cadgis { background: #1e40af; color: #dbeafe; }
    .kpi-fp-tag.tag-osm { background: #065f46; color: #d1fae5; }

    /* ── Auth modal ── */
    .auth-overlay {
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(10,20,40,0.7); backdrop-filter: blur(6px);
      display: flex; align-items: center; justify-content: center;
    }
    .auth-modal {
      background: #fff; border-radius: 14px; padding: 36px 32px 28px;
      width: 360px; max-width: 92vw; text-align: center;
      box-shadow: 0 8px 40px rgba(0,0,0,.25);
    }
    .auth-logo { margin-bottom: 16px; }
    .auth-title { font-size: 1.1rem; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
    .auth-sub { font-size: .82rem; color: #64748b; margin-bottom: 20px; }
    .auth-input {
      width: 100%; padding: 12px 14px; font-size: .95rem;
      border: 1.5px solid #cbd5e1; border-radius: 8px; outline: none;
      transition: border-color .15s;
    }
    .auth-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(21,101,192,.12); }
    .auth-error { color: #dc2626; font-size: .78rem; min-height: 20px; margin: 8px 0; }
    .auth-btn {
      width: 100%; padding: 12px; font-size: .95rem; font-weight: 600;
      background: linear-gradient(135deg, var(--blue) 0%, var(--navy-mid) 100%);
      color: #fff; border: none; border-radius: 8px; cursor: pointer;
      transition: opacity .15s;
    }
    .auth-btn:hover { opacity: .9; }

    .score-tooltip-wrap { position: relative; display: inline-block; margin-top: 4px; }
    .score-tooltip {
      display: none; position: absolute; bottom: calc(100% + 8px); right: -10px;
      background: #1e293b; color: #f1f5f9; border-radius: 8px; padding: 12px 14px;
      font-size: .76rem; line-height: 1.5; white-space: nowrap; z-index: 1000;
      box-shadow: 0 4px 16px rgba(0,0,0,.25); min-width: 320px;
      font-weight: 400; text-align: left;
    }
    .score-tooltip.visible { display: block; }
    .score-tooltip::after {
      content: ''; position: absolute; top: 100%; right: 18px;
      border: 6px solid transparent; border-top-color: #1e293b;
    }
    .score-tooltip .ct-title { font-weight: 700; font-size: .8rem; margin-bottom: 6px; color: #93c5fd; }
    .score-tooltip .ct-row { display: flex; justify-content: space-between; gap: 12px; }
    .score-tooltip .ct-sep { border-top: 1px solid #475569; margin: 4px 0; }
    .score-tooltip .ct-total { font-weight: 700; color: #93c5fd; }
    .score-tooltip .ct-sub { color: #94a3b8; padding-left: 8px; font-size: .72rem; }

    /* Score modal */
    .score-modal-overlay {
      display: none; position: fixed; top: 0; left: 0;
      width: 100%; height: 100%; background: rgba(0,0,0,0.45);
      z-index: 2000; align-items: center; justify-content: center;
    }
    .score-modal {
      background: #fff; border-radius: 14px; max-width: 640px;
      width: 92%; max-height: 85vh; overflow-y: auto;
      padding: 28px 32px; box-shadow: 0 12px 40px rgba(0,0,0,.25);
      position: relative;
    }
    .score-modal-close {
      position: absolute; top: 14px; right: 18px;
      background: none; border: none; font-size: 1.5rem;
      cursor: pointer; color: #64748b; line-height: 1;
    }
    .score-modal-close:hover { color: #1e293b; }
    .score-modal h2 { margin: 0 0 6px; font-size: 1.1rem; color: #1e293b; }
    .score-modal .sm-intro { color: #64748b; font-size: .88rem; margin-bottom: 18px; line-height: 1.5; }
    .score-modal .sm-section {
      background: #f8fafc; border-radius: 10px; padding: 16px 18px;
      margin-bottom: 14px;
    }
    .score-modal .sm-section-title {
      font-weight: 700; font-size: .9rem; margin-bottom: 8px;
      display: flex; align-items: center; gap: 8px;
    }
    .score-modal .sm-section-title .sm-pct {
      font-size: .78rem; font-weight: 600; padding: 2px 8px;
      border-radius: 10px; color: #fff;
    }
    .sm-pct-p { background: #42A5F5; }
    .sm-pct-s { background: #EF5350; }
    .sm-pct-e { background: #FFA726; }
    .score-modal .sm-item {
      font-size: .85rem; color: #475569; line-height: 1.6;
      padding-left: 4px;
    }
    .score-modal .sm-item::before {
      content: '\2022'; color: #94a3b8; margin-right: 6px;
    }
    .score-modal .sm-formula {
      background: #1e293b; color: #f1f5f9; border-radius: 10px;
      padding: 14px 18px; font-size: .85rem; line-height: 1.6;
      margin-bottom: 10px;
    }
    .score-modal .sm-formula b { color: #93c5fd; }
    .score-modal .sm-coverage {
      text-align: center; font-size: .78rem; color: #94a3b8;
    }
    .score-detail-btn {
      margin-top: 6px; font-size: .72rem; color: #1a73e8;
      background: transparent; border: 1px solid #1a73e8;
      border-radius: 12px; padding: 3px 10px; cursor: pointer;
      white-space: nowrap;
    }
    .score-detail-btn:hover { background: #e8f0fe; }
    /* Periods table */
    .periods-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
    .periods-table th {
      text-align: left; padding: 6px 10px; font-size: .7rem;
      text-transform: uppercase; letter-spacing: .4px;
      color: var(--muted); border-bottom: 2px solid var(--border);
      font-weight: 700;
    }
    .periods-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
    .periods-table tr:last-child td { border-bottom: none; }

    /* Sources */
    .sources-area { padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
    .src-tag {
      background: var(--bg); border: 1px solid var(--border);
      border-radius: 4px; padding: 2px 8px;
      font-size: .72rem; color: var(--muted);
    }
    .missing-note { padding-top: 10px; font-size: .73rem; color: var(--muted); font-style: italic; }

    /* ── Micro-topographie ────────────────────────────────────── */
    .topo-explanation { display: flex; flex-direction: column; gap: 6px; }
    .topo-sentence {
      border-left: 3px solid var(--blue);
      border-radius: 0 7px 7px 0;
      padding: 9px 13px;
      font-size: .86rem; font-weight: 500; color: #0D47A1;
      background: #E3F2FD;
    }
    .topo-sentence.warn { background: #FFF3E0; border-color: #E65100; color: #BF360C; }
    .topo-sentence.ok   { background: #E8F5E9; border-color: #2E7D32; color: #1B5E20; }
    .topo-neutral { font-size: .83rem; color: var(--muted); font-style: italic; }

    /* States */
    .empty { padding: 12px 0; color: var(--muted); font-size: .85rem; font-style: italic; }
    .spinner {
      text-align: center; padding: 36px 24px; color: var(--muted); font-size: .95rem;
    }
    .spin { font-size: 1.6rem; animation: rot 1s linear infinite; display: inline-block; margin-bottom: 8px; }
    @keyframes rot { to { transform: rotate(360deg); } }
    .err {
      margin: 0; padding: 16px 24px;
      color: var(--danger); font-size: .88rem;
    }

    /* ── FAB Export PDF ───────────────────────────────────────── */
    #btn-export-pdf {
      display: none;
      position: fixed;
      bottom: 28px;
      right: 28px;
      z-index: 500;
      align-items: center;
      gap: 9px;
      background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%);
      color: #fff;
      border: none;
      border-radius: 50px;
      padding: 13px 22px 13px 18px;
      font-size: .88rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(21,101,192,.45), 0 1px 4px rgba(0,0,0,.2);
      letter-spacing: .2px;
      transition: transform .15s, box-shadow .15s, background .15s;
    }
    #btn-export-pdf:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(21,101,192,.55), 0 2px 8px rgba(0,0,0,.2);
      background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
    }
    #btn-export-pdf:active { transform: translateY(0); }
    #btn-export-pdf.loading {
      opacity: .75; cursor: wait; pointer-events: none;
    }
    #btn-export-pdf .pdf-icon { flex-shrink: 0; }

/* ── TEMP: Vision debug modal ────────────────────────── */
.vd-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.65);
  z-index: 20000; display: flex; justify-content: center; align-items: flex-start;
  overflow-y: auto; padding: 30px 10px;
}
.vd-modal {
  background: #fff; border-radius: 12px; max-width: 900px; width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,.3); position: relative;
}
.vd-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px; border-bottom: 1px solid #e5e7eb;
  background: #0E2340; color: #fff; border-radius: 12px 12px 0 0;
}
.vd-modal-header h2 { margin: 0; font-size: 1.1rem; }
.vd-close { background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; }
.vd-body { padding: 20px 24px; max-height: 80vh; overflow-y: auto; }
.vd-section { margin-bottom: 20px; }
.vd-section-title {
  font-weight: 700; font-size: .95rem; color: #0E2340;
  margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.vd-step-badge {
  background: #1565C0; color: #fff; font-size: .7rem;
  padding: 2px 8px; border-radius: 10px; font-weight: 600;
}
.vd-images {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 0;
}
.vd-images img {
  height: 180px; border-radius: 8px; border: 2px solid #e5e7eb;
  object-fit: cover; flex-shrink: 0;
}
.vd-images .vd-img-label {
  font-size: .7rem; color: #6b7280; text-align: center; margin-top: 2px;
}
.vd-pre {
  background: #f3f4f6; border-radius: 8px; padding: 12px;
  font-family: 'Consolas', 'Courier New', monospace; font-size: .78rem;
  white-space: pre-wrap; word-break: break-word; max-height: 250px;
  overflow-y: auto; border: 1px solid #e5e7eb; color: #1f2937;
}
.vd-result-grid {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px;
}
.vd-result-item {
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px;
  padding: 8px 14px; text-align: center;
}
.vd-result-item.warn { background: #fff7ed; border-color: #fed7aa; }
.vd-result-item .vd-val { font-size: 1.3rem; font-weight: 700; color: #0E2340; }
.vd-result-item .vd-lbl { font-size: .72rem; color: #6b7280; }
.vd-actions {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px;
}
.vd-action-badge {
  background: #dbeafe; color: #1e40af; font-size: .72rem;
  padding: 2px 8px; border-radius: 6px; font-weight: 600;
}
.vd-prompt-label {
  font-size: .8rem; color: #6b7280; margin-bottom: 4px; font-weight: 600;
}
.vd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #0E2340; color: #fff; border: none; border-radius: 8px;
  padding: 8px 16px; font-size: .82rem; font-weight: 600;
  cursor: pointer; margin-top: 10px;
}
.vd-btn:hover { background: #1A3A6E; }

    /* ── Burger menu ─────────────────────────────────────────────── */
    .burger-btn {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px;
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 110;
      border-radius: 6px;
      transition: background .15s;
    }
    .burger-btn:hover { background: rgba(255,255,255,.12); }
    .burger-btn .burger-bar {
      display: block;
      width: 22px;
      height: 2px;
      background: rgba(255,255,255,.85);
      border-radius: 2px;
      transition: transform .25s, opacity .2s;
    }
    .burger-btn .burger-bar + .burger-bar { margin-top: 5px; }

    /* Burger animation when open */
    .burger-btn.open .burger-bar:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }
    .burger-btn.open .burger-bar:nth-child(2) {
      opacity: 0;
    }
    .burger-btn.open .burger-bar:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    /* ── Responsive mobile ───────────────────────────────────────── */
    @media (max-width: 768px) {
      .site-header {
        padding: 10px 16px;
      }
      .logo-img {
        height: 44px;
      }
      .burger-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        left: auto;
        background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
        flex-direction: column;
        align-items: stretch;
        padding: 12px 16px;
        gap: 4px;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 8px 24px rgba(0,0,0,.35);
        min-width: 260px;
        z-index: 105;
      }
      .site-nav.open {
        display: flex;
      }
      .site-nav a {
        display: block;
        width: 100%;
        padding: 10px 14px;
        font-size: .85rem;
        border-radius: 7px;
        color: rgba(255,255,255,.8);
      }
      .site-nav a:hover {
        background: rgba(255,255,255,.12);
        color: #fff;
      }
      .tenant-divider {
        width: 100%;
        height: 1px;
        margin: 6px 0;
      }
      .tenant-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 100%;
      }
      .tenant-bar-login {
        flex-direction: column;
        gap: 8px;
      }
      .tenant-bar input[type=password] {
        width: 100%;
      }
      .tenant-btn {
        width: 100%;
        text-align: center;
        padding: 9px 12px;
      }
      .tenant-bar-logged {
        flex-direction: column;
        gap: 8px;
      }
      .tenant-name-badge {
        max-width: 100%;
        text-align: center;
      }
      .tenant-error {
        position: static;
        padding-top: 4px;
      }

      /* Smaller main padding */
      .main { padding: 16px 12px 60px; }

      /* Synthesis banner stacks on small screens */
      .synth { flex-direction: column; }
      .synth-score-box {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--border);
        flex-direction: row;
        gap: 12px;
        padding: 12px 16px;
      }

      /* FAB export smaller on mobile */
      #btn-export-pdf {
        right: 14px;
        bottom: 14px;
        padding: 10px 16px 10px 14px;
        font-size: .8rem;
      }
    }