/* ============ 同频 · 设计令牌 ============ */
:root{
  --bg:#0F1411;            /* 墨绿黑主背景 */
  /* --- 双主题令牌（20261114d）：浅色主题只需覆盖本节变量 --- */
  --page:#080B09;          /* 页面外层底色 */
  --card-solid:#131A16;    /* 实心卡底 */
  --on-accent:#0B120E;     /* 强调色上的文字 */
  --dis-bg:#243027;        /* 主按钮禁用底 */
  --dis-fg:#5B6B5F;
  --panel:rgba(15,20,17,.96);   /* 评论区浮层 */
  --bar:rgba(15,20,17,.74);     /* 底部导航 */
  --bar-solid:rgba(15,20,17,.9);
  --mint-glow:rgba(207,255,189,.22);
  --w:255,255,255;         /* 提亮/叠加层基色；浅色主题翻转为加深层 */
  --bg-soft:#131A16;
  --card:rgba(var(--w),.06);   /* 毛玻璃卡片 */
  --line:rgba(var(--w),.12);
  --text:#E8EDEA;          /* 主文字 */
  --text-2:#8A958F;        /* 次文字 / 数字 */
  --text-3:#6B7772;
  --green:#5B8A6E;         /* 胶片绿，强调色 */
  --green-soft:rgba(91,138,110,.18);
  --dot:#CFFFBD;           /* 高亮薄荷绿 */
  --mint:#CFFFBD;
  --topic:#B9DFFF;         /* 话题标签 */
  --topic-bg:rgba(185,223,255,.15);
  --danger:#C4625B;
  --r-card:12px;
  --r-btn:8px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sf:env(safe-area-inset-bottom,0px);
  --st:env(safe-area-inset-top,0px);
  --top-h:calc(52px + var(--st));
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--page)}
body.tab-discover{background:#0F1411}
body{
  background:var(--page);color:var(--text);
  font-family:"Inter","SF Pro Text",-apple-system,"PingFang SC","Noto Sans SC",system-ui,sans-serif;
  font-weight:400;line-height:1.45;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand-mark,.num{font-family:"Space Grotesk","Inter","PingFang SC",sans-serif;letter-spacing:-.01em}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{
  font:inherit;color:var(--text);background:rgba(var(--w),.05);
  border:1px solid var(--line);border-radius:var(--r-btn);
  padding:11px 12px;width:100%;outline:none;
}
input:focus,textarea:focus,select:focus{border-color:var(--green)}
::placeholder{color:var(--text-3)}
#app{
  height:100%;max-width:100%;margin:0;position:relative;overflow:hidden;
  background:var(--bg);
}
/* 手机端铺满整屏，不再左右各留 6px 露出 body 底色；桌面/平板预览时才收成 414 手机框 */
@media (min-width:520px){
  #app{max-width:414px;margin:0 auto;box-shadow:0 0 0 1px rgba(var(--w),.05),0 24px 60px rgba(0,0,0,.55)}
}
.screen{position:absolute;inset:0;display:flex;flex-direction:column}
[hidden]{display:none !important}

/* ============ 冷启动遮罩：登录态判定完成前不闪登录页 ============ */
#boot-splash{
  position:fixed;inset:0;z-index:900;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;
  background:var(--bg);transition:opacity .26s var(--ease);
  max-width:414px;margin:0 auto;
}
#boot-splash b{
  font-family:"Space Grotesk","Inter","PingFang SC",sans-serif;
  font-size:26px;letter-spacing:.34em;text-indent:.34em;color:var(--text);font-weight:600;
}
#boot-splash i{width:36px;height:2px;border-radius:2px;background:rgba(var(--w),.12);position:relative;overflow:hidden}
#boot-splash i::after{
  content:'';position:absolute;top:0;left:0;width:42%;height:100%;border-radius:2px;
  background:var(--dot);animation:bsload 1.05s var(--ease) infinite;
}
@keyframes bsload{0%{transform:translateX(-110%)}100%{transform:translateX(340%)}}
#boot-splash.gone{opacity:0;pointer-events:none}
.tiny{color:var(--text-3);font-size:11.5px;margin:8px 0 0}
.sub{color:var(--text-2);font-size:13px}

/* ============ 按钮 ============ */
.btn{
  border-radius:var(--r-btn);padding:10px 16px;background:rgba(var(--w),.07);
  border:1px solid var(--line);transition:transform .18s var(--ease),background .18s var(--ease);
}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--green);border-color:var(--green);color:var(--on-accent);font-weight:600}
.btn.primary:disabled{background:var(--dis-bg);color:var(--dis-fg);border-color:var(--dis-bg)}
.btn.ghost{background:transparent;color:var(--text-2)}
.btn.mini{padding:7px 12px;font-size:13px}
.btn.off{opacity:.5;color:var(--text-2)}
.btn.block{width:100%;padding:13px;margin-top:4px}
.btn.link,.link{background:none;border:0;color:var(--text-2);font-size:13px;padding:0}
.icon-btn{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:var(--text);opacity:.9}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}

/* ============ 登录 ============ */
.auth-wrap{height:100%;display:flex;flex-direction:column;justify-content:center;padding:32px 24px calc(32px + var(--sf))}
.brand{margin-bottom:36px}
.brand-mark{font-size:44px;font-weight:700;letter-spacing:-.03em}
.brand-sub{color:var(--text-2);font-size:13.5px;margin:8px 0 0}
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-size:12px;color:var(--text-3);margin-bottom:7px;letter-spacing:.02em}
.auth-switch{text-align:right;margin:2px 0 18px}
.auth-form{max-width:420px;width:100%}

/* ============ 冷启动 ============ */
.onboard-head{padding:52px 24px 0}
.onboard-head .step{font-size:11px;color:var(--green);letter-spacing:.14em}
.onboard-head h1{font-size:27px;font-weight:600;margin:12px 0 6px}
.card-stack{flex:1;position:relative;margin:20px 20px 0;touch-action:none;overscroll-behavior:contain;contain:layout paint}
.icard{
  position:absolute;inset:0;border-radius:var(--r-card);overflow:hidden;
  background:#1A211D;border:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:flex-end;padding:22px;
  transition:transform .24s var(--ease),opacity .24s var(--ease);
  transform:translateZ(0);backface-visibility:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.icard.dragging{transition:none!important;box-shadow:none}
.icard.flying{pointer-events:none}
.icard:last-child{will-change:transform}
.icard .ic-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;pointer-events:none;background:#222A25}
.icard .ic-mask{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,20,17,.30) 0%,rgba(15,20,17,.06) 34%,rgba(15,20,17,.62) 68%,rgba(15,20,17,.93) 100%)}
.icard .ic-emoji{position:relative;z-index:2;font-size:26px;opacity:.9;margin-bottom:auto;padding-top:22px}
.icard h3{position:relative;z-index:2;font-size:26px;margin:0 0 6px;font-weight:600;letter-spacing:.01em}
.icard p{position:relative;z-index:2;margin:0;color:rgba(var(--w),.72);font-size:13px;line-height:1.5}
.icard .badge{position:absolute;top:16px;right:16px;z-index:3;font-size:11px;padding:4px 9px;border-radius:999px;background:rgba(15,20,17,.55);color:#B7D3BE;backdrop-filter:none}
.icard .ic-hint{position:absolute;top:16px;left:16px;z-index:3;font-size:11px;letter-spacing:.06em;color:rgba(var(--w),.55);
  padding:4px 9px;border-radius:999px;background:rgba(15,20,17,.45)}
.icard .ic-hint b{color:#8FD3A6;font-weight:600}
/* 拖动时的「选入 / 跳过」印章 */
.icard .ic-hint-like,.icard .ic-hint-nope{position:absolute;top:30px;z-index:4;opacity:0;
  font-size:12px;font-weight:600;letter-spacing:.16em;padding:6px 14px;border-radius:999px;
  background:rgba(15,20,17,.55);transition:opacity .12s linear;pointer-events:none}
.icard .ic-hint-like{left:22px;color:#9BE0B4;border:1px solid rgba(143,211,166,.65);transform:rotate(-8deg)}
.icard .ic-hint-nope{right:22px;color:#E8AFAF;border:1px solid rgba(224,160,160,.6);transform:rotate(8deg)}
.icard.fly-left{transform:translateX(-120%) rotate(-6deg);opacity:0}
.icard.fly-right{transform:translateX(120%) rotate(6deg);opacity:0}
.icard.fly-up{transform:translateY(-118%) rotate(-2deg);opacity:0}
.onboard-foot{padding:16px 24px calc(20px + var(--sf));border-top:1px solid var(--line);background:var(--bg)}
.onboard-foot .row{display:flex;gap:12px}
.onboard-foot .row .btn{flex:1}
.picked{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;min-height:26px;align-items:center}
.picked .picked-empty{font-size:12px;color:var(--text-3)}
.picked .chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:5px 6px 5px 11px;border-radius:999px;
  background:var(--green-soft);color:#7FBF95;border:1px solid rgba(91,138,110,.35);max-width:100%}
.picked .chip b{font-weight:500}
.picked .chip .del{width:18px;height:18px;line-height:17px;text-align:center;border-radius:50%;background:rgba(15,20,17,.35);
  color:#9FC9AE;font-size:13px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.picked .chip .del:active{background:rgba(var(--w),.16);color:#fff}
.creator-list{flex:1;overflow-y:auto;padding:16px 20px 8px;-webkit-overflow-scrolling:touch}
.creator{
  display:flex;gap:14px;align-items:center;padding:14px;border:1px solid var(--line);
  border-radius:var(--r-card);margin-bottom:12px;background:var(--card);
  transition:border-color .2s var(--ease)
}
.creator.on{border-color:var(--green)}
.creator .av{width:52px;height:52px;border-radius:50%;object-fit:cover;background:rgba(var(--w),.12);flex:none}
.creator .meta{flex:1;min-width:0}
.creator .meta b{display:block;font-weight:500}
.creator .meta small{color:var(--text-3);font-size:12px}
.creator .why{color:var(--text-2);font-size:11.5px;margin-top:3px}

/* ============ 主框架 ============ */
#screen-main{padding-top:0}
/* 顶部导航：完全透明，直接叠在内容之上（无底色、无模糊、无分隔线）；
   为保证任何画面下的可读性，仅给文字与图标加投影 */
.topbar{
  position:absolute;top:0;left:0;right:0;z-index:30;
  display:flex;align-items:center;gap:14px;
  height:var(--top-h);padding:var(--st) 14px 0 16px;
  background:transparent;
  border-bottom:0;
  pointer-events:none;
}
.topbar > *{pointer-events:auto}
/* 中间 tab 区自身的空白不要吃点击，保证透明顶栏下的视频区域仍可点按 */
.topbar .tabs{pointer-events:none}
.topbar .tabs .tab{pointer-events:auto}
/* 透明叠层没有底色可依托，靠提亮文字 + 重投影保证在明亮画面上依然可读 */
.topbar .brand-txt,
.topbar .tab,
.topbar .icon-btn{text-shadow:0 1px 3px rgba(0,0,0,.82),0 0 12px rgba(0,0,0,.5)}
.topbar .tab{color:var(--text-2)}
.topbar .tab.on{color:#fff}
.topbar .icon-btn svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.75)) drop-shadow(0 0 6px rgba(0,0,0,.45))}
.topbar .brand-txt{
  font-size:16.5px;font-weight:700;letter-spacing:.02em;color:var(--text);
  font-family:"Space Grotesk","Inter","PingFang SC",sans-serif;flex:none;
}
.topbar .brand-txt i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--mint);margin-left:5px;vertical-align:middle}
.topbar .tabs{display:flex;gap:20px;flex:1;justify-content:center}
.tab{
  font-size:15px;color:var(--text-2);padding:8px 0 9px;position:relative;
  transition:color .2s var(--ease);
}
.tab.on{color:var(--text);font-weight:600}
.tab.on::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;
  width:22px;height:2px;border-radius:2px;background:var(--mint);
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--mint);position:absolute;top:4px;right:-8px}
.topbar #btn-messages{flex:none;width:32px;height:32px;color:var(--text-2)}
.topbar #btn-messages svg{width:21px;height:21px}
.topbar #btn-search{flex:none;width:32px;height:32px;color:var(--text);opacity:.92}
.topbar #btn-search svg{width:22px;height:22px}
.topbar #btn-search:active{opacity:.6}
.feed{flex:1;position:relative;overflow:hidden}

