/* ============================================================
   Coca-Cola Celebration Wheel · Full Stylesheet
   ============================================================ */
:root{
  --cream-1:#fdfaf4;
  --cream-2:#f7f3ec;
  --cream-3:#efe8db;
  --card:#ffffff;
  --champagne-1:#e8d9a8;
  --champagne-2:#c9a961;
  --champagne-3:#a38642;
  --champagne-4:#7a6330;
  --emerald-1:#0f5132;
  --emerald-soft:rgba(15,81,50,.08);
  --ink-1:#1a1f1c;
  --ink-2:#4a524d;
  --ink-3:#8a928c;
  --line:#e8dfc9;
  --line-2:#f0e9d8;
  --accent-red:#c8102e;
  --accent-red-2:#e01e37;
  --accent-green:#2d8f5c;
  --accent-blue:#3a6fa8;
  --shadow-sm:0 2px 6px rgba(122,99,48,.06);
  --shadow-md:0 6px 22px rgba(122,99,48,.10);
  --shadow-lg:0 16px 48px rgba(122,99,48,.14);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink-1);background:var(--cream-2);
  max-width:480px;margin:0 auto;min-height:100vh;
  position:relative;overflow-x:hidden;padding-bottom:96px;
  -webkit-font-smoothing:antialiased;
}

/* ============ 背景 ============ */
.stage-bg{
  position:fixed;inset:0;z-index:-2;max-width:480px;margin:0 auto;left:0;right:0;
  background:
    radial-gradient(ellipse 60% 45% at 50% -10%, rgba(201,169,97,.14) 0%, transparent 60%),
    radial-gradient(ellipse 80% 55% at 50% 110%, rgba(15,81,50,.06) 0%, transparent 65%),
    linear-gradient(180deg,#fdfaf4 0%,#f7f3ec 55%,#efe8db 100%);
}
.stage-bg::before{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(201,169,97,.10) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 40%, rgba(15,81,50,.08) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 85%, rgba(201,169,97,.09) 0 1px, transparent 2px);
  background-size:260px 260px,320px 320px,300px 300px;
  pointer-events:none;
}

/* ============ 顶栏 ============ */
.topbar{
  position:sticky;top:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;background:rgba(253,250,244,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-2);box-shadow:var(--shadow-sm);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1;}
.brand-logo{width:32px;height:32px;object-fit:contain;border-radius:8px;flex-shrink:0;}
.brand-mark{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(#c8102e 0 60deg,#ffd700 60deg 120deg,#3a6fa8 120deg 180deg,#2d8f5c 180deg 240deg,#7a4ba8 240deg 300deg,#cf7a2c 300deg 360deg);
  box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--champagne-1), 0 2px 8px rgba(122,99,48,.25);
  position:relative;animation:spin 8s linear infinite;
}
.brand-mark::after{
  content:"";position:absolute;inset:8px;border-radius:50%;
  background:radial-gradient(circle,#fef6d8,#c9a961);
  box-shadow:inset 0 0 4px rgba(0,0,0,.15);
}
@keyframes spin{to{transform:rotate(360deg)}}
.brand-text{
  font-weight:800;font-size:14px;letter-spacing:.8px;
  color:var(--accent-red);text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:220px;
}
.lang-select{
  appearance:none;-webkit-appearance:none;
  background:#fff;color:var(--champagne-3);
  border:1px solid var(--line);
  padding:7px 30px 7px 14px;border-radius:20px;
  font-size:12px;font-weight:600;outline:none;flex-shrink:0;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--champagne-3) 50%),
    linear-gradient(135deg, var(--champagne-3) 50%, transparent 50%);
  background-position:calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size:5px 5px, 5px 5px;background-repeat:no-repeat;
  box-shadow:var(--shadow-sm);
}

