.container { position:relative; z-index:1; margin-left:96px; margin-right:24px; padding:0 0 100px; }
@media (max-width:768px) { .container { margin-left:0 !important; } }

/* ── LEFT SIDEBAR (品牌在上 + 俱乐部垂直居中) ── */
.club-sidebar {
  position:fixed; left:8px; top:0; bottom:0; width:68px; z-index:500;
  display:flex; flex-direction:column;
  padding-top:14px; padding-bottom:14px;
  transition:width 0.3s cubic-bezier(0.4,0,0.2,1);
}
.club-sidebar:hover { width:210px; }

/* 俱乐部列表容器 - 垂直居中 */
.club-sidebar-list {
  flex:1; display:flex; flex-direction:column; justify-content:center; gap:10px; width:100%;
}

.club-sidebar-section-label {
  font-size:0.78rem; font-weight:700; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:1px;
  padding:4px 10px; margin-top:12px; margin-bottom:2px;
  white-space:nowrap; overflow:hidden;
  opacity:0; transition:opacity 0.2s ease 0.15s;
}
.club-sidebar:hover .club-sidebar-section-label { opacity:1; transition:opacity 0.2s ease 0s; }

.club-sidebar-item {
  height:58px; border-radius:14px;
  background:transparent; border:none; box-shadow:none;
  display:flex; align-items:center; gap:7px; padding:7px;
  /* 收起时用 padding-left 居中，展开时归零 — padding 可平滑过渡 */
  padding-left:10px;
  cursor:pointer; text-decoration:none; position:relative;
  overflow:hidden; white-space:nowrap; width:100%;
  transition:padding-left 0.3s cubic-bezier(0.4,0,0.2,1),
             width 0.3s cubic-bezier(0.4,0,0.2,1),
             background 0.25s;
}
.club-sidebar:hover .club-sidebar-item {
  width:auto;
  padding-left:7px;
}
.club-sidebar-item:hover {
  background:rgba(124,92,252,0.08);
}
.club-sidebar-item.active {
  box-shadow:inset 3px 0 0 var(--accent);
  background:rgba(124,92,252,0.12) !important;
}
.club-sidebar-avatar {
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface2); font-size:1.6rem;
}
.club-sidebar-avatar img { width:100%; height:100%; object-fit:cover; }

.club-sidebar-info { visibility:hidden; opacity:0; display:flex; flex-direction:column; gap:2px; min-width:0; transition:opacity 0.15s ease 0.15s; }
.club-sidebar:hover .club-sidebar-info { visibility:visible; opacity:1; transition:opacity 0.15s ease 0s; }
.club-name { font-size:0.95rem; font-weight:600; color:var(--text); line-height:1.2; }
.club-count { font-size:0.75rem; color:var(--text-dim); }

@media (max-width:768px) {
  .club-sidebar { left:4px; width:56px; padding-top:10px; padding-bottom:10px; }
  .club-sidebar:hover { width:150px; }
  .club-sidebar-item { height:48px; padding:5px; padding-left:6px; }
  .club-sidebar:hover .club-sidebar-item { padding-left:5px; }
  .club-sidebar-avatar { width:40px; height:40px; font-size:1.2rem; }
  .club-sidebar-section-label { font-size:0.6rem; }
}

/* ── 品牌 Logo（侧边栏顶部）── */
.brand-logo-corner {
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  /* 收起时用 padding-left 居中 52px logo 于 68px 侧栏：(68-52)/2=8px */
  padding-left:8px;
  text-decoration:none; flex-shrink:0; z-index:600;
  transition:padding-left 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s;
}
.club-sidebar:hover .brand-logo-corner { padding-left:0; }
.brand-logo-corner:hover { opacity:0.85; }
.brand-logo-avatar {
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff; font-size:1.3rem; font-weight:700;
  box-shadow:0 4px 20px var(--accent-glow);
  overflow:hidden;
}
.brand-logo-avatar img { width:100%; height:100%; object-fit:cover; }
.brand-logo-text {
  font-size:0.82rem; font-weight:700; color:var(--text);
  letter-spacing:0.5px; white-space:nowrap;
}
@media (max-width:768px) {
  .brand-logo-avatar { width:40px; height:40px; font-size:0.9rem; }
  .brand-logo-text { font-size:0.6rem; }
}

