:root { --gap: 12px; --radius: 14px; --shadow: 0 6px 24px rgba(0,0,0,.08); }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial; background:#0b1220; color:#e7edf5; }
a { color:#8bc4ff; text-decoration:none; }
.container { max-width: 1200px; margin: 0 auto; padding: 24px; }
.card { background:#101a2f; border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); border:1px solid rgba(255,255,255,.06) }
.row { display:flex; gap: var(--gap); flex-wrap: wrap;}
.col { flex:1 1 320px; }
h1,h2,h3 { margin: 8px 0 12px; }
input, select, button, textarea { background:#0d1530; color:#e7edf5; border:1px solid rgba(255,255,255,.12); padding:10px 12px; border-radius:10px; width:100%; }
button { cursor:pointer; background:#2b8cff; border: none; }
button.secondary { background: #1e2437; }
.btn-danger { background:#c34242; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,.08); text-align:left; }
nav { display:flex; gap: 12px; align-items:center; margin-bottom: 16px; }
nav .spacer { flex:1 }
.tag { font-size: 12px; padding:4px 8px; border-radius: 999px; background:#1b2745; border:1px solid rgba(255,255,255,.06)}
.alert { padding:12px; border-radius:10px; background:#2a1b1b; border: 1px solid #7d2f2f; color:#ffd1d1; }
.success { background:#1b2a1d; border-color:#2f7d46; color:#d1ffde; }
.footer { opacity:.6; margin-top: 18px; font-size: 12px; }
.grid-3 { display:grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap); }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 960px){ .grid-3{ grid-template-columns: 1fr; } .grid-2{ grid-template-columns: 1fr; } }
.small { font-size: 12px; opacity:.8; }
.right { text-align:right; }
.flex-between { display:flex; align-items:center; justify-content:space-between; gap:8px; }
ul.inline { list-style: none; padding:0; margin:0; display:flex; gap:8px; flex-wrap:wrap;}
ul.inline li { background:#152446; padding:4px 8px; border-radius:999px; }
hr.sep { border:0; border-top:1px solid rgba(255,255,255,.08); margin: 10px 0; }
.progress { height: 8px; background:#1b2745; border-radius: 999px; overflow:hidden; }
.progress > span { display:block; height:100%; background:#2b8cff; }
.kpi { display:flex; gap:10px; align-items:center; }
.kpi .val { font-weight:700; }