:root {
  --bg: #f6f9ff;
  --panel: #ffffff;
  --primary: #1e40af;
  --primary-600: #2563eb;
  --muted: #6b7280;
  --green: #16a34a;
  --yellow: #ca8a04;
  --red: #dc2626;
  --border: #dbeafe;
}

* { box-sizing: border-box; }

html, body { padding: 0; margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji; background: var(--bg); color: #0f172a; }

.container { max-width: 1100px; margin: 32px auto; padding: 0 16px; }

.header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.title { font-size: 28px; font-weight: 800; color: var(--primary); }

.badge { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:#eff6ff; color:#1d4ed8; font-size:12px; }
.badge.off { background:#f3f4f6; color:#6b7280; }

.btn { padding:10px 14px; border-radius:10px; border:1px solid transparent; background:#e5e7eb; cursor:pointer; font-weight:600; font-size:14px; }
.btn.primary { background:#22c55e; color:#fff; }
.btn.blue { background:#2563eb; color:#fff; }
.btn.purple { background:#7c3aed; color:#fff; }
.btn.red { background:#ef4444; color:#fff; }
.btn.outline { background:#fff; color:#2563eb; border-color:#bfdbfe; }
.btn.small { padding:6px 10px; font-size:12px; }

.card { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:16px; margin-bottom:16px; }
.cardHeader { font-weight:700; color:var(--primary); padding-bottom:8px; border-bottom:1px dashed var(--border); margin-bottom:12px; display:flex; align-items:center; gap:8px; }

.grid { display:grid; gap:16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .grid { grid-template-columns: 1fr 1fr; } }

.input, .textarea { width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#fff; outline:none; }
.row { display:flex; gap:12px; flex-wrap:wrap; }
.label { font-size:12px; color:var(--muted); display:block; margin-bottom:6px; }

.kpi { text-align:center; }
.kpi .big { font-size:24px; font-weight:800; color:var(--primary); }
.kpi .sub { font-size:12px; color:var(--muted); }

.sectionTitle { font-size:16px; font-weight:800; color:var(--primary); }

.list { max-height: 180px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }

.tag { padding:4px 8px; border-radius:999px; font-size:12px; background:#f1f5f9; color:#0f172a; border:1px solid #e2e8f0; }

.actions { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
.actionBtn { display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 12px; border-radius:10px; color:#fff; font-weight:700; border:0; cursor:pointer; }
.actionBtn.green { background: var(--green); }
.actionBtn.yellow { background: var(--yellow); }
.actionBtn.blue { background: var(--primary-600); }
.actionBtn.gray { background: #4b5563; }

.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding:8px 10px; border-bottom:1px dashed #e5e7eb; font-size:12px; }
.table th { text-align:left; color:var(--muted); font-weight:700; }

.footerCard { background:#e0ecff; border:2px solid var(--border); border-radius:14px; padding:14px; display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top: 12px; }