/* ── NAV (Bolder: 去下划线, 左对齐, 统一尺寸) ── */
.top-nav { display:flex; justify-content:flex-start; align-items:center; padding:12px 0 12px 0; margin-bottom:8px; margin-left:8px; }
.top-nav .nav-left { display:flex; align-items:center; gap:6px; flex:1; }
.top-nav .nav-right { display:flex; align-items:center; gap:6px; margin-left:auto; }
.nav-link { padding:12px 24px; height:60px; background:transparent; border:none; border-radius:12px; color:var(--text-muted); font-size:1.15rem; text-decoration:none; font-family:inherit; transition:all 0.2s; cursor:pointer; position:relative; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.theme-toggle { border:none !important; background:transparent !important; height:60px; font-size:1.15rem; }

/* ── 头像下拉菜单 ── */
.avatar-dropdown { position:relative; padding-bottom:12px; margin-bottom:-12px; }
.avatar-dropdown::before { content:''; position:absolute; top:100%; left:0; right:0; height:12px; z-index:899; }
.avatar-dropdown .avatar-menu {
  display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:900;
  min-width:150px; background:var(--surface2); border:1px solid var(--border);
  border-radius:14px; padding:6px; box-shadow:0 12px 40px rgba(0,0,0,0.4);
}
.avatar-dropdown:hover .avatar-menu,
.avatar-menu:hover { display:block; }
.avatar-menu a {
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  border-radius:10px; color:var(--text-muted); font-size:0.85rem;
  text-decoration:none; transition:all 0.15s;
}
.avatar-menu a:hover { background:rgba(124,92,252,0.1); color:var(--text); }
.avatar-menu a:last-child:hover { background:rgba(255,71,87,0.1); color:var(--red); }

/* ── 悬浮主题按钮 ── */
.theme-float { display:none; }  /* 桌面端隐藏 */
.theme-float:hover { opacity:1; transform:scale(1.12); box-shadow:0 4px 20px rgba(124,92,252,0.5); }
.theme-float:active { transform:scale(0.9); }
.order-float { display:none; }
@media (max-width:768px) {
  .theme-float { position:fixed; top:42px; left:12px; z-index:9999; width:38px; height:38px; border-radius:50%; background:var(--accent); color:#fff; border:none; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 12px rgba(124,92,252,0.3); transition:all .2s; opacity:0.8; }
  .order-float { position:fixed; top:90px; left:12px; z-index:9998; width:38px; height:38px; border-radius:50%; background:var(--accent2,#06d6a0); color:#fff; border:none; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 12px rgba(6,214,160,0.35); transition:all .2s; opacity:0.85; text-decoration:none; }
  .order-float.show { display:flex; }
  .order-float:hover { opacity:1; transform:scale(1.12); }
  .order-float:active { transform:scale(0.9); }
  /* 订单浮动按钮脉冲动画 */
  .order-float.has-active { animation: orderPulse 2s ease-in-out infinite; }
  @keyframes orderPulse { 0%,100%{box-shadow:0 2px 12px rgba(6,214,160,0.35);} 50%{box-shadow:0 2px 20px rgba(6,214,160,0.7);} }
}

/* ── 主题下拉 ── */
.theme-dropdown { position:relative; }
.theme-menu [data-theme-id]:hover { background:rgba(124,92,252,0.08); }
.nav-link:hover { border-color:var(--accent); color:var(--text); }
.nav-link:active { transform:scale(0.96); }
.mobile-hide { display:inline-flex; }
@media (max-width:768px) { .mobile-hide { display:none !important; }
    .top-nav { display:none !important; }
    .theme-toggle { width:auto !important; height:42px !important; padding:0 12px !important; gap:4px; font-size:0.95rem; border:none !important; background:transparent !important; }
    .mobile-theme-text { font-size:0.72rem; }
    .mobile-theme-inline { display:inline-flex !important; }
    #themeToggle { display:none !important; }
    .hero-logo { font-size:2rem !important; letter-spacing:1px !important; }
    .game-tabs { display:none !important; }
    .desktop-only { display:none !important; }
    .mobile-dropdown-bar { display:flex !important; gap:6px; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; position:relative; }
    .mobile-sel { flex:1; min-width:0; padding:8px 12px; background:var(--surface); border:1px solid var(--border); border-radius:10px; color:var(--text-muted); font-size:0.78rem; font-family:inherit; cursor:pointer; outline:none; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%237878a0' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:28px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mobile-sel:focus { border-color:var(--accent); }
    .mobile-sel option { background:var(--bg); color:var(--text); }
    .game-pop-btn { text-align:left; }
    .game-pop-menu { display:none; position:fixed; z-index:900; min-width:180px; background:var(--surface2); border:1px solid var(--border); border-radius:12px; padding:6px; box-shadow:0 12px 36px rgba(0,0,0,0.4); flex-direction:column; }
    .game-pop-item { padding:9px 12px; border-radius:8px; cursor:pointer; font-size:0.82rem; color:var(--text); display:flex; align-items:center; gap:8px; transition:all 0.15s; }
    .game-pop-item:hover { background:rgba(124,92,252,0.1); } }

/* ── ACTION BUTTONS (排行榜/随机/任意/不想努力) ── */
.action-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 20px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); color:var(--text-muted); font-size:0.85rem;
  font-weight:600; font-family:inherit; cursor:pointer; transition:all 0.3s;
  text-decoration:none; white-space:nowrap;
}
.action-btn:hover { border-color:var(--accent); color:var(--text); transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,0.2); }
.action-btn.gold { border-color:var(--gold); color:var(--gold); }
.action-btn.gold:hover { background:rgba(255,209,102,0.1); box-shadow:0 4px 16px var(--gold-glow); }
.action-btn.cyan { border-color:var(--cyan); color:var(--cyan); }
.action-btn.cyan:hover { background:rgba(6,214,160,0.1); box-shadow:0 4px 16px var(--cyan-glow); }
.action-btn.pink { border-color:var(--pink); color:var(--pink); }
.action-btn.pink:hover { background:rgba(255,107,157,0.1); box-shadow:0 4px 16px var(--pink-glow); }
.action-btn.green { border-color:var(--green); color:var(--green); }
.action-btn.green:hover { background:rgba(46,213,115,0.1); box-shadow:0 4px 16px rgba(46,213,115,0.2); }
.action-btn.orange { border-color:var(--orange); color:var(--orange); }
.action-btn.orange:hover { background:rgba(255,159,67,0.1); box-shadow:0 4px 16px rgba(255,159,67,0.2); }
.action-btn.accent { background:linear-gradient(135deg,var(--accent),#9b7cfc); color:#fff; border-color:var(--accent); }
.action-btn.accent:hover { transform:translateY(-2px); box-shadow:0 6px 20px var(--accent-glow); }

.nav-link.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.nav-user { color:var(--text-muted); font-size:0.85rem; }

/* ── 轮播公告栏（5/2 高度 + 前后翻页）── */
.announce-carousel {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(124,92,252,0.12), rgba(6,214,160,0.06));
  border:1px solid rgba(124,92,252,0.15); border-radius:var(--radius);
  margin:20px 0 28px; height:130px;
}
.announce-slides { display:flex; height:100%; }
.announce-slide {
  flex:0 0 100%; display:none; align-items:center; justify-content:center; height:100%;
  animation:fadeSlide 0.5s ease;
}
.announce-slide.active { display:flex; }
@keyframes fadeSlide { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.announce-content { display:flex; align-items:center; gap:14px; padding:0 56px; width:100%; }
.announce-img { height:90px; width:auto; max-width:200px; object-fit:cover; border-radius:8px; }
.announce-icon { font-size:1.5rem; }
.announce-text { font-size:0.9rem; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.announce-text strong { color:var(--accent2); }

/* 左右箭头 */
.announce-prev, .announce-next {
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:32px; height:32px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); color:var(--text-muted); font-size:0.9rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all 0.2s; opacity:0.7;
}
.announce-prev:hover, .announce-next:hover { opacity:1; border-color:var(--accent); color:var(--accent); }
.announce-prev { left:8px; }
.announce-next { right:8px; }

.announce-dots { position:absolute; right:16px; bottom:8px; display:flex; gap:5px; }
.announce-dots .dot { width:6px; height:6px; border-radius:50%; background:var(--border); cursor:pointer; transition:all 0.2s; }
.announce-dots .dot.active { background:var(--accent); width:16px; border-radius:3px; }

/* ── 保留 pulse keyframe 供其他地方使用 ── */
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(0.8);opacity:0.6} }

/* ── GAME TABS ── */
.game-tabs { display:flex; justify-content:flex-start; gap:9px; margin-bottom:20px; flex-wrap:wrap; }

/* 手机端俱乐部选择 */
.mobile-club-bar { display:none; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; margin-bottom:12px; }
.mobile-club-bar::-webkit-scrollbar { display:none; }
.mclub-btn { display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:20px; border:1px solid var(--border); background:var(--surface); color:var(--text-muted); font-size:0.82rem; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0; font-family:inherit; transition:all 0.2s; }
.mclub-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.mclub-btn:hover:not(.active) { border-color:var(--accent); color:var(--text); }
@media (max-width:768px) { .mobile-club-bar { display:flex; } }
.game-tab { position:relative; padding:9px 21px; background:var(--surface); border:none; border-radius:12px; color:var(--text-muted); font-size:1.125rem; font-weight:600; font-family:inherit; cursor:pointer; transition:all 0.25s; display:inline-flex; align-items:center; gap:7px; }
.game-tab:hover { color:var(--text); background:rgba(124,92,252,0.08); }
.game-tab.active { background:linear-gradient(135deg,rgba(124,92,252,0.28),rgba(124,92,252,0.10)); color:#fff; }
.game-tab::before { display:none; }
.game-tab .tab-icon { font-size:1.35rem; }

/* ── TOOLBAR ── */
.toolbar { display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; align-items:center; row-gap:14px; }
.search-wrap { position:relative; flex:0 0 auto; width:180px; max-width:40%; }
.search-wrap input { width:100%; padding:10px 12px 10px 34px; background:var(--surface); border:1px solid var(--border); border-radius:10px; color:var(--text); font-size:0.85rem; font-family:inherit; outline:none; transition:all 0.25s; }
.search-wrap input:hover { border-color:var(--accent); }
.search-wrap input:focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-glow); }
.search-wrap::before { content:'🔍'; position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:0.85rem; pointer-events:none; }

.search-wrap input::placeholder { color:var(--text-dim); font-size:0.82rem; }
.filter-group { display:flex; gap:8px; flex-wrap:wrap; }
.fbtn { padding:10px 20px; background:var(--surface); border:1px solid var(--border); border-radius:10px; color:var(--text-muted); font-size:0.85rem; font-family:inherit; font-weight:500; cursor:pointer; transition:all 0.25s; display:flex; align-items:center; gap:6px; }
.fbtn:hover { border-color:var(--accent); color:var(--text); }
.fbtn.active { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 4px 16px var(--accent-glow); }

.price-filter { display:flex; align-items:center; gap:12px; padding:8px 16px; background:var(--surface); border:1px solid var(--border); border-radius:10px; min-width:160px; }
.price-filter label { font-size:0.8rem; color:var(--text-muted); white-space:nowrap; }
.price-filter input[type="range"] { flex:1; -webkit-appearance:none; height:4px; border-radius:2px; background:var(--border); outline:none; }
.price-filter input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--accent); cursor:pointer; box-shadow:0 0 8px var(--accent-glow); }
.price-filter .price-val { font-size:0.82rem; font-weight:600; color:var(--gold); min-width:50px; text-align:right; }

.sort-select { padding:10px 16px; background:var(--surface); border:1px solid var(--border); border-radius:10px; color:var(--text-muted); font-size:0.85rem; font-family:inherit; cursor:pointer; outline:none; transition:all 0.25s; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%237878a0' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
.sort-select option { background:var(--bg); color:var(--text); }
.sort-select:focus { border-color:var(--accent); }

.view-toggle { display:flex; gap:4px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:3px; }
.view-btn { width:36px; height:36px; border:none; border-radius:8px; background:transparent; color:var(--text-muted); font-size:1rem; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; justify-content:center; }
.view-btn:hover { color:var(--text); }
.view-btn.active { background:var(--accent); color:#fff; }

.select-mode-btn { padding:10px 20px; background:var(--surface); border:1px solid var(--border); border-radius:10px; color:var(--text-muted); font-size:0.85rem; font-family:inherit; font-weight:500; cursor:pointer; transition:all 0.25s; display:flex; align-items:center; gap:6px; }
.select-mode-btn:hover { border-color:var(--cyan); color:var(--text); }
.select-mode-btn.active { background:var(--cyan); color:#000; border-color:var(--cyan); box-shadow:0 4px 16px var(--cyan-glow); }

/* ── GRID ── */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.grid.list-view { grid-template-columns:1fr; }
.grid-collapsed { max-height:800px; overflow:hidden; }
.grid-expand-wrap { text-align:center; margin-top:20px; display:none; }
.grid-expand-btn {
  padding:10px 32px; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; color:var(--text-muted); cursor:pointer;
  font-family:inherit; font-size:0.88rem; transition:all 0.2s;
}
.grid-expand-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }

/* ── CARD (参考图风格：大图背景+信息覆叠) ── */
.card {
  background:var(--surface); border-radius:16px;
  overflow:hidden; cursor:pointer; transition:all 0.3s, transform 0.3s ease;
  position:relative;
  animation:cardFloat 4s ease-in-out infinite, cardIn 0.4s ease backwards;
}
/* React-bits: 持续浮动 */
@keyframes cardFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-5px); }
}
/* 奇偶行错开浮动节奏 */
.card:nth-child(odd) { animation-delay:0s, 0s; }
.card:nth-child(even) { animation-delay:1.2s, 0s; }
.card:hover { transform:translateY(-8px) !important; box-shadow:0 16px 40px rgba(0,0,0,0.4),0 0 30px var(--accent-glow); animation-play-state:paused; }
@keyframes cardIn { from{opacity:0;transform:translateY(16px) scale(0.98)} to{opacity:1;transform:translateY(0) scale(1)} }

/* 横幅：头像/图片作为全幅背景 */
.card-banner { position:relative; width:100%; height:250px; overflow:hidden; }
.card-banner-bg { width:100%; height:100%; object-fit:cover; display:block; }
.card-banner-init {
  position:absolute; top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:5rem; font-weight:900; color:rgba(255,255,255,0.12); pointer-events:none; z-index:1;
}
.card-banner-overlay {
  position:absolute; top:0;right:0;bottom:0;left:0;
  background:linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.7) 100%);
}

