/* ============================================================
   Evanescia 工具箱 · 主界面 PRTS 皮肤（武陵青配色）
   作用域：body.prts（**只在首页与工具页**挂载，见 Base.astro）
   ------------------------------------------------------------
   语言同「个人后台」的 PRTS 皮肤：深黑底 + 米白瓦片（瓦片上黑字）+ 细线 + 直角，
   只把强调色从「信号黄」换成**武陵青 #14d0d0**。

   色值不是估的：武陵青取自终末地设计语言资料（相对亮度 49.8%），
   本文件的每一条前景/背景组合都过 _shots-audit/check-prts-cyan-contrast.mjs（22 组，含 2 条反例）：
     · 深底上：青 #14d0d0 = 10.46:1（可直接当文字/图标）
     · 瓦片（米白 #f0f0f0）上：**青不能当文字**（只有 1.68:1）→ 文字档用 #006a6a（5.64:1）
     · 青底墨字（主按钮）= 9.93:1
   ============================================================ */

html body.prts {
  /* ---------- 武陵青 · PRTS 令牌 ---------- */
  --pc-black: #080808;        /* 深底（页面） */
  --pc-panel: #161616;        /* 一级深灰面板 */
  --pc-panel-2: #242424;      /* 二级深灰面板 */
  --pc-panel-3: #383838;      /* 三级（悬停块） */
  --pc-line: #3a3a3a;         /* 深底细线（装饰 1.76:1） */
  --pc-tile: #f0f0f0;         /* 瓦片白（主阅读面） */
  --pc-tile-hi: #ffffff;
  --pc-tile-dim: #d8d8d8;
  --pc-tile-hover: #c8c8c8;
  --pc-edge: #b8b8b8;         /* 瓦片描边 */
  --pc-ink: #101010;          /* 瓦片上的墨字 16.7:1 */
  --pc-ink-soft: #3a3a3a;
  --pc-ink-muted: #5c5c5c;
  --pc-cyan: #14d0d0;         /* 武陵青：深底上的强调 / 填充 */
  --pc-cyan-deep: #0f9e9e;    /* 悬停 / 按下 */
  --pc-cyan-ink: #006a6a;     /* **瓦片上的青色文字**（5.64:1） */
  --pc-on-dark: #f2f2f2;      /* 深底正文 17.9:1 */
  --pc-on-dark-soft: #b4b4b4; /* 深底次要 9.66:1 */
  --pc-on-dark-muted: #8a8a8a;
  --pc-terminal: #080808;
  --pc-accent-ink: var(--pc-cyan);   /* 青色**当文字**用的色：深底=原色，浅底=深色档（见日间模式） */     /* 终端块（结果区/代码块）：**两种模式都不变**，纸字压它才够亮 */

  /* ---------- 把站点既有令牌在作用域内重映射 → 既有组件自动换语言 ---------- */
  --ink: var(--pc-ink);
  --ink-soft: var(--pc-ink-soft);
  --muted: var(--pc-ink-muted);
  --line: var(--pc-edge);
  --surface: var(--pc-tile);
  --surface-soft: var(--pc-tile-hi);
  --blue-50: #e6f7f7;
  --blue-100: #c9eeee;
  --blue-200: #9fdede;
  --blue-300: #5fc9c9;
  --blue-400: #2ab8b8;
  --blue-500: var(--pc-cyan);
  --blue-600: var(--pc-cyan-deep);
  --blue-700: var(--pc-cyan-ink);
  --grad-brand: var(--pc-cyan);
  --grad-page: var(--pc-black);
  --grad-card: linear-gradient(135deg, rgba(20, 208, 208, 0.07), rgba(20, 208, 208, 0.02));
  /* 绯英的粉紫只在 /chat/ 保留：首页与工具页一律换成青（这也是既有决定） */
  --sakura: var(--pc-cyan);
  --sakura-soft: #b7f0f0;
  --violet: var(--pc-cyan-deep);
  --grad-blossom: linear-gradient(120deg, #14d0d0 0%, #0f9e9e 100%);
  /* 全直角 + 去掉柔和阴影（层级改由线与底色表达） */
  --radius-sm: 0; --radius: 0; --radius-lg: 0; --radius-pill: 0;
  --shadow-sm: none; --shadow: none; --shadow-lg: none;

  background: var(--pc-black);
  color: var(--pc-on-dark);
  font-variant-numeric: tabular-nums;
}

/* 极淡全息网格底纹（与启动界面 / 个人后台同一套，1.5:1 级别，只做质感） */
html body.prts {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.030) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.030) 1px, transparent 1px);
  background-size: 34px 34px, 34px 34px;
  background-attachment: fixed;
}

