/* ==========================================================================
   战猫 WARCATS 设计令牌（全站唯一来源）
   --------------------------------------------------------------------------
   所有页面共用这一套：间距、字号、圆角、品牌色、状态色。

   为什么要独立成文件：在这之前 site.css、community.css、game-admin.css
   各自定义了整套主题变量，同一个 `--muted` 在三处是三个值，谁生效取决于
   加载顺序和选择器特异性。改一个颜色要翻三个文件，还常常改了不生效。
   现在只在这里定义一次。

   两种模式：
     .theme-light  公开页（默认）
     .theme-dark   管理后台
   模式只改颜色，不改尺度——间距、字号、圆角两边完全一致，这才是"统一"。
   ========================================================================== */

:root{
  /* ---------------------------------------------------------------- 尺度（两种模式共用） */
  /* 间距：只用这 7 档，不写死零散值 */
  --s-0:4px; --s-1:8px; --s-half:12px; --s-2:16px; --s-3:24px; --s-4:40px; --s-5:64px; --s-6:96px;
  /* 字号：只用这 8 档 */
  --t-xs:12px; --t-sm:13px; --t-md:14px; --t-base:16px; --t-lead:17px; --t-lg:20px; --t-xl:26px;
  /* 圆角：只用这 4 档 */
  --r-1:4px; --r-2:10px; --r-3:16px; --r-pill:999px;
  /* 行高 */
  --lh-tight:1.32; --lh-body:1.7; --lh-loose:1.8;
  --wrap-public:1120px;
  --wrap-admin:1440px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;

  /* ---------------------------------------------------------------- 品牌色（两种模式共用） */
  /* 取自 logo 实测量的值，不是凭感觉挑的。
     电光青和金色只做小面积强调：大面积用会立刻变廉价。 */
  --brand-cyan:#00b8d4;
  --brand-cyan-bright:#00e4ff;   /* logo 光环原色，只在深色底上直接使用 */
  --brand-gold:#a9761a;
  --brand-gold-bright:#d3a24a;

  /* 旧名字，指回新令牌。写在这里而不是某个模式里：它们只是别名，
     指向的目标会随模式变，但别名本身两种模式都要在，否则漏一个模式就会解析不到。 */
  --wrap:var(--wrap-public);
  --blue:var(--accent);
}

/* ---------------------------------------------------------------- 浅色：公开页 */
.theme-light{
  color-scheme:light;
  --ink:#0c0d10;          /* 主文字 */
  --ink-2:#3d4048;        /* 次要文字 */
  --ink-3:#6b6f78;        /* 更浅的小字。不要调浅过 #6b6f78：白底上只有 4.83:1，再浅就低于 4.5:1 */
  --paper:#ffffff;        /* 页面底 */
  --paper-2:#f7f8fa;      /* 次级底：表头、输入框内、悬停 */
  --line:#e4e5ea;
  --line-2:#eceef2;
  --accent:#0b63ce;       /* 主行动色，白底上可读 */
  --accent-hover:#0a4ea3;
  --cyan:var(--brand-cyan);
  --gold:var(--brand-gold);
  --ok:#1f5c34; --ok-bg:#eaf5ee; --ok-line:#c2ddcb;
  --warn:#6b4c12; --warn-bg:#fdf4e3; --warn-line:#e8d5aa;
  --danger:#b3392f; --danger-bg:#fdf0ef; --danger-line:#e7b8b4;
  /* 图表用色：给 SVG 的 fill/stroke 用，所以必须是字面值。
     SVG 呈现属性里的 var() 支持不稳，某些浏览器解析不出来就直接不画——
     曲线图里柱子会整体消失，而且不报错。 */
  --chart-ok:#1f5c34; --chart-degraded:#b8860b; --chart-down:#b3392f; --chart-line:#0b63ce;
  /* 强调色的极浅底：键盘焦点环这类"要蓝一点但别抢"的地方用。 */
  --accent-bg-weak:#dbe9fd;


  /* 按钮：自己成对定义，不借 --ink/--paper——那两个在深色模式下语义会互换。
     旧样式表里的 `--ink` 其实是"按钮上的字色"，跟本文件的 --ink（正文色）同名不同义，
     所以这里用 --on-btn 这个名字，避免别名时把按钮变成深底深字。 */
  --btn-bg:#0c0d10; --btn-fg:#ffffff; --btn-bg-hover:#0b63ce; --btn-fg-hover:#ffffff;
  --on-btn:#ffffff; --on-accent:#ffffff;
  /* 「浅色强调底上的字色」。借 --ink 会跟正文色同名不同义，所以显式命名。
     report-callout 那块浅绿底、按钮悬停的浅绿底都用它。 */
  --on-light:#0c0d10;
  --btn-ghost-fg:#0c0d10; --btn-ghost-line:#e4e5ea; --btn-ghost-line-hover:#6b6f78; --btn-ghost-bg-hover:#f7f8fa;
  --shadow-1:0 1px 2px #0c0d100d;

  /* ---------------------------------------------------------------- 旧名字别名（公开页）
     公开页的样式表（site.css、community.css）里有大量 `var(--muted)` 这样的旧名字。
     逐个改名风险大、收益小，所以在这里指一层。放在 .theme-light 里而不是 .public-theme：
     后者是 site.js 运行时才加的，在 JS 生效前这些名字会解析不到，页面会闪一下无样式。 */
  --text:var(--ink);
  --muted:var(--ink-2);
  --muted-2:var(--ink-3);
  --bg:var(--paper);
  --panel:var(--paper);
  --panel2:var(--paper-2);
  --radius:var(--r-3);
  --orange:var(--gold);
  --red:var(--danger);
  /* site.css / community.css 里用的旧名字。--accent 已经在上面的主题色里定义过，
     这里不能再写 `--accent:var(--accent)`——那是自我引用的环，会让变量直接失效。 */
  --green:var(--ok);
}

