/* 灵犀 AURORA · 兑换页（全屏深色） */

/* ---- 滚动条 ----
   本页是金色会员主题，base.css 的全局紫青 10px 在这儿撞色。

   踩过的坑（Chrome 149 实测）：只要标准属性 scrollbar-width 生效，
   ::-webkit-scrollbar 的 width 就被完全忽略 —— base.css 里那条
   *{scrollbar-width:thin} 命中 html，把宽度锁死在 Chrome 的 thin(10px)，
   所以之前写多少遍 html::-webkit-scrollbar{width:8px} 都没用。
   实测：把 scrollbar-width 改回 auto 后，webkit 的 22px 立刻生效。

   所以这里必须先把标准属性让开，再用 WebKit 伪元素接管（才做得出渐变）。
   选择器要跟 base.css 一致用裸的 ::-webkit-scrollbar：视口滚动条在本页由
   html 承担，但 base 那条是通配规则，写 html:: 反而盖不住。
   本文件只被 redeem.html 引用且加载在 base.css 之后，同选择器后来者胜。 */
html{scrollbar-width:auto;scrollbar-color:auto}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,216,155,.55),rgba(255,200,107,.36));
  border:2px solid transparent;
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(255,216,155,.95),rgba(255,159,69,.7));
  background-clip:padding-box;
}
::-webkit-scrollbar-corner{background:transparent}

.rd-body{
  background:
    radial-gradient(110% 80% at 50% -8%,rgba(38,29,12,.62),transparent 58%),
    linear-gradient(180deg,var(--bg-0),var(--bg-1) 60%,var(--bg-0));
  min-height:100vh;
}
.rd-main{
  position:relative;overflow:hidden;
  min-height:calc(100vh - var(--nav-h));
  padding:56px 0 76px;
}
.rd-band{opacity:.6}
.rd-g1{top:-190px;left:-150px}
.rd-g2{
  width:440px;height:440px;bottom:-190px;right:-140px;
  background:radial-gradient(circle,rgba(255,200,107,.45),transparent 68%);
  animation:au-drift 28s ease-in-out infinite;
}
.rd-inner{position:relative;z-index:2;max-width:680px}

.rd-head{text-align:center;margin-bottom:28px}
.rd-head .au-badge{margin-bottom:18px}
.rd-head h1{font-size:clamp(28px,5.4vw,46px);line-height:1.18;margin-bottom:12px}
.rd-head p{font-size:14.5px;color:var(--tx-2);max-width:520px;margin:0 auto;line-height:1.8}

/* 状态条 */
.rd-status{padding:18px 20px;border-radius:var(--r-lg);margin-bottom:18px}
.rd-status-line{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--tx-0)}
.rd-status-dot{
  width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  background:var(--tx-3);
}
.rd-status.is-member .rd-status-dot{background:var(--gold);box-shadow:0 0 10px var(--gold)}
.rd-status.is-free .rd-status-dot{background:var(--aurora-2);box-shadow:0 0 10px var(--aurora-2)}
.rd-status.is-guest .rd-status-dot{background:var(--aurora-4)}
.rd-status-txt{flex:1 1 auto;min-width:0;line-height:1.6}
.rd-status-act{
  flex:0 0 auto;font-size:13px;font-weight:600;color:var(--aurora-2);
  padding:4px 8px;border-radius:7px;
}
@media (hover:hover) and (pointer:fine){
  .rd-status-act:hover{color:var(--aurora-3);background:var(--glass-2)}
}

