/* ==========================================================================
   YCJK 设计系统 v3.5.0  (assets/ds.css)
   目标：4 个管理页面共用一套 Token / 排版 / 组件 / 主题（亮·暗·跟随系统）

   ⚠️ 兼容性设计（勿改）：
     旧页面（snapshots.html / config.html）内联定义的变量名
       --bg --card --card-soft --line --ink --ink-2 --ink-3
       --accent --accent-ink --green --red --amber --radius --shadow
     本文件【沿用同名变量】并只替换取值，于是旧页面只要引入本文件、
     删掉自己的 :root 块，就整体换新，无需改结构。
   ========================================================================== */

/* ---------- 1. 亮色（默认） ---------- */
:root {
  /* 语义色 */
  --bg:            #f4f6f9;
  --bg-2:          #eceff4;
  --card:          #ffffff;
  --card-soft:     #f7f9fc;
  --line:          #e2e7ef;
  --line-2:        #d3dae5;
  --ink:           #171c26;
  --ink-2:         #5a6474;
  --ink-3:         #8b95a6;
  --ink-4:         #aab3c1;

  /* 品牌 / 强调 */
  --accent:        #e2571c;
  --accent-ink:    #b8430f;
  --accent-soft:   rgba(226, 87, 28, .10);
  --accent-ring:   rgba(226, 87, 28, .28);

  /* 状态色 */
  --green:         #1a9e57;
  --green-soft:    rgba(26, 158, 87, .12);
  --red:           #d92d20;
  --red-soft:      rgba(217, 45, 32, .10);
  --amber:         #c77700;
  --amber-soft:    rgba(199, 119, 0, .12);
  --blue:          #1f6feb;
  --blue-soft:     rgba(31, 111, 235, .10);

  /* 顶栏 / 侧栏（新组件用） */
  --bar-bg:        #131a24;
  --bar-ink:       #e8edf5;
  --bar-ink-2:     #98a4b6;
  --bar-line:      #26303d;

  /* 圆角 */
  --radius:        12px;
  --radius-sm:     9px;
  --radius-lg:     16px;
  --radius-pill:   999px;

  /* 阴影 */
  --shadow:        0 1px 2px rgba(23, 28, 38, .05), 0 6px 20px rgba(23, 28, 38, .06);
  --shadow-lg:     0 10px 40px rgba(23, 28, 38, .14);

  /* 间距阶梯（4px 基准） */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px;

  /* 字号阶梯 */
  --t-xs:  11.5px;
  --t-sm:  12.5px;
  --t-md:  13.5px;
  --t-base:15px;
  --t-lg:  18px;
  --t-xl:  22px;
  --t-2xl: 28px;
  --t-3xl: 34px;

  /* 其它 */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dur: .18s;
  color-scheme: light;
}

/* ---------- 2. 暗色：手动指定 ---------- */
[data-theme="dark"] {
  --bg:            #0d1117;
  --bg-2:          #12181f;
  --card:          #161b22;
  --card-soft:     #1b2029;
  --line:          #29323d;
  --line-2:        #3a4553;
  --ink:           #e6edf3;
  --ink-2:         #a3aebb;
  --ink-3:         #7d8896;
  --ink-4:         #616c7a;

  --accent:        #ff7a45;
  --accent-ink:    #ff9b73;
  --accent-soft:   rgba(255, 122, 69, .14);
  --accent-ring:   rgba(255, 122, 69, .35);

  --green:         #3fb950;
  --green-soft:    rgba(63, 185, 80, .14);
  --red:           #f85149;
  --red-soft:      rgba(248, 81, 73, .14);
  --amber:         #d29922;
  --amber-soft:    rgba(210, 153, 34, .16);
  --blue:          #58a6ff;
  --blue-soft:     rgba(88, 166, 255, .14);

  --bar-bg:        #010409;
  --bar-ink:       #e6edf3;
  --bar-ink-2:     #8b949e;
  --bar-line:      #21262d;

  --shadow:        0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
  --shadow-lg:     0 12px 44px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* ---------- 3. 暗色：跟随系统（未手动指定时才生效） ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg:            #0d1117;
    --bg-2:          #12181f;
    --card:          #161b22;
    --card-soft:     #1b2029;
    --line:          #29323d;
    --line-2:        #3a4553;
    --ink:           #e6edf3;
    --ink-2:         #a3aebb;
    --ink-3:         #7d8896;
    --ink-4:         #616c7a;

    --accent:        #ff7a45;
    --accent-ink:    #ff9b73;
    --accent-soft:   rgba(255, 122, 69, .14);
    --accent-ring:   rgba(255, 122, 69, .35);

    --green:         #3fb950;
    --green-soft:    rgba(63, 185, 80, .14);
    --red:           #f85149;
    --red-soft:      rgba(248, 81, 73, .14);
    --amber:         #d29922;
    --amber-soft:    rgba(210, 153, 34, .16);
    --blue:          #58a6ff;
    --blue-soft:     rgba(88, 166, 255, .14);

    --bar-bg:        #010409;
    --bar-ink:       #e6edf3;
    --bar-ink-2:     #8b949e;
    --bar-line:      #21262d;

    --shadow:        0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
    --shadow-lg:     0 12px 44px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}

