/* ==========================================================================
   Emby EMM · 统一设计令牌（tokens.css）
   --------------------------------------------------------------------------
   全站唯一令牌来源（对应「前端视觉升级方案」§3）。四页 HTML 在本页 CSS 之前
   <link> 引入本文件。约定：
   1. 本文件零外链：字体为本地自托管子集（见下方 @font-face），不请求任何 CDN。
   2. 性能红线：本文件不含 backdrop-filter / filter: blur()，也不含任何无限循环动画。
   3. 改本文件后需同步升级四页 HTML 中的 ?v= 版本串（静态文件刻意不带缓存头）。
   ========================================================================== */

/* ---------- 字体：本地自托管子集（去外链） ----------
   源文件 C:/Windows/Fonts/NotoSansSC-VF.ttf（可变字体，GB2312 全字符集 + ASCII + 常用标点）。
   文件名带版本号 .v1，配合 /fonts/ 的 immutable 缓存头；升级字体请改版本号。 */
@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/noto-sans-sc-subset.v1.woff2") format("woff2");
}

/* IBM Plex Mono 拉丁子集（ASCII + 数字符号），仅用于 KPI 数字与 eyebrow 标签。 */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-400.v1.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-500.v1.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-600.v1.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono-700.v1.woff2") format("woff2");
}

:root {
  color-scheme: dark;                      /* 【新引入】全站统一深色 UA 控件 */

  /* 背景分层 */
  --bg-page: #06111d;                      /* 【保留 app.css】login 已同值；hot 的 #05070e 退役 */
  --bg-surface: #111c2b;                   /* 【保留 app.css】 */
  --bg-surface-2: #142235;                 /* 【保留 app.css】 */
  --bg-surface-3: #182841;                 /* 【保留 app.css】hover / 嵌套 */
  --bg-field: #0c1726;                     /* 【保留 app.css】输入框 */
  --bg-overlay: rgba(3, 8, 15, 0.82);      /* 【保留】原 backdrop 底色，去掉 blur */

  /* 玻璃质感合法替代（半透明底 + 内高光 + 描边，不引 backdrop-filter） */
  --glass-panel: rgba(18, 23, 38, 0.72);   /* 【保留 hot】 */
  --glass-rail: rgba(12, 16, 27, 0.9);     /* 【保留 hot】 */
  --glass: rgba(255, 255, 255, 0.048);     /* 【保留 hot】 */
  --glass-strong: rgba(255, 255, 255, 0.082); /* 【保留 hot】 */
  --sheen: inset 0 1px 0 rgba(255, 255, 255, 0.06); /* 【保留 hot】内高光 */

  /* 描边 */
  --line: rgba(132, 151, 176, 0.16);       /* 【保留 app/test/login】原 .18 微调统一 */
  --line-strong: rgba(132, 151, 176, 0.28);
  --line-soft: rgba(132, 151, 176, 0.10);  /* 【新引入】 */
  --line-glass: rgba(255, 255, 255, 0.09); /* 【保留 hot】玻璃面板专用 */

  /* 文本 */
  --text-strong: #f7fbff;                  /* 【保留 app.css】 */
  --text: #ecf3fb;                         /* 【保留 app.css】 */
  --text-soft: #d7e2ef;                    /* 【保留 app.css】 */
  --muted: #93a1b5;                        /* 【保留 app.css】 */
  --text-faint: #8490a8;                   /* 【收尾微调】原 #7d879f 对 --bg-surface-2 仅 4.46:1，提亮至 4.99:1（AA） */

  /* 语义色 —— 主色收敛为一个值 */
  --cyan: #19d5c0;                         /* 【保留 app/test/login】hot 的 #34e0d0 退役 */
  --ok: #35d579;                           /* 正常 【保留】 */
  --off: #647084;                          /* 停用 【新引入】 */
  --partial: #f5b82e;                      /* 部分权限 【保留 amber】 */
  --warn: #ff9f43;                         /* 警告 【新引入】与 partial 区分 */
  --danger: #ff667d;                       /* 【保留 app.css rose】 */
  --info: #3f86f6;                         /* 【保留 app.css blue】 */
  --accent-2: #a776ff;                     /* 【保留 app.css purple】仅图表 */

  --ok-soft: rgba(53, 213, 121, 0.14);     /* 【新引入】胶囊软底 */
  --off-soft: rgba(100, 112, 132, 0.16);
  --partial-soft: rgba(245, 184, 46, 0.14);
  --warn-soft: rgba(255, 159, 67, 0.14);
  --danger-soft: rgba(255, 102, 125, 0.14);
  --cyan-soft: rgba(25, 213, 192, 0.12);
  --accent-contrast: #05121c;              /* 亮色按钮上的深色文字，保证 AA */

  /* 字体 —— 零外链：Noto Sans SC / IBM Plex Mono 为本地自托管子集，缺失自动回落 */
  --font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei",
               system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas,
               "SFMono-Regular", Menlo, monospace;

  /* 字号阶梯 */
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px;
  --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 34px;
  --lh-tight: 1.15; --lh-base: 1.5; --lh-loose: 1.6;
  --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-heavy: 800;

  /* 间距栅格（4px 基准） */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* 圆角 */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px; /* hot 的 24px 退役 */

  /* 阴影 */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 22px 56px rgba(0, 0, 0, 0.34);  /* 【保留 app --shadow】 */
  --glow-cyan: 0 0 0 3px rgba(25, 213, 192, 0.22); /* 静态 focus 环，替代发光 */

  /* 动效：循环动画只允许 transform / opacity */
  --dur-fast: 120ms; --dur: 180ms; --dur-slow: 260ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
}