/* 全直角（唯一例外：主题开关里的图标是字符，不用管） */
html body.prts *,
html body.prts *::before,
html body.prts *::after { border-radius: 0 !important; }

/* ============================================================
   外壳：深黑顶栏 + 青色下划线导航；主题开关在本页收起（PRTS 只有一种配色）
   ============================================================ */
/* 主题开关：PRTS 现在有日间/夜间两套模式，开关必须可用（用户要求补日间模式） */
html body.prts .theme-toggle { border: 1px solid var(--pc-line); color: var(--pc-on-dark-soft); background: transparent; }
html body.prts .theme-toggle:hover { background: var(--pc-panel-3); color: var(--pc-on-dark); }
html body.prts .site-header {
  background: rgba(8, 8, 8, 0.94);
  border-bottom: 1px solid var(--pc-line);
  backdrop-filter: saturate(140%) blur(8px);
}
html body.prts .brand-mark { background: var(--pc-cyan); color: var(--pc-ink); box-shadow: none; }
html body.prts .brand-petal { display: none; }
html body.prts .brand-name { color: var(--pc-on-dark); letter-spacing: 0.04em; }
html body.prts .brand:hover .brand-name { color: var(--pc-on-dark); }
html body.prts .site-nav a {
  color: var(--pc-on-dark-soft); padding: 7px 12px; font-size: 13.5px;
  border-bottom: 2px solid transparent; letter-spacing: 0.03em;
}
html body.prts .site-nav a:hover,
html body.prts .site-nav a.active { background: transparent; color: var(--pc-on-dark); border-bottom-color: var(--pc-cyan); }
html body.prts .link-btn { color: var(--pc-on-dark-soft); }
html body.prts .link-btn:hover { background: var(--pc-panel-3); color: var(--pc-on-dark); }

html body.prts .site-footer { background: transparent; border-top: 1px solid var(--pc-line); color: var(--pc-on-dark-soft); }
html body.prts .site-footer a { color: var(--pc-on-dark-soft); }
html body.prts .site-footer a:hover { color: var(--pc-accent-ink); }
html body.prts .ev-line { border-left-color: var(--pc-cyan); color: var(--pc-on-dark-soft); }

/* ============================================================
   HERO：深底 + 纸色大标题 + 青色强调；旧蓝紫渐变与柔光退场
   ============================================================ */
html body.prts .hero { padding: 46px 0 8px; }
html body.prts .hero-glow { display: none; }
html body.prts .hero h1 {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  color: var(--pc-on-dark); letter-spacing: 0.01em;
}
html body.prts .hero h1 .accent {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  color: var(--pc-accent-ink);
}
html body.prts .hero p { color: var(--pc-on-dark-soft); font-size: 15.5px; }
/* HERO 顶部一条青色刻度（PRTS 的信号条） */
html body.prts .hero::before {
  content: ''; position: absolute; left: 0; top: 26px;
  width: 96px; height: 4px; background: var(--pc-cyan);
}
html body.prts .hero { position: relative; }

/* ============================================================
   搜索 / 分类标签：深色终端输入 + 直角芯片
   ============================================================ */
html body.prts .search .ico { color: var(--pc-on-dark-muted); }
html body.prts .toolbar .search input,
html body.prts .toolbar .search input[type='text'] {
  background: var(--pc-panel); border: 1px solid var(--pc-line); color: var(--pc-on-dark);
  box-shadow: none;
}
html body.prts .toolbar .search input::placeholder { color: var(--pc-on-dark-muted); }
html body.prts .search input:focus {
  border-color: var(--pc-cyan); box-shadow: none;
  outline: 2px solid var(--pc-cyan); outline-offset: 1px;
}
html body.prts .tabs { background: var(--pc-panel); border: 1px solid var(--pc-line); box-shadow: none; }
html body.prts .tab { color: var(--pc-on-dark-soft); }
html body.prts .tab:hover { background: var(--pc-panel-2); color: var(--pc-on-dark); }
html body.prts .tab[aria-selected='true'] {
  background: var(--pc-cyan); color: var(--pc-ink); font-weight: 700; box-shadow: none;
}

/* ============================================================
   工具卡片 = PRTS 瓦片：米白底 + 墨字 + 左侧青条
   ============================================================ */
