:root {
    --hub-violet: #8058ff;
    --hub-blue: #2e8cff;
    --hub-cyan: #00d9ff;
    --hub-green: #14e6a1;
    --hub-pink: #ff3cac;
}

html { color-scheme: dark; }

.login-hub-page {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    color: #f7f9ff;
    background:
        linear-gradient(rgba(6, 8, 29, .7), rgba(6, 8, 29, .9)),
        radial-gradient(circle at 10% 10%, rgba(128, 88, 255, .42), transparent 34%),
        radial-gradient(circle at 93% 9%, rgba(0, 217, 255, .3), transparent 31%),
        radial-gradient(circle at 74% 91%, rgba(255, 60, 172, .27), transparent 34%),
        #06081d;
}

.login-hub-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    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: 46px 46px;
    mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

.rgb-aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; filter: blur(80px); }
.rgb-aurora span { position: absolute; width: 32vw; height: 32vw; border-radius: 50%; opacity: .2; animation: auroraMove 13s ease-in-out infinite alternate; }
.rgb-aurora span:nth-child(1) { left: -8%; top: 18%; background: #6f3cff; }
.rgb-aurora span:nth-child(2) { right: -7%; top: 4%; background: #00ddff; animation-delay: -4s; }
.rgb-aurora span:nth-child(3) { right: 24%; bottom: -18%; background: #ff2e9b; animation-delay: -8s; }
@keyframes auroraMove { to { transform: translate3d(7vw, 4vh, 0) scale(1.2); } }

.login-hub-shell {
    position: relative;
    z-index: 1;
    width: min(1370px, calc(100% - 40px));
    min-height: calc(100vh - 54px);
    display: grid;
    grid-template-columns: minmax(350px, .84fr) minmax(590px, 1.16fr);
    align-items: center;
    gap: clamp(42px, 6vw, 96px);
    margin: 0 auto;
    padding: 46px 0 38px;
}

.hub-intro { padding: 16px 0; }
.hub-brand { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(55px, 8vh, 100px); }
.hub-logo { position: relative; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(135deg, #7d50ff, #167dff 45%, #00e0c5); box-shadow: 0 14px 45px rgba(81, 93, 255, .42); font-size: 25px; }
.hub-logo::after { content: ""; position: absolute; inset: -4px; z-index: -1; border-radius: 21px; background: linear-gradient(120deg, #ff3cac, #735cff, #00e1ff, #19eba4); filter: blur(8px); opacity: .55; animation: logoPulse 2s ease-in-out infinite alternate; }
@keyframes logoPulse { to { opacity: .95; transform: scale(1.05); } }
.hub-brand strong, .hub-brand small { display: block; }
.hub-brand strong { font-size: 20px; font-weight: 900; letter-spacing: -.03em; }
.hub-brand small { margin-top: 4px; color: #8fa5c9; font-size: 8px; font-weight: 800; letter-spacing: .2em; }

.hub-eyebrow { margin: 0 0 18px; color: #74dfff; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.hub-eyebrow i { margin-right: 7px; color: #ff75c7; }
.intro-copy h1 { max-width: 650px; margin: 0; font-size: clamp(44px, 5.8vw, 80px); line-height: .98; letter-spacing: -.065em; }
.intro-copy h1 span { display: block; color: transparent; background: linear-gradient(90deg, #b89cff, #5bc8ff 46%, #29efb2 82%, #ff78c8); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; animation: textRGB 5s linear infinite; }
@keyframes textRGB { to { background-position: 200% center; } }
.intro-copy > p:last-child { max-width: 590px; margin: 24px 0 0; color: #9caccc; font-size: 16px; line-height: 1.75; }
.trust-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 34px; }
.trust-row span { padding: 10px 13px; border: 1px solid rgba(142,167,215,.16); border-radius: 99px; color: #b6c6e3; background: rgba(255,255,255,.035); font-size: 10px; font-weight: 700; backdrop-filter: blur(10px); }
.trust-row i { margin-right: 6px; color: #26e8ae; }

.hub-login-panel { position: relative; padding: 28px; border: 1px solid transparent; border-radius: 32px; background: linear-gradient(#0d122c, #0d122c) padding-box, linear-gradient(135deg, rgba(181,133,255,.8), rgba(0,214,255,.42), rgba(255,62,174,.65)) border-box; box-shadow: 0 38px 100px rgba(0,0,0,.42), 0 0 70px rgba(69,82,255,.1); }
.hub-login-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(120deg, rgba(130,81,255,.18), transparent 40%, rgba(0,222,255,.12) 70%, rgba(255,58,170,.15)); filter: blur(28px); }
.panel-heading p { margin: 0 0 7px; color: #7a93bf; font-size: 9px; font-weight: 900; letter-spacing: .2em; }
.panel-heading h2 { margin: 0 0 22px; font-size: 27px; letter-spacing: -.04em; }

.role-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.role-card { position: relative; min-width: 0; min-height: 112px; display: flex; align-items: flex-start; flex-direction: column; gap: 11px; padding: 15px; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 18px; color: #eaf0ff; background: rgba(255,255,255,.035); text-align: left; cursor: pointer; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.role-card::after { content: ""; position: absolute; inset: auto -35% -70% -35%; height: 100%; opacity: .16; border-radius: 50%; filter: blur(18px); transition: opacity .25s; }
.role-card:hover { transform: translateY(-4px); }
.role-card:hover::after, .role-card.active::after { opacity: .38; }
.admin-role::after { background: #8a58ff; }.operator-role::after { background: #00c8ff; }.retailer-role::after { background: #13e5a3; }
.role-icon { position: relative; z-index: 1; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; font-size: 16px; }
.admin-role .role-icon { color: #c6afff; background: rgba(132,88,255,.18); }
.operator-role .role-icon { color: #7ceaff; background: rgba(0,200,255,.15); }
.retailer-role .role-icon { color: #72f1c6; background: rgba(19,229,163,.15); }
.role-copy { position: relative; z-index: 1; }
.role-copy strong, .role-copy small { display: block; }
.role-copy strong { font-size: 13px; font-weight: 900; }.role-copy small { margin-top: 3px; color: #8294b4; font-size: 8px; }
.selected-check { position: absolute; right: 12px; top: 12px; opacity: 0; color: #fff; font-size: 12px; transform: scale(.5); transition: .2s; }
.role-card.active .selected-check { opacity: 1; transform: scale(1); }
.role-card.active { animation: selectedBlink 1.8s ease-in-out infinite alternate; }
.admin-role.active { border-color: rgba(164,125,255,.8); box-shadow: inset 0 0 22px rgba(128,88,255,.1), 0 0 19px rgba(128,88,255,.19); }
.operator-role.active { border-color: rgba(54,218,255,.8); box-shadow: inset 0 0 22px rgba(0,217,255,.09), 0 0 19px rgba(0,217,255,.17); }
.retailer-role.active { border-color: rgba(61,235,179,.8); box-shadow: inset 0 0 22px rgba(20,230,161,.09), 0 0 19px rgba(20,230,161,.17); }
@keyframes selectedBlink { to { filter: brightness(1.18); transform: translateY(-2px); } }

.login-form-card { margin-top: 16px; padding: 22px; border: 1px solid rgba(255,255,255,.095); border-radius: 22px; background: rgba(3,7,24,.48); }
.active-role-heading { display: flex; align-items: center; gap: 13px; }
.active-role-heading > span { width: 47px; height: 47px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; color: #c7b5ff; background: linear-gradient(145deg, rgba(128,88,255,.26), rgba(46,140,255,.16)); font-size: 19px; transition: .25s; }
.active-role-heading p { margin: 0 0 4px; color: #967cff; font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.active-role-heading h2 { margin: 0; font-size: 19px; letter-spacing: -.025em; }
.active-role-heading small { display: block; margin-top: 4px; color: #8293b1; font-size: 8px; }
.login-form-card form { margin-top: 12px; }
.login-form-card label { margin: 13px 0 7px; color: #c9d4e8; font-size: 10px; }
.hub-input-wrap { min-height: 48px; display: flex; align-items: center; gap: 11px; padding: 0 14px; border: 1px solid rgba(145,165,207,.17); border-radius: 13px; background: rgba(0,2,16,.45); transition: .2s; }
.hub-input-wrap:focus-within { border-color: #8663ff; box-shadow: 0 0 0 4px rgba(128,88,255,.11), 0 0 18px rgba(128,88,255,.1); }
.hub-input-wrap > i { color: #6f82a7; font-size: 13px; }
.hub-input-wrap input { min-width: 0; flex: 1; border: 0; outline: 0; color: #fff; background: transparent; font-size: 12px; }
.hub-input-wrap input::placeholder { color: #52627f; }
.hub-icon-button { width: 32px; height: 32px; border: 0; border-radius: 9px; color: #8799ba; background: transparent; cursor: pointer; }
.hub-submit-button { position: relative; width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 19px; overflow: hidden; border: 0; border-radius: 13px; color: #fff; background: linear-gradient(100deg, #7048ff, #347dff, #b83cff); background-size: 220% 100%; box-shadow: 0 13px 32px rgba(99,69,255,.3); font-size: 12px; font-weight: 900; cursor: pointer; transition: transform .2s, opacity .2s; animation: buttonRGB 4s linear infinite; }
.hub-submit-button::before { content: ""; position: absolute; inset: 1px; border-radius: 12px; background: linear-gradient(100deg, rgba(255,255,255,.12), transparent 42%); pointer-events: none; }
.hub-submit-button:hover { transform: translateY(-2px); }.hub-submit-button:disabled { opacity: .6; cursor: wait; transform: none; }
@keyframes buttonRGB { to { background-position: 220% center; } }
.login-form-card[data-active-role="OPERATOR"] .active-role-heading > span { color: #79eaff; background: linear-gradient(145deg, rgba(0,204,255,.23), rgba(47,126,255,.15)); }
.login-form-card[data-active-role="OPERATOR"] .active-role-heading p { color: #4bddff; }
.login-form-card[data-active-role="OPERATOR"] .hub-input-wrap:focus-within { border-color: #16cdf7; box-shadow: 0 0 0 4px rgba(0,205,255,.1), 0 0 18px rgba(0,205,255,.1); }
.login-form-card[data-active-role="OPERATOR"] .hub-submit-button { background: linear-gradient(100deg, #197cf4, #00c9ed, #735cff); background-size: 220% 100%; }
.login-form-card[data-active-role="RETAILER"] .active-role-heading > span { color: #72f1c6; background: linear-gradient(145deg, rgba(20,230,161,.22), rgba(0,190,219,.15)); }
.login-form-card[data-active-role="RETAILER"] .active-role-heading p { color: #31e6ad; }
.login-form-card[data-active-role="RETAILER"] .hub-input-wrap:focus-within { border-color: #20dfa8; box-shadow: 0 0 0 4px rgba(20,230,161,.09), 0 0 18px rgba(20,230,161,.09); }
.login-form-card[data-active-role="RETAILER"] .hub-submit-button { background: linear-gradient(100deg, #0aa6ba, #11d79b, #16a1f4); background-size: 220% 100%; }
.hub-help, .hub-setup { margin: 12px 0 0; color: #6e809f; text-align: center; font-size: 8px; line-height: 1.5; }
.hub-help i { margin-right: 4px; color: #20dba7; }.hub-setup a { color: #a997ff; }
.hub-login-panel .alert { margin: 14px 0 0; padding: 11px 13px; font-size: 10px; }
.hub-footer { position: relative; z-index: 1; padding: 0 20px 24px; color: #526682; text-align: center; font-size: 8px; letter-spacing: .08em; }

@media (max-width: 1050px) {
    .login-hub-shell { grid-template-columns: 1fr; width: min(720px, calc(100% - 32px)); gap: 30px; padding-top: 28px; }
    .hub-intro { text-align: center; }.hub-brand { justify-content: center; margin-bottom: 35px; }.intro-copy h1,.intro-copy > p:last-child { margin-left: auto; margin-right: auto; }.trust-row { justify-content: center; }
}
@media (max-width: 620px) {
    .login-hub-shell { width: min(100% - 20px, 530px); padding-top: 18px; }
    .hub-brand { margin-bottom: 28px; }.intro-copy h1 { font-size: clamp(39px, 13vw, 58px); }.intro-copy > p:last-child { font-size: 13px; }.trust-row { display: none; }
    .hub-login-panel { padding: 15px; border-radius: 23px; }.panel-heading { padding: 4px 5px 0; }.panel-heading h2 { font-size: 22px; }
    .role-selector { gap: 6px; }.role-card { min-height: 100px; padding: 11px 9px; border-radius: 14px; }.role-icon { width: 34px; height: 34px; }.role-copy strong { font-size: 11px; }.role-copy small { font-size: 7px; }.selected-check { right: 8px; top: 8px; }
    .login-form-card { padding: 17px 14px; }.active-role-heading small { max-width: 210px; }.hub-footer { padding-bottom: 16px; }
}

/* Ultra-clear transparent login glass */
.login-hub-page .hub-login-panel{background:linear-gradient(145deg,rgba(5,18,31,.17),rgba(2,9,18,.1)) padding-box,linear-gradient(135deg,rgba(80,255,206,.92),rgba(78,194,255,.78) 43%,rgba(181,108,255,.82) 73%,rgba(255,116,191,.76)) border-box!important;box-shadow:0 34px 110px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.22),0 0 65px rgba(45,222,196,.09)!important;-webkit-backdrop-filter:blur(23px) saturate(180%);backdrop-filter:blur(23px) saturate(180%)}
.login-hub-page .hub-login-panel:before{content:"";position:absolute;z-index:0;inset:-130% auto -130% -55%;width:31%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);transform:rotate(18deg);filter:none;animation:loginGlassSweep 8s ease-in-out infinite}.login-hub-page .hub-login-panel>*{position:relative;z-index:1}@keyframes loginGlassSweep{0%,60%{left:-55%}100%{left:140%}}
.login-hub-page .login-form-card{border-color:rgba(255,255,255,.22)!important;background:linear-gradient(145deg,rgba(2,12,22,.18),rgba(3,11,19,.08))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 14px 38px rgba(0,0,0,.1)!important;-webkit-backdrop-filter:blur(15px) saturate(165%);backdrop-filter:blur(15px) saturate(165%)}
.login-hub-page .role-card{border-color:rgba(255,255,255,.24)!important;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(2,12,23,.06))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 9px 25px rgba(0,0,0,.08)!important;-webkit-backdrop-filter:blur(12px) saturate(170%);backdrop-filter:blur(12px) saturate(170%)}
.login-hub-page .hub-input-wrap{border-color:rgba(255,255,255,.29)!important;background:rgba(1,7,14,.19)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px)}
.login-hub-page :is(.hub-brand strong,.intro-copy h1,.panel-heading h2,.active-role-heading h2,.role-copy strong,.login-form-card label){color:#fff;text-shadow:0 2px 13px rgba(0,0,0,.95),0 1px 2px #000}.login-hub-page :is(.intro-copy>p:last-child,.role-copy small,.active-role-heading small,.hub-help,.hub-setup){color:rgba(239,248,255,.9)!important;text-shadow:0 2px 10px rgba(0,0,0,.95)}.login-hub-page .hub-input-wrap input{color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.8)}
.login-hub-page .role-card.active{animation:selectedBlink 1.8s ease-in-out infinite alternate,roleGlassGlow 4.5s ease-in-out infinite}@keyframes roleGlassGlow{50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 28px rgba(61,225,207,.24)!important}}
@media(max-width:620px){.login-hub-page .hub-login-panel{background:linear-gradient(145deg,rgba(5,18,31,.14),rgba(2,9,18,.08)) padding-box,linear-gradient(135deg,rgba(80,255,206,.9),rgba(78,194,255,.76),rgba(181,108,255,.8)) border-box!important;-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%)}}
@media(prefers-reduced-motion:reduce){.login-hub-page .hub-login-panel:before,.login-hub-page .role-card.active{animation:none!important}}
@media (prefers-reduced-motion: reduce) {
    .rgb-aurora span, .hub-logo::after, .intro-copy h1 span, .role-card.active, .hub-submit-button { animation: none !important; }
}

/* Step 11: cyber access terminal */
.login-hub-page{background:radial-gradient(circle at 13% 24%,rgba(0,255,170,.16),transparent 28%),radial-gradient(circle at 88% 18%,rgba(0,187,255,.2),transparent 30%),radial-gradient(circle at 68% 92%,rgba(157,61,255,.2),transparent 32%),#030a12}
.login-hub-page:after{content:"SYSTEM ONLINE   //   AES-256 CHANNEL   //   ZERO TRUST ACCESS";position:fixed;z-index:0;left:0;right:0;bottom:0;padding:6px;color:rgba(80,255,190,.38);background:rgba(1,8,12,.75);font:700 7px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.22em;text-align:center;white-space:nowrap;overflow:hidden}
.login-hub-page::before{opacity:.36;background-image:linear-gradient(rgba(22,255,178,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,210,255,.045) 1px,transparent 1px);background-size:35px 35px;animation:cyberGrid 14s linear infinite}
@keyframes cyberGrid{to{background-position:0 70px,70px 0}}
.hub-brand small,.hub-eyebrow,.panel-heading p,.active-role-heading p,.hub-footer{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.hub-logo{background:linear-gradient(135deg,#00ef9d,#00a9ff 54%,#885cff);box-shadow:0 0 18px rgba(0,240,160,.4),0 17px 48px rgba(0,145,255,.28)}
.hub-logo::after{background:linear-gradient(120deg,#00ff9d,#00b7ff,#a654ff,#00ff9d)}
.hub-login-panel{background:linear-gradient(rgba(5,16,28,.94),rgba(4,10,21,.96)) padding-box,linear-gradient(135deg,#00f0a4,#00aaff 44%,#934dff 72%,#ff3ca6) border-box;box-shadow:0 40px 120px rgba(0,0,0,.55),0 0 55px rgba(0,229,165,.1)}
.hub-login-panel:after{content:"AUTH_NODE: READY";position:absolute;right:25px;top:27px;color:#35efb3;font:800 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.13em;animation:terminalBlink 1.25s steps(1) infinite}
@keyframes terminalBlink{50%{opacity:.25}}
.login-form-card{border-color:rgba(44,255,187,.16);background:rgba(1,7,16,.7);box-shadow:inset 0 0 35px rgba(0,212,157,.025)}
.hub-input-wrap{border-color:rgba(77,240,193,.18);background:rgba(0,7,13,.82)}
.hub-input-wrap:focus-within{border-color:#1ee8af;box-shadow:0 0 0 3px rgba(25,232,175,.1),0 0 24px rgba(25,232,175,.12)}
.hub-input-wrap input{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.025em}
.role-card{background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(0,255,183,.025));box-shadow:inset 0 0 25px rgba(0,0,0,.18)}
.hub-submit-button{background:linear-gradient(100deg,#00a77e,#00a8e8,#754cff,#00d59c);background-size:300% 100%;box-shadow:0 14px 38px rgba(0,192,151,.22)}

.access-gate{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:18px;overflow:hidden;color:#caffee;background:radial-gradient(circle at center,rgba(0,102,82,.28),transparent 48%),rgba(0,5,9,.97);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.access-gate[hidden]{display:none}.access-gate:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 4px);pointer-events:none;animation:scanLines .18s linear infinite}.access-gate:after{content:"";position:absolute;left:0;right:0;top:-8%;height:10%;background:linear-gradient(transparent,rgba(37,255,190,.12),transparent);filter:blur(3px);animation:gateScan 2.2s linear infinite}
@keyframes scanLines{to{transform:translateY(4px)}}@keyframes gateScan{to{top:105%}}
.access-code-rain{position:absolute;inset:0;overflow:hidden;color:rgba(58,255,191,.14);font-size:11px;letter-spacing:.14em}.access-code-rain span{position:absolute;top:-15%;writing-mode:vertical-rl;animation:codeRain 4.5s linear infinite}.access-code-rain span:nth-child(1){left:7%}.access-code-rain span:nth-child(2){left:21%;animation-delay:-2s}.access-code-rain span:nth-child(3){left:39%;animation-delay:-3.4s}.access-code-rain span:nth-child(4){right:39%;animation-delay:-1.1s}.access-code-rain span:nth-child(5){right:20%;animation-delay:-2.8s}.access-code-rain span:nth-child(6){right:6%;animation-delay:-.6s}@keyframes codeRain{to{top:115%}}
.access-terminal{position:relative;z-index:2;width:min(620px,100%);padding:0 35px 34px;overflow:hidden;border:1px solid #1bdba8;border-radius:18px;background:rgba(2,13,18,.94);box-shadow:0 0 0 1px rgba(0,255,184,.08),0 0 65px rgba(0,225,166,.18),0 38px 100px #000;text-align:center}.terminal-top{height:44px;display:flex;align-items:center;gap:7px;margin:0 -35px 25px;padding:0 18px;border-bottom:1px solid rgba(57,247,190,.14);background:#07171c;text-align:left}.terminal-top span{width:8px;height:8px;border-radius:50%;background:#ff5275}.terminal-top span:nth-child(2){background:#ffc347}.terminal-top span:nth-child(3){background:#22e7a6}.terminal-top code{margin-left:auto;color:#5c927f;font-size:8px;letter-spacing:.13em}.terminal-scan{position:relative;width:90px;height:90px;display:grid;place-items:center;margin:0 auto 20px;border:1px solid #26edb2;border-radius:50%;color:#39f6bb;background:rgba(0,240,174,.06);font-size:35px;box-shadow:inset 0 0 25px rgba(0,255,184,.08)}.terminal-scan:after{content:"";position:absolute;inset:-9px;border:1px dashed rgba(48,242,183,.45);border-radius:50%;animation:terminalRotate 5s linear infinite}@keyframes terminalRotate{to{transform:rotate(360deg)}}
.access-terminal>p:first-of-type{margin:0 0 8px;color:#45cfa7;font-size:8px;font-weight:800;letter-spacing:.15em}.access-terminal h2{margin:0;color:#46ffc5;font-size:clamp(29px,7vw,48px);letter-spacing:.06em;text-shadow:0 0 19px rgba(51,255,192,.45)}.terminal-readout{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:23px 0 18px}.terminal-readout span{min-width:0;padding:11px;border:1px solid rgba(57,238,183,.15);border-radius:9px;color:#5d897b;background:rgba(255,255,255,.018);font-size:7px;text-align:left}.terminal-readout strong{display:block;margin-top:6px;overflow-wrap:anywhere;color:#bfffe9;font-size:9px}.access-gate-message{min-height:20px;margin:0 0 15px;color:#94cdbb;font-size:10px;line-height:1.6}.access-progress{height:5px;overflow:hidden;border-radius:99px;background:#102a29}.access-progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#00ae7f,#34ffc0,#00a7e7);transform-origin:left;animation:accessFiveSeconds 5s linear forwards}@keyframes accessFiveSeconds{from{transform:scaleX(0)}to{transform:scaleX(1)}}.access-countdown{display:block;margin-top:14px;color:#5d9987;font-size:14px;letter-spacing:.16em}
.access-gate.declined{background:radial-gradient(circle at center,rgba(122,0,30,.28),transparent 48%),rgba(8,2,6,.98)}.access-gate.declined .access-terminal{border-color:#ff496c;box-shadow:0 0 55px rgba(255,38,84,.18),0 38px 100px #000}.access-gate.declined .terminal-scan{color:#ff5c7b;border-color:#ff496c;background:rgba(255,48,88,.06)}.access-gate.declined .terminal-scan:after{border-color:rgba(255,70,105,.45)}.access-gate.declined h2{color:#ff5777;text-shadow:0 0 18px rgba(255,45,87,.42)}.access-gate.declined .terminal-readout strong{color:#ff9caf}.access-gate.declined .access-progress i{background:#ff4167;animation-duration:2.6s}
@media(max-width:620px){.login-hub-page:after{font-size:6px}.hub-login-panel:after{display:none}.access-terminal{padding:0 16px 24px;border-radius:14px}.terminal-top{margin:0 -16px 20px;padding:0 12px}.terminal-readout{grid-template-columns:1fr}.terminal-readout span{display:flex;align-items:center;justify-content:space-between;gap:12px}.terminal-readout strong{margin:0;text-align:right}.terminal-scan{width:72px;height:72px;font-size:28px}}

/* Step 12: Independence video and automatic daily India heritage backgrounds */
.login-hub-page{isolation:isolate;background:#02080e}.seasonal-background{position:fixed;inset:0;z-index:0;overflow:hidden;background:radial-gradient(circle at 30% 30%,#123d3a,#030a12 68%)}.seasonal-video,.seasonal-image{position:absolute;inset:-4%;width:108%;height:108%}.seasonal-video{object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity 1s}.seasonal-image{opacity:0;background-position:center;background-size:cover;transform-origin:center;transition:opacity 1.1s;will-change:transform;animation:kenBurnsIndia 24s ease-in-out infinite alternate}.seasonal-background.independence-mode .seasonal-video{opacity:1}.seasonal-background.monument-mode .seasonal-image{opacity:1}.seasonal-background.monument-fallback .seasonal-image{background:radial-gradient(circle at 25% 30%,rgba(255,153,51,.42),transparent 28%),radial-gradient(circle at 75% 65%,rgba(19,136,8,.4),transparent 32%),linear-gradient(135deg,#08253b,#06101c)}
@keyframes kenBurnsIndia{0%{transform:scale(1.01) translate3d(-.7%,-.4%,0)}100%{transform:scale(1.13) translate3d(1.4%,.8%,0)}}
.seasonal-contrast{position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,6,13,.82) 0%,rgba(2,7,16,.5) 42%,rgba(2,6,14,.64) 100%),linear-gradient(0deg,rgba(2,6,12,.74),transparent 50%,rgba(0,4,10,.3))}.independence-wash{position:absolute;inset:0;opacity:0;background:linear-gradient(180deg,rgba(255,136,22,.24),transparent 38%,rgba(255,255,255,.04) 48%,transparent 58%,rgba(19,136,8,.25));mix-blend-mode:screen;transition:opacity .8s}.independence-mode .independence-wash{opacity:1}.ashoka-orbit{position:absolute;right:5vw;bottom:8vh;display:none;color:rgba(83,170,255,.18);font-size:clamp(130px,24vw,360px);filter:drop-shadow(0 0 28px rgba(42,126,255,.18));animation:chakraTurn 32s linear infinite}.independence-mode .ashoka-orbit{display:block}@keyframes chakraTurn{to{transform:rotate(360deg)}}
.seasonal-credit{position:absolute;left:18px;bottom:28px;z-index:4;max-width:min(62vw,520px);padding:7px 10px;border:1px solid rgba(255,255,255,.16);border-radius:99px;color:rgba(226,245,255,.78);background:rgba(2,10,18,.52);font:700 7px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.05em;text-decoration:none;pointer-events:auto;backdrop-filter:blur(10px)}
.login-hub-page::before{z-index:2}.login-hub-page .rgb-aurora{z-index:1;opacity:.5}.login-hub-page .login-hub-shell,.login-hub-page .hub-footer{z-index:3}.login-hub-page .hub-login-panel{background:linear-gradient(rgba(4,15,27,.76),rgba(3,9,20,.82)) padding-box,linear-gradient(135deg,rgba(0,240,164,.92),rgba(0,170,255,.7) 44%,rgba(147,77,255,.82) 72%,rgba(255,60,166,.8)) border-box;box-shadow:0 40px 120px rgba(0,0,0,.54),inset 0 1px 0 rgba(255,255,255,.06),0 0 60px rgba(0,229,165,.11);backdrop-filter:blur(24px) saturate(135%)}.login-hub-page .login-form-card{background:rgba(1,7,16,.61);backdrop-filter:blur(18px)}.login-hub-page .hub-intro{text-shadow:0 3px 22px rgba(0,0,0,.72)}
@media(max-width:1050px){.seasonal-contrast{background:linear-gradient(rgba(1,6,13,.58),rgba(2,7,15,.76))}.seasonal-video,.seasonal-image{inset:-2%;width:104%;height:104%}.seasonal-credit{bottom:24px}}
@media(max-width:620px){.seasonal-video{object-position:center}.seasonal-image{background-position:center}.seasonal-contrast{background:linear-gradient(rgba(1,6,13,.5),rgba(2,7,15,.79) 52%,rgba(2,6,13,.9))}.ashoka-orbit{right:-18vw;bottom:32vh;font-size:58vw}.seasonal-credit{left:10px;bottom:22px;max-width:calc(100vw - 20px);font-size:6px}.login-hub-page .hub-login-panel{background:linear-gradient(rgba(4,15,27,.78),rgba(3,9,20,.86)) padding-box,linear-gradient(135deg,rgba(0,240,164,.92),rgba(0,170,255,.7),rgba(147,77,255,.82)) border-box}}
@media(prefers-reduced-motion:reduce){.seasonal-image,.ashoka-orbit{animation:none!important}.seasonal-video{display:none}.seasonal-background.independence-mode{background:linear-gradient(160deg,#ff9933 0%,#fff 48%,#138808 100%)}}

/* Step 13: full-canvas background with premium transparent login glass */
.login-hub-page {
    background: transparent !important;
}

.seasonal-background {
    z-index: 0;
    background: #02080e;
}

.seasonal-video,
.seasonal-image {
    inset: 0;
    width: 100%;
    height: 100%;
}

.seasonal-video {
    object-fit: cover;
    object-position: center center;
    filter: saturate(1.08) contrast(1.03) brightness(.92);
}

.seasonal-contrast {
    background:
        linear-gradient(90deg, rgba(0, 5, 10, .34), rgba(0, 6, 13, .08) 48%, rgba(0, 5, 12, .22)),
        linear-gradient(0deg, rgba(0, 4, 10, .34), transparent 45%, rgba(0, 4, 10, .16));
}

.independence-wash {
    opacity: 0;
}

.independence-mode .independence-wash {
    opacity: .34;
}

.login-hub-page .rgb-aurora {
    z-index: 1;
    opacity: .2;
}

.login-hub-page::before {
    z-index: 0;
    opacity: .14;
}

.login-hub-page .login-hub-shell,
.login-hub-page .hub-footer {
    z-index: 2;
}

.login-hub-page .hub-login-panel {
    border-color: transparent;
    background:
        linear-gradient(145deg, rgba(9, 22, 35, .36), rgba(3, 10, 20, .24)) padding-box,
        linear-gradient(135deg, rgba(73, 255, 202, .9), rgba(73, 190, 255, .7) 45%, rgba(174, 99, 255, .78) 75%, rgba(255, 107, 187, .72)) border-box;
    box-shadow:
        0 30px 90px rgba(0, 0, 0, .3),
        inset 0 1px 0 rgba(255, 255, 255, .14),
        0 0 50px rgba(0, 229, 165, .08);
    -webkit-backdrop-filter: blur(15px) saturate(145%);
    backdrop-filter: blur(15px) saturate(145%);
}

.login-hub-page .login-form-card {
    border-color: rgba(255, 255, 255, .16);
    background: linear-gradient(145deg, rgba(1, 9, 17, .38), rgba(1, 7, 15, .24));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
}

.login-hub-page .role-card {
    border-color: rgba(255, 255, 255, .17);
    background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(2, 12, 23, .13));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
}

.login-hub-page .hub-input-wrap {
    border-color: rgba(255, 255, 255, .2);
    background: rgba(0, 6, 13, .34);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.login-hub-page .trust-row span,
.login-hub-page .seasonal-credit {
    background: rgba(2, 10, 18, .28);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.login-hub-page .hub-intro {
    text-shadow: 0 3px 20px rgba(0, 0, 0, .9), 0 1px 2px rgba(0, 0, 0, .95);
}

.login-hub-page .intro-copy > p:last-child,
.login-hub-page .role-copy small,
.login-hub-page .active-role-heading small,
.login-hub-page .hub-help,
.login-hub-page .hub-setup {
    color: rgba(225, 239, 255, .76);
}

@media (max-width: 1050px) {
    .seasonal-contrast {
        background: linear-gradient(180deg, rgba(0, 4, 10, .18), rgba(0, 5, 12, .3));
    }

    .login-hub-page .hub-login-panel {
        background:
            linear-gradient(145deg, rgba(7, 20, 32, .34), rgba(2, 9, 18, .24)) padding-box,
            linear-gradient(135deg, rgba(73, 255, 202, .9), rgba(73, 190, 255, .7), rgba(174, 99, 255, .78)) border-box;
    }
}

@media (max-width: 620px) {
    .seasonal-video {
        object-position: 50% 50%;
        filter: saturate(1.06) contrast(1.02) brightness(.9);
    }

    .seasonal-contrast {
        background: linear-gradient(180deg, rgba(0, 4, 10, .12), rgba(0, 5, 12, .24) 48%, rgba(0, 5, 12, .38));
    }

    .login-hub-page .login-hub-shell {
        gap: 20px;
    }

    .login-hub-page .hub-login-panel {
        background:
            linear-gradient(145deg, rgba(7, 20, 32, .3), rgba(2, 9, 18, .2)) padding-box,
            linear-gradient(135deg, rgba(73, 255, 202, .9), rgba(73, 190, 255, .72), rgba(174, 99, 255, .78)) border-box;
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        backdrop-filter: blur(12px) saturate(140%);
    }

    .login-hub-page .login-form-card {
        background: rgba(1, 8, 16, .25);
    }
}

/* Final glass layer: intentionally last so the full background remains visible. */
.login-hub-page .hub-login-panel{-webkit-backdrop-filter:blur(23px) saturate(180%)!important;backdrop-filter:blur(23px) saturate(180%)!important}
.login-hub-page .login-form-card{-webkit-backdrop-filter:blur(15px) saturate(165%)!important;backdrop-filter:blur(15px) saturate(165%)!important}
.login-hub-page .role-card{-webkit-backdrop-filter:blur(12px) saturate(170%)!important;backdrop-filter:blur(12px) saturate(170%)!important}
@media(max-width:620px){.login-hub-page .hub-login-panel{-webkit-backdrop-filter:blur(18px) saturate(170%)!important;backdrop-filter:blur(18px) saturate(170%)!important}.login-hub-page .login-form-card{background:rgba(1,8,16,.13)!important}}

/* Final crystal glass: keep the full heritage/video background clearly visible. */
.login-hub-page .hub-login-panel{background:linear-gradient(145deg,rgba(8,22,35,.11),rgba(2,9,18,.055)) padding-box,linear-gradient(135deg,rgba(73,255,202,.86),rgba(73,190,255,.64) 45%,rgba(174,99,255,.73) 75%,rgba(255,107,187,.64)) border-box!important;box-shadow:0 28px 85px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.24),0 0 45px rgba(0,229,165,.07)!important;-webkit-backdrop-filter:blur(7px) saturate(132%)!important;backdrop-filter:blur(7px) saturate(132%)!important}.login-hub-page .login-form-card{background:rgba(1,8,16,.075)!important;border-color:rgba(255,255,255,.24)!important;-webkit-backdrop-filter:blur(4px) saturate(125%)!important;backdrop-filter:blur(4px) saturate(125%)!important}.login-hub-page .role-card{background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(2,12,23,.035))!important;border-color:rgba(255,255,255,.28)!important;-webkit-backdrop-filter:blur(3px)!important;backdrop-filter:blur(3px)!important}.login-hub-page .hub-input-wrap{background:rgba(0,6,13,.16)!important;border-color:rgba(255,255,255,.3)!important;-webkit-backdrop-filter:blur(2px)!important;backdrop-filter:blur(2px)!important}.login-hub-page .seasonal-contrast{background:linear-gradient(90deg,rgba(0,5,10,.16),rgba(0,6,13,.015) 48%,rgba(0,5,12,.075)),linear-gradient(0deg,rgba(0,4,10,.16),transparent 45%,rgba(0,4,10,.055))!important}

/* Crystal 1.3.3: preserve every layout/color while removing the opaque blue fill. */
.login-hub-page .hub-login-panel{background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(2,9,18,.012)) padding-box,linear-gradient(135deg,rgba(73,255,202,.82),rgba(73,190,255,.58) 45%,rgba(174,99,255,.68) 75%,rgba(255,107,187,.58)) border-box!important;-webkit-backdrop-filter:blur(2px) saturate(112%)!important;backdrop-filter:blur(2px) saturate(112%)!important}

/* Final colorless water glass: no blue/purple fill, only a floating clear surface. */
.login-hub-page .hub-login-panel{background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.012)) padding-box,linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.2) 48%,rgba(255,255,255,.55)) border-box!important;box-shadow:0 30px 70px rgba(0,0,0,.22),0 12px 28px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.5)!important;-webkit-backdrop-filter:blur(3px) saturate(105%)!important;backdrop-filter:blur(3px) saturate(105%)!important}.login-hub-page .hub-login-panel:before{opacity:.34!important}.login-hub-page .login-form-card{background:rgba(255,255,255,.035)!important;border-color:rgba(255,255,255,.28)!important}.login-hub-page .role-card{background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.34)!important}.login-hub-page .hub-input-wrap{background:rgba(0,0,0,.13)!important}