:root { color-scheme: dark; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ink:#eaf5ff; --muted:#91a7c3; --cyan:#20d9ff; --blue:#1472ff; --violet:#7f19e8; --line:rgba(83,199,255,.28); }
* { box-sizing:border-box; }
html { min-width:320px; background:#020914; }
body { margin:0; min-width:320px; min-height:100vh; overflow-x:hidden; color:var(--ink); background:radial-gradient(circle at 32% 22%, #0b3a72 0, transparent 35%),radial-gradient(circle at 85% 72%, #32106c 0, transparent 32%),#020914; }
button,input { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }

.login-shell { display:grid; min-height:100svh; padding:clamp(10px,1.2vw,22px); place-items:center; }
.login-frame { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(470px,.98fr); width:min(1540px,100%); min-height:min(1000px,calc(100svh - 20px)); overflow:hidden; border:1px solid #148cff; border-radius:24px; background:#030d1d; box-shadow:0 26px 100px rgba(0,0,0,.56),0 0 60px rgba(7,102,255,.18); }

.login-vision { position:relative; min-height:650px; overflow:hidden; isolation:isolate; background:linear-gradient(155deg,rgba(3,17,42,.63),rgba(6,27,75,.32) 53%,rgba(2,9,22,.98)),radial-gradient(circle at 52% 51%,rgba(17,184,255,.37),transparent 22%),linear-gradient(180deg,#061a42,#021027 69%,#071426); }
.login-vision::before { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(68,138,255,.1) 1px,transparent 1px),linear-gradient(rgba(72,150,255,.1) 1px,transparent 1px); background-size:60px 60px; content:""; mask-image:linear-gradient(to bottom,black,transparent 86%); }
.login-vision::after { position:absolute; z-index:-1; inset:auto -10% 0; height:39%; background:linear-gradient(transparent,rgba(0,10,27,.5)),radial-gradient(ellipse at center bottom,rgba(31,96,223,.45),transparent 65%); content:""; }
.vision-grid { position:absolute; inset:0; opacity:.74; background:radial-gradient(ellipse at 46% 26%,rgba(6,22,66,.1),transparent 47%),repeating-linear-gradient(91deg,transparent 0 70px,rgba(74,174,255,.075) 72px 73px),repeating-linear-gradient(0deg,transparent 0 88px,rgba(74,174,255,.07) 90px 91px); pointer-events:none; }
.vision-streak { position:absolute; top:8%; z-index:1; width:42%; height:3px; border-radius:999px; background:linear-gradient(90deg,transparent,#ff704f,#ffbe57,transparent); filter:drop-shadow(0 0 6px #ff684c); transform:rotate(7deg); }
.vision-streak.one { left:3%; }
.vision-streak.two { top:13%; right:-8%; transform:rotate(-12deg); }
.vision-quote { position:absolute; top:clamp(30px,5vw,66px); left:clamp(28px,5vw,76px); z-index:4; }
.vision-quote p { margin:0; font-size:clamp(17px,1.6vw,25px); font-weight:500; line-height:1.48; letter-spacing:-.04em; }
.vision-quote strong { display:block; margin-top:20px; color:#fff; font-family:cursive; font-size:clamp(25px,2.5vw,42px); font-style:italic; font-weight:400; letter-spacing:.02em; }
.vision-quote span { display:block; margin:4px 0 0 24px; color:#d3e8ff; font-size:12px; letter-spacing:.08em; }

.vision-world { position:absolute; top:16%; left:50%; z-index:2; display:grid; width:min(36vw,480px); aspect-ratio:1; place-items:center; border:1px solid rgba(60,220,255,.7); border-radius:50%; background:radial-gradient(circle at 40% 30%,rgba(91,218,255,.74),rgba(12,78,202,.42) 35%,rgba(4,34,94,.33) 62%,transparent 64%),repeating-radial-gradient(circle at center,rgba(90,230,255,.22) 0 1px,transparent 2px 18px); box-shadow:0 0 14px #1fcdff,0 0 80px rgba(11,150,255,.68),inset 0 0 65px rgba(3,107,255,.57); transform:translateX(-50%); }
.vision-world::before,.vision-world::after { position:absolute; border:1px solid rgba(41,225,255,.48); border-radius:50%; content:""; }
.vision-world::before { inset:13%; transform:rotateX(68deg); }
.vision-world::after { inset:-11%; border-left-color:transparent; border-right-color:transparent; transform:rotate(-20deg); }
.world-rings { position:absolute; inset:20%; border:1px dashed rgba(132,240,255,.55); border-radius:50%; animation:world-spin 18s linear infinite; }
.world-mark,.login-mark { display:grid; place-items:center; background:linear-gradient(145deg,#06e7ff,#2f61ff 45%,#9a30f2); -webkit-background-clip:text; background-clip:text; color:transparent; font-family:Arial Black,Inter,sans-serif; font-weight:950; line-height:.8; text-shadow:0 0 18px rgba(73,220,255,.35); }
.world-mark { position:relative; z-index:2; font-size:clamp(105px,13vw,202px); transform:skewY(-9deg); }
.vision-card { position:absolute; z-index:5; min-width:142px; padding:12px 14px; border:1px solid rgba(76,219,255,.85); border-radius:10px; background:linear-gradient(150deg,rgba(9,48,103,.88),rgba(5,19,53,.8)); box-shadow:0 0 20px rgba(14,177,255,.34),inset 0 0 20px rgba(53,192,255,.07); }
.vision-card b,.vision-card small { display:block; font-size:11px; }
.vision-card small { margin-top:9px; color:#d9eaff; font-size:9px; }
.vision-card em { margin-left:5px; color:#32f2a7; font-size:13px; font-style:normal; font-weight:850; }
.card-finance { top:14%; left:47%; }
.card-operations { top:23%; left:27%; }
.card-marketing { top:23%; right:10%; }
.card-people { top:39%; right:7%; }

.vision-city { position:absolute; z-index:1; right:0; bottom:11%; left:0; display:flex; align-items:flex-end; gap:1.5%; height:35%; padding:0 4%; background:linear-gradient(transparent,rgba(0,9,29,.72)); }
.vision-city i { position:relative; display:block; flex:1; min-width:28px; max-width:83px; height:var(--h,70%); border:1px solid rgba(45,174,255,.25); border-bottom:0; background:repeating-linear-gradient(90deg,rgba(46,182,255,.55) 0 2px,transparent 3px 11px),repeating-linear-gradient(0deg,rgba(97,169,255,.48) 0 2px,#061737 3px 14px); box-shadow:0 0 25px rgba(8,125,255,.38); }
.vision-city i:nth-child(1){--h:46%}.vision-city i:nth-child(2){--h:79%}.vision-city i:nth-child(3){--h:62%}.vision-city i:nth-child(4){--h:100%}.vision-city i:nth-child(5){--h:68%}.vision-city i:nth-child(6){--h:87%}.vision-city i:nth-child(7){--h:54%}
.vision-desk { position:absolute; z-index:3; right:9%; bottom:16%; left:9%; height:13%; border:1px solid rgba(125,192,255,.3); border-radius:13px 13px 3px 3px; background:linear-gradient(180deg,rgba(18,57,106,.9),rgba(4,12,29,.95)); box-shadow:0 -14px 38px rgba(22,169,255,.16); }
.vision-desk::after { position:absolute; right:12%; bottom:-37px; left:12%; height:37px; border-radius:0 0 20px 20px; background:linear-gradient(90deg,#071124,#162e58,#071124); content:""; }
.vision-desk span { position:absolute; top:-72%; left:41%; width:20%; aspect-ratio:1.35; border:2px solid #1fd8ff; border-radius:8px; background:linear-gradient(135deg,#061736,#0e53a5); box-shadow:0 0 25px rgba(28,192,255,.5); }
.vision-desk b { position:absolute; top:-50%; left:49%; z-index:2; color:#35e5ff; font-family:Arial Black,Inter,sans-serif; font-size:30px; }
.vision-desk i { position:absolute; top:-57%; right:16%; width:20%; height:70%; border-radius:50% 50% 10px 10px; background:linear-gradient(135deg,#152946,#071120); box-shadow:0 0 0 6px rgba(5,14,31,.6); }
.vision-assurance { position:absolute; right:4%; bottom:3%; left:4%; z-index:5; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.vision-assurance article { display:flex; gap:8px; min-width:0; padding:10px; border:1px solid rgba(97,186,255,.2); border-radius:10px; background:rgba(3,17,41,.76); backdrop-filter:blur(10px); }
.vision-assurance span { color:#32e4ff; font-size:20px; }
.vision-assurance b,.vision-assurance small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vision-assurance b { font-size:9px; }
.vision-assurance small { margin-top:3px; color:#9eb6d2; font-size:7px; }

.login-panel { display:flex; min-width:0; flex-direction:column; padding:clamp(24px,3.2vw,58px) clamp(22px,4vw,64px) 24px; background:radial-gradient(circle at 100% 35%,rgba(46,83,209,.14),transparent 27%),linear-gradient(160deg,#030d1f,#04132b 58%,#030b19); }
.login-tools { display:flex; align-items:center; justify-content:flex-end; gap:12px; min-height:36px; }
.tool-chip { min-height:36px; padding:0 13px; border:1px solid rgba(138,184,231,.28); border-radius:999px; background:rgba(6,20,43,.7); color:#d6e8fb; font-size:11px; }
.tool-icons { display:flex; gap:6px; padding:4px; border:1px solid rgba(138,184,231,.2); border-radius:999px; color:#a8bed8; }
.tool-icons span { display:grid; width:25px; height:25px; place-items:center; border-radius:50%; font-size:12px; }
.tool-icons .active { color:white; background:linear-gradient(135deg,#116dff,#3fdcff); box-shadow:0 0 13px rgba(41,166,255,.7); }
.login-brand { margin:clamp(30px,7vh,86px) 0 26px; text-align:center; }
.login-mark { width:100%; font-size:clamp(80px,9vw,135px); transform:skewY(-9deg); }
.login-brand h1 { margin:4px 0 0; font-size:clamp(42px,5.1vw,77px); letter-spacing:.14em; line-height:.95; }
.login-brand p { margin:10px 0 15px; color:#22cfff; font-size:clamp(16px,1.8vw,27px); font-weight:800; letter-spacing:.2em; }
.login-brand span { display:block; color:#bfd2e5; font-size:clamp(12px,1.05vw,16px); }
.login-tabs { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid rgba(93,172,246,.2); }
.login-tabs button { min-height:51px; border:0; border-bottom:2px solid transparent; background:transparent; color:#96abc4; font-size:clamp(10px,1vw,14px); }
.login-tabs button.active { border-color:#148eff; color:#e9f8ff; font-weight:800; box-shadow:0 9px 20px rgba(15,128,255,.12); }
.login-tabs button:disabled { cursor:not-allowed; opacity:.72; }
.login-form { display:grid; gap:16px; margin-top:24px; }
.field { display:grid; grid-template-columns:38px minmax(0,1fr) 38px; align-items:center; min-height:72px; border:1px solid rgba(85,173,255,.25); border-radius:13px; background:rgba(5,22,48,.62); transition:.2s ease; }
.field:focus-within { border-color:#18c9ff; box-shadow:0 0 0 3px rgba(24,201,255,.08); }
.field > span { display:grid; height:100%; place-items:center; color:#20d6ff; font-size:19px; }
.field div { display:grid; gap:4px; min-width:0; }
.field small { color:#9ab1cc; font-size:11px; }
.field input { min-width:0; border:0; outline:0; background:transparent; color:#f5faff; font-size:clamp(14px,1.3vw,18px); }
.field input::placeholder { color:#627b9e; }
.field > i { color:#30eaa4; font-size:19px; font-style:normal; text-align:center; }
.field button { width:38px; height:100%; border:0; background:transparent; color:#b9d7f8; font-size:21px; }
.login-options { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#c5d7e9; font-size:12px; }
.login-options label { display:flex; align-items:center; gap:7px; }
.login-options input { width:18px; height:18px; accent-color:#176dff; }
.link-button { padding:0; border:0; background:transparent; color:#27cdfd; font-size:12px; }
.login-submit { display:flex; min-height:64px; align-items:center; justify-content:center; gap:12px; border:1px solid #22a5ff; border-radius:13px; background:linear-gradient(100deg,#087cff,#2b67f4 50%,#7912e8); box-shadow:0 12px 27px rgba(31,96,255,.28),inset 0 1px rgba(255,255,255,.3); color:white; font-size:clamp(16px,1.4vw,21px); font-weight:850; }
.login-submit i { color:#bdfcff; font-size:25px; font-style:normal; }
.login-status { min-height:18px; margin:0; color:#9fb5cd; font-size:11px; text-align:center; }
.fast-divider { display:flex; align-items:center; gap:12px; margin:17px 0; color:#a9bed3; font-size:12px; text-align:center; }
.fast-divider::before,.fast-divider::after { height:1px; flex:1; background:rgba(115,176,232,.24); content:""; }
.fast-methods { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.fast-methods button { display:grid; min-height:92px; place-items:center; gap:5px; border:1px solid rgba(91,175,248,.24); border-radius:12px; background:rgba(6,22,48,.62); color:#daeaff; }
.fast-methods button:disabled { cursor:not-allowed; opacity:.84; }
.fast-methods b { display:grid; place-items:center; width:33px; height:33px; border-radius:50%; color:#3bdcff; font-size:23px; }
.fast-methods button:nth-child(2) b { color:#bd67ff; }.fast-methods button:nth-child(3) b { color:#ffcb36; font-family:Arial Black,sans-serif; }.fast-methods button:nth-child(4) b { color:#5ab8ff; }
.fast-methods span { font-size:11px; }
.login-security { display:grid; grid-template-columns:1fr auto; gap:8px 12px; margin-top:auto; padding:15px 0 0; border-top:1px solid rgba(105,176,231,.2); color:#bfd0df; font-size:11px; }
.login-security p { grid-column:1/-1; margin:0; color:#90a8c4; font-size:10px; }
.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#2dea9e; box-shadow:0 0 11px #2dea9e; }
.login-copyright { margin:16px 0 0; color:#7188a4; font-size:11px; text-align:center; }

@keyframes world-spin { to { transform:rotate(360deg); } }
@media (max-width:1180px) { .login-frame { grid-template-columns:minmax(0,.95fr) minmax(430px,1.05fr); }.vision-card { min-width:124px; padding:10px; }.card-operations { left:13%; }.card-marketing { right:4%; }.vision-assurance { gap:5px; }.vision-assurance article { padding:8px; } }
@media (max-height:800px) and (min-width:821px) { .login-panel { padding-top:18px; padding-bottom:15px; }.login-brand { margin:10px 0 13px; }.login-mark { font-size:64px; }.login-brand h1 { font-size:44px; }.login-brand p { margin:5px 0 8px; font-size:17px; }.login-brand span { font-size:11px; }.login-tabs button { min-height:41px; }.login-form { gap:10px; margin-top:13px; }.field { min-height:57px; }.field small { font-size:9px; }.field input { font-size:14px; }.login-submit { min-height:51px; }.fast-divider { margin:10px 0; }.fast-methods button { min-height:63px; }.fast-methods b { width:26px; height:26px; font-size:18px; }.fast-methods span { font-size:9px; }.login-security { margin-top:12px; padding-top:10px; }.login-copyright { margin-top:9px; } }
@media (max-width:820px) { .login-shell { padding:0; place-items:start; }.login-frame { grid-template-columns:1fr; width:100%; min-height:100svh; border:0; border-radius:0; }.login-vision { min-height:320px; }.vision-quote { top:27px; left:25px; }.vision-quote p { font-size:17px; }.vision-quote strong { margin-top:10px; font-size:28px; }.vision-world { top:16%; left:62%; width:min(48vw,300px); }.vision-card { min-width:110px; padding:8px; }.vision-card b { font-size:8px; }.vision-card small { margin-top:5px; font-size:7px; }.vision-card em { font-size:10px; }.card-finance { top:17%; left:47%; }.card-operations { top:35%; left:12%; }.card-marketing { top:43%; right:7%; }.card-people { display:none; }.vision-city { bottom:16%; height:31%; }.vision-desk { right:14%; bottom:24%; left:14%; height:12%; }.vision-assurance { right:14px; bottom:12px; left:14px; grid-template-columns:1fr 1fr; }.vision-assurance article:nth-child(2) { display:none; }.login-panel { min-height:720px; padding:24px clamp(18px,7vw,60px); }.login-tools { position:absolute; top:13px; right:18px; }.login-brand { margin:13px 0 20px; }.login-mark { font-size:70px; }.login-brand h1 { font-size:48px; }.login-brand p { margin:5px 0 10px; font-size:17px; }.login-brand span { font-size:12px; }.login-security { margin-top:34px; } }
@media (max-width:460px) { .login-vision { min-height:285px; }.vision-quote { top:20px; left:18px; }.vision-quote p { font-size:15px; }.vision-quote strong { font-size:24px; }.vision-quote span { margin-left:12px; font-size:9px; }.vision-world { top:25%; left:68%; width:190px; }.world-mark { font-size:90px; }.vision-card { min-width:92px; padding:7px; }.card-finance { left:46%; }.card-operations { left:7%; }.card-marketing { right:3%; }.vision-assurance article { padding:7px; }.vision-assurance article span { font-size:16px; }.vision-assurance b { font-size:7px; }.vision-assurance small { font-size:6px; }.login-panel { padding:18px 15px 22px; }.tool-chip { min-height:32px; padding:0 9px; font-size:10px; }.tool-icons span { width:20px; height:20px; }.login-tabs button { min-height:47px; font-size:9px; }.field { min-height:66px; }.fast-methods { gap:7px; }.fast-methods button { min-height:80px; }.login-options { font-size:11px; }.login-security { grid-template-columns:1fr; }.login-security div:last-of-type { display:none; } }

/* NX-OSV3-LOGIN-UAT-R2: local asset branding and explicit mock-only authentication states. */
button:not(:disabled):hover { filter:brightness(1.12); transform:translateY(-1px); } button:disabled { cursor:not-allowed; } .world-logo { position:relative; z-index:2; width:58%; max-width:222px; filter:drop-shadow(0 0 22px rgba(80,220,255,.82)); }.login-panel { max-height:calc(100svh - 20px); overflow-y:auto; padding:clamp(18px,2.1vw,34px) clamp(24px,3.8vw,58px) 18px; scrollbar-color:rgba(68,183,255,.55) transparent; }.login-tools { min-height:30px; }.tool-chip { transition:.18s ease; }.tool-chip span { color:#7eeeff; font-size:9px; }.login-brand { margin:clamp(14px,3vh,31px) 0 13px; }.login-logo-asset { display:block; width:clamp(76px,7.2vw,108px); height:clamp(76px,7.2vw,108px); margin:0 auto 9px; filter:drop-shadow(0 0 19px rgba(62,213,255,.8)); }.login-brand h1 { margin:0; color:#f8fcff; font-size:clamp(40px,4.4vw,66px); text-shadow:0 0 20px rgba(108,206,255,.18); }.login-brand p { margin:7px 0 10px; font-size:clamp(14px,1.55vw,22px); }.login-brand span { font-size:clamp(11px,.95vw,14px); }.local-demo-notice { display:flex; align-items:center; justify-content:center; gap:8px; min-height:33px; margin:0 0 11px; padding:7px 10px; border:1px solid rgba(247,188,77,.33); border-radius:9px; background:rgba(134,79,13,.13); color:#d7e5f5; font-size:10px; text-align:center; }.local-demo-notice b { color:#ffc45a; font-size:9px; letter-spacing:.07em; }.login-tabs { border:1px solid rgba(93,172,246,.2); border-radius:11px 11px 0 0; background:rgba(2,13,30,.35); }.login-tabs button { min-height:45px; transition:.18s ease; }.login-tabs button.active { background:linear-gradient(180deg,rgba(17,110,255,.16),transparent); }.login-tabs button[aria-selected="false"] { color:#a9bdd3; }.auth-panels { border:1px solid rgba(85,173,255,.17); border-top:0; border-radius:0 0 12px 12px; background:rgba(3,14,33,.31); }.auth-panels [hidden] { display:none !important; }.login-form { gap:10px; margin:0; padding:14px 14px 11px; }.field-group { display:grid; gap:4px; }.field { min-height:60px; transition:border-color .18s ease, box-shadow .18s ease, background .18s ease; }.field:hover { border-color:rgba(61,202,255,.5); background:rgba(7,29,60,.78); }.field.is-valid { border-color:rgba(48,234,164,.72); box-shadow:0 0 0 2px rgba(48,234,164,.07); }.field.is-invalid { border-color:rgba(255,91,112,.82); box-shadow:0 0 0 2px rgba(255,91,112,.08); }.field.is-valid .field-state { color:#30eaa4; }.field.is-invalid .field-state { color:#ff7385; }.field-state { color:#8198b3; font-size:16px; font-style:normal; text-align:center; }.field-help { min-height:13px; color:#8ca4bf; font-size:9px; line-height:1.35; }.field-group.is-invalid .field-help { color:#ff9aa6; }.field-group.is-valid .field-help { color:#7ee6bd; }.login-options { min-height:22px; }.link-button { transition:.18s ease; }.link-button:hover { color:#8be9ff; text-decoration:underline; }.login-submit { min-height:54px; transition:.2s ease; }.login-submit:disabled { border-color:rgba(112,143,181,.28); background:linear-gradient(100deg,#1d2a3d,#28364e); box-shadow:none; color:#7f94ae; opacity:.78; }.login-submit.is-loading { background:linear-gradient(100deg,#087cff,#2b67f4 50%,#7912e8); }.login-submit.is-loading i { animation:login-spin .75s linear infinite; }.login-status { min-height:16px; font-size:10px; }.login-status.is-error { color:#ff99a7; }.login-status.is-success { color:#7cefc1; }.login-status.is-loading { color:#80e8ff; }.auth-panel { min-height:245px; padding:18px; text-align:center; }.auth-panel-icon { display:grid; width:54px; height:54px; place-items:center; margin:0 auto 8px; border:1px solid rgba(55,219,255,.55); border-radius:18px; background:radial-gradient(circle,rgba(19,143,255,.45),rgba(5,20,48,.75)); box-shadow:0 0 24px rgba(42,182,255,.23); color:#6eefff; font-size:27px; }.auth-panel h2 { margin:0; color:#f0f8ff; font-size:17px; }.auth-panel-description { max-width:450px; margin:8px auto; color:#a6bdd4; font-size:11px; line-height:1.55; }.auth-panel-status { min-height:32px; margin:13px auto; padding:8px 10px; border:1px solid rgba(104,169,225,.24); border-radius:8px; background:rgba(4,19,42,.64); color:#b2c7df; font-size:10px; font-weight:750; }.auth-panel-status.is-empty { color:#ffc45a; }.auth-panel-status.is-loading { color:#8eeeff; }.auth-panel-status.is-success { color:#70eeba; }.auth-panel-status.is-error { color:#ff97a4; }.auth-panel-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }.auth-demo-action,.auth-secondary-action,.auth-tertiary-action { min-height:38px; padding:0 14px; border-radius:9px; font-size:10px; font-weight:800; transition:.18s ease; }.auth-demo-action { border:1px solid #2aa7ff; background:linear-gradient(100deg,#087cff,#2b67f4 50%,#7912e8); color:white; }.auth-secondary-action { border:1px solid rgba(81,203,255,.35); background:rgba(8,36,75,.65); color:#cceeff; }.auth-tertiary-action { border:1px solid rgba(255,128,143,.38); background:rgba(100,21,43,.26); color:#ffbdc6; }.auth-panel-footnote { display:block; margin-top:13px; color:#8098b5; font-size:9px; line-height:1.45; }.otp-demo-fields { display:grid; grid-template-columns:1fr 1fr; gap:9px; max-width:520px; margin:12px auto 0; text-align:left; }.otp-demo-fields label { display:grid; gap:5px; color:#9db4cd; font-size:9px; }.otp-demo-fields input { min-width:0; min-height:39px; padding:0 10px; border:1px solid rgba(85,173,255,.28); border-radius:8px; outline:0; background:rgba(5,22,48,.75); color:#eefaff; font-size:12px; }.otp-demo-fields input:focus { border-color:#20d9ff; box-shadow:0 0 0 3px rgba(32,217,255,.09); }.otp-demo-fields input:disabled { cursor:not-allowed; color:#7188a4; }.login-global-status { min-height:18px; margin:9px 0 0; color:#9bb4d0; font-size:10px; line-height:1.4; text-align:center; }.login-global-status.is-error { color:#ff9eaa; }.login-global-status.is-success { color:#75efbc; }.login-global-status.is-loading { color:#80edff; }.fast-divider { margin:12px 0 10px; }.fast-divider span::after { margin-left:6px; color:#ffc45a; content:"· demo / chưa kích hoạt"; font-size:9px; }.fast-methods button { min-height:72px; padding:7px 5px; transition:.18s ease; }.fast-methods button:disabled { border-color:rgba(111,136,170,.22); background:rgba(7,18,35,.55); color:#9bb0c6; opacity:1; }.fast-methods b { opacity:.7; }.fast-methods span { font-size:10px; }.fast-methods small { color:#f2b45a; font-size:7px; font-weight:800; letter-spacing:.035em; }.login-security { margin-top:16px; padding-top:11px; }.login-copyright { margin-top:10px; }
@keyframes login-spin { to { transform:rotate(360deg); } }
@media (max-height:940px) and (min-width:821px) { .login-panel { padding-top:15px; padding-bottom:12px; }.login-brand { margin:9px 0 8px; }.login-logo-asset { width:65px; height:65px; margin-bottom:4px; }.login-brand h1 { font-size:40px; }.login-brand p { margin:4px 0 6px; font-size:15px; }.login-brand span { font-size:10px; }.local-demo-notice { min-height:27px; margin-bottom:7px; padding:5px 8px; font-size:8px; }.login-tabs button { min-height:38px; font-size:10px; }.login-form { gap:7px; padding:10px 12px 8px; }.field { min-height:50px; }.field small { font-size:8px; }.field input { font-size:13px; }.field-help { font-size:8px; }.login-submit { min-height:46px; }.fast-divider { margin:7px 0; }.fast-methods button { min-height:56px; }.fast-methods b { width:22px; height:22px; font-size:16px; }.fast-methods span { font-size:8px; }.fast-methods small { font-size:6px; }.login-security { margin-top:9px; padding-top:7px; }.login-security p { font-size:8px; }.login-copyright { margin-top:6px; }.auth-panel { min-height:198px; padding:12px; }.auth-panel-icon { width:42px; height:42px; margin-bottom:4px; font-size:22px; }.auth-panel h2 { font-size:14px; }.auth-panel-description { margin:5px auto; font-size:9px; }.auth-panel-status { min-height:25px; margin:8px auto; padding:6px 8px; font-size:8px; }.auth-demo-action,.auth-secondary-action,.auth-tertiary-action { min-height:31px; font-size:8px; }.auth-panel-footnote { margin-top:8px; font-size:7px; } }
@media (max-width:820px) { .login-panel { max-height:none; overflow:visible; }.login-logo-asset { width:72px; height:72px; }.local-demo-notice { margin-bottom:10px; }.auth-panel { min-height:230px; }.fast-methods button { min-height:70px; } }
@media (max-width:460px) { .world-logo { width:54%; }.login-brand { margin:8px 0 12px; }.login-logo-asset { width:64px; height:64px; margin-bottom:4px; }.login-brand h1 { font-size:38px; }.login-brand p { font-size:14px; }.local-demo-notice { gap:5px; padding:6px 7px; font-size:8px; }.local-demo-notice b { font-size:7px; }.login-tabs button { min-height:44px; font-size:8px; }.login-form { padding:12px 10px 9px; }.field { min-height:58px; }.field > span { font-size:16px; }.field input { font-size:13px; }.auth-panel { min-height:245px; padding:15px 11px; }.auth-panel-actions { display:grid; grid-template-columns:1fr; }.auth-panel-actions button { width:100%; }.otp-demo-fields { grid-template-columns:1fr; }.fast-methods button { min-height:67px; }.fast-methods small { font-size:5.8px; }.fast-divider span::after { display:block; margin:2px 0 0; } }