/* ═══════════════════════════════════════════════════════════════════════════
   皮肤 · ARC 风格（ARC 海报）—— 暗底 + 奶白纸卡 + 黑框硬影 + 斜切红块 + 四条彩虹直带

   令牌与装饰取自 ~/项目/style_preview/arc.css（站长自己的方向稿），装饰规则按站点
   真实类名重写，覆盖 7 个页面的公共外壳与各自的面板。**不改任何布局/结构**，只换
   色、质感、纹理与形状（圆角/阴影/字体）。

   约定（见 06-皮肤系统）：
   - 所有规则以 [data-skin="arc"] 开头（不写死 :root），这样弹窗里的迷你预览把
     data-skin 挂在 div 上也能复用同一份令牌与同一批装饰规则。
   - mark.css 的令牌挂在 body 上（body 自身声明一定赢从 html 继承的值），所以下面
     额外给 body 一次覆盖；特异度 [data-skin] body = (0,1,1) 压得过 body (0,0,1)。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 令牌 ─────────────────────────── */
[data-skin="arc"] {
  /* 底色 / 面板 / 文字 / 描边 */
  --bg:          #14132a;
  --panel:       #f0e9da;
  --panel-2:     #e4dccc;
  --panel-3:     #ded5c2;
  --ink:         #16181e;
  --muted:       #4d4a42;
  --faint:       #635e51;      /* 面板上的说明文字：对 #f0e9da 5.3:1（原 #7d786a 只有 3.6:1，偏虚） */
  --line:        #d5cdb9;
  --line-2:      #c9bfa8;

  /* 强调色：ARC 的红 */
  --accent:      #e33429;
  --accent-2:    #c2271e;
  --accent-soft: #f3d9d2;
  --on-accent:   #fdf8ef;
  --accent-grad: linear-gradient(135deg, #e33429, #c2271e);

  /* 外壳：侧栏/顶栏压暗，与奶白纸卡拉开层次 */
  --shell-bg:    #1b1a33;
  --shell-2:     #262545;
  --shell-ink:   #ddd8ca;
  --shell-muted: #a8a294;      /* 导航项文字：对 #1b1a33 6.7:1 */
  --shell-faint: #9b9689;      /* 页脚/占位符：5.7:1（原 #6f6b60 只有 3.2:1） */

  /* 内容装饰 */
  --cover-grad:   linear-gradient(135deg, #2f6db3, #1e4d85);
  --cover-grad-2: linear-gradient(135deg, #e33429, #b0251c);
  --track:        #ddd5c2;
  --row-hover:    #e8e0cc;
  --scrollbar:    #c9bfa8;
  --sec-title:    #ddd8ca;
  --sec-faint:    #6f6b60;

  /* 语义色 */
  --ok:          #2f9e5c;
  --danger:      #e33429;
  --danger-soft: #f7dcd8;

  /* 形状：硬边、几乎直角 */
  --r-xl:   4px;
  --r-lg:   4px;
  --r-md:   3px;
  --r-mark: 4px;
  --r-pill: 3px;

  /* 阴影：2px 黑框 + 实心偏移块（海报硬影，没有模糊） */
  --shadow:        0 0 0 2px #000, 6px 6px 0 rgba(0, 0, 0, .55);
  --shadow-sm:     0 0 0 2px #000, 3px 3px 0 rgba(0, 0, 0, .45);
  --shadow-hover:  0 0 0 2px #000, 5px 5px 0 #e33429;
  --shadow-accent: 0 0 0 2px #000, 3px 3px 0 rgba(0, 0, 0, .55);

  /* 字体：标题用窄体，正文不变 */
  --font-head: "Arial Narrow", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;

  --stripe-op: .13;
}

/* mark 阅读页的令牌挂在 body 上 —— 必须再覆盖一次，否则读到的还是浅色那一套 */
[data-skin="arc"] body,
[data-skin="arc"] body[data-theme] {
  --canvas:   #14132a;
  --panel:    #f0e9da;
  --panel-2:  #e4dccc;
  --paper:    #f2ecdf;
  --ink:      #16181e;
  --ink-soft: #4d4a42;
  --line:     #d5cdb9;
  --sel:      #e33429;
  --lv-alpha: .16;
  --r-xl:     4px;
  --r-lg:     4px;
  --r-pill:   3px;
  --shadow-sm: 0 0 0 2px #000, 3px 3px 0 rgba(0, 0, 0, .45);
  --font-ui: "Arial Narrow", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ─────────────── 页面底色：右侧四条超大彩虹带 + 噪点 ─────────────── */

/* 底色落在根元素（html）上；body 透明，好让下面那条彩虹带画在「卡片之下、底色之上」。 */
[data-skin="arc"] { background-color: var(--bg); }
[data-skin="arc"] body { background: transparent; color: var(--ink); }

/* 四条**超大的直线**彩虹带（原来是同心圆弧，现在拉直），沿右侧从上一直扫到底。
   几何说明（115° 直线渐变，渐变轴从左上角 0% 走到右下角 100%）：
     视口四角在轴上的位置 ≈ 左上 0% / 左下 26% / 右上 74% / 右下 100%，
   所以把这组带子放在 46%–75% 附近，它正好从右上角斜着扫到底边中段（上下都露头）。
   - z-index:-1：画在画布底色之上、卡片之下 —— 卡片区域始终干净，这也是「暗」的来源；
   - mask 只在**左侧**淡出（圆心放在右缘中点），不再从下往上切；
   - 115° 与色值照 style_preview 里那版色卡。 */
[data-skin="arc"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(115deg,
    transparent 0    46%,
    #29d3e8    46%   52%,
    transparent 52%  53.5%,
    #2fd35f    53.5% 59.5%,
    transparent 59.5% 61%,
    #f5a623    61%   67%,
    transparent 67%  68.5%,
    #e33429    68.5% 75%,
    transparent 75%);
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(150% 115% at 100% 50%, #000 0 46%, transparent 92%);
  mask-image: radial-gradient(150% 115% at 100% 50%, #000 0 46%, transparent 92%);
}

/* 噪点铺在最上层（5% 白噪声，pointer-events 关掉；弹窗走 <dialog> 顶层，不受影响） */
[data-skin="arc"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─────────────────────────── 外壳 ─────────────────────────── */
/* 侧栏/顶栏留一点透明度：让后面的彩虹带**从外壳里透出来**（顶栏右侧正是那几条带子扫过的位置）。
   只透 12%，文字对比度基本不变，整体亮度还是暗的。 */
[data-skin="arc"] .sidebar,
[data-skin="arc"] .topbar {
  background: color-mix(in srgb, var(--shell-bg) 88%, transparent);
  color: var(--shell-ink);
  box-shadow: var(--shadow);
}
/* 顶栏内缘压一道 4px 红底线：海报的「标题下划线」，也把外壳和内容区切开 */
[data-skin="arc"] .topbar { box-shadow: var(--shadow), inset 0 -4px 0 var(--accent); }

[data-skin="arc"] .brand { color: var(--shell-ink); }
/* 品牌标：菱形红块（方向稿 style_preview/arc.css 的 rotate(45deg)），但字母 R 保持
   正立 —— 菱形画在 ::before 上，文字不跟着转。硬影用 filter: drop-shadow 投在合成
   后的菱形上，方向不会被 transform 一起转走。 */
[data-skin="arc"] .brand-mark {
  position: relative;
  isolation: isolate;
  background: transparent;
  color: var(--on-accent);
  border-radius: 0;
  box-shadow: none;
  font-weight: 900;
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .5));
}
[data-skin="arc"] .brand-mark::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--accent);
  transform: rotate(45deg);
  border-radius: 3px;
  box-shadow: 0 0 0 2px #000;
}
/* 站名：窄体加粗 + 收紧字距，海报字标感 */
[data-skin="arc"] .brand-text strong {
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: -.01em;
}
[data-skin="arc"] .brand-text em { color: var(--shell-faint); }

/* 全局小件：红色选中块、黑框焦点 */
[data-skin="arc"] ::selection { background: var(--accent); color: var(--on-accent); }
[data-skin="arc"] :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

[data-skin="arc"] .rail-item { color: var(--shell-muted); font-weight: 600; }
[data-skin="arc"] .rail-item:hover { background: var(--shell-2); color: var(--shell-ink); }
[data-skin="arc"] .rail-item.is-active {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-accent);
}
[data-skin="arc"] .rail-cta {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-accent);
}
[data-skin="arc"] .rail-cta:hover { box-shadow: var(--shadow-hover); }

[data-skin="arc"] .sidebar-foot {
  background: var(--shell-2);
  color: var(--shell-faint);
  border-radius: var(--r-md);
}
[data-skin="arc"] .sidebar-foot .status-dot { border-radius: 2px; }

/* 侧栏里的小灰公告 / 小灰人设（lib/notice.css、lib/persona.css 用面板色，这里压成外壳色） */
[data-skin="arc"] .sidebar .notice-block { background: var(--shell-2); color: var(--shell-muted); }
[data-skin="arc"] .sidebar .notice-title,
[data-skin="arc"] .sidebar .notice-msg { color: var(--shell-ink); }
[data-skin="arc"] .sidebar .notice-title::before { background: var(--accent); }
[data-skin="arc"] .sidebar .notice-time { color: var(--shell-faint); }
[data-skin="arc"] .sidebar .notice-emoji {
  background: var(--shell-bg);
  box-shadow: inset 0 0 0 1px #000;
  border-radius: var(--r-md);
}
[data-skin="arc"] .sidebar .notice-emoji.is-mine { background: var(--accent); color: var(--on-accent); }
[data-skin="arc"] .sidebar .persona-area,
[data-skin="arc"] .sidebar .persona-btn { background: var(--shell-2); color: var(--shell-ink); }

/* ─────────────────── 标题：斜切红块托底（招牌动作） ─────────────────── */
[data-skin="arc"] .topbar-title h1 {
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--shell-ink);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .55);
}
[data-skin="arc"] .topbar-title p { color: var(--shell-faint); }

