@charset "UTF-8";
/* ==========================================================================
   tokens.css —— 设计令牌 + Reset + 基础排版 + 通用工具类
   --------------------------------------------------------------------------
   「川墨·逃走中」视觉基座。本文件只做四件事：
     1. 定义命名空间令牌：--c-*（颜色）/ --sp-*（间距）/ --r-*（圆角）
        --sh-*（阴影）/ --fs-*（字号）/ --dur-*（时长）；
     2. 深色模式：用 @media (prefers-color-scheme: dark) 覆盖颜色令牌；
     3. Reset 与基础排版（系统字体栈、焦点环、选中色）；
     4. 布局 / 排版 / 兼容工具类。

   载入顺序：tokens → components → views → responsive。
   本文件不 @import 任何外部资源，也不依赖其它三个文件。

   【级联说明】index.html 头部保留了一段历史内联 <style>，它排在四个
   <link> 之后，因此在"同优先级"的情况下历史规则会赢。处理办法有三：
     a) 令牌层用兼容别名（见 1.9）把旧变量名映射到新令牌，历史规则自动换肤；
     b) 新组件类名（.topbar/.notice-item 等）历史样式不涉及，可自由定义；
     c) 历史样式里写死 #fff 的少量容器，在 views.css 末尾用
        body .xxx（.a.b 级别）安全覆盖，不依赖 !important。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌（浅色为默认值）
   -------------------------------------------------------------------------- */