/* ============ 作品流返回条（作者主页/个人中心点进来的专属作品流） ============ */
.works-bar{
  position:absolute;left:12px;top:calc(var(--top-h) + var(--st) - 6px);z-index:22;
  display:flex;align-items:center;gap:6px;max-width:70%;
  height:34px;padding:0 14px 0 4px;border-radius:999px;
  background:rgba(15,20,17,.66);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#fff;font-size:13px;line-height:1;box-shadow:0 4px 16px rgba(0,0,0,.28);
}
.works-bar[hidden]{display:none}
.works-bar strong{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.works-bar .icon-btn{width:26px;height:26px;color:#fff;font-size:19px;opacity:1}

/* ============ 发现流 ============ */
.swiper{
  position:absolute;inset:0;overflow-y:scroll;scroll-snap-type:y mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
}
.swiper::-webkit-scrollbar{display:none}
.vcard{
  height:100%;scroll-snap-align:start;scroll-snap-stop:always;
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#1A221E 0%,#141A16 55%,#0F1411 100%);
}
.vcard .media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:linear-gradient(180deg,#1A221E,#0F1411);z-index:0;-webkit-transform:translateZ(0);transform:translateZ(0)}
/* 全屏铺满（2026-11-14 改定）：非 9:16 作品也按 cover 撑满整屏，
   不再按原比例居中留黑边、不做悬浮圆角卡片 —— 要对齐抖音「视频顶到屏幕最上沿」
   注意：cover 会裁掉超出部分，横屏作品只保留中间画面 */
.vcard.fit-contain{background:#0F1411}
.vcard.fit-contain::before{display:none}
.vcard.fit-contain .bg-media{display:none}
.vcard.fit-contain .media{
  inset:0;top:0;transform:none;width:100%;height:100%;
  max-height:none;aspect-ratio:auto;object-fit:cover;
  border-radius:0;box-shadow:none;background:transparent;z-index:1;
}
/* iOS 视频合成层可能盖住同层控件，统一抬高覆盖层 */
.vcard video.media{-webkit-backface-visibility:hidden;backface-visibility:hidden}
/* 亮度调优：画面 +13% 亮度、+4% 对比（在 20261112o 基础上再提一档）；不改变色相与饱和 */
.vcard video.media{filter:brightness(1.13) contrast(1.04)}
.vcard img.media{filter:brightness(1.10) contrast(1.02)}
.vcard.paused .media{opacity:1}
.vcard .shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* 顶部不再压暗（配合透明顶栏，文字靠 text-shadow 保证可读），仅保留底部文字区渐变。
     亮度调优：蒙层整体减淡一档（.72→.52 / 90% 处不再纯黑），画面不再发灰发闷，
     底部文字仍靠渐变 + text-shadow 保证可读 */
  background:linear-gradient(180deg,
    rgba(15,20,17,.04) 0%,
    rgba(15,20,17,0) 16%,
    rgba(15,20,17,0) 48%,
    rgba(15,20,17,.40) 66%,
    rgba(15,20,17,.86) 92%);
}
.vcard .left{position:absolute;left:16px;right:86px;bottom:calc(92px + var(--sf));z-index:3}
.vcard .author{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.vcard .author img{width:32px;height:32px;border-radius:50%;object-fit:cover;background:rgba(var(--w),.08);border:1px solid rgba(var(--w),.14)}
.vcard .author b{font-weight:600;font-size:14px;color:var(--text)}
.vcard .author time{color:var(--text-2);font-size:11px}
.vcard .desc{
  font-size:14px;line-height:1.52;margin:0 0 9px;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.topic-tag{
  display:inline-block;font-size:12px;padding:2px 8px;border-radius:4px;
  background:var(--topic-bg);color:var(--topic);margin:0 6px 6px 0;
}
.vcard .same{font-size:12px;color:var(--green);margin:0 0 8px;display:flex;align-items:center;gap:6px}
.vcard .same i{width:5px;height:5px;border-radius:50%;background:var(--mint);flex:none}
.vcard .stats{display:flex;gap:14px;color:var(--text-2);font-size:11.5px}

/* 右侧互动栏：灰色图标，数字 #8A958F */
.rail{
  position:absolute;right:10px;bottom:calc(126px + var(--sf));z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:15px;
}
/* 互动图标：白色实底圆形按钮（不再是透明底浮在画面上），图标压深色保证白底上清晰 */
.rail button{display:flex;flex-direction:column;align-items:center;gap:6px;color:#0F1411;font-size:11px;background:none}
.rail button .ic{
  width:47px;height:47px;border-radius:50%;background:#fff;
  display:grid;place-items:center;
  box-shadow:0 3px 10px rgba(0,0,0,.32),0 0 0 .5px rgba(0,0,0,.06);
  transition:transform .16s var(--ease),background .2s var(--ease);
}
.rail button:active .ic{transform:scale(.92);background:#F1F4F2}
.rail svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:#0F1411}
.rail button span{color:#fff;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.62)}
.rail .liked{color:var(--mint)}
.rail .liked .ic svg{stroke:var(--mint);fill:var(--mint)}
.rail .liked span{color:var(--mint)}
@keyframes pop{0%{transform:scale(1)}42%{transform:scale(1.24)}70%{transform:scale(.95)}100%{transform:scale(1)}}
.rail .pop{animation:pop .38s var(--ease)}
@keyframes pop{0%{transform:scale(1)}42%{transform:scale(1.24)}70%{transform:scale(.95)}100%{transform:scale(1)}}

/* 右下关注按钮：薄荷绿填充 + 黑字，已关注转灰边框 */
.follow-btn{
  position:absolute;right:12px;bottom:calc(74px + var(--sf));z-index:4;
  height:33px;padding:0 15px;border-radius:8px;
  background:var(--mint);color:var(--on-accent);font-size:12.5px;font-weight:600;
  border:1px solid var(--mint);
  transition:all .2s var(--ease);
}
.follow-btn:active{transform:scale(.96)}
.follow-btn.on{
  background:rgba(var(--w),.05);color:var(--text-2);
  border-color:rgba(var(--w),.22);font-weight:400;
}

/* 引导页沿用的轻量关注按钮 */
.follow-pill{
  display:inline-flex;align-items:center;gap:6px;border-radius:8px;
  border:1px solid rgba(var(--w),.24);padding:6px 13px;font-size:12.5px;
  color:var(--text);background:rgba(var(--w),.06);backdrop-filter:blur(6px);
  transition:all .22s var(--ease)
}
.follow-pill.on{border-color:rgba(var(--w),.18);color:var(--text-2);background:rgba(var(--w),.04)}
.follow-pill .gdot{width:5px;height:5px;border-radius:50%;background:var(--mint)}

/* 双击心形：薄荷绿 */
.heart-burst{position:absolute;left:50%;top:50%;width:100px;height:100px;transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none;z-index:5}
.heart-burst svg{width:100%;height:100%;fill:var(--mint);filter:drop-shadow(0 0 22px rgba(207,255,189,.55))}
.heart-burst.go{animation:burst .7s var(--ease) forwards}
@keyframes burst{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}30%{transform:translate(-50%,-50%) scale(1.12);opacity:1}100%{transform:translate(-50%,-50%) scale(1.28);opacity:0}}

/* ============ 评论区（半屏，右侧滑入） ============ */
.comments{
  position:absolute;right:0;top:0;bottom:0;width:min(88%,420px);z-index:20;
  background:var(--panel);backdrop-filter:blur(18px);
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .3s var(--ease);
  padding-bottom:var(--sf)
}
.comments.open{transform:translateX(0)}
.comments-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);font-size:13.5px}
.comments-list{flex:1;overflow-y:auto;padding:6px 16px}
.cmt{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid rgba(var(--w),.07)}
.cmt img{width:32px;height:32px;border-radius:50%;object-fit:cover;background:rgba(var(--w),.12);flex:none}
.cmt .cmain{flex:1;min-width:0}
.cmt .cname{font-size:12.5px;color:var(--text-2);display:flex;gap:6px;align-items:center}
.cmt .cname b{color:var(--text);font-weight:500}
.badge-creator{font-size:10px;padding:1px 6px;border-radius:4px;background:var(--green-soft);color:#5B8A6E}
.badge-top{font-size:10px;padding:1px 6px;border-radius:4px;background:rgba(185,223,255,.16);color:var(--topic)}
.cmt .ctext{font-size:13.5px;margin:4px 0 6px;word-break:break-word}
.cmt .cact{display:flex;gap:14px;color:var(--text-3);font-size:11.5px}
.cmt .like.on{color:var(--green)}
.comment-form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.comment-form input{flex:1}

/* ============ 同好圈 / 关注流 ============ */
.pane{height:100%;display:flex;flex-direction:column}
.chip-row{display:flex;gap:9px;overflow-x:auto;padding:12px 16px;scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
.chip{flex:none;font-size:13px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);color:var(--text-2);transition:all .2s var(--ease)}
.chip.on{border-color:var(--green);color:#5B8A6E;background:var(--green-soft)}
.thin-list{flex:1;overflow-y:auto;padding:0 16px 90px;-webkit-overflow-scrolling:touch}
.group-label{font-size:11px;letter-spacing:.1em;color:var(--text-3);margin:20px 0 10px}
.item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid rgba(var(--w),.07)}
.item .thumb{width:64px;height:84px;border-radius:8px;background:rgba(var(--w),.08);object-fit:cover;flex:none}
.item .body{flex:1;min-width:0}
.item .why{font-size:11px;color:var(--text-3);margin-bottom:4px;display:flex;gap:6px;align-items:center}
.item .why i{width:4px;height:4px;border-radius:50%;background:var(--green)}
.item h4{font-size:13.5px;font-weight:400;margin:0 0 6px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item .line2{font-size:11.5px;color:var(--text-3);display:flex;gap:10px;flex-wrap:wrap}
.repost-box{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin:6px 0;display:flex;gap:10px;align-items:center}
.repost-box img{width:38px;height:50px;border-radius:6px;object-fit:cover;background:rgba(var(--w),.08)}
.repost-box .rp{font-size:12px;color:var(--text-2)}
.repost-box .rp b{color:var(--text);font-weight:500;display:block;margin-bottom:2px}
.empty{color:var(--text-3);font-size:12.5px;text-align:center;padding:48px 0}

/* ============ FAB / 面板 ============ */
.fab{position:absolute;right:16px;bottom:calc(20px + var(--sf));width:48px;height:48px;border-radius:50%;background:var(--green);color:var(--on-accent);font-size:24px;display:grid;place-items:center;box-shadow:0 8px 26px rgba(0,0,0,.5);z-index:15;transition:transform .2s var(--ease)}
.fab:active{transform:scale(.94)}
.sheet{position:absolute;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;transform:translateY(100%);transition:transform .32s var(--ease)}
.sheet.open{transform:translateY(0)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;border-bottom:1px solid var(--line)}
.sheet-head strong{font-size:14.5px;font-weight:500}
.sheet-body{flex:1;overflow-y:auto;padding:18px 20px calc(28px + var(--sf))}

/* ============ 搜索 ============ */
.search-head{justify-content:flex-start;gap:10px;padding:calc(8px + var(--st)) 14px 10px}
.search-box{
  flex:1;display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;
  border-radius:999px;background:rgba(var(--w),.07);border:1px solid var(--line);
}
.search-box svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--text-2);stroke-width:2;stroke-linecap:round}
.search-box input{
  flex:1;width:auto;height:100%;padding:0;border:0;background:transparent;font-size:14px;
}
.search-box input:focus{border:0}
.search-box input::-webkit-search-cancel-button{display:none}
.search-clear{width:22px;height:22px;flex:none;color:var(--text-3);font-size:12px}
.search-cancel{flex:none;font-size:14px;color:var(--text-2);padding:0 2px}
.search-body{flex:1;overflow-y:auto;padding:6px 16px calc(24px + var(--sf));-webkit-overflow-scrolling:touch}
.search-sec{margin-top:16px}
.search-sec h5{margin:0 0 6px;font-size:11.5px;letter-spacing:.08em;font-weight:400;color:var(--text-3)}
.s-user{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(var(--w),.07)}
.s-user img{width:44px;height:44px;flex:none;border-radius:50%;object-fit:cover;background:rgba(var(--w),.1)}
.s-user .m{flex:1;min-width:0}
.s-user .m b{display:flex;align-items:center;font-size:14px;font-weight:500}
.s-user .m small{display:block;margin-top:3px;font-size:11.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-topic{display:flex;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid rgba(var(--w),.07);font-size:13.5px;width:100%;text-align:left}
.s-topic .hash{color:var(--topic)}
.s-topic small{margin-left:auto;font-size:11.5px;color:var(--text-3)}
.search-hint{padding:52px 8px;text-align:center;font-size:12.5px;line-height:1.9;color:var(--text-3)}
.type-row{display:flex;gap:9px;margin-bottom:16px}
.sheet-body .field{margin-bottom:13px}

/* ============ 主页 / 消息 ============ */
.profile-body{flex:1;overflow-y:auto;padding-bottom:calc(30px + var(--sf))}
.pf-top{padding:14px 16px 0}
.pf-row{display:flex;align-items:flex-start;gap:14px}
.pf-avatar{width:74px;height:74px;flex:none;border-radius:50%;object-fit:cover;background:rgba(var(--w),.12)}
.pf-main{flex:1;min-width:0}
.pf-name{font-size:18px;font-weight:600;margin:0 0 3px;display:flex;align-items:center;line-height:1.3}
.pf-uid{font-size:11.5px;color:var(--text-3);letter-spacing:.2px;margin-bottom:7px;font-family:"Space Grotesk",sans-serif}
.pf-bio{color:var(--text-2);font-size:12.5px;line-height:1.55;white-space:pre-wrap}
.pf-top .v-line{margin-top:6px}
.pf-top .same{font-size:12px;color:var(--green);margin:10px 0 0;display:flex;align-items:center;gap:6px}
.pf-top .same i{width:5px;height:5px;border-radius:50%;background:var(--mint);flex:none}
.pf-acts{display:flex;gap:7px;flex:none;align-self:center}
.pf-acts .btn{flex:none;height:30px;padding:0 13px;font-size:12.5px;border-radius:15px;line-height:1}
.pf-nums{display:flex;gap:0;margin:14px 0 0}
.pf-nums div{font-size:11px;color:var(--text-3);padding-right:26px;text-align:left;line-height:1.35}
.pf-nums .pf-num{cursor:pointer;-webkit-tap-highlight-color:transparent}
.pf-nums .pf-num:active{opacity:.6}
.pf-nums b{display:block;font-size:17px;color:var(--text);font-family:"Space Grotesk",sans-serif;margin-bottom:2px}
.profile-body>.seg{padding:4px 16px 10px;border-bottom:1px solid var(--line);margin-top:12px}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:0;margin-top:12px}
.pf-grid .cell{aspect-ratio:3/4;background:var(--card-solid);border-radius:2px;overflow:hidden;position:relative}
.pf-grid .cell img{width:100%;height:100%;object-fit:cover}
.pf-grid .cell span{position:absolute;left:5px;bottom:4px;font-size:10.5px;color:#D8D8D5;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.pf-grid .cell .cell-del{position:absolute;top:5px;right:5px;width:26px;height:22px;border:0;border-radius:11px;background:rgba(0,0,0,.52);color:#F2F2EF;font-size:13px;line-height:22px;letter-spacing:1px;padding:0;text-align:center;backdrop-filter:blur(4px);z-index:3}
.pf-grid .cell .cell-del:active{transform:scale(.92)}
.msg-body{padding:8px 0 calc(20px + var(--sf))}
.msg-row{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid rgba(var(--w),.07)}
.msg-row .ico{width:40px;height:40px;border-radius:10px;background:rgba(var(--w),.06);display:grid;place-items:center;color:var(--green);font-size:16px}
.msg-row .t{flex:1}
.msg-row .t b{display:block;font-weight:400;font-size:14px}
.msg-row .t small{color:var(--text-3);font-size:11.5px}
.msg-row .cnt{font-size:11px;color:var(--on-accent);background:var(--green);border-radius:999px;padding:1px 7px}

/* ============ 底部导航 ============ */
.tabbar{
  position:absolute;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:flex-end;justify-content:space-around;
  padding:7px 4px calc(7px + var(--sf));
  background:var(--bar);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(var(--w),.12);
}
.tb{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:4px 0;color:var(--text-3);font-size:10.5px;position:relative;
  transition:color .2s var(--ease);
}
.tb svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s var(--ease)}
.tb.on{color:var(--mint);font-weight:500}
.tb.on svg{stroke:var(--mint)}
.tb:active svg{transform:scale(.92)}
.tb .dot{top:3px;right:calc(50% - 17px)}
.tb-pub{flex:none;width:64px;display:grid;place-items:center;padding-bottom:0;margin-top:-10px}
.tb-pub .plus{
  width:52px;height:52px;border-radius:16px;background:var(--mint);color:var(--on-accent);
  font-size:30px;font-weight:500;line-height:1;display:grid;place-items:center;
  border:3px solid var(--bg);
  box-shadow:0 8px 22px var(--mint-glow);transition:transform .18s var(--ease);
}
.tb-pub:active .plus{transform:scale(.93)}

/* sheet 与底部导航共存：内容区留出导航高度 */
.sheet{padding-bottom:calc(56px + var(--sf))}

/* ============ 分段 tab（消息 / 个人中心） ============ */
.seg{display:flex;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;flex:none}
.seg::-webkit-scrollbar{display:none}

/* ============ 消息列表 ============ */
.nt-row{display:flex;gap:11px;padding:14px 20px;border-bottom:1px solid rgba(var(--w),.07);align-items:flex-start}
.nt-row .ico{width:34px;height:34px;border-radius:9px;background:rgba(var(--w),.06);display:grid;place-items:center;color:var(--green);font-size:14px;flex:none}
.nt-row .nu{flex:1;min-width:0}
.nt-row .nu b{display:block;font-size:13.5px;font-weight:500;margin-bottom:3px}
.nt-row .nu p{margin:0;font-size:12.5px;color:var(--text-2);word-break:break-word}
.nt-row .nu time{display:block;font-size:11px;color:var(--text-3);margin-top:5px}
.nt-row.unread{background:rgba(91,138,110,.05)}
.conv-row{display:flex;gap:12px;padding:13px 20px;border-bottom:1px solid rgba(var(--w),.07);align-items:center}
.conv-row img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:rgba(var(--w),.12);flex:none}
.conv-row .cv{flex:1;min-width:0}
.conv-row .cv b{font-size:14px;font-weight:500;display:block}
.conv-row .cv p{margin:3px 0 0;font-size:12.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-row time{font-size:11px;color:var(--text-3);flex:none}
.conv-row .cnt{font-size:10.5px;color:var(--on-accent);background:var(--green);border-radius:999px;padding:1px 6px;flex:none}

/* ============ 私信对话 ============ */
.chat-wrap{display:flex;flex-direction:column;height:100%}
.chat-list{flex:1;overflow-y:auto;padding:16px 18px}
.bubble{max-width:74%;padding:9px 13px;border-radius:12px;font-size:13.5px;line-height:1.5;margin-bottom:10px;word-break:break-word}
.bubble.mine{margin-left:auto;background:var(--green);color:var(--on-accent);border-bottom-right-radius:4px}
.bubble.other{background:rgba(var(--w),.08);border-bottom-left-radius:4px}
.chat-form{display:flex;gap:8px;padding:10px 14px 12px;border-top:1px solid var(--line);flex:none}
.chat-form input{flex:1}
.chat-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2);padding:12px 20px 0}
.chat-hint{margin:0;padding:12px 18px;font-size:12.5px;line-height:1.55;color:var(--text-2);background:rgba(var(--w),.04);border-top:1px solid var(--line)}

/* ============ 个人中心 ============ */
.me-cell{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid rgba(var(--w),.07);font-size:14px}
.me-cell .ico{width:32px;height:32px;border-radius:8px;background:rgba(var(--w),.06);display:grid;place-items:center;color:var(--green);font-size:13px;flex:none}
.me-cell .mc{flex:1}
.me-cell .mc small{display:block;color:var(--text-3);font-size:11.5px;margin-top:2px}
.me-cell .arrow{color:var(--text-3);font-size:15px}
.set-form{padding:18px 20px}
.set-form .field{margin-bottom:14px}
.col-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:14px 16px}
.col-card{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--bg-soft)}
.col-card img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--card-solid);display:block}
.col-card .cb{padding:9px 11px}
.col-card .cb b{font-size:13px;font-weight:500;display:block}
.col-card .cb small{font-size:11.5px;color:var(--text-3)}
.empty-fav{color:var(--text-3);font-size:12.5px;text-align:center;padding:60px 20px;line-height:1.7}

