/* ==========================================================================
   见月导航 · 设计系统 Token
   数值全部来自 Ardot 画布 732487670573529 的真实节点，不做二次估算
   ========================================================================== */

:root {
  /* ---------- 色板 ---------- */
  /* 主色系（薄荷青绿） */
  --brand: #2bb39a;
  --brand-dark: #1e8f73;
  --brand-tint: #e3f9f1;      /* 主色浅底 */
  --brand-tint-2: #edf7f5;    /* 更浅的底，用于说明条 */
  --brand-tint-3: #f2f9f7;    /* 表头底 */

  /* 中性文字四档 */
  --ink-1: #1f3a36;           /* 主文字 */
  --ink-2: #4a6663;           /* 次要 */
  --ink-3: #7e9c98;           /* 说明 */
  --ink-4: #9db5b1;           /* 占位 */

  /* 背景与描边 */
  --bg-page: #f6faf9;         /* 页面薄荷白 */
  --bg-card: #ffffff;
  --border-1: #e9f2f0;        /* 卡片描边 */
  --border-2: #d8eae6;        /* 按钮描边 */

  /* 分组识别色（与画布侧栏色点一致） */
  --dot-violet: #7c6cf0;
  --dot-mint: #2bb39a;
  --dot-peach: #ff9a76;
  --dot-sky: #4ba8f5;
  --dot-amber: #ffc44d;
  --dot-pink: #f2719f;

  /* 笔记分区色 */
  --note-pink: #f2719f;
  --note-pink-tint: #fdeef4;

  /* ---------- 危险 / 成功 ---------- */
  /* ⛔ 这两个令牌以前是缺的：admin.css / form.css 里到处写
     var(--danger, #e05a5a)，而实际用的红是 #d54941 —— fallback 值
     和真值不一致，同一个红在两处渲染出两个色。
     补上定义后，所有 danger 都统一走令牌。 */
  --danger: #d54941;/* 危险/删除/驳回 */
  --danger-dark: #b13c36;   /* hover */
  --danger-tint: #fdeceb;  /* 浅底 */
  --ok: #2bb39a;/* 与主色同源：站内"通过"动作沿用品牌绿 */

  /* ---------- 警示（"不确定，但别删"） ----------
     ⛔ 为什么单独一档而不是复用 danger：
        死链检测里403/429/超时属于「站点可能没问题，是我们被拒了」。
        刷成红色 = 管理员条件反射去删站点 —— 这正是旧版最伤用户的行为。
        黄色= 提醒看一眼，红色 = 出事了，语义必须分开。
     ⚠️ 色值取琥珀色（与 --dot-amber 同族），底色保证 ≥4.5:1 对比。 */
  --warn: #b8770a;            /* 文字/描边 */
  --warn-tint: #fdf4e0;         /* 浅底 */
  --mute: #6d8a85;            /* 中性灰（"被策略拦截"，不是错误） */
  --mute-tint: #eef3f2;

  /* ---------- 圆角 ---------- */
  --r-xs: 5px;                /* 色点 */
  --r-sm: 10px;               /* 小按钮 / 分割 */
  --r-md: 12px;               /* 分组项 */
  --r-lg: 17px;               /* 胶囊按钮 / 侧栏项 */
  --r-xl: 20px;               /* 侧栏容器 */
  --r-2xl: 31px;              /* 搜索框 */

  /* ---------- 阴影 ---------- */
  --shadow-sm: 0 4px 16px -4px rgba(46, 128, 115, 0.06);
  --shadow-md: 0 4px 16px -4px rgba(46, 128, 115, 0.06);
  --shadow-search: 0 8px 24px -8px rgba(46, 179, 154, 0.10);

  /* ---------- 玻璃拟态（粘性顶栏用） ----------
     ⛔ 半透明 + backdrop-filter 才叫玻璃态；只给个白底就是普通白条。
     半透明度取 0.72：再低会让滚动到它下面的文字透出来干扰阅读，
     再高就看不出"玻璃"了。blur 与 saturate 搭配是为了让底下的
     薄荷色内容透上来时更通透，单用 blur 会发灰。 */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-brd: rgba(255, 255, 255, 0.6);
  --glass-shadow: 0 6px 24px -12px rgba(46, 128, 115, 0.22);

  /* ---------- 间距 ---------- */
  --gutter: 24px;             /* 页面左右 */
  --gap-card: 16px;           /* 卡片网格 */
  --gap-block: 36px;          /* 分区块之间 */

  /* ---------- 字体 ---------- */
  --font-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-en: "DM Sans", "Outfit", var(--font-cn);

  /* ---------- 布局 ---------- */
  --maxw: 1440px;
}

