* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  background:#f5f6f8; color:#2d3748;
  font-size:14px;
}

/* ═══ Topbar ═══ */
.topbar {
  background:#fff; border-bottom:1px solid #e2e8f0;
  padding:0 22px; height:56px;
  display:flex; align-items:center; gap:16px; flex-shrink:0;
  position:sticky; top:0; z-index:50;
}
.topbar h1 {
  font-size:17px; font-weight:700; color:#1a202c;
  display:flex; align-items:center; gap:9px;
}
.topbar-spacer { flex:1; }
.topbar-user {
  font-size:13px; color:#4a5568;
  display:flex; align-items:center; gap:10px;
}
.topbar-link {
  text-decoration:none; color:#4a5568; font-size:13px; font-weight:500;
  padding:7px 12px; border-radius:6px; transition:all .15s;
}
.topbar-link:hover { background:#edf2f7; color:#2d3748; }
.topbar-link.active { background:#3b82f6; color:white; }
.badge {
  font-size:10px; padding:2px 7px; border-radius:10px;
  background:#fee2e2; color:#991b1b; font-weight:700;
}

/* ═══ Buttons ═══ */
.btn {
  border:none; border-radius:7px; padding:8px 16px;
  font-size:13px; font-weight:600; cursor:pointer;
  transition:all .15s; display:inline-flex; align-items:center; gap:6px;
  font-family:inherit;
}
.btn-primary   { background:#3b82f6; color:#fff; }
.btn-primary:hover   { background:#2563eb; }
.btn-secondary { background:#fff; color:#4a5568; border:1px solid #e2e8f0; }
.btn-secondary:hover { background:#f7fafc; }
.btn-danger    { background:#ef4444; color:#fff; }
.btn-danger:hover    { background:#dc2626; }
.btn-ghost     { background:transparent; color:#4a5568; }
.btn-ghost:hover     { background:#edf2f7; }
.btn-sm        { padding:5px 11px; font-size:12px; }

/* ═══ Forms ═══ */
input[type=text], input[type=password], input[type=email], select, textarea {
  width:100%; padding:9px 13px; border:1px solid #cbd5e0;
  border-radius:7px; font-size:14px; outline:none;
  transition:border-color .15s; font-family:inherit;
  background:#fff;
}
input:focus, select:focus, textarea:focus { border-color:#3b82f6; }
label { display:block; font-size:12.5px; font-weight:600; color:#4a5568; margin-bottom:5px; }

/* ═══ Cards ═══ */
.card {
  background:#fff; border:1px solid #e2e8f0;
  border-radius:10px; padding:18px;
}
.container {
  max-width:1100px; margin:24px auto; padding:0 22px;
}

/* ═══ Modal ═══ */
.modal-bg {
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  z-index:100;
}
.modal-bg.hidden { display:none; }
.modal {
  background:#fff; border-radius:12px; padding:24px;
  width:90%; max-width:480px; max-height:85vh; overflow-y:auto;
  box-shadow:0 20px 50px rgba(0,0,0,.2);
}
.modal h2 { font-size:17px; margin-bottom:14px; color:#1a202c; }
.modal .modal-actions {
  display:flex; gap:8px; justify-content:flex-end; margin-top:18px;
}

.empty {
  text-align:center; color:#a0aec0; padding:60px 20px; font-size:14px;
}