/* extracted from resources/views/auth/simple-login.blade.php */
/* ── Tokens ─────────────────────────────────────────────────────────
           Light-side text stays at or above #475569. The plant's monitors wash
           out anything lighter, which has cost readability on other screens. */
        :root{
            --ink:#0f172a; --ink-2:#334155; --muted:#475569; --line:#e2e8f0;
            --brand:#1d4ed8; --brand-2:#0891b2; --brand-ink:#1e3a8a;
            --field:#cbd5e1; --bg:#f1f5f9;
        }
        *{margin:0;padding:0;box-sizing:border-box}
        html{-webkit-text-size-adjust:100%}
        body{
            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
            min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;
            background:var(--bg);color:var(--ink);padding:1.25rem;
            padding-bottom:calc(1.25rem + env(safe-area-inset-bottom));
            -webkit-font-smoothing:antialiased;
        }
        /* Two soft brand-tinted washes on an off-white ground: depth behind the
           card without a heavy band. */
        body::before{
            content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
            background:
                radial-gradient(60rem 40rem at 12% -10%, rgba(29,78,216,.10), transparent 60%),
                radial-gradient(48rem 34rem at 105% 108%, rgba(8,145,178,.12), transparent 60%);
        }

        .shell{
            width:100%;max-width:1000px;background:#fff;border:1px solid var(--line);
            border-radius:22px;overflow:hidden;display:grid;grid-template-columns:1fr;
            box-shadow:0 1px 2px rgba(16,24,40,.04),0 24px 48px -24px rgba(16,24,40,.18);
        }

        /* ── Brand side ──────────────────────────────────
           A light panel with drawn depth, not a dark slab: an off-white ground,
           a faint engineering grid, two pale brand washes and an SVG
           constellation standing in for the plant's linked records. All of it
           decorative and aria-hidden; the words carry the meaning on their own. */
        .brand{
            position:relative;isolation:isolate;overflow:hidden;
            padding:2rem 2rem 1.75rem;border-bottom:1px solid var(--line);
            background:linear-gradient(160deg,#ffffff 0%,#f7fbff 55%,#f1f8fb 100%);
        }
        .grid-lines{
            position:absolute;inset:0;z-index:0;pointer-events:none;
            background-image:
                linear-gradient(rgba(29,78,216,.07) 1px,transparent 1px),
                linear-gradient(90deg,rgba(29,78,216,.07) 1px,transparent 1px);
            background-size:44px 44px;
            -webkit-mask-image:radial-gradient(120% 90% at 20% 8%,#000 15%,transparent 75%);
            mask-image:radial-gradient(120% 90% at 20% 8%,#000 15%,transparent 75%);
        }
        .glow{position:absolute;z-index:0;border-radius:50%;filter:blur(48px);pointer-events:none}
        .glow.a{width:22rem;height:22rem;top:-8rem;right:-7rem;background:rgba(37,99,235,.14);animation:drift 18s ease-in-out infinite}
        .glow.b{width:18rem;height:18rem;bottom:-7rem;left:-6rem;background:rgba(8,145,178,.16);animation:drift 22s ease-in-out infinite reverse}
        @keyframes drift{
            0%,100%{transform:translate3d(0,0,0) scale(1)}
            50%{transform:translate3d(1.6rem,1.2rem,0) scale(1.08)}
        }

        .art{position:absolute;inset:0;z-index:0;pointer-events:none}
        .art svg{width:100%;height:100%;display:block}
        .art .link{stroke:rgba(29,78,216,.16);stroke-width:1;fill:none}
        .art .dash{
            stroke:rgba(8,145,178,.55);stroke-width:1.4;fill:none;
            stroke-dasharray:6 190;animation:trace 7s linear infinite;
        }
        .art .dash.d2{animation-duration:9s;animation-delay:-3s}
        .art .dash.d3{animation-duration:11s;animation-delay:-6s}
        @keyframes trace{to{stroke-dashoffset:-392}}
        .art .node{fill:#60a5fa}
        .art .node.pulse{animation:pulse 4.5s ease-in-out infinite}
        .art .node.p2{animation-delay:-1.5s}
        .art .node.p3{animation-delay:-3s}
        @keyframes pulse{0%,100%{opacity:.30;r:3}50%{opacity:.85;r:5}}
        .art .ring{fill:none;stroke:rgba(29,78,216,.13);stroke-width:1}
        .art .ring.spin{transform-origin:center;animation:spin 46s linear infinite}
        .art .ring.spin.rev{animation-duration:64s;animation-direction:reverse}
        @keyframes spin{to{transform:rotate(360deg)}}

        .brand-inner{position:relative;z-index:1}

        /* The company logo, sized by height so the 600x172 source never has to
           be reasoned about. width/height are still stated so the panel does
           not jump while it loads. */
        .logo{display:block;height:2.6rem;width:auto;margin-bottom:1.15rem}

        .mark{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.35rem}
        .mark b{
            font-size:2.1rem;font-weight:800;letter-spacing:-.02em;line-height:1;
            background:linear-gradient(135deg,var(--brand),var(--brand-2));
            -webkit-background-clip:text;background-clip:text;color:transparent;
        }
        .mark span{font-size:.9rem;font-weight:600;color:var(--muted);letter-spacing:.01em}
        .tag{font-size:.9rem;color:var(--muted);line-height:1.5;max-width:34ch}

        /* The acronym on one line, for screens with no room for the full list.
           Hidden on desktop, where the expanded version says it properly. */
        .tag-compact{display:none;font-size:.78rem;color:var(--muted);line-height:1.5;font-weight:500}
        .tag-compact b{color:var(--brand-ink);font-weight:700}

        .meaning{list-style:none;margin-top:1.5rem;display:grid;gap:.5rem}
        .meaning li{
            display:flex;align-items:flex-start;gap:.75rem;padding:.5rem .65rem;border-radius:12px;
            background:rgba(255,255,255,.7);border:1px solid rgba(29,78,216,.10);
            transition:background .2s,border-color .2s,transform .2s,box-shadow .2s;
        }
        .meaning li:hover{
            background:#fff;border-color:rgba(29,78,216,.24);transform:translateX(2px);
            box-shadow:0 6px 18px -12px rgba(16,24,40,.35);
        }
        .meaning .ltr{
            flex:none;width:1.9rem;height:1.9rem;border-radius:8px;display:grid;place-items:center;
            font-weight:800;font-size:.95rem;color:#fff;
            background:linear-gradient(135deg,var(--brand),var(--brand-2));
            box-shadow:0 6px 14px -8px rgba(29,78,216,.85);
        }
        .meaning dt{font-size:.9rem;font-weight:650;color:var(--ink);line-height:1.3}
        .meaning dd{font-size:.8rem;color:var(--muted);line-height:1.4;margin-top:.1rem}

        /* ── Form side ──────────────────────────────────────────────────── */
        .panel{padding:1.75rem 2rem 2rem}
        .panel h2{font-size:1.2rem;font-weight:700;color:var(--ink);margin-bottom:.2rem}
        .panel .sub{font-size:.85rem;color:var(--muted);margin-bottom:1.25rem}

        .msg{padding:.65rem .8rem;border-radius:8px;font-size:.85rem;margin-bottom:1rem;line-height:1.45}
        .msg.err{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}
        .msg.ok{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d}

        .field{margin-bottom:.95rem}
        label{display:block;font-size:.83rem;font-weight:600;margin-bottom:.35rem;color:var(--ink-2)}
        input[type=text],input[type=password]{
            width:100%;padding:.75rem .9rem;border:1.5px solid var(--field);border-radius:10px;
            font-size:1rem;color:var(--ink);background:#fff;
            transition:border-color .15s,box-shadow .15s;
        }
        input[type=text]::placeholder,input[type=password]::placeholder{color:#94a3b8}
        input[type=text]:focus,input[type=password]:focus{
            outline:none;border-color:var(--brand);box-shadow:0 0 0 3.5px rgba(29,78,216,.13);
        }

        .pw{position:relative}
        .pw input{padding-right:3rem}
        .pw button{
            position:absolute;top:0;right:0;height:100%;width:2.9rem;display:flex;
            align-items:center;justify-content:center;background:none;border:none;
            border-radius:0 10px 10px 0;cursor:pointer;color:var(--muted);padding:0;
        }
        .pw button:hover{color:var(--ink)}
        .pw button:focus-visible{outline:2px solid var(--brand);outline-offset:-3px;border-radius:8px}
        .pw svg{width:1.15rem;height:1.15rem;display:block;pointer-events:none}

        .caps{display:none;margin-top:.35rem;font-size:.76rem;color:#b45309;font-weight:600}
        .caps.on{display:block}

        .row{display:flex;justify-content:space-between;align-items:center;gap:.75rem;
             margin:1rem 0 1.15rem;font-size:.85rem}
        .row label{display:flex;align-items:center;gap:.45rem;font-weight:500;margin:0;
                   cursor:pointer;color:var(--ink-2)}
        .row input[type=checkbox]{width:1.05rem;height:1.05rem;accent-color:var(--brand);flex:none}
        .row a{color:var(--brand);text-decoration:none;font-weight:600;white-space:nowrap}
        .row a:hover{text-decoration:underline}

        button[type=submit]{
            width:100%;padding:.85rem;border:none;border-radius:10px;color:#fff;
            background:linear-gradient(135deg,var(--brand),var(--brand-2));
            font-size:1rem;font-weight:650;cursor:pointer;letter-spacing:.01em;
            transition:transform .15s,box-shadow .15s,opacity .15s;
            box-shadow:0 6px 16px -6px rgba(29,78,216,.55);
        }
        button[type=submit]:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(29,78,216,.6)}
        button[type=submit]:active:not(:disabled){transform:translateY(0)}
        button[type=submit]:disabled{opacity:.7;cursor:progress;transform:none;box-shadow:none}

        .hint{margin-top:.9rem;font-size:.76rem;color:var(--muted);text-align:center;line-height:1.5}
        .lock{display:inline-flex;align-items:center;gap:.3rem;vertical-align:-2px}
        .lock svg{width:.85rem;height:.85rem}

        /* ── Two columns once there is room ─────────────────────────────── */
        @media (min-width:880px){
            .shell{grid-template-columns:1.06fr .94fr}
            .brand{
                border-bottom:0;border-right:1px solid var(--line);
                padding:2.8rem 2.5rem;display:flex;flex-direction:column;justify-content:center;
            }
            .panel{padding:2.8rem 2.5rem;display:flex;flex-direction:column;justify-content:center}
            .mark b{font-size:2.5rem}
            .logo{height:3rem;margin-bottom:1.5rem}
        }

        @media (max-width:520px){
            body{padding:0;align-items:stretch}
            .shell{border-radius:0;border-left:0;border-right:0;min-height:100dvh;
                   align-content:center;box-shadow:none}
            .brand{padding:1.6rem 1.4rem 1.1rem}
            .panel{padding:1.25rem 1.4rem 1.4rem}
            .logo{height:2.1rem;margin-bottom:.85rem}
            /* The four-line explainer would push Sign In below the fold on a
               phone. The acronym still gets said — just on one line. */
            .meaning,.tag{display:none}
            .tag-compact{display:block}
        }

        /* Motion is decoration here, never signal: with it off the panel keeps
           every colour and shape and simply stops moving. */
        @media (prefers-reduced-motion:reduce){
            *{transition:none!important;animation:none!important}
            .art .dash{stroke-dasharray:none}
        }