/* ---------- 深色模式（顶栏切换按钮控制） ---------- */
body.dark {
  --bg-page: #101a19;
  --bg-card: #182624;
  --brand-tint: #16302b;
  --brand-tint-2: #142a26;
  --brand-tint-3: #1b302c;
  --ink-1: #eaf5f2;
  --ink-2: #a8c4be;
  --ink-3: #7e9c98;
  --ink-4: #62807a;
  --border-1: #243b37;
  --border-2: #2e4a45;
  --shadow-sm: 0 4px 16px -4px rgba(0, 0, 0, 0.4);
  --shadow-search: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  /* 暗色玻璃：底要更暗、透明度更低一点，否则白字压在亮内容上会糊 */
  --glass-bg: rgba(24, 38, 36, 0.74);
  --glass-brd: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.6);
  /* ⛔ 深色模式下警示色必须**提亮**：#b8770a 在深底上对比度不足，
     文字会糊成一片。琥珀色天生适合深底，这是选它的第二个理由。 */
  --warn: #e0a53c;
  --warn-tint: #33280f;
  --mute: #8aa5a0;
  --mute-tint: #22302e;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink-1);
  font-family: var(--font-cn);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background 0.25s, color 0.25s;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* ==========================================================================
   通用原子
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}

.card-surface {
  background: var(--bg-card);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}

.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 站点图标：撑满容器（唯一公共定义）----------
   ⛔⛔ 必须放在 tokens.css 而不是 home.css —— tokens.css 是**所有页面**都加载的
   （goto.html / admin.html 都不加载 home.css，放那儿等于规则失效）。
   2026-10-05 修「图标不撑满容器」：原来 JS 按调用方传入的 size（17/22/28px）
   写死内联 width/height，而容器有 44/56px 几种尺寸 →
   小图摆在大框里、四周留白（用户截图报障）。

   现在 JS 不再写尺寸，统一交给 CSS：
     · img → width/height:100% + object-fit:cover  → 填满、不变形、无留白
     · svg → 同一套，保证「有图 / 没图」两种分支视觉完全一致

   object-fit 为什么选 cover 而不是 contain：
   contain 能完整显示非正方形图标，但会留白（就是原来的毛病）。
   本站图标是 32×32 归一化过的，cover 与 contain 几乎无差，
   而 cover 对偶发的非正方形 .ico 更稳（宁可裁一点也不留一圈）。 */
.siteimg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
  background: transparent;
}

/* ⛔⛔⛔ 2026-10-05 22:1x 修回归：这里原来还有一条 `.siteicon-svg` 的同款规则，
   错在**它是全局选择器** —— icon() 被 18 处调用（#searchIcon / #themeBtn /
   #noteIcon …），那些容器根本没设尺寸，于是 width:100% 让 SVG 去填父容器：
   中转页顶部那个「说明」图标实测被撑到 300×300（原本 18×18），
   在页面上是一个巨大的绿色圆圈。

   正确的边界：撑满容器的只有**站点图标**（siteIcon 的两分支），
   而它们必然在 .site__icon / .gp-card__icon / .rcard__icon / .rel-item__icon
   这些固定尺寸容器里。所以规则挂容器，不挂全局类名。 */
.site__icon > .siteicon-svg,
.gp-card__icon > .siteicon-svg,
.rcard__icon > .siteicon-svg,
.rel-item__icon > .siteicon-svg,
.site__icon > .siteimg,
.gp-card__icon > .siteimg,
.rcard__icon > .siteimg,
.rel-item__icon > .siteimg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 0;
}

/* 容器统一约定：图标永远正方形 + 裁掉溢出。
   ⛔ overflow:hidden 是必需的 —— cover 会把超出部分裁到容器外，
   没有它图标就会溢出去（用户截图里"图标偏出框"的原因之一）。 */
.site__icon,
.rcard__icon,
.gp-card__icon,
.rel-item__icon {
  overflow: hidden;
  position: relative;
}