/* ---------- 4. 基础重置 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur), color var(--dur);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
b, strong { font-weight: 600; }
code, kbd { font-family: var(--mono); font-size: .92em; }

::selection { background: var(--accent-ring); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 5. 全局顶栏（app.js 注入） ---------- */
.yk-bar {
  position: sticky; top: 0; z-index: 60;
  background: var(--bar-bg);
  border-bottom: 1px solid var(--bar-line);
  color: var(--bar-ink);
}
.yk-bar-in {
  max-width: 1240px; margin: 0 auto;
  padding: 0 var(--s4);
  display: flex; align-items: center; gap: var(--s2);
  min-height: 52px; flex-wrap: wrap;
}
.yk-logo {
  display: flex; align-items: center; gap: var(--s2);
  font-weight: 700; font-size: var(--t-md); letter-spacing: .3px;
  margin-right: var(--s3); white-space: nowrap; color: var(--bar-ink);
}
.yk-logo .yk-mark {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  background: linear-gradient(135deg, var(--accent), #ff9b45);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset;
}
.yk-nav { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }
.yk-nav a {
  padding: 6px 11px; border-radius: var(--radius-sm);
  font-size: var(--t-md); color: var(--bar-ink-2); text-decoration: none;
  transition: background var(--dur), color var(--dur); white-space: nowrap;
}
.yk-nav a:hover { background: rgba(255, 255, 255, .08); color: var(--bar-ink); text-decoration: none; }
.yk-nav a.on { background: rgba(255, 255, 255, .13); color: var(--bar-ink); font-weight: 600; }

.yk-bar-right { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }

/* 主题切换 */
.yk-theme {
  display: inline-flex; align-items: center; gap: 2px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radius-pill); padding: 3px;
}
.yk-theme button {
  border: none; background: transparent; cursor: pointer;
  color: var(--bar-ink-2); border-radius: var(--radius-pill);
  padding: 4px 9px; font-size: var(--t-sm); line-height: 1.3;
  transition: background var(--dur), color var(--dur);
}
.yk-theme button:hover { color: var(--bar-ink); }
.yk-theme button.on { background: var(--accent); color: #fff; font-weight: 600; }

/* ★ v3.5.2：品牌双级锁定（中盛科技 / YCJK）
   纯新增选择器，不影响任何现有页面。图形仍复用 .yk-mark 的橙红渐变方块，
   只在其中叠加一层白色描边环 + 播放三角（示意「看回放」）。 */
.yk-mark > svg { display: block; width: 100%; height: 100%; }
.yk-lockup { display: flex; flex-direction: column; line-height: 1.15; }
.yk-lockup .yk-co {
  font-size: 9.5px; font-weight: 600; letter-spacing: 2.4px;
  color: var(--bar-ink-2); text-transform: none;
}
.yk-lockup .yk-name {
  font-size: var(--t-md); font-weight: 700; letter-spacing: .3px; color: var(--bar-ink);
}

/* ---------- 6. 页面容器 ---------- */
.yk-wrap { max-width: 1240px; margin: 0 auto; padding: var(--s6) var(--s4) var(--s9); }
.yk-wrap-narrow { max-width: 940px; }

.yk-page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap;
}
.yk-page-head h1 { font-size: var(--t-xl); font-weight: 700; letter-spacing: .2px; }
.yk-page-head .sub { color: var(--ink-3); font-size: var(--t-sm); margin-top: 3px; }