/* ============ 滚动公告 ============ */
.marquee-bar{
  display:flex;align-items:center;gap:10px;
  padding:9px 16px;
  background:linear-gradient(90deg,var(--accent-red),var(--accent-red-2));
  color:#fff;font-size:12.5px;letter-spacing:.3px;
  overflow:hidden;position:relative;
}
.marquee-bar[hidden]{display:none !important;}
.marquee-bar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
}
.marquee-icon{font-size:14px;flex-shrink:0;}
.marquee-viewport{flex:1;overflow:hidden;white-space:nowrap;position:relative;}
.marquee-text{display:inline-block;padding-left:100%;animation:marqueeScroll 28s linear infinite;font-weight:500;}
@keyframes marqueeScroll{0%{transform:translateX(0);}100%{transform:translateX(-100%);}}

/* ============ 维护遮罩 ============ */
.maintenance-mask{
  position:fixed;inset:0;z-index:4000;
  background:linear-gradient(180deg,#fdfaf4,#efe8db);
  display:flex;align-items:center;justify-content:center;padding:40px 20px;
}
.maintenance-mask[hidden]{display:none !important;}
.maintenance-box{text-align:center;max-width:340px;}
.maintenance-icon{font-size:64px;margin-bottom:18px;}
.maintenance-title{
  font-size:20px;font-weight:800;color:var(--champagne-3);
  letter-spacing:2px;text-transform:uppercase;margin-bottom:14px;
}
.maintenance-text{color:var(--ink-2);font-size:13.5px;line-height:1.7;}

/* ============ 视图 ============ */
.view{
  display:block;
  padding:22px 18px 10px;
  animation:fadeUp .45s cubic-bezier(.22,.9,.3,1);
}
.view[hidden]{display:none !important;}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ============ 转盘页特殊处理:撑满剩余空间 ============ */
#view-wheel{
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - 56px - 78px);
  padding:22px 18px 18px;
}
#view-wheel[hidden]{display:none !important;}
#view-wheel .stage{
  display:flex;
  flex-direction:column;
  flex:1;
  text-align:center;
  min-height:0;
}
#view-wheel .wins-panel{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:220px;
  margin:22px 0 0;
  overflow:hidden;
}
#view-wheel .wins-scroll{
  flex:1;
  height:auto;
  min-height:180px;
}

/* ============ 舞台标题 ============ */
.stage-title{display:inline-block;margin:0 auto 20px;}
.marquee{
  display:inline-block;font-size:20px;font-weight:800;letter-spacing:2px;
  text-transform:uppercase;color:var(--accent-red);
  text-shadow:0 1px 0 rgba(255,255,255,.9);
}
.marquee::after{
  content:"";display:block;height:2px;margin-top:8px;
  background:linear-gradient(90deg,transparent,var(--accent-red),transparent);
  border-radius:2px;
}

