/* =========================================================
   简觅 JianMi —— 精致浅色视觉系统 v2
   设计原则：清晰层级 / 柔和层次 / 微交互 / 品牌渐变点缀
   约束：所有 JS 依赖的选择器与状态类保持兼容
   ========================================================= */
:root {
  /* 基础色 */
  --ink: #16181d;
  --ink-2: #2b2f3a;
  --muted: #666d7a;
  --faint: #98a0ae;
  --line: rgba(22, 26, 38, 0.08);
  --line-strong: rgba(22, 26, 38, 0.13);
  --surface: #ffffff;
  --soft: #f6f7fb;
  --soft-2: #eef0f6;
  /* 品牌色 */
  --blue: #2f6bff;
  --blue-deep: #1e4fd6;
  --violet: #7c5cff;
  --mint: #0ea97c;
  --amber: #b97900;
  --danger: #d94a33;
  --grad-brand: linear-gradient(118deg, #2f6bff 0%, #7c5cff 100%);
  /* 圆角 */
  --radius-xl: 34px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(23, 28, 52, 0.05), 0 4px 14px rgba(23, 28, 52, 0.05);
  --shadow-md: 0 2px 6px rgba(23, 28, 52, 0.05), 0 14px 34px rgba(23, 28, 52, 0.09);
  --shadow-lg: 0 6px 18px rgba(23, 28, 52, 0.07), 0 30px 70px rgba(23, 28, 52, 0.12);
  --ring: 0 0 0 4px rgba(47, 107, 255, 0.15);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Noto Sans SC", "Segoe UI", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(1100px 520px at 85% -140px, rgba(124, 92, 255, 0.07), transparent 62%),
    radial-gradient(900px 480px at -120px 240px, rgba(47, 107, 255, 0.06), transparent 60%),
    var(--soft);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea { font: inherit; }
button { color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
::selection { background: rgba(47, 107, 255, 0.18); }
h1, h2, h3, h4 { letter-spacing: -0.02em; }

.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.section-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

:is(button, input, textarea, a, [tabindex]):focus-visible {
  outline: 3px solid rgba(47, 107, 255, 0.35);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- 顶栏 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30; height: 68px;
  background: rgba(250, 251, 253, 0.8); backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid rgba(22, 26, 38, 0.06);
}
.nav-shell { width: min(1180px, calc(100% - 48px)); height: 100%; margin: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; cursor: pointer; justify-self: start; }
.brand-mark {
  display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden;
  border-radius: 10px; box-shadow: 0 2px 8px rgba(47, 107, 255, 0.22);
  transition: transform .25s ease;
}
.brand:hover .brand-mark { transform: rotate(-4deg) scale(1.04); }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; user-select: none; }
.brand-mark.small { width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto; }
.desktop-nav { display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(22, 26, 38, 0.05); box-shadow: var(--shadow-sm); }
.nav-link { border: 0; background: none; border-radius: 999px; color: var(--muted); padding: 8px 18px; font-size: 14px; font-weight: 600; cursor: pointer; transition: .2s ease; }
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--ink); background: white; box-shadow: 0 3px 10px rgba(23, 28, 52, 0.07); }
.vip-nav-link { color: var(--blue); }
[data-admin-only] { display: none !important; }
.nav-link.is-visible { display: block !important; }
.profile-menu [data-admin-only].is-visible { display: flex !important; }
/* 已是 VIP(含管理员)时关闭"VIP 开通"导航入口(桌面顶栏 + 移动底导) */
.vip-nav-link.vip-nav-hidden { display: none !important; }
.nav-cta {
  justify-self: end; display: flex; align-items: center; gap: 5px; color: white; border: 0;
  background: linear-gradient(135deg, #1d222c, #343b49); padding: 10px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: .2s; box-shadow: 0 8px 20px rgba(23, 28, 52, 0.18);
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(23, 28, 52, 0.24); }
.nav-cta svg, .button svg { width: 17px; height: 17px; }

/* ---------- 页面切换 ---------- */
.page { display: none; animation: pageIn .45s ease both; }
.page.active { display: block; }
#app:focus { outline: none; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } }

/* ---------- 滚动显现 ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.delay-1 { transition-delay: .08s; }
.reveal.delay-2 { transition-delay: .16s; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- 通用按钮 ---------- */
.button {
  border: 0; min-height: 48px; padding: 0 24px; border-radius: 999px; font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
  transition: transform .2s, background .2s, box-shadow .2s;
}
.button:hover { transform: translateY(-2px); }
.button.primary {
  color: white; background: var(--grad-brand); background-size: 140% 140%; background-position: 0% 50%;
  box-shadow: 0 10px 26px rgba(63, 92, 255, 0.28);
}
.button.primary:hover { background-position: 90% 50%; box-shadow: 0 14px 32px rgba(63, 92, 255, 0.36); }
.button.secondary { color: var(--ink); background: white; border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); }
.button.secondary:hover { background: #f7f8fb; }
.button:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------- 首页 Hero ---------- */
.hero { min-height: 700px; display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 55px; padding-block: 86px 90px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #4d5563; font-size: 12px; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; }
.eyebrow span { width: 24px; height: 2px; border-radius: 4px; background: var(--grad-brand); }
h1, h2, h3, p { margin-top: 0; }
.hero h1, .inner-hero h1, .account-intro h1 { margin: 24px 0; font-size: clamp(50px, 5.1vw, 76px); line-height: 1.06; letter-spacing: -.05em; font-weight: 800; }
h1 em {
  font-style: normal;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-copy > p { max-width: 560px; margin-bottom: 31px; color: var(--muted); font-size: 17px; line-height: 1.85; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.trust-line { display: flex; align-items: center; gap: 12px; margin-top: 34px; color: var(--faint); font-size: 12px; }
.avatar-stack { display: flex; }
.avatar-stack span {
  display: grid; place-items: center; width: 30px; height: 30px; margin-left: -7px; border-radius: 50%;
  border: 2px solid var(--soft); background: #dbe7ff; color: #2e5eaf; font-size: 10px; font-weight: 800;
}
.avatar-stack span:first-child { margin-left: 0; background: #191c24; color: white; }
.avatar-stack span:nth-child(2) { background: #ffe0d6; color: #b85034; }

/* hero 可视化仪表盘 */
.hero-visual { position: relative; min-height: 540px; display: grid; place-items: center; }
.orb { position: absolute; border-radius: 50%; filter: blur(3px); }
.orb-one { width: 460px; height: 460px; background: radial-gradient(circle at 35% 30%, #e0ebff, #eae6ff 55%, rgba(240, 240, 248, 0.1) 74%); }
.orb-two { width: 210px; height: 210px; right: 0; top: 30px; background: #d9f4ff; filter: blur(38px); opacity: .7; }
.dashboard-card {
  position: relative; z-index: 2; width: min(510px, 90%); padding: 30px;
  background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 30px; box-shadow: var(--shadow-lg); backdrop-filter: blur(20px); transform: rotate(-1.2deg);
}
.dash-top { display: flex; justify-content: space-between; align-items: flex-start; }
.dash-top > div { display: grid; gap: 4px; }
.mini-label { color: var(--muted); font-size: 12px; font-weight: 600; }
.dash-top strong { font-size: 38px; letter-spacing: -.04em; }
.trend-badge { color: #0e7d50; background: #e5f7ee; padding: 7px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.chart { height: 210px; margin: 14px 0 10px; border-bottom: 1px solid #eee; background-image: linear-gradient(#f0f1f4 1px, transparent 1px); background-size: 100% 52px; }
.chart svg { width: 100%; height: 100%; overflow: visible; }
.chart .area { fill: url(#chartFill); stroke: none; }
.chart .line { fill: none; stroke: var(--blue); stroke-width: 3; }
.chart circle { fill: white; stroke: var(--blue); stroke-width: 4; }
.dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dash-stats div { display: grid; gap: 4px; padding: 10px 12px; background: #f6f7fa; border-radius: 13px; }
.dash-stats span { color: var(--muted); font-size: 10px; }
.dash-stats strong { font-size: 13px; }
.floating-card {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.95); border-radius: 16px; background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-md); backdrop-filter: blur(12px); animation: float 5s ease-in-out infinite;
}
.float-product { right: -7px; top: 95px; }
.float-ai { left: 0; bottom: 90px; animation-delay: -2.4s; }
.float-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; }
.float-icon svg { width: 22px; }
.float-icon.coral { color: #f56d52; background: #fff0ea; }
.float-icon.violet { color: #6950e8; background: #eeeaff; }
.floating-card > span:nth-child(2) { display: grid; gap: 2px; }
.floating-card small { color: var(--muted); font-size: 9px; }
.floating-card b { font-size: 11px; }
.floating-card i { margin-left: 10px; color: #0e7d50; font-size: 10px; font-weight: 800; font-style: normal; }
@keyframes float { 50% { transform: translateY(-10px); } }

/* ---------- 蓝海工具页 ---------- */
.section-kicker {
  color: var(--blue); font-size: 11px; letter-spacing: .18em; font-weight: 800;
}
.inner-hero { padding: 104px 0 62px; text-align: center; }
.inner-hero .eyebrow { justify-content: center; }
.inner-hero h1 { font-size: clamp(44px, 5vw, 68px); }
.inner-hero p { margin: 20px auto 0; color: var(--muted); font-size: 16px; max-width: 640px; }
.tool-list { padding-bottom: 130px; display: grid; gap: 18px; }
.tool-row {
  position: relative; min-height: 290px; display: grid; grid-template-columns: 60px 1.35fr 1fr;
  align-items: center; gap: 28px; overflow: hidden; padding: 42px 44px;
  background: white; border-radius: var(--radius-lg); border: 1px solid rgba(22, 26, 38, 0.05);
  box-shadow: var(--shadow-sm); transition: box-shadow .3s ease, transform .3s ease;
}
.tool-row:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tool-row::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; opacity: 0; transition: opacity .3s;
  background: var(--grad-brand);
}
.tool-row:hover::after { opacity: 1; }
.tool-index {
  align-self: start; width: 34px; height: 34px; display: grid; place-items: center;
  color: var(--blue); background: #eef3ff; border-radius: 11px; font-size: 11px; font-weight: 800;
}
.tool-main h2 { margin: 12px 0; font-size: 31px; letter-spacing: -.035em; }
.tool-main > p { max-width: 550px; color: var(--muted); line-height: 1.7; font-size: 14px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-list span { padding: 6px 10px; color: #6d7482; background: #f4f5f9; border: 1px solid rgba(22, 26, 38, 0.04); border-radius: 999px; font-size: 9px; font-weight: 600; }
.tool-art { position: relative; display: block; width: 100%; height: 170px; background: #f5f7fb; border-radius: 20px; }
.tool-art-button { padding: 0; border: 0; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; }
.tool-art-button:hover { transform: scale(1.015); box-shadow: 0 14px 32px rgba(20, 28, 52, 0.12); }
.tool-button { position: absolute; right: 56px; bottom: 35px; min-height: 40px; padding-inline: 18px; font-size: 12px; }
.tool-row.vip-locked .tool-button { background: linear-gradient(135deg, #191c24, #31363f); box-shadow: 0 12px 30px rgba(17, 17, 19, 0.16); }

/* 工具卡片插画 */
.art-scene { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 20px; }
.art-orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.art-orb-blue { width: 210px; height: 210px; right: -40px; top: -60px; background: radial-gradient(circle at 40% 35%, #cfe0ff, #e8eeff 60%, transparent 75%); }
.art-orb-violet { width: 200px; height: 200px; left: -50px; top: -70px; background: radial-gradient(circle at 60% 40%, #e2dcff, #f3efff 60%, transparent 75%); }
.art-orb-mint { width: 210px; height: 210px; right: -50px; bottom: -80px; background: radial-gradient(circle at 40% 35%, #c9f3e2, #e9fbf3 65%, transparent 78%); }
.art-scan { background: linear-gradient(135deg, #eaf1ff 0%, #f6f2ff 100%); }
.art-ai { background: linear-gradient(135deg, #f3eefd 0%, #edf4ff 100%); }
.art-source { background: linear-gradient(135deg, #e6f8f0 0%, #eef1ff 100%); }
.art-ring {
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  width: 120px; height: 120px; border-radius: 50%;
  border: 1.5px dashed rgba(47, 107, 255, 0.45);
}
.art-ring::before, .art-ring::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 1.5px dashed rgba(47, 107, 255, 0.3);
}
.art-ring::before { inset: 16px; }
.art-ring::after { inset: 34px; border-style: solid; border-color: rgba(47, 107, 255, 0.5); background: rgba(47, 107, 255, 0.06); }
.art-chartline { position: absolute; left: 12px; right: 30px; bottom: 24px; height: 64px; z-index: 1; }
.art-chartline svg { width: 100%; height: 100%; overflow: visible; }
.art-chartline path { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; }
.art-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 7px; z-index: 2;
  padding: 8px 12px; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(255, 255, 255, 0.98);
  border-radius: 13px; box-shadow: 0 12px 26px rgba(30, 40, 80, 0.1); font-size: 10px; font-weight: 700; color: #333338;
}
.art-chip i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.art-chip-a { left: 18px; top: 18px; }
.art-chip-b { left: 18px; bottom: 18px; }
.art-chip-a i { background: var(--blue); box-shadow: 0 0 0 4px #e6eeff; }
.art-chip-b i { background: #f56d52; box-shadow: 0 0 0 4px #ffefe9; }
.art-tag { position: absolute; z-index: 2; padding: 5px 9px; border-radius: 999px; font-size: 9px; font-weight: 800; }
.art-tag.t1 { right: 18px; top: 18px; color: #0f7a52; background: #dcf7ea; }
.art-tag.t2 { right: 96px; top: 18px; color: #c2472f; background: #ffe3da; }
.art-tag.t3 { right: 18px; bottom: 18px; color: #0f7a52; background: #dcf7ea; }
.art-magnifier {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%); z-index: 1;
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px;
  color: var(--blue); background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(255, 255, 255, 0.98);
  box-shadow: 0 14px 30px rgba(47, 107, 255, 0.16);
}
.art-magnifier svg { width: 26px; }
.art-phone {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 98px; padding: 7px; background: white; border: 1px solid rgba(22, 26, 38, 0.06);
  border-radius: 19px; box-shadow: 0 18px 40px rgba(70, 80, 130, 0.18);
}
.art-phone-screen { position: relative; display: block; height: 118px; border-radius: 13px; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #f6f3ff 100%); }
.art-product svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.art-product .p-shade { fill: rgba(36, 40, 80, 0.08); }
.art-product .p-body { fill: #ffd6c9; }
.art-product .p-bottle { fill: #ffe9e1; }
.art-product .p-cap { fill: #7c6cf0; }
.art-spark { position: absolute; color: #7c6cf0; font-size: 13px; font-style: normal; animation: twinkle 2.2s ease-in-out infinite; }
.art-spark.s1 { right: 14px; top: 10px; }
.art-spark.s2 { right: 30px; bottom: 34px; font-size: 9px; color: #f56d52; animation-delay: -1s; }
@keyframes twinkle { 50% { opacity: .25; transform: scale(.8) rotate(18deg); } }
.art-ai-bar {
  position: absolute; left: 8px; right: 8px; bottom: 7px; display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 9px; color: white; font-size: 8px; font-weight: 700; white-space: nowrap;
  background: linear-gradient(90deg, #4c6cf5, #7357ff);
}
.art-ai-bar i { width: 6px; height: 6px; border-radius: 50%; background: white; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.art-src-row {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  display: grid; gap: 7px; width: 68%;
}
.art-src-line {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  padding: 8px 12px; background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(255, 255, 255, 0.98);
  border-radius: 13px; box-shadow: 0 10px 22px rgba(30, 40, 80, 0.08); font-size: 10px;
}
.art-src-line em { font-style: normal; color: #55555b; font-weight: 600; }
.art-src-line b { font-size: 11px; }
.art-src-line.win { border-color: rgba(14, 169, 124, 0.45); box-shadow: 0 12px 24px rgba(14, 169, 124, 0.16); }
.art-src-line.win em { color: #0d7a58; font-weight: 800; }
.art-src-line.win b { color: var(--mint); }
.art-src-line u { text-decoration: none; color: white; background: var(--mint); padding: 3px 6px; border-radius: 999px; font-size: 8px; }
.art-src-dot { width: 7px; height: 7px; border-radius: 50%; background: #c6cbd8; }
.art-src-line.win .art-src-dot { background: var(--mint); box-shadow: 0 0 0 4px #d9f6ea; }
.art-src-line:not(.win) b { color: var(--ink); }

/* ---------- 每日蓝海爆品 ---------- */
.blue-ocean-page { padding: 62px 0 120px; }
.blue-ocean-hero { display: flex; align-items: flex-start; gap: 22px; margin-bottom: 30px; }
.blue-ocean-back {
  width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: white; box-shadow: var(--shadow-sm);
  cursor: pointer; transition: .2s;
}
.blue-ocean-back:hover { transform: translateX(-3px); border-color: rgba(47, 107, 255, 0.4); color: var(--blue); }
.blue-ocean-back svg { width: 19px; }
.blue-ocean-hero h1 { margin: 12px 0 10px; font-size: clamp(36px, 4.4vw, 56px); letter-spacing: -.045em; }
.blue-ocean-hero p { margin: 0; color: var(--muted); font-size: 15px; }
.blue-ocean-toolbar {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 14px; padding: 14px 16px; background: rgba(255, 255, 255, 0.92); border-radius: 20px;
  border: 1px solid rgba(22, 26, 38, 0.05); box-shadow: var(--shadow-sm); backdrop-filter: blur(10px);
}
.blue-ocean-summary { display: flex; align-items: center; gap: 9px; color: #565d6a; font-size: 12px; font-weight: 600; }
.blue-ocean-summary::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22b37a; box-shadow: 0 0 0 4px #e2f6ec; }
.blue-ocean-search { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #f3f4f8; border: 1px solid transparent; border-radius: 999px; width: min(300px, 40%); transition: .2s; }
.blue-ocean-search:focus-within { background: white; border-color: rgba(47, 107, 255, 0.5); box-shadow: var(--ring); }
.blue-ocean-search svg { width: 16px; color: var(--faint); }
.blue-ocean-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13px; color: var(--ink); }
.blue-ocean-filter-toggle {
  display: none; align-items: center; gap: 6px; border: 0; padding: 9px 16px; border-radius: 999px;
  background: linear-gradient(135deg, #1d222c, #343b49); color: white; font-size: 12px; font-weight: 700; cursor: pointer; transition: .2s;
}
.blue-ocean-filter-toggle:hover { box-shadow: 0 8px 20px rgba(23, 28, 52, 0.22); }
.blue-ocean-filter-toggle svg { width: 16px; }
.blue-ocean-count-badge {
  display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--blue); color: white; font-size: 10px;
}
/* 列头: 文字 + 漏斗图标 */
.bo-th { display: inline-flex; align-items: center; gap: 5px; }
.bo-col-filter {
  border: 0; background: none; cursor: pointer; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 6px; color: #b9bcc6; transition: .15s;
}
.bo-col-filter svg { width: 13px; }
.bo-col-filter:hover { color: var(--ink); background: #f1f2f6; }
.bo-col-filter.active { color: var(--blue); background: rgba(47, 107, 255, 0.1); }
/* 列头筛选弹层(一比一复刻设计稿) */
.bo-col-popover {
  position: fixed; z-index: 60; width: 300px; padding: 16px 16px 14px;
  background: white; border-radius: 16px; border: 1px solid rgba(22, 26, 38, 0.06);
  box-shadow: 0 24px 60px rgba(20, 28, 52, 0.18);
}
.blue-ocean-popover-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.blue-ocean-popover-head b { font-size: 14px; letter-spacing: -.01em; }
.blue-ocean-popover-head button { border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: #c3c5cd; }
.blue-ocean-popover-head button:hover { color: var(--ink); }
.blue-ocean-popover-head svg { width: 17px; }
.bo-pop-cols { display: none; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.bo-pop-cols button {
  border: 1px solid #e5e6eb; background: #fafbfd; border-radius: 999px; padding: 5px 11px;
  font-size: 11px; font-weight: 700; color: #87878e; cursor: pointer;
}
.bo-pop-cols button.active { border-color: var(--blue); color: var(--blue); background: rgba(47, 107, 255, 0.08); }
.bo-popover-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bo-popover-field > b { font-size: 13px; }
.bo-col-popover .blue-ocean-sort-options { gap: 2px; padding: 3px; background: #f1f1f4; border-radius: 10px; }
.bo-col-popover .blue-ocean-sort-options button { padding: 6px 13px; border-radius: 8px; color: #87878e; font-size: 11px; }
.bo-col-popover .blue-ocean-sort-options button.active { color: var(--ink); background: white; box-shadow: 0 2px 6px rgba(23, 28, 52, 0.1); }
.bo-col-popover .blue-ocean-range input { padding: 10px 12px; font-size: 12.5px; border-radius: 10px; background: white; }
.bo-clear-filters {
  margin-top: 14px; width: 100%; border: 0; padding: 10px 0; border-radius: 12px;
  background: #f1f1f4; color: #46474d; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: .15s;
}
.bo-clear-filters:hover { background: #e8e9ee; }
.blue-ocean-range { display: flex; align-items: center; gap: 7px; }
.blue-ocean-range input {
  width: 0; flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid #e5e6eb; border-radius: 10px;
  font-size: 12px; outline: 0; background: #fafbfd; transition: .15s;
}
.blue-ocean-range input:focus { border-color: var(--blue); box-shadow: var(--ring); }
.blue-ocean-range span { color: #b5b5ba; font-size: 11px; }
.blue-ocean-state { padding: 60px 0; text-align: center; color: var(--faint); font-size: 13px; }
.blue-ocean-table-wrap {
  background: white; border-radius: var(--radius-lg); overflow: auto; border: 1px solid rgba(22, 26, 38, 0.05);
  box-shadow: var(--shadow-sm);
}
.blue-ocean-table { width: 100%; min-width: 1100px; border-collapse: collapse; }
.blue-ocean-table th {
  position: sticky; top: 0; z-index: 2;
  padding: 15px 16px; text-align: left; color: #7c828f; font-size: 11px; font-weight: 700;
  background: #fafbfd; border-bottom: 1px solid #eeeef2; white-space: nowrap;
}
.blue-ocean-table td { padding: 15px 16px; border-bottom: 1px solid #f3f3f6; font-size: 13px; white-space: nowrap; }
.blue-ocean-table tbody tr { transition: background .15s; }
.blue-ocean-table tbody tr:hover { background: #f7f9fd; }
.blue-ocean-table tbody tr:last-child td { border-bottom: 0; }
.blue-ocean-table .rank-idx { color: #bfc0c7; font-size: 11px; font-weight: 800; }
.blue-ocean-table .kw { font-weight: 800; color: #14161c; }
.blue-ocean-table .blue-val { color: var(--blue); font-weight: 800; }
.blue-ocean-table .cat-tag {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: #4a5a72; background: #eef2f9; white-space: nowrap;
}
.blue-ocean-table .pos { color: #0e8a5d; font-weight: 700; }
.blue-ocean-mobile-list { display: none; gap: 12px; flex-direction: column; }
.blue-ocean-mobile-card { background: white; border-radius: 20px; border: 1px solid rgba(22, 26, 38, 0.05); padding: 18px; box-shadow: var(--shadow-sm); }
.blue-ocean-mobile-card header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.blue-ocean-mobile-card header span { color: #bfc0c7; font-size: 10px; font-weight: 800; }
.blue-ocean-mobile-card header h2 { margin: 0; font-size: 17px; flex: 1; }
.blue-ocean-mobile-card header b { color: var(--blue); font-size: 15px; }
.blue-ocean-mobile-card .m-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.blue-ocean-mobile-card .m-grid div { padding: 8px 10px; background: #f6f7fa; border-radius: 11px; }
.blue-ocean-mobile-card .m-grid span { display: block; color: #98999f; font-size: 9px; margin-bottom: 3px; }
.blue-ocean-mobile-card .m-grid strong { font-size: 12px; }
.blue-ocean-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 26px; }
.blue-ocean-page-arrow {
  width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #e5e6eb; border-radius: 12px;
  background: white; cursor: pointer; transition: .2s; box-shadow: var(--shadow-sm);
}
.blue-ocean-page-arrow:hover { border-color: rgba(47, 107, 255, 0.5); color: var(--blue); }
.blue-ocean-page-arrow svg { width: 16px; }
.blue-ocean-page-numbers { display: flex; gap: 6px; }
.blue-ocean-page-numbers button {
  min-width: 38px; height: 38px; padding: 0 6px; border-radius: 12px; background: white;
  border: 1px solid transparent; color: #74757c; font-size: 13px; font-weight: 700; cursor: pointer; transition: .15s;
}
.blue-ocean-page-numbers button.active { background: linear-gradient(135deg, #1d222c, #343b49); color: white; box-shadow: 0 6px 16px rgba(23, 28, 52, 0.2); }
.blue-ocean-page-numbers button:hover:not(.active) { border-color: #dcdee6; }

/* ---------- VIP ---------- */
.vip-page { min-height: calc(100vh - 68px); padding-block: 58px 105px; display: grid; align-items: center; }
.vip-hero {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr); gap: clamp(34px, 5vw, 76px);
  align-items: center; padding: clamp(34px, 5vw, 72px); background: linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
  border: 1px solid rgba(22, 26, 38, 0.05); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
}
.vip-hero::before {
  content: ""; position: absolute; width: 560px; height: 560px; right: -280px; top: -320px;
  border-radius: 50%; background: radial-gradient(circle at 40% 55%, rgba(124, 92, 255, 0.2), rgba(47, 107, 255, 0.12) 55%, transparent 75%); filter: blur(30px);
}
.vip-copy, .payment-card { position: relative; z-index: 1; }
.vip-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px;
  color: white; background: var(--grad-brand); font-size: 14px; font-weight: 800; letter-spacing: .06em;
  box-shadow: 0 8px 22px rgba(80, 90, 255, 0.32);
}
.vip-copy h1 { margin: 25px 0 18px; font-size: clamp(42px, 5vw, 66px); line-height: 1.04; letter-spacing: -.05em; font-weight: 800; }
.vip-copy > p { max-width: 590px; color: var(--muted); line-height: 1.8; font-size: 15px; }
.vip-active-notice {
  display: flex; flex-direction: column; gap: 4px; margin: 20px 0 10px; padding: 14px 18px;
  color: #0d7a55; background: #e5f7ee; border: 1px solid rgba(14, 169, 124, 0.22); border-radius: 15px; font-size: 15px; font-weight: 800;
}
.vip-active-notice small { color: #4c9474; font-size: 11px; font-weight: 600; }
.vip-price { display: flex; align-items: baseline; gap: 20px; margin: 26px 0 30px; }
.vip-price > span { color: var(--faint); font-size: 13px; }
.vip-price strong { font-size: 58px; line-height: 1; letter-spacing: -.05em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vip-price strong small { font-size: 14px; letter-spacing: 0; font-weight: 700; background: none; -webkit-text-fill-color: currentColor; }
.vip-benefits { display: grid; gap: 15px; padding: 0; margin: 0; list-style: none; }
.vip-benefits li { display: flex; align-items: center; gap: 13px; }
.vip-benefits i {
  width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto;
  color: white; background: var(--grad-brand); border-radius: 50%; font-size: 12px; font-style: normal; font-weight: 900;
  box-shadow: 0 5px 14px rgba(80, 90, 255, 0.28);
}
.vip-benefits li > span { display: grid; gap: 3px; }
.vip-benefits b { font-size: 14px; }
.vip-benefits small { color: #84868f; font-size: 10px; }
.payment-card {
  padding: 28px; background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(22, 26, 38, 0.07);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); backdrop-filter: blur(20px);
}
.payment-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; font-size: 13px; font-weight: 800; }
.payment-card-head b { font-size: 19px; color: var(--blue); }
.qr-code-frame { position: relative; width: min(250px, 100%); aspect-ratio: 1 / 1; margin: 0 auto; padding: 12px; background: white; border: 1px solid #ececf0; border-radius: 20px; box-shadow: var(--shadow-sm); }
.qr-code-frame img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 14px; }
.qr-name-mask { display: none; }
.qr-brand-replacement { display: none; }
.payment-card > p { margin: 20px 0 5px; color: var(--muted); font-size: 12px; line-height: 1.75; text-align: center; }
.payment-auto-copy b { color: var(--ink); font-size: 14px; }
.payment-card .mobile-payment-tip { display: none; }
.payment-security { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; color: #8c8c92; font-size: 11px; }
.payment-security span { color: var(--mint); font-weight: 900; }
/* 未上传收款码时的占位提示(绝不用假码冒充) */
.qr-code-frame[data-empty]::after {
  content: "收款码待管理员上传"; display: grid; place-items: center; position: absolute; inset: 12px;
  border-radius: 14px; background: #f5f6fa; color: #9fa1aa; font-size: 11px; font-weight: 700;
}
.mobile-vip-open { display: none; }

/* ---------- VIP 按目标设计图调整（2026-09-11，参照用户提供的界面图） ----------
   图中口径：收款码截图占卡片内容全宽、完整竖版展示(约 2:3)；
   角标为浅蓝底蓝字；"三大核心功能"与价格均为纯色(蓝/黑)而非渐变。 */
.vip-page .vip-pill { color: var(--blue); background: #e9f0ff; box-shadow: none; }
.vip-copy h1 em { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--blue); -webkit-text-fill-color: var(--blue); }
.vip-page .vip-copy h1 { font-size: clamp(44px, 5.2vw, 70px); }
.vip-page .vip-price strong { font-size: 62px; background: none; color: var(--ink); -webkit-text-fill-color: var(--ink); }
.vip-page .payment-card-head b { color: var(--ink); }
.vip-page .vip-benefits small { font-size: 12px; }
/* 收款码: 占满卡片内容宽 + 固定 2:3 竖版框(高度与图片加载无关, 不会压缩展开), 去掉白边描边 */
.vip-page .qr-code-frame {
  width: 100%; aspect-ratio: 2 / 3; padding: 0; border: 0; border-radius: 16px;
  overflow: hidden; box-shadow: none; background: white;
}
.vip-page .qr-code-frame img { border-radius: 16px; }

/* ---------- 我的 / 登录注册 ---------- */
.account-page { min-height: calc(100vh - 68px); padding-block: 70px 120px; display: grid; grid-template-columns: 1fr 480px; gap: 70px; align-items: center; }
.account-brand { margin-bottom: 44px; }
.account-intro h1 { margin: 22px 0; font-size: clamp(42px, 4.6vw, 62px); }
.account-intro > div > p { color: var(--muted); font-size: 15px; line-height: 1.8; max-width: 460px; }
.account-intro blockquote {
  margin: 40px 0 0; padding: 20px 24px; color: #7d828e; background: rgba(255, 255, 255, 0.85);
  border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: 13px; max-width: 420px;
}
.auth-card {
  width: 100%; padding: 42px; background: white; border-radius: 30px; border: 1px solid rgba(22, 26, 38, 0.04);
  box-shadow: var(--shadow-lg);
}
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px; background: #f1f2f6; }
.auth-tabs button { padding: 10px; border: 0; border-radius: 11px; color: #83848c; background: none; font-size: 13px; font-weight: 700; cursor: pointer; transition: .15s; }
.auth-tabs button.active { color: var(--ink); background: white; box-shadow: 0 3px 9px rgba(23, 28, 52, 0.08); }
.auth-form { display: none; padding-top: 30px; }
.auth-form.active { display: grid; gap: 16px; }
.auth-view.profile-view { display: none; }
.auth-view.profile-view.is-visible { display: block; }
.form-heading h2 { margin: 0 0 6px; font-size: 23px; letter-spacing: -.02em; }
.form-heading p { margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.auth-form label { display: grid; gap: 8px; color: #55575f; font-size: 11px; font-weight: 700; }
.input-wrap {
  display: flex; align-items: center; gap: 10px; padding: 13px 15px; background: #f5f6f9;
  border: 1px solid transparent; border-radius: 14px; transition: .2s;
}
.input-wrap:focus-within { border-color: rgba(47, 107, 255, 0.55); background: white; box-shadow: var(--ring); }
.input-wrap svg { width: 17px; color: #a2a4ad; flex: 0 0 auto; }
.input-wrap input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14px; color: var(--ink); }
.form-error { min-height: 16px; margin: 0; color: var(--danger); font-size: 12px; }
.auth-form .submit-button { width: 100%; }
.profile-top { display: flex; align-items: center; gap: 17px; margin-bottom: 22px; }
.profile-avatar {
  width: 66px; height: 66px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 22px;
  color: white; background: var(--grad-brand); font-size: 26px; font-weight: 800;
  box-shadow: 0 10px 24px rgba(80, 90, 255, 0.3);
}
.profile-top .status { margin-bottom: 4px; }
.status { display: inline-flex; align-items: center; gap: 6px; color: #85878f; font-size: 10px; font-weight: 700; }
.status i { width: 6px; height: 6px; border-radius: 50%; background: #b8b9c0; }
.available-status { color: #128052; }
.available-status i { background: #22b37a; box-shadow: 0 0 0 4px #e2f6ec; }
.profile-top h2 { margin: 0 0 3px; font-size: 21px; }
.profile-top p { margin: 0 0 7px; color: var(--muted); font-size: 11px; }
.profile-vip-badge {
  display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 9px; font-weight: 800;
  color: #75767e; background: #f0f1f5;
}
.profile-vip-badge.is-vip { color: #8b5c00; background: linear-gradient(120deg, #fff3cf, #ffe9b8); }
.profile-vip-badge.is-admin { color: var(--blue); background: #e9f0ff; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.profile-stats div { display: grid; gap: 3px; padding: 13px 10px; background: #f6f7fa; border-radius: 15px; text-align: center; }
.profile-stats strong { font-size: 19px; }
.profile-stats span { color: #8d8f97; font-size: 10px; }
.profile-device-card {
  display: flex; align-items: center; gap: 12px; padding: 14px 15px; margin-bottom: 12px;
  border: 1px solid #eef0f4; border-radius: 16px; background: #fbfbfd;
}
.device-card-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--blue); background: #eaf1ff; flex: 0 0 auto; }
.device-card-icon svg { width: 20px; }
.device-card-copy { display: grid; gap: 3px; flex: 1; }
.device-card-copy b { font-size: 12px; }
.device-card-copy small { color: #98999f; font-size: 9px; line-height: 1.5; }
.profile-device-card > strong { color: var(--blue); font-size: 14px; }
.profile-vip-card {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 12px; padding: 16px;
  border: 0; border-radius: 18px; color: white; cursor: pointer; text-align: left;
  background: linear-gradient(120deg, #171a21 0%, #2a2f3c 55%, #3d3a6e 100%);
  box-shadow: 0 14px 32px rgba(23, 28, 52, 0.28); transition: .2s;
}
.profile-vip-card:hover { transform: translateY(-2px); }
.profile-vip-icon {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto;
  color: #6d5bd0; background: linear-gradient(140deg, #f0ddb8, #fff3dd); font-weight: 900; font-size: 20px;
}
.profile-vip-copy { display: grid; gap: 3px; flex: 1; }
.profile-vip-copy b { font-size: 13px; }
.profile-vip-copy small { color: #9d9fa8; font-size: 9px; }
.profile-vip-price { display: flex; align-items: center; gap: 7px; }
.profile-vip-price s { color: #74767f; font-size: 10px; }
.profile-vip-price b { font-size: 15px; color: #ffd166; }
.profile-vip-price i { font-style: normal; font-size: 9px; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #ffd166; }
.profile-menu { display: grid; gap: 8px; margin-bottom: 14px; }
.profile-menu button {
  display: flex; justify-content: space-between; align-items: center; padding: 14px 16px;
  border: 1px solid #eef0f4; border-radius: 15px; background: white; font-size: 13px; font-weight: 700; cursor: pointer; transition: .2s;
}
.profile-menu button:hover { border-color: #d9dce4; background: #fafbfd; transform: translateX(2px); }
.profile-menu b { color: #b8b9c0; }
.logout-button { width: 100%; }
.profile-view.is-vip .profile-vip-card { display: none; }

/* ---------- 后台管理 ---------- */
.admin-page { padding: 66px 0 130px; }
.admin-hero { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 34px; gap: 20px; }
.admin-hero h1 { margin: 14px 0 10px; font-size: clamp(38px, 4.6vw, 58px); letter-spacing: -.045em; }
.admin-hero p { margin: 0; color: var(--muted); font-size: 15px; }
.admin-analytics {
  padding: 30px; background: white; border-radius: var(--radius-lg);
  border: 1px solid rgba(22, 26, 38, 0.05); box-shadow: var(--shadow-sm); margin-bottom: 18px;
}
.admin-analytics-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.admin-analytics-head h2 { margin: 10px 0 6px; font-size: 24px; letter-spacing: -.02em; }
.admin-analytics-head p { margin: 0; color: var(--muted); font-size: 12px; }
.admin-analytics-date { color: var(--faint); font-size: 12px; font-weight: 600; }
.admin-metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.admin-metric-card {
  position: relative; display: grid; gap: 8px; padding: 20px; background: #f7f8fb;
  border: 1px solid rgba(22, 26, 38, 0.04); border-radius: 18px; overflow: hidden;
}
.admin-metric-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--grad-brand); opacity: .8;
}
.admin-metric-card span { color: #6f7480; font-size: 11px; font-weight: 700; }
.admin-metric-card strong { font-size: 30px; letter-spacing: -.03em; }
.admin-metric-card small { color: #9ea0a9; font-size: 10px; }
.admin-analytics-divider { height: 1px; margin: 26px 0; background: #eef0f4; }
.admin-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.admin-filter-bar label { display: flex; align-items: center; gap: 9px; color: #6f7480; font-size: 11px; font-weight: 700; }
.admin-filter-bar input[type="date"] { padding: 9px 12px; border: 1px solid #e5e6eb; border-radius: 11px; font-size: 12px; outline: 0; background: #fafbfd; color: var(--ink); transition: .15s; }
.admin-filter-bar input[type="date"]:focus { border-color: var(--blue); box-shadow: var(--ring); }
.admin-period-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #f1f2f6; }
.admin-period-tabs button { padding: 8px 18px; border: 0; border-radius: 999px; background: none; color: #83848c; font-size: 12px; font-weight: 700; cursor: pointer; transition: .15s; }
.admin-period-tabs button.active { color: var(--ink); background: white; box-shadow: 0 3px 9px rgba(23, 28, 52, 0.08); }
.admin-panel {
  padding: 30px; margin-bottom: 18px; background: white; border-radius: var(--radius-lg);
  border: 1px solid rgba(22, 26, 38, 0.05); box-shadow: var(--shadow-sm);
}
.admin-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.admin-panel-head > div > span { color: var(--faint); font-size: 10px; letter-spacing: .16em; font-weight: 800; }
.admin-panel-head h3 { margin: 8px 0 5px; font-size: 20px; letter-spacing: -.015em; }
.admin-panel-head p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.admin-panel-head > b { color: var(--blue); background: #eef3ff; padding: 7px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.admin-user-row { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-top: 1px solid #f2f3f6; }
.admin-user-row .user-avatar {
  width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px;
  color: white; background: linear-gradient(135deg, #22262f, #3c4250); font-weight: 800; font-size: 15px;
}
.admin-user-row .user-meta { flex: 1; min-width: 0; display: grid; gap: 3px; }
.admin-user-row .user-meta b { font-size: 13px; }
.admin-user-row .user-meta span { color: var(--faint); font-size: 10px; }
.admin-user-tags { display: flex; gap: 5px; }
.admin-user-tags i { font-style: normal; padding: 3px 9px; border-radius: 999px; font-size: 9px; font-weight: 800; color: #75767e; background: #f0f1f5; }
.admin-user-tags i.vip { color: #8b5c00; background: #fff3cf; }
.admin-user-tags i.admin { color: var(--blue); background: #e9f0ff; }
.admin-user-actions { display: flex; gap: 8px; }
.admin-user-actions button {
  border: 1px solid #e3e5eb; background: white; padding: 7px 13px; border-radius: 999px;
  font-size: 11px; font-weight: 700; cursor: pointer; transition: .2s;
}
.admin-user-actions button:hover { border-color: rgba(47, 107, 255, 0.55); color: var(--blue); }
.admin-user-actions button.danger { color: var(--danger); }
.admin-user-actions button.danger:hover { border-color: rgba(217, 74, 51, 0.5); }
.blue-ocean-upload, .payment-qr-upload {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 22px;
  border: 1.5px dashed #dde1ea; border-radius: 20px; background: #fafbfd; cursor: pointer; text-align: left; transition: .2s;
}
.blue-ocean-upload:hover, .payment-qr-upload:hover { border-color: rgba(47, 107, 255, 0.55); background: #f5f8ff; }
.blue-ocean-upload-icon, .payment-qr-upload-icon {
  display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto;
  border-radius: 15px; color: var(--blue); background: #eaf1ff;
}
.blue-ocean-upload-icon svg, .payment-qr-upload-icon svg { width: 23px; }
.blue-ocean-upload > span:nth-child(2), .payment-qr-upload > span:nth-child(2) { display: grid; gap: 4px; flex: 1; }
.blue-ocean-upload b, .payment-qr-upload b { font-size: 13px; }
.blue-ocean-upload small, .payment-qr-upload small { color: #97999f; font-size: 10px; }
.blue-ocean-upload i, .payment-qr-upload i {
  font-style: normal; padding: 9px 16px; border-radius: 999px; color: white;
  background: var(--grad-brand); font-size: 11px; font-weight: 800; box-shadow: 0 6px 16px rgba(80, 90, 255, 0.25);
}
.blue-ocean-upload-status, .payment-qr-upload-status { margin: 12px 0 0; min-height: 16px; color: var(--mint); font-size: 11px; font-weight: 700; }
/* 收件目录自动导入：与上方「上传 Excel」同一视觉体系，仅拉开间距 */
.blue-ocean-autosync { margin-top: 16px; }

/* VIP 价格手输编辑器 */
.vip-pricing-editor {
  display: grid; gap: 18px; padding: 22px; border-radius: var(--radius-md);
  background: #f7f8fb; border: 1px solid rgba(22, 26, 38, 0.04);
}
.vip-price-fields { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 14px; }
.vip-price-field { display: grid; gap: 8px; color: #55575f; font-size: 11px; font-weight: 700; }
.vip-price-field input {
  width: 100%; padding: 12px 14px; border: 1px solid #e3e5eb; border-radius: 12px;
  font-size: 16px; font-weight: 800; outline: 0; background: white; color: var(--ink); transition: .15s;
}
.vip-price-field input:focus { border-color: rgba(47, 107, 255, 0.55); box-shadow: var(--ring); }
.vip-price-live {
  grid-column: 1 / -1; padding: 11px 14px; border-radius: 12px; background: #eef3ff;
  color: #2c56c5; font-size: 12px; font-weight: 700;
}
.vip-pricing-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vip-pricing-actions small { color: var(--faint); font-size: 11px; }
.payment-qr-list { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.payment-qr-list figure { position: relative; margin: 0; cursor: pointer; }
.payment-qr-list img { width: 92px; height: 92px; object-fit: cover; border-radius: 14px; border: 2px solid #ececf0; display: block; }
.payment-qr-list figure.active img { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.12); }
.payment-qr-list figcaption { margin-top: 5px; text-align: center; color: var(--faint); font-size: 9px; }
.payment-qr-list figure.active figcaption { color: var(--blue); font-weight: 700; }
.payment-qr-list figure[data-qr-current] { cursor: default; }
.payment-qr-list figure[data-qr-current] img { width: 148px; height: 148px; }
.payment-qr-list figure[data-qr-current] figcaption { max-width: 148px; word-break: break-all; }
.admin-empty { padding: 22px 4px; text-align: center; color: var(--faint); font-size: 12px; line-height: 1.7; }

/* ---------- 页脚 ---------- */
.site-footer { border-top: 1px solid rgba(22, 26, 38, 0.06); background: rgba(255, 255, 255, 0.45); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 30px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand > div { display: grid; gap: 3px; }
.footer-brand strong { font-size: 14px; }
.footer-brand span { color: #8d8f97; font-size: 11px; }
.site-footer > .section-shell > span { color: #9fa1aa; font-size: 11px; }

/* ---------- 移动端导航 ---------- */
.mobile-nav {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: 66px;
  background: rgba(255, 255, 255, 0.88); backdrop-filter: saturate(180%) blur(22px);
  border-top: 1px solid rgba(22, 26, 38, 0.07); padding-bottom: env(safe-area-inset-bottom);
}
.mobile-nav button { flex: 1; display: grid; place-items: center; gap: 3px; border: 0; background: none; color: #8a8c94; font-size: 9px; font-weight: 700; cursor: pointer; }
.mobile-nav button.active { color: var(--blue); }
.mobile-nav svg { width: 21px; height: 21px; }

/* ---------- 客服浮窗与面板 ---------- */
.customer-service-trigger {
  position: fixed; right: 22px; bottom: 24px; z-index: 35; display: flex; align-items: center; gap: 11px;
  padding: 11px 18px 11px 12px; border: 0; border-radius: 999px; color: white;
  background: linear-gradient(120deg, #171a21, #2c313d); box-shadow: 0 16px 40px rgba(17, 19, 26, 0.32); cursor: pointer; transition: .2s;
}
.customer-service-trigger:hover { transform: translateY(-2px); }
.service-trigger-icon {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--grad-brand);
}
.service-trigger-icon svg { width: 20px; }
.customer-service-trigger > span:last-child { display: grid; gap: 2px; text-align: left; }
.customer-service-trigger b { font-size: 13px; }
.customer-service-trigger small { display: flex; align-items: center; gap: 5px; color: #9b9da6; font-size: 9px; }
.customer-service-trigger small i { width: 6px; height: 6px; border-radius: 50%; background: #34d399; }
.customer-service-panel {
  position: fixed; right: 22px; bottom: 92px; z-index: 36; width: min(370px, calc(100vw - 32px));
  background: white; border-radius: 24px; box-shadow: 0 30px 80px rgba(18, 24, 44, 0.22);
  transform-origin: bottom right; transition: transform .25s ease, opacity .25s ease; opacity: 0; transform: scale(.92) translateY(12px); pointer-events: none;
  overflow: hidden; border: 1px solid rgba(22, 26, 38, 0.05);
}
.customer-service-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.service-header { display: flex; align-items: center; gap: 13px; padding: 18px 20px; color: white; background: linear-gradient(120deg, #171a21, #2c313d); }
.service-agent-avatar {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 15px; color: white;
  background: var(--grad-brand); font-weight: 800; font-size: 18px;
}
.service-header h2 { margin: 0 0 4px; font-size: 16px; }
.service-header p { margin: 0; display: flex; align-items: center; gap: 6px; color: #9b9da6; font-size: 10px; }
.service-header p i { width: 6px; height: 6px; border-radius: 50%; background: #34d399; }
.service-close { margin-left: auto; border: 0; background: rgba(255, 255, 255, 0.08); color: #c9cad1; width: 34px; height: 34px; border-radius: 50%; font-size: 20px; cursor: pointer; }
.service-messages { height: 300px; overflow-y: auto; padding: 18px; background: #f5f6f9; }
.service-time { text-align: center; color: #b2b4bc; font-size: 9px; margin-bottom: 14px; }
.service-message { display: flex; gap: 9px; margin-bottom: 13px; }
.service-message .message-avatar {
  width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px;
  background: #191c24; color: white; font-size: 11px; font-weight: 800;
}
.service-message p { margin: 0; padding: 11px 14px; background: white; border-radius: 4px 14px 14px 14px; font-size: 12px; line-height: 1.7; max-width: 82%; box-shadow: 0 4px 12px rgba(23, 28, 52, 0.05); }
.service-message.user { flex-direction: row-reverse; }
.service-message.user .message-avatar { background: var(--grad-brand); }
.service-message.user p { background: var(--blue); color: white; border-radius: 14px 4px 14px 14px; }
.service-message.user img, .service-message.agent img { display: block; max-width: 200px; border-radius: 10px; margin-top: 6px; }
/* 图片消息: 去掉文字气泡的底色与内边距, 让图片本身成为气泡 */
.service-message p.msg-image { padding: 0; background: none; box-shadow: none; }
.service-message.user p.msg-image { background: none; }
.service-message p.msg-image img { max-width: 210px; max-height: 210px; object-fit: cover; cursor: zoom-in; margin-top: 0; }
.service-message.pending .msg-image { position: relative; }
.service-message.pending .msg-image img { opacity: 0.55; }
.msg-image-mask {
  position: absolute; inset: auto 0 0 0; padding: 3px 8px; font-style: normal; font-size: 10px; text-align: center;
  color: #fff; background: rgba(23, 28, 52, 0.55); border-radius: 0 0 10px 10px;
}
.service-quick-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 0 14px 39px; }
.service-quick-actions button {
  border: 0; padding: 8px 13px; border-radius: 999px; background: white; color: var(--blue);
  font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 10px rgba(23, 28, 52, 0.06);
}
.service-composer { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: white; border-top: 1px solid #eef0f4; }
.service-composer input[type="text"] {
  flex: 1; min-width: 0; padding: 11px 14px; border: 0; outline: 0; border-radius: 999px;
  background: #f3f4f8; font-size: 12px;
}
.service-composer button { border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--faint); }
.service-composer button[type="submit"] { width: 40px; height: 40px; border-radius: 50%; color: white; background: var(--grad-brand); }
.service-composer svg { width: 20px; }
/* 客服面板: 接待席位状态条(排队位次 / 回复倒计时 / 已断开) */
.service-seat { padding: 10px 14px; background: #fffaf0; border-top: 1px solid #f2e3c8; }
.service-seat[hidden], .service-seat-bar[hidden] { display: none; }
.service-seat-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.service-seat-row span { font-size: 11.5px; line-height: 1.6; color: #8a6d3b; }
.service-seat-btn {
  flex: 0 0 auto; border: 0; cursor: pointer; padding: 7px 13px; border-radius: 999px;
  background: var(--grad-brand); color: #fff; font-size: 11.5px; font-weight: 700;
}
.service-seat-bar { margin-top: 8px; height: 4px; border-radius: 999px; background: #f0e2c6; overflow: hidden; }
.service-seat-bar i { display: block; height: 100%; width: 100%; border-radius: 999px; background: #e8a33d; transition: width .3s linear; }
.service-image-input, .image-generation-input, .source-image-input, .payment-qr-file-input, .blue-ocean-excel-input { display: none; }
/* 客服浮窗: 未读红点 */
.service-unread-dot {
  position: absolute; top: 7px; right: 9px; width: 10px; height: 10px; border-radius: 50%;
  background: #ff4d4f; box-shadow: 0 0 0 2px rgba(23, 26, 33, 0.85);
}

/* 导航「后台管理」上的客服未读角标 */
.chat-nav-badge {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 6px; padding: 0 5px;
  border-radius: 999px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; font-style: normal; line-height: 1;
}

/* ---------- 后台 · 客服会话工作台 ---------- */
/* 后台工作台: 接待席概览(当前接待 / 排队人数 / 席位规则) */
.admin-chat-seat { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.admin-chat-seat .acs-item {
  flex: 1 1 180px; min-width: 0; display: grid; gap: 5px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.admin-chat-seat .acs-item span { font-size: 10.5px; letter-spacing: .04em; color: var(--faint); }
.admin-chat-seat .acs-item b { font-size: 13px; color: var(--ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-chat-seat .acs-rule b { font-size: 11.5px; font-weight: 600; color: #8a6d3b; }
.admin-chat-seat .acs-release {
  flex: 0 0 auto; align-self: stretch; padding: 0 16px; border: 1px solid #f0c9c9; border-radius: 14px;
  background: #fff5f5; color: #c0392b; font-size: 12px; font-weight: 700; cursor: pointer;
}
.admin-chat-seat .acs-release:hover { background: #ffe9e9; border-color: #e8a9a9; }
.admin-chat-seat .acs-release[hidden] { display: none; }
.admin-chat { display: grid; grid-template-columns: 300px 1fr; gap: 16px; margin-top: 4px; }
.admin-chat-sessions, .admin-chat-thread {
  display: flex; flex-direction: column; background: var(--soft);
  border-radius: var(--radius-md); border: 1px solid var(--line); overflow: hidden;
}
.admin-chat-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #fff; border-bottom: 1px solid var(--line); }
.admin-chat-search svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; }
.admin-chat-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 12px; }
.admin-chat-session-list { flex: 1; overflow-y: auto; max-height: 430px; }
.admin-chat-session {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px; cursor: pointer;
  border-bottom: 1px solid rgba(22, 26, 38, 0.05); transition: background .15s;
}
.admin-chat-session:hover { background: #fff; }
.admin-chat-session.active { background: #fff; box-shadow: inset 3px 0 0 var(--blue); }
.cs-avatar {
  display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 12px;
  background: var(--grad-brand); color: #fff; font-size: 13px; font-weight: 800;
}
.cs-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.cs-main b { font-size: 12.5px; color: var(--ink); font-weight: 700; }
.cs-main small { font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-side { display: grid; justify-items: end; gap: 5px; flex: 0 0 auto; }
.cs-side i { font-style: normal; font-size: 10px; color: #b7bcc8; }
.cs-side em {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 999px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; font-style: normal;
}
/* 串行接待: 当前接待的会话在列表里高亮并打标 */
.admin-chat-session.serving { background: #fff; box-shadow: inset 3px 0 0 #e8a33d; }
.cs-side .cs-tag {
  padding: 2px 7px; border-radius: 999px; background: #fff3e0; color: #b5731f;
  font-size: 10px; font-weight: 700; font-style: normal; white-space: nowrap;
}
/* 排队中的会话: 蓝调区分于「接待中」的橙调 */
.admin-chat-session.queued { box-shadow: inset 3px 0 0 #7aa7ff; }
.cs-side .cs-tag.queued { background: #eaf1ff; color: #3a6fd8; }
/* 会话顶部提示条: 说明"消息已收到、暂时不可回复"的原因 */
.admin-chat-thread-note {
  padding: 9px 16px; font-size: 11.5px; line-height: 1.55;
  background: #f4f6fb; color: #6b7280; border-bottom: 1px solid var(--line);
}
.admin-chat-thread-note.queued { background: #fff8e9; color: #96661a; }
/* 排队期间收到的消息: 打标并加蓝色左侧强调条 */
.admin-chat-bubble.queued::before {
  content: "排队中收到"; justify-self: start; padding: 1px 6px; border-radius: 999px;
  background: #eaf1ff; color: #3a6fd8; font-size: 9.5px; font-weight: 700;
}
.admin-chat-bubble.queued p { box-shadow: inset 3px 0 0 #7aa7ff, 0 3px 10px rgba(23, 28, 52, 0.05); }
.admin-chat-thread-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; min-height: 58px; background: #fff; border-bottom: 1px solid var(--line); }
.admin-chat-thread-head .ct-meta { display: grid; gap: 2px; }
.admin-chat-thread-head .ct-meta b { font-size: 13px; color: var(--ink); }
.admin-chat-thread-head .ct-meta small { font-size: 10.5px; color: var(--faint); }
.admin-chat-tip { font-size: 12px; color: var(--faint); }
.admin-chat-messages { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px; overflow-y: auto; max-height: 372px; }
.admin-chat-bubble { max-width: 74%; display: grid; gap: 4px; }
.admin-chat-bubble p {
  margin: 0; padding: 10px 13px; border-radius: 4px 14px 14px 14px; background: #fff; color: var(--ink-2);
  font-size: 12.5px; line-height: 1.65; word-break: break-word; box-shadow: 0 3px 10px rgba(23, 28, 52, 0.05);
}
.admin-chat-bubble time { font-size: 10px; color: #b7bcc8; }
.admin-chat-bubble.mine { align-self: flex-end; }
.admin-chat-bubble.mine p { background: var(--blue); color: #fff; border-radius: 14px 4px 14px 14px; }
.admin-chat-bubble.mine time { text-align: right; }
/* 图片消息气泡: 图片即内容, 去掉文字底色 */
.admin-chat-bubble p.msg-image { padding: 0; background: none; box-shadow: none; }
.admin-chat-bubble.mine p.msg-image { background: none; }
.admin-chat-bubble p.msg-image img {
  display: block; max-width: 220px; max-height: 220px; object-fit: cover;
  border-radius: 10px; cursor: zoom-in; box-shadow: 0 4px 12px rgba(23, 28, 52, 0.12);
}
.admin-chat-composer { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: #fff; border-top: 1px solid var(--line); }
.admin-chat-composer input { flex: 1; min-width: 0; padding: 11px 14px; border: 0; outline: 0; border-radius: 999px; background: #f3f4f8; font-size: 12.5px; }
.admin-chat-composer input:disabled { opacity: .6; }
.admin-chat-composer button {
  width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center;
  border: 0; border-radius: 50%; color: #fff; background: var(--grad-brand); cursor: pointer;
}
.admin-chat-composer button:disabled { opacity: .45; cursor: not-allowed; }
.admin-chat-composer svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) {
  .admin-chat { grid-template-columns: 1fr; }
  .admin-chat-session-list { max-height: 236px; }
  .admin-chat-messages { max-height: 300px; }
}

/* ---------- 弹窗通用 ---------- */
.modal-backdrop, .payment-modal-backdrop, .source-search-backdrop, .image-generation-backdrop {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px;
  background: rgba(16, 18, 26, 0.52); backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.modal-backdrop.open, .payment-modal-backdrop.open, .source-search-backdrop.open, .image-generation-backdrop.open { opacity: 1; pointer-events: auto; }
.modal {
  position: relative; width: min(440px, 100%); padding: 46px 40px 38px; background: white; border-radius: 28px;
  text-align: center; transform: scale(.94); transition: transform .25s ease; box-shadow: 0 40px 90px rgba(10, 14, 30, 0.3);
}
.open .modal, .open .payment-modal-shell, .open .source-search-modal, .open .image-generation-modal { transform: none; }
.modal-close, .payment-modal-close, .source-search-close, .image-generation-close {
  position: absolute; right: 16px; top: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: #f1f2f6; color: #6c6e77; font-size: 21px; cursor: pointer; display: grid; place-items: center; z-index: 3; transition: .15s;
}
.modal-close:hover, .payment-modal-close:hover, .source-search-close:hover, .image-generation-close:hover { background: #e7e9ef; color: var(--ink); }
.modal-icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 20px; border-radius: 20px; color: white; background: var(--grad-brand); font-size: 28px; box-shadow: 0 10px 26px rgba(80, 90, 255, 0.3); }
.modal h2 { margin: 0 0 10px; font-size: 22px; letter-spacing: -.02em; }
.modal p { margin: 0 auto 24px; color: var(--muted); font-size: 13px; line-height: 1.75; max-width: 320px; }
.modal-actions { display: grid; gap: 10px; }
.modal-actions .button { width: 100%; }
.modal-actions .text-link-btn { border: 0; background: none; color: var(--muted); font-size: 12px; cursor: pointer; padding: 4px; }

/* 支付弹窗 */
.payment-modal-shell { position: relative; width: min(430px, 100%); transition: transform .25s ease; }
.payment-modal-shell .payment-card { box-shadow: 0 40px 90px rgba(10, 14, 30, 0.35); }
.payment-modal-shell .payment-card-head { display: none; }

/* 货源 / 生图弹窗 */
.source-search-modal, .image-generation-modal {
  position: relative; width: min(560px, 100%); max-height: 92vh; overflow-y: auto; padding: 34px;
  background: white; border-radius: 28px; transform: scale(.94); transition: transform .25s ease;
  box-shadow: 0 40px 90px rgba(10, 14, 30, 0.3);
}
.source-search-head, .image-generation-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.source-search-icon, .image-generation-icon {
  display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto; border-radius: 16px;
  color: white; background: var(--grad-brand); box-shadow: 0 8px 22px rgba(80, 90, 255, 0.28);
}
.source-search-icon svg, .image-generation-icon svg { width: 25px; }
.source-search-head span, .image-generation-head span { color: var(--faint); font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.source-search-head h2, .image-generation-head h2 { margin: 3px 0 0; font-size: 19px; }
.source-upload-zone, .image-generation-upload {
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px;
  width: 100%; min-height: 190px; padding: 24px; border: 1.5px dashed #d8dbe4; border-radius: 20px;
  background: #fafbfd; cursor: pointer; transition: .2s;
}
.source-upload-zone:hover, .image-generation-upload:hover { border-color: rgba(47, 107, 255, 0.55); background: #f5f8ff; }
.source-upload-zone svg, .image-generation-upload svg { width: 32px; color: var(--blue); }
.source-upload-zone b, .image-generation-upload b { font-size: 14px; }
.source-upload-zone small, .image-generation-upload small { color: var(--faint); font-size: 10px; }
.source-preview img, .image-generation-preview img { max-height: 240px; max-width: 100%; border-radius: 14px; }
.source-search-status, .image-generation-status { margin: 12px 0 4px; min-height: 16px; color: #6f7480; font-size: 11px; }
.source-search-button, .image-generation-button { width: 100%; }
.source-result { display: grid; gap: 10px; margin-top: 16px; }
.source-result-card {
  display: flex; align-items: center; gap: 13px; padding: 13px 15px; border: 1px solid #eef0f4; border-radius: 16px; background: #fafbfd;
}
.source-result-card.win { border-color: rgba(14, 169, 124, 0.45); background: #f1fbf6; }
.source-result-card .s-icon {
  width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px;
  color: var(--muted); background: #edeff3; font-size: 10px; font-weight: 800;
}
.source-result-card.win .s-icon { color: var(--mint); background: #d9f6ea; }
.source-result-card .s-meta { flex: 1; display: grid; gap: 3px; min-width: 0; }
.source-result-card .s-meta b { font-size: 12px; }
.source-result-card .s-meta span { color: #96989f; font-size: 10px; }
.source-result-card .s-price { display: grid; gap: 2px; text-align: right; }
.source-result-card .s-price b { font-size: 15px; }
.source-result-card .s-price span { color: #96989f; font-size: 9px; }
.source-result-card .s-price u { text-decoration: none; color: var(--mint); font-weight: 800; font-size: 9px; }
.source-result-tip { padding: 12px 14px; border-radius: 14px; background: #eef3ff; color: #46598c; font-size: 11px; line-height: 1.7; }
.source-result-tip a { color: #2f6bff; font-weight: 700; text-decoration: underline; word-break: break-all; }
.image-generation-prompt { display: grid; gap: 8px; margin-top: 14px; color: #55575f; font-size: 11px; font-weight: 700; }
.image-generation-prompt textarea {
  width: 100%; padding: 13px 14px; border: 1px solid #e3e5eb; border-radius: 14px; outline: 0;
  resize: vertical; background: #fafbfd; font-size: 13px; line-height: 1.7; color: var(--ink); font-weight: 400; transition: .15s;
}
.image-generation-prompt textarea:focus { border-color: rgba(47, 107, 255, 0.55); background: white; box-shadow: var(--ring); }
.image-generation-progress { height: 8px; margin-top: 14px; border-radius: 999px; background: #edeff3; overflow: hidden; }
.image-generation-progress span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--grad-brand); transition: width .3s ease; }
.image-generation-result { margin-top: 16px; text-align: center; }
.image-generation-result img { max-width: 100%; max-height: 360px; border-radius: 16px; box-shadow: 0 16px 40px rgba(20, 28, 52, 0.15); }
.image-generation-result .gen-download { display: inline-flex; margin-top: 12px; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 120px; z-index: 80; transform: translate(-50%, 20px);
  padding: 12px 22px; border-radius: 999px; color: white; background: rgba(23, 26, 34, 0.94);
  font-size: 13px; font-weight: 600; box-shadow: 0 14px 40px rgba(10, 12, 20, 0.3); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: .3s ease; max-width: 86vw;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 滚动条（局部溢出区域） ---------- */
.blue-ocean-table-wrap::-webkit-scrollbar,
.source-search-modal::-webkit-scrollbar,
.image-generation-modal::-webkit-scrollbar,
.service-messages::-webkit-scrollbar { width: 8px; height: 8px; }
.blue-ocean-table-wrap::-webkit-scrollbar-thumb,
.source-search-modal::-webkit-scrollbar-thumb,
.image-generation-modal::-webkit-scrollbar-thumb,
.service-messages::-webkit-scrollbar-thumb { background: #d6d9e2; border-radius: 999px; }
.blue-ocean-table-wrap::-webkit-scrollbar-thumb:hover,
.source-search-modal::-webkit-scrollbar-thumb:hover,
.image-generation-modal::-webkit-scrollbar-thumb:hover { background: #c2c6d2; }

/* ---------- 响应式 ---------- */
/* 中屏(平板/小笔记本): 收紧 VIP 两列间距, 并锁定收款码列宽度, 避免二维码被挤小 */
@media (max-width: 1120px) {
  .vip-hero { grid-template-columns: minmax(0, 1fr) 320px; gap: 34px; padding: 44px 34px; }
  .vip-copy h1 { font-size: clamp(34px, 4.4vw, 48px); margin: 20px 0 14px; }
  .vip-copy > p { font-size: 14px; }
  .vip-price { margin: 20px 0 24px; }
  .vip-price strong { font-size: 46px; }
}

@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; padding-block: 70px 30px; gap: 20px; }
  .hero-visual { min-height: 470px; }
  .tool-row { grid-template-columns: 45px 1fr 260px; }
  .account-page { grid-template-columns: 1fr 420px; gap: 40px; }
  .vip-price-fields { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav-shell { grid-template-columns: 1fr auto; }
  .desktop-nav { display: none; }
  .account-page { grid-template-columns: 1fr; }
  .account-intro { text-align: center; }
  .account-brand { justify-self: center; margin-bottom: 30px; }
  .account-intro > div > p { margin-inline: auto; }
  .account-intro blockquote { margin-inline: auto; }
  .auth-card { max-width: 480px; margin-inline: auto; justify-self: center; }
}

@media (max-width: 700px) {
  body { padding-bottom: 66px; }
  .mobile-nav { display: flex; }
  .site-header { height: 60px; }
  .vip-page, .account-page, .admin-page, .blue-ocean-page { min-height: auto; }
  .section-shell { width: min(100% - 32px, 1180px); }
  .hero { padding-block: 56px 40px; }
  .hero h1 { font-size: clamp(42px, 12vw, 58px); }
  .hero-copy > p { font-size: 15px; }
  .hero-visual { min-height: 420px; }
  .floating-card { display: none; }
  .dashboard-card { width: 100%; }
  .tool-list { padding-bottom: 80px; }
  .tool-row { min-height: auto; grid-template-columns: 1fr; gap: 20px; padding: 26px; }
  .tool-index { position: absolute; right: 26px; top: 26px; }
  .tool-main h2 { font-size: 25px; }
  .tool-art { height: 160px; }
  .tool-button { position: static; width: 100%; }
  .inner-hero { padding-block: 66px 36px; }
  .vip-page { padding-block: 0 80px; }
  .vip-hero { grid-template-columns: 1fr; gap: 34px; padding: 40px 22px; border-radius: 27px; }
  .vip-copy { text-align: center; }
  .vip-copy > p { display: none; }
  .vip-copy h1 { font-size: 40px; }
  .vip-price { justify-content: center; }
  .vip-price strong { font-size: 48px; }
  .vip-benefits { width: fit-content; margin-inline: auto; text-align: left; }
  .vip-hero > .payment-card { display: none; }
  .mobile-vip-open { display: inline-flex; width: 100%; margin-top: 18px; }
  .payment-card { width: 100%; max-width: 390px; margin-inline: auto; padding: 20px; border-radius: 22px; }
  .payment-card .mobile-payment-tip { display: block; margin: 13px 0 4px; padding: 11px 12px; color: #5f6470; background: #f2f6ff; border-radius: 12px; font-size: 10px; line-height: 1.65; }
  .mobile-payment-tip b { color: var(--blue); }
  .payment-modal-backdrop { place-items: start center; padding-top: 12px; }
  .payment-modal-shell { width: min(390px, 100%); }
  .payment-modal-shell .payment-card { border-radius: 24px; }
  .account-page { padding-block: 36px 70px; gap: 26px; }
  .auth-card { padding: 30px 24px; }
  .blue-ocean-hero { flex-direction: column; }
  .blue-ocean-toolbar { flex-wrap: wrap; }
  .blue-ocean-summary { width: 100%; }
  /* 移动端: 显示「筛选」按钮, 弹层变为底部面板并显示字段切换 */
  .blue-ocean-filter-toggle { display: inline-flex; }
  .bo-pop-cols { display: flex; }
  .bo-col-popover {
    left: 50% !important; right: auto; top: auto !important; bottom: 18px;
    transform: translateX(-50%); width: min(340px, calc(100vw - 28px));
  }
  .blue-ocean-search { width: 100%; order: 3; margin-top: 4px; }
  .blue-ocean-table-wrap[hidden] { display: none; }
  .blue-ocean-table-wrap { display: none; }
  .blue-ocean-mobile-list { display: flex; }
  .blue-ocean-mobile-list[hidden] { display: none; }
  .admin-hero { flex-direction: column; align-items: flex-start; }
  .admin-metric-grid { grid-template-columns: 1fr; }
  .admin-analytics, .admin-panel { padding: 22px 18px; }
  .admin-user-row { flex-wrap: wrap; }
  .admin-user-actions { width: 100%; justify-content: flex-end; }
  .vip-price-fields { grid-template-columns: 1fr; }
  .customer-service-trigger { right: 16px; bottom: 78px; }
  .customer-service-panel { right: 16px; bottom: 142px; left: 16px; width: auto; }
  .toast { bottom: 90px; }
}

/* ---------------- 聊天图片查看器(点击放大) ---------------- */
.image-viewer {
  position: fixed; inset: 0; z-index: 1200; display: none; place-items: center;
  background: rgba(10, 14, 30, 0.82); backdrop-filter: blur(2px); padding: 32px;
}
.image-viewer.open { display: grid; }
.image-viewer img {
  max-width: min(92vw, 1000px); max-height: 86vh; border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); background: #fff;
}
.image-viewer-close {
  position: absolute; top: 18px; right: 22px; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}
.image-viewer-close:hover { background: rgba(255, 255, 255, 0.28); }