/* ---------- 7. 卡片 ---------- */
.yk-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s5);
}
.yk-card + .yk-card { margin-top: var(--s4); }
.yk-card > h2, .yk-card > .yk-card-title {
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
  letter-spacing: .5px; margin-bottom: var(--s4);
  display: flex; align-items: center; gap: var(--s2);
}
.yk-grid { display: grid; gap: var(--s4); }
.yk-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yk-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yk-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .yk-grid-2, .yk-grid-3, .yk-grid-4 { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .yk-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yk-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 8. 按钮 ---------- */
.yk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line-2); background: var(--card-soft); color: var(--ink);
  border-radius: var(--radius-sm); padding: 8px 14px; font-size: var(--t-md);
  cursor: pointer; transition: background var(--dur), border-color var(--dur), transform .1s;
  white-space: nowrap; text-decoration: none;
}
.yk-btn:hover { background: var(--bg-2); text-decoration: none; }
.yk-btn:active { transform: scale(.985); }
.yk-btn:disabled, .yk-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.yk-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.yk-btn-primary:hover { filter: brightness(1.07); background: var(--accent); }
.yk-btn-danger { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
.yk-btn-danger:hover { filter: brightness(1.07); background: var(--red); }
.yk-btn-ok { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }
.yk-btn-ghost { background: transparent; border-color: transparent; color: var(--accent); }
.yk-btn-ghost:hover { background: var(--accent-soft); }
.yk-btn-sm { padding: 5px 10px; font-size: var(--t-sm); border-radius: 8px; }
.yk-btn-lg { padding: 14px 20px; font-size: var(--t-base); border-radius: var(--radius); font-weight: 700; }

/* ---------- 9. 分段选择 / 输入 ---------- */
.yk-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.yk-seg button {
  border: 1px solid var(--line); background: var(--card-soft); color: var(--ink-2);
  border-radius: 8px; padding: 6px 12px; font-size: var(--t-md);
  cursor: pointer; transition: all var(--dur);
}
.yk-seg button:hover { border-color: var(--accent); color: var(--ink); }
.yk-seg button.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.yk-seg.locked button, .yk-seg.locked button.on {
  background: var(--card-soft); border-color: var(--line); color: var(--ink-4);
  cursor: not-allowed; pointer-events: none;
}

.yk-input, input[type="time"].yk-input, input[type="date"].yk-input, input[type="text"].yk-input {
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
  font-size: var(--t-md); background: var(--card-soft); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.yk-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.yk-input:disabled { opacity: .45; cursor: not-allowed; }

/* 开关 */
.yk-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.yk-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.yk-switch .tr {
  position: absolute; inset: 0; background: var(--line-2);
  border-radius: var(--radius-pill); transition: var(--dur); cursor: pointer;
}
.yk-switch .tr::before {
  content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: var(--dur);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.yk-switch input:checked + .tr { background: var(--accent); }
.yk-switch input:checked + .tr::before { transform: translateX(20px); }
.yk-switch input:disabled + .tr { opacity: .5; cursor: not-allowed; }

/* ---------- 10. 徽标 / 状态点 ---------- */
.yk-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-xs); font-weight: 600; line-height: 1.6;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--card-soft); border: 1px solid var(--line); color: var(--ink-2);
  white-space: nowrap;
}
.yk-badge.ok   { color: var(--green); background: var(--green-soft); border-color: transparent; }
.yk-badge.warn { color: var(--amber); background: var(--amber-soft); border-color: transparent; }
.yk-badge.err  { color: var(--red);   background: var(--red-soft);   border-color: transparent; }
.yk-badge.info { color: var(--blue);  background: var(--blue-soft);  border-color: transparent; }
.yk-badge.brand{ color: var(--accent); background: var(--accent-soft); border-color: transparent; }

