* { box-sizing: border-box; }

:root {
  --pink-1: #ffb0d0;
  --pink-2: #f06ba4;
  --pink-3: #df4f8d;
  --ink: #fff;
}

html, body {
  margin: 0;
  min-height: 100%;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  min-height: 100svh;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.30), transparent 30%),
    radial-gradient(circle at 90% 90%, rgba(255,255,255,.15), transparent 35%),
    linear-gradient(145deg, var(--pink-1) 0%, var(--pink-2) 48%, var(--pink-3) 100%);
}

.page {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 18px 20px;
  isolation: isolate;
}

.glow {
  position: fixed;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  filter: blur(50px);
  opacity: .25;
  z-index: -1;
  pointer-events: none;
}
.glow-one { background: #fff; top: -90px; left: -100px; }
.glow-two { background: #ff5b9e; right: -120px; bottom: -80px; }

.card {
  width: min(100%, 430px);
  text-align: center;
  padding: 34px 20px 30px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 30px;
  background: rgba(255,255,255,.13);
  box-shadow: 0 25px 70px rgba(116, 20, 67, .20);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: cardIn .65s ease both;
}

.avatar-wrap {
  position: relative;
  width: 118px;
  height: 118px;
  margin: 0 auto 18px;
}

.avatar {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.92);
  box-shadow: 0 10px 30px rgba(92, 20, 54, .24);
}

.check {
  position: absolute;
  right: 0;
  bottom: 3px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #1598f0;
  border: 3px solid #fff;
  font-size: 17px;
  font-weight: 800;
  box-shadow: 0 5px 15px rgba(0,0,0,.18);
}

h1 {
  margin: 0;
  font-size: clamp(29px, 8vw, 38px);
  line-height: 1.08;
  letter-spacing: -.04em;
  font-weight: 800;
  text-shadow: 0 3px 16px rgba(91, 18, 51, .16);
}

.subtitle {
  margin: 10px 0 22px;
  font-size: 14px;
  opacity: .88;
}

.hold-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  width: 100%;
  padding: 0 24px;
  overflow: hidden;
  border-radius: 22px;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #ff5e9c, #d9367e);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 13px 28px rgba(111, 20, 61, .24), inset 0 1px 0 rgba(255,255,255,.35);
  transform: translateZ(0);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.hold-button:active,
.hold-button.holding {
  transform: scale(.975);
  box-shadow: 0 7px 18px rgba(111, 20, 61, .22), inset 0 2px 7px rgba(86, 8, 43, .18);
}

.hold-content {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hold-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  font-size: 17px;
}

.hold-label {
  font-size: 17px;
}

.progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 0%;
  background: rgba(255,255,255,.95);
  border-radius: 0 8px 8px 0;
  z-index: 3;
}

.button-shine {
  position: absolute;
  top: -80%;
  left: -30%;
  width: 35%;
  height: 260%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: shine 3.2s infinite;
  pointer-events: none;
}

.hint {
  margin: 15px 0 0;
  font-size: 12px;
  opacity: .72;
}

footer {
  margin-top: 18px;
  font-size: 11px;
  opacity: .55;
}

@keyframes shine {
  0%, 45% { left: -40%; }
  70%, 100% { left: 125%; }
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 420px) {
  .page { padding-left: 14px; padding-right: 14px; }
  .card { padding: 28px 16px 24px; border-radius: 26px; }
  .avatar-wrap { width: 108px; height: 108px; }
  .hold-button { min-height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}