/* ============================================================
   Auth screens: decorative rack column + form panel
   ============================================================ */

.auth-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

.auth-shell {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: min(820px, 100%);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--bg-1), var(--bg-0) 70%);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .6),
    inset 0 1px 0 rgba(255, 255, 255, .04);
  overflow: hidden;
  animation: shell-in .5s cubic-bezier(.2, .9, .25, 1) both;
}

@keyframes shell-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ---- Rack column ---- */
.rack {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 18px;
  background:
    linear-gradient(180deg, rgba(60, 200, 240, .04), transparent 40%),
    var(--bg-2);
  border-right: 1px solid var(--edge);
}

.rack__title,
.rack__footer {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--text-2);
}
.rack__title { margin-bottom: 8px; }
.rack__footer { margin-top: auto; padding-top: 12px; color: var(--led-dim); }

.ru {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--edge);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  animation: ru-in .4s ease both;
}
.ru:nth-child(odd)  { animation-delay: .05s; }
.ru:nth-child(even) { animation-delay: .12s; }

@keyframes ru-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}

.ru__leds { display: flex; gap: 6px; align-items: center; }
.ru__leds .led { width: 5px; height: 5px; }

.ru__vents {
  width: 56px;
  height: 12px;
  background: repeating-linear-gradient(
    90deg,
    var(--edge) 0 2px,
    transparent 2px 6px
  );
  opacity: .7;
}

.ru--drives {
  height: 34px;
  gap: 6px;
  justify-content: flex-start;
}
.drive {
  flex: 1;
  height: 18px;
  border-radius: 2px;
  border: 1px solid var(--edge-bright);
  background: linear-gradient(180deg, #1a2433, #121a26);
  position: relative;
  overflow: hidden;
}
.drive::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(61, 245, 140, .25), transparent);
  transform: translateX(-100%);
  animation: drive-scan 3.2s ease-in-out infinite;
}
.drive:nth-child(2)::after { animation-delay: .8s; }
.drive:nth-child(3)::after { animation-delay: 1.6s; }
.drive:nth-child(4)::after { animation-delay: 2.4s; }

@keyframes drive-scan {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* ---- Panel ---- */
.panel {
  flex: 1;
  padding: 34px 38px 24px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.panel__brand { margin-bottom: 22px; }

.brand-mark {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--edge-bright);
  border-radius: 6px;
  background: var(--bg-2);
  margin-bottom: 10px;
}

.brand-word {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: .08em;
  line-height: 1.1;
}
.brand-word em {
  font-style: normal;
  color: var(--led);
  text-shadow: var(--led-glow);
}

.brand-tag {
  margin: 6px 0 0;
  color: var(--text-1);
  font-size: 13.5px;
}

/* ---- Tabs ---- */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--edge);
}
.tab {
  padding: 9px 14px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text-0); text-decoration: none; }
.tab.is-active {
  color: var(--led);
  border-bottom-color: var(--led);
  text-shadow: 0 0 12px rgba(61, 245, 140, .4);
}

.panel form { display: block; }

.panel .btn--primary {
  width: 100%;
  padding: 12px;
  margin-top: 4px;
  font-size: 15px;
}

.panel__alt {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-2);
}

.panel__status {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px dashed var(--edge);
  font-size: 11.5px;
  color: var(--text-2);
  letter-spacing: .04em;
}
.panel__status .led { width: 5px; height: 5px; margin-right: 4px; }

.cursor {
  display: inline-block;
  margin-left: 2px;
  color: var(--led);
  animation: cursor-blink 1.1s steps(1) infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }

/* Save summary chip on login (continue hint) */
.continue-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 10px 12px;
  border: 1px solid rgba(61, 245, 140, .3);
  border-radius: var(--radius);
  background: rgba(61, 245, 140, .06);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-1);
}

@media (max-width: 700px) {
  .rack { display: none; }
  .panel { padding: 28px 24px 20px; }
}