:root{
  /* --- 1.1 品牌色板：sky 蓝，数字越大越深 --- */
  --c-sky-50:#f0f9ff;  --c-sky-100:#e0f2fe; --c-sky-200:#bae6fd;
  --c-sky-300:#7dd3fc; --c-sky-400:#38bdf8; --c-sky-500:#0ea5e9;
  --c-sky-600:#0284c7; --c-sky-700:#0369a1; --c-sky-800:#075985;
  --c-sky-900:#0c4a6e;

  /* --- 1.2 语义色（必须覆盖的契约变量） --- */
  --c-bg:#f4f8fc;                /* 页面底色：比纯白更柔和的雾蓝 */
  --c-surface:#ffffff;           /* 一级容器：卡片 / 面板 */
  --c-surface-2:#f6fafe;         /* 二级容器：内嵌块 / 条纹 */
  --c-surface-3:#eaf3fb;         /* 三级容器：hover / 强调底 */
  --c-surface-inv:#0f172a;       /* 反色容器：toast / 代码块 */
  --c-border:#e2e8f0;            /* 描边 */
  --c-border-strong:#cbd5e1;     /* 强描边：hover / 输入框聚焦前 */
  --c-text:#0f172a;              /* 主文字 */
  --c-text-2:#334155;            /* 次级文字：长正文 */
  --c-muted:#64748b;             /* 弱化文字：说明 / 元信息 */
  --c-muted-2:#94a3b8;           /* 更弱：时间戳 / 占位符 */

  --c-primary:#0ea5e9;
  --c-primary-600:#0284c7;
  --c-primary-700:#0369a1;
  --c-primary-100:#e0f2fe;
  --c-primary-200:#bae6fd;
  --c-primary-50:#f0f9ff;

  --c-danger:#ef4444;   --c-danger-strong:#dc2626;  --c-danger-100:#fee2e2;
  --c-warn:#f59e0b;     --c-warn-strong:#d97706;    --c-warn-100:#fef3c7;
  --c-success:#10b981;  --c-success-strong:#059669; --c-success-100:#d1fae5;
  --c-info:#0ea5e9;     --c-info-strong:#0284c7;    --c-info-100:#e0f2fe;
  --c-violet:#8b5cf6;   --c-gold:#f59e0b;           --c-silver:#94a3b8;

  /* 渐变：主色用于按钮 / 头像 / 徽章，克制不滥用 */
  --g-primary:linear-gradient(135deg,var(--c-sky-400),var(--c-sky-600));
  --g-primary-soft:linear-gradient(135deg,var(--c-sky-50),#ffffff 55%,var(--c-sky-50));
  --g-gold:linear-gradient(135deg,#fbbf24,#f59e0b);
  --g-danger:linear-gradient(135deg,#f87171,#dc2626);
  --g-warn:linear-gradient(135deg,#fbbf24,#ea580c);
  --g-official:linear-gradient(140deg,#0b3b8c 0%,#0c4a6e 45%,#0284c7 100%);

  /* 玻璃拟态 / 遮罩 */
  --c-glass:rgba(255,255,255,.72);
  --c-glass-strong:rgba(255,255,255,.9);
  --c-mask:rgba(15,23,42,.45);
  --c-nav-bg:rgba(255,255,255,.82);
  --c-nav-border:rgba(224,242,254,.9);

  /* --- 1.3 间距：4px 基准 --- */
  --sp-0:0;    --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px; --sp-10:40px;
  --sp-12:48px;--sp-16:64px;

  /* --- 1.4 圆角体系 --- */
  --r-xs:6px;  --r-sm:8px;  --r-md:10px; --r-lg:12px;
  --r-xl:16px; --r-2xl:20px;--r-3xl:26px;--r-pill:999px;
  /* 语义别名：容器 / 控件 / 弹窗 / 头像 */
  --r-field:var(--r-md);
  --r-card:var(--r-xl);
  --r-panel:var(--r-2xl);
  --r-modal:var(--r-2xl);
  --r-avatar:50%;

  /* --- 1.5 阴影层级（越靠后越"高"） --- */
  --sh-xs:0 1px 2px rgba(15,23,42,.05);
  --sh-sm:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --sh-md:0 8px 24px -12px rgba(2,132,199,.35);
  --sh-lg:0 18px 40px -20px rgba(2,132,199,.42);
  --sh-xl:0 30px 70px -30px rgba(2,132,199,.6);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.6);
  /* 彩色光晕：用于主按钮与焦点强调 */
  --sh-primary:0 10px 22px -10px rgba(14,165,233,.75);
  --sh-danger:0 10px 22px -10px rgba(239,68,68,.7);
  --sh-focus-ring:0 0 0 3px var(--c-primary-100);

  /* --- 1.6 字号与行高 --- */
  --fs-2xs:11px; --fs-xs:12px;  --fs-sm:13px;  --fs-base:14px;
  --fs-md:15px;  --fs-lg:17px;  --fs-xl:20px;  --fs-2xl:24px;
  --fs-3xl:30px; --fs-4xl:36px; --fs-5xl:44px;
  --lh-tight:1.25; --lh-snug:1.4; --lh-base:1.6; --lh-loose:1.85;
  --fw-normal:400; --fw-medium:500; --fw-semi:600; --fw-bold:700; --fw-black:800;

  /* --- 1.7 动效时长与缓动 --- */
  --dur-1:90ms;  --dur-2:160ms; --dur-3:220ms;
  --dur-4:320ms; --dur-5:520ms; --dur-6:900ms;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* --- 1.8 结构尺寸与层级 --- */
  --nav-h:62px;
  --page-max:1180px;      /* 内容最大宽度 */
  --page-max-wide:1440px; /* 超宽屏留白上限 */
  --sidebar-w:220px;
  --z-nav:50; --z-sidebar:40; --z-mask:200; --z-toast:999;
  --font-sans:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ==========================================================================
     1.9 兼容别名层
     index.html 头部的历史样式块使用 --sky-*/ --text/ --muted/ --border/
     --danger/ --warn/ --success/ --shadow-* 等旧名字，且不会被删除。
     这里把旧名字映射到新令牌，让历史规则自动跟随新主题与深色模式。
     ========================================================================== */
  --sky-50:var(--c-sky-50);   --sky-100:var(--c-sky-100); --sky-200:var(--c-sky-200);
  --sky-300:var(--c-sky-300); --sky-400:var(--c-sky-400); --sky-500:var(--c-sky-500);
  --sky-600:var(--c-sky-600); --sky-700:var(--c-sky-700);
  --text:var(--c-text);
  --muted:var(--c-muted);
  --border:var(--c-border);
  --danger:var(--c-danger);
  --warn:var(--c-warn);
  --success:var(--c-success);
  --shadow-sm:var(--sh-sm);
  --shadow-md:var(--sh-md);
}

/* --------------------------------------------------------------------------
   2. 深色模式：只覆盖颜色，布局与动效令牌保持继承
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark){
  :root{
    --c-bg:#080e1a;
    --c-surface:#0f1a2b;
    --c-surface-2:#16233a;
    --c-surface-3:#1d2d47;
    --c-surface-inv:#e8eef7;
    --c-border:#21304a;
    --c-border-strong:#33456a;
    --c-text:#e8eef7;
    --c-text-2:#c3d1e3;
    --c-muted:#93a4bd;
    --c-muted-2:#6d7f99;

    /* 主色在深底上提亮，保证对比度 ≥ 4.5:1 */
    --c-primary:#38bdf8;
    --c-primary-600:#0ea5e9;
    --c-primary-700:#7dd3fc;
    --c-primary-100:#0b2b45;
    --c-primary-200:#12466b;
    --c-primary-50:#0c1c2e;

    --c-danger:#f87171;  --c-danger-strong:#ef4444;  --c-danger-100:#3a1a1e;
    --c-warn:#fbbf24;    --c-warn-strong:#f59e0b;    --c-warn-100:#3a2a10;
    --c-success:#34d399; --c-success-strong:#10b981; --c-success-100:#0f2f26;
    --c-info:#38bdf8;    --c-info-strong:#0ea5e9;    --c-info-100:#0b2b45;

    --g-primary:linear-gradient(135deg,#0ea5e9,#0369a1);
    --g-primary-soft:linear-gradient(135deg,#0c1c2e,#0f1a2b 55%,#0c1c2e);
    --g-official:linear-gradient(140deg,#08214f 0%,#0b3552 48%,#0284c7 100%);

    --c-glass:rgba(17,27,45,.72);
    --c-glass-strong:rgba(15,26,43,.9);
    --c-mask:rgba(2,6,15,.66);
    --c-nav-bg:rgba(12,20,34,.82);
    --c-nav-border:rgba(33,48,74,.9);

    --sh-xs:0 1px 2px rgba(0,0,0,.4);
    --sh-sm:0 1px 3px rgba(0,0,0,.45);
    --sh-md:0 10px 26px -14px rgba(0,0,0,.8);
    --sh-lg:0 20px 44px -22px rgba(0,0,0,.85);
    --sh-xl:0 34px 80px -34px rgba(0,0,0,.9);
    --sh-inset:inset 0 1px 0 rgba(255,255,255,.05);
    --sh-primary:0 10px 24px -12px rgba(14,165,233,.6);
    --sh-focus-ring:0 0 0 3px rgba(56,189,248,.25);
  }
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  font-size:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  /* 锚点跳转时为吸顶导航留出空间 */
  scroll-padding-top:calc(var(--nav-h) + var(--sp-3));
}
html,body{-webkit-tap-highlight-color:transparent}

body{
  min-height:100vh;
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  color:var(--c-text);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* 顶部一层极淡的品牌光，让长页面不显平板 */
  background-image:
    radial-gradient(1100px 520px at 8% -12%,var(--c-primary-50),transparent 60%),
    radial-gradient(760px 420px at 104% 4%,var(--c-surface-2),transparent 58%);
  background-attachment:fixed;
}

img,svg,video,canvas{max-width:100%}
img{display:block;height:auto}
svg{flex-shrink:0}

a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0;outline:none}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
table{border-collapse:collapse;border-spacing:0}
hr{border:0;border-top:1px solid var(--c-border)}
::selection{background:var(--c-primary-200);color:var(--c-text)}
:target{scroll-margin-top:calc(var(--nav-h) + var(--sp-4))}

/* 统一的键盘焦点环：只在键盘操作时出现，鼠标点击不打扰 */
:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:1px}

/* 尊重系统的"减少动态效果"设置 */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* --------------------------------------------------------------------------
   4. 基础排版元素
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{font-weight:var(--fw-bold);line-height:var(--lh-tight);color:var(--c-text)}
h1{font-size:var(--fs-3xl)}
h2{font-size:var(--fs-2xl)}
h3{font-size:var(--fs-lg)}
h4{font-size:var(--fs-md)}
h5,h6{font-size:var(--fs-base)}
small{font-size:var(--fs-xs)}
strong,b{font-weight:var(--fw-bold)}
code,kbd,samp,pre{font-family:var(--font-mono)}
p{line-height:var(--lh-base)}

/* 滚动条美化：细窄、低对比，避免抢视觉 */
*{scrollbar-width:thin;scrollbar-color:var(--c-border-strong) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--c-border-strong);
  border-radius:var(--r-pill);
  border:3px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--c-muted-2);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* --------------------------------------------------------------------------
   5. 通用工具类
   -------------------------------------------------------------------------- */
/* 5.1 显隐与可访问性 */
.hidden{display:none !important}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* 5.2 文本 */
.muted{font-size:var(--fs-sm);color:var(--c-muted)}
.center{text-align:center}
.nowrap{white-space:nowrap}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.truncate-2{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere;
}

/* 5.3 布局 */
.stack{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.stack-sm{gap:var(--sp-2)}
.stack-lg{gap:var(--sp-5)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);min-width:0}
.row-sm{gap:var(--sp-2)}
.row-between{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.grow{flex:1 1 auto;min-width:0}
.shrink-0{flex-shrink:0}
.full{width:100%}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}

/* 5.4 常用间距（与 --sp-* 对齐） */
.mt-0{margin-top:0}
.mt-2{margin-top:var(--sp-2)}
.mt-3{margin-top:var(--sp-3)}
.mt-4{margin-top:var(--sp-4)}
.mt-6{margin-top:var(--sp-6)}
.mb-0{margin-bottom:0}
.mb-2{margin-bottom:var(--sp-2)}
.mb-3{margin-bottom:var(--sp-3)}
.mb-4{margin-bottom:var(--sp-4)}
.mb-6{margin-bottom:var(--sp-6)}
.gap-2{gap:var(--sp-2)}
.gap-3{gap:var(--sp-3)}
.gap-4{gap:var(--sp-4)}
.mr-auto{margin-right:auto}
.ml-auto{margin-left:auto}

/* --------------------------------------------------------------------------
   6. 排版类
   -------------------------------------------------------------------------- */
.h1,.h2,.h3,.h4{display:block;font-weight:var(--fw-black);line-height:var(--lh-tight);color:var(--c-text)}
.h1{font-size:clamp(1.6rem,1.35rem + 1.1vw,2.25rem);letter-spacing:-.02em}
.h2{font-size:clamp(1.3rem,1.15rem + .7vw,1.6rem);letter-spacing:-.015em}
.h3{font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.h4{font-size:var(--fs-md);font-weight:var(--fw-bold)}

/* 页面主标题：略带品牌渐变的装饰短线 */
.page-title{
  position:relative;
  font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);
  font-weight:var(--fw-black);
  letter-spacing:-.015em;
  line-height:var(--lh-tight);
  margin-bottom:var(--sp-2);
}
.page-title::after{
  content:"";
  display:block;
  width:34px;height:3px;
  margin-top:var(--sp-2);
  border-radius:var(--r-pill);
  background:var(--g-primary);
}
.page-sub{
  font-size:var(--fs-sm);
  color:var(--c-muted);
  line-height:var(--lh-base);
  margin-bottom:var(--sp-5);
  max-width:66ch;
}
.section-title{
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--c-text);
  min-width:0;
}
.section-title .dot{
  width:5px;height:18px;border-radius:var(--r-pill);
  background:var(--g-primary);flex-shrink:0;
}
.section-title.important .dot{background:var(--g-warn)}

/* 5.5 竖排元信息 / 分隔符 */
.dot-sep{
  display:inline-block;
  color:var(--c-muted-2);
  margin:0 var(--sp-2);
  user-select:none;
}