/*
         * Sign-in gate — deliberately quiet: one card on a flat black field,
         * nothing else competing for attention. Own logo, own wordmark, own
         * accent, so it still reads as this product and not a template.
         *
         * No soft/blur shadows anywhere on this page, on purpose. A blurred
         * black shadow over a near-black background cannot blend smoothly and
         * bands into visible stepped rings around the card; likewise a blurred
         * colored drop-shadow under the logo reads as a dirty halo. Elevation
         * here comes from fill contrast and a 1px hairline, never from a glow.
         * The only box-shadow left is the zero-blur focus ring on the input,
         * which cannot band and is required for keyboard accessibility.
         */
        :root{
            --bg:#0a0a0c;--card:#1a1b1f;--fill:#232428;
            --line:rgba(255,255,255,.07);--line-hi:#3a3b41;
            --text:#f4f4f6;--muted:#8b8c95;
            --accent:#e80022;--accent-hi:#ff2440;--accent-lo:#ac001a;
            --r:12px;--r-card:26px;
            --ui:'Manrope','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
        }
        *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
        html{-webkit-text-size-adjust:100%}
        body{margin:0;min-height:100dvh;color:var(--text);background:var(--bg);
            font:15px/1.55 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
        ::selection{background:rgba(232,0,34,.45);color:#fff}

        .gate{min-height:100dvh;display:grid;place-items:center;padding:24px}

        .card{width:min(100%,460px);padding:44px 40px 40px;text-align:center;
            border:1px solid var(--line);border-radius:var(--r-card);
            background:var(--card)}

        /* brand block — logo, wordmark, one line of instruction */
        .card img{width:68px;height:68px;object-fit:contain}
        /* two-tone "LEGEND WIRE" wordmark with a breathing glow animation */
        .word{margin:20px 0 0;font:800 34px/1.1 var(--ui);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
        .word .w1{color:#fff;animation:glowWhite 3s ease-in-out infinite}
        .word .w2{color:var(--accent-hi);animation:glowAccent 3s ease-in-out infinite}
        @keyframes glowWhite{0%,100%{text-shadow:0 0 6px rgba(255,255,255,.18)}50%{text-shadow:0 0 16px rgba(255,255,255,.5),0 0 30px rgba(232,0,34,.25)}}
        @keyframes glowAccent{0%,100%{text-shadow:0 0 8px rgba(232,0,34,.45)}50%{text-shadow:0 0 20px rgba(232,0,34,.9),0 0 38px rgba(255,36,64,.5)}}
        .sub{margin:10px 0 30px;color:var(--muted);font-size:15px}

        form{margin:0;text-align:left}
        label{display:block;margin:0 0 9px;color:#a2a3ac;font:500 13.5px/1.2 'Inter',sans-serif}

        /* Keys are case-insensitive server-side (normalizeLicenseKey uppercases
           them), so the field is left in plain sentence case. */
        .card input{display:block;width:100%;margin:0;padding:15px 16px;color:#fff;background:var(--fill);
            border:1px solid var(--line-hi);border-radius:var(--r);outline:none;
            -webkit-appearance:none;appearance:none;font:500 15px/1.3 'Inter',sans-serif;
            transition:border-color .18s,box-shadow .18s}
        .card input::placeholder{color:#63646d}
        .card input:hover{border-color:#4a4b53}
        .card input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,0,34,.22)}

        .submit{width:100%;margin-top:18px;padding:15px 16px;border:0;border-radius:var(--r);cursor:pointer;
            color:#fff;background:var(--accent);font:600 15px/1 'Inter',sans-serif;touch-action:manipulation;
            transition:background .18s,transform .12s}
        .submit:hover{background:var(--accent-hi)}
        .submit:active{transform:translateY(1px)}
        .submit:disabled{opacity:.6;cursor:wait;transform:none;background:var(--accent-lo)}

        /* State classes are driven by the script: .show .ok .error must keep
           existing under this name — never rename them while restyling. */
        .status{display:none;margin-top:16px;padding:13px 15px;border-radius:var(--r);text-align:center;
            border:1px solid var(--line);background:rgba(0,0,0,.25);font-size:13.5px;line-height:1.5}
        .status.show{display:block;animation:rise .26s ease}
        @keyframes rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
        .status.error{border-color:rgba(255,107,125,.4);color:#ffd4da;background:rgba(120,20,36,.22)}
        .status.ok{border-color:rgba(49,212,127,.36);color:#c9ffe4;background:rgba(12,74,50,.22)}

        @media(max-width:480px){
            .gate{padding:18px}
            .card{padding:34px 22px 30px;border-radius:22px}
            .word{font-size:25px;letter-spacing:.03em}
            .sub{font-size:14px;margin-bottom:24px}
        }
        @media(max-height:600px){.card{padding-block:28px 26px}.sub{margin-bottom:20px}.card img{width:56px;height:56px}}
        @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}