/* 横幅覆层 */
.card-banner-top { position:absolute; top:12px; left:12px; z-index:4; display:flex; align-items:center; gap:6px; }
.card-banner-top-right { position:absolute; top:12px; right:12px; z-index:4; display:flex; align-items:center; gap:6px; }
.card-banner-bottom { position:absolute; bottom:12px; left:14px; right:14px; z-index:4; display:flex; align-items:flex-end; justify-content:space-between; }

/* 推荐标签 */
.card-featured-tag {
  display:inline-flex; align-items:center; gap:3px;
  padding:4px 10px; border-radius:6px; font-size:0.62rem; font-weight:700; letter-spacing:0.5px;
  background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff;
  box-shadow:0 2px 8px rgba(124,92,252,0.4);
}

/* 状态标签（右上角） */
.card-status-tag {
  display:inline-flex; align-items:center; gap:3px; padding:4px 10px; border-radius:10px;
  font-size:0.62rem; font-weight:600; color:#fff;
  background:rgba(46,213,115,0.85); backdrop-filter:blur(4px);
}
.card-status-tag.off { background:rgba(120,120,160,0.7); }
.card-status-tag.busy { background:rgba(245,158,11,0.85); }
.card-status-tag .status-dot { width:5px; height:5px; border-radius:50%; background:#fff; }

/* 横幅左下 - 统计 */
.card-stats-overlay { display:flex; flex-direction:column; gap:2px; }
.card-stats-big { font-size:1.3rem; font-weight:900; color:#fff; line-height:1; text-shadow:0 1px 4px rgba(0,0,0,0.5); }
.card-stats-label { font-size:0.62rem; color:rgba(255,255,255,0.75); }

/* 横幅右下 - 名字 */
.card-name-overlay { text-align:right; }
.card-name-overlay .name { font-size:1.15rem; font-weight:800; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,0.5); }
.card-name-overlay .sub { font-size:0.65rem; color:rgba(255,255,255,0.7); margin-top:2px; }

/* 信息区 */
.card-body { padding:12px 14px; display:flex; flex-direction:column; gap:6px; }

/* 名字行 */
.card-name-row { display:flex; align-items:center; justify-content:space-between; }
.card-name-left { display:flex; align-items:center; gap:6px; }
.card-dot-online { width:7px; height:7px; border-radius:50%; background:var(--green); flex-shrink:0; }
.card-dot-offline { width:7px; height:7px; border-radius:50%; background:var(--text-dim); flex-shrink:0; }
.card-dot-busy { width:7px; height:7px; border-radius:50%; background:#f59e0b; flex-shrink:0; }
.card-name-text { font-size:0.9rem; font-weight:700; color:var(--text); }
/* ── 性别标签 ── */
.gender-badge { display:inline-flex; align-items:center; gap:2px; padding:2px 7px; border-radius:5px; font-size:0.65rem; font-weight:600; margin-left:6px; vertical-align:middle; }
.gender-badge.male { background:rgba(84,160,255,0.12); color:#54a0ff; border:1px solid rgba(84,160,255,0.2); }
.gender-badge.female { background:rgba(255,107,157,0.12); color:#ff6b9d; border:1px solid rgba(255,107,157,0.2); }

/* ── 性别彩色边框 ── */
.card-gender-male { border:2px solid rgba(84,160,255,0.5); box-shadow:0 0 18px rgba(84,160,255,0.2), 1px 2px 8px rgba(0,0,0,0.25); position:relative; }
.card-gender-male::before { content:''; position:absolute; inset:-2px; border-radius:16px; background:linear-gradient(135deg,rgba(84,160,255,0.3),transparent 50%,rgba(84,160,255,0.15)); z-index:-1; animation:gender-glow-blue 2s ease-in-out infinite; }
.card-gender-male:hover { border-color:rgba(84,160,255,0.85); box-shadow:0 0 32px rgba(84,160,255,0.35), 2px 4px 16px rgba(0,0,0,0.4); }
.card-gender-female { border:2px solid rgba(255,107,157,0.5); box-shadow:0 0 18px rgba(255,107,157,0.2), 1px 2px 8px rgba(0,0,0,0.25); position:relative; }
.card-gender-female::before { content:''; position:absolute; inset:-2px; border-radius:16px; background:linear-gradient(135deg,rgba(255,107,157,0.3),transparent 50%,rgba(255,107,157,0.15)); z-index:-1; animation:gender-glow-pink 2s ease-in-out infinite; }
.card-gender-female:hover { border-color:rgba(255,107,157,0.85); box-shadow:0 0 32px rgba(255,107,157,0.35), 2px 4px 16px rgba(0,0,0,0.4); }
@keyframes gender-glow-blue { 0%,100%{opacity:0.6} 50%{opacity:1} }
@keyframes gender-glow-pink { 0%,100%{opacity:0.5} 50%{opacity:0.9} }
.card-price-text { font-size:1.1rem; font-weight:900; color:var(--accent2); }
.card-price-text .unit { font-size:0.6rem; font-weight:400; color:var(--text-dim); }

/* 简介 */
.card-intro { font-size:0.7rem; color:var(--text-muted); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.1rem; padding:2px 0; }

/* 游戏标签行 */
.card-game-row { display:flex; gap:5px; flex-wrap:wrap; }
.card-game-tag { padding:2px 7px; border-radius:4px; font-size:0.62rem; font-weight:500; background:rgba(124,92,252,0.08); color:var(--accent2); }

/* 双按钮 */
.card-btns { display:flex; gap:8px; margin-top:2px; }
.card-btn-order {
  flex:1; padding:10px 0; border-radius:10px; border:none;
  background:linear-gradient(135deg,var(--accent),#9b7cfc); color:#fff;
  font-size:0.82rem; font-weight:700; font-family:inherit; cursor:pointer; transition:all 0.2s;
}
.card-btn-order.off { background:var(--surface2); color:var(--text-dim); cursor:not-allowed; opacity:0.5; }
.card-btn-order:hover { transform:translateY(-1px); box-shadow:0 4px 14px var(--accent-glow); }
.card-btn-order.off:hover { transform:none; box-shadow:none; }
.card-btn-chat {
  flex:1; padding:10px 0; border-radius:10px; border:1px solid var(--accent);
  background:transparent; color:var(--accent2);
  font-size:0.82rem; font-weight:700; font-family:inherit; cursor:pointer; transition:all 0.2s;
}
.card-btn-chat:hover { background:rgba(124,92,252,0.08); }

/* ── 卡片语音浮动按钮 ── */
.card-voice-float {
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  width:30px; height:30px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.3); background:rgba(0,0,0,0.4);
  backdrop-filter: blur(4px); color:#fff; font-size:0.8rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  z-index:5; transition:all 0.2s;
}
.card-voice-float:hover {
  border-color:var(--cyan); background:rgba(6,214,160,0.3);
  transform:translateX(-50%) scale(1.15);
}
.card-voice-float.playing {
  border-color:var(--cyan); background:rgba(6,214,160,0.4);
  animation: voice-pulse 1.2s ease-in-out infinite;
}
@keyframes voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(6,214,160,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(6,214,160,0); }
}

/* ── 复用下单按钮 ── */
.btn-repeat-order {
  display:block; width:100%; margin-top:10px; padding:10px 0;
  border-radius:10px; border:1px dashed var(--accent);
  background:rgba(124,92,252,0.06); color:var(--accent2);
  font-size:0.82rem; font-weight:600; font-family:inherit; cursor:pointer;
  transition:all 0.2s;
}
.btn-repeat-order:hover {
  background:rgba(124,92,252,0.12); border-style:solid;
}

/* Featured */
.card.featured {
  box-shadow:0 0 40px rgba(124,92,252,0.15),0 4px 20px rgba(0,0,0,0.3);
}
.card.featured:hover { box-shadow:0 0 50px rgba(124,92,252,0.25),0 8px 32px rgba(0,0,0,0.4); }

/* 段位标签 */
.rank-badge { padding:2px 7px; border-radius:4px; font-size:0.62rem; font-weight:600; display:inline-block; }
.rank-传奇 { background:rgba(255,209,102,0.15); color:var(--gold); }
.rank-大师 { background:rgba(124,92,252,0.15); color:var(--accent2); }
.rank-钻石 { background:rgba(84,160,255,0.15); color:var(--blue); }
.rank-战神 { background:rgba(255,71,87,0.15); color:var(--red); }
.rank-铂金 { background:rgba(6,214,160,0.15); color:var(--cyan); }
.rank-黄金 { background:rgba(255,209,102,0.15); color:var(--gold); }

/* 多选勾选框 */
.card .select-check {
  position:absolute; top:8px; right:8px; z-index:5;
  width:24px; height:24px; border-radius:6px; border:2px solid var(--border-light);
  background:rgba(0,0,0,0.5); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center;
  cursor:pointer; transition:all 0.3s; font-size:12px; color:transparent;
}
.card .select-check:hover { border-color:var(--accent); background:rgba(124,92,252,0.3); }

/* 选中态 */
.card.selected { border-color:var(--cyan)!important; box-shadow:0 0 0 2px var(--cyan),0 0 30px var(--cyan-glow),0 12px 40px rgba(0,0,0,0.3)!important; transform:translateY(-4px); }
.card.selected .select-check { background:var(--cyan); border-color:var(--cyan); color:#000; }
.card.selected::after { content:''; position:absolute; top:0;right:0;bottom:0;left:0; border-radius:var(--radius); background:linear-gradient(135deg,rgba(6,214,160,0.08),rgba(124,92,252,0.05)); pointer-events:none; z-index:1; }
@keyframes selectPulse { 0%{box-shadow:0 0 0 2px var(--cyan),0 0 20px var(--cyan-glow)} 50%{box-shadow:0 0 0 4px rgba(6,214,160,0.4),0 0 40px var(--cyan-glow)} 100%{box-shadow:0 0 0 2px var(--cyan),0 0 20px var(--cyan-glow)} }
.card.selected { animation:selectPulse 2s ease-in-out infinite; }

/* ── SELECTION BAR ── */
.selection-bar { position:fixed; bottom:-80px; left:50%; transform:translateX(-50%); z-index:900; display:flex; align-items:center; gap:16px; padding:14px 28px; background:var(--surface2); border:1px solid var(--cyan); border-radius:20px; box-shadow:0 8px 40px rgba(0,0,0,0.5),0 0 30px var(--cyan-glow);  transition:bottom 0.4s cubic-bezier(0.4,0,0.2,1); }
.selection-bar.show { bottom:32px; }
.selection-bar .sel-count { font-size:0.95rem; font-weight:700; color:var(--cyan); display:flex; align-items:center; gap:8px; }
.selection-bar .sel-count .count-num { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--cyan); color:#000; font-size:0.85rem; font-weight:900; }
.selection-bar .sel-avatars { display:flex; }
.selection-bar .sel-avatar { width:32px; height:32px; border-radius:50%; border:2px solid var(--surface2); display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:800; color:#fff; margin-left:-6px; }
.selection-bar .sel-avatar:first-child { margin-left:0; }
.selection-bar .sel-btn { padding:10px 24px; border-radius:12px; border:none; font-size:0.9rem; font-weight:700; font-family:inherit; cursor:pointer; transition:all 0.3s; }
.selection-bar .sel-btn-book { background:linear-gradient(135deg,var(--cyan),#38e8b0); color:#000; }
.selection-bar .sel-btn-book:hover { transform:translateY(-2px); box-shadow:0 6px 20px var(--cyan-glow); }
.selection-bar .sel-btn-clear { background:transparent; color:var(--text-muted); border:1px solid var(--border); }
.selection-bar .sel-btn-clear:hover { border-color:var(--red); color:var(--red); }

/* ── LEADERBOARD ── */
.leaderboard-section { margin:48px 0 32px; }
.section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.section-title { font-size:1.4rem; font-weight:700; display:flex; align-items:center; gap:10px; }
.section-title .title-icon { font-size:1.4rem; }
.leaderboard-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.lb-card { display:flex; align-items:center; gap:14px; padding:16px 20px; background:var(--surface); border:1px solid var(--border); border-radius:14px; transition:all 0.3s; cursor:pointer; }
.lb-card:hover { border-color:var(--accent); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.3); }

/* ── DETAIL MODAL ── */
.modal-overlay { display:none; position:fixed; top:0;right:0;bottom:0;left:0; background:rgba(0,0,0,0.82); z-index:1000; justify-content:center; align-items:center; }
.modal-overlay.open { display:flex; }
.modal { background:linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); border:1px solid var(--border); border-radius:20px; width:95%; max-width:720px; max-height:90vh; overflow-y:auto; animation:modalIn 0.4s cubic-bezier(0.16,1,0.3,1); position:relative; z-index:0; }
/* 弹窗背景呼吸动画 */
.modal::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 50% 50% at 30% 20%, var(--accent-glow, rgba(124,92,252,0.15)) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 70% 80%, rgba(var(--accent2-rgb, 167,139,250), 0.1) 0%, transparent 60%);
  animation: modalBgBreathe 6s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}
@keyframes modalBgBreathe {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
/* 确保内容在 z-index 之上 */
.modal > * { position: relative; z-index: 1; }
.modal-close { z-index: 10; }
@keyframes modalIn { from{opacity:0;transform:translateY(48px) scale(0.94)} to{opacity:1;transform:translateY(0) scale(1)} }
.modal-close { position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.1); background:rgba(0,0,0,0.4); color:#fff; font-size:1.1rem; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; justify-content:center; z-index:10; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.modal-close:hover { background:rgba(255,71,87,0.6); border-color:var(--red); transform:scale(1.05); }

/* 横向布局 — 左右分栏 */
.modal-horizontal {
  max-width:780px;
  height:56vh;  /* 原 85vh 的 2/3 */
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.modal-body { display:flex; flex:1; min-height:0; overflow:hidden; }
.modal-left {
  flex:0 0 260px; width:260px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:30px 20px 20px;
  background:linear-gradient(180deg,rgba(124,92,252,0.06) 0%,rgba(15,15,26,0.3) 100%);
  border-right:1px solid var(--border);
  gap:8px;
  overflow-y:auto;
}

/* 详情弹窗呼吸光晕 */
.modal-left::before {
  content: '';
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,92,252,0.08) 0%, transparent 70%);
  animation: modalGlow 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes modalGlow {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.2); }
}
/* 弹窗外边框微光 */
.modal { box-shadow: 0 0 0 1px rgba(124,92,252,0.08), 0 8px 40px rgba(0,0,0,0.5); }
@keyframes modalBorderGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(124,92,252,0.08), 0 8px 40px rgba(0,0,0,0.5); }
  50% { box-shadow: 0 0 0 1px rgba(124,92,252,0.18), 0 8px 50px rgba(124,92,252,0.1); }
}
.modal-overlay.open .modal { animation: modalIn 0.4s cubic-bezier(0.16,1,0.3,1), modalBorderGlow 4s ease-in-out infinite 0.4s; }

