:root{--ink:#17222b;--fern:#3fa06d;--pine:#2e7d53;--line:rgba(23,34,43,.16);}
*{box-sizing:border-box;}
html{min-height:100%;}
body.workshop-login{
  margin:0;min-height:100vh;font:15px/1.5 "Open Sans",system-ui,-apple-system,sans-serif;color:var(--ink);
  background:radial-gradient(620px 480px at 8% -8%,rgba(63,160,109,.55),transparent 64%),
    radial-gradient(700px 520px at 96% 2%,rgba(45,140,150,.48),transparent 66%),
    radial-gradient(620px 500px at 82% 96%,rgba(214,168,74,.42),transparent 64%),#dde6dd;
}
#banner{background:rgba(122,22,22,.92);color:#fff;text-align:center;font-size:12px;padding:4px;letter-spacing:.04em;}
.workshop-login main{
  width:calc(100% - 32px);max-width:380px;margin:clamp(32px,12vh,120px) auto;padding:28px;
  border:1px solid rgba(23,34,43,.12);border-radius:16px;background:rgba(255,255,255,.55);
  backdrop-filter:blur(22px);box-shadow:0 10px 34px rgba(23,34,43,.10),inset 0 1px 0 rgba(255,255,255,.75);
}
.workshop-login h1{margin:0 0 24px;font-size:24px;font-weight:600;}
.workshop-login form{display:grid;gap:8px;}
.workshop-login label{font-weight:600;font-size:13px;}
.workshop-login input{width:100%;min-height:44px;margin-bottom:12px;padding:8px 10px;font:inherit;color:inherit;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.72);}
.workshop-login button{min-height:44px;margin-top:8px;border:0;border-radius:9px;font:inherit;cursor:pointer;background:linear-gradient(135deg,var(--fern),var(--pine));color:#fff;box-shadow:0 2px 10px rgba(63,160,109,.28);}
.workshop-login :is(input,button):focus-visible{outline:2px solid var(--pine);outline-offset:3px;}
.workshop-login [role="alert"]{color:#7a1616;font-size:13px;}