@import url('https://api.fontshare.com/v2/css?f[]=neue-machina@800,700,400&display=swap');

/* ── Admin login page specifics — layered on top of auth.css + base.css ── */

/* Push shell down to clear the Dynamic Island */
.al-shell {
  padding-top: 108px;
}

/* ── Card upgrades — corner brackets + 3D tilt ───────────────────────────── */
.al-card {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  overflow: visible;
  border-color: rgba(245,166,35,0.18);
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.05) inset,
    0 28px 72px rgba(0,0,0,0.55),
    0 0 32px rgba(245,166,35,0.04);
}
.al-card:hover {
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.06) inset,
    0 32px 80px rgba(0,0,0,0.6),
    0 0 40px rgba(245,166,35,0.07);
}

/* Corner brackets — amber tinted for admin identity */
.al-corner {
  position: absolute;
  width: 14px; height: 14px;
  border-color: rgba(245,166,35,0.35);
  border-style: solid;
  pointer-events: none;
  transition: border-color 0.3s ease;
}
.al-corner--tl { top:12px; left:12px;   border-width:1.5px 0 0 1.5px; border-radius:3px 0 0 0; }
.al-corner--tr { top:12px; right:12px;  border-width:1.5px 1.5px 0 0; border-radius:0 3px 0 0; }
.al-corner--bl { bottom:12px; left:12px;  border-width:0 0 1.5px 1.5px; border-radius:0 0 0 3px; }
.al-corner--br { bottom:12px; right:12px; border-width:0 1.5px 1.5px 0; border-radius:0 0 3px 0; }

/* ── Admin badge ─────────────────────────────────────────────────────────── */
.al-admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 50px;
  background: rgba(245,166,35,0.1);
  border: 0.5px solid rgba(245,166,35,0.25);
  margin-bottom: 4px;
}
.al-badge-icon {
  display: flex; align-items: center; justify-content: center;
  color: var(--amber);
}
.al-badge-icon svg { width: 13px; height: 13px; }
.al-badge-label {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--amber);
}

/* ── Error visible state ─────────────────────────────────────────────────── */
.al-error {
  animation: errIn 0.22s ease both;
}
@keyframes errIn {
  from { opacity:0; transform: translateY(-4px); }
  to   { opacity:1; transform: translateY(0); }
}

/* Shell shake on error */
.al-shell.is-error {
  animation: shellShake 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes shellShake {
  0%,100%{ transform: translateX(0); }
  12%    { transform: translateX(-10px); }
  28%    { transform: translateX(10px); }
  44%    { transform: translateX(-7px); }
  60%    { transform: translateX(7px); }
  76%    { transform: translateX(-4px); }
  90%    { transform: translateX(4px); }
}

/* ── Submit spinner ──────────────────────────────────────────────────────── */
.al-spinner-ring {
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.25);
  border-top-color: #000;
  animation: alSpin 0.7s linear infinite;
}
@keyframes alSpin { to { transform: rotate(360deg); } }

/* ── Card footer ─────────────────────────────────────────────────────────── */
.al-card-foot {
  display: flex; align-items: center; justify-content: center;
  gap: 5px; margin-top: 16px;
  font-size: 10px; font-weight: 500;
  color: rgba(240,244,255,0.2); letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════════════════
   DYNAMIC ISLAND — admin login variant
   Fixed pill at top-center. Display only — shows lock state.
   ══════════════════════════════════════════════════════════════════ */

.al-di {
  position: fixed;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  height: 44px;
  padding: 0 14px 0 10px;
  border-radius: 50px;
  background: rgba(8,10,22,0.88);
  border: 0.5px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.05) inset,
    0 8px 40px rgba(0,0,0,0.75),
    0 2px 8px rgba(0,0,0,0.55);
  display: flex; align-items: center; gap: 10px;
  pointer-events: none;
  animation: diIn 0.55s cubic-bezier(0.22,1,0.36,1) 0.08s both;
}
@keyframes diIn {
  from { opacity:0; transform:translateX(-50%) translateY(-10px) scale(0.95); }
  to   { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
}

/* Brand side */
.al-di-brand {
  display: flex; align-items: center; gap: 7px;
}
.al-di-logo-wrap {
  width: 26px; height: 26px; border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.al-di-logo { width: 20px; height: 20px; object-fit: contain; }
.al-di-name {
  font-family: 'Neue Machina', 'Syne', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(240,244,255,0.88);
  white-space: nowrap;
}

/* Lock side */
.al-di-lock {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0;
}
.al-di-lock-svg {
  width: 17px; height: 17px;
  color: rgba(240,244,255,0.4);
  transition: color 0.4s ease, filter 0.4s ease;
  position: relative; z-index: 2;
}
.al-di-lock-body { fill: rgba(8,10,22,0.6); stroke: currentColor; }
.al-di-shackle {
  transition: transform 0.55s cubic-bezier(0.34,1.56,0.64,1);
  transform-origin: 14px 11px;
}
.al-di-lock-glow {
  position: absolute; inset: -5px; border-radius: 50%;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease; z-index: 1;
}

/* Idle — typing, inputs focused */
.al-di-lock.is-idle .al-di-lock-svg { color: rgba(240,244,255,0.4); filter:none; }
.al-di-lock.is-idle .al-di-lock-glow { opacity: 0; }

/* Success — green */
.al-di-lock.is-success .al-di-lock-svg {
  color: #20d28c;
  filter: drop-shadow(0 0 6px rgba(32,210,140,0.7));
}
.al-di-lock.is-success .al-di-shackle { transform: translateY(-6px) rotate(20deg); }
.al-di-lock.is-success .al-di-lock-glow {
  opacity: 1;
  background: radial-gradient(circle, rgba(32,210,140,0.35), transparent 70%);
}
.al-di.is-success {
  border-color: rgba(32,210,140,0.3);
  box-shadow:
    0 0 0 0.5px rgba(32,210,140,0.12) inset,
    0 8px 40px rgba(32,210,140,0.18),
    0 2px 8px rgba(0,0,0,0.55);
  transition: box-shadow 0.5s ease, border-color 0.5s ease;
}

/* Error — red, island shakes */
.al-di-lock.is-error .al-di-lock-svg {
  color: #ff453a;
  filter: drop-shadow(0 0 6px rgba(255,69,58,0.65));
}
.al-di-lock.is-error .al-di-lock-glow {
  opacity: 1;
  background: radial-gradient(circle, rgba(255,69,58,0.28), transparent 70%);
}
.al-di.is-error {
  border-color: rgba(255,69,58,0.3);
  animation: diShake 0.52s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes diShake {
  0%,100%{ transform:translateX(-50%); }
  15%    { transform:translateX(calc(-50% - 8px)); }
  35%    { transform:translateX(calc(-50% + 8px)); }
  55%    { transform:translateX(calc(-50% - 5px)); }
  75%    { transform:translateX(calc(-50% + 4px)); }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .al-shell { padding-top: 88px; }
  .al-di { top: 16px; }
}