/* A small login card leaves the selected artwork in view. */
#loginOverlay.login-crystal{
    align-items:flex-start;
    padding:clamp(76px,9vh,108px) clamp(24px,4vw,80px) 42px;
}
#loginOverlay.login-crystal .login-container{
    width:350px;min-height:0;padding:26px 25px 23px;border-radius:24px;
    box-shadow:inset 0 1px 1px #ffffff38,0 18px 50px var(--lp-shadow,#08121c44);
}
#loginOverlay.login-crystal .login-container:before{width:72px;height:48px;border-radius:24px 0 0 0}
#loginOverlay.login-crystal .login-container:after{width:72px;height:48px;border-radius:0 0 24px 0}
#loginOverlay.login-crystal .login-header{
    display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:12px;row-gap:3px;
    align-items:center;text-align:left;margin-bottom:25px;
}
#loginOverlay.login-crystal .login-logo-circle{
    grid-row:1/3;width:46px;height:46px;margin:0;border-radius:16px;
    transform:rotate(-6deg);
}
#loginOverlay.login-crystal .crystal-emblem{width:27px;height:30px;transform:rotate(6deg)}
#loginOverlay.login-crystal .login-header h2{
    font-family:inherit;font-size:20px;font-weight:750;line-height:1.35;letter-spacing:-.8px;margin:0;
}
#loginOverlay.login-crystal .login-header p{
    font-family:inherit;font-size:11px;line-height:1.5;letter-spacing:.1px;margin:0;
}
#loginOverlay.login-crystal .login-container .form-group{margin-bottom:15px}
#loginOverlay.login-crystal .login-container .form-group label{font-size:12px;line-height:1.5;margin-bottom:6px}
#loginOverlay.login-crystal .login-container .form-group input{
    height:44px;padding:10px 12px;font-size:13px;border-radius:12px;
}
#loginOverlay.login-crystal .login-container #loginPw{padding-right:43px}
#loginOverlay.login-crystal #togglePassword{right:12px;font-size:15px;padding:8px;cursor:pointer}
#loginOverlay.login-crystal .remember-id-row{margin:2px 0 19px}
#loginOverlay.login-crystal .remember-id-label{font-size:11px;gap:7px;min-height:20px}
#loginOverlay.login-crystal .remember-id-label input[type=checkbox]{width:16px;height:16px}
#loginOverlay.login-crystal .login-container .btn-premium{
    min-height:44px;padding:10px 14px;font-size:13px;line-height:1.5;border-radius:13px;
}
#loginOverlay.login-crystal #btnLogin:after{font-size:19px;margin-left:3px}
#loginOverlay.login-crystal .login-options{margin-top:18px!important;gap:9px;min-height:20px}
#loginOverlay.login-crystal .login-options a{font-size:10px!important;line-height:1.6}
#loginOverlay.login-crystal :is(#forgotPanel,#resetPanel){margin-top:0!important}
#loginOverlay.login-crystal :is(#forgotPanel,#resetPanel) h3{font-size:14px!important;line-height:1.5}
#loginOverlay.login-crystal #btnBackToLogin{font-size:11px!important}
@media(max-width:780px){
    #loginOverlay.login-crystal{padding:104px 22px 34px;align-items:flex-end;gap:0}
    #loginOverlay.login-crystal .login-container{order:1;width:350px;flex-shrink:0}
    #loginOverlay.login-crystal .crystal-copy{
        order:2;align-self:flex-start;max-width:100%;width:auto;margin:38px 0 0;
    }
    #loginOverlay.login-crystal .crystal-copy h1{font-size:29px}
    #loginOverlay.login-crystal .crystal-copy p{font-size:11px}
    #loginOverlay.login-crystal .crystal-signature{order:3;align-self:center;margin-top:26px}
    #loginOverlay.login-crystal .login-container .form-group input{font-size:16px}
}
@media(max-width:380px){
    #loginOverlay.login-crystal{padding-left:16px;padding-right:16px}
    #loginOverlay.login-crystal .login-container{padding:23px 20px 21px;border-radius:22px}
    #loginOverlay.login-crystal .login-header{grid-template-columns:40px minmax(0,1fr);column-gap:10px}
    #loginOverlay.login-crystal .login-logo-circle{width:40px;height:42px;border-radius:14px}
    #loginOverlay.login-crystal .login-header h2{font-size:18px}
    #loginOverlay.login-crystal .login-header p{font-size:10px}
}
@media(max-height:600px) and (min-width:781px){
    #loginOverlay.login-crystal{padding-top:60px;padding-bottom:28px}
}