/* ============ 长按菜单 / toast ============ */
.ctx-menu{position:absolute;left:50%;bottom:calc(30px + var(--sf));transform:translateX(-50%) translateY(12px);z-index:50;background:rgba(24,24,24,.98);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;width:min(84%,320px);opacity:0;transition:all .2s var(--ease)}
.ctx-menu.open{opacity:1;transform:translateX(-50%) translateY(0)}
.ctx-menu button{display:block;width:100%;padding:14px;font-size:14px;text-align:center;border-bottom:1px solid rgba(var(--w),.08)}
.ctx-menu button.cancel{color:var(--text-3);border-bottom:0}
.toast{position:fixed;left:50%;bottom:14%;transform:translateX(-50%);background:rgba(30,30,30,.96);border:1px solid var(--line);color:var(--text);font-size:13px;padding:10px 16px;border-radius:999px;z-index:99;max-width:80%}
.skeleton{background:linear-gradient(90deg,var(--card-solid),rgba(var(--w),.07),var(--card-solid));background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}


/* ===== 2026-11-10 交互修复补丁 ===== */
/* 3) 评论区遮罩，避免面板被视频层覆盖或整页跳转 */
/* 层级统一由下方第 3/9 项补丁定义（19/20），此处不再重复 */

/* 11) 评论项头像可点 */
.cmt img,.cmt .cname b{cursor:pointer}

