/* ============================================
   API 平台 - iOS 液态玻璃风格（侧边栏布局 · 紧凑 · 响应式 · 多主题）
   ============================================ */
:root {
  --text: #1c1c2e;
  --muted: #6b6b80;
  --line: rgba(255, 255, 255, 0.65);
  --glass: rgba(255, 255, 255, 0.55);
  --well: rgba(255, 255, 255, 0.35);
  --well-border: rgba(255, 255, 255, 0.5);
  --row-line: rgba(255, 255, 255, 0.5);
  --field: rgba(255, 255, 255, 0.55);
  --field-hover: rgba(255, 255, 255, 0.7);
  --field-focus: rgba(255, 255, 255, 0.85);
  --code-bg: rgba(0, 0, 0, 0.06);
  --brand: #4f7cff;
  --brand2: #9b5cff;
  --free: #12b76a;
  --paid: #f79009;
  --vip: #9b5cff;
  --danger: #e5484d;
  --radius: 16px;
  --shadow: 0 8px 32px rgba(31, 38, 135, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --bg:
    radial-gradient(900px 500px at 12% 8%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(700px 450px at 88% 12%, rgba(155, 92, 255, 0.16), transparent 60%),
    radial-gradient(800px 500px at 75% 92%, rgba(79, 124, 255, 0.14), transparent 60%),
    linear-gradient(135deg, #b7dcff 0%, #e3d3ff 40%, #ffd9ec 70%, #cdf3e4 100%);
}

/* 主题：复古（洛苏风：米白粉 + 桃粉渐变，前端默认） */
body[data-theme="retro"] {
  --brand: #ff9a76; --brand2: #ffb88c;
  --text: #4a3f3a; --muted: #8d7f76;
  --line: rgba(255, 218, 185, 0.5);
  --glass: rgba(255, 252, 248, 0.72);
  --well: rgba(255, 233, 214, 0.35);
  --well-border: rgba(255, 205, 178, 0.5);
  --field: rgba(255, 255, 255, 0.7);
  --field-hover: rgba(255, 255, 255, 0.9);
  --code-bg: rgba(255, 218, 185, 0.25);
  --shadow: 0 8px 30px rgba(180, 120, 90, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --bg:
    radial-gradient(900px 500px at 12% 8%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(700px 450px at 88% 12%, rgba(255, 218, 185, 0.5), transparent 60%),
    radial-gradient(800px 500px at 72% 90%, rgba(230, 230, 250, 0.6), transparent 60%),
    linear-gradient(135deg, #fff5ee 0%, #fcfbf8 45%, #f5f2ff 100%);
}

/* 主题：薄荷 */
body[data-theme="mint"] {
  --brand: #0ebf8f; --brand2: #2fb8ff;
  --bg:
    radial-gradient(900px 500px at 12% 8%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(700px 450px at 88% 12%, rgba(47, 184, 255, 0.16), transparent 60%),
    radial-gradient(800px 500px at 75% 92%, rgba(14, 191, 143, 0.14), transparent 60%),
    linear-gradient(135deg, #bdf3dc 0%, #cdeeff 40%, #e3f7ff 70%, #d6ffe9 100%);
}

/* 主题：落日 */
body[data-theme="sunset"] {
  --brand: #ff8a3d; --brand2: #ff4d6d;
  --bg:
    radial-gradient(900px 500px at 12% 8%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(700px 450px at 88% 12%, rgba(255, 77, 109, 0.15), transparent 60%),
    radial-gradient(800px 500px at 75% 92%, rgba(255, 138, 61, 0.15), transparent 60%),
    linear-gradient(135deg, #ffe3c4 0%, #ffd9e0 40%, #ffe0ef 70%, #fff0d6 100%);
}

/* 主题：樱粉 */
body[data-theme="sakura"] {
  --brand: #ff6b9d; --brand2: #a66bff;
  --bg:
    radial-gradient(900px 500px at 12% 8%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(700px 450px at 88% 12%, rgba(166, 107, 255, 0.16), transparent 60%),
    radial-gradient(800px 500px at 75% 92%, rgba(255, 107, 157, 0.15), transparent 60%),
    linear-gradient(135deg, #ffe3ee 0%, #f0e0ff 40%, #ffe6f3 70%, #fddcf2 100%);
}

/* 主题：暗夜 */
body[data-theme="night"] {
  --text: #e9e9f4; --muted: #9a9ab3;
  --danger: #ff6b6b;
  --line: rgba(255, 255, 255, 0.14);
  --glass: rgba(32, 34, 58, 0.62);
  --well: rgba(255, 255, 255, 0.07);
  --well-border: rgba(255, 255, 255, 0.12);
  --row-line: rgba(255, 255, 255, 0.1);
  --field: rgba(255, 255, 255, 0.08);
  --field-hover: rgba(255, 255, 255, 0.14);
  --field-focus: rgba(255, 255, 255, 0.18);
  --code-bg: rgba(0, 0, 0, 0.35);
  --brand: #6f8dff; --brand2: #a66bff;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --bg:
    radial-gradient(900px 500px at 12% 8%, rgba(111, 141, 255, 0.12), transparent 60%),
    radial-gradient(700px 450px at 88% 12%, rgba(166, 107, 255, 0.12), transparent 60%),
    radial-gradient(800px 500px at 75% 92%, rgba(0, 0, 0, 0.25), transparent 60%),
    linear-gradient(135deg, #13152c 0%, #1c1e3c 50%, #2a2140 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
  background: var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* 液态玻璃卡片 */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(255, 255, 255, 0.92); }
  body[data-theme="night"] .glass { background: rgba(32, 34, 58, 0.96); }
}

/* ============ 顶部横向标签栏（全宽，桌面/手机自适应） ============ */
.site-nav {
  position: sticky; top: 0; z-index: 110;
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 7px 14px;
  border-radius: 0; border-left: 0; border-right: 0; border-top: 0;
}
.site-nav .logo { font-size: 15px; }
.site-nav .logo i { width: 24px; height: 24px; font-size: 12px; }
.burger { width: 28px; height: 28px; flex-shrink: 0; }
.nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.top-user {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 3px 12px 3px 4px; border-radius: 999px;
  background: var(--well); border: 1px solid var(--well-border);
  font-size: 12.5px; font-weight: 600;
  transition: all 0.18s;
}
.top-user:hover { background: var(--field-hover); }
.top-user .avatar.mini { width: 24px; height: 24px; }
.top-user .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--free);
  box-shadow: 0 0 0 2px rgba(18, 183, 106, 0.25);
}

/* 布局 */
.layout { display: flex; gap: 16px; max-width: 1200px; margin: 0 auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)); align-items: flex-start; }
.main { flex: 1; min-width: 0; }
.spacer { flex: 1; }

/* 侧边栏 */
.sidebar {
  width: 206px; flex-shrink: 0; position: sticky; top: 14px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 14px;
  transition: width 0.25s ease, padding 0.25s ease, opacity 0.2s ease, transform 0.28s ease;
}
/* 桌面端收起：宽度折叠为 0（汉堡切换） */
@media (min-width: 769px) {
  .sidebar:not(.open) {
    width: 0; padding-left: 0; padding-right: 0;
    overflow: hidden; opacity: 0;
    border-left: 0; border-right: 0;
    box-shadow: none;
  }
}
.sidebar .logo { padding: 0 6px; }
.logo { font-weight: 700; font-size: 16px; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; }
.logo i { font-style: normal; width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, var(--brand), var(--brand2)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; box-shadow: 0 4px 12px rgba(79, 124, 255, 0.35); }

/* 用户信息 */
.side-user { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--well); border: 1px solid var(--well-border); }
.side-user-info { flex: 1; min-width: 0; }
.side-nick { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 头像 */
.avatar {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.25), 0 4px 14px rgba(31, 38, 135, 0.25);
  background: #e3e8f5;
}
.avatar.mini { width: 30px; height: 30px; border-width: 1.5px; box-shadow: 0 0 0 2px rgba(79, 124, 255, 0.25), 0 2px 8px rgba(31, 38, 135, 0.2); }

/* 登录/注册入口 */
.side-actions { display: flex; flex-direction: column; gap: 8px; padding: 2px 0; }

/* 导航 */
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.sn-item {
  display: flex; align-items: center; gap: 10px;
  border: 0; background: transparent; cursor: pointer; text-decoration: none;
  color: var(--text); font-size: 13.5px; font-family: inherit;
  padding: 9px 12px; border-radius: 12px; transition: all 0.18s;
  line-height: 1.3;
}
.sn-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.sn-item:hover { background: rgba(255, 255, 255, 0.45); }
.sn-item.active { background: var(--well); font-weight: 600; box-shadow: 0 2px 10px rgba(31, 38, 135, 0.1); }

.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.balance-pill {
  font-size: 13px; padding: 5px 12px; border-radius: 999px; text-align: center;
  background: var(--well); border: 1px solid var(--well-border);
  font-weight: 600;
}

/* 主题色板（侧边栏页脚，小尺寸） */
.theme-mini { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 2px 0; }
.theme-mini .swatch { width: 18px; height: 18px; border-width: 1.5px; }
.swatch {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 6px rgba(31, 38, 135, 0.2);
  transition: transform 0.15s;
}
.swatch:hover { transform: scale(1.18); }
.swatch.on { box-shadow: 0 0 0 2px var(--text), 0 2px 6px rgba(31, 38, 135, 0.25); }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--line); background: var(--field);
  color: var(--text); font-size: 13px; padding: 7px 14px; border-radius: 11px;
  cursor: pointer; transition: all 0.18s; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-family: inherit;
}
.btn:hover { background: var(--field-hover); }
.btn:active { transform: scale(0.97); }
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand2)); border: 0; color: #fff; box-shadow: 0 4px 14px rgba(79, 124, 255, 0.35); }
.btn-primary:hover { filter: brightness(1.08); background: linear-gradient(135deg, var(--brand), var(--brand2)); }
.btn-danger { color: var(--danger); }
.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 9px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* 图标按钮 */
.icon-btn {
  border: 0; background: var(--field); color: var(--text);
  width: 28px; height: 28px; border-radius: 9px; cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.icon-btn:hover { background: var(--field-hover); }

/* 编辑框 */
input, select, textarea {
  font: inherit; color: var(--text); width: 100%;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 14px; outline: none;
  box-shadow: inset 0 1px 3px rgba(31, 38, 135, 0.08);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.7; }
input:hover, select:hover, textarea:hover { background: var(--field-hover); }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  background: var(--field-focus);
  box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.16), inset 0 1px 3px rgba(31, 38, 135, 0.05);
}
label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 4px; }
.form-row { margin-bottom: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* 卡片 */
.card { padding: 16px; }
.card h3 { font-size: 15px; margin-bottom: 10px; }
.card-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.card-title h3 { margin: 0; }
.view { display: none; }
.view.active { display: block; }

/* ============ API 卡片（紧凑） ============ */
.api-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.api-card {
  padding: 13px 14px 11px; display: flex; flex-direction: column; gap: 6px;
  cursor: pointer; transition: transform 0.18s, box-shadow 0.18s;
}
.api-card:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(31, 38, 135, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.api-card.expanded { box-shadow: 0 12px 36px rgba(31, 38, 135, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.api-card .head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.api-card .name { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.api-card .pin { font-size: 12px; flex-shrink: 0; opacity: 0.9; }
.api-card .desc {
  font-size: 12px; color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.9em;
}
.api-card .meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; color: var(--muted); margin-top: 2px;
}
.api-card .price { font-weight: 700; color: var(--text); font-size: 12.5px; }
.api-card .calls { display: inline-flex; align-items: center; gap: 3px; }

/* 接口头像 */
.api-avatar-wrap { position: relative; width: 32px; height: 32px; flex-shrink: 0; }
.api-avatar-wrap .aico {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--well); border-radius: 9px; font-size: 15px;
  border: 1px solid var(--well-border);
}
.api-avatar-wrap img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: 9px;
}

/* 方法 / 返回类型徽标 */
.m-method { background: color-mix(in srgb, var(--brand) 13%, transparent); color: var(--brand); }
.m-type { background: color-mix(in srgb, var(--muted) 12%, transparent); color: var(--muted); }

/* 详情弹窗 */
.api-modal { max-width: 560px; }
.api-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.api-head .api-avatar-wrap { width: 44px; height: 44px; }
.api-head .api-avatar-wrap .aico { font-size: 20px; border-radius: 12px; }
.api-head .api-avatar-wrap img { border-radius: 12px; }
.api-head-info { flex: 1; min-width: 0; }
.api-title { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 2px; }
.block { margin-bottom: 14px; }
.block-title { font-size: 13px; font-weight: 700; margin-bottom: 7px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.block-title::before { content: ''; width: 4px; height: 13px; border-radius: 2px; background: linear-gradient(180deg, var(--brand), var(--brand2)); }
.tbl { font-size: 12.5px; }
.tbl th { background: var(--well); }
.tbl .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.tbl td, .tbl th { padding: 6px 10px; }
.badge { font-size: 10.5px; padding: 1.5px 7px; border-radius: 999px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.badge-free { background: color-mix(in srgb, var(--free) 15%, transparent); color: var(--free); }
.badge-paid { background: color-mix(in srgb, var(--paid) 15%, transparent); color: var(--paid); }
.badge-vip { background: color-mix(in srgb, var(--vip) 15%, transparent); color: var(--vip); }
.badge-key { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.badge-top { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }

/* 徽标 */
.detail { border-top: 1px dashed var(--row-line); padding-top: 10px; margin-top: 6px; font-size: 12.5px; }
.detail .url-box {
  background: var(--code-bg); border-radius: 9px; padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px;
  word-break: break-all; margin: 6px 0;
}
.detail .params { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 8px 0; }
.detail .params dt { color: var(--muted); font-weight: 600; }
.detail .params dd { overflow: hidden; text-overflow: ellipsis; }
.vip-tip {
  margin-top: 8px; padding: 8px 12px; border-radius: 10px; font-size: 12px;
  background: rgba(155, 92, 255, 0.12); border: 1px dashed rgba(155, 92, 255, 0.4); color: var(--vip);
}

/* 列表 */
.list-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--row-line); font-size: 13px; }
.list-item:last-child { border-bottom: 0; }
.list-item .grow { flex: 1; min-width: 0; }
.list-item .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; word-break: break-all; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.success { color: var(--free); }
.fail { color: var(--danger); }

/* 表格 */
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--row-line); }
th { color: var(--muted); font-weight: 600; white-space: nowrap; }
td { word-break: break-all; }

/* 弹窗 */
/* 弹窗（登录/注册弹窗始终置顶，避免被详情弹窗遮挡） */
.modal-mask {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(30, 30, 60, 0.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
#authModal { z-index: 310; }
#linkReqModal { z-index: 315; }
.modal-mask.show { display: flex; }
.modal { position: relative; width: 100%; max-width: 400px; padding: 22px; max-height: 88vh; overflow-y: auto; }
.modal h3 { font-size: 16px; margin-bottom: 16px; text-align: center; }
.modal-close {
  position: absolute; top: 12px; right: 12px; border: 0; cursor: pointer;
  width: 26px; height: 26px; border-radius: 50%; font-size: 12px; color: var(--muted);
  background: var(--field); display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--field-hover); color: var(--text); }
.auth-modal { max-width: 300px; padding: 24px 22px 20px; border-radius: 20px; }
.auth-modal input { padding: 10px 13px; text-align: center; }
.auth-switch { text-align: center; font-size: 12.5px; margin-top: 14px; color: var(--muted); }
.auth-switch a { color: var(--brand); cursor: pointer; font-weight: 600; }

/* 移动端：抽屉侧边栏 */
@media (max-width: 768px) {
  body { font-size: 13.5px; }
  .layout { padding: 0 12px; gap: 0; padding-bottom: calc(35px + env(safe-area-inset-bottom, 0px)); }
  /* 顶部标签栏紧凑：隐藏 logo 文字、缩小按钮 */
  .site-nav { padding: 6px 10px; gap: 8px; }
  .site-nav .logo span { display: none; }
  .site-nav .logo { gap: 0; }
  .nav-right { gap: 6px; }
  .site-nav .btn-sm { padding: 3px 9px; font-size: 12px; }
  .top-user { padding: 2px 9px 2px 3px; font-size: 12px; }
  .sidebar {
    position: fixed; top: 10px; bottom: 10px; left: 10px; width: 226px; z-index: 200;
    transform: translateX(-115%); border-radius: 20px;
  }
  .sidebar.open { transform: none; }
  .main { padding-top: 4px; }
}

/* 管理后台：顶部导航 */
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px 40px; }
.topbar {
  position: sticky; top: 8px; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; margin-top: 12px; flex-wrap: wrap;
}
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab-btn {
  border: 0; background: transparent; color: var(--muted); text-decoration: none;
  font-size: 13px; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  transition: all 0.2s; font-family: inherit;
}
.tab-btn.active { background: var(--well); color: var(--text); box-shadow: 0 2px 10px rgba(31, 38, 135, 0.1); }

/* 抽屉遮罩 */
.drawer-mask { display: none; position: fixed; inset: 0; background: rgba(20, 20, 50, 0.3); z-index: 150; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.drawer-mask.show { display: block; }

/* 消息提示 */
.toast {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  padding: 8px 18px; border-radius: 999px; font-size: 13px; z-index: 999;
  background: rgba(28, 28, 46, 0.85); color: #fff; opacity: 0;
  transition: opacity 0.25s; pointer-events: none;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  white-space: nowrap; max-width: 90vw; overflow: hidden; text-overflow: ellipsis;
}
.toast.show { opacity: 1; }

/* 后台参数/状态码板块（纵向卡片，不超出弹窗） */
.kv-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; width: 100%; }
.kv-card {
  border: 1px solid var(--row-line); border-radius: 12px;
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
  background: var(--well);
}
.kv-line { display: flex; gap: 8px; width: 100%; }
.kv-line input, .kv-line select { padding: 7px 10px; font-size: 12.5px; width: 100%; min-width: 0; }
.kv-line select { width: 84px; flex-shrink: 0; }
.kv-ops { display: flex; gap: 8px; justify-content: flex-end; }

/* 公告卡片（紧凑矮一点） */
.notice-card { padding: 8px 12px; gap: 5px; }
.notice-card .n-title { font-size: 13px; }
.notice-card .n-preview { font-size: 11.5px; }
.notice-card .n-actions { padding-top: 2px; }

/* 后台用户卡片 */
.user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.user-card { padding: 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: transform 0.18s, box-shadow 0.18s; }
.user-card:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(31, 38, 135, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.u-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 2px rgba(79, 124, 255, 0.2); }
.u-info { flex: 1; min-width: 0; }
.u-name { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-account { font-size: 12px; color: var(--muted); }
.u-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.u-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.u-detail-grid b { display: block; font-size: 13px; word-break: break-all; }

/* 后台接口卡片 */
.api-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.api-admin-card { padding: 13px 14px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: transform 0.18s, box-shadow 0.18s; }
.api-admin-card:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(31, 38, 135, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.api-admin-card .head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.api-admin-card .name { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.api-admin-card .ep { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-admin-card .meta { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--muted); }
.user-modal { max-width: 520px; }

/* 后台登录页 */
.login-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px;
}
.login-card {
  width: 100%; max-width: 340px; padding: 34px 30px 28px;
  border-radius: 22px;
}
.login-logo {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 17px; font-weight: 700; margin-bottom: 6px;
}
.login-logo i {
  font-style: normal; width: 30px; height: 30px; border-radius: 10px;
  background: linear-gradient(135deg, var(--brand), var(--brand2)); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
  box-shadow: 0 4px 12px rgba(79, 124, 255, 0.35);
}
.login-sub { text-align: center; color: var(--muted); font-size: 12.5px; margin-bottom: 22px; }
.login-msg { text-align: center; font-size: 12.5px; margin-top: 14px; min-height: 18px; }
.login-card .btn-block { margin-top: 4px; padding: 10px; font-size: 14px; }

/* 后台统计卡片 */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stat-card { padding: 16px 12px; text-align: center; }
.stat-card .num { font-size: 26px; font-weight: 800; background: linear-gradient(135deg, var(--brand), var(--brand2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-card .lab { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* 顶栏居中标题 + 在线人数标签 */
.nav-center {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.nav-title {
  font-size: 15px; font-weight: 800; letter-spacing: 1px;
}
.online-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--muted);
  background: var(--well); border: 1px solid var(--well-border);
  border-radius: 999px; padding: 2px 8px 2px 6px;
}
.online-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--free);
  flex-shrink: 0;
  animation: onlinePulse 1.8s ease-out infinite;
}
@keyframes onlinePulse {
  0% { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0.5), 0 0 6px rgba(18, 183, 106, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(18, 183, 106, 0), 0 0 6px rgba(18, 183, 106, 0.6); }
  100% { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0), 0 0 6px rgba(18, 183, 106, 0.6); }
}
.site-nav { position: sticky; top: 0; z-index: 110; display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 14px; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }

/* SVG 图标容器 */
.ico { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex-shrink: 0; }
.ico svg { width: 100%; height: 100%; display: block; }
.btn-ico { width: 12px; height: 12px; }
.api-card .pin { font-size: 12px; flex-shrink: 0; opacity: 0.9; color: var(--brand); display: inline-flex; }
.api-card .pin .ico { width: 13px; height: 13px; }
.api-card .calls { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.api-card .calls .ico { width: 12px; height: 12px; color: var(--paid); }

/* 接口头像：首字色块 */
.api-avatar-wrap .aico {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; font-size: 14px; font-weight: 700; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.api-avatar-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }

/* 参数动态表单（请求测试） */
.tparams { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.tparam { display: flex; align-items: center; gap: 8px; }
.tparam .tname {
  min-width: 80px; font-size: 12.5px; font-weight: 600;
  background: var(--well); border-radius: 8px; padding: 6px 10px; text-align: center;
}
.tparam .tname-input { width: 90px; padding: 6px 10px; font-size: 12.5px; }
.tparam .tval { padding: 7px 12px; font-size: 13px; }
.tparam .icon-btn { width: 26px; height: 26px; }

/* 请求测试结果 */
.test-result { margin-top: 10px; }
.tresult { border: 1px solid var(--row-line); border-radius: 12px; overflow: hidden; background: var(--code-bg); }
.tr-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 12px; background: var(--well); border-bottom: 1px solid var(--row-line);
}
.tresult pre {
  margin: 0; padding: 10px 12px; font-size: 12px; max-height: 260px; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap; word-break: break-all;
}

/* 多语言代码块（带行号 + 高亮） */
.code-tabs { display: flex; flex-direction: column; gap: 10px; }
.code-block { border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); background: #14162e; }
.code-head { padding: 6px 12px; font-size: 11.5px; font-weight: 700; color: #8fa3ff; background: rgba(255, 255, 255, 0.06); letter-spacing: 0.5px; }
.code-scroll { display: flex; max-height: 300px; overflow: auto; }
.code-lines { display: flex; flex-direction: column; padding: 10px 0; min-width: 34px; text-align: right; user-select: none; background: rgba(255, 255, 255, 0.03); }
.cln { padding: 0 8px 0 4px; font-size: 11.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.3); font-family: ui-monospace, Menlo, Consolas, monospace; }
.code-body { display: flex; flex-direction: column; padding: 10px 0; flex: 1; }
.cline { padding: 0 12px; font-size: 12px; line-height: 1.7; color: #d6d9f0; font-family: ui-monospace, Menlo, Consolas, monospace; white-space: pre; }
.tk-str { color: #9ee6a8; }
.tk-kw { color: #ff9eb3; font-weight: 600; }
.tk-cm { color: #7a7fa8; }

/* 弹窗头部（标题居中） */
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal-head.center { justify-content: center; }
.modal-head h3 { margin: 0; }

/* 控制台申请友链板块（主题渐变卡片） */
.link-req-panel {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff; transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 6px 18px rgba(79, 124, 255, 0.3);
}
.link-req-panel:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(79, 124, 255, 0.4); }
.lr-ico { width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lr-ico svg { width: 18px; height: 18px; }
.lr-txt { flex: 1; font-weight: 700; font-size: 14px; display: flex; flex-direction: column; }
.lr-txt small { font-weight: 400; font-size: 11.5px; opacity: 0.85; margin-top: 2px; }
.lr-go { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lr-go svg { width: 16px; height: 16px; }
.link-req-result {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 9px 12px; border-radius: 10px; font-size: 12.5px;
  background: var(--well); border: 1px solid var(--well-border);
}
.link-req-result .ico { color: var(--brand); }

/* 友链头像（链接图覆盖首字，只显示一个） */
.l-avatar-wrap { position: relative; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; overflow: hidden; }
.l-avatar-wrap .l-avatar { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 头像图盖在首字色块上层（色块作为加载失败兜底），圆形裁剪 */
.l-avatar-wrap img.l-avatar { z-index: 2; object-fit: cover; }
.l-avatar-wrap .l-char { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 700; }
.l-avatar-wrap.l-big-wrap { width: 64px; height: 64px; }
.l-avatar-wrap.l-big-wrap .l-char { font-size: 26px; }

/* 友链详情（分块排版） */
.link-detail { text-align: center; margin-top: 4px; }
.ld-avatar { margin: 14px 0 10px; display: flex; justify-content: center; }
.ld-title { font-size: 17px; font-weight: 800; margin-bottom: 5px; word-break: break-word; }
.ld-desc { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; word-break: break-word; }
.ld-qq {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 12.5px; color: var(--muted); margin-bottom: 10px;
}
.ld-qq .ico { color: var(--brand); }
/* 链接小细长标签（跟随主题色） */
.url-chip {
  display: inline-block; max-width: 100%;
  font-size: 11.5px; padding: 3px 14px; border-radius: 999px;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.ld-url { margin: 10px 0 14px; }

/* 友链详情 */
.links-modal { max-width: 460px; }
.link-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
/* 后台申请卡片地址截断 */
.lr-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.link-card {
  padding: 12px; display: flex; align-items: center; gap: 10px; cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
}
.link-card:hover { transform: translateY(-2px); }
.l-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; position: relative; }
.l-char {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; font-weight: 700;
}
.l-avatar.l-big { width: 64px; height: 64px; font-size: 26px; }
.l-info { flex: 1; min-width: 0; }
.l-name { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 设计主题列表 */
.design-list { display: flex; flex-direction: column; gap: 8px; }
.design-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line); cursor: pointer; background: var(--field);
  transition: all 0.18s;
}
.design-item:hover { background: var(--field-hover); }
.design-item.on { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(79, 124, 255, 0.2); }
.design-ico { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--brand), var(--brand2)); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.design-info { flex: 1; display: flex; flex-direction: column; }

/* ============ 设计主题（整体风格，与颜色主题正交） ============ */
body[data-design="flat"] {
  --glass: rgba(255, 255, 255, 0.88);
  --shadow: none;
}
body[data-design="flat"] .glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
body[data-design="round"] { --radius: 24px; }
body[data-design="round"] .api-card { border-radius: 26px; }
body[data-design="square"] { --radius: 4px; }
body[data-design="square"] .api-card { border-radius: 6px; }
body[data-design="square"] .badge { border-radius: 3px; }
body[data-design="compact"] { font-size: 13px; }
body[data-design="compact"] .card { padding: 10px; }
body[data-design="compact"] .api-card { padding: 9px 11px; gap: 4px; }
body[data-design="compact"] .api-grid { gap: 8px; }
body[data-design="compact"] .sn-item { padding: 6px 10px; }

/* 用户操作按钮横排 */
.u-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.u-actions .btn-sm { padding: 6px 10px; }

/* 公告 */
.notice-modal { max-width: 520px; }
.notice-title { font-size: 17px; font-weight: 800; text-align: center; margin-bottom: 4px; }
.notice-date { text-align: center; margin-bottom: 12px; }
.notice-content { font-size: 13.5px; line-height: 1.75; word-break: break-word; }
.notice-content img { max-width: 100%; border-radius: 10px; }
.notice-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.notice-card { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.n-main { flex: 1; cursor: pointer; }
.n-title { font-size: 13.5px; font-weight: 700; }
.n-preview { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* 多语言 tab */
.code-tabbar { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.code-tab {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--line); background: var(--field); color: var(--muted);
  font-size: 12px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  font-family: inherit; transition: all 0.18s;
}
.code-tab:hover { background: var(--field-hover); }
.code-tab.on { background: linear-gradient(135deg, var(--brand), var(--brand2)); color: #fff; border-color: transparent; }
.code-pane { display: none; }
.code-pane.on { display: block; }

/* JSON 结果高亮（浅色区） */
.jk { color: #6b4dff; font-weight: 600; }
.js { color: #0b8a5c; }
.jn { color: #d35400; }
.jb { color: #9b59b6; font-weight: 600; }

/* 左侧页脚悬浮球（搜索 + 滚动置顶/置底） */
.float-ball {
  position: fixed; left: 16px; z-index: 400;
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(31, 38, 135, 0.32); cursor: pointer;
  transition: transform 0.18s, opacity 0.2s;
  touch-action: manipulation;
}
.float-ball:hover { transform: scale(1.1); }
.float-ball .ico { width: 17px; height: 17px; }
#searchBall { bottom: 68px; }
#scrollBall { bottom: 22px; opacity: 0; pointer-events: none; }
#scrollBall.show { opacity: 1; pointer-events: auto; }
.api-search-panel {
  position: fixed; left: 60px; bottom: 72px; z-index: 400;
  width: 230px; padding: 6px;
  opacity: 0; pointer-events: none; transform: translateX(-10px);
  transition: all 0.22s;
}
.api-search-panel.open { opacity: 1; pointer-events: auto; transform: none; }
.api-search-panel input { padding: 8px 12px; font-size: 13px; border-radius: 10px; }

/* 调用统计弹窗 */
.callstats-modal { max-width: 560px; }
.stat-top { display: flex; justify-content: flex-start; margin-bottom: 10px; }
/* 趋势展开按钮（常态渐变渲染，跟随主题色，hover/active 不被白色覆盖） */
.trend-toggle {
  gap: 6px; border-radius: 999px; padding: 6px 14px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 12px rgba(79, 124, 255, 0.35);
  transition: transform 0.15s;
}
.trend-toggle .ico { color: #fff; }
.trend-toggle:hover {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  transform: scale(1.03);
}
.trend-toggle:active {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
}
.trend-box { margin-bottom: 14px; }
.trend-title { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
/* 柱状趋势：数字/柱/日期分区，不超出区域 */
.trend-chart {
  display: flex; align-items: stretch; gap: 8px;
  height: 150px; padding: 8px 10px;
  background: var(--code-bg); border-radius: 12px;
}
.tcol { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.tnum { height: 16px; line-height: 16px; font-size: 10px; font-weight: 700; color: var(--text); }
.tbar-area { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; min-height: 0; }
.tbar {
  height: 0; width: 60%; max-width: 30px; min-height: 3px;
  background: linear-gradient(180deg, var(--brand), var(--brand2));
  border-radius: 4px 4px 2px 2px;
  transition: height 0.3s;
}
.tdate { height: 15px; line-height: 15px; font-size: 10px; color: var(--muted); }
/* 总调用趋势折线图（已替换为横向柱，样式保留兜底） */
.callstat-item { margin-bottom: 10px; }
.cs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; margin-bottom: 4px; }
.cs-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-num { color: var(--muted); flex-shrink: 0; font-size: 11.5px; }
.cs-num b { color: var(--text); }
.cs-bar { height: 8px; background: var(--code-bg); border-radius: 999px; overflow: hidden; }
.cs-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand2)); border-radius: 999px; }

/* KEY 描边字（醒目） */
.key-item { background: var(--well); border-radius: 10px; margin-bottom: 8px; border: 1px solid var(--well-border); }
.key-stroke {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px;
  color: var(--brand); word-break: break-all;
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.85), 1px -1px 0 rgba(255, 255, 255, 0.85),
    -1px 1px 0 rgba(255, 255, 255, 0.85), 1px 1px 0 rgba(255, 255, 255, 0.85),
    0 0 8px rgba(79, 124, 255, 0.35);
}
body[data-theme="night"] .key-stroke {
  text-shadow:
    -1px -1px 0 rgba(20, 22, 46, 0.9), 1px -1px 0 rgba(20, 22, 46, 0.9),
    -1px 1px 0 rgba(20, 22, 46, 0.9), 1px 1px 0 rgba(20, 22, 46, 0.9),
    0 0 10px rgba(111, 141, 255, 0.5);
}

/* 调用记录头部 */
.logs-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: 12.5px; color: var(--muted);
  border-bottom: 1px solid var(--row-line);
}
.logs-head .ico { color: var(--brand); }
.logs-head b { color: var(--text); font-size: 14px; }

/* 用户调用排行 */
.rank-modal { max-width: 520px; }
.rank-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--row-line); }
.rank-item:last-child { border-bottom: 0; }
.rank-info { flex: 1; min-width: 0; }
.rank-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-bar { height: 7px; background: var(--code-bg); border-radius: 999px; overflow: hidden; margin-top: 4px; }
.rank-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand2)); border-radius: 999px; }
.rank-num { flex-shrink: 0; font-size: 12px; text-align: right; }
.rank-num b { font-size: 14px; color: var(--text); }

/* 空状态 */
.empty { text-align: center; color: var(--muted); font-size: 13px; padding: 30px 0; }

/* 响应式 */
@media (max-width: 900px) {
  .api-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .main { padding-top: 4px; }
  .api-grid { grid-template-columns: 1fr; gap: 10px; }
  .form-grid { grid-template-columns: 1fr; }
  .card { padding: 14px; }
  .table-scroll { overflow-x: auto; }
  .table-scroll table { min-width: 560px; }
}


/* 接口 ID 标签 */
.aid {
  font-size: 10.5px; font-weight: 700; color: var(--muted);
  background: var(--well); border: 1px solid var(--well-border);
  padding: 1px 6px; border-radius: 6px; flex-shrink: 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* 后台接口卡片头像状态标签 */
.aid-tag {
  font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px; flex-shrink: 0;
  white-space: nowrap;
}
.aid-tag.av-set { background: color-mix(in srgb, var(--free) 14%, transparent); color: var(--free); }
.aid-tag.av-def { background: color-mix(in srgb, var(--muted) 12%, transparent); color: var(--muted); }

/* 用户详情密码行 */
.pwd-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 8px 10px; border-radius: 10px;
  background: var(--well); border: 1px solid var(--well-border);
}
.pwd-val { font-size: 12px; word-break: break-all; }
.pwd-row .icon-btn { width: 26px; height: 26px; flex-shrink: 0; }

/* 后台友链表格小头像 */
.l-mini { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: inline-block; }
.l-mini-ch {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--well); color: var(--muted);
  font-size: 11px; font-weight: 700; border: 1px solid var(--well-border);
}

/* ============================================
   在线商城
   ============================================ */
#view-shop { padding-bottom: 110px; }

/* 底部标签栏（固定在视口底部，离底留一小段距离） */
.shop-nav {
  position: fixed; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: 50%;
  transform: translateX(-50%); z-index: 50;
  display: flex; width: calc(100% - 24px); max-width: 420px;
  border-radius: 22px; padding: 6px;
  box-shadow: var(--shadow);
}
.shop-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border: 0; border-radius: 16px;
  background: transparent; color: var(--muted);
  font-size: 12px; cursor: pointer;
}
.shop-tab .st-ico { display: flex; width: 22px; height: 22px; }
.shop-tab.active { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
.shop-tab.active .st-ico { color: var(--brand); }

/* 商品网格：手机 2 列，桌面自适应 */
.shop-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
@media (min-width: 640px) {
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
}
.sp-card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius); cursor: pointer;
  transition: transform .15s ease;
}
.sp-card:active { transform: scale(.97); }
.sp-cover {
  position: relative; aspect-ratio: 1 / 1; width: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--well); overflow: hidden;
}
.sp-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.sp-char {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: 30px; font-weight: 700; color: #fff;
}
.sp-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 3px; }
.sp-name {
  font-size: 13px; font-weight: 600; line-height: 1.35; min-height: 35px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-all;
}
.sp-meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-price { font-size: 15px; font-weight: 700; color: var(--brand); }

.shop-loading { text-align: center; color: var(--muted); padding: 40px 0; font-size: 13px; }

/* 商品详情 */
.sp-detail .sp-main-img {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  background: var(--well); border-radius: var(--radius); overflow: hidden;
}
.sp-detail .sp-main-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.sp-detail .sp-main-img .sp-char { font-size: 44px; }
.sp-thumbs { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.sp-thumb {
  width: 52px; height: 52px; border-radius: 10px; overflow: hidden;
  border: 2px solid transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; background: var(--well);
}
.sp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sp-thumb.on { border-color: var(--brand); }
.sp-title { font-size: 17px; font-weight: 700; margin-top: 12px; line-height: 1.4; }
.sp-price-big { font-size: 22px; font-weight: 700; color: var(--brand); margin-top: 6px; }
.sp-desc { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }
.sp-fileinfo, .sp-seller { font-size: 12px; color: var(--muted); margin-top: 8px; }
.sp-btns { display: flex; gap: 8px; margin-top: 14px; }

/* 购买记录 */
.shop-order-list { display: flex; flex-direction: column; gap: 10px; }
.so-card {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius); cursor: pointer;
}
.so-main { flex: 1; min-width: 0; }
.so-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.so-right { text-align: right; flex-shrink: 0; }
.so-price { font-size: 15px; font-weight: 700; color: var(--brand); margin-bottom: 4px; }
.pager { display: flex; justify-content: center; align-items: center; margin: 14px 0 6px; }

/* 商家面板 */
.panel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pcard {
  display: flex; align-items: center; gap: 10px; padding: 14px;
  border-radius: var(--radius); border: 0; cursor: pointer; text-align: left;
}
.pcard .pc-ico { display: flex; width: 20px; height: 20px; color: var(--brand); }
.pcard .pc-t { font-size: 14px; font-weight: 600; color: var(--text); }
.pcard.on { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.pcard.on .pc-t { color: var(--brand); }

/* 商城 v71：卡片变短、轮换圆点、搜索框、倒计时、关闭置顶 */
.sp-cover { aspect-ratio: 4 / 3; }
.modal-close { z-index: 5; }
.sp-dots {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; z-index: 2;
}
.sp-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55); transition: background .3s;
}
.sp-dots i.on { background: #fff; }
.shop-search {
  position: relative; margin: 2px 0 12px;
}
.shop-search .ss-ico {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  display: flex; width: 16px; height: 16px; color: var(--muted); pointer-events: none;
}
.shop-search input {
  width: 100%; padding: 10px 12px 10px 36px;
  border-radius: 14px; border: 1px solid var(--well-border);
  background: var(--field); color: var(--text); font-size: 14px; outline: none;
}
.shop-search input:focus { border-color: var(--brand); background: var(--field-focus); }
.dl-count {
  display: inline-block; font-size: 11px; font-weight: 600;
  color: var(--free); background: color-mix(in srgb, var(--free) 12%, transparent);
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.dl-count.dead { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }

/* 商品标签：置顶（品牌渐变）+ 热销（橙红渐变），封面左上角 */
.sp-tags {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
}
.sp-tag {
  font-size: 10px; font-weight: 700; color: #fff;
  padding: 2px 8px; border-radius: 999px; line-height: 1.5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.tag-top { background: linear-gradient(135deg, var(--brand), var(--brand2)); }
.tag-hot { background: linear-gradient(135deg, #ff8a3d, #ff4d6d); }

/* JSON body 编辑框（POST 接口测试） */
.json-body {
  width: 100%; min-height: 110px; resize: vertical;
  border-radius: 12px; border: 1px solid var(--well-border);
  background: var(--code-bg); color: var(--text);
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px;
  padding: 10px 12px; outline: none; line-height: 1.6;
}
.json-body:focus { border-color: var(--brand); }

/* ============================================
   新主题：海洋 / 紫罗兰 / 翡翠 / 暗夜蓝
   ============================================ */
body[data-theme="ocean"] {
  --brand: #1e90ff; --brand2: #00d2ff;
  --bg:
    radial-gradient(900px 500px at 12% 8%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(700px 450px at 88% 12%, rgba(0, 210, 255, 0.16), transparent 60%),
    radial-gradient(800px 500px at 75% 92%, rgba(30, 144, 255, 0.15), transparent 60%),
    linear-gradient(135deg, #c9ecff 0%, #d8f4ff 40%, #e6f9ff 70%, #cfe8ff 100%);
}
body[data-theme="violet"] {
  --brand: #8b5cf6; --brand2: #ec4899;
  --bg:
    radial-gradient(900px 500px at 12% 8%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(700px 450px at 88% 12%, rgba(236, 72, 153, 0.14), transparent 60%),
    radial-gradient(800px 500px at 75% 92%, rgba(139, 92, 246, 0.16), transparent 60%),
    linear-gradient(135deg, #e9dcff 0%, #f3e2ff 40%, #ffe3f0 70%, #ede0ff 100%);
}
body[data-theme="emerald"] {
  --brand: #10b981; --brand2: #34d399;
  --bg:
    radial-gradient(900px 500px at 12% 8%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(700px 450px at 88% 12%, rgba(52, 211, 153, 0.15), transparent 60%),
    radial-gradient(800px 500px at 75% 92%, rgba(16, 185, 129, 0.13), transparent 60%),
    linear-gradient(135deg, #cdf5e2 0%, #e0faf0 40%, #e6fff5 70%, #d2f6e6 100%);
}
body[data-theme="midnight"] {
  --text: #e8ecf7; --muted: #94a3b8; --danger: #f87171;
  --line: rgba(255, 255, 255, 0.12);
  --glass: rgba(15, 23, 42, 0.72);
  --well: rgba(255, 255, 255, 0.08);
  --well-border: rgba(255, 255, 255, 0.14);
  --row-line: rgba(255, 255, 255, 0.1);
  --field: rgba(255, 255, 255, 0.09);
  --field-hover: rgba(255, 255, 255, 0.15);
  --field-focus: rgba(255, 255, 255, 0.2);
  --code-bg: rgba(0, 0, 0, 0.4);
  --brand: #60a5fa; --brand2: #a78bfa;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --bg:
    radial-gradient(900px 500px at 12% 8%, rgba(96, 165, 250, 0.14), transparent 60%),
    radial-gradient(700px 450px at 88% 12%, rgba(167, 139, 250, 0.12), transparent 60%),
    radial-gradient(800px 500px at 75% 92%, rgba(0, 0, 0, 0.3), transparent 60%),
    linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #312e81 100%);
}

/* 移动端性能优化：降低毛玻璃模糊半径（blur 是重绘卡顿主因） */
@media (max-width: 768px) {
  .glass, .modal, .shop-nav, .code-block, .url-box, .tresult {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }
  :root { --glass: rgba(255, 255, 255, 0.74); }
  body[data-theme="night"] { --glass: rgba(32, 34, 58, 0.8); }
  body[data-theme="midnight"] { --glass: rgba(15, 23, 42, 0.82); }
}

/* ============================================
   新主题二：蜜桃 / 极光 / 青柠 / 火焰
   ============================================ */
body[data-theme="peach"] {
  --brand: #ff7e5f; --brand2: #feb47b;
  --bg:
    radial-gradient(900px 500px at 12% 8%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(700px 450px at 88% 12%, rgba(254, 180, 123, 0.18), transparent 60%),
    radial-gradient(800px 500px at 75% 92%, rgba(255, 126, 95, 0.14), transparent 60%),
    linear-gradient(135deg, #ffe8d6 0%, #ffdde1 40%, #fff0e0 70%, #ffe3d0 100%);
}
body[data-theme="aurora"] {
  --brand: #a855f7; --brand2: #06b6d4;
  --bg:
    radial-gradient(900px 500px at 12% 8%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(700px 450px at 88% 12%, rgba(6, 182, 212, 0.15), transparent 60%),
    radial-gradient(800px 500px at 75% 92%, rgba(168, 85, 247, 0.16), transparent 60%),
    linear-gradient(135deg, #e6dcff 0%, #d6f5ff 40%, #e8faff 70%, #ecdfff 100%);
}
body[data-theme="lime"] {
  --brand: #84cc16; --brand2: #22c55e;
  --bg:
    radial-gradient(900px 500px at 12% 8%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(700px 450px at 88% 12%, rgba(34, 197, 94, 0.14), transparent 60%),
    radial-gradient(800px 500px at 75% 92%, rgba(132, 204, 22, 0.14), transparent 60%),
    linear-gradient(135deg, #e2f5c8 0%, #e0f9e8 40%, #effbe2 70%, #d9f5c9 100%);
}
body[data-theme="flame"] {
  --brand: #f97316; --brand2: #ef4444;
  --bg:
    radial-gradient(900px 500px at 12% 8%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(700px 450px at 88% 12%, rgba(239, 68, 68, 0.13), transparent 60%),
    radial-gradient(800px 500px at 75% 92%, rgba(249, 115, 22, 0.16), transparent 60%),
    linear-gradient(135deg, #ffe8d1 0%, #ffe0dd 40%, #fff0e2 70%, #ffdcc9 100%);
}

/* 滑杆美化（主题色圆滑块） */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 25%, transparent);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand); border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand); border: 3px solid #fff; cursor: pointer;
}

/* 弹窗关闭按钮：统一固定在右上角（圆形、主题自适应） */
.modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 99;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 0; font-size: 13px; cursor: pointer; line-height: 1;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: var(--muted);
}
.modal-close:hover { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }

/* 弹窗打开时锁定页面滚动 */
body.modal-open { overflow: hidden; }

/* ============================================
   设计主题扩展：新拟态 / 糖果风 / 线条风 / 复古
   ============================================ */
body[data-design="neo"] {
  --radius: 20px;
  --shadow: 6px 6px 14px rgba(31, 38, 135, 0.14), -6px -6px 14px rgba(255, 255, 255, 0.85);
  --glass: rgba(255, 255, 255, 0.55);
}
body[data-design="neo"] .glass { border: 1px solid rgba(255, 255, 255, 0.6); }
body[data-design="neo"] .btn { box-shadow: 3px 3px 8px rgba(31, 38, 135, 0.18), -3px -3px 8px rgba(255, 255, 255, 0.7); }

body[data-design="candy"] {
  --radius: 26px;
  --glass: rgba(255, 255, 255, 0.82);
  --shadow: 0 12px 32px rgba(255, 107, 157, 0.22);
}
body[data-design="candy"] .api-card { border: 2px solid rgba(255, 255, 255, 0.9); }
body[data-design="candy"] .btn { font-weight: 800; letter-spacing: 0.5px; }

body[data-design="line"] {
  --radius: 12px;
  --glass: rgba(255, 255, 255, 0.6);
  --shadow: none;
}
body[data-design="line"] .glass { border: 1px solid var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
body[data-design="line"] .card-title h3 { letter-spacing: 1px; }

body[data-design="retro"] {
  --radius: 16px;
  --glass: rgba(253, 246, 227, 0.88);
  --shadow: 4px 4px 0 rgba(28, 28, 46, 0.28);
  --well: rgba(255, 255, 255, 0.55);
}
body[data-design="retro"] .glass { border: 1.5px solid rgba(28, 28, 46, 0.25); }
body[data-design="retro"] .btn { border: 1.5px solid currentColor; }

/* 深色主题性能：降低毛玻璃半径（night 深色下 blur 更耗性能） */
@media (max-width: 768px) {
  body[data-theme="night"] { --glass: rgba(32, 34, 58, 0.8); }
}

/* 弹窗关闭按钮：sticky 停靠，内容滚动时不顶掉；圆角跟随主题 */
.modal-close {
  position: sticky; top: 10px; float: right; z-index: 99;
  width: 30px; height: 30px; margin: 0 0 -30px 8px;
  border-radius: 50%; border: 0; font-size: 13px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: var(--muted);
}
.modal-close:hover { background: color-mix(in srgb, var(--danger) 20%, transparent); color: var(--danger); }

/* 弹窗结构重构：内容在 .modal-scroll 内滚动，✕ 挂弹窗右上角（一半在弹窗内一半在外，圆角跟随主题） */
.modal { overflow: visible; max-height: none; }
.modal-scroll { overflow-y: auto; max-height: calc(88vh - 44px); }
.modal-close {
  position: absolute; top: -14px; right: -14px; z-index: 99;
  width: 28px; height: 28px; border-radius: var(--radius);
  border: 0; font-size: 13px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--field);
  color: var(--muted);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
}
.modal-close:hover { background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--danger); }

/* ============================================
   弹窗尺寸收窄（整体更精致，公告重点缩小）
   ============================================ */
.modal { max-width: 372px; padding: 18px 18px 16px; }
.modal-scroll { max-height: calc(82vh - 40px); }
.auth-modal { max-width: 292px; padding: 22px 20px 18px; border-radius: 20px; }
.api-modal { max-width: 500px; }
.links-modal { max-width: 420px; }
.callstats-modal { max-width: 460px; }
.rank-modal { max-width: 420px; }

/* 公告弹窗：窄而紧凑 */
.notice-modal { max-width: 340px; }
.notice-modal .modal-scroll { max-height: 55vh; }
.notice-modal h3 { font-size: 15px; margin-bottom: 10px; }
.notice-body { font-size: 13px; line-height: 1.7; }

/* ============================================
   性能修复：彻底移除毛玻璃模糊（半透明背景代替，视觉接近、滚动/切换不再卡顿）
   ============================================ */
.glass, .modal, .shop-nav, .code-block, .url-box, .tresult, .site-nav, .sidebar,
.api-search-panel, .float-ball, .notice-body {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
:root { --glass: rgba(255, 255, 255, 0.8); }
body[data-theme="night"] { --glass: rgba(32, 34, 58, 0.86); }
body[data-theme="midnight"] { --glass: rgba(15, 23, 42, 0.9); }

/* 公告弹窗：恢复美观 + 内容自适应高度（无需滚动看完整公告） */
.notice-modal { max-width: 430px; }
.notice-modal .modal-scroll { max-height: none; }
.notice-modal h3 {
  font-size: 16px; font-weight: 700;
  border-bottom: 1px solid var(--row-line);
  padding-bottom: 10px; margin-bottom: 12px;
  text-align: center;
}
.notice-body { font-size: 13.5px; line-height: 1.8; white-space: pre-wrap; word-break: break-all; }

/* ============================================
   滚动特效 + API 卡片收纳小球
   ============================================ */
html { scroll-behavior: smooth; }

.api-trash-ball {
  position: fixed; z-index: 120;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--glass);
  border: 1.5px solid var(--brand); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: transform .15s ease;
  overflow: hidden;
}
.api-trash-ball:hover { transform: scale(1.12); }
.api-trash-ball:active { transform: scale(.95); }

/* 收纳球：形状跟随主题（圆角/方形），显示 API 头像 */
.api-trash-ball { border-radius: var(--radius); }
.api-trash-ball .api-avatar {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: inherit; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #fff;
}
.api-trash-ball img.api-avatar { object-fit: cover; }

/* 商家协议正文 */
.agree-body {
  font-size: 13px; line-height: 1.8; color: var(--text);
  white-space: pre-wrap; word-break: break-all; text-align: left;
}

/* 今日爬虫记录小卡片 */
.sec-list { display: flex; flex-direction: column; gap: 6px; }
.sec-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 12px; cursor: pointer;
  background: var(--well); border: 1px solid var(--well-border);
  transition: background .15s;
}
.sec-card:hover { background: var(--field-hover); }
.sec-ico {
  display: flex; width: 18px; height: 18px; color: var(--brand); flex-shrink: 0;
}
.sec-go { color: var(--muted); font-size: 16px; }

/* 爬虫统计小卡（横向一排，紧凑） */
.sec-stat {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 6px; border-radius: 12px;
  background: var(--well); border: 1px solid var(--well-border);
}
.sec-stat b { font-size: 15px; font-weight: 700; }

/* ============================================
   悬浮音乐播放器
   ============================================ */
.music-ball {
  position: fixed; right: 18px; bottom: 96px; z-index: 130;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: transform .15s ease;
  touch-action: none;
}
.music-ball:active { transform: scale(.92); }
.music-ball .ico { display: flex; width: 22px; height: 22px; }
.music-ball .ico svg { width: 100%; height: 100%; }

.music-panel {
  position: fixed; right: 18px; bottom: 150px; z-index: 131;
  width: 300px; max-height: 72vh; overflow-y: auto;
  border-radius: 18px; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.mp-head { display: flex; align-items: center; gap: 10px; }
.mp-pic {
  width: 44px; height: 44px; border-radius: 12px; object-fit: cover;
  background: var(--well); flex-shrink: 0;
}
.mp-info { flex: 1; min-width: 0; }
.mp-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-close {
  width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--well); color: var(--muted); flex-shrink: 0;
}
.mp-progress { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.mp-progress input[type="range"] { flex: 1; }
.mp-ctrl { display: flex; align-items: center; justify-content: center; gap: 18px; }
.mp-ctrl button {
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--well); color: var(--text); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.mp-ctrl .mp-play {
  width: 46px; height: 46px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff; font-size: 17px;
}
.mp-spec { width: 100%; height: 44px; display: block; }
.mp-lyric {
  text-align: center; font-size: 13px; color: var(--brand);
  min-height: 22px; line-height: 1.6; font-weight: 600;
  padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  border-radius: 10px;
}
.mp-search { display: flex; gap: 6px; }
.mp-search input { flex: 1; min-width: 0; }
.mp-list { display: flex; flex-direction: column; gap: 4px; }
.mp-item {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 8px; border-radius: 10px;
}
.mp-item:hover { background: var(--field-hover); }
.mp-item.on { background: color-mix(in srgb, var(--brand) 14%, transparent); }
.mp-item.on .mp-it-name { color: var(--brand); }
.mp-idx { width: 18px; text-align: center; font-size: 12px; color: var(--muted); flex-shrink: 0; }
.mp-it { flex: 1; min-width: 0; }
.mp-it-name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================
   音乐播放器 v2（紧凑面板 / CSS 图标 / 音符动画 / 页脚歌词）
   ============================================ */
.music-ball {
  position: fixed; right: 18px; bottom: 96px; z-index: 130;
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  background-size: cover; background-position: center;
  cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  touch-action: none; overflow: visible;
}
.music-ball::after {  /* 音符底标 */
  content: '♪'; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); color: #fff;
  font-size: 20px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.music-ball.playing::after { animation: mbSpin 3.2s linear infinite; }
@keyframes mbSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.music-ball:active { transform: scale(.92); }

/* 飘出的音符 */
.mp-note {
  position: absolute; bottom: 44px; color: var(--brand2);
  font-size: 13px; pointer-events: none; z-index: 5;
  animation: mpNoteUp 1.4s ease-out forwards;
}
@keyframes mpNoteUp {
  0% { opacity: 0; transform: translateY(0) rotate(0) scale(.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-52px) rotate(40deg) scale(1.1); }
}

/* 紧凑面板（跟随悬浮球） */
.music-panel {
  position: fixed; z-index: 131; width: 258px;
  border-radius: 16px; padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.mp-head { display: flex; align-items: center; gap: 8px; }
.mp-pic { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; background: var(--well); flex-shrink: 0; }
.mp-info { flex: 1; min-width: 0; }
.mp-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-mini-btn {
  width: 24px; height: 24px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--well); color: var(--muted); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.mp-mini-btn .ico { display: flex; width: 13px; height: 13px; }

/* 细进度条 */
.mp-progress input[type="range"] {
  height: 3px; width: 100%;
}
.mp-progress input[type="range"]::-webkit-slider-thumb {
  width: 10px; height: 10px; border: 2px solid #fff;
}
.mp-progress input[type="range"]::-moz-range-thumb {
  width: 10px; height: 10px; border: 2px solid #fff;
}

/* CSS 绘制控制按钮 */
.mp-ctrl { display: flex; align-items: center; justify-content: center; gap: 14px; }
.mp-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--well); color: var(--text);
  display: flex; align-items: center; justify-content: center;
}
.mp-btn.mp-play {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
}
.ic { display: block; }
.ic-play {
  width: 0; height: 0;
  border-left: 11px solid currentColor;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  margin-left: 4px;
}
.ic-pause {
  width: 12px; height: 14px;
  border-left: 4px solid currentColor; border-right: 4px solid currentColor;
}
.ic-prev, .ic-next {
  width: 0; height: 0; position: relative;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.ic-prev { border-right: 9px solid currentColor; }
.ic-next { border-left: 9px solid currentColor; }
.ic-prev::before, .ic-next::before {
  content: ''; position: absolute; top: -6px; width: 3px; height: 12px;
  background: currentColor;
}
.ic-prev::before { right: -10px; }
.ic-next::before { left: -10px; }

.mp-spec { width: 100%; height: 30px; display: block; }

/* 搜索小窗 */
.mp-search-box { display: flex; flex-direction: column; gap: 5px; }
.mp-search { display: flex; gap: 5px; }
.mp-search input { flex: 1; min-width: 0; font-size: 12px; padding: 6px 9px; }
.mp-search button { font-size: 12px; padding: 6px 10px; }
.mp-list { display: flex; flex-direction: column; gap: 3px; max-height: 150px; overflow-y: auto; }
.mp-item { display: flex; align-items: center; gap: 7px; cursor: pointer; padding: 5px 7px; border-radius: 9px; }
.mp-item:hover { background: var(--field-hover); }
.mp-item.on { background: color-mix(in srgb, var(--brand) 14%, transparent); }
.mp-item.on .mp-it-name { color: var(--brand); }
.mp-idx { width: 16px; text-align: center; font-size: 11px; color: var(--muted); flex-shrink: 0; }
.mp-it { flex: 1; min-width: 0; }
.mp-it-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 页脚横向歌词（当前句） */
.mp-footer-lyric {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 10px; z-index: 125;
  max-width: 86%; padding: 5px 16px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--well-border);
  color: var(--brand); font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

/* ============================================
   音乐播放器 v3（参考风格：深色面板 / 逐字歌词 / 音符粒子）
   ============================================ */
.m-ball {
  position: fixed; right: 18px; bottom: 96px; z-index: 130;
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,0.4);
  touch-action: none; overflow: visible;
}
.m-cover {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover; display: block;
}
.m-ball.playing .m-cover { display: block; animation: mSpin 14s linear infinite; }
.m-ball.playing .m-ball-ico { display: none; }
.m-ball-ico { color: #fff; font-size: 22px; text-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.m-ball.playing { animation: mPulse 1.2s ease-in-out infinite; }
@keyframes mSpin { to { transform: rotate(360deg); } }
@keyframes mPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(79,124,255,0.3), 0 4px 18px rgba(0,0,0,0.4); }
  50% { box-shadow: 0 0 30px rgba(79,124,255,0.6), 0 0 60px rgba(155,92,255,0.3), 0 4px 18px rgba(0,0,0,0.4); }
}
.m-notes { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: visible; }
.m-note {
  position: absolute; transform: translate(-50%, -50%);
  animation: mNoteFly 2s ease-out forwards; pointer-events: none;
  text-shadow: 0 0 8px currentColor;
}
@keyframes mNoteFly {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.2) rotate(720deg); }
}

/* 小方面板（深色毛玻璃） */
.m-panel {
  position: fixed; z-index: 131; width: 210px;
  border-radius: 16px; overflow: hidden;
  background: rgba(10, 12, 28, 0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  color: #fff;
}
.m-panel-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0.25; pointer-events: none;
}
.m-panel-content {
  position: relative; padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(0,0,0,0.35);
}
.m-name { font-size: 13px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-singer { font-size: 11px; color: rgba(255,255,255,0.6); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-spec { width: 100%; height: 24px; display: block; }
.m-progress {
  width: 100%; height: 3px; border-radius: 999px;
  background: rgba(255,255,255,0.2); cursor: pointer; position: relative;
}
.m-prog-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  border-radius: 999px; position: absolute; left: 0; top: 0;
}
.m-time { display: flex; justify-content: space-between; font-size: 9px; color: rgba(255,255,255,0.7); }
.m-ctrl { display: flex; align-items: center; justify-content: center; gap: 12px; }
.m-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: transparent; color: rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
}
.m-btn svg { width: 18px; height: 18px; }
.m-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
.m-btn.m-play {
  width: 42px; height: 42px; color: #fff;
  background: rgba(255,255,255,0.1);
  box-shadow: 0 0 18px rgba(123,97,255,0.2);
}
.m-btn.m-play svg { width: 20px; height: 20px; }
.m-func { display: flex; justify-content: space-around; }
.m-func button {
  font-size: 11px; color: rgba(255,255,255,0.6);
  background: transparent; border: 0; cursor: pointer; padding: 4px 6px;
}
.m-func button:hover { color: var(--brand2); }

/* 歌单（面板内小列表） */
.m-list {
  max-height: 140px; overflow-y: auto;
  border-top: 1px solid rgba(255,255,255,0.08); padding-top: 4px;
  display: flex; flex-direction: column; gap: 2px;
}
.m-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 7px; border-radius: 8px; cursor: pointer;
  font-size: 11px; color: rgba(255,255,255,0.75);
}
.m-item:hover { background: rgba(255,255,255,0.06); }
.m-item.on { background: rgba(123,97,255,0.18); color: #fff; }
.m-idx { color: rgba(255,255,255,0.3); font-size: 10px; min-width: 16px; }
.m-iname { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-isinger { color: rgba(255,255,255,0.35); font-size: 10px; }
.m-empty { text-align: center; padding: 14px 0; color: rgba(255,255,255,0.35); font-size: 12px; }

/* 可拖动歌词框（逐字动画） */
.m-lyricbox {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
  z-index: 129; max-width: 88%;
  padding: 7px 18px; border-radius: 999px;
  background: rgba(10, 12, 28, 0.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: grab; user-select: none; touch-action: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-lyricbox:active { cursor: grabbing; }
.m-lyric-text {
  font-size: 16px; font-weight: 700; letter-spacing: 1px;
  color: #60A5FA; transition: color 0.8s ease;
}
.m-lyric-text.c-green { color: #34D399; }
.m-char {
  display: inline-block; transition: all 0.15s ease;
  opacity: 0.7;
}
.m-char.on { color: #F9A8D4; opacity: 1; transform: scale(1.12); }
.m-no-lyric { font-size: 13px; color: #C71585; }

/* 搜索弹窗 */
.m-search-modal {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.m-search-box {
  width: 400px; max-width: 92vw; max-height: 76vh;
  background: var(--glass);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-radius: 18px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.m-search-head { display: flex; align-items: center; justify-content: space-between; }
.m-search-head b { font-size: 15px; }
.m-search-x {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--well); border: 0; cursor: pointer; color: var(--muted);
}
.m-search-in { display: flex; gap: 8px; }
.m-search-in input {
  flex: 1; padding: 9px 12px; border-radius: 10px;
  border: 1.5px solid var(--well-border); background: var(--field);
  color: var(--text); font-size: 14px; outline: none;
}
.m-search-in input:focus { border-color: var(--brand); }
.m-search-in button {
  padding: 9px 16px; border-radius: 10px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff; font-weight: 600;
}
.m-search-res { overflow-y: auto; max-height: 300px; display: flex; flex-direction: column; gap: 4px; }
.m-result {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
  background: var(--well);
}
.m-result:hover { background: var(--field-hover); }
.m-result.on { background: color-mix(in srgb, var(--brand) 14%, transparent); }
.m-ridx { color: var(--brand); font-weight: 700; font-size: 11px; min-width: 20px; }
.m-rname { flex: 1; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-rsinger { color: var(--muted); font-size: 11px; }

/* ============================================
   音乐播放器 v4（右下角长条收起 / 弹出可移动球）
   ============================================ */
.m-ball {
  position: fixed; right: 16px; bottom: 110px; z-index: 130;
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,0.4);
  touch-action: none; overflow: visible;
  transition: width .25s ease, height .25s ease, border-radius .25s ease, bottom .25s ease;
}
/* 收起态：右下角纵向长条 */
.m-ball.bar {
  right: 8px !important; bottom: 8px !important;
  left: auto !important; top: auto !important;
  width: 42px; height: 86px; border-radius: 22px;
  background: linear-gradient(180deg, var(--brand), var(--brand2));
  animation: none !important;
}
.m-ball.bar .m-ball-ico { font-size: 18px; }
.m-ball.bar .m-cover { display: none !important; }
.m-ball.bar.playing .m-ball-ico { display: block !important; }

.m-cover {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: inherit; object-fit: cover; display: block;
}
.m-ball.playing:not(.bar) .m-cover { display: block; animation: mSpin 14s linear infinite; }
.m-ball.playing:not(.bar) .m-ball-ico { display: none; }
.m-ball-ico { color: #fff; font-size: 22px; text-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.m-ball.playing:not(.bar) { animation: mPulse 1.2s ease-in-out infinite; }
@keyframes mSpin { to { transform: rotate(360deg); } }
@keyframes mPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(79,124,255,0.3), 0 4px 18px rgba(0,0,0,0.4); }
  50% { box-shadow: 0 0 30px rgba(79,124,255,0.6), 0 0 60px rgba(155,92,255,0.3), 0 4px 18px rgba(0,0,0,0.4); }
}
.m-notes { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: visible; }
.m-note {
  position: absolute; transform: translate(-50%, -50%);
  animation: mNoteFly 2s ease-out forwards; pointer-events: none;
  text-shadow: 0 0 8px currentColor;
}
@keyframes mNoteFly {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.2) rotate(720deg); }
}

/* 小方面板 */
.m-panel {
  position: fixed; z-index: 131; width: 210px;
  border-radius: 16px; overflow: hidden;
  background: rgba(10, 12, 28, 0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  color: #fff;
}
.m-panel-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0.25; pointer-events: none;
}
.m-panel-content {
  position: relative; padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(0,0,0,0.35);
}
.m-panel-top { display: flex; align-items: center; gap: 6px; }
.m-name { flex: 1; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-fold {
  width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7);
  font-size: 12px; flex-shrink: 0;
}
.m-fold:hover { background: rgba(255,255,255,0.2); }
.m-singer { font-size: 11px; color: rgba(255,255,255,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-spec { width: 100%; height: 24px; display: block; }
.m-progress {
  width: 100%; height: 3px; border-radius: 999px;
  background: rgba(255,255,255,0.2); cursor: pointer; position: relative;
}
.m-prog-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  border-radius: 999px; position: absolute; left: 0; top: 0;
}
.m-time { display: flex; justify-content: space-between; font-size: 9px; color: rgba(255,255,255,0.7); }
.m-ctrl { display: flex; align-items: center; justify-content: center; gap: 12px; }
.m-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: transparent; color: rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
}
.m-btn svg { width: 18px; height: 18px; }
.m-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
.m-btn.m-play {
  width: 42px; height: 42px; color: #fff;
  background: rgba(255,255,255,0.1);
  box-shadow: 0 0 18px rgba(123,97,255,0.2);
}
.m-btn.m-play svg { width: 20px; height: 20px; }
.m-func { display: flex; justify-content: space-around; }
.m-func button {
  font-size: 11px; color: rgba(255,255,255,0.6);
  background: transparent; border: 0; cursor: pointer; padding: 4px 6px;
}
.m-func button:hover { color: var(--brand2); }

.m-list {
  max-height: 140px; overflow-y: auto;
  border-top: 1px solid rgba(255,255,255,0.08); padding-top: 4px;
  display: flex; flex-direction: column; gap: 2px;
}
.m-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 7px; border-radius: 8px; cursor: pointer;
  font-size: 11px; color: rgba(255,255,255,0.75);
}
.m-item:hover { background: rgba(255,255,255,0.06); }
.m-item.on { background: rgba(123,97,255,0.18); color: #fff; }
.m-idx { color: rgba(255,255,255,0.3); font-size: 10px; min-width: 16px; }
.m-iname { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-isinger { color: rgba(255,255,255,0.35); font-size: 10px; }
.m-empty { text-align: center; padding: 14px 0; color: rgba(255,255,255,0.35); font-size: 12px; }

/* 可拖动歌词框 */
.m-lyricbox {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
  z-index: 129; max-width: 88%;
  padding: 7px 18px; border-radius: 999px;
  background: rgba(10, 12, 28, 0.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: grab; user-select: none; touch-action: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-lyricbox:active { cursor: grabbing; }
.m-lyric-text { font-size: 16px; font-weight: 700; letter-spacing: 1px; color: #60A5FA; transition: color 0.8s ease; }
.m-lyric-text.c-green { color: #34D399; }
.m-char { display: inline-block; transition: all 0.15s ease; opacity: 0.7; }
.m-char.on { color: #F9A8D4; opacity: 1; transform: scale(1.12); }
.m-no-lyric { font-size: 13px; color: #C71585; }

/* 搜索弹窗 */
.m-search-modal {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.m-search-box {
  width: 400px; max-width: 92vw; max-height: 76vh;
  background: var(--glass);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-radius: 18px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.m-search-head { display: flex; align-items: center; justify-content: space-between; }
.m-search-head b { font-size: 15px; }
.m-search-x {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--well); border: 0; cursor: pointer; color: var(--muted);
}
.m-search-in { display: flex; gap: 8px; }
.m-search-in input {
  flex: 1; padding: 9px 12px; border-radius: 10px;
  border: 1.5px solid var(--well-border); background: var(--field);
  color: var(--text); font-size: 14px; outline: none;
}
.m-search-in input:focus { border-color: var(--brand); }
.m-search-in button {
  padding: 9px 16px; border-radius: 10px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff; font-weight: 600;
}
.m-search-res { overflow-y: auto; max-height: 300px; display: flex; flex-direction: column; gap: 4px; }
.m-result {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
  background: var(--well);
}
.m-result:hover { background: var(--field-hover); }
.m-result.on { background: color-mix(in srgb, var(--brand) 14%, transparent); }
.m-ridx { color: var(--brand); font-weight: 700; font-size: 11px; min-width: 20px; }
.m-rname { flex: 1; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-rsinger { color: var(--muted); font-size: 11px; }

/* ============================================
   音乐播放器 v5（简洁：小球 / 可拖面板 / 透明歌词）
   ============================================ */
.m-ball {
  position: fixed; right: 16px; bottom: 96px; z-index: 130;
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  touch-action: none; overflow: visible;
}
.m-cover {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover; display: block;
}
.m-ball.playing .m-cover { display: block; animation: mSpin 14s linear infinite; }
.m-ball.playing .m-ball-ico { display: none; }
.m-ball-ico { color: #fff; font-size: 19px; text-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.m-ball.playing { animation: mPulse 1.2s ease-in-out infinite; }
@keyframes mSpin { to { transform: rotate(360deg); } }
@keyframes mPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(79,124,255,0.3), 0 4px 16px rgba(0,0,0,0.35); }
  50% { box-shadow: 0 0 26px rgba(79,124,255,0.6), 0 0 50px rgba(155,92,255,0.3), 0 4px 16px rgba(0,0,0,0.35); }
}
.m-notes { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: visible; }
.m-note {
  position: absolute; transform: translate(-50%, -50%);
  animation: mNoteFly 1.9s ease-out forwards; pointer-events: none;
  text-shadow: 0 0 8px currentColor;
}
@keyframes mNoteFly {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.2) rotate(720deg); }
}

/* 可拖面板 */
.m-panel {
  position: fixed; z-index: 131; width: 210px;
  border-radius: 16px; overflow: hidden;
  background: rgba(10, 12, 28, 0.74);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  color: #fff;
}
.m-panel-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0.25; pointer-events: none;
}
.m-panel-content {
  position: relative; padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(0,0,0,0.35);
}
.m-panel-top { display: flex; align-items: center; cursor: grab; user-select: none; }
.m-panel-top:active { cursor: grabbing; }
.m-name { flex: 1; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-singer { font-size: 11px; color: rgba(255,255,255,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-spec { width: 100%; height: 24px; display: block; }
.m-progress {
  width: 100%; height: 3px; border-radius: 999px;
  background: rgba(255,255,255,0.2); cursor: pointer; position: relative;
}
.m-prog-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  border-radius: 999px; position: absolute; left: 0; top: 0;
}
.m-time { display: flex; justify-content: space-between; font-size: 9px; color: rgba(255,255,255,0.7); }
.m-ctrl { display: flex; align-items: center; justify-content: center; gap: 12px; }
.m-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: transparent; color: rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
}
.m-btn svg { width: 18px; height: 18px; }
.m-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
.m-btn.m-play {
  width: 42px; height: 42px; color: #fff;
  background: rgba(255,255,255,0.1);
  box-shadow: 0 0 18px rgba(123,97,255,0.2);
}
.m-btn.m-play svg { width: 20px; height: 20px; }
.m-func { display: flex; justify-content: space-around; }
.m-func button {
  font-size: 11px; color: rgba(255,255,255,0.6);
  background: transparent; border: 0; cursor: pointer; padding: 4px 6px;
}
.m-func button:hover { color: var(--brand2); }
.m-list {
  max-height: 140px; overflow-y: auto;
  border-top: 1px solid rgba(255,255,255,0.08); padding-top: 4px;
  display: flex; flex-direction: column; gap: 2px;
}
.m-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 7px; border-radius: 8px; cursor: pointer;
  font-size: 11px; color: rgba(255,255,255,0.75);
}
.m-item:hover { background: rgba(255,255,255,0.06); }
.m-item.on { background: rgba(123,97,255,0.18); color: #fff; }
.m-idx { color: rgba(255,255,255,0.3); font-size: 10px; min-width: 16px; }
.m-iname { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-isinger { color: rgba(255,255,255,0.35); font-size: 10px; }
.m-empty { text-align: center; padding: 14px 0; color: rgba(255,255,255,0.35); font-size: 12px; }

/* 透明歌词（纯文字，固定底部） */
.m-lyricbox {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 129; max-width: 90%;
  background: transparent; border: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.m-lyric-text {
  font-size: 16px; font-weight: 700; letter-spacing: 1px;
  color: #60A5FA; transition: color 0.8s ease;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.m-lyric-text.c-green { color: #34D399; }
.m-char { display: inline-block; transition: all 0.15s ease; opacity: 0.75; }
.m-char.on { color: #F9A8D4; opacity: 1; transform: scale(1.12); }
.m-no-lyric { font-size: 13px; color: #C71585; }

/* 搜索弹窗 */
.m-search-modal {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.m-search-box {
  width: 400px; max-width: 92vw; max-height: 76vh;
  background: var(--glass);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-radius: 18px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.m-search-head { display: flex; align-items: center; justify-content: space-between; }
.m-search-head b { font-size: 15px; }
.m-search-x {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--well); border: 0; cursor: pointer; color: var(--muted);
}
.m-search-in { display: flex; gap: 8px; }
.m-search-in input {
  flex: 1; padding: 9px 12px; border-radius: 10px;
  border: 1.5px solid var(--well-border); background: var(--field);
  color: var(--text); font-size: 14px; outline: none;
}
.m-search-in input:focus { border-color: var(--brand); }
.m-search-in button {
  padding: 9px 16px; border-radius: 10px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff; font-weight: 600;
}
.m-search-res { overflow-y: auto; max-height: 300px; display: flex; flex-direction: column; gap: 4px; }
.m-result {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
  background: var(--well);
}
.m-result:hover { background: var(--field-hover); }
.m-result.on { background: color-mix(in srgb, var(--brand) 14%, transparent); }
.m-ridx { color: var(--brand); font-weight: 700; font-size: 11px; min-width: 20px; }
.m-rname { flex: 1; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-rsinger { color: var(--muted); font-size: 11px; }

/* v118 修复：收起按钮 / 面板整拖 / 去blur / 歌词清晰 */
.m-panel-top { display: flex; align-items: center; gap: 4px; cursor: grab; user-select: none; }
.m-panel-top:active { cursor: grabbing; }
.m-fold {
  width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.75);
  font-size: 12px; flex-shrink: 0; line-height: 1;
}
.m-fold:hover { background: rgba(255,255,255,0.25); color: #fff; }
.m-panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.m-search-box { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.m-lyric-text {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 10px rgba(0,0,0,0.7), 0 2px 12px rgba(0,0,0,0.8);
}
.m-lyric-text.c-green { color: #34D399; text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 10px rgba(0,0,0,0.7); }
.m-char.on {
  color: #F9A8D4;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 12px rgba(249,168,212,0.7);
}

/* v119：歌词/面板自由拖动 */
.m-lyricbox { cursor: grab; touch-action: none; pointer-events: auto; }
.m-lyricbox:active { cursor: grabbing; }
.m-panel { cursor: grab; touch-action: none; }
.m-panel:active { cursor: grabbing; }

/* v121：歌词框不伸缩、文字干净无重阴影 */
.m-lyricbox {
  max-width: none !important;
  overflow: visible !important;
  white-space: nowrap;
}
.m-lyric-text {
  text-shadow: none !important;
  color: #fff;
  font-size: 17px;
}
.m-lyric-text.c-green { color: #34D399; text-shadow: none !important; }
.m-char.on { color: #F9A8D4; text-shadow: none !important; }

/* v124：歌词自适应（超长缩小字体，不超边距） */
.m-lyricbox { max-width: calc(100vw - 24px); }

/* v125：歌词清晰描边（任何背景都看得清） */
.m-lyric-text {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 6px rgba(0,0,0,0.7);
}
.m-lyric-text.c-green {
  color: #34D399;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 6px rgba(0,0,0,0.7);
}
.m-char.on {
  color: #F9A8D4;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 8px rgba(249,168,212,0.6);
}

/* v127：歌词彻底透明背景 + 主题文字色（永远清晰） */
.m-lyricbox {
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
.m-lyric-text {
  color: var(--text) !important;
  text-shadow: none !important;
  font-weight: 700;
}
.m-lyric-text.c-green { color: var(--free) !important; }
.m-char.on { color: var(--brand2) !important; opacity: 1; }

/* ============================================
   v130 文字溢出加固（超长说明不撑破 UI）
   ============================================ */
.api-card .desc {
  word-break: break-word;
  overflow-wrap: anywhere;
}
.api-head-info .muted.small,
.api-desc,
.api-modal .muted.small {
  word-break: break-word;
  overflow-wrap: anywhere;
}
.block .muted.small { word-break: break-word; overflow-wrap: anywhere; }
.list-item .grow { word-break: break-word; overflow-wrap: anywhere; }
.tbl td, .tbl th { word-break: break-word; overflow-wrap: anywhere; }
.url-box { word-break: break-all; }
.card-title h3 { overflow-wrap: anywhere; }
.so-name, .so-meta, .sp-name, .sp-desc, .u-nick, .u-meta {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* v131：公告弹窗高度收一丢丢 + 顶部标题靠左 */
.notice-modal .modal-scroll { max-height: 58vh; }
.nav-center { left: 64px; transform: none; }

/* v132：公告弹窗恢复自适应高度 */
.notice-modal .modal-scroll { max-height: none; }

/* v147：API 分类标签栏 */
.cat-bar {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 2px 2px 10px; margin-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cat-bar::-webkit-scrollbar { display: none; }
.cat-tab {
  flex-shrink: 0;
  padding: 5px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  background: var(--well); border: 1px solid var(--well-border);
  color: var(--muted); cursor: pointer;
  transition: all 0.18s;
}
/* v150：分类标签选中态跟随主题色 */
.cat-tab:active { transform: scale(0.93); }
.cat-tab.on {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border-color: transparent; color: #fff;
  font-weight: 800;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--brand) 40%, transparent);
}

/* 歌曲卡片 */
.song-card {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
}
.ai-msg.user .song-card { background: rgba(0, 0, 0, 0.15); border-color: transparent; }
.sc-cover { position: relative; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.sc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-no { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 20px; background: rgba(0,0,0,0.25); }
.sc-play {
  position: absolute; inset: 0; margin: auto;
  width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sc-play svg { width: 15px; height: 15px; }
.sc-info { flex: 1; min-width: 0; }
.sc-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-singer { font-size: 11.5px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-tag {
  flex-shrink: 0; font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff; white-space: nowrap;
}
.song-card.slim { cursor: pointer; transition: filter 0.15s; }
.song-card.slim:hover { filter: brightness(1.08); }
.sc-cover.mini { width: 40px; height: 40px; }
.ai-songlist { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ai-songlist .song-card { margin-top: 0; }

/* ============ v167：AI 聊天界面（QQ 式全新设计） ============ */
/* 全屏容器：inset 0 钉满视口，padding-top 由 JS 设为导航高度 */
#view-ai {
  position: fixed; top: 0; left: 0; right: 0; height: 100vh;
  z-index: 105; /* 低于顶部导航(110)/侧边栏(200)，汉堡可点；高度由 JS 随键盘调整 */
  margin: 0; padding: 42px 0 0 0;
  background: transparent;
  display: none;
}
#view-ai.active { display: block; }
/* 进入 AI 页时隐藏所有全局底部悬浮元素（CSS 强制） */
body.ai-open .shop-nav,
body.ai-open .mp-footer-lyric,
body.ai-open .m-lyricbox,
body.ai-open .m-ball,
body.ai-open .m-panel {
  display: none !important;
}

.ai-page {
  height: 100%;
  display: flex; flex-direction: column;
  max-width: 860px; margin: 0 auto;
  background: transparent;
}

/* 顶栏：一条细线（脉动点 + 标题 + 模式标签） */
.ai-topbar {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--well-border);
  flex-shrink: 0;
}
.ai-title { font-size: 13px; font-weight: 800; flex: 1; }
.ai-mode-wrap { position: relative; }
.ai-mode-btn {
  border: 1px solid var(--well-border); background: var(--well);
  color: var(--text); font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; cursor: pointer;
  white-space: nowrap;
}
.ai-mode-menu {
  position: absolute; right: 0; top: calc(100% + 5px); z-index: 40;
  background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--well-border); border-radius: 12px;
  padding: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  min-width: 108px;
}
.ai-mode-menu button {
  display: block; width: 100%; text-align: left;
  border: 0; background: transparent; cursor: pointer;
  font-size: 12.5px; color: var(--text);
  padding: 6px 12px; border-radius: 8px;
}
.ai-mode-menu button:hover { background: var(--field-hover); }
.ai-mode-menu button.on { color: var(--brand); font-weight: 700; }

/* 消息区：占满中间，独立滚动 */
.ai-body {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px 12px 20px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.ai-msg { display: flex; flex-direction: column; max-width: 86%; }
.ai-msg.user { align-self: flex-end; }
.ai-msg.ai { align-self: flex-start; }
.ai-row { display: flex; gap: 8px; align-items: flex-start; }
.ai-msg.user .ai-row { flex-direction: row-reverse; }
.ai-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  overflow: hidden;
}
.ai-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ai-avatar.bot { font-size: 15px; }
.ai-role { font-size: 10.5px; color: var(--muted); margin-bottom: 3px; padding: 0 2px; }
.ai-msg.user .ai-role { text-align: right; }
.ai-bubble {
  padding: 9px 13px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.65; word-break: break-word;
  background: var(--field); border: 1px solid var(--well-border);
}
.ai-msg.user .ai-bubble {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border-color: transparent; color: #fff;
}
.ai-code {
  background: rgba(0, 0, 0, 0.55); color: #d7f7e0;
  border-radius: 8px; padding: 8px 10px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.5; overflow-x: auto;
  margin: 6px 0; white-space: pre-wrap; word-break: break-all;
}
.ai-msg.user .ai-code { background: rgba(0, 0, 0, 0.25); }
.ai-inline {
  background: rgba(0, 0, 0, 0.08); border-radius: 4px;
  padding: 1px 5px; font-family: ui-monospace, Consolas, monospace; font-size: 12px;
}

/* 底部输入条：flex 容器底（容器=视口，天然贴底） */
.ai-bottom {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px calc(7px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--well-border);
  background: var(--glass);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  flex-shrink: 0;
}
.ai-bottom input {
  flex: 1; min-width: 0;
  border-radius: 999px; padding: 6px 15px;
  border: 1px solid var(--well-border);
  background: var(--field);
  font-size: 13px; box-shadow: none;
}
.ai-bottom .btn { border-radius: 999px; padding: 7px 18px; font-size: 12.5px; flex-shrink: 0; }

/* 歌曲卡片 */
.song-card {
  display: flex; align-items: center; gap: 10px;
  width: 100%; /* 撑满气泡宽度，歌名歌手完整显示 */
  margin-top: 10px; padding: 8px 10px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}
.ai-msg.user .song-card { background: rgba(0, 0, 0, 0.15); border-color: transparent; }
.sc-cover { position: relative; width: 50px; height: 50px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.sc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-no { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 18px; background: rgba(0,0,0,0.25); }
.sc-play {
  position: absolute; inset: 0; margin: auto;
  width: 28px; height: 28px; border-radius: 50%; border: 0;
  background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sc-play svg { width: 14px; height: 14px; }
.sc-info { flex: 1; min-width: 0; }
.sc-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-singer { font-size: 11.5px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-tag {
  flex-shrink: 0; font-size: 9.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff; white-space: nowrap;
}
.song-card.slim { cursor: pointer; transition: filter 0.15s; }
.song-card.slim:hover { filter: brightness(1.08); }
.sc-cover.mini { width: 38px; height: 38px; }
.ai-songlist { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ai-songlist .song-card { margin-top: 0; }

/* 卡片消息：卡片样式保持原样；头像强制贴左边距（与普通消息完全一致） */
.ai-msg.card { align-self: flex-start; }
.ai-msg.card .ai-row { flex-direction: row; align-items: flex-start; }
.ai-msg.card .ai-avatar { order: 0; margin-left: 0; }
.ai-msg.card .ai-bubble { background: transparent; border: 0; padding: 0; }
.ai-msg.card .song-card { margin-top: 2px; }

/* 思考动态三点 */
.ai-dots { display: inline-flex; align-items: center; margin-left: 4px; }
.ai-dots i {
  display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; margin: 0 1.5px;
  animation: aiDot 1.2s ease-in-out infinite;
}
.ai-dots i:nth-child(2) { animation-delay: 0.2s; }
.ai-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiDot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

/* 代码块复制按钮 */
.ai-code-wrap { position: relative; margin: 6px 0; }
.ai-code-wrap .ai-code { margin: 0; }
.ai-copy {
  position: absolute; top: 6px; right: 6px;
  border: 0; border-radius: 6px; cursor: pointer;
  font-size: 10.5px; padding: 3px 9px;
  background: rgba(255, 255, 255, 0.16); color: #d7f7e0;
}
.ai-copy:hover { background: rgba(255, 255, 255, 0.3); }
/* 点歌可选卡片 */
.song-card.selectable { cursor: pointer; transition: all 0.15s; }
.song-card.selectable:hover { outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); }
.ai-songlist { display: flex; flex-direction: column; gap: 8px; }
.ai-songlist .song-card { margin-top: 0; }

/* AI 顶部小头像 */
.ai-top-avatar {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
}
.ai-top-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* 代码高亮 + 语言标签 */
.ai-code-head {
  display: flex; justify-content: flex-end; align-items: center;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.38);
  border-radius: 8px 8px 0 0;
  font-size: 10.5px;
}
.ai-code-wrap .ai-code { border-radius: 0 0 8px 8px; margin: 0; }
.ai-copy { position: static; }
.hl-k { color: #569cd6; }
.hl-s { color: #ce9178; }
.hl-c { color: #6a9955; font-style: italic; }
.hl-n { color: #b5cea8; }

/* ============ 后台网站管理（v203） ============ */
.site-hero { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; }
.site-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.site-tab {
  border: 1px solid var(--well-border); background: var(--well);
  color: var(--muted); font-size: 13px; font-weight: 600;
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
  transition: all 0.2s;
}
.site-tab.on {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff; border-color: transparent;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--brand) 35%, transparent);
}
.site-pane { border-radius: 18px; padding: 16px 18px; }
.site-pane h3 { margin: 0 0 6px; font-size: 15px; }
/* 开关行 */
.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px dashed var(--well-border);
}
.switch-row:last-of-type { border-bottom: 0; }
.sw { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.sw input { opacity: 0; width: 0; height: 0; }
.sw i {
  position: absolute; inset: 0; border-radius: 999px;
  background: rgba(128, 128, 128, 0.35); cursor: pointer;
  transition: background 0.22s;
}
.sw i::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  transition: transform 0.22s;
}
.sw input:checked + i { background: linear-gradient(135deg, var(--brand), var(--brand2)); }
.sw input:checked + i::after { transform: translateX(20px); }
/* 圆角输入框 */
.nice-input {
  border-radius: 12px !important;
  border: 1.5px solid var(--well-border) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.nice-input:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent) !important;
}

/* 站点管理标签图标 */
.site-tab svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }

/* ============ API 模板（v212） ============ */
/* 后台模板选择器 */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.tpl-item {
  border: 2px solid var(--well-border); border-radius: 14px;
  padding: 10px; cursor: pointer; background: var(--well);
  transition: all 0.2s;
}
.tpl-item.on { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.tpl-preview {
  background: var(--field); border-radius: 10px; padding: 10px;
  display: flex; flex-direction: column; gap: 8px; min-height: 108px;
}
.tpl-name { text-align: center; font-size: 12px; font-weight: 600; margin-top: 6px; }
.tp-card { background: rgba(255,255,255,.5); border-radius: 8px; padding: 6px 8px; display:flex; flex-direction:column; gap:4px; }
body[data-theme="night"] .tp-card { background: rgba(255,255,255,.08); }
.tp-head { display: flex; align-items: center; gap: 5px; }
.tp-head i { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand2)); }
.tp-head b { width: 45%; height: 6px; border-radius: 3px; background: rgba(128,128,128,.3); }
.tp-line { height: 5px; border-radius: 3px; background: rgba(128,128,128,.22); }
.tp-line.short { width: 60%; }
.tp-img { height: 40px; border-radius: 6px; background: linear-gradient(135deg, var(--brand), var(--brand2)); opacity: .8; }
.tp-store { background: rgba(255,255,255,.5); border-radius: 8px; padding: 6px; display:flex; flex-direction:column; gap:4px; }
body[data-theme="night"] .tp-store { background: rgba(255,255,255,.08); }
.tp-row { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.5); border-radius: 8px; padding: 6px 8px; }
body[data-theme="night"] .tp-row { background: rgba(255,255,255,.08); }
.tp-row i { width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(135deg, var(--brand), var(--brand2)); flex-shrink: 0; }
.tp-row > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }

/* 模板2：商城大图卡 */
.api-card-store { overflow: hidden; padding: 0 !important; display: flex; flex-direction: column; }
.st-cover { position: relative; width: 100%; height: 110px; overflow: hidden; background: var(--field); }
.st-cover.char { display: flex; align-items: center; justify-content: center; }
.st-cover .st-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.st-cover.noimg .st-img { display: none; }
.st-char { font-size: 44px; font-weight: 800; color: rgba(255,255,255,.92); text-shadow: 0 3px 12px rgba(0,0,0,.25); }
.st-pin { position: absolute; top: 8px; right: 8px; }
.st-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.st-name { font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.st-desc {
  font-size: 12px; color: var(--muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.9em; word-break: break-word; overflow-wrap: anywhere;
}
.st-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--muted); }

/* 模板3：精简列表行 */
.api-card-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.api-card-row .api-avatar-wrap { flex-shrink: 0; }
.ar-info { flex: 1; min-width: 0; }
.ar-name { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ar-desc {
  font-size: 12px; color: var(--muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ar-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.ar-calls { font-size: 11px; color: var(--muted); }

/* 详情弹窗图标加大 */
.modal .api-head .api-avatar { width: 46px; height: 46px; font-size: 20px; }
.modal .api-head .api-avatar.img { width: 46px; height: 46px; border-radius: 12px; }

/* ============ v214：商城模板整体皮肤 ============ */
body[data-template="store"] .site-nav {
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  background: color-mix(in srgb, var(--glass) 88%, transparent);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
body[data-template="store"] .sidebar {
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
body[data-template="store"] .card,
body[data-template="store"] .block {
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
body[data-template="store"] .btn { border-radius: 12px; }
body[data-template="store"] .cat-bar { padding-bottom: 12px; }
body[data-template="store"] .cat-tab { border-radius: 12px; }
/* API 大图卡 */
body[data-template="store"] .api-grid { gap: 18px; }
.api-card-store {
  border-radius: 20px;
  transition: transform 0.22s, box-shadow 0.22s;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
}
.api-card-store:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}
.st-cover { height: 124px; border-radius: 20px 20px 0 0; }
.st-cover.char { display: flex; align-items: center; justify-content: center; position: relative; }
.st-char { font-size: 52px; font-weight: 800; color: rgba(255, 255, 255, 0.95); text-shadow: 0 4px 16px rgba(0, 0, 0, 0.22); }
.st-name {
  font-size: 15px; font-weight: 800;
  white-space: nowrap; overflow: hidden;
  line-height: 1.3;
}
.st-tags { display: flex; gap: 5px; flex-wrap: wrap; margin: 2px 0 6px; }
.st-desc { min-height: 2.7em; }
.st-meta { margin-top: 2px; }

/* v215：封面完整名称 */
.st-char-name {
  display: block;
  max-width: calc(100% - 32px);
  padding: 8px 16px;
  font-size: 24px; font-weight: 800; line-height: 1.25;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.22);
  white-space: nowrap; overflow: hidden;
  text-align: center;
}

/* ============ v216：霓虹 / 糖果 / 极光 模板 ============ */
/* ============ v217：模板整体换肤（导航/侧边栏/控件全覆盖） ============ */
/* ---------- 商城（质感圆润） ---------- */
body[data-template="store"] .site-nav { border-radius: 0 0 18px 18px; }
body[data-template="store"] .sidebar { border-radius: 0 18px 18px 0; }
body[data-template="store"] .sn-item { border-radius: 12px; }
body[data-template="store"] .sn-item.active {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 35%, transparent);
}
body[data-template="store"] .btn { border-radius: 12px; }
body[data-template="store"] input, body[data-template="store"] select, body[data-template="store"] textarea { border-radius: 12px; }
body[data-template="store"] .badge { border-radius: 8px; }
body[data-template="store"] .modal { border-radius: 22px; }

/* ---------- 糖果（圆润粉彩） ---------- */
body[data-template="candy"] .site-nav {
  border-radius: 0 0 26px 26px;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--brand), var(--brand2), var(--brand)) 1;
}
body[data-template="candy"] .sidebar { border-radius: 0 22px 22px 0; }
body[data-template="candy"] .sn-item { border-radius: 999px; font-weight: 600; }
body[data-template="candy"] .sn-item.active {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--brand) 45%, transparent);
  transform: scale(1.04);
}
body[data-template="candy"] .btn { border-radius: 999px; }
body[data-template="candy"] input, body[data-template="candy"] select, body[data-template="candy"] textarea { border-radius: 999px; }
body[data-template="candy"] .badge { border-radius: 999px; }
body[data-template="candy"] .modal { border-radius: 28px; }
body[data-template="candy"] .api-card { border-radius: 24px; }
body[data-template="candy"] .block-title { letter-spacing: .5px; }
body[data-template="candy"] .logo i { border-radius: 50%; }


/* ============ v225：播放器引擎标签 ============ */
.m-src-bar {
  display: flex; gap: 6px;
  padding: 2px 0 8px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.m-src-bar::-webkit-scrollbar { display: none; }
.m-src-btn {
  display: inline-flex; align-items: center; gap: 5px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.2); cursor: pointer;
  background: rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11.5px; font-weight: 700;
  padding: 4px 10px 4px 5px;
  border-radius: 999px;
  transition: all 0.2s;
}
.m-src-btn:hover { background: rgba(255, 255, 255, 0.24); color: #fff; }
.m-src-btn.on {
  background: linear-gradient(135deg, var(--brand), var(--brand2, var(--brand)));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--brand) 45%, transparent);
}
.m-src-btn i {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-style: normal;
  color: #fff;
  font-size: 10px; font-weight: 800;
}
.m-src-btn i svg { width: 11px; height: 11px; }
.mk-ico.kugou { background: linear-gradient(135deg, #0ebf8f, #0ea5e9); }
.mk-ico.djuu { background: linear-gradient(135deg, #ff8a3d, #ff4d6d); }
.mk-ico.qq { background: linear-gradient(135deg, #12b7f5, #2f6bff); }
.mk-ico.wyy { background: linear-gradient(135deg, #e5484d, #ff8a3d); }


/* v231：后台简介编辑框（大框 + 主题默认配色） */
.desc-board {
  width: 100%;
  min-height: 110px;
  background: var(--field) !important;
  color: var(--text) !important;
  border: 1.5px solid var(--well-border) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.desc-board:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent) !important;
}

/* v240：API 卡片滚动视口折叠入场（滑到哪张哪张从左翻开） */
@keyframes apiCardFold {
  from { opacity: 0; transform: perspective(900px) rotateY(-45deg) translateX(-34px); }
  to { opacity: 1; transform: perspective(900px) rotateY(0deg) translateX(0); }
}
#apiGrid .api-card { opacity: 0; }
#apiGrid .api-card.card-in {
  opacity: 1; transform-origin: left center;
  animation: apiCardFold 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* v237：弹窗简介折叠展开 + 请求地址复制按钮 + 弹窗 blur 降级 */
.api-desc-rainbow { display: flex; flex-direction: column; align-items: stretch; }
.desc-body { min-height: 1.7em; }
.desc-body.desc-folded { max-height: 3.4em; overflow: hidden; }
/* 折叠/展开小标签（简介右下、表格下方、区块标题右侧通用） */
.chip-more {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  border-radius: 99px; padding: 2.5px 11px; cursor: pointer;
  margin-top: 6px; white-space: nowrap; user-select: none;
  transition: background 0.15s, color 0.15s;
}
.chip-more:hover { background: color-mix(in srgb, var(--brand) 22%, transparent); }
.block-title .chip-more { margin: 0 0 0 auto; }
.api-desc-rainbow .chip-more { margin: 4px 0 0 auto; }
.url-box-wrap { display: flex; gap: 6px; align-items: stretch; }
.modal .url-box {
  flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; line-height: 1.6; color: var(--muted);
  background: var(--code-bg); border-radius: 9px; padding: 8px 10px;
  word-break: break-all; overflow-wrap: anywhere;
}
.url-copy {
  border: 1px solid var(--line); background: var(--field); color: var(--brand);
  font-size: 11.5px; font-weight: 600; border-radius: 9px; padding: 0 12px; cursor: pointer;
  white-space: nowrap; transition: all 0.15s;
}
.url-copy:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
/* 弹窗打开时降级毛玻璃模糊，低端机滚动不卡（mask 4px + 弹窗 8px） */
.modal-mask { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
body.modal-open .modal.glass { -webkit-backdrop-filter: blur(8px) saturate(160%); backdrop-filter: blur(8px) saturate(160%); }

/* v240：卡片去毛玻璃（列表滚动性能关键；玻璃感由背景色保留） */
.api-card.glass, #apiGrid .api-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* v242：卡片价格/调用小标签（与在线人数同款胶囊）+ 今日调用 */
.api-card .tag-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  background: var(--well); border: 1px solid var(--well-border);
  border-radius: 999px; padding: 3px 8px; color: var(--muted);
  white-space: nowrap;
}
.api-card .tag-chip svg { width: 11px; height: 11px; flex-shrink: 0; }
.api-card .tag-price {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border-color: color-mix(in srgb, var(--brand) 32%, transparent);
}
.api-card .tag-free {
  color: var(--free);
  background: color-mix(in srgb, var(--free) 10%, transparent);
  border-color: color-mix(in srgb, var(--free) 32%, transparent);
}
.api-card .tag-today {
  color: var(--free);
  background: color-mix(in srgb, var(--free) 10%, transparent);
  border-color: color-mix(in srgb, var(--free) 30%, transparent);
}
.api-card .call-group { display: inline-flex; align-items: center; gap: 4px; }
.api-card .meta { flex-wrap: wrap; gap: 6px; }
.api-card-store .st-meta { flex-wrap: wrap; gap: 6px; }
.api-card-candy .cd-meta { flex-wrap: wrap; gap: 6px; }

/* v244：控制台 QQ 主页风（Hero 横幅 + 分组卡片） */
.con-hero {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(20, 20, 60, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.con-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(130% 110% at 12% -10%, rgba(255, 255, 255, 0.3), transparent 55%),
    radial-gradient(90% 80% at 100% 20%, rgba(255, 255, 255, 0.18), transparent 55%),
    linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand2) 55%, #26304d) 130%);
  background-size: cover; background-position: center;
  transition: background 0.3s;
}
.con-bg-mask {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 8, 24, 0.05) 0%, rgba(8, 8, 24, 0.52) 100%);
}
.con-bg-deco {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(220px 90px at 85% 88%, rgba(255, 255, 255, 0.14), transparent 70%),
    radial-gradient(160px 60px at 10% 90%, rgba(255, 255, 255, 0.1), transparent 70%);
}
.con-banner-btn {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(10, 10, 30, 0.35); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 11px; font-weight: 600; border-radius: 999px;
  padding: 5px 12px; cursor: pointer; transition: background 0.15s;
}
.con-banner-btn svg { width: 12px; height: 12px; }
.con-banner-btn:hover { background: rgba(10, 10, 30, 0.55); }
.con-me {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 13px;
  padding: 36px 16px 0;
}
.con-avatar {
  position: relative; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 2.5px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.con-avatar img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 2;
}
.con-avatar i {
  font-style: normal; font-weight: 800; font-size: 24px; color: #fff;
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
}
.con-nick {
  color: #fff; font-size: 19px; font-weight: 800; line-height: 1.25;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  word-break: break-all;
}
.con-sub { color: rgba(255, 255, 255, 0.92); font-size: 12px; margin-top: 3px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.con-stats {
  position: relative; z-index: 2;
  display: flex; margin: 18px 14px 14px;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 15px; padding: 11px 4px 9px;
}
.con-stat { flex: 1; text-align: center; min-width: 0; }
.con-stat b {
  display: block; color: #fff; font-size: 16.5px; font-weight: 800;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.con-stat span { font-size: 10.5px; color: rgba(255, 255, 255, 0.88); }
.con-card .card-title { padding: 2px 0 0; }
.con-card .card-title h3 { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.cc-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 9px; flex-shrink: 0;
}
.cc-ico svg { width: 15px; height: 15px; }
.ci-wallet { color: #ff9f43; background: rgba(255, 159, 67, 0.14); }
.ci-key { color: var(--brand); background: color-mix(in srgb, var(--brand) 13%, transparent); }
.ci-bill { color: #2ecc71; background: rgba(46, 204, 113, 0.14); }
.ci-user { color: #5b8cff; background: rgba(91, 140, 255, 0.14); }
.ci-link { color: #a66bff; background: rgba(166, 107, 255, 0.14); }
.con-bal-row {
  display: flex; align-items: baseline; justify-content: space-between;
  background: var(--well); border: 1px solid var(--well-border);
  border-radius: 13px; padding: 12px 14px; margin-bottom: 10px;
}
.con-bal-label { font-size: 12px; color: var(--muted); }
.con-bal-num { font-size: 24px; font-weight: 800; color: var(--brand); }
.con-recharge { display: flex; gap: 8px; }
.con-divider { height: 1px; background: var(--row-line, var(--line)); margin: 13px 0 12px; }
.con-sub-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13.5px; font-weight: 700; margin-top: 14px; padding-top: 13px;
  border-top: 1px dashed var(--row-line, var(--line));
}
.con-sub-title .btn-xs { font-size: 10.5px; }

/* v250：在线客服系统 */
.kf-tag {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  border-radius: 999px; padding: 3px 9px; cursor: pointer;
  transition: background 0.15s;
}
.kf-tag:hover { background: color-mix(in srgb, var(--brand) 20%, transparent); }
.kf-tag svg { width: 12px; height: 12px; }
.kf-badge {
  position: absolute; top: -7px; right: -7px; min-width: 16px; height: 16px;
  border-radius: 9px; background: #ff3b30; color: #fff;
  font-size: 10px; font-weight: 700; font-style: normal;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  animation: kfBadgePop 0.25s ease;
}
@keyframes kfBadgePop { from { transform: scale(0.4); } to { transform: scale(1); } }
/* 客服聊天弹窗 */
.kf-modal {
  max-width: 470px !important; width: 100%; padding: 0 !important;
  display: flex; flex-direction: column;
  height: min(620px, 78vh); overflow: hidden;
}
.kf-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.kf-head-av {
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 15px;
}
.kf-head-av i { font-style: normal; }
.kf-head-av img { width: 100%; height: 100%; object-fit: cover; }
.kf-head-info { flex: 1; min-width: 0; }
.kf-head-name { font-size: 14px; font-weight: 700; }
.kf-head-sub { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.kf-body {
  flex: 1; overflow-y: auto; padding: 13px 12px 8px;
  background: color-mix(in srgb, var(--well) 45%, transparent);
  -webkit-overflow-scrolling: touch;
}
.kf-empty { text-align: center; color: var(--muted); font-size: 12px; padding: 34px 0; }
.kf-sys { text-align: center; margin: 10px 0 14px; }
.kf-sys span {
  display: inline-block; font-size: 10.5px; color: var(--muted);
  background: var(--well); border: 1px solid var(--well-border);
  border-radius: 999px; padding: 4px 12px; max-width: 86%; line-height: 1.6;
}
.kf-row { display: flex; gap: 8px; margin-bottom: 13px; align-items: flex-start; }
.kf-row.me { flex-direction: row-reverse; }
.kf-av {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 13px;
}
.kf-av img { width: 100%; height: 100%; object-fit: cover; }
.kf-av-kf { background: linear-gradient(135deg, var(--brand), var(--brand2)); }
.kf-bub-col { max-width: 74%; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.kf-row.me .kf-bub-col { align-items: flex-end; }
.kf-bub {
  background: var(--field); border: 1px solid var(--line);
  border-radius: 13px; padding: 8px 11px;
  font-size: 13px; line-height: 1.55; word-break: break-word; overflow-wrap: anywhere;
}
.kf-row.other .kf-bub { border-top-left-radius: 4px; }
.kf-row.me .kf-bub {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff; border: 0; border-top-right-radius: 4px;
}
.kf-bub-img {
  display: block; max-width: 190px; max-height: 190px;
  border-radius: 9px; margin-top: 4px; cursor: zoom-in;
}
.kf-time { font-size: 10px; color: var(--muted); margin-top: 3px; padding: 0 2px; }
.kf-blocked-tip {
  flex-shrink: 0; text-align: center; font-size: 11px; color: #e5484d;
  background: rgba(229, 72, 77, 0.08); padding: 7px 10px;
  border-top: 1px solid rgba(229, 72, 77, 0.2);
}
.kf-preview { flex-shrink: 0; padding: 8px 12px 0; position: relative; width: fit-content; }
.kf-preview img { max-height: 68px; max-width: 120px; border-radius: 8px; display: block; }
.kf-preview button {
  position: absolute; top: 4px; right: -3px; width: 18px; height: 18px;
  border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.6); color: #fff;
  font-size: 10px; cursor: pointer; line-height: 1;
}
.kf-input {
  display: flex; gap: 8px; padding: 10px 12px; align-items: center;
  border-top: 1px solid var(--line); flex-shrink: 0;
}
.kf-input input { flex: 1; min-width: 0; }
.kf-ico-btn {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--line); background: var(--field); color: var(--muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all 0.15s;
}
.kf-ico-btn:hover { color: var(--brand); border-color: var(--brand); }
.kf-ico-btn svg { width: 16px; height: 16px; }

/* ===== 后台：客服消息面板 ===== */
.kf-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.kf-item {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  padding: 11px 13px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--line);
  transition: transform 0.15s, box-shadow 0.15s;
}
.kf-item:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(31, 38, 135, 0.1); }
.kf-item-av { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex-shrink: 0; position: relative; }
.kf-item-av img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; z-index: 2; }
.kf-item-av span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 15px;
}
.kf-item-info { flex: 1; min-width: 0; }
.kf-item-name { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.kf-item-name .kf-blk { font-size: 10px; font-weight: 600; color: #e5484d; background: rgba(229, 72, 77, 0.1); border: 1px solid rgba(229, 72, 77, 0.3); border-radius: 999px; padding: 1px 7px; }
.kf-item-last {
  font-size: 11.5px; color: var(--muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kf-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; }
.kf-item-time { font-size: 10px; color: var(--muted); }
.kf-item-badge {
  min-width: 18px; height: 18px; border-radius: 9px; background: #ff3b30; color: #fff;
  font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  padding: 0 5px; animation: kfBadgePop 0.25s ease;
}
/* 后台聊天弹窗（复用 .kf-modal 并放大） */
.kf-modal-admin { max-width: 560px !important; height: min(660px, 82vh); }
.kf-modal-admin .kf-head-sub { display: flex; align-items: center; gap: 8px; }
.kf-blk-btn {
  font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 2.5px 10px;
  border: 1px solid rgba(229, 72, 77, 0.35); color: #e5484d; background: rgba(229, 72, 77, 0.08);
  cursor: pointer; transition: all 0.15s;
}
.kf-blk-btn:hover { background: #e5484d; color: #fff; }
.kf-blk-btn.on { background: #e5484d; color: #fff; border-color: #e5484d; }
.kf-clear-btn {
  font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 2.5px 10px;
  border: 1px solid var(--well-border); color: var(--muted); background: var(--well);
  cursor: pointer; transition: all 0.15s;
}
.kf-clear-btn:hover { color: #e5484d; border-color: rgba(229, 72, 77, 0.4); }

/* v250：后台侧边栏客服小红点 */
.sn-item .sn-badge {
  display: inline-flex; min-width: 17px; height: 17px; border-radius: 9px;
  background: #ff3b30; color: #fff; font-size: 10.5px; font-weight: 700;
  font-style: normal; align-items: center; justify-content: center;
  padding: 0 5px; margin-left: auto; flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* v251：客服修复（图片无气泡、站内预览、删除按钮、输入区收尾） */
.kf-img-bare {
  display: block; max-width: 170px; max-height: 170px;
  border-radius: 10px; cursor: zoom-in;
  border: 1px solid var(--line);
}
.kf-bub-col { gap: 4px; }
.kf-viewer {
  position: fixed; inset: 0; z-index: 999; display: none;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.88); cursor: zoom-out; padding: 18px;
}
.kf-viewer.show { display: flex; }
.kf-viewer img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.kf-item-del {
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--well-border);
  background: var(--well); color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; padding: 0;
}
.kf-item-del svg { width: 13px; height: 13px; }
.kf-item-del:hover { color: #e5484d; border-color: rgba(229, 72, 77, 0.45); background: rgba(229, 72, 77, 0.1); }
/* 弹窗关闭按钮确保可见 */
.kf-modal .modal-close, .kf-modal-admin .modal-close { z-index: 10; top: 14px; right: 14px; }

/* v256：发通知弹窗 + 语音消息 */
.kf-audio { max-width: 220px; width: 100%; height: 36px; border-radius: 10px; }
.kf-notice { max-width: 460px !important; }
.kf-n-tabs { display: flex; gap: 8px; }
.kf-n-users {
  max-height: 180px; overflow-y: auto; margin-top: 8px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--field);
  padding: 4px;
}
.kf-n-user {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px;
  border-radius: 8px; cursor: pointer; font-size: 12.5px;
}
.kf-n-user:hover { background: var(--well); }
.kf-n-user input { flex-shrink: 0; }
.kf-n-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-n-sel { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 8px; }
.kf-n-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: 999px; padding: 2px 9px; cursor: pointer;
}
.kf-n-chip:hover { background: rgba(229, 72, 77, 0.12); color: #e5484d; }
.kf-n-media { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.kf-n-md { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); margin-left: auto; }
.kf-n-preview { display: flex; gap: 10px; align-items: flex-end; margin-top: 10px; flex-wrap: wrap; }
.kf-n-pv { position: relative; }
.kf-n-pv img { max-height: 80px; max-width: 130px; border-radius: 8px; display: block; }
.kf-n-pv audio { max-width: 190px; }
.kf-n-pv-x {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px;
  border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.6); color: #fff;
  font-size: 10px; cursor: pointer; line-height: 1;
}

/* v257：红包（卡片/拆包弹窗）+ 系统消息卡片 */
.kf-rp {
  width: 232px; border-radius: 15px; padding: 12px 13px 8px; cursor: pointer;
  background: linear-gradient(135deg, #ff6b57 0%, #e63946 55%, #d62828 100%);
  border: 1.5px solid rgba(255, 214, 124, 0.65);
  box-shadow: 0 6px 20px rgba(230, 57, 70, 0.32);
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative; overflow: hidden;
}
.kf-rp::before {
  content: ''; position: absolute; top: -30px; right: -30px; width: 90px; height: 90px;
  background: radial-gradient(rgba(255, 214, 124, 0.35), transparent 70%); border-radius: 50%;
}
.kf-rp:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(230, 57, 70, 0.42); }
.kf-rp.done { filter: grayscale(0.75); opacity: 0.72; cursor: default; }
.kf-rp.done:hover { transform: none; }
.kf-rp-ico {
  width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d8, #f7c948 60%, #e0a800);
  color: #b3261e; font-weight: 900; font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 -3px 8px rgba(179, 38, 30, 0.22), 0 2px 6px rgba(0, 0, 0, 0.18);
  vertical-align: middle;
}
.kf-rp-txt { display: inline-block; vertical-align: middle; margin-left: 10px; }
.kf-rp-txt b { display: block; color: #ffe9a8; font-size: 13.5px; letter-spacing: 0.5px; }
.kf-rp-txt span { color: rgba(255, 233, 168, 0.82); font-size: 10.5px; }
.kf-rp-time { clear: both; text-align: right; font-size: 10px; color: rgba(255, 233, 168, 0.6); margin-top: 4px; }
/* 拆红包弹窗 */
.kf-rp-mask {
  position: fixed; inset: 0; z-index: 998; display: flex;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.62); padding: 20px;
}
.kf-rp-box {
  width: min(300px, 86vw); border-radius: 20px; padding: 24px 18px 18px; text-align: center;
  background: linear-gradient(165deg, #ff6b57 0%, #e63946 60%, #c6222f 100%);
  border: 2px solid rgba(255, 214, 124, 0.7);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  animation: rpPop 0.28s cubic-bezier(0.3, 1.4, 0.6, 1);
}
@keyframes rpPop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.kf-rp-title { color: #ffe9a8; font-size: 15px; font-weight: 800; letter-spacing: 1px; }
.kf-rp-open {
  width: 78px; height: 78px; border-radius: 50%; margin: 16px auto 0; display: block;
  border: 3px solid rgba(255, 214, 124, 0.85);
  background: radial-gradient(circle at 35% 30%, #fff6d8, #f7c948 62%, #e0a800);
  color: #b3261e; font-weight: 900; font-size: 30px; cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), inset 0 -4px 10px rgba(179, 38, 30, 0.2);
  transition: transform 0.15s;
}
.kf-rp-open:hover { transform: scale(1.06); }
.kf-rp-open:disabled { opacity: 0.6; cursor: default; }
.kf-rp-result { margin-top: 6px; min-height: 30px; }
.kf-rp-amt {
  color: #ffe9a8; font-size: 30px; font-weight: 900;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.kf-rp-sub { color: rgba(255, 233, 168, 0.85); font-size: 11.5px; margin-top: 3px; }
.kf-rp-fail { color: #fff; font-size: 12.5px; padding: 6px 0; }
.kf-rp-close {
  margin-top: 14px; border: 1px solid rgba(255, 233, 168, 0.5); background: transparent;
  color: #ffe9a8; font-size: 12px; border-radius: 999px; padding: 5px 22px; cursor: pointer;
}
.kf-rp-close:hover { background: rgba(255, 233, 168, 0.15); }
/* 系统消息卡片（富内容） */
.kf-sys-card {
  margin: 4px auto 14px; width: fit-content; max-width: 86%;
  background: var(--field); border: 1px solid var(--line);
  border-radius: 14px; padding: 10px 12px 7px;
}
.kf-sys-tag {
  font-size: 10px; font-weight: 700; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  border-radius: 999px; padding: 1.5px 8px;
  display: inline-block; margin-bottom: 7px;
}
.kf-sys-card .kf-bub { background: transparent; border: 0; padding: 0; }
/* 后台：发红包按钮 */
.kf-rp-btn {
  font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2.5px 11px;
  border: 1px solid rgba(247, 201, 72, 0.55); color: #b8860b;
  background: rgba(247, 201, 72, 0.14); cursor: pointer; transition: all 0.15s;
}
.kf-rp-btn:hover { background: linear-gradient(135deg, #f7c948, #e0a800); color: #7a2e0e; border-color: #e0a800; }

/* v258：红包卡缩小（行布局内，不霸屏） */
.kf-rp { width: 178px; padding: 10px 11px 9px; border-radius: 13px; }
.kf-rp-ico { width: 34px; height: 34px; font-size: 16px; }
.kf-rp-txt { margin-left: 8px; }
.kf-rp-txt b { font-size: 12px; }
.kf-rp-txt span { font-size: 10px; }

/* v260：聊天气泡相对头像下移（不顶到头像上角，用户/客服两端通用） */
.kf-bub-col { margin-top: 6px; }

/* v261：气泡下移强化（优先级高于旧规则，用户/客服端通用） */
.kf-row > .kf-bub-col { margin-top: 10px; }

/* v262：发通知「指定用户」列表（小头像 + 昵称 + QQ） */
.kf-n-user { gap: 9px; }
.kf-n-av {
  width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  position: relative; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff; font-size: 11px; font-weight: 700;
}
.kf-n-av img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.kf-n-av i { font-style: normal; }
.kf-n-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.kf-n-info b { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-n-info i { font-style: normal; font-size: 10px; color: var(--muted); }

/* v263：发通知用户列表 - 长条卡片：左方头像 / 中QQ / 右选择，禁止横滑 */
.kf-n-users { overflow-x: hidden; }
.kf-n-users .kf-n-user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--glass); width: 100%; box-sizing: border-box;
}
.kf-n-user:last-child { margin-bottom: 2px; }
.kf-n-users .kf-n-av {
  width: 38px; height: 38px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
  position: relative; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff; font-size: 14px; font-weight: 800;
}
.kf-n-users .kf-n-av img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
.kf-n-users .kf-n-av i { font-style: normal; }
.kf-n-users .kf-n-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.kf-n-users .kf-n-qq {
  font-size: 13px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.kf-n-users .kf-n-info i {
  font-style: normal; font-size: 10.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kf-n-users .kf-n-user input { margin-left: auto; flex-shrink: 0; }

/* v264：修复勾选框被全局 input 样式拉成长条（含用户列表 QQ 被挤没） */
input[type="checkbox"], input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: 5px;
  accent-color: var(--brand);
  cursor: pointer;
}
/* 后台开关（.sw）内部的隐藏 checkbox 保持 0 尺寸 */
.sw input[type="checkbox"] {
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
}

/* v265：系统通知卡时间小标签（描边高亮，浅底清晰可读） */
.kf-sys-time {
  display: inline-block; font-size: 10px; color: var(--muted);
  background: var(--well); border: 1px solid var(--well-border);
  border-radius: 999px; padding: 1.5px 10px; margin-top: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* v266：气泡再下移（用户反馈还是偏高） */
.kf-row > .kf-bub-col { margin-top: 16px; }

/* v270：后台登录日志 */
.ll-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 11px; margin-bottom: 8px;
  background: var(--field); border: 1px solid var(--line);
}
.ll-item:last-child { margin-bottom: 0; }
.ll-badge {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; border-radius: 999px;
  padding: 2.5px 10px; margin-top: 1px;
}
.ll-badge.ok { color: var(--free); background: color-mix(in srgb, var(--free) 12%, transparent); border: 1px solid color-mix(in srgb, var(--free) 32%, transparent); }
.ll-badge.fail { color: #e5484d; background: rgba(229, 72, 77, 0.1); border: 1px solid rgba(229, 72, 77, 0.3); }
.ll-info { flex: 1; min-width: 0; }
.ll-name { font-size: 12.5px; font-weight: 600; word-break: break-all; }
.ll-reason {
  font-size: 10.5px; font-weight: 500; color: var(--muted);
  background: var(--well); border: 1px solid var(--well-border);
  border-radius: 999px; padding: 1px 8px;
}
.ll-sub { font-size: 11px; color: var(--muted); margin-top: 3px; word-break: break-all; }
.ll-time { flex-shrink: 0; font-size: 10px; color: var(--muted); white-space: nowrap; padding-top: 2px; }

/* v272：后台侧边栏适配视口（不超出浏览器工具栏，底部按钮可达） */
@media (min-width: 769px) {
  .sidebar {
    max-height: calc(100vh - 28px);
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
@media (max-width: 768px) {
  .sidebar {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

/* v275：退出登录按钮醒目实色（防玻璃透底看不清） */
.admin-logout-btn {
  background: linear-gradient(135deg, var(--brand), var(--brand2)) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
  opacity: 1 !important;
}
.sidebar .admin-logout-btn {
  position: sticky; bottom: 4px; z-index: 6;
}

/* v276：key 启用/禁用徽章可点击切换 */
.kt-badge { cursor: pointer; user-select: none; transition: transform 0.12s, box-shadow 0.12s; }
.kt-badge:hover { transform: scale(1.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }

/* v277：控制台列表小长条卡片 + Hero 适配 */
.rec-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px; margin-bottom: 8px;
  background: var(--field); border: 1px solid var(--line);
  transition: transform 0.12s;
}
.rec-item:last-child { margin-bottom: 0; }
.rec-item:hover { transform: translateX(2px); }
.rec-ico {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
}
.rec-ico.in { color: var(--free); background: color-mix(in srgb, var(--free) 13%, transparent); }
.rec-ico.out { color: #e5484d; background: rgba(229, 72, 77, 0.1); }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rec-dot.ok { background: var(--free); }
.rec-dot.fail { background: #e5484d; }
.rec-info { flex: 1; min-width: 0; }
.rec-info b { display: block; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-info small { font-size: 10.5px; color: var(--muted); }
.rec-amt { font-weight: 700; font-size: 13px; flex-shrink: 0; }
.rec-amt.success { color: var(--free); }
.rec-amt.fail { color: #e5484d; }
.rec-tag { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.rec-state { font-size: 10.5px; font-weight: 600; flex-shrink: 0; }
.rec-state.success { color: var(--free); }
.rec-state.fail { color: #e5484d; }
.rec-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--muted);
  background: var(--well); border: 1px solid var(--well-border);
  border-radius: 10px; padding: 7px 11px; margin-bottom: 8px;
}
.rec-head b { color: var(--brand); }
/* Hero 四宫格数字适配（大数字不溢出） */
.con-stat b { font-size: 15px; }
.con-stat span { font-size: 10px; }

/* v278：登录日志长条卡片（点击展开 IP/位置/UA）+ 双标签 */
.ll-card {
  border-radius: 12px; margin-bottom: 8px; overflow: hidden; cursor: pointer;
  background: var(--field); border: 1px solid var(--line);
  transition: border-color 0.15s;
}
.ll-card:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.ll-main { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ll-av {
  width: 34px; height: 34px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
  position: relative; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff; font-weight: 700; font-size: 13px;
}
.ll-av img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
.ll-av i { font-style: normal; }
.ll-av-admin { background: linear-gradient(135deg, #4f7cff, #9b5cff); font-size: 14px; }
.ll-arrow { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; transition: transform 0.2s; }
.ll-card.open .ll-arrow { transform: rotate(180deg); }
.ll-detail {
  display: none; margin: 0 12px; padding: 8px 0 12px;
  border-top: 1px dashed var(--line);
}
.ll-card.open .ll-detail { display: block; }
.ll-d { display: flex; gap: 8px; font-size: 11.5px; padding: 3px 0; }
.ll-d span { color: var(--muted); flex-shrink: 0; width: 66px; }
.ll-d b { font-weight: 500; word-break: break-all; }
.ll-d b.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }

/* v279：按钮禁用态 */
.btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }