/* J.A.R.V.I.S. – Login (eigenständig, keine weiteren Assets) */
:root {
  --bg0: #04060b;
  --bg1: #070b16;
  --bg2: #0d1428;
  --ink: #e9edf5;
  --ink-2: #b1bacb;
  --ink-3: #8390a6;
  --amber: #ffb300;
  --orange: #ff8a00;
  --gold: #ffd66b;
  --line: rgba(255, 179, 0, 0.16);
  --line-2: rgba(255, 179, 0, 0.34);
  --bad: #ff5468;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, "Roboto Mono", Menlo, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(ellipse 120% 90% at 50% 30%, var(--bg2) 0%, var(--bg1) 45%, var(--bg0) 100%);
  color: var(--ink);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
.bg {
  position: fixed; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(ellipse 90% 85% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.7) 100%),
    linear-gradient(rgba(255, 179, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 179, 0, 0.04) 1px, transparent 1px);
  background-size: 100% 100%, 44px 44px, 44px 44px;
  background-position: center;
}
.wrap {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 18px calc(24px + env(safe-area-inset-bottom, 0px));
}
.core-box { width: min(240px, 58vw); aspect-ratio: 1; margin-bottom: -6px; }
.core-box canvas { width: 100%; height: 100%; display: block; }
.wordmark {
  margin: 0;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.4em;
  padding-left: 0.4em;
  background: linear-gradient(90deg, var(--gold), var(--amber) 60%, var(--orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sub {
  margin: 6px 0 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.card {
  position: relative;
  width: min(380px, 100%);
  padding: 24px 22px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(11, 16, 29, 0.7);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 214, 107, 0.06);
  display: flex; flex-direction: column; gap: 14px;
}
.corner { position: absolute; width: 16px; height: 16px; border: 0 solid var(--amber); opacity: 0.7; }
.corner.tl { top: 8px; left: 8px; border-top-width: 1px; border-left-width: 1px; }
.corner.br { bottom: 8px; right: 8px; border-bottom-width: 1px; border-right-width: 1px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.hint { text-transform: none; letter-spacing: 0.02em; color: var(--ink-3); }
.field input {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(4, 7, 14, 0.65);
  color: var(--ink);
  font: 16px/1.3 var(--sans);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus { outline: none; border-color: var(--line-2); box-shadow: 0 0 0 3px rgba(255, 179, 0, 0.14); }
#totp { font-family: var(--mono); font-size: 22px; letter-spacing: 0.5em; text-align: center; padding-left: calc(13px + 0.5em); }
#totp::placeholder { color: rgba(131, 144, 166, 0.45); }
.field input[aria-invalid="true"] { border-color: rgba(255, 84, 104, 0.7); }
.error { min-height: 0; color: #ff97a3; font-size: 14px; }
.error:not(:empty) { padding: 8px 12px; border: 1px solid rgba(255, 84, 104, 0.35); border-radius: 10px; background: rgba(255, 84, 104, 0.08); }
.submit {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px;
  margin-top: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 214, 107, 0.7);
  background: linear-gradient(135deg, var(--gold), var(--amber) 45%, var(--orange));
  color: #1b0e00;
  font: 700 16px/1 var(--sans);
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(255, 138, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: box-shadow 0.2s, opacity 0.2s;
}
.submit:hover { box-shadow: 0 10px 40px rgba(255, 138, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.submit:disabled { opacity: 0.7; cursor: progress; }
.spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(27, 14, 0, 0.3); border-top-color: #1b0e00; animation: spin 0.8s linear infinite; }
.submit.loading .spinner { display: inline-block; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.foot { margin: 18px 0 0; font-size: 12px; color: var(--ink-3); font-family: var(--mono); letter-spacing: 0.08em; text-align: center; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-height: 640px) {
  .core-box { width: 140px; }
  .sub { margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
}