/* ============================================================
   chaai.cc · Apple HIG-style
   - Aurora ambient bg
   - Glassmorphism cards (backdrop-filter)
   - Apple blue (#0071e3) primary
   - Squircle 24px / Pill buttons
   - System font stack · Big Type
   - Spring easing cubic-bezier(0.25, 1, 0.5, 1)
   ============================================================ */

:root {
  --c-bg:           #f5f5f7;
  --c-text:         #1d1d1f;
  --c-text-2:       #424245;
  --c-text-mute:    #86868b;

  --c-blue:         #0071e3;
  --c-blue-hover:   #0077ed;
  --c-blue-pale:    #e8f1fc;

  --c-line:         rgba(0, 0, 0, 0.06);
  --c-line-strong:  rgba(0, 0, 0, 0.10);

  --c-glass-bg:     rgba(255, 255, 255, 0.78);
  --c-glass-stroke: rgba(255, 255, 255, 0.6);
  --c-glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);

  --c-input-bg:     #f2f2f7;

  --c-success:      #30d158;
  --c-warning:      #ff9500;
  --c-danger:       #ff3b30;
  --c-purple:       #af52de;
  --c-teal:         #5ac8fa;
  --c-orange:       #ff9f0a;

  --r-card:    24px;
  --r-input:   12px;
  --r-pill:    980px;

  --ease-spring: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-snappy: cubic-bezier(0.4, 0, 0.2, 1);

  --gap:         24px;
  --pad-card:    24px;
  --maxw:        1120px;
}

/* ============ Reset / Base ============ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family:
    -apple-system, BlinkMacSystemFont,
    "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", "PingFang SC",
    "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01";
  font-variant-ligatures: common-ligatures;
  letter-spacing: -0.005em;
  line-height: 1.5;
  margin: 0;
  min-height: 100vh;
  position: relative;
  /* 全局抑制 iOS Safari 蓝色 tap 高亮，自定义 :active 反馈 */
  -webkit-tap-highlight-color: transparent;
  /* 改善 iOS 横向滑动时的体验 */
  overscroll-behavior-y: none;
}

/* 所有按钮、链接默认抑制点击高亮 + 启用 manipulation（防 iOS 双击缩放延迟） */
button, a, [role="button"], input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}
button, a[role="button"], [data-action] {
  touch-action: manipulation;
}

::selection { background: var(--c-blue); color: #fff; }

a { color: var(--c-blue); text-decoration: none; transition: color .2s var(--ease-spring); }
a:hover { color: var(--c-blue-hover); text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--c-text);
}

code, .font-monospace {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-feature-settings: "ss01", "ss02";
}

.x-tiny  { font-size: .72rem; }
.x-small { font-size: .82rem; }

/* ============ Aurora 背景 ============ */

.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(96px);
  opacity: .9;
  will-change: transform;
}
.orb-1 {
  width: 60vw; height: 60vw;
  top: -20vw; left: -10vw;
  background: radial-gradient(circle, rgba(162, 210, 255, 0.55) 0%, rgba(162, 210, 255, 0) 70%);
  animation: orb-float-1 22s ease-in-out infinite;
}
.orb-2 {
  width: 55vw; height: 55vw;
  bottom: -20vw; right: -15vw;
  background: radial-gradient(circle, rgba(200, 180, 255, 0.45) 0%, rgba(200, 180, 255, 0) 70%);
  animation: orb-float-2 26s ease-in-out infinite;
}
.orb-3 {
  width: 40vw; height: 40vw;
  top: 30vh; left: 40vw;
  background: radial-gradient(circle, rgba(255, 200, 220, 0.35) 0%, rgba(255, 200, 220, 0) 70%);
  animation: orb-float-3 30s ease-in-out infinite;
}

@keyframes orb-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, -30px) scale(1.06); }
}
@keyframes orb-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-50px, 40px) scale(1.08); }
}
@keyframes orb-float-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-30px, -50px) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; }
}

/* ============ 顶部导航（毛玻璃） ============ */

.topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--c-line);
}
.topnav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 24px;
  /* iPhone 横屏刘海安全区 */
  padding-left:  max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 16px;
}
.brand {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-text);
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.brand:hover { color: var(--c-text); }
.brand-mark {
  display: inline-block;
  width: 28px; height: 28px;
  border-radius: 8px;
  object-fit: cover;
  vertical-align: middle;
  box-shadow: 0 1px 4px rgba(0,113,227,.18);
}
.nav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.nav-actions-mobile { display: none; }
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 16px;
  min-width: 180px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  padding: 8px;
  z-index: 200;
  animation: dropdown-in .2s var(--ease-spring) both;
}
.nav-dropdown.open { display: block; }
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--c-text);
  border-radius: 10px;
  transition: background .15s;
}
.nav-dropdown a:hover { background: rgba(0, 0, 0, 0.04); color: var(--c-text); }
.nav-dropdown a i { font-size: 1.05rem; color: var(--c-text-mute); width: 20px; text-align: center; }
.nav-dropdown-divider {
  height: 1px;
  background: var(--c-line);
  margin: 6px 8px;
}
.topnav-inner { position: relative; }

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--r-pill);
  font-size: .9rem;
  color: var(--c-text-2);
}
.avatar {
  width: 26px; height: 26px;
  background: linear-gradient(135deg, #0071e3, #af52de);
  color: #fff;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* ============ Layout 容器 ============ */

.page-container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 32px 24px 16px;
  /* iPhone 横屏刘海 / 底部 home indicator 安全区 */
  padding-left:   max(24px, env(safe-area-inset-left));
  padding-right:  max(24px, env(safe-area-inset-right));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.page-footer {
  text-align: center;
  color: var(--c-text-mute);
  font-size: .85rem;
  padding: 32px 16px 48px;
}

/* ============ Bento 卡片（毛玻璃） ============ */

.card,
.bento {
  background: var(--c-glass-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-radius: var(--r-card);
  border: 1px solid var(--c-glass-stroke);
  box-shadow: var(--c-glass-shadow);
  padding: 0;
  animation: fade-in-up 0.7s var(--ease-spring) both;
}
.card .card-body { padding: var(--pad-card); }
.card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--c-line);
  padding: 16px 24px;
  font-weight: 600;
  border-radius: var(--r-card) var(--r-card) 0 0;
}

/* 入场序列：第 N 个卡片延迟 */
.card:nth-of-type(2)  { animation-delay: 0.06s; }
.card:nth-of-type(3)  { animation-delay: 0.12s; }
.card:nth-of-type(4)  { animation-delay: 0.18s; }
.card:nth-of-type(5)  { animation-delay: 0.24s; }
.card:nth-of-type(6)  { animation-delay: 0.30s; }

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============ 按钮 ============ */

.btn,
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  font-weight: 500;
  font-size: .9rem;
  line-height: 1.4;
  border: 0;
  border-radius: var(--r-input);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color .25s var(--ease-spring),
    color .25s var(--ease-spring),
    box-shadow .25s var(--ease-spring),
    transform .25s var(--ease-spring);
  text-decoration: none;
  white-space: nowrap;
}
.btn-pill { border-radius: var(--r-pill); padding: 7px 16px; font-size: .88rem; }
.btn:focus, .btn-pill:focus { outline: 0; }

.btn-primary,
.btn-pill.btn-primary {
  background: var(--c-blue);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 113, 227, 0.18);
}
.btn-primary:hover,
.btn-pill.btn-primary:hover {
  background: var(--c-blue-hover);
  color: #fff;
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 113, 227, 0.32);
}
.btn-primary:active { transform: scale(0.98); }

.btn-secondary,
.btn-pill.btn-secondary {
  background: rgba(0, 0, 0, 0.05);
  color: var(--c-text);
}
.btn-secondary:hover,
.btn-pill.btn-secondary:hover {
  background: rgba(0, 0, 0, 0.09);
  color: var(--c-text);
  transform: scale(1.02);
}

.btn-success {
  background: var(--c-success); color: #fff;
}
.btn-success:hover { background: #2ec24f; transform: scale(1.02); color: #fff; }
.btn-danger {
  background: var(--c-danger); color: #fff;
}
.btn-danger:hover { background: #e3342a; transform: scale(1.02); color: #fff; }
.btn-warning {
  background: var(--c-warning); color: #fff;
}
.btn-warning:hover { background: #e88800; transform: scale(1.02); color: #fff; }
.btn-outline-secondary {
  background: rgba(0, 0, 0, 0.04);
  color: var(--c-text);
}
.btn-outline-secondary:hover { background: rgba(0, 0, 0, 0.08); }

.btn-sm { padding: 5px 12px; font-size: .82rem; border-radius: 10px; }
.btn-lg { padding: 11px 26px; font-size: 1rem; border-radius: 14px; }

.btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; }

/* ============ 输入框 ============ */

.form-control,
.form-select {
  background: var(--c-input-bg);
  border: 1px solid transparent;
  border-radius: var(--r-input);
  padding: 10px 14px;
  font-size: .95rem;
  color: var(--c-text);
  transition:
    background-color .2s var(--ease-spring),
    border-color .2s var(--ease-spring),
    box-shadow .2s var(--ease-spring);
}
.form-control::placeholder { color: var(--c-text-mute); }
.form-control:focus,
.form-select:focus {
  background: #fff;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
  outline: 0;
}
textarea.form-control { resize: vertical; }

.form-label { font-weight: 600; color: var(--c-text); margin-bottom: 6px; }
.form-text  { color: var(--c-text-mute); font-size: .8rem; margin-top: 6px; }

/* input-group：让按钮右接输入框 */
.input-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group .btn:last-child {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  padding-left: 18px; padding-right: 18px;
}

/* ============ Alert / Badge ============ */

.glass-alert {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: 14px 18px;
}
.alert-success { background: #e6f7ec; color: #166534; border-color: #bbf7d0; }
.alert-danger  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.alert-warning { background: #fff7ed; color: #92400e; border-color: #fed7aa; }
.alert-info    { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }

.badge {
  font-weight: 600;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: .72rem;
  letter-spacing: 0;
}
.badge.bg-success { background: rgba(48, 209, 88, 0.15) !important; color: #1d7c2c !important; }
.badge.bg-warning { background: rgba(255, 149, 0, 0.18) !important; color: #8d4f00 !important; }
.badge.bg-danger  { background: rgba(255, 59, 48, 0.15) !important; color: #9a221b !important; }
.badge.bg-info    { background: rgba(90, 200, 250, 0.20) !important; color: #075778 !important; }
.badge.bg-primary { background: rgba(0, 113, 227, 0.15) !important; color: #00488f !important; }
.badge.bg-secondary { background: rgba(0, 0, 0, 0.08) !important; color: #424245 !important; }
.badge.bg-dark    { background: rgba(29, 29, 31, 0.85) !important; color: #fff !important; }
.badge.bg-light   { background: #f5f5f7 !important; color: #424245 !important; border: 1px solid var(--c-line); }

/* ============ 查询头部（融入订阅信息卡片） ============ */

/* 主区行级容器（直接坐在页面背景上，无外层卡片）
   默认就让查询输入区垂直水平都居中到视口正中（Google 首页效果）
   只有当 .dashboard-results（查到结果后由 JS 添加）时才取消居中 */
.dashboard-row {
  min-height: calc(100vh - 180px);
  align-items: center;
  transition: min-height .3s var(--ease-spring);
}
.dashboard-row.dashboard-results {
  min-height: 0;
  align-items: flex-start;
}
/* 初始空态那个搜索图标 + 提示文字永久隐藏（form 居中已是最清晰提示） */
.dashboard-row .result-empty-init { display: none; }
.query-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.query-card .card-body { padding: 0; }

.query-head {
  max-width: 580px;
  margin: 0 auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.query-head.query-head-hidden { display: none; }
/* 一旦取消居中（已查到结果），form 不再撑顶，给 32px 下间距留给结果区 */
.dashboard-row.dashboard-results .query-head { margin: 0 auto 32px; }

/* ── hero（查询入口上方的横版 logo，PNG 透明镂空，跟输入框等宽对齐） ── */
.query-hero {
  max-width: 580px;
  margin: 8px auto 18px;
  padding: 0;
  text-align: center;
  animation: hero-in .55s cubic-bezier(.22,.9,.32,1) both;
}
.query-hero-banner {
  display: block;
  width: 100%;
  max-width: 580px;
  height: auto;
  margin: 0 auto;
  user-select: none;
  -webkit-user-drag: none;
}

/* hero 区 Telegram 入口：banner 正下方的高显眼 CTA */
.query-hero-tg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, #0088cc, #006699);
  color: #fff !important;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 136, 204, 0.28);
  transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-spring);
  animation: tg-pulse 2.4s ease-in-out 1.2s infinite;
}
.query-hero-tg:hover {
  color: #fff !important;
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 22px rgba(0, 136, 204, 0.42);
  animation-play-state: paused;
}
.query-hero-tg:active { transform: scale(0.98); }
.query-hero-tg i.bi-telegram { font-size: 1.15rem; line-height: 1; }
.query-hero-tg i.bi-arrow-right {
  font-size: .9rem;
  line-height: 1;
  opacity: .85;
  transition: transform .25s var(--ease-spring);
}
.query-hero-tg:hover i.bi-arrow-right { transform: translateX(3px); }

@keyframes tg-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(0, 136, 204, 0.28); }
  50%      { box-shadow: 0 4px 14px rgba(0, 136, 204, 0.28), 0 0 0 6px rgba(0, 136, 204, 0.10); }
}
@media (prefers-reduced-motion: reduce) {
  .query-hero-tg { animation: none; }
}

@keyframes hero-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 已查到结果后：banner 图让位给结果区，但 TG 入口保留为紧凑模式 */
.dashboard-row.dashboard-results .query-hero {
  margin: 0 auto 18px;
  animation: none;
}
.dashboard-row.dashboard-results .query-hero-banner { display: none; }
.dashboard-row.dashboard-results .query-hero-tg {
  margin-top: 0;
  padding: 7px 16px;
  font-size: .85rem;
  animation: none;
  box-shadow: 0 2px 8px rgba(0, 136, 204, 0.22);
}
.dashboard-row.dashboard-results .query-hero-tg i.bi-telegram { font-size: 1rem; }

@media (max-width: 640px) {
  .query-hero        { max-width: 92vw; margin: 4px auto 12px; }
  .query-hero-banner { max-width: 92vw; }
  .query-hero-tg     { margin-top: 10px; padding: 8px 16px; font-size: .85rem; }
  .query-hero-tg i.bi-telegram { font-size: 1.05rem; }
}

/* ── 查询回执落款（截图传播友好，不刻意水印）── */
.result-watermark {
  position: relative;
  margin: 32px auto 4px;
  padding: 18px 16px 6px;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  opacity: 0;
  transform: translateY(6px);
  animation: watermark-in .5s var(--ease-spring) .15s forwards;
}
.result-watermark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 113, 227, 0.28) 30%,
    rgba(94, 92, 230, 0.32) 50%,
    rgba(175, 82, 222, 0.28) 70%,
    transparent 100%);
}
@keyframes watermark-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .result-watermark { opacity: 1; transform: none; animation: none; }
}
.result-watermark-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: .94rem;
  font-weight: 600;
  color: var(--c-text-2, #424245);
  flex-wrap: wrap;
}
.result-watermark-logo {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: cover;
  -webkit-user-drag: none;
  box-shadow: 0 2px 6px rgba(0, 113, 227, 0.22);
}
.result-watermark-brand {
  background: linear-gradient(135deg, #0071e3 0%, #5e5ce6 60%, #af52de 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1rem;
}
.result-watermark-sep {
  color: var(--c-text-mute, #86868b);
  font-weight: 400;
  margin: 0 -2px;
}
.result-watermark-tag {
  color: var(--c-text-mute, #86868b);
  font-weight: 500;
  font-size: .86rem;
  letter-spacing: .01em;
}
.result-watermark-meta {
  margin-top: 6px;
  font-size: .76rem;
  color: var(--c-text-mute, #86868b);
  font-family: -apple-system, ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.result-watermark-dot {
  display: inline-block;
  margin: 0 8px;
  opacity: .5;
}
@media (max-width: 480px) {
  .result-watermark        { padding: 14px 12px 2px; }
  .result-watermark-line   { font-size: .85rem; }
  .result-watermark-brand  { font-size: .92rem; }
  .result-watermark-tag    { font-size: .78rem; }
  .result-watermark-meta   { font-size: .7rem; }
  .result-watermark-meta br { display: block; }
}

/* 查询完成后顶部小工具条（再查一个 + 当前 UUID） */
.result-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}
.result-toolbar-redo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0, 113, 227, 0.10);
  color: var(--c-blue);
  cursor: pointer;
  border: 0;
  font-size: .85rem;
  font-weight: 600;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--ease-spring), transform .2s var(--ease-spring);
}
.result-toolbar-redo:hover {
  background: rgba(0, 113, 227, 0.18);
  transform: translateY(-1px);
}
.result-toolbar-redo:active { transform: translateY(0); }
.result-toolbar-redo:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.30);
}

/* 分享按钮：跟"再查一个"同档形态，但用绿色暗示"生成动作" */
.result-toolbar-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(48, 209, 88, 0.12), rgba(48, 209, 88, 0.18));
  color: color-mix(in srgb, var(--c-success) 80%, var(--c-text));
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--c-success) 24%, transparent);
  font-size: .85rem;
  font-weight: 600;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color .2s var(--ease-spring),
    transform .2s var(--ease-spring),
    box-shadow .2s var(--ease-spring);
}
.result-toolbar-share:hover {
  background: linear-gradient(135deg, rgba(48, 209, 88, 0.20), rgba(48, 209, 88, 0.28));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(48, 209, 88, 0.18);
}
.result-toolbar-share:active { transform: translateY(0); }
.result-toolbar-share:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(48, 209, 88, 0.32);
}
.result-toolbar-share-busy { opacity: .7; cursor: progress; }
.result-toolbar-share-done {
  background: var(--c-success) !important;
  color: #fff !important;
  border-color: var(--c-success) !important;
}

