/* ============================================================
   闪得素材 - 小部件作用域基础样式
   句柄: shande-scope-base
   仅在 .shande-scope 作用域内提供 CSS 变量 / 盒模型 / 字体，
   不污染整页（不加载主题 base.css 的全局 * 重置）。
   ============================================================ */

/* 站点字体栈定义在 :root，供作用域内外共用。
   挂到 <body> 的浮层（Toast、各类弹窗）不在 .shande-scope 内，
   若把字体栈写在 .shande-scope 上，它们就取不到，只能各自再抄一份 ——
   此前正是抄了 4 份，改一处漏三处。
   字体族统一供页面、组件与浮层继承；布局重置仍仅限小部件作用域。 */
:root {
  --sd-font: 'Noto Sans SC', sans-serif;
}

/* 共用开源界面字体：沿用已有 OSS 自托管 Noto Sans SC（SIL OFL 1.1）。
   覆盖 Astra 的系统字体默认值；不使用 * 或伪元素覆盖，保留图标字体、
   商品试字与创作画布的独立字体。全站字号、字重仍由原组件控制。 */
body,
body :is(button, input, select, textarea),
body :is(h1, h2, h3, h4, h5, h6),
body .trp-language-item-name,
body .zcs-palette-color :is(span, small),
body .report-upload-item__del,
html body a.sd-view-switch-link {
  font-family: var(--sd-font);
}

.shande-scope {
  /* 主题色变量（原 base.css :root） */
  --primary: #096ddd;
  --primary-light: #49c9e9;
  --primary-dark: #0857b0;
  --gradient-start: #096ddd;
  --gradient-end: #49c9e9;
  --text-primary: #1e293b;
  --text-secondary: #666666;
  --text-light: #94a3b8;
  --bg-white: #ffffff;
  --bg-light: #f8fafc;
  --border-color: #e2e8f0;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --header-height: 64px;

  /* 与全站一致，使用已自托管并保留 OFL 许可的 Noto Sans SC。 */
  font-family: var(--sd-font);
  color: var(--text-primary);
  line-height: 1.6;
}

/* 盒模型 + 外/内边距重置，作用域内对齐首页 base.css 的全局 * 重置。
   用 :where() 使特异性与源码 base.css（* / a / button = 0,0,x）完全一致，
   这样组件类（如 .user-sidebar__renew）能正常覆盖，不会被本重置反向盖掉。 */
:where(.shande-scope),
:where(.shande-scope) * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:where(.shande-scope) a {
  text-decoration: none;
  color: inherit;
}