/* Smooth satin metal face, polished nickel rim, recessed controls. */
#loginOverlay.login-crystal[data-login-palette] .login-container{
    border:2px solid transparent;
    background:
        linear-gradient(125deg,#52616b 0%,#354650 21%,#263842 47%,#283b45 68%,#43545e 100%) padding-box,
        linear-gradient(135deg,#f4f1e7 0%,#a2a9aa 12%,#525e67 27%,#d2d3cd 44%,#78848b 59%,#35434c 74%,#b5bdbf 90%,#f2e8d6 100%) border-box;
    background-color:#263640;
    box-shadow:inset 0 1px 0 #ffffff6b,inset 0 -2px 2px #07121aa3,
        0 2px 0 #0c1721c9,0 14px 28px #06111b66,0 25px 65px var(--lp-shadow,#08121c55);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
#loginOverlay.login-crystal[data-login-palette] .login-container:before{
    inset:4px;width:auto;height:auto;border:1px solid #dbe3e526;border-radius:18px;
    background:none;mask-image:none;filter:none;z-index:0;
    box-shadow:inset 0 1px 0 #ffffff10,inset 0 -1px 0 #00000035;
}
#loginOverlay.login-crystal[data-login-palette] .login-container:after{
    top:7px;left:24px;right:24px;bottom:auto;width:auto;height:1px;border:0;border-radius:50%;
    background:linear-gradient(90deg,transparent,#fff5dbbb 26%,#f6f6ee3d 65%,transparent);
    mask-image:none;filter:none;z-index:0;
}
#loginOverlay.login-crystal[data-login-palette] .login-logo-circle{
    color:#273640;border:1px solid #eee7d4;
    background:linear-gradient(135deg,#f9f3e3 0%,#c4c9c6 27%,#eff0e6 45%,#a8b4b8 76%,#dedbd0 100%);
    box-shadow:inset 0 1px 1px #fff,inset 0 -2px 2px #5969768c,0 3px 5px #0005;
}
#loginOverlay.login-crystal[data-login-palette] .login-header h2{text-shadow:0 1px 1px #0008}
#loginOverlay.login-crystal[data-login-palette] .login-container .form-group input{
    background:linear-gradient(180deg,#0b1823e8,#14242ee8);
    border-color:#111f2b;border-bottom-color:#80909a99;
    box-shadow:inset 0 2px 4px #0006,0 1px 0 #d8e2e31f;
}
#loginOverlay.login-crystal[data-login-palette] .login-container .btn-premium{
    border:1px solid #e5e1d3;color:#26333d;
    background:linear-gradient(115deg,#f0eadc 0%,#d0cdc3 23%,#f3efe3 47%,#c7c8c2 75%,#e1dfd3 100%);
    background-color:#d9d6cd;
    box-shadow:inset 0 1px 0 #fffffff2,inset 0 -2px 1px #7c85878c,0 3px 6px #07131d66;
    text-shadow:0 1px 0 #fff8;
}
#loginOverlay.login-crystal[data-login-palette=light] .login-container{
    background:
        linear-gradient(125deg,#fafbf7 0%,#e3e8e5 25%,#d1dad8 49%,#e0e6e2 73%,#c5d0cf 100%) padding-box,
        linear-gradient(135deg,#fffef3,#8c9a9e 23%,#fffbed 44%,#8f9b9f 72%,#fff9e9) border-box;
    background-color:#d0d7d5;
    box-shadow:inset 0 1px 0 #fff,inset 0 -2px 2px #65747b66,0 2px 0 #78858b88,0 16px 40px var(--lp-shadow);
}
#loginOverlay.login-crystal[data-login-palette=light] .login-container:before{border-color:#ffffff9e}
#loginOverlay.login-crystal[data-login-palette=light]{--lp-muted:#48525b;--lp-placeholder:#48525b}
#loginOverlay.login-crystal[data-login-palette=light] .login-header h2{text-shadow:0 1px 0 #fffd}
#loginOverlay.login-crystal[data-login-palette=light] .login-container .form-group input{
    background:linear-gradient(#c5cece80,#f4f5f0d9);border-color:#9aa8aa;border-bottom-color:#fffef0;
    box-shadow:inset 0 2px 4px #53697130,0 1px 0 #ffffffa6;
}
#loginOverlay.login-crystal[data-login-palette=light] .login-container .btn-premium{
    color:#fffdf3;border-color:#65757b;background:linear-gradient(115deg,#5b6d76,#293d47 38%,#536772 73%,#354a54);
    background-color:#354a54;
    box-shadow:inset 0 1px 0 #c6d3d59e,inset 0 -2px 1px #132b36b3,0 3px 6px #3047513d;text-shadow:0 1px 0 #0008;
}

/* Compact horizontal form: a short label and a half-width field. */
#loginOverlay.login-crystal .login-container{width:282px;padding:22px 20px 19px}
#loginOverlay.login-crystal .login-header{grid-template-columns:36px minmax(0,1fr);column-gap:10px;margin-bottom:23px}
#loginOverlay.login-crystal .login-logo-circle{width:36px;height:39px;border-radius:13px}
#loginOverlay.login-crystal .crystal-emblem{width:23px;height:27px}
#loginOverlay.login-crystal .login-header h2{font-size:17px;letter-spacing:-.7px}
#loginOverlay.login-crystal .login-header p{font-size:9px;letter-spacing:0}
#loginOverlay.login-crystal .login-form .form-group{
    display:grid;grid-template-columns:66px 150px;gap:10px;align-items:center;
    margin:0 0 13px;
}
#loginOverlay.login-crystal .login-form .form-group label{margin:0;font-size:12px;white-space:nowrap}
#loginOverlay.login-crystal .login-form .form-group input{width:150px;height:38px;padding:8px 10px;font-size:12px;border-radius:10px}
#loginOverlay.login-crystal .login-form .input-with-icon{width:150px;min-width:0}
#loginOverlay.login-crystal .login-form #loginPw{padding-right:31px!important}
#loginOverlay.login-crystal #togglePassword{right:4px;padding:6px;font-size:13px}
#loginOverlay.login-crystal .remember-id-row{margin:2px 0 16px 76px}
#loginOverlay.login-crystal .remember-id-label{font-size:10px;gap:6px}
#loginOverlay.login-crystal .remember-id-label input[type=checkbox]{width:14px;height:14px}
#loginOverlay.login-crystal .login-form #btnLogin{width:150px;min-height:38px;margin-left:76px;padding:7px 10px;font-size:12px;border-radius:11px;gap:5px}
#loginOverlay.login-crystal .login-options{margin-top:16px!important;gap:7px}
#loginOverlay.login-crystal .login-options a{font-size:9px!important}
@media(max-width:780px){
    #loginOverlay.login-crystal .login-container{width:282px}
    #loginOverlay.login-crystal .login-form .form-group input{font-size:16px}
}
@media(max-width:380px){
    #loginOverlay.login-crystal .login-container{padding:22px 20px 19px}
    #loginOverlay.login-crystal .login-header{grid-template-columns:36px minmax(0,1fr)}
    #loginOverlay.login-crystal .login-header h2{font-size:17px}
}