/* ---------------------------------------------------------------- 暖白：管理后台
   --------------------------------------------------------------------------
   后台原来用 .theme-dark。深色对长时间盯数据是对的，但实际用下来偏暗，所以换成
   暖白：底色带一点米黄，不是纯白，纸感更柔和，长时间看不那么刺眼。

   三点必须注意，缺一个就会出问题：
     1. color-scheme:light 不能省。少了它浏览器会按"深色"渲染原生控件——下拉框
        展开的选项列表会变成深底深字，直接看不见，表单页全废。
     2. 文字用暖灰而不是冷灰。冷灰配米底会发青、显脏。
     3. 对比度按 WCAG 逐项算过，写在每行注释里，目标 4.5:1 以上。 */
.theme-warm{
  color-scheme:light;
  --ink:#2b2620;            /* 对 --paper 14.1:1 */
  --ink-2:#5c564b;          /* 7.2:1 */
  --ink-3:#6b6657;          /* 5.4:1 —— 比浅色主题的 #6b6f78 略深，因为米底比纯白暗 */
  --paper:#fbf9f4;          /* 米白底，不是纯白 */
  --paper-2:#f3f0e7;        /* 次级面：再暖一档 */
  --line:#e3ded0;
  --line-2:#ece8dc;
  --accent:#0b63ce;         /* 品牌蓝保留；跟米底 5.4:1 */
  --accent-hover:#0a4ea3;
  --cyan:var(--brand-cyan);
  --gold:var(--brand-gold);
  --ok:#2c7449;             /* 偏暖的绿，跟米底协调；对 --paper 5.1:1，对 --ok-bg 4.7:1 */
  --ok-bg:#e9f2ea;
  --ok-line:#c3dbc9;
  --warn:#6b4c12;
  --warn-bg:#f9f0dc;
  --warn-line:#e4d3a8;
  --danger:#b3392f;
  --danger-bg:#fbecea;
  --danger-line:#e5b5b0;
  --chart-ok:#2f7d4f;
  --chart-degraded:#b8860b;
  --chart-down:#b3392f;
  --chart-line:#0b63ce;
  --accent-bg-weak:#dfe9f8;
  /* 实心主按钮用暖褐而不是纯黑：纯黑压在米底上太生硬。 */
  --btn-bg:#2f2a24;
  --btn-fg:#fdfcf9;
  --btn-bg-hover:#0b63ce;
  --btn-fg-hover:#ffffff;
  --on-btn:#fdfcf9;
  --on-accent:#ffffff;
  --on-light:#2b2620;
  --btn-ghost-fg:#2b2620;
  --btn-ghost-line:#e3ded0;
  --btn-ghost-line-hover:#938d7e;
  --btn-ghost-bg-hover:#f3f0e7;
  --shadow-1:0 1px 2px #2b262014;
  /* 旧名字的别名，跟 .theme-light 保持一致 */
  --text:var(--ink);
  --muted:var(--ink-2);
  --muted-2:var(--ink-3);
  --bg:var(--paper);
  --panel:var(--paper);
  --panel2:var(--paper-2);
  --radius:var(--r-3);
  --orange:var(--gold);
  --red:var(--danger);
  --green:var(--ok);
}