/* ============ 转盘 ============ */
.wheel-wrap{position:relative;width:min(88vw,340px);aspect-ratio:1/1;margin:0 auto;padding-top:14px;flex-shrink:0;}
.wheel-pointer{
  position:absolute;top:2px;left:50%;transform:translateX(-50%);
  width:0;height:0;
  border-left:16px solid transparent;border-right:16px solid transparent;
  border-top:34px solid var(--accent-red);
  filter:drop-shadow(0 3px 6px rgba(200,16,46,.35));z-index:20;
}
.wheel-pointer::after{
  content:"";position:absolute;top:-6px;left:-8px;
  width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle,#fff,var(--accent-red));
  box-shadow:0 0 8px rgba(200,16,46,.5);
}
.wheel-ring{
  position:relative;width:100%;height:100%;border-radius:50%;padding:14px;
  background:
    radial-gradient(circle at 50% 50%, #3d2a1a 0%, #1c1209 70%),
    linear-gradient(135deg,var(--champagne-1),var(--champagne-2));
  box-shadow:
    0 0 0 1px var(--champagne-3),
    0 10px 30px rgba(122,99,48,.30),
    inset 0 0 24px rgba(0,0,0,.9),
    inset 0 0 0 2px rgba(232,217,168,.55);
}
.bulbs{position:absolute;inset:0;pointer-events:none;}
.bulb{
  position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fffbe0, #f5e18c 60%, #8a6a1a);
  box-shadow:0 0 8px rgba(245,225,140,.95), 0 0 14px rgba(201,169,97,.6);
  margin:-4.5px;animation:bulbPulse 1.6s ease-in-out infinite;
}
@keyframes bulbPulse{0%,100%{opacity:1}50%{opacity:.4}}
.wheel-canvas-wrap{width:100%;height:100%;border-radius:50%;overflow:hidden;box-shadow:inset 0 0 30px rgba(0,0,0,.85);}
#wheelCanvas{width:100%;height:100%;display:block;border-radius:50%;}

.spin-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:78px;height:78px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff5f5, #ffd1d8 45%, var(--accent-red) 100%);
  border:4px solid #fff;color:#fff;
  font-weight:900;font-size:15px;letter-spacing:1.5px;
  text-transform:uppercase;cursor:pointer;z-index:15;
  box-shadow:
    0 0 0 3px rgba(200,16,46,.35),
    0 6px 18px rgba(200,16,46,.40),
    inset 0 -4px 10px rgba(120,0,20,.35);
  transition:transform .15s ease;
  animation:centerPulse 2.6s ease-in-out infinite;
  display:flex;align-items:center;justify-content:center;
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.spin-center:active{transform:translate(-50%,-50%) scale(.94);}
.spin-center:disabled{filter:grayscale(.4) brightness(.9);cursor:not-allowed;animation:none;}
@keyframes centerPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(200,16,46,.35), 0 6px 18px rgba(200,16,46,.40), inset 0 -4px 10px rgba(120,0,20,.35);}
  50%{box-shadow:0 0 0 3px rgba(200,16,46,.65), 0 0 22px rgba(200,16,46,.65), 0 6px 18px rgba(200,16,46,.40), inset 0 -4px 10px rgba(120,0,20,.35);}
}

.spins-counter{
  margin-top:22px;display:inline-flex;align-items:center;gap:10px;
  padding:9px 20px;border-radius:30px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-sm);font-size:13px;
  align-self:center;flex-shrink:0;
}
.counter-text{color:var(--ink-2);}
.counter-num{color:var(--accent-red);font-weight:800;font-size:16px;}
.counter-num b{font-size:18px;}
.counter-num i{font-style:normal;color:var(--ink-3);font-size:13px;margin-left:2px;}