.yk-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); flex: none; display: inline-block; }
.yk-dot.ok   { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.yk-dot.warn { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.yk-dot.err  { background: var(--red);   box-shadow: 0 0 0 3px var(--red-soft); }
.yk-dot.pulse { animation: ykpulse 1.8s ease-in-out infinite; }
@keyframes ykpulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ---------- 11. 告警横幅 ---------- */
.yk-banner {
  display: flex; align-items: flex-start; gap: var(--s3);
  border-radius: var(--radius); padding: var(--s3) var(--s4);
  font-size: var(--t-md); margin-bottom: var(--s4);
  border: 1px solid transparent;
}
.yk-banner .ic { font-size: 16px; line-height: 1.35; flex: none; }
.yk-banner .tx { flex: 1; min-width: 0; }
.yk-banner .tx b { display: block; margin-bottom: 2px; }
.yk-banner .tx .sm { color: inherit; opacity: .8; font-size: var(--t-sm); }
.yk-banner.err  { background: var(--red-soft);   color: var(--red);   border-color: var(--red-soft); }
.yk-banner.warn { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-soft); }
.yk-banner.ok   { background: var(--green-soft); color: var(--green); border-color: var(--green-soft); }
.yk-banner.info { background: var(--blue-soft);  color: var(--blue);  border-color: var(--blue-soft); }
.yk-banner .yk-btn { flex: none; }

/* ---------- 12. KPI / 进度条 ---------- */
.yk-kpi {
  background: var(--card-soft); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: var(--s3) var(--s4);
}
.yk-kpi .k-label { font-size: var(--t-xs); color: var(--ink-3); margin-bottom: 4px; }
.yk-kpi .k-value {
  font-size: var(--t-xl); font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.yk-kpi .k-unit { font-size: var(--t-sm); color: var(--ink-3); font-weight: 500; margin-left: 3px; }
.yk-kpi .k-sub { font-size: var(--t-xs); color: var(--ink-3); margin-top: 4px; }

.yk-bar-track {
  height: 8px; border-radius: var(--radius-pill);
  background: var(--bg-2); overflow: hidden; margin-top: var(--s2);
}
.yk-bar-fill {
  height: 100%; border-radius: var(--radius-pill);
  background: var(--green); transition: width .4s ease;
}
.yk-bar-fill.warn { background: var(--amber); }
.yk-bar-fill.err  { background: var(--red); }

/* ---------- 13. 键值行 / 表格 ---------- */
.yk-rows { display: flex; flex-direction: column; }
.yk-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.yk-row:last-child { border-bottom: none; padding-bottom: 2px; }
.yk-row .r-label { font-size: var(--t-md); font-weight: 500; }
.yk-row .r-label small { display: block; color: var(--ink-3); font-weight: 400; font-size: var(--t-sm); margin-top: 2px; }
.yk-row .r-val { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: var(--t-md); }

.yk-table { width: 100%; border-collapse: collapse; font-size: var(--t-md); }
.yk-table th {
  text-align: left; font-size: var(--t-xs); color: var(--ink-3);
  font-weight: 600; letter-spacing: .4px;
  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.yk-table td { padding: var(--s3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.yk-table tr:last-child td { border-bottom: none; }
.yk-table tbody tr:hover { background: var(--card-soft); }

/* ---------- 14. Toast ---------- */
.yk-toasts {
  position: fixed; right: var(--s4); bottom: var(--s4); z-index: 200;
  display: flex; flex-direction: column; gap: var(--s2);
  max-width: min(360px, calc(100vw - 32px));
}
.yk-toast {
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  padding: var(--s3) var(--s4); font-size: var(--t-md);
  animation: ykin .22s ease;
}
.yk-toast.err { border-left-color: var(--red); }
.yk-toast.warn { border-left-color: var(--amber); }
.yk-toast.info { border-left-color: var(--blue); }
@keyframes ykin { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* ---------- 15. 工具类 ---------- */
.yk-muted { color: var(--ink-3); }
.yk-sm { font-size: var(--t-sm); }
.yk-xs { font-size: var(--t-xs); }
.yk-num { font-variant-numeric: tabular-nums; }
.yk-mono { font-family: var(--mono); }
.yk-nowrap { white-space: nowrap; }
.yk-flex { display: flex; align-items: center; gap: var(--s2); }
.yk-flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.yk-wrap-flex { flex-wrap: wrap; }
.yk-ml-auto { margin-left: auto; }
.yk-mt2 { margin-top: var(--s2); }
.yk-mt3 { margin-top: var(--s3); }
.yk-mt4 { margin-top: var(--s4); }
.yk-mb3 { margin-bottom: var(--s3); }
.yk-mb4 { margin-bottom: var(--s4); }
.yk-hide { display: none !important; }
.yk-empty { color: var(--ink-3); font-size: var(--t-md); padding: var(--s5) 0; text-align: center; }
.yk-sep { height: 1px; background: var(--line); margin: var(--s4) 0; }

/* 加载骨架 */
.yk-spin {
  width: 14px; height: 14px; flex: none; display: inline-block;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: ykspin .7s linear infinite;
}
@keyframes ykspin { to { transform: rotate(360deg) } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}