/* ==========================================================================
   水门应用 · 液态玻璃设计系统 (Liquid Glass)
   —— 半透明白玻璃 + 边缘高光 + 彩色底层光晕
   注：底部 Tab 栏（navbar.css）保持原样，不在此处修改
   ========================================================================== */

:root{
  --brand:#3b82f6;
  --brand2:#6366f1;
  --text:#14161c;
  /* 品牌色当文字用要更深：#3b82f6 压在浅底上只有 3.38，
     而它当按钮底色配白字是够的（大字标准 3.0，实测 3.68）。
     所以文字场景单独走这个变量，按钮底色继续用 --brand。 */
  --brand-ink:#2563eb;
  /* 渐变按钮专用配色。
     直接用 --brand(#3b82f6) 铺底配白字：浅色下实测只有 3.54，
     深色下品牌色被提亮后更是掉到 2.03 —— 白字压亮蓝底等于发虚。
     所以渐变按钮单独走这一组，并把按钮上的文字色也抽成变量 --on-grad，
     深色下改成"深色字压亮底"，两套主题都达标。 */
  --grad-a:#2563eb;
  --grad-b:#4f46e5;
  --on-grad:#fff;
  /* 次要文字。原 #6f7889 在白底上 4.45、在浅灰卡片底上只有 3.33，
     两类都没到 4.5，小字发虚。压深到 #556072 后白底 6.4、浅灰底 4.7。 */
  --muted:#556072;
  --radius:20px;

  /* 玻璃材质：靠透明度区分层级（数值越接近 1 越实） */
  --glass:rgba(255,255,255,.46);      /* 常规：卡片、列表行 —— 比上一版更透 */
  --glass-2:rgba(255,255,255,.68);    /* 强：顶栏、弹层（可读性优先） */
  --glass-1:rgba(255,255,255,.30);    /* 弱：装饰容器 */
  --glass-3:rgba(255,255,255,.86);    /* 极强：输入框等对可读性要求最高的面 */
  --glass-line:rgba(255,255,255,.72); /* 描边（上亮下暗形成厚度） */
  --glass-line-hi:rgba(255,255,255,.92);
  --glass-hi:rgba(255,255,255,.95);   /* 顶部内高光 */

  /* 玻璃表面自带的细腻噪点：叠在半透明白上，消除大色块的塑料感 */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .60 0 0 0 0 .63 0 0 0 0 .72 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");

  /* 模糊略降、饱和度略升：壁纸细节保留更多，透出的色彩更鲜明 */
  --blur-1:12px; --blur-2:22px; --blur-3:36px; --sat:195%;

  --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:26px; --r-xl:32px;

  /* 三层阴影：静止 / 浮起 / 抬起 */
  --sh-1:0 2px 8px rgba(31,41,88,.06), 0 10px 28px rgba(31,41,88,.07);
  --sh-2:0 4px 16px rgba(31,41,88,.09), 0 18px 44px rgba(31,41,88,.11);
  --sh-3:0 10px 22px rgba(31,41,88,.10), 0 26px 60px rgba(31,41,88,.16);
  --sh-btn:0 4px 14px rgba(59,130,246,.30);
  /* 品牌色描边光环，用于 hover / focus 的「发光」表达 */
  --ring:0 0 0 3px rgba(59,130,246,.16);
  --ring-strong:0 0 0 4px rgba(59,130,246,.22);

  /* 统一动效曲线：标准减速 + 轻微回弹 */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --err:#dc2626;   /* 删除/错误：补样式时用到，此前未定义会导致颜色失效 */

  /* 深色模式下的页面底色与光晕亮度，浅色时不用 */
  --page-bg:#eef2fb;
  --glow-op:.55;
}

/* ==========================================================================
   深色模式
   data-theme 写在 html 上。此前把 background 写在 body 上、
   主题类却加在 html 上，选择器对不上 —— 只有文字变、背景还是白的。
   ========================================================================== */