/* 分享按钮 + 问号说明 包装 */
.result-toolbar-share-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 1;
}
/* hover/focus 时把整个 wrap 提到最顶——盖住 sticky topnav (z:100) */
.result-toolbar-share-wrap:hover,
.result-toolbar-share-wrap:focus-within {
  z-index: 1001;
}

/* 问号图标按钮：紧贴分享按钮的"说明" */
.share-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 113, 227, 0.08);
  color: color-mix(in srgb, var(--c-blue) 70%, var(--c-text-mute));
  cursor: help;
  font-size: .92rem;
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color .2s var(--ease-spring),
    color .2s var(--ease-spring),
    transform .2s var(--ease-spring);
}
.share-help:hover,
.share-help:focus-visible {
  background: rgba(0, 113, 227, 0.18);
  color: var(--c-blue);
  outline: none;
  transform: translateY(-1px);
}

/* tooltip 气泡：hover / focus 显示，往按钮"下方"弹出
   —— 上方是 sticky topnav (backdrop-filter blur, z:100)，往上弹会落进 topnav 视觉区域 */
.share-help::before {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: 260px;
  max-width: 80vw;
  padding: 12px 14px;
  background: rgba(28, 28, 30, 0.96);
  color: #fff;
  font-size: .76rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  white-space: pre-line;
  text-align: left;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  z-index: 1002;
  transition: opacity .2s var(--ease-spring), transform .2s var(--ease-spring);
}
/* 小三角：朝上指向问号按钮 */
.share-help::after {
  content: '';
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: rgba(28, 28, 30, 0.96);
  opacity: 0;
  pointer-events: none;
  z-index: 1002;
  transition: opacity .2s var(--ease-spring);
}
.share-help:hover::before,
.share-help:hover::after,
.share-help:focus::before,
.share-help:focus::after,
.share-help:focus-visible::before,
.share-help:focus-visible::after {
  opacity: 1;
  pointer-events: auto;
}
.share-help:hover::before,
.share-help:focus::before,
.share-help:focus-visible::before {
  transform: translateX(-50%) translateY(0);
}

/* 窄屏：tooltip 锚点偏右避免溢出（问号在 toolbar 末端） */
@media (max-width: 480px) {
  .share-help::before {
    width: min(260px, 80vw);
    left: auto;
    right: -8px;
    transform: translateY(-4px);
  }
  .share-help::after {
    left: auto;
    right: 4px;
    transform: none;
  }
  .share-help:hover::before,
  .share-help:focus::before,
  .share-help:focus-visible::before {
    transform: translateY(0);
  }
}
.result-toolbar-uuid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  color: var(--c-text-mute);
  letter-spacing: 0;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.result-toolbar-hist {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .72rem;
  color: var(--c-text-mute);
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
}

/* ============ 查询完成后底部邀请提示行（不刻意） ============ */
.invite-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 4px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg,
    rgba(0, 113, 227, 0.05),
    rgba(48, 209, 88, 0.04)
  );
  border: 1px solid rgba(0, 113, 227, 0.10);
  font-size: .82rem;
  color: var(--c-text-2);
  flex-wrap: wrap;
}
.invite-hint-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, #0a84ff, #5ac8fa);
  color: #fff;
  font-size: .9rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(10, 132, 255, 0.20);
}
.invite-hint-text { letter-spacing: 0; }
.invite-hint-text b {
  color: var(--c-blue);
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.invite-hint-url {
  flex: 1;
  min-width: 0;
  font-size: .76rem;
  color: var(--c-text-mute);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: rgba(0, 0, 0, 0.03);
  padding: 4px 10px;
  border-radius: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.invite-hint-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;
  padding: 7px 14px;
  border-radius: 9px;
  background: var(--c-blue);
  color: #fff;
  border: 0;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--ease-spring), transform .2s var(--ease-spring);
}
.invite-hint-copy:hover {
  background: var(--c-blue-hover);
  transform: translateY(-1px);
}
.invite-hint-copy:active { transform: translateY(0); }
.invite-hint-copy.invite-hint-copy-done {
  background: var(--c-success);
}

@media (max-width: 640px) {
  .invite-hint { gap: 8px; }
  .invite-hint-url { width: 100%; flex: 0 0 100%; }
}
.query-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.hero-input {
  flex: 1;
  /* 桌面端用更小字号更精致；触屏端通过下方媒体查询强制 16px 防 iOS zoom */
  font-size: 14px;
  padding: 13px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--c-line);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 0 rgba(0, 0, 0, 0.02) inset;
  letter-spacing: 0;
}
.hero-input:focus-visible {
  background: #fff;
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: 0 4px 14px rgba(0, 113, 227, 0.12), 0 0 0 4px rgba(0, 113, 227, 0.10);
  outline: none;
}
/* placeholder 更小、更淡 —— 提示性而非主体（不影响 iOS focus zoom 判定，那只看 input.font-size） */
.hero-input::placeholder {
  font-size: 12.5px;
  color: rgba(60, 60, 67, 0.42);
  letter-spacing: 0;
  font-weight: 400;
}
.hero-input::-webkit-input-placeholder {
  font-size: 12.5px;
  color: rgba(60, 60, 67, 0.42);
}
/* 触屏 / 移动端：必须 ≥ 16px 否则 iOS Safari focus 时自动放大整页 */
@media (hover: none) and (pointer: coarse), (max-width: 480px) {
  .hero-input              { font-size: 16px; padding: 14px 18px; }
  .hero-input::placeholder { font-size: 14px; }
  .hero-input::-webkit-input-placeholder { font-size: 14px; }
}
.hero-btn {
  padding: 14px 28px;
  font-size: .95rem;
  font-weight: 600;
  border-radius: 14px;
  min-width: 108px;
  min-height: 48px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.query-meta {
  display: flex;
  align-items: center;
  margin-top: 10px;
  font-size: .78rem;
  color: var(--c-text-mute);
  flex-wrap: wrap;
  gap: 8px;
}
.query-spacer { flex: 1; }

.quota-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(0, 113, 227, 0.10);
  color: var(--c-blue);
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: 0;
}
.quota-pill strong { font-size: .88rem; margin: 0 2px; font-weight: 700; }
.quota-pill .quota-sub { color: var(--c-blue); opacity: .65; font-weight: 400; }
.quota-pill.quota-unlimited {
  background: linear-gradient(135deg, rgba(48, 209, 88, 0.14), rgba(0, 113, 227, 0.14));
  color: #0a6027;
}
.quota-pill.quota-unlimited i { font-size: .9rem; }
.quota-pill.quota-unlimited small { opacity: .7; font-weight: 400; margin-left: 2px; }

.extract-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--c-blue);
  font-weight: 600;
  background: rgba(0, 113, 227, 0.08);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  animation: hint-pop 0.4s var(--ease-spring);
}
@keyframes hint-pop {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* ============ Loading 状态：自定义双环 spinner ============ */

.result-loading {
  text-align: center;
  padding: 56px 24px 64px;
  color: var(--c-text-mute);
}
.result-spinner {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
}
.result-spinner-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(0, 113, 227, 0.12);
  border-top-color: var(--c-blue);
  animation: result-spin 0.9s linear infinite;
}
.result-spinner-ring-alt {
  inset: 8px;
  border: 2px solid rgba(94, 92, 230, 0.10);
  border-bottom-color: #5e5ce6;
  animation-duration: 1.4s;
  animation-direction: reverse;
}
@keyframes result-spin {
  to { transform: rotate(360deg); }
}
.result-loading-text {
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-text);
  letter-spacing: -0.01em;
  transition: opacity .3s var(--ease-spring);
}
.result-loading-sub {
  margin-top: 4px;
  font-size: .8rem;
  color: var(--c-text-mute);
}
@media (prefers-reduced-motion: reduce) {
  .result-spinner-ring { animation-duration: 2s; }
}

/* 个人设置：账号小卡 */
.profile-account .profile-account-row {
  display: flex; align-items: center; gap: 14px;
}
.profile-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0071e3, #af52de);
  color: #fff;
  display: grid; place-items: center;
  font-size: 1.1rem; font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}
.profile-username {
  font-weight: 600; color: var(--c-text); font-size: .98rem;
}
.profile-meta {
  font-size: .76rem; color: var(--c-text-mute); margin-top: 2px;
}

