:root{
  --g:#0b3d2e;--a:#f2b705;--bg:#f4f6f5;--card:#fff;--tx:#111;--mut:#667;--bd:#d9dfdc;--err:#b00020;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  --gap:clamp(.75rem,2.5vw,1.5rem);
}
@media (prefers-color-scheme:dark){:root{--bg:#0e1512;--card:#17211d;--tx:#eef3f0;--mut:#9fb0a8;--bd:#2a3a33}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
body{margin:0;min-height:100vh;min-height:100dvh;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:clamp(15px,1.2vw + 12px,17px);background:var(--bg);color:var(--tx);
  padding:0 var(--sar) var(--sab) var(--sal);overscroll-behavior-y:none}
header.top{position:sticky;top:0;z-index:5;background:var(--g);color:#fff;
  padding:calc(.75rem + var(--sat)) calc(var(--gap) + var(--sar)) .75rem calc(var(--gap) + var(--sal));
  margin:0 calc(-1*var(--sar)) 0 calc(-1*var(--sal));
  display:flex;justify-content:space-between;align-items:center;gap:.75rem;font-weight:700}
header.top .brand{display:flex;align-items:center;gap:.6rem;min-width:0}
header.top img{width:2rem;height:2rem;border-radius:.5rem}
main{width:100%;max-width:72rem;margin:0 auto;padding:var(--gap)}
.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.card{background:var(--card);border:1px solid var(--bd);border-radius:.9rem;padding:clamp(1rem,3vw,1.5rem);overflow-wrap:anywhere}
button,.btn{min-height:44px;padding:.65em 1.2em;border:0;border-radius:.6rem;background:var(--a);color:#111;font:inherit;font-weight:700;cursor:pointer}
button.sec{background:transparent;color:inherit;border:1px solid currentColor;opacity:.9}
button.full{width:100%}
button:disabled{opacity:.6}
label{display:block;font-weight:600;font-size:.9em}
input{width:100%;min-height:44px;padding:.6em .8em;margin:.35rem 0 1rem;border:1px solid var(--bd);border-radius:.6rem;
  background:var(--card);color:var(--tx);font:inherit;font-size:16px}
.pw{position:relative}.pw input{padding-right:3.2rem}
.pw button{position:absolute;right:.25rem;top:.35rem;min-height:40px;min-width:40px;padding:0;background:none;color:var(--mut)}
#err{color:var(--err);min-height:1.3em;margin:-.25rem 0 .75rem;font-size:.9em}
#login{min-height:calc(100vh - 4rem);min-height:calc(100dvh - 4rem);display:grid;place-items:center}
#login .card{width:100%;max-width:26rem}
#login h1{margin:.2rem 0 .25rem;font-size:1.5rem}
.mut{color:var(--mut)}
[hidden]{display:none!important}
@media (min-width:48rem){header.top{padding-top:calc(1rem + var(--sat));padding-bottom:1rem}}
@media (max-height:30rem) and (orientation:landscape){#login{place-items:start center}header.top{position:static}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}