* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; }
button { font: inherit; }

.verify-overlay {
  position: fixed; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
  overflow-x: hidden; overflow-y: auto; padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
  background: url("./nearby-bg.jpg") no-repeat center / cover,
    radial-gradient(circle at 15% 10%, rgb(0 156 59 / 10%), transparent 32%),
    radial-gradient(circle at 85% 38%, rgb(255 223 0 / 10%), transparent 30%),
    linear-gradient(180deg, #f8fdf5 0%, #fefdf2 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}
.verify-box { position: relative; width: 100%; max-width: 420px; padding: clamp(16px, 5vw, 24px) clamp(12px, 4vw, 20px) clamp(12px, 4vw, 20px); text-align: center; }
.verify-logo { display: flex; align-items: center; justify-content: center; width: clamp(56px, 15vw, 68px); height: clamp(56px, 15vw, 68px); margin: 0 auto clamp(12px, 3vw, 18px); color: #fff; border-radius: clamp(16px, 4vw, 20px); background: linear-gradient(145deg, #009c3b, #ffdf00); box-shadow: 0 14px 32px rgb(0 156 59 / 35%); }
.verify-box h1 { color: #1a5c2a; font-size: clamp(20px, 5.5vw, 26px); font-weight: 700; line-height: 1.35; letter-spacing: .3px; }
.verify-card { width: 100%; max-width: 420px; margin: clamp(14px, 4vw, 20px) auto 0; padding: clamp(16px, 4vw, 22px) clamp(12px, 4vw, 18px) clamp(14px, 4vw, 20px); border: 1px solid rgb(0 156 59 / 18%); border-radius: clamp(18px, 5vw, 24px); background: rgb(255 255 255 / 90%); box-shadow: 0 18px 50px rgb(0 102 33 / 10%); backdrop-filter: blur(16px); }
.verify-card-title { margin-bottom: 6px; color: #1a5c2a; font-size: clamp(14px, 3.5vw, 16px); font-weight: 600; }
.verify-card-tip { margin-bottom: clamp(14px, 3.5vw, 18px); color: #6b7a4d; font-size: clamp(11px, 2.8vw, 13px); }

.verify-slider { --x: 0px; --thumb-size: clamp(48px, 13vw, 54px); position: relative; height: var(--thumb-size); overflow: hidden; border: 2px solid rgb(0 156 59 / 40%); border-radius: calc(var(--thumb-size) / 2); background: #e8f5e0; box-shadow: inset 0 2px 6px rgb(0 80 20 / 6%); touch-action: none; cursor: grab; }
.verify-slider-progress { position: absolute; inset: 0 auto 0 0; width: calc(var(--x) + var(--thumb-size)); border-radius: inherit; background: linear-gradient(90deg, #009c3b, #ffdf00); opacity: .92; transition: width .2s ease; }
.verify-slider-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-left: calc(var(--thumb-size) * .67); color: #4a7a3a; font-size: clamp(12px, 3vw, 14px); letter-spacing: .4px; pointer-events: none; transition: opacity .2s ease; }
.verify-slider-text::after { content: "›"; display: inline-flex; align-items: center; height: 18px; margin-left: 6px; font-size: 27px; line-height: 18px; opacity: .5; }
.verify-slider-thumb { position: absolute; top: -2px; left: var(--x); z-index: 2; display: flex; align-items: center; justify-content: center; width: var(--thumb-size); height: var(--thumb-size); color: #fff; border-radius: 50%; background: linear-gradient(145deg, #009c3b, #ffdf00); box-shadow: 0 4px 20px rgb(0 156 59 / 40%); transition: left .2s ease, transform .15s ease; }
.thumb-arrow { width: 42%; height: 42%; }
.check { font-size: clamp(18px, 5vw, 22px); font-weight: 800; }
.verify-slider.dragging, .verify-slider:active { cursor: grabbing; }
.verify-slider.dragging .verify-slider-thumb, .verify-slider.dragging .verify-slider-progress { transition: none; }
.verify-slider.done .verify-slider-text { opacity: 0; }
.verify-slider.done .verify-slider-thumb { background: rgb(255 255 255 / 22%); box-shadow: none; }

.verify-countdown, .verify-routing { display: none; margin-top: 16px; padding: 18px 14px; border: 1px solid rgb(0 156 59 / 15%); border-radius: 18px; background: linear-gradient(135deg, rgb(0 156 59 / 10%), rgb(255 223 0 / 10%)); text-align: center; }
.verify-routing { padding: 22px 14px; }
.verify-countdown.show, .verify-routing.show { display: block; animation: verify-fade-up .35s ease both; }
.verify-countdown-number { color: #009c3b; font-size: clamp(30px, 8vw, 38px); font-weight: 700; line-height: 1; }
.verify-countdown-label, .verify-routing-subtitle { margin-top: 8px; color: #4a7a3a; font-size: clamp(11px, 2.8vw, 13px); }
.verify-routing-spinner { width: 34px; height: 34px; margin: 0 auto 12px; border: 4px solid rgb(0 156 59 / 16%); border-top-color: #009c3b; border-radius: 50%; animation: verify-spin .85s linear infinite; }
.verify-routing-title { color: #1a5c2a; font-size: clamp(15px, 3.5vw, 17px); font-weight: 700; line-height: 1.5; }
.verify-routing-subtitle { margin-top: 4px; color: #6b7a4d; }

.verify-share { margin-top: clamp(14px, 4vw, 20px); text-align: center; }
.verify-share-text { margin-bottom: 10px; color: #a6ebdf; font-size: clamp(12px, 3vw, 14px); font-weight: 600; text-shadow: 0 1px 2px rgb(255 255 255 / 60%); }
.verify-share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 126px; padding: clamp(10px, 3vw, 14px) clamp(20px, 5vw, 32px); color: #fff; border: 0; border-radius: 28px; background: linear-gradient(145deg, #25d366, #128c7e); box-shadow: 0 6px 24px rgb(18 140 126 / 40%); font-size: clamp(13px, 3.5vw, 15px); font-weight: 700; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.verify-share-btn:active { transform: scale(.95); box-shadow: 0 3px 12px rgb(18 140 126 / 30%); }
.verify-share-btn svg { width: 20px; height: 20px; fill: none; stroke: currentcolor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.verify-footer { padding-top: clamp(14px, 5vw, 24px); color: #a6ebdf; font-size: clamp(10px, 2.5vw, 12px); text-align: center; }

@keyframes verify-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes verify-spin { to { transform: rotate(360deg); } }
@media (max-height: 500px) and (orientation: landscape) {
  .verify-overlay { align-items: flex-start; padding-top: 8px; }
  .verify-logo { width: 38px; height: 38px; margin-bottom: 6px; border-radius: 10px; }
  .verify-box h1 { font-size: 17px; }
  .verify-card { margin-top: 8px; padding: 12px 14px; border-radius: 14px; }
  .verify-card-title { margin-bottom: 2px; font-size: 13px; }
  .verify-card-tip { margin-bottom: 10px; font-size: 11px; }
  .verify-slider { --thumb-size: 44px; }
  .verify-countdown, .verify-routing { margin-top: 8px; padding: 10px 12px; border-radius: 12px; }
  .verify-footer { padding-top: 8px; font-size: 10px; }
}
@media (max-width: 359px) {
  .verify-slider { --thumb-size: 44px; }
  .verify-slider-text { padding-left: 28px; font-size: 11px; }
  .verify-card { padding: 14px 10px; border-radius: 16px; }
}
@supports (padding: max(0px)) {
  .verify-box { padding-bottom: max(clamp(12px, 4vw, 20px), env(safe-area-inset-bottom)); }
  .verify-footer { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}