/* 个人设置：查询历史 */
.profile-history-card { /* 不 sticky，让用户滚动 */ }
.profile-history-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 14px; border-bottom: 1px solid var(--c-line);
  margin-bottom: 8px;
}
.profile-history-head h6 {
  font-weight: 600; font-size: .96rem; color: var(--c-text); margin: 0;
}
.profile-history-count {
  font-size: .72rem; color: var(--c-text-mute);
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 10px; border-radius: 999px;
}
.profile-history-list {
  display: flex; flex-direction: column;
}
.profile-history-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--c-line);
  font-size: .85rem;
  color: var(--c-text);
  transition:
    background-color .15s var(--ease-spring),
    padding .15s var(--ease-spring);
}
.profile-history-row:hover {
  background: rgba(0, 113, 227, 0.04);
  padding-left: 10px;
  text-decoration: none;
}
.profile-history-row:last-child { border-bottom: 0; }
.profile-history-uuid {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .8rem; color: var(--c-text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-history-summary {
  font-size: .78rem; color: var(--c-text-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-history-time {
  font-size: .74rem; color: var(--c-text-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.profile-history-chev {
  color: var(--c-text-mute); opacity: .4;
  font-size: .78rem;
}

/* 主页右上角 个人设置 小入口 */
.query-profile-link {
  font-size: .76rem;
  color: var(--c-text-mute);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  transition:
    background-color .2s var(--ease-spring),
    color .2s var(--ease-spring);
  touch-action: manipulation;
}
.query-profile-link:hover {
  background: rgba(0, 113, 227, 0.10);
  color: var(--c-blue);
  text-decoration: none;
}
.query-profile-link i { font-size: .85rem; }

/* 错误态扩展（result-empty 已在前面定义） */
.result-empty-init { padding: 64px 24px 56px; }
.result-empty-init i {
  font-size: 2.6rem;
  display: inline-block;
  animation: empty-icon-float 4s ease-in-out infinite;
  background: linear-gradient(135deg, #0071e3, #5e5ce6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: .85;
}
@keyframes empty-icon-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.result-empty-error i { color: var(--c-danger); opacity: .8; font-size: 2.4rem; }
.result-empty-error > div:nth-of-type(1) {
  color: var(--c-text);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin-top: 6px;
}

/* ============ 智能错误卡片（renderError 升级版） ============ */
.result-error-card {
  position: relative;
  margin: 18px auto;
  max-width: 480px;
  padding: 22px 22px 18px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-danger) 4%, #fff) 0%,
    #fff 100%);
  border: 1px solid color-mix(in srgb, var(--c-danger) 18%, var(--c-line));
  border-radius: 18px;
  box-shadow:
    0 10px 26px rgba(255, 69, 58, 0.05),
    0 2px 6px rgba(0, 0, 0, 0.04);
  text-align: center;
  animation: error-card-in .45s cubic-bezier(.22,.9,.32,1) both;
}
/* 顶部细装饰条：橙→红→橙渐变 */
.result-error-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--c-danger) 60%, #FF9F0A) 0%,
    var(--c-danger) 50%,
    color-mix(in srgb, var(--c-danger) 60%, #FF9F0A) 100%);
}
@keyframes error-card-in {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 不同类型的色调微调（默认 danger，部分类型偏 warning） */
.result-error-card.result-error-rate,
.result-error-card.result-error-quota {
  background: linear-gradient(180deg,
    color-mix(in srgb, #FF9F0A 5%, #fff) 0%, #fff 100%);
  border-color: color-mix(in srgb, #FF9F0A 22%, var(--c-line));
  box-shadow: 0 12px 32px rgba(255, 159, 10, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
}
.result-error-card.result-error-rate::before,
.result-error-card.result-error-quota::before {
  background: linear-gradient(90deg,
    color-mix(in srgb, #FF9F0A 70%, #FFCC00) 0%,
    #FF9F0A 50%,
    color-mix(in srgb, #FF9F0A 70%, #FFCC00) 100%);
}
.result-error-card.result-error-rate .result-error-icon,
.result-error-card.result-error-quota .result-error-icon {
  background: radial-gradient(circle at 30% 30%,
    rgba(255, 159, 10, 0.22) 0%,
    rgba(255, 159, 10, 0.12) 100%);
  box-shadow: 0 6px 16px rgba(255, 159, 10, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.result-error-card.result-error-rate .result-error-icon i,
.result-error-card.result-error-quota .result-error-icon i {
  color: #B5570B;
}
.result-error-card.result-error-rate .result-error-tag,
.result-error-card.result-error-quota .result-error-tag {
  color: #B5570B;
  background: rgba(255, 159, 10, 0.10);
  border-color: rgba(255, 159, 10, 0.24);
}

/* 圆角图标 —— 紧凑版 */
.result-error-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 30%,
    color-mix(in srgb, var(--c-danger) 22%, #fff) 0%,
    color-mix(in srgb, var(--c-danger) 14%, #fff) 100%);
  border-radius: 14px;
  box-shadow:
    0 4px 12px color-mix(in srgb, var(--c-danger) 20%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.result-error-icon i {
  font-size: 1.4rem;
  color: var(--c-danger);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.06));
  animation: error-icon-pulse 2.4s ease-in-out infinite;
}
@keyframes error-icon-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .result-error-card  { animation: none; }
  .result-error-icon i { animation: none; }
}

/* 类型小标签 */
.result-error-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  padding: 2px 9px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-danger);
  background: color-mix(in srgb, var(--c-danger) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-danger) 22%, transparent);
  border-radius: 999px;
  text-transform: none;
}
.result-error-tag i { font-size: .76rem; }

.result-error-title {
  margin: 0 0 4px;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-text);
}

.result-error-desc {
  margin: 0 auto 12px;
  font-size: .80rem;
  line-height: 1.55;
  color: var(--c-text-mute);
  max-width: 380px;
}

/* 引导链接卡：format / auth 等给出 ChatGPT 官方接口入口 */
.result-error-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 12px;
  padding: 9px 12px 9px 14px;
  max-width: 420px;
  background: linear-gradient(135deg,
    rgba(0, 113, 227, 0.06),
    rgba(0, 113, 227, 0.10));
  border: 1px solid rgba(0, 113, 227, 0.22);
  border-radius: 12px;
  text-decoration: none;
  color: var(--c-text);
  text-align: left;
  transition:
    background-color .2s var(--ease-spring),
    border-color .2s var(--ease-spring),
    box-shadow .2s var(--ease-spring),
    transform .2s var(--ease-spring);
}
@media (hover: hover) and (pointer: fine) {
  .result-error-link:hover {
    background: linear-gradient(135deg,
      rgba(0, 113, 227, 0.10),
      rgba(0, 113, 227, 0.16));
    border-color: rgba(0, 113, 227, 0.36);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 113, 227, 0.14);
  }
}
.result-error-link:active { transform: translateY(0); }
.result-error-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.30);
}
.result-error-link > i:first-child {
  font-size: 1rem;
  color: var(--c-blue);
  flex-shrink: 0;
}
.result-error-link > i:last-child {
  font-size: 1.3rem;
  color: var(--c-blue);
  flex-shrink: 0;
  margin-left: auto;
  transition: transform .2s var(--ease-spring);
}
.result-error-link:hover > i:last-child { transform: translateX(2px); }
.result-error-link .link-textwrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.result-error-link .link-label {
  font-size: .66rem;
  color: var(--c-text-mute);
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.result-error-link .link-url {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .78rem;
  color: var(--c-blue);
  font-weight: 600;
  word-break: break-all;
  line-height: 1.3;
}

/* 原始服务器消息（generic 类型才显示） */
.result-error-rawmsg {
  margin: 0 auto 12px;
  padding: 8px 12px;
  max-width: 420px;
  font-size: .76rem;
  color: var(--c-text-mute);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  word-break: break-word;
  text-align: left;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* 提示列表 */
.result-error-tips {
  list-style: none;
  margin: 0 auto 14px;
  padding: 11px 13px;
  max-width: 420px;
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.result-error-tips li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .76rem;
  line-height: 1.45;
}
.result-error-tips li > i {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 1rem;
  color: var(--c-blue);
}
.result-error-tips li > div { min-width: 0; flex: 1; }
.result-error-tips strong {
  display: block;
  font-weight: 600;
  color: var(--c-text);
  font-size: .74rem;
  margin-bottom: 2px;
  letter-spacing: 0;
}
.result-error-tips code {
  display: block;
  padding: 3px 7px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .66rem;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 5px;
  color: var(--c-text-mute);
  word-break: break-all;
  border: 1px solid var(--c-line);
  letter-spacing: 0;
}

/* 操作按钮组 */
.result-error-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.result-error-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 9px 20px;
  background: var(--c-blue);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 113, 227, 0.24);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color .2s var(--ease-spring),
    box-shadow .2s var(--ease-spring),
    transform .2s var(--ease-spring);
}
@media (hover: hover) and (pointer: fine) {
  .result-error-retry:hover {
    background: var(--c-blue-hover);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 113, 227, 0.36);
    transform: translateY(-1px);
  }
}
.result-error-retry:active { transform: translateY(0); }
.result-error-retry:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.30);
}

.result-error-help {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: .72rem;
  color: var(--c-text-mute);
}
.result-error-help i { font-size: .85rem; color: #FF9F0A; opacity: .85; }

/* 移动端适配 */
@media (max-width: 480px) {
  .result-error-card    { padding: 18px 16px 16px; margin: 12px 4px; border-radius: 16px; }
  .result-error-card::before { left: 14px; right: 14px; }
  .result-error-icon    { width: 44px; height: 44px; border-radius: 12px; }
  .result-error-icon i  { font-size: 1.25rem; }
  .result-error-title   { font-size: .98rem; }
  .result-error-desc    { font-size: .76rem; margin-bottom: 10px; }
  .result-error-link    { padding: 8px 10px 8px 12px; }
  .result-error-link .link-url { font-size: .72rem; }
  .result-error-tips    { padding: 10px 12px; }
  .result-error-tips li { font-size: .72rem; gap: 7px; }
  .result-error-tips code { font-size: .62rem; }
  .result-error-rawmsg  { font-size: .72rem; }
  .result-error-retry   { width: 100%; min-height: 42px; padding: 10px 18px; font-size: .84rem; }
  .result-error-help    { font-size: .68rem; }
}
.result-empty-sub {
  margin-top: 4px;
  font-size: .82rem;
  color: var(--c-text-mute);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.result-empty-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 18px;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(0, 113, 227, 0.10);
  color: var(--c-blue);
  border: 0;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color .2s var(--ease-spring),
    transform .2s var(--ease-spring);
}
.result-empty-retry:hover {
  background: rgba(0, 113, 227, 0.18);
  transform: translateY(-1px);
}
.result-empty-retry:active { transform: translateY(0); }
.result-empty-retry:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.30);
}
@media (prefers-reduced-motion: reduce) {
  .result-empty-init i { animation: none; }
}

/* ============ History 列表 ============ */

.history-card { position: sticky; top: 84px; }
.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.history-head h6 { font-weight: 700; letter-spacing: -0.01em; }
.history-head h6 i { color: var(--c-blue); margin-right: 4px; }
.history-count {
  background: rgba(0, 0, 0, 0.05);
  color: var(--c-text-2);
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: .75rem;
  font-weight: 600;
}

.history-list {
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  scroll-behavior: smooth;
}
.history-list::-webkit-scrollbar { width: 6px; }
.history-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 3px; }

.history-item {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--c-text);
  margin-bottom: 4px;
  border: 1px solid transparent;
  transition:
    background-color .2s var(--ease-spring),
    border-color .2s var(--ease-spring),
    transform .2s var(--ease-spring);
  cursor: pointer;
  touch-action: manipulation;
}
.history-item:hover {
  background: rgba(0, 113, 227, 0.06);
  color: var(--c-text);
  transform: translateX(2px);
}

.hist-uuid {
  font-size: .82rem;
  color: var(--c-text);
  font-weight: 600;
  letter-spacing: 0;
}
.hist-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  font-size: .72rem;
  color: var(--c-text-mute);
}
.hist-summary {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.status-success { background: var(--c-success); }
.status-dot.status-warning { background: var(--c-warning); }
.status-dot.status-danger  { background: var(--c-danger); }
.status-dot.status-mute    { background: #c7c7cc; }

/* ============ 结果展示 ============ */

.result-section { margin-top: 24px; }
.result-section:first-of-type { margin-top: 8px; }

.section-title {
  margin: 0 0 12px;
  font-weight: 600;
  font-size: .92rem;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
}
.section-title i { color: var(--c-text-mute); }

/* 顶部状态横幅 */
.banner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  border-radius: var(--r-card);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--c-glass-stroke);
}
.banner-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  color: #fff;
  flex-shrink: 0;
}
.banner-text { flex: 1; }
.banner-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--c-text); }
.banner-desc  { font-size: .92rem; margin-top: 4px; color: var(--c-text-2); }