html[data-theme="dark"]{
  --brand:#60a5fa;
  --brand2:#818cf8;
  --text:#e8ecf4;
  --muted:#98a2b8;
  /* 深色下品牌色已被自动提亮到满足深底 4.5，文字可直接用 --brand */
  --brand-ink:var(--brand);
  /* 渐变按钮：深色下反过来，用深色字压亮底（实测 9.78） */
  --grad-a:#93bafa;
  --grad-b:#a5b4fc;
  --on-grad:#0b1020;
  --err:#f87171;
  --page-bg:#0b1020;

  /* 玻璃改深色半透明：与浅色同一套层级逻辑，只是底色换成深色 */
  --glass:rgba(28,34,54,.62);
  --glass-1:rgba(28,34,54,.42);
  --glass-2:rgba(28,34,54,.80);
  --glass-3:rgba(38,45,68,.90);
  --glass-line:rgba(255,255,255,.14);
  --glass-line-hi:rgba(255,255,255,.26);
  --glass-hi:rgba(255,255,255,.16);

  /* 噪点换成亮色，深色下才看得出颗粒 */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");

  --sat:165%;
  --sh-1:0 2px 8px rgba(0,0,0,.28), 0 10px 28px rgba(0,0,0,.30);
  --sh-2:0 4px 16px rgba(0,0,0,.34), 0 18px 44px rgba(0,0,0,.38);
  --sh-3:0 10px 22px rgba(0,0,0,.38), 0 26px 60px rgba(0,0,0,.46);
  --ring:0 0 0 3px rgba(96,165,250,.22);
  --ring-strong:0 0 0 4px rgba(96,165,250,.30);
  --glow-op:.30;
}
/* 页面底色：必须挂在 html 上，与 data-theme 同级才生效 */
html{background:var(--page-bg)}
html[data-theme="dark"] .header h1,
html[data-theme="dark"] .au-head strong,
html[data-theme="dark"] .notif-head strong,
html[data-theme="dark"] .share-head strong{color:#e8ecf4}
html[data-theme="dark"] .share-sheet,
html[data-theme="dark"] .notif-sheet{background:#131a2c}
html[data-theme="dark"] .notif-item{background:#1a2236;border-color:rgba(255,255,255,.10)}
html[data-theme="dark"] .notif-item.unread{border-color:rgba(96,165,250,.4);background:#1b2740}
html[data-theme="dark"] .share-link,
html[data-theme="dark"] .qr-box{background:#1a2236;border-color:rgba(255,255,255,.10)}
html[data-theme="dark"] .qr-box svg rect:first-child{fill:#fff}
html[data-theme="dark"] .hist-box{background:rgba(24,31,50,.96);border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .hist-item{color:#dbe2f0}
html[data-theme="dark"] .cmt-rinput{background:#1a2236;border-color:rgba(255,255,255,.14);color:#e8ecf4}
html[data-theme="dark"] #authorSheet,
html[data-theme="dark"] .sheet{background:var(--page-bg)}
html[data-theme="dark"] .sheet h1,
html[data-theme="dark"] .sheet h2,
html[data-theme="dark"] .sheet h3,
html[data-theme="dark"] .sheet h4,
html[data-theme="dark"] .sheet label,
html[data-theme="dark"] .sheet p{color:#e8ecf4}
html[data-theme="dark"] .sheet input,
html[data-theme="dark"] .sheet textarea,
html[data-theme="dark"] .sheet select{
  background:#1a2236;color:#e8ecf4;border-color:rgba(255,255,255,.14);
}
html[data-theme="dark"] .dw-empty{background:rgba(28,34,54,.4);border-color:rgba(255,255,255,.12)}

/* 后台深色 */
html[data-theme="dark"] body.adm,
html[data-theme="dark"] .admin-body{background:#0b1020}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
img{display:block}

body{
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Roboto,sans-serif;
  font-size:14px;
  min-height:100vh;
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
  position:relative;
  z-index:0;
}

/* ---------- 底层 Aurora 光晕：玻璃必须「有东西可透」 ---------- */
body::before{
  content:''; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(60% 44% at 10% 2%,  rgba(96,165,250,.34) 0%, rgba(96,165,250,0) 60%),
    radial-gradient(54% 40% at 94% 10%, rgba(167,139,250,.30) 0%, rgba(167,139,250,0) 62%),
    radial-gradient(48% 36% at 78% 80%, rgba(244,114,182,.24) 0%, rgba(244,114,182,0) 64%),
    radial-gradient(52% 38% at 16% 90%, rgba(52,211,153,.22) 0%, rgba(52,211,153,0) 66%),
    linear-gradient(168deg, #f4f7fd 0%, #f1f5fd 46%, #f8f4fd 100%);
}
/* 细腻噪点，消除渐变色带 */
body::after{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .58 0 0 0 0 .68 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.has-wallpaper::before{opacity:0}
body.has-wallpaper::after{opacity:.26}
/* 有壁纸时：玻璃调更透 + 提高饱和度，让壁纸的色与光真正被"折射"进来 */
body.has-wallpaper{
  /* 更透：让壁纸的色与细节穿过来 */
  --glass:rgba(255,255,255,.36);
  --glass-2:rgba(255,255,255,.56);
  --glass-1:rgba(255,255,255,.22);
  /* 模糊降低：模糊越大壁纸越糊、越看不出折射；这里保留足够细节又不刺眼 */
  --blur-1:10px; --blur-2:16px; --blur-3:26px;
  /* 饱和度拉高，让透出来的颜色更明显 */
  --sat:240%;
}

/* ---------- 壁纸层 ---------- */
.wallpaper{
  position:fixed;inset:-6%;z-index:-1;pointer-events:none;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  /* 放大一点，避免 blur 把边缘羽化出白边 */
  transform:scale(1.12);
}
/* 动态壁纸（视频）：铺满视口，置于图片层之下 */
.wallpaper video.wp-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  pointer-events:none;border:0;
}
.wallpaper::after{
  content:'';position:absolute;inset:0;
  /* 用低饱和深蓝而非纯黑压暗，保留壁纸原有的色相层次 */
  background:linear-gradient(180deg, rgba(12,18,38,.9) 0%, rgba(12,18,38,.75) 100%);
  opacity:var(--wp-dim,0);
}

/* ==========================================================================
   顶部（玻璃）
   ========================================================================== */
.header{
  position:relative;overflow:hidden;
  padding:calc(20px + env(safe-area-inset-top)) 18px 16px;
  color:var(--text);
  background:linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.40) 60%, rgba(255,255,255,0) 100%);
  -webkit-backdrop-filter:blur(var(--blur-1)) saturate(var(--sat));
  backdrop-filter:blur(var(--blur-1)) saturate(var(--sat));
}
.header h1{
  margin:0;font-size:25px;font-weight:800;letter-spacing:.4px;
  background:linear-gradient(120deg,#1e3a8a 0%,var(--brand) 55%,var(--brand2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.header .sub{margin-top:5px;font-size:12.5px;color:var(--muted);font-weight:500}

/* 搜索框：强玻璃胶囊 */
.search{
  margin-top:14px;display:flex;align-items:center;gap:8px;
  background-color:var(--glass-2);
  background-image:var(--noise);
  -webkit-backdrop-filter:blur(var(--blur-2)) saturate(var(--sat));
  backdrop-filter:blur(var(--blur-2)) saturate(var(--sat));
  border:1px solid var(--glass-line);
  border-radius:16px;padding:0 14px;height:44px;
  box-shadow:var(--sh-1), inset 0 1px 0 var(--glass-hi);
  transition:box-shadow .24s var(--ease), border-color .24s var(--ease);
}
/* 聚焦时的柔和光晕环：用双层扩散模拟光晕，不用 outline 以免破坏圆角 */
.search:focus-within{
  border-color:rgba(59,130,246,.42);
  box-shadow:var(--sh-1), var(--ring-strong), inset 0 1px 0 var(--glass-hi);
}
.search:focus-within .s-ico{color:var(--brand)}
.search .s-ico{color:var(--muted);display:flex;align-items:center;flex-shrink:0}
.search input{
  flex:1;border:none;background:transparent;outline:none;
  color:var(--text);font-size:14.5px;padding:0;height:100%;
}
.search input::placeholder{color:#9aa3b2}

/* ==========================================================================
   分类胶囊 / 排序栏
   ========================================================================== */
.chips{display:flex;gap:9px;overflow-x:auto;padding:14px 14px 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex-shrink:0;padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border:1px solid var(--glass-line);
  font-size:13px;font-weight:600;color:#4a5464;
  box-shadow:0 1px 3px rgba(31,41,88,.05), inset 0 1px 0 var(--glass-hi);
  cursor:pointer;transition:.18s;white-space:nowrap;
}
.chip:active{transform:scale(.95)}
.chip.on{
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  border-color:rgba(255,255,255,.35);color:var(--on-grad);font-weight:700;
  box-shadow:0 4px 14px rgba(59,130,246,.34), inset 0 1px 0 rgba(255,255,255,.4);
}

.sortbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 6px;font-size:12.5px;color:var(--muted)}
.sortbar .opts{display:flex;gap:6px;align-items:center}
.sortbar .opts span{
  cursor:pointer;padding:4px 11px;border-radius:999px;
  background:var(--glass-1);border:1px solid var(--glass-line);
  font-weight:600;transition:.16s;
}
.sortbar .opts span:active{transform:scale(.94)}
.sortbar .opts span.on{
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  color:var(--on-grad);font-weight:700;border-color:rgba(255,255,255,.35);
  box-shadow:0 3px 10px rgba(59,130,246,.28);
}

/* ==========================================================================
   应用卡片（玻璃）
   ========================================================================== */
.grid{
  display:grid;gap:12px;padding:8px 14px 0;
  /* 必须写 minmax(0,1fr)：1fr 的最小尺寸是 min-content，
     360px 窄屏下会被卡片里的按钮撑破导致整页横向溢出 */
  grid-template-columns:repeat(2,minmax(0,1fr));
}
/* 切 Tab 时内容高度会突变：首页几十张卡片（几千 px 高），
   收藏和排行往往只有一两屏 —— 页脚跟着从屏幕外一下弹到屏幕中间，
   肉眼看上去就是"抽搐"。给短页面一个下限高度，
   配合切页时回到顶部，两类跳变都能压掉。 */
#rankWrap,
#favWrap{min-height:calc(100vh - 160px)}

/* 原来写死 2 列，平板和桌面上每张卡片被拉到 620px 宽 ——
   图标只有 52px，右边一大片空白，信息密度极低，
   看着像"页面坏了"而不是"设计如此"。
   按可用宽度自动加列：卡片保持在 150~210px 的舒适区间。 */
@media (min-width:520px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:700px){
  .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
}
@media (min-width:940px){
  .grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
}
@media (min-width:1180px){
  /* 再宽也不无限加列，否则一行十几张反而难扫。
     同时把内容居中，避免贴着屏幕两侧。 */
  .grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;
        max-width:1180px;margin:0 auto;padding-left:20px;padding-right:20px}
}

/* ---------- 宽屏：别让内容拉成一条 ----------
   这套界面是照着手机做的，平板和桌面上如果什么都不管，
   搜索框会被拉到 1244px 横跨整屏、页脚文字贴在最左边、
   分类标签飘在半空中 —— 看着像布局散架了。
   这里给各块统一限宽并居中，header 的背景渐变仍保持满宽。 */
@media (min-width:820px){
  .header .search{max-width:560px}
  .chips,
  .sortbar,
  #rankWrap,
  #favWrap,
  .footer{max-width:1180px;margin-left:auto;margin-right:auto}
  .chips{padding-left:0;padding-right:0}
  .sortbar{padding-left:0;padding-right:0}
  .footer{text-align:center}
  #rankWrap,
  #favWrap{padding:0 14px}
}
.card{
  position:relative;padding:13px 13px 11px;
  background-color:var(--glass);
  background-image:var(--noise);      /* 玻璃表面颗粒感 */
  -webkit-backdrop-filter:blur(var(--blur-2)) saturate(var(--sat));
  backdrop-filter:blur(var(--blur-2)) saturate(var(--sat));
  border:1px solid var(--glass-line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-1), inset 0 1px 0 var(--glass-hi);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease),
             border-color .22s ease;
  will-change:transform;
}
/* 仅在真正支持悬停的设备上启用，避免移动端出现「点完卡住」的悬停态 */
@media (hover:hover) and (pointer:fine){
  .card:hover{
    transform:translateY(-3px);
    border-color:var(--glass-line-hi);
    box-shadow:var(--sh-3), var(--ring), inset 0 1px 0 var(--glass-hi);
  }
}
.card:active{transform:scale(.972) translateY(-1px)}

.card .tag{
  position:absolute;top:9px;right:9px;z-index:2;
  font-size:10px;font-weight:700;color:var(--on-grad);
  padding:3px 8px;border-radius:8px;
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  box-shadow:0 3px 9px rgba(59,130,246,.34), inset 0 1px 0 rgba(255,255,255,.4);
}
.card-top{display:flex;align-items:center;gap:9px}
.card .ic{
  width:52px;height:52px;border-radius:15px;flex-shrink:0;
  background:rgba(255,255,255,.6);object-fit:cover;
  box-shadow:0 3px 10px rgba(31,41,88,.13), inset 0 1px 0 rgba(255,255,255,.6);
}
.card-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.card .cat{
  /* 10.5px 小字，浅底上用 --brand(#3b82f6) 只有 3.28，换更深一档的 --brand-ink。
     深色下 --brand-ink 就等于提亮后的 --brand，自动适配。 */
  align-self:flex-start;font-size:10.5px;font-weight:700;color:var(--brand-ink);
  background:rgba(59,130,246,.14);padding:2.5px 8px;border-radius:7px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card .ver{font-size:10.5px;color:var(--muted);padding-left:2px}
.card .nm{
  margin-top:10px;font-weight:700;font-size:14.5px;line-height:1.3;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card .sm{
  margin-top:4px;font-size:11.5px;color:var(--muted);height:34px;line-height:1.5;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.card .ft{margin-top:9px;display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
.card .dl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-l{min-width:0;display:flex;align-items:center;gap:4px}
.stars{display:inline-flex;align-items:center;gap:1.5px}
.stars .st{flex-shrink:0;display:block}
.stars b{font-size:11px;color:#a16207;font-weight:700;margin-left:2px}
.nor{font-size:11px;color:var(--muted)}
.card .get{
  flex-shrink:0;font-size:11.5px;font-weight:700;color:var(--on-grad);
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  padding:4px 12px;border-radius:999px;
  box-shadow:var(--sh-btn), inset 0 1px 0 rgba(255,255,255,.4);
}
.card .dl{
  margin-top:7px;padding-top:7px;border-top:1px solid rgba(31,41,88,.08);
  font-size:10.5px;color:var(--muted);
}

/* ==========================================================================
   排行榜
   ========================================================================== */
.board-tabs{display:flex;gap:9px;padding:14px 14px 4px;overflow-x:auto;scrollbar-width:none}
.board-tabs::-webkit-scrollbar{display:none}
.board-tabs .bt{
  flex-shrink:0;padding:8px 16px;border-radius:999px;
  background:var(--glass-1);border:1px solid var(--glass-line);
  font-size:13px;font-weight:600;color:#4a5464;cursor:pointer;transition:.18s;
  -webkit-backdrop-filter:blur(var(--blur-1));backdrop-filter:blur(var(--blur-1));
  box-shadow:0 1px 3px rgba(31,41,88,.05), inset 0 1px 0 var(--glass-hi);
}
.board-tabs .bt.on{
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  color:var(--on-grad);font-weight:700;border-color:rgba(255,255,255,.35);
  box-shadow:0 4px 14px rgba(59,130,246,.32), inset 0 1px 0 rgba(255,255,255,.4);
}
.rank-row{
  margin:9px 13px;padding:11px 13px;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(var(--blur-2)) saturate(var(--sat));
  backdrop-filter:blur(var(--blur-2)) saturate(var(--sat));
  box-shadow:var(--sh-1), inset 0 1px 0 var(--glass-hi);
  display:flex;align-items:center;gap:11px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease),
             border-color .2s ease;
}
/* 悬停时向右轻推 4px，给出「这一行是可点的」的明确反馈 */
@media (hover:hover) and (pointer:fine){
  .rank-row:hover{
    transform:translateX(4px);
    border-color:var(--glass-line-hi);
    box-shadow:var(--sh-2), var(--ring), inset 0 1px 0 var(--glass-hi);
  }
}
.rank-row:active{transform:scale(.985)}
.rank-row.top1{border-color:rgba(251,191,36,.55);background:linear-gradient(100deg, rgba(251,191,36,.18) 0%, var(--glass) 55%)}
.rank-row.top2{border-color:rgba(148,163,184,.5);background:linear-gradient(100deg, rgba(148,163,184,.18) 0%, var(--glass) 55%)}
.rank-row.top3{border-color:rgba(217,119,6,.45);background:linear-gradient(100deg, rgba(217,119,6,.16) 0%, var(--glass) 55%)}
.medal{
  width:23px;height:23px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-style:normal;font-weight:800;
  background:var(--glass-1);color:var(--muted);
  border:1px solid var(--glass-line);
}
/* 奖牌底色是金/银/铜，白字压上去只有 1.7~2.6 —— 数字根本看不清。
   改成深色字压亮底：金色 #fbbf24 上用近黑棕，银色 #e2e8f0 上用深板岩色，
   两套主题下都能过 4.5，而且奖牌的质感不变。 */
.medal.rank1{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#3d2400;border-color:rgba(255,255,255,.55);box-shadow:0 3px 9px rgba(251,191,36,.42)}
.medal.rank2{background:linear-gradient(135deg,#e2e8f0,#94a3b8);color:#1e293b;border-color:rgba(255,255,255,.55);box-shadow:0 3px 9px rgba(148,163,184,.38)}
.medal.rank3{background:linear-gradient(135deg,#f59e0b,#d97706);color:#3d2400;border-color:rgba(255,255,255,.55);box-shadow:0 3px 9px rgba(217,119,6,.34)}
.rk-icon{
  width:42px;height:42px;border-radius:12px;object-fit:cover;flex-shrink:0;
  box-shadow:0 3px 9px rgba(31,41,88,.13), inset 0 1px 0 rgba(255,255,255,.6);
}
.rk-main{flex:1;min-width:0}
.rk-name{font-size:14.5px;font-weight:700;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-meta{font-size:11.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 琥珀色当文字用：亮琥珀 #f59e0b 压在近乎白的卡片上只有 2.02，
   浅色下统一换深琥珀；深底上反过来要用亮琥珀，深琥珀会糊掉。
   原来这些颜色是内联写在 HTML 里的（主题切换根本盖不动），
   现在收进 class，两套主题各自生效。 */
.rk-meta b,
.st-warn{color:#a16207}
html[data-theme="dark"] .rk-meta b,
html[data-theme="dark"] .st-warn{color:#fbbf24}
.rk-sub{font-size:10.5px;color:var(--muted);margin-top:2px;opacity:.92}
.rk-score{text-align:right;flex-shrink:0;min-width:42px}
.rk-score b{
  display:block;font-size:16px;font-weight:800;line-height:1.1;
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.rk-score span{font-size:10px;color:var(--muted)}

/* ==========================================================================
   公告
   ========================================================================== */
.notice{
  display:flex;align-items:center;gap:8px;
  margin:10px 14px;padding:10px 13px;border-radius:var(--r-sm);
  background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(var(--blur-1)) saturate(var(--sat));
  backdrop-filter:blur(var(--blur-1)) saturate(var(--sat));
  box-shadow:0 1px 4px rgba(31,41,88,.05), inset 0 1px 0 var(--glass-hi);
  font-size:12.5px;color:#4a5464;
}
.notice .n-tag{
  flex-shrink:0;font-size:10.5px;font-weight:700;color:var(--on-grad);
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  padding:2.5px 9px;border-radius:7px;
}
.notice div{flex:1;min-width:0;line-height:1.45}
.notice .x{flex-shrink:0;color:var(--muted);font-size:11.5px;cursor:pointer}

/* ==========================================================================
   详情弹层（大块玻璃）
   ========================================================================== */
.sheet{
  position:fixed;inset:0;z-index:80;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(var(--blur-3)) saturate(var(--sat));
  backdrop-filter:blur(var(--blur-3)) saturate(var(--sat));
  transform:translateY(100%);transition:transform .28s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;overflow-y:auto;
}
.sheet.show{transform:translateY(0)}
.sheet-top{
  position:sticky;top:0;z-index:5;
  padding:calc(12px + env(safe-area-inset-top)) 16px 10px;
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(var(--blur-2));backdrop-filter:blur(var(--blur-2));
  border-bottom:1px solid rgba(255,255,255,.6);
}
.sheet-top .back{font-size:24px;color:var(--text);cursor:pointer;line-height:1;padding:0 4px}
.sheet-top strong{font-size:15px;font-weight:700}
.sheet-body{padding:14px 16px calc(30px + env(safe-area-inset-bottom))}

.hero{
  display:flex;align-items:center;gap:13px;
  padding:14px;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(var(--blur-2)) saturate(var(--sat));
  backdrop-filter:blur(var(--blur-2)) saturate(var(--sat));
  box-shadow:var(--sh-1), inset 0 1px 0 var(--glass-hi);
}
.hero > img{width:60px;height:60px;border-radius:16px;object-fit:cover;flex-shrink:0;
  box-shadow:0 4px 12px rgba(31,41,88,.14), inset 0 1px 0 rgba(255,255,255,.6)}
.hero-ph{width:60px;height:60px;border-radius:16px;background:var(--glass-1);flex-shrink:0}
.hero-info{min-width:0;flex:1}
.hero .t{font-size:16px;font-weight:800;letter-spacing:.2px;line-height:1.25}
.hero-rate{display:flex;align-items:center;gap:5px;margin:5px 0 3px;flex-wrap:wrap}
.hr-stars{display:inline-flex;align-items:center;gap:1.5px}
.hr-stars .st{display:block}
.hero-rate b{font-size:12.5px;color:#a16207;font-weight:800}
.hr-n{font-size:11px;color:var(--muted)}
.hero .s{font-size:11.5px;color:var(--muted);line-height:1.5}

.metrics{
  display:flex;margin-top:12px;padding:11px 6px;border-radius:var(--r-sm);
  background:var(--glass-1);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(var(--blur-1));backdrop-filter:blur(var(--blur-1));
  box-shadow:inset 0 1px 0 var(--glass-hi);
}
.metrics > div{flex:1;text-align:center}
.metrics .v{font-size:14px;font-weight:800;color:var(--text)}
.metrics .k{font-size:10.5px;color:var(--muted);margin-top:2px}

.dl-btn{
  width:100%;margin-top:12px;border:none;cursor:pointer;
  padding:14px;border-radius:var(--r-sm);
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  color:var(--on-grad);font-size:14.5px;font-weight:700;
  box-shadow:var(--sh-btn), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .18s var(--ease-spring), box-shadow .18s var(--ease),
             filter .18s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .dl-btn:hover{filter:brightness(1.06);box-shadow:0 6px 20px rgba(59,130,246,.38), inset 0 1px 0 rgba(255,255,255,.4)}
}
.dl-btn:active{transform:scale(.98)}
.dl-tip{text-align:center;font-size:11.5px;color:var(--muted);margin-top:7px;line-height:1.5}

.act-row{display:flex;gap:10px;margin-top:12px}
.act-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:11px;border-radius:var(--r-sm);cursor:pointer;
  background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(var(--blur-1));backdrop-filter:blur(var(--blur-1));
  box-shadow:0 1px 4px rgba(31,41,88,.05), inset 0 1px 0 var(--glass-hi);
  font-size:13px;font-weight:600;color:#4a5464;transition:.16s;
}
.act-btn:active{transform:scale(.97)}
.act-btn.on{
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  color:var(--on-grad);border-color:rgba(255,255,255,.35);
  box-shadow:0 4px 12px rgba(59,130,246,.3), inset 0 1px 0 rgba(255,255,255,.4);
}
.act-btn b{font-weight:800}

.sec{margin-top:18px}
.sec h4{margin:0 0 9px;font-size:13.5px;font-weight:800;color:var(--text)}
.shots{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.shots::-webkit-scrollbar{display:none}
.shots img{
  height:180px;border-radius:var(--r-sm);flex-shrink:0;
  border:1px solid var(--glass-line);
  box-shadow:0 2px 8px rgba(31,41,88,.08);
}

/* 评分区 */
.rate-sum{
  display:flex;align-items:center;gap:14px;margin-top:12px;padding:14px;
  border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(var(--blur-2)) saturate(var(--sat));
  backdrop-filter:blur(var(--blur-2)) saturate(var(--sat));
  box-shadow:var(--sh-1), inset 0 1px 0 var(--glass-hi);
}
.rate-sum .big{font-size:32px;font-weight:800;line-height:1;
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.rate-sum .side{flex:1;min-width:0}
.stars-line{font-size:13px;color:#a16207;letter-spacing:1px}
.bar-row{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:10.5px;color:var(--muted)}
.bar-row .b{flex:1;height:5px;border-radius:3px;background:rgba(31,41,88,.09);overflow:hidden}
.bar-row .b i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--brand),var(--brand2))}

/* 评论 */
.cmt-sec{margin-top:18px}
.cmt-box{
  padding:12px;border-radius:var(--r-md);
  background:var(--glass-1);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(var(--blur-1));backdrop-filter:blur(var(--blur-1));
  box-shadow:inset 0 1px 0 var(--glass-hi);
}
.cmt-box textarea{
  width:100%;border:1px solid var(--glass-line);border-radius:var(--r-xs);
  background:rgba(255,255,255,.6);padding:10px;font-size:13px;
  resize:vertical;min-height:64px;outline:none;color:var(--text);
}
.star{display:flex;gap:3px;margin:8px 0}
.star .s{font-size:20px;color:#dfe4ec;cursor:pointer;transition:.14s}
.star .s.on{color:#fbbf24}
.send-btn{
  border:none;cursor:pointer;padding:9px 20px;border-radius:var(--r-xs);
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  color:var(--on-grad);font-size:13px;font-weight:700;
  box-shadow:var(--sh-btn), inset 0 1px 0 rgba(255,255,255,.4);
}
.cmt{
  display:flex;gap:10px;padding:11px;border-radius:var(--r-sm);margin-top:9px;
  background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(var(--blur-1));backdrop-filter:blur(var(--blur-1));
  box-shadow:0 1px 4px rgba(31,41,88,.05), inset 0 1px 0 var(--glass-hi);
}
.cmt .avatar,.cmt-head .avatar{
  width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1px solid var(--glass-line);
}
.cmt-main{flex:1;min-width:0}
.cmt-top{display:flex;align-items:center;gap:7px}
.cmt-top .n{font-size:13px;font-weight:700}
.cmt-top .d{font-size:10.5px;color:var(--muted);margin-left:auto}
.cmt-body{font-size:13px;line-height:1.55;margin-top:4px;color:#3d465a}
.cmt-foot{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:11px;color:var(--muted)}
.pending{
  display:inline-block;font-size:10px;font-weight:700;color:#a16207;
  background:rgba(245,158,11,.14);padding:1.5px 7px;border-radius:6px;
}
.more-btn{
  display:block;width:100%;margin-top:10px;cursor:pointer;
  padding:9px;border-radius:var(--r-xs);
  background:var(--glass-1);border:1px solid var(--glass-line);
  font-size:12.5px;color:var(--brand);font-weight:600;
}
.meta-row{display:flex;justify-content:space-between;padding:7px 0;font-size:12.5px;border-bottom:1px solid rgba(31,41,88,.07)}
.meta-row span:first-child{color:var(--muted)}
.meta-row span:last-child{font-weight:600}

/* ==========================================================================
   登录弹层
   ========================================================================== */
.lmask{position:fixed;inset:0;background:rgba(31,41,88,.32);display:none;align-items:flex-end;z-index:90;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lmask.show{display:flex}
.lcard{
  /* 右上角关闭按钮是 absolute，这里要给它定位参照 */
  position:relative;
  width:100%;padding:20px 18px calc(24px + env(safe-area-inset-bottom));
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(var(--blur-3)) saturate(var(--sat));
  backdrop-filter:blur(var(--blur-3)) saturate(var(--sat));
  border-top:1px solid var(--glass-line);
  box-shadow:0 -8px 40px rgba(31,41,88,.18), inset 0 1px 0 var(--glass-hi);
  animation:lup .26s cubic-bezier(.32,.72,0,1);
}
@keyframes lup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.lcard h3{margin:0 0 14px;font-size:17px;font-weight:800}
/* 登录卡片深色版。
   原来只有一条白色半透明背景，深色主题下它依然是白的，
   而卡内文字已经跟着主题变成浅色 —— 白字压白底，
   「登录后评论」对比度只有 1.13，等于看不见。
   必须整套换深色，并把卡内所有文字/输入框一起带走。 */
html[data-theme="dark"] .lcard{
  background:var(--glass-3);
  border-top:1px solid var(--glass-line);
  box-shadow:0 -8px 40px rgba(0,0,0,.5), inset 0 1px 0 var(--glass-hi);
}
/* 榜单切换标签未选中态原来写死 #4a5464（深灰），
   深色主题没覆盖它 —— 深灰压深底，对比度 2.31，几乎看不出是字。 */
/* 深底上要反过来用亮琥珀，深琥珀会糊掉 */
html[data-theme="dark"] .stars b,
html[data-theme="dark"] .hero-rate b,
html[data-theme="dark"] .stars-line{color:#fbbf24}
html[data-theme="dark"] .board-tabs .bt:not(.on){
  color:#c3cbdb;background:var(--glass-1);border-color:var(--glass-line);
  box-shadow:0 1px 3px rgba(0,0,0,.24), inset 0 1px 0 var(--glass-hi);
}
/* 选中态是渐变底。深色下品牌色会被自动提亮，
   再压白字就变成"亮底白字"发虚，这里改成深色字。 */
html[data-theme="dark"] .board-tabs .bt.on{color:#0b1020}
html[data-theme="dark"] .lcard h3{color:var(--text)}
html[data-theme="dark"] .lcard .ltab{color:var(--muted)}
html[data-theme="dark"] .lcard .ltab.on{color:var(--brand-ink);background:transparent}
html[data-theme="dark"] .lcard .ltabs__ink{
  background:rgba(96,165,250,.18);
  box-shadow:0 1px 4px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
}
html[data-theme="dark"] .lcard__logo svg{fill:var(--on-grad)}
html[data-theme="dark"] .lcard .ltip,
html[data-theme="dark"] .lcard .tip{color:var(--muted)}
html[data-theme="dark"] .lcard label,
html[data-theme="dark"] .lcard .close{color:#c3cbdb}
html[data-theme="dark"] .lcard input,
html[data-theme="dark"] .lcard .code-row input{
  background:rgba(26,34,54,.9);border-color:var(--glass-line);color:var(--text);
}
html[data-theme="dark"] .lcard input::placeholder{color:#7c869b}
.code-row{display:flex;gap:9px}
.code-row input{
  flex:1;border:1px solid var(--glass-line);border-radius:var(--r-xs);
  background:rgba(255,255,255,.7);padding:11px 13px;font-size:14px;outline:none;color:var(--text);
}
.code-btn{
  flex-shrink:0;border:none;cursor:pointer;padding:11px 15px;border-radius:var(--r-xs);
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  color:var(--on-grad);font-size:12.5px;font-weight:700;white-space:nowrap;
  box-shadow:var(--sh-btn), inset 0 1px 0 rgba(255,255,255,.4);
}
.login-tip{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.5}
.step2{margin-top:14px;padding-top:14px;border-top:1px solid rgba(31,41,88,.08)}
.ava-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ava-big{width:56px;height:56px;border-radius:50%;object-fit:cover;
  border:2px solid var(--glass-line);
  box-shadow:0 3px 10px rgba(31,41,88,.12)}
.ava-ops{display:flex;flex-direction:column;gap:6px}
.ava-ops button{
  border:1px solid var(--glass-line);background:rgba(255,255,255,.6);
  padding:5px 12px;border-radius:8px;font-size:11.5px;color:#4a5464;cursor:pointer;
}
.btn-mini{
  border:none;cursor:pointer;padding:9px 16px;border-radius:var(--r-xs);
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  color:var(--on-grad);font-size:13px;font-weight:700;
  box-shadow:var(--sh-btn), inset 0 1px 0 rgba(255,255,255,.4);
}
/* ==========================================================================
   个人中心抽屉
   --------------------------------------------------------------------------
   与前台商店刻意做出区分：
     前台   —— 浅色液态玻璃，偏"逛"
     个人中心 —— 深色侧栏 + Aurora 英雄头图，偏"我的地盘"
   侧栏深色不是为了酷，而是让 8 个功能项在浅色内容区旁边有明确的归属边界。
   ========================================================================== */
.drawer{position:fixed;inset:0;z-index:120;display:none}
.drawer.show{display:block}
.dw-mask{position:absolute;inset:0;background:rgba(15,23,42,.42);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:dwFade .2s ease}
@keyframes dwFade{from{opacity:0}to{opacity:1}}
.dw-panel{
  position:absolute;inset:0;display:flex;
  background:#f7f8fc;
  animation:dwIn .28s cubic-bezier(.32,.72,0,1);
}
@keyframes dwIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@media (min-width:720px){
  .dw-panel{
    max-width:640px;border-radius:0 var(--r-lg) var(--r-lg) 0;
    box-shadow:0 0 80px rgba(15,23,42,.34);overflow:hidden;
  }
}

/* ---------- 侧栏：白底列表 ----------
   改前是深色渐变 + 纯文字菜单，信息密度低也不好扫读。
   现在按「用户卡片 → 账号切换条 → 彩色图标列表」排，
   手机上占满整屏，内容区从右侧滑入。 */
.dw-side{
  width:100%;flex-shrink:0;display:flex;flex-direction:column;
  padding:calc(14px + env(safe-area-inset-top)) 0 12px;
  background:#f6f8fc;
  position:relative;overflow:hidden;
}
@media (min-width:720px){
  .dw-side{width:236px;background:#f7f9fd;border-right:1px solid #e8edf5}
}

.dw-brand{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:8px;padding:0 16px 12px;
  font-size:13.5px;font-weight:800;letter-spacing:.4px;color:#0f172a;
}
.dw-logo{
  width:26px;height:26px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),#6366f1);
  box-shadow:0 4px 12px rgba(59,130,246,.32), inset 0 1px 0 rgba(255,255,255,.45);
  position:relative;
}
/* logo 上的下载箭头（CSS 绘制，不引外部图） */
.dw-logo::after{
  content:'';position:absolute;left:50%;top:60%;transform:translateX(-50%);
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid rgba(255,255,255,.95);
}
.dw-logo::before{
  content:'';position:absolute;left:50%;top:26%;transform:translateX(-50%);
  width:2.5px;height:8px;border-radius:2px;background:rgba(255,255,255,.95);
}

/* 菜单容器：吃掉剩余高度，退出按钮固定在底部 */
.dw-menu{flex:1;overflow-y:auto;position:relative;z-index:1;
  padding-bottom:8px;scrollbar-width:none}
.dw-menu::-webkit-scrollbar{display:none}
.dw-foot{flex-shrink:0;position:relative;z-index:1}

/* ---------- 顶部用户卡片 ---------- */
.uc{
  display:flex;align-items:center;gap:12px;
  margin:0 14px 12px;padding:14px;
  background:#ffffff;border:1px solid #e8edf5;border-radius:16px;
  box-shadow:0 1px 3px rgba(15,23,42,.04), 0 8px 20px rgba(15,23,42,.05);
}
.uc-av{
  width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid #fff;box-shadow:0 3px 10px rgba(15,23,42,.14);
}
.uc-av-txt{
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:21px;font-weight:800;
}
.uc-tx{flex:1;min-width:0}
.uc-nm{
  font-size:16px;font-weight:800;color:#0f172a;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.uc-id{
  margin-top:4px;font-size:11.5px;font-weight:600;color:#64748b;
  font-variant-numeric:tabular-nums;letter-spacing:.3px;
}
.uc-mail{
  margin-top:2px;font-size:11px;color:#94a3b8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 四项统计 */
.uc-st{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0 14px 12px;padding:11px 4px;
  background:#ffffff;border:1px solid #e8edf5;border-radius:14px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.uc-st div{text-align:center}
.uc-st b{
  display:block;font-size:16px;font-weight:800;color:#0f172a;
  font-variant-numeric:tabular-nums;
}
.uc-st span{display:block;margin-top:3px;font-size:10.5px;color:#94a3b8}

/* ---------- 常驻账号切换条 ---------- */
.acb{
  margin:0 14px 14px;padding:12px;
  background:#ffffff;border:1px solid #e8edf5;border-radius:14px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.acb-list{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.acb-av{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  padding:0;border:2px solid transparent;background:#eef2f8;
  color:#64748b;font-size:15px;font-weight:800;font-family:inherit;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;overflow:hidden;
  transition:border-color .18s var(--ease), transform .18s var(--ease),
             box-shadow .18s var(--ease);
}
.acb-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.acb-av.cur{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(59,130,246,.14);
}
.acb-av:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){
  .acb-av:not(.cur):hover{border-color:rgba(59,130,246,.45)}
}
.acb-add{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  border:1px dashed #c6d0e0;background:#f8fafc;color:#94a3b8;
  font-size:19px;font-weight:600;line-height:1;font-family:inherit;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease);
}
.acb-add:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){
  .acb-add:hover{background:#eff6ff;color:var(--brand);border-color:rgba(59,130,246,.4)}
}
.acb-tx{margin-top:9px;font-size:10.5px;color:#94a3b8}

.dw-group{
  padding:0 18px;margin:14px 0 7px;
  font-size:10.5px;font-weight:800;letter-spacing:1px;color:#98a2b3;
}
.dw-group:first-of-type{margin-top:2px}
.dw-menus{padding-bottom:4px}

/* ---------- 列表项：彩色圆形图标 + 标题 + 说明 ---------- */
.dw-item{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:11px;
  border:0;background:transparent;
  padding:10px 14px;margin:0 10px 3px;border-radius:13px;
  width:calc(100% - 20px);
  cursor:pointer;text-align:left;font-family:inherit;
  transition:background .18s var(--ease), box-shadow .18s var(--ease),
             transform .18s var(--ease);
}
.dw-ico{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  box-shadow:0 2px 7px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.28);
}
.dw-ico svg{opacity:1;stroke-width:1.9}
/* 九种配色：蓝 紫 绿 粉 橙 青 靛 红 琥珀 */
.c-blue{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.c-violet{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}
.c-green{background:linear-gradient(135deg,#22c55e,#16a34a)}
.c-pink{background:linear-gradient(135deg,#ec4899,#db2777)}
.c-orange{background:linear-gradient(135deg,#fb923c,#f97316)}
.c-cyan{background:linear-gradient(135deg,#22d3ee,#0891b2)}
.c-indigo{background:linear-gradient(135deg,#6366f1,#4f46e5)}
.c-red{background:linear-gradient(135deg,#f87171,#ef4444)}
.c-amber{background:linear-gradient(135deg,#fbbf24,#f59e0b)}

.dw-lb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dw-lb b{
  font-size:13.5px;font-weight:700;color:#0f172a;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dw-lb em{
  font-style:normal;font-size:11px;color:#94a3b8;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 选中：白卡片 + 品牌色描边，不抢图标的彩 */
.dw-item.on{
  background:#ffffff;
  box-shadow:0 1px 3px rgba(15,23,42,.06), 0 6px 16px rgba(15,23,42,.07),
             inset 0 0 0 1.5px rgba(59,130,246,.34);
}
.dw-item.on .dw-lb b{color:var(--brand)}
@media (hover:hover) and (pointer:fine){
  .dw-item:not(.on):hover{background:rgba(255,255,255,.72)}
}
.dw-item:active{transform:scale(.985)}

.dw-quit{
  position:relative;z-index:1;
  width:calc(100% - 28px);margin:10px 14px 4px;
  border:1px solid rgba(239,68,68,.24);background:rgba(239,68,68,.06);
  padding:10px;border-radius:12px;font-size:12.5px;color:#dc2626;
  font-weight:700;cursor:pointer;font-family:inherit;
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .dw-quit:hover{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.34)}
}

/* ---------- 内容区 ---------- */
.dw-main{flex:1;min-width:0;display:flex;flex-direction:column}
.dw-head{
  position:relative;flex-shrink:0;
  display:flex;align-items:center;gap:10px;
  padding:calc(12px + env(safe-area-inset-top)) 14px 12px;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(15,23,42,.07);
}
/* DOM 顺序是 close / title / spacer，这里用 order 把关闭按钮排到最右 */
.dw-head strong{
  order:2;margin:0;font-size:15.5px;font-weight:800;color:#111827;letter-spacing:.3px;
}
.dw-spacer{display:none}
.dw-close{
  order:3;margin-left:auto;width:30px;height:30px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(15,23,42,.10);background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#64748b;font-size:17px;line-height:1;
  transition:background .16s var(--ease), transform .16s var(--ease);
}
.dw-close:active{transform:scale(.92)}

.dw-body{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:14px 14px calc(30px + 64px);
}

/* ==========================================================================
   用户卡片：Aurora 英雄头图
   多层径向渐变叠出流动的彩色底，头像压在下方形成视觉重心。
   纯 CSS，不改 DOM。
   ========================================================================== */
.me-card{
  position:relative;overflow:hidden;
  padding:0 14px 13px;margin-bottom:14px;border-radius:var(--r-md);
  background:#0f172a;
  box-shadow:0 8px 26px rgba(15,23,42,.22);
}
/* 三团彩色光晕，形成 Aurora 感 */
.me-card::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(72% 100% at 12% 0%,  rgba(59,130,246,.92) 0%, rgba(59,130,246,0) 62%),
    radial-gradient(66% 96%  at 88% 8%,  rgba(139,92,246,.82) 0%, rgba(139,92,246,0) 64%),
    radial-gradient(80% 110% at 58% 104%, rgba(236,72,153,.62) 0%, rgba(236,72,153,0) 66%),
    linear-gradient(150deg,#1e293b 0%,#0f172a 100%);
}
/* 细噪点，消除大面积渐变的色带 */
.me-card::after{
  content:'';position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.me-top,.me-bio,.me-stats{position:relative;z-index:1}
.me-top{display:flex;align-items:center;gap:12px;padding-top:16px}

.me-av{
  width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:3px solid rgba(255,255,255,.92);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.me-av.def{
  display:flex;align-items:center;justify-content:center;
  font-size:21px;font-weight:800;color:#fff;
}
/* 头像外再套一圈虚线环，增加精致度 */
.me-top > .me-av{outline:1px dashed rgba(255,255,255,.5);outline-offset:3px}

.me-id{flex:1;min-width:0}
.me-nick{
  font-size:17px;font-weight:800;line-height:1.25;letter-spacing:.3px;
  color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.28);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.me-uid{
  display:inline-flex;align-items:center;gap:4px;margin-top:5px;
  font-size:10.5px;font-weight:700;letter-spacing:.8px;
  padding:3px 9px;border-radius:999px;
  background:rgba(255,255,255,.18);color:rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,.22);
  font-variant-numeric:tabular-nums;
}
.me-mail{
  margin-top:6px;font-size:11px;color:rgba(255,255,255,.72);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.me-bio{
  margin-top:11px;font-size:12px;line-height:1.6;
  color:rgba(255,255,255,.86);
}

/* 统计：半透明玻璃小卡 */
.me-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;
  margin-top:13px;padding:0;background:none;border:0;
}
.me-stats div{
  padding:8px 2px;border-radius:10px;text-align:center;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.me-stats div:active{transform:scale(.96)}
.me-stats div + div::before{display:none}
.me-stats b{
  display:block;font-size:16px;font-weight:800;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:.3px;
}
.me-stats span{display:block;margin-top:2px;font-size:10px;color:rgba(255,255,255,.7)}

/* ---------- 分区 ---------- */
.dw-sec{margin-bottom:16px}
.dw-sec h5{
  display:flex;align-items:center;gap:7px;margin:0 0 10px;
  font-size:13px;font-weight:800;color:#1e293b;
}
.dw-sec h5::before{
  content:'';width:3px;height:13px;border-radius:2px;flex-shrink:0;
  background:linear-gradient(180deg,var(--brand),#4f46e5);
}
.dw-sec h5 em{
  font-style:normal;font-size:11px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--brand),#4f46e5);
  padding:2px 8px;border-radius:999px;
}
.dw-empty{
  text-align:center;padding:28px 14px;font-size:12.5px;color:#94a3b8;line-height:1.65;
  background:#fff;border:1px dashed rgba(15,23,42,.14);border-radius:var(--r-sm);
}

/* ---------- 列表行 ---------- */
.me-row{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;margin-bottom:8px;border-radius:var(--r-sm);
  background:#fff;border:1px solid rgba(15,23,42,.07);
  box-shadow:0 1px 3px rgba(15,23,42,.05);
  cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease),
             border-color .18s var(--ease);
}
.me-row:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){
  .me-row:hover{
    transform:translateY(-2px);
    border-color:rgba(59,130,246,.32);
    box-shadow:0 6px 18px rgba(15,23,42,.10);
  }
}
.me-row .ic{width:42px;height:42px;border-radius:12px;object-fit:cover;flex-shrink:0;
  background:#f1f5f9;box-shadow:0 2px 6px rgba(15,23,42,.08)}
.me-row .ic.ph{background:#e2e8f0}
.me-row .tx{flex:1;min-width:0}
.me-row .n{font-size:13.5px;font-weight:700;color:#1e293b;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-row .m{font-size:11px;color:#94a3b8;margin-top:3px;line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-row .m2{margin-top:4px;font-size:11px}
.me-row .rt{font-size:11px;color:#94a3b8;flex-shrink:0}

/* 我的上传：操作按钮组 */
.me-row.up{flex-wrap:wrap}
.me-row.up .ops{
  display:flex;gap:6px;flex-basis:100%;margin-top:9px;
  padding-top:9px;border-top:1px dashed rgba(15,23,42,.10);
}
.me-row.up .ops button{
  flex:1;border:1px solid rgba(15,23,42,.12);background:#f8fafc;
  padding:6px;border-radius:8px;cursor:pointer;
  font-size:11.5px;font-weight:600;color:#475569;font-family:inherit;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.me-row.up .ops button.pri{
  background:linear-gradient(135deg,var(--brand),#4f46e5);
  border-color:transparent;color:#fff;
  box-shadow:0 2px 8px rgba(59,130,246,.28);
}
.me-row.up .ops button.dan{color:#ef4444}
.me-row.up .ok{color:#059669;font-weight:700}
.me-row.up .off{color:#94a3b8;font-weight:700}


   我的上传（旧版弹层，保留兼容）
   ========================================================================== */
.my-item{
  display:flex;gap:11px;padding:11px;border-radius:var(--r-sm);margin-bottom:8px;
  background:var(--glass);border:1px solid var(--glass-line);
  box-shadow:0 1px 4px rgba(31,41,88,.05), inset 0 1px 0 var(--glass-hi);
}
.my-item .ic{width:44px;height:44px;border-radius:12px;object-fit:cover;flex-shrink:0}
.my-item .ph{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.5);flex-shrink:0}
.my-item .info{flex:1;min-width:0}
.my-item .nm{font-size:13.5px;font-weight:700}
.my-item .mt{font-size:11px;color:var(--muted);margin-top:2px}
.my-item .ops{display:flex;gap:6px;margin-top:7px}
.my-item .ops button{
  border:1px solid var(--glass-line);background:rgba(255,255,255,.6);
  padding:4px 11px;border-radius:8px;font-size:11.5px;color:#5b6472;cursor:pointer;
}
.my-item .ops button.pri{border-color:transparent;background:rgba(59,130,246,.14);color:var(--brand);font-weight:600}
.my-item .ops button.dan{border-color:transparent;background:rgba(239,68,68,.10);color:#ef4444}
.btn-up{
  border:none;cursor:pointer;padding:7px 14px;border-radius:999px;
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));color:var(--on-grad);
  font-size:12.5px;font-weight:700;
  box-shadow:0 3px 10px rgba(59,130,246,.3), inset 0 1px 0 rgba(255,255,255,.4);
}

/* ==========================================================================
   上传表单
   ========================================================================== */
.sheet#upSheet{z-index:130}
body.dw-open .up-fab{display:none}
.u-field{margin-bottom:12px}
.u-field label{display:block;font-size:12px;color:#5b6472;font-weight:600;margin-bottom:5px}
.u-row{display:flex;gap:10px}
.u-row .u-field{flex:1}
.u-field input,.u-field textarea,.u-field select{
  width:100%;border:1px solid var(--glass-line);border-radius:var(--r-xs);
  background:var(--glass-1);padding:10px 12px;font-size:13.5px;
  color:var(--text);outline:none;font-family:inherit;
}
.u-field textarea{resize:vertical;min-height:80px;line-height:1.55}
.u-field input:focus,.u-field textarea:focus{border-color:var(--brand)}
.up-pick{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 13px;border-radius:var(--r-xs);cursor:pointer;
  background:rgba(255,255,255,.62);border:1px dashed rgba(59,130,246,.4);
  font-size:13px;color:var(--brand);
}
.up-pick em{font-style:normal;font-size:11.5px;color:var(--muted)}
.u-field input[type=file]{display:none}
.u-hint{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:5px}

/* ==========================================================================
   通用
   ========================================================================== */
.empty{text-align:center;padding:50px 20px;color:var(--muted)}
.ico-box{
  width:56px;height:56px;margin:0 auto 12px;border-radius:16px;
  background:var(--glass-1);border:1px solid var(--glass-line);
}
.loading{text-align:center;padding:30px;color:var(--muted);font-size:12.5px}

/* ---- 骨架屏 ----
   以前切 Tab 时先渲染一行「加载中…」（约 79px），数据到了再换成列表（约 600px），
   页面高度瞬间跳 8 倍，footer 跟着上下弹 —— 这就是「抽搐」的来源。
   骨架屏把占位高度做到接近真实内容，高度基本不跳。 */
.skel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:560px){.skel-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:820px){.skel-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1100px){.skel-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(min-width:1400px){.skel-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.skel-card{
  display:flex;flex-direction:column;gap:10px;
  padding:12px;border-radius:var(--r,14px);
  background:var(--card,rgba(255,255,255,.06));
  border:1px solid var(--line,rgba(127,127,127,.18));
  min-height:112px;
}
.skel-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r,14px);
  background:var(--card,rgba(255,255,255,.06));border:1px solid var(--line,rgba(127,127,127,.18));
  min-height:66px;margin-bottom:10px}
.skel-ic{flex:0 0 auto;width:42px;height:42px;border-radius:11px}
.skel-lines{flex:1 1 auto;display:flex;flex-direction:column;gap:8px;min-width:0}
.skel-line{height:11px;border-radius:6px}
.skel-line.w60{width:60%}
.skel-line.w40{width:40%}
.skel-ic,.skel-line{
  background:linear-gradient(90deg,
    var(--skel-a,rgba(127,127,127,.14)) 25%,
    var(--skel-b,rgba(127,127,127,.24)) 37%,
    var(--skel-a,rgba(127,127,127,.14)) 63%);
  background-size:400% 100%;
  animation:skel-shine 1.4s ease-in-out infinite;
}
@keyframes skel-shine{
  0%{background-position:100% 50%}
  100%{background-position:0 50%}
}
@media(prefers-reduced-motion:reduce){
  .skel-ic,.skel-line{animation:none}
}
.footer{text-align:center;padding:22px 16px 10px;font-size:11.5px;color:var(--muted);line-height:1.6}
.toast{
  position:fixed;left:50%;bottom:calc(40px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(20px);
  background:rgba(20,26,40,.86);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:#fff;border-radius:999px;padding:11px 20px;
  box-shadow:0 8px 24px rgba(15,23,42,.28);
  font-size:13px;letter-spacing:.2px;opacity:0;transition:.25s;pointer-events:none;z-index:200;
}
.toast.show{opacity:1;transform:translateX(-50%)}

/* 尊重系统的「减少动效」设置 */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ==========================================================================
   兼容模式（no-glass）
   --------------------------------------------------------------------------
   部分安卓 WebView / 老旧浏览器对 backdrop-filter 的实现有缺陷：
   大面积使用时会把整个页面糊掉、文字发虚，甚至出现残影。
   开启本模式后保留液态玻璃的配色与层次，但去掉背景模糊，
   改用高不透明度实色来维持可读性。视觉接近，兼容性大幅提升。
   触发方式：URL 加 ?noglass=1，或在个人中心 / 后台商店设置里开关。
   ========================================================================== */
body.no-glass{
  --glass:rgba(255,255,255,.94);
  --glass-2:rgba(255,255,255,.97);
  --glass-1:rgba(255,255,255,.87);
}
body.no-glass *,
body.no-glass *::before,
body.no-glass *::after{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
/* 去掉模糊后底层光晕会显得过花，这里压淡 */
body.no-glass::before{opacity:.55}
body.no-glass .sheet{background:rgba(255,255,255,.985)}
body.no-glass .lcard{background:rgba(255,255,255,.985)}
body.no-glass .dw-panel{background:rgba(255,255,255,.97)}
body.no-glass .wallpaper{filter:none !important}

/* ==========================================================================
   个人中心：不使用背景模糊
   --------------------------------------------------------------------------
   大面积 backdrop-filter 叠在 Aurora 光晕上，会让整块面板发虚、
   文字糊成一团，在手机浏览器上尤其明显。个人中心是整屏覆盖的面板，
   模糊面积最大、问题最突出，所以这里全部改为高不透明实色。
   保留圆角、描边、内高光和阴影，层次感不变，只是不再"透"。
   ========================================================================== */
.drawer .dw-mask,
.drawer .dw-panel,
.drawer .dw-side,
.drawer .dw-head,
.drawer .dw-body,
.drawer .dw-menu,
.drawer .dw-foot,
.drawer .me-card,
.drawer .me-stats,
.drawer .me-bio,
.drawer .me-row,
.drawer .dw-form input,
.drawer .dw-form select,
.drawer .dw-empty,
.drawer .wp-preview,
.drawer .dw-close,
.drawer .dw-item.on,
.drawer .dw-btn.ghost{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
.dw-panel{background:rgba(255,255,255,.97) !important}
.dw-side{background:#f6f8fc !important}
.dw-head{background:#fbfcfe !important}
.me-card{background:#ffffff !important}
.me-stats{background:#f5f7fb !important}
.me-bio{background:#f5f7fb !important}
.me-row{background:#ffffff !important}
.dw-empty{background:#f7f9fc !important}
.dw-form input,.dw-form select{background:#ffffff !important}
.wp-preview{background-color:#f5f7fb !important}

/* ==========================================================================
   补齐：以下类在 index.php / app.js 中使用，但此前从未定义
   --------------------------------------------------------------------------
   这些是液态玻璃 UI 重写时遗漏的元素，缺少样式会退化为浏览器默认外观，
   表现为"登录弹窗崩坏"、评论区排版错乱。这里按同一套玻璃语言补齐。
   ========================================================================== */

/* ---- 登录弹窗 ---- */
.tip{
  font-size:12.5px;color:var(--muted);line-height:1.6;margin:-6px 0 14px;
}
.field{margin-bottom:12px}
.field label{
  display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:6px;
}
/* 输入框用接近实色的白底：弹层叠在任意壁纸上都要保证文字可读 */
.field input,
.field select,
.field textarea{
  width:100%;box-sizing:border-box;
  border:1px solid var(--glass-line);border-radius:var(--r-xs);
  background:rgba(255,255,255,.92);
  padding:11px 13px;font-size:14px;outline:none;color:var(--text);
  font-family:inherit;transition:border-color .15s;
}
.field input:focus,
.field select:focus,
.field textarea:focus{border-color:var(--brand)}
/* 主操作按钮：与卡片里的安装按钮同一套渐变 */
.do{
  display:block;width:100%;border:none;cursor:pointer;
  padding:13px;border-radius:var(--r-xs);margin-top:6px;
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  color:var(--on-grad);font-size:15px;font-weight:700;font-family:inherit;
  box-shadow:var(--sh-btn), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .12s;
}
.do:active{transform:scale(.985)}
/* 次要按钮（关闭） */
.close{
  display:block;width:100%;border:1px solid var(--glass-line);cursor:pointer;
  padding:11px;border-radius:var(--r-xs);margin-top:9px;
  background:rgba(255,255,255,.55);
  color:var(--muted);font-size:13.5px;font-weight:600;font-family:inherit;
}
.close:active{opacity:.8}
/* 关闭按钮背景写死白色半透明，深色下浮在深色卡片上仍是一块白，
   配上主题里的浅色文字就成了"浅底浅字"，对比度 1.01 完全看不见。
   深色下把底换成深色、边框提亮，文字也提一档。 */
html[data-theme="dark"] .close{
  background:rgba(255,255,255,.07);
  border-color:var(--glass-line-hi);
  color:#c3cbdb;
}
/* 当前账号行 */
.who{
  display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;
  font-size:12.5px;color:var(--muted);margin-bottom:12px;
}
.who b{color:var(--text);font-weight:700}

/* ---- 评分与评论 ---- */
.lb{
  font-size:11.5px;color:var(--muted);font-weight:600;
  padding:2px 8px;border-radius:20px;
  background:rgba(255,255,255,.6);border:1px solid var(--glass-line);
}
.cnt{font-size:12px;color:var(--muted);margin-top:6px}
/* 星级分布：轨道 + 填充 */
/* 必须 flex:1 + min-width:0：作为 .rate-sum 的 flex 子项，
   不设 flex 的话宽度只会按内容撑开（约 34px），里面的进度条会全部塌成 0 */
.bars{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;margin-top:10px}
/* 兼容：若某处仍用 .bar 而不是 .b，也必须 flex:1，否则宽度会塌陷成 0 */
.bar{
  flex:1;height:5px;border-radius:3px;overflow:hidden;
  background:rgba(31,41,88,.09);
}
.bar > i{
  display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
}
/* 评论条目 */
.nick{font-weight:700;color:var(--text);font-size:13px}
.mine{
  font-size:10.5px;font-weight:700;color:var(--brand);
  padding:1px 6px;border-radius:6px;
  background:rgba(37,99,235,.10);border:1px solid rgba(37,99,235,.25);
}
.del{
  font-size:11.5px;color:var(--err);cursor:pointer;font-weight:600;
}
.del:active{opacity:.7}
.hint{font-size:12px;color:var(--muted);line-height:1.6}
/* 空状态图标容器 */
.ico{
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 12px;color:var(--muted);opacity:.55;
}
.ico svg{width:44px;height:44px}
/* 个人中心头像 */
/* 顶部登录状态条：头像 + 我的上传 + 昵称，位于「水门应用」标题上方 */
#meBar{
  display:flex;align-items:center;gap:8px;
  margin:0 0 10px;padding-right:96px;   /* 右侧给主题/铃铛按钮让位 */
  font-size:12px;color:var(--muted);
}
#meBar span{cursor:pointer;white-space:nowrap}
#meBar span:hover{color:var(--brand)}
.me-ava{
  width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 2px 7px rgba(31,41,88,.16);
}
/* 占位：无头像时显示首字母，避免留下空白方块 */
.me-ava:not([src]),.me-ava[src=""]{background:rgba(37,99,235,.12)}

/* 评论条目的时间文字（此前未定义，会继承成正文色显得突兀） */
.cmt-top .t{font-size:11px;color:var(--muted);font-weight:400}

/* ==========================================================================
   个人资料 · 编辑区（头像 / 昵称 / 简介）
   登录后才出现，供用户随时修改自己的资料
   ========================================================================== */
.me-edit{padding:0}
/* 头像行：头像放大并加白环，与卡片上的头像语言保持一致 */
.me-edit-av{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.me-edit-av .me-av{
  width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:3px solid rgba(255,255,255,.94);
  box-shadow:0 4px 14px rgba(31,41,88,.16);
  background:rgba(255,255,255,.6);
}
.me-edit-av .me-av.def{
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:24px;font-weight:800;
}
.me-edit-ops{display:flex;flex-direction:column;gap:8px;min-width:0}
.me-edit-ops .code-row{flex-wrap:wrap}
/* 次要按钮：移除头像 */
.code-btn.ghost{
  background:rgba(255,255,255,.66);color:var(--muted);font-weight:600;
  border:1px solid var(--glass-line);box-shadow:none;
  transition:background .16s var(--ease), border-color .16s var(--ease);
}
.code-btn.ghost:active{background:rgba(255,255,255,.92)}
/* 次要按钮写死了半透明白底，深色主题下叠在深色面板上变成一块灰，
   而字色 var(--muted) 也是灰的 —— 灰字压灰底只有 1.28，等于看不见。
   深色下改成"浅色半透明底 + 亮字"，两套主题都清楚。 */
html[data-theme="dark"] .code-btn.ghost{
  background:rgba(255,255,255,.10);color:#cbd5ea;
  border-color:rgba(255,255,255,.18);
}
html[data-theme="dark"] .code-btn.ghost:active{background:rgba(255,255,255,.18)}
.code-btn:disabled{opacity:.55;cursor:default}

/* 编辑区表单：标签 + 输入框 + 保存按钮，行内对齐、聚焦有品牌色环 */
.me-edit .field{margin-bottom:12px}
.me-edit .field label{
  display:block;font-size:12px;font-weight:700;color:#5b6472;
  margin-bottom:6px;letter-spacing:.2px;
}
.me-edit .code-row{
  display:flex;gap:8px;align-items:stretch;
}
/* 编辑区里的输入框：近实色白底，保证在玻璃上有足够对比度 */
.me-edit .field input{
  width:100%;min-width:0;box-sizing:border-box;
  border:1px solid var(--glass-line);border-radius:var(--r-xs);
  background:rgba(255,255,255,.92);
  padding:11px 13px;font-size:14px;outline:none;color:var(--text);
  font-family:inherit;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.me-edit .field input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
.me-edit .code-row .code-btn{
  padding:11px 16px;font-size:12.5px;
  transition:filter .16s var(--ease), transform .16s var(--ease-spring);
}
.me-edit .code-row .code-btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .me-edit .code-row .code-btn:not(.ghost):hover{filter:brightness(1.06)}
  .code-btn.ghost:hover{background:rgba(255,255,255,.9)}
  html[data-theme="dark"] .code-btn.ghost:hover{background:rgba(255,255,255,.16)}
}
.me-edit .u-hint{margin-top:2px}

/* ==========================================================================
   Liquid Glass 2.0 · 排版与空状态
   —— 只调视觉，不动任何结构与业务逻辑
   ========================================================================== */

/* 长文阅读：正文行高 1.55，小字号补足字距，避免玻璃背景上发糊 */
.card .nm{line-height:1.4;letter-spacing:.1px}
.card .sm{line-height:1.55;letter-spacing:.05px}
.sheet-body p,
.sheet-body .sec p{line-height:1.7;letter-spacing:.1px}
.cmt-body{line-height:1.6;letter-spacing:.05px}

/* 空状态：玻璃容器 + 弱化图标，不再是干瘪的一行灰字 */
.empty{
  text-align:center;padding:52px 22px;color:var(--muted);
  font-size:13.5px;line-height:1.7;letter-spacing:.2px;
}
.empty .ico{width:56px;height:56px;margin:0 auto 14px;opacity:.5}
.empty .ico svg{width:100%;height:100%}

/* 减少动效偏好：关闭所有位移与缩放，只保留颜色过渡 */
@media (prefers-reduced-motion:reduce){
  .card,.rank-row,.dl-btn,.search,.chip{transition:color .2s ease, border-color .2s ease !important}
  .card:hover,.rank-row:hover{transform:none !important}
}

/* ==========================================================================
   星级图标（内联 SVG，替代字符星号，避免字体缺字与 emoji 化渲染）
   ========================================================================== */
.st{display:inline-block;vertical-align:-1px;flex-shrink:0}
/* 未选中继承父级弱化色，选中由行内 color 控制 */
.stars .st{width:15px;height:15px;transition:transform .16s var(--ease-spring), color .16s var(--ease)}
.stars span{cursor:pointer;display:inline-flex;padding:1px}
@media (hover:hover) and (pointer:fine){
  .stars span:hover .st{transform:scale(1.18)}
}
/* 列表/评论里跟随文字的小星 */
.st-inline{display:inline-flex;color:#a16207}
.st-inline .st{width:11px;height:11px}
/* 只作用于评论里的评分星，避免误伤列表行右侧的 .rt 文本 */
.cmt-body .rt{display:inline-flex;gap:1px;color:#a16207;vertical-align:-1px;margin-right:3px}
.cmt-body .rt .st{width:10px;height:10px}

/* ==========================================================================
   登录弹窗：方式切换（验证码 / 密码 / 找回密码）
   ========================================================================== */
/* ---- 登录卡片：顶部拖动手柄 ---- */
.lcard__grip{
  width:38px;height:4px;margin:6px auto 14px;border-radius:999px;
  background:var(--grip,rgba(31,41,88,.16));
}
html[data-theme="dark"] .lcard__grip{background:rgba(255,255,255,.2)}
/* ---- 登录卡片：右上角关闭 ---- */
.lcard__x{
  position:absolute;top:12px;right:12px;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--glass-line);border-radius:50%;
  background:var(--glass-2);color:var(--muted);
  font-size:19px;line-height:1;cursor:pointer;font-family:inherit;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.lcard__x:active{transform:scale(.92)}
html[data-theme="dark"] .lcard__x{color:#c3cbdb}
/* ---- 登录卡片：品牌头部 ---- */
.lcard__head{text-align:center;margin-bottom:16px}
.lcard__logo{
  width:52px;height:52px;margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;
  border-radius:16px;
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  box-shadow:0 6px 18px var(--brand-shadow,rgba(59,130,246,.32)),
             inset 0 1px 0 rgba(255,255,255,.45);
}
.lcard__logo svg{width:27px;height:27px;fill:var(--on-grad)}
.lcard__head h3{margin:0 0 6px;font-size:18px;font-weight:800;letter-spacing:.2px}
.lcard__head .tip{margin:0}

/* ---- 登录方式切换：胶囊 + 滑动指示条 ---- */
.ltabs{
  position:relative;
  display:flex;gap:4px;margin-bottom:14px;padding:3px;
  background:var(--glass-1);border:1px solid var(--glass-line);
  border-radius:12px;
}
/* 滑动指示器：只动 transform，不触发重排 */
.ltabs__ink{
  position:absolute;top:3px;left:3px;height:calc(100% - 6px);
  width:0;border-radius:9px;
  background:var(--lcard-ink,#fff);
  box-shadow:var(--sh-1), inset 0 1px 0 rgba(255,255,255,.9);
  transform:translate3d(0,0,0);
  transition:transform .26s var(--ease), width .26s var(--ease);
  pointer-events:none;
}
.ltab{
  position:relative;z-index:1;
  flex:1;border:0;background:transparent;cursor:pointer;
  padding:8px 4px;border-radius:9px;font-size:12.5px;font-weight:600;
  color:var(--muted);font-family:inherit;
  transition:color .18s var(--ease);
}
.ltab.on{
  /* 12.5px 小字用品牌色，#3b82f6 在白底上只有 3.68，走更深的一档 */
  color:var(--brand-ink);font-weight:700;
}
.ltab:active{transform:scale(.97)}
.ltip{
  margin-top:10px;font-size:11.5px;color:var(--muted);
  line-height:1.6;text-align:center;
}

/* ---- 带图标的输入框 ---- */
.inp-wrap{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:0}
.inp-wrap .inp-ico{
  position:absolute;left:11px;width:17px;height:17px;
  color:var(--muted);opacity:.75;pointer-events:none;flex:0 0 auto;
}
.inp-wrap input{
  width:100%;padding-left:36px !important;
}
.code-row .inp-wrap{min-width:0}
.code-row > .inp-wrap{flex:1 1 auto}

/* ==========================================================================
   个人中心：账号安全 / 我的下载
   ========================================================================== */
.sec-rows{display:flex;flex-direction:column;gap:8px}
.sec-row{
  display:flex;align-items:center;gap:10px;padding:11px 12px;
  border-radius:var(--r-sm);
  background:var(--glass-1);border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-hi);
}
.sec-row .tx{flex:1;min-width:0}
.sec-row .n{font-size:13.5px;font-weight:700;color:#3b4557}
.sec-row .m{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.5}
.sec-tag{
  flex-shrink:0;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;
  background:rgba(59,130,246,.13);color:var(--brand);
}
.sec-tag.on{background:rgba(16,185,129,.14);color:#059669}
.sec-tag.off{background:rgba(100,116,139,.13);color:var(--muted)}
.sec-tag.up{
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  color:var(--on-grad);box-shadow:0 2px 8px rgba(59,130,246,.3);
}
/* 有新版的行：左侧橙色标记，和普通记录区分开 */
.me-row.up-new{
  border-color:rgba(245,158,11,.42);
  background:linear-gradient(100deg, rgba(245,158,11,.14) 0%, var(--glass) 60%);
}
.me-row.up-new .newv{color:#d97706;font-weight:800}

/* ==========================================================================
   上传表单：分段 + 即时预览 + 拖拽 + 进度
   ========================================================================== */

/* 顶部即时预览卡：填表时同步看到成品效果 */
.up-preview{
  display:flex;align-items:center;gap:13px;
  padding:14px;margin-bottom:14px;border-radius:var(--r-md);
  background:rgba(255,255,255,.72);border:1px solid var(--glass-line);
  box-shadow:var(--sh-1);
}
.up-pv-ic{
  width:52px;height:52px;border-radius:15px;flex-shrink:0;overflow:hidden;
  background:var(--glass-1);border:1px solid var(--glass-line);
  display:flex;align-items:center;justify-content:center;
}
.up-pv-ic img{width:100%;height:100%;object-fit:cover}
.up-pv-tx{min-width:0;flex:1}
.up-pv-nm{
  font-size:15px;font-weight:800;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.up-pv-mt{font-size:11.5px;color:var(--muted);margin-top:3px}

/* 分段 */
.up-sec{
  padding:14px;margin-bottom:12px;border-radius:var(--r-md);
  background:rgba(255,255,255,.72);border:1px solid var(--glass-line);
  box-shadow:var(--sh-1);
}
.up-sec-t{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:800;color:var(--text);margin-bottom:12px;
}
.up-sec-t::before{
  content:'';width:3px;height:13px;border-radius:2px;flex-shrink:0;
  background:linear-gradient(180deg,var(--brand),var(--brand2));
}

/* 文件选择区：可点击也可拖入 */
.up-drop{
  display:flex;align-items:center;gap:12px;
  padding:13px;border-radius:var(--r-sm);cursor:pointer;
  background:var(--glass-1);border:1px dashed rgba(127,140,170,.45);
  transition:background .18s var(--ease), border-color .18s var(--ease),
             transform .18s var(--ease);
}
.up-drop.sm{padding:10px}
.up-drop:active{transform:scale(.99)}
.up-drop.over{
  background:rgba(59,130,246,.10);border-color:var(--brand);
  border-style:solid;
}
.up-drop-ic{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;overflow:hidden;
  background:var(--glass-1);border:1px solid var(--glass-line);
  display:flex;align-items:center;justify-content:center;
}
.up-drop.sm .up-drop-ic{width:36px;height:36px;border-radius:10px}
.up-drop-ic img{width:100%;height:100%;object-fit:cover}
.up-drop-ic.has{border-color:rgba(255,255,255,.9)}
.up-file-badge{
  font-size:10.5px;font-weight:800;color:var(--on-grad);padding:3px 7px;border-radius:6px;
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
}
.up-drop-tx{flex:1;min-width:0}
.up-drop-tx span{
  display:block;font-size:13px;font-weight:600;color:var(--text);
}
.up-drop-tx em{
  display:block;font-style:normal;font-size:11px;color:var(--muted);
  margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 底部操作条：固定在弹层底部，不会被内容顶走 */
/* ==========================================================================
   上传页底部操作栏
   原来是 position:absolute;bottom:0，但 .sheet 本身是滚动容器，
   absolute 的基准是「内容区的底部」而不是「视口底部」，
   结果一滚动按钮就跑到屏幕中间，悬在表单上方挡住输入框。

   改法：整页改用三段式布局（顶栏固定 / 内容区独立滚动 / 底栏常驻），
   底栏回归普通流式元素，永远在最底部，不再遮挡任何内容。
   ========================================================================== */
#upSheet{overflow:hidden}
#upSheet .sheet-body{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:20px;      /* 底栏已在流内，这里只需要一点收尾间距 */
}
.up-bar{
  flex-shrink:0;
  display:flex;flex-direction:column;gap:8px;
  padding:10px 14px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);
  border-top:1px solid var(--glass-line);
  box-shadow:0 -6px 20px rgba(16,24,48,.06);
}
.up-bar-btns{display:flex;gap:10px}
/* 底栏里的提示不换行、不撑高 */
.up-bar .u-hint,.up-bar .dw-tip{margin:0;font-size:11.5px;line-height:1.45}
html[data-theme="dark"] .up-bar{
  background:rgba(21,29,49,.97);border-top-color:rgba(255,255,255,.12);
}
.up-btn{
  flex:1;border:none;cursor:pointer;padding:13px;border-radius:var(--r-sm);
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  color:var(--on-grad);font-size:14.5px;font-weight:700;font-family:inherit;
  box-shadow:var(--sh-btn), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s var(--ease-spring), filter .18s var(--ease);
}
.up-btn:active{transform:scale(.98)}
.up-btn:disabled{opacity:.6;cursor:default}
.up-btn.ghost{
  flex:0 0 92px;background:rgba(255,255,255,.7);color:var(--muted);
  border:1px solid var(--glass-line);box-shadow:none;font-weight:600;
}

/* 上传进度 */
.up-prog{
  padding:14px;margin-top:4px;border-radius:var(--r-sm);
  background:var(--glass-1);border:1px solid var(--glass-line);
}
.up-prog-bar{
  height:7px;border-radius:999px;overflow:hidden;
  background:rgba(31,41,88,.10);
}
.up-prog-bar i{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  transition:width .2s var(--ease);
}
.up-prog-tx{
  margin-top:8px;font-size:11.5px;color:var(--muted);line-height:1.5;
}

/* ==========================================================================
   热搜词
   ========================================================================== */
.hot-kw{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  margin-top:10px;padding:0 2px;
}
.hot-lb{
  flex-shrink:0;font-size:10.5px;font-weight:800;color:var(--muted);
  letter-spacing:.6px;
}
.hot-i{
  border:1px solid var(--glass-line);background:var(--glass-1);
  -webkit-backdrop-filter:blur(var(--blur-1));backdrop-filter:blur(var(--blur-1));
  padding:5px 12px;border-radius:999px;cursor:pointer;
  font-size:12px;color:#4d5766;font-family:inherit;
  transition:background .16s var(--ease), color .16s var(--ease),
             transform .16s var(--ease);
}
.hot-i:active{transform:scale(.95)}
@media (hover:hover) and (pointer:fine){
  .hot-i:hover{background:rgba(255,255,255,.85);color:var(--brand)}
}

/* 旧版「个人中心 2.0」侧栏样式已整块移除。
   它与新版白底列表布局直接冲突：
     - width:134px 覆盖了新版的 100%（手机上侧栏被压成一条）
     - .dw-item.on 的渐变胶囊覆盖了新版白卡片选中态
     - .dw-item 的 color/font-size 也让标题与说明排版失效 */

/* ---------- 内容区头部 ---------- */
.dw-head{
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(var(--blur-2));backdrop-filter:blur(var(--blur-2));
  border-bottom:1px solid var(--glass-line);
}

/* ---------- 用户卡片：渐变带 + 玻璃主体 ---------- */
.me-card{
  padding:0;margin-bottom:15px;border-radius:var(--r-md);
  background:var(--glass);
  border:1px solid var(--glass-line);
  box-shadow:var(--sh-2), inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter:blur(var(--blur-2)) saturate(var(--sat));
  backdrop-filter:blur(var(--blur-2)) saturate(var(--sat));
}
/* 渐变带收窄为装饰条，主体留给玻璃 */
.me-card::before{
  inset:0 0 auto 0;height:64px;
  background:
    radial-gradient(70% 130% at 10% 0%,  rgba(139,92,246,.55) 0%, rgba(139,92,246,0) 62%),
    linear-gradient(110deg,var(--brand) 0%,#6366f1 100%);
}
/* 噪点只作用在渐变带上 */
.me-card::after{
  inset:0 0 auto 0;height:64px;opacity:.42;
  border-radius:var(--r-md) var(--r-md) 0 0;
}

.me-top{padding:30px 14px 0;gap:13px}
.me-av{
  width:60px;height:60px;
  border:3px solid rgba(255,255,255,.96);
  box-shadow:0 6px 18px rgba(31,41,88,.26), 0 0 0 1px rgba(255,255,255,.4);
}
.me-av.def{font-size:22px}
.me-id{flex:1;min-width:0}
.me-nick{font-size:17.5px;letter-spacing:.4px}
.me-uid{
  background:rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.me-bio{margin:12px 14px 0;color:var(--muted);font-size:12px}

/* 统计：白色玻璃小卡，浮在渐变带下沿 */
.me-stats{
  grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  margin:13px 14px 14px;padding:0;
}
.me-stats div{
  padding:9px 2px;border-radius:12px;
  background:var(--glass-1);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(var(--blur-1));backdrop-filter:blur(var(--blur-1));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.me-stats b{
  font-size:17px;
  background:linear-gradient(135deg,var(--brand),#6366f1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.me-stats span{color:var(--muted);font-size:10px;font-weight:600}

/* ---------- 分区与补充控件 ---------- */
.dw-sec h5{font-size:13.5px;letter-spacing:.2px;color:#1e293b}
.dw-sec h5::before{
  width:3px;height:14px;border-radius:2px;
  background:linear-gradient(180deg,var(--brand),#6366f1);
}
.dw-sec h5 em{
  font-style:normal;font-size:11px;font-weight:700;color:var(--muted);
  padding:2px 8px;border-radius:999px;background:var(--glass-1);
  border:1px solid var(--glass-line);
}

/* 「+ 上传应用」按钮：此前 CSS 里完全没有定义，按钮是裸的 */
.dw-add{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;margin-bottom:12px;padding:12px;
  border:0;border-radius:var(--r-sm);cursor:pointer;
  background:linear-gradient(135deg,var(--brand) 0%,#4f46e5 100%);
  color:#fff;font-size:14px;font-weight:700;font-family:inherit;
  box-shadow:var(--sh-btn), inset 0 1px 0 rgba(255,255,255,.32);
  transition:transform .18s var(--ease-spring), filter .18s var(--ease);
}
.dw-add:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){
  .dw-add:hover{filter:brightness(1.06)}
}

/* 壁纸页的按钮行：此前未定义，两个按钮会各占整行且无间距 */
.dw-row{
  display:flex;gap:10px;margin-top:12px;
}
.dw-row .dw-btn{
  flex:1;padding:11px;border:0;border-radius:var(--r-sm);
  background:linear-gradient(135deg,var(--brand) 0%,#4f46e5 100%);
  color:#fff;font-size:13.5px;font-weight:700;font-family:inherit;cursor:pointer;
  box-shadow:var(--sh-btn), inset 0 1px 0 rgba(255,255,255,.32);
  transition:transform .18s var(--ease), filter .18s var(--ease);
}
.dw-row .dw-btn.ghost{
  background:rgba(255,255,255,.66);color:var(--muted);
  border:1px solid var(--glass-line);box-shadow:none;font-weight:600;
}
.dw-row .dw-btn:active{transform:scale(.98)}

/* 上传设置页的说明文字：此前未定义 */
.dw-tip{
  margin-top:10px;padding:9px 11px;border-radius:10px;
  font-size:11.5px;line-height:1.6;color:var(--muted);
  background:var(--glass-1);border:1px solid var(--glass-line);
}

/* ==========================================================================
   UI 重做版：通透 · 精致 · 有呼吸感
   不改 DOM、不改逻辑，纯 CSS 覆盖视觉层
   ========================================================================== */

/* ---------- 1. 底层光晕：更柔更透 ---------- */
body::before{
  background:
    radial-gradient(58% 40% at 8% -4%,   rgba(96,165,250,.40) 0%, rgba(96,165,250,0) 62%),
    radial-gradient(52% 38% at 96% 6%,   rgba(167,139,250,.34) 0%, rgba(167,139,250,0) 64%),
    radial-gradient(50% 34% at 84% 78%,  rgba(244,114,182,.26) 0%, rgba(244,114,182,0) 66%),
    radial-gradient(54% 36% at 10% 92%,  rgba(52,211,153,.24) 0%, rgba(52,211,153,0) 68%),
    linear-gradient(170deg,#f7f9fe 0%,#f3f6fd 44%,#faf6fe 100%);
}

/* ---------- 2. 头部：品牌渐变标题 ---------- */
.hd{padding:calc(16px + env(safe-area-inset-top)) 16px 0}
.hd .brand,.hd h1,.hd .title{
  font-size:25px;font-weight:800;letter-spacing:.6px;margin:0;
  background:linear-gradient(100deg,#2563eb 0%,#6366f1 46%,#a855f7 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hd .sub,.hd .desc{margin-top:5px;font-size:12px;color:var(--muted);letter-spacing:.2px}

/* ---------- 3. 搜索框：更精致的毛玻璃 ---------- */
.search{
  height:46px;border-radius:15px;padding:0 15px;gap:9px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 2px 6px rgba(31,41,88,.05), 0 12px 30px rgba(31,41,88,.06),
             inset 0 1px 0 rgba(255,255,255,.95);
}
.search:focus-within{
  background:rgba(255,255,255,.92);
  box-shadow:0 2px 8px rgba(59,130,246,.10), 0 0 0 4px rgba(59,130,246,.16),
             inset 0 1px 0 rgba(255,255,255,.95);
}
.search input{font-size:14px;letter-spacing:.2px}

/* ---------- 4. 分类胶囊：选中态渐变 ---------- */
.chip{
  padding:8px 15px;border-radius:999px;font-size:12.5px;font-weight:600;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(255,255,255,.85);
  color:#5b6478;letter-spacing:.3px;white-space:nowrap;
  box-shadow:0 1px 4px rgba(31,41,88,.05);
  transition:transform .18s var(--ease-spring), background .2s var(--ease),
             color .2s var(--ease), box-shadow .2s var(--ease);
}
.chip.on{
  background:linear-gradient(100deg,var(--brand) 0%,#6366f1 100%);
  color:#fff;border-color:transparent;
  box-shadow:0 4px 14px rgba(59,130,246,.32), inset 0 1px 0 rgba(255,255,255,.28);
}
/* 深色下未选中的分类胶囊：
   原来只靠一条 .chips span 规则改背景，而 chip 实际是 div.chip，
   选择器压根不匹配 —— 背景仍是浅色白，文字仍是深灰，
   深底上对比度只有 2.39，一整排灰疙瘩糊在页面上。
   这里把背景、边框、文字三件一起补齐。 */
html[data-theme="dark"] .chip{
  background:var(--glass-1);
  border-color:var(--glass-line);
  color:#dbe2f0;
  box-shadow:0 1px 4px rgba(0,0,0,.22);
}
html[data-theme="dark"] .chip.on{
  background:linear-gradient(100deg,var(--brand) 0%,var(--brand2) 100%);
  color:#0b1020;
  border-color:transparent;
  box-shadow:0 4px 14px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.2);
}

/* ---------- 5. 应用卡片：重排为商店式布局 ---------- */
/* 性能关键：前面那套 .card 带 backdrop-filter，
   列表里几十张卡片就是几十层毛玻璃，滚动时每帧都要把背后的画面
   复制一份再高斯模糊 —— 这是全站卡顿最主要的原因。
   这里显式关掉，改用半透明实色，视觉几乎一样但没有模糊开销。
   同时去掉常驻的 will-change（它会给每张卡片都开一个合成层，
   几十个卡片会吃掉大量 GPU 内存），只在真正交互时再加。 */
.card{
  padding:15px;border-radius:22px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 2px 8px rgba(31,41,88,.05), 0 14px 34px rgba(31,41,88,.07),
             inset 0 1px 0 rgba(255,255,255,.95);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background-image:none;
  will-change:auto;
  /* 屏幕外的卡片跳过渲染，长列表收益明显 */
  content-visibility:auto;
  contain-intrinsic-size:auto 190px;
}
@media (hover:hover) and (pointer:fine){
  .card:hover{
    transform:translateY(-4px);
    box-shadow:0 6px 14px rgba(31,41,88,.07), 0 26px 56px rgba(31,41,88,.13),
               inset 0 1px 0 rgba(255,255,255,.95);
  }
}
/* 图标：放大成视觉重心 */
.card .ic{
  width:54px;height:54px;border-radius:15px;flex-shrink:0;
  box-shadow:0 4px 12px rgba(31,41,88,.16), 0 1px 2px rgba(31,41,88,.10),
             inset 0 1px 0 rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.6);
}
.card-top{gap:13px}
.card-meta{gap:5px}
/* 分类标签：小胶囊 */
.card .cat{
  display:inline-block;align-self:flex-start;
  font-size:10px;font-weight:700;letter-spacing:.5px;
  padding:2.5px 8px;border-radius:999px;
  /* 10px 小字，--brand(#3b82f6) 压在浅蓝底上只有 3.28，换更深一档 */
  background:rgba(59,130,246,.10);color:var(--brand-ink);
  border:1px solid rgba(59,130,246,.16);
}
/* 深色下胶囊底也换成亮蓝的透明版，深色蓝底配亮蓝边才不脏 */
html[data-theme="dark"] .card .cat{
  background:rgba(96,165,250,.14);
  border-color:rgba(96,165,250,.28);
}
.card .ver{font-size:10.5px;color:var(--muted)}
.card .nm{
  font-size:15px;font-weight:700;letter-spacing:.2px;line-height:1.35;
  margin-top:1px;
}
.card .sm{
  font-size:11.5px;color:var(--muted);line-height:1.5;letter-spacing:.1px;
  margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* 底部行：评分 + 安装按钮 */
.card .ft{margin-top:12px;align-items:center}
.card .get{
  padding:7px 17px;border-radius:999px;font-size:12.5px;font-weight:700;
  background:linear-gradient(100deg,var(--brand) 0%,#4f46e5 100%);
  color:#fff;box-shadow:0 3px 10px rgba(59,130,246,.28), inset 0 1px 0 rgba(255,255,255,.3);
  letter-spacing:.3px;
}
.card .get:active{transform:scale(.94)}
.card .dl{font-size:10.5px;color:var(--muted);letter-spacing:.2px;margin-top:7px}

/* ---------- 6. 排行榜：精致奖牌 ---------- */
.rank-row{padding:12px 14px;border-radius:18px}
.rk{
  width:28px;height:28px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:800;
  background:rgba(255,255,255,.7);color:var(--muted);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 4px rgba(31,41,88,.06);
}
.rk.r1{background:linear-gradient(140deg,#fbbf24 0%,#f59e0b 100%);color:#fff;border-color:transparent;
  box-shadow:0 3px 10px rgba(245,158,11,.36), inset 0 1px 0 rgba(255,255,255,.4)}
.rk.r2{background:linear-gradient(140deg,#cbd5e1 0%,#94a3b8 100%);color:#fff;border-color:transparent;
  box-shadow:0 3px 10px rgba(148,163,184,.34), inset 0 1px 0 rgba(255,255,255,.4)}
.rk.r3{background:linear-gradient(140deg,#f0a883 0%,#c2703f 100%);color:#fff;border-color:transparent;
  box-shadow:0 3px 10px rgba(194,112,63,.32), inset 0 1px 0 rgba(255,255,255,.4)}
.rank-row .ic{
  width:46px;height:46px;border-radius:13px;
  box-shadow:0 3px 10px rgba(31,41,88,.14), inset 0 1px 0 rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.6);
}

/* ---------- 7. 详情弹层：渐变头部 ---------- */
.sheet{
  border-radius:26px 26px 0 0;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(var(--blur-3)) saturate(var(--sat));
  backdrop-filter:blur(var(--blur-3)) saturate(var(--sat));
  box-shadow:0 -8px 40px rgba(31,41,88,.18);
}
.sheet-top{
  padding:14px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,.8);
}
.sheet-top strong{font-size:16px;font-weight:800;letter-spacing:.3px}
.sheet-body{padding:16px 16px calc(30px + 64px)}

/* 详情大图标 */
.dv-ic,.detail-ic{
  width:82px;height:82px;border-radius:22px;
  box-shadow:0 8px 24px rgba(31,41,88,.22), inset 0 1px 0 rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.6);
}
/* 指标小卡 */
.dv-stat,.detail-stat{
  border-radius:16px;padding:11px 8px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 1px 4px rgba(31,41,88,.05);
}

/* ---------- 8. 分区标题 ---------- */
.dw-sec h5{font-size:14px;letter-spacing:.4px}
.dw-sec h5 em{
  background:rgba(59,130,246,.10);color:var(--brand);
  border-color:rgba(59,130,246,.16);font-weight:700;
}

/* ---------- 9. 空状态 ---------- */
.empty,.dw-empty{
  padding:38px 16px;border-radius:20px;
  background:rgba(255,255,255,.42);
  border:1px dashed rgba(31,41,88,.14);
  color:var(--muted);font-size:12.5px;line-height:1.7;
}

/* ==========================================================================
   补齐：个人中心表单与一批「只在后代选择器里出现过」的类
   --------------------------------------------------------------------------
   问题：这些类此前只出现在 `.drawer .dw-form input` 这类后代选择器中，
   或压根没有规则。按「选择器里出现过」的扫描方式会被判为已定义，
   实际上元素本身没有任何样式，退化为浏览器默认外观 ——
   表现为表单是原生边框、复选框贴着文字、按钮没有圆角。
   ========================================================================== */

/* ---------- 表单容器 ---------- */
.dw-form{
  padding:14px;border-radius:var(--r-sm);
  background:#ffffff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 1px 3px rgba(15,23,42,.04), 0 8px 22px rgba(15,23,42,.05);
}
/* 表单内的字段标签 */
.dw-form label{
  display:block;margin-bottom:13px;
  font-size:12px;font-weight:600;color:#5b6478;letter-spacing:.2px;
}
.dw-form label:last-of-type{margin-bottom:0}

/* ---------- 输入框 / 下拉 / 文本域 ---------- */
.dw-form input,
.dw-form select,
.dw-form textarea{
  display:block;width:100%;margin-top:7px;
  height:44px;padding:0 13px;
  font-size:14px;color:var(--text);font-family:inherit;
  background:#ffffff;
  border:1px solid #dde3ec;border-radius:11px;
  outline:none;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.dw-form textarea{height:auto;min-height:88px;padding:11px 13px;line-height:1.6;resize:vertical}
.dw-form select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-right:34px;
  /* 下拉箭头用内联 SVG 绘制，不依赖外部资源 */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235b6478' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
}
.dw-form input:focus,
.dw-form select:focus,
.dw-form textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(59,130,246,.14);
}
.dw-form input::placeholder,
.dw-form textarea::placeholder{color:#a3adbb}

/* ---------- 复选框行 ---------- */
.ck{
  display:flex !important;align-items:center;gap:9px;
  font-size:13px !important;font-weight:500;color:#3d4757;
  cursor:pointer;user-select:none;
}
.ck input[type=checkbox]{
  width:18px;height:18px;margin:0;flex-shrink:0;
  accent-color:var(--brand);cursor:pointer;
}

/* ---------- 按钮 ---------- */
.dw-btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:12px;border:0;border-radius:var(--r-sm);
  font-size:14px;font-weight:700;font-family:inherit;color:#fff;
  background:linear-gradient(100deg,var(--brand) 0%,#4f46e5 100%);
  box-shadow:0 4px 14px rgba(59,130,246,.28), inset 0 1px 0 rgba(255,255,255,.3);
  cursor:pointer;letter-spacing:.3px;
  transition:transform .18s var(--ease), filter .18s var(--ease);
}
.dw-btn:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){ .dw-btn:hover{filter:brightness(1.07)} }
.dw-btn.ghost{
  background:#f2f5fa;color:#5b6478;
  border:1px solid #dde3ec;box-shadow:none;font-weight:600;
}
.dw-btn.ghost:active{transform:scale(.98)}

/* 危险按钮（删除等） */
.dan{
  background:rgba(239,68,68,.08) !important;
  color:#dc2626 !important;
  border:1px solid rgba(239,68,68,.22) !important;
  box-shadow:none !important;
}
/* 主要按钮 */
.pri{
  background:linear-gradient(100deg,var(--brand) 0%,#4f46e5 100%) !important;
  color:#fff !important;border-color:transparent !important;
  box-shadow:0 4px 14px rgba(59,130,246,.28) !important;
}

/* ---------- 评论头部 ---------- */
.cmt-head{
  display:flex;align-items:center;gap:9px;
  margin-bottom:6px;
}
.cmt-head .av,.cmt-head img{
  width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0;
  box-shadow:0 1px 4px rgba(31,41,88,.12);
}

/* ---------- 默认头像（首字母） ---------- */
.def{
  background:linear-gradient(135deg,var(--brand) 0%,#6366f1 100%);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;
}

/* ---------- 标记类 ---------- */
.up{color:var(--brand);font-weight:700}
.up-new{
  position:relative;
  box-shadow:0 0 0 2px rgba(59,130,246,.14), var(--sh-1);
}

/* ==========================================================================
   个人中心卡片重排
   --------------------------------------------------------------------------
   原问题：卡片内容区只有 228px，四格统计被挤成 44px 宽，
   数字和标签几乎贴在一起；ID 与邮箱是两行散落的灰字，没有层次。
   这里重排为：更高的渐变人物区 + 更紧凑的身份信息 + 2x2 统计格。
   ========================================================================== */

/* 卡片本体：改为真正的「头图 + 信息区」结构 */
.me-card{
  padding:0 0 14px !important;
  margin-bottom:14px;
  border-radius:var(--r-md);
  overflow:hidden;
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,.07);
  box-shadow:0 2px 6px rgba(15,23,42,.05), 0 12px 30px rgba(15,23,42,.07);
}
/* 渐变带加高到 78px，人物区更完整 */
.me-card::before{top:0;height:78px;border-radius:var(--r-md) var(--r-md) 0 0}
.me-card::after{top:0;height:78px;border-radius:var(--r-md) var(--r-md) 0 0}

/* 人物区：头像压在渐变带下沿 */
.me-top{padding:38px 14px 0;gap:13px;align-items:flex-end}
.me-av{
  width:64px;height:64px;flex-shrink:0;
  border:3px solid #ffffff;
  box-shadow:0 4px 14px rgba(15,23,42,.20);
}
.me-av.def{font-size:24px;font-weight:800;letter-spacing:0}
.me-top > .me-av{outline:1px dashed rgba(255,255,255,.55);outline-offset:4px}

/* 身份信息：昵称突出，ID / 邮箱收成小胶囊 */
.me-id{flex:1;min-width:0;padding-bottom:2px}
.me-nick{
  font-size:18px;font-weight:800;letter-spacing:.3px;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#0f172a;
}
.me-uid,.me-mail{
  display:inline-block;margin-top:6px;margin-right:6px;
  padding:3px 9px;border-radius:999px;
  font-size:10.5px;font-weight:600;letter-spacing:.2px;line-height:1.4;
  background:#f1f5fb;color:#5b6478;
  border:1px solid rgba(15,23,42,.06);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  vertical-align:top;
}
.me-mail{margin-right:0}

/* 简介：独立的浅色块，不再贴着统计 */
.me-bio{
  margin:12px 14px 0 !important;
  padding:9px 11px;border-radius:var(--r-xs);
  background:#f6f8fc !important;
  border:1px solid rgba(15,23,42,.05);
  color:#5b6478;font-size:12px;line-height:1.6;
}

/* 统计：改为 2x2，每格约 110px，数字不再挤成一团 */
.me-stats{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  margin:12px 14px 0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
}
.me-stats div{
  padding:11px 8px !important;
  border-radius:var(--r-xs) !important;
  background:#f6f8fc !important;
  border:1px solid rgba(15,23,42,.05) !important;
  box-shadow:none !important;
  text-align:center;
}
.me-stats div + div::before{display:none !important}
.me-stats b{
  display:block;
  font-size:20px;font-weight:800;line-height:1.15;letter-spacing:.4px;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--brand) 0%,#6366f1 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.me-stats span{
  display:block;margin-top:3px;
  font-size:11px !important;font-weight:600;letter-spacing:.3px;
  color:#79839a !important;
}

/* ---------- 列表行（我的上传 / 下载记录 / 历史） ---------- */
.me-row{
  padding:11px 12px !important;
  border-radius:var(--r-sm) !important;
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,.07) !important;
  box-shadow:0 1px 3px rgba(15,23,42,.04), 0 6px 16px rgba(15,23,42,.04) !important;
  margin-bottom:9px;
  gap:11px;
}
.me-row:last-child{margin-bottom:0}
.me-row .ic{
  width:44px;height:44px;border-radius:12px;object-fit:cover;flex-shrink:0;
  box-shadow:0 2px 7px rgba(15,23,42,.13), inset 0 1px 0 rgba(255,255,255,.4);
  border:1px solid rgba(255,255,255,.6);
}
.me-row .ic.ph{background:#e8edf5}
.me-row .tx{flex:1;min-width:0}
.me-row .n{
  font-size:13.5px;font-weight:700;color:#0f172a;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.me-row .m{font-size:11px;color:#8a94a8;margin-top:3px;line-height:1.5}
.me-row .rt{font-size:11px;color:#8a94a8;flex-shrink:0}

/* 行内操作按钮组 */
.me-row.up .ops{
  display:flex;gap:7px;flex-wrap:wrap;width:100%;
  margin-top:10px;padding-top:10px;
  border-top:1px solid rgba(15,23,42,.06);
}
.me-row.up .ops button{
  flex:1;min-width:64px;
  padding:7px 10px;border-radius:9px;
  font-size:12px;font-weight:600;
  background:#f2f5fa;color:#5b6478;
  border:1px solid rgba(15,23,42,.07);
  cursor:pointer;font-family:inherit;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.me-row.up .ops button:active{transform:scale(.97)}
.me-row.up .ops button.pri{
  background:linear-gradient(100deg,var(--brand) 0%,#4f46e5 100%);
  color:#fff;border-color:transparent;
  box-shadow:0 2px 8px rgba(59,130,246,.24);
}
.me-row.up .ops button.dan{
  background:rgba(239,68,68,.08);color:#dc2626;
  border-color:rgba(239,68,68,.2);
}

/* ---------- 分区标题 ---------- */
.dw-sec{margin-bottom:14px}
.dw-sec h5{
  display:flex;align-items:center;gap:7px;
  margin:0 0 10px;
  font-size:14px;font-weight:800;letter-spacing:.4px;color:#0f172a;
}
.dw-sec h5::before{
  content:'';width:3px;height:14px;border-radius:2px;flex-shrink:0;
  background:linear-gradient(180deg,var(--brand) 0%,#6366f1 100%);
}
.dw-sec h5 em{
  padding:1px 8px;border-radius:999px;
  font-size:11px;font-style:normal;font-weight:700;
  background:rgba(59,130,246,.10);color:var(--brand);
  border:1px solid rgba(59,130,246,.16);
}

/* ==========================================================================
   多账号切换 / 记住登录
   ========================================================================== */

/* ---------- 记住登录开关 ---------- */
.l-rem{
  display:flex;align-items:center;gap:8px;
  margin:0 0 12px;
  font-size:12.5px;font-weight:500;color:var(--muted);
  cursor:pointer;user-select:none;
}
.l-rem input[type=checkbox]{
  width:17px;height:17px;margin:0;flex-shrink:0;
  accent-color:var(--brand);cursor:pointer;
}

/* ---------- 已保存账号列表 ---------- */
.l-saved{margin-bottom:14px}
.saved-hd{
  font-size:11.5px;font-weight:700;letter-spacing:.5px;
  color:#8a94a8;margin-bottom:8px;
}
.saved-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;margin-bottom:7px;
  border-radius:var(--r-xs);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(15,23,42,.07);
  cursor:pointer;
  transition:background .16s var(--ease), border-color .16s var(--ease),
             transform .16s var(--ease);
}
.saved-row:last-child{margin-bottom:0}
.saved-row:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){
  .saved-row:hover{
    background:#ffffff;
    border-color:rgba(59,130,246,.3);
    box-shadow:0 2px 8px rgba(59,130,246,.10);
  }
}
/* 已失效的账号：淡化但保留入口，点它会提示重新验证 */
.saved-row.dead{opacity:.55}
.saved-av{
  width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1px solid rgba(15,23,42,.06);
  box-shadow:0 1px 4px rgba(15,23,42,.10);
}
.saved-av-txt{
  display:flex;align-items:center;justify-content:center;
  color:#ffffff;font-size:15px;font-weight:800;
}
.saved-tx{flex:1;min-width:0}
.saved-nm{
  font-size:13px;font-weight:700;color:#0f172a;letter-spacing:.2px;
  display:flex;align-items:center;gap:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.saved-cur{
  flex-shrink:0;
  padding:1px 7px;border-radius:999px;
  font-size:10px;font-weight:700;
  background:rgba(59,130,246,.12);color:var(--brand);
  border:1px solid rgba(59,130,246,.18);
}
.saved-mail{
  margin-top:3px;
  font-size:11px;color:#8a94a8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.saved-del{
  flex-shrink:0;
  padding:5px 10px;border-radius:8px;
  font-size:11.5px;font-weight:600;font-family:inherit;
  background:#f2f5fa;color:#8a94a8;
  border:1px solid rgba(15,23,42,.07);
  cursor:pointer;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.saved-del:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){
  .saved-del:hover{background:rgba(239,68,68,.08);color:#dc2626;border-color:rgba(239,68,68,.2)}
}

/* ---------- 个人中心「账号管理」 ---------- */
.acc-row{
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;margin-bottom:9px;
  border-radius:var(--r-sm);
  background:#ffffff;
  border:1px solid rgba(15,23,42,.07);
  box-shadow:0 1px 3px rgba(15,23,42,.04), 0 6px 16px rgba(15,23,42,.04);
}
.acc-row.cur{border-color:rgba(59,130,246,.32);background:#f7faff}
.acc-row .av{
  width:42px;height:42px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1px solid rgba(15,23,42,.06);
  box-shadow:0 2px 7px rgba(15,23,42,.12);
}
.acc-row .av.txt{
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:17px;font-weight:800;
}
.acc-row .tx{flex:1;min-width:0}
.acc-row .nm{
  font-size:13.5px;font-weight:700;color:#0f172a;
  display:flex;align-items:center;gap:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.acc-row .mail{
  margin-top:3px;font-size:11px;color:#8a94a8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.acc-row .ops{display:flex;gap:7px;flex-shrink:0}
.acc-row .ops button{
  padding:6px 11px;border-radius:9px;
  font-size:12px;font-weight:600;font-family:inherit;
  background:#f2f5fa;color:#5b6478;
  border:1px solid rgba(15,23,42,.07);
  cursor:pointer;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.acc-row .ops button:active{transform:scale(.96)}
.acc-row .ops button.pri{
  background:linear-gradient(100deg,var(--brand) 0%,#4f46e5 100%);
  color:#fff;border-color:transparent;
  box-shadow:0 2px 8px rgba(59,130,246,.24);
}
@media (hover:hover) and (pointer:fine){
  .acc-row .ops button.dan:hover{background:rgba(239,68,68,.08);color:#dc2626;border-color:rgba(239,68,68,.2)}
}
.acc-badge{
  flex-shrink:0;
  padding:1px 7px;border-radius:999px;
  font-size:10px;font-weight:700;
  background:rgba(59,130,246,.12);color:var(--brand);
  border:1px solid rgba(59,130,246,.18);
}
.acc-badge.dead{background:#f1f3f7;color:#98a2b3;border-color:rgba(15,23,42,.08)}

/* ==========================================================================
   手机端：内容区从右侧滑入
   --------------------------------------------------------------------------
   侧栏在手机上占满整屏（列表优先），点功能项后内容区盖上来；
   返回按钮先退回列表，再点一次才关抽屉。桌面端仍是左右两栏。
   ========================================================================== */
@media (max-width:719px){
  .dw-main{
    position:absolute;inset:0;z-index:5;
    background:#f7f8fc;
    /* 默认就在屏幕内。只有侧栏处于「列表态」时才推出去。
       这样即使 app.js 没更新（或未加载），内容区依然可见 ——
       之前是默认 translateX(100%) 靠 JS 加 .show 拉回来，
       一旦 JS 不是新版，用户点开个人中心就是一片空白。 */
    transform:translateX(0);
    transition:transform .28s cubic-bezier(.32,.72,0,1);
    box-shadow:-8px 0 30px rgba(15,23,42,.14);
  }
  /* JS 打开抽屉时给 panel 加 .list-mode：先展示列表 */
  .dw-panel.list-mode .dw-main{transform:translateX(100%)}
  /* 手机上返回按钮排在左边更符合直觉（桌面端在最右） */
  .dw-close{order:1;margin-left:0;margin-right:2px}
  .dw-head strong{order:2;flex:1;text-align:left}
}
@media (min-width:720px){
  /* 桌面端不需要滑入，内容区常驻 */
  .dw-main{transform:none !important}
  .dw-close{order:3;margin-left:auto;margin-right:0}
  .dw-head strong{order:2;flex:none;text-align:left}
}

/* ==========================================================================
   通知铃铛与通知面板
   ========================================================================== */
.bell{
  position:absolute;right:14px;top:14px;z-index:3;
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(var(--blur-1)) saturate(160%);
  backdrop-filter:blur(var(--blur-1)) saturate(160%);
  color:#3f4a5e;cursor:pointer;
  box-shadow:0 2px 8px rgba(31,41,88,.10), inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .18s var(--ease), background .18s var(--ease);
}
.bell:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){ .bell:hover{background:rgba(255,255,255,.8)} }
.bell-dot{
  position:absolute;right:-3px;top:-3px;min-width:17px;height:17px;
  padding:0 4px;border-radius:9px;background:#ef4444;color:#fff;
  font-size:10.5px;font-weight:800;line-height:17px;text-align:center;
  box-shadow:0 0 0 2px rgba(255,255,255,.9);
}
.notif-sheet{
  width:100%;max-height:76vh;overflow:hidden;
  background:#f7f8fc;border-radius:20px 20px 0 0;
  display:flex;flex-direction:column;
  animation:notifIn .26s cubic-bezier(.32,.72,0,1);
}
@keyframes notifIn{from{transform:translateY(100%)}to{transform:translateY(0)}}
.notif-head{
  flex-shrink:0;display:flex;align-items:center;gap:8px;
  padding:14px 16px;background:#fff;border-bottom:1px solid rgba(15,23,42,.07);
}
.notif-head strong{flex:1;font-size:15px;font-weight:800;color:#111827}
.notif-body{flex:1;overflow-y:auto;padding:10px 12px calc(20px + env(safe-area-inset-bottom))}
.notif-item{
  margin-bottom:8px;padding:12px;border-radius:13px;
  background:#fff;border:1px solid #e8edf5;
  box-shadow:0 1px 3px rgba(15,23,42,.04);
}
.notif-item.unread{border-color:rgba(59,130,246,.3);background:#f5f9ff}
.notif-item b{display:block;font-size:13.5px;font-weight:700;color:#0f172a}
.notif-item p{margin:5px 0 0;font-size:12px;line-height:1.55;color:#5b6779}
.notif-item time{display:block;margin-top:6px;font-size:10.5px;color:#94a3b8}

/* ==========================================================================
   评论回复（两级盖楼）
   ========================================================================== */
.cmt-ops{
  display:flex;align-items:center;gap:10px;margin-top:6px;
}
.cmt-reply{
  border:0;background:none;padding:0;
  font-size:11.5px;font-weight:600;color:var(--brand);
  cursor:pointer;font-family:inherit;
  transition:opacity .16s var(--ease);
}
.cmt-reply:active{opacity:.6}
@media (hover:hover) and (pointer:fine){ .cmt-reply:hover{text-decoration:underline} }
.cmt-cnt{font-size:11px;color:var(--muted)}
.cmt-kids{
  margin-top:9px;padding-left:11px;
  border-left:2px solid rgba(59,130,246,.18);
}
.cmt.kid{padding:8px 0;gap:8px}
.cmt.kid .avatar.sm{width:26px;height:26px;font-size:11px}
.cmt.kid .cmt-body{font-size:12.5px}
.reply-to{
  font-size:11px;color:var(--muted);
  padding:1px 6px;border-radius:7px;background:rgba(15,23,42,.05);
}
.cmt-reply-box{margin-top:9px}
.cmt-rinput{
  width:100%;box-sizing:border-box;min-height:56px;
  padding:9px 11px;border-radius:11px;font-size:13px;font-family:inherit;
  border:1px solid rgba(15,23,42,.12);background:rgba(255,255,255,.9);
  color:inherit;resize:vertical;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.cmt-rinput:focus{
  outline:none;border-color:rgba(59,130,246,.5);
  box-shadow:0 0 0 3px rgba(59,130,246,.14);
}
.cmt-rbtn{display:flex;justify-content:flex-end;gap:8px;margin-top:7px}
.cmt-rbtn .btn-mini{
  border:1px solid rgba(15,23,42,.12);background:rgba(255,255,255,.85);
  padding:7px 14px;border-radius:9px;font-size:12px;font-weight:600;
  color:#5b6779;cursor:pointer;font-family:inherit;
}
.cmt-rbtn .btn-mini.pri{
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  color:var(--on-grad);border:0;box-shadow:0 3px 10px rgba(59,130,246,.28);
}

/* ==========================================================================
   分享面板与搜索历史
   ========================================================================== */
.share-sheet{
  width:100%;max-width:420px;margin:0 auto;
  background:#f7f8fc;border-radius:20px 20px 0 0;
  display:flex;flex-direction:column;overflow:hidden;
  animation:notifIn .26s cubic-bezier(.32,.72,0,1);
}
.share-head{
  flex-shrink:0;display:flex;align-items:center;gap:8px;
  padding:14px 16px;background:#fff;border-bottom:1px solid rgba(15,23,42,.07);
}
.share-head strong{flex:1;font-size:15px;font-weight:800;color:#111827}
.share-body{
  padding:18px 16px calc(22px + env(safe-area-inset-bottom));text-align:center;
}
.qr-box{
  width:200px;height:200px;margin:0 auto 14px;padding:10px;
  background:#fff;border-radius:16px;border:1px solid #e8edf5;
  box-shadow:0 3px 14px rgba(15,23,42,.08);
}
.qr-box svg{display:block;width:100%;height:100%;image-rendering:pixelated}
.share-title{font-size:14px;font-weight:700;color:#0f172a;margin-bottom:6px}
.share-link{
  font-size:11.5px;color:#64748b;word-break:break-all;line-height:1.5;
  padding:8px 10px;border-radius:10px;background:#fff;border:1px solid #e8edf5;
  margin-bottom:14px;
}
.share-ops{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.share-ops .btn-mini{
  min-width:104px;text-align:center;
  border:1px solid rgba(15,23,42,.12);background:#fff;
  padding:10px 16px;border-radius:11px;font-size:13px;font-weight:600;
  color:#5b6779;cursor:pointer;font-family:inherit;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease);
}
.share-ops .btn-mini.pri{
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  color:var(--on-grad);border:0;box-shadow:0 3px 12px rgba(59,130,246,.3);
}
.share-ops .btn-mini:active{transform:scale(.97)}

/* 搜索历史 */
.hist-box{
  position:absolute;left:14px;right:14px;z-index:40;
  margin-top:-6px;padding:6px;border-radius:14px;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 8px 28px rgba(31,41,88,.14);
  max-height:280px;overflow-y:auto;
}
.hist-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 8px 8px;font-size:11px;color:var(--muted);
}
.hist-clear{cursor:pointer;color:var(--brand);font-weight:600}
.hist-item{
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;border-radius:10px;cursor:pointer;font-size:13px;
  color:#2f3846;transition:background .14s var(--ease);
}
@media (hover:hover) and (pointer:fine){ .hist-item:hover{background:rgba(15,23,42,.05)} }
.hist-item .hi-tx{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-item .hi-x{
  color:#b7bfcc;font-size:15px;line-height:1;padding:0 4px;flex-shrink:0;
}

/* ==========================================================================
   开发者主页
   ========================================================================== */
.au-head{
  position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:6px;
  padding:calc(10px + env(safe-area-inset-top)) 12px 10px;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(15,23,42,.07);
}
.au-back{
  width:34px;height:34px;border-radius:50%;border:0;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;
  color:#3f4a5e;cursor:pointer;
}
.au-head strong{flex:1;font-size:16px;font-weight:800;color:#111827}
.au-body{padding:14px 14px calc(26px + env(safe-area-inset-bottom))}
.au-card{
  display:flex;align-items:center;gap:13px;padding:16px;margin-bottom:14px;
  border-radius:var(--r-md);background:var(--glass);
  background-image:var(--noise);
  -webkit-backdrop-filter:blur(var(--blur-2)) saturate(var(--sat));
  backdrop-filter:blur(var(--blur-2)) saturate(var(--sat));
  border:1px solid var(--glass-line);
  box-shadow:var(--sh-2), inset 0 1px 0 var(--glass-hi);
}
.au-av{
  width:58px;height:58px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:3px solid rgba(255,255,255,.94);box-shadow:0 4px 14px rgba(31,41,88,.18);
}
.au-nm{font-size:17px;font-weight:800;line-height:1.25;letter-spacing:.2px}
.au-sub{font-size:12px;color:var(--muted);margin-top:3px}
.au-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:6px}
.au-stats div{
  padding:11px;border-radius:var(--r-xs);text-align:center;
  background:var(--glass-1);border:1px solid var(--glass-line);
}
.au-stats b{
  display:block;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.au-stats span{font-size:11px;color:var(--muted)}

/* 详情页作者名：可点进开发者主页 */
.au-link{
  color:var(--brand);font-weight:700;cursor:pointer;text-decoration:none;
  border-bottom:1px dashed rgba(59,130,246,.45);
  transition:opacity .16s var(--ease);
}
.au-link:active{opacity:.6}

/* ==========================================================================
   主题切换按钮
   ========================================================================== */
.theme-btn{
  position:absolute;right:58px;top:14px;z-index:3;
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(var(--blur-1)) saturate(160%);
  backdrop-filter:blur(var(--blur-1)) saturate(160%);
  color:#3f4a5e;cursor:pointer;
  box-shadow:0 2px 8px rgba(31,41,88,.10), inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .18s var(--ease), background .18s var(--ease);
}
.theme-btn:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){ .theme-btn:hover{background:rgba(255,255,255,.8)} }

/* 深色下正文颜色：index.php 的内联兜底样式里有 body{color:#14161c}，
   同为作者样式表且写在后面，会盖掉 var(--text)。
   用更高特异性的选择器压过去。 */
html[data-theme="dark"] body{color:#e8ecf4}
html[data-theme="dark"] .card,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .sortbar,
html[data-theme="dark"] .notice,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .search{
  background-color:var(--glass-1);
}
html[data-theme="dark"] .cmt,
html[data-theme="dark"] .cmt-item,
html[data-theme="dark"] .rank-row,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .sec,
html[data-theme="dark"] .cmt-input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .cmt-rinput{
  background-color:var(--glass-1);
}
html[data-theme="dark"] .card b,
html[data-theme="dark"] .card .nm,
html[data-theme="dark"] .cmt-body,
html[data-theme="dark"] .nick,
html[data-theme="dark"] .stat b{color:#e8ecf4}
html[data-theme="dark"] .sub,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .t,
html[data-theme="dark"] .sm{color:var(--muted)}
/* 选中态已在上面 .chip.on 里处理（原来这里写成 .chips span.on，同样匹配不到 div） */

/* ==========================================================================
   版本历史
   ========================================================================== */
.ver-item{
  display:flex;align-items:flex-start;gap:11px;
  padding:12px;margin-bottom:9px;border-radius:var(--r-sm);
  background:var(--glass-1);border:1px solid var(--glass-line);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.ver-item.cur{
  border-color:rgba(59,130,246,.45);
  box-shadow:var(--sh-1), inset 0 1px 0 var(--glass-hi);
}
@media (hover:hover) and (pointer:fine){
  .ver-item:hover:not(.cur){transform:translateY(-2px);box-shadow:var(--sh-2)}
}
.ver-dot{
  width:11px;height:11px;border-radius:50%;flex-shrink:0;margin-top:4px;
  background:var(--brand);box-shadow:0 0 0 3px rgba(59,130,246,.20);
}
.ver-item:not(.cur) .ver-dot{background:#c3cbda;box-shadow:none}
.ver-main{flex:1;min-width:0}
.ver-v{font-size:14px;font-weight:700;letter-spacing:.2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ver-tag{
  font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));color:var(--on-grad);
}
.ver-meta{font-size:11.5px;color:var(--muted);margin-top:3px}
.ver-log{
  font-size:12.5px;color:#4d5766;line-height:1.6;margin-top:6px;
  white-space:pre-wrap;word-break:break-word;
}
html[data-theme="dark"] .ver-log{color:#b6c0d2}
.ver-dl{
  flex-shrink:0;padding:7px 12px;border-radius:9px;font-size:12px;font-weight:600;
  border:0;color:var(--on-grad);cursor:pointer;font-family:inherit;
  background:linear-gradient(135deg,var(--grad-a),var(--grad-b));
  box-shadow:0 2px 8px rgba(59,130,246,.28);
  transition:transform .16s var(--ease);
}
.ver-dl:active{transform:scale(.95)}


/* ==========================================================================
   上传面板深色适配。
   上面那些原本写死成深灰的标题与说明文字，在深色背景下等于隐形，
   这里再兜一层，避免以后漏改。
   ========================================================================== */
html[data-theme="dark"] .u-field label{color:#8b96ad}
html[data-theme="dark"] .up-sec-t{color:#e8ecf4}
html[data-theme="dark"] .up-drop-tx span{color:#e8ecf4}
html[data-theme="dark"] .up-drop{border-color:rgba(255,255,255,.22)}
html[data-theme="dark"] .up-drop-ic,
html[data-theme="dark"] .up-pv-ic{background:rgba(255,255,255,.07)}
html[data-theme="dark"] .u-field input,
html[data-theme="dark"] .u-field textarea,
html[data-theme="dark"] .u-field select{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#e8ecf4;
}
html[data-theme="dark"] .u-field input::placeholder,
html[data-theme="dark"] .u-field textarea::placeholder{color:#5f6b81}

/* 「从 APK 读取信息」按钮：次级样式，不抢主按钮视觉 */
.u-scan{
  margin-top:8px;width:100%;min-height:38px;cursor:pointer;
  border:1px dashed rgba(59,130,246,.5);border-radius:var(--r-xs);
  background:rgba(59,130,246,.07);color:var(--brand);
  font:inherit;font-size:12.5px;font-weight:700;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}
.u-scan:hover{background:rgba(59,130,246,.14);border-color:var(--brand)}
.u-scan:active{transform:scale(.99)}
html[data-theme="dark"] .u-scan{
  border-color:rgba(99,102,241,.55);background:rgba(99,102,241,.12);color:#93c5fd;
}




/* ==========================================================================
   上传页性能
   backdrop-filter 在移动端极其昂贵：每一层都要把背后的画面
   复制一份再做高斯模糊，滚动时每帧重算。原来上传页有 6 层，
   中低端手机上滚动明显掉帧。
   现在只保留顶栏和底栏两层（它们是固定元素，不会随滚动重绘），
   表单里的卡片全部改用半透明实色，视觉几乎一样，但没有模糊开销。
   ========================================================================== */
#upSheet .up-preview,
#upSheet .up-sec,
#upSheet .up-prog{
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
#upSheet .up-drop{
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
html[data-theme="dark"] #upSheet .up-preview,
html[data-theme="dark"] #upSheet .up-sec{
  background:rgba(28,36,56,.72);border-color:rgba(255,255,255,.10);
}

/* 截图本地预览缩略图 */
.shot-pv{
  flex-shrink:0;width:76px;height:76px;border-radius:12px;overflow:hidden;
  border:1px solid var(--glass-line);background:var(--glass-1);
}
.shot-pv img{width:100%;height:100%;object-fit:cover;display:block}


/* ==========================================================================
   全站性能
   ========================================================================== */
/* 图片解码不阻塞主线程。
   默认浏览器会在主线程同步解码图片，列表里几十张图一起解码时
   会明显卡住滚动。async 让它挪到后台线程。 */
img{decoding:async}

/* 长列表里的重复元素跳过屏幕外渲染。
   屏幕外的卡片不参与布局、绘制和命中测试，
   只保留占位高度，滚动到附近才真正渲染。 */
.rk-row,.cmt-item{content-visibility:auto;contain-intrinsic-size:auto 64px}

/* 减少动画开销：只对真正需要的属性做过渡。
   用 all 会让浏览器监听每一个属性变化，成本高。 */
.card{transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* 分片进度：显示第几块，避免大文件只给百分比让人以为卡住 */
.up-chunk-tx{
  margin-top:7px;font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
html[data-theme="dark"] .up-chunk-tx{color:rgba(226,232,240,.72)}


/* ==========================================================================
   细腻化补丁（追加在文件末尾，优先级最高）
   —— 只动 transform / opacity / 颜色，不改任何布局属性，
      因此不会影响已有的排版，也不会在滚动时触发重排。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 按压反馈
   实体按钮按下时轻微缩小，松手回弹。
   时长 130ms：再长会显迟钝，再短感觉不到。
   只对 transform 做过渡，布局属性一律不碰。
   -------------------------------------------------------------------------- */
.btn, .chip, .tab, .ic-btn, .lqbar__tab,
.cmt-act, .share-act, .seg > * {
  -webkit-tap-highlight-color: transparent;
  transition: transform .13s var(--ease),
              box-shadow .2s var(--ease),
              background-color .2s var(--ease),
              border-color .2s var(--ease),
              color .2s var(--ease);
}
.btn:active, .chip:active, .tab:active, .ic-btn:active,
.seg > *:active, .cmt-act:active, .share-act:active {
  transform: scale(.96);
}

/* 卡片类：按下时整块轻微下沉，幅度比按钮更小，
   卡片面积大，同样的缩放比例看着会更夸张。 */
.card, .item, .notif-item, .cmt-item, .shot-thumb {
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s var(--ease),
              box-shadow .22s var(--ease),
              border-color .22s var(--ease),
              background-color .22s var(--ease);
}
.card:active, .item:active, .notif-item:active,
.cmt-item:active, .shot-thumb:active {
  transform: scale(.985);
}

/* 桌面端点按设备：悬停时给一点点抬升，
   鼠标用户能感知到"这个可以点"。移动端没有 hover，不会触发。 */
@media (hover: hover) and (pointer: fine) {
  .card:hover, .item:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-2);
  }
  .btn:hover, .chip:hover { box-shadow: var(--sh-2); }
}

/* --------------------------------------------------------------------------
   2. 入场：列表卡片逐条淡入上浮
   只跑一次的 animation，不常驻，不影响后续滚动性能。
   -------------------------------------------------------------------------- */
@keyframes smRise {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.card, .item, .cmt-item {
  animation: smRise .34s var(--ease) both;
}
/* 逐条延迟，形成自然的错落感。
   只排前 12 个 —— 后面的同一批出现，再排下去反而显得拖沓。 */
.card:nth-child(1), .item:nth-child(1)  { animation-delay: .00s; }
.card:nth-child(2), .item:nth-child(2)  { animation-delay: .03s; }
.card:nth-child(3), .item:nth-child(3)  { animation-delay: .06s; }
.card:nth-child(4), .item:nth-child(4)  { animation-delay: .09s; }
.card:nth-child(5), .item:nth-child(5)  { animation-delay: .12s; }
.card:nth-child(6), .item:nth-child(6)  { animation-delay: .15s; }
.card:nth-child(7), .item:nth-child(7)  { animation-delay: .18s; }
.card:nth-child(8), .item:nth-child(8)  { animation-delay: .21s; }
.card:nth-child(9), .item:nth-child(9)  { animation-delay: .24s; }
.card:nth-child(10), .item:nth-child(10){ animation-delay: .26s; }
.card:nth-child(11), .item:nth-child(11){ animation-delay: .28s; }
.card:nth-child(12), .item:nth-child(12){ animation-delay: .30s; }

/* --------------------------------------------------------------------------
   3. 弹层：遮罩与面板分开动，比整体缩放更自然
   -------------------------------------------------------------------------- */
@keyframes smFadeIn { from { opacity: 0; } to { opacity: 1; } }
.lmask.show, .mask.show { animation: smFadeIn .2s var(--ease) both; }

/* --------------------------------------------------------------------------
   4. 图片加载完成后淡入，避免"先白块再跳图"的突兀感
   -------------------------------------------------------------------------- */
img { transition: opacity .28s var(--ease); }
img[data-loaded] { opacity: 1; }

/* --------------------------------------------------------------------------
   5. 防崩兜底：极端内容也不能把布局撑破
   -------------------------------------------------------------------------- */
/* 超长应用名、超长评论、无空格的长串（网址、包名）必须能断行，
   否则会横向顶破卡片，在 360px 窄屏上直接溢出屏幕。 */
.card, .item, .cmt-item, .notif-item, .chip, .row, .meta,
.app-name, .cmt-text, .notif-text, .au-name, .field, td, th {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* 单行显示的地方用省略号，而不是让它换行把高度撑开 */
.nowrap, .ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* 图片一律不超出容器，防止用户上传超大图撑破卡片 */
img, video, canvas, svg {
  max-width: 100%;
}
/* 弹性容器里的子元素默认可收缩 ——
   不加这条，长文本会把 flex 行顶宽，是溢出最常见的来源。 */
.flex > *, .row > *, .meta > *, .head > *, .bar > * {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   6. 焦点可见性：键盘操作时能看清落点，鼠标点击时不显示难看的黑框
   -------------------------------------------------------------------------- */
button:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ring-strong, 0 0 0 3px rgba(59,130,246,.35));
  border-radius: var(--r-xs, 10px);
}

/* --------------------------------------------------------------------------
   7. 尊重系统「减弱动态效果」设置
   开了这个开关的用户（前庭功能敏感、晕动症）不希望看到位移类动画。
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   底部 Tab 栏的深色适配（前台）
   navbar.css 里的面板色、内容色、强调色都是写死的浅色值，
   深色模式下底部栏会保持"白面板 + 深蓝字"，
   跟深色页面割裂，强调色压在深底上对比度只有 1.08，等于看不见。

   这里不改动 navbar.css 本身（它是前后台共用的基线文件），
   而是在 style.css 里用更高特异性的选择器覆盖变量 ——
   只覆盖颜色变量，不动尺寸与结构，浅色表现完全不变。
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .lqbar {
  --panel-tint: rgba(26, 32, 54, .66);
  --indicator-tint: rgba(255, 255, 255, .13);
  --lq-content: #e8ecf4;
  --lq-accent: #93c5fd;
}
html[data-theme="dark"] .lqbar__panel {
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .34);
}
html[data-theme="dark"] .lqbar__icon {
  opacity: .92;
}

/* --------------------------------------------------------------------------
   深色模式下的层次感
   浅色阴影在深色背景上几乎看不见（黑影压黑底），
   卡片会"浮不起来"，整个页面显得平。
   这里换成更深的投影 + 顶部一道极淡的高光，
   让层级在深色下依然分明 —— 这是深色界面显得"细腻"的关键。
   -------------------------------------------------------------------------- */
html[data-theme="dark"] {
  --sh-1: 0 2px 10px rgba(0, 0, 0, .30), 0 8px 24px rgba(0, 0, 0, .22);
  --sh-2: 0 4px 18px rgba(0, 0, 0, .38), 0 16px 40px rgba(0, 0, 0, .30);
  --sh-3: 0 10px 26px rgba(0, 0, 0, .44), 0 26px 60px rgba(0, 0, 0, .38);
  --ring: 0 0 0 3px rgba(96, 165, 250, .22);
  --ring-strong: 0 0 0 4px rgba(96, 165, 250, .30);
}
/* 深色下给玻璃面加一道顶部内高光，模拟边缘受光 */
html[data-theme="dark"] .card,
html[data-theme="dark"] .item,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .search,
html[data-theme="dark"] .sheet,
html[data-theme="dark"] .notif-item {
  box-shadow: var(--sh-1), inset 0 1px 0 rgba(255, 255, 255, .07);
}
/* 深色下描边要更淡，白色描边在深色上是"描边感"太重、显脏 */
html[data-theme="dark"] .card,
html[data-theme="dark"] .item,
html[data-theme="dark"] .chip {
  border-color: rgba(255, 255, 255, .10);
}