@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --bg:#f0f2f9;
  --card:#ffffff;
  --border:#e4e7f2;
  --text:#1a1d2e;
  --muted:#8b90a7;
  --accent:#5533ea;
  --accent-d:#4525c4;
  --accent-l:#ede9ff;
  --ok:#22c55e;
  --ok-l:#dcfce7;
  --bad:#ef4444;
  --bad-l:#fee;
  --warn:#f59e0b;
  --shadow:0 4px 14px rgba(80,60,200,.10);
  --shadow-md:0 10px 40px rgba(80,60,200,.18);
}

* { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family:'Plus Jakarta Sans', sans-serif;
  background:linear-gradient(135deg,#eef0fb 0%,#f6eefa 100%);
  color:var(--text);
  min-height:100vh;
  font-size:14px;
  line-height:1.5;
}

.auth-wrap {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.auth-card {
  width:100%;
  max-width:440px;
  background:var(--card);
  border-radius:20px;
  box-shadow:var(--shadow-md);
  padding:32px 28px;
  border:1px solid var(--border);
}

.auth-logo {
  width:64px; height:64px; border-radius:18px;
  background:linear-gradient(135deg,var(--accent),#8a5cf6);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px; color:#fff; font-size:30px;
  box-shadow:0 8px 24px rgba(85,51,234,.35);
}

.auth-card h1 {
  font-size:22px; font-weight:800; text-align:center; margin-bottom:6px;
}
.auth-sub {
  color:var(--muted); text-align:center; margin-bottom:24px; font-size:13px;
}

.field { margin-bottom:14px; }
label {
  display:block; font-weight:600; font-size:13px;
  margin-bottom:6px; color:var(--text);
}
input, select {
  width:100%; padding:12px 14px;
  border:1.5px solid var(--border); border-radius:10px;
  font:inherit; font-size:14px; color:var(--text);
  background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
input:focus, select:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-l);
}
input:disabled, input[readonly] {
  background:#f6f7fb; color:var(--muted); cursor:not-allowed;
}
.hint { font-size:12px; color:var(--muted); margin-top:4px; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  width:100%; padding:13px; border:none; border-radius:10px;
  background:var(--accent); color:#fff;
  font:700 14px/1 'Plus Jakarta Sans',sans-serif;
  cursor:pointer; transition:background .15s, transform .1s;
  margin-top:8px;
}
.btn:hover { background:var(--accent-d); }
.btn:active { transform:scale(.98); }
.btn.secondary {
  background:#fff; color:var(--accent); border:1.5px solid var(--accent);
}
.btn.secondary:hover { background:var(--accent-l); }
.btn.danger { background:var(--bad); }
.btn.danger:hover { background:#c92020; }
.btn.small { width:auto; padding:7px 12px; font-size:12px; margin:0; }
.btn.ghost {
  background:transparent; color:var(--muted); border:1.5px solid var(--border);
}
.btn.ghost:hover { background:#f6f7fb; color:var(--text); }

.link {
  display:block; text-align:center; margin-top:12px;
  color:var(--accent); font-size:13px; font-weight:600;
  text-decoration:none; cursor:pointer;
}
.link:hover { text-decoration:underline; }

.msg {
  padding:10px 12px; border-radius:8px; font-size:13px;
  margin-bottom:14px; display:none;
}
.msg.error { display:block; background:var(--bad-l); color:var(--bad); border:1px solid #fcc; }
.msg.ok    { display:block; background:var(--ok-l);  color:#0a7c3a; border:1px solid #b6f0c8; }
.msg.warn  { display:block; background:#fff7e0; color:#7a5500; border:1px solid #ffe2a2; }

.strength { height:5px; border-radius:3px; background:#eee; margin-top:6px; overflow:hidden; }
.strength > span { display:block; height:100%; width:0; transition:width .2s, background .2s; }

.checks { font-size:12px; color:var(--muted); margin-top:6px; line-height:1.7; }
.checks li { list-style:none; display:flex; align-items:center; gap:6px; }
.checks li::before { content:'○'; color:var(--muted); font-size:14px; }
.checks li.ok { color:#0a7c3a; }
.checks li.ok::before { content:'●'; color:var(--ok); }

.row-actions { display:flex; gap:6px; flex-wrap:wrap; }

.badge {
  display:inline-block; padding:2px 8px; border-radius:6px;
  font-size:11px; font-weight:700; letter-spacing:.3px;
}
.badge.admin { background:var(--accent-l); color:var(--accent); }
.badge.user  { background:#e6f3ff; color:#0a66c2; }

.hidden { display:none !important; }

/* === Admin panel === */
.admin-shell {
  max-width:980px; margin:0 auto; padding:24px 20px 80px;
}
.admin-top {
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap; margin-bottom:20px;
}
.admin-top h1 {
  font-size:24px; font-weight:800; display:flex; align-items:center; gap:10px;
}
.admin-top .actions { display:flex; gap:8px; flex-wrap:wrap; }

.panel {
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow);
  padding:20px; margin-bottom:18px;
}
.panel h2 {
  font-size:16px; font-weight:700; margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}

.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.users {
  width:100%; border-collapse:collapse; font-size:13px; min-width:560px;
}
table.users th, table.users td {
  text-align:left; padding:12px 10px; border-bottom:1px solid var(--border);
  vertical-align:middle;
}
table.users th {
  font-size:12px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--muted); font-weight:700;
}
table.users tbody tr:hover { background:#fafbff; }

.form-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
@media (max-width:600px) {
  .form-grid { grid-template-columns:1fr; }
  .auth-card { padding:24px 18px; }
  .admin-top h1 { font-size:20px; }
}

.empty {
  text-align:center; padding:30px 10px; color:var(--muted);
}