:root{
  color-scheme:dark;
  font-family:Inter,"Segoe UI",Tahoma,Arial,sans-serif;
  --bg:#08090f;
  --surface-1:#12141e;
  --surface-2:#181c29;
  --surface-3:#1f2433;
  --line:#ffffff14;
  --line-strong:#ffffff22;
  --text:#f7f8fc;
  --muted:#9aa3b8;
  --faint:#6b7385;
  --violet:#8a6bff;
  --violet-2:#6249e2;
  --blue:#4d9fff;
  --green:#37d79b;
  --amber:#f5b93d;
  --red:#ff5d73;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:11px;
  --shadow-soft:0 10px 30px #00000040;
  --shadow-strong:0 24px 60px #00000066;
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 85% -8%,#5b3fd930,transparent 38%),
    radial-gradient(circle at 6% 30%,#1a6a5a26,transparent 32%),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit}
button,a{cursor:pointer}
::selection{background:#8a6bff44}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;gap:12px;
  min-height:68px;
  border-bottom:1px solid var(--line);
  padding:10px max(16px,calc((100% - 1060px)/2));
  background:#08090fd6;
  backdrop-filter:blur(18px) saturate(1.2);
}
.admin-brand{display:flex;align-items:center;gap:10px}
.admin-brand-mark{
  display:grid;place-items:center;
  width:36px;height:36px;border-radius:12px;
  background:linear-gradient(150deg,var(--violet),var(--violet-2));
  box-shadow:0 8px 20px #6249e255;
  font-size:16px;
}
header strong{font-weight:800;letter-spacing:-.2px}
header .admin-eyebrow{margin-inline-start:auto;display:flex;align-items:center;gap:7px;border-radius:99px;padding:7px 12px 7px 9px;background:#ff4e6816;color:#ff9aa8;font-size:11px;font-weight:800}
header .admin-eyebrow i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#ff5d73;box-shadow:0 0 0 3px #ff5d7326}

.admin-back{
  display:grid;place-items:center;
  width:38px;height:38px;border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(150deg,var(--surface-3),var(--surface-1));
  color:#fff;font-size:15px;box-shadow:0 6px 16px #0006;
  transition:transform .15s ease,border-color .15s ease;
}
.admin-back:hover{border-color:var(--line-strong)}
.admin-back:active{transform:scale(.92)}

/* ---------- layout ---------- */
main{width:min(100% - 28px,1060px);margin:28px auto 80px}
.hero{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  margin-bottom:22px;
}
.hero small{color:#b3a3ff;font-weight:800;letter-spacing:.3px;text-transform:uppercase;font-size:11px}
.hero h1{margin:8px 0 4px;font-size:clamp(28px,5vw,42px);letter-spacing:-.6px}
.hero p{margin:0;color:var(--muted);font-size:14px}
.hero button,.load-more{
  display:flex;align-items:center;gap:7px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 16px;background:var(--surface-2);color:#fff;font-weight:800;font-size:13px;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.hero button:hover,.load-more:hover{background:var(--surface-3);border-color:var(--line-strong)}
.hero button:active,.load-more:active{transform:scale(.97)}

.state{margin:15vh auto;text-align:center;color:var(--muted)}
.state h2{color:#fff;margin:14px 0 6px}
.spinner{width:34px;height:34px;margin:auto;border:3px solid #ffffff1a;border-top-color:var(--violet);border-radius:50%;animation:spin .75s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- stat cards ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.stat{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:18px;
  background:linear-gradient(155deg,var(--surface-2),var(--surface-1));
  box-shadow:var(--shadow-soft);
}
.stat i{
  display:grid;place-items:center;
  width:34px;height:34px;margin-bottom:12px;border-radius:11px;
  font-size:16px;background:#ffffff0d;
}
.stat small{display:block;color:var(--muted);font-size:11.5px;font-weight:700}
.stat b{display:block;margin-top:4px;font-size:27px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.stat:nth-child(1) i{background:#8a6bff22;color:#b6a1ff}
.stat:nth-child(2) i{background:#4d9fff22;color:#8dc2ff}
.stat:nth-child(3) i{background:#37d79b22;color:#7cecc4}
.stat:nth-child(4) i{background:#f5b93d22;color:#ffd581}

/* ---------- toolbar ---------- */
.toolbar{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.toolbar label{
  display:flex;flex:1;align-items:center;gap:9px;
  border:1px solid var(--line);border-radius:var(--radius-md);
  padding:0 14px;background:var(--surface-1);
  transition:border-color .15s ease,background .15s ease;
}
.toolbar label:focus-within{border-color:#8a6bff66;background:var(--surface-2)}
.toolbar label span{color:var(--faint);font-size:14px}
.toolbar input{width:100%;border:0;outline:0;padding:13px 0;background:transparent;color:#fff}
.toolbar>b{flex:none;color:var(--muted);font-size:11.5px;font-weight:700;white-space:nowrap}

/* ---------- user list ---------- */
.users{display:grid;gap:9px}
.user-card{
  display:grid;grid-template-columns:52px minmax(0,1.5fr) minmax(120px,1fr) auto;
  align-items:center;gap:14px;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:14px;
  background:linear-gradient(150deg,var(--surface-2),var(--surface-1));
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.user-card:hover{border-color:var(--line-strong);transform:translateY(-1px);box-shadow:var(--shadow-soft)}
.avatar{
  display:grid;width:52px;height:52px;place-items:center;
  border-radius:15px;font-size:18px;font-weight:800;color:#fff;
  background:var(--avatar-a,linear-gradient(150deg,#8a6bff,#4939a2));
  box-shadow:0 8px 18px #0005;
}
.identity{min-width:0}
.identity strong{display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px}
.identity strong .owner-tag{flex:none;border-radius:99px;padding:2px 8px;background:#f5b93d22;color:#ffd581;font-size:9.5px;font-weight:800}
.identity span{display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11.5px;direction:ltr;text-align:right}
.meta{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:99px;padding:5px 9px 5px 7px;color:#aeb7c8;font-size:9.5px;font-weight:700}
.pill:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--faint)}
.pill.on{border-color:#37d79b3a;color:#7cecc4;background:#37d79b0f}
.pill.on:before{background:var(--green);box-shadow:0 0 0 3px #37d79b26}
.pill.off{border-color:#ff5d733a;color:#ff9aa8;background:#ff5d730f}
.pill.off:before{background:var(--red);box-shadow:0 0 0 3px #ff5d7326}
.actions{display:flex;gap:6px}
.actions button{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:9px 12px;background:var(--surface-3);color:#dce1eb;font-size:11.5px;font-weight:800;
  transition:border-color .15s ease,background .15s ease,transform .15s ease,opacity .15s ease;
}
.actions button:hover:not(:disabled){border-color:var(--line-strong)}
.actions button:active:not(:disabled){transform:scale(.95)}
.actions button:disabled{opacity:.35;cursor:default}
.actions .danger{border-color:#ff5d7340;color:#ff8797;background:#ff5d730f}
.load-more{display:block;margin:16px auto}

/* ---------- dialog ---------- */
dialog{
  width:min(100% - 28px,500px);
  border:1px solid var(--line-strong);border-radius:24px;padding:0;
  background:linear-gradient(165deg,var(--surface-2),var(--surface-1));
  color:#fff;box-shadow:var(--shadow-strong);
}
dialog::backdrop{background:#05070bcc;backdrop-filter:blur(6px)}
dialog form{padding:24px}
.dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.dialog-head small{color:#b3a3ff;font-weight:800;letter-spacing:.3px;text-transform:uppercase;font-size:10.5px}
.dialog-head h2{margin:5px 0 0;font-size:19px}
.dialog-head button{
  display:grid;place-items:center;width:30px;height:30px;flex:none;
  border:1px solid var(--line);border-radius:10px;background:var(--surface-3);color:#fff;font-size:16px;line-height:1;
}
.dialog-head+label,dialog label{display:block;margin-top:14px;color:#aeb7c6;font-size:11.5px;font-weight:700}
dialog input,dialog select{
  width:100%;margin-top:6px;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 13px;background:#0a0d16;color:#fff;outline:0;
  transition:border-color .15s ease;
}
dialog input:focus,dialog select:focus{border-color:#8a6bff88}
.url-field{display:flex;direction:ltr;align-items:center;border:1px solid var(--line);border-radius:var(--radius-sm);background:#0a0d16;overflow:hidden;margin-top:6px}
.url-field span{padding-left:10px;color:var(--faint);font-size:11.5px}
.url-field input{margin:0;border:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.save{
  width:100%;margin-top:18px;border:0;border-radius:var(--radius-sm);padding:14px;
  background:linear-gradient(135deg,var(--violet),var(--violet-2));color:#fff;font-weight:800;font-size:14px;
  box-shadow:0 12px 28px #6249e240;
  transition:transform .15s ease,box-shadow .15s ease;
}
.save:active{transform:scale(.98)}
#editMessage{min-height:16px;margin-top:10px;color:#ff8797;font-size:11.5px}

/* ---------- toast ---------- */
#toast{
  position:fixed;z-index:20;bottom:26px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--line-strong);border-radius:13px;
  padding:12px 16px;background:#151a27f0;backdrop-filter:blur(10px);
  box-shadow:var(--shadow-strong);font-size:13px;font-weight:600;
  animation:toast-in .2s ease both;
}
#toast:before{content:"✓";display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#37d79b26;color:#7cecc4;font-size:10px;font-weight:900}
#toast.bad{color:#ff9aa8}
#toast.bad:before{content:"✕";background:#ff5d7326;color:#ff8797}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px)}}

/* ---------- responsive ---------- */
@media(max-width:720px){
  .stats{grid-template-columns:1fr 1fr}
  .user-card{grid-template-columns:44px 1fr}
  .avatar{width:44px;height:44px;font-size:16px}
  .meta,.actions{grid-column:1/-1}
  .actions button{flex:1}
  .hero{align-items:flex-start;flex-direction:column}
  .two{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .user-card,.actions button,.admin-back,.hero button,.load-more,.save{transition:none}
  #toast{animation:none}
}