/* ===== 主题: 碧波蓝 (默认) ===== */
:root,body[data-theme="碧波蓝"] {
  --bg: #f4f7fb;
  --page-bg: #f4f7fb;
  --panel: #ffffff;
  --card: #ffffff;
  --primary: #2f6bff;
  --primary-strong: #2358d8;
  --accent: #68a4ff;
  --text: #101828;
  --muted: #667085;
  --line: #e4eaf2;
  --success: #12a06a;
  --warning: #dc7b14;
  --danger: #e54861;
  --shadow: 0 14px 36px rgba(16,24,40,0.08);
  --soft-shadow: 0 7px 20px rgba(16,24,40,0.06);
  --body-gradient: radial-gradient(840px 460px at -4% -10%, rgba(47,107,255,0.16), transparent 64%), radial-gradient(720px 430px at 104% 4%, rgba(45,193,181,0.105), transparent 62%), radial-gradient(620px 360px at 52% 72%, rgba(107,135,255,0.045), transparent 70%), linear-gradient(180deg, #f8faff 0%, #f3f6fb 52%, #f5f8fc 100%);
  --header-gradient: radial-gradient(circle at 8% 0%, rgba(47,107,255,0.07), transparent 34%), linear-gradient(135deg, rgba(255,255,255,0.98), rgba(247,250,255,0.93));
  --tab-active-bg: linear-gradient(120deg, #225ee7 0%, #3978ff 54%, #69a5ff 100%);
  --float-btn-bg: #2f6bff;
  --card-top-line: linear-gradient(90deg, transparent, #4d7dff 35%, #31d2c2 64%, transparent);
  --title-bar: linear-gradient(180deg, #2f6bff, #65a2ff 60%, #2dc1b5);
}

/* ===== 主题: 紫罗兰 ===== */
body[data-theme="紫罗兰"] {
  --bg: #f5f0fa;
  --page-bg: #f5f0fa;
  --panel: #ffffff;
  --card: #ffffff;
  --primary: #7c3aed;
  --primary-strong: #6d28d9;
  --accent: #a78bfa;
  --text: #1e1b2e;
  --muted: #6b6880;
  --line: #e8e0f0;
  --body-gradient: radial-gradient(840px 460px at -4% -10%, rgba(124,58,237,0.14), transparent 64%), radial-gradient(720px 430px at 104% 4%, rgba(168,85,247,0.08), transparent 62%), linear-gradient(180deg, #f8f5fc 0%, #f3f0fa 52%, #f5f3fd 100%);
  --header-gradient: radial-gradient(circle at 8% 0%, rgba(124,58,237,0.07), transparent 34%), linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,245,255,0.93));
  --tab-active-bg: linear-gradient(120deg, #6d28d9 0%, #8b5cf6 54%, #a78bfa 100%);
  --float-btn-bg: #7c3aed;
  --card-top-line: linear-gradient(90deg, transparent, #8b5cf6 35%, #c084fc 64%, transparent);
  --title-bar: linear-gradient(180deg, #7c3aed, #a78bfa 60%, #c084fc);
}

/* ===== 主题: 落日橙 ===== */
body[data-theme="落日橙"] {
  --bg: #fdf6f0;
  --page-bg: #fdf6f0;
  --panel: #ffffff;
  --card: #ffffff;
  --primary: #ea580c;
  --primary-strong: #c2410c;
  --accent: #fb923c;
  --text: #2e1810;
  --muted: #8a6555;
  --line: #f0e0d4;
  --body-gradient: radial-gradient(840px 460px at -4% -10%, rgba(234,88,12,0.12), transparent 64%), radial-gradient(720px 430px at 104% 4%, rgba(251,146,60,0.08), transparent 62%), linear-gradient(180deg, #fffaf5 0%, #fdf6f0 52%, #fef8f3 100%);
  --header-gradient: radial-gradient(circle at 8% 0%, rgba(234,88,12,0.07), transparent 34%), linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,248,240,0.93));
  --tab-active-bg: linear-gradient(120deg, #c2410c 0%, #ea580c 54%, #fb923c 100%);
  --float-btn-bg: #ea580c;
  --card-top-line: linear-gradient(90deg, transparent, #ea580c 35%, #fb923c 64%, transparent);
  --title-bar: linear-gradient(180deg, #ea580c, #fb923c 60%, #fdba74);
}

/* ===== 主题: 樱花粉 ===== */
body[data-theme="樱花粉"] {
  --bg: #fff5f7;
  --page-bg: #fff5f7;
  --panel: #ffe4ec;
  --card: #ffffff;
  --primary: #ff6b9d;
  --primary-strong: #ff4081;
  --accent: #ffb3d1;
  --text: #4a3340;
  --muted: #a08090;
  --line: #ffd0e0;
  --shadow: 0 14px 36px rgba(255,107,157,0.08);
  --soft-shadow: 0 7px 20px rgba(255,107,157,0.06);
  --body-gradient: radial-gradient(900px 500px at -4% -10%, rgba(255,107,157,0.08), transparent 60%), radial-gradient(760px 440px at 104% 4%, rgba(255,64,129,0.05), transparent 58%), #fff5f7;
  --header-gradient: linear-gradient(135deg, #ff4081 0%, #ff6b9d 40%, #ff80ab 70%, #ffb3d1 100%);
  --tab-active-bg: linear-gradient(120deg, #ff4081 0%, #ff6b9d 50%, #ffb3d1 100%);
  --float-btn-bg: #ff6b9d;
  --card-top-line: linear-gradient(90deg, transparent, #ff6b9d 30%, #ff4081 60%, transparent);
  --title-bar: linear-gradient(180deg, #ff6b9d, #ff4081 60%, #ff80ab);
}
body[data-theme="樱花粉"] header { border-color: rgba(255,107,157,0.2); box-shadow: 0 16px 42px rgba(255,107,157,0.06), inset 0 1px rgba(255,179,209,0.3); }
body[data-theme="樱花粉"] header::before { background: linear-gradient(105deg, rgba(255,179,209,0.2), transparent 30%), linear-gradient(90deg, transparent 60%, rgba(255,107,157,0.06)); }
body[data-theme="樱花粉"] .brand-name { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.1); }
body[data-theme="樱花粉"] .share-btn { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.2); color: #fff; }
body[data-theme="樱花粉"] .share-btn:hover { background: rgba(255,255,255,0.35); border-color: rgba(255,255,255,0.6); }
body[data-theme="樱花粉"] .share-panel { background: #fff; border-color: rgba(255,107,157,0.15); box-shadow: 0 12px 36px rgba(255,107,157,0.12); }
body[data-theme="樱花粉"] .nav-section { border-color: rgba(255,107,157,0.1); background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,228,236,0.6)); box-shadow: 0 8px 24px rgba(255,107,157,0.06), inset 0 1px rgba(255,179,209,0.2); }
body[data-theme="樱花粉"] .category-button { border-color: rgba(255,107,157,0.12); background: linear-gradient(145deg, #ffffff, #fff5f7); box-shadow: 0 4px 14px rgba(255,107,157,0.05), inset 0 1px rgba(255,179,209,0.15); color: #4a3340; }
body[data-theme="樱花粉"] .category-button .cat-icon { color: #ff6b9d; background: rgba(255,107,157,0.1); }
body[data-theme="樱花粉"] .category-button:hover { border-color: #ff6b9d; color: #ff4081; }
body[data-theme="樱花粉"] .category-button.active { border-color: rgba(255,107,157,0.3); background: radial-gradient(circle at 14% 10%, rgba(255,255,255,0.3), transparent 30%), var(--tab-active-bg); color: #fff; box-shadow: 0 10px 26px rgba(255,107,157,0.2); }
body[data-theme="樱花粉"] .category-button.active .cat-icon { color: #fff; background: rgba(255,255,255,0.2); }
body[data-theme="樱花粉"] .marquee-wrap { border-color: rgba(255,107,157,0.12); background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,228,236,0.9) 28%, rgba(255,240,245,0.92)); }
body[data-theme="樱花粉"] .marquee-wrap::before { background: linear-gradient(135deg, #ff6b9d, #ff4081); color: #fff; border-color: rgba(255,107,157,0.1); }
body[data-theme="樱花粉"] .marquee-text { color: #8a6070; }
body[data-theme="樱花粉"] .card { border-color: rgba(255,107,157,0.1); background: linear-gradient(145deg, #ffffff, #fff5f7); box-shadow: 0 10px 30px rgba(255,107,157,0.06), inset 0 1px rgba(255,179,209,0.1); }
body[data-theme="樱花粉"] .card .avatar { border-color: rgba(255,107,157,0.15); background: linear-gradient(145deg, var(--card), #ffe4ec); }
body[data-theme="樱花粉"] .card .go { border-color: rgba(255,107,157,0.2); background: linear-gradient(135deg, #ffe4ec, #ffd0e0); color: #ff4081; }
body[data-theme="樱花粉"] .card .go:hover { background: var(--tab-active-bg); color: #fff; }
body[data-theme="樱花粉"] .iframe-frame-shell { border-color: rgba(255,107,157,0.08); box-shadow: 0 10px 30px rgba(255,107,157,0.06); }
body[data-theme="樱花粉"] .common-tools-group { border-color: rgba(255,107,157,0.08); box-shadow: 0 8px 24px rgba(255,107,157,0.05); }
body[data-theme="樱花粉"] .common-tool-card { border-color: rgba(255,107,157,0.08); background: rgba(255,255,255,0.9); }
body[data-theme="樱花粉"] .common-tool-card::before { border-color: rgba(255,107,157,0.04); box-shadow: 0 0 0 16px rgba(255,107,157,0.015); }
body[data-theme="樱花粉"] .common-tool-download { border-color: rgba(255,107,157,0.15); background: rgba(255,107,157,0.06); color: #ff4081; }
body[data-theme="樱花粉"] .common-tool-download:hover { background: #ff6b9d; color: #fff; }
body[data-theme="樱花粉"] .common-tools-warning { border-color: rgba(255,107,157,0.12); background: rgba(255,228,236,0.8); color: #8a6070; }
body[data-theme="樱花粉"] .carousel-wrap { border-color: rgba(255,107,157,0.08); box-shadow: 0 10px 30px rgba(255,107,157,0.06); }
body[data-theme="樱花粉"] .dot { background: rgba(255,107,157,0.25); }
body[data-theme="樱花粉"] .dot.active { background: rgba(255,107,157,0.6); }
body[data-theme="樱花粉"] .float-btn { box-shadow: 0 8px 24px rgba(255,107,157,0.2); }
body[data-theme="樱花粉"] .pk16-category-title { color: #ff4081; }
body[data-theme="樱花粉"] .pk16-category-title::before { background: var(--title-bar); box-shadow: 0 0 0 4px rgba(255,107,157,0.06), 0 6px 16px rgba(255,107,157,0.15); }
body[data-theme="樱花粉"] .pk16-category-title::after { background: linear-gradient(90deg, #ff6b9d, #ff4081, transparent); }
body[data-theme="樱花粉"] .brand-footer { color: #a08090; }
body[data-theme="樱花粉"] .service-panel { background: #fff; border-color: rgba(255,107,157,0.1); box-shadow: 0 12px 36px rgba(255,107,157,0.1); }
body[data-theme="樱花粉"] .service-item:hover { background: rgba(255,107,157,0.04); }
body[data-theme="樱花粉"] .service-action { border-color: rgba(255,107,157,0.15); background: var(--panel); color: #ff4081; }
body[data-theme="樱花粉"] .service-copy-btn { background: rgba(255,107,157,0.08); color: #ff4081; border-color: rgba(255,107,157,0.15); }
body[data-theme="樱花粉"] .service-copy-btn:hover { background: rgba(255,107,157,0.15); }
body[data-theme="樱花粉"] .service-account-val { color: #6a4a5a; }
body[data-theme="樱花粉"] .modal-card { background: linear-gradient(145deg, #ffffff, #fff5f7); border-color: rgba(255,107,157,0.2); }
body[data-theme="樱花粉"] .modal-body p { color: #8a6070; }

/* ===== 主题: 墨竹绿 ===== */
body[data-theme="墨竹绿"] {
  --bg: #f0f5f0;
  --page-bg: #f0f5f0;
  --panel: #ffffff;
  --card: #ffffff;
  --primary: #2d6a4f;
  --primary-strong: #1b4332;
  --accent: #52b788;
  --text: #1a2e20;
  --muted: #5a7060;
  --line: #d8e8d8;
  --body-gradient: radial-gradient(840px 460px at -4% -10%, rgba(45,106,79,0.12), transparent 64%), radial-gradient(720px 430px at 104% 4%, rgba(82,183,136,0.08), transparent 62%), linear-gradient(180deg, #f3f8f3 0%, #f0f5f0 52%, #f2f7f2 100%);
  --header-gradient: radial-gradient(circle at 8% 0%, rgba(45,106,79,0.07), transparent 34%), linear-gradient(135deg, rgba(255,255,255,0.98), rgba(245,250,245,0.93));
  --tab-active-bg: linear-gradient(120deg, #1b4332 0%, #2d6a4f 54%, #52b788 100%);
  --float-btn-bg: #2d6a4f;
  --card-top-line: linear-gradient(90deg, transparent, #2d6a4f 35%, #52b788 64%, transparent);
  --title-bar: linear-gradient(180deg, #2d6a4f, #52b788 60%, #74c69d);
}

/* ===== 主题: 七彩虹 ===== */
body[data-theme="七彩虹"] {
  --bg: #f8f8ff;
  --page-bg: #f8f8ff;
  --panel: #ffffff;
  --card: #ffffff;
  --primary: #6366f1;
  --primary-strong: #4f46e5;
  --accent: #ec4899;
  --text: #1a1a2e;
  --muted: #6b6b80;
  --line: #e8e8f0;
  --body-gradient: radial-gradient(840px 460px at -4% -10%, rgba(99,102,241,0.12), transparent 64%), radial-gradient(720px 430px at 104% 4%, rgba(236,72,153,0.08), transparent 62%), radial-gradient(620px 360px at 52% 72%, rgba(34,197,94,0.06), transparent 70%), linear-gradient(180deg, #fafaff 0%, #f8f8ff 52%, #f9f9ff 100%);
  --header-gradient: radial-gradient(circle at 8% 0%, rgba(99,102,241,0.06), transparent 34%), linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,248,255,0.93));
  --tab-active-bg: linear-gradient(120deg, #6366f1 0%, #8b5cf6 25%, #ec4899 50%, #f59e0b 75%, #22c55e 100%);
  --float-btn-bg: #6366f1;
  --card-top-line: linear-gradient(90deg, transparent, #6366f1 20%, #8b5cf6 40%, #ec4899 60%, #f59e0b 80%, transparent);
  --title-bar: linear-gradient(180deg, #6366f1, #8b5cf6 30%, #ec4899 60%, #f59e0b 80%, #22c55e);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
img { -webkit-user-drag: none; user-select: none; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; opacity: 1;
  background: var(--body-gradient);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -2; opacity: 0.42;
  background-image: radial-gradient(circle, rgba(64,101,170,0.16) 0.75px, transparent 0.85px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 34%, transparent 72%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 34%, transparent 72%, #000 100%);
  pointer-events: none;
}
a { text-decoration: none; color: inherit; }
.page-shell { max-width: 1180px; margin: 0 auto; position: relative; }

/* ===== 顶部 ===== */
header {
  width: min(1180px, calc(100% - 28px));
  margin: 14px auto 10px;
  border: 1px solid rgba(190,206,232,0.86);
  border-radius: 18px;
  background: var(--header-gradient);
  box-shadow: 0 16px 42px rgba(38,72,132,0.105), inset 0 1px rgba(255,255,255,0.95);
  backdrop-filter: blur(18px);
  overflow: visible;
  position: relative;
  z-index: 20;
}
header::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(47,107,255,0.07), transparent 28%), linear-gradient(90deg, transparent 62%, rgba(45,193,181,0.045)); pointer-events: none; }
.nav { min-height: 62px; padding: 9px 20px; display: flex; align-items: center; justify-content: space-between; position: relative; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { max-width: 200px; height: 44px; object-fit: contain; flex-shrink: 0; }
.brand-name { font-size: 20px; font-weight: 800; color: var(--primary-strong); }

.share-wrapper { position: relative; }
.share-btn { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid rgba(47,107,255,0.2); border-radius: 999px; background: rgba(255,255,255,0.9); color: var(--primary-strong); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.share-btn:hover { background: #fff; border-color: var(--primary); box-shadow: var(--soft-shadow); }
.share-panel { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 180px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 6px 0; z-index: 999; }
.share-panel.show { display: block; }
.share-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 14px; color: var(--text); cursor: pointer; transition: background 0.15s; }
.share-item:hover { background: rgba(47,107,255,0.05); }
.share-item svg { width: 20px; height: 20px; fill: currentColor; }

/* ===== 轮播 ===== */
.carousel { max-width: 1180px; margin: 0 auto 10px; }
.carousel-wrap { position: relative; border: 1px solid rgba(184,202,230,0.86); border-radius: 18px; background: var(--panel); box-shadow: 0 20px 50px rgba(32,68,128,0.135), inset 0 1px rgba(255,255,255,0.72); overflow: hidden; }
.slides { display: flex; transition: transform 0.5s ease; }
.slide { min-width: 100%; position: relative; overflow: hidden; background: #e9eef5; aspect-ratio: 1280 / 548; }
.slide a { display: block; width: 100%; height: 100%; }
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; gap: 7px; justify-content: center; }
.dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,0.7); border: 0; cursor: pointer; transition: all 0.3s; }
.dot.active { width: 24px; background: rgba(255,255,255,0.5); }

/* ===== 公告 ===== */
.section { max-width: 1180px; margin: 0 auto; padding: 0 14px; }
.notice-section { margin-top: 8px; }
.marquee-wrap { position: relative; min-height: 40px; padding: 7px 14px 7px 82px; border: 1px solid rgba(173,197,239,0.76); border-radius: 12px; background: linear-gradient(90deg, rgba(237,244,255,0.96), rgba(255,255,255,0.95) 28%, rgba(244,251,252,0.95)); box-shadow: 0 8px 24px rgba(35,72,137,0.075), inset 0 1px rgba(255,255,255,0.9); display: flex; align-items: center; cursor: pointer; overflow: hidden; }
.marquee-wrap::before { content: "公告"; position: absolute; left: 12px; z-index: 2; display: inline-flex; min-height: 24px; align-items: center; padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(47,107,255,0.09); background: linear-gradient(135deg, #e7efff, #f1f6ff); color: var(--primary-strong); font-size: 12px; font-weight: 800; box-shadow: 0 5px 14px rgba(47,107,255,0.1); }
.marquee { flex: 1; overflow: hidden; white-space: nowrap; }
.marquee-text { display: inline-block; min-width: max-content; padding-left: 100%; color: #475467; font-weight: 650; font-size: 14px; animation: noticeScroll 13s linear infinite; will-change: transform; }
@keyframes noticeScroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ===== Tab导航 ===== */
.nav-section { margin: 10px 14px; border: 1px solid rgba(199,211,231,0.55); border-radius: 17px; background: linear-gradient(135deg, rgba(255,255,255,0.48), rgba(244,248,255,0.2)); box-shadow: 0 12px 32px rgba(37,72,132,0.055), inset 0 1px rgba(255,255,255,0.72); padding: 10px; }
.category-buttons { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.category-button { position: relative; display: inline-flex; height: 48px; min-height: 44px; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 1px solid rgba(196,208,228,0.82); border-radius: 12px; background: linear-gradient(145deg, rgba(255,255,255,0.99), rgba(244,248,255,0.94)); box-shadow: 0 7px 18px rgba(38,70,126,0.055), inset 0 1px rgba(255,255,255,0.95); color: #344054; font-size: 14px; font-weight: 800; cursor: pointer; transition: all 0.18s; white-space: nowrap; overflow: hidden; }
.category-button .cat-icon { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: var(--primary); background: #eaf1ff; font-size: 12px; overflow: hidden; }
.category-button .cat-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.category-button[data-span="2"] { grid-column: span 2; min-height: 50px; font-size: 16px; }
.category-button::after { content: ""; position: absolute; top: 0; right: 16%; left: 16%; height: 1px; background: linear-gradient(90deg, transparent, rgba(47,107,255,0.28), transparent); opacity: 0.65; pointer-events: none; }
.category-button:hover { border-color: var(--accent); color: var(--primary-strong); transform: translateY(-1px); }
.category-button.active { border-color: rgba(255,255,255,0.6); background: radial-gradient(circle at 14% 10%, rgba(255,255,255,0.23), transparent 30%), var(--tab-active-bg); color: #fff; box-shadow: 0 13px 30px rgba(47,107,255,0.32), inset 0 1px rgba(255,255,255,0.32); }
.category-button.active .cat-icon { color: #fff; background: rgba(255,255,255,0.18); }
.category-button.active::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent); }

/* ===== 内容区 ===== */
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.pk16-category-title { margin: 28px 14px 18px; padding: 0 0 0 15px; font-size: clamp(24px, 3vw, 30px); font-weight: 800; text-align: left; position: relative; }
.pk16-category-title::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 30px; border-radius: 2px; background: var(--title-bar); box-shadow: 0 0 0 4px rgba(47,107,255,0.07), 0 8px 18px rgba(47,107,255,0.18); transform: translateY(-50%); }
.pk16-category-title::after { content: ""; position: absolute; bottom: 1px; left: 16px; width: 72px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--accent), transparent); opacity: 0.62; }

.card-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; padding: 0 14px; }
.card { display: grid; grid-template-columns: 62px minmax(0,1fr) 90px; grid-template-areas: "avatar meta cta"; gap: 13px; align-items: center; min-height: 104px; padding: 16px; border: 1px solid rgba(201,213,231,0.78); border-radius: 16px; background: linear-gradient(145deg, var(--card), rgba(249,251,255,0.95)); box-shadow: 0 11px 28px rgba(35,67,122,0.075), inset 0 1px rgba(255,255,255,0.95); position: relative; isolation: isolate; overflow: hidden; transition: all 0.25s; }
.card::before { content: ""; position: absolute; top: -52px; right: -48px; width: 118px; height: 118px; border: 1px solid rgba(47,107,255,0.07); border-radius: 50%; box-shadow: 0 0 0 16px rgba(47,107,255,0.022), 0 0 0 33px rgba(47,107,255,0.016); pointer-events: none; z-index: 0; }
.card::after { content: ""; position: absolute; top: 0; right: 13px; left: 13px; z-index: 0; height: 2px; border-radius: 0 0 999px 999px; background: var(--card-top-line); box-shadow: 0 2px 12px rgba(59,124,255,0.26); opacity: 0.72; pointer-events: none; }
.card > * { position: relative; z-index: 1; }
.card:hover { border-color: var(--accent); box-shadow: 0 17px 38px rgba(47,107,255,0.14), inset 0 1px rgba(255,255,255,0.98); transform: translateY(-3px); }
.card-rec-badge { position: absolute; top: 8px; right: 8px; z-index: 4; display: inline-flex; min-height: 20px; align-items: center; gap: 2px; padding: 2px 7px 2px 6px; border: 1px solid rgba(255,255,255,0.7); border-radius: 5px 11px 5px 11px; color: #fff; font-size: 10px; font-weight: 900; box-shadow: inset 0 1px rgba(255,255,255,0.34), 0 4px 10px rgba(30,71,148,0.18); text-shadow: 0 1px 2px rgba(11,35,86,0.28); animation: platform-badge-breathe 3.8s ease-in-out infinite; }
.card-rec-badge::before { content: "✦"; font-size: 8px; color: rgba(255,255,255,0.9); }
.badge-popularity { background: linear-gradient(120deg, #ff7a18 0%, #ff9f0a 52%, #ff6a18 100%); }
.badge-premium, .badge-优选 { background: linear-gradient(120deg, #225ee7 0%, #377dff 50%, #6559ed 100%); }
.badge-hot, .badge-推荐 { background: linear-gradient(120deg, #e83355 0%, #f45468 52%, #d92348 100%); }
.badge-人气 { background: linear-gradient(120deg, #ff7a18 0%, #ff9f0a 52%, #ff6a18 100%); }
@keyframes platform-badge-breathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.08); } }
.card .avatar { grid-area: avatar; width: 62px; height: 62px; border: 2px solid rgba(125,163,238,0.48); border-radius: 50%; background: linear-gradient(145deg, var(--card), #edf4ff); box-shadow: 0 0 0 5px rgba(65,121,241,0.055), 0 8px 18px rgba(30,77,163,0.14), inset 0 1px rgba(255,255,255,0.95); object-fit: cover; filter: saturate(1.04) contrast(1.02); transition: transform 0.28s cubic-bezier(0.22,1,0.36,1); }
.card .meta { grid-area: meta; min-width: 0; }
.card .title { font-size: 17px; font-weight: 800; color: var(--text); }
.card .desc { margin-top: 5px; color: var(--muted); font-size: 13px; }
.card .rating { margin-top: 7px; display: flex; align-items: center; gap: 6px; }
.card .stars { color: #f5a524; font-size: 12px; letter-spacing: 1px; }
.card .score { color: #98a2b3; font-size: 12px; }
.card .go { grid-area: cta; display: inline-flex; align-items: center; justify-content: center; width: 90px; min-height: 38px; padding: 7px 10px; border: 1px solid rgba(112,157,247,0.54); border-radius: 10px; background: linear-gradient(135deg, #f6f9ff, #eaf2ff); color: var(--primary-strong); font-size: 12px; font-weight: 600; white-space: nowrap; transition: all 0.2s; position: relative; overflow: hidden; box-shadow: inset 0 1px rgba(255,255,255,0.96), 0 5px 14px rgba(47,107,255,0.09); }
.card .go:hover { background: var(--tab-active-bg); color: #fff; border-color: rgba(255,255,255,0.62); box-shadow: 0 10px 22px rgba(47,107,255,0.26), inset 0 1px rgba(255,255,255,0.28); text-shadow: 0 1px 3px rgba(0,0,0,0.2); }

/* ===== iframe壳 ===== */
.iframe-section { padding: 0 14px; }
.iframe-frame-shell { position: relative; min-height: 600px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 14px 38px rgba(16,24,40,0.09); }
.iframe-frame-shell iframe { display: block; width: 100%; min-height: 600px; border: 0; opacity: 0; transition: opacity 0.3s; }
.iframe-frame-shell iframe.is-ready { opacity: 1; }
.iframe-placeholder { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; min-height: 180px; padding: 60px 20px; text-align: center; }
.iframe-placeholder .icon { font-size: 48px; margin-bottom: 14px; opacity: 0.25; }
.iframe-placeholder .ph-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.iframe-placeholder .ph-desc { font-size: 14px; line-height: 1.6; color: var(--muted); }
.iframe-placeholder .ph-url { margin-top: 12px; display: inline-block; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--muted); background: rgba(248,250,252,0.8); }

/* ===== 常用工具 ===== */
.common-tools-panel { margin-top: 0; padding: 0 14px 22px; }
.common-tools-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.common-tools-heading p { margin: 0; color: #6b7890; font-size: 14px; }
.common-tools-group { margin-top: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 10px 28px rgba(16,24,40,0.05); }
.common-tools-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.common-tools-group-head h3 { margin: 0; color: var(--text); font-size: 18px; }
.common-tools-group-head p { margin: 0; color: var(--muted); font-size: 14px; }
.common-tools-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.common-tool-card { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 11px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: rgba(249,251,255,0.8); position: relative; overflow: hidden; }
.common-tool-card::before { content: ""; position: absolute; top: -52px; right: -48px; width: 118px; height: 118px; border: 1px solid rgba(47,107,255,0.07); border-radius: 50%; box-shadow: 0 0 0 16px rgba(47,107,255,0.022), 0 0 0 33px rgba(47,107,255,0.016); pointer-events: none; z-index: 0; }
.common-tool-card > * { position: relative; z-index: 1; }
.common-tool-mark { display: grid; grid-row: span 2; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--tab-active-bg); color: #fff; font-size: 14px; font-weight: 800; letter-spacing: -0.02em; box-shadow: 0 8px 18px rgba(47,107,255,0.22); }
.common-tool-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.common-tool-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; }
.common-tool-copy strong { overflow: hidden; color: var(--text); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.common-tool-copy span { overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.common-tool-download { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; min-height: 36px; margin-top: 2px; border: 1px solid rgba(47,107,255,0.2); border-radius: 10px; background: rgba(237,243,255,0.6); color: var(--primary-strong); font-size: 13px; font-weight: 700; text-decoration: none; transition: all 0.18s; }
.common-tool-download:hover { border-color: var(--primary); background: var(--primary); color: #fff; }
.common-tools-warning { display: flex; gap: 12px; margin-top: 14px; padding: 13px 15px; border: 1px solid #f4ddb0; border-radius: 14px; background: #fffaf0; color: #815b18; font-size: 13px; line-height: 1.6; }
.common-tools-warning strong { flex: 0 0 auto; }

/* ===== 底部 ===== */
.site-footer { max-width: 1180px; margin: 0 auto; padding: 24px 16px; text-align: center; }
.brand-footer { padding: 18px 0; color: #98a2b3; }
.brand-footer .desc { font-size: 14px; line-height: 1.8; }

/* ===== 客服浮动按钮（融合一体） ===== */
.service-float-btn { position: fixed; right: 22px; bottom: 24px; z-index: 82; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 14px 9px; border: 0; border-radius: 26px; background: var(--float-btn-bg); box-shadow: 0 12px 28px rgba(47,107,255,0.26); color: #fff; cursor: pointer; transition: all 0.2s; animation: ngFloat 2.9s ease-in-out infinite; }
.service-float-btn::after { content: none; }
.service-float-btn .svc-label { font-size: 12px; font-weight: 800; letter-spacing: 2px; line-height: 1; }
.service-float-btn .headsetIcon { position: relative; display: block; width: 23px; height: 19px; flex: 0 0 23px; overflow: visible; border: 2px solid currentColor; border-radius: 7px; color: #fff; font-size: 0; line-height: 0; }
.service-float-btn .headsetIcon::before { content: ""; position: absolute; top: 6px; left: 4px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; box-shadow: 5px 0 0 currentColor, 10px 0 0 currentColor; }
.service-float-btn .headsetIcon::after { content: ""; position: absolute; bottom: -5px; left: 4px; width: 7px; height: 6px; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; border-radius: 0 0 0 3px; transform: skewX(-30deg); }
.service-float-btn:hover { filter: brightness(1.07); transform: translateY(-2px); }
@keyframes ngFloat { 0%,100% { box-shadow: 0 10px 24px rgba(47,107,255,0.3), 0 0 0 0 rgba(72,128,255,0.24); } 50% { box-shadow: 0 14px 32px rgba(47,107,255,0.44), 0 0 0 8px rgba(72,128,255,0); } }

.service-panel { display: none; position: fixed; right: 22px; bottom: 80px; z-index: 83; width: 300px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 20px 50px rgba(16,24,40,0.18); overflow: hidden; }
.service-panel.show { display: block; }
.service-panel-head { padding: 14px 16px; background: var(--tab-active-bg); color: #fff; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; }
.service-panel-head .close-btn { background: none; border: none; color: rgba(255,255,255,0.8); font-size: 22px; cursor: pointer; line-height: 1; }
.service-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background 0.15s; width: 100%; text-align: left; background: none; border-left: none; border-right: none; border-top: none; }
.service-item:last-child { border-bottom: none; }
.service-item:hover { background: rgba(47,107,255,0.04); }
.service-item .svc-avatar { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px; object-fit: cover; }
.service-item-body { flex: 1; min-width: 0; }
.service-item-body .svc-name { display: block; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.service-account-row { display: flex; align-items: center; gap: 6px; }
.service-account-label { font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.service-account-val { font-size: 12px; color: var(--text); word-break: break-all; min-width: 0; }
.service-copy-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 24px; padding: 0 8px; border: 1px solid rgba(47,107,255,0.2); border-radius: 6px; background: rgba(47,107,255,0.06); color: var(--primary-strong); font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.service-copy-btn:hover { background: rgba(47,107,255,0.12); }
.service-copy-btn.copied { background: #52c41a; border-color: #52c41a; color: #fff; }
.service-action { display: inline-flex; min-width: 44px; min-height: 30px; align-items: center; justify-content: center; padding: 4px 10px; border: 1px solid rgba(47,107,255,0.2); border-radius: 9px; background: var(--panel); color: var(--primary-strong); font-size: 12px; font-style: normal; font-weight: 600; flex: 0 0 auto; align-self: center; }

/* ===== 公告弹窗 ===== */
.modal-mask { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
.modal-mask[hidden] { display: none !important; }
.modal-mask .modal-backdrop { position: absolute; inset: 0; background: rgba(5,15,32,0.67); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal-card { position: relative; width: min(520px, 100%); max-height: min(82vh, 760px); overflow: auto; border: 1px solid rgba(117,158,255,0.42); border-radius: 26px; background: linear-gradient(145deg, rgba(255,255,255,0.99), rgba(242,247,255,0.98)); box-shadow: 0 28px 80px rgba(4,20,52,0.36); overscroll-behavior: contain; }
.modal-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--card-top-line); }
.modal-close { position: absolute; top: 13px; right: 13px; z-index: 2; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(123,151,196,0.28); border-radius: 50%; color: #fff; background: rgba(9,27,57,0.72); box-shadow: 0 8px 24px rgba(5,18,42,0.2); font: 500 28px/1 system-ui, sans-serif; cursor: pointer; }
.modal-close:hover { background: var(--primary); transform: translateY(-1px); }
.modal-body { display: grid; gap: 13px; padding: 26px 30px 30px; text-align: center; }
.modal-eyebrow { justify-self: center; padding: 6px 12px; border: 1px solid rgba(48,108,255,0.17); border-radius: 999px; color: var(--primary); background: rgba(47,105,239,0.08); font-size: 12px; font-weight: 850; letter-spacing: 0.12em; }
.modal-body h2 { margin: 0; font-size: clamp(24px,4vw,34px); line-height: 1.25; overflow-wrap: anywhere; }
.modal-body p { margin: 0; font-size: 16px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); }
.modal-ok { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; margin-top: 4px; padding: 0 24px; border-radius: 15px; color: #fff; background: var(--tab-active-bg); box-shadow: 0 12px 28px rgba(43,100,239,0.28); font-size: 16px; font-weight: 850; border: none; cursor: pointer; }
.modal-ok:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* Toast */
.toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.85); color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 14px; z-index: 99999; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.toast.show { opacity: 1; }

/* ===== 手机端自适应 ===== */
@media (max-width: 768px) {
  header { width: 100%; margin: 0 auto 8px; border-width: 0 0 1px; border-radius: 0; }
  .nav { min-height: 54px; padding: 9px 14px; }
  .brand-logo { max-width: 155px; height: 35px; }
  .carousel { padding: 0 10px; }
  .carousel-wrap { border-radius: 14px; }
  .nav-section { margin: 6px 10px 0; padding: 8px; }
  .category-buttons { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; }
  .category-button { min-height: 36px; padding: 6px 8px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.1; gap: 4px; }
  .category-button[data-span="2"] { min-height: 36px; font-size: 14px; }
  .category-button::before { width: 18px; height: 18px; font-size: 9px; border-radius: 6px; flex: 0 0 18px; }
  .pk16-category-title { margin: 20px 14px 14px; font-size: 23px; }
}
@media (max-width: 420px) { .category-buttons { gap: 6px; } .category-button { font-size: 13px; } .category-button[data-span="2"] { font-size: 13px; } }
@media (max-width: 600px) {
  .card-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
  .card { grid-template-columns: minmax(0,1fr); grid-template-areas: "avatar" "meta" "cta"; justify-items: center; gap: 5px; min-width: 0; min-height: 122px; padding: 8px 5px 6px; border-radius: 12px; }
  .card .avatar { width: 44px; height: 44px; }
  .card .meta { width: 100%; align-items: center; text-align: center; }
  .card .title { width: 100%; font-size: 13px; white-space: nowrap; }
  .card .desc, .card .rating { display: none; }
  .card .go { width: 100%; min-height: 28px; margin: 0; padding: 3px; border-radius: 8px; font-size: 10px; }
  .card-rec-badge { top: 4px; right: 4px; min-height: 16px; padding: 1px 5px; border-radius: 4px 9px 4px 9px; font-size: 9px; }
  .service-float-btn { right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .service-panel { right: 16px; width: calc(100vw - 32px); max-width: 300px; }
  .iframe-frame-shell { min-height: 600px; border-radius: 12px; }
  .iframe-section { padding: 0 8px; }
}
@media (max-width: 820px) { .common-tools-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) {
  .common-tools-panel { padding: 0 8px 22px; }
  .common-tools-heading { align-items: flex-start; }
  .common-tools-heading p { max-width: 240px; font-size: 12px; }
  .common-tools-group { padding: 12px; border-radius: 15px; }
  .common-tools-group-head { display: block; }
  .common-tools-group-head p { margin-top: 4px; font-size: 12px; }
  .common-tools-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .common-tool-card { grid-template-columns: 38px minmax(0,1fr); gap: 8px; padding: 10px; }
  .common-tool-mark { width: 38px; height: 38px; border-radius: 11px; font-size: 12px; }
  .common-tool-copy strong { font-size: 13px; }
  .common-tool-copy span { font-size: 10px; }
  .common-tool-download { min-height: 32px; font-size: 12px; }
  .common-tools-warning { display: block; font-size: 12px; }
  .common-tools-warning strong { display: block; margin-bottom: 3px; }
}

@media (min-width: 769px) {
  .card-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; padding: 0 14px; }
  .common-tools-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .page-shell { max-width: 1180px; }
  header { width: min(1180px, calc(100% - 28px)); }
  .carousel { max-width: 1180px; }
  .nav-section { max-width: min(1180px, calc(100% - 28px)); margin: 10px auto; }
  .category-buttons { gap: 10px; }
  .card { min-height: 104px; padding: 16px; }
}
.slides{will-change:transform}

/* 客服浮层：去掉浏览器默认 button 样式，保证和源站胶囊一致 */
.service-float-btn {
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  margin: 0;
  overflow: visible;
  line-height: 1.15;
}
.service-float-btn .headsetIcon {
  box-sizing: content-box;
}