/* ============ 中奖榜 ============ */
.wins-panel{
  margin:22px 0 10px;background:#fff;
  border:1px solid var(--line-2);border-radius:14px;
  box-shadow:var(--shadow-md);overflow:hidden;text-align:left;
}
.wins-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 16px;background:linear-gradient(180deg,#fefcf8,#f7f3ec);
  border-bottom:1px solid var(--line-2);
  flex-shrink:0;
}
.wins-title{font-size:13px;font-weight:800;color:var(--accent-red);letter-spacing:.6px;text-transform:uppercase;}
.wins-live{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:800;color:var(--accent-green);letter-spacing:1px;}
.wins-live .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-green);box-shadow:0 0 8px var(--accent-green);animation:pulse 1.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.wins-scroll{height:220px;overflow:hidden;position:relative;background:linear-gradient(180deg,#fff 0%,#fff 88%,#fefcf8 100%);}
.wins-scroll::before,.wins-scroll::after{content:"";position:absolute;left:0;right:0;height:22px;pointer-events:none;z-index:2;}
.wins-scroll::before{top:0;background:linear-gradient(180deg,#fff,transparent);}
.wins-scroll::after{bottom:0;background:linear-gradient(0deg,#fefcf8,transparent);}
.wins-list{transition:transform .8s cubic-bezier(.22,.9,.3,1);will-change:transform;}
.win-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px dashed var(--line-2);font-size:13px;}
.win-item:last-child{border-bottom:none;}
.win-flag{font-size:18px;line-height:1;}
.win-name{font-weight:600;color:var(--ink-1);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.win-amt{font-weight:800;color:var(--accent-red);font-variant-numeric:tabular-nums;letter-spacing:.3px;}
.win-amt.large{color:var(--accent-red);font-size:14px;}
.win-time{font-size:11px;color:var(--ink-3);min-width:52px;text-align:right;}
.win-paid{display:inline-flex;align-items:center;gap:3px;padding:1px 8px;border-radius:8px;background:var(--emerald-soft);color:var(--emerald-1);font-size:10.5px;font-weight:700;}
.wins-empty{padding:60px 20px;text-align:center;color:var(--ink-3);font-size:12.5px;}

/* ============ 卡片 ============ */
.glass{
  background:var(--card);border:1px solid var(--line-2);
  border-radius:18px;padding:20px;margin-bottom:16px;box-shadow:var(--shadow-md);
}
.panel-title{
  font-size:15px;font-weight:800;color:var(--accent-red);
  margin-bottom:14px;letter-spacing:.5px;
  padding-bottom:10px;border-bottom:1px dashed var(--line-2);
  text-transform:uppercase;
}
.hint{font-size:11.5px;color:var(--ink-3);margin-bottom:12px;line-height:1.6;}

.profile-locked-tip{
  display:flex;align-items:center;gap:8px;
  padding:11px 14px;border-radius:10px;background:#fdf6e3;
  border:1px dashed var(--champagne-2);color:var(--champagne-4);
  font-size:12.5px;font-weight:600;margin-bottom:14px;
}
.profile-locked-tip[hidden]{display:none !important;}
.profile-locked-tip .lock-icon{font-size:15px;}

/* ============ 表单 ============ */
.form-group{margin-bottom:14px;}
.form-group label{display:block;font-size:11.5px;color:var(--ink-2);margin-bottom:6px;letter-spacing:.5px;font-weight:600;text-transform:uppercase;}
.form-group input,
.form-group textarea{
  width:100%;padding:12px 14px;background:var(--cream-1);
  border:1px solid var(--line);color:var(--ink-1);border-radius:10px;
  font-size:14px;outline:none;font-family:inherit;
  transition:border-color .2s, box-shadow .2s, background .2s;
  -webkit-appearance:none;
}
.form-group textarea{resize:vertical;min-height:70px;}
.form-group input:focus,.form-group textarea:focus{border-color:var(--accent-red);background:#fff;box-shadow:0 0 0 3px rgba(200,16,46,.12);}
.form-group input:disabled,.form-group input[readonly],.form-group textarea[readonly]{
  background:#f5efe0;color:#6b5d4a;cursor:not-allowed;
}

.btn-glow{
  width:100%;padding:14px;
  background:linear-gradient(135deg,var(--accent-red),var(--accent-red-2));
  border:none;color:#fff;
  font-weight:700;border-radius:12px;font-size:13.5px;letter-spacing:1.5px;
  text-transform:uppercase;cursor:pointer;
  box-shadow:0 6px 18px rgba(200,16,46,.30), inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .15s, box-shadow .2s;
}
.btn-glow:active{transform:scale(.98);}
.btn-glow.blue{
  background:linear-gradient(135deg,var(--champagne-2),var(--champagne-3));
  box-shadow:0 6px 18px rgba(163,134,66,.35), inset 0 1px 0 rgba(255,255,255,.20);
}
.btn-glow:disabled{opacity:.5;cursor:not-allowed;}

.switch-link{
  margin-top:14px;text-align:center;font-size:12.5px;color:var(--accent-red);
  cursor:pointer;letter-spacing:.3px;text-decoration:underline;
  text-decoration-color:rgba(200,16,46,.35);text-underline-offset:3px;
}
.btn-logout{
  width:100%;padding:13px;margin-top:8px;background:transparent;color:var(--ink-2);
  border:1px solid var(--line);border-radius:12px;font-size:13px;cursor:pointer;letter-spacing:.5px;
}
.btn-logout:active{background:var(--cream-2);}

/* ============ 余额 ============ */
.bal-card{padding:22px 0 8px;text-align:center;position:relative;}
.bal-card::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:60px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--champagne-2),transparent);
}
.bal-label{font-size:11px;color:var(--ink-3);letter-spacing:2px;text-transform:uppercase;font-weight:600;}
.bal-value{font-size:38px;font-weight:900;color:var(--accent-red);letter-spacing:1px;margin:6px 0 12px;}
.vip-row{font-size:12.5px;color:var(--ink-2);}
.vip-tag{
  display:inline-block;margin-left:6px;padding:3px 12px;border-radius:12px;
  background:linear-gradient(135deg,var(--accent-red),#7a0d20);
  color:#fff;font-weight:800;font-size:11px;letter-spacing:1px;text-transform:uppercase;
}

/* ============ 提现/兑奖记录 ============ */
.wd-logs{max-height:280px;overflow-y:auto;}
.wd-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line-2);font-size:12.5px;}
.wd-item:last-child{border-bottom:none;}
.wd-item .ticket{font-family:ui-monospace,Menlo,monospace;color:var(--ink-3);font-size:11px;}
.wd-item .amt{color:var(--accent-red);font-weight:700;}
.wd-item .st{padding:2px 10px;border-radius:10px;font-size:11px;font-weight:700;}
.wd-item .st.pending{background:rgba(207,122,44,.14);color:#a3621d;}
.wd-item .st.approved{background:rgba(58,111,168,.14);color:var(--accent-blue);}
.wd-item .st.rejected{background:rgba(200,70,70,.14);color:var(--accent-red);}
.wd-item .st.paid{background:rgba(45,143,92,.14);color:var(--accent-green);}
.empty-hint{color:var(--ink-3);text-align:center;padding:22px 10px;font-size:12.5px;}

/* ============ 聊天 ============ */
.chat-panel{display:flex;flex-direction:column;height:calc(100vh - 220px);min-height:420px;padding:0;overflow:hidden;}
.panel-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,#fefcf8,transparent);
}
.panel-head .panel-title{border-bottom:none;padding-bottom:0;margin-bottom:0;font-size:13px;}
.chat-status{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);}
.chat-status .dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);transition:background .3s, box-shadow .3s;}
.chat-status.online .dot{background:var(--accent-green);box-shadow:0 0 8px var(--accent-green);}
.chat-status.online #chatStatusText{color:var(--accent-green);}
.chat-list{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--cream-1);}
.chat-list::-webkit-scrollbar{width:5px;}
.chat-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}
.chat-msg{
  max-width:78%;padding:10px 14px;border-radius:14px;
  font-size:13.5px;line-height:1.5;word-break:break-word;white-space:pre-wrap;
  animation:msgIn .25s ease;position:relative;
}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.chat-msg.user{
  align-self:flex-end;background:linear-gradient(135deg,var(--accent-red),var(--accent-red-2));
  color:#fff;border-bottom-right-radius:3px;
  box-shadow:0 4px 12px rgba(200,16,46,.20);
}
.chat-msg.service{
  align-self:flex-start;background:#fff;color:var(--ink-1);
  border:1px solid var(--line-2);border-bottom-left-radius:3px;
  box-shadow:var(--shadow-sm);
}
.chat-msg .meta{display:block;font-size:10px;opacity:.75;margin-top:5px;letter-spacing:.3px;}
.chat-msg.user .meta{display:flex;justify-content:flex-end;align-items:center;gap:4px;}
.read-icon{
  display:inline-block;font-size:11px;letter-spacing:-1px;line-height:1;margin-left:2px;
  vertical-align:0;color:rgba(255,255,255,.75);font-weight:700;transition:color .2s;
}
.msg.service .read-icon{color:rgba(168,176,208,.65);}
.read-icon.read{color:#4dd6ff;letter-spacing:-2px;}

.chat-img{max-width:220px;max-height:220px;border-radius:10px;display:block;cursor:pointer;transition:transform .15s;object-fit:cover;}
.chat-img:active{transform:scale(.98);}
.chat-msg.user .chat-img{border:2px solid rgba(255,255,255,.35);}
.chat-msg.service .chat-img{border:1px solid var(--line-2);}
.chat-msg.image-only{padding:5px;background:#fff !important;border:1px solid var(--line-2) !important;}
.chat-msg.image-only.user{border:2px solid rgba(200,16,46,.35) !important;}

.chat-quickbar{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:8px 14px;
  border-top:1px dashed var(--line-2);
  background:#fdfaf3;
}
.chat-quickbar .qr-chip{
  background:#fff;border:1px solid var(--accent-red);
  color:var(--accent-red);font-size:11.5px;font-weight:700;
  padding:5px 11px;border-radius:14px;cursor:pointer;
  transition:.15s;
}
.chat-quickbar .qr-chip:hover{background:rgba(200,16,46,.08);}
.chat-quickbar .qr-chip:active{transform:scale(.96);}

.chat-bar{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line-2);background:#fff;align-items:center;}
.chat-img-btn{
  width:42px;height:42px;flex-shrink:0;background:var(--cream-1);
  border:1px solid var(--line);border-radius:12px;color:var(--accent-red);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.chat-img-btn:active{background:var(--cream-2);}
.chat-bar input[type=text]{
  flex:1;padding:12px 16px;background:var(--cream-1);
  border:1px solid var(--line);color:var(--ink-1);border-radius:12px;
  font-size:14px;outline:none;transition:border-color .2s, background .2s;
}
.chat-bar input[type=text]:focus{border-color:var(--accent-red);background:#fff;}
.chat-send-btn{
  width:46px;height:46px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent-red),var(--accent-red-2));
  border:none;border-radius:12px;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(200,16,46,.30);transition:transform .15s;
}
.chat-send-btn:active{transform:scale(.93);}

/* ============ 底部导航(4 个) ============ */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;height:78px;
  background:rgba(253,250,244,.97);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--line-2);
  display:flex;z-index:1000;
  padding-bottom:env(safe-area-inset-bottom,0);
  box-shadow:0 -4px 20px rgba(122,99,48,.07);
}
.bottom-nav::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-red) 30%,var(--accent-red) 70%,transparent);
  opacity:.5;
}
.nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--ink-3);text-decoration:none;font-size:10px;font-weight:700;
  position:relative;gap:3px;transition:color .25s;letter-spacing:.5px;text-transform:uppercase;
  min-width:0;
}
.nav-item.active{color:var(--accent-red);}
.nav-item .nav-text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-icon{width:22px;height:22px;transition:transform .25s;flex-shrink:0;}
.nav-item.active .nav-icon{transform:translateY(-1px) scale(1.08);}
.nav-text{letter-spacing:.8px;}
.nav-badge{
  position:absolute;top:8px;right:calc(50% - 22px);
  min-width:18px;height:18px;padding:0 5px;
  background:var(--accent-red);color:#fff;border-radius:9px;
  font-size:10px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 8px rgba(200,16,46,.5);border:1.5px solid #fdfaf4;
}
.nav-badge[hidden]{display:none !important;}