.rd-days{
  display:flex;align-items:center;gap:18px;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
}
.rd-ring{position:relative;width:88px;height:88px;flex:0 0 auto}
.rd-ring svg{width:88px;height:88px}
#rdArc{transition:stroke-dashoffset .9s cubic-bezier(.3,.8,.3,1)}
.rd-ring b{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:800;color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.rd-days-txt strong{display:block;font-size:15px;color:var(--tx-0)}
.rd-days-txt small{display:block;margin-top:4px;font-size:12.5px}

/* 兑换卡 */
.rd-card{padding:26px 24px;border-radius:var(--r-xl);margin-bottom:18px;position:relative}
.rd-card::before{
  content:"";position:absolute;left:30px;right:30px;top:-1px;height:1px;
  background:var(--grad-gold);opacity:.85;
}
.rd-card-title{font-size:19px;margin-bottom:18px}
.rd-input{
  font-size:19px;letter-spacing:.14em;font-weight:700;
  text-align:center;text-transform:uppercase;
  min-height:56px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.rd-input::placeholder{letter-spacing:.14em;font-weight:500;color:var(--tx-3)}
.rd-input:focus{border-color:rgba(255,200,107,.65);box-shadow:0 0 0 3px rgba(255,200,107,.16)}
.rd-input.is-ok{border-color:rgba(0,229,192,.6)}
.rd-input.is-bad{border-color:rgba(255,95,162,.65)}

.rd-demo{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
}
.rd-demo p{font-size:13.5px;color:var(--tx-1);line-height:1.75}
.rd-demo small{font-size:12px;line-height:1.7}
.rd-fill{
  padding:0;border-radius:6px;
}
.rd-fill code{
  padding:3px 8px;border-radius:6px;
  background:rgba(255,200,107,.15);color:var(--gold);
  border:1px solid rgba(255,200,107,.3);
  font-weight:700;letter-spacing:.06em;
}
@media (hover:hover) and (pointer:fine){
  .rd-fill:hover code{background:rgba(255,200,107,.26)}
}

/* 规则 */
.rd-rules{margin-bottom:22px}
.rd-rules h2{font-size:18px;margin-bottom:16px}
.rd-rule-list{counter-reset:rd;display:flex;flex-direction:column;gap:12px}
.rd-rule-list li{
  counter-increment:rd;position:relative;padding-left:32px;
}
.rd-rule-list li::before{
  content:counter(rd);
  position:absolute;left:0;top:2px;
  width:22px;height:22px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--gold);
  background:rgba(255,200,107,.13);border:1px solid rgba(255,200,107,.26);
}
.rd-rule-list b{display:block;font-size:14.5px;color:var(--tx-0);margin-bottom:2px}
.rd-rule-list span{display:block;font-size:13.5px;color:var(--tx-2);line-height:1.75}
.rd-warn{
  margin-top:18px;padding:14px 16px;border-radius:var(--r-md);
  font-size:13px;line-height:1.85;color:var(--tx-2);
  background:rgba(255,95,162,.07);
  border-left:3px solid rgba(255,95,162,.5);
}
.rd-warn strong{color:var(--aurora-4)}

.rd-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* 兑换成功动效 */
.rd-card.is-done{animation:rd-pop .5s cubic-bezier(.2,.8,.3,1)}
@keyframes rd-pop{0%{transform:scale(1)}45%{transform:scale(1.015)}100%{transform:scale(1)}}

@media (max-width:768px){
  .rd-main{padding:32px 0 56px;min-height:auto}
  .rd-head h1{font-size:clamp(24px,7.4vw,34px)}
  .rd-head p{font-size:13.5px}
  .rd-status{padding:15px 16px;border-radius:var(--r-md)}
  .rd-status-line{font-size:13.5px}
  .rd-days{gap:14px}
  .rd-ring,.rd-ring svg{width:74px;height:74px}
  .rd-ring b{font-size:22px}
  .rd-card{padding:20px 16px;border-radius:var(--r-lg)}
  .rd-card::before{left:22px;right:22px}
  .rd-input{font-size:17px;letter-spacing:.1em;min-height:52px}
  .rd-rule-list li{padding-left:29px}
  .rd-rule-list b{font-size:14px}
  .rd-rule-list span{font-size:13px}
  .rd-links{flex-direction:column}
  .rd-links .au-btn{width:100%}
}