/* Login is an isolated surface. Keep all selectors under #login-layer so the
   approved creator and administrator workspaces remain unchanged. */
#login-layer.login-layer{
  --login-purple:#6547e8;
  --login-purple-dark:#4f35ca;
  --login-cyan:#57d8d2;
  --login-ink:#211a38;
  --login-muted:#766f88;
  position:fixed;
  inset:0;
  z-index:120;
  display:grid!important;
  grid-template-rows:auto 1fr auto;
  min-height:100vh;
  padding:30px clamp(28px,4vw,72px) 22px;
  overflow:auto;
  color:var(--login-ink);
  background:
    radial-gradient(circle at 12% 86%,rgba(87,216,210,.17),transparent 30%),
    radial-gradient(circle at 88% 8%,rgba(127,99,244,.16),transparent 32%),
    #f7f6fb;
}
#login-layer[hidden]{display:none!important}
#login-layer::before,#login-layer::after{content:"";position:fixed;pointer-events:none;border:1px solid rgba(101,71,232,.1);border-radius:50%}
#login-layer::before{width:460px;height:460px;right:-250px;top:-230px}
#login-layer::after{width:310px;height:310px;left:-190px;bottom:-170px}
#login-layer .login-brand{position:static;display:flex;align-items:center;gap:11px;color:var(--login-ink);font-size:inherit}
#login-layer .login-brand>b{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--login-purple),#8069f3 58%,var(--login-cyan));box-shadow:0 10px 24px rgba(101,71,232,.2);font-size:14px;letter-spacing:-.5px}
#login-layer .login-brand>span{display:grid;gap:1px}
#login-layer .login-brand strong{font-size:16px;letter-spacing:.2px}
#login-layer .login-brand small{color:var(--login-muted);font-size:11px;letter-spacing:.12em}
#login-layer .login-shell{width:min(1120px,100%);margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:clamp(48px,8vw,112px);align-items:center;padding:44px 0}
#login-layer .login-intro{display:grid;gap:38px;max-width:520px}
#login-layer .login-intro-kicker{display:inline-flex;align-items:center;gap:8px;width:max-content;padding:7px 11px;border:1px solid rgba(101,71,232,.14);border-radius:999px;color:var(--login-purple-dark);background:rgba(255,255,255,.72);font-size:11px;font-weight:750}
#login-layer .login-intro-kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--login-cyan);box-shadow:0 0 0 4px rgba(87,216,210,.16)}
#login-layer .login-intro h2{margin:17px 0 16px;font-size:clamp(37px,4vw,56px);line-height:1.12;letter-spacing:-.045em;color:#241b42}
#login-layer .login-intro>div>p{max-width:480px;margin:0;color:var(--login-muted);font-size:15px;line-height:1.8}
#login-layer .login-value-list{display:grid;gap:22px;margin:0;padding:0;list-style:none}
#login-layer .login-value-list li{display:flex;align-items:center;gap:15px}
#login-layer .login-value-list i{display:grid;place-items:center;flex:0 0 38px;height:38px;border:1px solid rgba(101,71,232,.13);border-radius:11px;color:var(--login-purple);background:rgba(255,255,255,.78);font-size:10px;font-style:normal;font-weight:800;box-shadow:0 7px 20px rgba(53,39,105,.05)}
#login-layer .login-value-list span{display:grid;gap:4px}
#login-layer .login-value-list b{font-size:13px}
#login-layer .login-value-list small{color:var(--login-muted);font-size:12px}
#login-layer .login-security-note{display:flex;align-items:center;gap:8px;margin:0;color:#6c6680;font-size:11px}
#login-layer .login-security-note span{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;color:#238b87;background:#dff7f4;font-size:10px;font-weight:900}
#login-layer .login-panel{align-self:center}
#login-layer .login-portals{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
#login-layer .login-portals a{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;padding:12px 13px;border:1px solid #e6e2ee;border-radius:12px;color:#5f586e;background:rgba(255,255,255,.64);text-decoration:none;transition:border-color .18s,background .18s,transform .18s,box-shadow .18s}
#login-layer .login-portals a:hover{border-color:#cbc1f3;background:#fff;transform:translateY(-1px)}
#login-layer .login-portals a>span{grid-row:1/-1;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#efecfa;color:#6d54d9;font-size:13px}
#login-layer .login-portals a b{font-size:12px}
#login-layer .login-portals a small{margin-top:2px;color:#9992a7;font-size:9px;white-space:nowrap}
#login-layer .login-portals a[aria-current="page"]{border-color:rgba(101,71,232,.42);color:#3e2e86;background:#f1edff;box-shadow:0 7px 20px rgba(84,59,184,.09)}
#login-layer .login-portals a[aria-current="page"]>span{color:#fff;background:linear-gradient(135deg,var(--login-purple),#7f67ef)}
#login-layer .login-card{width:100%;padding:34px 36px 30px;border:1px solid rgba(70,52,118,.1);border-radius:20px;color:var(--login-ink);background:rgba(255,255,255,.94);box-shadow:0 26px 70px rgba(51,38,91,.12);backdrop-filter:blur(16px)}
#login-layer .login-heading>span{display:block;margin-bottom:8px;color:var(--login-purple);font-size:10px;font-weight:850;letter-spacing:.12em}
#login-layer .login-heading h1{margin:0;font-size:25px;letter-spacing:-.025em}
#login-layer .login-heading p{margin:8px 0 24px;color:var(--login-muted);font-size:12px;line-height:1.6}
#login-layer .login-card>label,#login-layer .login-label-row label{display:block;margin:16px 0 7px;color:#514a60;font-size:11px;font-weight:750}
#login-layer .login-label-row{display:flex;align-items:center;justify-content:space-between}
#login-layer .login-label-row label{margin-bottom:7px}
#login-layer #forgot-password{border:0;padding:0;color:var(--login-purple);background:transparent;font-size:10px;font-weight:700}
#login-layer #forgot-password:hover{text-decoration:underline}
#login-layer .login-input-wrap{position:relative;display:flex;align-items:center}
#login-layer .login-input-wrap>span{position:absolute;left:13px;color:#9a92aa;font-size:10px;z-index:1}
#login-layer .login-input-wrap input{width:100%;height:46px;margin:0;padding:0 48px 0 38px;border:1px solid #ded9e8;border-radius:10px;outline:0;color:var(--login-ink);background:#fbfafd;font:inherit;font-size:12px;transition:border-color .18s,box-shadow .18s,background .18s}
#login-layer .login-input-wrap input::placeholder{color:#aaa3b3}
#login-layer .login-input-wrap input:hover{border-color:#c9c1d7;background:#fff}
#login-layer .login-input-wrap input:focus{border-color:var(--login-purple);background:#fff;box-shadow:0 0 0 3px rgba(101,71,232,.1)}
#login-layer .login-password-toggle{position:absolute;right:11px;border:0;padding:5px;color:#776f86;background:transparent;font-size:10px;font-weight:700}
#login-layer .login-password-toggle:hover{color:var(--login-purple)}
#login-layer .login-submit{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:46px;margin-top:22px;border:0;border-radius:10px;color:#fff;background:linear-gradient(105deg,var(--login-purple-dark),var(--login-purple) 58%,#7463e9);box-shadow:0 10px 22px rgba(86,59,200,.22);font-size:12px;font-weight:800;transition:transform .18s,box-shadow .18s,opacity .18s}
#login-layer .login-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 14px 26px rgba(86,59,200,.28)}
#login-layer .login-submit:disabled{cursor:wait;opacity:.72;box-shadow:none}
#login-layer .login-submit i{font-style:normal;font-size:15px;transition:transform .18s}
#login-layer .login-submit:hover:not(:disabled) i{transform:translateX(2px)}
#login-layer .login-card[data-login-state="busy"] .login-submit i{width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;font-size:0;animation:uu-login-spin .75s linear infinite}
#login-layer .login-error{display:flex;align-items:flex-start;gap:8px;margin:-10px 0 14px;padding:10px 11px;border:1px solid #f3c4cf;border-radius:9px;color:#9e2845;background:#fff1f4;font-size:11px;line-height:1.5}
#login-layer .login-error::before{content:"!";display:grid;place-items:center;flex:0 0 17px;height:17px;border-radius:50%;color:#fff;background:#c84463;font-size:10px;font-weight:900}
#login-layer .login-error[hidden]{display:none!important}
#login-layer .login-status{min-height:17px;margin:9px 0 0;color:#6f6780;text-align:center;font-size:10px}
#login-layer .login-card footer{display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid #eeeaf3;color:#736c80}
#login-layer .login-card footer>span:first-child{display:grid;place-items:center;flex:0 0 27px;height:27px;border-radius:8px;color:#278d89;background:#e5f8f6;font-size:9px}
#login-layer .login-card footer>span:last-child{display:grid;gap:3px}
#login-layer .login-card footer b{font-size:10px;color:#5d566a}
#login-layer .login-card footer small{font-size:9px;line-height:1.5}
#login-layer .login-footnote{align-self:end;margin:0;color:#9a94a4;text-align:center;font-size:10px}
@keyframes uu-login-spin{to{transform:rotate(360deg)}}
@media(max-width:900px){
  #login-layer.login-layer{padding:24px}
  #login-layer .login-shell{grid-template-columns:1fr;max-width:520px;gap:28px;padding:32px 0}
  #login-layer .login-intro{gap:20px}
  #login-layer .login-intro h2{font-size:36px}
  #login-layer .login-value-list{display:none}
}
@media(max-width:560px){
  #login-layer.login-layer{padding:20px 16px 16px}
  #login-layer .login-brand{margin-left:5px}
  #login-layer .login-shell{padding:24px 0;gap:22px}
  #login-layer .login-intro h2{font-size:30px}
  #login-layer .login-intro>div>p,#login-layer .login-security-note{display:none}
  #login-layer .login-card{padding:28px 22px 24px;border-radius:16px}
  #login-layer .login-portals a{grid-template-columns:24px 1fr;padding:10px 9px}
  #login-layer .login-portals a>span{width:24px;height:24px}
  #login-layer .login-portals a small{display:none}
  #login-layer .login-footnote{display:none}
}
@media(prefers-reduced-motion:reduce){#login-layer *{scroll-behavior:auto!important;transition:none!important}}

/* Final selected direction: the responsive UU companion on one continuous
   black-to-blue canvas. These selectors intentionally remain login-scoped. */
#login-layer.login-layer{
  --login-purple:#526cff;
  --login-purple-dark:#3157d9;
  --login-cyan:#2ed1df;
  --login-ink:#f4f9ff;
  --login-muted:#91abc0;
  grid-template-rows:auto 1fr;
  place-items:stretch;
  padding:28px clamp(28px,4vw,72px);
  color:var(--login-ink);
  background:
    radial-gradient(circle at 20% 18%,rgba(75,92,255,.24),transparent 31%),
    radial-gradient(circle at 78% 72%,rgba(23,172,225,.22),transparent 38%),
    linear-gradient(118deg,#03050c 0%,#071225 37%,#0a2948 65%,#105f89 100%);
}
#login-layer::before{width:520px;height:520px;right:-260px;top:-270px;border-color:rgba(113,207,244,.12)}
#login-layer::after{width:360px;height:360px;left:-220px;bottom:-210px;border-color:rgba(82,108,255,.13)}
#login-layer .login-brand{color:#f5faff}
#login-layer .login-brand{width:100%;height:auto!important;border:0;justify-content:flex-start!important}
#login-layer .login-brand small{color:#86a5bd}
#login-layer .login-shell{width:min(1180px,100%);grid-template-columns:minmax(0,1fr) 470px;gap:clamp(54px,8vw,120px);padding:30px 0 20px}
#login-layer .login-intro{display:grid;grid-template-rows:1fr auto;align-self:stretch;gap:8px;max-width:none;min-height:650px}
#login-layer .login-mascot-stage{position:relative;display:grid;place-items:center;width:min(480px,100%);height:450px;margin:auto;transform:translate(calc(var(--login-pointer-x,0)*12px),calc(var(--login-pointer-y,0)*8px));transition:transform .2s ease-out}
#login-layer .login-mascot-stage::before{content:"";position:absolute;width:430px;height:430px;border:1px solid rgba(82,151,234,.13);border-radius:50%;box-shadow:0 0 110px rgba(26,112,208,.11),inset 0 0 90px rgba(59,109,236,.05)}
#login-layer .login-mascot-shadow{position:absolute;bottom:56px;width:210px;height:38px;border-radius:50%;background:rgba(0,5,17,.56);filter:blur(16px)}
#login-layer .login-mascot{position:relative;width:220px;height:220px;border-radius:48% 52% 46% 54% / 55% 48% 52% 45%;background:linear-gradient(145deg,#5e78ff,#355adc 54%,#22abd4);box-shadow:inset 18px 16px 32px rgba(255,255,255,.18),0 34px 76px rgba(0,88,180,.38);animation:uu-companion-float 3.5s ease-in-out infinite;transition:transform .42s cubic-bezier(.2,.8,.2,1)}
#login-layer .login-mascot::before{content:"";position:absolute;inset:17px;border:1px solid rgba(255,255,255,.2);border-radius:inherit}
#login-layer .login-mascot-eyes{position:absolute;left:50%;top:70px;display:flex;gap:39px;transform:translateX(-50%)}
#login-layer .login-mascot-eyes i{position:relative;width:27px;height:34px;border-radius:50%;background:#fff;box-shadow:inset 0 -3px 0 rgba(34,49,106,.1)}
#login-layer .login-mascot-eyes i::after{content:"";position:absolute;left:9px;top:11px;width:10px;height:13px;border-radius:50%;background:#101a36;transform:translate(calc(var(--login-pointer-x,0)*5px),calc(var(--login-pointer-y,0)*4px));transition:.15s}
#login-layer .login-mascot-mouth{position:absolute;left:50%;top:129px;width:35px;height:17px;border-bottom:4px solid rgba(13,29,67,.72);border-radius:0 0 50% 50%;transform:translateX(-50%);transition:.25s}
#login-layer .login-mascot-hand{position:absolute;top:118px;width:60px;height:46px;border-radius:50%;background:#4264df;transition:.42s cubic-bezier(.2,.8,.2,1)}
#login-layer .login-mascot-hand.left{left:-29px;transform:rotate(30deg)}
#login-layer .login-mascot-hand.right{right:-29px;transform:rotate(-30deg)}
#login-layer .login-mascot-accessory{position:absolute;right:-14px;top:-29px;width:94px;height:19px;border-radius:12px;background:#f5c547;box-shadow:0 8px 20px rgba(0,19,55,.28);transform:rotate(-35deg);transition:.45s}
#login-layer .login-mascot-accessory::after{content:"";position:absolute;right:-13px;border-left:18px solid #ee866f;border-top:9px solid transparent;border-bottom:10px solid transparent}
body[data-uu-portal="admin"] #login-layer .login-mascot-accessory{width:66px;height:66px;top:-31px;right:-18px;border:13px dotted #f0c758;border-radius:50%;background:#3157d9;transform:none}
body[data-uu-portal="admin"] #login-layer .login-mascot-accessory::after{display:none}
#login-layer[data-login-focus="account"] .login-mascot{transform:rotate(-3deg) scale(1.04)}
#login-layer[data-login-focus="password"] .login-mascot-hand.left{left:39px;top:72px;transform:rotate(-8deg)}
#login-layer[data-login-focus="password"] .login-mascot-hand.right{right:39px;top:72px;transform:rotate(8deg)}
#login-layer[data-login-focus="password"] .login-mascot-eyes i::after{opacity:0}
#login-layer .login-mascot-copy{align-self:end;padding:0 0 12px}
#login-layer .login-mascot-copy h2{margin:0;color:#f7fbff;font-size:clamp(34px,3.4vw,48px);line-height:1.08;letter-spacing:-.045em}
#login-layer .login-mascot-copy p{max-width:500px;margin:13px 0 0;color:#91adc2;font-size:13px;line-height:1.7}
#login-layer .login-panel{width:100%;padding:30px;border:1px solid rgba(147,209,241,.16);border-radius:24px;background:rgba(3,12,27,.43);box-shadow:0 30px 82px rgba(0,0,0,.25);backdrop-filter:blur(22px)}
#login-layer .login-portals{gap:7px;margin-bottom:27px;padding:4px;border:1px solid rgba(142,201,234,.15);border-radius:13px;background:rgba(1,8,20,.42)}
#login-layer .login-portals a{display:flex;justify-content:center;gap:8px;height:42px;padding:0 12px;border:0;border-radius:9px;color:#88a5ba;background:transparent}
#login-layer .login-portals a:hover{border:0;color:#eaf7ff;background:rgba(23,84,137,.35);transform:none}
#login-layer .login-portals a>span{grid-row:auto;width:22px;height:22px;border-radius:7px;color:#86b9dd;background:rgba(103,174,218,.1);font-size:10px}
#login-layer .login-portals a b{font-size:12px}
#login-layer .login-portals a small{display:none}
#login-layer .login-portals a[aria-current="page"]{border:0;color:#fff;background:linear-gradient(105deg,rgba(59,89,213,.72),rgba(19,122,183,.72));box-shadow:0 7px 20px rgba(0,0,0,.18)}
#login-layer .login-portals a[aria-current="page"]>span{background:linear-gradient(135deg,#526cff,#2baed4)}
#login-layer .login-card{padding:0;border:0;border-radius:0;color:#eef8ff;background:transparent;box-shadow:none;backdrop-filter:none}
#login-layer .login-heading>span{color:#6ed9ff}
#login-layer .login-heading h1{color:#f6fbff;font-size:28px}
#login-layer .login-heading p{color:#8fa9bd;font-size:12px}
#login-layer .login-card>label,#login-layer .login-label-row label{color:#cadce9;font-size:12px}
#login-layer #forgot-password{color:#76d5ff;font-size:12px}
#login-layer .login-input-wrap input{height:49px;padding:0 54px 0 15px;border-color:rgba(145,204,236,.2)!important;color:#f1f9ff!important;background:rgba(1,8,20,.48)!important;font-size:12px}
#login-layer .login-input-wrap input::placeholder{color:#71899d}
#login-layer .login-input-wrap input:hover{border-color:rgba(91,183,231,.5)!important;background:rgba(2,13,29,.62)!important}
#login-layer .login-input-wrap input:focus{border-color:#3daee7!important;background:rgba(2,15,33,.74)!important;box-shadow:0 0 0 3px rgba(56,171,226,.13)}
#login-layer .login-password-toggle{color:#9bdfff;font-size:12px}
#login-layer .login-password-toggle:hover{color:#fff}
#login-layer .login-submit.primary{height:49px;background:linear-gradient(105deg,#3157d9,#1688cd 58%,#28bfd1)!important;box-shadow:0 14px 30px rgba(3,111,179,.3)!important;font-size:12px}
#login-layer .login-status{color:#9ab4c7;font-size:11px}
#login-layer .login-error{border-color:rgba(255,126,151,.34);color:#ffd7df;background:rgba(111,20,49,.34)}
@keyframes uu-companion-float{50%{transform:translateY(-13px) rotate(2deg)}}
@media(max-width:900px){
  #login-layer.login-layer{padding:22px;background:radial-gradient(circle at 50% 22%,rgba(74,94,255,.23),transparent 32%),linear-gradient(155deg,#03050c,#08172c 48%,#105a83)}
  #login-layer .login-shell{grid-template-columns:1fr;max-width:520px;gap:18px;padding:20px 0 34px}
  #login-layer .login-intro{min-height:auto;gap:4px}
  #login-layer .login-mascot-stage{height:300px;transform:scale(.78)}
  #login-layer .login-mascot-copy{text-align:center;padding:0}
  #login-layer .login-mascot-copy h2{font-size:32px}
  #login-layer .login-mascot-copy p{margin:9px auto 0}
}
@media(max-width:560px){
  #login-layer.login-layer{padding:17px 14px 24px}
  #login-layer .login-shell{gap:14px;padding:12px 0 20px}
  #login-layer .login-mascot-stage{height:220px;transform:scale(.58);margin-top:-38px;margin-bottom:-38px}
  #login-layer .login-mascot-copy h2{font-size:26px}
  #login-layer .login-mascot-copy p{font-size:11px}
  #login-layer .login-panel{padding:22px 18px;border-radius:19px}
  #login-layer .login-portals{margin-bottom:21px}
  #login-layer .login-heading h1{font-size:24px}
}

/* Corrected scope: the mascot direction keeps the light reference treatment.
   Black-to-blue coloring belongs to the particle UU, not this page. */
#login-layer.login-layer{
  --login-purple:#6848ed;
  --login-purple-dark:#5534db;
  --login-cyan:#25bbd0;
  --login-ink:#211a38;
  --login-muted:#7f788e;
  color:var(--login-ink);
  background:
    radial-gradient(circle at 20% 42%,rgba(110,89,244,.12),transparent 34%),
    radial-gradient(circle at 52% 83%,rgba(51,199,211,.1),transparent 35%),
    linear-gradient(112deg,#f1efff 0%,#edf6ff 48%,#f7f8fc 72%,#faf8fd 100%);
}
#login-layer::before{border-color:rgba(104,72,237,.09)}
#login-layer::after{border-color:rgba(43,193,205,.1)}
#login-layer .login-brand{color:#211a38}
#login-layer .login-brand small{color:#80798e}
#login-layer .login-mascot-stage::before{border-color:rgba(104,72,237,.1);box-shadow:0 0 95px rgba(104,72,237,.07),inset 0 0 85px rgba(59,193,204,.04)}
#login-layer .login-mascot-shadow{background:rgba(70,46,142,.16)}
#login-layer .login-mascot{background:linear-gradient(145deg,#8669f7,#6143dd 56%,#46cdd3);box-shadow:inset 18px 16px 32px rgba(255,255,255,.18),0 32px 68px rgba(73,45,157,.25)}
#login-layer .login-mascot-eyes i::after{background:#241b43}
#login-layer .login-mascot-mouth{border-color:rgba(35,25,69,.7)}
#login-layer .login-mascot-hand{background:#7254e8}
body[data-uu-portal="admin"] #login-layer .login-mascot-accessory{background:#5b45cd}
#login-layer .login-mascot-copy h2{color:#241b42}
#login-layer .login-mascot-copy p{color:#766f87}
#login-layer .login-panel{padding:0 12px;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
#login-layer .login-portals{border-color:rgba(62,45,110,.12);background:rgba(238,235,246,.72)}
#login-layer .login-portals a{color:#7a7288}
#login-layer .login-portals a:hover{color:#4e3b9d;background:rgba(255,255,255,.72)}
#login-layer .login-portals a>span{color:#6d54d9;background:rgba(255,255,255,.7)}
#login-layer .login-portals a[aria-current="page"]{color:#3b2d83;background:#fff;box-shadow:0 6px 18px rgba(64,46,114,.1)}
#login-layer .login-portals a[aria-current="page"]>span{background:linear-gradient(135deg,#6848ed,#7963ef)}
#login-layer .login-card{color:#211a38}
#login-layer .login-heading>span{color:#6848ed}
#login-layer .login-heading h1{color:#211a38}
#login-layer .login-heading h1{margin-bottom:24px}
#login-layer .login-heading p{color:#80798f}
#login-layer .login-card>label,#login-layer .login-label-row label{color:#514a60}
#login-layer #forgot-password{color:#6848ed}
#login-layer .login-input-wrap input{border-color:#ded9e8!important;color:#211a38!important;background:rgba(255,255,255,.8)!important}
#login-layer .login-input-wrap input::placeholder{color:#aaa3b3}
#login-layer .login-input-wrap input:hover{border-color:#c9c1d7!important;background:#fff!important}
#login-layer .login-input-wrap input:focus{border-color:#6848ed!important;background:#fff!important;box-shadow:0 0 0 3px rgba(104,72,237,.1)}
#login-layer .login-password-toggle{color:#6d657b}
#login-layer .login-password-toggle:hover{color:#6848ed}
#login-layer .login-submit.primary{background:linear-gradient(105deg,#5534db,#6848ed 56%,#25bbd0)!important;box-shadow:0 13px 28px rgba(91,58,207,.24)!important}
#login-layer .login-status{color:#6f6780}
#login-layer .login-error{border-color:#f3c4cf;color:#9e2845;background:#fff1f4}
@media(max-width:900px){
  #login-layer.login-layer{background:radial-gradient(circle at 50% 24%,rgba(110,89,244,.14),transparent 34%),linear-gradient(155deg,#f1efff,#edf7ff 54%,#faf8fd)}
}

/* The reduced form still needs a deliberate visual container. */
#login-layer .login-panel{
  position:relative;
  width:min(500px,100%);
  padding:44px 42px 36px;
  overflow:hidden;
  border:1px solid rgba(79,57,144,.11);
  border-radius:25px;
  background:rgba(255,255,255,.62);
  box-shadow:0 28px 68px rgba(55,42,96,.11),inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter:blur(20px);
}
#login-layer .login-panel::before{content:"";position:absolute;left:42px;top:0;width:72px;height:4px;border-radius:0 0 5px 5px;background:linear-gradient(90deg,#6848ed,#25bbd0)}
#login-layer .login-panel::after{content:"";position:absolute;right:-90px;bottom:-110px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(48,197,210,.11),transparent 68%);pointer-events:none}
#login-layer .login-card{position:relative;z-index:1}
#login-layer .login-heading h1{margin-bottom:30px;font-size:30px;line-height:1.15}
#login-layer .login-card>label,#login-layer .login-label-row label{margin-top:18px;margin-bottom:8px;font-size:12px}
#login-layer .login-input-wrap input{height:52px;border-radius:12px!important;font-size:13px}
#login-layer .login-submit.primary{height:52px;margin-top:26px;border-radius:12px!important;font-size:13px}
#login-layer .login-status{min-height:20px;margin-top:11px}
@media(max-width:900px){
  #login-layer .login-panel{margin:auto;padding:36px 34px 29px}
  #login-layer .login-panel::before{left:34px}
}
@media(max-width:560px){
  #login-layer .login-panel{padding:29px 20px 22px;border-radius:20px}
  #login-layer .login-panel::before{left:20px;width:58px}
  #login-layer .login-heading h1{margin-bottom:23px;font-size:25px}
  #login-layer .login-input-wrap input,#login-layer .login-submit.primary{height:49px}
}

