/* ARTIR_AUTH_EPURE_V6 */
:root {
  --auth-bg: #071018;
  --auth-bg-2: #0c1721;
  --auth-surface: rgba(14, 25, 36, .88);
  --auth-border: rgba(125, 151, 171, .24);
  --auth-text: #f2f6f9;
  --auth-muted: #9cadbb;
  --auth-accent: #16a5d8;
  --auth-accent-strong: #0b82b4;
  --auth-danger: #d52238;
  --auth-shadow: 0 24px 70px rgba(0, 0, 0, .38);
  --auth-ring: rgba(22, 165, 216, .18);
}

html[data-theme="day"] {
  --auth-bg: #e8eef3;
  --auth-bg-2: #f7f9fb;
  --auth-surface: rgba(255, 255, 255, .92);
  --auth-border: rgba(25, 54, 77, .17);
  --auth-text: #0b2234;
  --auth-muted: #536a7a;
  --auth-accent: #087eaf;
  --auth-accent-strong: #05658f;
  --auth-danger: #c91f35;
  --auth-shadow: 0 24px 70px rgba(30, 56, 75, .16);
  --auth-ring: rgba(8, 126, 175, .13);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body.auth-body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--auth-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% 42%, var(--auth-ring), transparent 31rem),
    linear-gradient(145deg, var(--auth-bg), var(--auth-bg-2));
  transition: background .25s ease, color .25s ease;
}

body.auth-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .26;
  background-image:
    linear-gradient(rgba(126, 153, 174, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 153, 174, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}

.auth-theme-toggle {
  position: fixed;
  z-index: 10;
  top: 24px;
  right: 26px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--auth-border);
  border-radius: 12px;
  color: var(--auth-text);
  background: var(--auth-surface);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  cursor: pointer;
  font-size: 21px;
  backdrop-filter: blur(16px);
  transition: transform .18s ease, border-color .18s ease, background .25s ease;
}

.auth-theme-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(22, 165, 216, .58);
}

.auth-minimal-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 56px 24px;
}

.auth-minimal-stage {
  width: min(100%, 590px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auth-logo-stage {
  position: relative;
  width: min(78vw, 365px);
  aspect-ratio: 955 / 820;
}

.auth-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  transition: opacity .25s ease;
}

.auth-logo-day { opacity: 0; }
.auth-logo-night { opacity: 1; }
html[data-theme="day"] .auth-logo-day { opacity: 1; }
html[data-theme="day"] .auth-logo-night { opacity: 0; }

.auth-mission {
  max-width: 540px;
  margin: 2px auto 34px;
  color: var(--auth-muted);
  font-size: clamp(.82rem, 1.4vw, .98rem);
  line-height: 1.55;
  letter-spacing: .11em;
  text-align: center;
}

.auth-card {
  width: min(100%, 430px);
  padding: 30px;
  border: 1px solid var(--auth-border);
  border-radius: 18px;
  background: var(--auth-surface);
  box-shadow: var(--auth-shadow);
  backdrop-filter: blur(18px);
  transition: background .25s ease, border-color .25s ease;
}

.auth-card h1 {
  margin: 0 0 22px;
  color: var(--auth-text);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: .07em;
  text-align: center;
  text-transform: uppercase;
}

.auth-primary-button {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(64, 190, 232, .65);
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(180deg, var(--auth-accent), var(--auth-accent-strong));
  box-shadow: 0 12px 28px rgba(6, 118, 162, .23);
  font: inherit;
  font-size: .9rem;
  font-weight: 750;
  letter-spacing: .07em;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.auth-primary-button:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 15px 34px rgba(6, 118, 162, .3);
}

.auth-primary-button:focus-visible,
.auth-theme-toggle:focus-visible,
.auth-token-input:focus-visible,
.auth-back-link:focus-visible {
  outline: 3px solid rgba(47, 182, 229, .3);
  outline-offset: 3px;
}

.auth-primary-button:disabled {
  cursor: wait;
  opacity: .68;
}

.auth-primary-button svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.auth-auth-status {
  min-height: 1.35rem;
  margin: 16px 2px 0;
  color: var(--auth-muted);
  font-size: .86rem;
  line-height: 1.45;
  text-align: center;
}

.auth-auth-status:empty { margin-top: 0; min-height: 0; }
.auth-auth-status[data-state="working"] { color: var(--auth-accent); }
.auth-auth-status[data-state="success"] { color: #30b67a; }
.auth-auth-status[data-state="error"] { color: #ed5266; }

.auth-field-label {
  display: block;
  margin: 0 0 8px;
  color: var(--auth-muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.auth-token-input {
  width: 100%;
  min-height: 52px;
  margin-bottom: 14px;
  padding: 0 15px;
  border: 1px solid var(--auth-border);
  border-radius: 10px;
  color: var(--auth-text);
  background: rgba(3, 11, 18, .24);
  font: inherit;
  transition: border-color .18s ease, background .25s ease;
}

html[data-theme="day"] .auth-token-input { background: rgba(238, 244, 248, .86); }
.auth-token-input::placeholder { color: var(--auth-muted); opacity: .72; }
.auth-token-input:focus { border-color: var(--auth-accent); }

.auth-back-link {
  display: block;
  width: max-content;
  margin: 18px auto 0;
  color: var(--auth-muted);
  font-size: .83rem;
  text-decoration: none;
}

.auth-back-link:hover { color: var(--auth-accent); }

@media (max-width: 620px) {
  .auth-minimal-shell { padding: 68px 18px 34px; }
  .auth-theme-toggle { top: 14px; right: 14px; }
  .auth-logo-stage { width: min(82vw, 300px); }
  .auth-mission { margin-bottom: 26px; letter-spacing: .07em; }
  .auth-card { padding: 24px 20px; border-radius: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}
