.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid transparent;
  border-radius:9px;
  padding:9px 16px;
  font-size:14px;
  font-family:inherit;
  font-weight:600;
  cursor:pointer;
  transition:.15s;
  text-decoration:none;
}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dark)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#a81f14}
.btn-ghost{background:#fff;color:var(--blue);border-color:#cdd8f0}
.btn-ghost:hover{background:#eef3ff}
.btn-light{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.35)}
.btn-light:hover{background:rgba(255,255,255,.28)}
.btn-sm{padding:5px 11px;font-size:13px;border-radius:7px}
.btn:disabled{opacity:.5;cursor:not-allowed}

label{display:block;font-size:13px;font-weight:600;color:#3b4763;margin-bottom:5px}
input,select,textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #d3dbea;
  border-radius:9px;
  font-family:inherit;
  font-size:14px;
  background:#fff;
  color:var(--text);
  transition:.15s;
}
input:focus,select:focus,textarea:focus{
  outline:0;
  border-color:var(--blue-2);
  box-shadow:0 0 0 3px rgba(42,85,192,.14);
}
textarea{resize:vertical;min-height:90px}
.field{margin-bottom:13px}
.hint{font-size:12px;color:var(--muted);margin-top:4px}
.err{font-size:12px;color:var(--red);margin-top:4px;display:none}
.field.invalid input,
.field.invalid select,
.field.invalid textarea{border-color:var(--red);box-shadow:0 0 0 3px rgba(213,43,30,.12)}
.field.invalid .err{display:block}

.table-wrap{overflow-x:auto;border-radius:12px;border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;background:#fff;font-size:14px;min-width:560px}
th{
  background:#f5f8ff;
  text-align:left;
  padding:11px 13px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:#4b5878;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
td{padding:11px 13px;border-bottom:1px solid #eef2f9;vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafcff}

.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap}
.b-new{background:#e8efff;color:#1c3f94}
.b-set{background:#fff3da;color:#9a6300}
.b-done{background:#e2f7ea;color:#0f7a43}
.b-adm{background:#fde8e6;color:#a81f14}
.b-user{background:#eef1f7;color:#556080}

.pk{background:#1c3f94;color:#fff;font-size:10px;padding:1px 6px;border-radius:4px;font-weight:700}
.fk{background:#d52b1e;color:#fff;font-size:10px;padding:1px 6px;border-radius:4px;font-weight:700}
.uq{background:#1a9e5c;color:#fff;font-size:10px;padding:1px 6px;border-radius:4px;font-weight:700}

.modal-back{
  position:fixed;
  inset:0;
  background:rgba(14,22,44,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:200;
  animation:fade .18s;
}
.modal{
  background:#fff;
  border-radius:16px;
  padding:24px;
  width:100%;
  max-width:440px;
  box-shadow:0 24px 60px rgba(0,0,0,.3);
  max-height:92vh;
  overflow:auto;
}
.modal h3{margin-bottom:4px}
.modal .close{
  float:right;
  background:none;
  border:0;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  color:var(--muted);
  margin:-6px -6px 0 0;
}
.switch{font-size:13px;text-align:center;margin-top:12px;color:var(--muted)}
.switch a{color:var(--blue-2);cursor:pointer;font-weight:600;text-decoration:none}

#toasts{position:fixed;right:18px;bottom:18px;z-index:300;display:flex;flex-direction:column;gap:8px}
.toast{
  background:#16203a;
  color:#fff;
  padding:11px 16px;
  border-radius:10px;
  font-size:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  animation:fade .2s;
  max-width:340px;
}
.toast.ok{background:#12784a}
.toast.err{background:#b32418}

.empty{text-align:center;padding:34px 16px;color:var(--muted)}
.empty .big{font-size:34px;margin-bottom:8px}

.btn-wide{width:100%;justify-content:center}