.banner-success   { background: rgba(48, 209, 88, 0.10); }
.banner-success   .banner-icon { background: linear-gradient(135deg, #30d158, #5ac8fa); }
.banner-warning   { background: rgba(255, 149, 0, 0.10); }
.banner-warning   .banner-icon { background: linear-gradient(135deg, #ff9500, #ffcc00); }
.banner-danger    { background: rgba(255, 59, 48, 0.10); }
.banner-danger    .banner-icon { background: linear-gradient(135deg, #ff3b30, #ff2d55); }
.banner-secondary { background: rgba(0, 0, 0, 0.04); }
.banner-secondary .banner-icon { background: linear-gradient(135deg, #8e8e93, #aeaeb2); }

/* 权益卡片 */
.ent-card {
  border-radius: 16px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--c-glass-stroke);
  height: 100%;
  position: relative;
  overflow: hidden;
  transition:
    border-color .3s var(--ease-spring),
    box-shadow .3s var(--ease-spring),
    transform .3s var(--ease-spring);
}
.ent-card:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}
.ent-card .ent-icon-bg {
  position: absolute;
  right: -16px; top: -16px;
  width: 64px; height: 64px;
  border-radius: 16px;
  opacity: .14;
}
.ent-card.accent-plus    .ent-icon-bg { background: linear-gradient(135deg, #30d158, #5ac8fa); }
.ent-card.accent-pro     .ent-icon-bg { background: linear-gradient(135deg, #F1D77F, #B8860B); }
.ent-card.accent-prolite .ent-icon-bg { background: linear-gradient(135deg, #5ac8fa, #0071e3); }
.ent-card.accent-go      .ent-icon-bg { background: linear-gradient(135deg, #ff9500, #ffcc00); }
.ent-card.accent-other   .ent-icon-bg { background: linear-gradient(135deg, #8e8e93, #aeaeb2); }

.ent-active::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 4px 0 0 4px;
}
.ent-card.accent-plus.ent-active::after    { background: var(--c-success); }
.ent-card.accent-pro.ent-active::after     { background: #DAA520; }
.ent-card.accent-prolite.ent-active::after { background: var(--c-teal); }
.ent-card.accent-go.ent-active::after      { background: var(--c-orange); }
.ent-card.accent-other.ent-active::after   { background: var(--c-text-mute); }

.ent-expired { opacity: .55; }
.ent-name {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 6px;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}
.ent-active .ent-name i  { color: var(--c-success); }
.ent-expired .ent-name i { color: var(--c-text-mute); }
.ent-left {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}
.ent-exp {
  font-size: .76rem;
  color: var(--c-text-mute);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  position: relative;
  z-index: 1;
}

/* 渠道徽章 */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--c-line);
}
.store-badge i { font-size: .85rem; }
.store-badge.store-google { background: rgba(48, 209, 88, 0.10); color: #1d7c2c; border-color: rgba(48, 209, 88, 0.25); }
.store-badge.store-ios    { background: rgba(0, 0, 0, 0.04); color: var(--c-text); }
.store-badge.store-stripe { background: rgba(0, 113, 227, 0.10); color: #00488f; border-color: rgba(0, 113, 227, 0.25); }
.store-badge.store-amazon { background: rgba(255, 149, 0, 0.12); color: #8d4f00; border-color: rgba(255, 149, 0, 0.25); }
.store-badge.store-other  { background: rgba(0, 0, 0, 0.04); color: var(--c-text-2); }

/* ============ 平台徽章（iOS / Android / Stripe / Amazon / Web ...） ============ */
.pf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 9px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.4;
}
.pf-badge i { font-size: .92rem; }
.pf-ios     {
  background: linear-gradient(135deg, #1FB6FF 0%, #0064E0 100%);
  color: #fff;
}
.pf-android {
  background: linear-gradient(90deg,
    #4285F4 0%,
    #EA4335 34%,
    #FBBC04 67%,
    #34A853 100%);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
  border-color: rgba(0, 0, 0, 0.06);
}
.pf-stripe  { background: #635bff; color: #fff; }
.pf-amazon  { background: #ff9900; color: #1d1d1f; }
.pf-web     { background: #0071e3; color: #fff; }
.pf-promo   { background: rgba(90, 200, 250, .18); color: #075778; border-color: rgba(90, 200, 250, .35); }
.pf-other   { background: #86868b; color: #fff; }

/* ============ 套餐徽章（Plus / Pro Lite / Pro / Go） ============ */
.tier-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 9px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
  border: 1px solid;
  line-height: 1.4;
}
.tier-plus    { background: rgba(48, 209, 88, .14);  color: #0a6027; border-color: rgba(48, 209, 88, .35); }
.tier-pro     {
  background: linear-gradient(135deg, rgba(241, 215, 127, .25), rgba(184, 134, 11, .15));
  color: #8B6508;
  border-color: rgba(218, 165, 32, .45);
  font-weight: 700;
}
.tier-prolite { background: rgba(90, 200, 250, .18); color: #075778; border-color: rgba(90, 200, 250, .40); }
.tier-go      { background: rgba(255, 159, 10, .14); color: #8d4f00; border-color: rgba(255, 159, 10, .35); }
.tier-other   { background: rgba(0, 0, 0, .05);      color: #424245; border-color: rgba(0, 0, 0, .10); }

.trial-badge {
  background: rgba(0, 113, 227, 0.12);
  color: var(--c-blue);
  border: 0;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 600;
}

/* 历史标签 + 空状态（订阅记录直显方案） */
.hist-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  color: var(--c-text-mute);
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
  margin-bottom: 12px;
}
.result-empty {
  text-align: center;
  padding: 56px 24px 48px;
  color: var(--c-text-mute);
}
.result-empty i {
  display: block;
  font-size: 2.4rem;
  margin-bottom: 10px;
  color: var(--c-text-mute);
  opacity: .5;
}
.result-empty > div { font-size: .92rem; }

/* 段标题 */
.section-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: .72rem;
  font-weight: 500;
  color: var(--c-text-mute);
  background: rgba(0, 0, 0, 0.05);
  border-radius: 999px;
  letter-spacing: 0;
}
.section-title-sub {
  font-size: .82rem;
  font-weight: 500;
  color: var(--c-text-mute);
  letter-spacing: 0;
  margin: 18px 0 10px;
  text-transform: none;
}
.section-title-sub::before { display: none; }

/* ============================================================
   订阅记录（横向长方形 · 每行 1 个 · 左中右三段）
   ============================================================ */
.sub-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sub-item {
  --tier-color:      #8e8e93;
  --tier-color-soft: rgba(0, 0, 0, 0.04);

  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 16px 20px 16px 22px;
  border-radius: 16px;
  border: 1px solid var(--c-line);
  background:
    radial-gradient(120% 240% at 100% 50%, var(--tier-color-soft) 0%, transparent 55%),
    linear-gradient(180deg, #ffffff, #fcfcfd);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 2px 8px rgba(0, 0, 0, 0.04);
  opacity: 0;
  transform: translateY(8px);
  animation: sub-item-in .42s var(--ease-spring) forwards;
  transition:
    border-color .25s var(--ease-spring),
    box-shadow .25s var(--ease-spring),
    transform .25s var(--ease-spring);
}
@keyframes sub-item-in {
  to { opacity: 1; transform: translateY(0); }
}
.sub-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tier-color) 80%, white),
    var(--tier-color),
    color-mix(in srgb, var(--tier-color) 70%, black));
  box-shadow: 0 0 12px color-mix(in srgb, var(--tier-color) 35%, transparent);
}
.sub-item::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(40% 70% at 0% 0%, rgba(255, 255, 255, 0.35) 0%, transparent 60%);
  opacity: .9;
}
/* hover 抬升仅鼠标设备：避免触屏点击后 hover "粘住" */
@media (hover: hover) and (pointer: fine) {
  .sub-item:hover {
    border-color: color-mix(in srgb, var(--tier-color) 22%, var(--c-line));
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.6) inset,
      0 14px 28px color-mix(in srgb, var(--tier-color) 14%, rgba(0, 0, 0, 0.08));
    transform: translateY(-2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sub-item { opacity: 1; transform: none; animation: none; }
  .sub-item:hover { transform: none; }
}

/* 套餐主色变量（决定左条 / 进度条 / 套餐标题色 / 整卡微染） */
.sub-item.accent-plus    { --tier-color: #30b860; --tier-color-soft: rgba(48, 209, 88, 0.14); }
.sub-item.accent-pro     {
  --tier-color: #B8860B;
  --tier-color-soft: rgba(212, 175, 55, 0.14);
}
/* Pro 套餐：标题用金属鎏金渐变（高端感）；左条做立体金属反光 */
.sub-item.accent-pro .sub-card-tier {
  background: linear-gradient(135deg,
    #F1D77F 0%,
    #E0BB52 25%,
    #B8860B 50%,
    #DAA520 75%,
    #F1D77F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
  letter-spacing: 0;
  filter: drop-shadow(0 1px 0 rgba(184, 134, 11, 0.18));
}
.sub-item.accent-pro::before {
  background: linear-gradient(180deg,
    #F1D77F 0%,
    #DAA520 35%,
    #B8860B 65%,
    #8B6508 100%);
  box-shadow: 0 0 14px rgba(218, 165, 32, 0.45);
}
.sub-item.accent-pro .sub-card-progress-bar {
  background: linear-gradient(180deg,
    #F1D77F 0%,
    #DAA520 50%,
    #B8860B 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    0 0 10px rgba(218, 165, 32, 0.35);
}
.sub-item.accent-pro .sub-card-left-active {
  color: #B8860B;
  text-shadow: 0 0 14px rgba(218, 165, 32, 0.30);
}
.sub-item.accent-pro .sub-card-percent { color: #B8860B; }
.sub-item.accent-pro:hover {
  border-color: rgba(218, 165, 32, 0.30);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 14px 28px rgba(184, 134, 11, 0.18);
}
.sub-item.accent-prolite { --tier-color: #1f9ed1; --tier-color-soft: rgba(31, 158, 209, 0.12); }
.sub-item.accent-go      { --tier-color: #ee8717; --tier-color-soft: rgba(255, 149, 0, 0.14); }
.sub-item.accent-other   { --tier-color: #8e8e93; --tier-color-soft: rgba(142, 142, 147, 0.06); }

/* 状态修饰：过期 / 退款（弱化 + 红微染） */
.sub-item.sub-expired {
  background:
    radial-gradient(140% 120% at 100% 100%, rgba(0, 0, 0, 0.03) 0%, transparent 55%),
    #fafafa;
}
.sub-item.sub-refunded {
  background:
    radial-gradient(140% 120% at 100% 100%, rgba(255, 59, 48, 0.06) 0%, transparent 55%),
    #fff;
}
.sub-item.sub-expired::before,
.sub-item.sub-refunded::before { background: var(--c-line-strong); }

/* ====== 左：图标 + 套餐 + 平台 + product_id ====== */
.sub-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.sub-card-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.18rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  position: relative;
  transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-spring);
}
.sub-item:hover .sub-card-icon {
  transform: scale(1.04);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
.sub-item.sub-expired .sub-card-icon,
.sub-item.sub-refunded .sub-card-icon { filter: saturate(.5) brightness(.95); }
/* iOS：直接用 Apple 官方 App Store 图标（自带蓝色 squircle 渐变 + 白色 A）
   覆盖父规则的 inset 阴影，避免在原图圆角顶部叠加白色高光 */
.sub-card-icon.pf-ios {
  background:
    url("/assets/appstore.svg?v=20260509") center / 100% 100% no-repeat;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.sub-card-icon.pf-ios > .bi { display: none; }
.sub-item:hover .sub-card-icon.pf-ios {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}
.sub-item:hover .sub-card-icon.pf-android {
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.14),
    inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
/* Android：白色 squircle 衬底 + Google 官方四色三角 logo（居中 60%） */
.sub-card-icon.pf-android {
  background:
    url("/assets/googleplay.svg?v=20260509") center / 60% no-repeat,
    #ffffff;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.10),
    inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.sub-card-icon.pf-android > .bi { display: none; }
.sub-card-icon.pf-stripe  { background: linear-gradient(135deg, #7d76ff, #4f47d4); }
.sub-card-icon.pf-amazon  { background: linear-gradient(135deg, #ffb340, #ff8500); color: #1d1d1f; }
.sub-card-icon.pf-web     { background: linear-gradient(135deg, #0a84ff, #0058c2); }
.sub-card-icon.pf-promo   { background: linear-gradient(135deg, #5ac8fa, #1f9ed1); }
.sub-card-icon.pf-other   { background: linear-gradient(135deg, #aeaeb2, #8e8e93); }

.sub-card-info {
  min-width: 0;
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sub-card-tier {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tier-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sub-card-platform {
  font-size: .72rem;
  color: var(--c-text-mute);
  letter-spacing: .02em;
}
.sub-card-pid {
  margin-top: 2px;
  font-size: .65rem;
  color: var(--c-text-mute);
  opacity: .7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* product_id 下方的「chaai.cc · 查询」微戳：截图传播友好 */
.sub-card-by {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 2px 8px 2px 3px;
  border-radius: 999px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tier-color) 8%, transparent),
    color-mix(in srgb, var(--tier-color) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--tier-color) 16%, transparent);
  font-size: .62rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--tier-color) 72%, var(--c-text-mute));
  letter-spacing: 0.02em;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  width: max-content;
  max-width: 100%;
}
.sub-card-by img {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  -webkit-user-drag: none;
}
.sub-card-by-sep { opacity: .55; margin: 0 -1px; font-weight: 400; }
.sub-item.sub-expired .sub-card-by,
.sub-item.sub-refunded .sub-card-by {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--c-text-mute);
}
.sub-item.sub-expired .sub-card-by img,
.sub-item.sub-refunded .sub-card-by img {
  filter: grayscale(.4);
  opacity: .8;
}

/* ====== 中：价格大字 + 进度条 + 进度元 ====== */
.sub-card-mid {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sub-card-price-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sub-card-price {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  word-break: break-all;
}
.sub-card-price-num {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.sub-card-price-free {
  font-size: .96rem;
  font-weight: 500;
  color: var(--c-text-mute);
}
.sub-item.sub-expired  .sub-card-price,
.sub-item.sub-refunded .sub-card-price { color: var(--c-text-mute); }

.sub-card-progress {
  position: relative;
  height: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}
.sub-card-progress-bar {
  position: relative;
  height: 100%;
  border-radius: 999px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--tier-color) 85%, white) 0%,
      var(--tier-color) 50%,
      color-mix(in srgb, var(--tier-color) 80%, black) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    0 0 8px color-mix(in srgb, var(--tier-color) 30%, transparent);
  transition: width .8s var(--ease-spring);
}
.sub-card-progress-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent);
  background-size: 200% 100%;
  border-radius: inherit;
  animation: progress-shimmer 2.4s linear infinite;
}
@keyframes progress-shimmer {
  from { background-position: -100% 0; }
  to   { background-position:  200% 0; }
}
.sub-item.sub-expired  .sub-card-progress-bar,
.sub-item.sub-refunded .sub-card-progress-bar {
  background: var(--c-line-strong);
  box-shadow: none;
}
.sub-item.sub-expired  .sub-card-progress-bar::after,
.sub-item.sub-refunded .sub-card-progress-bar::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .sub-card-progress-bar::after { animation: none; }
}

.sub-card-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: .72rem;
  color: var(--c-text-mute);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.sub-card-origin-date {
  margin-top: 4px;
  font-size: .7rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 4px;
}
.sub-card-origin-date i {
  color: #9ca3af;
  font-size: .65rem;
}

/* 订阅卡片人话解释 */
.sub-explainer {
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: .72rem;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.sub-explainer i {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: .78rem;
}
.sub-explainer-danger {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.15);
  color: #991b1b;
}
.sub-explainer-danger i { color: #dc2626; }
.sub-explainer-warning {
  background: rgba(234, 138, 0, 0.08);
  border: 1px solid rgba(234, 138, 0, 0.18);
  color: #7c2d12;
}
.sub-explainer-warning i { color: #ea8a00; }
.sub-explainer-caution {
  background: rgba(202, 138, 4, 0.08);
  border: 1px solid rgba(202, 138, 4, 0.18);
  color: #713f12;
}
.sub-explainer-caution i { color: #ca8a04; }
/* 补差价升级说明：金色，强调成本更高 */
.sub-explainer-upgrade {
  background: linear-gradient(135deg, rgba(255, 196, 0, 0.10), rgba(255, 149, 0, 0.07));
  border: 1px solid rgba(255, 170, 0, 0.30);
  color: #8a5a00;
  font-weight: 600;
}
.sub-explainer-upgrade i { color: #d97706; }
.sub-card-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.sub-card-date i { font-size: .85rem; opacity: .7; }
.sub-card-percent {
  font-weight: 700;
  color: var(--tier-color);
  letter-spacing: 0;
}
.sub-item.sub-expired  .sub-card-percent,
.sub-item.sub-refunded .sub-card-percent { color: var(--c-text-mute); }

/* ====== 右：状态徽章 + 剩余天数大字 ====== */
.sub-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
  flex-shrink: 0;
}
.sub-card-left-big {
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.15;
}
.sub-card-left-active {
  color: var(--tier-color);
  text-shadow: 0 0 16px color-mix(in srgb, var(--tier-color) 25%, transparent);
}
.sub-card-left-mute   { color: var(--c-text-mute); }

/* 自定义状态徽章（替代 Bootstrap badge）：圆点 + 淡背景 pill */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  white-space: nowrap;
}
.status-dot-inline {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}
.status-pill-active {
  background: rgba(48, 209, 88, 0.12);
  color: #1d7c2c;
}
.status-pill-active .status-dot-inline {
  background: #30d158;
  box-shadow: 0 0 0 3px rgba(48, 209, 88, 0.20);
  animation: status-pulse 2s ease-in-out infinite;
}
.status-pill-warning {
  background: rgba(255, 149, 0, 0.12);
  color: #8d4f00;
}
.status-pill-warning .status-dot-inline { background: #ff9500; }
.status-pill-danger {
  background: rgba(255, 59, 48, 0.10);
  color: #9a221b;
}
.status-pill-danger .status-dot-inline { background: #ff3b30; }
.status-pill-mute {
  background: rgba(0, 0, 0, 0.05);
  color: var(--c-text-2);
}
.status-pill-mute .status-dot-inline { background: #aeaeb2; box-shadow: none; }
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(48, 209, 88, 0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(48, 209, 88, 0.06); }
}
@media (prefers-reduced-motion: reduce) {
  .status-pill-active .status-dot-inline { animation: none; }
}

/* 过期/退款/取消 卡片右上角的"印章"贴纸 */
.sub-stamp {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transform: rotate(-4deg);
  transform-origin: center;
  z-index: 1;
}
.sub-stamp-expired {
  color: rgba(60, 60, 67, 0.55);
  border: 1.5px solid rgba(60, 60, 67, 0.30);
  background: rgba(255, 255, 255, 0.6);
}
.sub-stamp-refunded {
  color: rgba(154, 34, 27, 0.85);
  border: 1.5px solid rgba(255, 59, 48, 0.45);
  background: rgba(255, 59, 48, 0.05);
}
.sub-stamp-cancelled {
  color: rgba(141, 79, 0, 0.9);
  border: 1.5px solid rgba(255, 149, 0, 0.40);
  background: rgba(255, 149, 0, 0.06);
}

/* 试用 / 退款 / 取消 标签行（出现在价格旁） */
.sub-item-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sub-spacer { flex: 1; }

.sub-tag {
  font-size: .7rem;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 500;
}
.sub-tag-trial   { background: rgba(90, 200, 250, .14); color: #075778; }
.sub-tag-danger  { background: rgba(255, 59, 48, .10); color: #9a221b; }
.sub-tag-warning { background: rgba(255, 149, 0, .12); color: #8d4f00; }
/* 账单异常：比退款更醒目（红底深红 + 描边 + 慢呼吸），告诉买家"现在还活着但到期就死" */
.sub-tag-billing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(255, 59, 48, .18), rgba(255, 59, 48, .10));
  color: #9a221b;
  border: 1px solid rgba(255, 59, 48, .32);
  font-weight: 700;
  animation: sub-tag-billing-pulse 2.4s ease-in-out infinite;
}
.sub-tag-billing i { font-size: .9em; }
@keyframes sub-tag-billing-pulse {
  0%,100% { box-shadow: 0 0 0 0   rgba(255, 59, 48, 0.18); }
  50%     { box-shadow: 0 0 0 4px rgba(255, 59, 48, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sub-tag-billing { animation: none; }
}
/* 补差价升级：金色质感，强调「由 Go 补差价升级、成本更高」 */
.sub-tag-upgrade {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(255, 196, 0, .20), rgba(255, 149, 0, .12));
  color: #8a5a00;
  border: 1px solid rgba(255, 170, 0, .38);
  font-weight: 700;
}
.sub-tag-upgrade i { font-size: .9em; }

.sub-item-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  font-size: .82rem;
  margin-top: auto;
}
.sub-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sub-cell-k { font-size: .68rem; color: var(--c-text-mute); letter-spacing: 0; }
.sub-cell-v { color: var(--c-text); font-variant-numeric: tabular-nums; word-break: break-all; }
.sub-cell-active { color: var(--c-success); font-weight: 600; }
.sub-cell-mute   { color: var(--c-text-mute); }

.sub-item-tx {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--c-line);
  font-size: .68rem;
  color: var(--c-text-mute);
  word-break: break-all;
}

/* 用户 ID 区块外壳：刻意放在 watermark 之后，截图截不到、滚动可达
   桌面 ~64px + 手机 ~64px 的"留白距离"，让它跟主结果在视觉上分离
   底部加 safe-area-inset 留白，避免 iPhone home indicator 遮挡 */
.user-id-section {
  margin-top: 64px;
  padding-top: 8px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  opacity: 0;
  transform: translateY(8px);
  animation: user-id-in .5s var(--ease-spring) .25s forwards;
}
@keyframes user-id-in {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .user-id-section { opacity: 1; transform: none; animation: none; }
}
/* .user-id-hint 已弃用（隐私优化：删除"联系客服时请提供此 ID"提示文案） */
.user-id-hint { display: none; }

/* "已脱敏" 小标签：让用户一眼知道显示值是隐私脱敏后的版本 */
.user-id-mask-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 1px 7px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--c-blue) 70%, var(--c-text-mute));
  background: linear-gradient(135deg,
    rgba(0, 113, 227, 0.10),
    rgba(0, 113, 227, 0.04));
  border: 1px solid rgba(0, 113, 227, 0.18);
  border-radius: 999px;
  user-select: none;
  -webkit-user-select: none;
}

/* 脱敏值的视觉差异：星号要"高过"普通字符，看上去刻意"打码"的密文 */
.user-id-value-masked {
  font-feature-settings: "tnum" 1, "ss01";
  letter-spacing: 0.06em;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65)),
    repeating-linear-gradient(45deg,
      rgba(0, 113, 227, 0.025) 0 6px,
      transparent 6px 12px);
  color: color-mix(in srgb, var(--c-text) 86%, var(--c-blue));
}

/* 用户 ID 卡片：精简版，UUID + 一键复制按钮 */
.user-id-block {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background:
    linear-gradient(135deg,
      rgba(0, 113, 227, 0.04),
      rgba(94, 92, 230, 0.04));
  border: 1px solid rgba(0, 113, 227, 0.12);
  transition:
    border-color .2s var(--ease-spring),
    background-color .2s var(--ease-spring);
}
.user-id-block:hover {
  border-color: rgba(0, 113, 227, 0.22);
}
.user-id-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--c-text-mute);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.user-id-label i {
  font-size: .98rem;
  color: var(--c-success);
  opacity: .85;
  filter: drop-shadow(0 1px 2px rgba(48, 209, 88, 0.18));
}
.user-id-value {
  flex: 1;
  min-width: 0;
  font-size: .82rem;
  color: var(--c-text);
  letter-spacing: 0;
  background: rgba(255, 255, 255, 0.7);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: all;
  -webkit-user-select: all;
}
.user-id-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 9px;
  background: var(--c-blue);
  color: #fff;
  border: 0;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color .2s var(--ease-spring),
    transform .2s var(--ease-spring),
    box-shadow .2s var(--ease-spring);
}
.user-id-copy i { font-size: .92rem; }
.user-id-copy:hover {
  background: var(--c-blue-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 113, 227, 0.25);
}
.user-id-copy:active { transform: translateY(0); }
.user-id-copy:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.30);
}
.user-id-copy.user-id-copy-done {
  background: var(--c-success);
  box-shadow: 0 4px 10px rgba(48, 209, 88, 0.25);
}
@media (max-width: 640px) {
  .user-id-section { margin-top: 64px; }
  .user-id-block {
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px;
  }
  .user-id-value {
    flex: 1 0 100%;
    order: 2;
    font-size: .76rem;
    padding: 8px 10px;
  }
  .user-id-label { order: 1; }
  .user-id-copy {
    order: 3;
    margin-left: auto;
    min-height: 44px;
    min-width: 44px;
    padding: 8px 16px;
  }
  /* 窄屏复制按钮藏掉文案，只保留图标，但 aria-label 保证无障碍 */
  .user-id-copy span { display: none; }
  .user-id-copy i { font-size: 1.05rem; }
  .user-id-copy.user-id-copy-done span {
    display: inline;
    font-size: .82rem;
    font-weight: 600;
  }
}

/* 账号元数据（已废弃 4 行展示，下面样式保留以兼容旧路径） */
.meta-grid {
  display: flex;
  flex-direction: column;
}
.meta-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: .84rem;
}
.meta-row:last-child { border-bottom: 0; }
.meta-k { color: var(--c-text-mute); width: 110px; flex-shrink: 0; font-size: .78rem; }
.meta-v { color: var(--c-text); word-break: break-all; }

/* 邀请卡片：极简风（白底 + 细边框） */
.invite-card {
  border: 1px solid var(--c-line);
}
.invite-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .92rem;
  font-weight: 500;
  color: var(--c-text);
  margin-bottom: 14px;
}
.invite-rule {
  font-size: .72rem;
  color: var(--c-text-mute);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.invite-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 16px 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 14px;
}
.invite-stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.invite-stat-num {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.invite-stat-lbl {
  font-size: .7rem;
  color: var(--c-text-mute);
}

.invite-link {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.invite-link input {
  flex: 1;
  padding: 7px 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .75rem;
  color: var(--c-text-2);
  background: var(--c-input-bg);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  outline: none;
}
.invite-link button {
  padding: 6px 14px;
  font-size: .78rem;
  background: var(--c-text);
  color: #fff;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s var(--ease-spring);
}
.invite-link button:hover  { background: #000; }
.invite-link button.done   { background: var(--c-success); }

.invite-code-line {
  font-size: .72rem;
  color: var(--c-text-mute);
  text-align: center;
  margin-bottom: 4px;
}
.invite-code-line code {
  color: var(--c-text);
  font-weight: 500;
  margin-left: 4px;
}

.invite-list {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
  max-height: 220px;
  overflow-y: auto;
}
.invite-list-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  padding: 6px 0;
  font-size: .78rem;
  align-items: baseline;
}
.invite-list-name { color: var(--c-text); }
.invite-list-reward { color: var(--c-success); font-variant-numeric: tabular-nums; }
.invite-list-time { color: var(--c-text-mute); font-size: .72rem; font-variant-numeric: tabular-nums; }

/* ============ 管理后台 ============ */

.admin-stat {
  background: var(--c-glass-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-radius: 18px;
  border: 1px solid var(--c-glass-stroke);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition:
    box-shadow .3s var(--ease-spring),
    transform .3s var(--ease-spring);
}
.admin-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}
.admin-stat .stat-tag {
  background: rgba(0, 0, 0, 0.06);
  color: var(--c-text-2);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 600;
  display: inline-block;
}
.admin-stat.tag-success .stat-tag { background: rgba(48, 209, 88, 0.15); color: #1d7c2c; }
.admin-stat.tag-warning .stat-tag { background: rgba(255, 149, 0, 0.15); color: #8d4f00; }
.admin-stat.tag-info    .stat-tag { background: rgba(90, 200, 250, 0.20); color: #075778; }
.admin-stat.tag-rose    .stat-tag { background: rgba(255, 59, 48, 0.12); color: #9a221b; }
.admin-stat.tag-mute    .stat-tag { background: rgba(0, 0, 0, 0.06); color: var(--c-text-2); }

.admin-stat .h3,
.admin-stat .h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* 表格 */
.table {
  border-color: var(--c-line);
}
.table thead.table-light th {
  background: rgba(0, 0, 0, 0.025);
  color: var(--c-text-mute);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  border-color: var(--c-line);
}
.table > :not(caption) > * > * { border-color: var(--c-line); }

/* ============ 响应式 ============ */

@media (max-width: 768px) {
  .topnav-inner   {
    padding: 10px 16px;
    padding-left:  max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .page-container {
    padding: 20px 14px 12px;
    padding-left:   max(14px, env(safe-area-inset-left));
    padding-right:  max(14px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  /* 手机导航：隐藏桌面菜单，显示精简移动菜单 */
  .nav-actions-desktop { display: none; }
  .nav-actions-mobile  { display: flex; gap: 6px; margin-left: auto; }
  .nav-actions-mobile .btn-pill {
    width: 38px; height: 38px;
    padding: 0;
    justify-content: center;
    font-size: 1.1rem;
  }
  .nav-menu-toggle { font-size: 1.25rem; }
  .nav-dropdown { right: max(16px, env(safe-area-inset-right)); }

  .nav-actions    { gap: 6px; }
  .btn-pill       {
    padding: 6px 12px;
    font-size: .82rem;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  .user-chip      { display: none; }
  .banner         { padding: 16px; gap: 12px; }
  .banner-icon    { width: 44px; height: 44px; font-size: 1.4rem; border-radius: 12px; }
  .banner-title   { font-size: 1.1rem; }
  .ent-card       { padding: 14px; }
  .meta-k         { width: 90px; font-size: .72rem; }
  .sub-item       {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 12px;
    padding: 16px 14px 14px 18px;
  }
  .sub-card-right {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    width: 100%;
  }
  .sub-stamp {
    top: 10px;
    right: 10px;
    font-size: .6rem;
    padding: 2px 7px;
  }
  .sub-card-price-row { padding-right: 64px; }
  .sub-card-progress-meta { font-size: .7rem; gap: 6px; }
  .sub-card-date i { display: none; }
  .card .card-body { padding: 16px; }
  .card { border-radius: 18px; }

  .query-row      { flex-direction: column; }
  .hero-btn       { width: 100%; min-height: 48px; font-size: .95rem; }
  .quota-pill     { font-size: .72rem; padding: 4px 10px; min-height: 26px; }
  .query-profile-link {
    min-height: 36px;
    padding: 6px 10px;
    margin: -6px -10px;
    display: inline-flex;
    align-items: center;
  }
  .query-meta { row-gap: 10px; }
  .history-card   { position: static; }
  .profile-history-row {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 10px;
  }
  .profile-history-uuid    { grid-column: 2 / 3; grid-row: 1 / 2; }
  .profile-history-summary { grid-column: 2 / 4; grid-row: 2 / 3; font-size: .72rem; }
  .profile-history-time    { grid-column: 3 / 4; grid-row: 1 / 2; }
  .profile-history-chev    { display: none; }

  /* Token 查询页优化 */
  .tc-header { margin-bottom: 16px; }
  .tc-title { font-size: 1.05rem; gap: 6px; }
  .tc-title i { font-size: 1.1rem; }
  .tc-desc { font-size: .8rem; }
  .tc-desc br { display: none; }
  #tokenInput { font-size: 14px; rows: 3; min-height: 100px; }
  .tc-howto-summary { padding: 12px 14px; font-size: .82rem; }
  .tc-howto-body { padding: 0 14px 14px; font-size: .78rem; }

  /* Footer 调整 */
  .page-footer { padding: 24px 16px 80px; font-size: .78rem; }
}

@media (max-width: 480px) {
  .brand                { font-size: .98rem; gap: 6px; }
  .brand-mark           { width: 24px; height: 24px; border-radius: 7px; }

  .page-container       { padding: 16px 12px 10px; }
  .card .card-body      { padding: 14px; }
  .card                 { border-radius: 16px; }

  .sub-card-price       { font-size: 1.25rem; }
  .sub-card-icon        { width: 38px; height: 38px; font-size: 1.05rem; }
  .sub-card-left-big    { font-size: 1.05rem; }
  .sub-card-tier        { font-size: 1rem; }
  .sub-card-by          { font-size: .58rem; padding: 1px 7px 1px 2px; }
  .sub-card-by img      { width: 12px; height: 12px; }

  .result-toolbar       { gap: 6px; margin-bottom: 12px; }
  .result-toolbar-uuid  {
    font-size: .7rem;
    padding: 5px 8px;
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .result-toolbar-redo span { display: inline; }
  .result-toolbar-redo {
    min-height: 44px;
    padding: 10px 16px;
    font-size: .82rem;
  }

  .invite-hint-copy {
    min-height: 44px;
    padding: 8px 14px;
  }

  .status-pill {
    font-size: .78rem;
    padding: 4px 11px 4px 9px;
  }
  .status-dot-inline { width: 8px; height: 8px; }

  .sub-stamp {
    font-size: .55rem;
    padding: 2px 6px;
    letter-spacing: .08em;
  }

  .sub-card-progress-meta { font-size: .68rem; }
  .result-watermark      { margin-top: 28px; padding: 16px 12px 4px; }

  /* Token 查询页 480px 优化 */
  .tc-verdict { padding: 12px 14px; gap: 10px; border-radius: 14px; }
  .tc-verdict-icon { width: 40px; height: 40px; font-size: 1.2rem; border-radius: 10px; }
  .tc-verdict-label { font-size: .95rem; }
  .tc-verdict-sub { font-size: .75rem; }
  .tc-info-item { padding: 10px 12px; }
  .tc-info-label { font-size: .68rem; }
  .tc-info-value { font-size: .82rem; }
  .tc-model-tag { padding: 3px 8px; font-size: .7rem; }
  .tc-models-title { font-size: .78rem; }

  /* 按钮触控优化：所有主要按钮 ≥44px 高 */
  .hero-btn { min-height: 48px; font-size: .92rem; border-radius: 12px; }
  .btn-pill.btn-primary { min-height: 44px; }

  /* 表单优化 */
  .form-control { font-size: 16px !important; padding: 12px 14px; border-radius: 12px; }
  .form-label { font-size: .82rem; margin-bottom: 6px; }

  /* query explainer */
  .query-explainer { padding: 12px 14px; margin: 16px 0; border-radius: 10px; }
  .query-explainer-header { gap: 8px; margin-bottom: 8px; }
  .query-explainer-title { font-size: .82rem; }
  .query-explainer-body p { font-size: .76rem; }
  .query-explainer-btn { padding: 10px 14px; font-size: .78rem; min-height: 44px; }
  .query-explainer-tg { padding: 10px 14px; font-size: .78rem; min-height: 44px; }
}

/* 360–380px 极窄屏（小屏 Android / iPhone SE 1） */
@media (max-width: 380px) {
  .sub-item             { padding: 14px 12px 12px 16px; }
  .sub-card-price-row   { padding-right: 56px; }
  .sub-card-tier        { font-size: .96rem; }
  .sub-card-pid         { font-size: .6rem; }
  .sub-card-by          { display: none; } /* 极窄屏直接隐藏卡内戳，避免挤压 */
  .user-id-block        { padding: 10px 12px; }
  .user-id-label > span:not(.user-id-mask-tag) { display: none; } /* 仅保留锁图标 */
  .user-id-label i      { font-size: 1.05rem; }
  .user-id-mask-tag     { font-size: .58rem; padding: 1px 6px; }
  .result-toolbar-uuid  { max-width: 50vw; }
}

/* =====================================================================
   /profile 页：我的分享链接列表
   ===================================================================== */
/* .profile-share-card 容器跟 history-card 同形态，无需额外样式 */
.profile-share-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.profile-share-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--c-line);
  font-size: .82rem;
  transition: background-color .2s var(--ease-spring);
}
.profile-share-row:hover { background: rgba(0, 113, 227, 0.04); }
.profile-share-row.row-disabled { opacity: .55; }
.profile-share-state {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 999px;
}
.profile-share-state.state-ok        { background: rgba(48, 209, 88, 0.16);  color: #1F8B3E; }
.profile-share-state.state-throttled { background: rgba(255, 159, 10, 0.16); color: #B55A00; }
.profile-share-state.state-off       { background: rgba(0, 0, 0, 0.06);      color: var(--c-text-mute); }
.profile-share-uuid {
  font-size: .76rem;
  color: var(--c-text-mute);
  background: rgba(0, 0, 0, 0.04);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-share-stat {
  font-size: .76rem;
  color: var(--c-text-mute);
  white-space: nowrap;
}
.profile-share-stat i { opacity: .7; }
.profile-share-iplimit { opacity: .65; }
.profile-share-time {
  font-size: .72rem;
  color: var(--c-text-mute);
  white-space: nowrap;
}
.profile-share-actions {
  display: inline-flex;
  gap: 4px;
}
.profile-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-text-mute);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color .15s var(--ease-spring),
    color .15s var(--ease-spring),
    transform .15s var(--ease-spring);
}
.profile-share-btn:hover {
  background: rgba(0, 113, 227, 0.10);
  color: var(--c-blue);
  transform: translateY(-1px);
}
.profile-share-btn.btn-disable:hover {
  background: rgba(255, 69, 58, 0.12);
  color: #C9302C;
}
.profile-share-btn.btn-copy-done {
  background: rgba(48, 209, 88, 0.18);
  color: var(--c-success);
}
.profile-share-tip {
  margin-top: 12px;
  font-size: .76rem;
  color: var(--c-text-mute);
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.profile-share-tip i { font-size: .9rem; opacity: .7; margin-top: 1px; }

@media (max-width: 640px) {
  .profile-share-row {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 6px 10px;
  }
  .profile-share-state    { grid-column: 1 / 2; grid-row: 1 / 2; }
  .profile-share-uuid     { grid-column: 2 / 3; grid-row: 1 / 2; }
  .profile-share-actions  { grid-column: 3 / 4; grid-row: 1 / 3; align-self: center; }
  .profile-share-stat,
  .profile-share-time     { grid-column: 1 / 3; grid-row: 2 / 3; font-size: .7rem; }
  .profile-share-time     { justify-self: end; }
}

/* =====================================================================
   分享视图（/s/{share_id}）—— 复用主站 sub-item 样式 + 专属外壳
   核心：让被分享者不看到任何"查询入口"，只看到"分享快照 + 拉新 CTA"
   ===================================================================== */

/* 顶部品牌横幅区 */
.share-hero {
  text-align: center;
  margin: 4px auto 18px;
}
.share-hero-banner {
  display: block;
  margin: 0 auto;
  max-width: 92vw;
  width: 580px;
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(0, 113, 227, 0.10));
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.share-hero-title {
  margin: 14px auto 4px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-text);
}
.share-hero-sub {
  margin: 0 auto;
  font-size: .9rem;
  color: var(--c-text-mute);
}

/* 快照状态条：醒目但不喧宾夺主 */
.share-snapshot-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 18px;
  padding: 10px 18px;
  background: linear-gradient(180deg, rgba(255, 159, 10, 0.08), rgba(255, 159, 10, 0.04));
  border: 1px solid rgba(255, 159, 10, 0.22);
  border-radius: 14px;
  max-width: 720px;
  font-size: .88rem;
  color: color-mix(in srgb, #B55A00 80%, var(--c-text));
}
.share-snapshot-time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.share-snapshot-time i { font-size: 1rem; color: #FF9F0A; }
.share-snapshot-time strong {
  font-weight: 700;
  color: #B55A00;
  letter-spacing: 0;
}
.share-snapshot-time-abs {
  color: var(--c-text-mute);
  font-size: .8rem;
}
.share-snapshot-warn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 69, 58, 0.12);
  color: #C9302C;
  font-size: .8rem;
  font-weight: 600;
}

/* ================= 实时数据状态条 ================= */
.share-live-bar {
  transition: background-color .25s var(--ease-spring), border-color .25s var(--ease-spring);
}
/* 实时·成功 → 绿色脉冲 */
.share-live-bar-fresh {
  background: linear-gradient(180deg, rgba(52, 199, 89, 0.10), rgba(52, 199, 89, 0.04));
  border-color: rgba(52, 199, 89, 0.28);
  color: color-mix(in srgb, #1A7F3D 85%, var(--c-text));
}
.share-live-bar-fresh .share-snapshot-time i {
  color: #34C759;
}
.share-live-bar-fresh .share-snapshot-time strong {
  color: #1A7F3D;
}
/* 实时·失败 → 黄色警告 */
.share-live-bar-fail {
  background: linear-gradient(180deg, rgba(255, 159, 10, 0.10), rgba(255, 159, 10, 0.04));
  border-color: rgba(255, 159, 10, 0.32);
  color: color-mix(in srgb, #B55A00 80%, var(--c-text));
}
.share-live-bar-fail .share-snapshot-time i {
  color: #FF9F0A;
}
.share-live-bar-fail .share-snapshot-time strong {
  color: #B55A00;
}
.share-live-fail-reason {
  color: #B55A00 !important;
  opacity: .8;
}

/* 实时数据脉冲圆点（呼吸式动画） */
.share-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34C759;
  box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.55);
  animation: share-live-pulse 1.6s ease-out infinite;
  flex-shrink: 0;
}
@keyframes share-live-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(52, 199, 89, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(52, 199, 89, 0); }
  100% { box-shadow: 0 0 0 0   rgba(52, 199, 89, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .share-live-dot { animation: none; }
}

/* 结果卡 */
.share-result-card {
  border-radius: 18px;
  border: 1px solid var(--c-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 12px 28px rgba(0, 0, 0, 0.06);
}

/* 顶部"查询账号" 紧凑卡（脱敏 + 复制完整） */
.share-uid-block {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(48, 209, 88, 0.04), rgba(0, 113, 227, 0.04));
  border: 1px solid color-mix(in srgb, var(--c-success) 16%, var(--c-line));
}
.share-uid-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--c-text-mute);
  flex-shrink: 0;
}
.share-uid-label i {
  font-size: .98rem;
  color: var(--c-success);
  opacity: .9;
  filter: drop-shadow(0 1px 2px rgba(48, 209, 88, 0.18));
}
.share-uid-mask-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 1px 7px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--c-blue) 70%, var(--c-text-mute));
  background: linear-gradient(135deg, rgba(0, 113, 227, 0.10), rgba(0, 113, 227, 0.04));
  border: 1px solid rgba(0, 113, 227, 0.18);
  border-radius: 999px;
}
.share-uid-value {
  flex: 1;
  min-width: 0;
  font-size: .82rem;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--c-text) 86%, var(--c-blue));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.65)),
    repeating-linear-gradient(45deg,
      rgba(0, 113, 227, 0.025) 0 6px,
      transparent 6px 12px);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-uid-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 9px;
  background: var(--c-blue);
  color: #fff;
  border: 0;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color .2s var(--ease-spring),
    transform .2s var(--ease-spring),
    box-shadow .2s var(--ease-spring);
}
.share-uid-copy:hover { background: var(--c-blue-hover); transform: translateY(-1px); }
.share-uid-copy:active { transform: translateY(0); }
.share-uid-copy.share-uid-copy-done {
  background: var(--c-success);
  box-shadow: 0 4px 10px rgba(48, 209, 88, 0.25);
}

/* CTA 拉新卡（中等强度） */
.share-cta-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 22px auto 16px;
  padding: 20px 24px;
  border-radius: 18px;
  background: linear-gradient(135deg,
    rgba(0, 113, 227, 0.08) 0%,
    rgba(48, 209, 88, 0.06) 100%);
  border: 1px solid color-mix(in srgb, var(--c-blue) 16%, var(--c-line));
  box-shadow: 0 6px 20px rgba(0, 113, 227, 0.06);
  position: relative;
  overflow: hidden;
}
/* 带邀请码的 CTA：亮一点 + 装饰渐变 */
.share-cta-card-ref {
  background: linear-gradient(135deg,
    rgba(255, 159, 10, 0.10) 0%,
    rgba(0, 113, 227, 0.08) 50%,
    rgba(48, 209, 88, 0.08) 100%);
  border-color: color-mix(in srgb, #FF9F0A 22%, var(--c-line));
  box-shadow: 0 8px 22px rgba(255, 159, 10, 0.08), 0 4px 14px rgba(0, 113, 227, 0.06);
}
.share-cta-card-ref::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 30%;
  background: radial-gradient(circle at 80% 50%,
    rgba(255, 215, 0, 0.10) 0%,
    transparent 60%);
  pointer-events: none;
}

/* +N 点欢迎奖励徽章（CTA 标题旁） */
.share-cta-bonus {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 10px 2px 8px;
  font-size: .72rem;
  font-weight: 700;
  color: #B55A00;
  background: linear-gradient(135deg,
    rgba(255, 215, 0, 0.22),
    rgba(255, 159, 10, 0.18));
  border: 1px solid rgba(255, 159, 10, 0.34);
  border-radius: 999px;
  vertical-align: middle;
  letter-spacing: 0;
  white-space: nowrap;
  animation: share-cta-bonus-pulse 2.4s ease-in-out infinite;
}
.share-cta-bonus i {
  font-size: .82rem;
  color: #FF9F0A;
  animation: share-cta-bonus-shake 2.4s ease-in-out infinite;
}
@keyframes share-cta-bonus-pulse {
  0%, 100% { transform: translateY(0);   box-shadow: 0 1px 4px rgba(255, 159, 10, 0.18); }
  50%      { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(255, 159, 10, 0.30); }
}
@keyframes share-cta-bonus-shake {
  0%, 100%   { transform: rotate(0deg); }
  10%, 30%   { transform: rotate(-10deg); }
  20%, 40%   { transform: rotate(10deg); }
  50%        { transform: rotate(0deg); }
}
.share-cta-desc strong {
  color: #B55A00;
  font-weight: 800;
  background: linear-gradient(135deg, #FF9F0A, #FFD60A);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .share-cta-bonus,
  .share-cta-bonus i { animation: none; }
}
.share-cta-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 113, 227, 0.12);
}
.share-cta-icon img { width: 44px; height: 44px; border-radius: 10px; }
.share-cta-body {
  flex: 1;
  min-width: 0;
}
.share-cta-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 2px;
}
.share-cta-desc {
  font-size: .82rem;
  color: var(--c-text-mute);
}
.share-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--c-blue), color-mix(in srgb, var(--c-blue) 75%, #5856d6));
  color: #fff;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 113, 227, 0.28);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .2s var(--ease-spring),
    box-shadow .2s var(--ease-spring),
    background .2s var(--ease-spring);
}
.share-cta-btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 113, 227, 0.34);
}
.share-cta-btn:active { transform: translateY(0); }
.share-cta-btn i { font-size: 1.1rem; }

/* 元信息脚注（链接有效期 / 浏览数 / 主站链接） */
.share-meta-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin: 12px auto 8px;
  padding: 8px 16px;
  font-size: .76rem;
  color: var(--c-text-mute);
  text-align: center;
}
.share-meta-foot i { font-size: .86rem; opacity: .8; }
.share-meta-dot { opacity: .5; }
.share-meta-link a {
  color: var(--c-blue);
  text-decoration: none;
  font-weight: 600;
}
.share-meta-link a:hover { text-decoration: underline; }

/* 手机端调整 */
@media (max-width: 640px) {
  .share-hero-title       { font-size: 1.2rem; }
  .share-hero-sub         { font-size: .82rem; }
  .share-snapshot-bar     { font-size: .8rem; padding: 8px 12px; gap: 8px; }
  .share-snapshot-time-abs{ display: none; } /* 窄屏只保留相对时间 */
  .share-cta-card         { padding: 16px; flex-wrap: wrap; gap: 12px; }
  .share-cta-icon         { width: 44px; height: 44px; border-radius: 11px; }
  .share-cta-icon img     { width: 36px; height: 36px; }
  .share-cta-title        { font-size: .98rem; }
  .share-cta-desc         { font-size: .78rem; }
  .share-cta-btn          {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
  }
  .share-uid-block        {
    flex-wrap: wrap;
    gap: 8px 10px;
  }
  .share-uid-value        {
    flex: 1 0 100%;
    order: 2;
    font-size: .76rem;
  }
  .share-uid-label        { order: 1; }
  .share-uid-copy         {
    order: 3;
    margin-left: auto;
    min-height: 44px;
    min-width: 44px;
    padding: 8px 16px;
  }
  .share-uid-copy span    { display: none; }
  .share-uid-copy i       { font-size: 1.05rem; }
  .share-uid-copy.share-uid-copy-done span {
    display: inline;
    font-size: .82rem;
    font-weight: 600;
  }
}

/* ============ 管理后台「一键查询」主色按钮 ============ */
.admin-quick-query {
  background: linear-gradient(135deg, #0071e3, #34c759);
  border: 0;
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(52, 199, 89, .25), 0 1px 2px rgba(0, 113, 227, .25);
  transition:
    transform .15s ease-out,
    box-shadow .15s ease-out,
    filter .15s ease-out;
}
.admin-quick-query:hover {
  background: linear-gradient(135deg, #0077ed, #3acf60);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(52, 199, 89, .32), 0 2px 5px rgba(0, 113, 227, .32);
}
.admin-quick-query:active   { transform: translateY(0); filter: brightness(.95); }
.admin-quick-query:focus,
.admin-quick-query:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(52, 199, 89, .35), 0 2px 8px rgba(52, 199, 89, .25);
  color: #fff !important;
}
.admin-quick-query i { font-size: 1.05em; margin-right: 2px; }
/* 在 btn-group 里把渐变按钮做平整 */
.btn-group .admin-quick-query { box-shadow: none; }
.btn-group .admin-quick-query:hover { transform: none; box-shadow: 0 0 0 1px rgba(0,113,227,.35) inset; }

/* ============ 管理后台：宽布局（只对 /admin 路径生效） ============ */
/* 默认 .page-container 是 1120px，大屏上后台表格列多会被挤；这里放宽到 1600px。
   前台 dashboard / share / login / register 走的还是 .page-container（1120px），不受影响 */
.page-container--admin {
  max-width: min(1600px, 96vw);
}
/* 大屏可以更宽一些（>= 1800px 显示器） */
@media (min-width: 1800px) {
  .page-container--admin { max-width: 1720px; }
}

/* ============ 管理后台：UUID 画像页面 ============ */
.admin-uuids-table .admin-uuid-code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .8rem;
  color: #1d1d1f;
  background: rgba(0, 0, 0, .04);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: -.2px;
}
.admin-uuids-table .admin-copy-btn {
  font-size: .85rem;
  color: #6b7280;
  text-decoration: none;
  vertical-align: baseline;
}
.admin-uuids-table .admin-copy-btn:hover { color: #0071e3; }

/* 风控等级行色标：左边 4px 内置阴影，不影响表格布局 */
.admin-uuids-table tr.risk-red    > td:first-child { box-shadow: inset 4px 0 0 #dc3545; }
.admin-uuids-table tr.risk-orange > td:first-child { box-shadow: inset 4px 0 0 #fd7e14; }
.admin-uuids-table tr.risk-yellow > td:first-child { box-shadow: inset 4px 0 0 #0dcaf0; }
.admin-uuids-table tr.risk-green  > td:first-child { box-shadow: inset 4px 0 0 #198754; }

.admin-uuids-table tr.risk-red    { background: linear-gradient(90deg, rgba(220, 53, 69, .04), transparent 30%); }
.admin-uuids-table tr.risk-orange { background: linear-gradient(90deg, rgba(253, 126, 20, .04), transparent 30%); }

.admin-risk-bar .badge { font-size: .72rem; }


/* ============ 管理后台：分享链接浏览统计列（两行：次数 + IP） ============ */
.admin-share-views {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
.admin-share-views-line {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .82rem;
}
.admin-share-views-line + .admin-share-views-line {
  margin-top: 2px;
  font-size: .72rem;
}
.admin-share-views-line i { font-size: .85rem; opacity: .8; }
.admin-share-views-line strong { font-weight: 700; }
.admin-share-views-line small { opacity: .7; }

/* ============ Dashboard: Token 深度查询提示横幅 ============ */
.token-deep-hint {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg,
    rgba(255, 159, 10, 0.10) 0%,
    rgba(255, 69, 58, 0.06) 100%);
  border: 1px solid rgba(255, 159, 10, 0.30);
  animation: fade-in-up 0.5s var(--ease-spring) both;
}
.token-deep-hint-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FF9F0A, #FF6723);
  color: #fff;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(255, 159, 10, 0.25);
}
.token-deep-hint-body {
  flex: 1;
  min-width: 0;
}
.token-deep-hint-title {
  font-size: .88rem;
  font-weight: 700;
  color: #8D4F00;
  margin-bottom: 2px;
}
.token-deep-hint-desc {
  font-size: .78rem;
  color: var(--c-text-2);
  line-height: 1.5;
}
.token-deep-hint-desc strong {
  color: var(--c-blue);
  font-weight: 700;
}
.token-deep-hint-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--c-blue), color-mix(in srgb, var(--c-blue) 80%, #5856d6));
  color: #fff;
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 113, 227, 0.22);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .2s var(--ease-spring),
    box-shadow .2s var(--ease-spring);
}
.token-deep-hint-btn:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 113, 227, 0.30);
}
.token-deep-hint-btn:active { transform: translateY(0); }
@media (max-width: 640px) {
  .token-deep-hint { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .token-deep-hint-btn { width: 100%; justify-content: center; }
}

/* ============ Token 深度查询页 ============ */
.tc-header {
  margin-bottom: 20px;
}
.tc-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
}
.tc-title i { color: var(--c-blue); font-size: 1.2rem; }
.tc-desc {
  font-size: .84rem;
  color: var(--c-text-mute);
  margin: 0;
  line-height: 1.55;
}
.tc-tg-wrap {
  margin-top: 14px;
  text-align: center;
}

.tc-howto {
  border-radius: 14px;
  background: var(--c-glass-bg);
  border: 1px solid var(--c-glass-stroke);
  overflow: hidden;
}
.tc-howto-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--c-text-2);
  cursor: pointer;
  user-select: none;
}
.tc-howto-summary i { color: var(--c-blue); }
.tc-howto-body {
  padding: 0 18px 16px;
  font-size: .82rem;
  color: var(--c-text-2);
  line-height: 1.6;
}
.tc-howto-body ol { margin: 0; padding-left: 20px; }
.tc-howto-body li { margin-bottom: 6px; }

/* Token 查询结果卡 */
.tc-result {
  animation: fade-in-up 0.45s var(--ease-spring) both;
}
.tc-verdict {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  margin-bottom: 18px;
  border: 1px solid var(--c-line);
}
.tc-verdict-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  flex-shrink: 0;
}
.tc-verdict-body { flex: 1; min-width: 0; }
.tc-verdict-label {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -0.01em;
}
.tc-verdict-plan {
  font-size: .86rem;
  color: var(--c-text-mute);
  margin-top: 2px;
}
.tc-verdict-plan .tc-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
}

.tc-verdict-active {
  background: rgba(48, 209, 88, 0.10);
  border-color: rgba(48, 209, 88, 0.30);
}
.tc-verdict-active .tc-verdict-icon {
  background: linear-gradient(135deg, #30d158, #5ac8fa);
}
.tc-verdict-active_will_not_renew {
  background: rgba(255, 204, 0, 0.10);
  border-color: rgba(255, 204, 0, 0.35);
}
.tc-verdict-active_will_not_renew .tc-verdict-icon {
  background: linear-gradient(135deg, #FFCC00, #FF9F0A);
}
.tc-verdict-delinquent_in_grace {
  background: rgba(255, 149, 0, 0.10);
  border-color: rgba(255, 149, 0, 0.35);
}
.tc-verdict-delinquent_in_grace .tc-verdict-icon {
  background: linear-gradient(135deg, #FF9F0A, #FF3B30);
}
.tc-verdict-expired {
  background: rgba(255, 59, 48, 0.08);
  border-color: rgba(255, 59, 48, 0.25);
}
.tc-verdict-expired .tc-verdict-icon {
  background: linear-gradient(135deg, #FF3B30, #FF2D55);
}
.tc-verdict-never_paid,
.tc-verdict-free {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--c-line);
}
.tc-verdict-never_paid .tc-verdict-icon,
.tc-verdict-free .tc-verdict-icon {
  background: linear-gradient(135deg, #8e8e93, #aeaeb2);
}
.tc-verdict-error {
  background: rgba(255, 59, 48, 0.08);
  border-color: rgba(255, 59, 48, 0.25);
}
.tc-verdict-error .tc-verdict-icon {
  background: linear-gradient(135deg, #FF3B30, #FF2D55);
}

/* 账号被 OpenAI 封禁 — 比 expired 更深的红，配警示纹理 */
.tc-verdict-account_deactivated {
  background: linear-gradient(135deg, rgba(215, 0, 21, 0.12), rgba(255, 59, 48, 0.06));
  border-color: rgba(215, 0, 21, 0.40);
  box-shadow: 0 1px 0 rgba(215, 0, 21, 0.08), 0 6px 18px rgba(215, 0, 21, 0.08);
}
.tc-verdict-account_deactivated .tc-verdict-icon {
  background: linear-gradient(135deg, #d70015, #8b0000);
  box-shadow: 0 2px 8px rgba(215, 0, 21, 0.35);
}
.tc-verdict-account_deactivated .tc-verdict-label {
  color: #d70015;
}
/* JWT 自报的 plan badge — 划掉 + 灰化 */
.tc-plan-badge-revoked {
  opacity: .6;
  text-decoration: line-through;
  filter: grayscale(0.5);
}

/* 封号醒目说明条 */
.tc-deactivated-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  margin: 14px 0 16px;
  background: linear-gradient(135deg, #fff5f5, #ffe9e9);
  border: 1px solid rgba(215, 0, 21, 0.25);
  border-left: 4px solid #d70015;
  border-radius: 12px;
  animation: tc-deactivated-flash .6s var(--ease-spring, cubic-bezier(0.25, 1, 0.5, 1)) both;
}
@keyframes tc-deactivated-flash {
  0%   { opacity: 0; transform: translateY(4px); }
  60%  { background: linear-gradient(135deg, #ffe5e5, #ffd0d0); }
  100% { opacity: 1; transform: translateY(0); }
}
.tc-deactivated-icon {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d70015, #8b0000);
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-size: 1.1rem;
  box-shadow: 0 2px 6px rgba(215, 0, 21, 0.32);
}
.tc-deactivated-body { flex: 1 1 auto; min-width: 0; }
.tc-deactivated-title {
  font-weight: 700;
  color: #8b0000;
  font-size: .98rem;
  margin-bottom: 4px;
  letter-spacing: -.01em;
}
.tc-deactivated-desc {
  font-size: .84rem;
  color: #5a0d0d;
  line-height: 1.55;
}
.tc-deactivated-desc code {
  background: rgba(215, 0, 21, 0.08);
  color: #8b0000;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: .78rem;
}
.tc-deactivated-desc strong { color: #8b0000; }
.tc-deactivated-detail {
  margin-top: 10px;
  font-size: .78rem;
}
.tc-deactivated-detail summary {
  cursor: pointer;
  color: #8b0000;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tc-deactivated-detail summary::before { content: '▸'; transition: transform .2s; display: inline-block; }
.tc-deactivated-detail[open] summary::before { transform: rotate(90deg); }
.tc-deactivated-quote {
  margin-top: 6px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.65);
  border-left: 3px solid #d70015;
  border-radius: 0 6px 6px 0;
  color: #5a0d0d;
  font-style: italic;
  font-size: .78rem;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .tc-deactivated-notice { padding: 12px 14px; gap: 10px; }
  .tc-deactivated-icon   { width: 30px; height: 30px; font-size: 1rem; }
  .tc-deactivated-title  { font-size: .9rem; }
  .tc-deactivated-desc   { font-size: .78rem; }
}

/* Token 查询信息网格 */
.tc-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--c-line);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}
.tc-info-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tc-info-item:nth-child(odd) { border-right: 1px solid var(--c-line); }
.tc-info-item:nth-last-child(-n+2) { border-bottom: 0; }
.tc-info-item.tc-info-full {
  grid-column: 1 / -1;
  border-right: 0;
}
.tc-info-label {
  font-size: .72rem;
  color: var(--c-text-mute);
  letter-spacing: 0.02em;
  font-weight: 500;
}
.tc-info-value {
  font-size: .88rem;
  color: var(--c-text);
  font-weight: 500;
  word-break: break-all;
}
.tc-info-value.tc-val-success { color: #1d7c2c; font-weight: 600; }
.tc-info-value.tc-val-warning { color: #8d4f00; font-weight: 600; }
.tc-info-value.tc-val-danger  { color: #9a221b; font-weight: 600; }
.tc-info-value.tc-val-mute    { color: var(--c-text-mute); }

/* 模型列表 */
.tc-models {
  margin-bottom: 16px;
}
.tc-models-title {
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tc-models-title i { color: var(--c-text-mute); }
.tc-models-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tc-model-tag {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: .74rem;
  font-weight: 500;
  background: rgba(0, 113, 227, 0.08);
  color: var(--c-blue);
  border: 1px solid rgba(0, 113, 227, 0.15);
}

@media (max-width: 640px) {
  .tc-info-grid { grid-template-columns: 1fr; }
  .tc-info-item:nth-child(odd) { border-right: 0; }
  .tc-info-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--c-line); }
  .tc-info-item:last-child { border-bottom: 0; }
  .tc-verdict { gap: 12px; padding: 14px 16px; }
  .tc-verdict-icon { width: 44px; height: 44px; font-size: 1.3rem; }
  .tc-verdict-label { font-size: 1rem; }
}

/* ============ UUID 查询说明 + Token 引导 ============ */
.query-explainer {
  margin: 20px 0;
  background: linear-gradient(135deg, #f0f7ff 0%, #f8fbff 100%);
  border: 1px solid rgba(0, 113, 227, 0.15);
  border-radius: 12px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.query-explainer::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, #0071e3, #64acff);
  border-radius: 4px 0 0 4px;
}
.query-explainer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  font-weight: 600;
  color: #0071e3;
  margin-bottom: 10px;
}
.query-explainer-header i {
  font-size: 1rem;
}
.query-explainer-body {
  font-size: .82rem;
  color: #333;
  line-height: 1.6;
}
.query-explainer-body p {
  margin: 0 0 8px;
}
.query-explainer-body p:last-child {
  margin-bottom: 0;
}
.query-explainer-note {
  background: rgba(255, 149, 0, 0.08);
  border: 1px solid rgba(255, 149, 0, 0.2);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #6b3a00;
}
.query-explainer-note i {
  color: #e67e00;
  font-size: .95rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.query-explainer-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.query-explainer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: linear-gradient(135deg, #0071e3, #0060c0);
  color: #fff;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s;
  box-shadow: 0 2px 8px rgba(0, 113, 227, 0.2);
}
.query-explainer-btn:hover {
  background: linear-gradient(135deg, #0060c0, #004fa0);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 113, 227, 0.3);
}
/* ============ 排行榜 ============ */
.lb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.lb-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.lb-title i { color: #ff9500; font-size: 1.2rem; }
.lb-my-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  color: var(--c-text-2);
}
.lb-my-badge {
  background: var(--c-blue);
  color: #fff;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: .75rem;
}
.lb-my-num strong { color: var(--c-text); font-weight: 700; }
.lb-my-label { display: none; }

.lb-tabs {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.04);
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 16px;
}
.lb-tab {
  flex: 1;
  padding: 9px 16px;
  font-size: .86rem;
  font-weight: 600;
  border: 0;
  background: transparent;
  color: var(--c-text-mute);
  border-radius: 9px;
  cursor: pointer;
  transition: all .2s var(--ease-spring);
}
.lb-tab.active {
  background: #fff;
  color: var(--c-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.lb-tab:hover:not(.active) { color: var(--c-text-2); }

.lb-panel { display: none; }
.lb-panel.active { display: block; animation: fade-in-up .3s var(--ease-spring) both; }

.lb-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  transition: background .15s;
  border-bottom: 1px solid var(--c-line);
}
.lb-row:last-child { border-bottom: 0; }
.lb-row:hover { background: rgba(0, 0, 0, 0.02); }
.lb-row-me {
  background: rgba(0, 113, 227, 0.04);
  border: 1px solid rgba(0, 113, 227, 0.12);
  border-bottom: 1px solid rgba(0, 113, 227, 0.12);
}
.lb-row-rank {
  width: 36px;
  text-align: center;
  flex-shrink: 0;
}
.lb-rank-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  font-size: .78rem;
  font-weight: 600;
  color: var(--c-text-mute);
}
.lb-medal { font-size: 1.3rem; }
.lb-row-name {
  flex: 1;
  font-size: .9rem;
  font-weight: 500;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.lb-me-tag {
  background: var(--c-blue);
  color: #fff;
  font-size: .65rem;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-weight: 600;
}
.lb-row-cnt {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.lb-row-cnt span { font-size: .72rem; font-weight: 400; color: var(--c-text-mute); margin-left: 2px; }

.lb-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--c-text-mute);
  font-size: .9rem;
}
.lb-empty i { font-size: 1.5rem; display: block; margin-bottom: 8px; }

@media (max-width: 640px) {
  .lb-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .lb-my-stat { flex-wrap: wrap; gap: 8px; }
  .lb-tab { padding: 8px 10px; font-size: .8rem; }
  .lb-row { padding: 10px 12px; gap: 10px; }
  .lb-row-name { font-size: .84rem; }
  .lb-row-cnt { font-size: .9rem; }
}

.query-explainer-tg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 16px;
  background: rgba(0, 136, 204, 0.06);
  border: 1px solid rgba(0, 136, 204, 0.18);
  color: #0088cc;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s;
}
.query-explainer-tg i {
  font-size: 1rem;
  line-height: 1;
}
.query-explainer-tg:hover {
  background: rgba(0, 136, 204, 0.12);
  color: #006699;
  transform: translateY(-1px);
}
.footer-tg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  opacity: .6;
  text-decoration: none;
  transition: opacity .2s;
  margin-left: 8px;
  font-size: .85rem;
  vertical-align: middle;
}
.footer-tg:hover { opacity: 1; color: #0088cc; }
.footer-tg i { font-size: 1rem; line-height: 1; }

.tg-float {
  position: fixed;
  right: 20px;
  bottom: 28px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0088cc, #006699);
  color: #fff;
  font-size: 1.3rem;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 136, 204, 0.35);
  transition: transform .2s, box-shadow .2s;
}
.tg-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 136, 204, 0.5);
  color: #fff;
}
@media (max-width: 640px) {
  .query-explainer { padding: 14px 16px; }
  .query-explainer-btn { width: 100%; justify-content: center; }
  .query-explainer-tg { width: auto; justify-content: center; }
  .tg-float { right: 14px; bottom: 18px; width: 40px; height: 40px; font-size: 1.1rem; }
}

/* ── 全站引导条：加群 + 绑定机器人 = 无限查询（可关闭） ── */
.join-guide {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
  padding: 12px 46px 12px 18px;
  background: linear-gradient(135deg, rgba(0, 136, 204, 0.10), rgba(0, 113, 227, 0.07));
  border: 1px solid rgba(0, 136, 204, 0.28);
}
.join-guide-text {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  min-width: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--c-text);
}
.join-guide-text i { color: #0088cc; font-size: 1.15rem; flex: none; }
.join-guide-text b { color: #0071e3; }
.join-guide-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.join-guide .btn-tg2 {
  background: linear-gradient(135deg, #0088cc, #006699);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 136, 204, 0.28);
}
.join-guide .btn-tg2:hover {
  color: #fff;
  transform: scale(1.02);
  box-shadow: 0 6px 18px rgba(0, 136, 204, 0.40);
}
.join-guide-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--c-text);
  opacity: .42;
  font-size: .85rem;
  line-height: 1;
  padding: 4px;
  border-radius: 6px;
  transition: opacity .2s, background .2s;
}
.join-guide-close:hover { opacity: .9; background: rgba(0, 0, 0, 0.06); }
@media (max-width: 640px) {
  .join-guide { padding: 12px 40px 12px 14px; gap: 10px; }
  .join-guide-text { flex-basis: 100%; font-size: .86rem; }
  .join-guide-actions { width: 100%; }
  .join-guide-actions .btn-pill { flex: 1 1 0; }
}