/* ============================================================
   KeepOne / 00001 统一外壳
   基线：keepone.win /zh/ONE/ 应用区
   用法：<link rel="stylesheet" href="/unify/shell.css">
   ============================================================ */

:root {
  /* 背景 */
  --kc-bg:        #070C16;
  --kc-bg2:       #0A1521;
  --kc-card:      #0F1B2D;
  --kc-card2:     #12253A;
  --kc-card3:     #16283A;

  /* 线 */
  --kc-line:      rgba(255, 255, 255, .08);
  --kc-line-soft: rgba(255, 255, 255, .05);
  --kc-line-hard: rgba(255, 255, 255, .14);

  /* 文字 */
  --kc-ink:       #E8EDF2;
  --kc-ink2:      #CFE2F1;
  --kc-dim:       #8A9AA8;
  --kc-dim2:      #5E6C79;

  /* 品牌 */
  --kc-green:     #D8F937;
  --kc-green-dim: rgba(216, 249, 55, .12);
  --kc-on-green:  #070C16;
  --kc-up:        #35C46A;
  --kc-down:      #E5484D;
  --kc-warn:      #FFB340;
  --kc-purple:    #B07CFF;

  /* 尺寸 */
  --kc-head-h:    56px;
  --kc-side-w:    224px;
  --kc-radius:    14px;
  --kc-radius-sm: 9px;
  --kc-radius-pill: 20px;
  --kc-max:       1033px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.kc-body {
  background: var(--kc-bg);
  color: var(--kc-ink);
  font-family: "Source Sans Pro", -apple-system, "PingFang TC", "PingFang SC",
               "Microsoft JhengHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
body.kc-body a { color: inherit; text-decoration: none; }
body.kc-body ::-webkit-scrollbar { width: 8px; height: 8px; }
body.kc-body ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }
body.kc-body ::-webkit-scrollbar-track { background: transparent; }

/* ---------- 顶栏 ---------- */
.kc-head {
  height: var(--kc-head-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--kc-bg);
  border-bottom: 1px solid var(--kc-line-soft);
  flex: 0 0 100%;
}
.kc-head .kc-logo {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.4px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 3px;
  color: #fff;
  transform: translateX(20px);
}
.kc-head .kc-logo .oz { color: var(--kc-green); }
.kc-head .kc-logo b { color: var(--kc-green); font-weight: 700; }

.kc-head .kc-right { display: flex; align-items: center; gap: 6px; }

.kc-head .kc-lang {
  appearance: none;
  background: transparent;
  border: 1px solid var(--kc-line-hard);
  color: var(--kc-ink2);
  border-radius: 8px;
  padding: 5px 22px 5px 9px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  outline: none;
  width: auto;
  max-width: 96px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%238A9AA8'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.kc-head .kc-lang:hover { border-color: rgba(255,255,255,.28); }
.kc-head .kc-lang option { background: var(--kc-card); color: var(--kc-ink); }

.kc-head .kc-ico {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--kc-ink2);
  cursor: pointer;
  position: relative;
  background: none; border: none; padding: 0;
}
.kc-head .kc-ico:hover { background: rgba(255,255,255,.07); }
.kc-head .kc-ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.kc-head .kc-ico .dot {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--kc-green); display: none;
}
.kc-head .kc-ico.has-unread .dot { display: block; }

.kc-head .kc-ava {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #FFD34D, #FFA800);
  display: grid; place-items: center;
  font-weight: 700; color: #3a2b00; font-size: 13px;
  cursor: pointer; border: none; padding: 0; font-family: inherit;
}
.kc-head .kc-login {
  padding: 6px 15px; border-radius: 8px;
  background: var(--kc-green); color: var(--kc-on-green);
  font-size: 12.5px; font-weight: 600;
  border: none; cursor: pointer; font-family: inherit;
}
.kc-head .kc-login.ghost {
  background: transparent; color: var(--kc-ink2);
  border: 1px solid var(--kc-line-hard);
}

/* ---------- 三栏骨架 ---------- */
.kc-shell {
  display: flex;
  min-height: calc(100vh - var(--kc-head-h));
  align-items: stretch;
}

