:root {
    --bg: #F3F4F8;
    --ink: #0B1524;
    --sidebar-bg: #0B1524;
    --paper: #FFFFFF;
    --text-dark: #1A2233;
    --text-muted: #64748B;
    --line: #E7EAF0;
    --gold: #B8862E;
    --gold-soft: #F3E7CE;
    --performing: #128A57;
    --performing-bg: #E3F7EC;
    --watch: #C6791E;
    --watch-bg: #FCEFDC;
    --risk: #C63450;
    --risk-bg: #FBE7EC;
    --radius-lg: 20px;
    --radius-md: 14px;
    --shadow-card: 0 6px 18px rgba(11,21,36,0.07);
    --shadow-hover: 0 14px 30px rgba(11,21,36,0.13);
    /* Note: class names kept as grad-purple/grad-blue for JS compatibility —
       grad-purple now renders the navy "hero" gradient, grad-blue now
       renders the gold gradient. Only the colors changed, not the classes. */
    --grad-purple: linear-gradient(135deg, #1D4373 0%, #0B1524 100%);
    --grad-blue: linear-gradient(135deg, #D9A544 0%, #B8862E 100%);
    --grad-green: linear-gradient(135deg, #34B87A 0%, #0F7A4E 100%);
    --grad-amber: linear-gradient(135deg, #E8A23D 0%, #C6791E 100%);
    --grad-red: linear-gradient(135deg, #E0526E 0%, #AC1F3C 100%);
    --grad-mint: linear-gradient(135deg, #4FCFA0 0%, #1E9E75 100%);
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg);
    color: var(--text-dark);
  }
  .serif { font-family: inherit; }
  .app {
    display: flex;
    min-height: 100vh;
  }

  /* ---------------- Sidebar ---------------- */
  .sidebar {
    width: 252px;
    flex-shrink: 0;
    background: var(--sidebar-bg);
    color: #C9C9D6;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    margin: 14px 0 14px 14px;
    border-radius: 26px;
    overflow: hidden;
  }
  .sidebar-brand {
    padding: 26px 22px 18px 22px;
  }
  .sidebar-brand .name {
    font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, serif;
    font-size: 21px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.01em;
  }
  .sidebar-brand .tagline {
    font-size: 11.5px;
    color: #83839A;
    margin-top: 3px;
    line-height: 1.4;
  }
  .sidebar-nav {
    flex: 1;
    padding: 10px 14px;
    overflow-y: auto;
  }
  .nav-group-label {
    font-size: 11px;
    color: #5A5A70;
    padding: 14px 10px 6px 10px;
    font-weight: 600;
  }
  .nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13.5px;
    color: #A0A0B4;
    cursor: pointer;
    margin-bottom: 3px;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .nav-item:hover { background: rgba(255,255,255,0.06); color: #FFFFFF; }
  .nav-item.active {
    background: #FFFFFF;
    color: var(--ink);
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  }
  .nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.9; }
  .sidebar-footer {
    padding: 14px 20px 20px 20px;
    font-size: 10.5px;
    color: #55556A;
    line-height: 1.6;
  }
  .gov-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
  }
  .gov-badge {
    font-size: 9.5px;
    color: #9494AC;
    background: rgba(255,255,255,0.06);
    padding: 3px 9px;
    border-radius: 20px;
  }

  /* ---------------- Main content ---------------- */
  .main {
    flex: 1;
    min-width: 0;
  }
  .demo-banner {
    background: var(--gold-soft);
    color: #6B4E17;
    font-size: 12px;
    padding: 8px 32px;
    text-align: center;
    margin: 14px 14px 0 14px;
    border-radius: 14px;
  }
  .content {
    padding: 24px 36px 60px 36px;
    max-width: 1280px;
  }
  .breadcrumb {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 6px;
  }
  .breadcrumb span.current { color: var(--text-dark); font-weight: 600; }
  .breadcrumb .sep { margin: 0 6px; color: #C3C3D2; }
  .page-title {
    font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--ink);
    margin: 0 0 4px 0;
  }
  .page-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 26px;
  }

  /* ---------------- Cards ---------------- */
  .card {
    background: var(--paper);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
  }
  .kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 28px;
  }
  .kpi-card {
    background: var(--paper);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 20px 20px 18px 20px;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
  /* Restrained institutional treatment: white card + colored left accent
     bar, not a full gradient fill. Keeps color-coding for fast scanning
     without reading as a "flashy startup" gradient dashboard. */
  .kpi-card.grad-purple { border-left: 4px solid var(--ink); }
  .kpi-card.grad-blue { border-left: 4px solid var(--gold); }
  .kpi-card.grad-green { border-left: 4px solid var(--performing); }
  .kpi-card.grad-amber { border-left: 4px solid var(--watch); }
  .kpi-card.grad-red { border-left: 4px solid var(--risk); }
  .kpi-card.grad-mint { border-left: 4px solid var(--performing); }
  .kpi-card.grad-purple .kpi-value { color: var(--ink); }
  .kpi-card.grad-blue .kpi-value { color: var(--gold); }
  .kpi-card.grad-green .kpi-value, .kpi-card.grad-mint .kpi-value { color: var(--performing); }
  .kpi-card.grad-amber .kpi-value { color: var(--watch); }
  .kpi-card.grad-red .kpi-value { color: var(--risk); }
  .kpi-value {
    font-family: inherit;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.1;
  }
  .kpi-value.gold { color: var(--gold); }
  .kpi-value.performing { color: var(--performing); }
  .kpi-value.watch { color: var(--watch); }
  .kpi-value.risk { color: var(--risk); }
  .kpi-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 5px;
  }

  .section {
    margin-bottom: 28px;
  }
  .section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .section-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .section-note {
    font-size: 12px;
    color: var(--text-muted);
  }

  .health-bar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
  .health-bar-label { width: 100px; font-size: 13px; font-weight: 500; color: var(--text-dark); flex-shrink: 0; }
  .health-bar-track { flex: 1; height: 16px; background: #F0F0F7; border-radius: 20px; overflow: hidden; }
  .health-bar-fill { height: 100%; border-radius: 20px; }
  .health-bar-pct { width: 50px; text-align: right; font-size: 13px; font-weight: 700; color: var(--text-dark); }

  .province-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
  }
  .province-card {
    background: var(--paper);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 16px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .province-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
  .province-name { font-size: 13px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
  .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

  table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  table.data-table th {
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted);
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
  }
  table.data-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    color: var(--text-dark);
  }
  table.data-table tr:last-child td { border-bottom: none; }
  table.data-table tr.clickable { cursor: pointer; }
  table.data-table tr.clickable:hover { background: #FAFAFD; }

  .badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 20px;
  }
  .badge-performing { background: var(--performing-bg); color: var(--performing); }
  .badge-watch { background: var(--watch-bg); color: var(--watch); }
  .badge-risk { background: var(--risk-bg); color: var(--risk); }
  .badge-neutral { background: #F0F0F7; color: var(--text-muted); }

  button.btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 30px;
    border: none;
    background: #F0F0F7;
    color: var(--text-dark);
    cursor: pointer;
    transition: background 0.15s ease;
  }
  button.btn.primary { background: var(--ink); color: white; }
  button.btn:hover { background: #E4E4EF; }
  button.btn.primary:hover { background: #000; }

  .filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
  .filter-bar select, .filter-bar input {
    font-family: inherit;
    font-size: 12.5px;
    padding: 9px 14px;
    border-radius: 30px;
    border: none;
    background: var(--paper);
    box-shadow: var(--shadow-card);
    color: var(--text-dark);
  }

  .fact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .fact-item { }
  .fact-label { font-size: 11.5px; color: var(--text-muted); margin-bottom: 3px; }
  .fact-value { font-size: 14px; font-weight: 700; color: var(--text-dark); }

  .score-ring-wrap { display: flex; align-items: center; gap: 20px; }
  .score-ring { position: relative; width: 92px; height: 92px; flex-shrink: 0; }
  .score-ring svg { transform: rotate(-90deg); }
  .score-ring .score-num {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: inherit; font-size: 24px; font-weight: 800; color: var(--ink);
  }

  .flow-arrow { text-align: center; color: var(--text-muted); font-size: 20px; margin: 6px 0; }

  .entity-card { background: var(--paper); border: none; box-shadow: var(--shadow-card); border-radius: var(--radius-lg); padding: 22px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
  .entity-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
  .entity-name { font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, serif; font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
  .entity-desc { font-size: 12.5px; color: var(--text-muted); margin-bottom: 14px; }
  .entity-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .entity-stats .val { font-size: 18px; font-weight: 800; font-family: inherit; }
  .entity-stats .lbl { font-size: 11px; color: var(--text-muted); }

  .alert-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--paper); border: none; box-shadow: var(--shadow-card);
    border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 10px; cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .alert-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
  .alert-count { font-family: inherit; font-size: 22px; font-weight: 800; color: var(--risk); width: 70px; flex-shrink: 0; }

  .report-card { background: var(--paper); border: none; box-shadow: var(--shadow-card); border-radius: var(--radius-lg); padding: 20px; }
  .report-title { font-size: 14px; font-weight: 700; color: var(--text-dark); margin-bottom: 14px; }
  .report-actions { display: flex; gap: 8px; }

  .map-box {
    border: none; border-radius: var(--radius-md); padding: 13px 18px; box-shadow: var(--shadow-card);
    text-align: center; background: var(--paper); font-size: 13px; font-weight: 700; color: var(--text-dark);
  }
  .map-box.hub { background: var(--ink); color: white; }
  .map-box.edims { background: var(--ink); color: #FFFFFF; border: 2px solid var(--gold); font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, serif; font-size: 17px; font-weight: 700; }
  .map-row { display: flex; justify-content: center; gap: 16px; margin: 10px 0; flex-wrap: wrap; }
  .map-connector { display: flex; justify-content: center; color: #C3C3D2; font-size: 18px; margin: -4px 0; }

  .tag-conceptual { font-size: 10.5px; color: var(--gold); background: var(--gold-soft); padding: 3px 10px; border-radius: 10px; margin-left: 8px; font-weight: 700; }

  /* ---------------- Responsive ---------------- */
  @media (max-width: 1180px) {
    .kpi-grid { grid-template-columns: repeat(3, 1fr); }
    .province-grid { grid-template-columns: repeat(3, 1fr) !important; }
  }
  @media (max-width: 900px) {
    .app { flex-direction: column; }
    .sidebar {
      width: auto;
      height: auto;
      position: sticky;
      top: 8px;
      flex-direction: row;
      align-items: center;
      z-index: 50;
      margin: 8px;
    }
    .sidebar-brand {
      padding: 12px 14px;
      flex-shrink: 0;
    }
    .sidebar-brand .tagline { display: none; }
    .sidebar-nav {
      display: flex;
      flex-direction: row;
      overflow-x: auto;
      padding: 8px 10px;
      flex: 1;
    }
    .nav-item {
      flex-direction: column;
      gap: 3px;
      white-space: nowrap;
      font-size: 10.5px;
      padding: 8px 12px;
      text-align: center;
    }
    .nav-item svg { width: 15px; height: 15px; }
    .sidebar-footer { display: none; }
    .demo-banner { margin: 8px; }
    .content { padding: 18px 16px 40px 16px; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .province-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .fact-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .entity-stats { grid-template-columns: repeat(2, 1fr) !important; }
    div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
    div[style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; }
    .page-title { font-size: 22px; }
    .health-bar-label { width: 76px; font-size: 12px; }
    table.data-table { font-size: 12px; }
  }

  /* ---------------- Field Official (mobile) mode ---------------- */
  .field-header {
    background: var(--sidebar-bg); color: #FFF; padding: 16px 18px;
    display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 10;
  }
  .field-header .back { cursor: pointer; font-size: 20px; opacity: 0.8; }
  .field-header .title { font-family: Georgia, serif; font-size: 17px; font-weight: 700; flex: 1; }
  .field-body { padding: 16px; max-width: 520px; margin: 0 auto; padding-bottom: 90px; }
  .field-card {
    background: var(--paper); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
    padding: 14px 16px; margin-bottom: 10px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  }
  .field-card .name { font-weight: 700; font-size: 14px; color: var(--ink); }
  .field-card .meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
  .field-search { width: 100%; padding: 12px 16px; border-radius: 30px; border: none; box-shadow: var(--shadow-card); font-size: 14px; margin-bottom: 14px; }
  .field-q-label { font-size: 13.5px; font-weight: 700; color: var(--ink); margin: 18px 0 8px 0; }
  .field-options { display: flex; gap: 8px; }
  .field-option {
    flex: 1; padding: 14px 8px; text-align: center; border-radius: var(--radius-md);
    background: var(--paper); box-shadow: var(--shadow-card); font-size: 12.5px; font-weight: 600; color: var(--text-dark);
    cursor: pointer; border: 2px solid transparent;
  }
  .field-option.selected { border-color: var(--ink); background: var(--bg); }
  .field-input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
  .field-input-row input, .field-textarea {
    width: 100%; padding: 12px 14px; border-radius: 12px; border: none; box-shadow: var(--shadow-card);
    font-size: 14px; font-family: inherit;
  }
  .field-textarea { min-height: 90px; resize: vertical; }
  .field-submit-bar {
    position: fixed; bottom: 0; left: 0; right: 0; background: #FFF; padding: 14px 18px;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08); max-width: 520px; margin: 0 auto;
  }
  .field-btn-fake { width: 100%; padding: 8px; border-radius: 10px; border: 1.5px dashed var(--line); background: var(--bg); font-size: 12.5px; color: var(--text-muted); text-align: center; margin-top: 8px; cursor: pointer; }