:root{
  --bg:#0b0c10;--card:#151821;--accent:#6366f1;--accent-glow:rgba(99,102,241,.35);
  --text:#e2e8f0;--muted:#94a3b8;--border:#2a2f3e;--success:#10b981;--r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);min-height:100vh;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.widget{
  width:100%;max-width:400px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:28px 24px;position:relative;overflow:hidden;
  box-shadow:0 16px 48px rgba(0,0,0,.45);transition:filter .3s;
}
#shimmer{
  position:absolute;inset:0;pointer-events:none;opacity:.6;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  transform:skewX(-20deg);
}
.widget:not(.paused) #shimmer{animation:shimmer 2.8s infinite linear}
@keyframes shimmer{0%{left:-100%}100%{left:200%}}

.header{margin-bottom:20px}
.header h1{font-size:1.35rem;font-weight:600;letter-spacing:-.01em}
.subtitle{color:var(--muted);font-size:.85rem;margin-top:4px}

.progress-track{height:4px;background:var(--border);border-radius:2px;margin-bottom:24px;overflow:hidden}
.progress-fill{height:100%;width:33%;background:var(--accent);border-radius:2px;transition:width .5s cubic-bezier(.4,0,.2,1);box-shadow:0 0 10px var(--accent-glow)}

.stage{min-height:188px;display:flex;flex-direction:column;gap:14px;animation:fadeUp .35s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

input{
  width:100%;padding:14px 16px;background:#1e2230;border:1px solid var(--border);
  border-radius:10px;color:var(--text);font-size:1rem;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.25)}
input::placeholder{color:#4b5563}
button{
  width:100%;padding:14px;background:var(--accent);color:#fff;border:none;
  border-radius:10px;font-size:.95rem;font-weight:500;cursor:pointer;
  transition:transform .1s,background .2s,opacity .2s;
}
button:hover:not(:disabled){background:#4338ca}
button:active:not(:disabled){transform:scale(.98)}
button:disabled{opacity:.45;cursor:wait}

.hint{font-size:.82rem;color:var(--muted);text-align:center}
footer{margin-top:22px;text-align:center;font-size:.75rem;color:var(--muted)}

.success-icon{
  width:62px;height:62px;margin:0 auto 10px;background:rgba(16,185,129,.12);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:26px;color:var(--success);animation:pop .45s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.success-text{text-align:center;color:var(--muted);font-size:.88rem;line-height:1.4}

.pause-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;
  transition:opacity .25s;z-index:999;
}
.pause-overlay.visible{opacity:1;pointer-events:auto;cursor:pointer}
.pause-overlay p{
  background:var(--card);color:var(--text);padding:10px 18px;border-radius:8px;
  font-size:.88rem;box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.widget.paused{pointer-events:none;filter:brightness(.7)}