color: var(--text-muted);
      margin-top: 2px
    }

    .page-header-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap
    }

    .page-body {
      flex: 1;
      overflow-y: auto;
      padding: 16px 24px 24px
    }

    /* CARDS */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 20px;
      box-shadow: var(--shadow-sm)
    }

    .card-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-dim);
      letter-spacing: .3px;
      text-transform: uppercase;
      margin-bottom: 14px
    }

    .stat-grid {
      display: grid;
      gap: 12px
    }

    .stat-grid-2 {
      grid-template-columns: repeat(2, 1fr)
    }

    .stat-grid-3 {
      grid-template-columns: repeat(3, 1fr)
    }

    .stat-grid-4 {
      grid-template-columns: repeat(4, 1fr)
    }

    .stat-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 16px;
      box-shadow: var(--shadow-sm)
    }

    .stat-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: .5px
    }

    .stat-value {
      font-size: 28px;
      font-weight: 800;
      color: var(--navy);
      line-height: 1.1;
      margin-top: 4px;
      font-family: var(--mono)
    }

    .stat-sub {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 4px
    }

    /* STATUS BADGES */
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 9px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap
    }

    .badge-pending {
      background: #f3f4f6;
      color: #6b7280;
      border: 1px solid #e5e7eb
    }

    .badge-sudah_didata {
      background: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe
    }

    .badge-sp1_diterbitkan {
      background: #fffbeb;
      color: #d97706;
      border: 1px solid #fde68a
    }

    .badge-sp2_diterbitkan {
      background: #fff7ed;
      color: #ea580c;
      border: 1px solid #fed7aa
    }

    .badge-sp3_diterbitkan {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca
    }

    .badge-ditertibkan {
      background: #f0fdf4;
      color: #16a34a;
      border: 1px solid #bbf7d0
    }

    .badge-selesai {
      background: #ecfdf5;
      color: #047857;
      border: 1px solid #6ee7b7
    }

    .badge-menunggu_validasi {
      background: #f5f3ff;
      color: #7c3aed;
      border: 1px solid #ddd6fe
    }

    .badge-bangunan_liar {
      background: #f5f3ff;
      color: #7c3aed;
      border: 1px solid #ddd6fe
    }

    .badge-pkl {
      background: #ecfeff;
      color: #0891b2;
      border: 1px solid #a5f3fc
    }

    .badge-reklame_liar {
      background: #f0fdfa;
      color: #0d9488;
      border: 1px solid #99f6e4
    }

    .badge-tiang_kabel {
      background: #fff7ed;
      color: #c2410c;
      border: 1px solid #fed7aa
    }

    .badge-dieskalasi {
      background: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe
    }

    /* TABLE */
    .table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: var(--r);
      border: 1px solid var(--border)
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px
    }

    thead tr {
      background: var(--surface2)
    }

    th {
      padding: 10px 14px;
      text-align: left;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-dim);
      letter-spacing: .5px;
      text-transform: uppercase;
      border-bottom: 1px solid var(--border);
      white-space: nowrap
    }

    td {
      padding: 10px 14px;
      border-bottom: 1px solid var(--border);
      vertical-align: middle;
      color: var(--text)
    }

    tbody tr:last-child td {
      border-bottom: none
    }

    tbody tr:hover {
      background: var(--surface2)
    }

    .col-check {
      width: 36px;
      text-align: center
    }

    input[type=checkbox] {
      width: 14px;
      height: 14px;
      cursor: pointer;
      accent-color: var(--navy)
    }

    .table-empty {
      text-align: center;
      padding: 40px;
      color: var(--text-muted);
      font-size: 13px
    }

    /* TOOLBAR */
    .toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 14px 24px;
      flex-shrink: 0;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      flex-wrap: wrap
    }

    .toolbar-left {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      flex-wrap: wrap
    }

    .toolbar-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0
    }

    .search-wrap {
      position: relative;
      flex: 1;
      min-width: 160px;
      max-width: 320px
    }

    .search-wrap input {
      padding-left: 14px;
      width: 100%
    }

    .search-icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
      pointer-events: none;
      width: 14px;
      height: 14px;
      display: block
    }

    .search-icon::before {
      content: '';
      position: absolute;
      width: 9px;
      height: 9px;
      border: 2px solid currentColor;
      border-radius: 50%;
      top: 0;
      left: 0
    }

    .search-icon::after {
      content: '';
      position: absolute;
      width: 2px;
      height: 5px;
      background: currentColor;
      bottom: 0;
      right: 0;
      border-radius: 1px;
      transform: rotate(-45deg)
    }

    .search-wrap input {
      padding-left: 32px !important
    }

    select.filter-select {
      padding: 8px 10px;
      border: 1px solid var(--border2);
      border-radius: var(--r);
      font-size: 12px;
      font-family: var(--sans);
      color: var(--text);
      background: var(--surface2);
      cursor: pointer
    }

    .search-wrap .form-input,
    .toolbar .form-input,
    .toolbar .filter-select {
      box-shadow: none
    }

    /* MAP */
    #map-filter-toggle-btn { display: none }

    .map-container {
      flex: 1;
      min-height: 480px;
    }

    #map {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      min-height: 480px;
      background: #eef4fb;
      border-top: 1px solid var(--border)
    }