:root{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:#101313;color:#f7faf8}header{height:90px;max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:22px}header img{width:180px;max-height:55px}a{color:inherit;text-decoration:none}header>a:last-child{font-size:14px;color:#b8c6c0}main{padding:30px 20px 70px}.shell{max-width:510px;margin:auto;border:1px solid #33433b;border-radius:24px;padding:32px;background:#1a201d}.heading span{letter-spacing:3px;font-size:11px;color:#b7d8c6}.heading h1{margin:14px 0 5px;font-size:32px}.heading p,.hint,#member-email{color:#aebbb4;font-size:14px;line-height:1.8}.tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:28px 0 14px}.tabs button{background:transparent;border:1px solid #526257;color:#ddd}.tabs .selected{background:#b0e7c8;color:#10221a}form{display:grid;gap:16px;margin:18px 0 30px}label{display:grid;gap:8px;font-size:14px;color:#e2ede7}input{width:100%;border-radius:10px;background:#101714;border:1px solid #46594b;color:white;font:inherit;padding:14px;direction:auto}input:focus{outline:2px solid #a7ddb9}button{border:0;background:#b0e7c8;color:#10221a;padding:14px;border-radius:10px;font-weight:700;font:inherit;cursor:pointer}button:disabled{opacity:.6;cursor:wait}.outline{border:1px solid #7fae94;background:transparent;color:#deeee4}#feedback{min-height:1.2em;font-size:14px;color:#b6efce;line-height:1.7}#feedback.error{color:#ffb8b8}[hidden]{display:none!important}#member h3{margin-top:30px;font-size:17px}@media(max-width:550px){.shell{padding:22px}.heading h1{font-size:27px}header img{width:145px}}

.social{margin:18px 0;display:flex;gap:10px;flex-wrap:wrap}.social p{width:100%}.social a{border:1px solid #6b7788;border-radius:9px;padding:10px 18px;color:inherit;text-decoration:none}.request-item{border:1px solid #7774;border-radius:12px;padding:14px;margin:8px 0}

/* v6.1: progressive disclosure for a compact, accessible login. */
body{background:radial-gradient(ellipse at 50% -20%,#21332a 0%,#101313 48%)}
main{padding:16px 16px 55px}.shell{max-width:430px;padding:30px 28px;border-radius:20px;box-shadow:0 20px 65px #0004}
.heading{text-align:center}.heading h1{font-size:27px;margin:12px 0 5px}.heading p{font-size:12px;margin:6px 0 0}
.tabs{margin:22px 0 18px;gap:7px}.tabs button{padding:11px;border-radius:9px;font-size:13px}
#login-form{margin:0;gap:13px}#guest label{font-size:12px;gap:7px}#guest input{padding:12px 13px;font-size:14px;border-radius:9px;min-height:43px}
#guest .primary{background:#b0e7c8;color:#10221a;font-weight:700;min-height:43px}
#guest button{transition:background .16s ease,border-color .16s ease}#guest button:focus-visible,#guest a:focus-visible{outline:2px solid #b0e7c8;outline-offset:3px}
.text-link{display:block;width:max-content;margin:9px auto 0;padding:7px 9px;background:none;border:0;color:#c6e9d5;font-size:12px}
.separator{display:flex;align-items:center;gap:12px;margin:16px 0 12px;color:#99afa3;font-size:11px;white-space:nowrap}
.separator:before,.separator:after{content:"";height:1px;background:#34443b;flex:1}
.social{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.social a{display:flex;align-items:center;justify-content:center;padding:10px 4px;border:1px solid #52645a;border-radius:9px;font-size:12px;min-height:40px}.social a:hover{border-color:#b0e7c8;background:#27372f}
.alternative-link{display:flex;justify-content:center;align-items:center;gap:12px;width:100%;background:transparent;color:#c4dfd0;border:1px solid #405448;margin-top:16px;padding:11px;font-size:12px;border-radius:9px}
.alternative-link span{font-size:16px;line-height:1}.expand-form{padding:16px;margin:0;background:#131a16;border:1px solid #35483b;border-top:0;border-radius:0 0 12px 12px;gap:12px}
#register-form{margin:0;gap:14px}#recovery-view form{margin:16px 0 0;gap:14px}#recovery-view h2{font-size:19px;margin:0}.helper{font-size:12px;line-height:1.7;color:#abc2b3;margin:0}.back-link{margin:6px 0 12px}
#feedback:empty{display:none}#feedback:not(:empty){margin:14px 0 0;padding:10px 12px;background:#203a2e;border-radius:9px;font-size:12px}#feedback.error{background:#462827}
.hint{text-align:center;font-size:11px;margin-top:20px;line-height:1.6}
@media(max-width:550px){header{height:70px;padding:15px}header img{width:130px}main{padding:10px 12px 35px}.shell{padding:22px 19px}.heading h1{font-size:25px}}
/* v6.2 — compact premium login, adapted for the existing vanilla JS site. */
:root{font-family:Inter,system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;color-scheme:dark}
body{background:#0d0f0e;color:#f4f5f4;min-height:100vh}
header{max-width:1040px;height:76px}header>a:last-child:hover{color:white}
main{padding:24px 14px 70px}
.shell{max-width:448px;background:#171918;border:1px solid #323633;border-radius:16px;padding:30px 28px;box-shadow:0 28px 80px #0007}
.heading{text-align:center}.heading span{font-size:10px;letter-spacing:2.5px;color:#a4c5b1}.heading h1{font-size:27px;letter-spacing:-.4px;margin:12px 0 5px}.heading p{font-size:13px;line-height:1.6;color:#a3ada6}
.tabs{display:flex;gap:4px;padding:4px;margin:24px 0;background:#292b29;border-radius:13px;border:0}
.tabs button{flex:1;background:transparent;border:0;border-radius:10px;padding:12px;font-size:13px;color:#aeb7b0;font-weight:650;min-height:42px}
.tabs .selected{background:#101211;color:#fff;box-shadow:0 2px 12px #0005}
#guest label{font-size:12px;font-weight:550;color:#f0f1f0;gap:8px}
#guest input:not([type=checkbox]){height:46px;min-height:46px;border:1px solid #3b413d;background:#101211;color:#fff;border-radius:10px;padding:12px 14px;font-size:13px}
#guest input:focus{outline:none!important;border-color:#a4d9bd!important;box-shadow:0 0 0 3px #a4d9bd22}
#guest input::placeholder{color:#828d85}
.input-wrap{display:flex;align-items:center;position:relative;direction:rtl}.input-wrap input{width:100%;padding-inline-start:42px!important;padding-inline-end:42px!important}.field-icon{position:absolute;inset-inline-start:15px;color:#a6b1a9;font-size:17px;z-index:1;line-height:1}
.field-label-row{display:flex;align-items:center;justify-content:space-between;gap:5px}
.field-label-row .text-link{margin:0;padding:0;font-size:11px;color:#badcc7;white-space:nowrap}
.visibility{position:absolute;inset-inline-end:7px;top:50%;transform:translateY(-50%);width:34px;height:34px;padding:0;background:transparent!important;color:#9aa69d;border:0;font-size:18px}
.visibility:hover{color:white}
#guest .primary{min-height:46px;background:#e6e8e6;color:#111511;border-radius:10px;font-weight:750;font-size:14px}
#guest .primary:hover{background:#b5e2ca}
#login-form{gap:17px;margin:0}.separator{margin:25px 0 15px;color:#a9b0aa}.separator:before,.separator:after{background:#3a3d3a}
.social{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.social a{min-height:43px;background:#101211;border:1px solid #383e39;border-radius:10px;gap:8px;padding:9px 5px;font-size:12px;color:#e9e9e9}.social a:hover{border-color:#8fc7a9;background:#1e2821}
.google-g{font-weight:800;font-size:18px;background:conic-gradient(#4285f4 0 25%,#34a853 25% 50%,#fbbc05 50% 70%,#ea4335 70% 100%);background-clip:text;-webkit-background-clip:text;color:transparent}.apple-symbol{font-size:16px;line-height:1;color:#fff}.facebook-f{font-size:20px;font-weight:800;color:#438cff;line-height:1}
.alternative-link{background:none;border:0;margin:18px auto 0;padding:9px;color:#b9d9c5;font-size:12px}.alternative-link:hover{color:#fff}.expand-form{background:#111613;border:1px solid #37433a;border-radius:12px;padding:15px;margin-top:7px}
.signup-intro{text-align:center}.signup-intro h2{font-size:21px;margin:0}.signup-intro p{color:#9da9a0;font-size:12px;margin:6px 0 4px}
#register-form{gap:14px;margin:0}.terms-check{display:flex!important;align-items:flex-start;gap:10px!important;font-size:11px!important;line-height:1.6;color:#bdc4be!important}.terms-check input{width:16px;height:16px;accent-color:#b5e2ca;flex:0 0 16px;margin:2px 0 0}.terms-check a{text-decoration:underline;color:#d2e3d7}
.password-meter{display:grid;gap:5px}.password-meter-bar{height:5px;background:#3b3e3b;border-radius:5px;overflow:hidden}.password-meter-bar span{display:block;height:100%;width:0;background:#d17770;transition:width .2s,background .2s}.password-strength-text{font-size:10px;color:#b9c6bd}
#feedback:not(:empty){background:#1e3628;color:#d1efd9;border:1px solid #466b50;padding:12px;margin:0 0 16px;border-radius:10px}#feedback.error{background:#39211f;color:#ffc4bd;border-color:#79433e}
#member{line-height:1.7}#member h2{font-size:24px}#member form{margin:12px 0 24px}#member input{min-height:43px}
.hint{color:#939e95;margin-top:20px}
@media(max-width:520px){main{padding:9px 12px 50px}header{height:70px}.shell{padding:25px 20px;border-radius:15px;max-width:100%}.heading h1{font-size:25px}.social a{font-size:11px;gap:5px}.tabs{margin:20px 0}.signup-intro h2{font-size:19px}}

/* MS4DESIGN v6.3 — readability and responsive refinements only.
   No changes to authentication logic, markup, or tokens. */
@media (min-width: 521px) {
  main { padding-top: 30px; }
  .shell { max-width: 420px; padding: 32px 30px; }
}
.heading span { font-size: 11px; letter-spacing: 2.2px; }
.heading h1 { font-size: 24px; line-height: 1.35; margin: 12px 0 6px; }
.heading p { font-size: 14px; line-height: 1.7; }
.tabs { margin: 23px 0 22px; }
.tabs button { min-height: 46px; font-size: 14px; padding: 11px; }
#guest label { font-size: 14px; line-height: 1.55; gap: 8px; }
#guest input:not([type=checkbox]) { min-height: 46px; height: 46px; font-size: 14px; padding-block: 11px; }
#login-form { gap: 19px; }
.field-label-row { gap: 10px; }
.field-label-row .text-link { font-size: 12px; }
.field-icon { font-size: 18px; }
.visibility { width: 38px; height: 38px; font-size: 19px; }
#guest .primary { min-height: 46px; font-size: 14px; }
.separator { margin: 22px 0 16px; font-size: 12px; }
.social a { min-height: 44px; font-size: 13px; gap: 7px; }
.alternative-link { min-height: 43px; font-size: 13px; margin-top: 15px; }
.signup-intro h2 { font-size: 22px; }
.signup-intro p, .helper { font-size: 13px; }
#register-form { gap: 16px; }
.terms-check { font-size: 12px!important; }
.password-strength-text { font-size: 12px; }
#feedback:not(:empty) { font-size: 13px; }
.hint { font-size: 12px; }
@media (max-width: 520px) {
  .shell { padding: 24px 20px; }
  .heading h1 { font-size: 23px; }
  .heading p { font-size: 13px; }
  .tabs { margin: 20px 0; }
  .social a { font-size: 12px; }
}
@media (max-width: 360px) {
  .shell { padding: 22px 15px; }
  .social a { font-size: 11px; gap: 3px; }
  .heading h1 { font-size: 22px; }
}

/* v6.4 — final desktop readability polish. CSS-only; preserve existing auth behavior. */
@media (min-width: 521px) {
  .shell { max-width: 440px; padding: 32px 32px 28px; }
  main { padding-top: 22px; padding-bottom: 42px; }
}
.heading h1 { font-size: 28px; line-height: 1.3; }
.heading p { font-size: 14px; }
#guest label { font-size: 14px; }
#guest input:not([type=checkbox]) { font-size: 15px; min-height: 48px; height: 48px; }
#guest .primary { min-height: 48px; font-size: 15px; }
.tabs button { font-size: 14px; min-height: 46px; }
.social a { font-size: 13px; min-height: 46px; gap: 8px; }
.google-g { font-size: 20px; }
.apple-symbol { font-size: 19px; }
.facebook-f { font-size: 22px; }
.hint { margin-top: 14px; }
#register-form { gap: 15px; }
.signup-intro h2 { font-size: 24px; }
@media (max-width: 520px) {
  .shell { max-width: 100%; padding: 24px 18px; }
  .heading h1 { font-size: 25px; }
  #guest input:not([type=checkbox]) { min-height: 46px; height: 46px; font-size: 14px; }
  #guest .primary { min-height: 46px; }
  .social a { min-height: 44px; font-size: 12px; }
}

/* Release candidate: align membership colors with the site's canonical palette.
   Reference: public/style.css --bg #101212 / --surface #191c1c / --accent #6fccdd. */
:root { --auth-accent:#6fccdd; --auth-bg:#101212; --auth-surface:#191c1c; --auth-border:#303635; --auth-text:#f1f1e9; --auth-muted:#a7b1ae; }
body { background:var(--auth-bg); color:var(--auth-text); }
.shell { background:var(--auth-surface); border-color:var(--auth-border); }
.heading span { color:var(--auth-accent); }
.heading p,.hint,#member-email { color:var(--auth-muted); }
.tabs { background:#232829; }
.tabs .selected { background:#102229; color:#f1f1e9; }
#guest input:not([type=checkbox]),#member input { background:#101515; border-color:#3c494b; }
#guest input:focus,#member input:focus { border-color:var(--auth-accent)!important; outline-color:var(--auth-accent)!important; box-shadow:0 0 0 3px #6fccdd22; }
#guest .primary,#member button:not(.outline),.tabs .selected:focus-visible { background:var(--auth-accent); color:#102229; }
#guest .primary:hover,#member button:not(.outline):hover { background:#a8e8f3; }
.social a:hover { border-color:var(--auth-accent); background:#15292d; }
#guest button:focus-visible,#guest a:focus-visible,#member button:focus-visible { outline-color:var(--auth-accent); }
.field-label-row .text-link,.alternative-link,.text-link { color:#b6efff; }
#feedback:not(:empty) { border-color:#316e7b; background:#102b32; color:#d9f7fc; }
#feedback.error { border-color:#79433e; background:#39211f; color:#ffc4bd; }
#member button.outline { color:#b6efff; border-color:#386972; }