:root{
  --primary:#0f766e;
  --secondary:#14532d;
  --light:#f8fafc;
  --dark:#0f172a;
  --danger:#b91c1c;
  --warning:#a16207;
  --success:#166534;
  --border:#e2e8f0;
}
*{box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;margin:0;background:#f1f5f9;color:#1e293b}
a{text-decoration:none;color:var(--primary)}
.container{max-width:1120px;margin:0 auto;padding:20px}
.topbar{background:#fff;border-bottom:1px solid var(--border)}
.brand{font-size:22px;font-weight:700;color:var(--secondary)}
.nav{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.flex{display:flex}.justify-between{justify-content:space-between}.items-center{align-items:center}.gap-2{gap:12px}.gap-3{gap:20px}
.card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px;margin-bottom:18px}
.btn{display:inline-block;padding:10px 16px;border-radius:8px;background:var(--primary);color:#fff;border:none;cursor:pointer}
.btn-secondary{background:#334155}.btn-danger{background:var(--danger)}
.btn-light{background:#e2e8f0;color:#0f172a}
.table{width:100%;border-collapse:collapse;background:#fff}
.table th,.table td{padding:12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.input,.select,.textarea{width:100%;padding:11px 12px;border:1px solid #cbd5e1;border-radius:8px}
.textarea{min-height:110px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#dcfce7;color:#166534;font-size:12px}
.alert{padding:12px 15px;border-radius:10px;margin-bottom:16px}
.alert-success{background:#dcfce7;color:#166534}
.alert-danger{background:#fee2e2;color:#991b1b}
.alert-warning{background:#fef3c7;color:#92400e}
.kpi{font-size:30px;font-weight:700}
.small{font-size:13px;color:#475569}
.hero{padding:54px 0}
.footer{padding:30px 0;text-align:center;color:#64748b}
@media(max-width:800px){.grid,.grid-3{grid-template-columns:1fr}.nav{margin-top:10px}}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive .table {
    min-width: 900px;
}

.table th,
.table td {
    white-space: nowrap;
}