/* ============================================================
   视界 —— 设计系统
   方向: 影院黑金。近黑底 + 极淡的红/金双色辉光 + 细颗粒噪点,
   面板走半透明玻璃质感(1px 亮边), 不用扁平灰盒子。
   ============================================================ */

:root{
  --bg:#08090d;
  --bg-elev:#0e1017;
  /* 面板是半透明的白, 叠在辉光背景上才有玻璃感; 纯色会把背景压死 */
  --surface:rgba(255,255,255,.038);
  --surface-hi:rgba(255,255,255,.072);
  /* 后台模板里内联写死了 var(--surface2), 必须保留, 否则后台页面会花 */
  --surface2:#171a23;

  --line:rgba(255,255,255,.08);
  --line-hi:rgba(255,255,255,.18);

  --text:#eef0f5;
  --muted:#8a92a3;
  --dim:#59606f;

  --accent:#ff2e4d;           /* 电光红 */
  --accent-hi:#ff5a72;
  --accent-soft:rgba(255,46,77,.14);
  --gold:#e9b949;             /* 金: 只给"最热""排名"这类荣誉性标记 */

  --radius:14px;
  --radius-sm:9px;
  --radius-pill:999px;

  /* 悬停辉光是"高级感"的主要来源, 统一在这里调 */
  --glow:0 10px 40px -8px rgba(255,46,77,.45);
  --shadow:0 18px 50px -20px rgba(0,0,0,.9);

  --ease:cubic-bezier(.2,.7,.3,1);

  /* 不引 Google Fonts: 国内直连要卡好几秒, 字体没到位时页面会跳。
     个性靠字重/字距/排版做, 不靠外链字体。 */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","HarmonyOS Sans SC",
         "Source Han Sans SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
}

*{box-sizing:border-box}

/* 告诉浏览器: 本站是暗色的, 原生控件请按暗色画。
   浏览器自己画的那些东西(下拉展开后的列表、滚动条、文件选择框)CSS 是够不到的 ——
   不声明这一句, 它们会按系统的浅色皮肤画成一片白, 在这套近黑的底上非常刺眼。 */
:root{color-scheme:dark}

/* 浏览器给 [hidden] 的 display:none 优先级极低, 任何一条 .foo{display:flex}
   都能把它压掉 —— 于是 el.hidden = true 变成一句空话, 元素照样显示。
   这个坑已经踩过两次(拖拽区的"移除"点了没反应、分页器藏不掉), 在这里一次断根。 */
[hidden]{display:none!important}

/* 手机上禁掉【双击缩放】—— 手指点快了页面会突然放大, 而且放大后不会自己还原,
   得手动捏回去。这个站的布局在 390px 宽的屏上零溢出, 本来就不需要缩放, 那个放大
   纯属误触。顺带还去掉了移动端浏览器等"是不是双击"的 300ms 延迟 —— 按钮会跟手很多。

   双指缩放【保留】: 视力不好的人还得靠它。真要连双指也禁, 得写 user-scalable=no,
   而 iOS Safari 从 iOS 10 起就故意无视这一条(苹果为无障碍留的后门), 治不了苹果。 */
html{touch-action:manipulation}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* 环境光: 固定在视口上, 滚动时不动 —— 像影院里打在幕布上的光。
   近黑的底色没有这层会很"死"。 */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(70ch 55ch at 8% -10%, rgba(255,46,77,.14), transparent 60%),
    radial-gradient(60ch 50ch at 96% 4%,  rgba(233,185,73,.07), transparent 60%),
    radial-gradient(90ch 70ch at 50% 110%,rgba(255,46,77,.06), transparent 60%);
}
/* 颗粒: 大面积渐变会有明显色带(banding), 叠一层噪点就没了, 顺带添点胶片感 */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image: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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:inherit;text-decoration:none}

