/* ============================================================
   皮卡堂社区 · 占位版样式
   配色取自概念图（背景 #F0F0F0，强调红 #E60000 / 蓝 #0090F0）
   字体：最像素EX2（未提供字体文件，先用等宽像素风格回退，后续替换）
   ============================================================ */

:root {
  --font: "最像素EX2", "Zpix", "Fusion Pixel", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bg: #F0F0F0;
  --panel: #FFFFFF;
  --line: #C8C8C8;
  --line-strong: #A8A8A8;
  --line-light: #E8E8E8;
  --text: #333333;
  --text-dim: #707070;
  --brand: #E60000;
  --brand-deep: #B00000;
  --accent: #0090F0;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--panel));
  --accent-line: color-mix(in srgb, var(--accent) 34%, var(--panel));
  --brand-soft: color-mix(in srgb, var(--brand) 10%, var(--panel));
  --brand-line: color-mix(in srgb, var(--brand) 32%, var(--panel));
  --danger: #E60000;
  --danger-deep: #B00000;
  --success: #20B030;
  --warning: #F0A000;
  --red: var(--brand);
  --red-deep: var(--brand-deep);
  --blue: var(--accent);
  --green: var(--success);
  --orange: var(--warning);
  --surface-raised: #F7F8FA;
  --surface-deep: #E8EAED;
  --panel-soft: color-mix(in srgb, var(--panel) 88%, var(--text) 12%);
  --disabled-bg: #C9CDD4;
  --disabled-border: #B5BAC2;
  --disabled-text: #FFFFFF;
  --shadow: 3px 3px 0 rgba(0,0,0,.10);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  image-rendering: pixelated;
  isolation: isolate;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--red); }
button, input, select, textarea { border-radius: 0; font-family: inherit; }

.container { width: 1180px; margin: 0 auto; }