:where(.shande-scope) button {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* 由 <button> 转换来的 <span role="button"> 仍保持可点击手型 */
.shande-scope [role="button"] {
  cursor: pointer;
}

/* 中和主题（Astra）给表格加的默认边框：源码表格仅有 border-bottom，无四周/网格边框。
   用 !important 仅清除上/左/右三边（确保盖过 Astra 的高特异性规则），
   不动 border-bottom，源码自身的底部分隔线照常显示。 */
.shande-scope table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 0 !important;
}
.shande-scope table th,
.shande-scope table td,
.shande-scope table tr {
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* ============================================================
   中和主题（Astra）的虚线 focus 轮廓。
   Astra 给 input/select/textarea/button/a 的 :focus 加了 thin dotted 轮廓，
   点一下只读输入框就会出现一圈虚线选中框，与本站视觉不符。
   这里在作用域内统一处理一次，避免每遇到一个组件改一处。

   不能简单写 outline:none —— 那会让键盘用户完全看不到焦点位置（可访问性倒退）。
   做法是「拆开处理」：
     - 一律去掉虚线轮廓；
     - 鼠标点击（:focus 但非 :focus-visible）不显示任何焦点框；
     - 键盘 Tab（:focus-visible）换成主题色实线细框，清晰且不突兀。
   ============================================================ */
.shande-scope :is(input, select, textarea, button, a, [role="button"], [tabindex]):focus {
  outline: none;
}

/* 键盘导航时给出可见焦点：实线主题色，替代 Astra 的虚线。 */
.shande-scope :is(input, select, textarea, button, a, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-radius: 3px;
}

/* 只读 / 禁用输入框不是可编辑目标，点击它不该有任何焦点表现。 */
.shande-scope input[readonly]:focus-visible,
.shande-scope input[disabled]:focus-visible,
.shande-scope textarea[readonly]:focus-visible,
.shande-scope textarea[disabled]:focus-visible {
  outline: none;
}

/* 文本输入类元素单独处理。
   上面的 :focus-visible 方案对按钮/链接有效，但对文本框无效——浏览器认为
   文本框「预期接受键盘输入」，鼠标点击时也会判定 :focus-visible，
   于是仍会画出轮廓。这类元素的焦点态应当由边框颜色表达（各组件已自行实现），
   不需要额外轮廓，故一律取消。
   用 !important 是因为无法确认 Astra 那条规则的声明权重，
   而这里只影响本作用域内的表单元素，副作用可控。 */
.shande-scope :is(input, textarea, select, [contenteditable]):focus,
.shande-scope :is(input, textarea, select, [contenteditable]):focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* 补一档更高特异性：Astra 用 input[type="text"] 这类属性选择器写输入框样式，
   :is(input) 的特异性等同元素选择器，遇到属性选择器会失效。
   这里显式列出常用 type，确保覆盖。 */
.shande-scope input[type="text"]:focus,
.shande-scope input[type="text"]:focus-visible,
.shande-scope input[type="search"]:focus,
.shande-scope input[type="search"]:focus-visible,
.shande-scope input[type="email"]:focus,
.shande-scope input[type="email"]:focus-visible,
.shande-scope input[type="tel"]:focus,
.shande-scope input[type="tel"]:focus-visible,
.shande-scope input[type="url"]:focus,
.shande-scope input[type="url"]:focus-visible,
.shande-scope input[type="number"]:focus,
.shande-scope input[type="number"]:focus-visible,
.shande-scope input[type="password"]:focus,
.shande-scope input[type="password"]:focus-visible,
.shande-scope textarea:focus,
.shande-scope textarea:focus-visible,
.shande-scope [contenteditable="true"]:focus,
.shande-scope [contenteditable="true"]:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

/* ============================================================
   表单控件字体与占位符：作用域内统一一次。

   为什么需要这条：
     1. 字体族——Astra 的 `input,select,textarea{font-size:100%}` 只重置了字号，
        没有让表单控件继承页面字体。浏览器默认给表单控件用系统 UI 字体，
        于是同一个弹窗里标签是 Noto Sans SC、输入框却是系统字体，中文字形不一致。
     2. 占位符字号——`::placeholder` 跟随输入框自身 font-size。各处输入框是 13px，
        占位符也就 13px，与它旁边 11px 的说明文字、12px 的辅助文案挤在一起，
        视觉上「提示比正文还抢眼」。占位符是提示而非内容，应当比输入值小一档。

   用 em 而不是写死像素：输入框字号各处不同（13px / 14px 都有），
   相对单位能自动跟着缩放，不必为每种尺寸再补一条规则。
   0.85em 在 13px 输入框上约 11px，与旁边的说明文字同一档；
   早先的 0.92em 折算下来还有 12px，和输入值几乎一样大，提示仍显抢眼。

   用 :where() 把特异性压到 0：页面 CSS 均依赖 shande-scope-base（本文件先加载），
   组件若要自定占位符颜色或字号，随手一条普通选择器即可覆盖，无需 !important。
   ============================================================ */
:where(.shande-scope) :is(input, select, textarea, button) {
  font-family: inherit;
}

:where(.shande-scope) :is(input, textarea, select)::placeholder {
  font-size: 0.85em;
  color: #a5adb6;
  /* Firefox 默认给占位符 opacity:.54，不归一会比其它浏览器淡一截。 */
  opacity: 1;
}

/* contenteditable 没有原生 placeholder，各处用 data-ph + ::before 模拟。
   这里只统一字号，颜色留给组件自己定（部分编辑器占位符有各自的配色）。 */
:where(.shande-scope) [contenteditable][data-ph]:empty::before {
  font-size: 0.85em;
}

/* 挂载到 <body> 的浮层（支付弹窗等）不在 .shande-scope 内，单独覆盖一次。 */
.shande-vip-payment-modal :is(input, select, textarea, button, a, [role="button"]):focus,
.shande-toast :is(button, a, [role="button"]):focus {
  outline: none;
}
.shande-vip-payment-modal :is(input, select, textarea, button, a, [role="button"]):focus-visible,
.shande-toast :is(button, a, [role="button"]):focus-visible {
  outline: 2px solid #096ddd;
  outline-offset: 1px;
  border-radius: 3px;
}

/* ============================================================
   全站统一滚动条。

   此前同一套细滚动条数值在至少 5 处各写一遍（.cw-cat-list、.cw-editor__body、
   .cw-arc__list、.license-modal__body、搜索框下拉），新增滚动区就要再抄一次，
   抄漏了就退回系统默认的宽灰条。这里定一次默认值。

   用 :where() 把特异性压到 0：
     - 各页 CSS 都在本文件之后加载，组件要改宽度或配色，普通选择器即可覆盖；
     - 尤其是标签条 / 轮播那些「有意隐藏横向滚动条」的组件
       （`scrollbar-width:none` + `::-webkit-scrollbar{display:none}`），
       它们的规则照旧生效，不会被这里的默认值顶掉。

   两套语法都要写：Firefox 只认 scrollbar-width/-color，
   Chromium / Safari 只认 ::-webkit-scrollbar 系列。
   ============================================================ */
:where(.shande-scope) *,
:where(.shande-scope) {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .45) transparent;
}

