:root{
  --bg:#0b1220; --panel:#0f172a; --line:#1f2937; --fg:#e5eef8; --muted:#94a3b8;
  --brand:#22d3ee; --brand2:#0ea5e9; --ok:#10b981; --warn:#f59e0b; --danger:#ef4444;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
  color:var(--fg);background:linear-gradient(180deg,#0b1220,#0e172a);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.container{max-width:720px;margin:0 auto;padding:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;margin:12px 0;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.header{display:flex;gap:6px;justify-content:center;margin:8px 0}
.badge{padding:3px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px}
.h{font-size:20px;font-weight:800;margin:0 0 10px}
.p{margin:6px 0;color:var(--muted);font-size:14px}
.center{text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 16px;border:0;border-radius:14px;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand2));cursor:pointer;box-shadow:0 12px 30px rgba(14,165,233,.25);text-decoration:none}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn.secondary{background:#1e293b;color:#e5eef8}
.btn.warn{background:linear-gradient(135deg,#f59e0b,#f97316)}
.btn.ok{background:linear-gradient(135deg,#22c55e,#10b981)}
.btn.ghost{background:transparent;border:1px dashed var(--line);color:var(--fg)}
.small{font-size:12px;color:var(--muted)}
.progress{height:10px;background:#0b1220;border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--ok));width:75%;animation:grow 1.2s ease-out}
@keyframes grow{from{width:0}to{width:75%}}

.marquee{overflow:hidden;height:28px}
.marquee .lane{white-space:nowrap;display:inline-block;animation:scroll 14s linear infinite;color:var(--muted);font-size:13px}
@keyframes scroll{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
.count{font-weight:800;color:#fff}

.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.kv .tile{border:1px dashed var(--line);border-radius:12px;padding:10px;text-align:center}
.kv .tile img{width:52px;height:52px;border-radius:10px;object-fit:cover;display:block;margin:0 auto 6px}
.kv .tile b{display:block;color:#fff;font-size:13px}

.wheel{position:relative;height:200px;margin:8px auto 0;border-radius:50%;background:#0b1220;border:1px dashed var(--line);overflow:hidden}
.wheel img{position:absolute;width:70px;height:70px;border-radius:50%;object-fit:cover;opacity:.85;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.wheel .c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), rgba(255,255,255,.05) 40%, transparent 60%), linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 12px 30px rgba(14,165,233,.35);}
.wheel .pin{position:absolute;left:50%;top:-8px;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:12px solid var(--warn)}

.input{width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:#0b1220;color:var(--fg)}
.label{display:block;margin:8px 4px;font-size:13px;color:var(--muted)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1 1 210px}
.copy{padding:12px;border:1px dashed var(--line);border-radius:12px;background:#0b1220;color:var(--fg);word-break:break-all}
.tip{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 8px;display:inline-block;margin:2px 4px}
.hl{color:#fff}
.timer{font-variant-numeric:tabular-nums}

.step{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted)}
.step i{width:10px;height:10px;border-radius:50%;display:inline-block;background:#1f2937}
.step.on i{background:var(--ok)}
.step .txt{position:relative}
/* 动态省略号动画 */
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}100%{content:""}}
/* 让省略号在文字右侧向右增长（看起来从左到右） */
.step .txt{ position:relative; }  /* 确保锚点基于文字本身 */
.step.is-active .txt::after{
  content:"";
  position:absolute;
  left: calc(100% + 4px);  /* ← 锚在左侧，紧跟文字之后 */
  top: 0;
  right: auto;             /* 取消右锚点 */
  animation: dots 1s steps(4,end) infinite;
  color: var(--muted);
}

.dim{opacity:.6}
hr{border:0;border-top:1px solid var(--line);margin:12px 0}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:1000}
.sheet{width:min(640px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.45);padding:16px;position:relative}
.sheet .title{font-weight:800;margin:0 0 8px}
.sheet .actions{display:flex;gap:10px;margin-top:12px}
.close{position:absolute;right:12px;top:12px;background:transparent;border:0;color:var(--muted);font-size:20px}

.footer{opacity:.7;font-size:12px;margin-top:24px;text-align:center}

.bar{height:10px;background:#0b1220;border-radius:999px;overflow:hidden;border:1px solid var(--line);margin:8px 0 4px}
.bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--ok));transition:width .4s ease}
.flow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0}
.flow .item{display:inline-flex;gap:6px;align-items:center;color:var(--muted);font-size:14px}
.flow .item i{width:8px;height:8px;border-radius:50%;background:#1f2937}
.flow .item.on i{background:var(--ok)}


/* ==== Mobile enhancements (non-intrusive) - V6_P1_Patch ==== */
img, video { max-width: 100%; height: auto; display: block; }

@media (max-width: 360px){
  .container{ padding:12px; }
  .h{ font-size:18px; }
  .p, .flow .item{ font-size:13px; }
  .btn{ padding:12px 14px; }
}

/* iOS safe-area support when in fullscreen */
:root{ --safe: env(safe-area-inset-bottom); }
body{ padding-bottom: calc(var(--safe, 0px)); }
.footer{ padding-bottom: calc(var(--safe, 0px)); }

/* Respect system reduced motion */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Ensure comfortable touch targets (only applies if height would be smaller) */
.btn{ min-height: 44px; }
input[type="text"], input[type="tel"], input[type="number"], input[type="password"], button, select, textarea{
  min-height: 44px;
}
/* ==== End V6_P1_Patch ==== */