/* The three effects are scoped to their own design. Existing five designs are untouched. */
#loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]){margin:0;max-width:none;min-height:100vh;min-height:100dvh;overflow-y:auto;container-type:normal;background:var(--ld-bg);color:var(--ld-ink)}
#loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]) .login-shell{position:relative;isolation:isolate;container-type:inline-size;max-width:1100px;min-height:0;margin:24px auto;border-radius:22px}
#loginPage .login-effects-layer{position:absolute;inset:0;z-index:0;pointer-events:none;isolation:isolate;overflow:hidden;border-radius:inherit}
#loginPage .login-effects-story{display:contents}
#loginPage .login-effects-extra{display:contents}
#loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]) .login-story{display:block;min-width:0;position:relative}
#loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]) .login-layout{max-width:none;min-width:0;margin:0;position:relative;z-index:1}
#loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]) .login-header,#loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]) .login-footer,#loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]) .preview-notice{position:relative;z-index:2}
#loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]) .login-container{min-width:0;width:100%;max-width:none;margin:0}
#loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]) .logo-section{text-align:left;margin-bottom:20px}
#loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]) .form-group{margin-bottom:18px}
#loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]) .form-select{margin-bottom:0;min-height:49px;font-size:16px}
#loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]) .lang-btn{color:var(--ld-muted)!important;background:var(--ld-input)!important;min-height:42px}
#loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]) .lang-btn.active{color:var(--ld-accent-ink)!important;background:var(--ld-accent)!important}
#loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]) .time-display{align-items:center;font-size:11px;gap:10px;color:var(--ld-muted)}
#loginPage[data-login-effects][data-login-effects-playing="false"] .login-shell *,#loginPage[data-login-effects][data-login-effects-playing="false"] .login-shell *::before,#loginPage[data-login-effects][data-login-effects-playing="false"] .login-shell *::after{animation-play-state:paused!important}
#loginPage[data-login-effects][data-login-effects-playing="false"] .ha-form-shell{transform:none}
#loginPage[data-login-design="aurora"]{--ld-bg:#06131f;--ld-panel:#162c38;--ld-input:#0c202b;--ld-ink:#ecfff8;--ld-muted:#a3bec2;--ld-line:#395c66;--ld-accent:#91f9d0;--ld-accent-ink:#083c33;--ld-error:#ffbec3;color-scheme:dark}
#loginPage[data-login-design="aurora"] .login-layout{grid-template-columns:minmax(0,1fr) minmax(0,374px)}
#loginPage[data-login-design="aurora"] .login-story{display:flex}
#loginPage[data-login-design="aurora"] .logo-icon{display:none}
#loginPage[data-login-design="aurora"] .login-box{border:0;border-radius:24px;background:transparent;box-shadow:none}
#loginPage[data-login-design="aurora"] .login-btn{background-color:var(--ld-accent)!important;background-image:linear-gradient(115deg,#a7ffcf,#69ecd3 54%,#99e8f7)!important}
#loginPage[data-login-design="prism"]{--ld-bg:#f6f3fc;--ld-panel:#fff;--ld-input:#f7f5fb;--ld-ink:#393251;--ld-muted:#6d607d;--ld-line:#d2c8e0;--ld-accent:#755098;--ld-accent-ink:#fff;--ld-error:#9e3449;color-scheme:light}
#loginPage[data-login-design="prism"] .login-story{display:none}
#loginPage[data-login-design="prism"] .login-layout{display:grid;grid-template-columns:minmax(0,1fr);padding:25px 30px 45px}
#loginPage[data-login-design="prism"] .login-container{max-width:380px;margin:auto;overflow:visible}
#loginPage[data-login-design="prism"] .logo-section{text-align:center}
#loginPage[data-login-design="prism"] .logo-icon{font-size:0;margin:0 auto 18px}
#loginPage[data-login-design="prism"] .logo-icon:before{content:'H';font-size:26px;line-height:1;color:#72509b}
#loginPage[data-login-design="prism"] .login-box{background:#fff}
#loginPage[data-login-design="prism"] .login-btn{background:var(--ld-accent)!important;color:#fff!important}
#loginPage[data-login-design="prism"] .hp-light-track{margin-top:-3px;margin-bottom:14px}
#loginPage[data-login-design="luminous"]{--ld-bg:#101225;--ld-panel:#252033;--ld-input:#131527;--ld-ink:#fff1dd;--ld-muted:#c5b8cb;--ld-line:#66536b;--ld-accent:#f6cb8c;--ld-accent-ink:#392a22;--ld-error:#ffbdc4;color-scheme:dark}
#loginPage[data-login-design="luminous"] .login-story{min-height:562px}
#loginPage[data-login-design="luminous"] .logo-section{text-align:left}
#loginPage[data-login-design="luminous"] .logo-icon{display:none}
#loginPage[data-login-design="luminous"] .login-box{background:linear-gradient(158deg,#2a2337,#18192d 55%,#252132)}
#loginPage[data-login-design="luminous"] .lang-toggle{display:grid;border-radius:10px}
#loginPage[data-login-design="luminous"] .lang-btn{border-radius:7px}
#loginPage[data-login-design="luminous"] .form-select{font-size:16px}
#loginPage[data-login-design="luminous"] .pin-container{padding:0;border:0;margin:0;min-width:0}
@media(max-width:760px){
 #loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]) .login-shell{margin:0;border-radius:0;border-left:0;border-right:0}
 #loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]) .login-header{padding:17px 20px;gap:10px}
 #loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]) .time-display{gap:6px;font-size:10px}
 #loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]) .time-display .time{display:none}
 #loginPage[data-login-design="aurora"] .login-layout{grid-template-columns:1fr}
 #loginPage[data-login-design="aurora"] .login-story{display:grid}
 #loginPage[data-login-design="aurora"] .login-container{max-width:400px;margin:auto}
 #loginPage[data-login-design="luminous"] .login-layout{display:flex;flex-direction:column;gap:0;padding:0 22px 25px}
 #loginPage[data-login-design="luminous"] .login-story{width:100%;min-height:310px}
 #loginPage[data-login-design="luminous"] .login-container{max-width:410px;margin:auto}
 #loginPage[data-login-design="luminous"] .hf-world{inset:0 -22px -15px;width:calc(100% + 44px);height:calc(100% + 15px)}
 #loginPage[data-login-design="luminous"] .hf-copy h2{font-size:32px}
}
@media(prefers-reduced-motion:reduce){#loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]) *,#loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]) *::before,#loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]) *::after{animation:none!important;transition:none!important}}

@media(max-width:760px){#loginPage[data-login-design="luminous"] .hf-copy p{display:none}}

/* PC 에서는 그림이 화면을 꽉 채운다.
   좁은 창에 갇혀 좌우에 빈 여백만 남던 것을 없앤다. 로그인 상자는 제 폭을 지킨다.
   모바일에서 이미 쓰는 '가장자리까지 붙이기' 를 큰 쪽에도 그대로 적용한다. */
@media(min-width:761px) {
  #loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]) .login-shell {
    max-width:none; margin:0; border-radius:0; border-left:0; border-right:0;
    min-height:100vh; min-height:100dvh;
  }
  /* 칸이 넓어져도 로그인 입력은 읽기 좋은 폭을 지킨다 */
  #loginPage[data-login-design="luminous"] .login-container { max-width:460px; margin:0 auto; }

  /* 본문이 남는 높이를 채운다 (그러지 않으면 아래가 크게 빈다) */
  #loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]) .login-shell { display:flex; flex-direction:column; }
  #loginPage:is([data-login-design="aurora"],[data-login-design="prism"],[data-login-design="luminous"]) .login-layout { flex:1 1 auto; min-height:0; }
}