/* =================================================================
   SCAC — Apple Dark · 极简黑白扁平风
   参考：Apple HIG (Dark Mode) · iOS 18 / macOS Sequoia
   设计语言：
     · 仅用黑白灰三色构成主基调（#000 / #FFF / 12%~92% 灰阶）
     · 彩色只用于等级标识（饱和度降低、透明度嵌入背景）与交互态
     · 视觉层级 90% 通过字重（200/400/500/600/700/800）和字号控制
     · 非线性动画：spring 类缓动（cubic-bezier(.22,1,.36,1) 及更强 overshoot）
     · 扁平优先；毛玻璃仅用于 Sticky Header / 遮罩 / FAB 三处
   ================================================================= */

/* ---------- 1. 设计令牌（背景压深 · 卡片不变 · 等级+平台双彩色保留） ---------- */
:root{
  /* 背景层级：页面底更深，卡面/面板颜色保持不变 —— 拉开差分，避免"全灰一片" */
  --bg:             #101011;            /* 页面底 · 压深（接近 Apple True Black Dark 的 0C0C0D，略亮不刺眼） */
  --bg-secondary:   #242426;            /* 卡片底 · 维持原 ~2C 亮度不动，形成深色底 + 亮灰卡的对比 */
  --bg-tertiary:    #303033;            /* 浮层 / 次级分组 · 稍亮于卡片，保证层次感 */
  --bg-quaternary:  rgba(255,255,255,0.06);  /* 分隔条 / 搜索框底 · 浅透明白 */
  --bg-elevated:    rgba(44,44,46,0.82);     /* 毛玻璃底 */

  /* 分隔线 —— 全灰 · 白透（无彩） */
  --separator:         rgba(255,255,255,0.11);   /* 1px 普通分隔 */
  --separator-opaque:  #3A3A3C;                   /* 不透明实色分隔 */
  --separator-strong:  rgba(255,255,255,0.18);    /* 强分隔（Modal 边） */

  /* 文字层级 —— 全部灰/白（不添加任何色彩），靠字重 & 透明度控层级 */
  --label:           #FFFFFF;          /* 主文本 · 纯白 */
  --label-2:         rgba(255,255,255,0.80);  /* 次文本 */
  --label-3:         rgba(255,255,255,0.52);  /* 三级文本（占位/说明） */
  --label-4:         rgba(255,255,255,0.24);  /* 四级文本（禁用态） */

  /* Tint · 极简灰（不再引入蓝，让所有彩色全部留给 等级 + 平台标签） */
  --tint:            #E5E5EA;
  --tint-hover:      #FFFFFF;
  --tint-press:      #8E8E93;

  /* 等级色（扁平化 · 低饱和 · 仅在 Chip/Badge/顶条使用）
     —— 2026-08-29 等级体系调整：原 LV3 位置插入「小佬」(rose 玫红)，
        原 LV3 资深 / LV4 权威 / LV5 卓越 顺位上移一级 → LV4 / LV5 / LV6，
        颜色随之平移：LV4=青(LV3原色) LV5=蓝(LV4原色) LV6=金(LV5原色) */
  --lv6:             #FF9F0A;
  --lv6-bg:          rgba(255,159,10,0.16);
  --lv6-line:        rgba(255,159,10,0.30);
  --lv5:             #0A84FF;
  --lv5-bg:          rgba(10,132,255,0.16);
  --lv5-line:        rgba(10,132,255,0.30);
  --lv4:             #64D2FF;
  --lv4-bg:          rgba(100,210,255,0.14);
  --lv4-line:        rgba(100,210,255,0.28);
  --lv3:             #FF648B;
  --lv3-bg:          rgba(255,100,139,0.14);
  --lv3-line:        rgba(255,100,139,0.28);
  --lv2:             #30D158;
  --lv2-bg:          rgba(48,209,88,0.14);
  --lv2-line:        rgba(48,209,88,0.28);
  --lv1:             #BF5AF2;
  --lv1-bg:          rgba(191,90,242,0.14);
  --lv1-line:        rgba(191,90,242,0.28);

  /* 功能色（深灰模式仍保留语义，但无彩色用于 UI） */
  --success:           #F5F5F7;          /* 成功灰（白偏）· 不抢等级色 */
  --warning:           #E5E5EA;
  --danger:            #F2F2F7;
  --link:              #C7C7CC;          /* 链接灰（非蓝）· 避免与等级色冲突 */

  /* 平台色 —— 各平台官方品牌色（Flat 扁平半透明贴片） */
  --plat-B站:         #FB7299;  /* bilibili 官方粉 */
  --plat-抖音:        #000000;  /* 抖音官方黑（与背景差分会由描边补偿） */
  --plat-小红书:      #FF2442;  /* 小红书官方红 */
  --plat-快手:        #FF4906;  /* 快手官方橙红 */
  --plat-百度视频:    #2932E1;  /* 百度品牌蓝（视频产品线） */
  --plat-知乎:        #0084FF;  /* 知乎品牌蓝 */
  --plat-好看视频:    #4E6EF2;  /* 好看视频（百度系深蓝） */
  --plat-微信视频号:  #07C160;  /* 微信生态绿 */
  --plat-QQ:          #12B7F5;  /* QQ 官方蓝 */
  --plat-微信:        #07C160;  /* 微信品牌绿 */
  --plat-支付宝:      #1677FF;  /* 支付宝官方蓝 */
  --plat-淘宝:        #FF4200;  /* 淘宝品牌橙红 */
  --plat-创客次元:    #59ACFF;  /* 未检索到官方品牌色，使用用户建议的浅蓝色 */
  /* —— 2026-08-28 新增平台品牌色 —— */
  --plat-共创世界:    #27C27A;  /* 共创世界（创造/社区）主视觉·活力绿 */
  --plat-QQ视频:      #1E9CFF;  /* QQ 系视频产品·蓝调 */
  --plat-兽频道:      #C2A52A;  /* 兽频道：用户要求「有点点暗的黄色」 */
  --plat-github:      #212121;  /* GitHub 官方品牌黑 */
  --plat-gitee:       #C71E23;  /* Gitee（码云）品牌红 */
  /* —— 2026-08-29 新增平台品牌色 —— */
  --plat-爱发电:       #FF5C8D;  /* 爱发电品牌粉 */
  --plat-YouTube:     #FF0000;  /* YouTube 官方红 */
  --plat-X:           #000000;  /* X（原 Twitter）官方黑 */
  --plat-Steam:       #1B2838;  /* Steam 官方深蓝 */
  --plat-其他:        #8E8E93;  /* 兜底：灰 */

  /* 分区色（do 字段 · 四色四环，与权威等级 chip 同风格） */
  /* —— 四个分区各有一个清晰语义色，彼此拉开，避免与六个等级色"混淆"：
       游戏 = 活力红/珊瑚（Scratch 游戏属性，偏苹果 Product Red 系）
       伪系统 = 皇家蓝/靛蓝（OS/系统 UI 常见代表色）
       视频教程 = 草绿（教学/成长语义色）
       动画 = 柔粉/玫红（创作/艺术感语义色） */
  --do-game:          #FF375F;
  --do-game-bg:       rgba(255,55,95,0.14);
  --do-game-line:     rgba(255,55,95,0.32);
  --do-fakeos:        #5E5CE6;
  --do-fakeos-bg:     rgba(94,92,230,0.14);
  --do-fakeos-line:   rgba(94,92,230,0.32);
  --do-tutorial:      #30D158;
  --do-tutorial-bg:   rgba(48,209,88,0.14);
  --do-tutorial-line: rgba(48,209,88,0.30);
  --do-anime:         #BF5AF2;
  --do-anime-bg:      rgba(191,90,242,0.14);
  --do-anime-line:    rgba(191,90,242,0.30);

  /* —— 2026-08-28 新增 7 个分区语义色 ——
     选色原则：避开 6 个等级色（金/蓝/青/玫红/绿/紫）和原 4 个分区色（红/靛/绿/紫），
     让新增分区彼此也能拉开差分。
       其他   = 中性灰（兜底，无情绪倾向）
       算法   = Teal 青蓝绿（计算/逻辑感，与 Lv.4 cyan 拉开偏绿）
       小作品 = Yellow 黄（轻量、小品的活泼感）
       工具   = Mint 薄荷绿（功能/辅助语义，区别于 视频教程 的草绿）
       软件   = Brown 棕（成品/系统级稳重感）
       音乐   = Pink 粉（创作/听觉艺术，偏冷红，区别于 游戏 的红粉）
       故事   = Coral 珊瑚（叙事/温度感，介于 Lv.5 橙与 游戏 红之间，偏暖）
  */
  --do-other:         #8E8E93;
  --do-other-bg:      rgba(142,142,147,0.14);
  --do-other-line:    rgba(142,142,147,0.32);
  --do-algo:          #30B0C7;
  --do-algo-bg:       rgba(48,176,199,0.14);
  --do-algo-line:     rgba(48,176,199,0.32);
  --do-mini:          #FFCC00;
  --do-mini-bg:       rgba(255,204,0,0.14);
  --do-mini-line:     rgba(255,204,0,0.32);
  --do-tool:          #00C7BE;
  --do-tool-bg:       rgba(0,199,190,0.14);
  --do-tool-line:     rgba(0,199,190,0.32);
  --do-soft:          #A2845E;
  --do-soft-bg:       rgba(162,132,94,0.16);
  --do-soft-line:     rgba(162,132,94,0.36);
  --do-music:         #FF2D55;
  --do-music-bg:      rgba(255,45,85,0.14);
  --do-music-line:    rgba(255,45,85,0.32);
  --do-story:         #FF8000;
  --do-story-bg:      rgba(255,128,0,0.14);
  --do-story-line:    rgba(255,128,0,0.34);

  /* 尺寸 —— Apple 常见圆角：12/16/20 */
  --r-xs:   10px;
  --r-sm:   12px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   22px;
  --r-pill: 999px;

  /* 阴影（暗色下必须轻柔，否则发光质感） */
  --shadow-none:  0 0 0 rgba(0,0,0,0);
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.60), 0 2px 8px rgba(0,0,0,0.40);
  --shadow-md:    0 2px 6px rgba(0,0,0,0.60), 0 12px 30px rgba(0,0,0,0.50);
  --shadow-lg:    0 6px 16px rgba(0,0,0,0.65), 0 24px 60px rgba(0,0,0,0.55);
  --shadow-xl:    0 16px 40px rgba(0,0,0,0.72), 0 48px 120px rgba(0,0,0,0.60);

  /* 非线性动画曲线（核心要求） */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);      /* 标准 Apple EaseOut */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);   /* 弹性 Overshoot（卡片/弹窗） */
  --ease-snap:     cubic-bezier(0.2, 0.8, 0.2, 1);      /* Apple 官方 "Swift" 曲线 */
  --ease-hold:     cubic-bezier(0.16, 1, 0.3, 1);       /* 出得慢、回得快 */
  --dur-fast:      0.18s;
  --dur:           0.30s;
  --dur-slow:      0.55s;
}

