:root{--t1:rgba(255,255,255,.9);--t2:rgba(255,255,255,.55);--t3:rgba(255,255,255,.3);--ac:#5fc9b8;--bad:#e06a5f;--acs:color-mix(in srgb,var(--ac) 14%,transparent)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font:13px "Segoe UI",system-ui,sans-serif;color:var(--t1);background:#000}
body{display:grid;place-items:center;padding:20px 14px;min-height:100dvh}
.bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;
background:radial-gradient(circle at 50% 50%,transparent 0 30vmax,#000 62vmax),
linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 50% 50%/48px 48px,
linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 50% 50%/48px 48px}
.bg i{position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax;border-radius:50%;
background:repeating-radial-gradient(circle,transparent 0 calc(12vmax - 1px),color-mix(in srgb,var(--ac) 16%,transparent) calc(12vmax - 1px) 12vmax)}
.bg b{position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax;border-radius:50%;
background:conic-gradient(from 0deg,transparent 0 300deg,color-mix(in srgb,var(--ac) 5%,transparent) 330deg,color-mix(in srgb,var(--ac) 22%,transparent) 359.6deg,transparent 360deg);
-webkit-mask:radial-gradient(circle,#000 0 34%,transparent 52%);mask:radial-gradient(circle,#000 0 34%,transparent 52%);animation:sw 6s linear infinite}
@keyframes sw{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion:reduce){.bg b{animation:none;opacity:.5}}
main{position:relative;width:min(420px,100%);display:grid;gap:26px}
h1{font-size:clamp(56px,16vw,84px);font-weight:800;letter-spacing:.14em;text-align:center;line-height:1;padding-left:.14em;color:#fff}
h1 span{color:var(--ac);text-shadow:0 0 28px color-mix(in srgb,var(--ac) 45%,transparent)}
.glass{position:relative;background:rgba(14,15,18,.72);border-radius:16px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:18px;
box-shadow:0 0 0 1px rgba(255,255,255,.07),0 0 40px rgba(255,255,255,.035),0 8px 18px rgba(0,0,0,.3),0 24px 60px rgba(0,0,0,.45)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.075) 0,rgba(255,255,255,.02) 38px,transparent 90px)}
.glass::after{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent)}
label[for=lk]{display:block;color:var(--t2);margin:0 2px 8px;font-weight:600;font-variant-caps:all-small-caps;letter-spacing:.08em;font-size:15px}
.row{display:flex;gap:8px}
input[type=password]{flex:1;min-width:0;min-height:48px;padding:8px 14px;border:0;border-radius:11px;outline:0;font:inherit;font-size:16px;color:var(--t1);
background:rgba(0,0,0,.35);box-shadow:inset 0 1px 2px rgba(0,0,0,.45)}
input[type=password]:focus-visible{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac) 60%,transparent)}
input::placeholder{color:var(--t3)}
input[aria-invalid=true]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 70%,transparent)}
button{font:inherit;border:0;cursor:pointer;color:var(--t1)}
button:focus-visible,.ck input:focus-visible+i{outline:2px solid var(--ac);outline-offset:2px}
.go{flex:none;width:48px;min-height:48px;border-radius:11px;font-size:22px;font-weight:700;color:#0c0d0f;background:var(--ac);transition:background .2s,box-shadow .2s}
.go:hover{background:color-mix(in srgb,var(--ac) 85%,#fff);box-shadow:0 0 18px color-mix(in srgb,var(--ac) 45%,transparent)}
.ft{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;min-height:44px}
.ck{display:flex;align-items:center;gap:8px;min-height:44px;color:var(--t3);cursor:pointer;font-size:12px}
.ck input{position:absolute;opacity:0;width:1px;height:1px}
.ck i{width:15px;height:15px;border-radius:5px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 2px rgba(0,0,0,.5);display:grid;place-items:center;flex:none}
.ck input:checked+i{background:var(--ac);box-shadow:0 0 8px color-mix(in srgb,var(--ac) 45%,transparent)}
.ck i::after{content:"";width:7px;height:3.5px;border:solid #0c0d0f;border-width:0 0 1.8px 1.8px;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.ck input:checked+i::after{opacity:1}
#err{color:var(--bad);font-size:12px;text-align:right}
#saved{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none}
#saved[hidden]{display:none}
#saved li{display:flex;border-radius:999px;background:rgba(14,15,18,.72);box-shadow:0 0 0 1px rgba(255,255,255,.07);overflow:hidden}
#saved button{min-height:36px;background:none;transition:background .2s}
#saved button:hover{background:var(--acs)}
#saved .op{padding:0 4px 0 14px;color:var(--ac);font:600 13px ui-monospace,Consolas,monospace}
#saved .fg{width:36px;color:var(--t3);font-size:16px}#saved .fg:hover{color:var(--t1)}
@media (pointer:coarse){#saved button{min-height:44px}#saved .fg{width:44px}}