:root {
  --reset-primary: #075985;
  --reset-primary-dark: #0c4a6e;
  --reset-accent: #0ea5e9;
  --reset-text: #0f172a;
  --reset-muted: #64748b;
  --reset-border: #dbeafe;
}
* { box-sizing: border-box; }
body.reset-page {
  min-height: 100vh;
  margin: 0;
  color: var(--reset-text);
  background:
    radial-gradient(circle at 10% 15%, rgba(14,165,233,.18), transparent 34%),
    radial-gradient(circle at 90% 85%, rgba(7,89,133,.16), transparent 32%),
    linear-gradient(135deg, #f8fafc 0%, #e0f2fe 100%);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.reset-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; }
.reset-card {
  width: 100%; max-width: 470px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.75); border-radius: 24px;
  background: rgba(255,255,255,.94); box-shadow: 0 24px 65px rgba(15,23,42,.16);
  backdrop-filter: blur(12px);
}
.reset-card-top { height: 7px; background: linear-gradient(90deg, var(--reset-primary), var(--reset-accent)); }
.reset-content { padding: 32px; }
.reset-brand { text-align: center; margin-bottom: 24px; }
.reset-logo { width: 76px; height: 76px; object-fit: cover; border-radius: 20px; padding: 4px; background: #fff; box-shadow: 0 10px 28px rgba(7,89,133,.18); }
.reset-brand h1 { font-size: 22px; font-weight: 750; margin: 13px 0 3px; }
.reset-brand h2 { font-size: 17px; font-weight: 650; margin: 0; color: var(--reset-primary); }
.reset-intro { color: var(--reset-muted); text-align: center; line-height: 1.6; font-size: 14px; margin: -8px 0 22px; }
.reset-label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.reset-input {
  width: 100%; min-height: 49px; padding: 12px 14px; border: 1px solid #cbd5e1;
  border-radius: 12px; background: #fff; color: var(--reset-text); outline: none; transition: .2s;
}
.reset-input:focus { border-color: var(--reset-accent); box-shadow: 0 0 0 4px rgba(14,165,233,.12); }
.reset-code-input { text-align: center; letter-spacing: .55em; padding-left: calc(14px + .55em); font-size: 24px; font-weight: 750; }
.reset-btn {
  width: 100%; min-height: 49px; border: 0; border-radius: 12px; margin-top: 18px;
  color: #fff; font-weight: 700; cursor: pointer;
  background: linear-gradient(135deg, var(--reset-primary), var(--reset-accent));
  box-shadow: 0 10px 22px rgba(7,89,133,.22); transition: transform .18s, box-shadow .18s;
}
.reset-btn:hover { transform: translateY(-1px); box-shadow: 0 13px 28px rgba(7,89,133,.27); }
.reset-alert { border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; font-size: 14px; line-height: 1.45; }
.reset-alert-danger { color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; }
.reset-alert-success { color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; }
.demo-box { margin: 18px 0; padding: 18px; text-align: center; border: 1px dashed #38bdf8; border-radius: 16px; background: #f0f9ff; }
.demo-badge { display: inline-block; padding: 4px 9px; border-radius: 999px; color: #075985; background: #bae6fd; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.demo-code { margin: 10px 0 4px; color: #0c4a6e; font-size: 34px; font-weight: 850; letter-spacing: .22em; padding-left: .22em; }
.demo-help { margin: 0; color: #64748b; font-size: 12px; }
.reset-meta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 15px; color: #64748b; font-size: 12px; }
.reset-footer { margin-top: 22px; padding-top: 18px; text-align: center; border-top: 1px solid #e2e8f0; }
.reset-footer a { color: var(--reset-primary); font-weight: 700; text-decoration: none; }
.password-wrap { position: relative; }
.password-toggle { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); border: 0; background: transparent; color: #475569; cursor: pointer; font-size: 12px; font-weight: 700; }
.password-wrap .reset-input { padding-right: 62px; }
@media (max-width: 520px) { .reset-content { padding: 26px 20px; } .demo-code { font-size: 29px; } }

/* Separate mobile SMS inbox demo */
.sms-inbox-prompt {
  display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center;
  margin: 18px 0; padding: 15px; border: 1px solid #bae6fd; border-radius: 16px; background: #f0f9ff;
}
.sms-inbox-icon {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px;
  color: #fff; background: linear-gradient(135deg, #0284c7, #0ea5e9); font-size: 22px;
  box-shadow: 0 8px 18px rgba(2,132,199,.2);
}
.sms-inbox-prompt strong, .sms-inbox-prompt span { display: block; }
.sms-inbox-prompt strong { color: #0c4a6e; font-size: 14px; }
.sms-inbox-prompt span { margin-top: 3px; color: #64748b; font-size: 12px; line-height: 1.4; }
.sms-inbox-button {
  grid-column: 1 / -1; min-height: 42px; border: 1px solid #7dd3fc; border-radius: 11px;
  color: #075985; background: #fff; cursor: pointer; font-weight: 750;
}
.sms-inbox-button:hover { background: #e0f2fe; }

body.sms-demo-page {
  min-height: 100vh; margin: 0; overflow-x: hidden; color: #f8fafc;
  background: radial-gradient(circle at 50% 15%, #334155 0, #0f172a 44%, #020617 100%);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.phone-stage { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.phone-shell {
  position: relative; width: min(390px, 94vw); height: min(800px, 92vh); min-height: 620px;
  overflow: hidden; border: 9px solid #0b0b0d; border-radius: 48px; background: #f8fafc;
  box-shadow: 0 42px 100px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.1);
}
.phone-notch {
  position: absolute; z-index: 5; top: 9px; left: 50%; width: 112px; height: 28px;
  transform: translateX(-50%); border-radius: 18px; background: #050506;
}
.phone-notch span { position: absolute; top: 10px; left: 48px; width: 32px; height: 7px; border-radius: 5px; background: #16161a; }
.phone-statusbar {
  height: 48px; padding: 13px 22px 0; display: flex; justify-content: space-between; align-items: flex-start;
  color: #111827; background: #fff; font-size: 12px; font-weight: 800;
}
.phone-status-icons { font-size: 9px; letter-spacing: .3px; }
.sms-app-header {
  height: 72px; display: flex; align-items: center; gap: 11px; padding: 8px 14px;
  color: #0f172a; background: rgba(255,255,255,.96); border-bottom: 1px solid #e5e7eb;
}
.sms-back, .sms-more { color: #0284c7; }
.sms-back { width: 25px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 38px; line-height: 1; }
.sms-avatar {
  width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 42px; border-radius: 50%;
  color: #fff; background: linear-gradient(145deg, #075985, #38bdf8); font-size: 13px; font-weight: 850;
}
.sms-contact { min-width: 0; flex: 1; }
.sms-contact strong, .sms-contact span { display: block; }
.sms-contact strong { font-size: 15px; }
.sms-contact span { margin-top: 2px; color: #64748b; font-size: 11px; }
.sms-more { font-size: 17px; font-weight: 900; letter-spacing: 2px; }
.sms-thread {
  height: calc(100% - 184px); overflow-y: auto; padding: 18px 14px 28px;
  color: #111827; background: linear-gradient(rgba(248,250,252,.92), rgba(241,245,249,.96)),
    radial-gradient(circle at 20% 20%, #bae6fd 0 1px, transparent 1px);
  background-size: auto, 20px 20px;
}
.sms-date { margin-bottom: 18px; text-align: center; color: #64748b; font-size: 11px; font-weight: 700; }
.sms-message {
  width: 82%; padding: 13px 14px 9px; border-radius: 18px 18px 18px 5px;
  background: #fff; box-shadow: 0 5px 18px rgba(15,23,42,.08); border: 1px solid #e2e8f0;
}
.sms-message p { margin: 0 0 9px; font-size: 14px; line-height: 1.5; }
.sms-message time { display: block; color: #94a3b8; text-align: right; font-size: 10px; }
.sms-code {
  margin: 5px 0 10px; padding: 10px 8px; border-radius: 12px; color: #075985; background: #e0f2fe;
  text-align: center; font-size: 31px; font-weight: 900; letter-spacing: .25em; padding-left: calc(8px + .25em);
}
.sms-delivery-note { margin: 10px 0 0 6px; color: #94a3b8; font-size: 10px; }
.sms-loading-message { display: flex; flex-direction: column; align-items: flex-start; }
.sms-typing { display: flex; gap: 5px; margin-bottom: 10px; }
.sms-typing i { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: smsPulse 1.2s infinite ease-in-out; }
.sms-typing i:nth-child(2) { animation-delay: .15s; }
.sms-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes smsPulse { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.sms-composer {
  position: absolute; left: 0; right: 0; bottom: 19px; height: 64px; display: flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-top: 1px solid #e5e7eb; background: rgba(255,255,255,.98); color: #64748b;
}
.sms-plus { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: #e2e8f0; font-size: 22px; }
.sms-compose-field { flex: 1; padding: 9px 13px; border: 1px solid #cbd5e1; border-radius: 18px; font-size: 12px; }
.sms-mic { color: #0284c7; font-size: 13px; }
.phone-home-indicator {
  position: absolute; bottom: 7px; left: 50%; width: 128px; height: 5px; transform: translateX(-50%);
  border-radius: 10px; background: #111827;
}
@media (max-height: 690px) {
  .phone-stage { padding: 8px; }
  .phone-shell { height: 96vh; min-height: 560px; border-radius: 38px; }
}