[data-skin="arc"] .card-head h2,
[data-skin="arc"] .sec-head h2,
[data-skin="arc"] .q-title {
  position: relative;
  isolation: isolate;
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: .05em;
  color: var(--on-accent);
  padding: 2px 12px 2px 10px;
}
[data-skin="arc"] .card-head h2::before,
[data-skin="arc"] .sec-head h2::before,
[data-skin="arc"] .q-title::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: skewX(-14deg);
}
[data-skin="arc"] .sec-head { padding-left: 10px; }

/* ─────────────────────────── 顶栏控件 ─────────────────────────── */
[data-skin="arc"] .search { background: var(--shell-2); color: var(--shell-faint); border-radius: var(--r-md); }
[data-skin="arc"] .search input { color: var(--shell-ink); }
[data-skin="arc"] .search input::placeholder { color: var(--shell-faint); }
[data-skin="arc"] .search:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
[data-skin="arc"] .user-chip { background: var(--shell-2); border-radius: var(--r-md); }
[data-skin="arc"] .user-chip .uname { color: var(--shell-ink); }
[data-skin="arc"] .coins { background: var(--shell-bg); color: #f0a500; box-shadow: none; border-radius: var(--r-md); }
[data-skin="arc"] .logout { color: var(--shell-muted); }
[data-skin="arc"] .logout:hover { background: var(--shell-bg); color: var(--shell-ink); }
[data-skin="arc"] .icon-btn,
[data-skin="arc"] .topbar .tag,
[data-skin="arc"] .mode-chip {
  background: var(--shell-2);
  color: var(--shell-ink);
  border: 1.5px solid #000;
  box-shadow: none;
}
[data-skin="arc"] .icon-btn:hover { background: var(--accent); color: var(--on-accent); }
[data-skin="arc"] .back:hover { background: var(--shell-2); }
[data-skin="arc"] .topbar .offline-chip { background: #f0a500; color: #16181e; border: 1.5px solid #000; }

/* ─────────────────────── 面板：奶白纸卡 + 黑框硬影 ─────────────────────── */
[data-skin="arc"] .card,
[data-skin="arc"] .col,
[data-skin="arc"] .queue,
[data-skin="arc"] .brief,
[data-skin="arc"] .col-skeleton,
[data-skin="arc"] .paper,
[data-skin="arc"] .sheet,
[data-skin="arc"] .modal,
[data-skin="arc"] .ask-card,
[data-skin="arc"] .conv-list,
[data-skin="arc"] .conv-menu,
[data-skin="arc"] .cm-drawer,
[data-skin="arc"] .composer-box {
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
  border-radius: var(--r-lg);
}
/* mark 阅读区的分栏不是卡片，别给它套硬影 */
[data-skin="arc"] .paper .col,
[data-skin="arc"] .stage .col {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
/* purify 队列卡片：左侧那道 4px 竖条改成红色 */
[data-skin="arc"] .queue .card { border-left-color: var(--accent); }
[data-skin="arc"] .lib-row { border-bottom-color: var(--line); }
[data-skin="arc"] .lib-row:hover { background: var(--row-hover); }
[data-skin="arc"] .modal-mask { background: rgba(9, 8, 22, .66); }
[data-skin="arc"] .detail {
  background: #16181e;
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-md);
}

/* ─────────────────────────── 按钮 ─────────────────────────── */
[data-skin="arc"] .primary-btn,
[data-skin="arc"] .run-btn,
[data-skin="arc"] .upload-btn,
[data-skin="arc"] .send-btn,
[data-skin="arc"] .ask-go,
[data-skin="arc"] .cm-send,
[data-skin="arc"] .persona-save,
[data-skin="arc"] .sbtn.primary {
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: var(--shadow-accent);
  border-radius: var(--r-md);
}
[data-skin="arc"] .primary-btn:hover,
[data-skin="arc"] .run-btn:hover,
[data-skin="arc"] .upload-btn:hover,
[data-skin="arc"] .send-btn:hover { box-shadow: var(--shadow-hover); }
/* 按下：整块右下挪 2px、吃掉偏移影 —— 硬影块就该有「能按下去」的手感 */
[data-skin="arc"] .primary-btn:active,
[data-skin="arc"] .run-btn:active,
[data-skin="arc"] .upload-btn:active,
[data-skin="arc"] .send-btn:active,
[data-skin="arc"] .ask-go:active,
[data-skin="arc"] .cm-send:active,
[data-skin="arc"] .persona-save:active,
[data-skin="arc"] .rail-cta:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 2px #000, 1px 1px 0 rgba(0, 0, 0, .55);
}

/* ─────────────────── 芯片 / 标签 / 进度条 ─────────────────── */
[data-skin="arc"] .chip,
[data-skin="arc"] .pill,
[data-skin="arc"] .book-tag,
[data-skin="arc"] .model-chip,
[data-skin="arc"] .src-human,
[data-skin="arc"] .src-aigc,
[data-skin="arc"] .col-series,
[data-skin="arc"] .me-rank,
[data-skin="arc"] .ask-badge,
[data-skin="arc"] .cm-badge {
  border: 1.5px solid #000;
  font-weight: 600;
  box-shadow: none;
}
[data-skin="arc"] .chip.is-on {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
/* 选中的模型卡片**不铺红底**：卡里有一整行 11px 小字，红底会把可读性吃光。
   改用「淡红底 + 2px 红框 + 红勾」表达选中，字全部保持深色。 */
[data-skin="arc"] .model-chip.is-on {
  background: var(--accent-soft);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--accent);
}
[data-skin="arc"] .model-chip.is-on .chip-meta { color: var(--muted); }
[data-skin="arc"] .chip-tick { background: var(--panel); }
[data-skin="arc"] .model-chip.is-on .chip-tick { background: var(--accent); color: var(--on-accent); }

[data-skin="arc"] .prog,
[data-skin="arc"] .dist,
[data-skin="arc"] .dist-empty,
[data-skin="arc"] .progress,
[data-skin="arc"] .bar,
[data-skin="arc"] .gpu-bar { background: var(--track); }
[data-skin="arc"] .gpu-bar { border: 1.5px solid #000; }
[data-skin="arc"] .gpu-bar i { background: var(--accent); }

/* 头像方块化（ARC 不要圆角） */
[data-skin="arc"] .avatar,
[data-skin="arc"] .who-avatar,
[data-skin="arc"] .me-avatar,
[data-skin="arc"] .msg-avatar,
[data-skin="arc"] .cm-av,
[data-skin="arc"] .chat-empty-mark { border-radius: var(--r-md); }

/* ─────────────────────────── 提示条 / 滚动条 ─────────────────────────── */
[data-skin="arc"] .toast {
  background: #16181e;
  color: var(--on-accent);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
[data-skin="arc"] .content::-webkit-scrollbar-thumb,
[data-skin="arc"] .modal-body::-webkit-scrollbar-thumb,
[data-skin="arc"] .single::-webkit-scrollbar-thumb,
[data-skin="arc"] .sheet-body::-webkit-scrollbar-thumb,
[data-skin="arc"] .msg-scroll::-webkit-scrollbar-thumb,
[data-skin="arc"] .ask-card::-webkit-scrollbar-thumb { background: var(--scrollbar); }

/* ─────────────────── 各页专有 ─────────────────── */
/* 书库：封面纸卡 / 来源标签 / 进度 / 合集徽章 */
[data-skin="arc"] .book-cover { background: var(--cover-grad); color: var(--on-accent); }
[data-skin="arc"] .book-cover.is-aigc { background: var(--cover-grad-2); }
[data-skin="arc"] .src-human { background: #dce8f5; color: #1d4f7c; }
[data-skin="arc"] .src-aigc { background: #f7e0d8; color: #8f2a1c; }
/* 「合集 N 篇」原本是 --accent 字压 --accent-soft（红字压粉底，3.3:1），换成深字硬边标签 */
[data-skin="arc"] .anth-badge {
  background: var(--panel-2);
  color: var(--ink);
  border: 1.5px solid #000;
  font-weight: 700;
}

/* 数据筛选：红块标题里的计数要用浅字（否则深棕小字压在红块上读不出来） */
[data-skin="arc"] .q-title { width: fit-content; }
[data-skin="arc"] .q-title .q-total { color: var(--on-accent); opacity: .82; }

/* 评测场：三色分栏标题 / 句子底色 */
[data-skin="arc"] .col-head { background: var(--panel-2); border-bottom-color: var(--line); }
[data-skin="arc"] .sent { color: var(--ink); }
[data-skin="arc"] .sent.tone-good { background: #dfe9d8; }
[data-skin="arc"] .sent.tone-bad { background: #f4dcd6; }
[data-skin="arc"] .vd-tag { background: var(--accent); color: var(--on-accent); }

/* 提交条与「逐句结果」是直接坐在页面底色上的（不在卡片里）：--ink/--muted/--faint 都是
   配奶白面板的深色，压在暗底上等于隐形。小灰那段总评改成一颗奶白胶囊（有内容时才出现），
   其余小字改用外壳色。 */
[data-skin="arc"] .verdict:has(.vd-row) {
  background: var(--panel);
  color: var(--ink);
  border: 2px solid #000;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 7px 11px;
}
[data-skin="arc"] .run-status,
[data-skin="arc"] .results-head h2 { color: var(--shell-ink); }
[data-skin="arc"] .run-cost { color: var(--shell-faint); }
/* 「先贴一段文字 / 评测完小灰说两句」恰好坐在彩虹带扫过的位置：给一颗半透明深色
   胶囊托底，带子再花字也读得清，形状也像小灰的对话气泡 */
[data-skin="arc"] .vd-idle,
[data-skin="arc"] .vd-wait {
  display: inline-block;
  width: fit-content;
  color: var(--shell-muted);
  background: color-mix(in srgb, var(--shell-bg) 82%, transparent);
  border: 2px solid #000;
  border-radius: var(--r-md);
  padding: 5px 10px;
}
[data-skin="arc"] .run-status.is-err { color: #ff9b93; }
/* 通用兜底：不在卡片里的小字（.card-hint 之类）也用外壳色，别用面板深色 */
[data-skin="arc"] .card-hint:not(.card *),
[data-skin="arc"] .note:not(.card *) { color: var(--shell-faint); }

/* 个人中心：数据磁贴 / 金币 */
[data-skin="arc"] .tile { background: var(--panel-2); box-shadow: inset 0 0 0 1.5px #000; }
[data-skin="arc"] .tile.is-hero { background: var(--accent-grad); color: var(--on-accent); }
[data-skin="arc"] .coin-pill {
  background: #f0a500;
  color: #16181e;
  border: 1.5px solid #000;
  box-shadow: none;
}
[data-skin="arc"] .dev-note { background: #f0a500; color: #16181e; box-shadow: inset 0 0 0 1.5px #000; }

/* 小灰聊天：用户气泡换成红块 */
[data-skin="arc"] .msg-user .bubble { background: var(--accent); color: var(--on-accent); }
[data-skin="arc"] .msg-user .msg-avatar { background: var(--accent-2); }
[data-skin="arc"] .offline-bar { background: #f0a500; color: #16181e; border-bottom-color: #000; }

/* 标注页：选中句 / 目录 / 设置面板 */
[data-skin="arc"] .sline.cur,
[data-skin="arc"] .toc-list button.cur { background: var(--accent-soft); }
[data-skin="arc"] .sline:hover,
[data-skin="arc"] .toc-list button:hover { background: var(--row-hover); }
[data-skin="arc"] .s { box-shadow: inset 0 0 0 1px var(--line-2); }
[data-skin="arc"] .seg,
[data-skin="arc"] .stat,
[data-skin="arc"] .ask-status,
[data-skin="arc"] .ask-advice,
[data-skin="arc"] .ask-sent { background: var(--panel-2); }
[data-skin="arc"] .sheet .field:has(#themeSwatches) { display: none; }