/* ==========================================================================
   CONTROL ROOM — admin dashboard
   ========================================================================== */

.admin-body {
  overflow: auto;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(80, 96, 190, 0.16), transparent 60%),
    linear-gradient(180deg, #0a0b12 0%, #07070a 100%);
}

.crt-floor {
  position: fixed; inset: auto 0 0 0; z-index: 1; height: 46vh; pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% 100%, rgba(107, 140, 255, 0.14), transparent 70%),
    repeating-linear-gradient(90deg, rgba(120, 150, 255, 0.05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(120, 150, 255, 0.05) 0 1px, transparent 1px 34px);
  transform: perspective(600px) rotateX(58deg);
  transform-origin: bottom;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%);
  mask-image: linear-gradient(180deg, transparent, #000 70%);
  opacity: 0.5;
}

/* ------------------------------- boot ----------------------------------- */

.boot {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: start center;
  padding-top: 12vh;
  background: #050508;
  transition: opacity 700ms ease 300ms, visibility 0s linear 1100ms;
}
.boot.gone { opacity: 0; visibility: hidden; }
.boot-text {
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px; line-height: 1.9;
  color: #7d92d6;
  white-space: pre;
  min-width: min(560px, 84vw);
  text-align: left;
}
.boot-text::after { content: "▍"; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ------------------------------- gate ----------------------------------- */

.gate { position: relative; z-index: 10; min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.gate.hidden, .admin.hidden { display: none !important; }
.gate-card {
  width: min(440px, 100%);
  border: 1px solid rgba(140, 160, 255, 0.18);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(20, 24, 40, 0.65), rgba(10, 11, 18, 0.85));
  padding: 26px 26px 20px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: gate-in 600ms var(--ease-out);
}
@keyframes gate-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
.gate-head { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.gate-ico {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 13px;
  background: rgba(107, 140, 255, 0.12);
  border: 1px solid rgba(140, 160, 255, 0.25);
  color: #9fb2ff; font-size: 20px;
}
.gate-head h2 { margin: 0; font-family: var(--font-display); font-size: 15px; letter-spacing: 0.22em; }
.gate-head p { margin: 4px 0 0; font-size: 12px; color: var(--ink-faint); }
.gate-label { display: block; font-size: 10px; letter-spacing: 0.4em; color: var(--ink-faint); margin-bottom: 8px; }
.gate-row { display: flex; gap: 10px; }
.gate-input {
  flex: 1;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(140, 160, 255, 0.22);
  background: rgba(8, 10, 18, 0.7);
  color: var(--ink);
  font-family: "JetBrains Mono", monospace;
  font-size: 16px; letter-spacing: 0.3em;
  padding: 0 16px;
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.gate-input:focus { border-color: rgba(140, 160, 255, 0.55); box-shadow: 0 0 0 4px rgba(107, 140, 255, 0.12); }
.gate-go {
  height: 46px; padding: 0 20px;
  border-radius: 12px;
  border: 1px solid rgba(140, 160, 255, 0.35);
  background: linear-gradient(180deg, rgba(107, 140, 255, 0.24), rgba(107, 140, 255, 0.1));
  color: #cdd8ff;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.24em;
  cursor: pointer;
  transition: transform 200ms var(--ease-spring), filter 200ms ease;
}
.gate-go:hover { transform: translateY(-1px); filter: brightness(1.15); }
.gate-go:active { transform: translateY(0) scale(0.98); }
.gate-err {
  margin-top: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--danger);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 250ms ease, transform 250ms ease;
}
.gate-err.show { opacity: 1; transform: none; }
.gate-card.shake { animation: shake 420ms ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}
.gate-back {
  display: inline-block; margin-top: 20px;
  font-size: 11px; letter-spacing: 0.24em;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 200ms ease;
}
.gate-back:hover { color: var(--ink); }

/* ------------------------------- admin ---------------------------------- */

.admin { position: relative; z-index: 5; min-height: 100vh; display: flex; flex-direction: column; padding: 0 clamp(16px, 4vw, 44px) 0; }
.admin-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 22px 0 18px;
  border-bottom: 1px solid var(--line);
}
.admin-brand { display: flex; align-items: baseline; gap: 16px; }
.admin-title {
  font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: 0.2em;
  background: linear-gradient(92deg, #fff, #b9c6ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.admin-sub { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--ink-faint); letter-spacing: 0.08em; }
.admin-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-clock {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; color: var(--ink-dim);
  padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255,255,255,0.02);
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em;
  cursor: pointer;
  transition: all 200ms var(--ease-spring);
}
.chip:hover { color: var(--ink); border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); transform: translateY(-1px); }
.chip.danger:hover { color: #ffb4b4; border-color: rgba(255, 93, 93, 0.4); background: rgba(255, 93, 93, 0.08); }

.admin-main { flex: 1; padding: 26px 0 10px; }
.admin-loading {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 50vh;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; letter-spacing: 0.3em; color: var(--ink-faint);
}
.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(140, 160, 255, 0.2);
  border-top-color: #9fb2ff;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.group { margin-bottom: 34px; animation: fade-up 700ms var(--ease-out) both; }
.group:nth-child(2) { animation-delay: 80ms; }
.group:nth-child(3) { animation-delay: 160ms; }
.group:nth-child(4) { animation-delay: 240ms; }
.group:nth-child(5) { animation-delay: 320ms; }
.group-head {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
}
.group-name { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.34em; color: var(--ink-dim); }
.group-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.group-count { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--ink-faint); letter-spacing: 0.1em; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.panel {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  transition: transform 260ms var(--ease-spring), border-color 260ms ease, box-shadow 260ms ease;
}
.panel:hover { transform: translateY(-3px); }
.panel.online:hover { border-color: rgba(70, 224, 138, 0.3); box-shadow: 0 20px 40px -24px rgba(0,0,0,0.8); }
.panel.offline { opacity: 0.72; }

.panel-top { display: flex; align-items: center; gap: 12px; }
.panel-ico {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 11px;
  background: rgba(140, 160, 255, 0.08);
  border: 1px solid rgba(140, 160, 255, 0.16);
  color: #aebbff;
}
.panel-ico svg { width: 20px; height: 20px; }
.panel-name { font-weight: 600; font-size: 14.5px; letter-spacing: 0.01em; }
.panel-desc { font-size: 11.5px; color: var(--ink-faint); margin-top: 3px; }
.panel-led {
  margin-left: auto;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5px; letter-spacing: 0.22em;
}
.led-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #3a3a46;
}
.panel.online .led-dot { background: var(--ok); box-shadow: 0 0 10px 1px rgba(70,224,138,0.5); animation: pulse-led 2.4s ease-in-out infinite; }
.panel.offline .led-dot { background: var(--danger); box-shadow: 0 0 10px 1px rgba(255,93,93,0.45); }
.panel.online .panel-led { color: #6fd79c; }
.panel.offline .panel-led { color: #d08585; }
@keyframes pulse-led {
  0%, 100% { box-shadow: 0 0 6px 1px rgba(70,224,138,0.4); }
  50% { box-shadow: 0 0 12px 3px rgba(70,224,138,0.6); }
}

.panel-actions { display: flex; gap: 8px; }
.pbtn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  color: var(--ink-dim);
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em;
  text-decoration: none;
  cursor: pointer;
  transition: all 200ms ease;
}
.pbtn:hover { color: var(--ink); border-color: rgba(140,160,255,0.45); background: rgba(107,140,255,0.1); transform: translateY(-1px); }
.pbtn.primary { border-color: rgba(140,160,255,0.3); background: linear-gradient(180deg, rgba(107,140,255,0.16), rgba(107,140,255,0.06)); color: #cdd8ff; }
.pbtn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.admin-foot {
  padding: 16px 0 22px;
  border-top: 1px solid var(--line);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.24em;
  color: rgba(255,255,255,0.22);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  .panel-actions { flex-direction: column; }
}