:root {
    --bg:#f6f7fb; --card:#fff; --text:#1f2937; --muted:#6b7280;
    --primary:#2563eb; --primary-2:#1d4ed8; --border:#e5e7eb;
    --success:#16a34a; --warning:#f59e0b; --danger:#dc2626;
}
* { box-sizing:border-box; }
body { margin:0; font-family: Arial, Helvetica, sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--primary); text-decoration:none; }
.container { max-width:1200px; margin:0 auto; padding:20px; }

.topbar {
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 20px; background:var(--card); border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:10; flex-wrap:wrap; gap:12px;
}
.topbar nav { display:flex; flex-wrap:wrap; gap:8px; }
.topbar nav a { padding:8px 12px; background:#eff6ff; border-radius:8px; }
.brand small { display:block; color:var(--muted); margin-top:2px; }

.card {
    background:var(--card); border:1px solid var(--border);
    border-radius:14px; padding:16px; margin-bottom:16px;
    box-shadow:0 6px 20px rgba(15,23,42,.04);
}
h2, h3, h4 { margin-top:0; }
label { display:block; margin-top:10px; font-size:14px; color:#374151; }

.grid { display:grid; gap:16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

input, select, textarea, button {
    width:100%; padding:10px 12px; border-radius:10px;
    border:1px solid var(--border); font:inherit; margin-top:4px;
}
input[type="checkbox"] { width:auto; margin-right:6px; }
button, .btn {
    display:inline-block; background:var(--primary); color:#fff;
    border:none; cursor:pointer; padding:10px 14px; border-radius:10px;
    text-align:center; text-decoration:none;
}
button:hover, .btn:hover { background:var(--primary-2); color:#fff; }

.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th, td { padding:10px; border:1px solid var(--border); text-align:left; vertical-align:top; }
th { background:#f3f4f6; }

.alert { padding:12px 14px; border-radius:10px; margin-bottom:16px; }
.alert-info    { background:#dbeafe; color:#1e3a8a; }
.alert-success { background:#dcfce7; color:#166534; }
.alert-warning { background:#fef3c7; color:#92400e; }
.alert-danger  { background:#fee2e2; color:#991b1b; }

.small-muted { color:var(--muted); font-size:12px; }

.badge {
    display:inline-block; padding:2px 8px; border-radius:999px;
    background:#e5e7eb; color:#374151; font-size:12px; font-weight:600;
}

.footer { padding:20px; text-align:center; color:var(--muted); }