/* Transparent body: retain only the metal rim and the individual controls. */
#loginOverlay.login-crystal[data-login-palette] .login-container{
    background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
    border-color:#acb8be;border-top-color:#eeeee4;border-left-color:#d8dddc;border-bottom-color:#7b8a93;
    box-shadow:inset 0 1px 0 #ffffff5c,inset 0 -1px 0 #152c3b59,0 10px 28px #07121c26;
}

/* Plain inset fields, including focus and browser autofill states. */
#loginOverlay.login-crystal[data-login-palette] .login-container .form-group input,
#loginOverlay.login-crystal[data-login-palette] .login-container .form-group input:focus,
#loginOverlay.login-crystal[data-login-palette] .login-container .form-group input:focus-visible{
    border:0;box-shadow:none;outline:none;
}
#loginOverlay.login-crystal[data-login-palette] .login-container .form-group input:-webkit-autofill,
#loginOverlay.login-crystal[data-login-palette] .login-container .form-group input:-webkit-autofill:focus{
    border:0;box-shadow:none;outline:none;
}
/* A soft fill change keeps keyboard focus visible without drawing a line. */
#loginOverlay.login-crystal[data-login-palette] .login-container .form-group input:focus{background:#203640}
#loginOverlay.login-crystal[data-login-palette=light] .login-container .form-group input:focus{background:#edf1ed}

/* Prefer the quieter lower corner so welcome copy does not cover the artwork. */
@media(min-width:781px){
    #loginOverlay.login-crystal[data-login-copy-side=right] .crystal-copy{left:auto;right:5.1%;text-align:right}
}
@media(min-width:781px) and (max-width:1100px){
    #loginOverlay.login-crystal[data-login-copy-side=right] .crystal-copy{right:4%}
}

/* The administrator phrase gate hides only the card; artwork stays visible. */
#loginOverlay.login-crystal:is(.phrase-pending,.phrase-locked) .login-container{opacity:0;visibility:hidden;pointer-events:none}