*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Segoe UI","Microsoft JhengHei",sans-serif;
  background:radial-gradient(circle at top,#182436,#0d1118 55%);
  color:#eef5ff;
}
.hidden{display:none!important}
.login-screen{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}
.login-card,.panel{
  background:linear-gradient(180deg,#1b2230,#121823);
  border:1px solid #253447;
  border-radius:24px;
  box-shadow:0 18px 48px rgba(0,0,0,.22);
}
.login-card{
  width:min(460px,100%);
  padding:28px;
  display:grid;
  gap:14px;
}
.subtle,.status-text{
  margin:0;
  color:#9ab4d1;
}
.field{
  display:grid;
  gap:8px;
}
.field span,.kicker{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#78d8ff;
  font-weight:700;
}
input,select{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid #30445d;
  background:#0b1017;
  color:#edf5ff;
}
textarea{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid #30445d;
  background:#0b1017;
  color:#edf5ff;
  resize:vertical;
  min-height:120px;
  font-family:Consolas,"Segoe UI","Microsoft JhengHei",sans-serif;
}
button{
  border:none;
  border-radius:14px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
}
.primary-btn{
  background:linear-gradient(135deg,#22aff4,#74e1ff);
  color:#081019;
}
.ghost-btn{
  background:#111826;
  color:#b6d8f3;
  border:1px solid #2f4157;
}
.admin-app{
  min-height:100vh;
  padding:24px;
  display:grid;
  gap:18px;
}
.topbar,.panel-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}
.topbar h1,.panel h2{
  margin:4px 0 0;
}
.topbar-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.pill{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:#111826;
  border:1px solid #2f4157;
  color:#b6d8f3;
}
.dashboard{
  display:grid;
  gap:18px;
}
.panel{
  padding:18px;
  display:grid;
  gap:14px;
}
.filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.filters input,
.filters select{
  min-width:180px;
  flex:1 1 180px;
}
.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:12px;
}
.card{
  background:#0d131c;
  border:1px solid #263548;
  border-radius:18px;
  padding:14px;
  display:grid;
  gap:10px;
}
.card h3{
  margin:0;
  font-size:18px;
}
.meta{
  display:grid;
  gap:6px;
  color:#b6d8f3;
  font-size:13px;
}
.editor{
  display:grid;
  gap:8px;
  padding-top:4px;
}
.editor.two-col{
  grid-template-columns:1fr 1fr;
}
.editor label{
  display:grid;
  gap:6px;
  font-size:12px;
  color:#9ab4d1;
}
.check-field{
  align-content:start;
}
.check-field input[type="checkbox"]{
  width:auto;
  justify-self:start;
  transform:scale(1.1);
  margin-top:8px;
}
.actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.quota-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px;
}
.quota-card{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #263548;
  background:#101826;
  display:grid;
  gap:4px;
}
.quota-card strong{
  font-size:12px;
  color:#78d8ff;
}
.quota-card span{
  font-size:18px;
  font-weight:700;
}
.quota-card small{
  color:#9ab4d1;
}
.status-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid #2f4157;
}
.status-ready{color:#79e6a4}
.status-cooldown{color:#ffd37a}
.status-exhausted{color:#ff9b9b}
.status-error,.status-missing,.status-disabled{color:#ff9b9b}
.status-unchecked{color:#9ab4d1}
.status-active{color:#79e6a4}
.status-suspended,.status-expired{color:#ff9b9b}
.status-pending{color:#ffd37a}
@media (max-width: 860px){
  .admin-app{padding:16px}
  .topbar,.panel-head{flex-direction:column}
  .editor.two-col{grid-template-columns:1fr}
}