:root {
    --bg:    #0b1220;
    --line:  #1e2d47;
    --txt:   #e4eaf5;
    --muted: #7a8fad;
    --dim:   #3a4d6a;
    --blue:  #2d6ef7;
    --err:   #e04646;
}

*, *::before, *::after {
    box-sizing: border-box; margin: 0; padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    height: 100%; overflow-x: hidden;
    background: var(--bg);
    color: var(--txt);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

body {
    background:
        radial-gradient(ellipse 100% 60% at 50% -10%, rgba(45,110,247,.16) 0%, transparent 65%),
        radial-gradient(ellipse 140% 90% at 50% -25%, #182040 0%, #0b1220 60%),
        #0b1220;
}

/* scanline overlay */
body::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image: repeating-linear-gradient(
        0deg, rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px,
        transparent 1px, transparent 52px
    );
}

/* ── Wrapper ── */
.login-wrap {
    position: relative; z-index: 1;
    min-height: 100%; min-height: 100dvh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 48px 28px 56px;
    gap: 0;
}

/* ── Ringe ── */
.logo-area {
    display: flex; flex-direction: column;
    align-items: center; gap: 18px;
    margin-bottom: 44px;
}

.idle-logo {
    position: relative;
    width: clamp(160px, 44vw, 240px);
    height: clamp(160px, 44vw, 240px);
    display: flex; align-items: center; justify-content: center;
}
.idle-logo::after {
    content: ''; position: absolute; inset: -18%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45,110,247,.22) 0%, transparent 68%);
    animation: haloPulse 3.5s ease-in-out infinite; z-index: 0;
}
@keyframes haloPulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .2; transform: scale(1.2); }
}

.idle-logo img {
    width: 64%; height: 64%; object-fit: contain;
    position: relative; z-index: 2;
    filter: drop-shadow(0 0 30px rgba(45,110,247,.95))
            drop-shadow(0 0 10px rgba(45,110,247,.6));
}

.idle-ring {
    position: absolute; border-radius: 50%;
    border: 1.5px solid transparent; z-index: 1;
}
.idle-ring-outer {
    inset: 0;
    border-top-color: var(--blue); border-bottom-color: var(--blue);
    border-left-color: rgba(45,110,247,.1); border-right-color: rgba(45,110,247,.1);
    animation: spin 14s linear infinite;
}
.idle-ring-mid {
    inset: 13%;
    border-right-color: var(--blue); border-left-color: var(--blue);
    border-top-color: rgba(45,110,247,.1); border-bottom-color: rgba(45,110,247,.1);
    animation: spin 9s linear infinite reverse;
}
.idle-ring-inner {
    inset: 27%;
    border-top-color: rgba(45,110,247,.6); border-bottom-color: rgba(45,110,247,.6);
    border-left-color: rgba(45,110,247,.07); border-right-color: rgba(45,110,247,.07);
    animation: spin 5s linear infinite;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.idle-tick { position: absolute; background: var(--blue); opacity: .8; z-index: 1; }
.idle-tick-t { top: 3px;    left: 50%; transform: translateX(-50%); width: 1.5px; height: clamp(10px,2vw,18px); }
.idle-tick-b { bottom: 3px; left: 50%; transform: translateX(-50%); width: 1.5px; height: clamp(10px,2vw,18px); }
.idle-tick-l { left: 3px;   top: 50%;  transform: translateY(-50%); height: 1.5px; width: clamp(10px,2vw,18px); }
.idle-tick-r { right: 3px;  top: 50%;  transform: translateY(-50%); height: 1.5px; width: clamp(10px,2vw,18px); }

/* ── Branding ── */
.brand-name {
    font-size: clamp(36px, 9vw, 60px);
    font-weight: 800; letter-spacing: -1px;
    color: var(--txt); line-height: 1; text-align: center;
}
.brand-name span { color: var(--blue); }

.brand-sub {
    font-size: clamp(10px, 2.5vw, 12px);
    letter-spacing: 6px; text-transform: uppercase;
    color: var(--dim); text-align: center;
}

/* ── Formular — kein Kasten ── */
.form-body { width: 100%; max-width: 400px; }

.form-mode-label {
    font-size: 11px; letter-spacing: 3px;
    text-transform: uppercase; color: var(--muted);
    text-align: center; margin-bottom: 28px;
}

.msg {
    margin-bottom: 18px; padding: 11px 15px;
    background: rgba(224,70,70,.1);
    border: 1px solid rgba(224,70,70,.25);
    border-radius: 12px; font-size: 14px;
    color: #fca5a5; line-height: 1.45;
}

label {
    display: block; font-size: 11px;
    text-transform: uppercase; letter-spacing: 2px;
    color: var(--muted); margin: 0 0 8px;
}

.field { margin-bottom: 20px; }
.field:last-of-type { margin-bottom: 0; }

input {
    width: 100%; padding: 15px 18px;
    border-radius: 16px;
    border: 1.5px solid var(--line);
    background: rgba(255,255,255,.04);
    color: var(--txt); font-size: 17px;
    transition: border-color .2s, background .2s, box-shadow .2s;
    appearance: none;
}
input:focus {
    outline: none;
    border-color: var(--blue);
    background: rgba(45,110,247,.06);
    box-shadow: 0 0 0 4px rgba(45,110,247,.14);
}
input[inputmode="numeric"] {
    font-size: 22px; letter-spacing: 5px;
    font-family: 'Courier New', monospace; font-weight: 700;
    text-align: center;
}
.dnr-input {
    text-align: center;
    letter-spacing: 6px;
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 22px;
}

/* ── DNR 4-Box ── */
.dnr-wrap {
    display: flex; gap: 12px; justify-content: center;
    margin-top: 2px;
}
.dnr-box {
    width: 64px; height: 72px;
    border-radius: 16px;
    border: 1.5px solid var(--line);
    background: rgba(255,255,255,.04);
    color: var(--txt);
    font-size: 28px; font-weight: 700;
    font-family: 'Courier New', monospace;
    text-align: center;
    caret-color: transparent;
    transition: border-color .18s, background .18s, box-shadow .18s;
}
.dnr-box:focus {
    outline: none;
    border-color: var(--blue);
    background: rgba(45,110,247,.08);
    box-shadow: 0 0 0 3px rgba(45,110,247,.18);
}
.dnr-box:not(:placeholder-shown) { border-color: rgba(45,110,247,.4); }

.btn {
    display: block; width: 100%;
    margin-top: 28px; padding: 17px;
    border: none; border-radius: 16px;
    background: var(--blue); color: #fff;
    font-size: 16px; font-weight: 700;
    cursor: pointer; letter-spacing: .5px;
    transition: filter .15s, transform .1s, box-shadow .15s;
    box-shadow: 0 12px 36px rgba(45,110,247,.55);
}
.btn:hover  { filter: brightness(1.1); box-shadow: 0 16px 44px rgba(45,110,247,.7); }
.btn:active { transform: scale(.98); }

.btn-login {
    margin-top: 22px; padding: 13px;
    font-size: 15px;
    box-shadow: 0 8px 24px rgba(45,110,247,.4);
}

.links { margin-top: 18px; text-align: center; font-size: 14px; }
.links a { color: var(--dim); text-decoration: none; transition: color .2s; }
.links a:hover { color: var(--muted); }

@media (max-width: 400px) {
    .login-wrap { padding: 36px 20px 48px; }
}