.kc-side {
  width: var(--kc-side-w);
  flex: 0 0 var(--kc-side-w);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: var(--kc-head-h);
  height: calc(100vh - var(--kc-head-h));
  overflow-y: auto;
  background: var(--kc-bg);
}
.kc-side::-webkit-scrollbar { width: 0; }

.kc-side .kc-toggle {
  display: flex; align-items: center; justify-content: flex-start;
  width: 100%; height: 40px; margin-bottom: 4px; padding: 0 16px;
  background: transparent; border: none; border-radius: var(--kc-radius-pill);
  color: var(--kc-ink2); font-size: 18px; line-height: 1;
  cursor: pointer; font-family: inherit;
}
.kc-side .kc-toggle:hover { background: rgba(255,255,255,.05); }

.kc-nav { display: flex; flex-direction: column; gap: 2px; }
.kc-nav a {
  display: flex; align-items: center; gap: 12px;
  height: 48px; padding: 0 8px 0 16px;
  border-radius: var(--kc-radius-pill);
  font-size: 16px; color: var(--kc-ink2);
  transition: .12s ease;
}
.kc-nav a:hover { background: rgba(255,255,255,.05); }
.kc-nav a.on { background: var(--kc-ink2); color: #0b1420; font-weight: 600; }
.kc-nav .ico { width: 24px; flex: 0 0 24px; text-align: center; font-size: 15px; }
.kc-nav .kc-sep { height: 1px; background: var(--kc-line); margin: 8px 12px; }

.kc-side .kc-foot {
  margin-top: auto;
  padding: 12px 16px 4px;
  border-top: 1px solid var(--kc-line);
}
.kc-side .kc-foot .mail {
  font-size: 12.5px; color: var(--kc-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kc-side .kc-foot .tier {
  display: inline-block; margin-top: 6px;
  font-size: 10px; letter-spacing: .08em;
  padding: 2px 8px; border-radius: 6px;
  background: rgba(255,255,255,.06); color: var(--kc-dim);
}

/* 收合态 */
.kc-shell.mini .kc-side { width: 62px; flex: 0 0 62px; }
.kc-shell.mini .kc-nav a { justify-content: center; padding: 0; }
.kc-shell.mini .kc-nav a span:not(.ico) { display: none; }
.kc-shell.mini .kc-foot { display: none; }

/* ---------- 主区 ---------- */
.kc-main { flex: 1 1 auto; min-width: 0; overflow-y: auto; }
.kc-wrap { max-width: var(--kc-max); margin: 0 auto; padding: 18px 16px 60px; }

.kc-h1 {
  font-size: 30px; font-weight: 700; letter-spacing: -.6px;
  margin: 0 0 6px; height: 56px; display: flex; align-items: center;
}
.kc-lede { font-size: 13px; color: var(--kc-dim); margin: 0 0 20px; line-height: 1.7; }
.kc-h2 { font-size: 16px; font-weight: 600; margin: 26px 0 10px; }
.kc-h3 { font-size: 13.5px; font-weight: 600; margin: 18px 0 8px; color: var(--kc-ink2); }

/* ---------- 卡片 ---------- */
.kc-card {
  background: var(--kc-card);
  border: 1px solid var(--kc-line);
  border-radius: var(--kc-radius);
  padding: 18px 20px;
}
.kc-card + .kc-card { margin-top: 12px; }
.kc-card h4 {
  font-size: 12.5px; font-weight: 500; color: var(--kc-dim);
  margin: 0 0 10px; letter-spacing: .02em;
}
.kc-card .val { font-size: 26px; font-weight: 700; letter-spacing: -.5px; }
.kc-card .sub { font-size: 12px; color: var(--kc-dim2); margin-top: 6px; line-height: 1.6; }

.kc-grid { display: grid; gap: 12px; }
.kc-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.kc-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.kc-grid.c4 { grid-template-columns: repeat(4, 1fr); }

/* 指标条 */
.kc-metrics { display: grid; gap: 10px; margin-bottom: 18px; }
.kc-metrics .m {
  background: var(--kc-card); border: 1px solid var(--kc-line);
  border-radius: 12px; padding: 14px 16px;
}
.kc-metrics .m span { display: block; font-size: 11.5px; color: var(--kc-dim); margin-bottom: 7px; }
.kc-metrics .m b { font-size: 21px; font-weight: 700; letter-spacing: -.4px; }

/* ---------- 表格 ---------- */
.kc-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.kc-tbl th {
  text-align: left; font-weight: 500; font-size: 12px;
  color: var(--kc-dim); padding: 9px 10px;
  border-bottom: 1px solid var(--kc-line);
  white-space: nowrap;
}
.kc-tbl td {
  padding: 11px 10px; color: var(--kc-ink2);
  border-bottom: 1px solid var(--kc-line-soft);
}
.kc-tbl tr:hover td { background: rgba(255,255,255,.02); }
.kc-tbl .pos { color: var(--kc-up); }
.kc-tbl .neg { color: var(--kc-down); }
.kc-tbl .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 按钮 ---------- */
.kc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 18px; border-radius: var(--kc-radius-sm);
  font-size: 13px; font-weight: 600; font-family: inherit;
  border: 1px solid transparent; cursor: pointer;
  transition: .13s ease; text-decoration: none;
}
.kc-btn:disabled { opacity: .45; cursor: not-allowed; }
.kc-btn-pri { background: var(--kc-green); color: var(--kc-on-green); }
.kc-btn-pri:hover:not(:disabled) { filter: brightness(1.06); }
.kc-btn-gh { background: transparent; color: var(--kc-ink2); border-color: var(--kc-line-hard); }
.kc-btn-gh:hover:not(:disabled) { background: rgba(255,255,255,.05); }
.kc-btn-dg { background: rgba(229,72,77,.12); color: var(--kc-down); border-color: rgba(229,72,77,.3); }
.kc-btn-dg:hover:not(:disabled) { background: rgba(229,72,77,.2); }
.kc-btn-sm { padding: 6px 12px; font-size: 12px; }

/* ---------- 标签 / 徽章 ---------- */
.kc-tag {
  display: inline-block; padding: 3px 9px;
  border-radius: 6px; font-size: 11.5px;
  background: rgba(255,255,255,.07); color: var(--kc-dim);
}
.kc-tag.ok   { background: rgba(53,196,106,.16); color: var(--kc-up); }
.kc-tag.warn { background: rgba(255,179,64,.16); color: var(--kc-warn); }
.kc-tag.bad  { background: rgba(229,72,77,.16); color: var(--kc-down); }
.kc-tag.pri  { background: var(--kc-green-dim); color: var(--kc-green); }

/* ---------- 表单 ---------- */
.kc-field { margin-bottom: 14px; }
.kc-field label {
  display: block; font-size: 12px; color: var(--kc-dim);
  margin-bottom: 6px;
}
.kc-input, .kc-select, .kc-textarea {
  width: 100%; padding: 10px 13px;
  border-radius: var(--kc-radius-sm);
  border: 1px solid var(--kc-line-hard);
  background: #0B1420; color: var(--kc-ink);
  font-size: 13.5px; font-family: inherit; outline: none;
  transition: border-color .13s ease;
}
.kc-input:focus, .kc-select:focus, .kc-textarea:focus {
  border-color: rgba(216,249,55,.5);
}
.kc-input::placeholder, .kc-textarea::placeholder { color: var(--kc-dim2); }
.kc-select option { background: var(--kc-card); color: var(--kc-ink); }
.kc-textarea { resize: vertical; min-height: 72px; }

/* ---------- 空态 / 提示 ---------- */
.kc-empty {
  padding: 30px 16px; text-align: center;
  color: var(--kc-dim2); font-size: 13px; line-height: 1.7;
}
.kc-note {
  padding: 11px 14px; border-radius: var(--kc-radius-sm);
  font-size: 12.5px; line-height: 1.65;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--kc-line);
  color: var(--kc-dim);
}
.kc-note.warn { background: rgba(255,179,64,.1); border-color: rgba(255,179,64,.3); color: var(--kc-warn); }
.kc-note.bad  { background: rgba(229,72,77,.09); border-color: rgba(229,72,77,.32); color: #E8A0A2; }
.kc-note.ok   { background: rgba(53,196,106,.1); border-color: rgba(53,196,106,.3); color: var(--kc-up); }

/* ---------- 客服浮窗（由 shell.js 注入） ---------- */
.kc-cs-btn {
  position: fixed; right: 22px; bottom: 22px; z-index: 8800;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--kc-up); border: none; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 8px 26px rgba(53,196,106,.4);
  transition: .15s ease;
}
.kc-cs-btn:hover { transform: scale(1.06); }
.kc-cs-btn svg { width: 25px; height: 25px; stroke: var(--kc-bg); fill: none; stroke-width: 1.9; }

.kc-cs {
  position: fixed; right: 22px; bottom: 88px; z-index: 8900;
  width: min(360px, calc(100vw - 32px));
  height: min(520px, 70vh);
  background: var(--kc-card);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,.6);
}
.kc-cs .hd {
  background: var(--kc-card2); padding: 13px 16px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--kc-line);
}
.kc-cs .hd .av {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--kc-up); color: var(--kc-on-green);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.kc-cs .hd .nm { font-size: 13.5px; font-weight: 600; }
.kc-cs .hd .st { font-size: 11px; color: var(--kc-up); }
.kc-cs .hd .x {
  margin-left: auto; background: none; border: none;
  color: var(--kc-dim); font-size: 19px; cursor: pointer;
  line-height: 1; padding: 0 2px;
}
.kc-cs .body {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.kc-cs .msg {
  max-width: 82%; padding: 10px 13px; border-radius: 12px;
  font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
}
.kc-cs .msg.them { background: var(--kc-card3); color: var(--kc-ink2); align-self: flex-start; border-bottom-left-radius: 4px; }
.kc-cs .msg.me { background: var(--kc-green); color: var(--kc-on-green); align-self: flex-end; border-bottom-right-radius: 4px; }
.kc-cs .ft { border-top: 1px solid var(--kc-line); padding: 10px; display: flex; gap: 8px; }
.kc-cs .ft textarea {
  flex: 1; resize: none; height: 38px; padding: 9px 11px;
  border-radius: var(--kc-radius-sm);
  border: 1px solid var(--kc-line-hard);
  background: #0B1420; color: var(--kc-ink);
  font-size: 13px; font-family: inherit; outline: none;
}
.kc-cs .ft button {
  padding: 0 15px; border-radius: var(--kc-radius-sm);
  background: var(--kc-green); color: var(--kc-on-green);
  border: none; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}

/* ---------- 弹层 ---------- */
.kc-pop {
  position: fixed; z-index: 9000;
  background: var(--kc-card);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--kc-radius);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  overflow: hidden;
}
.kc-menu { min-width: 228px; padding: 8px; }
.kc-menu a, .kc-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px; border-radius: var(--kc-radius-sm);
  color: var(--kc-ink2); font-size: 13.5px;
  background: none; border: none; cursor: pointer;
  text-align: left; font-family: inherit;
}
.kc-menu a:hover, .kc-menu button:hover { background: rgba(255,255,255,.07); }
.kc-menu .kc-sep { height: 1px; background: var(--kc-line); margin: 6px 4px; }
.kc-menu .danger { color: var(--kc-down); }
.kc-menu .kv { font-size: 11.5px; color: var(--kc-dim); padding: 6px 12px 8px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
  .kc-side { width: 62px; flex: 0 0 62px; padding: 8px 6px; }
  .kc-nav a { justify-content: center; padding: 0; }
  .kc-nav a span:not(.ico) { display: none; }
  .kc-side .kc-foot { display: none; }
  .kc-grid.c4 { grid-template-columns: repeat(2, 1fr); }
  .kc-grid.c3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .kc-head { padding: 0 12px; gap: 8px; }
  .kc-head .kc-logo { font-size: 16px; transform: none; }
  .kc-head .kc-lang { display: none; }
  .kc-wrap { padding: 14px 12px 50px; }
  .kc-h1 { font-size: 22px; height: 44px; }
  .kc-grid.c2, .kc-grid.c3, .kc-grid.c4 { grid-template-columns: 1fr; }
  .kc-side { display: none; }
}