/* ============ 中奖弹窗 ============ */
.modal{
  position:fixed;inset:0;z-index:2000;
  background:rgba(26,31,28,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.modal.on{display:flex;animation:fadeIn .2s;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{
  width:100%;max-width:340px;background:#fff;
  border:2px solid var(--champagne-1);border-radius:20px;
  padding:30px 24px 24px;text-align:center;
  box-shadow:0 20px 60px rgba(122,99,48,.30), 0 0 0 6px rgba(201,169,97,.08);
  animation:pop .4s cubic-bezier(.22,1.4,.5,1);position:relative;overflow:hidden;
}
.modal-box::before{
  content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(200,16,46,.08) 40deg, transparent 80deg);
  animation:rotate 6s linear infinite;pointer-events:none;
}
@keyframes rotate{to{transform:rotate(360deg)}}
@keyframes pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
.modal-emoji{font-size:52px;line-height:1;margin-bottom:10px;position:relative;}
.modal-title{font-size:16px;font-weight:800;color:var(--accent-red);letter-spacing:1.5px;margin-bottom:16px;text-transform:uppercase;position:relative;}
.modal-prize{font-size:13.5px;color:var(--ink-1);margin-bottom:6px;letter-spacing:.5px;position:relative;}
.modal-amount{font-size:38px;font-weight:900;color:var(--accent-red);margin-bottom:22px;letter-spacing:1px;position:relative;}
.modal-amount.none{color:var(--ink-3);font-size:26px;}
.modal .btn-glow{position:relative;}

/* ============ 公告弹窗 ============ */
.ann-modal{
  position:fixed;inset:0;z-index:2500;
  background:rgba(26,31,28,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:fadeIn .25s;
}
.ann-modal[hidden]{display:none !important;}
.ann-box{
  width:100%;max-width:360px;background:#fff;
  border:2px solid var(--accent-red);border-radius:20px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(200,16,46,.25), 0 0 0 6px rgba(200,16,46,.06);
  animation:pop .4s cubic-bezier(.22,1.4,.5,1);
}
.ann-head{
  display:flex;align-items:center;gap:10px;
  padding:16px 20px;
  background:linear-gradient(135deg,var(--accent-red),var(--accent-red-2));
  color:#fff;
}
.ann-icon{font-size:20px;}
.ann-title{font-weight:800;font-size:14px;letter-spacing:1.2px;text-transform:uppercase;}
.ann-body{
  padding:22px 22px 12px;
  font-size:13.5px;line-height:1.7;color:var(--ink-1);
  white-space:pre-wrap;max-height:50vh;overflow-y:auto;
}
.ann-foot{padding:12px 20px 20px;text-align:center;}

/* ============ Toast ============ */
.toast{
  position:fixed;top:78px;left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid var(--accent-red);
  color:var(--accent-red);padding:10px 20px;border-radius:24px;
  font-size:13px;font-weight:600;letter-spacing:.4px;
  z-index:3000;box-shadow:var(--shadow-lg);
  animation:toastIn .3s cubic-bezier(.22,1.4,.5,1);
  pointer-events:none;max-width:90vw;text-align:center;
}
.toast.err{border-color:#c81e1e;color:#c81e1e;}
.toast.ok{border-color:var(--accent-green);color:var(--accent-green);}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}

/* ============ 灯箱 ============ */
.lightbox{
  position:fixed;inset:0;z-index:5000;background:rgba(26,31,28,.94);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.lightbox.on{display:flex;animation:fadeIn .2s;}
.lightbox img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.lightbox-close{
  position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);
  color:#fff;font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

/* ============ 可乐页 ============ */
.cola-hero{
  text-align:center;padding:22px 18px 26px;
  background:linear-gradient(135deg,#c8102e,#e01e37 60%,#c8102e);
  border-radius:20px;color:#fff;margin-bottom:16px;
  box-shadow:0 12px 32px rgba(200,16,46,.30);
  position:relative;overflow:hidden;
}
.cola-hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,.12), transparent 45%);
  pointer-events:none;
}
.cola-hero-icon{font-size:44px;line-height:1;margin-bottom:10px;position:relative;}
.cola-hero-title{font-size:16px;font-weight:800;letter-spacing:.6px;margin-bottom:10px;position:relative;color:#fff;line-height:1.4;}
.cola-hero-desc{font-size:12.5px;line-height:1.65;opacity:.94;position:relative;max-width:340px;margin:0 auto;}
.cola-eligible{
  display:inline-block;margin-top:14px;padding:5px 14px;border-radius:14px;
  background:rgba(255,255,255,.18);color:#fff;font-size:12px;font-weight:700;
  letter-spacing:.4px;position:relative;
}
.cola-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.cola-card{
  background:#fff;border:2px solid var(--line-2);border-radius:14px;
  padding:14px 12px;cursor:pointer;transition:all .18s;text-align:center;
  position:relative;overflow:hidden;
}
.cola-card:hover{border-color:var(--accent-red);transform:translateY(-2px);box-shadow:0 8px 20px rgba(200,16,46,.15);}
.cola-card.selected{border-color:var(--accent-red);background:linear-gradient(180deg,#fff,#fff5f5);
  box-shadow:0 0 0 3px rgba(200,16,46,.15), 0 8px 20px rgba(200,16,46,.18);}
.cola-card.selected::after{
  content:"✓";position:absolute;top:6px;right:8px;width:22px;height:22px;border-radius:50%;
  background:var(--accent-red);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:900;
}
.cola-card.out-of-stock{opacity:.55;cursor:not-allowed;}
.cola-card.out-of-stock::after{
  content:"缺货";position:absolute;top:6px;right:6px;background:#666;color:#fff;
  font-size:10px;padding:2px 8px;border-radius:10px;font-weight:700;
  width:auto;height:auto;
}
.cola-card-icon{font-size:32px;line-height:1;margin-bottom:8px;}
.cola-card-name{font-size:12.5px;font-weight:800;color:var(--ink-1);margin-bottom:4px;line-height:1.35;}
.cola-card-flavor{font-size:11px;color:var(--ink-3);letter-spacing:.3px;margin-bottom:6px;}
.cola-card-tag{display:inline-block;padding:1px 8px;border-radius:8px;
  background:rgba(200,16,46,.10);color:var(--accent-red);font-size:10px;font-weight:800;letter-spacing:.4px;}
.cola-logs{max-height:280px;overflow-y:auto;}
.cola-item{padding:11px 0;border-bottom:1px dashed var(--line-2);font-size:12.5px;}
.cola-item:last-child{border-bottom:none;}
.cola-item .row1{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;}
.cola-item .ticket{font-family:ui-monospace,Menlo,monospace;color:var(--ink-3);font-size:11px;}
.cola-item .product{font-weight:700;color:var(--ink-1);}
.cola-item .st{padding:2px 9px;border-radius:10px;font-size:11px;font-weight:700;}
.cola-item .st.pending{background:rgba(207,122,44,.14);color:#a3621d;}
.cola-item .st.shipped{background:rgba(58,111,168,.14);color:var(--accent-blue);}
.cola-item .st.delivered{background:rgba(45,143,92,.14);color:var(--accent-green);}
.cola-item .st.rejected{background:rgba(200,70,70,.14);color:var(--accent-red);}
.cola-item .tracking{font-size:11px;color:var(--ink-3);margin-top:3px;font-family:ui-monospace,Menlo,monospace;}

/* ============ 抽奖中 ============ */
.spinning .spin-center{animation:none;background:radial-gradient(circle at 35% 30%, #555,#222);color:#ffd700;}
.spinning .bulb{animation-duration:.35s;}

/* ============ 小屏 ============ */
@media (max-width:360px){
  .wheel-wrap{width:min(92vw,320px);}
  .marquee{font-size:17px;letter-spacing:1.5px;}
  .bal-value{font-size:32px;}
  .spin-center{width:66px;height:66px;font-size:13px;}
  .brand-text{font-size:12.5px;max-width:180px;}
  .bottom-nav .nav-text{font-size:9px;letter-spacing:.3px;}
  .nav-item{font-size:9.5px;}
  .nav-icon{width:20px;height:20px;}
}