:root{
  --ink:#f6f3ee; --muted:#c9c3ba; --line:rgba(255,255,255,.22);
  --panel:rgba(18,16,20,.62); --field:rgba(255,255,255,.09);
  --accent:#ffd7a8; --accent-ink:#2a1a08; --error:#ff9b8f; --ok:#9be3b0;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#000;overflow:hidden}

/* Background video */
.bg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

/* Top 40% stays empty, form lives in bottom 60% */
.sheet{
  position:fixed;left:0;right:0;bottom:0;height:60%;z-index:1;
  display:flex;justify-content:center;
  background:var(--panel);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);
  border-top:1px solid var(--line);
  border-radius:28px 28px 0 0;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.scroll{width:100%;max-width:440px;height:100%;overflow-y:auto;padding:26px 24px 28px}
.scroll::-webkit-scrollbar{width:0}

h1{font-size:1.65rem;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.sub{color:var(--muted);font-size:.92rem;margin-bottom:18px}

.view{display:none}
.view.active{display:block}

label{display:block;font-size:.82rem;font-weight:700;margin:12px 0 6px}
.field{position:relative}
input{
  width:100%;height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--field);color:var(--ink);font:inherit;font-size:.95rem;outline:none;
  transition:border-color .15s, background .15s;
}
input::placeholder{color:#9a948b}
input:focus-visible{border-color:var(--accent);background:rgba(255,255,255,.14)}
input.bad{border-color:var(--error)}
.field input{padding-right:62px}
.toggle{
  position:absolute;right:6px;top:6px;height:36px;padding:0 10px;border:0;border-radius:8px;
  background:transparent;color:var(--muted);font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;
}
.toggle:hover{color:var(--ink)}
.toggle:focus-visible,.link:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.msg{min-height:20px;margin-top:12px;font-size:.85rem;font-weight:500}
.msg.err{color:var(--error)} .msg.ok{color:var(--ok)}

.btn{
  width:100%;height:50px;margin-top:6px;border:0;border-radius:12px;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:800;font-size:1rem;
  transition:transform .12s, filter .15s;
}
.btn:hover{filter:brightness(1.06)} .btn:active{transform:scale(.985)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}

.switch{margin-top:18px;text-align:center;font-size:.9rem;color:var(--muted)}
.link{background:none;border:0;color:var(--accent);font:inherit;font-weight:800;cursor:pointer;padding:2px}
.link:hover{text-decoration:underline}

.welcome p{color:var(--muted);margin:6px 0 18px;line-height:1.5}
.welcome strong{color:var(--ink)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Sound button */
.sound{
  position:absolute;top:14px;right:16px;z-index:2;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:var(--ink);
  background:var(--field);border:1px solid var(--line);
  transition:background .15s, color .15s;
}
.sound:hover{background:rgba(255,255,255,.18)}
.sound:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sound .ic-on{display:none}
.sound.on{color:var(--accent)}
.sound.on .ic-on{display:block}
.sound.on .ic-off{display:none}
h1{padding-right:50px}

/* Required marker, textarea, two-column row */
.req{color:var(--accent);margin-left:2px}
textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);resize:none;
  background:var(--field);color:var(--ink);font:inherit;font-size:.95rem;outline:none;
  transition:border-color .15s, background .15s;
}
textarea::placeholder{color:#9a948b}
textarea:focus-visible{border-color:var(--accent);background:rgba(255,255,255,.14)}
textarea.bad{border-color:var(--error)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row > div{min-width:0}
@media (max-width:380px){.row{grid-template-columns:1fr}}

/* Password strength line */
.meter{height:4px;margin-top:9px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden}
.meter .bar{
  display:block;height:100%;width:0;border-radius:4px;background:var(--error);
  transition:width .45s cubic-bezier(.2,.8,.2,1), background-color .35s;
}
.meter[data-level="1"] .bar{width:25%;background:#ff9b8f}
.meter[data-level="2"] .bar{width:50%;background:#ffc977}
.meter[data-level="3"] .bar{width:75%;background:#d9e37a}
.meter[data-level="4"] .bar{
  width:100%;background:linear-gradient(90deg,#7fe3a0,#c7ffd9,#7fe3a0);background-size:200% 100%;
  animation:flow 1.6s linear infinite;
}
@keyframes flow{to{background-position:-200% 0}}
.meter-text{min-height:16px;margin-top:5px;font-size:.78rem;font-weight:700;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.meter[data-level="4"] .bar{animation:none}}