:root {
  --bg: #0b1220;
  --panel: #101a2f;
  --panel-2: #16233f;
  --primary: #0d6efd;
  --primary-2: #1c8cff;
  --accent: #0a3b78;
  --text: #eaf2ff;
  --muted: #99a9c6;
  --line: #243557;
  --danger: #dc3545;
  --success: #16a34a;
  --warning: #f59e0b;
  --neutral: #64748b;
  --card: #ffffff;
  --body: #eef4fb;
}
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, Arial, sans-serif; background: var(--body); color: #10233f; }
a { color: inherit; text-decoration: none; }
.small { font-size: .82rem; }
.muted { color: var(--muted); }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; }
.sidebar { background: linear-gradient(180deg, #081120, #10203f); color: var(--text); padding: 1rem; position: sticky; top:0; height:100vh; }
.brand { display:flex; gap: .75rem; align-items:center; padding: .5rem 0 1rem; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 1rem; }
.brand-mark { width: 48px; height: 48px; border-radius: 14px; display:grid; place-items:center; font-weight:700; background: linear-gradient(135deg, var(--primary), #071a35); }
.nav { display:flex; flex-direction:column; gap:.5rem; }
.nav-link { padding:.8rem .95rem; border-radius: 12px; color: var(--text); }
.nav-link:hover { background: rgba(255,255,255,.08); }
.main { display:flex; flex-direction:column; min-width:0; }
.topbar { background: #fff; padding: .85rem 1rem; border-bottom:1px solid #d7e2f1; display:flex; justify-content:space-between; align-items:center; gap:1rem; position:sticky; top:0; z-index:10; }
.menu-btn { display:none; background: var(--panel); color:#fff; border:0; border-radius:10px; padding:.55rem .75rem; }
.topbar-actions { display:flex; align-items:center; gap:.75rem; }
.container { padding: 1rem; }
.card { background:#fff; border:1px solid #dce7f5; border-radius: 18px; padding: 1rem; box-shadow: 0 10px 30px rgba(10,35,80,.05); }
.grid { display:grid; gap:1rem; }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.kpi { background: linear-gradient(135deg, #0f56b3, #081a35); color:#fff; }
.page-title { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; }
.page-title h1 { margin:0; font-size:1.5rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.35rem; border:0; padding:.75rem 1rem; border-radius:12px; font-weight:600; cursor:pointer; }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--accent)); color:#fff; }
.btn-outline { background:#fff; border:1px solid #c7d7ef; color:#0f2343; }
.btn-danger { background: var(--danger); color:#fff; }
.btn-sm { padding:.5rem .7rem; border-radius:10px; font-size:.88rem; }
.alert { padding:.85rem 1rem; border-radius:14px; margin-bottom:1rem; }
.alert-success { background:#e8f8ef; color:#115c31; border:1px solid #bfe7cc; }
.alert-danger { background:#fdecec; color:#8b1e2b; border:1px solid #f4c7ce; }
.filters, .actions-row { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], textarea, select, input[type=url], input[type=file] {
  width:100%; padding:.75rem .9rem; border-radius:12px; border:1px solid #c8d6ea; background:#fff; color:#10233f;
}
textarea { min-height: 110px; resize: vertical; }
label { display:block; font-weight:600; margin-bottom:.35rem; }
.field { margin-bottom: .9rem; }
.table-wrap { overflow:auto; border:1px solid #dce7f5; border-radius:16px; background:#fff; }
table { width:100%; border-collapse:collapse; }
th, td { padding:.8rem; border-bottom:1px solid #ebf1f8; text-align:left; vertical-align:top; }
th { background:#f6f9fd; font-size:.92rem; }
.badge { display:inline-block; padding:.35rem .65rem; border-radius:999px; font-size:.8rem; font-weight:700; }
.badge.success { background:#dcfce7; color:#166534; }
.badge.warning { background:#fef3c7; color:#92400e; }
.badge.danger { background:#fee2e2; color:#991b1b; }
.badge.neutral { background:#e2e8f0; color:#334155; }
.section-title { margin:0 0 .7rem; font-size:1.08rem; }
.toolbar { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.tab-link { padding:.65rem .9rem; background:#e9f1fb; border-radius:999px; color:#0f2343; font-weight:600; }
.tab-link.active { background:linear-gradient(135deg, var(--primary), var(--accent)); color:#fff; }
.login-page { min-height:100vh; display:grid; place-items:center; background: radial-gradient(circle at top, #123f80, #09111f 58%); padding:1rem; }
.login-card { width:min(460px, 100%); background:#fff; border-radius:24px; padding:2rem; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.logo-box { width:62px; height:62px; background:linear-gradient(135deg, var(--primary), #091a35); color:#fff; border-radius:18px; display:grid; place-items:center; font-weight:800; font-size:1.1rem; }
.inline-form { display:inline; }
.responsive-meta { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:1rem; }
.helper { color:#4a5f81; font-size:.85rem; }
.print-only { display:none; }
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position:fixed; left:-280px; width:260px; z-index:20; transition:left .25s ease; }
  .sidebar.open { left:0; }
  .menu-btn { display:inline-flex; }
}
@media (max-width: 680px) {
  .grid-4, .grid-3, .grid-2, .responsive-meta { grid-template-columns: 1fr; }
  .topbar { align-items:flex-start; }
  .page-title { align-items:flex-start; flex-direction:column; }
}
@media print {
  .sidebar, .topbar, .btn, .tabs, .no-print { display:none !important; }
  .print-only { display:block; }
  .main, .container, .card { padding:0; box-shadow:none; border:0; }
  body { background:#fff; }
}