:root{--c-bg:#fff;--c-surface:#fff;--c-border:#d0d0d0;--c-text:#222;--c-text-muted:#555;--c-divider:#ccc;--c-btn:#000;--c-btn-hover:#222;--c-btn-text:#fff;--fs-base:15px;--fs-small:13px;--fs-logo:26px;--radius:8px;--gap:12px;--pad:25px;--w-container:450px;}
@media(prefers-color-scheme:dark){:root{--c-bg:#282a2c;--c-surface:#1b1c1d;--c-border:#444;--c-text:#e5e5e5;--c-text-muted:#aaa;--c-divider:#333;}}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;padding:0;}
body.logid-auth-page{font-family:Arial,sans-serif;font-size:var(--fs-base);background:var(--c-surface);color:var(--c-text);overflow-x:hidden;}
.logid-container{width:100%;margin:0 auto;padding:calc(var(--pad)*2.5) calc(var(--pad)*1.5) 0;display:flex;flex-direction:column;justify-content:center;text-align:center;position:relative;}
@media(min-width:520px){body.logid-auth-page{display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:40px 0;}.logid-container{max-width:var(--w-container);margin:auto 0;padding:var(--pad);border:1px solid var(--c-border);border-radius:var(--radius);box-shadow:0 calc(var(--gap)/2) var(--gap) rgba(0,0,0,.08);}}
.logid-input:-webkit-autofill,.logid-input:-webkit-autofill:focus,.logid-input:-webkit-autofill:hover{-webkit-box-shadow:0 0 0 1000px var(--c-bg) inset;-webkit-text-fill-color:var(--c-text);caret-color:var(--c-text);transition:background-color 9999s ease-out,color 9999s ease-out;}
.logid-input{padding:10px;border:1px solid var(--c-border);border-radius:4px;font-size:14px;background:var(--c-bg);color:var(--c-text);transition:border-color .2s,box-shadow .2s;}
.logid-input:focus{outline:none;border-color:var(--c-text-muted);box-shadow:0 0 0 2px rgba(0,0,0,.05);}
@media(prefers-color-scheme:dark){.logid-input:focus{border-color:#666;box-shadow:0 0 0 2px rgba(255,255,255,.06);}}
.logid-close-btn{position:absolute;top:10px;right:15px;font-size:30px;font-weight:300;color:var(--c-text-muted);cursor:pointer;line-height:1;transition:.2s;text-decoration:none;}
.logid-close-btn:hover{color:var(--c-text);}
.logid-form{display:flex;flex-direction:column;gap:var(--gap);}
.logid-submit-btn{padding:11px;background:var(--c-btn);color:var(--c-btn-text);border:none;border-radius:4px;font-size:15px;cursor:pointer;transition:.2s;}
.logid-submit-btn:hover{background:var(--c-btn-hover);}
.logid-password-help{display:block;text-align:right;font-size:12px;}
.logid-password-help a{color:var(--c-text-muted);text-decoration:none;transition:.2s;}
.logid-password-help a:hover{text-decoration:underline;}
.logid-form-error-message{color:#d63638;margin-bottom:15px;display:none;}
.logid-footer-links{margin-top:18px;font-size:var(--fs-small);text-align:center;}
.logid-footer-links a{color:var(--c-text-muted);text-decoration:none;transition:.2s;}
.logid-footer-links a:hover{text-decoration:underline;}
.logid-header{margin-bottom:20px;}
.logid-logo{display:inline-flex;padding:.6rem 1.2rem;margin:0;font-size:var(--fs-logo);color:#fff;background:#000;border-radius:6px;}
.logid-subtitle{margin:16px 0 0;font-size:var(--fs-small);color:var(--c-text-muted);}
.logid-social{display:flex;flex-direction:column;gap:var(--gap);margin:var(--gap) 0;}
.logid-social-item{width:100%;display:flex;align-items:center;}
.logid-social-btn{display:flex;align-items:center;justify-content:left;width:100%;padding:12px 20px;border-radius:6px;font-size:14px;cursor:pointer;border:1px solid var(--c-border);line-height:1.3;text-align:left;transition:.2s;background:transparent;color:var(--c-text);}
.logid-social-btn:hover{opacity:.9;}
.logid-icon{margin-right:12px;display:flex;align-items:center;width:24px;height:24px;flex-shrink:0;}
.logid-icon svg{display:block;width:100%;height:100%;}
.logid-social-btn-google,.logid-social-btn-facebook{background:#fff;color:#000;}
@media(prefers-color-scheme:dark){.logid-social-btn-google,.logid-social-btn-facebook{background:#222;color:#fff;border:1px solid #444;}.logid-social-btn-google:hover,.logid-social-btn-facebook:hover{background:#333;}.logid-icon-facebook svg path{fill:#fff;}}
.logid-divider{margin:15px 0;font-size:var(--fs-small);color:var(--c-text-muted);position:relative;text-align:center;}
.logid-divider::before,.logid-divider::after{content:"";position:absolute;top:50%;width:40%;height:1px;background:var(--c-divider);}
.logid-divider::before{left:0;}
.logid-divider::after{right:0;}