/* ============================================================
   Wind Bar · 互动活动 共享设计系统  (theme.css)
   高级深色霓虹主题 — 玻璃拟态 / 渐变 / 辉光 / 微动效
   ============================================================ */
:root{
  --bg:#080a0e; --bg2:#0d1016;
  --panel:#12161d; --panel2:#171c25; --glass:rgba(22,28,38,.62);
  --line:#232b38; --line2:#2e3848;
  --ink:#eaf0f8; --sub:#9aa7b8; --mut:#647187;
  --acc:#5ee1c6;  --acc-d:#2bbfa3;
  --acc2:#7aa2ff; --acc2-d:#4f7bf0;
  --warn:#ffb454; --bad:#ff6b8a; --good:#5ee1c6;
  --grad:linear-gradient(120deg,#5ee1c6,#7aa2ff);
  --grad-warm:linear-gradient(120deg,#ffb454,#ff6b8a);
  --r:18px; --r-sm:12px;
  --shadow:0 18px 50px -20px rgba(0,0,0,.7);
  --glow:0 0 0 1px rgba(94,225,198,.25),0 12px 40px -12px rgba(94,225,198,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:
    radial-gradient(900px 500px at 88% -8%,rgba(94,225,198,.10),transparent 60%),
    radial-gradient(800px 500px at 5% 8%,rgba(122,162,255,.10),transparent 55%),
    var(--bg);
  background-attachment:fixed;
}
a{color:var(--acc2);text-decoration:none}
::selection{background:rgba(94,225,198,.3)}
.wrap{max-width:1100px;margin:0 auto;padding:26px 20px 130px}
.wrap-wide{max-width:1280px}

/* ---------- 顶部活动条 (common.js 注入) ---------- */
.wb-top{position:sticky;top:0;z-index:30;backdrop-filter:blur(12px);
  background:linear-gradient(180deg,rgba(8,10,14,.92),rgba(8,10,14,.6));
  border-bottom:1px solid var(--line)}
.wb-top-in{max-width:1100px;margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:14px}
.wb-brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.02em}
.wb-logo{width:30px;height:30px;border-radius:9px;background:var(--grad);display:grid;place-items:center;
  color:#04201a;font-weight:900;box-shadow:var(--glow)}
.wb-brand small{display:block;font-size:10.5px;color:var(--mut);font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.wb-back{color:var(--sub);font-size:13px;border:1px solid var(--line);padding:5px 11px;border-radius:9px;transition:.15s}
.wb-back:hover{border-color:var(--acc);color:var(--acc)}
.wb-aud{margin-left:auto;display:flex;align-items:center;gap:7px}
.wb-aud .lab{font-size:11.5px;color:var(--mut)}
.wb-seg{display:flex;background:#0b0f15;border:1px solid var(--line);border-radius:10px;padding:3px}
.wb-seg button{border:0;background:none;color:var(--sub);font-size:12.5px;font-weight:700;
  padding:5px 11px;border-radius:7px;cursor:pointer;transition:.15s}
.wb-seg button.on{background:var(--grad);color:#04201a}

/* ---------- 页头 ---------- */
.phead{margin:30px 0 22px}
.eyebrow{letter-spacing:.22em;font-size:11.5px;color:var(--acc);text-transform:uppercase;font-weight:800}
.phead h1{font-size:clamp(26px,4vw,38px);line-height:1.15;margin:10px 0 8px;font-weight:800}
.phead h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.phead p{color:var(--sub);max-width:640px;margin:0;font-size:15px}
.howto{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--mut);
  background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:7px 14px}
.howto b{color:var(--acc)}

/* ---------- 卡片 / 玻璃面板 ---------- */
.glass{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);backdrop-filter:blur(10px)}
.pad{padding:22px}

/* ---------- 进度 & 计数 ---------- */
.metabar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.prog{flex:1;min-width:160px;height:8px;background:#0b0f15;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.prog>i{display:block;height:100%;width:0;background:var(--grad);transition:width .35s cubic-bezier(.2,.8,.2,1)}
.kpi{display:flex;gap:10px;flex-wrap:wrap}
.kpi .b{background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:8px 14px;text-align:center;min-width:78px}
.kpi .b b{display:block;font-size:20px;font-weight:800;line-height:1.1}
.kpi .b small{font-size:10.5px;color:var(--mut);letter-spacing:.04em}

/* ---------- 按钮 ---------- */
.btn{cursor:pointer;border:1px solid var(--line);background:#0e131a;color:var(--ink);
  font-weight:700;font-size:14px;padding:11px 18px;border-radius:12px;transition:.16s;font-family:inherit}
.btn:hover{border-color:var(--acc);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-grad{background:var(--grad);color:#04201a;border:0;box-shadow:var(--glow)}
.btn-grad:hover{filter:brightness(1.06)}
.btn-warm{background:var(--grad-warm);color:#2a1500;border:0}
.btn-ghost{background:none}
.btn-lg{padding:14px 22px;font-size:15px}
.btn-block{display:block;width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- 滑卡 (swipe) ---------- */
.swipe-stage{position:relative;height:440px;display:grid;place-items:center;margin:6px 0 20px}
.swipe-card{position:absolute;width:min(420px,84vw);height:420px;border-radius:24px;overflow:hidden;
  border:1px solid var(--line2);box-shadow:var(--shadow);background:var(--panel);
  cursor:grab;user-select:none;touch-action:none;
  transform:translateX(var(--dx,0)) rotate(var(--rot,0deg));transition:transform .15s ease,opacity .2s ease}
.swipe-card.gone{transition:transform .35s ease,opacity .35s ease}
.swipe-card .meta{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;
  background:linear-gradient(0deg,rgba(5,7,10,.92),rgba(5,7,10,.05));}
.swipe-card .meta .cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);font-weight:800}
.swipe-card .meta .nm{font-size:19px;font-weight:800;margin-top:2px}
.swipe-card .meta .ds{font-size:13px;color:var(--sub);margin-top:3px}
.stamp{position:absolute;top:24px;padding:6px 16px;border-radius:10px;font-weight:900;font-size:22px;
  letter-spacing:.08em;border:3px solid;opacity:0;transform:rotate(-12deg)}
.stamp.yes{right:22px;color:var(--good);border-color:var(--good);box-shadow:0 0 20px rgba(94,225,198,.4)}
.stamp.no{left:22px;color:var(--bad);border-color:var(--bad);transform:rotate(12deg)}
.swipe-actions{display:flex;gap:14px;justify-content:center;margin-top:4px}
.round{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:24px;cursor:pointer;
  border:1px solid var(--line);background:#0e131a;transition:.16s}
.round:hover{transform:translateY(-2px) scale(1.05)}
.round.no:hover{border-color:var(--bad);color:var(--bad);box-shadow:0 0 24px -6px var(--bad)}
.round.yes:hover{border-color:var(--good);color:var(--good);box-shadow:0 0 24px -6px var(--good)}

/* ---------- 视觉占位(渐变"图片") ---------- */
.viz{position:absolute;inset:0;display:grid;place-items:center}
.viz .em{font-size:96px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.5))}

/* ---------- 通用网格 ---------- */
.cards{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- tile (用于二选一/卖点/亮点等) ---------- */
.tile{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:18px;transition:.16s;cursor:pointer;position:relative}
.tile:hover{border-color:var(--line2);transform:translateY(-2px)}
.tile.sel{border-color:var(--acc);box-shadow:var(--glow)}
.tile .ic{font-size:34px}
.tile h3{margin:10px 0 4px;font-size:16px}
.tile p{margin:0;font-size:13px;color:var(--sub)}

/* ---------- 星级 ---------- */
.stars{display:inline-flex;gap:4px;font-size:26px;cursor:pointer}
.stars i{color:#2c3645;transition:.12s;font-style:normal}
.stars i.on,.stars i.hov{color:var(--warn);text-shadow:0 0 12px rgba(255,180,84,.5)}

/* ---------- 滑杆 ---------- */
.slider-row{display:flex;align-items:center;gap:14px;margin:14px 0}
.slider-row label{width:74px;font-size:13.5px;color:var(--sub);font-weight:600}
input[type=range]{flex:1;-webkit-appearance:none;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--acc),var(--line));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--ink);border:3px solid var(--acc);cursor:pointer;box-shadow:0 0 12px rgba(94,225,198,.5)}
.slider-row .val{width:40px;text-align:right;font-weight:800;color:var(--acc)}

/* ---------- chips / tags ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:1px solid var(--line);background:#0c1117;
  color:var(--sub);padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;transition:.15s}
.chip:hover{border-color:var(--acc)}
.chip.on{background:var(--grad);color:#04201a;border-color:transparent}
.tag{font-size:11px;font-weight:800;border-radius:6px;padding:3px 8px;border:1px solid;display:inline-block}
.tag.c{color:var(--acc);border-color:#22483f;background:#0c1a17}
.tag.b{color:var(--acc2);border-color:#23314f;background:#0c1320}
.tag.i{color:var(--warn);border-color:#4a3a1c;background:#1a140a}

/* ---------- 排序列表 (拖拽) ---------- */
.sortable{display:flex;flex-direction:column;gap:10px}
.sort-item{display:flex;align-items:center;gap:12px;background:var(--glass);border:1px solid var(--line);
  border-radius:14px;padding:13px 16px;cursor:grab;transition:.12s}
.sort-item.drag{opacity:.4}
.sort-item.over{border-color:var(--acc);box-shadow:var(--glow)}
.sort-item .rank{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:900;
  background:var(--grad);color:#04201a;flex:none}
.sort-item .grip{margin-left:auto;color:var(--mut);font-size:20px}

/* ---------- 结果/排行榜 ---------- */
.lead{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.lead .row{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;
  background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.lead .row .bar{grid-column:1/-1;height:6px;background:#0b0f15;border-radius:99px;overflow:hidden}
.lead .row .bar>i{display:block;height:100%;background:var(--grad)}
.lead .n{font-weight:900;color:var(--acc)}
.lead .v{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- 完成态 ---------- */
.done{text-align:center;padding:50px 20px}
.done .big{font-size:64px}
.done h2{margin:14px 0 6px}
.done p{color:var(--sub);max-width:460px;margin:0 auto 20px}

/* ---------- 浮动导出条 (common.js) ---------- */
.wb-dock{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:40;
  display:flex;align-items:center;gap:10px;background:var(--glass);border:1px solid var(--line2);
  border-radius:999px;padding:9px 12px 9px 18px;box-shadow:var(--shadow);backdrop-filter:blur(12px)}
.wb-dock .cnt{font-size:13px;color:var(--sub)}
.wb-dock .cnt b{color:var(--acc);font-weight:900;font-variant-numeric:tabular-nums}
.wb-dock .mini{font-size:12px;color:var(--mut);border:0;background:none;cursor:pointer}
.wb-dock .mini:hover{color:var(--bad)}

/* ---------- toast ---------- */
.wb-toast{position:fixed;top:74px;left:50%;transform:translateX(-50%) translateY(-12px);z-index:60;
  background:var(--panel2);border:1px solid var(--acc);color:var(--ink);padding:11px 18px;border-radius:12px;
  font-size:13.5px;box-shadow:var(--glow);opacity:0;pointer-events:none;transition:.25s}
.wb-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 杂项 ---------- */
.muted{color:var(--mut)}.sub{color:var(--sub)}
.center{text-align:center}
.hide{display:none!important}
.fade{animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pop{animation:pop .25s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- real photo layer over gradient placeholders ---------- */
.viz-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.viz .em{position:relative;z-index:1}
.swipe-card .viz-img{border-radius:0}
.tile .viz-img{border-radius:12px}

/* ---------- 通用奖励层 (WB.rewardFlow) ---------- */
.wb-rg{text-align:center}
.wb-wheelwrap{position:relative;width:270px;height:270px;margin:8px auto 14px}
.wb-wheel{width:100%;height:100%;border-radius:50%;border:6px solid #1a2230;box-shadow:var(--shadow),inset 0 0 0 2px rgba(255,255,255,.06);transition:transform 4.5s cubic-bezier(.13,.85,.2,1)}
.wb-pin{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:24px solid var(--acc);z-index:3;filter:drop-shadow(0 2px 4px #000)}
.wb-hub{position:absolute;top:50%;left:50%;width:66px;height:66px;transform:translate(-50%,-50%);border-radius:50%;background:var(--grad);color:#04201a;font-weight:900;display:grid;place-items:center;z-index:2;box-shadow:0 0 0 5px #0a0d12;font-size:13px;cursor:pointer;text-align:center;line-height:1.05}
.wb-scratch{position:relative;width:300px;max-width:88vw;height:150px;margin:10px auto 6px;border-radius:16px;overflow:hidden;border:1px solid var(--line2)}
.wb-scratch .under{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,#0c1a17,#10212b);font-size:22px;font-weight:900;padding:10px;text-align:center}
.wb-scratch canvas{position:absolute;inset:0;touch-action:none;cursor:grab}
.wb-prize{font-size:24px;font-weight:900;margin:8px 0 2px;animation:pop .4s}
.wb-prize .g,.wb-rg .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.wb-emailrow{display:flex;gap:8px;margin-top:14px;max-width:420px;margin-left:auto;margin-right:auto}
.wb-emailrow input{flex:1;background:#0b0f15;border:1px solid var(--line);border-radius:13px;color:var(--ink);padding:14px;font-size:15px;font-family:inherit}
.wb-emailrow input:focus{outline:none;border-color:var(--acc)}
.wb-codebox{margin:14px auto 0;max-width:420px;border:1.5px dashed var(--acc);background:#0c1a17;border-radius:14px;padding:16px;font-size:24px;font-weight:900;letter-spacing:.12em;color:var(--acc)}
.wb-gbtn{background:none;border:1px solid var(--line);color:var(--sub);border-radius:13px;padding:13px;font-weight:700;cursor:pointer;font-family:inherit;width:100%;max-width:420px;margin:10px auto 0;display:block}
.wb-gbtn:hover{border-color:var(--acc);color:var(--acc)}
.wb-hint{font-size:12.5px;color:var(--mut);margin-top:6px}

/* ---------- 返回主页按钮 (common.js 自动注入) ---------- */
.wb-home{position:fixed;top:12px;left:12px;z-index:60;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ink);background:var(--glass);border:1px solid var(--line2);border-radius:999px;padding:8px 14px;backdrop-filter:blur(10px);text-decoration:none;transition:.15s;box-shadow:var(--shadow)}
.wb-home:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-1px)}