/* ---------- 2. 基础重置 ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","SF UI Display",
    "PingFang SC","Helvetica Neue","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
  background:var(--bg);
  color:var(--label);
  min-height:100vh;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:0.01em;
  /* 让文字字重对比更锐利（Apple 风格关键） */
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
a{color:var(--link);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--tint-hover);text-decoration:none}  /* 扁平：去掉下划线 hover */
img{max-width:100%;display:block;filter:saturate(0.92)}  /* 扁平：轻微降饱和 */
button{font-family:inherit;-webkit-tap-highlight-color:transparent;cursor:pointer}
kbd,code,pre{font-family:"SF Mono","SF Mono","Cascadia Code","Fira Code",Menlo,Consolas,monospace;font-variant-ligatures:no-common-ligatures}

/* 滚动条 Apple Dark */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(142,142,147,0.40);border-radius:var(--r-pill)}
::-webkit-scrollbar-thumb:hover{background:rgba(142,142,147,0.62)}

/* 文本选择色 Apple */
::selection{background:rgba(10,132,255,0.28);color:#fff}

/* ---------- 3. 通用容器 ---------- */
.container{
  max-width:1120px;
  margin:0 auto;
  padding:28px 22px 72px;
}
.section-title{
  font-size:1.42rem;
  font-weight:800;                    /* 大字重驱动层级 */
  color:var(--label);
  margin:0 2px 14px;
  letter-spacing:-0.022em;           /* Apple 负字距 */
}

/* ---------- 4. Header · 非固定（整页一起滚动），深灰扁平无阴影 ---------- */
.header{
  /* 取消 sticky 固定 · 用户要求整页一起滚动 */
  position:relative;
  top:auto;
  z-index:2;
  background:transparent;                          /* 与页面底一致 · 无分离感 */
  -webkit-backdrop-filter:none;
  backdrop-filter:none;                            /* 去毛玻璃 */
  border-bottom:1px solid var(--separator);
}
.header-inner{
  max-width:1120px;margin:0 auto;padding:26px 22px 22px;
  position:relative;
}
.brand{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.brand-badge{
  width:52px;height:52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.55rem;font-weight:800;color:#fff;
  background:#141418;                  /* 扁平纯色，无渐变（Apple 黑） */
  border:1px solid var(--separator);
  box-shadow:var(--shadow-sm);
  letter-spacing:-0.02em;
  transition:transform var(--dur-fast) var(--ease-spring);
}
.brand-badge:hover{transform:scale(1.04) rotate(-1.2deg)}   /* 非线性微互动 */
.brand-badge.small{width:36px;height:36px;border-radius:12px;font-size:1.05rem;box-shadow:none}
.brand-text h1{
  font-size:2.05rem;font-weight:900;letter-spacing:-0.035em;
  color:#fff;                         /* 扁平纯白标题（Apple 核心） */
}
.brand-sub{font-size:.8rem;color:var(--label-3);margin-top:2px;font-weight:500;letter-spacing:.28px}
.header-desc{
  font-size:.88rem;font-weight:400;
  color:var(--label-2);max-width:720px;line-height:1.75;margin-bottom:14px;
}
.header-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.hm-item{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:var(--r-pill);
  background:var(--bg-quaternary);
  font-size:.78rem;color:var(--label-2);font-weight:500;
  border:1px solid transparent;
  transition:border-color var(--dur-fast) var(--ease-standard),
             background var(--dur-fast) var(--ease-standard);
}
.hm-item:hover{border-color:var(--separator);background:rgba(235,235,245,0.10)}
.hm-item .hm-ico{font-size:.82rem;filter:grayscale(0.2)}  /* 扁平化 emoji */
.hm-item .hm-lbl{color:var(--label-3);font-weight:400}
.hm-time .hm-val{color:var(--tint);font-weight:600;font-family:"SF Mono",Menlo,monospace;font-size:.78rem}

/* —— 2026-08-29 版本号椭圆徽章（紧贴数据更新时间右侧） —— */
.hm-version{
  /* 椭圆形框：与 hm-item 同基底，但用品牌色微染，区别于普通元信息 */
  background:rgba(255,100,139,0.10);
  border-color:rgba(255,100,139,0.28);
}
.hm-version:hover{
  border-color:rgba(255,100,139,0.42);
  background:rgba(255,100,139,0.16);
}
.hm-ver-ico{font-size:.78rem;filter:grayscale(0.2)}
.hm-ver-val{
  color:#FF8FAE;
  font-weight:700;
  font-family:"SF Mono",Menlo,monospace;
  font-size:.74rem;
  letter-spacing:.04em;
}

.header-disclaimer{
  display:inline-block;
  font-size:.74rem;
  font-weight:500;
  color:var(--label-2);                               /* 灰字 · 非黄 */
  padding:8px 14px;border-radius:var(--r-sm);
  background:var(--bg-secondary);
  border:1px solid var(--separator);
  margin:0;                                           /* 替换默认 <p> margin，方便与按钮对齐 */
  /* 与投稿按钮同排时：按内容宽度贴左边，不自动撑满整行 */
  flex:0 1 auto;
  max-width:100%;
}

/* 标题区最后一行：提示 + 右侧按钮组（数据有误 + 投稿）
   布局：提示贴左边；按钮组始终贴提示的正右方。
   说明：使用 flex-start + margin-left:auto，保证按钮组永远"靠在提示右边"；
         若宽度不够会自动换行（margin-left:auto 在换行时会让按钮组贴右或整行显示，由响应式覆盖宽度）。 */
.header-bottom-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  flex-wrap:wrap;
  margin-top:14px;
}
/* 按钮组容器：两个按钮紧贴排列，整体推到右侧 */
.header-actions{
  display:inline-flex;
  align-items:center;
  gap:0;
  margin-left:auto;
  flex-wrap:wrap;
}
.header-submit-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:5px 11px;
  font-size:.72rem;
  font-weight:600;
  line-height:1.15;
  /* 小按钮 · 红色圆角矩形（圆度介于锐利与胶囊之间，更"矩形带圆角"） */
  border-radius:8px;
  color:#fff;
  background:linear-gradient(180deg,#FF453A 0%,#E03127 55%,#C42A20 100%);
  box-shadow:0 4px 10px rgba(255,69,58,0.26), inset 0 0 0 1px rgba(255,255,255,0.12);
  border:1px solid rgba(255,69,58,0.55);
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  letter-spacing:.01em;
  transform:translateY(0);
  flex:0 0 auto;
  transition:transform var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard),
             filter var(--dur-fast) var(--ease-standard),
             background var(--dur-fast) var(--ease-standard);
}
.header-submit-btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
  box-shadow:0 8px 16px rgba(255,69,58,0.34), inset 0 0 0 1px rgba(255,255,255,0.16);
}
.header-submit-btn:active{
  transform:translateY(0) scale(.985);
  filter:brightness(.97);
}
.header-submit-btn::before{
  content:"＋";
  font-weight:800;
  font-size:.78rem;
  line-height:1;
  transform:translateY(-.5px);
}