:where(.shande-scope) *::-webkit-scrollbar,
:where(.shande-scope)::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

:where(.shande-scope) *::-webkit-scrollbar-track,
:where(.shande-scope)::-webkit-scrollbar-track {
  background: transparent;
}

:where(.shande-scope) *::-webkit-scrollbar-thumb,
:where(.shande-scope)::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .45);
  border-radius: 8px;
}

:where(.shande-scope) *::-webkit-scrollbar-thumb:hover,
:where(.shande-scope)::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, .65);
}

/* 纵横滚动条交汇的方角，默认是块浅灰色，透明掉更干净。 */
:where(.shande-scope) *::-webkit-scrollbar-corner,
:where(.shande-scope)::-webkit-scrollbar-corner {
  background: transparent;
}

/* 挂到 <body> 的浮层同样要统一（它们不在 .shande-scope 内）。 */
:where(.shande-vip-payment-modal, .shande-vip-payment-modal *) {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, .45) transparent;
}
:where(.shande-vip-payment-modal, .shande-vip-payment-modal *)::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
:where(.shande-vip-payment-modal, .shande-vip-payment-modal *)::-webkit-scrollbar-track {
  background: transparent;
}
:where(.shande-vip-payment-modal, .shande-vip-payment-modal *)::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .45);
  border-radius: 8px;
}
:where(.shande-vip-payment-modal, .shande-vip-payment-modal *)::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, .65);
}

/* ============================================================
   公用「右上角轻提示 Toast」——挂载于 <body>（脱离 .shande-scope 作用域，
   故此处不加 .shande-scope 前缀）。全站统一调用：
     <div class="shande-toast shande-toast--success|--error|--info">
       <svg .../><span>提示文案</span>
     </div>
   触发进入：追加 .is-show；~2.2s 后移除。
   ============================================================ */
.shande-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  /* Toast 是全站最上层的反馈，必须盖住所有弹窗与浮层：
     登录弹窗 100000、拼图遮罩 100001、拼图浮层 100002、VIP 支付弹窗 100050。
     取 100060 留出余量。压在弹窗下面的提示等于没提示。 */
  z-index: 100060;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 320px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
  opacity: 0;
  transform: translateX(120%);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2, .9, .3, 1.2);
  pointer-events: none;
  font-family: var(--sd-font);
}
.shande-toast.is-show {
  opacity: 1;
  transform: none;
}
.shande-toast svg { flex: 0 0 auto; }
.shande-toast--success { background: #16a34a; box-shadow: 0 8px 24px rgba(22, 163, 74, .35); }
.shande-toast--error   { background: #dc2626; box-shadow: 0 8px 24px rgba(220, 38, 38, .35); }
.shande-toast--info    { background: #096ddd; box-shadow: 0 8px 24px rgba(9, 109, 221, .35); }
@media (max-width: 768px) {
  .shande-toast { top: 16px; right: 12px; left: 12px; max-width: none; }
}