/* ═══════════════════════════════════════════════════════════════════════════
   全站深色主题层（theme.css）
   配色 / 层级 / 圆角 / 边框规律，全部来自个人中心（profile.ejs）已定稿的设计 ——
   ★ 规律一：层级只用「底色深浅」表达，不用边框。色阶固定 6 级：
       #000000 画布 → #0f0f0f → #121212 顶栏/区块 → #141414 面板内次级 → #1a1a1a 卡片 → #333333 卡内元素
   ★ 规律二：无边框。任何描边都不承载信息；元素靠底色差与间距（.625rem）区分
   ★ 规律三：圆角三档 —— 区块 .5rem / 卡片 .375rem / 控件 .25rem
   ★ 规律四：文字三档 —— #eee 主 / #b5bcc7 次 / #777 弱
   ★ 规律五：强调色只用于语义 —— 品牌 #6430ff / 危险 #ff7b93 / 成功 #5ecf8f / 警告 #fac858

   加载：_header.ejs 中位于 style.css 之后。改配色只改下面 :root 一处。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1) 调色 / 圆角 ──────────────────────────────────────────────────────
   底色阶梯只有这 6 级，超出的一律按层级就近替换（不允许出现第 7 个中性灰）：
     #000000 画布 → #0f0f0f 画布上的浮起 → #121212 顶栏/区块面板
     → #141414 面板内次级 → #1a1a1a 卡片 → #333333 卡片内元素/输入/标签/hover */
:root {
  /* 底色阶梯（6 级） */
  --c-l0:#000000;
  --c-l1:#0f0f0f;
  --c-l2:#121212;
  --c-l3:#141414;
  --c-l4:#1a1a1a;
  --c-l5:#333333;
  /* 语义别名（全部指向上面 6 级：改色阶时下游自动跟随） */
  --c-bg:var(--c-l0);       /* 页面底 */
  --c-nav:var(--c-l2);      /* 顶栏 */
  --c-nav-line:var(--c-l2); /* 顶栏分隔（与顶栏同色 = 无边框，靠底色差分隔） */
  --c-section:var(--c-l2);  /* 区块 / 内容面板 */
  --c-inset:var(--c-l3);    /* 面板内次级 / 资料头信息区 */
  --c-card:var(--c-l4);     /* 卡片（数据区列表卡片底色） */
  --c-field:var(--c-l5);    /* 次级块 / 标签底 */
  --c-form:#222222;         /* 表单控件默认底色（全站统一，独立于 6 级底色阶梯） */
  --c-hover:var(--c-l5);    /* hover 提亮（小元素：按钮 / 菜单项 / 选项块） */
  --c-hover-soft:#262626;   /* 大面积元素的 hover 底（资源卡等）：比 --c-hover 暗一档，避免整块跳亮 */
  /* 文字三档 */
  --c-txt:#eee;           /* 主：片名 / 标题 */
  --c-txt-2:#b5bcc7;      /* 次：元数据 / 说明 */
  --c-txt-3:#777;         /* 弱：时间 / 辅助 */
  /* 语义色 */
  --c-brand:#6430ff;      /* 主色（关注 / 主按钮） */
  --c-brand-hover:#5527e0;
  --c-brand-txt:#9d8bff;
  --c-brand-bg:#241f4d;
  --c-danger:#ff7b93;     /* 危险（删除 / 取消） */
  --c-danger-bg:#2a1b22;
  --c-danger-bg-hover:#3a222b;
  --c-ok:#5ecf8f;         /* 成功（+积分 / 已打卡） */
  --c-ok-bg:#14301f;
  --c-warn:#fac858;       /* 警告 */
  --c-warn-bg:#33280c;
  /* 圆角三档 */
  --r-block:.5rem;
  --r-card:.375rem;
  --r-ctl:.25rem;
  /* 卡内功能性分隔线（1px）：不在 6 级底色阶梯内，仅用于卡片内部的 1px 分隔与按钮中缝 */
  --c-divider:#262626;        /* 常规：评论回复区上沿、编辑/删除按钮中缝 */
  --c-divider-soft:#1f1f1f;   /* 更弱一档：评分项之间的竖线等浅分隔 */

  /* 兼容：style.css 已引用的变量名（语义 = 上面层级中的同层色） */
  --c-surface:var(--c-l4);    /* 原 #fff 白底部件 → 卡片底 */
  --c-surface-2:var(--c-l5);  /* 原 #f8fafc → 输入 / 次级块 */
  --c-block:var(--c-l3);      /* 原 #f1f5f9 → 卡片内元素块 */
  --c-line:var(--c-l5);       /* 原 #e2e8f0 / #cbd5e1：作「填充」用；描边引用已在 style.css 清零 */
}