/* ============================================================
   浅色主题：<html data-theme="light">（由 theme.js 切换）
   只换取值，结构不变
   ============================================================ */
html[data-theme="light"] {
  color-scheme: light;

  --kc-bg:        #f4f7f7;
  --kc-bg2:       #ffffff;
  --kc-card:      #ffffff;
  --kc-card2:     #f7faf9;
  --kc-card3:     #eef2f1;

  --kc-line:      rgba(18, 38, 42, .10);
  --kc-line-soft: rgba(18, 38, 42, .06);
  --kc-line-hard: #cfdad8;

  --kc-ink:       #12262a;
  --kc-ink2:      #2a4145;
  --kc-dim:       #5c6f72;
  --kc-dim2:      #7d8d90;

  --kc-green:     #128a68;
  --kc-green-dim: rgba(18, 138, 104, .10);
  --kc-on-green:  #ffffff;
  --kc-up:        #128a68;
  --kc-down:      #c23b48;
  --kc-warn:      #a07414;
}

html[data-theme="light"] .kc-head { background: #ffffff; border-bottom-color: var(--kc-line); }
html[data-theme="light"] .kc-side { background: #ffffff; }
html[data-theme="light"] .kc-nav a { color: var(--kc-ink2); }
html[data-theme="light"] .kc-nav a:hover { background: rgba(18, 38, 42, .05); }
html[data-theme="light"] .kc-nav a.on { background: var(--kc-ink); color: #fff; }
html[data-theme="light"] .kc-head .kc-lang { border-color: var(--kc-line-hard); color: var(--kc-ink2); }
html[data-theme="light"] .kc-head .kc-ico { color: var(--kc-ink2); }
html[data-theme="light"] .kc-head .kc-ico:hover { background: rgba(18, 38, 42, .06); }
html[data-theme="light"] .kc-input,
html[data-theme="light"] .kc-select,
html[data-theme="light"] .kc-textarea { background: #ffffff; border-color: var(--kc-line-hard); color: var(--kc-ink); }
html[data-theme="light"] .kc-btn-gh { color: var(--kc-ink2); border-color: var(--kc-line-hard); }
html[data-theme="light"] .kc-btn-gh:hover { background: rgba(18, 38, 42, .05); }
html[data-theme="light"] .kc-tag { background: rgba(18, 38, 42, .07); color: var(--kc-dim); }
html[data-theme="light"] .kc-tbl th { color: var(--kc-dim); border-bottom-color: var(--kc-line); }
html[data-theme="light"] .kc-tbl td { border-bottom-color: var(--kc-line-soft); }
html[data-theme="light"] .kc-tbl tr:hover td { background: rgba(18, 38, 42, .03); }
html[data-theme="light"] .kc-cs { background: #fff; border-color: var(--kc-line-hard); }
html[data-theme="light"] .kc-cs .hd { background: #f7faf9; }
html[data-theme="light"] .kc-cs .msg.them { background: #eef2f1; color: var(--kc-ink); }
html[data-theme="light"] .kc-cs .ft textarea { background: #fff; color: var(--kc-ink); }
html[data-theme="light"] .kc-pop { background: #fff; border-color: var(--kc-line-hard); }
html[data-theme="light"] .kc-menu a,
html[data-theme="light"] .kc-menu button { color: var(--kc-ink2); }
html[data-theme="light"] .kc-menu a:hover,
html[data-theme="light"] .kc-menu button:hover { background: rgba(18, 38, 42, .05); }
html[data-theme="light"] .kc-note { background: #f7faf9; border-color: var(--kc-line); color: var(--kc-dim); }
html[data-theme="light"] .kc-metrics .m,
html[data-theme="light"] .kc-card { box-shadow: 0 1px 2px rgba(18, 38, 42, .04); }

/* 主题切换按钮 */
.kc-theme {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--kc-ink2); cursor: pointer;
  background: none; border: none; padding: 0;
}
.kc-theme:hover { background: rgba(255, 255, 255, .07); }
html[data-theme="light"] .kc-theme:hover { background: rgba(18, 38, 42, .06); }
.kc-theme svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; }