:root {
    --og-bg: #020817;
    --og-text: #f8fafc;
    --og-muted: #a8b3c7;
    --og-blue: #0bb8ff;
    --og-blue-2: #1456ff;
    --og-red: #ff1554;
    --og-purple: #8b5cf6;
    --og-green: #27e47d;
    --og-glass: rgba(5, 12, 27, .68);
    --og-line: rgba(148, 163, 184, .22);
}

.fi-simple-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.fi-simple-layout {
    min-height: 100vh !important;
    padding: 0 !important;
    background: #020817 !important;
}

.fi-simple-header,
.fi-logo {
    display: none !important;
}

html,
body {
    width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #020817 !important;
}

.og-login,
.og-login * {
    box-sizing: border-box;
}

.og-login {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    color: var(--og-text);
    isolation: isolate;
    background:
        radial-gradient(circle at 18% 30%, rgba(11, 184, 255, .18), transparent 30%),
        radial-gradient(circle at 82% 48%, rgba(255, 21, 84, .15), transparent 32%),
        radial-gradient(circle at 50% 90%, rgba(139, 92, 246, .14), transparent 34%),
        linear-gradient(135deg, #020817 0%, #030713 54%, #070611 100%);
}

.og-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: .95;
}

.og-noise {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .28;
    mix-blend-mode: screen;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.11) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(11,184,255,.18) 0 1px, transparent 1.9px),
        radial-gradient(circle, rgba(255,21,84,.14) 0 1px, transparent 1.8px);
    background-size: 83px 83px, 119px 119px, 151px 151px;
    background-position: 0 0, 31px 21px, 65px 44px;
    mask-image: radial-gradient(ellipse at 50% 67%, black 0%, rgba(0,0,0,.72) 46%, transparent 82%);
    animation: og-star-drift 32s linear infinite;
}

@keyframes og-star-drift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-92px, -58px, 0); }
}

.og-haze {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
        radial-gradient(ellipse at 24% 62%, rgba(11, 184, 255, .20), transparent 34%),
        radial-gradient(ellipse at 78% 62%, rgba(255, 21, 84, .18), transparent 34%),
        radial-gradient(ellipse at 51% 84%, rgba(139, 92, 246, .18), transparent 38%);
    background-size: 64px 64px, 64px 64px, auto, auto, auto;
    mask-image: radial-gradient(ellipse at 50% 58%, rgba(0,0,0,.95) 0%, rgba(0,0,0,.44) 58%, transparent 84%);
}

.og-aurora {
    position: absolute;
    z-index: 2;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(54px);
    opacity: .54;
    will-change: transform;
}

.og-aurora-blue {
    left: -150px;
    bottom: 17vh;
    width: 470px;
    height: 470px;
    background: rgba(11, 184, 255, .48);
    animation: og-aurora-blue 9s ease-in-out infinite alternate;
}

.og-aurora-red {
    right: -150px;
    bottom: 17vh;
    width: 470px;
    height: 470px;
    background: rgba(255, 21, 84, .42);
    animation: og-aurora-red 10s ease-in-out infinite alternate;
}

.og-aurora-purple {
    left: 50%;
    bottom: -180px;
    width: 600px;
    height: 340px;
    background: rgba(139, 92, 246, .34);
    transform: translateX(-50%);
    filter: blur(70px);
    animation: og-aurora-purple 11s ease-in-out infinite alternate;
}

@keyframes og-aurora-blue {
    from { transform: translate3d(-20px, 18px, 0) scale(.96); }
    to { transform: translate3d(36px, -22px, 0) scale(1.12); }
}

@keyframes og-aurora-red {
    from { transform: translate3d(20px, 18px, 0) scale(.96); }
    to { transform: translate3d(-36px, -22px, 0) scale(1.12); }
}

@keyframes og-aurora-purple {
    from { transform: translate3d(-50%, 12px, 0) scale(.96); }
    to { transform: translate3d(-50%, -20px, 0) scale(1.08); }
}

.og-stage {
    position: relative;
    z-index: 4;
    width: min(1140px, calc(100% - 56px));
    height: 100vh;
    min-height: 100vh;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(330px, .72fr) minmax(420px, .78fr);
    align-items: center;
    gap: 86px;
    padding: 0;
    perspective: 1400px;
}

.og-brand {
    min-width: 0;
    display: grid;
    justify-items: center;
    text-align: center;
    transform-style: preserve-3d;
    animation: og-brand-in .95s cubic-bezier(.16,1,.3,1) both;
    will-change: transform;
}

