:root {
        --sentinel-bg: #0f282f;
        --sentinel-bg-2: #092027;
        --sentinel-panel: rgba(14, 45, 51, .78);
        --sentinel-line: rgba(91, 255, 187, .22);
        --sentinel-green: #36d399;
        --sentinel-green-2: #4ade80;
        --sentinel-mint: #7fffd4;
        --sentinel-text: #f8fafc;
        --sentinel-muted: rgba(226, 232, 240, .76);
        --sentinel-card-text: #f8fafc;
        --sentinel-card-muted: rgba(226, 232, 240, .78);
    }

    * { box-sizing: border-box; }

    .sentinel-auth-page {
        min-height: 100vh;
        width: 100%;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: clamp(1.25rem, 3vw, 3rem);
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        color: var(--sentinel-text);
        background:
            radial-gradient(circle at 9% 9%, rgba(54, 211, 153, .18), transparent 30%),
            radial-gradient(circle at 84% 14%, rgba(255, 255, 255, .13), transparent 28%),
            linear-gradient(135deg, #0f282f 0%, #092027 50%, #06191f 100%);
    }

    .sentinel-auth-page::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
        background-size: 72px 72px;
        opacity: .55;
        pointer-events: none;
    }

    .sentinel-auth-page::after {
        content: "";
        position: absolute;
        left: -10%;
        right: 30%;
        bottom: 6%;
        height: 210px;
        border-radius: 999px;
        background: linear-gradient(105deg, rgba(54,211,153,.03), rgba(54,211,153,.34), rgba(255,255,255,.10), rgba(54,211,153,.03));
        filter: blur(10px);
        transform: rotate(-7deg);
        animation: sentinelWave 14s ease-in-out infinite;
        pointer-events: none;
    }

    .sentinel-stars {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image:
            radial-gradient(circle, rgba(255,255,255,.45) 1px, transparent 1px),
            radial-gradient(circle, rgba(54,211,153,.45) 1px, transparent 1px);
        background-size: 150px 150px, 235px 235px;
        background-position: 20px 20px, 90px 100px;
        opacity: .28;
        animation: sentinelDrift 22s linear infinite;
    }

    .sentinel-shell {
        position: relative;
        z-index: 2;
        width: min(1380px, 96vw);
        min-height: min(760px, calc(100vh - 2.5rem));
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(390px, .72fr);
        align-items: center;
        gap: clamp(2rem, 6vw, 6rem);
    }

    .sentinel-brand {
        max-width: 760px;
        animation: sentinelFadeUp .75s ease both;
    }

    .sentinel-brand-row {
        display: flex;
        align-items: center;
        gap: 1.15rem;
        margin-bottom: clamp(4rem, 10vh, 7rem);
    }

    .sentinel-mark {
        width: 76px;
        height: 76px;
        border-radius: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,.07);
        border: 1px solid rgba(127,255,212,.20);
        box-shadow: 0 18px 42px rgba(0,0,0,.32), 0 0 35px rgba(54,211,153,.18);
        animation: sentinelLogoFloat 5.8s ease-in-out infinite;
    }

    .sentinel-shield {
        width: 47px;
        height: 54px;
        border: 3px solid var(--sentinel-green);
        border-radius: 18px 18px 24px 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--sentinel-green);
        font-weight: 900;
        font-size: 1.7rem;
        text-shadow: 0 0 18px rgba(54,211,153,.55);
        box-shadow: inset 0 0 20px rgba(54,211,153,.10);
    }

    .sentinel-product h1 {
        margin: 0;
        font-size: clamp(2rem, 3vw, 3rem);
        line-height: 1;
        font-weight: 850;
        letter-spacing: -.045em;
    }

    .sentinel-product h1 span { color: var(--sentinel-green); }

    .sentinel-product p {
        margin: .65rem 0 0;
        color: rgba(255,255,255,.74);
        text-transform: uppercase;
        letter-spacing: .32em;
        font-size: .85rem;
        font-weight: 750;
    }

    .sentinel-tagline-block {
        max-width: 760px;
        margin-bottom: clamp(2.8rem, 6vh, 4.5rem);
    }

    .sentinel-tagline {
        display: inline-flex;
        white-space: nowrap;
        font-size: clamp(1.45rem, 2.5vw, 2.65rem);
        letter-spacing: clamp(.28rem, .85vw, .78rem);
        font-weight: 400;
        color: #f8fbff;
        text-shadow: 0 0 14px rgba(255,255,255,.7), 0 0 34px rgba(54,211,153,.6);
        animation: sentinelGlow 4s ease-in-out infinite;
    }

    .sentinel-tagline-line {
        position: relative;
        width: min(720px, 100%);
        height: 1px;
        margin-top: 1rem;
        background: linear-gradient(90deg, rgba(54,211,153,0), rgba(54,211,153,.95), rgba(54,211,153,0));
    }

    .sentinel-tagline-line::after {
        content: "";
        position: absolute;
        top: -4px;
        left: 0;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--sentinel-mint);
        box-shadow: 0 0 22px var(--sentinel-mint);
        animation: sentinelLineDot 6.5s linear infinite;
    }

    .sentinel-brand-copy {
        max-width: 410px;
        color: var(--sentinel-muted);
        font-size: 1.05rem;
        line-height: 1.6;
        margin: 0 0 2.2rem;
    }

    .sentinel-module-strip {
        display: grid;
        grid-template-columns: repeat(4, minmax(72px, 1fr));
        max-width: 520px;
        margin-bottom: 2.6rem;
        border-bottom: 1px solid rgba(255,255,255,.12);
        padding-bottom: 2rem;
    }

    .sentinel-module {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .55rem;
        min-height: 76px;
        border-right: 1px solid rgba(255,255,255,.18);
        color: rgba(255,255,255,.88);
        font-size: .8rem;
        font-weight: 750;
        text-align: center;
    }

    .sentinel-module:last-child { border-right: 0; }
    .sentinel-module i {
        color: var(--sentinel-green);
        font-size: 1.35rem;
        filter: drop-shadow(0 0 10px rgba(54,211,153,.4));
    }

    .sentinel-security-row {
        display: flex;
        flex-wrap: wrap;
        gap: 1.8rem;
        color: rgba(255,255,255,.68);
        font-size: .95rem;
        font-weight: 650;
    }

    .sentinel-security-row span { display: inline-flex; align-items: center; gap: .45rem; }
    .sentinel-security-row i { color: var(--sentinel-green); }

    .sentinel-card {
        position: relative;
        width: min(520px, 100%);
        justify-self: center;
        padding: clamp(2rem, 4vw, 3.4rem);
        border-radius: 28px;
        background:
            radial-gradient(circle at 100% 0%, rgba(54,211,153,.12), transparent 42%),
            rgba(8, 34, 40, .78);
        border: 1px solid rgba(255,255,255,.16);
        color: var(--sentinel-card-text);
        box-shadow: 0 36px 90px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08);
        backdrop-filter: blur(18px);
        animation: sentinelCardIn .75s ease both .12s;
    }

    .sentinel-secure-badge {
        position: absolute;
        top: 1.6rem;
        right: 1.6rem;
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .45rem .85rem;
        border-radius: 999px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.16);
        color: rgba(255,255,255,.9);
        font-size: .75rem;
        font-weight: 800;
    }

    .sentinel-secure-dot {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: rgba(54,211,153,.18);
        position: relative;
    }

    .sentinel-secure-dot::after {
        content: "";
        position: absolute;
        inset: 5px;
        border-radius: 50%;
        background: var(--sentinel-green);
        box-shadow: 0 0 12px rgba(54,211,153,.8);
        animation: sentinelPulse 2.4s ease-in-out infinite;
    }

    .sentinel-form-heading { margin-top: 1.7rem; margin-bottom: 2rem; }
    .sentinel-welcome {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        color: var(--sentinel-green);
        font-size: .95rem;
        font-weight: 800;
        margin-bottom: .95rem;
    }

    .sentinel-form-heading h2 {
        margin: 0 0 .75rem;
        color: #fff;
        font-size: clamp(2.05rem, 3vw, 2.85rem);
        line-height: 1.03;
        letter-spacing: -.055em;
        font-weight: 850;
    }

    .sentinel-form-heading h2 span { color: var(--sentinel-green); }
    .sentinel-form-heading p {
        margin: 0;
        color: var(--sentinel-card-muted);
        font-size: 1.02rem;
        font-weight: 550;
    }

    .sentinel-org-badge {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        margin-top: .9rem;
        padding: .45rem .85rem;
        border-radius: 999px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.14);
        color: #fff;
        font-size: .9rem;
        font-weight: 800;
    }

    .sentinel-org-badge::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--sentinel-green);
        box-shadow: 0 0 10px rgba(54,211,153,.65);
    }

    .sentinel-alerts .alert {
        border: 0;
        border-radius: 14px;
        font-weight: 700;
        font-size: .9rem;
        margin-bottom: 1rem;
    }

    .sentinel-field { margin-bottom: 1.25rem; }
    .sentinel-field label {
        display: block;
        margin-bottom: .45rem;
        color: rgba(255,255,255,.92);
        font-size: .88rem;
        font-weight: 800;
    }

    .sentinel-input-wrap { position: relative; }
    .sentinel-input-wrap input {
        width: 100%;
        min-height: 54px;
        border: 1px solid rgba(255,255,255,.18);
        background: rgba(255,255,255,.03);
        border-radius: 10px;
        padding: 0 3.1rem 0 1rem;
        color: #fff;
        font-size: .98rem;
        font-weight: 600;
        outline: none;
        transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .sentinel-input-wrap input::placeholder { color: rgba(226,232,240,.56); font-weight: 600; }
    .sentinel-input-wrap input:focus {
        border-color: rgba(54,211,153,.72);
        background: rgba(255,255,255,.055);
        box-shadow: 0 0 0 4px rgba(54,211,153,.12);
    }

    .sentinel-input-wrap input[readonly] { opacity: .82; }

    .sentinel-password-toggle {
        position: absolute;
        right: .75rem;
        top: 50%;
        transform: translateY(-50%);
        border: 0;
        background: transparent;
        color: rgba(255,255,255,.62);
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .sentinel-form-options {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin: .3rem 0 1.45rem;
        color: rgba(255,255,255,.72);
        font-size: .9rem;
        font-weight: 650;
    }

    .sentinel-form-options label { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
    .sentinel-form-options input { width: 16px; height: 16px; accent-color: var(--sentinel-green); }
    .sentinel-link {
        color: var(--sentinel-green);
        text-decoration: none;
        font-size: .92rem;
        font-weight: 800;
    }
    .sentinel-link:hover { text-decoration: underline; }

    .sentinel-submit-btn {
        width: 100%;
        border: 0;
        min-height: 58px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .75rem;
        background: linear-gradient(100deg, #1fa66d, #42e6a2);
        color: #06231c;
        font-size: 1rem;
        font-weight: 900;
        box-shadow: 0 20px 44px rgba(54,211,153,.24);
        cursor: pointer;
        transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
    }
    .sentinel-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 26px 52px rgba(54,211,153,.32); }
    .sentinel-submit-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

    .sentinel-note {
        margin-top: 1.4rem;
        display: flex;
        align-items: flex-start;
        gap: .55rem;
        color: rgba(226,232,240,.72);
        font-size: .82rem;
        line-height: 1.45;
        font-weight: 650;
    }
    .sentinel-note i { color: var(--sentinel-green); margin-top: .1rem; }

    .sentinel-info-box {
        display: flex;
        gap: .75rem;
        align-items: flex-start;
        padding: .95rem 1rem;
        border-radius: 12px;
        background: rgba(255,255,255,.06);
        border: 1px solid rgba(255,255,255,.12);
        color: rgba(255,255,255,.78);
        font-size: .88rem;
        font-weight: 650;
        line-height: 1.45;
        margin: .2rem 0 1.4rem;
    }
    .sentinel-info-box i { color: var(--sentinel-green); margin-top: .15rem; }
    .sentinel-error { display: block; color: #fecaca; font-size: .82rem; margin-top: .45rem; font-weight: 700; }

    .sentinel-reset-steps { display: grid; gap: .85rem; max-width: 400px; margin: 0 0 2.4rem; }
    .sentinel-reset-step {
        display: flex;
        align-items: center;
        gap: .85rem;
        padding: .95rem 1.05rem;
        border-radius: 14px;
        background: rgba(255,255,255,.065);
        border: 1px solid rgba(255,255,255,.11);
        color: rgba(255,255,255,.9);
        font-size: .95rem;
        font-weight: 800;
    }
    .sentinel-reset-step span {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(54,211,153,.22);
        color: #fff;
    }

    @keyframes sentinelWave { 0%,100%{ transform:translateX(0) rotate(-7deg); opacity:.85;} 50%{ transform:translateX(80px) rotate(-5deg); opacity:.55;} }
    @keyframes sentinelDrift { from{ transform:translate3d(0,0,0);} to{ transform:translate3d(-80px,40px,0);} }
    @keyframes sentinelFadeUp { from{ opacity:0; transform:translateY(22px);} to{ opacity:1; transform:translateY(0);} }
    @keyframes sentinelCardIn { from{ opacity:0; transform:translateY(28px) scale(.985);} to{ opacity:1; transform:translateY(0) scale(1);} }
    @keyframes sentinelGlow { 0%,100%{ opacity:.9; text-shadow:0 0 14px rgba(255,255,255,.7),0 0 34px rgba(54,211,153,.55);} 50%{ opacity:1; text-shadow:0 0 22px rgba(255,255,255,.9),0 0 52px rgba(54,211,153,.85);} }
    @keyframes sentinelLineDot { from{ left:0;} to{ left:calc(100% - 9px);} }
    @keyframes sentinelLogoFloat { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-7px);} }
    @keyframes sentinelPulse { 0%,100%{ transform:scale(1); opacity:1;} 50%{ transform:scale(1.15); opacity:.75;} }

    @media (max-width: 1199px) {
        .sentinel-shell { grid-template-columns: 1fr; gap: 2.5rem; }
        .sentinel-brand { max-width: 100%; }
        .sentinel-brand-row { margin-bottom: 3rem; }
        .sentinel-card { justify-self: start; }
    }
    @media (max-width: 768px) {
        .sentinel-auth-page { align-items: flex-start; padding: 1rem; }
        .sentinel-shell { min-height: auto; width: 100%; }
        .sentinel-card { width: 100%; padding: 1.5rem; border-radius: 24px; }
        .sentinel-secure-badge { position: static; margin-bottom: 1rem; }
        .sentinel-form-heading { margin-top: .25rem; }
        .sentinel-brand-row { margin-bottom: 2.5rem; }
        .sentinel-tagline { font-size: clamp(1.1rem, 5vw, 1.8rem); letter-spacing: .24rem; }
        .sentinel-module-strip { grid-template-columns: repeat(2, minmax(110px, 1fr)); max-width: 100%; }
        .sentinel-module:nth-child(2n) { border-right: 0; }
        .sentinel-form-options { align-items: flex-start; flex-direction: column; }
    }