/* —— 2026-08-29 「数据有误」举报按钮：琥珀/警告色，⚠ 符号 —— */
.header-report-btn{
  background:linear-gradient(180deg,#FF9F0A 0%,#E08A00 55%,#C47600 100%);
  border:1px solid rgba(255,159,10,0.55);
  box-shadow:0 4px 10px rgba(255,159,10,0.24), inset 0 0 0 1px rgba(255,255,255,0.12);
}
.header-report-btn:hover{
  filter:brightness(1.05);
  box-shadow:0 8px 16px rgba(255,159,10,0.32), inset 0 0 0 1px rgba(255,255,255,0.16);
}
.header-report-btn::before{
  content:"⚠";
  font-size:.76rem;
}

/* ---------- 5. 数据横幅 · 全灰 ---------- */
.data-banner{
  display:none;align-items:center;gap:10px;
  padding:12px 18px;border-radius:var(--r-md);
  background:var(--bg-secondary);
  border:1px solid var(--separator);
  color:var(--label-2);
  font-size:.82rem;font-weight:500;
  margin-bottom:20px;
  letter-spacing:.15px;
}
.data-banner.show{display:flex}

/* ---------- 6. 统计卡片 · 扁平（无边框渐变条靠字重） ---------- */
.stats-section{margin-bottom:30px}
.stats{
  display:grid;gap:12px;
  grid-template-columns:repeat(7,1fr);
}
.stat-card{
  background:var(--bg-secondary);
  border:1px solid var(--separator);
  border-radius:var(--r-lg);
  padding:20px 18px 18px;
  /* 扁平：默认无阴影（Apple 暗色卡片靠背景色差异分层） */
  box-shadow:none;
  position:relative;overflow:hidden;
  transition:
    transform var(--dur) var(--ease-spring),
    box-shadow var(--dur) var(--ease-standard),
    border-color var(--dur) var(--ease-standard),
    background var(--dur) var(--ease-standard);
}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;width:3px;height:100%;
  /* 扁平：左侧极窄色条，替代原来的"顶部彩条"更像 Apple */
  opacity:0.95;
}
.stat-card:hover{
  transform:translateY(-4px);                  /* 非线性弹性抬升 */
  border-color:var(--separator-strong);
  background:var(--bg-tertiary);
  box-shadow:var(--shadow-md);
}
.stat-card .stat-val{
  font-size:2rem;
  font-weight:900;                             /* 超粗数字 = 视觉优先级 1 */
  line-height:1.05;
  letter-spacing:-0.032em;
  margin-bottom:8px;
  color:var(--label);
  min-height:1em;                              /* 动画前占位，防止布局跳动 */
  /* 刚进入页面的几毫秒：不显示数字；动画开始时由 JS 清掉 hidden 类。
     同时默认透明度 0，触发动画时配合淡入，避免 0 → 目标 的"闪一下"。 */
  transition:opacity 220ms var(--ease-standard);
}
.stat-card .stat-val.hidden{
  /* 视觉上"先不显示"——保留布局空间（不 display:none），只隐藏文字。 */
  opacity:0;
}
.stat-card .stat-val.rolling{
  /* 滚动阶段：完全可见 */
  opacity:1;
}
.stat-card .stat-lbl{
  font-size:.70rem;
  font-weight:500;                             /* 小字重标签 = 视觉优先级 3 */
  color:var(--label-3);
  letter-spacing:.15px;
}
/* 每个等级：只给左边条 & 数字染色，其它全灰 */
.stat-card.total::before{background:var(--label)}
.stat-card.total .stat-val{background:linear-gradient(135deg,#fff 0%,#9a9aa0 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-card.r6::before{background:var(--lv6)}
.stat-card.r6 .stat-val{color:var(--lv6);-webkit-text-fill-color:var(--lv6)}
.stat-card.r5::before{background:var(--lv5)}
.stat-card.r5 .stat-val{color:var(--lv5);-webkit-text-fill-color:var(--lv5)}
.stat-card.r4::before{background:var(--lv4)}
.stat-card.r4 .stat-val{color:var(--lv4);-webkit-text-fill-color:var(--lv4)}
.stat-card.r3::before{background:var(--lv3)}
.stat-card.r3 .stat-val{color:var(--lv3);-webkit-text-fill-color:var(--lv3)}
.stat-card.r2::before{background:var(--lv2)}
.stat-card.r2 .stat-val{color:#30D158;-webkit-text-fill-color:#30D158}
.stat-card.r1::before{background:var(--lv1)}
.stat-card.r1 .stat-val{color:#BF5AF2;-webkit-text-fill-color:#BF5AF2}

/* ---------- 7. 控制面板 · 扁平（白字黑底，边框极淡） ---------- */
.panel{
  background:var(--bg-secondary);
  border:1px solid var(--separator);
  border-radius:var(--r-xl);
  padding:24px;
  box-shadow:none;                               /* 扁平：无默认阴影 */
  margin-bottom:30px;
  transition:box-shadow var(--dur-slow) var(--ease-standard);
}
.panel:hover{box-shadow:var(--shadow-sm)}
.panel-title{margin-bottom:16px}

/* 搜索行 */
.search-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.search-wrap{position:relative;flex:1}
.search-icon{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  color:var(--label-3);font-size:.92rem;pointer-events:none;
  filter:grayscale(0.3);
}
.search-input{
  width:100%;padding:13px 16px 13px 42px;
  background:var(--bg-tertiary);                  /* 扁平：纯灰底，无边框渐变 */
  border:1px solid var(--separator);
  border-radius:var(--r-md);
  color:var(--label);font-size:.93rem;font-weight:400;
  outline:none;
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur) var(--ease-spring);
  font-family:inherit;
  letter-spacing:.01em;
}
.search-input::placeholder{color:var(--label-3);font-weight:400}
.search-input:focus{
  background:#2A2A2C;
  border-color:var(--separator-strong);
  box-shadow:0 0 0 4px rgba(255,255,255,0.06);          /* 白透明 focus ring，非蓝 */
}
.search-btn{
  padding:13px 26px;border-radius:var(--r-md);border:1px solid var(--separator);
  background:var(--bg-secondary);                        /* 深灰底，非白（统一简约） */
  color:var(--label);                                    /* 白字 · 简约 iOS 扁平主按钮 */
  font-size:.92rem;font-weight:600;letter-spacing:.22px;
  cursor:pointer;white-space:nowrap;
  transition:
    transform .14s var(--ease-spring),
    background var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur) var(--ease-standard);
  box-shadow:none;
}
.search-btn:hover{background:var(--bg-tertiary);box-shadow:var(--shadow-sm)}
.search-btn:active{transform:scale(0.96);background:#202022}
.search-btn.active{animation:btnSnap .32s var(--ease-spring)}
@keyframes btnSnap{
  0%{transform:scale(1)}
  40%{transform:scale(0.90)}
  100%{transform:scale(1)}
}

.search-hint{
  margin:6px 2px 20px;display:flex;flex-wrap:wrap;gap:4px 18px;
  align-items:center;font-size:.72rem;color:var(--label-3);font-weight:400;
}
.search-hint kbd{
  display:inline-block;padding:2px 8px;border-radius:8px;
  background:var(--bg-tertiary);color:var(--label-2);
  font-size:.68rem;font-weight:600;margin:0 3px;
  border:1px solid var(--separator);
}
.search-hint code{
  padding:3px 9px;border-radius:8px;background:var(--bg-tertiary);
  color:var(--label);font-size:.70rem;font-weight:600;
  border:1px solid var(--separator);margin:0 3px;
}
.search-hint-ex{opacity:0.95}

/* 筛选块 */
.filter-block{margin-top:18px;padding-top:18px;border-top:1px solid var(--separator)}
.filter-block:first-of-type{border-top:none;margin-top:0;padding-top:0}
.filter-lbl{
  display:block;font-size:.68rem;color:var(--label-3);font-weight:600;
  letter-spacing:1.2px;text-transform:uppercase;
  margin-bottom:10px;
}
.chip-group{display:flex;flex-wrap:wrap;gap:8px}
.filter-sub{
  margin-top:8px;
  font-size:.70rem;color:var(--label-3);font-weight:400;letter-spacing:.1px;
  opacity:0.9;
}

/* Chip —— Apple Segment 风格（扁平黑底+选中白） */
.chip{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 16px;border-radius:var(--r-pill);
  border:1px solid var(--separator);
  background:var(--bg-tertiary);
  color:var(--label-2);
  font-size:.80rem;font-weight:500;
  cursor:pointer;
  transition:
    transform var(--dur-fast) var(--ease-spring),
    background var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur) var(--ease-standard);
  user-select:none;
  letter-spacing:.18px;
}
.chip:hover{
  background:rgba(235,235,245,0.08);
  color:var(--label);
  border-color:rgba(235,235,245,0.18);
}
.chip:active{transform:scale(0.95)}
/* 选中态：全白底黑字 强对比扁平（Apple 经典） */
.chip.on{
  background:#fff;color:#000;border-color:#fff;
  box-shadow:0 4px 14px rgba(255,255,255,0.06);
  font-weight:700;
  transform:translateY(-1px);
}

/* 等级 chip 未选中态：只在边框/文字上极轻微提示 */
.chip-gold{color:#F2B14F;border-color:rgba(255,159,10,0.20)}
.chip-gold:hover{background:rgba(255,159,10,0.06);border-color:rgba(255,159,10,0.30);color:#F2B14F}
.chip-gold.on{background:var(--lv6);color:#1a0f00;border-color:var(--lv6);box-shadow:0 4px 16px rgba(255,159,10,0.20)}

.chip-blue{color:#5AA9FF;border-color:rgba(10,132,255,0.20)}
.chip-blue:hover{background:rgba(10,132,255,0.06);border-color:rgba(10,132,255,0.30);color:#5AA9FF}
.chip-blue.on{background:var(--lv5);color:#fff;border-color:var(--lv5);box-shadow:0 4px 16px rgba(10,132,255,0.20)}

.chip-cyan{color:#7EDCFF;border-color:rgba(100,210,255,0.20)}
.chip-cyan:hover{background:rgba(100,210,255,0.05);border-color:rgba(100,210,255,0.28);color:#7EDCFF}
.chip-cyan.on{background:var(--lv4);color:#002633;border-color:var(--lv4);box-shadow:0 4px 16px rgba(100,210,255,0.18)}

/* —— 2026-08-29 新增 LV3 小佬 chip（rose 玫红色） —— */
.chip-rose{color:#FF8FAE;border-color:rgba(255,100,139,0.22)}
.chip-rose:hover{background:rgba(255,100,139,0.06);border-color:rgba(255,100,139,0.32);color:#FF8FAE}
.chip-rose.on{background:var(--lv3);color:#330011;border-color:var(--lv3);box-shadow:0 4px 16px rgba(255,100,139,0.20)}

.chip-green{color:#5ED87A;border-color:rgba(48,209,88,0.20)}
.chip-green:hover{background:rgba(48,209,88,0.05);border-color:rgba(48,209,88,0.28);color:#5ED87A}
.chip-green.on{background:var(--lv2);color:#002b0e;border-color:var(--lv2);box-shadow:0 4px 16px rgba(48,209,88,0.18)}

.chip-lime{color:#CC8AF5;border-color:rgba(191,90,242,0.20)}
.chip-lime:hover{background:rgba(191,90,242,0.05);border-color:rgba(191,90,242,0.28);color:#CC8AF5}
.chip-lime.on{background:var(--lv1);color:#1f0a2e;border-color:var(--lv1);box-shadow:0 4px 16px rgba(191,90,242,0.20)}

/* —— 分区 chip（四色四环，和等级 chip 一样的选中感） —— */
.chip-dogame{color:#FF7A8E;border-color:rgba(255,55,95,0.22)}
.chip-dogame:hover{background:rgba(255,55,95,0.06);border-color:rgba(255,55,95,0.32);color:#FF7A8E}
.chip-dogame.on{background:var(--do-game);color:#fff;border-color:var(--do-game);box-shadow:0 4px 16px rgba(255,55,95,0.20)}

.chip-dofakeos{color:#8E8CFF;border-color:rgba(94,92,230,0.22)}
.chip-dofakeos:hover{background:rgba(94,92,230,0.06);border-color:rgba(94,92,230,0.32);color:#8E8CFF}
.chip-dofakeos.on{background:var(--do-fakeos);color:#fff;border-color:var(--do-fakeos);box-shadow:0 4px 16px rgba(94,92,230,0.22)}

.chip-dotut{color:#68DA84;border-color:rgba(48,209,88,0.20)}
.chip-dotut:hover{background:rgba(48,209,88,0.05);border-color:rgba(48,209,88,0.30);color:#68DA84}
.chip-dotut.on{background:var(--do-tutorial);color:#002b0e;border-color:var(--do-tutorial);box-shadow:0 4px 16px rgba(48,209,88,0.18)}

.chip-doanime{color:#D39AFF;border-color:rgba(191,90,242,0.22)}
.chip-doanime:hover{background:rgba(191,90,242,0.06);border-color:rgba(191,90,242,0.32);color:#D39AFF}
.chip-doanime.on{background:var(--do-anime);color:#1f0a2e;border-color:var(--do-anime);box-shadow:0 4px 16px rgba(191,90,242,0.20)}

/* —— 2026-08-28 新增 7 个分区 chip（沿用等级 chip 的"未选 → 浅色提示 / 选中 → 满色填充"双态） —— */
.chip-doother{color:#B6B6BB;border-color:rgba(142,142,147,0.26)}
.chip-doother:hover{background:rgba(142,142,147,0.08);border-color:rgba(142,142,147,0.38);color:#C9C9CE}
.chip-doother.on{background:var(--do-other);color:#1a1a1c;border-color:var(--do-other);box-shadow:0 4px 16px rgba(142,142,147,0.22)}

.chip-doalgo{color:#5EC8D6;border-color:rgba(48,176,199,0.22)}
.chip-doalgo:hover{background:rgba(48,176,199,0.06);border-color:rgba(48,176,199,0.34);color:#5EC8D6}
.chip-doalgo.on{background:var(--do-algo);color:#00191f;border-color:var(--do-algo);box-shadow:0 4px 16px rgba(48,176,199,0.22)}

.chip-domini{color:#FFD93D;border-color:rgba(255,204,0,0.24)}
.chip-domini:hover{background:rgba(255,204,0,0.06);border-color:rgba(255,204,0,0.36);color:#FFD93D}
.chip-domini.on{background:var(--do-mini);color:#332700;border-color:var(--do-mini);box-shadow:0 4px 16px rgba(255,204,0,0.22)}

.chip-dotool{color:#4DE0D8;border-color:rgba(0,199,190,0.22)}
.chip-dotool:hover{background:rgba(0,199,190,0.06);border-color:rgba(0,199,190,0.34);color:#4DE0D8}
.chip-dotool.on{background:var(--do-tool);color:#00302c;border-color:var(--do-tool);box-shadow:0 4px 16px rgba(0,199,190,0.22)}

.chip-dosoft{color:#D2B48C;border-color:rgba(162,132,94,0.26)}
.chip-dosoft:hover{background:rgba(162,132,94,0.08);border-color:rgba(162,132,94,0.40);color:#D2B48C}
.chip-dosoft.on{background:var(--do-soft);color:#1f1408;border-color:var(--do-soft);box-shadow:0 4px 16px rgba(162,132,94,0.26)}

.chip-domusic{color:#FF6E8A;border-color:rgba(255,45,85,0.24)}
.chip-domusic:hover{background:rgba(255,45,85,0.06);border-color:rgba(255,45,85,0.36);color:#FF6E8A}
.chip-domusic.on{background:var(--do-music);color:#fff;border-color:var(--do-music);box-shadow:0 4px 16px rgba(255,45,85,0.22)}

.chip-dostory{color:#FFA55C;border-color:rgba(255,128,0,0.26)}
.chip-dostory:hover{background:rgba(255,128,0,0.07);border-color:rgba(255,128,0,0.38);color:#FFA55C}
.chip-dostory.on{background:var(--do-story);color:#2a1500;border-color:var(--do-story);box-shadow:0 4px 16px rgba(255,128,0,0.24)}

/* ---------- 8. 卡片网格 · 扁平（靠字重+左侧条分级） ---------- */
.list-section{margin-bottom:20px}
.grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
}
.card{
  background:var(--bg-secondary);
  border:1px solid var(--separator);
  border-radius:var(--r-lg);
  padding:20px 20px 18px;
  cursor:pointer;
  /* 扁平：默认无阴影 */
  box-shadow:none;
  position:relative;overflow:hidden;
  isolation:isolate;
  transition:
    transform var(--dur) var(--ease-spring),
    box-shadow var(--dur) var(--ease-standard),
    border-color var(--dur) var(--ease-standard),
    background var(--dur) var(--ease-standard);
}
/* 扁平：卡片左侧窄色条（替代顶部彩条更 Apple） */
.card::before{
  content:'';position:absolute;top:0;left:0;width:3px;height:100%;
  background:#fff;opacity:0.85;z-index:1;
}
.card.lv6::before{background:var(--lv6)}
.card.lv5::before{background:var(--lv5)}
.card.lv4::before{background:var(--lv4)}
.card.lv3::before{background:var(--lv3)}
.card.lv2::before{background:var(--lv2)}
.card.lv1::before{background:var(--lv1)}

/* Hover —— 非线性弹簧抬升（核心非线性体验） */
.card:hover{
  transform:translateY(-5px) scale(1.004);
  box-shadow:var(--shadow-lg);
  border-color:var(--separator-strong);
  background:var(--bg-tertiary);
}
.card:hover::before{width:4px;transition:width var(--dur) var(--ease-spring)}
.card:not(:hover)::before{width:3px;transition:width var(--dur-fast) var(--ease-standard)}

.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;position:relative;z-index:2}
.card-name{
  font-size:1.08rem;font-weight:800;color:var(--label);
  letter-spacing:-0.018em;                           /* 负字距 Apple */
}
.card-desc{
  font-size:.84rem;font-weight:400;
  color:var(--label-2);line-height:1.7;margin-bottom:14px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;
}
.card-meta{display:flex;gap:6px;flex-wrap:wrap;position:relative;z-index:2}
.mtag{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:var(--r-pill);
  font-size:.70rem;font-weight:500;
  background:var(--bg-tertiary);
  color:var(--label-3);
  border:1px solid var(--separator);
}

/* Badge —— 扁平（背景极低透明度 + 细边框） */
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px 11px;border-radius:var(--r-pill);
  font-size:.68rem;font-weight:700;white-space:nowrap;letter-spacing:.32px;
  border:1px solid transparent;
  backdrop-filter:none;                               /* 扁平：去毛玻璃 */
}
.badge-6{background:var(--lv6-bg);color:#FFB74A;border:1px solid var(--lv6-line)}
.badge-5{background:var(--lv5-bg);color:#5AA9FF;border:1px solid var(--lv5-line)}
.badge-4{background:var(--lv4-bg);color:#7EDCFF;border:1px solid var(--lv4-line)}
.badge-3{background:var(--lv3-bg);color:#FF8FAE;border:1px solid var(--lv3-line)}
.badge-2{background:var(--lv2-bg);color:#5ED87A;border:1px solid var(--lv2-line)}
.badge-1{background:var(--lv1-bg);color:#CC8AF5;border:1px solid var(--lv1-line)}
.badge-admin{background:rgba(0,122,255,0.16);color:#4FA8FF;border:1px solid rgba(0,122,255,0.34)}

/* 分区 badge（卡片顶栏 / 详情页头像右侧）—— 和等级 badge 同视觉尺寸，但底色/描边走分区语义色 */
.badge.do-badge{ gap:5px; }
.do-ico{ display:inline-flex;align-items:center;line-height:1;font-size:.76rem; }
.badge.do-game    { background:var(--do-game-bg);    color:#FF6A83; border:1px solid var(--do-game-line);    }
.badge.do-fakeos  { background:var(--do-fakeos-bg);  color:#8E8CFF; border:1px solid var(--do-fakeos-line);  }
.badge.do-tutorial{ background:var(--do-tutorial-bg);color:#68DA84; border:1px solid var(--do-tutorial-line);}
.badge.do-anime   { background:var(--do-anime-bg);   color:#D39AFF; border:1px solid var(--do-anime-line);   }
/* —— 2026-08-28 新增 7 个分区 badge（详情页头像右侧分区徽章） —— */
.badge.do-other   { background:var(--do-other-bg);   color:#B6B6BB; border:1px solid var(--do-other-line);   }
.badge.do-algo    { background:var(--do-algo-bg);    color:#5EC8D6; border:1px solid var(--do-algo-line);    }
.badge.do-mini    { background:var(--do-mini-bg);    color:#FFD93D; border:1px solid var(--do-mini-line);    }
.badge.do-tool    { background:var(--do-tool-bg);    color:#4DE0D8; border:1px solid var(--do-tool-line);    }
.badge.do-soft    { background:var(--do-soft-bg);    color:#D2B48C; border:1px solid var(--do-soft-line);    }
.badge.do-music   { background:var(--do-music-bg);   color:#FF6E8A; border:1px solid var(--do-music-line);   }
.badge.do-story   { background:var(--do-story-bg);   color:#FFA55C; border:1px solid var(--do-story-line);   }
.card-top .badge + .badge,
.mhead .badge + .badge{margin-left:6px}

/* 空状态 */
.empty{text-align:center;padding:100px 24px;color:var(--label-3)}
.empty-icon{font-size:3.2rem;margin-bottom:16px;opacity:0.5;filter:grayscale(0.5)}
.empty-txt{font-size:1rem;color:var(--label-2);font-weight:700;margin-bottom:6px;letter-spacing:-.01em}
.empty-sub{font-size:.82rem;color:var(--label-3);font-weight:400}

/* ---------- 8.5 继续加载按钮（首页账号列表分页加载） · Apple 扁平深灰 ---------- */
.load-more-wrap{
  display:flex;justify-content:center;
  margin-top:28px;padding:6px 0 2px;
}
.load-more-btn{
  appearance:none;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:240px;
  padding:13px 30px;
  border-radius:var(--r-pill);
  border:1px solid var(--separator-strong);
  background:var(--bg-secondary);
  color:var(--label);
  font-family:inherit;
  font-size:.88rem;font-weight:600;letter-spacing:.18px;
  cursor:pointer;white-space:nowrap;
  transition:
    transform .14s var(--ease-spring),
    background var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur) var(--ease-standard);
  box-shadow:none;
  /* 入场轻淡入 */
  animation:loadMoreIn .42s var(--ease-standard) both;
}
.load-more-btn:hover{
  background:var(--bg-tertiary);
  border-color:#fff;
  color:#fff;
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.load-more-btn:active{
  transform:translateY(0) scale(.98);
  background:#202022;
}
/* 给"继续加载"加一个左侧小圆点指示器，提示"还有更多未加载" */
.load-more-btn::before{
  content:'';display:inline-block;
  width:6px;height:6px;border-radius:50%;
  background:var(--tint);margin-right:10px;
  opacity:.85;
  transition:background var(--dur-fast) var(--ease-standard);
}
.load-more-btn:hover::before{background:#fff}
@keyframes loadMoreIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---------- 9. Modal · 黑底 Sheet 弹入（强非线性 Spring） ---------- */
.modal-bg{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,0.62);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  display:flex;align-items:center;justify-content:center;
  padding:24px 20px;
  opacity:0;visibility:hidden;
  transition:opacity .38s var(--ease-snap),visibility .38s var(--ease-snap);
}
.modal-bg.open{opacity:1;visibility:visible}
.modal-bg.closing{opacity:0;visibility:visible}
.modal{
  background:#0A0A0D;                      /* 比卡片更深的灰 · 扁平 */
  border:1px solid var(--separator-strong);
  border-radius:28px;
  max-width:640px;width:100%;
  max-height:88vh;overflow-y:auto;
  position:relative;
  /* Apple Sheet：先缩放+下坠，再弹回（非线性核心） */
  transform:translateY(60px) scale(0.92);
  opacity:0;
  box-shadow:var(--shadow-xl);
  transition:
    transform .55s cubic-bezier(.22,1.3,.36,1),     /* 强 overshoot */
    opacity .35s var(--ease-snap);
}
.modal-bg.open .modal{transform:translateY(0) scale(1);opacity:1}
.modal-bg.closing .modal{
  transform:translateY(40px) scale(0.96);
  opacity:0;
  transition:transform .28s var(--ease-standard),opacity .28s var(--ease-standard);
}

/* Modal 顶部把手（Apple Sheet 标志） */
.modal::before{
  content:'';display:block;margin:12px auto 0;
  width:36px;height:5px;border-radius:999px;
  background:rgba(235,235,245,0.26);
}

.modal-close{
  position:absolute;top:16px;right:16px;
  z-index:2;
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--separator);background:var(--bg-tertiary);
  color:var(--label-3);font-size:.95rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:
    transform .14s var(--ease-spring),
    background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}
.modal-close:hover{
  background:rgba(255,69,58,0.14);
  color:#FF6B61;
  border-color:rgba(255,69,58,0.32);
  transform:rotate(90deg) scale(1.06);           /* 非线性旋转 */
}

.mbody{padding:14px 28px 32px}

.mhead{display:flex;align-items:center;gap:16px;margin-bottom:26px;margin-top:10px}
.mavatar{
  width:60px;height:60px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;font-weight:900;
  color:#fff;flex-shrink:0;
  background:var(--bg-tertiary);
  border:1px solid var(--separator);
  box-shadow:var(--shadow-sm);
  letter-spacing:-.02em;
}
.mavatar.lv6{background:linear-gradient(160deg,#3A2400,#1A1200);color:#FFB74A;border-color:rgba(255,159,10,0.28)}
.mavatar.lv5{background:linear-gradient(160deg,#001B3A,#000E1F);color:#5AA9FF;border-color:rgba(10,132,255,0.28)}
.mavatar.lv4{background:linear-gradient(160deg,#002838,#00121B);color:#7EDCFF;border-color:rgba(100,210,255,0.28)}
.mavatar.lv3{background:linear-gradient(160deg,#3A0014,#1A0009);color:#FF8FAE;border-color:rgba(255,100,139,0.28)}
.mavatar.lv2{background:linear-gradient(160deg,#003014,#00180A);color:#5ED87A;border-color:rgba(48,209,88,0.28)}
.mavatar.lv1{background:linear-gradient(160deg,#2A0B40,#150623);color:#CC8AF5;border-color:rgba(191,90,242,0.28)}

.mname{font-size:1.45rem;font-weight:900;letter-spacing:-0.026em;margin-bottom:6px;color:var(--label)}

.msec{margin-bottom:28px}
.msec-title{
  font-size:.66rem;font-weight:700;color:var(--label-3);
  text-transform:uppercase;letter-spacing:1.5px;         /* Apple 大间距全大写子标题 */
  margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.msec-title .cnt{
  background:var(--bg-tertiary);color:var(--label-2);
  padding:2px 9px;border-radius:var(--r-pill);
  font-size:.64rem;font-weight:600;letter-spacing:.2px;text-transform:none;
  border:1px solid var(--separator);
}

.intro-box{
  background:var(--bg-secondary);border-radius:var(--r-lg);
  padding:18px 20px;border:1px solid var(--separator);
  border-left:3px solid #fff;                         /* 扁平左边条 */
}
.intro-box.lv6{border-left-color:var(--lv6)}
.intro-box.lv5{border-left-color:var(--lv5)}
.intro-box.lv4{border-left-color:var(--lv4)}
.intro-box.lv3{border-left-color:var(--lv3)}
.intro-box.lv2{border-left-color:var(--lv2)}
.intro-box.lv1{border-left-color:var(--lv1)}
.intro-box p{
  font-size:.9rem;font-weight:400;
  line-height:1.9;color:var(--label);
  word-break:break-word;letter-spacing:.008em;
}

/* ---------- 10. 关联账号 / 作品 / 视频条目 ---------- */
.rel-item{
  background:var(--bg-secondary);
  border:1px solid var(--separator);
  border-radius:var(--r-md);
  padding:14px 16px;margin-bottom:8px;
  transition:
    transform var(--dur-fast) var(--ease-spring),
    border-color var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard);
}
.rel-item:hover{
  transform:translateX(3px);                                 /* 微平移非线性 */
  border-color:var(--separator-strong);
  background:var(--bg-tertiary);
}
.rel-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.rel-name{font-weight:700;font-size:.9rem;color:var(--label);letter-spacing:-.008em}
.work-item .work-title{color:#9AC8FF;font-weight:700}
.work-item .work-title::before{content:'• ';color:var(--tint);font-weight:900}

.plat-tag{
  padding:2px 10px;border-radius:var(--r-pill);
  font-size:.66rem;font-weight:700;letter-spacing:.22px;
  border:1px solid transparent;
}
/* 平台 Tag —— 各平台官方品牌色（Flat 半透明贴片 + 彩色文字） */
.plat-B站{background:rgba(251,114,153,0.13);color:#FF91B3;border-color:rgba(251,114,153,0.28)}
.plat-抖音{background:rgba(255,255,255,0.05);color:#F5F5F7;border-color:rgba(255,255,255,0.18)}  /* 抖音：品牌黑本身，Tag 用深灰背景 + 白字描边 */
.plat-小红书{background:rgba(255,36,66,0.12);color:#FF617A;border-color:rgba(255,36,66,0.28)}
.plat-快手{background:rgba(255,73,6,0.12);color:#FF8455;border-color:rgba(255,73,6,0.28)}
.plat-百度视频{background:rgba(41,50,225,0.12);color:#7E88FF;border-color:rgba(41,50,225,0.28)}
.plat-知乎{background:rgba(0,132,255,0.12);color:#61B0FF;border-color:rgba(0,132,255,0.28)}
.plat-好看视频{background:rgba(78,110,242,0.12);color:#9FB1FF;border-color:rgba(78,110,242,0.28)}
.plat-微信视频号{background:rgba(7,193,96,0.12);color:#4BDB8A;border-color:rgba(7,193,96,0.28)}
.plat-QQ{background:rgba(18,183,245,0.12);color:#59CEFF;border-color:rgba(18,183,245,0.28)}
.plat-微信{background:rgba(7,193,96,0.12);color:#4BDB8A;border-color:rgba(7,193,96,0.28)}
.plat-支付宝{background:rgba(22,119,255,0.12);color:#7AAFFF;border-color:rgba(22,119,255,0.28)}
.plat-淘宝{background:rgba(255,66,0,0.12);color:#FF8659;border-color:rgba(255,66,0,0.28)}
.plat-创客次元{background:rgba(89,172,255,0.13);color:#8CC5FF;border-color:rgba(89,172,255,0.30)}
/* —— 2026-08-28 新增平台 Tag 样式 —— */
.plat-共创世界{background:rgba(39,194,122,0.12);color:#5EDBA0;border-color:rgba(39,194,122,0.28)}
.plat-QQ视频{background:rgba(30,156,255,0.12);color:#6AB8FF;border-color:rgba(30,156,255,0.28)}
.plat-兽频道{background:rgba(194,165,42,0.12);color:#E0C866;border-color:rgba(194,165,42,0.30)}  /* 暗黄：品牌本体 #C2A52A + 前景提亮可读性 */
.plat-github{background:rgba(255,255,255,0.04);color:#D9D9DE;border-color:rgba(255,255,255,0.14)}  /* 同抖音系：品牌黑用反色贴片 */
.plat-gitee{background:rgba(199,30,35,0.12);color:#F17175;border-color:rgba(199,30,35,0.28)}
/* —— 2026-08-29 新增平台 Tag 样式 —— */
.plat-爱发电{background:rgba(255,92,141,0.12);color:#FF8FB5;border-color:rgba(255,92,141,0.28)}
.plat-YouTube{background:rgba(255,0,0,0.12);color:#FF6B6B;border-color:rgba(255,0,0,0.30)}
.plat-X{background:rgba(255,255,255,0.05);color:#F5F5F7;border-color:rgba(255,255,255,0.18)}  /* X 品牌黑用反色贴片（同抖音/github） */
.plat-Steam{background:rgba(102,192,244,0.12);color:#66C0F4;border-color:rgba(102,192,244,0.28)}  /* Steam 用其 UI 蓝 #66C0F4 提亮以保证可读性 */
.plat-邮箱{background:rgba(142,142,147,0.10);color:rgba(255,255,255,0.80);border-color:rgba(255,255,255,0.10)}
.plat-telegram{background:rgba(0,136,204,0.12);color:#5DB5DD;border-color:rgba(0,136,204,0.28)}
.plat-其他{background:var(--bg-quaternary);color:var(--label-2);border:1px solid var(--separator)}

.rel-acc{
  font-size:.78rem;color:var(--label-2);font-weight:400;
  font-family:"SF Mono",Menlo,Consolas,monospace;word-break:break-all;
  background:var(--bg-tertiary);padding:5px 10px;border-radius:var(--r-sm);
  display:inline-block;margin-top:2px;
  border:1px solid var(--separator);
}

.work-url{
  display:flex;align-items:center;gap:10px;background:var(--bg-tertiary);
  border-radius:var(--r-sm);padding:9px 12px;margin-top:8px;
  border:1px solid var(--separator);
}
.work-url a{font-size:.80rem;color:var(--label);word-break:break-all;flex:1;font-weight:500}
.work-url a:hover{color:#fff;text-decoration:underline}
.ref-ico{font-size:.9rem;flex-shrink:0;filter:grayscale(0.4)}

.rel-desc{
  margin-top:10px;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--bg-tertiary);
  border-left:3px solid rgba(235,235,245,0.30);
  font-size:.78rem;line-height:1.8;
  display:flex;gap:8px;align-items:flex-start;
  border-top:1px solid var(--separator);
  border-top-left-radius:0;border-bottom-left-radius:var(--r-sm);
}
.rel-desc-ico{font-size:.8rem;margin-top:1px;flex-shrink:0;filter:grayscale(0.3)}
.rel-desc-txt{color:var(--label-2);flex:1;word-break:break-word;font-weight:400}
.rel-desc-txt br{margin-bottom:3px}

/* ---------- 11. JSON 数据区 ---------- */
.json-sec{
  margin-top:30px;padding-top:20px;
  border-top:1px dashed var(--separator);
}
.json-toggle-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.json-toggle{
  font-size:.76rem;color:var(--label-3);cursor:pointer;
  display:flex;align-items:center;gap:6px;user-select:none;font-weight:500;
  transition:color var(--dur-fast) var(--ease-standard);
}
.json-toggle:hover{color:var(--label)}
.json-copy{
  padding:6px 14px;border-radius:var(--r-sm);border:1px solid var(--separator);
  background:var(--bg-tertiary);color:var(--label-2);font-size:.72rem;
  cursor:pointer;transition:all var(--dur-fast) var(--ease-standard);
  display:flex;align-items:center;gap:5px;font-weight:600;
}
.json-copy:hover{border-color:var(--separator-strong);color:var(--label);background:var(--bg-secondary)}
.json-copy.ok{border-color:var(--separator-strong);color:var(--label);background:var(--bg-tertiary);font-weight:700}
.json-box{display:none;margin-top:12px;background:var(--bg-secondary);border-radius:var(--r-md);padding:14px 16px;overflow-x:auto;border:1px solid var(--separator)}
.json-box.show{display:block;animation:fadeSlideUp .42s var(--ease-standard) both}
.json-box pre{font-size:.72rem;color:var(--label-2);white-space:pre-wrap;word-break:break-all;line-height:1.7}
@keyframes fadeSlideUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---------- 12. Footer · 扁平深灰（与页面底统一，不再纯黑） ---------- */
.footer{
  margin-top:20px;padding:32px 20px 30px;
  border-top:1px solid var(--separator);
  background:transparent;                         /* 与页面底一致（深灰）· 不压黑 */
}
.footer-inner{
  max-width:1120px;margin:0 auto;text-align:center;
  color:var(--label-3);font-size:.74rem;line-height:1.9;
}
.footer-brand{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:10px;
}
.fb-title{font-size:.95rem;color:var(--label-2);font-weight:800;text-align:left;letter-spacing:-.012em}
.fb-sub{font-size:.72rem;color:var(--label-3);text-align:left;font-weight:400}
.footer-copy{color:var(--label-2);font-weight:500;margin-bottom:10px}
.footer-contact{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.footer-link{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 14px;border-radius:var(--r-pill);
  background:var(--bg-secondary);
  color:var(--label-2);font-weight:500;font-size:.74rem;
  border:1px solid var(--separator);
  cursor:pointer;
  user-select:none;
  transition:
    transform .14s var(--ease-spring),
    background var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur) var(--ease-standard);
  letter-spacing:.2px;
}
.footer-link:hover{
  background:var(--bg-tertiary);
  border-color:var(--separator-strong);
  color:var(--label);
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px);
}
/* 邮箱复制"成功"态 · 灰色成功（不抢等级色） */
.footer-link.copied{
  background:var(--bg-tertiary);
  border-color:var(--separator-strong);
  color:var(--label);
  font-weight:700;
  transform:scale(1.04);
}

/* —— 2026-08-29 赞赏按钮（紧贴 scma.pages.dev 右侧，椭圆胶囊 CTA） —— */
.footer-sponsor-btn{
  /* 与普通 footer-link 区分开：玫粉渐变底 + 白字，作为 CTA 突出 */
  background:linear-gradient(180deg,#FF648B 0%,#E04E73 55%,#C43E60 100%);
  color:#fff;
  border:1px solid rgba(255,100,139,0.55);
  font-weight:600;
  box-shadow:0 4px 12px rgba(255,100,139,0.24), inset 0 0 0 1px rgba(255,255,255,0.10);
  letter-spacing:.15px;
}
.footer-sponsor-btn:hover{
  background:linear-gradient(180deg,#FF7A9F 0%,#E85A82 55%,#CC4870 100%);
  border-color:rgba(255,100,139,0.70);
  color:#fff;
  box-shadow:0 8px 18px rgba(255,100,139,0.32), inset 0 0 0 1px rgba(255,255,255,0.14);
  transform:translateY(-2px);
}
.footer-sponsor-btn:active{
  transform:translateY(0) scale(.98);
  filter:brightness(.96);
}

/* —— 2026-08-29 页脚按钮配色：邮箱=浅红 / 链接=绿 / 数据库=蓝 —— */
/* 邮箱复制按钮：比较浅一点点的红色 */
.footer-email-btn{
  background:linear-gradient(180deg,#FF6B6B 0%,#E85555 55%,#CC4848 100%);
  color:#fff;
  border:1px solid rgba(255,107,107,0.55);
  font-weight:600;
  box-shadow:0 4px 12px rgba(255,107,107,0.22), inset 0 0 0 1px rgba(255,255,255,0.10);
  letter-spacing:.15px;
}
.footer-email-btn:hover{
  background:linear-gradient(180deg,#FF8585 0%,#F06565 55%,#D45454 100%);
  border-color:rgba(255,107,107,0.70);
  color:#fff;
  box-shadow:0 8px 18px rgba(255,107,107,0.30), inset 0 0 0 1px rgba(255,255,255,0.14);
  transform:translateY(-2px);
}
.footer-email-btn:active{
  transform:translateY(0) scale(.98);
  filter:brightness(.96);
}
/* 复制成功态仍可覆盖（copied 优先级由 DOM 顺序保证） */
.footer-email-btn.copied{
  background:linear-gradient(180deg,#FF8585 0%,#E86060 55%,#CC5050 100%);
  border-color:rgba(255,107,107,0.70);
  color:#fff;
  font-weight:700;
  transform:scale(1.04);
}

/* 链接按钮（scma.pages.dev）：绿色 */
.footer-link-btn{
  background:linear-gradient(180deg,#30D158 0%,#28B84E 55%,#1F9E42 100%);
  color:#fff;
  border:1px solid rgba(48,209,88,0.55);
  font-weight:600;
  box-shadow:0 4px 12px rgba(48,209,88,0.22), inset 0 0 0 1px rgba(255,255,255,0.10);
  letter-spacing:.15px;
}
.footer-link-btn:hover{
  background:linear-gradient(180deg,#48E070 0%,#30C458 55%,#24AA48 100%);
  border-color:rgba(48,209,88,0.70);
  color:#fff;
  box-shadow:0 8px 18px rgba(48,209,88,0.30), inset 0 0 0 1px rgba(255,255,255,0.14);
  transform:translateY(-2px);
}
.footer-link-btn:active{
  transform:translateY(0) scale(.98);
  filter:brightness(.96);
}

/* 数据库按钮：蓝色 */
.footer-db-btn{
  background:linear-gradient(180deg,#0A84FF 0%,#0070E0 55%,#005FB8 100%);
  color:#fff;
  border:1px solid rgba(10,132,255,0.55);
  font-weight:600;
  box-shadow:0 4px 12px rgba(10,132,255,0.22), inset 0 0 0 1px rgba(255,255,255,0.10);
  letter-spacing:.15px;
}
.footer-db-btn:hover{
  background:linear-gradient(180deg,#2E96FF 0%,#1A7EE8 55%,#0066C8 100%);
  border-color:rgba(10,132,255,0.70);
  color:#fff;
  box-shadow:0 8px 18px rgba(10,132,255,0.30), inset 0 0 0 1px rgba(255,255,255,0.14);
  transform:translateY(-2px);
}
.footer-db-btn:active{
  transform:translateY(0) scale(.98);
  filter:brightness(.96);
}

.footer-note{opacity:.8;margin-top:6px;color:var(--label-3);font-weight:400}

/* ---------- 13. 回到顶部 · 扁平深灰（非毛玻璃） ---------- */
.back-to-top{
  position:fixed;right:26px;bottom:26px;z-index:99;
  width:48px;height:48px;border-radius:50%;
  background:var(--bg-secondary);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border:1px solid var(--separator-strong);
  color:var(--label);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;
  transform:translateY(14px) scale(0.92);
  transition:
    opacity var(--dur) var(--ease-snap),
    visibility var(--dur) var(--ease-snap),
    transform var(--dur) var(--ease-spring),
    background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur) var(--ease-standard);
}
.back-to-top:hover{
  background:var(--bg-tertiary);color:var(--label);
  transform:translateY(-4px) scale(1.06);
  box-shadow:var(--shadow-lg);
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

/* ---------- 14. 卡片入场（非线性错落 Spring） ---------- */
.card{
  animation:cardIn .55s var(--ease-spring) both;
}
@keyframes cardIn{
  0%{opacity:0;transform:translateY(18px) scale(0.98)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
/* 每列交错延迟：通过 nth-child 近似（纯 CSS 错落 Spring） */
.grid .card:nth-child(6n+1){animation-delay:.00s}
.grid .card:nth-child(6n+2){animation-delay:.06s}
.grid .card:nth-child(6n+3){animation-delay:.12s}
.grid .card:nth-child(6n+4){animation-delay:.18s}
.grid .card:nth-child(6n+5){animation-delay:.24s}
.grid .card:nth-child(6n+6){animation-delay:.30s}

/* ---------- 15. 响应式 ---------- */
@media(max-width:1000px){
  .stats{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:640px){
  .container{padding:18px 14px 56px}
  .header-inner{padding:18px 16px 16px}
  .brand-badge{width:44px;height:44px;border-radius:14px;font-size:1.25rem}
  .brand-text h1{font-size:1.65rem}
  .header-desc{font-size:.82rem}
  /* 窄屏下：提示 + 按钮组 竖排，按钮占满宽度更显眼、更好点 */
  .header-bottom-row{gap:10px;margin-top:12px}
  .header-bottom-row > *{width:100%}
  .header-disclaimer{text-align:center;flex:1 1 auto;margin:0}
  .header-actions{margin-left:0;gap:8px}
  .header-submit-btn{width:100%;padding:11px 14px;font-size:.84rem;border-radius:var(--r-lg)}
  .stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat-card{padding:16px 14px}
  .stat-card .stat-val{font-size:1.55rem}
  .panel{padding:16px;border-radius:var(--r-lg)}
  .search-row{flex-direction:column;align-items:stretch;gap:10px}
  .search-btn{width:100%;padding:12px}
  .search-hint{gap:4px 12px;font-size:.68rem;margin-bottom:6px}
  .filter-block{margin-top:14px;padding-top:14px}
  .chip{padding:7px 14px;font-size:.76rem}
  .grid{grid-template-columns:1fr;gap:12px}
  .card{padding:16px}
  .mbody{padding:10px 18px 26px}
  .modal{border-radius:22px}
  .mname{font-size:1.2rem}
  .mavatar{width:50px;height:50px;border-radius:15px;font-size:1.3rem}
  .back-to-top{right:16px;bottom:20px;width:42px;height:42px}
  .footer{padding:26px 16px}
}

/* ---------- 16. 减弱动效偏好 ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-delay:.01ms !important;transition-duration:.01ms !important}
}