: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}}

/* Office Vault V8 auth refinements */
.vault-scene{border-right:0!important}
.vault-scene:after{content:"";position:absolute;z-index:3;top:0;right:0;bottom:0;width:100px;background:linear-gradient(90deg,transparent,rgba(10,13,18,.22),rgba(10,13,18,.72),#0a0d12);pointer-events:none}
.theme-dot{display:grid;place-items:center;text-decoration:none;cursor:pointer}
.role-test-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.role-test-card{min-height:102px;padding:14px;border:1px solid #27313c;border-radius:7px;text-decoration:none;background:linear-gradient(145deg,rgba(117,103,255,.075),rgba(255,255,255,.018));display:flex;flex-direction:column;justify-content:center;transition:.2s}
.role-test-card:hover{transform:translateY(-2px);border-color:rgba(117,103,255,.46);box-shadow:0 16px 35px rgba(0,0,0,.18)}
.role-test-card>span{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#171e28;color:#aaa4ff;font-size:9px;font-weight:900;margin-bottom:9px}
.role-test-card b{color:var(--text);font-size:11px}.role-test-card small{color:#777f8b;font-size:8px;margin-top:5px}
html[data-theme="light"]{--bg:#efede7;--panel:#f8f6f0;--text:#171a1e;--muted:#68727d;--line:rgba(20,25,30,.12);--accent:#6759e8;--cyan:#258fa0;--warm:#705f3d}
html[data-theme="light"] .auth-body{background:radial-gradient(circle at 15% 20%,rgba(94,109,132,.12),transparent 32%),#efede7}
html[data-theme="light"] .vault-scene{background:linear-gradient(145deg,#e0ded8 0%,#f2f0ea 48%,#d8d5ce 100%)}
html[data-theme="light"] .vault-scene:after{background:linear-gradient(90deg,transparent,rgba(248,246,240,.2),rgba(248,246,240,.7),#f8f6f0)}
html[data-theme="light"] .vault-scene:before{background-image:linear-gradient(rgba(25,35,45,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(25,35,45,.035) 1px,transparent 1px)}
html[data-theme="light"] .scene-copy h1{color:#171a1e}html[data-theme="light"] .scene-copy p,html[data-theme="light"] .scene-status{color:#68727d}
html[data-theme="light"] .vault-door{background:radial-gradient(circle at 39% 34%,#eef0ef 0%,#cdd2d3 32%,#9da6ab 63%,#657079 100%);border-color:#8f999f;box-shadow:inset 0 0 0 12px #bec4c6,inset 0 0 0 13px #8f999f,inset 0 0 70px rgba(50,60,68,.25),0 0 0 16px #d2d4d1,0 0 0 17px #9ba4aa}
html[data-theme="light"] .ring{border-color:rgba(40,52,62,.14)}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(248,246,240,.98)}html[data-theme="light"] .theme-dot{background:#ebe8e1;color:#30373e}html[data-theme="light"] .auth-form-wrap input{background:#fff;color:#171a1e;border-color:#d5d1c8}html[data-theme="light"] .auth-submit{background:#171a1e;color:#f5f2ec}html[data-theme="light"] .role-test-card{background:#fff;border-color:#d8d4cc}html[data-theme="light"] .role-test-card>span{background:#ece9e2;color:#6158d6}
@media(max-width:720px){.role-test-grid{grid-template-columns:1fr}.vault-scene:after{display:none}}