/* React-bits: 头像光环 */
.modal-avatar-wrap {
  margin-bottom:4px;
  position:relative;
}
.modal-avatar-wrap::before {
  content:''; position:absolute; inset:-6px;
  border-radius:32px;
  background:conic-gradient(var(--accent),transparent,var(--cyan),transparent,var(--accent2),transparent);
  animation:avatarSpin 4s linear infinite;
  z-index:0; opacity:0.5;
}
@keyframes avatarSpin { to { transform:rotate(360deg); } }

.modal-avatar {
  width:150px; height:150px; border-radius:30px;  /* 原 100px 的 3/2 */
  display:flex; align-items:center; justify-content:center;
  font-size:3.5rem; font-weight:900; color:#fff;
  border:3px solid var(--surface);
  box-shadow:0 12px 40px rgba(0,0,0,0.5), 0 0 0 3px rgba(124,92,252,0.3);
  overflow:hidden;
  position:relative; z-index:1;
  animation:avatarFloat 3s ease-in-out infinite;
}
@keyframes avatarFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-4px); }
}
.modal-avatar img { width:100%; height:100%; object-fit:cover; }
.modal-left .modal-name { font-size:1.1rem; font-weight:800; justify-content:center; }
.modal-left .modal-subtitle { color:var(--text-muted); font-size:0.72rem; }

/* React-bits: 统计卡片入场动画 */
.modal-stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:100%; }
.modal-stat {
  padding:10px 6px; background:var(--bg2); border:1px solid var(--border);
  border-radius:12px; text-align:center; transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  animation:statIn 0.5s ease both;
}
.modal-stat:nth-child(1) { animation-delay:0.1s; }
.modal-stat:nth-child(2) { animation-delay:0.2s; }
.modal-stat:nth-child(3) { animation-delay:0.3s; }
@keyframes statIn { from{opacity:0;transform:scale(0.8) translateY(10px);} to{opacity:1;transform:scale(1) translateY(0);} }
.modal-stat:hover { transform:translateY(-3px) scale(1.05); border-color:var(--accent); }
.modal-stat .ms-val { font-size:0.95rem; font-weight:700; margin-bottom:2px; }
.modal-stat .ms-label { font-size:0.62rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.5px; }

/* 游戏标签（stats grid 内跨2列） */
.modal-game-tag {
  padding:10px 6px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:12px;
  text-align:center;
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:0.85rem; font-weight:700;
  color:var(--accent2);
}

/* React-bits: 价格脉冲 */
.modal-left .modal-price-box { margin-top:4px; }
.modal-left .modal-price-box .price-amount {
  font-size:1.8rem; font-weight:900;
  background:linear-gradient(135deg,var(--gold),#ffe08a);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation:pricePulse 2s ease-in-out infinite;
}
@keyframes pricePulse {
  0%,100% { filter:brightness(1); }
  50% { filter:brightness(1.3); }
}
.modal-left .modal-price-box .price-unit { font-size:0.8rem; color:var(--text-muted); }
.modal-status { font-size:0.8rem; font-weight:500; }
.modal-left-actions { margin-top:auto; padding-top:14px; width:100%; }
.modal-left-actions .card-book-btn { width:100%; padding:12px; font-size:0.92rem; border-radius:12px; transition:all 0.3s; }
.modal-left-actions .card-book-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px var(--accent-glow); }

/* 右侧内容区 */
.modal-right { flex:1; min-width:0; padding:28px 28px 20px; overflow-y:auto; }