/* ---------- 顶栏 ---------- */
.topbar { background: var(--panel); border-bottom: 2px solid var(--line-strong); }
.topbar-inner { display: flex; align-items: center; gap: 18px; height: 52px; }
.logo { font-size: 16px; font-weight: bold; color: var(--red); letter-spacing: 2px; }
.logo:hover { color: var(--red-deep); }
.logo-img { display: block; height: 34px; width: auto; }
.logo.is-logo-colorized {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.logo.is-logo-colorized .logo-img { opacity: 0; }
.logo.is-logo-colorized::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--logo-color, var(--text));
  -webkit-mask-image: var(--logo-mask);
  mask-image: var(--logo-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.main-nav { display: flex; align-items: center; font-size: 12px; }
.main-nav a { margin-right: 10px; color: var(--text); white-space: nowrap; }
.main-nav a:hover { color: var(--red); }
.main-nav a.active { color: var(--red); font-weight: bold; }
/* v147：板块链接容器不占位，子链接直接参与导航的 flex 排布 */
.nav-boards { display: contents; }
/* v147：发布作品 = 红底白字；v201：下载P剧绘使用同样的红色主按钮 */
.main-nav a.nav-publish,
.main-nav a.nav-publish:visited,
.main-nav a.nav-publish:hover,
.main-nav a.nav-publish.active,
.main-nav a.nav-download,
.main-nav a.nav-download:visited,
.main-nav a.nav-download:hover,
.main-nav a.nav-download.active {
  background: var(--red);
  color: #fff;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 3px;
  margin-left: 2px;
}
.main-nav a.nav-publish:hover { opacity: .88; }
.main-nav a.nav-download:hover { opacity: .88; }
/* v149：霓裳阁穿搭墙（v152：卡片与墙边、卡片与卡片统一 12px） */
/* v167：三行七列、整块居中（每页 21 个） */
.look-grid {
  display: grid; grid-template-columns: repeat(7, 100px);
  justify-content: center; align-content: start; gap: 12px;
}
@media (max-width: 900px) { .look-grid { grid-template-columns: repeat(5, 100px); } }
@media (max-width: 680px) { .look-grid { grid-template-columns: repeat(4, 100px); } }
@media (max-width: 520px) { .look-grid { grid-template-columns: repeat(3, 100px); gap: 10px; } }
.look-card { position: relative; width: 100px; }
.look-img {
  width: 100px; height: 150px; border: 1px solid var(--line-strong);
  background: #FFFFFF;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.look-img img { width: 100px; height: 150px; display: block; image-rendering: pixelated; }
.look-tip {
  display: none; position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  background: rgba(0, 0, 0, .86); color: #FFF; font-size: 11px; line-height: 1.65;
  padding: 6px 9px; border-radius: 4px; white-space: nowrap; z-index: 30; pointer-events: none;
}
.look-card:hover .look-tip { display: block; }
.look-del {
  display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px;
  border-radius: 50%; border: 1px solid #FFF; background: var(--red); color: #FFF;
  font-size: 12px; line-height: 1; cursor: pointer; padding: 0;
}
.look-card:hover .look-del { display: block; }
/* v151：卡片下方显示头像 + UID + 点赞 */
/* v152：作者区沿用帖子的正方形头像（.avatar-crop 36×36） */
.look-owner { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.look-who { min-width: 0; flex: 1; }
.look-name { font-size: 11px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
.look-uid { font-size: 10px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; }
.look-like {
  display: inline-flex; align-items: center; gap: 2px; margin-top: 4px; padding: 0;
  border: 0; background: none; cursor: pointer; color: var(--text-dim); line-height: 1;
}
.look-like .ic-heart { width: 18px; height: 18px; vertical-align: -3px; }
.look-like b { font-size: 12px; color: var(--text); font-weight: normal; margin-left: 1px; }
.look-like:hover { color: var(--red); }
.look-like.on, .look-like.on b { color: var(--red); }
/* v177：未点赞时图标灰度，点赞后才显示彩色 */
.look-like .ic-heart { filter: grayscale(1); opacity: .75; }
.look-like.on .ic-heart { filter: none; opacity: 1; }
.look-like[disabled] { opacity: .6; cursor: default; }
/* v171：加精等级徽标 */
.fbadge { display: inline-block; font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: 2px; letter-spacing: 1px; color: #FFF; vertical-align: 1px; }
.fbadge.excellent { background: var(--accent); }
.fbadge.premium { background: #722ED1; }
.fbadge.master { background: #F53F3F; }
.wc-cover .fbadge { position: absolute; top: 6px; right: 6px; z-index: 2; }
/* v158：投币按钮 —— 红底白字，只在皮卡剧作品上出现（写成 .btn.tip-btn 才不会被子面的 .btn 覆盖） */
.btn.tip-btn,
.btn.tip-btn:hover { background: var(--red); border-color: var(--red-deep); color: #FFF; font-weight: 600; }
.btn.tip-btn:hover { opacity: .9; }
.btn.tip-btn[disabled],
.btn.tip-btn[disabled]:hover { background: #C9CDD4; border-color: #B5BAC2; color: #FFF; cursor: default; opacity: 1; }
body[data-theme="dark"] .btn.tip-btn,
body[data-theme="dark"] .btn.tip-btn:hover { background: var(--red); border-color: var(--red-deep); color: #FFF; }
/* v158：皮卡剧板块顶部轮播（高 300，中间封面 225×140 放大到 200% = 450×280；无边框） */
/* v161：容器只负责裁切，卡片各自绝对定位叠放（中间在上、两侧在下），不再影响页面宽度 */
.pkc { position: relative; width: 100%; min-width: 0; height: 286px; overflow: hidden; margin: 0 0 8px; background: transparent; border: 0; }
.pkc-track { position: absolute; left: 0; top: 0; right: 0; height: 280px; }
.pkc-slide {
  position: absolute; left: 0; top: 0; width: 450px; height: 280px; display: block;
  transform-origin: center center;
  transition: transform .8s cubic-bezier(.22,.61,.36,1), opacity .8s ease;
}
.pkc-slide img { width: 450px; height: 280px; object-fit: cover; display: block; border: 0; background: #FFF; }
/* 圆点压在封面图上，不另起一行 */
.pkc-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 8px; z-index: 5; }
.pkc-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .55); cursor: pointer; display: block; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); }
.pkc-dot.on { background: var(--red); box-shadow: 0 0 0 1px rgba(255, 255, 255, .8); }
/* v163：左右翻页按钮 */
.pkc-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 34px; height: 34px; padding: 0; line-height: 1;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0, 0, 0, .32); color: #FFF; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
}
.pkc-nav:hover { background: rgba(0, 0, 0, .5); }
.pkc-prev { left: 8px; }
.pkc-next { right: 8px; }
@media (max-width: 720px) {
  .pkc { height: 212px; }
  .pkc-track { height: 200px; }
  .pkc-slide, .pkc-slide img { width: 320px; height: 200px; }
  .pkc-dots { bottom: 6px; }
}
/* v156：投稿页正文固定 400px 高，超出内容在框内滚动 */
#f-body-editor .pk-rich-body { height: 400px; }
body[data-theme="dark"] .look-img { background: #1E2226; }
.top-user { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; }
/* v147：右上角头像下拉菜单 */
.user-menu-wrap { position: relative; }
.user-menu-btn {
  position: relative; display: inline-flex; align-items: center; gap: 3px;
  padding: 0; border: 0; background: none; cursor: pointer; color: var(--text);
}
.user-menu-caret { font-size: 10px; color: var(--text-dim); line-height: 1; }
.user-menu-dot {
  position: absolute; top: -1px; right: -1px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--red); border: 1px solid #fff;
}
.user-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 150px;
  background: #fff; border: 1px solid var(--line-strong);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .14); z-index: 60; padding: 4px 0;
}
.user-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px; color: var(--text); font-size: 12px; white-space: nowrap;
}
.user-menu a:hover { background: #F2F3F5; color: var(--red); }
body[data-theme="dark"] .user-menu { background: #23272C; border-color: #3A3F45; }
body[data-theme="dark"] .user-menu a:hover { background: #2C3136; }
body[data-theme="dark"] .user-menu-dot { border-color: #23272C; }
.top-user .avatar {
  width: 28px; height: 28px; display: inline-flex;
  border: 2px solid var(--line-strong); background: #E4E4E4;
  align-items: center; justify-content: center; font-size: 9px; color: var(--text-dim);
}
.level-badge {
  border: 2px solid var(--line-strong);
  background: #FFF;
  padding: 1px 6px;
  color: var(--text);
  white-space: nowrap;
}

/* ---------- 公告轮播 ---------- */
.announce-bar { background: var(--panel); border-bottom: 2px solid var(--red); }
.announce-inner { display: flex; align-items: center; height: 34px; overflow: hidden; gap: 10px; }
.announce-label {
  background: var(--red); color: #FFF; padding: 0 8px; height: 100%;
  display: flex; align-items: center; font-size: 12px; flex: none;
}
.announce-track { position: relative; flex: 1; height: 100%; }
.announce-item {
  position: absolute; inset: 0; display: none; align-items: center;
  font-size: 12px; color: var(--text-dim);
}
.announce-item.active { display: flex; }

/* ---------- 页面布局 ---------- */
.page-main { display: grid; grid-template-columns: 1fr 300px; gap: 14px; padding: 14px 0; }
.page-main > section, .page-main > aside { min-width: 0; }
.page-main.wide { grid-template-columns: 1fr; }
body[data-page="board"] .page-main.wide > aside {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; margin-top: 14px;
}
/* 皮卡剧 / 皮剧本桌面布局：由 4 张 243px 卡片和 3 个 4px 间距自动计算作品栏宽度。 */
.page-main.work-card-layout {
  --work-card-track: 243px;
  --work-card-gap: 4px;
  --work-grid-width: calc(var(--work-card-track) * 4 + var(--work-card-gap) * 3);
  width: calc(var(--work-grid-width) + 314px);
  max-width: calc(100% - 24px);
  grid-template-columns: var(--work-grid-width) 300px;
}
.page-main.work-card-layout #board-post-list {
  padding: 0;
}
.page-main.work-card-layout .work-cards {
  gap: var(--work-card-gap);
}
.page-main.work-card-layout .work-card-panel {
  border-left-width: 0;
  border-right-width: 0;
}
.page-main.guild-detail-mode { grid-template-columns: 1fr; }
body { animation: pageIn .18s ease-out; }
body.page-leave { opacity: 0; transition: opacity .12s ease; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
.panel {
  background: var(--panel);
  border: 2px solid var(--line);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}
.panel-title {
  border-bottom: 2px solid var(--line);
  padding: 8px 12px;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.panel-title .sub { font-size: 12px; color: var(--text-dim); font-weight: normal; }
.panel-body { padding: 12px; }

/* ---------- 板块网格 ---------- */
.home-banner { width: 1180px; max-width: 100%; height: 300px; margin: 14px auto 0; border: 2px solid var(--line); background: #FFF; overflow: hidden; }
.home-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-banner-link { display: block; width: 100%; height: 100%; cursor: pointer; }
.theme-bounce-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.theme-bounce-layer[hidden] { display: none !important; }
.theme-bounce-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  will-change: transform;
  image-rendering: auto;
}
.work-ref-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.work-ref-link:hover { color: var(--red); }
.work-ref-link.is-unavailable { color: var(--text-dim); text-decoration: none; cursor: default; }
.work-ref-chip {
  display: inline-block;
  margin: 0 2px;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg);
  color: var(--accent);
  line-height: 1.7;
  cursor: default;
  user-select: all;
}
.work-ref-result { white-space: normal; }
.qr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* 主页背景横幅：固定 1180 × 250，横跨整页，图片铺满（大图缩小、小图放大） */
.profile-banner {
  grid-column: 1 / -1;
  width: 1180px;
  max-width: 100%;
  height: 250px;
  margin-bottom: 0;
  overflow: hidden;
  border: 2px solid var(--line);
  background: #FFF;
}
.profile-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
#reply-list, #comment-list { padding: 8px !important; text-align: left !important; }
#reply-list .post-row, #comment-list .post-row { justify-content: flex-start !important; align-items: flex-start !important; text-align: left !important; }
#reply-list .post-main, #comment-list .post-main { text-align: left !important; }
.comment-replies > div { margin: 0 !important; }
.qr-item { border: 1px solid var(--line-light); background: #FFF; padding: 6px; text-align: center; cursor: pointer; }
.qr-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; display: block; }
.qr-item .qr-name { font-size: 12px; margin-top: 4px; color: var(--text); }
.qr-modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.qr-modal-card { background: #FFF; border: 2px solid var(--line); width: 360px; max-width: 100%; padding: 16px; text-align: center; }
.qr-modal-card img { width: 300px; height: 300px; max-width: 100%; object-fit: contain; display: block; margin: 0 auto; }
.board-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.board-card {
  border: 2px solid var(--line);
  padding: 10px;
  cursor: pointer;
  background: #FFF;
  transition: none;
}
.board-card:hover { border-color: var(--red); }
.board-card.official { border-color: var(--red); }
.board-icon {
  width: 40px; height: 40px;
  background: #E4E4E4;
  border: 2px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--text-dim);
  margin-bottom: 6px;
}
.board-logo { width: 40px; height: 40px; display: block; flex: none; }
.board-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.board-head .board-icon { margin-bottom: 0; }
.board-name { font-weight: bold; font-size: 14px; }
.board-desc { font-size: 12px; color: var(--text-dim); margin: 4px 0; min-height: 2.6em; }
.board-mod { font-size: 12px; color: var(--text-dim); }

/* ---------- 作品列表 ---------- */
.tabs { display: flex; gap: 4px; }
.tab {
  padding: 3px 12px;
  border: 2px solid var(--line);
  background: #F5F5F5;
  cursor: pointer;
  font-size: 12px;
}
.tab.active { background: var(--red); color: #FFF; border-color: var(--red-deep); }
.post-row {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line-light);
}
.notification-group {
  border: 2px solid var(--line);
  background: var(--panel);
  color: var(--text);
  margin-bottom: 10px;
}
.post-row:last-child { border-bottom: 0; }
.avatar {
  width: 36px; height: 36px; flex: none;
  border: 2px solid var(--line-strong); background: #E4E4E4;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--text-dim);
}
.avatar-crop { width: 36px; height: 36px; overflow: hidden; flex: none; position: relative; }
.avatar-crop img { display: block; width: 102px; height: 152px; margin: -24px 0 0 -33px; }
.avatar-crop.ph { background: #E4E4E4; }
.post-main { flex: 1; min-width: 0; }
.post-stats {
  flex: none; text-align: center; font-size: 12px; color: var(--text-dim);
  display: flex; flex-direction: row; align-items: center; gap: 14px; align-self: center;
}
.post-stats b { display: inline; font-size: 14px; color: var(--text); margin-left: 3px; }
.ic-heart,
.ic-star,
.ic-comment {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: transparent center / contain no-repeat;
  vertical-align: -3px;
}
.ic-heart { background-image: url('../img/act-like.png'); }
.ic-star { background-image: url('../img/act-collect.png'); }
/* 三个主题统一使用经典主题原“收藏”图案作为评论图标。 */
.ic-comment { background-image: url('../theme-ptushe/static/images/content/icon-comment.png'); }
.pk-drag-over { outline: 2px dashed var(--accent) !important; outline-offset: 3px; }
.notify-badge {
  display: none; background: var(--red); color: #FFF; font-size: 10px;
  padding: 0 4px; margin-left: 2px; border-radius: 2px;
}
.post-title { font-weight: normal; font-size: 14px; }
.post-title a { color: var(--text); }
.post-title a:hover { color: var(--red); }
.post-meta { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.tag {
  display: inline-block; font-size: 11px; line-height: 1.4;
  border: 1px solid var(--line-strong); color: var(--text-dim);
  padding: 0 4px; margin-right: 4px;
}
.tag.red { border-color: var(--danger); color: var(--danger); }
.tag.blue { border-color: var(--blue); color: var(--blue); }
.tag.green { border-color: var(--green); color: var(--green); }
.tag.orange { border-color: var(--orange); color: var(--orange); }

/* ---------- 侧栏 ---------- */
.side-card { margin-bottom: 14px; }
.side-title {
  border-bottom: 2px solid var(--line);
  padding: 6px 10px; font-size: 14px; font-weight: bold;
}
.side-body { padding: 10px; font-size: 12px; color: var(--text-dim); }
.checkin-btn { width: 100%; margin-top: 8px; }
.side-search { display: flex; }
.side-search input {
  flex: 1; border: 2px solid var(--line); background: var(--bg);
  padding: 4px 8px; font-size: 12px; font-family: inherit;
}
.side-search button {
  border: 2px solid var(--line-strong); background: #FFF;
  padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: inherit;
}

/* ---------- 按钮 ---------- */
.btn {
  font-family: inherit;
  border: 2px solid var(--line-strong);
  background: #FFF;
  padding: 5px 14px;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0,0,0,.10);
  font-size: 14px;
  color: var(--text);
}
.btn:hover { box-shadow: 1px 1px 0 rgba(0,0,0,.10); transform: translate(1px, 1px); }
.btn.primary { background: var(--red); border-color: var(--red-deep); color: #FFF; }
.btn.small { font-size: 12px; padding: 3px 10px; }

/* ---------- 占位元素 ---------- */
.ph {
  background: #E9E9E9;
  border: 2px dashed #B0B0B0;
  color: #909090;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.ph-cover { width: 225px; height: 140px; }
.ph-card { width: 150px; height: 100px; }
.card-view { position: relative; width: 100px; height: 150px; overflow: hidden; }
.card-view { margin-bottom: 16px; }
.card-view img {
  display: block; width: 102px; height: 152px;
  object-fit: cover; object-position: center;
  margin: -1px 0 0 -1px;
}
.ph-avatar { width: 36px; height: 36px; }
.ph-fill { width: 100%; min-height: 180px; }
.ph-page { width: 100%; min-height: 320px; }
.scroll-box { height: 500px; overflow-y: auto; }
.scroll-collection { height: 1000px; overflow-y: auto; }
#post-list { height: 1000px; overflow-y: auto; }
#profile-works { height: 870px; }

/* ---------- 封面墙 / 四宫格 / 文章页 ---------- */
.cover-wall { display: grid; grid-template-columns: repeat(auto-fill, 225px); gap: 12px; }
#pinned-list .cover-wall {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: 225px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}
.cover-wall .ph-cover { cursor: pointer; }
.cover-wall .ph-cover:hover { border-color: var(--red); color: var(--red); }
.quad-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.quad-grid .ph { min-height: 200px; }
.article-body { font-size: 14px; line-height: 1.9; }
.article-body p { margin-bottom: 12px; }
.article-img { width: 100%; min-height: 180px; margin: 8px 0; }
.work-body {
  word-break: break-word;
  text-align: left;
  font-size: 14px;
  line-height: 2;
  color: var(--text);
  background: #FAFAFA;
  border: 1px solid var(--line-light);
  padding: 12px 16px;
  margin-bottom: 14px;
}
.work-body img { max-width: 100%; height: auto; cursor: zoom-in; }
.work-body blockquote { border-left: 3px solid var(--line-strong); margin: 8px 0; padding: 2px 12px; color: var(--text-dim); }
.pk-rich-body blockquote { border-left: 3px solid var(--line-strong); margin: 8px 0; padding: 2px 12px; color: var(--text-dim); }
.pk-rich-body img { max-width: 100%; height: auto; }
.body-imgs-display { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.body-imgs-display img { cursor: zoom-in; }

/* ---------- 悬浮窗 ---------- */
.float-box {
  position: fixed; right: 16px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 60;
}
.float-btn {
  width: 92px;
  border: 2px solid var(--line-strong);
  background: #FFF;
  box-shadow: var(--shadow);
  font-family: inherit; font-size: 12px;
  padding: 6px 0; cursor: pointer; text-align: center;
  color: var(--text);
}
.float-btn:hover { border-color: var(--red); color: var(--red); }

/* ---------- 详情页 ---------- */
.detail-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px; padding: 14px 0; }
.detail-grid > section { min-width: 0; }
.author-card { text-align: center; }
.author-card .ph-card { margin: 0 auto; }
.author-note { font-size: 11px; color: var(--text-dim); margin: 6px 0 10px; }
.author-info { text-align: left; font-size: 12px; color: var(--text-dim); }
.author-info div { padding: 3px 0; border-bottom: 1px dashed var(--line-light); }
.author-stats { display: flex; justify-content: space-around; margin: 8px 0; font-size: 12px; }
.author-stats b { display: block; font-size: 14px; color: var(--text); }
.id-name { font-weight: bold; color: #333333; font-size: 14px; }
.id-uid { color: #F0A000; font-weight: normal; font-size: 12px; }
#profile-name { font-weight: bold; color: #333333; font-size: 14px; }
#profile-uid { color: #F0A000; font-weight: normal; font-size: 12px; }
.author-title-frame {
  width: 100px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #C8C8C8; color: #3430E7; font-size: 12px; margin: 8px auto;
  overflow: hidden;
}
.badge-row { display: flex; justify-content: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.work-head { margin-bottom: 14px; }
.work-title { font-size: 16px; font-weight: bold; }
.work-sub { color: var(--text-dim); font-size: 14px; margin-top: 2px; }
.work-by { color: var(--text-dim); font-size: 12px; margin-top: 4px; }
.content-stage { border: 2px solid var(--line); background: #FFF; min-height: 0; width: 100%; min-width: 0; }
.content-page { display: none; padding: 16px; }
.content-page.active { display: block; }
.page-nav {
  display: flex; gap: 8px; align-items: center; justify-content: center;
  padding: 10px; border-top: 2px solid var(--line);
  font-size: 12px; color: var(--text-dim);
}
.page-nav input {
  width: 48px; border: 2px solid var(--line);
  font-family: inherit; font-size: 12px; padding: 2px 4px; text-align: center;
}
.interact-bar {
  display: flex; gap: 10px; align-items: center;
  padding: 12px; border-top: 2px solid var(--line);
  flex-wrap: wrap;
}
.interact-bar .btn b { font-size: 12px; }
.manage-box { border: 2px solid var(--red); background: #FFF8F8; margin-top: 14px; }
.manage-box .panel-title { border-color: var(--red); }

/* 目录（皮剧本） */
.catalog { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.catalog a { display: block; font-size: 12px; padding: 2px 0; color: var(--blue); }
.catalog a:hover { color: var(--red); }

/* 素材框架 */
.frame-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.frame-item { text-align: center; }
.frame-item .ph { min-height: 120px; }
.frame-time { font-size: 11px; color: var(--text-dim); margin-top: 4px; }

/* ---------- 投稿页 ---------- */
.submit-grid { display: grid; grid-template-columns: 1fr 320px; gap: 14px; padding: 14px 0; }
.form-row { margin-bottom: 14px; }
.form-row > label { display: block; margin-bottom: 4px; font-size: 12px; color: var(--text-dim); }
.input {
  width: 100%;
  border: 2px solid var(--line);
  background: #FFF;
  font-family: inherit; font-size: 14px;
  padding: 6px 8px;
  color: var(--text);
}
textarea.input { min-height: 90px; resize: vertical; }
.dropzone {
  border: 2px dashed var(--line-strong);
  background: #FAFAFA;
  padding: 20px 12px;
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
}
.check-row { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--text-dim); }
.unit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.unit-item {
  border: 2px solid var(--line);
  padding: 8px; cursor: pointer; text-align: center; font-size: 12px;
  background: #FFF; color: var(--text);
}
.unit-item.sel { border-color: var(--red); color: var(--red); font-weight: bold; }
.hint { font-size: 12px; color: var(--orange); }

/* ---------- 个人主页 ---------- */
.profile-grid { display: grid; grid-template-columns: 300px 1fr; column-gap: 14px; row-gap: 0; padding: 14px 0; }
.profile-left { text-align: left; }
.profile-left .ph-card { margin: 0 auto 6px; }
.wardrobe-stage {
  position: relative; width: 100%; height: 160px; overflow: hidden;
  background: transparent; border: 0;
}
.wardrobe-slide {
  position: absolute; left: 50%; top: 0; width: 100px; height: 150px;
  transform: translateX(-50%) scale(.82); transform-origin: top center;
  opacity: 0; z-index: 1; pointer-events: none;
  transition: left .55s cubic-bezier(.22,.61,.36,1),
              opacity .45s ease,
              transform .55s cubic-bezier(.22,.61,.36,1);
  background: transparent; border: 0; box-sizing: border-box;
  will-change: left, opacity, transform; backface-visibility: hidden;
}
.wardrobe-slide img { width: 100%; height: 150px; object-fit: contain; display: block; image-rendering: pixelated; }
.wardrobe-slide.center { left: 50%; opacity: 1; z-index: 3; transform: translateX(-50%) scale(1); pointer-events: auto; }
.wardrobe-slide.prev { left: 22%; opacity: .5; z-index: 2; transform: translateX(-50%) scale(.94); pointer-events: auto; }
.wardrobe-slide.next { left: 78%; opacity: .5; z-index: 2; transform: translateX(-50%) scale(.94); pointer-events: auto; }
.wardrobe-slide.hidden-side { left: 50%; opacity: 0; transform: translateX(-50%) scale(.82); }
.wardrobe-nav {
  position: absolute; top: 64px; z-index: 7; width: 24px; height: 28px; padding: 0;
  border: 1px solid var(--line-strong); background: rgba(255,255,255,.88); color: var(--text);
  font-size: 20px; line-height: 24px; cursor: pointer;
}
.wardrobe-nav.prev { left: 0; }
.wardrobe-nav.next { right: 0; }
.wardrobe-nav:hover { border-color: var(--red); color: var(--red); }
body[data-theme="dark"] .wardrobe-nav { background: rgba(14,16,19,.88); }
.wardrobe-dots {
  position: absolute; left: 0; right: 0; bottom: 4px; z-index: 5;
  display: flex; justify-content: center; gap: 4px; pointer-events: none;
}
.wardrobe-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.65); box-shadow: 0 0 2px rgba(0,0,0,.45); }
.wardrobe-dot.active { background: #F53F3F; }
.wardrobe-del {
  position: absolute; top: 3px; right: 3px; z-index: 8; width: 20px; height: 20px;
  border: 1px solid #F53F3F; background: #FFF; color: #F53F3F; cursor: pointer; line-height: 1;
}
.wardrobe-slide:not(.center) .wardrobe-del { display: none; }
.wardrobe-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.wardrobe-actions .field-note { margin: 0; }
.medal-row { display: flex; gap: 8px; flex-wrap: wrap; }
.medal {
  width: 44px; height: 44px; border: 2px solid var(--line-strong);
  background: #E9E9E9; color: #909090; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}
.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.work-card { border: 2px solid var(--line); background: #FFF; padding: 8px; cursor: pointer; }
.work-card:hover { border-color: var(--red); }
.work-card .ph-cover { width: 100%; height: 110px; }
.work-card .t { font-size: 12px; margin-top: 6px; }
.work-card .m { font-size: 11px; color: var(--text-dim); }

/* ---------- 分页 ---------- */
.pager { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 12px; font-size: 12px; color: var(--text-dim); }
.pager input { width: 48px; border: 2px solid var(--line); font-family: inherit; font-size: 12px; padding: 2px 4px; text-align: center; }

/* ---------- 页脚 ---------- */
footer {
  border-top: 2px solid var(--line-strong);
  background: var(--panel);
  margin-top: 20px;
  padding: 16px 0;
  font-size: 12px;
  color: var(--text-dim);
}
.footer-links { margin-bottom: 6px; }
.footer-links a { margin-right: 14px; }
footer p { line-height: 1.8; }

/* ---------- 占位页 ---------- */
.ph-page-center { max-width: 620px; margin: 40px auto; }
.ph-page-center .panel-body { padding: 24px; text-align: center; }

/* ---------- 提示 ---------- */
#toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
  background: #333; color: #FFF; font-size: 12px;
  padding: 8px 16px; border: 2px solid #FFF; z-index: 99;
  display: none; box-shadow: var(--shadow);
}
#toast.toast-success { background: #00B42A; }
#toast.toast-error { background: #F53F3F; }
#toast.toast-warning { background: #FF7D00; }

/* ---------- 表单页 / 管理后台 ---------- */
.form-panel { max-width: 520px; margin: 30px auto; }
.admin-layout { display: grid; grid-template-columns: 200px 1fr; gap: 14px; padding: 14px 0; }
.admin-nav a {
  display: block; padding: 8px 12px; margin-bottom: 6px;
  border: 2px solid var(--line); background: #FFF;
  font-size: 12px; cursor: pointer; color: var(--text);
}
.admin-nav a.active { border-color: var(--red); color: var(--red); font-weight: bold; }
.admin-sec { display: none; }
.admin-sec.active { display: block; }
.profile-works-grid { display: grid; grid-template-columns: 1fr 320px; gap: 14px; align-items: start; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat-card { border: 2px solid var(--line); background: #FFF; padding: 10px; text-align: center; }
.stat-card b { display: block; font-size: 16px; }
.table { width: 100%; border-collapse: collapse; font-size: 12px; }
.table th, .table td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.table th { background: #F5F5F5; }
.status { display: inline-block; font-size: 11px; padding: 0 6px; border: 1px solid var(--line-strong); }
.status.review { border-color: var(--blue); color: var(--blue); }
.status.passed { border-color: var(--green); color: var(--green); }
.status.rejected { border-color: var(--danger); color: var(--danger); }
.status.pending { border-color: var(--orange); color: var(--orange); }
.field-note { font-size: 12px; color: var(--text-dim); }
.badge-ph {
  width: 30px; height: 30px; flex: none;
  background: #E9E9E9; border: 2px dashed #B0B0B0; color: #909090;
  font-size: 9px; display: flex; align-items: center; justify-content: center;
}
.file-drop {
  border: 2px dashed var(--line-strong);
  background: #FAFAFA;
  padding: 14px;
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
}
.file-drop:hover { border-color: var(--red); color: var(--red); }

/* ---------- 账号页（登录/注册/忘记密码同页） ---------- */
.auth-tabs { display: flex; gap: 4px; margin-bottom: 14px; }
.auth-pane { display: none; }
.auth-pane.active { display: block; }

/* ---------- 社团主页 ---------- */
.guild-home { display: grid; grid-template-columns: 250px 1fr 260px; gap: 14px; padding: 14px 0; align-items: start; }
.guild-cover-center { display: flex; justify-content: center; margin-bottom: 8px; }
.guild-cover-center img { width: 130px; height: 80px; object-fit: cover; display: block; }
.guild-imgs { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 8px 0 4px; }
.guild-imgs img { display: block; }
.guild-name-lg { font-weight: bold; font-size: 16px; color: #333333; text-align: center; margin: 6px 0; }
.guild-info { font-size: 12px; color: var(--text-dim); text-align: left; }
.guild-info div { padding: 3px 0; border-bottom: 1px dashed var(--line-light); }
.guild-announce { white-space: pre-wrap; font-size: 12px; line-height: 1.8; color: var(--text-dim); }
.member-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line-light); }
.member-row:last-child { border-bottom: 0; }
.member-row a { text-decoration: none; }
.member-role { font-size: 11px; border: 1px solid var(--line-strong); padding: 0 5px; flex: none; color: var(--text-dim); }
.member-role.role-owner { color: var(--red); border-color: var(--red); }
.member-role.role-vice { color: var(--blue); border-color: var(--blue); }
.guild-act { width: 100%; margin-top: 8px; }
.guild-role-head { font-size: 12px; font-weight: bold; color: var(--text-dim); padding: 6px 0 2px; border-bottom: 1px dashed var(--line-light); }
.guild-mgmt-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }

/* ---------- 后台 0 阶段框架（系统/版务后台共用） ---------- */
body[data-page="admin"], body[data-page="console"] { background: #F2F3F5; }
/* 版务管理后台（console）与内部管理台（admin）使用同一套骨架，只是功能少一些 */
body[data-page="admin"] .admin-layout,
body[data-page="console"] .admin-layout { grid-template-columns: 260px minmax(0, 1fr); }
.admin-layout {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 100vh;
  padding: 0;
  gap: 0;
  align-items: stretch;
}
.admin-brand {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 22px 16px 16px;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E6EB;
  min-width: 0;
}
body[data-page="admin"] .admin-brand,
body[data-page="console"] .admin-brand { grid-column: 1 / 3; }
.admin-logo { width: 76px; height: 76px; object-fit: contain; flex: none; }
.admin-brand-title { font-size: 21px; font-weight: 800; color: #1D2129; letter-spacing: 1px; }
.admin-brand .field-note { font-size: 12px; color: #86909C; }
.admin-nav {
  grid-row: 2;
  display: block;
  background: #FFFFFF;
  border-right: 0;
  border-bottom: 1px solid #E5E6EB;
  padding: 10px 18px 12px;
  overflow: visible;
}
body[data-page="admin"] .admin-nav,
body[data-page="console"] .admin-nav { grid-column: 1 / 3; }
.admin-nav > a {
  display: inline-block;
  margin: 0 6px 0 0;
  padding: 7px 18px;
  background: #F7F8FA;
  border: 1px solid #E5E6EB;
  font-size: 14px;
  color: #1D2129;
  border-radius: 6px;
}
.admin-nav-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  border-top: 1px solid #F2F3F5;
  margin-top: 8px;
  padding-top: 8px;
}
.admin-nav a {
  display: inline-block;
  border: 0;
  background: transparent;
  margin: 0;
  padding: 7px 14px;
  font-size: 14px;
  color: #4E5969;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.admin-nav > a:hover,
.admin-nav a:hover { background: #F2F3F5; }
.admin-nav a.active {
  border-left: 0;
  background: var(--brand);
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(22, 93, 255, .25);
}
body[data-page="admin"] .admin-nav > a,
body[data-page="console"] .admin-nav > a {
  margin: 0 10px 0 0;
  padding: 7px 16px;
  background: #E8F3FF;
  border: 1px solid #BEDAFF;
  color: var(--accent);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1px;
}
body[data-page="admin"] .admin-nav > a:hover,
body[data-page="console"] .admin-nav > a:hover { background: #D6E8FF; }
body[data-page="admin"] .admin-nav > a.active,
body[data-page="console"] .admin-nav > a.active {
  background: var(--brand);
  color: #FFFFFF;
  font-weight: 700;
}
/* 后台导航的待审红点 */
/* 不可点的主按钮（已购买 / 我的素材 / 仅限指定买家）：盒子和字号与可点按钮完全一致，只用浅灰表示不可点 */
.btn.primary:disabled, .btn.primary[disabled] {
  background: #C9CDD4;
  border-color: #C9CDD4;
  color: #FFF;
  cursor: default;
  box-shadow: none;
}

.nav-red-dot {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  padding: 0 4px;
  margin-left: 6px;
  border-radius: 8px;
  background: #F53F3F;
  color: #FFF;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  vertical-align: top;
}
.admin-nav a { position: relative; }
.admin-nav a .nav-red-dot { vertical-align: middle; }

.admin-nav-title {
  display: inline-block;
  font-size: 15px;
  font-weight: 800;
  color: var(--accent);
  background: #E8F3FF;
  border: 1px solid #BEDAFF;
  padding: 5px 13px;
  border-radius: 6px;
  margin: 0 8px 0 0;
  letter-spacing: 1px;
  user-select: none;
  white-space: nowrap;
}
.admin-layout > .admin-rail {
  grid-row: 3;
  grid-column: 1;
  background: #FFFFFF;
  border-right: 1px solid #E5E6EB;
  padding: 14px;
  overflow-y: auto;
}
body[data-page="admin"] .admin-layout > .admin-rail { height: 1000px; }
body[data-page="admin"] .admin-layout > section {
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
  padding: 20px 24px;
  overflow: auto;
}
/* console 没有左侧用户栏，内容区占满整行 */
body[data-page="console"] .admin-layout > section {
  grid-column: 1 / 3;
  grid-row: 3;
  min-width: 0;
  padding: 20px 24px;
  overflow: auto;
}
.rail-user-row {
  padding: 8px 10px;
  margin-bottom: 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #1D2129;
}
.rail-user-row:hover { background: #E8F3FF; border-color: #BEDAFF; }
.rail-user-row .dt-sub { font-size: 11px; color: #86909C; }
.admin-sec .panel { border: 0; box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 2px 8px -1px rgba(0,0,0,.04); }
.user-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}
.ue-field label {
  display: block;
  font-size: 12px;
  color: #86909C;
  margin-bottom: 4px;
}
.ue-sec-title {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  background: #E8F3FF;
  border: 1px solid #BEDAFF;
  padding: 5px 13px;
  border-radius: 6px;
  margin: 16px 0 10px;
}
.stat-row { grid-template-columns: repeat(6, 1fr); }
body[data-page="admin"] .table th,
body[data-page="console"] .table th {
  border: 0; border-bottom: 1px solid #E5E6EB; background: #FFFFFF;
  color: #86909C; font-weight: 500; font-size: 12px;
}
body[data-page="admin"] .table td,
body[data-page="console"] .table td { border: 0; border-bottom: 1px solid #F2F3F5; }
body[data-page="admin"] .table tbody tr:nth-child(even),
body[data-page="console"] .table tbody tr:nth-child(even) { background: #F7F8FA; }
body[data-page="admin"] .table tbody tr:hover,
body[data-page="console"] .table tbody tr:hover { background: #F2F3F5; }
.batch-bar {
  display: flex; align-items: center; gap: 10px;
  background: #E8F3FF; padding: 8px 12px; margin-bottom: 8px;
  border: 1px solid var(--accent-line); color: var(--accent); font-size: 12px;
}
.dt td { vertical-align: middle; }
.dt-title { font-size: 14px; font-weight: 600; color: #1F2329; }
.dt-sub { font-size: 12px; color: #86909C; line-height: 18px; }
.dt-ops { white-space: nowrap; }
.link-btn { color: var(--accent); text-decoration: none; font-size: 13px; }
.more-wrap { position: relative; display: inline-block; }
.more-btn {
  border: 1px solid #E5E6EB; background: #fff; color: #4E5969;
  width: 26px; height: 26px; line-height: 1; cursor: pointer;
}
.more-menu {
  position: absolute; right: 0; top: 28px; width: 168px; z-index: 60;
  background: #fff; border: 1px solid #E5E6EB; padding: 4px;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}
.more-item {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 7px 10px; font-size: 13px; color: #4E5969; cursor: pointer; text-decoration: none;
}
.more-item:hover { background: #F2F3F5; }
.more-item.danger { color: var(--danger); }
.more-item.danger:hover { background: var(--danger-soft, #FFECE8); }
.more-field { padding: 6px 8px; }
.tag.blue { background: var(--accent-soft); color: var(--accent); border: 0; }
.tag.purple { background: #F2E8FF; color: #722ED1; border: 0; }
.tag.green { background: #E8FFEA; color: #00B42A; border: 0; }
.tag.gray { background: #F2F3F5; color: #86909C; border: 0; }
.tag.red { background: var(--danger-soft, #FFECE8); color: var(--danger); border: 0; }
.tag.orange { background: #FFF7E8; color: #FF7D00; border: 0; }
.page-search {
  width: 240px; height: 30px; box-sizing: border-box;
  border: 1px solid #C9CDD4; border-radius: 4px; padding: 0 10px;
  font-size: 13px; color: #1F2329; margin-bottom: 10px;
}
.page-search:focus { outline: none; border-color: var(--accent); }

/* 编辑抽屉 */
.drawer-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 200; display: none;
}
.admin-drawer {
  position: fixed; top: 0; right: -520px; width: 480px; height: 100%;
  background: #fff; z-index: 210; transition: right .3s ease-in-out;
  display: flex; flex-direction: column; box-shadow: -2px 0 8px rgba(0,0,0,.08);
}
.admin-drawer.open { right: 0; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 56px; border-bottom: 1px solid #E5E6EB;
  font-size: 16px; font-weight: 600; color: #1F2329;
}
.drawer-close { border: 0; background: none; font-size: 20px; cursor: pointer; color: #86909C; }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.drawer-body .form-row { margin-bottom: 18px; }
.drawer-body label { display: block; font-size: 14px; color: #1F2329; margin-bottom: 8px; }
.drawer-body .input { width: 100%; box-sizing: border-box; }
.drawer-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 24px; border-top: 1px solid #E5E6EB;
}
.confirm-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 300; display: none; align-items: center; justify-content: center;
}
.confirm-box {
  width: 400px; background: #fff; border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12); overflow: hidden;
}
.confirm-head {
  display: flex; justify-content: space-between; align-items: center;
  height: 56px; padding: 0 20px; font-size: 16px; font-weight: 600;
  border-bottom: 1px solid #E5E6EB;
}
.confirm-body { padding: 24px; font-size: 14px; color: #4E5969; line-height: 1.8; }
.confirm-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid #E5E6EB; }
.btn.danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.empty-state { padding: 48px 0; text-align: center; color: #86909C; font-size: 14px; }
.empty-state > div:first-child { font-size: 42px; margin-bottom: 8px; }
.wm-img {
  position: relative; display: inline-block; max-width: 100%; overflow: hidden;
  /* 预览图本身已经是白底方图，这里也用纯白，避免四周露出"透明格子"底色 */
  background: #FFF;
}
.wm-img img { max-width: 100%; height: auto; display: block; }
.wm-img::after {
  content: '皮卡堂社区 · 水印预览';
  position: absolute; left: 0; right: 0; bottom: 0;
  text-align: center; font-size: 12px; color: rgba(255,255,255,.9);
  background: rgba(0,0,0,.25); padding: 2px 0; pointer-events: none;
}
.list-pager {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 2px; color: #86909C; font-size: 12px;
}
.list-pager button { margin: 0 4px; }

/* ---------- 暗黑模式 ---------- */
body[data-theme="dark"] {
  --bg: #17191C; --panel: #23272C; --line: #3A3F45; --line-strong: #565D66;
  --line-light: #2E3338; --text: #E8EAED; --text-dim: #9AA2AB;
  --brand: #165DFF; --brand-deep: #0E42D2; --accent: #165DFF;
  --brand-soft: #123A66; --brand-line: #1E4E8A;
  --accent-soft: #123A66; --accent-line: #1E4E8A;
  --danger: #F53F3F; --danger-deep: #C62828;
  --red: var(--brand); --red-deep: var(--brand-deep); --blue: var(--accent);
  --surface-raised: #1B1E22; --surface-soft: #2A2F35; --surface-deep: #0E1013; --panel-soft: #1E2226;
  --disabled-bg: #2A2F35; --disabled-border: #565D66; --disabled-text: #9AA2AB;
  background: var(--bg); color: var(--text);
}
body[data-theme="dark"] .panel,
body[data-theme="dark"] .board-card,
body[data-theme="dark"] .staff-login-card,
body[data-theme="dark"] .admin-nav,
body[data-theme="dark"] .admin-brand,
body[data-theme="dark"] .admin-drawer,
body[data-theme="dark"] .confirm-box,
body[data-theme="dark"] .more-menu { background: #23272C; color: #E8EAED; }
body[data-theme="dark"] .admin-brand { border-bottom-color: #3A3F45; }
body[data-theme="dark"] .admin-brand-title { color: #F2F3F5; }
body[data-theme="dark"] .admin-nav { border-bottom-color: #3A3F45; }
body[data-theme="dark"] .admin-nav-group::before { background: #3A3F45; }
body[data-theme="dark"] .admin-nav a { color: #C9CDD4; }
body[data-theme="dark"] .admin-nav a:hover { background: #2A2F35; }
body[data-theme="dark"] .admin-nav a.active { background: var(--brand); color: #FFFFFF; }
body[data-theme="dark"] .admin-nav-title { color: #86909C; }
body[data-theme="dark"] .admin-nav-title { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
body[data-theme="dark"] .admin-nav > a { background: #2A2F35; border-color: #3A3F45; color: #E8EAED; }
body[data-theme="dark"] .admin-rail { background: #1E2226; border-right-color: #3A3F45; }
body[data-theme="dark"] .ue-sec-title { color: #7CC5FF; background: #123A66; border-color: #1E4E8A; }
body[data-theme="dark"] .rail-user-row { color: #E8EAED; }
body[data-theme="dark"] .rail-user-row:hover { background: #123A66; border-color: #1E4E8A; }
body[data-theme="dark"] .table th { background: #23272C; color: #9AA2AB; }
body[data-theme="dark"] .table tbody tr:nth-child(even) { background: #1E2226; }
body[data-theme="dark"] .table tbody tr:hover { background: #2A2F35; }
body[data-theme="dark"] input, body[data-theme="dark"] textarea, body[data-theme="dark"] select {
  background: #1B1E22; color: #E8EAED; border-color: #3A3F45;
}
body[data-theme="dark"] .dt-title,
body[data-theme="dark"] .drawer-head,
body[data-theme="dark"] .confirm-head { color: #F2F3F5; }
body[data-theme="dark"] .batch-bar { background: #123A66; border-color: #1E4E8A; }
body[data-theme="dark"] .work-body { background: var(--surface-raised); color: var(--text); }
body[data-theme="dark"] .btn { background: #2A2F35; border-color: #565D66; color: #E8EAED; }
body[data-theme="dark"] .btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
body[data-theme="dark"] .content-stage { background: var(--surface-deep); color: var(--text); }
body[data-theme="dark"] .article-body, body[data-theme="dark"] .catalog a { color: var(--text); }
.nav-toggle { display: none; }

/* 暗色主题强制规则 */
body[data-theme="dark"] .btn,
body[data-theme="dark"] .tab,
body[data-theme="dark"] .float-btn,
body[data-theme="dark"] .more-btn,
body[data-theme="dark"] .side-search button,
body[data-theme="dark"] .more-item,
body[data-theme="dark"] .guild-cover-center,
body[data-theme="dark"] .batch-bar button {
  background: var(--surface-deep) !important;
  color: #FFFFFF !important;
  border-color: var(--brand) !important;
}
body[data-theme="dark"] .btn:hover,
body[data-theme="dark"] .more-item:hover,
body[data-theme="dark"] .float-btn:hover {
  color: #FFFFFF !important;
  background: #23272C !important;
}
body[data-theme="dark"] .btn.primary {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}
body[data-theme="dark"] .link-btn { color: var(--accent); }
body[data-theme="dark"] .work-title,
body[data-theme="dark"] .board-name,
body[data-theme="dark"] .post-title,
body[data-theme="dark"] .id-name,
body[data-theme="dark"] .panel-title { color: var(--text) !important; }
body[data-theme="dark"] .content-stage,
body[data-theme="dark"] .article-body {
  background: var(--surface-deep) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .author-title-frame {
  background: #FFFFFF !important;
  color: #333333 !important;
  border: 1px solid #FFFFFF !important;
}
body[data-theme="dark"] #profile-name,
body[data-theme="dark"] .id-name { color: var(--text) !important; }
body[data-theme="dark"] .work-card,
body[data-theme="dark"] .work-card img { border-color: #3A3F45 !important; }
body[data-theme="dark"] div[style*="border:1px solid"] { border-color: #3A3F45 !important; }
body[data-theme="dark"] div[style*="border:2px solid"] { border-color: #3A3F45 !important; }
body[data-theme="dark"] .tab.active {
  background: var(--brand) !important;
  color: #FFFFFF !important;
  border-color: var(--brand) !important;
}

body[data-theme="dark"] #profile-name,
body[data-theme="dark"] #profile-uid,
body[data-theme="dark"] .id-name {
  color: var(--text) !important;
}
body[data-theme="dark"] div[style*="#E5E6EB"],
body[data-theme="dark"] div[style*="#FFFFFF"],
body[data-theme="dark"] div[style*="#fff"],
body[data-theme="dark"] div[style*="var(--line)"] {
  border-color: #3A3F45 !important;
}
.author-title-frame { border-style: solid !important; }
body[data-theme="dark"] #city-list > div,
body[data-theme="dark"] #city-store > div,
body[data-theme="dark"] #profile-newest .work-card,
body[data-theme="dark"] .work-card {
  background: #23272C !important;
}
body[data-theme="dark"] .post-title a,
body[data-theme="dark"] #post-list .post-title a {
  color: var(--text);
  font-weight: normal;
}

/* ---------- 移动端基础适配（阶段5-D） ---------- */
@media (max-width: 900px) {
  .container { width: 100%; padding: 0 10px; }
  .main-nav { display: none; }
  .nav-toggle { display: block; margin-left: auto; font-size: 20px; background: none; border: 0; cursor: pointer; color: var(--text); }
  .main-nav.open {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: 8px 16px; z-index: 90;
  }
  .main-nav.open a { padding: 6px 0; }
  .page-main, .detail-grid, .profile-grid, .guild-home, .admin-layout { grid-template-columns: 1fr; }
  .profile-banner { width: 100% !important; max-width: 100% !important; }
  .profile-grid > *, .profile-works-grid > * { min-width: 0; }
  .submit-grid { grid-template-columns: 1fr !important; }
  .submit-grid > aside { width: auto !important; }
  body[data-page="share-city"] main.container > div { grid-template-columns: 1fr !important; }
  body[data-page="share-city"] #store { width: auto; min-width: 0; }
  .admin-layout { min-height: auto; grid-template-rows: auto auto auto minmax(0, 1fr); }
  .admin-brand { grid-column: 1; grid-row: 1; }
  .admin-nav { grid-column: 1; grid-row: 2; overflow-x: auto; display: flex; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid #E5E6EB; }
  .admin-nav .admin-nav-group { display: block; }
  .admin-layout > .admin-rail { grid-column: 1; grid-row: 3; max-height: 240px; border-right: 0; border-bottom: 1px solid #E5E6EB; }
  .admin-layout > section { grid-column: 1; grid-row: 4; padding: 14px 10px; }
  .admin-brand { padding: 12px 10px 8px; }
  .admin-logo { width: 52px; height: 52px; }
  .admin-brand-title { font-size: 17px; }
  .admin-nav { padding: 8px 10px; }
  .admin-nav a { padding: 6px 10px; font-size: 13px; }
  .admin-nav .admin-nav-title { margin: 4px 8px 4px 0; padding: 4px 10px; font-size: 13px; }
  .admin-layout > .admin-rail { height: auto; max-height: 260px; }
  .admin-layout > section { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-sec .stat-row { grid-template-columns: repeat(3, 1fr); }
  .admin-sec .stat-card { padding: 8px 4px; font-size: 12px; }
  .admin-sec .stat-card b { font-size: 14px; }
  .admin-sec .table { min-width: 680px; }
  .admin-sec .panel, .admin-sec .panel-body { overflow-x: auto; }
  .admin-sec .form-row { display: block; }
  .admin-sec .form-row label { display: block; width: auto; margin-bottom: 4px; }
  .user-edit-grid { grid-template-columns: 1fr; }
  .guild-home, .page-main > aside, .detail-grid aside { position: static; }
  .board-grid, .works-grid, #city-list { grid-template-columns: repeat(2, 1fr) !important; }
  #store-list { grid-template-columns: 1fr 1fr !important; }
  .admin-drawer { width: 100vw; right: -100vw; }
  .admin-drawer.open { right: 0; }
  footer .footer-links { flex-wrap: wrap; gap: 6px; font-size: 12px; }
  .top-user { font-size: 12px; }
  #sh-extra-list [data-extra-row] { grid-template-columns: 1fr !important; }
}

/* ---------- 后台独立登录门 ---------- */
.staff-login {
  position: fixed; inset: 0; z-index: 999;
  background: #F5F7FA;
  display: flex; align-items: center; justify-content: center;
}
.staff-login-card {
  width: 360px; background: #fff; border: 1px solid #E5E6EB;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  padding: 40px 32px 32px; display: flex; flex-direction: column; gap: 14px;
  text-align: center;
}
.staff-login-card img { width: 160px; margin: 0 auto; }
.staff-login-title { font-size: 20px; font-weight: 600; color: #1D2129; }
.staff-login-card .input { width: 100%; box-sizing: border-box; }
.staff-login-card .btn { width: 100%; }
.staff-login-msg { font-size: 12px; color: #F53F3F; min-height: 16px; }

/* ===== v119 深色模式修正 =====
   1) 禁用态的主按钮（分享城的「已购买」「我的素材」）：深色下原来没有对应规则，
      被 .btn.primary 的蓝色盖住，所以和「购买」长得一样。这里给禁用态单独的灰底样式。
   2) 正文文字：正文块原来在深色下仍是深色字，导致看不清，这里统一给浅色。 */
body[data-theme="dark"] .btn.primary:disabled,
body[data-theme="dark"] .btn.primary[disabled] {
  background: #2A2F35;
  border-color: #565D66;
  color: #86909C;
}
body[data-theme="dark"] .btn:disabled,
body[data-theme="dark"] .btn[disabled] {
  background: #2A2F35;
  border-color: #565D66;
  color: #86909C;
}
body[data-theme="dark"] .article-body,
body[data-theme="dark"] .article-body p,
body[data-theme="dark"] .article-body div,
body[data-theme="dark"] .article-body span,
body[data-theme="dark"] .work-body,
body[data-theme="dark"] .work-body p {
  color: #DDE1E6;
}
/* ===== v120 深色模式修正（第二版：带 !important，压过内联样式）=====
   原因：分享城的按钮带内联 style，作品标题带作者选的内联颜色，
   普通选择器优先级不够，所以上一版没生效。 */
body[data-theme="dark"] .btn.primary:disabled,
body[data-theme="dark"] .btn.primary[disabled] {
  background: #2A2F35 !important;
  border-color: #565D66 !important;
  color: #86909C !important;
}
body[data-theme="dark"] .btn:disabled,
body[data-theme="dark"] .btn[disabled] {
  background: #2A2F35 !important;
  border-color: #565D66 !important;
  color: #86909C !important;
}
body[data-theme="dark"] .work-title,
body[data-theme="dark"] .post-title,
body[data-theme="dark"] .post-title a,
body[data-theme="dark"] .article-body,
body[data-theme="dark"] .article-body *,
body[data-theme="dark"] .work-body,
body[data-theme="dark"] .work-body * {
  color: #DDE1E6 !important;
}

/* ===== v129 ===== */
/* 编辑器工具栏的小控件：全局 .input 带 2px 边框 + 6px 内边距，塞进 26px 高会把文字挤掉（"字号"被切） */
.pk-rt-sel { box-sizing: border-box; height: 26px; padding: 0 4px; font-size: 12px; line-height: 1; }
/* 作品页：点赞/收藏/催更 已点高亮（未点保持白色，已点红字红边） */
.interact-bar .btn.active { color: var(--danger); border-color: var(--danger); }
/* 封面右上角"完结"角标 */
.cover-wrap { position: relative; display: inline-block; }
.cover-done { position: absolute; top: 6px; right: 6px; background: var(--danger); color: #fff; font-size: 11px;
  line-height: 1; padding: 3px 6px; border-radius: 2px; letter-spacing: 1px; z-index: 2; }
/* ===== v130：皮卡剧 / 皮剧本 作品卡片网格（4 列 × 4 行 = 16 个/页）===== */
/* v202：皮卡剧 / 皮剧本固定 243px 卡片，封面保持 225×140。 */
.work-cards { display: grid; grid-template-columns: repeat(4, 243px); gap: 11px 6px; justify-content: center; }
@media (max-width: 1040px) { .work-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px 6px; padding: 0 6px; } }
@media (max-width: 720px) { .work-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 6px; padding: 0 6px; } }
@media (max-width: 1340px) {
  .page-main.work-card-layout {
    width: calc(100% - 24px);
    grid-template-columns: minmax(0, 1fr) 300px;
  }
  .page-main.work-card-layout .work-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .page-main.work-card-layout .work-card .wc-cover img,
  .page-main.work-card-layout .work-card .wc-cover .ph {
    width: 100%;
  }
}
@media (max-width: 900px) {
  .page-main.work-card-layout {
    width: 100%;
    grid-template-columns: 1fr;
  }
  html[data-site-theme="current"] .page-main.work-card-layout .work-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 6px;
    padding: 0 6px;
  }
  html[data-site-theme="current"] .page-main.work-card-layout .work-card .wc-cover img,
  html[data-site-theme="current"] .page-main.work-card-layout .work-card .wc-cover .ph {
    width: 100%;
    height: auto;
    aspect-ratio: 225 / 140;
  }
}
.work-card { width: 100%; min-width: 0; height: 270px; box-sizing: border-box; background: #fff; overflow: hidden;
  border: 1px solid var(--line); padding: 8px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.work-card:hover { border-color: var(--line-strong); box-shadow: 0 2px 10px rgba(0,0,0,.07); }
.work-card .wc-cover { position: relative; display: block; flex: 0 0 auto; }
/* 封面固定 225×140，并完整铺满封面位；不再缩成约 193×140。 */
.work-card .wc-cover img { width: 225px; height: 140px; object-fit: cover; display: block; border: 1px solid var(--line); }
.work-card .wc-cover .ph { width: 225px; height: 140px; }
/* 窄屏（卡片等分后不足 225）时封面随卡片缩放，避免溢出 */
@media (max-width: 1040px) {
  .work-card .wc-cover img { width: 100%; }
  .work-card .wc-cover .ph { width: 100%; }
}
.work-card .wc-title { display: block; font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v131a：头像在左（保持原来的 36×36 裁切），右侧两行：标题+右侧标签 / 作者·UID·日期 */
.work-card .wc-head { display: flex; gap: 6px; min-width: 0; align-items: flex-start; }
.work-card .wc-head-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.work-card .wc-title-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.work-card .wc-title { flex: 1 1 auto; min-width: 0; }
.work-card .wc-tags { flex: 0 1 auto; min-width: 0; max-width: 104px; display: flex; gap: 3px; overflow: hidden;
  font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.work-card .wc-tags .tag { flex: none; }
.work-card .wc-author { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.work-card .wc-name { color: var(--text); text-decoration: none; max-width: 62px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work-card .wc-name:hover { text-decoration: underline; }
.work-card .wc-uid { color: var(--accent); text-decoration: none; flex: none; }
.work-card .wc-uid:hover { text-decoration: underline; }
.work-card .wc-time { margin-left: auto; flex: none; opacity: .75; }
/* v133：皮卡剧详情页的连环画翻页区——高度固定 500px，不再随图片高度跳动；
   用 flex + 子项 margin:auto 居中：内容比 500 高时自动从顶部开始并可滚动（不会被裁掉顶部）。 */
.content-page.page-fixed { width: 100%; max-width: 100%; height: 500px; overflow: auto; box-sizing: border-box; padding: 8px 0; }
.content-page.page-fixed.active { display: flex; }   /* 只有当前页用 flex（避免覆盖 .content-page 的 display:none） */
.content-page.page-fixed > * { margin: auto; }
/* v180：皮卡剧 200% 独立弹窗，原帖 DOM 与尺寸完全不变 */
.pikaji-zoom-mask {
  position: fixed; inset: 0; z-index: 1500; display: flex; align-items: center; justify-content: center;
  padding: 20px 0; box-sizing: border-box; background: rgba(0, 0, 0, .68);
}
.pikaji-zoom-dialog {
  display: flex; flex-direction: column; width: min(100vw, 1900px); max-width: 100vw; max-height: 94vh;
  min-width: 0; background: var(--panel); border: 2px solid var(--line-strong);
  box-shadow: 0 14px 48px rgba(0, 0, 0, .34);
}
.pikaji-zoom-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 12px; border-bottom: 2px solid var(--line);
}
.pikaji-zoom-viewport {
  min-height: 220px; max-height: calc(92vh - 126px); overflow: auto;
  width: calc(100% + 2px); margin-right: -2px; background: var(--bg);
}
.pikaji-zoom-shell { margin: 0; }
.pikaji-zoom-shell, .pikaji-zoom-inner { box-sizing: border-box; }
.pikaji-zoom-stage { margin: 0; }
/* 200% 预览是像素图放大，禁止浏览器做双线性平滑。 */
.pikaji-zoom-stage,
.pikaji-zoom-stage img {
  image-rendering: pixelated;
}
.pikaji-zoom-nav { flex: none; background: var(--panel); }
body[data-theme="dark"] .pikaji-zoom-viewport { background: var(--surface-deep); }
body[data-theme="dark"] .content-page.page-fixed { background: var(--surface-deep); }
.mention-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.mention-link:hover { text-decoration: underline; }
.mention-pop {
  display: none; position: fixed; z-index: 1800; width: 240px; max-height: 250px; overflow: auto;
  background: var(--panel); border: 2px solid var(--line-strong); box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.mention-option {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 7px 9px; background: transparent; border: 0; border-bottom: 1px solid var(--line-light);
  color: var(--text); font-family: inherit; cursor: pointer; text-align: left;
}
.mention-option:hover { background: var(--bg); }
.mention-option b { font-size: 13px; }
.mention-option span { color: var(--text-dim); font-size: 11px; }
.mention-editor { white-space: pre-wrap; line-height: 1.7; outline: none; }
.mention-editor:empty::before { content: attr(data-placeholder); color: var(--text-dim); pointer-events: none; }
.mention-editor .mention-link { user-select: text; }
/* v224：评论与楼中楼回复使用 contenteditable，不是 textarea，单独补齐深色输入框样式。 */
body[data-theme="dark"] .mention-editor {
  background: #1B1E22 !important;
  color: #E8EAED !important;
  border-color: #3A3F45 !important;
  caret-color: #E8EAED;
}
body[data-theme="dark"] .mention-editor:empty::before { color: var(--text-dim); }
.material-extra-row {
  display: grid;
  grid-template-columns: 130px minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: center;
}
@media (max-width: 560px) {
  .material-extra-row { grid-template-columns: 1fr; }
  .material-extra-row .btn { justify-self: start; }
}
.thread-target { animation: threadTargetFlash 2.6s ease; }
@keyframes threadTargetFlash {
  0%, 100% { background: transparent; }
  12%, 72% { background: #FFF7D6; box-shadow: inset 0 0 0 2px #F5B400; }
}
/* v138：作品介绍（单行省略，高度固定 250 不被撑开） */
.work-card .wc-desc { font-size: 11px; line-height: 1.45; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 0 auto; }
/* v137：底部点赞/收藏 —— 用站内原来的图标与字号（与行列表 .post-stats 一致） */
.work-card .wc-foot { margin-top: auto; display: flex; align-items: center; gap: 14px;
  font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; }
.work-card .wc-foot b { display: inline; font-size: 14px; color: var(--text); margin-left: 3px; }
/* v154：连载/完结移到点赞行右侧；置顶等标签单独一行放在最下面 */
.work-card .wc-stats { display: flex; align-items: center; gap: 14px; }
.work-card .wc-serial { margin-left: auto; flex: none; display: flex; align-items: center; gap: 4px; padding-right: 2px; }
.work-card .wc-serial .tag { margin-right: 0; }
.work-card .wc-tags-row { display: flex; align-items: center; gap: 3px; overflow: hidden; flex: 0 0 auto; }
.work-card .wc-tags-row .tag { flex: none; }
.work-card .wc-tags-row .tag { margin-right: 0; }

.cover-serial { position: absolute; top: 6px; right: 6px; background: var(--brand); color: #fff; font-size: 11px;
  line-height: 1; padding: 3px 6px; border-radius: 2px; letter-spacing: 1px; z-index: 2; }
body[data-theme="dark"] .work-card { background: #1D1F23; }

/* v229：现站主题统一使用语义颜色。后台本身保持中性色，避免错误配色导致无法进入还原入口。 */
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) .panel,
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) .work-card,
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) .board-card,
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) .look-img,
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) .user-menu,
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) .float-btn,
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) .home-banner,
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) .profile-banner,
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) .staff-login-card {
  background-color: var(--panel) !important;
}
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) .work-body,
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) .content-stage,
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) .main-nav.open {
  background-color: var(--surface-raised) !important;
  color: var(--text) !important;
}
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) input,
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) textarea,
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) select,
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) .mention-editor,
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) .pk-rich-body {
  background-color: var(--surface-raised) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) .btn:not(.primary):not(.danger-solid):not(.tip-btn):not(:disabled),
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) .tab:not(.active) {
  background-color: var(--surface-soft) !important;
  color: var(--text) !important;
  border-color: var(--line-strong) !important;
}
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) .btn.primary:not(:disabled),
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) .tab.active {
  background-color: var(--brand) !important;
  border-color: var(--brand-deep) !important;
  color: #FFFFFF !important;
}
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) .btn:disabled,
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) .btn[disabled],
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) .btn.primary:disabled,
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) .btn.primary[disabled],
html[data-site-theme="current"] body:not([data-page="admin"]):not([data-page="console"]) .checkin-btn.is-done {
  background-color: var(--disabled-bg) !important;
  border-color: var(--disabled-border) !important;
  color: var(--disabled-text) !important;
  cursor: default !important;
  opacity: 1;
  box-shadow: none;
}
.theme-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.theme-appearance-card {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 14px;
}
.theme-appearance-title {
  margin-bottom: 10px;
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
}
.theme-color-row {
  display: grid;
  grid-template-columns: 132px 42px minmax(90px, 1fr);
  gap: 8px;
  align-items: center;
  margin-bottom: 7px;
}
.theme-color-row label { color: var(--text-dim); font-size: 12px; }
.theme-color-row input[type="color"] {
  width: 42px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
}
.theme-bg-preview {
  width: 100%;
  height: 130px;
  margin-top: 10px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.theme-bounce-preview {
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line);
  background: var(--surface-raised);
  color: var(--text-dim);
  overflow: hidden;
}
.theme-bounce-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.theme-logo-config {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.theme-logo-config-title {
  margin-bottom: 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.theme-logo-preview {
  width: 220px;
  max-width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px dashed var(--line);
  background: var(--surface-raised);
  overflow: hidden;
}
.theme-logo-preview img {
  display: block;
  max-width: 190px;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.theme-logo-mask {
  display: block;
  width: 190px;
  height: 44px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
@media (max-width: 900px) {
  .theme-editor-grid { grid-template-columns: 1fr; }
}

/* 经典主题测试环境的主题选择器；只新增控件，不改变原页面其他样式。 */
.classic-theme-switcher {
  position: fixed;
  left: 20px;
  bottom: 24px;
  z-index: 1800;
  display: flex;
  gap: 8px;
  margin: 0;
  font-size: 12px;
}

.classic-theme-switcher + .top-user {
  margin-left: 0;
}

.classic-theme-toggle {
  min-height: 30px;
  padding: 3px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.classic-theme-toggle b {
  margin: 0 4px;
  color: var(--red);
}

.classic-theme-toggle i {
  color: var(--text-dim);
  font-style: normal;
}

.classic-color-dot,
.classic-theme-dot {
  display: flex;
  width: 30px;
  height: 30px;
  padding: 0;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #414143;
  border: 1px solid #6c6c6e;
  border-radius: 50%;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .24);
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.classic-theme-dot {
  background: var(--red);
  border-color: var(--red);
}

.classic-color-dot:hover,
.classic-theme-dot:hover {
  color: #fff;
  background: #222;
}

.classic-theme-menu {
  position: absolute;
  top: 36px;
  right: 0;
  z-index: 300;
  width: 136px;
  padding: 4px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.classic-theme-menu button {
  display: block;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.classic-theme-menu button:hover,
.classic-theme-menu button.active {
  background: var(--bg);
  color: var(--red);
}

@media (max-width: 760px) {
  .classic-theme-switcher {
    left: 12px;
    bottom: 14px;
  }
}

/* ===== v234：互动状态、形象卡点赞、社团网格与手机端重排 ===== */
.card-view { position: relative; }
.card-like-btn {
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 4;
  display: inline-flex;
  min-width: 34px;
  height: 23px;
  padding: 0 5px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-dim);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
  font-family: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: opacity .16s ease, transform .16s ease, color .16s ease, border-color .16s ease;
}
.card-like-btn .card-like-heart { font-size: 15px; line-height: 1; }
.card-like-btn b { font-size: 11px; font-weight: 700; }
.card-like-btn:hover,
.card-like-btn.active {
  color: var(--danger);
  border-color: var(--danger);
}
.card-like-btn.active .card-like-heart { transform: scale(1.08); }
.card-like-btn.is-own { cursor: default; opacity: .65; }
.card-view:hover > .card-like-btn { transform: translateY(-1px); }

html[data-site-theme="current"] .interact-bar #btn-like.active,
html[data-site-theme="current"] .interact-bar #btn-cuigeng.active,
html[data-site-theme="current"] .interact-bar #btn-collect.active,
html[data-site-theme="current"] .interact-bar #btn-bump.active,
html[data-site-theme="current"] .interact-bar #btn-like.active:hover,
html[data-site-theme="current"] .interact-bar #btn-cuigeng.active:hover,
html[data-site-theme="current"] .interact-bar #btn-collect.active:hover,
html[data-site-theme="current"] .interact-bar #btn-bump.active:hover {
  color: var(--brand) !important;
  background-color: var(--brand-soft) !important;
  border-color: var(--brand) !important;
  box-shadow: none;
}
html[data-site-theme="current"] .interact-bar .btn.active .ic-heart,
html[data-site-theme="current"] .interact-bar .btn.active .ic-star {
  filter: none;
  opacity: 1;
}
html[data-site-theme="current"] .interact-bar .btn.active[disabled] {
  color: var(--disabled-text) !important;
  background-color: var(--disabled-bg) !important;
  border-color: var(--disabled-border) !important;
}

html[data-site-theme="current"] body[data-page="guild"] .current-guild-grid {
  display: grid;
  grid-template-columns: repeat(5, 136px);
  justify-content: space-between;
  align-content: start;
  gap: 18px 14px;
  width: 100%;
}
html[data-site-theme="current"] body[data-page="guild"] .current-guild-card {
  width: 136px;
  min-width: 0;
  cursor: pointer;
}
html[data-site-theme="current"] body[data-page="guild"] .current-guild-card .g-cover,
html[data-site-theme="current"] body[data-page="guild"] .current-guild-card .ph {
  width: 136px !important;
  height: 84px !important;
  object-fit: contain !important;
  display: block;
}
html[data-site-theme="current"] body[data-page="guild"] .current-guild-bottom {
  display: flex;
  min-width: 0;
  margin-top: 5px;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}
html[data-site-theme="current"] body[data-page="guild"] .current-guild-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-site-theme="current"] body[data-page="guild"] .current-guild-count {
  flex: 0 0 auto;
  color: var(--text-dim);
  font-size: 11px;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .card-like-btn { opacity: .58; }
  .card-view:hover .card-like-btn,
  .card-like-btn:focus-visible { opacity: 1; }
}

@media (max-width: 900px) {
  .card-like-btn { opacity: 1; }
  html[data-site-theme="current"] body[data-page="guild"] .current-guild-grid {
    grid-template-columns: repeat(4, 136px);
  }
  .mobile-home-checkin {
    width: 100%;
    margin: 0 0 14px !important;
  }
}
@media (max-width: 760px) {
  html[data-site-theme="current"] body[data-page="guild"] .current-guild-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 10px;
  }
  html[data-site-theme="current"] body[data-page="guild"] .current-guild-card {
    width: 100%;
  }
  html[data-site-theme="current"] body[data-page="guild"] .current-guild-card .g-cover,
  html[data-site-theme="current"] body[data-page="guild"] .current-guild-card .ph {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 130 / 80;
  }

  html[data-site-theme] body[data-page="profile"] main.container,
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile,
  html[data-site-theme] body[data-page="profile"] .profile-grid,
  html[data-site-theme] body[data-page="profile"] .profile-grid > * {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile-hero,
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile-hero.has-active-bond {
    display: flex !important;
    box-sizing: border-box;
    width: 100% !important;
    min-height: 0 !important;
    padding: 112px 10px 10px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center top !important;
  }
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile-hero > #profile-banner,
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile-hero > #profile-banner.classic-ref-profile-banner {
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 112px !important;
    transform: none !important;
  }
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile-left,
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile-hero.has-active-bond .classic-ref-profile-left {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  html[data-site-theme] body[data-page="profile"] .classic-ref-card-box,
  html[data-site-theme] body[data-page="profile"] .classic-ref-card-box > .card-view {
    width: 110px !important;
    max-width: 110px !important;
    margin: 0 auto !important;
  }
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile-summary,
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile-hero.classic-profile-public .classic-ref-profile-summary {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
  }
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile-name-line,
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile-actions,
  html[data-site-theme] body[data-page="profile"] #profile-exchange-wrap,
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile-tabs {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    overflow-x: auto !important;
  }
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile-below {
    position: relative !important;
    top: auto !important;
    display: flex !important;
    box-sizing: border-box;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px !important;
    flex-wrap: wrap !important;
  }
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile-below #medal-row,
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile-counts {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin: 0 !important;
  }
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile-counts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile-content,
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile-details,
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile-info-row,
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile-info-row > *,
  html[data-site-theme] body[data-page="profile"] #wardrobe-panel,
  html[data-site-theme] body[data-page="profile"] #profile-redeem-panel {
    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  html[data-site-theme] body[data-page="profile"] #profile-works,
  html[data-site-theme] body[data-page="profile"] #profile-works .post-row,
  html[data-site-theme] body[data-page="profile"] .profile-works-grid,
  html[data-site-theme] body[data-page="profile"] .works-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html[data-site-theme] body[data-page="profile"] .profile-works-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  html[data-site-theme] body[data-page="profile"] .profile-left,
  html[data-site-theme] body[data-page="profile"] .profile-grid > section {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html[data-site-theme] body[data-page="profile"] #profile-works .post-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  html[data-site-theme] body[data-page="profile"] #profile-works .post-main {
    flex: 1 1 190px !important;
    min-width: 0 !important;
  }
  html[data-site-theme] body[data-page="profile"] #profile-works .post-stats {
    width: 100% !important;
    justify-content: flex-end !important;
  }
  html[data-site-theme] body[data-page="profile"] #profile-works .cover-wrap,
  html[data-site-theme] body[data-page="profile"] #profile-works .cover-wrap img {
    max-width: 100% !important;
    height: auto !important;
  }
}
@media (max-width: 430px) {
  html[data-site-theme="current"] body[data-page="guild"] .current-guild-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile-hero,
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile-hero.has-active-bond {
    padding-top: 94px !important;
  }
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile-hero > #profile-banner,
  html[data-site-theme] body[data-page="profile"] .classic-ref-profile-hero > #profile-banner.classic-ref-profile-banner {
    height: 94px !important;
  }
}

/* v236：消息中心分板块提醒、单条删除与批量删除 */
.notification-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.notification-section-toggle {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  cursor: pointer;
}
.notification-section-toggle .sub { margin-left: 6px; }
.notification-section-tools {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.notification-pref,
.notification-row-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.notification-pref input,
.notification-row-check input { margin: 0; }
.notification-section-body { padding: 0 10px 10px; }
.notification-batch-bar {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 0 4px;
}
@media (max-width: 620px) {
  .notification-section-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .notification-section-tools {
    width: 100%;
    justify-content: space-between;
  }
  .notification-section-body { padding-right: 6px; padding-left: 6px; }
}

/* v237：皮卡剧 500px 阅读区滚动弹幕 */
.content-page.page-fixed.has-danmaku {
  position: relative;
  overflow: hidden;
  padding: 0;
}
.content-page.page-fixed.has-danmaku.active { display: block; }
.content-page.page-fixed.has-danmaku > .pikaji-page-scroll,
.content-page.page-fixed.has-danmaku > .pikaji-danmaku-layer { margin: 0; }
.pikaji-page-scroll {
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: 8px 0;
  overflow: auto;
  display: flex;
}
.pikaji-page-content {
  min-width: 0;
  margin: auto;
}
.pikaji-danmaku-layer {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}
.danmaku-item {
  position: absolute;
  left: 100%;
  display: block;
  width: max-content;
  max-width: none;
  white-space: nowrap;
  line-height: 1.35;
  font-weight: 700;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  will-change: transform;
}
.danmaku-text {
  display: inline-block;
  padding: 1px 2px;
  white-space: nowrap;
  text-shadow:
    -1px -1px 0 #000,
     0   -1px 0 #000,
     1px -1px 0 #000,
    -1px  0   0 #000,
     1px  0   0 #000,
    -1px  1px 0 #000,
     0    1px 0 #000,
     1px  1px 0 #000;
}
.danmaku-poster {
  display: inline-block;
  width: 22px;
  height: 9px;
  margin-right: 4px;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 1px 0 #000);
}
.danmaku-actions {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  display: none;
  align-items: center;
  gap: 3px;
  padding: 4px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  z-index: 8;
}
.danmaku-item.actions-up .danmaku-actions {
  top: auto;
  bottom: calc(100% + 5px);
}
.danmaku-item:hover .danmaku-actions,
.danmaku-item.is-paused .danmaku-actions,
.danmaku-item:focus-within .danmaku-actions { display: flex; }
.danmaku-actions button {
  padding: 4px 6px;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}
.danmaku-actions button:hover { color: var(--brand); border-color: var(--brand); }
.danmaku-actions button.active { color: var(--danger); border-color: var(--danger); }
.danmaku-item.is-paused { cursor: default; }
.danmaku-item.is-target .danmaku-text {
  outline: 2px solid #FFD93D;
  outline-offset: 2px;
  background: rgba(0, 0, 0, .55);
}
.danmaku-panel {
  margin-top: 8px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 12px;
}
.danmaku-control-row,
.danmaku-send-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.danmaku-send-row { margin-top: 7px; }
.danmaku-control-row label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-dim);
  white-space: nowrap;
}
.danmaku-control-row input[type="range"] { width: 100px; }
.danmaku-control-row select {
  min-height: 27px;
  padding: 1px 5px;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  font-family: inherit;
}
.danmaku-page-count {
  margin-left: auto;
  color: var(--text-dim);
  white-space: nowrap;
}
.danmaku-color-label { color: var(--text-dim); }
.danmaku-color-palette {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.danmaku-color-palette button {
  width: 20px;
  height: 20px;
  padding: 0;
  background: var(--dm-color);
  border: 2px solid var(--line);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18);
  cursor: pointer;
}
.danmaku-color-palette button.selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-soft);
}
.danmaku-send-row input {
  flex: 1 1 220px;
  min-width: 120px;
}
.danmaku-length {
  flex: 0 0 auto;
  color: var(--text-dim);
  font-size: 11px;
  white-space: nowrap;
}
.danmaku-panel .btn.active {
  color: var(--brand);
  border-color: var(--brand);
  background: var(--brand-soft);
}
html[data-site-theme="classic"] .danmaku-panel {
  box-sizing: border-box;
  width: 100%;
  margin: 8px auto 0;
  padding: 6px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0;
  color: #333;
}
html[data-site-theme="classic"] .danmaku-panel .btn {
  border-radius: 0;
  box-shadow: none;
}
html[data-site-theme="classic"] .danmaku-control-row select,
html[data-site-theme="classic"] .danmaku-send-row input {
  border-radius: 0;
  background: #fff;
}
@media (max-width: 760px) {
  .danmaku-control-row,
  .danmaku-send-row { align-items: stretch; }
  .danmaku-control-row label { flex: 1 1 45%; }
  .danmaku-control-row input[type="range"] { flex: 1; width: auto; min-width: 70px; }
  .danmaku-page-count { flex: 1 1 100%; margin-left: 0; }
  .danmaku-color-palette { width: 100%; }
  .danmaku-send-row input { flex-basis: calc(100% - 60px); }
  .danmaku-length { margin-left: auto; }
  .danmaku-send-row [data-dm-send] { flex: 0 0 54px; }
}