/* ---------- 预留令牌（当前四页未引用，保留以维持设计系统完整性，勿删）----------
   --bg-surface-3 --glass-rail --glass --line-strong --off --warn --off-soft
   --partial-soft --warn-soft --fs-xs --fs-sm --fs-base --fs-md --fs-lg --fs-xl
   --fs-2xl --fs-3xl --lh-tight --lh-base --lh-loose --fw-normal --fw-medium
   --fw-semi --fw-bold --fw-heavy --sp-2 --sp-3 --sp-4 --sp-5 --sp-6 --sp-8
   --sp-10 --sp-12 --shadow-sm --shadow-md --glow-cyan --dur-fast --dur --dur-slow
   --ease --ease-out
   （新增页面可直接引用；上面的清单可用「tokens 定义 − var() 引用」重新核对。） */

/* ---------- 全局键盘焦点（方案 §5 第 5 条）----------
   四页共用一处定义，避免重复；各页原有的更具体的 :focus-visible 规则仍可覆盖。 */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* ---------- 全局动效降级（prefers-reduced-motion，方案 §5 第 4 条）----------
   四页统一在此降级：近乎关闭所有 transition/animation，循环动画收敛为 1 次。
   各页原有的更具体降级规则（如 hot-ranking.css 内）仍可叠加覆盖。 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 表单控件防「深色模式白底白字」（方案 §5 补充）----------
   部分手机自带浏览器（华为 / 小米 / 三星等）与各类内置 WebView，在系统深色模式下
   会用「强制反色（force dark / user-agent darkening）」或原生控件默认样式覆盖 input 的
   背景，却保留页面设置的浅色文字 → 白底白字、输入内容不可见。Chrome / Safari 遵守
   color-scheme: dark 并尊重作者样式，故正常。
   此处用「多重显式声明」压过 UA 样式：背景 / 文字 / 文字填充色 / 光标色 + autofill 兜底。
   注意：appearance 重置只作用于文本类控件，且背景规则排除可勾选 / 特殊控件，
   避免弄坏 select 下拉箭头与 checkbox / radio / range / color / file。 */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="image"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea {
  background-color: var(--bg-field) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
}

/* 文本类控件禁用原生渲染 —— 各 OEM 浏览器「输入框刷白」最常见的修复点 */
input:not([type]),
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea {
  -webkit-appearance: none;
  appearance: none;
}

input::placeholder,
textarea::placeholder {
  color: #8190a5;
  opacity: 1;
}

/* autofill 高亮背景兜底。
   -webkit-autofill 单独成块：Firefox 不认识该伪类，若与标准选择器合并会整条规则被丢弃。 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-field) inset;
  box-shadow: 0 0 0 1000px var(--bg-field) inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-out 0s;
}

/* 标准 :autofill（与 -webkit-autofill 分开写，理由同上） */
input:autofill,
textarea:autofill,
select:autofill {
  background-color: var(--bg-field) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0 1000px var(--bg-field) inset;
}

/* 只看 prefers-color-scheme（不看 color-scheme）的老内核：显式重申深色，抵消自动反色 */
@media (prefers-color-scheme: dark) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    background-color: var(--bg-field) !important;
    color: var(--text) !important;
    -webkit-text-fill-color: var(--text);
  }
}