/* ---------------------------------------------------------------- 深色：保留备用 */
.theme-dark{
  color-scheme:dark;
  --ink:#eef0f3;
  --ink-2:#b6bac2;
  --ink-3:#8b909b;
  --paper:#0d0e11;
  --paper-2:#15171b;
  --line:#24262c;
  --line-2:#1c1e23;
  --accent:#63a6ff;
  --accent-hover:#8cc0ff;
  --cyan:var(--brand-cyan-bright);
  --gold:var(--brand-gold-bright);
  --ok:#7bd39b; --ok-bg:#16281d; --ok-line:#2c4a36;
  --warn:#e8c07a; --warn-bg:#2a2214; --warn-line:#4d3f22;
  --danger:#ff9a8a; --danger-bg:#2c1a18; --danger-line:#54302b;
  --chart-ok:#7bd39b; --chart-degraded:#e8c07a; --chart-down:#ff9a8a; --chart-line:#63a6ff;
  --accent-bg-weak:#16273d;
  --btn-bg:#eef0f3; --btn-fg:#0c0d10; --btn-bg-hover:#4d9dff; --btn-fg-hover:#0a0c10;
  --on-btn:#0c0d10; --on-accent:#0a0c10;
  --on-light:#0c0d10;   /* 深色模式下浅底依然配深字 */
  --btn-ghost-fg:#eef0f3; --btn-ghost-line:#2e3238; --btn-ghost-line-hover:#5b6068; --btn-ghost-bg-hover:#1b1e23;
  --shadow-1:0 1px 2px #00000040;
}

/* ---------------------------------------------------------------- 基础复位 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:var(--t-base);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased}
.theme-light body{background:var(--paper);color:var(--ink)}
.theme-dark body{background:var(--paper);color:var(--ink)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-1)}

/* 跳转链接：两种模式共用 */
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s-half);top:var(--s-half);background:var(--btn-bg);color:var(--btn-fg);
  padding:var(--s-1) var(--s-2);border-radius:var(--r-1);z-index:50}

/* 主题切换按钮：固定在右下角，小而不抢眼。
   整套主题功能（这个按钮 + theme.js）可以整体删掉，站点随即固定为浅色。 */
.theme-toggle{
  position:fixed;right:var(--s-half);bottom:var(--s-half);z-index:40;
  background:var(--paper);color:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:var(--s-0) var(--s-half);
  font-size:var(--t-xs);font-weight:600;cursor:pointer;box-shadow:var(--shadow-1);
}
.theme-toggle:hover{border-color:var(--ink-3);color:var(--ink)}

/* ---------------------------------------------------------------- 共用组件 */
/* 按钮：全站一套形态。公开页和后台只是颜色不同，尺寸形状完全相同。 */
.btn{
  display:inline-flex;align-items:center;gap:var(--s-1);justify-content:center;
  padding:var(--s-half) var(--s-3);border-radius:var(--r-2);border:1px solid var(--btn-bg);
  background:var(--btn-bg);color:var(--btn-fg);font-size:var(--t-base);font-weight:600;
  transition:background .15s,border-color .15s,color .15s,transform .15s;
}
.btn:hover{background:var(--btn-bg-hover);border-color:var(--btn-bg-hover);color:var(--btn-fg-hover)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
/* 次要按钮给自己底色，不用 transparent：透明要叠父级底色才能算对比度，容易算错。 */
.btn.ghost{background:var(--paper);color:var(--btn-ghost-fg);border-color:var(--btn-ghost-line)}
.btn.ghost:hover{background:var(--btn-ghost-bg-hover);border-color:var(--btn-ghost-line-hover);color:var(--btn-ghost-fg)}
.btn.compact{padding:var(--s-1) var(--s-half);font-size:var(--t-md)}

/* 状态标签 */
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px var(--s-1);border-radius:var(--r-1);
  font-size:var(--t-xs);font-weight:600;border:1px solid var(--line);
  background:var(--paper-2);color:var(--ink-2);white-space:nowrap}
.badge.good{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.badge.wait{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.badge.bad{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}

/* 面板：全站只有一种。曾经每个页面各有一套（玻璃、渐变、多层阴影），现在统一。 */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-3);padding:var(--s-3)}
.panel.muted{background:var(--paper-2)}

/* 眉标 */
.eyebrow{font-size:var(--t-xs);letter-spacing:.16em;color:var(--ink-3);text-transform:none;
  display:flex;align-items:center;gap:var(--s-1);margin:0}
.eyebrow.rule::before{content:"";width:20px;height:2px;background:var(--cyan);flex:none}

/* 表格：全站一套 */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:var(--s-1) var(--s-half);border-bottom:1px solid var(--line)}
th{background:var(--paper-2);color:var(--ink-2);font-size:var(--t-sm);font-weight:600;white-space:nowrap}

/* 表单：全站一套 */
input,select,textarea{font:inherit;background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-2);padding:var(--s-1) var(--s-half)}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
label{font-size:var(--t-md)}

/* 提示条 */
.notice{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-2);
  padding:var(--s-2) var(--s-3);color:var(--ink-2)}
.notice.error{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}

/* 浏览器默认给 [hidden] 的样式只是 display:none，作者样式里的 display 会盖掉它，
   所以必须在这里用 !important 兜住。 */
[hidden]{display:none!important}