/* login.html's own styles: the page's inline <style> block, moved here verbatim (the shell's CSP applies no inline <style>, PLAN-APPLET-ACCESS S4b). */
        @import url('/lib/fonts/inter/inter.css');

        :root {
            --bg: #050607;
            --ink-hi: #e9edf4;
            --ink-mid: #9aa3b3;
            --ink-low: #5d6573;
            --hairline: rgba(233, 237, 244, 0.10);
            --hairline-hi: rgba(233, 237, 244, 0.22);
            --blue: #5aa0ff;
            --blue-deep: #2f6fd6;
            --blue-rgb: 90, 160, 255;
            --violet-rgb: 148, 110, 210;
            --teal-rgb: 110, 200, 215;
            --red: #ff6b7a;
            --red-rgb: 255, 107, 122;
            --green: #5be3a8;
            --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
            --font-mono: 'Cascadia Code', Consolas, 'JetBrains Mono', 'SF Mono', monospace;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        html, body { min-height: 100%; background: var(--bg); }

        body {
            font-family: var(--font-ui);
            color: var(--ink-mid);
            -webkit-font-smoothing: antialiased;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            min-height: 100dvh;
            padding: 24px 16px;
            overflow-x: hidden;
        }

        /* ── Backdrop, bottom to top ─────────────────────────────────── */

        .aurora {
            position: fixed; inset: -20%;
            pointer-events: none;
            background:
                radial-gradient(40% 30% at 50% 45%, rgba(var(--blue-rgb), 0.20), transparent 70%),
                radial-gradient(30% 25% at 35% 55%, rgba(var(--violet-rgb), 0.14), transparent 70%),
                radial-gradient(28% 22% at 66% 40%, rgba(var(--teal-rgb), 0.10), transparent 70%);
            animation: drift 28s ease-in-out infinite alternate;
        }
        @keyframes drift {
            0%   { transform: translate3d(-2%, 1%, 0) scale(1); }
            50%  { transform: translate3d(2%, -1.5%, 0) scale(1.06); }
            100% { transform: translate3d(-1%, -2%, 0) scale(1.02); }
        }

        #stars {
            position: fixed; inset: 0;
            width: 100%; height: 100%;
            pointer-events: none;
        }

        /* A perspective floor receding to a horizon just below the card. */
        .floor {
            position: fixed;
            left: -50%; right: -50%; bottom: 0;
            height: 46vh;
            pointer-events: none;
            perspective: 420px;
            perspective-origin: 50% 0%;
            -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.6) 45%, transparent 100%);
                    mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.6) 45%, transparent 100%);
        }
        .floor::before {
            content: "";
            position: absolute; inset: 0 0 -60% 0;
            transform: rotateX(68deg);
            transform-origin: 50% 0%;
            background-image:
                linear-gradient(rgba(var(--blue-rgb), 0.22) 1px, transparent 1px),
                linear-gradient(90deg, rgba(var(--blue-rgb), 0.16) 1px, transparent 1px);
            background-size: 64px 64px;
            animation: travel 6s linear infinite;
        }
        @keyframes travel { to { background-position: 0 64px, 0 0; } }

        .horizon {
            position: fixed; left: 0; right: 0;
            bottom: 46vh; height: 1px;
            pointer-events: none;
            background: linear-gradient(90deg, transparent, rgba(var(--blue-rgb), 0.35) 30%, rgba(var(--teal-rgb), 0.45) 50%, rgba(var(--blue-rgb), 0.35) 70%, transparent);
            box-shadow: 0 0 24px 2px rgba(var(--blue-rgb), 0.18);
        }

        .vignette {
            position: fixed; inset: 0;
            pointer-events: none;
            background: radial-gradient(140% 110% at 50% 45%, transparent 35%, rgba(0,0,0,0.5) 100%);
        }

        /* ── The console ─────────────────────────────────────────────── */

        main {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 380px;
            animation: rise 0.9s cubic-bezier(.2,.8,.2,1) both;
        }
        @keyframes rise {
            from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
            to   { opacity: 1; transform: none; filter: none; }
        }

        .brand {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            margin-bottom: 28px;
        }
        .brand-mark {
            width: 52px; height: 52px;
            filter: drop-shadow(0 0 14px rgba(var(--blue-rgb), 0.55));
        }
        .brand-word {
            font-weight: 700;
            font-size: 1.05rem;
            letter-spacing: 0.62em;
            margin-right: -0.62em;   /* tracking pads the right edge; recentre */
            color: var(--ink-hi);
        }

        .frame { position: relative; }
        .card {
            position: relative;
            padding: 28px 28px 22px;
            border-radius: 18px;
            background:
                linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015)),
                rgba(10, 13, 19, 0.62);
            border: 1px solid var(--hairline);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.07),
                0 30px 80px -20px rgba(0,0,0,0.8),
                0 0 0 1px rgba(0,0,0,0.4);
            -webkit-backdrop-filter: blur(22px) saturate(1.3);
                    backdrop-filter: blur(22px) saturate(1.3);
            overflow: hidden;
        }
        /* A one-time scan across the card as it arrives. */
        .card::after {
            content: "";
            position: absolute; left: 0; right: 0; top: 0;
            height: 40%;
            pointer-events: none;
            background: linear-gradient(180deg, transparent, rgba(var(--blue-rgb), 0.07) 85%, rgba(var(--blue-rgb), 0.22) 100%);
            opacity: 0;   /* seen only while the animation runs */
            transform: translateY(-100%);
            animation: scan 1.6s 0.35s cubic-bezier(.4,0,.2,1) both;
        }
        @keyframes scan {
            from { transform: translateY(-100%); opacity: 1; }
            to   { transform: translateY(260%); opacity: 0; }
        }

        /* HUD corner brackets, drawn outside the rounded edge. */
        .corner {
            position: absolute;
            width: 14px; height: 14px;
            border-color: rgba(var(--blue-rgb), 0.55);
            border-style: solid;
            border-width: 0;
            pointer-events: none;
        }
        .corner.tl { top: -7px;    left: -7px;  border-top-width: 1.5px;    border-left-width: 1.5px;  border-top-left-radius: 6px; }
        .corner.tr { top: -7px;    right: -7px; border-top-width: 1.5px;    border-right-width: 1.5px; border-top-right-radius: 6px; }
        .corner.bl { bottom: -7px; left: -7px;  border-bottom-width: 1.5px; border-left-width: 1.5px;  border-bottom-left-radius: 6px; }
        .corner.br { bottom: -7px; right: -7px; border-bottom-width: 1.5px; border-right-width: 1.5px; border-bottom-right-radius: 6px; }

        .readout {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            font-family: var(--font-mono);
            font-size: 0.66rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--ink-low);
            padding-bottom: 16px;
            margin-bottom: 22px;
            border-bottom: 1px solid var(--hairline);
        }
        .readout .link { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
        .readout .host {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-transform: none;
            letter-spacing: 0.04em;
        }
        .pulse {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--green);
            box-shadow: 0 0 8px var(--green);
            animation: pulse 2.4s ease-in-out infinite;
        }
        @keyframes pulse { 50% { opacity: 0.35; box-shadow: 0 0 2px var(--green); } }

        h1 {
            font-size: 1.35rem;
            font-weight: 600;
            letter-spacing: -0.01em;
            color: var(--ink-hi);
        }
        .lede {
            margin-top: 6px;
            margin-bottom: 24px;
            font-size: 0.86rem;
            color: var(--ink-mid);
        }

        .field { margin-bottom: 16px; }
        .field label {
            display: block;
            margin-bottom: 7px;
            font-family: var(--font-mono);
            font-size: 0.66rem;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--ink-low);
            transition: color 0.2s;
        }
        .field:focus-within label { color: var(--blue); }
        .input-wrap { position: relative; }
        .field input {
            width: 100%;
            height: 46px;
            padding: 0 14px;
            border-radius: 10px;
            border: 1px solid var(--hairline);
            background: rgba(0, 0, 0, 0.35);
            color: var(--ink-hi);
            font-family: var(--font-ui);
            font-size: 0.95rem;
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
        }
        .field input:hover { border-color: var(--hairline-hi); }
        .field input:focus {
            border-color: rgba(var(--blue-rgb), 0.7);
            background: rgba(0, 0, 0, 0.5);
            box-shadow: 0 0 0 4px rgba(var(--blue-rgb), 0.12), 0 0 22px -4px rgba(var(--blue-rgb), 0.45);
        }
        /* Keep autofill from painting the field yellow-white on a dark card. */
        .field input:-webkit-autofill {
            -webkit-text-fill-color: var(--ink-hi);
            -webkit-box-shadow: 0 0 0 100px #0b0f16 inset;
            caret-color: var(--ink-hi);
        }
        .field input[type=password] { padding-right: 46px; }

        .reveal {
            position: absolute; right: 6px; top: 50%;
            transform: translateY(-50%);
            width: 34px; height: 34px;
            display: grid; place-items: center;
            border: 0; border-radius: 8px;
            background: transparent;
            color: var(--ink-low);
            cursor: pointer;
            transition: color 0.15s, background 0.15s;
        }
        .reveal:hover { color: var(--ink-hi); background: rgba(255,255,255,0.05); }
        .reveal:focus-visible { outline: 2px solid rgba(var(--blue-rgb), 0.7); outline-offset: 1px; }
        .reveal svg { width: 18px; height: 18px; }
        .reveal .eye-off { display: none; }
        .reveal[aria-pressed="true"] .eye { display: none; }
        .reveal[aria-pressed="true"] .eye-off { display: block; }

        .login-btn {
            position: relative;
            width: 100%;
            height: 46px;
            margin-top: 8px;
            border: 0;
            border-radius: 10px;
            background: linear-gradient(180deg, var(--blue), var(--blue-deep));
            color: #fff;
            font-family: var(--font-ui);
            font-size: 0.92rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            cursor: pointer;
            overflow: hidden;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.25),
                0 8px 24px -8px rgba(var(--blue-rgb), 0.7);
            transition: transform 0.12s, box-shadow 0.2s, filter 0.2s;
        }
        .login-btn::before {   /* a sheen that crosses on hover */
            content: "";
            position: absolute; top: 0; bottom: 0; left: -60%;
            width: 40%;
            background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
            transform: skewX(-18deg);
            transition: left 0.6s ease;
        }
        .login-btn:hover:not(:disabled) {
            filter: brightness(1.08);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 10px 30px -8px rgba(var(--blue-rgb), 0.9);
        }
        .login-btn:hover:not(:disabled)::before { left: 120%; }
        .login-btn:active:not(:disabled) { transform: translateY(1px); }
        .login-btn:focus-visible { outline: 2px solid var(--ink-hi); outline-offset: 3px; }
        .login-btn:disabled { cursor: progress; filter: saturate(0.7) brightness(0.9); }
        /* While signing in, a light runs along the bottom edge. */
        .login-btn.busy::after {
            content: "";
            position: absolute; left: 0; bottom: 0;
            height: 2px; width: 35%;
            background: linear-gradient(90deg, transparent, #fff, transparent);
            animation: sweep 1.1s ease-in-out infinite;
        }
        @keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(290%); } }

        /* The status line has a fixed height, so an error never moves the card. */
        .login-status {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 2.6em;
            margin-top: 14px;
            font-family: var(--font-mono);
            font-size: 0.72rem;
            line-height: 1.3;
            letter-spacing: 0.02em;
            color: var(--ink-low);
        }
        .login-status::before {
            content: "";
            flex: none;
            width: 6px; height: 6px;
            border-radius: 1px;
            background: currentColor;
            opacity: 0.6;
        }
        .login-status.error { color: var(--red); }
        .login-status.error::before { opacity: 1; box-shadow: 0 0 8px rgba(var(--red-rgb), 0.8); }
        .frame.shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97); }
        @keyframes shake {
            20%, 60% { transform: translateX(-6px); }
            40%, 80% { transform: translateX(6px); }
        }

        footer {
            position: relative;
            z-index: 1;
            margin-top: 28px;
            display: flex;
            gap: 18px;
            font-family: var(--font-mono);
            font-size: 0.66rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--ink-low);
            animation: rise 0.9s 0.15s cubic-bezier(.2,.8,.2,1) both;
        }
        footer a { color: inherit; text-decoration: none; transition: color 0.15s; }
        footer a:hover, footer a:focus-visible { color: var(--ink-hi); }

        @media (max-width: 420px) {
            .card { padding: 24px 20px 18px; }
            .corner { display: none; }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation: none !important; transition: none !important; }
        }