/* 隐藏旧的 banner 组件 */
.modal-horizontal .modal-banner,.modal-horizontal .modal-banner-bg,.modal-horizontal .modal-banner-overlay,.modal-horizontal .modal-profile,.modal-horizontal .modal-content,.modal-horizontal .modal-header,.modal-horizontal .modal-name,.modal-horizontal .modal-subtitle,.modal-horizontal .modal-price-box .price-label { display:none; }
/* 预约按钮 */

.modal-section { margin-bottom:20px; }
.modal-section-title { font-size:0.85rem; font-weight:600; color:var(--text); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.modal-intro { font-size:0.9rem; color:var(--text-muted); line-height:1.7; background:var(--bg2); border-radius:12px; padding:14px 16px; border:1px solid var(--border); }
.modal-tags { display:flex; gap:6px; flex-wrap:wrap; }
.modal-tags .tag { padding:6px 12px; border-radius:20px; font-size:0.78rem; background:rgba(124,92,252,0.08); color:var(--accent2); border:1px solid rgba(124,92,252,0.12); }
.modal-badges { display:flex; gap:6px; flex-wrap:wrap; }
.modal-badges .badge { padding:5px 12px; border-radius:20px; font-size:0.78rem; background:rgba(255,209,102,0.06); color:var(--gold); border:1px solid rgba(255,209,102,0.1); }
.media-player { display:flex; gap:10px; flex-wrap:wrap; }
.media-btn { flex:1; min-width:130px; padding:12px 16px; background:var(--bg2); border:1px solid var(--border); border-radius:12px; color:var(--text); font-size:0.85rem; font-family:inherit; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; gap:8px; }
.media-btn:hover { border-color:var(--accent); background:rgba(124,92,252,0.06); }
.media-btn .media-icon { width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,var(--accent),var(--cyan)); display:flex; align-items:center; justify-content:center; font-size:0.9rem; }
.media-btn.playing { border-color:var(--cyan); box-shadow:0 0 16px rgba(6,214,160,0.2); }
.schedule-grid { display:flex; gap:6px; flex-wrap:wrap; }
.schedule-chip { padding:6px 14px; background:var(--bg2); border:1px solid var(--border); border-radius:20px; font-size:0.8rem; color:var(--cyan); display:flex; align-items:center; gap:4px; }

/* ── MODAL TABS ── */
.modal-tabs { display:flex; gap:4px; background:var(--bg); border-radius:14px; padding:4px; margin-bottom:16px; }
.modal-tab { flex:1; padding:10px 14px; text-align:center; border-radius:12px; border:none; background:transparent;
  color:var(--text-muted); font-size:0.85rem; font-weight:600; font-family:inherit; cursor:pointer; transition:all 0.25s; }
.modal-tab:hover { color:var(--text); }
.modal-tab.active { background:var(--surface); color:var(--text); box-shadow:0 2px 10px rgba(0,0,0,0.12); }
.tab-panel { display:none; animation:fadeIn 0.25s ease; }
.tab-panel.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ── REVIEW STYLES ── */
.review-stats { display:flex; gap:16px; align-items:flex-start; margin-bottom:16px; padding:14px; background:var(--bg2); border-radius:12px; }
.review-avg { text-align:center; min-width:72px; }
.review-avg .num { font-size:2rem; font-weight:900; color:var(--gold); line-height:1; }
.review-avg .label { font-size:0.7rem; color:var(--text-dim); margin-top:2px; }
.review-bars { flex:1; }
.review-bar-row { display:flex; align-items:center; gap:6px; margin-bottom:3px; font-size:0.72rem; }
.review-bar-row .star-label { width:24px; text-align:right; color:var(--text-dim); }
.bar-bg { flex:1; height:5px; background:var(--border); border-radius:3px; overflow:hidden; }
.bar-fill { height:100%; background:var(--gold); border-radius:3px; transition:width 0.5s; }
.review-bar-row .count { width:18px; text-align:left; color:var(--text-dim); }
.review-list { display:flex; flex-direction:column; gap:10px; }
.review-card { padding:12px 14px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; }
.review-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.review-customer { font-weight:600; font-size:0.85rem; }
.review-stars { font-size:0.8rem; }
.review-comment { font-size:0.82rem; color:var(--text-muted); line-height:1.5; margin-top:4px; }
.review-time { font-size:0.7rem; color:var(--text-dim); margin-top:4px; }
.review-reply { font-size:0.8rem; color:var(--cyan); margin-top:6px; padding:6px 12px; background:rgba(6,214,160,0.06); border-radius:8px; border-left:3px solid var(--cyan); }
.review-followup { margin-top:8px; padding-top:8px; border-top:1px dashed var(--border); }
.review-followup-label { font-size:0.78rem; color:var(--accent); font-weight:600; margin-bottom:4px; }
.review-followup .review-comment { margin-top:4px; }
.review-empty { text-align:center; padding:28px; color:var(--text-dim); font-size:0.85rem; }

/* ── 评价上下文标签 ── */
.review-context { display:flex; gap:6px; margin:4px 0 6px; }
.review-ctx-tag { display:inline-block; padding:2px 8px; border-radius:6px; font-size:0.7rem; background:var(--bg); color:var(--text-muted); }

/* ── SERVICE LIST STYLES ── */
.svc-list { display:flex; flex-direction:column; gap:8px; }
.svc-card { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; }
.svc-info { flex:1; }
.svc-name { font-weight:600; font-size:0.85rem; margin-bottom:2px; color:var(--text); }
.svc-desc { font-size:0.72rem; color:var(--text-dim); }
.svc-price { font-weight:700; font-size:0.95rem; color:var(--gold); }
.svc-empty { text-align:center; padding:28px; color:var(--text-dim); }