/* 10) 播放量（仅本人可见） */
.vp-stat{display:inline-flex;align-items:center;gap:4px}
.work-play{position:absolute;left:8px;bottom:8px;padding:2px 7px;border-radius:10px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;line-height:1.5}

/* 4) 转发/长按分享面板 */
.share-mask{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:70}
.share-mask[hidden]{display:none!important}
.share-sheet{position:fixed;left:0;right:0;bottom:0;z-index:71;background:rgba(18,24,20,.98);border-radius:16px 16px 0 0;padding:14px 14px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(0,0,0,.5);animation:sheet-up .22s ease}
.share-sheet[hidden]{display:none!important}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.share-title{margin:0 0 12px;font-size:13px;color:var(--text-2);text-align:center}
.share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.share-grid button{background:rgba(var(--w),.08);color:var(--text);border:0;border-radius:12px;padding:12px 4px;font-size:12px;line-height:1.35}
.share-grid button:active{background:rgba(var(--w),.14)}
.share-grid button.on{color:var(--on-accent);background:var(--green)}
.share-cancel{width:100%;margin-top:12px;background:transparent;color:var(--text-2);border:1px solid rgba(var(--w),.16);border-radius:12px;padding:12px;font-size:14px}
.share-dm{margin-top:12px;border-top:1px solid rgba(var(--w),.10);padding-top:10px;max-height:44vh;overflow:auto}
.share-dm[hidden]{display:none!important}
.share-dm-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--text-2);margin-bottom:8px}
.share-dm-list .dm-item{display:flex;align-items:center;gap:10px;padding:9px 2px;color:var(--text);font-size:14px}
.share-dm-list .dm-item img{width:34px;height:34px;border-radius:50%;object-fit:cover;background:rgba(var(--w),.12)}

/* 8) 本地上传进度 */
.up-bar{position:relative;height:8px;border-radius:6px;background:rgba(var(--w),.12);overflow:hidden;margin-top:8px}
.up-bar[hidden]{display:none!important}
.up-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--green);transition:width .18s}
.up-bar span{position:absolute;right:6px;top:-18px;font-size:11px;color:var(--text-2)}
.up-file{margin-top:8px;font-size:12px;color:var(--text-2);word-break:break-all}
.dy-row{display:flex;gap:8px;align-items:center}
.dy-row input{flex:1;min-width:0}
.dy-row .btn{flex:none;padding:0 16px;height:40px;white-space:nowrap}
.up-file[hidden]{display:none!important}
#publish-pick{margin-top:6px}

/* 7) 头像上传预览 */
.avatar-upload{display:flex;align-items:center;gap:12px}
.avatar-upload img{width:56px;height:56px;border-radius:50%;object-fit:cover;background:rgba(var(--w),.12)}

.vs-video[data-pre]{opacity:0}

/* 第 3/9 项：评论区遮罩与高亮定位 */
.comments-mask{position:absolute;inset:0;background:rgba(0,0,0,.42);z-index:19}
.comments-mask[hidden]{display:none}
.comments{z-index:20}
.cmt-hl{background:rgba(91,138,110,.14);border-radius:8px}

