@layer access504;
/* Scoped to authentication gates; display remains owned by the existing services. */
:is(#login-screen,#cloud504-login).a504-gate:is([style*="display: flex"],[style*="display:flex"]){display:grid!important}
:is(#login-screen,#cloud504-login).a504-gate{position:fixed!important;inset:0!important;box-sizing:border-box!important;grid-template-columns:minmax(0,1.16fr) minmax(460px,1fr)!important;align-items:stretch!important;justify-content:stretch!important;place-items:stretch!important;padding:0!important;background:#fbf9f8!important;color:#19191c!important;font-family:Inter,"Segoe UI",system-ui,sans-serif!important;overflow:auto!important;isolation:isolate}
.a504-gate *{box-sizing:border-box}
.a504-gate form{max-height:none!important;overflow:visible!important;flex-shrink:0}
.a504-gate>.a504-scene{width:auto!important;max-width:none!important;min-width:0!important;position:relative!important;inset:auto!important;height:auto!important;margin:0!important;border:0!important;box-shadow:none!important;transform:none!important}
.a504-scene{position:relative;isolation:isolate;min-height:100%;overflow:hidden;background:radial-gradient(ellipse at 72% 70%,#521c1b 0,transparent 50%),linear-gradient(145deg,#100f12 5%,#181114 60%,#0d0d10);color:#fff;display:flex;flex-direction:column;padding:clamp(32px,4vw,72px)}
.a504-brand{position:relative;z-index:2;display:flex;align-items:center;gap:17px;font-size:22px;font-weight:650;letter-spacing:.15em;line-height:1.1}
.a504-brand small{display:block;font-size:8px;letter-spacing:.24em;font-weight:500;color:#a69b9d;margin-top:8px}
.a504-mark{position:relative;font-size:45px;font-weight:850;letter-spacing:-.09em;padding-right:18px;border-right:1px solid #ffffff38;line-height:1}
.a504-mark>span{position:absolute;top:-2px;right:8px;font-size:9px;letter-spacing:0;color:#ff8648}
.a504-intro{position:relative;z-index:2;margin-top:clamp(70px,12vh,144px)}
.a504-eyebrow{font-size:10px;letter-spacing:.22em;font-weight:600;color:#ff9569;display:flex;align-items:center;gap:12px}
.a504-eyebrow:before{content:"";height:1px;width:28px;background:#ff9569}
.a504-intro h2{font-size:clamp(38px,3.65vw,64px);line-height:1.13;letter-spacing:-.055em;font-weight:550;margin:26px 0 22px;color:white}
.a504-intro h2 em{font-style:normal;color:#ff654f;font-weight:400}
.a504-intro p{font-size:15px;line-height:1.8;color:#b8aeb1;margin:0}
.a504-water{position:absolute;inset:28% -22% -12% -18%;z-index:0;pointer-events:none}
.a504-water svg{position:absolute;width:120%;height:100%;left:-8%;top:12%;animation:a504-flow 16s ease-in-out infinite alternate;filter:drop-shadow(0 0 5px #ff4c382a)}
.a504-halo{position:absolute;width:66%;aspect-ratio:1;left:22%;top:20%;border-radius:50%;background:radial-gradient(ellipse,#f9472b24,transparent 67%);animation:a504-breathe 9s ease-in-out infinite alternate}
.a504-ring{position:absolute;left:28%;top:38%;width:54%;aspect-ratio:1;border:1px solid #fb5e452b;border-radius:50%;transform:rotateX(64deg) rotate(-24deg);box-shadow:0 0 28px #f9543c09,inset 0 0 30px #f9543c08;animation:a504-ripple 12s ease-in-out infinite alternate}
.ring-two{width:76%;left:17%;top:22%;animation-delay:-6s;opacity:.5}
.a504-orb{position:absolute;left:63%;top:47%;width:9px;height:9px;border-radius:50%;background:#ffe6da;box-shadow:0 0 20px #ff6246,0 0 80px 24px #ff5c342a;animation:a504-breathe 6s ease-in-out infinite alternate}
.a504-scene-bottom{position:relative;z-index:2;margin-top:auto;padding-top:230px;display:flex;justify-content:space-between;gap:20px;font-size:8px;letter-spacing:.16em;color:#a7969d}
.a504-motion{position:absolute;bottom:76px;left:clamp(32px,4vw,72px);z-index:3;border:1px solid #f6b7a32b;background:#26151980;border-radius:30px;color:#d0b7b2;padding:7px 12px;font:10px "Segoe UI",sans-serif;cursor:pointer}
.a504-panel{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;min-width:0;min-height:100%;padding:36px clamp(32px,4.6vw,88px) 26px;background:radial-gradient(ellipse at 100% 0,#ffe8e2,transparent 50%),#faf8f7}
.a504-panel-top,.a504-panel-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;color:#817477;font-size:10px;letter-spacing:.09em}
.a504-access-tag{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:0;color:#69575d}
.a504-access-tag svg{width:14px;height:14px}
:is(#login-screen,#cloud504-login).a504-gate form{width:100%!important;max-width:470px!important;min-width:0!important;margin:64px auto!important;padding:36px!important;border:1px solid #eadfe0!important;border-radius:22px!important;background:#ffffffed!important;box-shadow:0 24px 64px #31111c12,0 3px 10px #31111c06!important;text-align:left!important;font-family:inherit!important;color:#19191c!important}
:is(#login-screen,#cloud504-login).a504-gate .a504-form-brand{display:block!important;width:auto!important;padding:0!important;margin:0 0 22px!important;background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;font:700 10px/1.4 "Segoe UI",sans-serif!important;letter-spacing:.16em!important;color:#bc2335!important}
:is(#login-screen,#cloud504-login).a504-gate form :is(h1,h2){color:#19191c!important;font-size:clamp(26px,2.15vw,36px)!important;font-weight:600!important;line-height:1.2!important;letter-spacing:-.045em!important;margin:0 0 14px!important}
:is(#login-screen,#cloud504-login).a504-gate form>p:not(.login-error){font-size:13px!important;line-height:1.75!important;color:#766c70!important;margin:0 0 30px!important}
:is(#login-screen,#cloud504-login).a504-gate form label{display:block!important;color:#30262c!important;font-size:11px!important;line-height:1.5!important;font-weight:600!important;margin:18px 0 7px!important;text-align:left!important}
:is(#login-screen,#cloud504-login).a504-gate form :is(input,select){display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;height:49px!important;padding:0 14px!important;margin:7px 0 0!important;border:1px solid #e6dbdc!important;border-radius:9px!important;background:#fff!important;box-shadow:0 2px 4px #19191c02!important;color:#2a2227!important;font:400 14px "Segoe UI",sans-serif!important;transition:border-color .2s,box-shadow .2s}
:is(#login-screen,#cloud504-login).a504-gate form :is(input,select):focus{outline:0!important;border-color:#cc2b3d!important;box-shadow:0 0 0 3px #cc2b3d1c!important}
:is(#login-screen,#cloud504-login).a504-gate form>button:not([type=submit]){width:auto!important;min-height:32px!important;padding:6px 0!important;border:0!important;background:transparent!important;color:#746068!important;font:500 11px "Segoe UI",sans-serif!important;margin:5px 0!important;box-shadow:none!important}
:is(#login-screen,#cloud504-login).a504-gate form>a{display:block!important;text-align:right!important;font-size:11px!important;color:#9c2738!important;margin:14px 0 0!important;text-decoration:none!important;line-height:1.5}
:is(#login-screen,#cloud504-login).a504-gate form>a:hover{text-decoration:underline!important}
:is(#login-screen,#cloud504-login).a504-gate form :is(.login-error,[data-error]){font-size:12px!important;line-height:1.5!important;color:#b21f35!important;min-height:18px!important;margin:12px 0!important}
:is(#login-screen,#cloud504-login).a504-gate form>button[type=submit]{width:100%!important;min-height:51px!important;margin:4px 0 0!important;padding:13px 18px!important;border:1px solid #bc1e31!important;border-radius:9px!important;background:linear-gradient(110deg,#a81228,#c4202c 78%,#b93a17)!important;color:#fff!important;font:700 14px "Segoe UI",sans-serif!important;box-shadow:0 7px 18px #bc1e3126!important;cursor:pointer;transition:transform .2s,box-shadow .2s}
:is(#login-screen,#cloud504-login).a504-gate form>button[type=submit]:hover{transform:translateY(-1px);box-shadow:0 9px 24px #bc1e3138!important}
:is(#login-screen,#cloud504-login).a504-gate form>small{display:block!important;text-align:center!important;margin:17px 0 0!important;color:#8b7d82!important;font-size:10px!important;line-height:1.6!important}
.a504-gate :is(button,a):focus-visible{outline:3px solid #e25830!important;outline-offset:4px!important}
.a504-gate button:disabled{opacity:.55;cursor:wait}
.a504-panel-foot{letter-spacing:0;font-size:10px;padding-top:10px}
.a504-panel-foot>span:first-child{font-weight:600;color:#69545d}
.a504-paused .a504-water *{animation-play-state:paused!important}
@keyframes a504-flow{from{transform:translate(-2%,2%) rotate(-5deg) scale(1.02)}to{transform:translate(3%,-3%) rotate(5deg) scale(1.1)}}
@keyframes a504-ripple{from{transform:rotateX(64deg) rotate(-24deg) scale(.95);opacity:.35}to{transform:rotateX(60deg) rotate(-16deg) scale(1.12);opacity:.8}}
@keyframes a504-breathe{from{opacity:.45;transform:translateY(10px)}to{opacity:1;transform:translateY(-10px)}}
@media(min-width:901px) and (max-height:780px){.a504-panel{padding-top:24px;padding-bottom:20px}.a504-gate .a504-panel form{margin:24px auto!important}.a504-intro{margin-top:65px}.a504-scene-bottom{padding-top:160px}}
@media(max-width:900px){:is(#login-screen,#cloud504-login).a504-gate{grid-template-columns:1fr!important;grid-template-rows:auto 1fr!important}.a504-scene{min-height:230px;padding:26px 28px}.a504-brand{font-size:16px}.a504-mark{font-size:34px}.a504-brand small{font-size:7px}.a504-intro{margin-top:26px}.a504-eyebrow{font-size:8px}.a504-intro h2{font-size:31px;margin:12px 0 0}.a504-intro p,.a504-scene-bottom{display:none}.a504-water{inset:-45% -15% -70% 25%}.a504-motion{left:auto;right:24px;bottom:20px;font-size:9px}.a504-panel{padding:25px 28px 22px;min-height:0}.a504-panel-top{font-size:8px}.a504-gate .a504-panel form{margin:34px auto!important;max-width:430px!important}.a504-gate form input{font-size:16px!important}.a504-panel-foot{font-size:9px}}
@media(prefers-reduced-motion:reduce){.a504-water *{animation:none!important}.a504-gate *{transition:none!important}.a504-motion{display:none}}

/* Scarlet concept: a raised authentication card anchors the light panel. */
.a504-secret-field{display:block;position:relative}
:is(#login-screen,#cloud504-login).a504-gate .a504-secret-field input{padding-right:52px!important}
.a504-gate .a504-password-toggle{position:absolute;right:4px;top:4px;width:42px;height:41px;min-height:0!important;border:0!important;border-radius:7px;background:transparent!important;box-shadow:none!important;padding:0!important;font-size:0!important;cursor:pointer;color:#6f5e64!important;display:grid;place-items:center}
.a504-password-toggle:after{content:"";width:20px;height:20px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.a504-password-toggle[aria-pressed=true]{color:#bf2136!important;background:#bf21360b!important}
:is(#login-screen,#cloud504-login).a504-gate form label{font-size:12px!important}
:is(#login-screen,#cloud504-login).a504-gate form>small{font-size:11px!important}
.a504-panel{background:radial-gradient(ellipse at 100% 0,#ffe8e28a,transparent 50%),#faf8f7}
.a504-panel:before{content:"ID";position:absolute;z-index:-1;right:0;bottom:45px;font:850 clamp(170px,20vw,310px)/1 "Segoe UI",sans-serif;letter-spacing:-.09em;color:#bb203008;pointer-events:none}
.a504-panel:after{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 80% 20%,#ff783f12,transparent 53%),radial-gradient(ellipse at 5% 80%,#d1223510,transparent 55%);pointer-events:none}
.a504-access-tag{padding:8px 12px;border:1px solid #e7d8d9;border-radius:30px;background:#ffffffa6;color:#8c2a39}
:is(#login-screen,#cloud504-login).a504-gate form{position:relative}
:is(#login-screen,#cloud504-login).a504-gate form:before{content:"";position:absolute;left:36px;right:36px;top:-1px;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,#b91e34,#e53836 70%,#f47839)}
:is(#login-screen,#cloud504-login).a504-gate .a504-form-brand{display:flex!important;align-items:center;gap:10px}
:is(#login-screen,#cloud504-login).a504-gate .a504-form-brand:before{content:"";width:7px;height:7px;border-radius:2px;background:#dc2d3d;box-shadow:0 0 0 4px #dc2d3d0c}
.a504-intro h2 em{background:linear-gradient(100deg,#ff5a5f,#ff9657);background-clip:text;-webkit-background-clip:text;color:transparent}
@media(max-width:900px){.a504-gate .a504-panel form{padding:26px 23px!important;margin:26px auto!important}.a504-panel{padding:23px 18px 22px}.a504-panel:before{font-size:190px;right:0}.a504-panel-top{gap:8px}.a504-access-tag{padding:7px 9px;font-size:9px}.a504-gate .a504-panel form:before{left:23px;right:23px}.a504-panel-foot{padding-top:16px}}

@layer access504 {
:is(#login-screen, #cloud504-login).a504-gate:is([style*="display: flex"], [style*="display:flex"]) { display: grid !important; }
:is(#login-screen, #cloud504-login).a504-gate { isolation: isolate !important; position: fixed !important; inset: 0px !important; box-sizing: border-box !important; grid-template-columns: minmax(0px, 1.16fr) minmax(460px, 1fr) !important; justify-content: stretch !important; place-items: stretch !important; padding: 0px !important; background: rgb(251, 249, 248) !important; color: rgb(25, 25, 28) !important; font-family: Inter, "Segoe UI", system-ui, sans-serif !important; overflow: auto !important; }
.a504-gate * { box-sizing: border-box !important; }
.a504-gate form { flex-shrink: 0 !important; max-height: none !important; overflow: visible !important; }
.a504-gate > .a504-scene { width: auto !important; max-width: none !important; min-width: 0px !important; position: relative !important; inset: auto !important; height: auto !important; margin: 0px !important; border: 0px !important; box-shadow: none !important; transform: none !important; }
.a504-scene { position: relative !important; isolation: isolate !important; min-height: 100% !important; overflow: hidden !important; background-image: radial-gradient(at 72% 70%, rgb(82, 28, 27) 0px, transparent 50%), linear-gradient(145deg, rgb(16, 15, 18) 5%, rgb(24, 17, 20) 60%, rgb(13, 13, 16)) !important; background-position-x: initial, initial; background-position-y: initial, initial; background-size: initial, initial; background-repeat: initial, initial; background-attachment: initial, initial; background-origin: initial, initial; background-clip: initial, initial; background-color: initial !important; color: rgb(255, 255, 255) !important; display: flex !important; flex-direction: column !important; padding: clamp(32px, 4vw, 72px) !important; }
.a504-brand { position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; gap: 17px !important; font-size: 22px !important; font-weight: 650 !important; letter-spacing: 0.15em !important; line-height: 1.1 !important; }
.a504-brand small { display: block !important; font-size: 8px !important; letter-spacing: 0.24em !important; font-weight: 500 !important; color: rgb(166, 155, 157) !important; margin-top: 8px !important; }
.a504-mark { position: relative !important; font-size: 45px !important; font-weight: 850 !important; letter-spacing: -0.09em !important; padding-right: 18px !important; border-right: 1px solid rgba(255, 255, 255, 0.22) !important; line-height: 1 !important; }
.a504-mark > span { position: absolute !important; top: -2px !important; right: 8px !important; font-size: 9px !important; letter-spacing: 0px !important; color: rgb(255, 134, 72) !important; }
.a504-intro { position: relative !important; z-index: 2 !important; margin-top: clamp(70px, 12vh, 144px) !important; }
.a504-eyebrow { font-size: 10px !important; letter-spacing: 0.22em !important; font-weight: 600 !important; color: rgb(255, 149, 105) !important; display: flex !important; align-items: center !important; gap: 12px !important; }
.a504-eyebrow::before { content: "" !important; height: 1px !important; width: 28px !important; background: rgb(255, 149, 105) !important; }
.a504-intro h2 { font-size: clamp(38px, 3.65vw, 64px) !important; line-height: 1.13 !important; letter-spacing: -0.055em !important; font-weight: 550 !important; margin: 26px 0px 22px !important; color: white !important; }
.a504-intro h2 em { font-style: normal !important; color: rgb(255, 101, 79) !important; font-weight: 400 !important; }
.a504-intro p { font-size: 15px !important; line-height: 1.8 !important; color: rgb(184, 174, 177) !important; margin: 0px !important; }
.a504-water { position: absolute !important; inset: 28% -22% -12% -18% !important; z-index: 0 !important; pointer-events: none !important; }
.a504-water svg { position: absolute !important; width: 120% !important; height: 100% !important; left: -8% !important; top: 12% !important; animation: 16s ease-in-out 0s infinite alternate none running a504-flow !important; filter: drop-shadow(rgba(255, 76, 56, 0.165) 0px 0px 5px) !important; }
.a504-halo { position: absolute !important; width: 66% !important; aspect-ratio: 1 / 1 !important; left: 22% !important; top: 20% !important; border-radius: 50% !important; background: radial-gradient(rgba(249, 71, 43, 0.14), transparent 67%) !important; animation: 9s ease-in-out 0s infinite alternate none running a504-breathe !important; }
.a504-ring { position: absolute !important; left: 28% !important; top: 38% !important; width: 54% !important; aspect-ratio: 1 / 1 !important; border: 1px solid rgba(251, 94, 69, 0.17) !important; border-radius: 50% !important; transform: rotateX(64deg) rotate(-24deg) !important; box-shadow: rgba(249, 84, 60, 0.035) 0px 0px 28px, rgba(249, 84, 60, 0.03) 0px 0px 30px inset !important; animation: 12s ease-in-out 0s infinite alternate none running a504-ripple !important; }
.ring-two { width: 76% !important; left: 17% !important; top: 22% !important; animation-delay: -6s !important; opacity: 0.5 !important; }
.a504-orb { position: absolute !important; left: 63% !important; top: 47% !important; width: 9px !important; height: 9px !important; border-radius: 50% !important; background: rgb(255, 230, 218) !important; box-shadow: rgb(255, 98, 70) 0px 0px 20px, rgba(255, 92, 52, 0.165) 0px 0px 80px 24px !important; animation: 6s ease-in-out 0s infinite alternate none running a504-breathe !important; }
.a504-scene-bottom { position: relative !important; z-index: 2 !important; margin-top: auto !important; padding-top: 230px !important; display: flex !important; justify-content: space-between !important; gap: 20px !important; font-size: 8px !important; letter-spacing: 0.16em !important; color: rgb(167, 150, 157) !important; }
.a504-motion { position: absolute !important; bottom: 76px !important; left: clamp(32px, 4vw, 72px) !important; z-index: 3 !important; border: 1px solid rgba(246, 183, 163, 0.17) !important; background: rgba(38, 21, 25, 0.5) !important; border-radius: 30px !important; color: rgb(208, 183, 178) !important; padding: 7px 12px !important; font: 10px "Segoe UI", sans-serif !important; cursor: pointer !important; }
.a504-panel { position: relative !important; isolation: isolate !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; min-width: 0px !important; min-height: 100% !important; padding: 36px clamp(32px, 4.6vw, 88px) 26px !important; background-image: radial-gradient(at 100% 0px, rgb(255, 232, 226), transparent 50%), initial; background-position-x: initial, initial; background-position-y: initial, initial; background-size: initial, initial; background-repeat: initial, initial; background-attachment: initial, initial; background-origin: initial, initial; background-clip: initial, initial; background-color: rgb(250, 248, 247) !important; }
.a504-panel-top, .a504-panel-foot { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 16px !important; color: rgb(129, 116, 119) !important; font-size: 10px !important; letter-spacing: 0.09em !important; }
.a504-access-tag { display: flex !important; align-items: center !important; gap: 7px !important; font-size: 10px !important; letter-spacing: 0px !important; color: rgb(105, 87, 93) !important; }
.a504-access-tag svg { width: 14px !important; height: 14px !important; }
:is(#login-screen, #cloud504-login).a504-gate form { width: 100% !important; max-width: 470px !important; min-width: 0px !important; margin: 64px auto !important; padding: 36px !important; border: 1px solid rgb(234, 223, 224) !important; border-radius: 22px !important; background: rgba(255, 255, 255, 0.93) !important; box-shadow: rgba(49, 17, 28, 0.07) 0px 24px 64px, rgba(49, 17, 28, 0.024) 0px 3px 10px !important; text-align: left !important; font-family: inherit !important; color: rgb(25, 25, 28) !important; }
:is(#login-screen, #cloud504-login).a504-gate .a504-form-brand { display: block !important; width: auto !important; padding: 0px !important; margin: 0px 0px 22px !important; background: none !important; box-shadow: none !important; border: 0px !important; border-radius: 0px !important; font: 700 10px / 1.4 "Segoe UI", sans-serif !important; letter-spacing: 0.16em !important; color: rgb(188, 35, 53) !important; }
:is(#login-screen, #cloud504-login).a504-gate form :is(h1, h2) { color: rgb(25, 25, 28) !important; font-size: clamp(26px, 2.15vw, 36px) !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: -0.045em !important; margin: 0px 0px 14px !important; }
:is(#login-screen, #cloud504-login).a504-gate form > p:not(.login-error) { font-size: 13px !important; line-height: 1.75 !important; color: rgb(118, 108, 112) !important; margin: 0px 0px 30px !important; }
:is(#login-screen, #cloud504-login).a504-gate form label { display: block !important; color: rgb(48, 38, 44) !important; font-size: 11px !important; line-height: 1.5 !important; font-weight: 600 !important; margin: 18px 0px 7px !important; text-align: left !important; }
:is(#login-screen, #cloud504-login).a504-gate form :is(input, select) { transition: border-color 0.2s, box-shadow 0.2s !important; display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0px !important; height: 49px !important; padding: 0px 14px !important; margin: 7px 0px 0px !important; border: 1px solid rgb(230, 219, 220) !important; border-radius: 9px !important; background: rgb(255, 255, 255) !important; box-shadow: rgba(25, 25, 28, 0.008) 0px 2px 4px !important; color: rgb(42, 34, 39) !important; font: 400 14px "Segoe UI", sans-serif !important; }
:is(#login-screen, #cloud504-login).a504-gate form :is(input, select):focus { outline: 0px !important; border-color: rgb(204, 43, 61) !important; box-shadow: rgba(204, 43, 61, 0.11) 0px 0px 0px 3px !important; }
:is(#login-screen, #cloud504-login).a504-gate form > button:not([type="submit"]) { width: auto !important; min-height: 32px !important; padding: 6px 0px !important; border: 0px !important; background: transparent !important; color: rgb(116, 96, 104) !important; font: 500 11px "Segoe UI", sans-serif !important; margin: 5px 0px !important; box-shadow: none !important; }
:is(#login-screen, #cloud504-login).a504-gate form > a { line-height: 1.5 !important; display: block !important; text-align: right !important; font-size: 11px !important; color: rgb(156, 39, 56) !important; margin: 14px 0px 0px !important; text-decoration: none !important; }
:is(#login-screen, #cloud504-login).a504-gate form > a:hover { text-decoration: underline !important; }
:is(#login-screen, #cloud504-login).a504-gate form :is(.login-error, [data-error]) { font-size: 12px !important; line-height: 1.5 !important; color: rgb(178, 31, 53) !important; min-height: 18px !important; margin: 12px 0px !important; }
:is(#login-screen, #cloud504-login).a504-gate form > button[type="submit"] { cursor: pointer !important; transition: transform 0.2s, box-shadow 0.2s !important; width: 100% !important; min-height: 51px !important; margin: 4px 0px 0px !important; padding: 13px 18px !important; border: 1px solid rgb(188, 30, 49) !important; border-radius: 9px !important; background: linear-gradient(110deg, rgb(168, 18, 40), rgb(196, 32, 44) 78%, rgb(185, 58, 23)) !important; color: rgb(255, 255, 255) !important; font: 700 14px "Segoe UI", sans-serif !important; box-shadow: rgba(188, 30, 49, 0.15) 0px 7px 18px !important; }
:is(#login-screen, #cloud504-login).a504-gate form > button[type="submit"]:hover { transform: translateY(-1px) !important; box-shadow: rgba(188, 30, 49, 0.22) 0px 9px 24px !important; }
:is(#login-screen, #cloud504-login).a504-gate form > small { display: block !important; text-align: center !important; margin: 17px 0px 0px !important; color: rgb(139, 125, 130) !important; font-size: 10px !important; line-height: 1.6 !important; }
.a504-gate :is(button, a):focus-visible { outline: rgb(226, 88, 48) solid 3px !important; outline-offset: 4px !important; }
.a504-gate button:disabled { opacity: 0.55 !important; cursor: wait !important; }
.a504-panel-foot { letter-spacing: 0px !important; font-size: 10px !important; padding-top: 10px !important; }
.a504-panel-foot > span:first-child { font-weight: 600 !important; color: rgb(105, 84, 93) !important; }
.a504-paused .a504-water * { animation-play-state: paused !important; }
@keyframes a504-flow { 
  0% { transform: translate(-2%, 2%) rotate(-5deg) scale(1.02); }
  100% { transform: translate(3%, -3%) rotate(5deg) scale(1.1); }
}
@keyframes a504-ripple { 
  0% { transform: rotateX(64deg) rotate(-24deg) scale(0.95); opacity: 0.35; }
  100% { transform: rotateX(60deg) rotate(-16deg) scale(1.12); opacity: 0.8; }
}
@keyframes a504-breathe { 
  0% { opacity: 0.45; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(-10px); }
}
@media (min-width: 901px) and (max-height: 780px) {
  .a504-panel { padding-top: 24px !important; padding-bottom: 20px !important; }
  .a504-gate .a504-panel form { margin: 24px auto !important; }
  .a504-intro { margin-top: 65px !important; }
  .a504-scene-bottom { padding-top: 160px !important; }
}
@media (max-width: 900px) {
  :is(#login-screen, #cloud504-login).a504-gate { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr !important; }
  .a504-scene { min-height: 230px !important; padding: 26px 28px !important; }
  .a504-brand { font-size: 16px !important; }
  .a504-mark { font-size: 34px !important; }
  .a504-brand small { font-size: 7px !important; }
  .a504-intro { margin-top: 26px !important; }
  .a504-eyebrow { font-size: 8px !important; }
  .a504-intro h2 { font-size: 31px !important; margin: 12px 0px 0px !important; }
  .a504-intro p, .a504-scene-bottom { display: none !important; }
  .a504-water { inset: -45% -15% -70% 25% !important; }
  .a504-motion { left: auto !important; right: 24px !important; bottom: 20px !important; font-size: 9px !important; }
  .a504-panel { padding: 25px 28px 22px !important; min-height: 0px !important; }
  .a504-panel-top { font-size: 8px !important; }
  .a504-gate .a504-panel form { margin: 34px auto !important; max-width: 430px !important; }
  .a504-gate form input { font-size: 16px !important; }
  .a504-panel-foot { font-size: 9px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .a504-water * { animation: auto ease 0s 1 normal none running none !important; }
  .a504-gate * { transition: none !important; }
  .a504-motion { display: none !important; }
}
.a504-secret-field { display: block !important; position: relative !important; }
:is(#login-screen, #cloud504-login).a504-gate .a504-secret-field input { padding-right: 52px !important; }
.a504-gate .a504-password-toggle { position: absolute !important; right: 4px !important; top: 4px !important; width: 42px !important; height: 41px !important; border-radius: 7px !important; cursor: pointer !important; display: grid !important; place-items: center !important; min-height: 0px !important; border: 0px !important; background: transparent !important; box-shadow: none !important; padding: 0px !important; font-size: 0px !important; color: rgb(111, 94, 100) !important; }
.a504-password-toggle::after { content: "" !important; width: 20px !important; height: 20px !important; background: currentcolor !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/g%3E%3C/svg%3E") center center / contain no-repeat !important; }
.a504-password-toggle[aria-pressed="true"] { color: rgb(191, 33, 54) !important; background: rgba(191, 33, 54, 0.043) !important; }
:is(#login-screen, #cloud504-login).a504-gate form label { font-size: 12px !important; }
:is(#login-screen, #cloud504-login).a504-gate form > small { font-size: 11px !important; }
.a504-panel { background-image: radial-gradient(at 100% 0px, rgba(255, 232, 226, 0.54), transparent 50%), initial; background-position-x: initial, initial; background-position-y: initial, initial; background-size: initial, initial; background-repeat: initial, initial; background-attachment: initial, initial; background-origin: initial, initial; background-clip: initial, initial; background-color: rgb(250, 248, 247) !important; }
.a504-panel::before { content: "ID" !important; position: absolute !important; z-index: -1 !important; right: 0px !important; bottom: 45px !important; font: 850 clamp(170px, 20vw, 310px) / 1 "Segoe UI", sans-serif !important; letter-spacing: -0.09em !important; color: rgba(187, 32, 48, 0.03) !important; pointer-events: none !important; }
.a504-panel::after { content: "" !important; position: absolute !important; z-index: -1 !important; inset: 0px !important; background-image: radial-gradient(at 80% 20%, rgba(255, 120, 63, 0.07), transparent 53%), radial-gradient(at 5% 80%, rgba(209, 34, 53, 0.063), transparent 55%) !important; background-position-x: initial, initial; background-position-y: initial, initial; background-size: initial, initial; background-repeat: initial, initial; background-attachment: initial, initial; background-origin: initial, initial; background-clip: initial, initial; background-color: initial !important; pointer-events: none !important; }
.a504-access-tag { padding: 8px 12px !important; border: 1px solid rgb(231, 216, 217) !important; border-radius: 30px !important; background: rgba(255, 255, 255, 0.65) !important; color: rgb(140, 42, 57) !important; }
:is(#login-screen, #cloud504-login).a504-gate form { position: relative !important; }
:is(#login-screen, #cloud504-login).a504-gate form::before { content: "" !important; position: absolute !important; left: 36px !important; right: 36px !important; top: -1px !important; height: 3px !important; border-radius: 0px 0px 4px 4px !important; background: linear-gradient(90deg, rgb(185, 30, 52), rgb(229, 56, 54) 70%, rgb(244, 120, 57)) !important; }
:is(#login-screen, #cloud504-login).a504-gate .a504-form-brand { align-items: center !important; gap: 10px !important; display: flex !important; }
:is(#login-screen, #cloud504-login).a504-gate .a504-form-brand::before { content: "" !important; width: 7px !important; height: 7px !important; border-radius: 2px !important; background: rgb(220, 45, 61) !important; box-shadow: rgba(220, 45, 61, 0.047) 0px 0px 0px 4px !important; }
.a504-intro h2 em { background: linear-gradient(100deg, rgb(255, 90, 95), rgb(255, 150, 87)) text !important; color: transparent !important; }
@media (max-width: 900px) {
  .a504-gate .a504-panel form { padding: 26px 23px !important; margin: 26px auto !important; }
  .a504-panel { padding: 23px 18px 22px !important; }
  .a504-panel::before { font-size: 190px !important; right: 0px !important; }
  .a504-panel-top { gap: 8px !important; }
  .a504-access-tag { padding: 7px 9px !important; font-size: 9px !important; }
  .a504-gate .a504-panel form::before { left: 23px !important; right: 23px !important; }
  .a504-panel-foot { padding-top: 16px !important; }
}
@media(prefers-reduced-motion:reduce){.a504-gate .a504-water svg,.a504-gate .a504-water div{animation:none!important}}
}

@layer access504{.a504-scene .a504-brand,.a504-scene .a504-brand>span{color:#fff!important}.a504-scene .a504-scene-bottom>span{color:inherit!important}}