/* Theme the system-message login form only inside the Lucent layout. */
.lucent .lucent-content:has(#access){
 background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
 padding:20px 16px;
}
.lucent #access{
 box-sizing:border-box;width:420px;max-width:100%;margin:20px auto;padding:28px;
 background:var(--glass-bg-strong);border:var(--lucent-border-width,1px) solid var(--glass-border);border-radius:var(--radius-lg,22px);
 box-shadow:var(--glass-shadow);color:var(--text);font:inherit;line-height:1.6;
}
.lucent #access *{box-sizing:border-box}
.lucent #access .login-header{margin:0 0 24px;padding:0;border:0}
.lucent #access .login-header h1{margin:0;padding:0;font-size:21px;line-height:1.5;font-weight:700;color:var(--text)}
.lucent #access .login-header .message{margin:12px 0 0;padding:0;border:0;background:transparent;color:var(--text-muted);font-size:13px}
.lucent #access .login-body{margin:0;padding:0;max-height:none}
.lucent #access :is(form,fieldset){margin:0;padding:0;border:0;min-width:0}
.lucent #access form{display:grid;gap:18px}
.lucent #access .control-group{display:grid;gap:12px;margin:0;padding:0;clear:both}
.lucent #access .control-group::before{display:none}
.lucent #access input:is([type=text],[type=email],[type=password]){
 display:block;width:100%;min-width:0;height:46px;margin:0;padding:11px 14px;
 border:1px solid color-mix(in srgb,var(--text) 18%,transparent);border-radius:11px;
 background:var(--bg-base);color:var(--text);font:inherit;font-size:14px;line-height:22px;box-shadow:none;outline:none;
}
.lucent #access input::placeholder{color:var(--text-muted);opacity:1}
.lucent #access input:is([type=text],[type=email],[type=password]):focus{
 border-color:var(--lucent-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--lucent-accent) 16%,transparent);
}
/* The autofill fill must survive focus/hover styles, including browser previews. */
.lucent #access{color-scheme:light}
.lucent[data-scheme="dark"] #access{color-scheme:dark}
@media(prefers-color-scheme:dark){.lucent[data-scheme="auto"] #access{color-scheme:dark}}
.lucent #access input:is([type=text],[type=email],[type=password]):is(:autofill,:-webkit-autofill){
 color:var(--text);-webkit-text-fill-color:var(--text);caret-color:var(--text);
 -webkit-box-shadow:0 0 0 1000px var(--bg-base) inset;
 box-shadow:0 0 0 1000px var(--bg-base) inset;
}
.lucent #access input:is([type=text],[type=email],[type=password]):is(:autofill,:-webkit-autofill):focus{
 border-color:var(--lucent-accent);
 -webkit-box-shadow:0 0 0 1000px var(--bg-base) inset,0 0 0 3px color-mix(in srgb,var(--lucent-accent) 16%,transparent);
 box-shadow:0 0 0 1000px var(--bg-base) inset,0 0 0 3px color-mix(in srgb,var(--lucent-accent) 16%,transparent);
}
.lucent #access label{display:inline-flex;align-items:center;gap:8px;margin:2px 0 0;color:var(--text-muted);font:inherit;font-size:13px;cursor:pointer}
.lucent #access input[type=checkbox]{position:static;width:16px;height:16px;margin:0;accent-color:var(--lucent-accent);flex:none}
.lucent #access .login-body :is(.button,.submit){
 position:static;display:flex;align-items:center;justify-content:center;width:100%;height:46px;min-height:46px;margin:0;padding:10px 16px;
 border:1px solid transparent;border-radius:11px;
 background:color-mix(in srgb,var(--lucent-accent,#6366f1) 65%,#20202a);color:#fff;
 font:inherit;font-size:15px;font-weight:700;line-height:24px;text-decoration:none;cursor:pointer;box-shadow:none;text-shadow:none;
}
.lucent #access .login-body :is(.button,.submit):hover{filter:brightness(1.12)}
.lucent #access :is(a,button,input[type=submit],input[type=checkbox]):focus-visible{outline:2px solid var(--lucent-accent);outline-offset:3px}
.lucent #access p{margin:0}
.lucent #access .login-body .message{padding:10px 12px;border:var(--lucent-border-width,1px) solid var(--glass-border);border-radius:10px;background:var(--bg-base);color:var(--text);font-size:13px}
.lucent #access #warning{margin:0;color:var(--text-muted);font-size:12px}
.lucent #access .login-footer{
 margin:24px 0 0;padding:18px 0 0;border-top:1px solid var(--glass-border);
 border-radius:0;background:transparent;box-shadow:none;text-align:center;color:var(--text-muted);
}
.lucent #access .login-footer .pull-right{float:none}
.lucent #access .login-footer a{color:var(--text-muted);font-size:13px;text-decoration:none}
.lucent #access .login-footer a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.lucent #access .login-footer .bar{margin:0 10px;color:var(--glass-border)}
@media(max-width:480px){
 .lucent .lucent-content:has(#access){padding:12px 0}
 .lucent #access{width:100%;margin:8px auto;padding:22px 18px}
 .lucent #access .login-header h1{font-size:19px}
}