:root{
  --bg:#0b1220;
  --panel:rgba(255,255,255,0.06);
  --panel2:rgba(255,255,255,0.08);
  --border:rgba(255,255,255,0.12);
  --text:rgba(255,255,255,0.92);
  --muted:rgba(255,255,255,0.65);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(90,140,255,0.18), transparent 55%),
    radial-gradient(900px 700px at 90% 20%, rgba(255,120,200,0.12), transparent 55%),
    var(--bg);
  color: var(--text);
}

a{ color: rgba(180,210,255,0.95); text-decoration:none; }
a:hover{ text-decoration:underline; }

.logoDot{
  width:14px; height:14px; border-radius:999px;
  background: linear-gradient(135deg, rgba(140,180,255,1), rgba(255,140,220,1));
  box-shadow: 0 0 0 4px rgba(255,255,255,0.06);
}

.btn{
  border:1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn:hover{ background: var(--panel2); }
.btn.primary{
  background: rgba(255,255,255,0.92);
  color:#0b1220;
  border-color: rgba(255,255,255,0.92);
}
.btn.primary:hover{ background: rgba(255,255,255,1); }
.btn.danger{
  background: rgba(255,80,80,0.14);
  border-color: rgba(255,80,80,0.35);
  color: rgba(255,210,210,0.95);
}
.btn.ghost{ background: transparent; }

.inline{ display:inline; margin:0; }

.alert{
  padding:10px 12px;
  border-radius:12px;
  margin:12px 0;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.06);
}
.alert.ok{
  border-color: rgba(120,255,170,0.35);
  background: rgba(120,255,170,0.10);
  color: rgba(210,255,230,0.95);
}
.alert.err{
  border-color: rgba(255,120,120,0.35);
  background: rgba(255,120,120,0.10);
  color: rgba(255,220,220,0.95);
}

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

.field label{
  display:block;
  font-size:12px;
  color: var(--muted);
  margin:10px 0 6px;
}
.field input, .field select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(0,0,0,0.18);
  color: var(--text);
  outline:none;
}
.field input:focus, .field select:focus{
  border-color: rgba(160,200,255,0.55);
  box-shadow: 0 0 0 4px rgba(160,200,255,0.12);
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,0.06);
  font-size:12px;
  color: var(--text);
}
.pill.admin{ background: rgba(255,255,255,0.9); color:#0b1220; border-color: rgba(255,255,255,0.9); }
.pill.user{ background: rgba(255,255,255,0.06); }