/* ============================================================
   DESK.cloud — Console sign-in (cinematic, GitHub-only).
   Self-contained: the design-system tokens are loaded by ds-base.js
   (cyan-night theme). This file reuses the landing's exact field +
   button language so the page reads as the same product, then frames
   a single "Continue with GitHub" card.
   ============================================================ */

* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%;
  background: var(--bg, #020506);
  color: var(--text, #cdeef0);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent, #ffd166); color: #021014; }

/* ---------- animated background field (mirrors the landing) ---------- */
#gl { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.veil {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 18% 6%, var(--glow, rgba(0,245,255,.12)), transparent 30%),
    radial-gradient(circle at 90% 100%, rgba(255,209,102,.05), transparent 38%),
    linear-gradient(180deg, rgba(2,5,6,.18), rgba(2,5,6,.5));
}
.scanband {
  position: fixed; left: 0; right: 0; top: -20%; height: 16vh; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--glow, rgba(0,245,255,.10)), transparent);
  animation: scandrift 9s linear infinite; opacity: .5;
}
@keyframes scandrift { to { transform: translateY(140vh); } }
@media (prefers-reduced-motion: reduce) { .scanband { animation: none; display: none; } }

/* ---------- layout ---------- */
.auth {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 32px 20px;
}
.auth-mark {
  font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif);
  font-weight: 700; font-size: 20px; letter-spacing: .06em;
  filter: drop-shadow(0 0 18px var(--glow, rgba(0,245,255,.25)));
}
.auth-mark .glint { color: var(--text, #eafcff); }
.auth-mark .cloudsfx { color: var(--line-strong, #4fe); }

/* ---------- the sign-in card (terminal frame + corner brackets) ---------- */
.auth-card {
  position: relative;
  width: min(420px, 92vw);
  display: flex; flex-direction: column; gap: 16px;
  padding: 34px 30px 30px;
  background: var(--term-bg, #02080a);
  box-shadow:
    inset 0 0 0 1px var(--line, rgba(0,245,255,.3)),
    inset 0 0 40px var(--glow, rgba(0,245,255,.10)),
    0 24px 70px rgba(0,0,0,.55);
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px),
    calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}
.auth-card .bk { position: absolute; width: 16px; height: 16px; border: 0 solid var(--accent, #ffd166); opacity: .9; }
.bk1 { top: 7px; left: 7px; border-top-width: 1px; border-left-width: 1px; }
.bk2 { top: 7px; right: 7px; border-top-width: 1px; border-right-width: 1px; }
.bk3 { bottom: 7px; left: 7px; border-bottom-width: 1px; border-left-width: 1px; }
.bk4 { bottom: 7px; right: 7px; border-bottom-width: 1px; border-right-width: 1px; }

.auth-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--line-strong, #5ff);
}
.auth-kicker .tick {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent, #ffd166); box-shadow: 0 0 10px var(--accent, #ffd166);
  animation: tickpulse 2.4s ease-in-out infinite;
}
@keyframes tickpulse { 50% { opacity: .35; } }

.auth-title {
  margin: 0;
  font-family: var(--font-display, "Space Grotesk", system-ui, sans-serif);
  font-weight: 600; font-size: clamp(22px, 5vw, 28px); line-height: 1.1; letter-spacing: -.01em;
  color: var(--text, #cdeef0);
}
.auth-sub { margin: 0; font-size: 12px; line-height: 1.7; color: var(--text-dim, #6aa); }

/* ---------- the GitHub button (landing's .btn--solid, verbatim) ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 22px; width: 100%;
  font-family: inherit; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700;
  cursor: pointer; color: var(--text); border: 0; overflow: hidden;
  clip-path: polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
  transition: color .15s, box-shadow .2s, background .2s, transform .12s;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn--solid { background: var(--line-strong, #4fe); color: #021014; box-shadow: 0 0 22px var(--glow-strong, rgba(0,245,255,.4)); }
.btn--solid:hover { background: var(--accent, #ffd166); box-shadow: 0 0 34px rgba(255,209,102,.5); }
.btn--solid::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 36%; left: -40%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.65), transparent); transform: skewX(-18deg);
}
.btn--solid:hover::after { animation: btnglint .6s ease; }
@keyframes btnglint { from { left: -40%; } to { left: 110%; } }
.auth-go { margin-top: 4px; }

.auth-hint { margin: 0; font-size: 11px; line-height: 1.6; color: var(--text-dim, #6aa); }
.auth-hint b { color: var(--accent, #ffd166); font-weight: 500; }
.auth-note {
  margin: 0; font-size: 11px; line-height: 1.6; color: var(--accent, #ffd166);
  display: none;
}
.auth-note.show { display: block; }

.auth-back { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim, #6aa); }
.auth-back:hover { color: var(--line-strong, #4fe); }