/* 第 9 项：通知条目缩略图 */
.nt-row .nt-cover{width:46px;height:46px;border-radius:8px;object-fit:cover;background:rgba(var(--w),.06);flex:none}

/* 第 5 项：底部导航始终在浮层之上，保证任何时候都能点 */
.tabbar{z-index:80;transition:transform .28s var(--ease),opacity .2s linear,background .24s var(--ease),border-color .24s var(--ease)}

/* 第 10 项：作品格播放量（仅本人可见） */
.pf-grid .cell .work-play{position:absolute;left:5px;top:4px;right:auto;bottom:auto;font-size:10.5px;color:#D8D8D5;text-shadow:0 1px 3px rgba(0,0,0,.7);background:none;padding:0}

/* 评论区打开时当前卡片浮层退场，避免被面板半遮挡 */
.vcard.cmt-open .rail,.vcard.cmt-open .left{opacity:0;pointer-events:none;transition:opacity .18s linear}

/* ===== 2026-11-11 新 UI 规格落地（414 容器 / 毛玻璃 / 薄荷绿）===== */
/* 毛玻璃卡片统一体质 */
.creator,.col-card,.repost-box{
  background:var(--card);
  border:1px solid rgba(var(--w),.12);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
/* 兴趣卡为全屏大图层：禁用 backdrop-filter，避免拖拽时逐帧重算背景模糊（卡顿主因） */
/* 顶部固定栏之下，列表类页面整体让位 */
.chip-row{padding-top:calc(12px + var(--top-h))}
.thin-list{padding-top:2px}
/* 评论区面板顶部让位固定栏 */
.comments{padding-top:var(--top-h);top:0}
.comments-head{padding-top:12px}
/* 视频卡：底部信息整体抬到导航之上，右侧栏不压文案 */
.vcard .left{max-width:calc(100% - 92px)}
/* 标签行与文案间距 */
.vcard .desc{margin-top:2px}
/* 输入与浮层统一底色 */
.sheet-body input,.sheet-body textarea,.comment-form input,.chat-form input{border-color:rgba(var(--w),.12)}
/* 发布/设置等次级按钮 */
.btn{background:rgba(var(--w),.06);border-color:rgba(var(--w),.12)}
.btn.primary{background:var(--mint);border-color:var(--mint);color:var(--on-accent)}
.btn.ghost{color:var(--text-2)}
/* 分段 chip 选中态跟随薄荷绿 */
.chip.on{border-color:rgba(207,255,189,.45);color:var(--mint);background:rgba(207,255,189,.10)}
.seg .chip{padding:6px 13px}
/* 列表条目分隔线柔和 */
.nt-row,.conv-row,.me-cell,.msg-row,.item,.cmt{border-bottom-color:rgba(var(--w),.07)}
/* 未读通知底色 */
.nt-row.unread{background:rgba(207,255,189,.04)}
/* 消息未读角标 */
.msg-row .cnt,.conv-row .cnt{color:var(--on-accent);background:var(--mint)}
/* 发布 FAB */
.fab{background:var(--mint);color:var(--on-accent);box-shadow:0 10px 26px rgba(207,255,189,.18)}
/* toast / 长按菜单 */
.ctx-menu{background:rgba(18,24,20,.98);border-color:rgba(var(--w),.12)}
.toast{background:rgba(18,24,20,.96);border-color:rgba(var(--w),.12)}

/* ============ 声音：卡片静音开关 + 首次开声提示 ============ */
.vcard .sound-btn{
  position:absolute; right:12px; top:calc(var(--st,0px) + 66px); z-index:6;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(0,0,0,.32); color:var(--text);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(var(--w),.12); cursor:pointer;
  transition:opacity .18s ease, transform .18s ease;
}
.vcard .sound-btn:active{transform:scale(.92)}
.vcard .sound-btn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.vcard .sound-btn svg path:first-child{fill:currentColor; stroke:none}
.vcard .sound-btn.muted{color:var(--text-2)}
.vcard .sound-btn.muted::after{
  content:''; position:absolute; width:20px; height:1.5px; border-radius:2px;
  background:var(--text-2); transform:rotate(-45deg);
}
/* 未开声时的轻提示 */
#sound-tip{
  position:fixed; left:50%; top:calc(var(--st,0px) + 112px); transform:translate(-50%,-6px);
  z-index:80; display:none; align-items:center; gap:7px;
  padding:7px 14px; border-radius:999px; pointer-events:none;
  background:rgba(10,16,12,.62); border:1px solid rgba(207,255,189,.28);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  color:var(--text); font:500 12px/1 -apple-system,"PingFang SC","Noto Sans SC",sans-serif;
  opacity:0; transition:opacity .22s ease, transform .22s ease;
}
#sound-tip.show{display:flex; opacity:1; transform:translate(-50%,0)}
#sound-tip i{width:6px; height:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 8px rgba(207,255,189,.85)}

/* ============ 单击暂停：中央播放指示 ============ */
.vcard.paused::after{
  content:''; position:absolute; left:50%; top:50%; z-index:5;
  width:0; height:0; margin:-18px 0 0 -10px; pointer-events:none;
  border-style:solid; border-width:18px 0 18px 30px;
  border-color:transparent transparent transparent rgba(232,237,234,.86);
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.5));
  animation:pauseIn .18s ease-out;
}
@keyframes pauseIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
/* 暂停态不再对 video 施加 filter：视频上叠加 filter 会额外触发合成层重建，
   暂停/恢复瞬间容易掉帧；改由已有的 .paused .media{opacity:.94} 表达 */
.vcard.paused .media{filter:none}

/* 视频播放期间收起常驻毛玻璃：WebView 内对全屏视频做 backdrop-filter 每帧都要重采样，
   是中低端安卓掉帧的主因；顶部栏本身已是透明叠层，这里只需让底部导航退化为高不透明纯色 */
body.media-playing .tabbar{
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* ---------------- 蓝V / 黄V 认证 ---------------- */
.vtag{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;
  font-size:10px;font-weight:700;line-height:1;margin-left:5px;vertical-align:middle;letter-spacing:0}
.vtag.blue{background:#4C8DFF;color:#06121F;box-shadow:0 0 0 1px rgba(76,141,255,.35)}
.vtag.yellow{background:#F2C14E;color:#241B02;box-shadow:0 0 0 1px rgba(242,193,78,.35)}
.pf-name{display:flex;align-items:center}
.pf-name .vtag{width:17px;height:17px;font-size:10.5px;margin-left:7px;margin-top:2px}
.v-line{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text-3);margin-top:6px}
.v-line .vtag{margin-left:0}
.verify-body{flex:1;overflow-y:auto;padding-bottom:calc(30px + var(--sf))}
.v-cur{margin:18px 20px 0;padding:16px;border-radius:14px;border:1px solid var(--line);background:rgba(var(--w),.04)}
.v-cur.blue{border-color:rgba(76,141,255,.38);background:rgba(76,141,255,.08)}
.v-cur.yellow{border-color:rgba(242,193,78,.38);background:rgba(242,193,78,.08)}
.v-cur-h{display:flex;align-items:center;font-size:15px;font-weight:600}
.v-cur p{margin:9px 0 5px;font-size:13px;color:var(--text-2)}
.v-cur small{font-size:11.5px;color:var(--text-3)}
.v-note{margin:16px 20px 0;padding:14px 16px;border-radius:12px;background:rgba(var(--w),.05)}
.v-note.warn{background:rgba(196,98,91,.12)}
.v-note b{display:block;font-size:13.5px;color:var(--text);margin-bottom:7px;font-weight:500}
.v-note p{font-size:12.5px;color:var(--text-3);line-height:1.65}
.v-note small{font-size:11px;color:var(--text-3)}
.v-tip{padding:14px 20px 0;font-size:12px;color:var(--text-3);line-height:1.65}
.v-pick{display:flex;gap:10px;padding:18px 20px 6px}
.v-opt{flex:1;text-align:left;padding:12px;border-radius:12px;border:1px solid var(--line);
  background:transparent;color:var(--text-2);transition:border-color .2s var(--ease),background .2s var(--ease)}
.v-opt b{display:block;font-size:13px;color:var(--text);font-weight:500;margin:7px 0 5px}
.v-opt small{display:block;font-size:11px;color:var(--text-3);line-height:1.45}
.v-opt .vtag{margin-left:0}
.v-opt.on{border-color:var(--green);background:var(--green-soft)}
.v-upload{display:flex;align-items:center;gap:12px}
.v-upload img{width:90px;height:68px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}

/* 临时观感 A/B：仅在 URL 带 ?fx= 时生效，默认零影响 */
body.fx-bright video.media{filter:brightness(1.15)}
body.fx-contrast video.media{filter:contrast(1.08)}
body.fx-combo video.media{filter:brightness(1.12) contrast(1.06)}

/* 作者头像可点：给一点按压反馈 */
.vcard .author{cursor:pointer}
.vcard .author:active{opacity:.72}
.vcard .author img{border-radius:50%}

/* 关注 / 粉丝列表 */
.rel-list{padding:4px 0}
.rel{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line);cursor:pointer}
.rel:last-child{border-bottom:0}
.rel:active{background:rgba(var(--w),.03)}
.rel .av{width:46px;height:46px;border-radius:50%;object-fit:cover;background:rgba(var(--w),.12);flex:none}
.rel .meta{flex:1;min-width:0}
.rel .meta b{display:block;font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rel .meta small{color:var(--text-3);font-size:11.5px}
.rel .follow-btn{flex:none}
.rel-self{flex:none;font-size:12px;color:var(--text-3);padding:0 6px}

/* ============ 20261112x 同好圈（414×896 规格） ============ */
/* 该页顶栏转为毛玻璃：标题「同好圈」左、右上「…」，其余顶栏元素本页隐藏 */
body.tab-circle .topbar{
  background:rgba(12,17,14,.52);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
  border-bottom:1px solid rgba(var(--w),.09);
  box-shadow:inset 0 1px 0 rgba(var(--w),.05),0 6px 24px rgba(0,0,0,.28);
}
body.tab-circle .topbar .brand-txt,
body.tab-circle .topbar .tabs,
body.tab-circle .topbar #btn-search{display:none}
.cc-title{margin:0;font-size:17px;font-weight:600;color:var(--text);letter-spacing:.01em;flex:1}
.cc-more{margin-left:auto;width:32px;height:32px;border-radius:50%;color:var(--text);
  background:rgba(var(--w),.06);border:1px solid rgba(var(--w),.1);
  display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;letter-spacing:.06em}
.cc-pane{position:absolute;inset:0;overflow:hidden}
/* 横向圆形分类入口：悬在顶栏下方，自身带毛玻璃 + 底部渐隐，卡片从它下方穿出才能看到 blur */
.cc-cats{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;gap:14px;overflow-x:auto;
  padding:calc(var(--top-h) + 10px) 16px 14px;scrollbar-width:none;
  background:linear-gradient(180deg,rgba(10,14,12,.55) 0%,rgba(10,14,12,.42) 62%,rgba(10,14,12,0) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 76%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 76%,rgba(0,0,0,0) 100%)}
.cc-cats::-webkit-scrollbar{display:none}
.cc-cat{flex:none;width:64px;display:flex;flex-direction:column;align-items:center;gap:7px}
.cc-cat .ring{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--text);background:rgba(var(--w),.06);border:1px solid rgba(var(--w),.1);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  transition:all .2s var(--ease)}
.cc-cat .ring svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;display:block;opacity:.92}
.cc-cat.on .ring svg{opacity:1}
.cc-cat b{font-size:11.5px;font-weight:400;color:var(--text-2);white-space:nowrap}
.cc-cat.on .ring{border-color:rgba(185,223,255,.72);color:#EAF6FF;
  background:rgba(185,223,255,.20);box-shadow:0 0 0 2px rgba(185,223,255,.18),0 8px 22px rgba(185,223,255,.16)}