/* ── 2) 基础 ─────────────────────────────────────────────────────────────── */
body { background:var(--c-bg); }
body.bg-white { background:var(--c-bg) !important; }        /* 页面底（权重高于 tailwind .bg-white） */
img { background:var(--c-inset); }                          /* 图片占位底：浅色会在圆角处透出白边 */

/* ── 3) 顶栏（深色 + 毛玻璃 + 控件统一 2rem=32px；无边框） ───────────────── */
body > header {
  background:rgba(18,18,18,.82) !important; border-bottom-color:transparent !important;
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
}
body > header form input { background:var(--c-form) !important; border-color:transparent !important; color:var(--c-txt) !important; }
body > header form input::placeholder { color:var(--c-txt-3); }
body > header a:hover, body > header button:hover { background:var(--c-l3) !important; }
body > header #userMenuBtn { height:2rem !important; padding-block:0 !important; }
body > header #userMenuBtn img { width:2rem !important; height:2rem !important; }
body > header #userMenuBtn span { color:#fff !important; }                 /* 用户名：白 */
body > header nav > a,
body > header nav > button { height:2rem !important; }
body > header nav > a { color:#fff !important; }                          /* 消息铃铛等图标：默认白 */
body > header .notif-dot { box-shadow:0 0 0 2px var(--c-nav) !important; } /* 未读红点描边随顶栏底色 */
@media (max-width:639px) {
  body > header nav a[title="建立词条"],
  body > header nav a[aria-label="消息"] { width:2rem !important; }        /* 窄屏图标钮补成 2rem 方形 */
}

/* ── 4) Tailwind 工具类 → 深色映射 ───────────────────────────────────────── */
/* 文字三档 */
.text-slate-800, .text-slate-700 { color:var(--c-txt) !important; }
.text-slate-600, .text-slate-500 { color:var(--c-txt-2) !important; }
.text-slate-400, .text-slate-300 { color:var(--c-txt-3) !important; }
/* 底色阶梯 */
.bg-white { background:var(--c-card) !important; }
.bg-slate-100 { background:var(--c-inset) !important; }
.bg-slate-50 { background:var(--c-field) !important; }
.hover\:bg-slate-50:hover, .hover\:bg-slate-100:hover { background:var(--c-hover) !important; }
/* 无边框：所有浅色描边一律透明（元素靠底色区分）★ 必须 !important：Tailwind 运行时注入晚于本文件 */
.border-slate-100, .border-slate-200, .border-slate-300 { border-color:transparent !important; }
.divide-slate-100 > * + *, .divide-slate-200 > * + * { border-color:transparent !important; }
/* 品牌 */
.bg-blue-600 { background:var(--c-brand) !important; }
.hover\:bg-blue-700:hover { background:var(--c-brand-hover) !important; }
.bg-blue-50 { background:var(--c-brand-bg) !important; }
.bg-blue-100 { background:#1f2a44 !important; }        /* 同个人中心 .pf-chip.c-quality */
.hover\:bg-blue-100:hover { background:#243354 !important; }
.text-blue-600 { color:var(--c-brand-txt) !important; }
.text-blue-700 { color:#9db8ff !important; }
.border-blue-200, .border-blue-300 { border-color:transparent !important; }
.border-blue-500 { border-color:var(--c-brand) !important; }   /* 选中态用主色描边 */
/* 其余语义色族（取值对齐个人中心标签：红 / 绿 / 琥珀 / 紫） */
.bg-red-50 { background:var(--c-danger-bg) !important; }
.text-red-500, .text-red-600 { color:var(--c-danger) !important; }
.hover\:text-red-600:hover { color:var(--c-danger) !important; }   /* 与 hover:text-rose-600 同义（危险的 hover 态），补上以免悬停时用 Tailwind 原生深红在深色底上发暗 */
.border-red-200, .border-red-300 { border-color:transparent !important; }
.bg-red-500 { background:#e5484d !important; }         /* 未读红点等实色标记 */
.bg-green-100, .bg-emerald-100 { background:var(--c-ok-bg) !important; }
.text-green-700 { color:#7ee0a6 !important; }
.bg-amber-100 { background:var(--c-warn-bg) !important; }
.text-amber-700 { color:#f2c96b !important; }
.bg-violet-100 { background:#2a2440 !important; }
.text-violet-700 { color:#c4b5fd !important; }
.text-slate-200 { color:var(--c-txt-3) !important; }
.bg-slate-200 { background:transparent !important; }   /* 浅灰分隔条：无边框设计 → 去掉 */
.bg-slate-900\/25 { background:rgba(0,0,0,.6) !important; }   /* 弹框遮罩 */
/* 危险 */
.bg-rose-50 { background:var(--c-danger-bg) !important; }
.hover\:bg-rose-50:hover { background:#331f28 !important; }
.hover\:bg-rose-100:hover { background:var(--c-danger-bg-hover) !important; }
.border-rose-200, .hover\:border-rose-200:hover { border-color:transparent !important; }
.text-rose-500, .text-rose-600, .hover\:text-rose-600:hover { color:var(--c-danger) !important; }
.text-rose-400 { color:#ff96a8 !important; }
/* 成功 / 警告 */
.text-emerald-600 { color:var(--c-ok) !important; }
.bg-emerald-50 { background:var(--c-ok-bg) !important; }
.hover\:bg-emerald-100:hover { background:#1c4128 !important; }   /* 成功底再提亮一档（顶栏打卡按钮 hover 用；色阶内无更亮的绿底） */
.text-emerald-700 { color:#7ee0a6 !important; }
.bg-amber-50 { background:var(--c-warn-bg) !important; }
.border-amber-200 { border-color:transparent !important; }
.text-amber-600 { color:var(--c-warn) !important; }
/* 绿色：flash 的「成功」提示用 bg-green-50，而它的文字 text-green-700 已在本段映射为浅绿，
   底色不补就会出现「浅绿底 + 浅绿字」——提示整个看不见 */
.bg-green-50 { background:var(--c-ok-bg) !important; }
.border-green-200 { border-color:transparent !important; }
/* 靛蓝 / 青蓝 / 粉 / 紫：通知徽章与积分标签的淡底（notifmeta.js、index.js 的 cls）。
   ★ 底色与文字色必须成对补：只补底色会从「浅底深字（能看清）」变成「深底深字（看不见）」 */
.bg-indigo-50 { background:#241f4d !important; }
.text-indigo-600 { color:#a5b4fc !important; }
.bg-sky-50 { background:#16303a !important; }
.text-sky-600 { color:#7dd3fc !important; }
.bg-pink-50 { background:#2a1b26 !important; }
.text-pink-600 { color:#ff96a8 !important; }
.bg-violet-50 { background:#2a2440 !important; }
.text-violet-600 { color:#c4b5fd !important; }
/* hover 态同样要落到深色层：否则悬停时会闪出浅色块 / 浅色描边 */
.hover\:bg-blue-50:hover { background:var(--c-brand-bg) !important; }
.hover\:bg-slate-200:hover { background:var(--c-hover) !important; }
.hover\:border-blue-300:hover, .group-hover\:border-blue-300, .hover\:border-slate-300:hover { border-color:transparent !important; }

/* ── 5) 表单 / 滚动条 / 选中 / 焦点 ──────────────────────────────────────── */
input, textarea, select { background:var(--c-form) !important; color:var(--c-txt) !important; border-color:transparent !important; }   /* 表单默认底色全站统一 */
input::placeholder, textarea::placeholder { color:var(--c-txt-3) !important; }
::selection { background:var(--c-brand); color:#fff; }   /* 文字全选：主题色 */
::-webkit-scrollbar-thumb { background:var(--c-line); }
* { scrollbar-color:var(--c-line) transparent; }
/* 去掉描边后焦点不能再靠边框表达，统一用主色内描边（键盘可达性） */
input:focus-visible, textarea:focus-visible, select:focus-visible,
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--c-brand); outline-offset:2px; }

/* ── 6) 面板层：黑色画布 + 每个功能区一个独立面板 ─────────────────────────
   规律（来自个人中心）：页面 #000 是画布；每个区块自己是一层比黑色更亮的面板 ——
     资料头 / 数据条 = #141414，数据内容区 = #121212；面板之内再放 #1a1a1a 卡片。
   即：区块之间靠黑色间距分开，而不是共用一个大的外层容器。
   ★ 新代码请用 .panel（区块） / .panel-inset（区块内的次级面板）
   注意：面板元素本身不要再带 bg-* 类（工具类映射是 !important，会盖过面板底色） */
.panel { background:var(--c-section) !important; border-radius:var(--r-block); }
.panel-inset { background:var(--c-inset) !important; border-radius:var(--r-block); }
/* 图片 / 海报槽（无图时的空槽底）：固定用 --c-card（l4），比最深的区块底再高一档，放哪都看得见。
   ★ 别用 bg-slate-100：它映射到 --c-inset（l3），一旦这个槽落在 .panel-inset（同为 l3）里就直接隐形 —— 踩过 */
.img-slot { background:var(--c-card); }
/* 过渡桥：旧模板里「大圆角 + 浅色描边」的区块容器，等价于 .panel
   （模板逐步改用 .panel 后，本组选择器可删除） */
.rounded-xl.border-slate-100,
.rounded-xl.border-slate-200,
.rounded-xl.border-slate-300 { background:var(--c-section); }

/* ── 7) 组件级：无边框 + 同一底色阶梯 ───────────────────────────────────── */
.modal-card { background:var(--c-card); border:0; }
.res-more-btn { border-radius:var(--r-card) !important; }

/* ── 8) 白色浮层（.pop-light）：说明提示 / 私信 / 点赞列表 / 确认框 / 表情面板 / 用户悬浮卡 ──
   浮层是页面上**唯一**的亮面（底色 #fff），其内部文字与描边回到浅色主题取值；
   页内横幅（.flash-*）与浮层提示条（.pts-toast / .rtn-card）不算浮层，保持深色。
   用法：在浮层根元素上加 class="pop-light"（原有定位/动画类保留）。 */
:root {
  --c-lt-bg:#ffffff;       /* 浮层底 */
  --c-lt-surface:#f8fafc;  /* 浮层内次级块 */
  --c-lt-block:#f1f5f9;    /* 浮层内元素块 */
  --c-lt-line:#e2e8f0;     /* 浮层内分隔 */
  --c-lt-hover:#eef2f7;    /* 浮层内 hover 底：用 --c-lt-surface(#f8fafc) 在白色浮层上几乎看不出，故单给一档 */
  --c-lt-txt:#1e293b;      /* 浮层主文字 */
  --c-lt-txt-2:#475569;    /* 浮层次文字 */
  --c-lt-txt-3:#94a3b8;    /* 浮层弱文字 */
}
.pop-light { background:var(--c-lt-bg) !important; color:var(--c-lt-txt); }
/* 文字 */
.pop-light .text-slate-800, .pop-light .text-slate-700 { color:var(--c-lt-txt) !important; }
.pop-light .text-slate-600, .pop-light .text-slate-500 { color:var(--c-lt-txt-2) !important; }
.pop-light .text-slate-400, .pop-light .text-slate-300 { color:var(--c-lt-txt-3) !important; }
/* 底色阶梯（浅色版） */
.pop-light .bg-white { background:var(--c-lt-bg) !important; }
.pop-light .bg-slate-50 { background:var(--c-lt-surface) !important; }
.pop-light .bg-slate-100 { background:var(--c-lt-block) !important; }
.pop-light .hover\:bg-slate-50:hover { background:var(--c-lt-hover) !important; }   /* 悬停项要看得见（原用 --c-lt-surface 过浅） */
.pop-light .hover\:bg-slate-100:hover { background:var(--c-lt-line) !important; }   /* 比上一档再深一级，保留层次 */
.pop-light .bg-slate-200 { background:var(--c-lt-line) !important; }   /* 浅灰点/轨（深色层里被置为透明） */
/* 描边（浮层内需要边界的地方才用） */
.pop-light .border-slate-100 { border-color:var(--c-lt-block) !important; }
.pop-light .border-slate-200 { border-color:var(--c-lt-line) !important; }
.pop-light .divide-slate-100 > * + *, .pop-light .divide-slate-200 > * + * { border-color:var(--c-lt-line) !important; }
/* 表单 */
.pop-light input, .pop-light textarea, .pop-light select { background:var(--c-lt-bg) !important; color:var(--c-lt-txt) !important; border-color:var(--c-lt-line) !important; }
.pop-light input::placeholder, .pop-light textarea::placeholder { color:var(--c-lt-txt-3) !important; }
/* 语义色（浅色版） */
.pop-light .bg-blue-600 { background:#2563eb !important; }
.pop-light .hover\:bg-blue-700:hover { background:#1d4ed8 !important; }
.pop-light .bg-blue-50 { background:#eff6ff !important; }
.pop-light .text-blue-600 { color:#2563eb !important; }
.pop-light .text-blue-700 { color:#1d4ed8 !important; }
.pop-light .bg-rose-50 { background:#fff1f2 !important; }
.pop-light .text-rose-500, .pop-light .text-rose-600 { color:#e11d48 !important; }
.pop-light .bg-emerald-50 { background:#ecfdf5 !important; }
.pop-light .text-emerald-600 { color:#059669 !important; }
.pop-light .text-emerald-700 { color:#047857 !important; }
.pop-light .bg-amber-50 { background:#fffbeb !important; }
.pop-light .text-amber-600 { color:#d97706 !important; }