html body.prts .card {
  background: var(--pc-tile); border: 1px solid var(--pc-edge); border-left: 3px solid var(--pc-edge);
  box-shadow: inset 0 -3px 0 rgba(16, 16, 16, 0.09);
  transform: none;
}
html body.prts .card::after { background: none; }
html body.prts .card:hover {
  transform: none; box-shadow: inset 0 -3px 0 rgba(16, 16, 16, 0.09);
  background: var(--pc-tile-hi); border-left-color: var(--pc-cyan);
}
html body.prts .card-icon {
  background: var(--pc-tile-hi); border: 1px solid var(--pc-ink); color: var(--pc-ink);
  font-weight: 700;
}
html body.prts .card.mini .card-icon { border-color: var(--pc-edge); }
html body.prts .card-title { color: var(--pc-ink); }
html body.prts .card-desc { color: var(--pc-ink-muted); }
html body.prts .card-arrow { color: var(--pc-cyan-ink); }
html body.prts .card.todo { opacity: 0.7; }
html body.prts .card.todo::before { display: none; }
html body.prts .grid.mini .card { background: var(--pc-tile-dim); }

/* 角标：直角描边芯片（瓦片上 → 青字必须用深色档） */
html body.prts .badge {
  background: transparent; border: 1px solid var(--pc-edge); color: var(--pc-ink-soft);
  letter-spacing: 0.06em;
}
html body.prts .badge.pin { background: rgba(20, 208, 208, 0.18); border-color: var(--pc-cyan-ink); color: var(--pc-cyan-ink); }
html body.prts .chip { background: var(--pc-tile); border-color: var(--pc-edge); color: var(--pc-ink-soft); box-shadow: none; }

html body.prts .empty { color: var(--pc-on-dark-soft); }
html body.prts .section-head { color: var(--pc-on-dark); letter-spacing: 0.04em; }
html body.prts .section-head .hint { color: var(--pc-on-dark-muted); }
html body.prts .petal-dot {
  width: 9px; height: 9px; transform: none; margin-right: 9px;
  background: var(--pc-cyan);
}

/* ============================================================
   绯英横幅 / 工具页 / 面板 / 输出区
   ============================================================ */
html body.prts .chat-banner {
  background: var(--pc-panel); border: 1px solid var(--pc-line); box-shadow: none; transform: none;
}
html body.prts .chat-banner:hover { transform: none; background: var(--pc-panel-2); border-color: var(--pc-cyan); box-shadow: none; }
html body.prts .cb-avatar { background: var(--pc-cyan); color: var(--pc-ink); }
html body.prts .cb-title { color: var(--pc-on-dark); }
html body.prts .cb-sub { color: var(--pc-on-dark-soft); }
html body.prts .cb-go { background: var(--pc-panel-2); border: 1px solid var(--pc-line); color: var(--pc-on-dark); }
html body.prts .chat-banner:hover .cb-go { background: var(--pc-cyan); color: var(--pc-ink); border-color: var(--pc-cyan); }

html body.prts .tool-head { padding: 30px 0 4px; }
html body.prts .crumb { color: var(--pc-on-dark-muted); }
html body.prts .crumb a { color: var(--pc-on-dark-soft); }
html body.prts .crumb a:hover { color: var(--pc-accent-ink); }
html body.prts .tool-head h1 { color: var(--pc-on-dark); }
html body.prts .tool-head .sub { color: var(--pc-on-dark-soft); }

/* 面板 = 米白窗口（正文放白瓦片，深底只做壳） */
html body.prts .panel {
  background: var(--pc-tile); border: 1px solid var(--pc-edge); box-shadow: none;
  border-top: 3px solid var(--pc-cyan);
}
html body.prts .panel-title { color: var(--pc-ink-muted); letter-spacing: 0.1em; text-transform: uppercase; font-size: 11.5px; }
html body.prts label.fld { color: var(--pc-ink-soft); font-size: 12.5px; letter-spacing: 0.02em; }
html body.prts input[type='text'], body.prts input[type='number'], body.prts input[type='date'],
html body.prts input[type='datetime-local'], body.prts select, body.prts textarea {
  background: var(--pc-tile-hi); border: 1px solid var(--pc-edge); color: var(--pc-ink); box-shadow: none;
}
html body.prts input:focus, body.prts select:focus, body.prts textarea:focus {
  background: var(--pc-tile-hi); border-color: var(--pc-cyan-ink);
  outline: 2px solid var(--pc-cyan); outline-offset: 1px; box-shadow: none;
}
html body.prts ::selection { background: var(--pc-cyan); color: var(--pc-ink); }