.cc-cat.on b{color:var(--text)}
/* 动态流：铺满整页并上探到顶栏之后，滚动时内容穿过毛玻璃层；顶部留出分类行高度 */
.cc-feed{position:absolute;inset:0;overflow-y:auto;padding:calc(var(--cc-cats-h,158px) + 6px) 16px 96px;
  -webkit-overflow-scrolling:touch}
.cc-sec{margin:16px 2px 10px;font-size:11px;letter-spacing:.1em;color:var(--text-3)}
.cc-card{background:rgba(var(--w),.06);border:1px solid rgba(var(--w),.1);border-radius:16px;
  padding:13px 14px;margin-bottom:12px;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:background .18s var(--ease)}
.cc-card:active{background:rgba(var(--w),.1)}
.cc-top{display:flex;align-items:flex-start;gap:10px}
.cc-top img{width:34px;height:34px;border-radius:50%;object-fit:cover;background:rgba(var(--w),.08);flex:none}
/* 头像：首字渐变底 + 真图覆盖，外链失败退回首字，不出现灰块 */
.cc-av{position:relative;width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;
  color:#08120E;background:linear-gradient(135deg,rgba(185,223,255,.78),rgba(96,140,120,.42))}
.cc-av b{font-weight:600}
.cc-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cc-who{flex:1;min-width:0}
.cc-main{font-size:14px;color:var(--text);margin:0;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-main em{font-style:normal;color:var(--topic)}
.cc-sub{font-size:11.5px;color:var(--text-2);margin:2px 0 0}
.cc-time{font-size:11px;color:var(--text-3);flex:none;padding-top:2px}
.cc-text{font-size:13.5px;color:var(--text);margin:9px 0 0;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-quote{margin:9px 0 0;padding:9px 11px;border-radius:10px;background:rgba(var(--w),.04);
  border-left:2px solid rgba(185,223,255,.5);font-size:12.5px;color:var(--text-2);line-height:1.5}
.cc-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.cc-tag{font-size:11px;color:var(--topic);background:var(--topic-bg);padding:3px 9px;border-radius:999px}
.cc-media{margin-top:10px;border-radius:12px;overflow:hidden;background:rgba(var(--w),.05);aspect-ratio:16/9;position:relative}
/* 封面兜底：分类渐变 + 图标垫底，外链图加载失败自动露出，不再是灰块 */
.cc-media .cc-cover-fb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  background:linear-gradient(135deg,rgba(185,223,255,.20),rgba(28,42,36,.62));color:rgba(234,246,255,.66)}
.cc-media .cc-cover-fb svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cc-media .cc-cover-fb i{font-style:normal;font-size:11px;letter-spacing:.14em;opacity:.85}
.cc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
/* 「…」下拉菜单 */
.cc-menu{position:absolute;top:calc(var(--top-h) - 2px);right:14px;z-index:40;min-width:152px;
  background:rgba(20,26,22,.88);border:1px solid rgba(var(--w),.12);border-radius:12px;padding:6px;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 12px 30px rgba(0,0,0,.45)}
.cc-menu button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:8px;font-size:13px;color:var(--text)}
.cc-menu button:active{background:rgba(var(--w),.08)}
/* 不支持毛玻璃时降级为实色，避免文字糊在背景上 */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .cc-card,.cc-cat .ring,body.tab-circle .topbar,.cc-menu,.cc-cats{background:rgba(26,32,28,.94)}
}

/* ============ 消息页：标题 + 入口列表 ============ */
.msg-head{position:relative;display:grid;grid-template-columns:40px 1fr 40px;align-items:center;padding:calc(12px + var(--st)) 12px 12px;border-bottom:0}
.msg-head strong{font-size:17px;font-weight:500;letter-spacing:.01em;text-align:center;color:var(--text)}
.msg-head .icon-btn{justify-self:start}
.msg-head .msg-more{justify-self:end;opacity:.8;line-height:1}
.msg-head .msg-more svg{width:20px;height:20px;fill:currentColor;opacity:.9}
.msg-body{flex:1;min-height:0;overflow-y:auto;padding:0 0 calc(20px + var(--sf));background:var(--bg);-webkit-overflow-scrolling:touch}
.msg-body::-webkit-scrollbar{display:none}
.msg-index{padding:6px 0 0}
.msg-entry{display:flex;align-items:center;gap:14px;padding:16px 20px;min-height:72px;border-bottom:1px solid rgba(var(--w),.08);transition:background .18s var(--ease)}
.msg-entry:active{background:rgba(var(--w),.04)}
.msg-entry .ring{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;color:var(--mint);border:1px solid rgba(207,255,189,.42);background:rgba(207,255,189,.05)}
.msg-entry .ring svg{width:22px;height:22px}
.msg-entry .label{flex:1;min-width:0;font-size:15.5px;color:var(--text);letter-spacing:.01em}
.msg-entry .cnt{flex:none;font-size:11px;line-height:1;color:var(--on-accent);background:var(--mint);border-radius:999px;padding:3px 7px}
.msg-more-menu{position:absolute;right:10px;top:calc(46px + var(--st));z-index:60;min-width:150px;padding:6px;border-radius:12px;background:#161D19;border:1px solid rgba(var(--w),.1);box-shadow:0 14px 34px rgba(0,0,0,.55)}
.msg-more-menu button{display:block;width:100%;text-align:left;padding:11px 12px;border-radius:8px;font-size:13.5px;color:var(--text)}
.msg-more-menu button:active{background:rgba(var(--w),.06)}

/* ============ 配乐（BGM）：卡片唱片条 + 曲库列表 ============ */
.vcard .bgm-bar{
  position:absolute; right:56px; top:calc(var(--st,0px) + 66px); z-index:6;
  display:flex; align-items:center; gap:7px; max-width:56%;
  padding:6px 12px 6px 6px; border-radius:999px;
  background:rgba(0,0,0,.34); border:1px solid rgba(var(--w),.12);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:var(--text); font-size:12px; line-height:1;
  pointer-events:none; overflow:hidden;
}
.vcard .bgm-bar .bgm-disc{
  width:20px; height:20px; flex:0 0 20px; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--w),.92) 0 17%, rgba(24,30,26,.96) 18% 46%, rgba(10,14,12,.98) 47% 100%);
  box-shadow:inset 0 0 0 1px rgba(var(--w),.14);
  animation:bgmSpin 5.6s linear infinite; animation-play-state:paused;
}
.vcard:not(.paused) .bgm-bar .bgm-disc{animation-play-state:running}
.vcard .bgm-bar .bgm-name{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.92;
}
@keyframes bgmSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .vcard .bgm-bar .bgm-disc{animation:none} }

