:root{--bg:#07090d;--panel:#0d1118;--text:#f4f2ec;--muted:#8d96a3;--line:rgba(255,255,255,.09);--accent:#7567ff;--cyan:#51d7e9;--warm:#e8d6ae}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}body{min-height:100vh}.auth-body{overflow-x:hidden;background:radial-gradient(circle at 15% 20%,rgba(74,94,130,.16),transparent 32%),#07090d}
.auth-stage{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(430px,.72fr)}.vault-scene{position:relative;overflow:hidden;min-height:100vh;padding:clamp(34px,5vw,76px);display:flex;align-items:flex-end;background:linear-gradient(145deg,#080b10 0%,#0a1017 48%,#06080c 100%);border-right:1px solid rgba(255,255,255,.07)}
.vault-scene:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent 82%)}.scene-copy{position:relative;z-index:4;max-width:600px}.overline,.eyebrow{font-size:13px;font-weight:800;letter-spacing:.19em;color:#8c83ff}.scene-copy h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(44px,6.2vw,96px);line-height:.91;letter-spacing:-.055em;margin:15px 0 18px;font-weight:500}.scene-copy p{color:#929ba8;max-width:420px;line-height:1.6;font-size:18.2px}
.mechanism{position:absolute;width:min(48vw,690px);aspect-ratio:1;right:-8%;top:50%;transform:translateY(-54%);filter:drop-shadow(0 40px 90px rgba(0,0,0,.48))}.vault-door{position:absolute;inset:7%;border-radius:50%;background:radial-gradient(circle at 39% 34%,#222c36 0%,#131b24 32%,#0b1016 63%,#06080b 100%);border:1px solid #36404b;box-shadow:inset 0 0 0 12px #0c1117,inset 0 0 0 13px #2b3540,inset 0 0 70px #000,0 0 0 16px #06080b,0 0 0 17px #202832;animation:doorBreathe 7s ease-in-out infinite}.ring{position:absolute;border-radius:50%;border:1px solid rgba(152,179,197,.18);inset:10%}.ring-a{animation:spin 28s linear infinite}.ring-b{inset:22%;border-style:dashed;animation:spinReverse 17s linear infinite}.ring-c{inset:36%;border-color:rgba(117,103,255,.34);box-shadow:0 0 35px rgba(117,103,255,.10);animation:spin 11s linear infinite}.ring:before,.ring:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#677687;box-shadow:0 0 14px #677687}.ring:before{left:50%;top:-4px}.ring:after{left:50%;bottom:-4px}.dial{position:absolute;inset:42%;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#141b23,#070a0e 70%);border:1px solid #343e49;box-shadow:inset 0 0 24px #000,0 0 0 7px #0c1015,0 0 0 8px #303944}.dial span{font-size:15.6px;letter-spacing:.22em;color:#cfc9bc;font-weight:800}.bolt{position:absolute;width:10px;height:28px;border-radius:6px;background:linear-gradient(#485664,#1b242d);left:50%;top:8%;transform-origin:50% 1100%}.bolt-2{transform:rotate(90deg)}.bolt-3{transform:rotate(180deg)}.bolt-4{transform:rotate(270deg)}.sweep{position:absolute;inset:3%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 82%,rgba(81,215,233,.07) 94%,transparent 100%);animation:spin 7s linear infinite}.floor-line{position:absolute;left:7%;right:7%;bottom:2%;height:1px;background:linear-gradient(90deg,transparent,#32404d,transparent)}
.scene-status{position:absolute;left:clamp(34px,5vw,76px);top:clamp(30px,4vw,58px);font-size:11.7px;letter-spacing:.2em;color:#7d8794}.scene-status span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#65d6a1;box-shadow:0 0 14px #65d6a1;margin-right:9px}.auth-panel{min-height:100vh;background:rgba(10,13,18,.96);display:flex;flex-direction:column;padding:32px clamp(28px,5vw,72px)}.auth-top{display:flex;justify-content:space-between}.mini-brand{font-size:13px;letter-spacing:.17em;font-weight:800;color:#b8b2a7}.theme-dot{border:1px solid var(--line);background:#10151c;color:#b8c0ca;border-radius:50%;width:36px;height:36px}.auth-form-wrap{margin:auto 0;width:min(100%,480px);animation:formArrive .8s cubic-bezier(.22,.8,.2,1) both}.auth-form-wrap h2,.mfa-card h1,.setup-card h1{font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:clamp(38px,4.6vw,64px);line-height:.98;letter-spacing:-.045em;margin:13px 0 14px}.lead,.mfa-card p,.setup-card p{color:var(--muted);line-height:1.65;font-size:16.9px;margin-bottom:28px}.auth-form-wrap label,.mfa-card label,.setup-card label{display:grid;gap:8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#99a3af;margin:17px 0}.auth-form-wrap input,.mfa-card input,.setup-card input,.setup-card select{width:100%;height:54px;border-radius:5px;border:1px solid #27303a;background:#090c11;color:#f5f2ea;padding:0 15px;font:inherit;outline:none;transition:.2s}.auth-form-wrap input:focus,.mfa-card input:focus,.setup-card input:focus{border-color:#7467ff;box-shadow:0 0 0 3px rgba(116,103,255,.09)}.password-wrap{position:relative}.password-wrap button{position:absolute;right:8px;top:8px;height:38px;border:0;background:transparent;color:#6f7b89;font-size:11.7px;letter-spacing:.12em}.auth-submit,.setup-card button{width:100%;height:55px;border:0;border-radius:5px;background:#f1eee6;color:#080a0d;font-weight:800;margin-top:8px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;cursor:pointer;transition:.2s}.auth-submit:hover,.setup-card button:hover{transform:translateY(-1px);box-shadow:0 12px 35px rgba(255,255,255,.09)}.auth-submit i{font-style:normal}.auth-foot{display:flex;justify-content:space-between;gap:18px;margin-top:28px;color:#6f7985;font-size:13px}.auth-foot a,.text-link{color:#aaa4ff}.form-error{border:1px solid rgba(255,102,120,.25);background:rgba(255,102,120,.08);padding:12px 14px;border-radius:6px;color:#ff9ba8;font-size:15.6px;margin:14px 0}.compact-auth{display:grid;place-items:center;padding:24px}.mfa-card,.setup-card{width:min(620px,100%);padding:clamp(24px,5vw,56px);background:#0c1016;border:1px solid var(--line);box-shadow:0 50px 110px rgba(0,0,0,.45);position:relative;overflow:hidden}.mfa-card:before,.setup-card:before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(117,103,255,.12);filter:blur(60px);right:-100px;top:-90px}.secret-block{border:1px solid var(--line);background:#080b0f;padding:18px;margin:20px 0}.secret-block small{display:block;color:#75808d;font-size:11.7px;letter-spacing:.15em}.secret-block code{display:block;font-size:20.8px;letter-spacing:.12em;margin:10px 0;word-break:break-all}.secret-block button{width:auto;height:34px;padding:0 12px;margin:0;background:#181e27;color:#dce2e8}.uri{display:block;word-break:break-all;color:#84909d;padding:12px 0}.otp-input{font-size:33.8px!important;letter-spacing:.28em!important;text-align:center}.mfa-pulse{width:56px;height:56px;position:relative;margin-bottom:26px}.mfa-pulse:before,.mfa-pulse:after,.mfa-pulse span{content:"";position:absolute;inset:0;border:1px solid #7467ff;border-radius:50%;animation:pulse 2.2s ease-out infinite}.mfa-pulse:after{animation-delay:.7s}.mfa-pulse span{animation-delay:1.4s}.setup-body{display:grid;place-items:center;min-height:100vh;padding:24px;background:#07090d}.setup-card{width:min(760px,100%)}.setup-brand{display:flex;align-items:center;gap:14px;margin-bottom:30px}.setup-brand>span{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#eeeae0;color:#08090c;font-weight:900;font-size:14.3px}.setup-brand b,.setup-brand small{display:block}.setup-brand small{color:#77818d;font-size:13px}.form-split{display:grid;grid-template-columns:1fr 1fr;gap:14px}.setup-card hr{border:0;border-top:1px solid var(--line);margin:28px 0}.setup-success{padding:18px;border:1px solid rgba(83,215,156,.25);background:rgba(83,215,156,.06);color:#a8e8c9}.setup-success a{color:#fff}.arrive-locked .auth-form-wrap{animation:unlockForm .7s ease both}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes spinReverse{to{transform:rotate(-360deg)}}@keyframes doorBreathe{50%{box-shadow:inset 0 0 0 12px #0c1117,inset 0 0 0 13px #39444f,inset 0 0 80px #000,0 0 0 16px #06080b,0 0 0 17px #2a3540}}@keyframes formArrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes unlockForm{0%{opacity:.4;filter:blur(2px);transform:scale(.985)}100%{opacity:1;filter:none;transform:none}}@keyframes pulse{0%{transform:scale(.5);opacity:0}25%{opacity:1}100%{transform:scale(1.6);opacity:0}}
@media(max-width:950px){.auth-stage{grid-template-columns:1fr}.vault-scene{min-height:300px;padding:30px;align-items:flex-end}.mechanism{width:380px;right:-110px;top:50%}.scene-copy h1{font-size:58.5px}.auth-panel{min-height:auto;padding:28px;}.auth-form-wrap{margin:48px auto 40px}.scene-status{left:30px;top:26px}}@media(max-width:560px){.vault-scene{min-height:220px}.scene-copy h1{font-size:44.2px}.scene-copy p{display:none}.mechanism{width:280px;right:-100px}.auth-form-wrap h2{font-size:54.6px}.auth-foot{display:grid}.form-split{grid-template-columns:1fr}.mfa-card,.setup-card{padding:24px 18px}}


/* OV UI POLISH R2 */

.vault-scene {
    border-right: 0 !important;
}

.vault-scene::after {
    content: "";
    position: absolute;
    z-index: 8;
    top: 6%;
    bottom: 6%;
    right: 0;
    width: 1px;
    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(154,166,184,.04) 7%,
            rgba(154,166,184,.17) 30%,
            rgba(154,166,184,.12) 68%,
            rgba(154,166,184,.03) 93%,
            transparent 100%
        );
    box-shadow:
        -1px 0 10px rgba(97,116,137,.05),
        1px 0 10px rgba(97,116,137,.04);
    opacity: .68;
}

.vault-scene::before {
    opacity: .52;
}

.ring {
    border-color: rgba(143,162,181,.105) !important;
    box-shadow:
        inset 0 0 22px rgba(88,109,130,.018),
        0 0 16px rgba(88,109,130,.018);
    will-change: transform;
}

.ring-a {
    opacity: .76;
    animation-duration: 34s !important;
}

.ring-b {
    opacity: .58;
    border-style: solid !important;
    animation-duration: 24s !important;
}

.ring-c {
    opacity: .68;
    border-color: rgba(117,103,255,.20) !important;
    box-shadow:
        0 0 25px rgba(117,103,255,.045) !important;
    animation-duration: 17s !important;
}

.ring::before,
.ring::after {
    width: 5px !important;
    height: 5px !important;
    opacity: .72;
    box-shadow: 0 0 12px rgba(130,151,172,.35) !important;
}

.floor-line {
    height: 1px !important;
    opacity: .44;
    filter: blur(.2px);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(113,132,151,.12) 22%,
            rgba(113,132,151,.28) 50%,
            rgba(113,132,151,.12) 78%,
            transparent
        ) !important;
}

.dev-bypass-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    min-height: 51px;
    margin-top: 10px;
    padding: 0 16px;
    border: 1px solid rgba(117,103,255,.32);
    border-radius: 5px;
    background: rgba(117,103,255,.075);
    color: #bbb5ff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    transition: .2s ease;
}

.dev-bypass-btn span {
    color: #716a92;
    font-size: 10.4px;
    font-weight: 600;
}

.dev-bypass-btn:hover {
    transform: translateY(-1px);
    background: rgba(117,103,255,.12);
    border-color: rgba(117,103,255,.48);
}

/* Real light mode */

html[data-theme="light"] {
    --bg: #f2f0ea;
    --panel: #fbfaf7;
    --text: #15181c;
    --muted: #66717d;
    --line: rgba(14,19,24,.11);
    --accent: #6759e8;
    --cyan: #258fa0;
    --warm: #6f5d37;
}

html[data-theme="light"] .auth-body {
    background:
        radial-gradient(circle at 16% 16%,rgba(94,109,132,.12),transparent 34%),
        #f1efe9;
}

html[data-theme="light"] .vault-scene {
    background:
        linear-gradient(
            145deg,
            #e9e7e1 0%,
            #f6f4ef 52%,
            #e3e1dc 100%
        );
}

html[data-theme="light"] .vault-scene::before {
    background-image:
        linear-gradient(rgba(29,38,49,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(29,38,49,.035) 1px,transparent 1px);
}

html[data-theme="light"] .scene-copy h1 {
    color: #161a1f;
}

html[data-theme="light"] .scene-copy p,
html[data-theme="light"] .scene-status {
    color: #69737e;
}

html[data-theme="light"] .vault-door {
    background:
        radial-gradient(
            circle at 39% 34%,
            #eef0ef 0%,
            #cfd4d5 30%,
            #9ca5aa 61%,
            #626d75 100%
        );
    border-color: #8d979e;
    box-shadow:
        inset 0 0 0 12px #bec4c6,
        inset 0 0 0 13px #8f999f,
        inset 0 0 60px rgba(49,58,64,.28),
        0 0 0 16px #d4d6d3,
        0 0 0 17px #9ba4aa;
}

html[data-theme="light"] .ring {
    border-color: rgba(45,57,68,.15) !important;
}

html[data-theme="light"] .dial {
    background:
        radial-gradient(circle,#f5f4ef,#a7afb2 72%);
    border-color: #77828a;
}

html[data-theme="light"] .dial span {
    color: #222a30;
}

html[data-theme="light"] .auth-panel {
    background: rgba(249,248,244,.97);
}

html[data-theme="light"] .theme-dot {
    background: #ebe8e1;
    color: #30373e;
    border-color: rgba(15,20,25,.12);
}

html[data-theme="light"] .auth-form-wrap input,
html[data-theme="light"] .mfa-card input,
html[data-theme="light"] .setup-card input,
html[data-theme="light"] .setup-card select {
    background: #fff;
    color: #171a1e;
    border-color: #d7d4cc;
}

html[data-theme="light"] .password-wrap button {
    color: #626c77;
}

html[data-theme="light"] .auth-submit,
html[data-theme="light"] .setup-card button {
    background: #171a1e;
    color: #f5f2ec;
}

html[data-theme="light"] .mfa-card,
html[data-theme="light"] .setup-card {
    background: #fbfaf7;
    border-color: rgba(20,25,30,.10);
    box-shadow: 0 35px 90px rgba(45,50,56,.12);
}

html[data-theme="light"] .secret-block {
    background: #f2f0ea;
    border-color: rgba(20,25,30,.10);
}

@media(max-width:950px) {
    .vault-scene::after {
        top: auto;
        left: 5%;
        right: 5%;
        bottom: 0;
        width: auto;
        height: 1px;
        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(135,151,168,.18),
                transparent
            );
    }
}


/* === OV R4 AUTH HOTFIX === */

/* Remove the hard divider completely */
.vault-scene{
    border-right:0 !important;
    box-shadow:none !important;
}

.vault-scene::after{
    display:none !important;
}

/* Blend the two sides instead of drawing a line */
.auth-panel{
    position:relative;
    border-left:0 !important;
}

.auth-panel::before{
    content:"";
    position:absolute;
    pointer-events:none;
    z-index:2;
    top:0;
    bottom:0;
    left:-90px;
    width:90px;
    background:
        linear-gradient(
            90deg,
            rgba(10,13,18,0) 0%,
            rgba(10,13,18,.18) 28%,
            rgba(10,13,18,.58) 67%,
            rgba(10,13,18,.96) 100%
        );
}

/* Soften vault geometry */
.ring{
    border-color:rgba(135,151,169,.085) !important;
    box-shadow:none !important;
}

.ring-a{
    opacity:.62 !important;
}

.ring-b{
    opacity:.43 !important;
    border-style:solid !important;
}

.ring-c{
    opacity:.54 !important;
    border-color:rgba(117,103,255,.15) !important;
    box-shadow:0 0 28px rgba(117,103,255,.03) !important;
}

.floor-line{
    opacity:.22 !important;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(110,130,150,.16),
            transparent
        ) !important;
}

/* TEST MODE button */
.dev-quick-access{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    min-height:52px;
    margin-top:10px;
    padding:0 16px;
    text-decoration:none;
    border-radius:5px;
    border:1px solid rgba(117,103,255,.30);
    background:rgba(117,103,255,.075);
    color:#c4beff;
    font-size:13px;
    font-weight:800;
    transition:.18s ease;
}

.dev-quick-access:hover{
    background:rgba(117,103,255,.13);
    transform:translateY(-1px);
}

.dev-quick-access small{
    color:#746e96;
    font-size:10.4px;
}

.test-mode-label{
    display:inline-flex;
    margin-bottom:18px;
    padding:5px 8px;
    border-radius:20px;
    border:1px solid rgba(232,187,109,.28);
    background:rgba(232,187,109,.07);
    color:#dbbc7e;
    font-size:10.4px;
    font-weight:800;
    letter-spacing:.15em;
}

/* REAL LIGHT MODE */

html[data-theme="light"] body.auth-body{
    background:#efede7 !important;
    color:#16191d !important;
}

html[data-theme="light"] .vault-scene{
    background:
        radial-gradient(
            circle at 42% 38%,
            rgba(255,255,255,.70),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #dbd9d3 0%,
            #efede7 48%,
            #d7d5cf 100%
        ) !important;
}

html[data-theme="light"] .auth-panel{
    background:#f8f7f3 !important;
    color:#15181c !important;
}

html[data-theme="light"] .auth-panel::before{
    background:
        linear-gradient(
            90deg,
            rgba(248,247,243,0) 0%,
            rgba(248,247,243,.22) 30%,
            rgba(248,247,243,.66) 70%,
            rgba(248,247,243,1) 100%
        );
}

html[data-theme="light"] .scene-copy h1,
html[data-theme="light"] .auth-form-wrap h2{
    color:#171a1e !important;
}

html[data-theme="light"] .scene-copy p,
html[data-theme="light"] .lead,
html[data-theme="light"] .auth-foot{
    color:#68727c !important;
}

html[data-theme="light"] .auth-form-wrap input{
    background:#fff !important;
    color:#171a1e !important;
    border-color:#d3d0c8 !important;
}

html[data-theme="light"] .auth-submit{
    background:#171a1e !important;
    color:#f5f2ec !important;
}

html[data-theme="light"] .theme-dot{
    background:#ebe8e0 !important;
    color:#1c2228 !important;
    border-color:rgba(15,20,25,.12) !important;
}

html[data-theme="light"] .vault-door{
    background:
        radial-gradient(
            circle at 39% 34%,
            #eef0ee,
            #c5cbcc 34%,
            #89949b 67%,
            #58636b
        ) !important;
}

html[data-theme="light"] .ring{
    border-color:rgba(40,52,62,.13) !important;
}

@media(max-width:950px){
    .auth-panel::before{
        top:-50px;
        left:0;
        right:0;
        width:auto;
        height:50px;
        bottom:auto;
        background:
            linear-gradient(
                180deg,
                rgba(10,13,18,0),
                rgba(10,13,18,.96)
            );
    }

    html[data-theme="light"] .auth-panel::before{
        background:
            linear-gradient(
                180deg,
                rgba(248,247,243,0),
                rgba(248,247,243,1)
            );
    }
}


/* OV FONT SCALE +30% */