html body.prts .out {
  background: var(--pc-terminal); border: 1px solid var(--pc-line); color: #f5f5f0;
}
html body.prts .kv .item { background: var(--pc-tile-hi); border: 1px solid var(--pc-edge); }
html body.prts .kv .k { color: var(--pc-ink-muted); }
html body.prts .kv .v { color: var(--pc-ink); }
html body.prts .kv .v.big { color: var(--pc-cyan-ink); }

html body.prts .btn {
  background: var(--pc-cyan); color: var(--pc-ink); border: 1px solid var(--pc-cyan-deep);
  box-shadow: none; font-weight: 700; letter-spacing: 0.04em; transform: none;
}
html body.prts .btn:hover { background: var(--pc-cyan-deep); box-shadow: none; transform: none; }
html body.prts .btn:active { transform: none; background: var(--pc-cyan-deep); }
html body.prts .btn.ghost { background: var(--pc-tile); color: var(--pc-ink); border-color: var(--pc-ink); box-shadow: none; }
html body.prts .btn.ghost:hover { background: var(--pc-tile-hover); box-shadow: none; }

html body.prts .msg { border-width: 1px; border-left-width: 4px; }
html body.prts .msg.ok { background: #e6f7f7; border-color: var(--pc-cyan-deep); color: #065050; }
html body.prts .msg.err { background: #fdeaeb; border-color: #f02830; color: #9a1116; }
html body.prts .msg.info { background: #e6f7f7; border-color: var(--pc-cyan); color: #065050; }
html body.prts .tip { color: var(--pc-ink-muted); }
html body.prts .muted { color: var(--pc-ink-muted); }

/* 表格（工具页里偶尔用到） */
html body.prts table { border-color: var(--pc-edge); }
html body.prts th { background: var(--pc-tile-dim); color: var(--pc-ink); }
html body.prts td { border-color: var(--pc-edge); color: var(--pc-ink); }

/* ============================================================
   悬停：瓦片 / 按钮「青色横扫黑过」+ 轻微抬起
   ------------------------------------------------------------
   用户要求：鼠标移到按钮上时，① 按钮略微突出 ② 左侧那道青边**向右扫过整个按钮**，
   再继续向右消失，恢复原样。
   实现：一个铺满按钮宽的青色层，静止时停在 `translateX(-101%)`（看不见，等于"左边缘"），
   悬停时过渡到 `translateX(101%)`（整条扫过去并离开）—— 层在文字**下面**，
   所以扫码过程中墨字始终可读（墨字压青底 = 9.93:1）。
   注意：主按钮本身就是青底，扫过用深一档的青才看得见。
   ============================================================ */
html body.prts .card,
html body.prts .post-card,
html body.prts .btn,
html body.prts .chip,
html body.prts .cb-go { position: relative; overflow: hidden; }

html body.prts .card::before,
html body.prts .post-card::before,
html body.prts .btn::before,
html body.prts .chip::before,
html body.prts .cb-go::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pc-cyan);
  transform: translateX(-101%);
  transition: transform 0.78s cubic-bezier(0.22, 0.72, 0.24, 1);   /* 用户要求放长：0.42s → 0.78s */
  z-index: 0;
  pointer-events: none;
}
html body.prts .card:hover::before,
html body.prts .post-card:hover::before,
html body.prts .btn:hover::before,
html body.prts .chip:hover::before,
html body.prts .chat-banner:hover .cb-go::before { transform: translateX(101%); }

/* 主按钮本来是青底：扫过用深一档，才看得出来 */
html body.prts .btn::before { background: var(--pc-cyan-deep); }

/* 抬起 + 文字压在扫过层之上（被扫到时墨字仍可读） */
html body.prts .card:hover { transform: translateY(-2px); }
html body.prts .btn:hover { transform: translateY(-2px); }
html body.prts .chip:hover { transform: translateY(-2px); }
html body.prts .card > *,
html body.prts .btn > *,
html body.prts .chip > * { position: relative; z-index: 1; }
/* 被青底覆盖的瞬间，次要文字改用更深的墨色（5.93:1），别掉到 3.4:1 */
html body.prts .card:hover .card-desc { color: var(--pc-ink-soft); }
html body.prts .card:hover .card-title { color: var(--pc-ink); }
html body.prts .card:hover .card-icon { background: var(--pc-tile-hi); }
html body.prts .card:hover .badge.pin { background: rgba(0, 106, 106, 0.12); }

/* 减少动效：只保留"抬起"，不做横扫 */
@media (prefers-reduced-motion: reduce) {
  html body.prts .card::before,
  html body.prts .btn::before,
  html body.prts .chip::before,
  html body.prts .cb-go::before { display: none; }
}

/* ============================================================
   博客（列表 / 文章 / 标签 / 归档）—— 同一套 PRTS/武陵青语言
   正文放在**米白瓦片**上（墨字），深底只做壳：长文阅读仍然在纸底上。
   ============================================================ */
html body.prts .post-list { gap: 12px; }
html body.prts .post-card {
  background: var(--pc-tile);
  border: 1px solid var(--pc-edge);
  border-left: 3px solid var(--pc-edge);
  box-shadow: inset 0 -3px 0 rgba(16, 16, 16, 0.09);
  padding: 16px 18px;
}
html body.prts .post-card:hover {
  transform: translateY(-2px);
  background: var(--pc-tile-hi);
  border-left-color: var(--pc-cyan);
  box-shadow: inset 0 -3px 0 rgba(16, 16, 16, 0.09);
}
html body.prts .post-title { color: var(--pc-ink); }
html body.prts .post-meta { color: var(--pc-ink-muted); }
html body.prts .post-excerpt { color: var(--pc-ink-soft); }
html body.prts .post-card > * { position: relative; z-index: 1; }

html body.prts .tag-pill {
  background: rgba(20, 208, 208, 0.16);
  border: 1px solid var(--pc-cyan-ink);
  color: var(--pc-cyan-ink);
  padding: 2px 8px;
}
html body.prts .blog-nav {
  background: var(--pc-panel); border: 1px solid var(--pc-line); box-shadow: none;
}
html body.prts .blog-nav a { color: var(--pc-on-dark-soft); }
html body.prts .blog-nav a:hover { background: var(--pc-panel-2); color: var(--pc-on-dark); }
html body.prts .blog-nav a.active { background: var(--pc-cyan); color: var(--pc-ink); font-weight: 700; box-shadow: none; }

/* 文章页：正文整块放在米白瓦片上 */
html body.prts .article .body {
  background: var(--pc-tile);
  border: 1px solid var(--pc-edge);
  border-top: 3px solid var(--pc-cyan);
  padding: 26px 28px;
  color: var(--pc-ink);
}
html body.prts .article .body h2,
html body.prts .article .body h3 { color: var(--pc-ink); }
html body.prts .article .body p,
html body.prts .article .body ul,
html body.prts .article .body ol { color: var(--pc-ink-soft); }
html body.prts .article .body code {
  background: var(--pc-tile-dim); border: 1px solid var(--pc-edge); color: #06494a;
}
html body.prts .article .body pre { background: var(--pc-terminal); border: 1px solid var(--pc-line); }
html body.prts .article .body pre code { background: transparent; border: 0; color: #f5f5f0; }
html body.prts .article .body blockquote {
  background: var(--pc-tile-hi); border-left: 4px solid var(--pc-cyan); color: var(--pc-ink-soft);
}
html body.prts .article .body a { color: var(--pc-cyan-ink); text-decoration-color: var(--pc-cyan); }
html body.prts .article .body th { background: var(--pc-tile-dim); color: var(--pc-ink); }
html body.prts .article .body th, body.prts .article .body td { border-color: var(--pc-edge); }
html body.prts .article .body img { border: 1px solid var(--pc-edge); }
html body.prts .back-link { color: var(--pc-on-dark-soft); }
html body.prts .back-link:hover { color: var(--pc-accent-ink); }

/* 目录 / 标签云 / 归档 */
html body.prts details.toc > summary { color: var(--pc-ink); }
html body.prts .toc-list a { color: var(--pc-ink-soft); }
html body.prts .toc-list a:hover { background: var(--pc-panel-2); color: var(--pc-on-dark); }
html body.prts .toc-list .lv3 a { color: var(--pc-on-dark-muted); }
html body.prts .tag-cloud a {
  background: var(--pc-panel); border: 1px solid var(--pc-line); color: var(--pc-on-dark-soft);
}
html body.prts .tag-cloud a:hover { transform: translateY(-1px); border-color: var(--pc-cyan); color: var(--pc-on-dark); }
html body.prts .tag-cloud a.on { background: var(--pc-cyan); color: var(--pc-ink); border-color: var(--pc-cyan); }
html body.prts .tag-cloud a.on .n { color: rgba(16, 16, 16, 0.7); }
html body.prts .tag-cloud .n { color: var(--pc-on-dark-muted); }
html body.prts .archive-year { color: var(--pc-on-dark); }
html body.prts .archive-year .n { color: var(--pc-on-dark-muted); }
html body.prts .archive-year::after { background: var(--pc-line); }
html body.prts .archive-item { background: var(--pc-tile); border: 1px solid var(--pc-edge); }
html body.prts .archive-item:hover { background: var(--pc-tile-hi); border-color: var(--pc-cyan); }
html body.prts .archive-item time { color: var(--pc-ink-muted); }
html body.prts .archive-item .t { color: var(--pc-ink); }

/* ============================================================
   日间模式（html[data-theme='light']）
   ------------------------------------------------------------
   依据不是猜的：参考录像的**标题屏本身就是浅色**（纸底 #e8e8e8 + 黑字 + 白瓦片，
   实测占标题帧 60.2%），所以浅色版 = 把那块纸底屏的语言搬到全站：
     壳 = 纸（#e8e8e8）· 瓦片 = 白（#ffffff）· 字 = 墨 · 强调仍是武陵青
   青色用法不变：#14d0d0 只做填充/描边，作文字用深色档 #006a6a（白底 5.73:1）。
   终端块（结果区/代码块）两种模式都保持黑底 —— 纸字压它才够亮。
   ============================================================ */
html[data-theme='light'] body.prts {
  --pc-black: #e8e8e8;
  --pc-panel: #f2f2ec;
  --pc-panel-2: #e6e6df;
  --pc-panel-3: #dcdcd6;
  --pc-line: #b8b8b3;
  --pc-tile: #ffffff;
  --pc-tile-hi: #ffffff;
  --pc-tile-dim: #f0f0eb;
  --pc-tile-hover: #f6f6f2;
  --pc-edge: #c8c8c2;
  --pc-on-dark: #101010;
  --pc-on-dark-soft: #4a4a4a;
  --pc-on-dark-muted: #5f615a;
  --pc-accent-ink: #006a6a;   /* 纸底上的青色文字（6.42:1 on 白瓦片 / 5.13 on 纸） */   /* 纸底上 5.11:1（#6a6a6a 只有 4.22，不够 AA） */
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.035) 1px, transparent 1px);
}
html[data-theme='light'] body.prts .site-header {
  background: rgba(232, 232, 232, 0.94);
  border-bottom-color: var(--pc-line);
}
html[data-theme='light'] body.prts .brand-mark { color: var(--pc-ink); }
html[data-theme='light'] body.prts .hero h1 { text-shadow: none; }
/* 浅色下瓦片是白的、纸是灰的 → 描边略深一档才看得清边界 */
html[data-theme='light'] body.prts .card,
html[data-theme='light'] body.prts .panel,
html[data-theme='light'] body.prts .post-card,
html[data-theme='light'] body.prts .article .body { border-color: #c0c0ba; }
html[data-theme='light'] body.prts .card { box-shadow: inset 0 -3px 0 rgba(16, 16, 16, 0.06); }
html[data-theme='light'] body.prts .card:hover { background: #fbfbf8; }
html[data-theme='light'] body.prts .blog-nav,
html[data-theme='light'] body.prts .tabs,
html[data-theme='light'] body.prts .toolbar .search input { background: #ffffff; }
html[data-theme='light'] body.prts .tab:hover { background: #efefe9; }
html[data-theme='light'] body.prts .archive-item { background: #ffffff; }
html[data-theme='light'] body.prts .tag-cloud a { background: #ffffff; }
html[data-theme='light'] body.prts .site-footer { border-top-color: var(--pc-line); }

/* ============================================================
   聊天（/chat/）与角色工坊（/chat/studio/）
   ------------------------------------------------------------
   结构：左 = 可呼出的角色栏；右 = 纯聊天区（头像 / 名称 / 消息 / 输入）。
   语言与全站一致：深色=近黑壳+米白瓦片，日间=纸壳+白瓦片。
   ============================================================ */
html body.prts .chat-head-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 30px 0 16px; }
html body.prts .chat-title { margin: 0; font-size: clamp(24px, 3.2vw, 32px); letter-spacing: -0.3px; color: var(--pc-on-dark); }
html body.prts .chat-shell {
  display: flex;
  border: 1px solid var(--pc-edge);
  background: var(--pc-tile);
  box-shadow: none;
  min-height: min(74vh, 720px);
  position: relative;
}
/* ---------- 左：角色栏（可呼出） ---------- */
html body.prts .chat-rail {
  flex: 0 0 244px;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--pc-line);
  background: var(--pc-panel);
  transition: flex-basis 0.24s ease, opacity 0.18s ease;
  overflow: hidden;
}
html body.prts .chat-shell.rail-off .chat-rail { flex-basis: 0; opacity: 0; border-right: 0; }
html body.prts .rail-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--pc-line);
  color: var(--pc-on-dark); font-size: 12px; letter-spacing: 0.18em;
}
html body.prts .rail-head .n {
  margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--pc-accent-ink);
  border: 1px solid var(--pc-cyan); padding: 0 6px;
}
html body.prts .rail-list { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px; }
html body.prts .rail-empty {
  margin: 10px 8px; font-size: 12.5px; line-height: 1.8; color: var(--pc-on-dark-muted);
}
html body.prts .rail-group { padding: 10px 8px 4px; font-size: 11px; letter-spacing: 0.16em; color: var(--pc-on-dark-muted); }
html body.prts .rail-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; padding: 9px 10px; margin-bottom: 4px;
  background: transparent; border: 1px solid transparent; border-left: 3px solid transparent;
  color: var(--pc-on-dark);
  /* ⚠️ min-width:0 + overflow:hidden 是必需的：父级 flex-basis 在收起/展开动画中会压窄，
     不设的话长标签会折行、文字顶出容器（用户录屏里就是这个毛病）。 */
  min-width: 0; overflow: hidden;
}
html body.prts .rail-item:hover { background: var(--pc-panel-3); }
html body.prts .rail-item.on { background: var(--pc-tile); border-color: var(--pc-edge); border-left-color: var(--pc-cyan); }
html body.prts .rail-item .ra {
  flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--pc-cyan); color: var(--pc-ink); font-weight: 700; font-size: 14px;
}
html body.prts .rail-item .rb { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; }
html body.prts .rail-item .rb b,
html body.prts .rail-item .rb i {
  /* 名字与标签一律单行省略号 —— 角色名/标签可能很长 */
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html body.prts .rail-item .rb b { font-size: 13.5px; font-weight: 650; color: var(--pc-on-dark); }
html body.prts .rail-item.on .rb b { color: var(--pc-ink); }
html body.prts .rail-item .rb i { font-style: normal; font-size: 11.5px; color: var(--pc-on-dark-muted); }
html body.prts .rail-item.on .rb i { color: var(--pc-ink-muted); }
html body.prts .rail-item .rc {
  flex: 0 0 auto; margin-left: 4px; font-size: 10.5px; color: var(--pc-ink); background: var(--pc-cyan); padding: 0 5px;
}
/* 页头上的后端切换（默认 DPS 网页端 / 自己的 API） */
html body.prts .chat-backend {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  font-size: 12px; color: var(--pc-ink-muted);
}
html body.prts .chat-backend select {
  width: auto; font-size: 12.5px; padding: 5px 8px; color: var(--pc-ink);
  background: var(--pc-tile-hi); border: 1px solid var(--pc-cyan-ink);
}
/* 联网查资料开关 */
html body.prts .chat-search {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 2px;
  font-size: 12px; color: var(--pc-ink-muted); cursor: pointer; white-space: nowrap;
}
html body.prts .chat-search input { width: 14px; height: 14px; margin: 0; accent-color: var(--pc-cyan); }
html body.prts .chat-top .btn { margin-left: 8px; }
html body.prts .rail-new {
  display: block; margin: 8px; padding: 10px; text-align: center;
  border: 1px dashed var(--pc-cyan); color: var(--pc-accent-ink);
  font-size: 12.5px; letter-spacing: 0.06em;
}
html body.prts .rail-new:hover { background: rgba(20, 208, 208, 0.10); }
/* ---------- 右：聊天区 ---------- */
html body.prts .chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
html body.prts .chat-top {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--pc-edge); border-top: 3px solid var(--pc-cyan);
  background: var(--pc-tile-hi);
}
html body.prts .chat-avatar {
  width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center;
  background: var(--pc-cyan); color: var(--pc-ink); font-weight: 700; font-size: 18px;
}
html body.prts .chat-name { font-weight: 700; color: var(--pc-ink); }
html body.prts .chat-tag {
  font-size: 11px; font-weight: 500; color: var(--pc-cyan-ink); margin-left: 6px;
  padding: 1px 7px; border: 1px solid var(--pc-cyan-ink);
}
html body.prts .chat-status { font-size: 12.5px; color: var(--pc-ink-muted); margin-top: 3px; }
html body.prts .chat-status.ok { color: var(--pc-cyan-ink); }
html body.prts .chat-status.warn { color: #a34a12; }
html body.prts .chat-top .btn { margin-left: auto; }
html body.prts .msgs { flex: 1; padding: 18px 16px; overflow-y: auto; height: clamp(320px, 46vh, 520px); }
html body.prts .msg { display: flex; gap: 10px; margin-bottom: 14px; align-items: flex-start; }
html body.prts .msg .av {
  flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; background: var(--pc-cyan); color: var(--pc-ink);
  object-fit: cover;   /* 自己的消息用上传的头像（<img class="av">） */
}
html body.prts .msg.user { flex-direction: row-reverse; }
html body.prts .msg.user .av { background: var(--pc-cyan-deep); color: var(--pc-ink); }
html body.prts .msg .bd {
  max-width: min(78%, 660px); padding: 10px 14px; font-size: 14.5px; line-height: 1.8;
  border: 1px solid var(--pc-edge); background: var(--pc-tile-hi); color: var(--pc-ink-soft);
}
html body.prts .msg.user .bd { background: var(--pc-tile-dim); color: var(--pc-ink); white-space: pre-wrap; }
html body.prts .msg .bd p { margin: 0 0 8px; }
html body.prts .msg .bd p:last-child { margin-bottom: 0; }
html body.prts .msg .bd strong { color: var(--pc-ink); }
html body.prts .msg .bd code {
  background: var(--pc-tile-dim); border: 1px solid var(--pc-edge); color: #06494a; padding: 1px 5px; font-size: 13px;
}
html body.prts .typing span {
  display: inline-block; width: 6px; height: 6px; margin-right: 4px; background: var(--pc-cyan);
  animation: prts-blink 1.2s infinite ease-in-out;
}
html body.prts .typing span:nth-child(2) { animation-delay: 0.18s; }
html body.prts .typing span:nth-child(3) { animation-delay: 0.36s; margin-right: 0; }
@keyframes prts-blink { 0%, 60%, 100% { opacity: 0.28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
html body.prts .composer { display: flex; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--pc-edge); background: var(--pc-tile-hi); align-items: flex-end; }
html body.prts .composer textarea { flex: 1; resize: none; min-height: 46px; max-height: 140px; line-height: 1.6; }
html body.prts .composer .btn { flex: 0 0 auto; height: 46px; }
/* ---------- 角色工坊 ---------- */
html body.prts .studio-list { display: flex; flex-direction: column; gap: 6px; }
html body.prts .studio-group { margin-top: 10px; font-size: 11px; letter-spacing: 0.16em; color: var(--pc-ink-muted); }
html body.prts .studio-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--pc-edge); background: var(--pc-tile-hi);
}
html body.prts .studio-item.on { border-left: 3px solid var(--pc-cyan); }
html body.prts .studio-item .sa {
  flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--pc-cyan); color: var(--pc-ink); font-weight: 700;
}
html body.prts .studio-item .sb { display: flex; flex-direction: column; min-width: 0; flex: 1; }
html body.prts .studio-item .sb b { font-size: 14px; color: var(--pc-ink); }
html body.prts .studio-item .sb i { font-style: normal; font-size: 12px; color: var(--pc-ink-muted); }
html body.prts .studio-item .sc, html body.prts .studio-item .sd { font-size: 12px; color: var(--pc-ink-muted); font-family: var(--mono); }
html body.prts .studio-item .se { display: flex; gap: 6px; margin-left: auto; }
html body.prts .studio-builtin summary { cursor: pointer; color: var(--pc-ink); font-size: 14px; }
html body.prts .studio-skill {
  max-height: 340px; overflow: auto; margin: 0; padding: 12px 14px; font-size: 12.5px; line-height: 1.7;
  background: var(--pc-terminal); color: #f5f5f0; border: 1px solid var(--pc-line); white-space: pre-wrap;
}
/* 日间：壳与瓦片换纸/白，其余靠令牌自动跟随 */
html[data-theme='light'] body.prts .rail-item.on { background: #fff; }
html[data-theme='light'] body.prts .chat-shell { border-color: #c0c0ba; }
html[data-theme='light'] body.prts .msg.user .bd { background: #f0f0eb; }

@media (max-width: 860px) {
  /* 窄屏：角色栏变成抽屉（默认收起，点「☰ 角色」滑出） */
  html body.prts .chat-rail {
    position: absolute; z-index: 5; left: 0; top: 0; bottom: 0;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.28);
  }
  html body.prts .chat-shell.rail-off .chat-rail { position: absolute; }
}

/* ============================================================
   移动端
   ============================================================ */
@media (max-width: 620px) {
  html body.prts .hero { padding: 30px 0 4px; }
  html body.prts .hero::before { top: 14px; width: 64px; height: 3px; }
  html body.prts .hero h1 { font-size: clamp(26px, 8vw, 34px); }
  html body.prts .card { min-height: 76px; padding: 14px 15px; }
  html body.prts .search input:focus { outline-width: 2px; }
}