.bgm-list{display:flex; flex-direction:column; gap:8px; padding:4px 2px 24px}
.bgm-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; text-align:left; padding:12px 14px; border-radius:14px;
  background:rgba(var(--w),.05); border:1px solid rgba(var(--w),.09);
  color:var(--text); cursor:pointer;
}
.bgm-item:active{transform:scale(.995); background:rgba(207,255,189,.08)}
.bgm-item .bi-main{display:flex; flex-direction:column; gap:3px; min-width:0}
.bgm-item .bi-main b{font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bgm-item .bi-main em{font-style:normal; font-size:12px; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bgm-item .bi-side{flex:none; font-size:12px; color:var(--text-2)}

/* 曲库入口引导：作品无原声时轻呼吸，提示还可以选配乐 */
#publish-bgm-pick.pulse { animation: bgmPulse 1.6s ease-in-out 3; }
@keyframes bgmPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 120, 0); }
  50% { box-shadow: 0 0 0 4px rgba(255, 90, 120, .35); }
}

/* ============================================================
   20261113s · 曲库 2.0 / 自绘弹窗 / 兴趣编辑
   ============================================================ */

/* ---------- 曲库：顶栏 ---------- */
#bgm-sheet{padding-bottom:0;z-index:100}
/* 弹层打开时底部导航让位，避免遮挡试听条与剪辑操作区 */
body.bgm-open .tabbar{transform:translateY(120%);opacity:0;pointer-events:none}
body.bgm-open #bgm-sheet{padding-bottom:0}
.bgm-head .bgm-hint{font-size:10px;letter-spacing:.18em;color:var(--text-3);font-weight:500}
.bgm-tools{flex:none;padding:12px 16px 0;background:var(--bg)}
.bgm-search{display:flex;align-items:center;gap:9px;height:40px;padding:0 12px;border-radius:12px;
  background:rgba(var(--w),.05);border:1px solid rgba(var(--w),.1);transition:border-color .2s var(--ease),background .2s var(--ease)}
.bgm-search:focus-within{border-color:var(--green);background:rgba(91,138,110,.09)}
.bgm-search svg{width:15px;height:15px;flex:none;stroke:var(--text-3);fill:none;stroke-width:1.8;stroke-linecap:round}
.bgm-search input{flex:1;min-width:0;height:100%;border:0;background:none;padding:0;font-size:13.5px;line-height:1}
.bgm-search input::-webkit-search-cancel-button{display:none}
.bgm-q-clear{flex:none;width:20px;height:20px;border-radius:50%;background:rgba(var(--w),.12);
  color:var(--text-2);font-size:10px;line-height:20px;text-align:center}
.bgm-ranks{display:flex;gap:22px;padding:15px 2px 0;overflow-x:auto;scrollbar-width:none}
.bgm-ranks::-webkit-scrollbar{display:none}
.bgm-rank{position:relative;flex:none;padding:0 0 10px;font-size:14px;color:var(--text-3);letter-spacing:.02em;transition:color .2s var(--ease)}
.bgm-rank.on{color:var(--text);font-weight:600}
.bgm-rank.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--mint)}

