*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }
    body {
      display: flex; flex-direction: column;
      font-family: system-ui, -apple-system, sans-serif;
      font-size: 14px; background: #f1f5f9; color: #1e293b;
    }

    /* ── Nav ─────────────────────────────────────────────────────────────── */
    nav {
      height: 48px; background: #1e2d3d; display: flex; align-items: center;
      padding: 0 1.25rem; gap: 2rem; flex-shrink: 0;
      border-bottom: 1px solid #0f172a;
    }
    .nav-brand { font-size: 15px; font-weight: 700; color: #93c5fd; letter-spacing: .01em; white-space: nowrap; }
    .nav-tabs  { display: flex; }
    .nav-tab {
      height: 48px; padding: 0 1rem; display: flex; align-items: center;
      color: #94a3b8; cursor: pointer; border-bottom: 3px solid transparent;
      font-size: 13px; font-weight: 500; user-select: none; transition: color .1s;
    }
    .nav-tab:hover { color: #e2e8f0; }
    .nav-tab.active { color: #f8fafc; border-bottom-color: #3b82f6; }
    .nav-user { margin-left: auto; display: flex; align-items: center; gap: .75rem; font-size: 12px; color: #94a3b8; }
    .nav-user a { color: #94a3b8; text-decoration: none; }
    .nav-user a:hover { color: #e2e8f0; }

    /* ── Tag picker ──────────────────────────────────────────────────────────── */
    .tag-chips { display:flex; flex-wrap:wrap; gap:.35rem; }
    .tag-chip {
      position:relative; display:inline-flex; align-items:center;
      padding:.18rem .55rem; border-radius:12px; font-size:11px; font-weight:500;
      cursor:pointer; user-select:none; white-space:nowrap;
      border:1px solid #cbd5e1; background:#fff; color:#475569;
      transition:border-color .1s, background .1s;
    }
    .tag-chip:hover { border-color:#94a3b8; background:#f8fafc; }
    .tag-chip.applied { background:#dbeafe; border-color:#93c5fd; color:#1d4ed8; }
    .tag-chip.applied:hover { background:#bfdbfe; }
    .tag-chip.pending { opacity:.5; pointer-events:none; }
    .tag-chip.retired-state { font-style:italic; border-color:#fbbf24; color:#92400e; background:#fef3c7; }
    .tag-dropdown {
      position:absolute; top:calc(100% + 4px); left:0; z-index:20;
      background:#fff; border:1px solid #e2e8f0; border-radius:6px;
      box-shadow:0 4px 12px rgba(0,0,0,.12); min-width:140px; overflow:hidden;
    }
    .tag-dd-item {
      padding:.35rem .7rem; font-size:12px; cursor:pointer; color:#334155;
      display:flex; align-items:center; gap:.4rem;
    }
    .tag-dd-item:hover { background:#f1f5f9; }
    .tag-dd-item.current { font-weight:600; color:#1d4ed8; }
    .tag-dd-item.default-state::after { content:'default'; font-size:9px; color:#94a3b8; margin-left:auto; }
    .tag-dd-divider { border:none; border-top:1px solid #e2e8f0; margin:.2rem 0; }
    .tag-dd-remove { color:#dc2626; }
    .tag-dd-remove:hover { background:#fee2e2; }

    /* ── Filter chips (list-level handle-then-picker) ───────────────────────── */
    .filter-chips { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.25rem; }
    .filter-chip-wrap { position:relative; display:inline-flex; }
    .filter-chip {
      padding:.18rem .55rem; border-radius:12px; font-size:11px; font-weight:500;
      cursor:pointer; user-select:none; white-space:nowrap; border:1px solid #cbd5e1;
      background:#fff; color:#475569; transition:border-color .1s, background .1s;
    }
    .filter-chip:hover { border-color:#94a3b8; background:#f8fafc; }
    .filter-chip.active.user-tag   { background:#dbeafe; border-color:#93c5fd; color:#1d4ed8; }
    .filter-chip.active.layer-attr { background:#dcfce7; border-color:#86efac; color:#166534; }
    .filter-chip.entry-point       { background:#f0fdf4; border-color:#86efac; color:#166534; }
    .filter-chip.entry-point:hover { background:#dcfce7; }
    .filter-chip.entry-point.active { background:#dcfce7; border-color:#4ade80; font-weight:700; }
    .filter-chip-picker {
      position:absolute; top:calc(100% + 4px); left:0; z-index:30;
      background:#fff; border:1px solid #e2e8f0; border-radius:6px;
      box-shadow:0 4px 12px rgba(0,0,0,.12); min-width:150px; overflow:hidden;
      padding:.25rem 0;
    }
    .filter-chip-opt {
      display:flex; align-items:center; gap:.5rem;
      padding:.3rem .65rem; font-size:12px; cursor:pointer; color:#334155;
      user-select:none;
    }
    .filter-chip-opt:hover { background:#f1f5f9; }
    .filter-chip-opt input[type=checkbox] { cursor:pointer; }
    .filter-chip-slider { padding:.4rem .65rem; }
    .filter-chip-slider-row { display:flex; align-items:center; gap:.5rem; }
    .filter-chip-clear {
      padding:.3rem .65rem; font-size:11px; cursor:pointer; color:#dc2626;
      border-top:1px solid #e2e8f0; margin-top:.2rem;
    }
    .filter-chip-clear:hover { background:#fee2e2; }
    .filter-section { font-size:11px; color:#94a3b8; margin-bottom:.25rem; }
    .filter-group-label { font-size:10px; color:#64748b; margin-top:.5rem; margin-bottom:.1rem; }
    .tag-chip.not-applicable { opacity:.35; cursor:default; }

    /* ── Admin secondary tabs ───────────────────────────────────────────────── */
    .admin-sec-tab {
      height:36px; padding:0 1.1rem; border:none; background:transparent;
      cursor:pointer; font-size:13px; font-weight:500; color:#64748b;
      border-bottom:2px solid transparent; white-space:nowrap;
    }
    .admin-sec-tab:hover { color:#1e293b; }
    .admin-sec-tab.active { color:#1e293b; border-bottom-color:#3b82f6; }

    /* ── Admin tag list & edit ───────────────────────────────────────────────── */
    .tag-list-row {
      padding:.5rem .75rem; border-bottom:1px solid #f1f5f9; cursor:pointer;
      display:flex; flex-direction:column; gap:.25rem;
    }
    .tag-list-row:hover { background:#f8fafc; }
    .tag-list-row.selected { background:#eff6ff; }
    .tag-list-row.deprecated { opacity:.55; }
    .tag-states-preview { font-size:11px; color:#64748b; }
    .tag-usage-preview { font-size:10px; color:#94a3b8; }
    .tag-state-row {
      display:flex; align-items:center; gap:.35rem; padding:.2rem 0;
      font-size:12px;
    }
    .tag-state-handle { color:#94a3b8; font-size:10px; }
    .tag-state-name { flex:1; }
    .tag-state-default { font-size:9px; color:#3b82f6; font-weight:600; text-transform:uppercase; }
    .tag-confirm-overlay {
      position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:200;
      display:flex; align-items:center; justify-content:center;
    }
    .tag-confirm-box {
      background:#fff; border-radius:8px; padding:1.5rem; max-width:400px; width:90%;
      box-shadow:0 8px 30px rgba(0,0,0,.15);
    }

    /* ── Layout ──────────────────────────────────────────────────────────── */
    .main   { flex: 1; overflow: hidden; display: flex; }
    .tab-panel { width: 100%; height: 100%; display: flex; }
    .three-col { display: flex; width: 100%; height: 100%; overflow: hidden; }
    .stub-panel { align-items: center; justify-content: center; color: #94a3b8; }
    /* Section divs inside a flex-column tab (e.g. Town sub-tabs).
       display:flex must live in CSS, not inline style, so Alpine's x-show
       restores flex layout instead of falling back to block. */
    .tab-section { flex: 1; min-height: 0; display: flex; overflow: hidden; }

    /* ── Left column (shared) ────────────────────────────────────────────── */
    .col-left {
      width: 288px; flex-shrink: 0; display: flex; flex-direction: column;
      background: #fff; border-right: 1px solid #e2e8f0;
    }
    .col-left-controls {
      padding: .6rem .75rem; border-bottom: 1px solid #e2e8f0;
      display: flex; flex-direction: column; gap: .45rem; flex-shrink: 0;
    }
    .col-left-list   { flex: 1; overflow-y: auto; }
    .col-left-footer {
      padding: .4rem .75rem; border-top: 1px solid #e2e8f0; flex-shrink: 0;
      display: flex; align-items: center; justify-content: space-between;
      font-size: 11px; color: #64748b; gap: .5rem;
    }

    /* ── Middle column ───────────────────────────────────────────────────── */
    .col-mid { flex: 1; overflow-y: auto; min-width: 0; background: #fafafa; border-right: 1px solid #e2e8f0; }
    .col-mid-inner { padding: 1rem 1.1rem; }

    /* ── Right column ────────────────────────────────────────────────────── */
    .col-right { width: 42%; flex-shrink: 0; display: flex; flex-direction: column; background: #fff; }
    .col-right-header {
      padding: .5rem .9rem; border-bottom: 1px solid #e2e8f0; flex-shrink: 0;
      font-size: 11px; font-weight: 700; color: #94a3b8;
      text-transform: uppercase; letter-spacing: .07em;
    }
    .col-right-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; }

    /* ── Controls ────────────────────────────────────────────────────────── */
    .search-input {
      width: 100%; padding: .38rem .6rem; border: 1px solid #cbd5e1; border-radius: 4px;
      font-size: 13px; outline: none; color: #1e293b;
    }
    .search-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px #bfdbfe; }
    .ctrl-select {
      width: 100%; padding: .28rem .4rem; border: 1px solid #cbd5e1; border-radius: 4px;
      font-size: 12px; outline: none; background: #fff; color: #1e293b;
    }
    .ctrl-select:focus { border-color: #3b82f6; }
    .sort-row { display: flex; gap: .35rem; align-items: center; }
    .sort-label { font-size: 11px; color: #94a3b8; white-space: nowrap; }
    .sort-dir-btn {
      padding: .28rem .55rem; border: 1px solid #cbd5e1; border-radius: 4px;
      background: #fff; cursor: pointer; font-size: 14px; line-height: 1; color: #475569; flex-shrink: 0;
    }
    .sort-dir-btn:hover { background: #f8fafc; }

    /* ── List rows ───────────────────────────────────────────────────────── */
    .list-row {
      padding: .45rem .75rem; border-bottom: 1px solid #f1f5f9; cursor: pointer;
      border-left: 3px solid transparent; transition: background .1s;
    }
    .list-row:hover  { background: #f8fafc; }
    .list-row.selected { background: #eff6ff; border-left-color: #3b82f6; }
    .row-id    { font-size: 10px; color: #94a3b8; letter-spacing: .03em; }
    .row-main  { font-size: 13px; font-weight: 500; line-height: 1.35; color: #0f172a; }
    .row-sub   { font-size: 11px; color: #64748b; margin-top: 1px; }
    .row-kws   { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 3px; }

    /* ── Pagination ──────────────────────────────────────────────────────── */
    .paging-btns { display: flex; gap: .25rem; }
    .paging-btn {
      padding: .18rem .45rem; border: 1px solid #cbd5e1; border-radius: 3px;
      background: #fff; cursor: pointer; font-size: 11px; color: #374151;
    }
    .paging-btn:hover:not(:disabled) { background: #f1f5f9; }
    .paging-btn:disabled { opacity: .4; cursor: default; }
    .paging-page { font-size: 11px; align-self: center; white-space: nowrap; }

    /* ── Sections ────────────────────────────────────────────────────────── */
    .section { margin-bottom: 1.4rem; }
    .section-title {
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .1em; color: #94a3b8;
      padding-bottom: .35rem; margin-bottom: .6rem; border-bottom: 2px solid #e2e8f0;
    }

    /* ── Attr table ──────────────────────────────────────────────────────── */
    .attr-table { width: 100%; border-collapse: collapse; }
    .attr-table tr { border-bottom: 1px solid #f1f5f9; }
    .attr-table td { padding: .28rem .3rem; font-size: 13px; vertical-align: top; }
    .attr-label { color: #64748b; width: 44%; }
    .attr-value { color: #0f172a; font-weight: 500; }

    /* ── Document table ──────────────────────────────────────────────────── */
    .doc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .doc-table th {
      text-align: left; padding: .3rem .45rem; background: #f8fafc;
      color: #64748b; font-weight: 600; font-size: 11px;
      border-bottom: 2px solid #e2e8f0; white-space: nowrap;
    }
    .doc-table td { padding: .32rem .45rem; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
    .doc-row { cursor: pointer; transition: background .1s; }
    .doc-row:hover  { background: #f0f9ff; }
    .doc-row.active { background: #eff6ff; }
    .doc-party { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* ── Badges ──────────────────────────────────────────────────────────── */
    .badge {
      display: inline-block; font-size: 11px; padding: .15rem .45rem;
      border-radius: 3px; font-weight: 500; line-height: 1.4;
    }
    .badge-blue   { background: #dbeafe; color: #1d4ed8; }
    .badge-green  { background: #dcfce7; color: #166534; }
    .badge-gray   { background: #f1f5f9; color: #64748b; }
    .badge-orange { background: #ffedd5; color: #c2410c; }
    .badge-teal   { background: #ccfbf1; color: #0f766e; }
    .badge-purple { background: #ede9fe; color: #6d28d9; }
    .badge-amber  { background: #fef9c3; color: #92400e; }

    /* ── Keyword badges (mini) ───────────────────────────────────────────── */
    .kw-badge {
      font-size: 10px; padding: .1rem .35rem; border-radius: 2px;
      font-weight: 600; line-height: 1.3;
    }
    .kw-cr   { background: #ccfbf1; color: #0f766e; }
    .kw-a97  { background: #ede9fe; color: #6d28d9; }
    .kw-dr   { background: #ffedd5; color: #c2410c; }
    .kw-c61  { background: #dcfce7; color: #166534; }
    .kw-apr  { background: #fef9c3; color: #92400e; }
    .kw-pr   { background: #dbeafe; color: #1d4ed8; }
    .kw-ccr  { background: #f1f5f9; color: #64748b; }

    /* ── Keyword score bars ──────────────────────────────────────────────── */
    .kw-score-row {
      display: grid; grid-template-columns: 200px 1fr 48px;
      align-items: center; gap: .5rem; padding: .25rem 0;
      font-size: 12px; border-bottom: 1px solid #f8fafc;
    }
    .kw-score-row:last-child { border-bottom: none; }
    .kw-bar-track { height: 8px; background: #f1f5f9; border-radius: 4px; overflow: hidden; }
    .kw-bar-fill  { height: 100%; border-radius: 4px; transition: width .3s; }
    .kw-val { text-align: right; font-weight: 600; color: #1e293b; font-size: 11px; }

    /* ── GIS flat layer list ─────────────────────────────────────────────── */
    .gis-llist  { display:flex; flex-direction:column; margin-top:.25rem; }
    .gis-lrow   { padding:.2rem 0; border-bottom:1px solid var(--pn-paper-3); }
    .gis-lrow:last-child { border-bottom:none; }
    .gis-lrow-hd { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
    .gis-lname  { font-size:11px; font-weight:600; color:var(--pn-ink-2); }
    .gis-lname.absent { color:var(--pn-ink-5); font-weight:400; font-style:italic; }
    .gis-nodata { font-size:10px; color:var(--pn-ink-5); font-style:italic; font-family:'IBM Plex Mono',monospace; flex-shrink:0; }
    .gis-lfields { display:grid; grid-template-columns:1fr 1fr; gap:.05rem .5rem; margin-top:.2rem; }
    .gis-lf  { font-size:11px; color:var(--pn-ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .gis-lf b { font-weight:400; color:var(--pn-ink-2); }

    /* ── Compact 2-up grid for short-value sections ──────────────────────── */
    .pn-compact-grid { display:grid; grid-template-columns:1fr 1fr; }
    .pn-compact-cell { padding:.25rem .35rem; border-bottom:1px solid var(--pn-paper-3); border-right:1px solid var(--pn-paper-3); }
    .pn-compact-cell:nth-child(2n) { border-right:none; }
    .pn-compact-k { font-size:10px; color:var(--pn-ink-4); }
    .pn-compact-v { font-size:11px; font-weight:500; color:var(--pn-ink); }
    .pn-compact-v.mono { font-family:'IBM Plex Mono',monospace; font-size:10px; }

    /* ── (legacy stubs kept for map-control refs) ────────────────────────── */
    .gis-group  { border: 1px solid #e2e8f0; border-radius: 4px; overflow: hidden; }
    .gis-group-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: .35rem .6rem; background: #f8fafc; cursor: pointer;
      user-select: none; font-size: 12px; font-weight: 600; color: #374151;
    }
    .gis-group-header:hover { background: #f1f5f9; }
    .gis-group-body { padding: .4rem .6rem; background: #fff; }
    .gis-detail-row { display: grid; grid-template-columns: 150px 1fr; gap: .25rem; padding: .15rem 0; font-size: 12px; border-bottom: 1px solid #f8fafc; }
    .gis-detail-row:last-child { border-bottom: none; }
    .gis-detail-label { color: #64748b; }
    .gis-detail-value { color: #1e293b; font-weight: 500; word-break: break-word; }

    /* ── Empty / loading ─────────────────────────────────────────────────── */
    .empty-state {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      height: 100%; color: #94a3b8; gap: .4rem; padding: 2rem; text-align: center;
    }
    .empty-icon  { font-size: 28px; }
    .loading-msg { display: flex; align-items: center; justify-content: center; padding: 3rem; color: #94a3b8; }

    /* ── PDF / no-scan panel ─────────────────────────────────────────────── */
    .no-scan-panel {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      height: 100%; gap: 1rem; padding: 2rem; text-align: center; color: #64748b;
    }
    .rod-link {
      display: inline-block; padding: .5rem 1.1rem; background: #3b82f6; color: #fff;
      border-radius: 5px; text-decoration: none; font-size: 13px; font-weight: 600;
      border: none; cursor: pointer;
    }
    .rod-link:hover { background: #2563eb; }
    .rod-doc-meta { font-size: 12px; color: #94a3b8; }

    /* ── OCR text ────────────────────────────────────────────────────────── */
    .ocr-text {
      white-space: pre-wrap; word-break: break-word;
      font-family: 'Courier New', monospace; font-size: 11px;
      line-height: 1.6; color: #374151; background: #f8fafc;
      padding: .75rem; border-radius: 4px; max-height: 320px;
      overflow-y: auto; border: 1px solid #e2e8f0;
    }

    /* ── Overview landing page ──────────────────────────────────────────── */
    .ov-page { width: 100%; height: 100%; overflow-y: auto; background: #f4f8f5; }
    .ov-hero {
      padding: 2.25rem 2.5rem 2rem;
      background: linear-gradient(135deg, #1a4731 0%, #2d6a4f 55%, #40916c 100%);
    }
    .ov-hero-eyebrow {
      font-size: 11px; font-weight: 600; letter-spacing: .12em;
      text-transform: uppercase; color: #95d5b2; margin-bottom: .45rem;
    }
    .ov-hero-title { font-size: 26px; font-weight: 800; color: #fff; margin-bottom: .6rem; line-height: 1.2; }
    .ov-hero-lead  { font-size: 13.5px; line-height: 1.72; color: #d8f3dc; max-width: 660px; }
    .ov-layout {
      display: grid; grid-template-columns: 1fr 272px; gap: 2rem;
      padding: 1.75rem 2.5rem 3rem; max-width: 1100px;
    }
    .ov-main { display: flex; flex-direction: column; gap: 2.25rem; }
    .ov-eyebrow {
      font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
      color: #40916c; margin-bottom: .3rem;
    }
    .ov-section-title { font-size: 17px; font-weight: 700; color: #1a4731; margin-bottom: .45rem; }
    .ov-section-lead  { font-size: 13px; line-height: 1.68; color: #475569; margin-bottom: 1rem; }
    .ov-cards { display: flex; flex-direction: column; gap: .65rem; }
    .ov-card {
      background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
      padding: .9rem 1rem; display: flex; gap: .85rem; align-items: flex-start;
      border-left: 3px solid #52b788;
    }
    .ov-badge {
      flex-shrink: 0; width: 30px; height: 30px; border-radius: 7px;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 800;
    }
    .ov-badge-p { background: #d1fae5; color: #065f46; }
    .ov-badge-d { background: #dbeafe; color: #1e40af; }
    .ov-badge-l { background: #fef9c3; color: #854d0e; }
    .ov-badge-t { background: #ede9fe; color: #5b21b6; }
    .ov-card-title { font-size: 13px; font-weight: 700; color: #1a4731; margin-bottom: .2rem; }
    .ov-card-text  { font-size: 12.5px; color: #475569; line-height: 1.65; }
    .ov-steps { display: flex; flex-direction: column; }
    .ov-step  { display: flex; gap: 1rem; align-items: flex-start; }
    .ov-step-num {
      flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
      background: #2d6a4f; color: #fff; font-size: 12px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
    }
    .ov-step-body  { flex: 1; padding-bottom: 1rem; }
    .ov-step-title { font-size: 13px; font-weight: 700; color: #1a4731; margin-bottom: .2rem; }
    .ov-step-text  { font-size: 12.5px; color: #475569; line-height: 1.65; }
    .ov-connector  { width: 2px; height: 1rem; background: #b7e4c7; margin-left: 13px; }
    .ov-sidebar { display: flex; flex-direction: column; gap: .9rem; }
    .ov-sb-card {
      background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.1rem;
    }
    .ov-sb-title { font-size: 13px; font-weight: 700; color: #1a4731; margin-bottom: .5rem; }
    .ov-sb-text  { font-size: 12px; color: #475569; line-height: 1.65; }
    .ov-sb-btn {
      display: block; margin-top: .8rem; padding: .42rem 0; border-radius: 6px;
      font-size: 12px; font-weight: 600; text-align: center; text-decoration: none;
      transition: background .12s;
    }
    .ov-sb-btn-green  { background: #2d6a4f; color: #fff; }
    .ov-sb-btn-green:hover  { background: #1a4731; }
    .ov-sb-btn-light  { background: #ecfdf5; color: #2d6a4f; border: 1px solid #a7f3d0; }
    .ov-sb-btn-light:hover  { background: #d1fae5; }

    /* ── Overview tab ────────────────────────────────────────────────────── */
    .overview-page { width: 100%; height: 100%; overflow-y: auto; padding: 1.5rem; }
    .overview-hdr  { margin-bottom: 1.25rem; }
    .overview-hdr h2  { font-size: 18px; font-weight: 700; color: #0f172a; }
    .overview-hdr p   { font-size: 12px; color: #94a3b8; margin-top: .2rem; }
    .overview-section-hdr {
      grid-column: 1 / -1; font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .1em; color: #64748b; padding: .75rem 0 .3rem;
      border-bottom: 2px solid #e2e8f0;
    }
    .stat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 1rem;
    }
    .stat-card {
      background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
      padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .75rem;
    }
    .stat-card-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; }
    .stat-primary { display: flex; align-items: baseline; gap: .4rem; }
    .stat-big     { font-size: 28px; font-weight: 700; color: #0f172a; line-height: 1; }
    .stat-unit    { font-size: 13px; color: #64748b; }
    .stat-subs    { display: flex; flex-direction: column; gap: .2rem; }
    .stat-sub     { display: flex; justify-content: space-between; font-size: 12px; color: #64748b; padding: .15rem 0; border-bottom: 1px solid #f8fafc; }
    .stat-sub:last-child { border-bottom: none; }
    .stat-sub-val { font-weight: 600; color: #374151; }

    /* breakdown bars */
    .brk-list  { display: flex; flex-direction: column; gap: .3rem; }
    .brk-row   { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; font-size: 12px; margin-bottom: 2px; }
    .brk-label { color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .brk-count { font-weight: 600; color: #1e293b; white-space: nowrap; font-size: 11px; flex-shrink: 0; }
    .brk-bar-wrap { height: 4px; background: #f1f5f9; border-radius: 2px; overflow: hidden; margin-bottom: .45rem; }
    .brk-bar      { height: 100%; background: #3b82f6; border-radius: 2px; }

    /* layer table */
    .layer-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .layer-table td { padding: .25rem .3rem; border-bottom: 1px solid #f8fafc; }
    .layer-table td:last-child { text-align: right; font-weight: 600; }
    .layer-table tr:last-child td { border-bottom: none; }
    .layer-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3b82f6; margin-right: .4rem; }

    /* kw hits table */
    .kw-hits-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .kw-hits-table td { padding: .2rem .3rem; border-bottom: 1px solid #f8fafc; }
    .kw-hits-table td:last-child { text-align: right; }
    .kw-hits-table tr:last-child td { border-bottom: none; }

    /* ── Parcel Navigator (design handoff tokens + layout) ──────────────────── */
    .pn-nav {
      display:flex; width:100%; height:100%; overflow:hidden;
      font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:12px;
      /* design tokens scoped to navigator */
      --pn-ink:#0f1115; --pn-ink-2:#2a2f37; --pn-ink-3:#5a6270;
      --pn-ink-4:#8a93a1; --pn-ink-5:#b8bfc9;
      --pn-rule:#d8dde4; --pn-rules:#b8bfc9;
      --pn-paper:#ffffff; --pn-paper-2:#f6f7f9; --pn-paper-3:#eef0f3;
      --pn-decided:#1f6f43; --pn-decided-bg:#e3f0e8;
      --pn-undec:#8a5a00;   --pn-undec-bg:#fbeecf;
      --pn-na:#5a6270;      --pn-na-bg:#e8eaee;
      --pn-accent:#c14a1a;
      --pn-human:#1a3a8a; --pn-machine:#5a4a2a;
    }
    .pn-left  { width:280px; flex-shrink:0; border-right:1px solid var(--pn-rule); background:var(--pn-paper-2); display:flex; flex-direction:column; overflow:hidden; }
    .pn-center{ flex:1; overflow-y:auto; min-width:0; background:var(--pn-paper); display:flex; flex-direction:column; }
    .pn-right { width:400px; flex-shrink:0; border-left:1px solid var(--pn-rule); background:var(--pn-paper-2); display:flex; flex-direction:column; overflow:hidden; }

    /* Left rail */
    .pn-lctrl { padding:10px 12px 8px; border-bottom:1px solid var(--pn-rule); display:flex; flex-direction:column; gap:8px; overflow-y:auto; flex-shrink:0; max-height:52%; }
    .pn-sinput { width:100%; background:var(--pn-paper); border:1px solid var(--pn-rules); padding:5px 8px; font-size:12px; color:var(--pn-ink); font-family:'IBM Plex Sans',system-ui,sans-serif; outline:none; }
    .pn-sinput:focus { border-color:var(--pn-ink-3); }
    .pn-lmeta  { display:flex; justify-content:space-between; align-items:center; padding:5px 12px; font-size:11px; color:var(--pn-ink-3); border-bottom:1px solid var(--pn-rule); flex-shrink:0; gap:6px; }
    .pn-lcount { color:var(--pn-ink); font-weight:600; font-family:'IBM Plex Mono',monospace; }

    /* Parcel list rows */
    .pn-lrow { display:grid; grid-template-columns:54px 1fr 40px; gap:6px; align-items:center; padding:7px 12px; border-bottom:1px solid var(--pn-rule); cursor:pointer; }
    .pn-lrow:hover { background:var(--pn-paper-3); }
    .pn-lrow.pn-sel { background:var(--pn-paper); border-left:2px solid var(--pn-accent); padding-left:10px; }
    .pn-lid  { font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500; color:var(--pn-ink); overflow:hidden; text-overflow:ellipsis; }
    .pn-lrow.pn-sel .pn-lid { color:var(--pn-accent); }
    .pn-laddr { font-size:11px; font-weight:500; color:var(--pn-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .pn-lname { font-size:10px; color:var(--pn-ink-3); text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .pn-dots  { display:flex; gap:3px; justify-content:flex-end; flex-shrink:0; }
    .pn-dot   { width:7px; height:7px; border:1px solid var(--pn-ink-5); background:var(--pn-paper-3); }
    .pn-dot.on{ background:var(--pn-decided); border-color:var(--pn-decided); }
    .pn-dot.attn { background:var(--pn-undec); border-color:var(--pn-undec); }

    /* Parcel header */
    .pn-head  { padding:16px 22px 14px; border-bottom:1px solid var(--pn-rule); flex-shrink:0; }
    .pn-htitle{ display:flex; align-items:baseline; gap:12px; margin-top:4px; flex-wrap:wrap; }
    .pn-hid   { font-family:'IBM Plex Mono',monospace; font-size:22px; font-weight:600; color:var(--pn-ink); }
    .pn-haddr { font-size:14px; font-weight:500; color:var(--pn-ink); }
    .pn-hvill { font-size:11px; color:var(--pn-ink-3); }
    .pn-hsub  { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; }

    /* Status chips */
    .pn-chip { display:inline-flex; align-items:center; font-family:'IBM Plex Mono',monospace; font-size:10px; padding:1px 6px; text-transform:uppercase; letter-spacing:.04em; border:1px solid currentColor; line-height:1.4; white-space:nowrap; }
    .pn-chip-plain    { background:var(--pn-paper-3); color:var(--pn-ink-2); border-color:var(--pn-rule); }
    .pn-chip-decided  { color:var(--pn-decided); background:var(--pn-decided-bg); }
    .pn-chip-undecided{ color:var(--pn-undec);   background:var(--pn-undec-bg); }
    .pn-chip-na       { color:var(--pn-na);       background:var(--pn-na-bg); }

    /* Decision cards */
    .pn-decisions { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; padding:14px 22px 16px; border-bottom:1px solid var(--pn-rule); flex-shrink:0; }
    .pn-dcard { border:1px solid var(--pn-rule); background:var(--pn-paper); padding:11px 13px; cursor:pointer; display:flex; flex-direction:column; gap:5px; position:relative; }
    .pn-dcard:hover { border-color:var(--pn-ink-3); background:var(--pn-paper-2); }
    .pn-dcard.decided   { border-left:3px solid var(--pn-decided); padding-left:11px; }
    .pn-dcard.undecided { border-left:3px solid var(--pn-undec);   padding-left:11px; background:#fffaf0; }
    .pn-dcard.na        { border-left:3px solid var(--pn-na);      padding-left:11px; cursor:default; }
    .pn-dcard-h  { display:flex; align-items:center; justify-content:space-between; gap:4px; }
    .pn-dcard-lbl{ font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--pn-ink-3); }
    .pn-dcard-val{ font-size:13px; font-weight:500; color:var(--pn-ink); line-height:1.3; }
    .pn-dcard.undecided .pn-dcard-val { color:var(--pn-undec); font-style:italic; }
    .pn-dcard.na        .pn-dcard-val { color:var(--pn-na); }
    .pn-dcard-foot{ display:flex; align-items:center; justify-content:space-between; padding-top:5px; border-top:1px dashed var(--pn-rule); font-size:9px; margin-top:2px; }
    .pn-dcard-scope { font-family:'IBM Plex Mono',monospace; color:var(--pn-ink-4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
    .pn-dcard:hover:not(.na) .pn-dcard-scope { color:var(--pn-accent); }

    /* Section wrapper */
    .pn-section   { padding:14px 22px; border-bottom:1px solid var(--pn-rule); flex-shrink:0; }
    .pn-section-h { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
    .pn-eyebrow   { font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--pn-ink-3); }

    /* Attribute grid */
    .pn-attr-grid  { display:grid; grid-template-columns:1fr 1fr; gap:14px 36px; }
    .pn-ag-title   { font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:600; color:var(--pn-ink-2); padding-bottom:4px; margin-bottom:4px; border-bottom:1px dashed var(--pn-rule); }
    .pn-arow       { display:grid; grid-template-columns:108px 1fr auto; gap:8px; align-items:baseline; padding:4px 0; border-bottom:1px solid var(--pn-paper-3); font-size:12px; }
    .pn-arow:last-child { border-bottom:none; }
    .pn-ak         { color:var(--pn-ink-3); }
    .pn-av         { color:var(--pn-ink); font-weight:500; }
    .pn-av.mono    { font-family:'IBM Plex Mono',monospace; font-size:11px; }
    .pn-aprov      { display:inline-flex; align-items:center; gap:3px; font-size:9px; font-family:'IBM Plex Mono',monospace; white-space:nowrap; color:var(--pn-ink-4); }
    .pn-pdot       { display:inline-block; width:5px; height:5px; flex-shrink:0; }
    .pn-pdot.m     { border:1px solid var(--pn-machine); transform:rotate(45deg); }
    .pn-pdot.h     { background:var(--pn-human); border-radius:50%; }

    /* Right rail */
    .pn-rail-hdr  { display:flex; align-items:center; justify-content:space-between; padding:7px 12px; background:var(--pn-paper-2); border-bottom:1px solid var(--pn-rule); font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--pn-ink-3); flex-shrink:0; }
    .pn-map-wrap  { height:230px; flex-shrink:0; position:relative; overflow:hidden; }
    .pn-strip     { flex-shrink:0; border-top:1px solid var(--pn-rule); overflow:hidden; }
    .pn-strip-row { display:flex; gap:6px; padding:8px 12px; overflow-x:auto; }
    .pn-thumb     { flex:0 0 55px; cursor:pointer; }
    .pn-tart      { width:55px; height:64px; border:1px solid var(--pn-rule); background:var(--pn-paper-3); display:flex; align-items:center; justify-content:center; font-size:18px; }
    .pn-thumb.active .pn-tart { border:2px solid var(--pn-accent); }
    .pn-tname     { font-size:9px; font-family:'IBM Plex Mono',monospace; color:var(--pn-ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
    .pn-viewer    { flex:1; overflow:hidden; display:flex; flex-direction:column; min-height:0; }

    /* Expand modes: right rail fills middle + right */
    .pn-nav.pn-exp-map .pn-center,
    .pn-nav.pn-exp-doc .pn-center { display:none; }
    .pn-nav.pn-exp-map .pn-right,
    .pn-nav.pn-exp-doc .pn-right  { flex:1; width:auto; max-width:none; }
    .pn-nav.pn-exp-map .pn-map-wrap { height:auto; flex:1; }
    .pn-nav.pn-exp-map .pn-strip   { display:none; }
    .pn-nav.pn-exp-map .pn-viewer  { display:none; }
    .pn-nav.pn-exp-doc .pn-map-wrap { display:none; }
    .pn-expand-btn { background:none; border:none; cursor:pointer; color:var(--pn-ink-4); padding:2px 4px; font-size:13px; line-height:1; border-radius:3px; }
    .pn-expand-btn:hover { color:var(--pn-ink); background:var(--pn-paper-3); }

    /* Left rail accordion sections */
    .pn-lsec       { border-bottom:1px solid var(--pn-rule); flex-shrink:0; }
    .pn-lsec-hdr   { display:flex; align-items:center; justify-content:space-between; padding:7px 12px 6px; cursor:pointer; user-select:none; }
    .pn-lsec-hdr:hover { background:var(--pn-paper-3); }
    .pn-lsec-title { font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--pn-ink-2); font-weight:600; }
    .pn-lsec-body  { padding:0 12px 8px; display:flex; flex-direction:column; gap:6px; }
    .pn-lsec-caret { font-size:9px; color:var(--pn-ink-4); }
    .pn-filter-dot { width:5px; height:5px; border-radius:50%; background:var(--pn-accent); flex-shrink:0; }

    /* Links section compact rows */
    .pn-link-row { display:flex; align-items:center; gap:7px; padding:3px 0; cursor:pointer; font-size:11px; color:var(--pn-ink-2); border-radius:2px; }
    .pn-link-row:hover { color:var(--pn-ink); }
    .pn-link-row.active { color:var(--pn-accent); font-weight:500; }
    .pn-link-sub  { font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--pn-ink-3); padding:6px 0 3px; border-top:1px dashed var(--pn-rule); margin-top:4px; display:flex; align-items:center; gap:6px; }
  </style>