/* ============================================================
   金禧国际 — 注册 / 登录页
   色票集中在 :root，换品牌只要改这里
   ============================================================ */
:root{
  --gold-1:#d9c08a;
  --gold-2:#b3924f;
  --gold-3:#8d6f35;
  --gold-line:#c9a227;

  --page-bg:#efece6;
  --card-bg:#ffffff;
  --promo-bg:#fffdf7;

  --text:#2d2a26;
  --text-sub:#8b8579;
  --placeholder:#b6b0a4;
  --field-bg:#f6f4f0;
  --field-line:#e4e0d7;

  --red:#e02020;
  --red-deep:#b31010;
  --blue:#1553c7;
  --orange:#ef7c10;
  --green:#18b14b;
  --err:#e03131;

  --radius:10px;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC",
          "Microsoft YaHei", "Noto Sans Thai", "Leelawadee UI", Tahoma,
          "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(120% 60% at 50% 0%, #f7f4ee 0%, var(--page-bg) 60%),
    var(--page-bg);
  min-height:100vh;
  display:flex;
  justify-content:center;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- 手机外框 ---------- */
.phone{
  width:100%;
  max-width:420px;
  min-height:100vh;
  background:var(--page-bg);
  padding:0 0 28px;
  box-shadow:0 0 40px rgba(0,0,0,.08);
}

/* ---------- 顶部栏 ----------
   左右两栏等宽，品牌永远置中 */
.topbar{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:10px 12px 6px;
}
.back{
  justify-self:start;
  width:34px; height:34px;
  border:0; background:transparent;
  color:#4a453d;
  display:grid; place-items:center;
  cursor:pointer; border-radius:50%;
  transition:background .15s;
}
.back:active{ background:rgba(0,0,0,.06); }

.brand{ display:flex; align-items:center; gap:7px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-name{
  font-size:16px; font-weight:800; letter-spacing:2px;
  background:linear-gradient(180deg,#e8d29a,#a9812f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-sub{
  font-size:9px; letter-spacing:1.4px; color:var(--gold-2); font-weight:600;
}

/* 语言切换 */
.lang{
  justify-self:end;
  position:relative;
  display:flex; align-items:center; gap:3px;
  height:28px; padding:0 6px 0 7px;
  border:1px solid var(--field-line);
  border-radius:999px;
  background:var(--card-bg);
  color:#6b655a;
  cursor:pointer;
}
.lang-ico{
  flex:none; width:15px; height:15px;
  fill:none; stroke:currentColor; stroke-width:1.6;
}
.lang select{
  -webkit-appearance:none; appearance:none;
  border:0; background:transparent; outline:none;
  font-family:inherit; font-size:12px; color:inherit;
  padding:0 12px 0 0;
  max-width:78px;
  cursor:pointer;
  /* 小三角 */
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:right 4px center, right 0 center;
  background-size:4px 4px, 4px 4px;
  background-repeat:no-repeat;
}
.lang:focus-within{ border-color:var(--gold-line); }

/* ---------- 卡片 ---------- */
.card{
  margin:0 12px;
  background:var(--card-bg);
  border-radius:14px;
  padding:0 0 18px;
  box-shadow:0 6px 24px rgba(90,70,30,.10);
  overflow:hidden;
}

/* ---------- 促销横幅 ---------- */
.promo{
  position:relative;
  padding:16px 14px 14px;
  background:
    radial-gradient(90% 70% at 50% 0%, #fffaf0 0%, var(--promo-bg) 70%),
    var(--promo-bg);
  border-bottom:1px solid #f1ece0;
  text-align:center;
  overflow:hidden;
}
.promo-title{
  margin:0 0 6px;
  font-size:23px; font-weight:900; letter-spacing:1px;
  background:linear-gradient(180deg,#ff5a3c 0%, var(--red) 45%, var(--red-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:.4px rgba(255,214,120,.9);
  text-shadow:0 2px 0 rgba(255,224,150,.55);
}
.promo-list{
  list-style:none; margin:0 0 10px; padding:0;
  display:flex; flex-direction:column; gap:6px;
  align-items:center;
}
.promo-list li{ display:flex; align-items:center; gap:7px; }
.badge{
  flex:none;
  font-size:11px; font-weight:800; color:#fff;
  padding:2px 9px; border-radius:999px;
  background:linear-gradient(180deg,#ff7a4d,#e23a12);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
  white-space:nowrap;
}
.promo-list .txt{ font-size:14px; font-weight:800; color:#33302b; }
.promo-list .hl{
  color:var(--red); font-size:17px; margin:0 2px;
  font-style:italic;
}
.promo-foot{
  margin:0;
  font-size:13px; font-weight:800; color:var(--red);
  letter-spacing:.2px;
}
/* 两侧角色图占位：想放图就把 background 换成 url(...) */
.promo-mascot{
  position:absolute; bottom:6px; width:52px; height:78px;
  opacity:.5; pointer-events:none;
  background:linear-gradient(180deg,#ffd98a,rgba(255,217,138,0));
  border-radius:26px 26px 6px 6px;
  filter:blur(.3px);
}
.promo-mascot--left{ left:-6px; transform:rotate(-6deg); }
.promo-mascot--right{ right:-6px; transform:rotate(6deg); }

/* ---------- 分页 ---------- */
.tabs{
  position:relative;
  display:flex;
  border-bottom:1px solid #eeeae1;
  margin:0 0 4px;
}
.tab{
  flex:1;
  border:0; background:transparent;
  padding:14px 0 12px;
  font-family:inherit; font-size:16px; font-weight:700;
  color:var(--text-sub); cursor:pointer;
  transition:color .2s;
}
.tab.is-active{ color:var(--text); font-weight:800; }
.tab-ink{
  position:absolute; bottom:-1px; left:0;
  width:50%; height:3px;
  display:block;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.tab-ink::after{
  content:""; display:block;
  width:34px; height:3px; margin:0 auto;
  border-radius:3px;
  background:linear-gradient(90deg,#ffb45a,var(--orange));
}

/* ---------- 表单 ---------- */
.pane{ display:none; padding:14px 16px 0; }
.pane.is-active{ display:block; animation:fade .22s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

.pane-note{
  margin:0 0 10px;
  font-size:12.5px; color:var(--text-sub);
}

.field{
  display:flex; align-items:center; gap:8px;
  height:46px; padding:0 12px;
  background:var(--field-bg);
  border:1px solid var(--field-line);
  border-radius:var(--radius);
  transition:border-color .18s, background .18s;
}
.field:focus-within{ border-color:var(--gold-line); background:#fffdf8; }
.field.is-error{ border-color:var(--err); background:#fff6f6; }

.ico{ flex:none; width:20px; height:20px; color:#a9a294; display:block; }
.ico svg{
  width:20px; height:20px;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.field:focus-within .ico{ color:var(--gold-2); }

.field input{
  flex:1; min-width:0;
  border:0; background:transparent; outline:none;
  font-family:inherit; font-size:15px; color:var(--text);
}
.field input::placeholder{ color:var(--placeholder); font-size:14px; }

/* 眼睛 */
.eye{
  flex:none; width:26px; height:26px;
  border:0; background:transparent; cursor:pointer;
  position:relative;
}
.eye::before{
  content:""; position:absolute; inset:0;
  background:currentColor; color:#a9a294;
  -webkit-mask:var(--eye-off) center/22px 22px no-repeat;
  mask:var(--eye-off) center/22px 22px no-repeat;
}
.eye.is-on::before{
  -webkit-mask-image:var(--eye-on); mask-image:var(--eye-on);
  color:var(--gold-2);
}
:root{
  --eye-off:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'><path d='M3 12s3.6-6 9-6 9 6 9 6-3.6 6-9 6-9-6-9-6z'/><circle cx='12' cy='12' r='2.6'/><path d='M4 20L20 4'/></svg>");
  --eye-on:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'><path d='M3 12s3.6-6 9-6 9 6 9 6-3.6 6-9 6-9-6-9-6z'/><circle cx='12' cy='12' r='2.6'/></svg>");
}

/* 错误讯息 */
.err{
  margin:4px 2px 0; min-height:16px;
  font-size:12px; color:var(--err); line-height:16px;
}

/* 勾选框 */
.check{
  display:flex; align-items:flex-start; gap:8px;
  margin:6px 2px 2px;
  cursor:pointer; user-select:none;
}
.check input{ position:absolute; opacity:0; width:0; height:0; }
.box{
  flex:none; width:18px; height:18px; margin-top:1px;
  border:1.5px solid #cfc9bd; border-radius:4px;
  background:#fff;
  display:grid; place-items:center;
  transition:all .15s;
}
.box::after{
  content:""; width:9px; height:5px;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(.4); opacity:0;
  transition:all .15s;
  margin-top:-2px;
}
.check input:checked + .box{
  background:var(--green); border-color:var(--green);
}
.check input:checked + .box::after{ opacity:1; transform:rotate(-45deg) scale(1); }
.check-txt{ font-size:13px; color:#5f5950; line-height:20px; }
.check--sm .check-txt{ font-size:12.5px; }
.check.is-error .box{ border-color:var(--err); }

.link{ color:var(--gold-2); text-decoration:none; font-weight:600; }

.row-between{
  display:flex; align-items:center; justify-content:space-between;
  margin:8px 2px 0;
  font-size:12.5px;
}

/* 主按钮 */
.submit{
  width:100%; height:46px; margin-top:16px;
  border:0; border-radius:var(--radius);
  background:linear-gradient(180deg,var(--gold-1) 0%, var(--gold-2) 55%, var(--gold-3) 100%);
  box-shadow:0 0 0 3px rgba(201,162,39,.14), 0 3px 8px rgba(141,111,53,.28);
  font-family:inherit; font-size:16px; font-weight:800; letter-spacing:4px;
  color:#fffdf5; cursor:pointer;
  transition:transform .12s, filter .15s;
}
.submit:active{ transform:translateY(1px); filter:brightness(.95); }
.submit:disabled{ filter:grayscale(.4) brightness(.95); cursor:default; }

/* ---------- 底部 ---------- */
.bind{ margin-top:26px; text-align:center; }
.bind-title{
  display:inline-block; font-size:12.5px; color:#a49d90;
  position:relative;
}
.bind-title::before,.bind-title::after{
  content:""; position:absolute; top:50%; width:46px; height:1px;
  background:#e8e3d9;
}
.bind-title::before{ left:-56px; }
.bind-title::after{ right:-56px; }
.bind-icons{ margin-top:10px; display:flex; justify-content:center; gap:14px; }
.bind-icon{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background:#29a9eb; color:#fff; text-decoration:none;
  box-shadow:0 2px 6px rgba(41,169,235,.35);
}

/* ---------- 倒计时遮罩 ---------- */
.countdown{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center;
  background:rgba(24,21,17,.55);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0; visibility:hidden;
  transition:opacity .22s ease, visibility .22s;
}
.countdown.is-show{ opacity:1; visibility:visible; }

.cd-box{
  display:flex; flex-direction:column; align-items:center;
  max-width:calc(100vw - 48px);
  padding:26px 34px 20px;
  border-radius:16px;
  background:rgba(255,253,247,.96);
  box-shadow:0 12px 40px rgba(0,0,0,.3);
  transform:scale(.88);
  transition:transform .26s cubic-bezier(.2,1.2,.4,1);
}
.countdown.is-show .cd-box{ transform:scale(1); }

.cd-ring{ position:relative; width:118px; height:118px; }
.cd-ring svg{
  width:100%; height:100%;
  transform:rotate(-90deg);          /* 从 12 点钟方向开始 */
}
.cd-track{
  fill:none; stroke:#ece5d4; stroke-width:8;
}
.cd-bar{
  fill:none; stroke:var(--gold-2);
  stroke-width:8; stroke-linecap:round;
  stroke-dashoffset:0;               /* 由 JS 控制 */
}
.cd-num{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:44px; font-weight:800; font-variant-numeric:tabular-nums;
  color:var(--gold-3);
  line-height:1;
}
.cd-num.tick{ animation:cdPop .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes cdPop{
  0%  { transform:scale(1.45); opacity:.25; }
  55% { transform:scale(.94);  opacity:1; }
  100%{ transform:scale(1); }
}
/* 最后 3 秒转红提醒 */
.cd-ring.is-hurry .cd-bar{ stroke:var(--red); }
.cd-ring.is-hurry .cd-num{ color:var(--red); }

.cd-text{
  margin:14px 0 0;
  font-size:14px; font-weight:600; color:#5f5950;
  text-align:center;
}
.cd-cancel{
  margin-top:12px;
  border:1px solid #ddd6c8; border-radius:999px;
  background:transparent;
  padding:6px 22px;
  font-family:inherit; font-size:13px; color:#8b8579;
  cursor:pointer;
  transition:background .15s;
}
.cd-cancel:active{ background:rgba(0,0,0,.05); }

@media (prefers-reduced-motion: reduce){
  .cd-bar{ transition:none !important; }
  .cd-num.tick{ animation:none; }
}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:64px;
  transform:translate(-50%,16px);
  max-width:300px; padding:10px 18px;
  background:rgba(32,29,25,.92); color:#fff;
  font-size:13.5px; line-height:1.5; text-align:center;
  border-radius:8px;
  opacity:0; pointer-events:none;
  transition:opacity .22s, transform .22s;
  z-index:99;
}
.toast.is-show{ opacity:1; transform:translate(-50%,0); }

/* ---------- 非中文语言微调 ----------
   英 / 泰 / 越文字较长，缩小标题、取消宽字距，避免挤爆 */
html:not([lang^="zh"]) .promo-title{ font-size:19px; letter-spacing:0; line-height:1.3; }
html:not([lang^="zh"]) .promo-list li{ max-width:100%; }
html:not([lang^="zh"]) .promo-list .txt{ font-size:13px; text-align:left; }
html:not([lang^="zh"]) .promo-foot{ font-size:12px; }
html:not([lang^="zh"]) .tab{ font-size:15px; }
html:not([lang^="zh"]) .submit{ letter-spacing:1px; }
/* 泰文有上下标音符，行高要够 */
html[lang="th"] .check-txt,
html[lang="th"] .err{ line-height:1.6; }

/* ---------- 非 iPhone Safari 警告遮罩 ----------
   guard.js 在 <html> 加上 gate-on 时显示，同时隐藏整个页面 */
.gate{ display:none; }
html.gate-on .phone,
html.gate-on .countdown,
html.gate-on .toast{ display:none !important; }
html.gate-on body{ align-items:center; }
html.gate-on .gate{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:100vh; padding:24px 16px;
}
.gate-box{
  position:relative;
  width:100%; max-width:360px;
  padding:44px 22px 22px;
  border-radius:16px;
  background:var(--card-bg);
  box-shadow:0 8px 30px rgba(90,70,30,.14);
  text-align:center;
}
.gate-lang{ position:absolute; top:12px; right:12px; }
.gate-ico{ width:64px; height:64px; margin:0 auto 12px; color:var(--gold-2); }
.gate-ico svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linejoin:round; }
.gate-ico svg circle:last-child{ fill:currentColor; }
.gate-title{ margin:0 0 8px; font-size:18px; font-weight:800; color:var(--text); line-height:1.4; }
.gate-desc{ margin:0 0 14px; font-size:13.5px; color:var(--text-sub); line-height:1.6; }
.gate-tip{
  display:none;
  margin:0 0 14px; padding:10px 12px;
  border-radius:var(--radius);
  background:#fff7e6; border:1px solid #f3dfae;
  font-size:13px; color:#7a5a17; line-height:1.6; text-align:left;
}
html.gate-inapp  .gate-tip--inapp,
html.gate-device .gate-tip--device{ display:block; }
.gate-url{
  width:100%; height:40px; padding:0 10px;
  border:1px solid var(--field-line); border-radius:var(--radius);
  background:var(--field-bg); color:var(--text-sub);
  font-family:inherit; font-size:12.5px;
  outline:none; text-overflow:ellipsis;
}
.gate-url:focus{ border-color:var(--gold-line); }
.gate-copy{
  width:100%; height:44px; margin-top:10px;
  border:0; border-radius:var(--radius);
  background:linear-gradient(180deg,var(--gold-1) 0%, var(--gold-2) 55%, var(--gold-3) 100%);
  font-family:inherit; font-size:15px; font-weight:800; color:#fffdf5;
  cursor:pointer;
}
.gate-copy:active{ filter:brightness(.95); }
.gate-msg{ margin:10px 0 0; min-height:18px; font-size:12.5px; color:var(--green); line-height:1.5; }
.gate-msg.is-fail{ color:var(--err); }
html[lang="th"] .gate-title,
html[lang="th"] .gate-desc,
html[lang="th"] .gate-tip{ line-height:1.7; }

/* ---------- 深色模式 ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --page-bg:#171512;
    --card-bg:#201d19;
    --promo-bg:#241f18;
    --text:#f0ece4;
    --text-sub:#9a9285;
    --placeholder:#7c7568;
    --field-bg:#2a2621;
    --field-line:#3a352d;
  }
  .card{ box-shadow:0 6px 24px rgba(0,0,0,.4); }
  .promo{ border-bottom-color:#332d24; }
  .tabs{ border-bottom-color:#332d24; }
  .promo-list .txt{ color:#ece7dd; }
  .check-txt{ color:#c3bcb0; }
  .box{ background:#2a2621; border-color:#4a443a; }
  .lang{ color:#c3bcb0; }
  .lang select option{ background:#201d19; color:#f0ece4; }
  .bind-title::before,.bind-title::after{ background:#3a352d; }
  body{ background:var(--page-bg); }
  .cd-box{ background:rgba(36,31,24,.97); }
  .cd-track{ stroke:#3a342a; }
  .cd-num{ color:var(--gold-1); }
  .cd-text{ color:#c3bcb0; }
  .cd-cancel{ border-color:#4a443a; color:#a49d90; }
  .gate-box{ box-shadow:0 8px 30px rgba(0,0,0,.4); }
  .gate-tip{ background:#2e2718; border-color:#4a3d22; color:#e3c77f; }
}