/* ---------- 曲库：列表 ---------- */
.bgm-body{padding:8px 10px calc(92px + var(--sf))}
#bgm-list{display:block;padding:0}
.bgm-none{padding:52px 16px;text-align:center;color:var(--text-3);font-size:13px;line-height:2}
.bgm-row{display:flex;align-items:center;gap:11px;padding:9px 6px;border-radius:12px;transition:background .18s var(--ease)}
.bgm-row:active{background:rgba(var(--w),.05)}
.bgm-row.on{background:rgba(91,138,110,.13)}
.br-no{flex:none;width:18px;text-align:center;font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.bgm-row.top1 .br-no{color:var(--mint);font-weight:700;font-size:12.5px}
.bgm-row.top2 .br-no,.bgm-row.top3 .br-no{color:var(--green);font-weight:600;font-size:12px}
.br-cover{position:relative;flex:none;width:44px;height:44px;border-radius:9px;overflow:hidden;padding:0;
  background:linear-gradient(140deg,#26332C 0%,#141B17 100%);display:block}
.br-cover img{width:100%;height:100%;object-fit:cover;display:block}
.br-cover .br-play{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(6,10,8,.44);color:#EAF2EC;font-size:11px;letter-spacing:0}
.bgm-row.on .br-cover .br-play{background:rgba(6,10,8,.3);color:var(--mint)}
.br-main{flex:1;min-width:0}
.br-main b{display:block;font-size:14px;font-weight:600;letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br-main small{display:flex;align-items:center;gap:7px;margin-top:4px;font-size:11.5px;color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-tag{flex:none;font-size:9.5px;letter-spacing:.04em;padding:1.5px 5px;border-radius:4px;
  border:1px solid rgba(207,255,189,.28);color:rgba(207,255,189,.82)}
.br-use{flex:none;font-size:12px;padding:7px 13px;border-radius:999px;
  border:1px solid rgba(var(--w),.14);color:var(--text-2);transition:all .18s var(--ease)}
.bgm-row.on .br-use{border-color:var(--green);color:var(--mint);background:rgba(91,138,110,.18);font-weight:600}

/* ---------- 曲库：底部试听条 ---------- */
.bgm-player{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:center;gap:11px;
  padding:11px 14px calc(11px + var(--sf));background:rgba(17,23,20,.96);border-top:1px solid var(--line);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.bp-disc{position:relative;flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 50%,rgba(var(--w),.92) 0 15%,#1C2621 16% 45%,#0A0F0C 46% 100%);
  box-shadow:inset 0 0 0 1px rgba(var(--w),.12)}
.bp-disc i{font-style:normal;font-size:9px;color:var(--on-accent);background:var(--mint);border-radius:50%;
  width:15px;height:15px;line-height:15px;text-align:center}
.bp-disc.spin{animation:bgmSpin 5s linear infinite}
.bp-meta{flex:1;min-width:0}
.bp-meta b{display:block;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-meta small{display:block;margin-top:2px;font-size:10.5px;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-bar{position:relative;height:2px;margin-top:7px;border-radius:2px;background:rgba(var(--w),.12);overflow:hidden}
.bp-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--mint);border-radius:2px}
.bp-act{flex:none;font-size:12px;padding:8px 12px;border-radius:999px;border:1px solid rgba(var(--w),.14);color:var(--text-2)}
.bp-act.primary{border-color:var(--green);background:var(--green);color:var(--on-accent);font-weight:600}

/* ---------- 剪辑片段 ---------- */
.clip-view{position:absolute;inset:0;z-index:120;display:flex;flex-direction:column;background:var(--bg);
  transform:translateY(100%);transition:transform .3s var(--ease)}
.clip-view.open{transform:translateY(0)}
.clip-head{display:flex;align-items:center;justify-content:space-between;
  padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;border-bottom:1px solid var(--line)}
.clip-head strong{font-size:14.5px;font-weight:500}
.clip-head-r{font-size:11px;color:var(--text-3);letter-spacing:.04em}
.clip-body{flex:1;overflow-y:auto;padding:22px 20px 10px}
.clip-name{margin:0 0 18px;font-size:16px;font-weight:600;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clip-wave-wrap{position:relative;height:96px;border-radius:12px;background:rgba(var(--w),.04);
  border:1px solid rgba(var(--w),.08);overflow:hidden}
.clip-wave{position:absolute;inset:0;display:flex;align-items:center;gap:2px;padding:0 3px}
.clip-wave i{flex:1;min-width:1px;border-radius:1px;background:rgba(232,237,234,.22)}
.clip-sel{position:absolute;top:0;bottom:0;left:0;width:15%;
  background:linear-gradient(180deg,rgba(207,255,189,.24),rgba(91,138,110,.3));
  border-left:1.5px solid var(--mint);border-right:1.5px solid var(--mint);
  box-shadow:0 0 22px rgba(207,255,189,.18) inset;transition:left .06s linear,width .06s linear}
.clip-srow{display:flex;align-items:center;gap:10px;margin-top:6px}
.clip-srow>span{flex:none;width:26px;font-size:11px;color:var(--text-3);letter-spacing:.04em}
.clip-srow .clip-slider{flex:1;margin:0}
.clip-wave i.off{opacity:.28}
.clip-wave i.on{background:var(--mint)}
.clip-slider{-webkit-appearance:none;appearance:none;width:100%;height:34px;margin:10px 0 0;background:none;padding:0}
.clip-slider::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:rgba(var(--w),.14)}
.clip-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8.5px;border-radius:50%;
  background:var(--mint);border:3px solid #0F1411;box-shadow:0 0 0 1px rgba(207,255,189,.45)}
.clip-slider::-moz-range-track{height:3px;border-radius:2px;background:rgba(var(--w),.14)}
.clip-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--mint);border:3px solid #0F1411}
.clip-read{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--text-3);
  font-variant-numeric:tabular-nums}
.clip-read b{font-size:12.5px;color:var(--mint);font-weight:600}
.clip-presets{display:flex;gap:9px;margin-top:18px}
.clip-presets button{flex:1;padding:9px 0;border-radius:9px;font-size:12.5px;
  border:1px solid rgba(var(--w),.12);color:var(--text-2);transition:all .18s var(--ease)}
.clip-presets button.on{border-color:var(--green);background:var(--green-soft);color:var(--mint);font-weight:600}
.clip-tip{margin:18px 0 0;font-size:11.5px;line-height:1.9;color:var(--text-3)}
.clip-ops{display:flex;gap:10px;padding:12px 20px calc(16px + var(--sf));border-top:1px solid var(--line)}
.clip-ops .btn{flex:1;margin:0}

/* ---------- 自绘弹窗（替代 confirm / prompt） ---------- */
.tp-mask{position:fixed;inset:0;z-index:960;background:rgba(4,7,5,.66);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .22s var(--ease)}
.tp-mask.show{opacity:1}
.tp-modal{position:fixed;z-index:961;left:50%;top:50%;width:min(322px,84vw);
  transform:translate(-50%,-47%) scale(.97);opacity:0;
  transition:transform .24s var(--ease),opacity .24s var(--ease);
  background:var(--bg-soft);border:1px solid rgba(var(--w),.1);border-radius:18px;
  padding:22px 20px 14px;box-shadow:0 26px 64px rgba(0,0,0,.62)}
.tp-modal.show{transform:translate(-50%,-50%) scale(1);opacity:1}
.tp-modal h3{margin:0 0 9px;font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.tp-modal p{margin:0;font-size:12.5px;line-height:1.8;color:var(--text-2)}
.tp-field{display:block;margin-top:16px}
.tp-modal .tp-input{width:100%;padding:12px 13px;border-radius:10px;font-size:14px}
.tp-err{display:block;margin-top:7px;font-size:11.5px;color:var(--danger)}
.tp-actions{display:flex;gap:10px;margin-top:20px}
.tp-actions button{flex:1;padding:12px 0;border-radius:11px;font-size:14px;
  border:1px solid rgba(var(--w),.14);color:var(--text-2)}
.tp-actions button:active{transform:scale(.98)}
.tp-actions .tp-ok{background:var(--green);border-color:var(--green);color:var(--on-accent);font-weight:600}
.tp-actions .tp-ok.danger{background:var(--danger);border-color:var(--danger);color:#FFF5F3}
.tp-actions .tp-ok:disabled{opacity:.5}

/* ---------- 兴趣编辑 ---------- */
.ie-count{font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
.ie-lead{margin:0 0 4px;font-size:12px;line-height:1.9;color:var(--text-3)}
.interest-edit{display:flex;flex-wrap:wrap;gap:10px;padding:16px 0 24px}
.ie-chip{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;padding:9px 16px;border-radius:999px;
  border:1px solid rgba(var(--w),.12);color:var(--text-2);background:rgba(var(--w),.03);
  transition:all .18s var(--ease)}
.ie-chip i{font-style:normal;font-size:12px;opacity:.85}
.ie-chip.on{border-color:var(--green);background:var(--green-soft);color:var(--mint);font-weight:600}
.ie-loading{padding:34px 0;text-align:center;color:var(--text-3);font-size:12.5px}

/* 卡片上的「剪辑」小标 */
.bgm-bar .bgm-cut{font-style:normal;font-size:9px;letter-spacing:.06em;padding:1px 4px;margin-right:5px;
  border-radius:3px;background:rgba(207,255,189,.9);color:var(--on-accent)}

/* 兴趣分组：一级 + 子兴趣 */
.ie-group{margin:0 0 16px}
.ie-group.plain{margin-bottom:10px}
.ie-grp-title{display:block;font-size:11.5px;letter-spacing:.06em;color:var(--text-3);margin:0 0 8px 2px}
.ie-chips{display:flex;flex-wrap:wrap;gap:8px}
.ie-chip.lv2{font-size:12.5px;padding:6px 11px;opacity:.88}
.ie-chip.lv1{font-weight:500}

/* ==========================================================
   浅色主题（可选，非默认）：仅覆盖令牌，并给「媒体沉浸区」还原深底亮字
   ========================================================== */
:root[data-theme="light"]{
  --bg:#F6F7F4;
  --bg-soft:#FFFFFF;
  --card:rgba(17,26,21,.05);
  --line:rgba(17,26,21,.13);
  --text:#151C18;
  --text-2:#68746D;
  --text-3:#98A29C;
  --green:#2F6B4F;
  --green-soft:rgba(47,107,79,.12);
  --dot:#2F7D57;
  --mint:#2F7D57;
  --topic:#22627F;
  --topic-bg:rgba(34,98,127,.10);
  --danger:#B0453C;
  --page:#ECEEEA;
  --card-solid:#FFFFFF;
  --on-accent:#FFFFFF;
  --dis-bg:#E3E6E1;
  --dis-fg:#9CA69F;
  --panel:rgba(255,255,255,.97);
  --bar:rgba(252,252,250,.86);
  --bar-solid:rgba(252,252,250,.96);
  --mint-glow:rgba(47,125,87,.18);
  --w:17,26,21;
  color-scheme:light;
}
/* 媒体沉浸区：发现流卡片、图片卡、顶栏永远深底亮字，不受浅色主题影响 */
:root[data-theme="light"] .vcard,
:root[data-theme="light"] .icard,
:root[data-theme="light"] .topbar{
  --w:255,255,255;
  --text:#FFFFFF;
  --text-2:rgba(255,255,255,.78);
  --text-3:rgba(255,255,255,.56);
  --line:rgba(255,255,255,.18);
  --mint:#CFFFBD;
  --dot:#CFFFBD;
  --green:#CFFFBD;
}
/* 浅色主题下顶栏靠深色投影+白色文字压在画面上；同好圈页顶栏有浅色毛玻璃底，改回深字 */
:root[data-theme="light"] body.tab-circle .topbar{
  background:rgba(246,247,244,.9);
  --text:#151C18;
  --text-2:#68837A;
  --mint:#2F7D57;
  text-shadow:none;
}
:root[data-theme="light"] body.tab-circle .topbar .tab.on{color:#151C18}
:root[data-theme="light"] body.tab-circle .topbar .icon-btn svg{filter:none}
:root[data-theme="light"] .cc-cats{
  background:linear-gradient(180deg,rgba(246,247,244,.94) 0%,rgba(246,247,244,.74) 62%,rgba(246,247,244,0) 100%);
}
:root[data-theme="light"] .cc-menu{background:rgba(255,255,255,.97);box-shadow:0 12px 30px rgba(20,30,24,.14)}
:root[data-theme="light"] .cc-menu button{color:var(--text)}
:root[data-theme="light"] .cc-cat.on .ring{
  border-color:rgba(34,98,127,.5);color:#1B5C7A;
  background:rgba(34,98,127,.12);box-shadow:0 0 0 2px rgba(34,98,127,.10),0 8px 22px rgba(34,98,127,.10);
}
:root[data-theme="light"] .cc-av{color:#FFFFFF;background:linear-gradient(135deg,rgba(34,98,127,.72),rgba(47,107,79,.55))}
:root[data-theme="light"] .cc-media .cc-cover-fb{color:rgba(21,28,24,.5);background:linear-gradient(135deg,rgba(34,98,127,.10),rgba(227,233,227,.9))}
/* 浮层投影与描边按浅色背景重算，避免黑投影发闷 */
:root[data-theme="light"] #app{box-shadow:0 0 0 1px rgba(17,26,21,.06),0 24px 60px rgba(20,30,24,.12)}
:root[data-theme="light"] .sheet,
:root[data-theme="light"] .msg-body{background:var(--bg)}
:root[data-theme="light"] .toast{background:rgba(21,28,24,.9);color:#fff}
:root[data-theme="light"] .vcard.fit-contain{background:#0F1411}
/* 浅色下作品网格角标要压在封面图上，保持亮字 */
:root[data-theme="light"] .pf-grid .cell span,
:root[data-theme="light"] .pf-grid .cell .work-play{color:#F3F5F3}

/* ==========================================================
   20261114e · 一、底部导航按页面区分明暗
   发现流（含关注流）是沉浸式视频页，导航贴深底才不割裂画面；
   同好圈/消息/个人中心是白底页面，导航跟着变白，与页面连成一片。
   ========================================================== */
:root[data-theme="light"] body.tab-discover .tabbar{
  background:rgba(13,18,15,.5);
  border-top-color:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  --w:255,255,255;
  --bg:#0D120F;
  --text:#E8EDEA;
  --text-2:rgba(232,237,234,.72);
  --text-3:rgba(232,237,234,.56);
  --mint:#CFFFBD;
  --green:#CFFFBD;
  --on-accent:#0B120E;
}
:root[data-theme="light"] body.tab-discover .tabbar .tb.on{font-weight:600}
/* 深色导航里发布键描边跟着深底走，避免出现一圈白边 */
:root[data-theme="light"] body.tab-discover .tb-pub .plus{border-color:#0D120F}
/* 浅色页面上的白导航：加一层极轻投影，和内容区分开 */
:root[data-theme="light"] body:not(.tab-discover) .tabbar{box-shadow:0 -8px 24px rgba(20,30,24,.05)}

/* ==========================================================
   二、头像改为可视化更换（不再把图片地址明文摆在表单里）
   ========================================================== */
.avatar-edit{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;
  border:1px solid rgba(var(--w),.1);background:rgba(var(--w),.04);cursor:pointer;
  transition:background .18s var(--ease),transform .18s var(--ease)}
.avatar-edit:active{transform:scale(.99);background:rgba(var(--w),.08)}
.avatar-edit .ae-ring{position:relative;width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none;
  background:rgba(var(--w),.1);box-shadow:0 0 0 1px rgba(var(--w),.12)}
.avatar-edit .ae-ring img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-edit .ae-ring::after{content:'换';position:absolute;left:0;right:0;bottom:0;height:19px;
  background:rgba(0,0,0,.5);color:#FFF;font-size:10.5px;line-height:19px;text-align:center;letter-spacing:.04em}
.avatar-edit .ae-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.avatar-edit .ae-txt b{font-size:13.5px;font-weight:500;color:var(--text)}
.avatar-edit .ae-txt small{font-size:11px;color:var(--text-3);line-height:1.5}
.avatar-edit .ae-btn{flex:none;font-size:12px;color:var(--green);padding:6px 12px;border-radius:999px;
  background:var(--green-soft);white-space:nowrap}