/* ============================================================
   远程预约 · 客户端样式
   手机优先（微信内置浏览器 / 手机浏览器），深色主题，零依赖。
   ============================================================ */

:root{
  --bg:#0f1116;
  /* 面板做成半透明 —— 背景图才透得出来。
     原先是不透明的实心深色，整屏从上到下全是实心块，
     背景图只在卡片缝隙里露出一丝，客户会觉得「背景压根没生效」（2026-10-06 老板反馈）。
     0.72 是折中值：背景明显看得见，白字依然清楚（底下还有 --bgdim 那层压暗兜着）。 */
  --panel:rgba(23,26,33,.72);
  --panel2:rgba(30,34,43,.72);
  --line:#2b3140;
  --tx:#e9ecf3;
  --mut:#98a1b3;
  --accent:#5eb0ff;
  --ok:#3ddc84;
  --warn:#ffc247;
  --bad:#ff6b6b;
  --r:14px;
  --r-sm:10px;

  /* 页面背景：一张外链图（管理端可换）+ 压暗程度。
     写在这里是为了首屏就有背景，不等接口回来；接口回来后由 app.js 覆盖。
     压暗这层必须有——浅色底图上的白字不压暗根本看不清。 */
  --bgimg:url("https://playerhub.df.qq.com/playerhub/fb1c3b7c-0ad9-466b-90e4-4b302a74e92c.jpg");
  --bgdim:.62;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* 作者样式会盖过浏览器默认的 [hidden]{display:none}，
   凡是自己写了 display 的元素，光加 hidden 属性是藏不住的。
   这条 !important 让 hidden 在任何情况下都真的隐藏。 */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  /* 两层背景：上面是压暗遮罩，下面是图。没配图时 --bgimg 为 none，只剩纯色 --bg */
  background-color:var(--bg);
  background-image:linear-gradient(180deg,rgba(9,11,15,var(--bgdim)) 0%,rgba(9,11,15,var(--bgdim)) 68%,rgba(11,13,18,.92) 100%),
                   var(--bgimg,none);
  background-repeat:no-repeat;
  background-position:center top;
  background-size:cover;
  color:var(--tx);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
       "Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}

.app{
  max-width:560px;margin:0 auto;
  padding:0 14px calc(20px + env(safe-area-inset-bottom));
}

/* ---------- 顶部品牌 ---------- */
.brand{
  display:flex;align-items:center;gap:10px;
  padding:calc(16px + env(safe-area-inset-top)) 0 12px;
}
.logo{
  width:36px;height:36px;flex:0 0 36px;border-radius:11px;
  background:linear-gradient(160deg,#26303f,#1b1f28);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.bt{min-width:0;flex:1}
.b1{font-size:14px;font-weight:600;letter-spacing:.2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b2{font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ghost{
  background:transparent;border:1px solid var(--line);color:var(--mut);
  border-radius:999px;padding:5px 11px;font-size:12px;
}
.ghost:active{background:var(--panel2)}

/* ---------- 视图切换 ---------- */
.view{display:none;animation:fade .22s ease}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- 主视觉 ---------- */
.hero{
  /* 同样半透明：Hero 是首屏最大的一块，做成实心会把背景图整个盖住 */
  background:linear-gradient(165deg,rgba(27,33,48,.86),rgba(21,25,32,.82));
  border:1px solid var(--line);border-radius:var(--r);
  padding:22px 18px;text-align:center;margin-bottom:12px;
}
.hero-label{font-size:12.5px;color:var(--mut);letter-spacing:.5px}
.hero-num{font-size:52px;font-weight:700;line-height:1.1;margin:6px 0 2px;
          font-variant-numeric:tabular-nums}
.hero-num small{font-size:16px;font-weight:500;color:var(--mut);margin-left:4px}
.hero-ticket{font-size:46px;font-weight:800;letter-spacing:2px;margin:6px 0 4px;
             font-variant-numeric:tabular-nums;color:var(--accent)}
.hero-sub{font-size:13.5px;color:var(--mut)}
.hero-sub b{color:var(--tx);font-size:16px}
.hero.serving{background:linear-gradient(165deg,#15251d,#141a19)}
.hero-timer{font-size:48px;font-weight:700;letter-spacing:1px;margin:6px 0 2px;
            font-variant-numeric:tabular-nums;color:var(--ok);line-height:1.1}

/* ---------- 卡片 ---------- */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:15px;margin-bottom:12px;
}
.card.center{text-align:center}
.card.tip{background:var(--panel2)}

/* 完成页的注意事项：后台配的多行文案，按原样换行 */
.card.notes{text-align:left}
.notes-h{font-size:13px;font-weight:600;margin-bottom:8px}
.notes-b{font-size:13.5px;line-height:1.75;color:var(--tx);white-space:pre-wrap;word-break:break-word}
.tip-h{font-size:13px;font-weight:600;margin-bottom:8px;color:var(--tx)}
/* 文字链接（取号页「下载连连控」用）*/
.link{display:inline-block;margin-top:8px;font-size:12.5px;color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22)}
.link:hover{border-bottom-color:var(--accent)}
#jTool{margin-top:6px;margin-bottom:2px}
.urge-h{font-size:13px;font-weight:600;margin-bottom:6px;color:var(--tx)}
#wUrgeCd{margin-top:8px}
.card.tip ol,.card.tip ul{margin:0;padding-left:20px;color:var(--mut);font-size:13px}
.card.tip li{padding:3px 0}
.card.tip b{color:var(--tx);font-weight:600}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px}
.stat .k{font-size:11.5px;color:var(--mut)}
.stat .v{font-size:16px;font-weight:600;margin-top:2px}

/* ---------- 行 ---------- */
.row{display:flex;align-items:center;gap:10px;padding:8px 0;
     border-bottom:1px solid rgba(43,49,64,.6)}
.row:last-child{border-bottom:0}
.row .k{font-size:12.5px;color:var(--mut);flex:0 0 auto}
.row .v{margin-left:auto;font-size:13.5px;text-align:right;
        word-break:break-all;min-width:0}
.row .v.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.row .v.accent{color:var(--accent);font-weight:600}
.row .v.ok{color:var(--ok)}
.row .btn{margin-left:auto}
.row .v+.btn{margin-left:8px}

/* ---------- 表单 ---------- */
.lb{display:block;font-size:12.5px;color:var(--mut);margin:12px 0 6px}
.lb:first-child{margin-top:2px}
.lb.small{font-size:12px}
.lb .req{color:var(--bad);font-size:11px;margin-left:4px}
.lb .opt{color:var(--mut);font-size:11px;margin-left:4px;opacity:.75}

.ipt{
  width:100%;background:var(--bg);border:1px solid var(--line);color:var(--tx);
  border-radius:var(--r-sm);padding:12px 13px;font-size:16px; /* 16px 防 iOS 缩放 */
  outline:none;transition:border-color .15s;
}
.ipt::placeholder{color:#5c6577}
.ipt:focus{border-color:var(--accent)}
.ipt.bad{border-color:var(--bad)}

.hint{font-size:12px;color:var(--mut);margin-top:8px;line-height:1.55}
.err{font-size:12.5px;color:var(--bad);margin-top:6px;line-height:1.5}

/* ---------- 按钮 ---------- */
.btn{
  display:block;width:100%;border:0;border-radius:var(--r-sm);
  padding:13px 16px;font-size:15px;font-weight:600;cursor:pointer;
  text-align:center;text-decoration:none;line-height:1.4;
  transition:opacity .15s,background .15s;
  font-family:inherit;
}
.btn:active{opacity:.82}
.btn.primary{background:var(--accent);color:#08111c;margin-top:16px}
.btn.line{background:transparent;border:1px solid var(--line);color:var(--tx);margin-top:10px}
.btn.text{background:transparent;color:var(--mut);font-weight:500;margin-top:8px;padding:10px}
.btn.danger-line{background:transparent;border:1px solid rgba(255,107,107,.4);
                 color:var(--bad);font-weight:500;margin-top:4px}
.btn.copy.mini{width:auto;padding:5px 11px;font-size:12px;font-weight:500;
               background:var(--panel2);border:1px solid var(--line);color:var(--accent);
               border-radius:999px;margin-top:0}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-row{display:flex;gap:8px}
.btn-row .btn{margin-top:14px}

/* ---------- 进度条 ---------- */
.progress{height:6px;background:var(--panel2);border-radius:99px;overflow:hidden;margin:2px 0 12px}
.progress i{display:block;height:100%;width:0;border-radius:99px;
            background:linear-gradient(90deg,#3d8bfd,#7cc4ff);transition:width .5s ease}

/* ---------- 提示块 ---------- */
.alert{border-radius:var(--r-sm);padding:11px 13px;font-size:13px;margin-bottom:12px;line-height:1.55}
.alert.info{background:rgba(94,176,255,.1);border:1px solid rgba(94,176,255,.28);color:#bcdcff}
.alert.warn{background:rgba(255,194,71,.1);border:1px solid rgba(255,194,71,.3);color:#ffdfa3}

.muted{color:var(--mut)}
.small{font-size:12px;line-height:1.6}
.center{text-align:center}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.link{display:inline-block;color:var(--accent);text-decoration:none;font-size:13px;margin-top:10px}
.ttl{font-size:17px;font-weight:600;margin:6px 0 14px}

/* ---------- 到号：整屏高亮 ---------- */
.view.called{
  position:relative;
  background:radial-gradient(120% 70% at 50% 0%,rgba(94,176,255,.22),transparent 62%);
  border-radius:var(--r);
  padding:8px 0 4px;
  animation:pulse 1.9s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(94,176,255,.30)}
  50%{box-shadow:0 0 34px 6px rgba(94,176,255,.16)}
}
.called-ring{font-size:56px;text-align:center;line-height:1;animation:ring 1.1s ease-in-out infinite}
@keyframes ring{
  0%,100%{transform:rotate(-11deg) scale(1)}
  25%{transform:rotate(11deg) scale(1.07)}
  50%{transform:rotate(-7deg) scale(1)}
  75%{transform:rotate(7deg) scale(1.05)}
}
.called-title{text-align:center;font-size:24px;font-weight:800;margin:6px 0 2px;
              color:var(--accent);letter-spacing:1px}
.called-ticket{text-align:center;font-size:44px;font-weight:800;letter-spacing:2px;
               font-variant-numeric:tabular-nums;margin:2px 0 10px}
.called-tip{text-align:center;font-size:13.5px;color:var(--mut);line-height:1.7;
            margin:0 10px 14px}
.called-tip b{color:var(--tx)}
.view.called .btn.primary{margin-top:6px}
.linkcard{background:var(--panel2)}

/* ---------- 结果页 ---------- */
.big-ico{font-size:54px;text-align:center;line-height:1;margin:14px 0 6px}
.reason{font-size:14.5px;line-height:1.7;color:#ffd9a3}
.done-dur{font-size:46px;font-weight:700;color:var(--ok);line-height:1.15;margin:4px 0}
.done-dur small{font-size:15px;font-weight:500;color:var(--mut);margin-left:5px}
.thanks{text-align:center;color:var(--mut);font-size:13.5px;margin:2px 0 16px}

/* ---------- 加载 ---------- */
#v-loading{padding:60px 0}
.spinner{
  width:26px;height:26px;margin:0 auto 12px;border-radius:50%;
  border:2.5px solid var(--line);border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 页脚 ---------- */
.foot{text-align:center;color:#5c6577;font-size:11.5px;padding:14px 0 4px}

/* ---------- 轻提示 ---------- */
.toast{
  position:fixed;left:50%;bottom:38px;transform:translateX(-50%) translateY(8px);
  background:#242a36;border:1px solid var(--line);color:var(--tx);
  padding:10px 16px;border-radius:999px;font-size:13.5px;max-width:86vw;
  text-align:center;opacity:0;transition:opacity .2s,transform .2s;
  z-index:60;pointer-events:none;box-shadow:0 8px 26px rgba(0,0,0,.45);
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 大屏微调 ---------- */
@media (min-width:600px){
  .hero-num{font-size:58px}
  .hero-ticket{font-size:52px}
}