@keyframes og-brand-in {
    0% {
        opacity: 0;
        transform: translate3d(-26px, 18px, 0) scale(.94);
        filter: blur(14px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

.og-logo {
    position: relative;
    width: 190px;
    height: 118px;
    margin-bottom: 28px;
    filter: drop-shadow(0 24px 44px rgba(0,0,0,.34));
}

.og-logo-blue,
.og-logo-red,
.og-logo-ring,
.og-logo-green {
    position: absolute;
    display: block;
    border-radius: 999px;
}

.og-logo-blue {
    left: 3px;
    top: 11px;
    width: 95px;
    height: 95px;
    background: linear-gradient(145deg, #24d2ff, #0094d8);
    box-shadow: 0 0 36px rgba(11,184,255,.40), inset 0 2px 0 rgba(255,255,255,.20);
    animation: og-breathe-blue 5.4s ease-in-out infinite;
}

.og-logo-red {
    left: 65px;
    top: 11px;
    width: 95px;
    height: 95px;
    background: linear-gradient(145deg, #ff1b5c, #e5003d);
    box-shadow: 0 0 36px rgba(255,21,84,.40), inset 0 2px 0 rgba(255,255,255,.20);
    animation: og-breathe-red 5.8s ease-in-out infinite;
}

.og-logo-ring {
    left: 90px;
    top: 36px;
    width: 45px;
    height: 45px;
    background: #07111d;
    box-shadow: 0 16px 32px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08);
}

.og-logo-green {
    left: 104px;
    top: 50px;
    width: 17px;
    height: 17px;
    background: linear-gradient(145deg, #2ff082, #13ae59);
    box-shadow: 0 0 18px rgba(39,228,125,.55);
    animation: og-heartbeat 2.5s ease-in-out infinite;
}

@keyframes og-breathe-blue {
    0%, 100% { filter: brightness(1); transform: scale(1); }
    50% { filter: brightness(1.12); transform: scale(1.025); }
}

@keyframes og-breathe-red {
    0%, 100% { filter: brightness(1); transform: scale(1); }
    50% { filter: brightness(1.11); transform: scale(1.022); }
}

@keyframes og-heartbeat {
    0%, 68%, 100% { transform: scale(1); box-shadow: 0 0 18px rgba(39,228,125,.55); }
    15% { transform: scale(1.28); box-shadow: 0 0 30px rgba(39,228,125,.88); }
    28% { transform: scale(.96); }
    42% { transform: scale(1.14); }
}

.og-wordmark {
    display: grid;
    gap: 3px;
    color: #fff;
    font-weight: 950;
    letter-spacing: -.064em;
    line-height: .75;
    font-size: clamp(66px, 7vw, 86px);
    text-shadow: 0 18px 44px rgba(0,0,0,.45), 0 0 42px rgba(255,255,255,.06);
}

.og-crm {
    margin-top: 25px;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    color: rgba(226, 232, 240, .74);
    font-size: 18px;
    letter-spacing: .58em;
    font-weight: 650;
    text-indent: .58em;
}

.og-crm::before,
.og-crm::after {
    content: '';
    width: 54px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(148,163,184,.58));
}

.og-crm::after {
    background: linear-gradient(90deg, rgba(148,163,184,.58), transparent);
}

.og-panel-wrap {
    display: flex;
    justify-content: center;
    transform-style: preserve-3d;
    animation: og-panel-in 1.02s .15s cubic-bezier(.16,1,.3,1) both, og-float 12s 1.5s ease-in-out infinite;
    will-change: transform;
}

@keyframes og-panel-in {
    0% {
        opacity: 0;
        transform: translate3d(26px, 24px, 0) scale(.955);
        filter: blur(16px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes og-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -7px; }
}

.og-panel {
    position: relative;
    width: min(505px, 100%);
    border-radius: 34px;
    padding: 1px;
    background:
        linear-gradient(135deg, rgba(11,184,255,.85), rgba(255,255,255,.12) 38%, rgba(255,21,84,.82));
    box-shadow:
        0 40px 120px rgba(0,0,0,.64),
        0 0 62px rgba(11,184,255,.11),
        0 0 62px rgba(255,21,84,.09);
    overflow: hidden;
    transform-style: preserve-3d;
}

.og-panel::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 33px;
    background:
        radial-gradient(circle at 0% 0%, rgba(11, 184, 255, .14), transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(255, 21, 84, .14), transparent 40%),
        linear-gradient(180deg, rgba(5, 12, 27, .72), rgba(3, 7, 18, .84));
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
}

.og-panel-reflection {
    position: absolute;
    inset: -45%;
    z-index: 1;
    background: conic-gradient(from 180deg, transparent, rgba(255,255,255,.095), transparent 29%);
    opacity: .48;
    animation: og-reflect 8s linear infinite;
    pointer-events: none;
}

@keyframes og-reflect {
    to { transform: rotate(360deg); }
}

.og-panel-ring {
    position: absolute;
    inset: 1px;
    z-index: 1;
    border-radius: 33px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -1px 0 rgba(255,255,255,.025);
    pointer-events: none;
}

.og-panel-content {
    position: relative;
    z-index: 2;
    padding: 42px 42px 36px;
}

.og-mobile-brand {
    display: none;
    position: relative;
    z-index: 2;
}

.og-logo-small {
    width: 92px;
    height: 64px;
    margin: 0 auto 22px;
}

.og-logo-small .og-logo-blue {
    width: 60px;
    height: 60px;
    top: 2px;
}

.og-logo-small .og-logo-red {
    left: 38px;
    width: 60px;
    height: 60px;
    top: 2px;
}

.og-logo-small .og-logo-ring {
    left: 54px;
    top: 18px;
    width: 28px;
    height: 28px;
}

.og-logo-small .og-logo-green {
    left: 63px;
    top: 27px;
    width: 10px;
    height: 10px;
}

.og-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
    color: rgba(186, 230, 253, .92);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.og-kicker::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--og-green);
    box-shadow: 0 0 0 5px rgba(39,228,125,.12), 0 0 18px rgba(39,228,125,.48);
}

.og-title {
    margin: 0;
    font-size: 34px;
    line-height: 1.04;
    letter-spacing: -.047em;
    font-weight: 950;
    color: #fff;
    text-shadow: 0 16px 40px rgba(0,0,0,.35);
}

.og-subtitle {
    margin: 10px 0 0;
    color: rgba(203, 213, 225, .78);
    font-size: 14px;
    font-weight: 760;
}

.og-status {
    margin-top: 18px;
    border-radius: 16px;
    padding: 12px 13px;
    background: rgba(39, 228, 125, .10);
    border: 1px solid rgba(39, 228, 125, .24);
    color: #bbf7d0;
    font-size: 12px;
    font-weight: 850;
}

.og-form {
    margin-top: 32px;
}

.og-field {
    margin-top: 22px;
}

.og-label {
    display: block;
    margin-bottom: 11px;
    color: rgba(241, 245, 249, .94);
    font-size: 13px;
    font-weight: 900;
}

.og-input-shell {
    position: relative;
}

.og-input-icon {
    position: absolute;
    z-index: 2;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(148, 163, 184, .78);
    font-size: 14px;
    pointer-events: none;
}

.og-input {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 58px;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 15px;
    background: rgba(15, 23, 42, .50);
    color: #f8fafc;
    outline: none;
    padding: 0 17px 0 48px;
    font-size: 14px;
    font-weight: 760;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 28px rgba(0,0,0,.15);
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.og-input::placeholder {
    color: rgba(148, 163, 184, .64);
}

.og-input:focus {
    border-color: rgba(11, 184, 255, .82);
    background: rgba(15, 23, 42, .66);
    box-shadow:
        0 0 0 4px rgba(11, 184, 255, .13),
        0 0 30px rgba(11, 184, 255, .13),
        inset 0 1px 0 rgba(255,255,255,.055);
}

.og-input-glow {
    position: absolute;
    inset: -10px;
    border-radius: 22px;
    opacity: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(11,184,255,.22), transparent 58%);
    filter: blur(10px);
    transition: opacity .16s ease;
    pointer-events: none;
}

.og-input:focus + .og-input-glow {
    opacity: 1;
}

.og-error {
    margin-top: 9px;
    color: #fca5a5;
    font-size: 11.5px;
    font-weight: 850;
}

.og-row {
    margin-top: 21px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.og-remember {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: rgba(226, 232, 240, .88);
    font-size: 12.5px;
    font-weight: 800;
}

.og-remember input {
    width: 17px;
    height: 17px;
    border-radius: 5px;
    border-color: rgba(148, 163, 184, .38);
    background: rgba(15, 23, 42, .56);
    color: var(--og-blue);
}

.og-forgot {
    color: #38bdf8;
    font-size: 12.5px;
    font-weight: 900;
    text-decoration: none;
    transition: color .14s ease, text-shadow .14s ease;
}

.og-forgot:hover {
    color: #bae6fd;
    text-shadow: 0 0 18px rgba(56, 189, 248, .34);
}

.og-submit {
    position: relative;
    margin-top: 34px;
    width: 100%;
    height: 62px;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(90deg, #0bb8ff 0%, #0f7bee 45%, #174bd5 100%);
    color: #f8fbff;
    font-size: 15px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 22px 44px rgba(0, 104, 255, .28), inset 0 1px 0 rgba(255,255,255,.19);
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
    overflow: hidden;
}

.og-submit::before {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-118%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
    transition: transform .48s ease;
}

.og-submit::after {
    content: '';
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at var(--og-ripple-x, 50%) var(--og-ripple-y, 50%), rgba(255,255,255,.24), transparent 24%);
    opacity: 0;
    transition: opacity .18s ease;
}

.og-submit:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 28px 58px rgba(0, 104, 255, .38), 0 0 34px rgba(11, 184, 255, .20), inset 0 1px 0 rgba(255,255,255,.22);
}

.og-submit:hover::before {
    transform: translateX(118%);
}

.og-submit:active {
    transform: translateY(0) scale(.985);
}

.og-submit:active::after {
    opacity: 1;
}

.og-submit:disabled {
    cursor: wait;
    opacity: .80;
    transform: none;
}

.og-submit-text,
.og-submit-arrow,
.og-loading {
    position: relative;
    z-index: 1;
}

.og-submit-arrow {
    margin-left: 8px;
}

.og-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.og-loading-dot {
    width: 13px;
    height: 13px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.38);
    border-top-color: var(--og-green);
    animation: og-spin .75s linear infinite;
}

@keyframes og-spin {
    to { transform: rotate(360deg); }
}

.og-footer {
    margin-top: 29px;
    text-align: center;
    color: rgba(100, 116, 139, .88);
    font-size: 12px;
    font-weight: 750;
}

@media (prefers-reduced-motion: reduce) {
    .og-noise,
    .og-aurora,
    .og-brand,
    .og-panel-wrap,
    .og-panel-reflection,
    .og-logo-blue,
    .og-logo-red,
    .og-logo-green,
    .og-loading-dot {
        animation: none !important;
    }
}

@media (max-width: 1100px) {
    .og-stage {
        grid-template-columns: 1fr;
        gap: 34px;
        padding: 28px 0;
        height: 100vh;
    }

    .og-logo {
        width: 128px;
        height: 78px;
        margin-bottom: 18px;
    }

    .og-logo-blue {
        width: 62px;
        height: 62px;
        top: 8px;
    }

    .og-logo-red {
        left: 42px;
        width: 62px;
        height: 62px;
        top: 8px;
    }

    .og-logo-ring {
        left: 59px;
        top: 25px;
        width: 28px;
        height: 28px;
    }

    .og-logo-green {
        left: 68px;
        top: 34px;
        width: 10px;
        height: 10px;
    }

    .og-wordmark {
        font-size: clamp(46px, 8vw, 64px);
    }

    .og-crm {
        margin-top: 17px;
        font-size: 14px;
    }
}

@media (max-width: 700px) {
    html,
    body {
        overflow-y: auto !important;
    }

    .og-login {
        position: relative;
        min-height: 100vh;
        height: auto;
        overflow: hidden;
    }

    .og-stage {
        width: calc(100% - 28px);
        min-height: 100vh;
        height: auto;
        padding: 24px 0 30px;
        gap: 20px;
    }

    .og-brand {
        display: none;
    }

    .og-mobile-brand {
        display: flex;
        justify-content: center;
    }

    .og-panel {
        border-radius: 27px;
    }

    .og-panel::before,
    .og-panel-ring {
        border-radius: 26px;
    }

    .og-panel-content {
        padding: 27px 20px 25px;
    }

    .og-title {
        font-size: 27px;
    }

    .og-input,
    .og-submit {
        height: 52px;
    }

    .og-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 11px;
    }
}

@media (max-width: 420px) {
    .og-panel-content {
        padding: 24px 17px;
    }

    .og-title {
        font-size: 25px;
    }

    .og-form {
        margin-top: 25px;
    }

    .og-field {
        margin-top: 18px;
    }

    .og-footer {
        font-size: 11px;
    }
}