/* ---------- 顶栏 ---------- */
/* 三栏: 品牌靠左 / 搜索居中 / 导航贴右。两侧 1fr 等宽, 搜索才真的在视觉中线上 */
.topbar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:14px 28px;position:sticky;top:0;z-index:20;
  background:rgba(8,9,13,.72);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.brand{
  justify-self:start;display:flex;align-items:center;gap:9px;
  font-size:19px;font-weight:800;letter-spacing:-.02em;
  color:var(--text);transition:opacity .2s var(--ease);
}
.brand .mark{
  display:grid;place-items:center;width:28px;height:28px;border-radius:8px;
  background:linear-gradient(140deg,var(--accent),#c81337);
  color:#fff;font-size:11px;box-shadow:var(--glow);
}
.brand:hover{opacity:.8}

.search{display:flex;width:min(560px,100%);justify-self:center}
.search input{
  flex:1;padding:10px 16px;font-size:14px;font-family:inherit;
  border:1px solid var(--line);border-right:none;
  border-radius:var(--radius-pill) 0 0 var(--radius-pill);
  background:var(--surface);color:var(--text);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.search input::placeholder{color:var(--dim)}
.search input:focus{outline:none;background:var(--surface-hi);border-color:var(--line-hi)}
.search button{
  padding:10px 20px;border:none;cursor:pointer;font-size:14px;font-weight:600;font-family:inherit;
  border-radius:0 var(--radius-pill) var(--radius-pill) 0;
  background:linear-gradient(140deg,var(--accent),#d81a3e);color:#fff;
  transition:filter .2s var(--ease),box-shadow .2s var(--ease);
}
.search button:hover{filter:brightness(1.1);box-shadow:var(--glow)}

.nav{display:flex;gap:16px;align-items:center;justify-self:end}
.nav a,.nav button{
  color:var(--muted);background:none;border:none;cursor:pointer;
  font-size:14px;font-family:inherit;transition:color .18s var(--ease);
}
.nav a:hover,.nav button:hover{color:var(--text)}
.nav .btn{
  background:linear-gradient(140deg,var(--accent),#d81a3e);color:#fff;
  padding:8px 16px;border-radius:var(--radius-pill);font-weight:600;
  transition:box-shadow .2s var(--ease),transform .2s var(--ease);
}
.nav .btn:hover{color:#fff;box-shadow:var(--glow);transform:translateY(-1px)}
/* ---------- 顶栏用户菜单 ---------- */
.usermenu{position:relative}
.usermenu .trigger{
  display:flex;align-items:center;gap:6px;padding:3px;
  background:none;border:none;cursor:pointer;border-radius:var(--radius-pill);
}
.usermenu .trigger .ava{
  width:32px;height:32px;font-size:13px;
  border:1px solid var(--line-hi);
  transition:box-shadow .22s var(--ease);
}
.usermenu .trigger:hover .ava{box-shadow:var(--glow)}
.usermenu .caret{color:var(--dim);font-size:10px;transition:transform .22s var(--ease)}
.usermenu.open .caret{transform:rotate(180deg)}

.usermenu .menu{
  position:absolute;top:calc(100% + 12px);right:0;z-index:30;
  width:212px;padding:7px;
  background:var(--bg-elev);border:1px solid var(--line-hi);
  border-radius:var(--radius);box-shadow:var(--shadow);
  /* 收起时不能只 display:none, 否则没有淡入淡出 */
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.usermenu.open .menu{opacity:1;visibility:visible;transform:none}

.usermenu .whoami{
  display:flex;align-items:center;gap:10px;padding:10px 10px 12px;
  border-bottom:1px solid var(--line);margin-bottom:6px;
}
.usermenu .whoami .name{font-size:13.5px;font-weight:700;color:var(--text)}
.usermenu .whoami .role{font-size:11px;color:var(--dim);margin-top:2px}

.usermenu .menu a,.usermenu .menu button{
  display:block;width:100%;text-align:left;
  padding:9px 10px;border-radius:var(--radius-sm);
  background:none;border:none;cursor:pointer;
  color:var(--muted);font-size:13.5px;font-family:inherit;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.usermenu .menu a:hover,.usermenu .menu button:hover{background:var(--surface-hi);color:var(--text)}
.usermenu .menu button.danger:hover{color:var(--accent)}

.container{max-width:1320px;margin:0 auto;padding:28px 28px 80px}

/* ---------- 区块标题 ---------- */
/* 小标签用大写 + 宽字距, 是整套设计的"编辑排版"签名 */
.sec{margin:46px 0 18px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.sec.first{margin-top:0}
.kicker{
  font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:7px;
}
.sec h2{margin:0;font-size:23px;font-weight:800;letter-spacing:-.02em}
.sec .more{font-size:13px;color:var(--muted);white-space:nowrap;transition:color .18s var(--ease)}
.sec .more:hover{color:var(--accent)}

/* ---------- 主打大图 ---------- */
.hero{
  position:relative;overflow:hidden;border-radius:22px;border:1px solid var(--line);
  box-shadow:var(--shadow);isolation:isolate;
}
/* 用同一张封面放大模糊当背景 —— 每个视频的 hero 配色都不一样, 免费的个性 */
.hero .bg{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;
  filter:blur(42px) saturate(150%);transform:scale(1.25);opacity:.5;
}
.hero .scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(8,9,13,.94) 30%,rgba(8,9,13,.5) 66%,rgba(8,9,13,.78));
}
/* 轮播: 所有 slide 横向排成一条, 靠平移 track 切换 */
.hero .track{display:flex;transition:transform .55s var(--ease)}
.hero .slide{position:relative;flex:0 0 100%;isolation:isolate}

/* 左右箭头与圆点: 平时半透明, 鼠标进到轮播上才完全显出来 */
.hero .arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:22px;line-height:1;padding-bottom:3px;
  background:rgba(0,0,0,.5);backdrop-filter:blur(8px);
  border:1px solid var(--line-hi);color:var(--text);font-family:inherit;
  opacity:0;transition:opacity .25s var(--ease),background .2s var(--ease);
}
.hero:hover .arrow{opacity:1}
.hero .arrow:hover{background:var(--accent)}
.hero .arrow.prev{left:16px}
.hero .arrow.next{right:16px}

.hero .dots{
  position:absolute;left:0;right:0;bottom:16px;z-index:3;
  display:flex;justify-content:center;gap:8px;
}
.hero .dot-btn{
  width:8px;height:8px;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.3);border:none;
  transition:width .28s var(--ease),background .28s var(--ease);
}
.hero .dot-btn.on{width:26px;border-radius:4px;background:var(--accent)}

.hero .inner{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;padding:38px 40px}
.hero .copy{min-width:0}
.hero .kicker{color:var(--gold);margin-bottom:12px}
.hero h1{
  margin:0 0 14px;font-size:clamp(24px,2.7vw,38px);font-weight:800;
  letter-spacing:-.03em;line-height:1.16;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hero .facts{display:flex;flex-wrap:wrap;gap:9px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:22px}
.hero .play{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 26px;border-radius:var(--radius-pill);
  background:linear-gradient(140deg,var(--accent),#d81a3e);color:#fff;
  font-size:15px;font-weight:700;box-shadow:var(--glow);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.hero .play:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 50px -8px rgba(255,46,77,.65)}
.hero .shot{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line-hi);box-shadow:var(--shadow);
}
/* 同理: 竖屏片子不裁切, 两侧留白 —— 但这里不能靠 hero 的 .bg 透上来:
   .shot 上面还压着一层 scrim, 透出来的是死黑。跟卡片一样, 自己垫一层同图模糊。 */
.hero .shot .blur{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  filter:blur(24px) saturate(150%);transform:scale(1.3);opacity:.85;
}
.hero .shot img{position:relative;z-index:1;
  width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .6s var(--ease)}
.hero:hover .shot img{transform:scale(1.04)}

/* 小圆点分隔符, hero / 卡片 / 播放页共用 */
.dot{width:3px;height:3px;border-radius:50%;background:var(--dim);flex:none}

/* ---------- 分类胶囊 ---------- */
/* 横向可滚: 分类多了也不换行撑高页面 */
.rail{display:flex;gap:9px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.pill{
  flex:none;padding:8px 17px;border-radius:var(--radius-pill);font-size:13.5px;
  background:var(--surface);border:1px solid var(--line);color:var(--muted);
  white-space:nowrap;
  transition:color .18s var(--ease),border-color .18s var(--ease),
             background .18s var(--ease),transform .18s var(--ease);
}
.pill:hover{color:var(--text);border-color:var(--line-hi);background:var(--surface-hi);transform:translateY(-1px)}
.pill.active{
  background:linear-gradient(140deg,var(--accent),#d81a3e);
  border-color:transparent;color:#fff;font-weight:600;box-shadow:var(--glow);
}

/* .tabs 是老类名(首页排序、后台在用), 复用胶囊外观 */
.tabs{display:flex;gap:9px;margin-bottom:20px;flex-wrap:wrap}
.tabs a{
  padding:8px 17px;border-radius:var(--radius-pill);font-size:13.5px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--muted);
  transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease);
}
.tabs a:hover{color:var(--text);border-color:var(--line-hi)}
.tabs a.active{
  background:linear-gradient(140deg,var(--accent),#d81a3e);
  border-color:transparent;color:#fff;font-weight:600;box-shadow:var(--glow);
}

/* ---------- 卡片网格 ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:24px 20px}

.card{
  display:block;border-radius:var(--radius);
  transition:transform .28s var(--ease);
  /* 入场错峰浮现。--i 由 JS 按序号写在 style 上 */
  animation:rise .5s var(--ease) both;
  animation-delay:calc(var(--i,0) * 45ms);
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.card .thumb{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--radius);background:#000;border:1px solid var(--line);
  transition:border-color .28s var(--ease),box-shadow .28s var(--ease);
}
/* 竖屏封面用 contain 完整显示(不裁切), 空白处由背后的模糊层补上。
   横屏封面正好铺满整个框, 模糊层看不见。 */
.card .thumb img{
  position:relative;z-index:1;
  width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .5s var(--ease),filter .28s var(--ease);
}
.card .thumb .blur,.row .thumb .blur{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:blur(20px) saturate(150%);
  transform:scale(1.3);   /* 放大一点, 免得模糊后边缘露出透明缝 */
}
/* 底部渐变压边: 不管封面是深是浅, 右下角的时长都读得清。
   必须显式给 z-index —— 图片有了 z-index:1, 这层不写就会被压到图片底下去。 */
.card .thumb::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent 42%);
}
.card:hover{transform:translateY(-5px)}
.card:hover .thumb{border-color:rgba(255,46,77,.5);box-shadow:var(--glow)}
.card:hover .thumb img{transform:scale(1.07);filter:brightness(.72)}

/* 悬停才浮出的播放键 */
.card .play{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  opacity:0;transition:opacity .28s var(--ease);
}
.card .play i{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:rgba(255,46,77,.92);color:#fff;font-style:normal;font-size:16px;
  padding-left:3px;   /* 三角形视觉重心偏左, 往右推一点才真居中 */
  box-shadow:var(--glow);
  transform:scale(.8);transition:transform .28s var(--ease);
}
.card:hover .play{opacity:1}
.card:hover .play i{transform:scale(1)}

.card .dur{
  position:absolute;right:8px;bottom:8px;z-index:4;
  background:rgba(0,0,0,.75);backdrop-filter:blur(6px);
  padding:2px 7px;border-radius:5px;font-size:11.5px;font-weight:600;
  font-variant-numeric:tabular-nums;
}
/* 封面还在后台抽帧时的角标 */
.card .badge{
  position:absolute;left:8px;top:8px;z-index:4;
  background:rgba(0,0,0,.7);backdrop-filter:blur(6px);
  color:var(--muted);padding:3px 8px;border-radius:5px;font-size:11px;
  border:1px solid var(--line);
}
.card .meta{padding:11px 2px 0}
.card .t{
  font-size:14.5px;font-weight:600;line-height:1.4;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .18s var(--ease);
}
.card:hover .t{color:var(--accent-hi)}
.card .sub{color:var(--dim);font-size:12.5px;margin-top:6px;display:flex;align-items:center;gap:7px}
/* 分类标记: 在一片灰字里用红色点出来, 一眼能看到这条视频归在哪 */
.cat{color:var(--accent-hi);font-weight:600;white-space:nowrap}
.row .sub{display:flex;align-items:center;gap:6px}

/* ---------- 横条卡片(播放页侧栏) ---------- */
.rows{display:flex;flex-direction:column;gap:14px}
.row{
  display:grid;grid-template-columns:152px 1fr;gap:12px;align-items:start;
  padding:7px;margin:-7px;border-radius:var(--radius-sm);
  transition:background .2s var(--ease);
  animation:rise .5s var(--ease) both;
  animation-delay:calc(var(--i,0) * 40ms);
}
.row:hover{background:var(--surface)}
.row .thumb{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius-sm);
  overflow:hidden;background:#000;border:1px solid var(--line);
  transition:border-color .22s var(--ease);
}
.row:hover .thumb{border-color:rgba(255,46,77,.5)}
.row .thumb img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .45s var(--ease)}
.row:hover .thumb img{transform:scale(1.06)}
.row .dur{
  position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.78);
  padding:1px 5px;border-radius:4px;font-size:11px;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.row .badge{
  position:absolute;left:5px;top:5px;background:rgba(0,0,0,.7);
  color:var(--muted);padding:2px 6px;border-radius:4px;font-size:10px;
}
.row .t{
  font-size:13.5px;font-weight:600;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .18s var(--ease);
}
.row:hover .t{color:var(--accent-hi)}
.row .sub{color:var(--dim);font-size:12px;margin-top:5px}

/* ---------- 播放页 ---------- */
/* 侧栏 348px = 能塞下 152px 缩略图 + 两行标题的最小舒适宽度 */
.watch{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:34px;align-items:start}
.watch-main{min-width:0}
.watch-aside{position:sticky;top:88px;display:flex;flex-direction:column;gap:32px}
.aside-sec h3{margin:0 0 15px;font-size:16px;font-weight:700;letter-spacing:-.01em}
.aside-sec .kicker{margin-bottom:4px}

.player{
  width:100%;aspect-ratio:16/9;max-height:76vh;background:#000;
  border-radius:var(--radius);border:1px solid var(--line);
  box-shadow:var(--shadow);display:block;
}
.vtitle{margin:20px 0 12px;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.35}
/* 标题下那一条: 数据在左, 操作在右 */
.vbar{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  padding-bottom:18px;border-bottom:1px solid var(--line);
}
.vstats{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13.5px}
.vacts{display:flex;gap:10px}
.act{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px;border-radius:var(--radius-pill);cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  font-size:13.5px;font-weight:600;font-family:inherit;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.act:hover{background:var(--surface-hi);border-color:var(--line-hi);transform:translateY(-1px)}
.act.on{background:var(--accent-soft);border-color:rgba(255,46,77,.55);color:var(--accent-hi)}

/* ---------- 标签 ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.chip{
  padding:6px 14px;border-radius:var(--radius-pill);font-size:12.5px;
  background:var(--surface);border:1px solid var(--line);color:var(--muted);
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
a.chip:hover{color:var(--accent-hi);border-color:rgba(255,46,77,.45)}

/* ---------- 评论 ---------- */
.comments{margin-top:36px}
.cmt-list{margin-top:20px;display:flex;flex-direction:column;gap:2px}
.cmt{
  display:grid;grid-template-columns:38px 1fr;gap:13px;
  padding:15px 14px;border-radius:var(--radius);
  transition:background .2s var(--ease);
}
.cmt:hover{background:var(--surface)}
/* 首字母头像: 没有上传头像这回事, 拿名字首字生成一个就够体面了 */
.ava{
  width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--accent),#8e1030);
  color:#fff;font-weight:700;font-size:15px;user-select:none;
  overflow:hidden;
}
/* 传了头像就铺满这个圆; 没传还是首字母渐变块 */
.ava.img{background:var(--surface2)}
.ava.img img{width:100%;height:100%;object-fit:cover;display:block}
.cmt .head{display:flex;align-items:center;gap:10px;margin-bottom:5px}
.cmt .who{color:var(--text);font-size:13.5px;font-weight:700}
.cmt .when{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}
.cmt .body{font-size:14px;line-height:1.62;white-space:pre-wrap;word-break:break-word;color:#d3d8e2}
/* 删除键平时藏起来, 悬停才出 —— 别让每条评论都挂个红叉 */
.cmt .del{
  background:none;border:none;color:var(--dim);cursor:pointer;font-size:12px;
  font-family:inherit;margin-left:auto;opacity:0;
  transition:opacity .2s var(--ease),color .18s var(--ease);
}
.cmt:hover .del{opacity:1}
.cmt .del:hover{color:var(--accent)}

.cmt-form{display:flex;gap:12px;align-items:flex-start}
.cmt-form .field{flex:1;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.cmt-form textarea{
  width:100%;min-height:54px;padding:13px 15px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--text);font-family:inherit;font-size:14px;line-height:1.6;resize:vertical;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.cmt-form textarea::placeholder{color:var(--dim)}
.cmt-form textarea:focus{outline:none;background:var(--surface-hi);border-color:var(--line-hi)}
.cmt-form button{
  padding:9px 22px;border:none;border-radius:var(--radius-pill);cursor:pointer;
  background:linear-gradient(140deg,var(--accent),#d81a3e);color:#fff;
  font-size:13.5px;font-weight:700;font-family:inherit;
  transition:box-shadow .2s var(--ease),transform .2s var(--ease);
}
.cmt-form button:hover{box-shadow:var(--glow);transform:translateY(-1px)}
.cmt-tip{color:var(--muted);font-size:13.5px;padding:14px 0}
.cmt-tip a{color:var(--accent);font-weight:600}

/* ---------- 表单(登录/注册/上传) ---------- */
.form{
  max-width:380px;margin:56px auto;padding:32px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:20px;box-shadow:var(--shadow);
  backdrop-filter:blur(20px);
}
.form h1{margin:0 0 22px;font-size:24px;font-weight:800;letter-spacing:-.02em}
/* 必须排除 checkbox/radio: 否则 width:100% 会把复选框撑满整行, 把标签文字挤出去 */
.form input:not([type=checkbox]):not([type=radio]),.form select{
  width:100%;padding:12px 14px;margin-bottom:13px;font-size:14px;font-family:inherit;
  background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--text);transition:border-color .2s var(--ease);
}
.form input::placeholder{color:var(--dim)}
.form input:focus,.form select:focus{outline:none;border-color:rgba(255,46,77,.55)}
/* 只有提交键占满整行。表单里还有别的按钮(比如拖拽区的"移除"), 不能一并拉满 */
.form button[type=submit]{
  width:100%;padding:13px;border:none;border-radius:var(--radius-sm);cursor:pointer;
  background:linear-gradient(140deg,var(--accent),#d81a3e);color:#fff;
  font-size:15px;font-weight:700;font-family:inherit;
  transition:box-shadow .2s var(--ease),opacity .2s var(--ease);
}
.form button[type=submit]:hover{box-shadow:var(--glow)}
.form button[type=submit]:disabled{opacity:.55;cursor:default;box-shadow:none}
.msg{color:var(--accent);min-height:20px;font-size:13px}

/* ---------- 表单: 单个字段的错误提示 ---------- */
/* 错误紧贴在出错的那个框下面。全表单共用一条提示的话, 三个框错了两个也只看得到一条。 */
.fld{margin-bottom:13px}
.form .fld input:not([type=checkbox]):not([type=radio]){margin-bottom:0}
.fld .cap{margin-bottom:0}
.ferr{margin:6px 2px 0;color:var(--accent);font-size:12.5px;line-height:1.45}
.form input.bad,.form input.bad:focus{border-color:var(--accent)}

/* "我的"页里的改密码表单。.form 默认是居中的登录卡(margin:56px auto), 摆在内容页中间会
   显得像另开了一页 —— 这里让它靠左, 跟上下的收藏/历史对齐。 */
.pwdform{max-width:440px;margin:0 0 44px;padding:24px}
.pwdform label{display:block;margin-bottom:7px;font-size:13px;color:var(--muted)}
#pwdSec{scroll-margin-top:84px}

/* ---------- 拖拽上传区 ---------- */
.form .lbl{display:block;margin-bottom:8px;font-size:12px;font-weight:600;color:var(--muted)}
.drop{
  margin-bottom:18px;padding:26px 20px;cursor:pointer;
  border:1.5px dashed var(--line-hi);border-radius:var(--radius);
  background:var(--surface);text-align:center;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.drop:hover,.drop:focus-visible{border-color:rgba(255,46,77,.6);background:var(--surface-hi);outline:none}
/* 文件正拖在上方 */
.drop.over{
  border-color:var(--accent);background:var(--accent-soft);
  box-shadow:var(--glow);
}
/* 已经选好文件了 */
.drop.has{border-style:solid;border-color:rgba(31,157,85,.45);cursor:default}

.drop .ico{font-size:26px;margin-bottom:10px;color:var(--muted)}
.drop .big{margin:0 0 6px;font-size:14.5px;font-weight:700;color:var(--text)}
.drop .hint{margin:0;color:var(--dim);font-size:12px}

.drop-picked{display:flex;align-items:center;gap:14px;text-align:left}
.drop-picked .ico{margin:0;font-size:22px}
.drop-picked .info{flex:1;min-width:0}
.drop-picked .fname{
  margin:0 0 3px;font-size:13.5px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;   /* 长文件名不许把布局撑破 */
}
.drop-picked .clear{
  flex:none;padding:6px 14px;border-radius:var(--radius-pill);cursor:pointer;
  background:var(--surface2);border:1px solid var(--line);color:var(--muted);
  font-size:12.5px;font-family:inherit;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.drop-picked .clear:hover{color:var(--accent);border-color:rgba(255,46,77,.5)}

/* 文件选择框: 浏览器默认那颗白按钮在深色页面上很跳, 换成和整体一致的样式。
   -webkit- 那条不能省 —— Chromium 只认它, 只写标准写法在 Chrome 里不生效。 */
input[type=file]{padding:9px 12px;cursor:pointer;color:var(--muted);font-size:13px}
input[type=file]::-webkit-file-upload-button,
input[type=file]::file-selector-button{
  margin-right:12px;padding:7px 15px;border-radius:var(--radius-pill);cursor:pointer;
  background:var(--surface-hi);border:1px solid var(--line);color:var(--text);
  font-size:13px;font-weight:600;font-family:inherit;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
input[type=file]::-webkit-file-upload-button:hover,
input[type=file]::file-selector-button:hover{background:var(--surface2);border-color:var(--line-hi)}

.check{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:14px}
.check label{
  /* flex:none + nowrap 缺一不可: 否则标签会被压缩, "电影" 会竖着断成两行 */
  flex:none;white-space:nowrap;
  display:flex;align-items:center;gap:6px;cursor:pointer;
  background:var(--surface2);border:1px solid var(--line);
  padding:7px 12px;border-radius:var(--radius-sm);font-size:13px;
  transition:border-color .18s var(--ease);
}
.check label:hover{border-color:var(--line-hi)}
/* width:auto 是必须的 —— 表单里的通用 input 规则会给它 width:100%, 把标签撑爆 */
.check input{accent-color:var(--accent);flex:none;width:auto;margin:0}

/* ---------- 分页 ---------- */
.pager{display:flex;justify-content:center;align-items:center;gap:12px;margin:44px 0 0;flex-wrap:wrap}
/* 翻页时滚到列表标题。顶栏是 sticky 的, 不留这段让位就会把标题盖住 */
#allSec,#head,#favSec,#histSec{scroll-margin-top:84px}
.pager button{
  padding:9px 20px;border-radius:var(--radius-pill);cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  font-size:13.5px;font-weight:600;font-family:inherit;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.pager button:hover:not(:disabled){background:var(--surface-hi);border-color:var(--line-hi)}
.pager button:disabled{opacity:.35;cursor:default}
.pager span{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}

/* 每页多少条。挨着页码放, 但用更淡的颜色 —— 它是设置, 不是导航。
   ⚠️ 这不是原生 <select>, 是自己用 div 画的(理由见 ui.js 里 createPager 那段注释:
   原生下拉展开后的列表由系统绘制, CSS 够不到, 在暗色站上会白闪、还会画空)。 */
.psize{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:12.5px}
.psel{position:relative}
.psel-btn{
  display:flex;align-items:center;gap:6px;
  padding:6px 9px;border-radius:8px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  font-family:inherit;font-size:12.5px;line-height:1;
  font-variant-numeric:tabular-nums;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.psel-btn:hover{background:var(--surface-hi);border-color:var(--line-hi)}
.psel-btn:focus-visible{outline:none;border-color:var(--accent)}
.psel-btn .caret{color:var(--dim);font-size:9px;transition:transform .2s var(--ease)}
.psel-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.psel-btn[aria-expanded="true"]{border-color:var(--accent)}

/* 往上弹: 分页器永远在列表的最下面, 往下弹会顶到视口外面去 */
.psel-menu{
  position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  z-index:30;margin:0;padding:5px;list-style:none;min-width:100%;
  background:var(--bg-elev);border:1px solid var(--line-hi);
  border-radius:10px;box-shadow:var(--shadow);
}
.psel-menu li{
  padding:7px 16px;border-radius:6px;cursor:pointer;
  color:var(--muted);font-size:12.5px;text-align:center;
  font-variant-numeric:tabular-nums;
  transition:background .14s var(--ease),color .14s var(--ease);
}
.psel-menu li:hover{background:var(--surface-hi);color:var(--text)}
.psel-menu li.on{color:var(--accent);font-weight:700}

/* ---------- 空态 ---------- */
.empty{grid-column:1/-1;text-align:center;padding:64px 20px;color:var(--muted)}
.empty .big{font-size:38px;margin-bottom:14px;opacity:.45}
.empty p{margin:0;font-size:14.5px}
.empty a{color:var(--accent);font-weight:600}

/* ---------- 骨架屏 ---------- */
/* 数据回来之前先占位, 否则网格会从 0 高度"炸开" */
.skel{border-radius:var(--radius);background:var(--surface);position:relative;overflow:hidden}
.skel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);
  animation:sweep 1.3s infinite;
}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.sk-thumb{aspect-ratio:16/9;border-radius:var(--radius)}
.sk-line{height:12px;border-radius:5px;margin-top:11px}
.sk-line.short{width:55%;margin-top:8px;height:10px}

/* ---------- 404 ---------- */
.notfound{text-align:center;padding:110px 20px}
.notfound .code{
  font-size:clamp(80px,13vw,140px);font-weight:800;line-height:1;letter-spacing:-.05em;
  background:linear-gradient(140deg,var(--accent),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:18px;
}
.notfound h1{margin:0 0 12px;font-size:24px;font-weight:800;letter-spacing:-.02em}
.notfound p{margin:0 0 30px;color:var(--muted);font-size:14.5px}
.notfound .go{
  display:inline-block;padding:12px 30px;border-radius:var(--radius-pill);
  background:linear-gradient(140deg,var(--accent),#d81a3e);color:#fff;
  font-size:14.5px;font-weight:700;box-shadow:var(--glow);
  transition:transform .22s var(--ease);
}
.notfound .go:hover{transform:translateY(-2px)}

/* ---------- 页脚 ---------- */
.footer{
  border-top:1px solid var(--line);margin-top:64px;padding:30px;
  text-align:center;color:var(--dim);font-size:12.5px;
}

/* ---------- 表格(后台) ---------- */
/* 六列表格在手机上塞不下。不套这层, 浏览器会把列压到极限 ——
   标题变成一列竖排的字、按钮上下叠, 整页还横向溢出。宁可让表格横着滑。 */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tblwrap table{min-width:760px}
table{width:100%;border-collapse:collapse;font-size:14px}
/* 操作列(修改/删除)不许换行, 否则窄屏下两个按钮会叠成两行 */
tbody td:last-child{white-space:nowrap}
thead th{
  text-align:left;color:var(--dim);font-weight:600;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;padding:10px 12px;
  border-bottom:1px solid var(--line);
}
tbody td{padding:13px 12px;border-bottom:1px solid var(--line)}
tbody tr{transition:background .18s var(--ease)}
tbody tr:hover{background:var(--surface)}
/* 表格里的操作按钮(改名/删除) */
tbody button{
  padding:6px 13px;margin-right:7px;border-radius:var(--radius-pill);cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--muted);
  font-size:12.5px;font-family:inherit;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
tbody button:hover{color:var(--text);border-color:var(--line-hi)}
tbody button.del:hover{color:var(--accent);border-color:rgba(255,46,77,.5)}
/* 进/出轮播的星标: 点亮就是金色 */
tbody button.star{padding:6px 12px;font-size:15px;line-height:1}
tbody button.star.on{color:var(--gold);border-color:rgba(233,185,73,.5)}
tbody button.star:hover{color:var(--gold);border-color:rgba(233,185,73,.5)}

/* ---------- 后台: 列表里的封面缩略图 ---------- */
.cell-cover{
  width:104px;aspect-ratio:16/9;object-fit:cover;display:block;
  border-radius:7px;border:1px solid var(--line);background:#000;
}
.tiny{color:var(--dim);font-size:11px;margin-top:5px}

/* ---------- 弹层(修改视频) ---------- */
.dlg{
  width:min(460px,92vw);padding:0;color:var(--text);
  background:var(--bg-elev);border:1px solid var(--line-hi);
  border-radius:20px;box-shadow:var(--shadow);
}
.dlg::backdrop{background:rgba(4,5,8,.72);backdrop-filter:blur(4px)}
.dlg form{padding:28px}
.dlg h2{margin:0 0 20px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.dlg .lbl{display:block;margin-bottom:8px;font-size:12px;font-weight:600;color:var(--muted)}
/* 同样要排除 checkbox: 弹层里的分类勾选框会被 width:100% 撑爆 */
.dlg input:not([type=checkbox]):not([type=radio]){
  width:100%;padding:11px 13px;margin-bottom:18px;font-size:14px;font-family:inherit;
  background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--text);transition:border-color .2s var(--ease);
}
.dlg input:focus{outline:none;border-color:rgba(255,46,77,.55)}
.dlg .hint{margin:-12px 0 18px;color:var(--dim);font-size:12px}
.dlg-acts{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}
.dlg-acts button{
  padding:10px 22px;border:none;border-radius:var(--radius-pill);cursor:pointer;
  background:linear-gradient(140deg,var(--accent),#d81a3e);color:#fff;
  font-size:13.5px;font-weight:700;font-family:inherit;
  transition:box-shadow .2s var(--ease);
}
.dlg-acts button:hover{box-shadow:var(--glow)}
.dlg-acts button.ghost{
  background:var(--surface);border:1px solid var(--line);color:var(--muted);
}
.dlg-acts button.ghost:hover{box-shadow:none;color:var(--text);border-color:var(--line-hi)}

/* confirmBox / promptBox 是 ui.js 直接造出来的, 没有外层 <form>, 内容包在 .body 里 */
.dlg .body{padding:28px}
.dlg .body h2{margin:0 0 12px;font-size:19px;font-weight:800;letter-spacing:-.02em}
.dlg .body p{margin:0 0 22px;color:var(--muted);font-size:14px;line-height:1.6}
.dlg .body input[type=text]{
  width:100%;padding:11px 13px;margin-bottom:22px;font-size:14px;font-family:inherit;
  background:var(--surface2);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--text);
}
.dlg .body input[type=text]:focus{outline:none;border-color:rgba(255,46,77,.55)}
#confirmBox,#promptBox{width:min(400px,92vw)}
/* 危险操作(删除)的确定键给红色, 让人多看一眼 */
.dlg-acts button.danger{background:linear-gradient(140deg,var(--accent),#c81337)}

/* ---------- 浮出提示条(上传成功等) ---------- */
/* 顶部居中。原来贴在右上角, 离用户的视线焦点(表单、按钮)太远, 弹了也看不见 */
.toast{
  position:fixed;top:84px;left:50%;z-index:100;
  display:flex;align-items:center;gap:11px;
  max-width:calc(100vw - 32px);
  padding:14px 22px;border-radius:var(--radius);
  background:var(--bg-elev);border:1px solid var(--line-hi);
  box-shadow:var(--shadow);
  font-size:14px;font-weight:600;
  /* 收起时不能只 display:none, 否则没有滑入滑出 */
  opacity:0;visibility:hidden;transform:translate(-50%,-14px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
/* 居中靠 translate(-50%), 所以显形时不能写 transform:none —— 会整条飘到右边去 */
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.toast .ic{
  display:grid;place-items:center;width:24px;height:24px;flex:none;
  border-radius:50%;font-size:12px;color:#fff;
}
.toast.ok .ic{background:#1f9d55;box-shadow:0 0 18px -2px rgba(31,157,85,.7)}
.toast.err .ic{background:var(--accent);box-shadow:var(--glow)}
.toast.err{border-color:rgba(255,46,77,.5)}

/* ---------- 快进/后退提示 ---------- */
/* 按方向键时在播放器中央闪一下, 否则用户不知道自己按生效了没有 */
.seek-hint{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  padding:10px 20px;border-radius:var(--radius-pill);pointer-events:none;
  background:rgba(0,0,0,.72);backdrop-filter:blur(8px);border:1px solid var(--line-hi);
  font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;
  opacity:0;transition:opacity .18s var(--ease);
}
.seek-hint.show{opacity:1}
.stage{position:relative}

/* ---------- 响应式 ---------- */
@media(max-width:1080px){
  /* 侧栏塞不下就整块落到播放器下方 */
  .watch{grid-template-columns:1fr;gap:28px}
  .watch-aside{position:static}
  .hero .inner{grid-template-columns:1fr;gap:24px;padding:28px}
  .hero .copy{order:2}
  .hero .shot{order:1}
}
/* 触屏设备: 箭头是 :hover 才显形的, 手指摸不出来, 还会垂直居中压在标题上
   (窄屏时 hero 变成上下两段, 正中间正好是文字)。藏掉, 改用滑动 + 圆点。 */
@media(hover:none){
  .hero .arrow{display:none}
  .hero .dot-btn{width:10px;height:10px}   /* 手指点得中 */
  .hero .dot-btn.on{width:28px}
}
@media(max-width:700px){
  .container{padding:20px 16px 60px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 12px}
  .sec{margin:34px 0 14px}
  .sec h2{font-size:19px}
  .vtitle{font-size:18px}
  .row{grid-template-columns:132px 1fr}
  /* 窄屏放不下三栏: 品牌与导航一行, 搜索整条换到第二行 */
  .topbar{grid-template-columns:auto 1fr;gap:10px 12px;padding:11px 16px}
  .brand{order:1}
  .nav{order:2;justify-self:end;gap:11px}
  .search{order:3;grid-column:1/-1;width:100%}
  .form{margin:28px auto;padding:24px}
}

/* 用户在系统里关了动效就别晃他 */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- 注册验证码 ---------- */
.cap{display:flex;gap:10px;align-items:stretch;margin-bottom:14px}
.cap input{flex:1;min-width:0}
/* 图本身就是"换一张"的按钮 —— 旁边再挂个链接是多余的 */
.cap-img{
  flex:none;width:124px;height:46px;padding:0;cursor:pointer;
  display:grid;place-items:center;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  transition:border-color .18s var(--ease);
}
.cap-img:hover{border-color:var(--accent)}
.cap-img img{display:block;width:100%;height:100%;object-fit:cover}
.cap-loading{color:var(--dim);font-size:12px}

/* ---------- 我的: 个人卡片 ---------- */
/* ---------- 播放页: 评论下面的"猜你喜欢" ---------- */
/* 主栏比首页窄(右边还站着侧栏), 卡片最小宽度得跟着收一点, 否则一行只放得下两张 */
.recsec{margin-top:14px}
.recsec .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px 18px}

/* ---------- 卡片角标按钮(收藏星 / 历史的删除) ---------- */
/* 卡片本身是 <a>, 按钮不能放进去(点它会顺着链接跳走), 所以按钮是 <a> 的兄弟,
   外面套一层 .citem / .hitem 做定位参照。 */
.citem,.hitem{position:relative}
.cfav,.hdel{
  position:absolute;top:9px;right:9px;z-index:2;
  width:30px;height:30px;padding:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;          /* 圆圈里唯一那个孩子, 横竖都居中 */
  background:rgba(8,9,13,.6);border:1px solid rgba(255,255,255,.14);color:#fff;
  line-height:1;font-family:inherit;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .18s var(--ease),background .18s var(--ease),
             color .18s var(--ease),transform .18s var(--ease),border-color .18s var(--ease);
}
.cfav svg{
  width:15px;height:15px;display:block;   /* display:block: <svg> 默认是 inline,
                                             行内元素底下会留一截基线空隙, 又偏了 */
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;
  transition:fill .18s var(--ease);
}
.hdel{font-size:12px}

.citem:hover .cfav,.hitem:hover .hdel,.cfav:focus-visible,.hdel:focus-visible{opacity:1}
/* 已收藏的星星必须一直亮着 —— 它不只是个按钮, 还是"我收过这个"的状态显示。
   跟着 hover 才出现的话, 用户扫一眼列表根本不知道自己收藏过哪些。 */
.cfav.on{opacity:1;color:var(--gold);border-color:rgba(233,185,73,.5)}
.cfav.on svg{fill:currentColor}          /* 收藏了就是实心, 不用换字符 */
.cfav:hover{background:rgba(8,9,13,.85);color:var(--gold);border-color:rgba(233,185,73,.6);transform:scale(1.08)}
.cfav:active{transform:scale(.94)}
.hdel:hover{background:var(--accent);border-color:var(--accent);transform:scale(1.08)}
/* 触屏没有 hover, 按钮永远不出现 = 功能等于不存在。这些设备上一直显示 */
@media(hover:none){.cfav,.hdel{opacity:1}}

/* 观看历史的卡片上两个按钮都有: 删除占右上角, 星星往左让一格, 否则两颗叠在一起 */
.hitem .cfav{right:42px}

/* 段落标题右侧的一小撮操作(如"清空历史") */
.sec-acts{display:flex;align-items:center;gap:12px;white-space:nowrap}
.sec-acts button{
  padding:7px 15px;border-radius:var(--radius-pill);cursor:pointer;font-size:12.5px;
  background:var(--surface);border:1px solid var(--line);color:var(--muted);
  font-family:inherit;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.sec-acts button:hover{color:var(--text);border-color:var(--accent)}

.mecard{
  display:flex;align-items:center;gap:18px;margin:26px 0 10px;padding:20px 22px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
}
.mecard .me-ava .ava{width:64px;height:64px;font-size:24px}
.mecard .me-info{min-width:0}
.mecard .name{font-size:19px;font-weight:800;letter-spacing:-.02em}
.mecard .sub{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:5px 0 12px;color:var(--muted);font-size:13px;
}
.mecard button{
  padding:7px 15px;border-radius:var(--radius-pill);cursor:pointer;font-size:12.5px;
  background:var(--surface-hi);border:1px solid var(--line);color:var(--muted);
  font-family:inherit;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.mecard button:hover{color:var(--text);border-color:var(--accent)}

/* ---------- 后台: 搜索工具条 ---------- */
.toolbar{display:flex;gap:10px;margin-bottom:16px}
.toolbar input{
  flex:1;max-width:320px;padding:10px 14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-pill);
  color:var(--text);font-family:inherit;font-size:13.5px;outline:none;
}
.toolbar input:focus{border-color:var(--accent)}
.toolbar button{
  padding:10px 20px;border-radius:var(--radius-pill);cursor:pointer;
  background:var(--accent);border:none;color:#fff;font-weight:700;
  font-family:inherit;font-size:13.5px;
}

/* ---------- 角色标记 ---------- */
.tag{
  display:inline-block;padding:3px 10px;border-radius:var(--radius-pill);
  font-size:11.5px;font-weight:700;
  background:var(--surface-hi);border:1px solid var(--line);color:var(--muted);
}
.tag.admin{background:rgba(233,185,73,.12);border-color:rgba(233,185,73,.45);color:var(--gold)}