/* Claude-Design auth surfaces (seller /signin and admin /admin/signin): scoped CSS (#authRoot) for inputs, the gradient CTA, the password eye, the custom language dropdown, animations and the responsive collapse of the brand panel. Loaded as a STATIC stylesheet from App.razor (not via ) so it is present in the very first server response and survives Blazor enhanced navigation — otherwise the page rendered unstyled until a hard refresh. All selectors are auth-only (#authRoot / .ec-*) so loading it app-wide is inert on the dashboard. */ #authRoot *{box-sizing:border-box} #authRoot input::placeholder{color:#aab4c4;font-weight:500} @keyframes ecAuroraA{0%{transform:translate(0,0) scale(1)}50%{transform:translate(36px,-28px) scale(1.16)}100%{transform:translate(0,0) scale(1)}} @keyframes ecAuroraB{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-46px,30px) scale(1.22)}100%{transform:translate(0,0) scale(1)}} @keyframes ecGridPan{0%{background-position:0 0}100%{background-position:46px 46px}} @keyframes ecPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}} @keyframes ecSheen{0%{transform:skewX(-20deg) translateX(-170%)}55%,100%{transform:skewX(-20deg) translateX(430%)}} .ec-input{width:100%;height:52px;border:1.5px solid #e4e7ee;border-radius:12px;background:#fff;padding:0 16px;font:500 15px Manrope;color:#0e1b2e;outline:none;transition:border-color .18s,box-shadow .18s} .ec-input:focus{border-color:#2d5be6;box-shadow:0 0 0 4px rgba(45,91,230,.13)} .ec-input.pr{padding-right:44px} .ec-input.pr-lg{padding-right:46px} .ec-eye{position:absolute;right:8px;top:8px;width:36px;height:36px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#8a98ac;border-radius:8px;transition:color .15s} .ec-eye:hover{color:#2d5be6} .ec-cta{position:relative;overflow:hidden;width:100%;height:54px;border:none;border-radius:12px;background:linear-gradient(180deg,#3563e8,#2348c8);color:#fff;font:700 15px Manrope;cursor:pointer;box-shadow:0 12px 26px -10px rgba(45,91,230,.65);transition:transform .15s,box-shadow .2s,filter .2s;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:6px} .ec-cta:hover{transform:translateY(-2px);box-shadow:0 18px 32px -10px rgba(45,91,230,.72);filter:brightness(1.06)} .ec-cta:active{transform:translateY(0)} .ec-cta:disabled{opacity:.6;cursor:default;transform:none} .ec-cta::before{content:'';position:absolute;top:0;left:0;width:42%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg) translateX(-170%);animation:ecSheen 4.5s ease-in-out infinite;pointer-events:none} .ec-staff:hover{color:#2d5be6!important} /* Custom (non-native) language dropdown — full control over the open list so flags stay large and legible on every platform. */ .ec-lang-dd{position:relative;display:inline-block} .ec-lang-trigger{display:flex;align-items:center;gap:8px;border:1px solid #e2e6ee;border-radius:9px;background:#fff;font-family:Manrope;font-weight:600;font-size:14px;color:#5c6b82;padding:9px 12px;cursor:pointer;min-width:158px} .ec-lang-trigger:hover{border-color:#cfd6e4} .ec-lang-trigger:focus-visible{outline:none;border-color:#2d5be6;box-shadow:0 0 0 4px rgba(45,91,230,.13)} .ec-lang-flag{font-size:22px;line-height:1} .ec-lang-name{flex:1;text-align:left;white-space:nowrap} .ec-lang-chev{width:16px;height:16px;color:#9aa6b8;flex:none} .ec-lang-backdrop{position:fixed;inset:0;z-index:40;background:transparent;border:none} .ec-lang-list{position:absolute;right:0;top:calc(100% + 6px);z-index:50;margin:0;padding:6px;list-style:none;width:212px;max-height:328px;overflow:auto;background:#fff;border:1px solid #e2e6ee;border-radius:12px;box-shadow:0 18px 42px -12px rgba(16,32,60,.32)} .ec-lang-opt{display:flex;align-items:center;gap:12px;width:100%;border:none;background:transparent;border-radius:8px;padding:9px 10px;font-family:Manrope;font-size:14.5px;font-weight:500;color:#0e1b2e;cursor:pointer;text-align:left} .ec-lang-opt:hover{background:#f3f5fa} .ec-lang-opt.is-current{background:#eef2fd;font-weight:700} .ec-lang-opt-flag{font-size:24px;line-height:1;flex:none} .ec-lang-opt-name{flex:1} .ec-lang-check{width:16px;height:16px;color:#2d5be6;flex:none} /* Desktop trigger shows the native name; the flag is mobile-only. */ .ec-lang-flag{display:none} @media (max-width:860px){ #authRoot{flex-direction:column!important;height:auto!important;min-height:100vh!important;overflow:visible!important} #brandPanel{order:0!important;flex:none!important;min-height:0!important;height:auto!important;padding:32px 26px!important;justify-content:center!important} #brandHead,#brandDesc,#brandStats,#brandBadge{display:none!important} #brandPanel h2{font-size:26px!important;max-width:none!important;margin:0!important} #formCol{order:1!important;flex:none!important;width:100%!important;padding:36px 24px 48px!important} /* Mobile: trigger collapses to a single flag; the open list keeps big flags. */ .ec-lang-name{display:none} .ec-lang-flag{display:inline-block} .ec-lang-trigger{min-width:0;gap:7px;padding:9px 11px} .ec-lang-list{width:224px} .ec-lang-opt{padding:11px 12px;font-size:16px} .ec-lang-opt-flag{font-size:27px} } @media (max-width:430px){ #brandPanel{padding:26px 22px!important} #brandPanel h2{font-size:22px!important} #formCol{padding:30px 20px 40px!important} }