:root {
  --bg:#fffbea;
  --card:#ffffff;
  --ink:#1f1f24;
  --accent:#ffcc00;
  --accent-2:#ffe98a;
  --keyword:#c81e1e;
  --muted:#6b7280;
  --ring:0 0 0 .18rem rgba(255,204,0,.35);
  --radius:16px;
  --bar:#ffeaa7;
  --ok:#0ea47a;
  --danger:#d93025;
}

* {
  box-sizing:border-box;
}

html, body {
  height:100%;
}

body {
  margin:0;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg, var(--bg), #fff5c2);
}

.wrap {
  max-width:1100px;
  margin-inline:auto;
  padding:20px;
}

.nav {
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  border:1px solid #f1e58a;
  border-radius:14px;
  background:#fffdf1;
  box-shadow:0 8px 18px rgba(0,0,0,.05);
}

.brand {
  font-weight:900;
  letter-spacing:.3px;
}

.brand b {
  background:linear-gradient(90deg,#ffbf00,#ff8a00);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.nav .spacer {
  flex:1;
}

.nav button, .btn {
  appearance:none;
  border:0;
  background:#ffbf00;
  color:#111;
  font-weight:800;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(255,191,0,.35);
}

.nav .ghost {
  background:#fff;
  border:1px solid #ffe08a;
  box-shadow:none;
}

.nav .danger {
  background:#ffdedb;
  color:#78130e;
  border:1px solid #ffd1cb;
}

.grid {
  margin-top:16px;
  gap:16px;
}

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

.card {
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:0 10px 25px rgba(31,31,36,.08);
  border:1px solid #f2eab1;
  overflow:hidden;
}

.card h2 {
  margin:0;
  padding:16px 18px;
  background:#fff8d6;
  border-bottom:1px solid #f2eab1;
}

.card .body {
  padding:16px 18px;
}

.kpis {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}

@media (max-width:960px) {
  .kpis {
    grid-template-columns:1fr;
  }
}

.kpi {
  padding:12px;
  border:1px solid #f2eab1;
  border-radius:12px;
  background:#fffdf2;
}

.kpi .label {
  font-size:.92rem;
  color:var(--muted);
}

.kpi .value {
  font-weight:900;
  font-size:1.35rem;
}

.bar {
  height:10px;
  border-radius:999px;
  background:var(--bar);
  position:relative;
  overflow:hidden;
}

.bar > span {
  position:absolute;
  inset:0;
  width:0%;
  background:linear-gradient(90deg,#ffbf00,#ff8a00);
}

.stat-row {
  display:grid;
  grid-template-columns:140px 1fr 80px;
  gap:10px;
  align-items:center;
  padding:6px 10px;
  border:1px solid #f2eab1;
  border-radius:12px;
  margin-bottom:8px;
}

.region {
  font-weight:800;
}

.pct {
  text-align:right;
  color:#8b8b8b;
  font-variant-numeric:tabular-nums;
}

.composer {
  display:grid;
  gap:10px;
}

.composer textarea,
input[type="text"],
input[type="email"],
input[type="date"],
select {
  width:100%;
  border:1px solid #f1e58a;
  border-radius:10px;
  padding:10px 12px;
  font:inherit;
  background:#fff;
}

.composer textarea {
  min-height:84px;
  resize:vertical;
}

.feed {
  display:grid;
  gap:12px;
}

.post {
  border:1px solid #f2eab1;
  border-radius:12px;
  padding:12px;
}

.post .meta {
  font-size:.9rem;
  color:var(--muted);
  display:flex;
  gap:8px;
  align-items:center;
}

.badge {
  font-size:.82rem;
  font-weight:800;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid #ffd67a;
  background:#fff8d6;
}

.badge[type="incident"] {
  border-color:#ffc4c4;
  background:#fff1f1;
  color:#8b0e0e;
}

.post .content {
  margin:6px 0 8px;
  white-space:pre-wrap;
}

.keyword {
  color:var(--keyword);
  font-weight:900;
}

.replies {
  margin-top:8px;
  padding-top:8px;
  border-top:1px dashed #f2eab1;
}

.reply {
  padding:6px 8px;
  border-left:3px solid #ffe08a;
  margin:6px 0;
}

.captcha-row {
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
}

.captcha-box {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px dashed #ffe08a;
  border-radius:10px;
  background:#fffef6;
}

.captcha-op {
  font-weight:900;
}

.muted {
  color:var(--muted);
}

.ok {
  color:var(--ok);
}

.error {
  color:var(--danger);
  font-size:.95rem;
  display:none;
}

dialog {
  border:1px solid #f2eab1;
  border-radius:14px;
  padding:0;
  width:min(560px,92vw);
}

dialog::backdrop {
  background:rgba(0,0,0,.25);
}

.modal-head {
  padding:12px 14px;
  background:#fff8d6;
  border-bottom:1px solid #f2eab1;
  font-weight:800;
}

.modal-body {
  padding:14px;
}

.modal-actions {
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding:12px 14px;
  border-top:1px solid #f2eab1;
}