/* ===== css/main/00-tokens.css —— 变量与基础：:root 设计令牌 / 页面基础 / 顶部标题区 / 公告入口与标签 =====
   · 2026-10-16 从 index.html 的 <style> 按【原顺序】切出：只切不重构，样式一个字符没改
   · 加载顺序（必须保持）：00-tokens → 10-layout → 20-components → 30-themes → 40-art
   · 本文件是第 1／5 段；删掉头部这 5 行，剩下的就是原文对应片段
   ===== */

    :root {
      /* 小信件图标（管理员改这里即可微调） */
      --mail-icon-size: 32px;    /* 图标尺寸：25px → 32px（+28%，≥20%） */
      --mail-hit-size: 48px;     /* 点击热区尺寸（图标垂直居中的基准） */
      --mail-dot-size: 14px;     /* 红点直径（随图标约 44%），数字字号随动 */
      --mail-offset-x: 0px;      /* 图标距锚点右缘的距离（正值左移） */
      --mail-offset-y: 2px;      /* 图标垂直微调（相对分界线） */
      /* ①公告栏文字标签（本次新增：只调这 4 个变量即可改字/色/间距，图标本体一律不动） */
      --notice-label-font-size: 12px;      /* 标签字号（验收 a：临时改 36px 即 3 倍，见 body.mail-debug） */
      --notice-label-color: #9b8fc0;       /* 标签颜色（与副标题同色系，弱化不抢眼） */
      --notice-label-letter-spacing: 2px;  /* 标签字间距 */
      /* 【本轮调整 2026-10-11】标签与图标热区顶边的间隙：2px → 0px（标签整体下沉 2px）。
         改前：文字底边距分界线 27.5px（0.5*48-2+14/4+2），距信封可见图标顶边约 13.5px；
         改后：文字底边距分界线 25.5px（0.5*48-2+14/4+0），距信封可见图标顶边约 11.5px；
         仍悬于信封上方、不与图标本体重合，且与红点顶面恰好相切不相交（红点出现时也不压字）。 */
      --notice-label-gap: 0px;             /* 标签底边与图标热区顶边的间隙 */
      /* 公告弹窗 */
      --notice-panel-max-height: 78vh;   /* 弹窗总高上限（固定，不随数量增长） */
      --notice-list-max-height: 360px;   /* 内容区可视高度：约容纳最新两条公告（按卡片高度可调） */
      --notice-scrollbar-width: 8px;     /* 窄滚动条宽度 */
      --notice-scrollbar-thumb: #c4b2ee; /* 滑块颜色 */
      --notice-scrollbar-track: rgba(89, 49, 246, 0.06); /* 轨道颜色 */
      /* ③本次新增："（已修改）"角标（只调这 3 个变量） */
      --notice-modified-font-size: 11px;        /* 角标字号：小字号、不抢眼 */
      --notice-modified-color: #000000;         /* 角标颜色：黑色（按验收要求） */
      --notice-modified-gap: 6px;               /* 角标与昵称的水平间距 */
      /* 本轮新增：长文阅读器尺寸（大号"公告栏"样式，右侧可滑动看完全文） */
      --reader-panel-width: 680px;              /* 阅读器宽度：越大越像全屏 */
      --reader-panel-max-height: 86vh;          /* 阅读器总高上限 */
    }

    /* ---------- 页面基础 ---------- */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      min-height: 100%;
    }

    body {
      font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      background: linear-gradient(160deg, #a18cd1 0%, #fbc2eb 50%, #ffd1ff 100%);
      background-attachment: fixed; /* 渐变铺满全屏，滚动时不跳动 */
      min-height: 100vh;
      color: #333;
      line-height: 1.6;
      overflow-x: hidden; /* 防止意外出现横向滚动条 */
    }

    /* 整体：半透明白毛玻璃大卡片，居中并留足白边 */
    .container {
      max-width: 680px;
      margin: 0 auto;
      padding: 44px 36px 48px;
      background: rgba(255, 255, 255, 0.72);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(31, 38, 135, 0.12);
    }

    /* ---------- 顶部标题区 ---------- */
    .page-title {
      text-align: center;
      font-size: 34px;
      font-weight: 700;
      letter-spacing: 3px;
      color: #4a3b7c;
      margin-bottom: 6px;
    }

    /* 副标题：时光荏苒，青春有痕 */
    .page-subtitle {
      text-align: center;
      font-size: 14px;
      color: #9b8fc0;
      letter-spacing: 2px;
      margin-bottom: 32px;
    }

    /* 副标题行：标语独立整行居中，图标绝对定位脱离排版流（不再挤偏文字） */
    .subtitle-row {
      position: relative;
      margin-bottom: 32px;
    }

    .subtitle-row .page-subtitle {
      display: block;
      text-align: center;
      margin-bottom: 0;
      /* 本次修正（为满足验收 c）：标语 <p> 默认是"整行宽"块级矩形，会与右上方的
         "公告栏"标签矩形相交。收窄为文字宽度后矩形=文字本身，文字仍整行居中、
         中线与视觉零变化。若要还原，删掉下面 3 行即可。 */
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
    }

    /* ---------- 公告入口：零高度锚点 + 绝对定位图标 ---------- */
    .mail-anchor {
      position: relative;   /* 图标的包含块：固定在标语与昵称之间 */
      height: 0;
      width: 100%;
    }

    .notice-bell {
      /* 绝对定位在锚点上：图标几何中心压在分界线上（误差仅 offset-y = 2px） */
      position: absolute;
      top: calc(-0.5 * var(--mail-hit-size) + var(--mail-offset-y));
      right: var(--mail-offset-x);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      /* 点击热区随图标等比放大（约 48px 起） */
      padding: calc((var(--mail-hit-size) - var(--mail-icon-size)) / 2);
      border: none;
      background: none;
      color: #5931F6;
      cursor: pointer;
      vertical-align: middle;
    }

    .notice-bell svg {
      display: block;
      width: var(--mail-icon-size);
      height: var(--mail-icon-size);
    }

    .notice-dot {
      position: absolute;
      /* 贴住图标右上角，部分压在图标上 */
      top: calc(var(--mail-dot-size) / -4);
      right: calc(var(--mail-dot-size) / -3);
      /* 直径随图标尺寸缩放（约图标 42%） */
      min-width: var(--mail-dot-size);
      height: var(--mail-dot-size);
      padding: 0 3px;
      border-radius: 999px;
      background: #e05a5a;
      color: #fff;
      font-size: calc(var(--mail-dot-size) - 1px);
      font-weight: 700;
      line-height: var(--mail-dot-size);
      text-align: center;
      box-sizing: border-box;
    }

    /* ---------- ①公告栏文字标签（本次新增：absolute，绝不占位、绝不挡点击） ---------- */
    .notice-label {
      position: absolute;
      /* 右缘与图标对齐；bottom 由「图标热区顶边 + 红点向上凸出量(dot/4) + 间隙」推导，
         既满足"图标顶边上方留 2~6px"，又保证与红点矩形零相交（验收 b）。
         当前数值：0.5*48 - 2 + 14/4 + 2 = 27.5px（红点顶边 25.5px，安全余量 2px） */
      right: var(--mail-offset-x);
      bottom: calc(
        0.5 * var(--mail-hit-size) - var(--mail-offset-y) +
        var(--mail-dot-size) / 4 + var(--notice-label-gap)
      );
      font-size: var(--notice-label-font-size);
      color: var(--notice-label-color);
      letter-spacing: var(--notice-label-letter-spacing);
      line-height: 1;
      white-space: nowrap;
      pointer-events: none;   /* 绝不挡图标点击（验收 e） */
    }