/* ============================================================
   深海云卡商城 · 前台全局样式（兜底 + 发光/动效/滚动条）
   主色 #6D4AFF  副色 #22D3EE  背景 #0B0A1A / #12102A
   TailwindCDN 负责绝大多数布局，本文件只放渐变发光、动效、滚动条。
   自定义：主题色、圆角、发光强度都可在此调整。
   ============================================================ */

:root{
  --theme:#6D4AFF;
  --theme2:#22D3EE;
  --bg:#0B0A1A;
  --bg2:#12102A;
  --card:rgba(255,255,255,.04);
  --line:rgba(109,74,255,.35);
}

html,body{ background:var(--bg); color:#EDEBFF; }
body{
  font-family:"Microsoft YaHei","PingFang SC",Arial,Helvetica,sans-serif;
  /* 背景微光光斑 */
  background-image:
    radial-gradient(600px 300px at 15% -5%, rgba(109,74,255,.25), transparent 60%),
    radial-gradient(700px 350px at 100% 0%, rgba(34,211,238,.18), transparent 60%);
  background-attachment: fixed;
  min-height:100vh;
}

/* ---------- 玻璃拟态卡片 ---------- */
.glass{
  background:linear-gradient(160deg, rgba(109,74,255,.12), rgba(255,255,255,.03));
  border:1px solid var(--line);
  backdrop-filter:blur(10px);
  border-radius:16px;
}

/* ---------- 商品卡片：hover 上浮 + 发光 ---------- */
.goods-card{
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  border:1px solid rgba(255,255,255,.08);
}
.goods-card:hover{
  transform:translateY(-6px);
  border-color:var(--theme);
  box-shadow:0 12px 40px -8px rgba(109,74,255,.55), 0 0 0 1px rgba(34,211,238,.25);
}
.goods-card img{ transition:transform .4s ease; }
.goods-card:hover img{ transform:scale(1.06); }

/* ---------- 渐变发光按钮 ---------- */
.btn-glow{
  background:linear-gradient(90deg, var(--theme), var(--theme2));
  color:#fff; font-weight:700;
  box-shadow:0 6px 20px -6px rgba(109,74,255,.8);
  transition:filter .2s ease, transform .15s ease;
}
.btn-glow:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.btn-glow:active{ transform:translateY(0); }
.btn-ghost{
  border:1px solid var(--line); color:#EDEBFF;
  transition:background .2s ease;
}
.btn-ghost:hover{ background:rgba(109,74,255,.18); }

/* ---------- 渐变文字 ---------- */
.grad-text{
  background:linear-gradient(90deg,#fff, var(--theme2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- 顶部毛玻璃导航 ---------- */
.nav-glass{
  background:rgba(11,10,26,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(109,74,255,.25);
}

/* ---------- 轮播 ---------- */
.banner-slide{ transition:opacity .6s ease; }

/* ---------- 悬浮按钮（客服 / AI） ---------- */
.float-btn{
  position:fixed; right:20px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--theme),var(--theme2));
  box-shadow:0 8px 24px -4px rgba(109,74,255,.7);
  cursor:pointer; transition:transform .2s ease;
}
.float-btn:hover{ transform:scale(1.08); }

/* ---------- 气泡聊天 ---------- */
.bubble{ max-width:80%; padding:10px 14px; border-radius:14px; line-height:1.6; word-break:break-word; }
.bubble-user{ background:linear-gradient(90deg,var(--theme),#5a3ee0); color:#fff; margin-left:auto; border-bottom-right-radius:4px; }
.bubble-bot{ background:rgba(255,255,255,.08); border:1px solid var(--line); border-bottom-left-radius:4px; }
.bubble-typing{ opacity:.6; }

/* ---------- Toast ---------- */
#toast{
  position:fixed; left:50%; top:70px; transform:translateX(-50%);
  z-index:200; padding:10px 22px; border-radius:10px;
  background:rgba(18,16,42,.95); border:1px solid var(--theme);
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .3s ease, top .3s ease;
  max-width:80vw; text-align:center;
}
#toast.show{ opacity:1; top:84px; }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:#0B0A1A; }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--theme),var(--theme2)); border-radius:6px; }

/* ---------- 工具 ---------- */
.spin{ display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:rot .7s linear infinite; }
@keyframes rot{ to{ transform:rotate(360deg);} }
.fade-in{ animation:fadeIn .4s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

/* 数量选择器 */
.qty-btn{ width:30px; height:30px; border-radius:8px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none; }
.qty-btn:hover{ background:rgba(109,74,255,.25); }

/* 状态标签配色 */
.st-0{ color:#ffd166; } .st-1{ color:#22D3EE; } .st-2{ color:#7CFC9A; }
.st-3{ color:#9aa0b5; } .st-4{ color:#ff6b81; }