:root {
  --apple-blue: #0071e3;
  --apple-blue-light: #0077ed;
  --apple-orange: #ff9f0a;
  --apple-green: #34c759;
  --apple-red: #ff453a;
  --text-white: #f5f5f7;
  --text-gray: #a1a1a6;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, "PingFang SC", sans-serif;
  color: var(--text-white);
  background: #000;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: linear-gradient(180deg, #111 0%, #000 100%); }
button, input { font: inherit; }

.bg-decoration { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.bg-dot { position: absolute; width: 520px; height: 520px; left: -280px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(0,113,227,.17), transparent 68%); filter: blur(20px); }
.bg-dot-2 { width: 460px; height: 460px; left: auto; top: auto; right: -240px; bottom: -230px; background: radial-gradient(circle, rgba(255,159,10,.11), transparent 68%); }

.container { width: min(100% - 30px, 520px); min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px 0 24px; position: relative; z-index: 2; }
.card { width: 100%; padding: 42px 36px 34px; border: 1px solid rgba(255,255,255,.11); border-radius: 30px; background: rgba(24,24,27,.84); backdrop-filter: blur(24px); box-shadow: 0 30px 85px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.05); }
.card-header { text-align: center; }
.logo-wrapper { width: 70px; height: 70px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%; background: var(--apple-blue); box-shadow: 0 0 24px rgba(0,113,227,.35); }
.logo-wrapper svg { width: 38px; fill: none; stroke: white; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.card-title { margin: 0; font-size: 30px; line-height: 1.2; letter-spacing: -.04em; }
.card-subtitle { margin: 13px auto 0; max-width: 380px; color: var(--text-gray); font-size: 15px; line-height: 1.75; }

.loader-section { padding: 38px 0 36px; display: grid; place-items: center; }
.loader-circle { width: 174px; height: 174px; position: relative; display: grid; place-items: center; }
.circle-outer { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--apple-blue), var(--apple-orange), var(--apple-blue)); animation: rotate 2s linear infinite; filter: blur(.5px); }
.circle-outer::after { content: ""; position: absolute; inset: 7px; border-radius: inherit; background: #171719; }
.circle-inner { width: 136px; height: 136px; position: relative; z-index: 2; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); background: radial-gradient(circle at 45% 35%, #252528, #111); box-shadow: inset 0 0 25px rgba(0,0,0,.45); }
.countdown-text { color: #d7d7dc; font-size: 18px; font-weight: 650; text-align: center; }
.countdown-text.number { color: white; font-size: 46px; }
.countdown-text.completed { color: var(--apple-green); font-size: 28px; }

.info-section { display: grid; gap: 20px; }
.alert-card { padding: 18px; border-radius: 16px; border: 1px solid rgba(255,159,10,.24); background: rgba(255,159,10,.08); }
.alert-content { display: flex; gap: 13px; align-items: flex-start; }
.alert-icon { width: 23px; flex: 0 0 auto; margin-top: 1px; fill: none; stroke: var(--apple-orange); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact-info { color: #e9e9ed; font-size: 14px; line-height: 1.7; }
.contact-info strong { font-weight: 600; }
.tips-text { margin: 0; color: #88888d; font-size: 12px; line-height: 1.85; text-align: center; }
.footer { margin-top: 23px; color: #66666b; font-size: 11px; text-align: center; line-height: 1.65; }
.footer p { margin: 0; }

#passwordDialog { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.76); backdrop-filter: blur(22px); }
.verify-dialog { width: min(100%, 390px); padding: 34px 30px 30px; border-radius: 25px; border: 1px solid rgba(255,255,255,.13); background: rgba(29,29,31,.97); box-shadow: 0 30px 90px rgba(0,0,0,.72); text-align: center; animation: dialogIn .42s cubic-bezier(.2,.8,.2,1); }
.verify-dialog h2 { margin: 0; font-size: 23px; letter-spacing: -.03em; }
.verify-dialog p { margin: 12px 0 20px; color: var(--text-gray); font-size: 14px; line-height: 1.6; }
#randomCode { height: 72px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 16px; border: 1px solid rgba(255,255,255,.09); background: #101012; color: white; font: 700 35px "SF Mono", Consolas, monospace; letter-spacing: .25em; text-indent: .25em; text-shadow: 0 0 18px rgba(0,113,227,.3); }
#passwordInput { width: 100%; height: 50px; padding: 0 16px; border: 1px solid #3a3a3c; border-radius: 14px; outline: 0; background: #111113; color: white; font-size: 16px; text-align: center; transition: .2s; }
#passwordInput:focus { border-color: var(--apple-blue); box-shadow: 0 0 0 4px rgba(0,113,227,.15); }
#passwordInput::placeholder { color: #636366; }
#verifySubmit { width: 100%; height: 50px; margin-top: 14px; border: 0; border-radius: 999px; background: var(--apple-blue); color: white; font-size: 16px; font-weight: 600; cursor: pointer; transition: .2s; }
#verifySubmit:hover { background: var(--apple-blue-light); transform: translateY(-1px); }
#verifySubmit:active { transform: none; }
#verifyError { min-height: 20px; margin-top: 12px; color: var(--apple-red); font-size: 13px; }
.verify-locked .container { filter: blur(10px); transform: scale(.985); }

@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes dialogIn { from { opacity: 0; transform: translateY(15px) scale(.97); } to { opacity: 1; transform: none; } }

@media (max-width: 560px) {
  .container { width: min(100% - 22px, 520px); padding-top: 18px; justify-content: flex-start; }
  .card { padding: 32px 20px 27px; border-radius: 24px; }
  .logo-wrapper { width: 62px; height: 62px; }
  .card-title { font-size: 27px; }
  .card-subtitle { font-size: 14px; }
  .loader-section { padding: 32px 0; }
  .loader-circle { width: 155px; height: 155px; }
  .circle-inner { width: 121px; height: 121px; }
  .verify-dialog { padding: 30px 21px 25px; }
}