:root{
  --bg: #f3f4f6;
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --shadow: 0 10px 30px rgba(0,0,0,.06);
  --radius: 16px;
  --focus: 0 0 0 3px rgba(59,130,246,.35);
  --link: #2563eb;
  --btn: #111827;
  --btnText: #fff;
}

html[data-theme="dark"]{
  --bg: #0b1220;
  --card: #0f1a2b;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: rgba(255,255,255,.12);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --link: #93c5fd;
  --btn: #e5e7eb;
  --btnText: #0b1220;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a{ color: var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }

.pc-main{ padding: 18px 14px 40px; }

.pc-page{ max-width: 1180px; margin: 0 auto; }

.pc-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.pc-main-card{ padding: 16px; }

.pc-subcard{ padding: 14px; box-shadow:none; }

.pc-grid-2{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 14px;
}
.pc-grid-2 > *{ min-width:0; }

/* Scroll wrapper for wide tables/charts */
.pc-overflow{ overflow:auto; max-width:100%; }

@media (max-width: 980px){
  .pc-grid-2{ grid-template-columns: 1fr; }
}

.pc-stack{ display:flex; flex-direction:column; gap: 12px; }

.pc-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

h1,h2,h3{ margin:0 0 10px; }
h2{ font-size: 18px; }
.pc-muted{ color: var(--muted); }
.pc-note{ margin-top: 12px; padding: 10px; border: 1px dashed var(--border); border-radius: 12px; }

.pc-kv{
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.pc-kv > div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.pc-kv span{ color: var(--muted); font-size: 13px; }
.pc-kv strong{ font-weight: 650; }

.pc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor:pointer;
  font-weight: 600;
}
.pc-btn:hover{ filter: brightness(0.98); }
.pc-btn:focus{ outline:none; box-shadow: var(--focus); }

.pc-btn-primary{
  background: var(--btn);
  color: var(--btnText);
  border-color: transparent;
}
.pc-btn-ghost{
  background: transparent;
}

.pc-icon-btn{
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.pc-icon-btn:focus{ outline:none; box-shadow: var(--focus); }

/* Modal */
.pc-modal{ display:none; }
.pc-modal.is-open{ display:block; }
.pc-modal-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.45);
}
.pc-modal-dialog{
  position:fixed;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: min(720px, calc(100vw - 26px));
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.pc-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.pc-modal-body{ padding: 14px; }
.pc-modal-actions{ display:flex; gap: 10px; justify-content:flex-end; margin-top: 12px; }

.pc-form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 720px){ .pc-form-grid{ grid-template-columns:1fr; } }

label{ display:flex; flex-direction:column; gap: 6px; font-weight: 600; }
input{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
}
input:focus{ outline:none; box-shadow: var(--focus); }
input[disabled]{ opacity:.7; cursor:not-allowed; }


/* Phase 5: simple bars + tables */
.pc-stat-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.pc-stat-row{display:grid;grid-template-columns:72px 1fr 48px;gap:10px;align-items:center}
.pc-stat-label{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px}
.pc-stat-val{text-align:right;font-variant-numeric:tabular-nums}
.pc-bar{height:10px;border-radius:999px;background:rgba(107,114,128,.18);overflow:hidden}
.pc-bar-fill{height:10px;border-radius:999px;background:rgba(59,130,246,.65)}
.pc-table{width:100%;border-collapse:separate;border-spacing:0;min-width:900px}
.pc-table th,.pc-table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;font-size:13px}
.pc-table th{position:sticky;top:0;background:var(--card);z-index:1}


/* Phase 6.1: Heatmap */
.pc-heatmap{border-collapse:separate;border-spacing:2px;width:max-content;max-width:100%}
.pc-heatmap th{font-size:11px;color:var(--muted);font-weight:700;position:sticky;left:0;background:var(--card);z-index:2}
.pc-heatmap thead th{top:0;position:sticky;z-index:3}
.pc-heatmap td{width:18px;height:18px;border-radius:4px;border:1px solid rgba(0,0,0,.03)}

/* Heatmap intensity levels */
.pc-heatmap td.lv0{background:rgba(148,163,184,.18)}
.pc-heatmap td.lv1{background:rgba(59,130,246,.18)}
.pc-heatmap td.lv2{background:rgba(59,130,246,.35)}
.pc-heatmap td.lv3{background:rgba(59,130,246,.55)}
.pc-heatmap td.lv4{background:rgba(59,130,246,.78)}

@media (max-width:980px){
  .pc-heatmap td{width:14px;height:14px;border-radius:3px}
}

/* Small country flag in lists */
.pc-flag{width:16px;height:11px;border-radius:2px;display:inline-block;vertical-align:-1px;margin-right:6px;border:1px solid rgba(148,163,184,.45)}