/* ── BOOKING MODAL ── */
.booking-modal .modal { max-width:520px; }
.booking-form { padding:32px; }
.booking-form h2 { font-size:1.4rem; font-weight:700; margin-bottom:24px; background:linear-gradient(135deg,var(--accent2),var(--cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.booking-companion { display:flex; align-items:center; gap:14px; padding:16px; background:var(--bg2); border:1px solid var(--border); border-radius:14px; margin-bottom:24px; }
.booking-companion .bc-avatar { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; font-weight:800; color:#fff; overflow:hidden; }
.booking-companion .bc-avatar img { width:100%; height:100%; object-fit:cover; }
.booking-companion .bc-name { font-weight:600; }
.booking-companion .bc-detail { font-size:0.82rem; color:var(--text-muted); }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:0.82rem; color:var(--text-muted); font-weight:500; margin-bottom:8px; }
.form-group input,.form-group select,.form-group textarea { width:100%; padding:12px 16px; background:var(--bg); border:1px solid var(--border); border-radius:10px; color:var(--text); font-size:0.9rem; font-family:inherit; outline:none; transition:border-color 0.2s; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:var(--accent); }
.form-group select option { background:var(--bg); }
.form-group textarea { resize:vertical; min-height:80px; }
.duration-picker { display:flex; gap:8px; }
.duration-btn { flex:1; padding:10px; background:var(--bg); border:1px solid var(--border); border-radius:10px; color:var(--text-muted); font-size:0.85rem; font-family:inherit; cursor:pointer; transition:all 0.2s; text-align:center; }
.duration-btn:hover { border-color:var(--accent); }
.duration-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.booking-total { display:flex; justify-content:space-between; align-items:center; padding:16px; background:rgba(255,209,102,0.06); border:1px solid rgba(255,209,102,0.12); border-radius:12px; margin-bottom:24px; }
.booking-total .bt-label { color:var(--text-muted); font-size:0.9rem; }
.booking-total .bt-amount { font-size:1.6rem; font-weight:900; color:var(--gold); }
.btn-book-submit { width:100%; padding:16px; border:none; border-radius:14px; background:linear-gradient(135deg,var(--accent),#9b7cfc,var(--cyan)); color:#fff; font-size:1rem; font-weight:700; font-family:inherit; cursor:pointer; transition:all 0.3s; letter-spacing:2px; }
.btn-book-submit:hover { transform:translateY(-2px); box-shadow:0 8px 30px var(--accent-glow); }

/* ── LOGIN PROMPT ── */
.login-prompt-modal .modal { max-width:400px; }
.login-prompt-form { padding:32px; text-align:center; }
.login-prompt-form h3 { font-size:1.3rem; font-weight:700; margin-bottom:12px; color:var(--text); }
.login-prompt-form p { color:var(--text-muted); font-size:0.9rem; margin-bottom:24px; line-height:1.6; }
.login-prompt-btns { display:flex; flex-direction:column; gap:12px; }
.login-prompt-btns a { display:block; padding:14px; border-radius:12px; text-decoration:none; font-size:0.95rem; font-weight:600; transition:all 0.3s; }
.btn-login-primary { background:linear-gradient(135deg,var(--accent),#9b7cfc); color:#fff; }
.btn-login-primary:hover { transform:translateY(-2px); box-shadow:0 6px 20px var(--accent-glow); }
.btn-login-secondary { background:var(--bg2); color:var(--text-muted); border:1px solid var(--border); }
.btn-login-secondary:hover { border-color:var(--accent); color:var(--text); }

/* ── EMPTY / TOAST / FOOTER ── */
.empty { text-align:center; padding:60px 20px; color:var(--text-muted); display:none; }
.empty-icon-wrap { display:flex; justify-content:center; margin-bottom:16px; }
.empty-icon-wrap svg { animation:emptyPulse 2.5s ease-in-out infinite; }
@keyframes emptyPulse { 0%,100%{opacity:0.4} 50%{opacity:0.7} }
.empty-title { font-size:1rem; font-weight:600; color:var(--text); margin-bottom:6px; }
.empty-sub { font-size:0.82rem; color:var(--text-dim); margin-bottom:20px; }
.empty-clear-btn { padding:10px 24px; border-radius:10px; border:1px solid var(--accent); background:transparent; color:var(--accent); font-size:0.85rem; font-weight:600; font-family:inherit; cursor:pointer; transition:all 0.25s; }
.empty-clear-btn:hover { background:var(--accent); color:#fff; }
.toast-container { position:fixed; top:80px; right:24px; z-index:3000; display:flex; flex-direction:column; gap:10px; }
.toast { padding:14px 24px; background:var(--surface2); border:1px solid var(--border); border-radius:12px; color:var(--text); font-size:0.9rem; box-shadow:var(--shadow-lg); animation:toastIn 0.35s ease,toastOut 0.35s ease 2.5s forwards; display:flex; align-items:center; gap:10px; }
.toast.success { border-left:3px solid var(--cyan); }
.toast.error { border-left:3px solid var(--red); }
.toast.info { border-left:3px solid var(--blue); }
@keyframes toastIn { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
@keyframes toastOut { to{opacity:0;transform:translateX(40px)} }
.site-footer { text-align:center; padding:40px 0 20px; color:var(--text-dim); font-size:0.8rem; border-top:1px solid var(--border); margin-top:48px; }
.site-footer a { color:var(--accent2); text-decoration:none; }

/* ── 为你推荐 ── */
.recommend-section { margin-bottom:20px; }
.recommend-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.recommend-refresh { padding:4px 12px; border-radius:6px; border:1px solid var(--border); background:var(--bg); color:var(--text-muted); font-size:0.72rem; cursor:pointer; font-family:inherit; }
.recommend-refresh:hover { border-color:var(--accent); color:var(--accent); }
.recommend-row { display:flex; gap:10px; overflow-x:auto; padding:2px 0 8px; scroll-snap-type:x mandatory; }
.recommend-row::-webkit-scrollbar { height:3px; }
.recommend-row::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.rec-card { min-width:200px; max-width:200px; height:200px; position:relative; border-radius:20px; overflow:hidden; cursor:pointer; flex-shrink:0; scroll-snap-align:start; transition:all 0.35s cubic-bezier(0.4,0,0.2,1); background:var(--surface); }
.rec-card:hover { transform:scale(1.04); box-shadow:0 16px 48px rgba(0,0,0,0.5),0 0 24px var(--accent-glow); z-index:10; }
.rec-card-bg { position:absolute; inset:0; z-index:0; display:flex; align-items:center; justify-content:center; background:var(--surface2); overflow:hidden; }
.rec-card-bg-initial { font-size:5rem; font-weight:900; color:rgba(255,255,255,0.06); pointer-events:none; }
.rec-card-bg-img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.rec-card-overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,0.8) 100%); }
.rec-card-tag { position:absolute; top:10px; left:10px; z-index:3; display:inline-flex; align-items:center; gap:3px; padding:3px 8px; border-radius:6px; background:rgba(0,0,0,0.35); backdrop-filter:blur(4px); color:var(--gold); font-size:0.6rem; font-weight:700; }
.rec-card-content { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding:14px; }
.rec-card-game { font-size:0.6rem; color:rgba(255,255,255,0.6); margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rec-card-name { font-size:0.95rem; font-weight:800; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,0.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rec-card-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
.rec-card-price { font-size:0.9rem; font-weight:900; color:var(--gold); }
.rec-card-rating { font-size:0.6rem; color:rgba(255,255,255,0.6); }

/* ── 快速下单 ── */
.quick-order-btn { padding:8px 14px; border-radius:8px; border:1px dashed var(--accent); background:rgba(124,92,252,0.06); color:var(--accent2); font-size:0.78rem; font-weight:600; cursor:pointer; font-family:inherit; transition:all 0.2s; white-space:nowrap; flex-shrink:0; }
.quick-order-btn:hover { background:rgba(124,92,252,0.12); border-style:solid; }

.quick-step { margin-bottom:14px; }
.qs-num { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; font-size:0.7rem; font-weight:700; margin-right:8px; vertical-align:middle; }
.qs-label { font-size:0.82rem; font-weight:600; vertical-align:middle; margin-bottom:8px; display:inline-block; }
.quick-select { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.quick-chip { padding:6px 14px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text-muted); font-size:0.78rem; cursor:pointer; font-family:inherit; transition:all 0.15s; }
.quick-chip:hover { border-color:var(--accent); color:var(--text); }
.quick-chip.selected { border-color:var(--accent); background:rgba(124,92,252,0.12); color:var(--accent); font-weight:600; }

/* ── 评价推送弹窗 ── */
.review-push-overlay { display:none; position:fixed; inset:0; z-index:3000; background:rgba(0,0,0,0.7); align-items:flex-end; justify-content:center; padding:20px; }
.review-push-card { width:100%; max-width:400px; background:var(--surface); border:1px solid var(--border); border-radius:16px 16px 0 0; padding:24px 20px 20px; animation:slideUp 0.3s ease; }
@keyframes slideUp { from { transform:translateY(100%); } to { transform:translateY(0); } }
.rpc-icon { width:48px; height:48px; border-radius:50%; background:rgba(6,214,160,0.12); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin:0 auto 10px; }
.rpc-title { text-align:center; font-weight:700; font-size:0.95rem; margin-bottom:4px; }
.rpc-detail { text-align:center; font-size:0.75rem; color:var(--text-muted); margin-bottom:14px; }
.rpc-stars { display:flex; justify-content:center; gap:8px; margin-bottom:12px; }
.rpc-star { font-size:1.8rem; cursor:pointer; transition:all 0.1s; opacity:0.3; }
.rpc-star.active, .rpc-star.hover { opacity:1; }
.rpc-comment { width:100%; min-height:60px; padding:10px; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:0.82rem; font-family:inherit; resize:vertical; margin-bottom:12px; display:block; }
.btn-review-submit { display:block; width:100%; padding:10px 0; border-radius:10px; border:none; background:linear-gradient(135deg,var(--accent),#9b7cfc); color:#fff; font-size:0.85rem; font-weight:700; cursor:pointer; font-family:inherit; margin-bottom:6px; }
.btn-review-reorder { display:none; width:100%; padding:10px 0; border-radius:10px; border:1px solid var(--accent); background:transparent; color:var(--accent); font-size:0.85rem; font-weight:700; cursor:pointer; font-family:inherit; margin-bottom:6px; }
.btn-review-skip { display:block; width:100%; padding:8px 0; border:none; background:transparent; color:var(--text-dim); font-size:0.75rem; cursor:pointer; font-family:inherit; }

/* ── RESPONSIVE ── */
@media (max-width:768px) {
  .container { padding:0 12px 140px; margin-left:0 !important; margin-right:0 !important; }

  /* 侧边栏隐藏 */
  .club-sidebar { display:none !important; }
  .brand-logo-corner { display:none !important; }

  .hero { padding:32px 0 20px; }
  .hero-logo { font-size:2.2rem !important; letter-spacing:1px; }
  .hero-sub { font-size:0.72rem; letter-spacing:2px; }
  .hero-divider { width:60px; margin:10px auto 0; }
  
  /* Stats bar - horizontal scroll, compact */
  .stats-bar { gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; padding-bottom:2px; justify-content:center; margin:12px 0; }
  .stats-bar::-webkit-scrollbar { display:none; }
  .stat-chip { padding:6px 12px; font-size:0.72rem; white-space:nowrap; flex-shrink:0; gap:5px; }
  .stat-chip .num { font-size:0.82rem; }
  .stat-chip .dot { width:7px; height:7px; }
  
  /* Game tabs - horizontal scroll, compact */
  .game-tabs { gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; justify-content:flex-start; padding-bottom:2px; margin-bottom:12px; }
  .game-tabs::-webkit-scrollbar { display:none; }
  .game-tab { padding:7px 15px; font-size:1rem; white-space:nowrap; flex-shrink:0; border-radius:9px; }
  .game-tab .tab-icon { font-size:1.2rem; }

  /* Carousel */
  .announce-carousel { height:100px; margin:16px 0 20px; }
  .announce-content { padding:0 44px; }
  .announce-img { height:60px; max-width:140px; }
  .announce-icon { font-size:1.2rem; }
  .announce-text { font-size:0.78rem; }
  .announce-prev, .announce-next { width:26px; height:26px; font-size:0.7rem; }
  
  /* Toolbar - compact but usable */
  .toolbar { flex-wrap:wrap; gap:8px; margin-bottom:12px; row-gap:14px; }
  .search-wrap { flex:1 1 100%; min-width:120px; max-width:100%; margin-bottom:4px; }
  .price-filter { min-width:130px; flex-shrink:0; }
  .search-wrap input { padding:10px 12px 10px 34px; font-size:0.85rem; border-radius:10px; }
  .filter-group { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; gap:6px; padding:2px 0; }
  .filter-group::-webkit-scrollbar { display:none; }
  .fbtn { padding:8px 14px; font-size:0.8rem; white-space:nowrap; flex-shrink:0; border-radius:10px; }
  
  /* Second toolbar row */
  .toolbar .select-mode-btn { padding:6px 10px; font-size:0.72rem; white-space:nowrap; border-radius:6px; flex-shrink:0; }

  /* Action buttons */
  .action-btn { padding:8px 14px; font-size:0.8rem; white-space:nowrap; flex-shrink:0; border-radius:10px; }
  /* Sort and view controls */
  .sort-select { padding:6px 10px; font-size:0.75rem; border-radius:8px; flex-shrink:0; }
  .view-toggle { display:flex; gap:2px; flex-shrink:0; }
  .view-btn { width:26px; height:26px; font-size:0.7rem; }
  .price-filter { display:flex; padding:6px 10px; gap:6px; flex-shrink:0; min-width:80px; }
  .price-filter label { display:none; }
  .price-filter input[type="range"] { width:80px; }
  
  /* Grid - 2-column, bigger cards */
  .grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .grid.list-view .card { flex-direction:column; }
  .grid.list-view .card-banner { width:100%; height:130px; }
  .card { border-radius:14px; }
  .card-banner { height:200px; }
  .card-body { padding:10px 12px 12px; gap:6px; }
  .card-stats-big { font-size:1.1rem; }
  .card-stats-label { font-size:0.6rem; }
  .card-name-overlay .name { font-size:0.95rem; }
  .card-name-overlay .sub { font-size:0.6rem; }
  .card-featured-tag { font-size:0.6rem; padding:4px 8px; }
  .card-status-tag { font-size:0.6rem; padding:4px 8px; }
  .card-name-text { font-size:0.85rem; }
  .card-price-text { font-size:1.05rem; }
  .card-dot-online,.card-dot-offline,.card-dot-busy { width:9px; height:9px; }
  .card-btn-order,.card-btn-chat { padding:10px 0; font-size:0.8rem; border-radius:10px; }
  .rank-badge { padding:2px 6px; font-size:0.65rem; }
  .card-game-tag { padding:2px 7px; font-size:0.62rem; }
  .card-intro { font-size:0.7rem; }
  .card-banner-top { top:14px; left:14px; }
  .card-banner-top-right { top:14px; right:14px; }
  .card-banner-bottom { bottom:14px; left:16px; right:16px; }
  
  /* Selection bar - full width on mobile, above bottom tab */
  .selection-bar { 
    left:8px; right:8px; transform:none; 
    padding:8px 14px; border-radius:14px; gap:8px;
    bottom:-100px; 
  }
  .selection-bar.show { bottom:64px; }
  .selection-bar .sel-avatars { display:none; }
  .selection-bar .sel-btn { padding:8px 16px; font-size:0.82rem; }
  
  .modal-tabs { gap:2px; padding:3px; border-radius:10px; }
  .modal-tab { padding:8px 10px; font-size:0.75rem; border-radius:8px; }
  .review-stats { flex-direction:column; gap:10px; }
  .review-avg .num { font-size:1.6rem; }
  /* Modal — 手机端改回纵向布局 */
  /* Modal — 手机端纵向堆叠 */
  .modal-horizontal { height:90vh; max-width:none; max-height:95vh; border-radius:20px 20px 0 0; margin-top:auto; }
  .modal-body { flex-direction:column; }
  .modal-left {
    flex:0 0 auto; width:100%;
    flex-direction:column; align-items:center; text-align:center;
    padding:24px 16px 16px; gap:6px;
    border-right:none; border-bottom:1px solid var(--border);
    background:linear-gradient(180deg,rgba(124,92,252,0.06) 0%,rgba(15,15,26,0.2) 100%);
  }
  .modal-avatar-wrap { margin-bottom:4px; }
  .modal-avatar-wrap::before { inset:-4px; border-radius:22px; }
  .modal-avatar { width:96px; height:96px; border-radius:22px; font-size:2rem; }  /* 原 64 的 3/2 */
  .modal-left .modal-name { font-size:1rem; }
  .modal-left .modal-subtitle { font-size:0.72rem; }
  .modal-stats-row { width:100%; gap:6px; }
  .modal-stat .ms-val { font-size:0.85rem; }
  .modal-left .modal-price-box { width:100%; text-align:center; margin-top:0; }
  .modal-left .modal-price-box .price-amount { font-size:1.4rem; }
  .modal-left-actions { margin-top:10px; width:100%; }
  .modal-right { padding:14px; }
  
  /* Leaderboard */
  .leaderboard-grid { grid-template-columns:1fr; gap:10px; }
  .lb-card { padding:12px 14px; }
  
  /* Navigation - compact bar */
  .top-nav { display:none !important; }
  .nav-right { overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; flex-wrap:nowrap; gap:6px; }
  .nav-right::-webkit-scrollbar { display:none; }
  .nav-link { padding:8px 16px; font-size:0.8rem; white-space:nowrap; flex-shrink:0; border-radius:10px; }
  
  /* Booking form modal */
  .booking-modal .modal { max-width:100%; }
  .booking-form .form-row { flex-direction:column; }
  .booking-form .form-group { min-width:100%; }
  
  /* Login prompt modal */
  .login-prompt-modal .modal { max-width:100%; margin:16px; }
  
  /* Skeleton */
  .skeleton-grid { grid-template-columns:1fr; }
  
  /* Random result modal */
  .random-result-modal .modal { max-width:100%; margin:16px; }
}

@media (max-width:480px) {
  .container { padding:0 8px 130px; }
  .hero { padding:24px 0 12px; }
  .hero-logo { font-size:1.6rem; letter-spacing:0; }
  .hero-sub { font-size:0.62rem; letter-spacing:1px; }
  .stats-bar { gap:4px; margin:6px 0; }
  .stat-chip { padding:5px 10px; font-size:0.65rem; gap:4px; }
  .stat-chip .num { font-size:0.75rem; }
  .game-tab { padding:8px 16px; font-size:1rem; }
  .announce-carousel { height:90px; margin:10px 0 14px; }
  .announce-content { padding:0 36px; gap:8px; }
  .announce-img { height:50px; max-width:90px; }
  .announce-icon { font-size:1rem; }
  .announce-text { font-size:0.7rem; }

  /* 单列卡片 → 改为两列，紧凑展示 */
  .grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .card-banner { height:150px; }
  .card-body { padding:8px 10px 10px; gap:4px; }
  .card-stats-big { font-size:1rem; }
  .card-stats-label { font-size:0.55rem; }
  .card-name-overlay .name { font-size:0.85rem; }
  .card-name-overlay .sub { font-size:0.55rem; }
  .card-featured-tag { font-size:0.55rem; padding:3px 6px; }
  .card-status-tag { font-size:0.55rem; padding:3px 6px; }
  .card-name-text { font-size:0.78rem; }
  .card-price-text { font-size:0.95rem; }
  .card-intro { display:none; }
  .card-btn-order,.card-btn-chat { padding:8px 0; font-size:0.75rem; border-radius:8px; font-weight:600; }
  .rank-badge { padding:2px 4px; font-size:0.55rem; }
  .card-game-tag { padding:2px 5px; font-size:0.52rem; }
  .card-dot-online,.card-dot-offline,.card-dot-busy { width:6px; height:6px; }
  .search-wrap input { padding:12px 12px 12px 36px; font-size:0.9rem; }
  .fbtn { padding:9px 14px; font-size:0.82rem; }
  .sort-select { padding:9px 14px; font-size:0.82rem; }
  .selection-bar { padding:8px 12px; gap:8px; left:4px; right:4px; }
  .selection-bar .sel-btn { padding:6px 12px; font-size:0.75rem; }
  .selection-bar .sel-count { font-size:0.78rem; }
  .selection-bar .sel-count .count-num { width:22px; height:22px; font-size:0.7rem; }
}
/* ── 随机抽取滚动动画 ── */

/* 名字飞入：从下方弹入 */
@keyframes nameSlideIn {
  0% { transform: translateY(18px); opacity: 0; }
  60% { transform: translateY(-3px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
/* 头像快速切换：轻微缩放 */
@keyframes avatarTick {
  0% { transform: scale(0.92); opacity: 0.5; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* 头像最终揭晓：弹性放大 */
@keyframes avatarReveal {
  0% { transform: scale(0.6); opacity: 0; }
  50% { transform: scale(1.15); }
  75% { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}
/* 容器光晕：呼吸 → 揭晓时爆发 */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,92,252,0), 0 0 0 0 rgba(255,209,102,0); }
  50% { box-shadow: 0 0 24px 6px rgba(124,92,252,0.35), 0 0 0 0 rgba(255,209,102,0); }
}
@keyframes glowReveal {
  0% { box-shadow: 0 0 0 0 rgba(255,209,102,0.6), 0 0 30px 10px rgba(124,92,252,0.4); }
  50% { box-shadow: 0 0 0 20px rgba(255,209,102,0), 0 0 60px 20px rgba(124,92,252,0.15); }
  100% { box-shadow: 0 0 0 0 rgba(255,209,102,0), 0 0 30px 8px rgba(124,92,252,0.25); }
}
/* 闪光扩散环 */
@keyframes ringExpand {
  0% { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(2.5); opacity: 0; }
}
/* 按钮脉冲 */
@keyframes btnPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(124,92,252,0.4); }
  50% { transform: scale(1.03); box-shadow: 0 0 20px 4px rgba(124,92,252,0.25); }
}
/* 按钮揭晓闪光 */
@keyframes btnShine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.rolling-name { animation: nameSlideIn 0.25s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.rolling-avatar { animation: avatarTick 0.2s ease-out; }
.rolling-glow { animation: glowPulse 0.6s ease-in-out infinite; }
.rolling-btn { animation: btnPulse 0.5s ease-in-out infinite; pointer-events: none; }

/* 揭晓态 */
.reveal-avatar { animation: avatarReveal 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.reveal-glow { animation: glowReveal 0.8s ease-out forwards; }
.reveal-ring {
  position: absolute; top: 50%; left: 50%;
  width: 80px; height: 80px; border-radius: 50%;
  border: 3px solid var(--gold);
  animation: ringExpand 0.6s ease-out forwards;
  pointer-events: none;
}

@media (max-width:768px) { .mobile-contact-bottom { display:block !important; } }
@media (min-width:769px) { .mobile-theme-inline { display:none !important; } .mobile-dropdown-bar { display:none !important; } }
#bottomTabBar { display:none; position:fixed; bottom:0; left:0; right:0; z-index:800; background:var(--surface2,rgba(18,18,31,0.98));  border-top:1px solid var(--border,rgba(124,92,252,0.15)); padding:4px 0 env(safe-area-inset-bottom,8px); }
#bottomTabBar .tab-list { display:flex; justify-content:space-around; align-items:center; max-width:500px; margin:0 auto; }
#bottomTabBar .bottom-tab-item { display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 8px; border-radius:10px; text-decoration:none; color:var(--text-dim,#505070); font-size:0.6rem; font-weight:500; cursor:pointer; border:none; background:none; font-family:inherit; min-width:48px; -webkit-tap-highlight-color:transparent; }
#bottomTabBar .bottom-tab-item.active { color:var(--accent,#7c5cfc); background:var(--accent-glow,rgba(124,92,252,0.08)); }
#bottomTabBar .bottom-tab-item .tab-icon { font-size:1.15rem; line-height:1; }
@media (max-width:768px) { #bottomTabBar { display:block; } }
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width:768px) { .container { padding-bottom:calc(100px + env(safe-area-inset-bottom)); } }
}
/* Center avatar button */
.bottom-tab-center { position:relative; }
.bottom-tab-center .center-avatar {
  width:44px; height:44px; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--accent,#7c5cfc);
  box-shadow:0 0 12px rgba(124,92,252,0.4), 0 4px 16px rgba(0,0,0,0.3);
  transition:all 0.3s; margin-top:-16px;
  background:var(--surface,#12122a);
}
.bottom-tab-center .center-avatar img {
  width:100%; height:100%; object-fit:cover; border-radius:50%;
}
.bottom-tab-center .center-avatar-placeholder {
  font-size:1.3rem; color:var(--accent,#7c5cfc);
}
.bottom-tab-center:active .center-avatar {
  transform:scale(0.92);
  box-shadow:0 0 20px rgba(124,92,252,0.6), 0 4px 20px rgba(0,0,0,0.4);
}

/* onboard 兜底：即使 theme.css 未加载也能正常显示 */
#onboardOverlay { position:fixed; top:0; right:0; bottom:0; left:0; z-index:2000; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; }
#onboardOverlay.hidden { display:none !important; }
#onboardOverlay .onboard-bubble { background:#12121f; border:1px solid #2a2a4a; border-radius:24px; padding:28px 24px; max-width:340px; width:90%; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.4); }
#onboardOverlay .bubble-icon { font-size:3rem; margin-bottom:12px; }
#onboardOverlay .bubble-title { font-size:1.15rem; font-weight:700; color:#e8e8f5; margin-bottom:8px; }
#onboardOverlay .bubble-desc { font-size:0.88rem; color:#7878a0; line-height:1.7; margin-bottom:20px; }
#onboardOverlay .bubble-actions { display:flex; gap:10px; justify-content:center; }
#onboardOverlay .bubble-progress { display:flex; gap:6px; justify-content:center; margin-top:12px; margin-bottom:4px; }
#onboardOverlay .bubble-dot { width:8px; height:8px; border-radius:50%; background:#2a2a4a; transition:all 0.3s; }
#onboardOverlay .bubble-dot.active { background:#7c5cfc; width:20px; border-radius:4px; }
#onboardOverlay .onboard-btn { padding:10px 22px; border-radius:10px; border:none; font-size:0.88rem; font-weight:600; font-family:inherit; cursor:pointer; transition:all 0.25s; }
#onboardOverlay .onboard-btn-skip { background:#1a1a2e; color:#7878a0; border:1px solid #2a2a4a; }
#onboardOverlay .onboard-btn-skip:hover { border-color:#7c5cfc; color:#e8e8f5; }
#onboardOverlay .onboard-btn-next { background:linear-gradient(135deg,#7c5cfc,#a78bfa); color:#fff; }
#onboardOverlay .onboard-btn-next:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(124,92,252,0.3); }

#qrCodeModal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:3000;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);align-items:center;justify-content:center}
#qrCodeModal.open{display:flex}
#qrCodeModal .qrm-box{background:#12121f;border:1px solid #2a2a4a;border-radius:20px;padding:32px 28px;max-width:360px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
#qrCodeModal .qrm-icon{font-size:3rem;margin-bottom:12px}
#qrCodeModal .qrm-title{font-size:1.25rem;font-weight:700;color:#e8e8f5;margin-bottom:10px}
#qrCodeModal .qrm-desc{font-size:0.9rem;color:#7878a0;line-height:1.6;margin-bottom:18px}
#qrCodeModal .qrm-img{max-width:280px;width:100%;border-radius:12px;border:2px solid #2a2a4a;margin-bottom:20px}
#qrCodeModal .qrm-btns{display:flex;gap:12px;margin-top:20px;justify-content:center}
#qrCodeModal .qrm-btn{padding:12px 32px;border-radius:12px;border:none;font-size:0.95rem;font-weight:600;font-family:inherit;cursor:pointer;transition:all 0.25s;flex:1;max-width:140px}
#qrCodeModal .qrm-btn-confirm{background:linear-gradient(135deg,#2ed573,#7bed9f);color:#12121f}
#qrCodeModal .qrm-btn-cancel{background:transparent;color:#7878a0;border:1px solid #2a2a4a}
#qrCodeModal .qrm-btn-cancel:hover{border-color:#7c5cfc;color:#e8e8f5}
#qrCodeModal .qrm-btn-confirm:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(46,213,115,0.3)}

#dispatchModal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:3500;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);align-items:center;justify-content:center}
#dispatchModal.open{display:flex}
#dispatchModal .dm-box{background:#12121f;border:1px solid #2a2a4a;border-radius:20px;padding:40px 32px;max-width:360px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.5);position:relative}
#dispatchModal .dm-icon{font-size:3.5rem;margin-bottom:16px;animation:dmPulse 1.5s ease-in-out infinite}
@keyframes dmPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
#dispatchModal .dm-title{font-size:1.3rem;font-weight:700;color:#e8e8f5;margin-bottom:10px}
#dispatchModal .dm-desc{font-size:0.9rem;color:#7878a0;line-height:1.6;margin-bottom:24px}
#dispatchModal .dm-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:10px;border:1px solid #2a2a4a;background:#1a1a2e;color:#7878a0;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
#dispatchModal .dm-close:hover{background:#e74c3c;color:#fff}
#dispatchModal .dm-spinner{width:48px;height:48px;border:4px solid rgba(124,92,252,0.2);border-top-color:#7c5cfc;border-radius:50%;animation:dmSpin 0.8s linear infinite;margin:0 auto 20px}
@keyframes dmSpin{to{transform:rotate(360deg)}}

#payModal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:4000;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);align-items:center;justify-content:center}
#payModal.open{display:flex}
#payModal .pm-box{background:#12121f;border:1px solid #2a2a4a;border-radius:20px;padding:32px 28px;max-width:380px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.5);position:relative}
#payModal .pm-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:10px;border:1px solid #2a2a4a;background:#1a1a2e;color:#7878a0;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
#payModal .pm-close:hover{background:#e74c3c;color:#fff}
#payModal .pm-icon{font-size:2.8rem;margin-bottom:10px}
#payModal .pm-title{font-size:1.2rem;font-weight:700;color:#e8e8f5;margin-bottom:6px}
#payModal .pm-amount{font-size:2rem;font-weight:900;color:#ffd166;margin-bottom:16px}
#payModal .pm-qr{width:220px;height:220px;margin:0 auto 16px;background:#fff;border-radius:12px;padding:8px;display:flex;align-items:center;justify-content:center}
#payModal .pm-qr img{width:100%;height:100%;border-radius:8px}
#payModal .pm-tip{font-size:0.82rem;color:#7878a0;margin-bottom:6px;line-height:1.5}
#payModal .pm-status{font-size:0.88rem;font-weight:600;margin-top:12px;padding:8px 16px;border-radius:8px;display:inline-block}
#payModal .pm-status.waiting{color:#ffd166;background:rgba(255,209,102,0.1)}
#payModal .pm-status.success{color:#2ed573;background:rgba(46,213,115,0.1)}
#payModal .pm-status.error{color:#e74c3c;background:rgba(231,76,60,0.1)}
/* ── 卡片动效（仅网格内卡片，不动侧边栏）── */
#grid .card {
  transition: transform 0.15s ease-out, box-shadow 0.3s;
}
#grid .card::before {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(500px circle at var(--x,50%) var(--y,50%), var(--accent-glow) 0%, transparent 50%);
  opacity: var(--o,0); transition: opacity 0.25s;
}
#grid .card:hover::before { opacity: 1; }