/* Shared refinement for both comparison layouts. */
#login-layer .login-password-toggle{right:10px;display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:9px}
#login-layer .login-password-toggle:hover{background:rgba(104,72,237,.07)}
#login-layer .login-eye-icon{width:20px;height:20px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#login-layer .login-eye-slash{opacity:0;transition:opacity .18s}
#login-layer .login-password-toggle[aria-pressed="true"] .login-eye-slash{opacity:1}

/* User direction: borderless, compact and deliberately narrow. */
#login-layer[data-login-layout="user"] .login-panel{width:min(430px,100%);padding:0 12px;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
#login-layer[data-login-layout="user"] .login-panel::before,#login-layer[data-login-layout="user"] .login-panel::after{display:none}
#login-layer[data-login-layout="user"] .login-card{width:100%;max-width:360px;margin:auto}
#login-layer[data-login-layout="user"] .login-heading h1{margin-bottom:28px;font-size:29px}
#login-layer[data-login-layout="user"] .login-input-wrap input{height:50px}
#login-layer[data-login-layout="user"] .login-submit.primary{height:50px;margin-top:24px}
@media(max-width:560px){
  #login-layer[data-login-layout="user"] .login-panel{padding:0 10px}
  #login-layer[data-login-layout="user"] .login-heading h1{font-size:25px}
}

/* Selected compact card: retain hierarchy, reduce visual weight. */
#login-layer[data-login-layout="codex"] .login-panel{width:min(440px,100%);padding:38px 42px 28px;transform:translateY(-26px)}
#login-layer[data-login-layout="codex"] .login-panel::before{left:42px;width:66px}
#login-layer[data-login-layout="codex"] .login-heading h1{margin-bottom:25px;font-size:28px}
#login-layer[data-login-layout="codex"] .login-card>label,#login-layer[data-login-layout="codex"] .login-label-row label{margin-top:15px;margin-bottom:7px}
#login-layer[data-login-layout="codex"] .login-input-wrap input{height:49px}
#login-layer[data-login-layout="codex"] .login-submit.primary{height:49px;margin-top:29px}
#login-layer[data-login-layout="codex"] .login-status{min-height:17px;margin-top:9px}
@media(max-width:560px){
  #login-layer[data-login-layout="codex"] .login-panel{padding:28px 24px 21px;transform:translateY(-8px)}
  #login-layer[data-login-layout="codex"] .login-panel::before{left:24px;width:56px}
  #login-layer[data-login-layout="codex"] .login-heading h1{font-size:25px}
}