/* 皮肤：白色 */
html[data-skin="white"] {
  --bg: #eef5ff;
  --bg-elev: #ffffff;
  --bg-soft: #e3eefc;
  --line: #b7c9e3;
  --line-strong: #3b82c4;
  --text: #17324d;
  --muted: #5f7a96;
  --accent: #1d7ad6;
  --accent-ink: #0f2438;
  --accent-2: #4ea1ea;
  --warn: #c98a10;
  --danger: #d05050;
  --ok: #2a9a66;
  --radius: 8px;
  --font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --display: "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: Consolas, monospace;
}

html[data-skin="white"] body {
  background:
    radial-gradient(ellipse at 10% 0%, rgba(120, 190, 255, 0.35), transparent 42%),
    radial-gradient(ellipse at 90% 100%, rgba(180, 220, 255, 0.4), transparent 45%),
    linear-gradient(180deg, #f7fbff 0%, #e8f1fc 100%);
}

html[data-skin="white"] .sidebar {
  background: rgba(255, 255, 255, 0.88);
  border-right: 1px solid #b7c9e3;
  backdrop-filter: blur(8px);
}
html[data-skin="white"] .brand-name { color: #1d7ad6; letter-spacing: 0.06em; }
html[data-skin="white"] .nav-item { color: #5f7a96; border-radius: 8px; }
html[data-skin="white"] .nav-item:hover { background: #e8f2ff; color: #17324d; }
html[data-skin="white"] .nav-item.active {
  background: #1d7ad6;
  color: #fff;
  box-shadow: 0 6px 14px rgba(29, 122, 214, 0.28);
}

html[data-skin="white"] .card,
html[data-skin="white"] .stat,
html[data-skin="white"] .auth-card {
  background: #fff;
  border: 1px solid #c9d8ec;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(40, 90, 140, 0.08);
}
html[data-skin="white"] .card-h h2 {
  border-left-color: #1d7ad6;
  color: #17324d;
}

html[data-skin="white"] .btn {
  background: #fff;
  border: 1px solid #b7c9e3;
  color: #17324d;
  border-radius: 8px;
}
html[data-skin="white"] .btn:hover { background: #eef5ff; border-color: #1d7ad6; }
html[data-skin="white"] .btn.primary {
  background: #1d7ad6;
  border-color: #1563b0;
  color: #fff;
}
html[data-skin="white"] .btn.primary:hover { background: #2a8ae8; }

html[data-skin="white"] input,
html[data-skin="white"] select,
html[data-skin="white"] textarea {
  background: #fff !important;
  border: 1px solid #b7c9e3 !important;
  color: #17324d !important;
  border-radius: 8px !important;
}

html[data-skin="white"] .svc {
  background: #fff;
  color: #17324d;
  border-color: #b7c9e3;
  font-size: 12px;
  line-height: 1.35;
  padding: 7px 8px;
  white-space: normal;
  word-break: break-all;
}
html[data-skin="white"] .svc.active {
  color: #ffffff !important;
  border-color: #1a7a4a !important;
  background: #1f8f56 !important;
  font-weight: 700;
  box-shadow: 0 2px 0 #14633c;
}
html[data-skin="white"] .svc.inactive {
  color: #ffffff !important;
  border-color: #a03030 !important;
  background: #c05050 !important;
  font-weight: 700;
}
html[data-skin="white"] .svc.guest {
  color: #3b6a94 !important;
  border: 1px dashed #7aa6d4 !important;
  background: #f4f8ff !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  box-shadow: none;
}
html[data-skin="white"] .auth-gate {
  background: linear-gradient(160deg, #f7fbff, #dcecff 55%, #eef5ff);
}
html[data-skin="white"] .plan-buy-btn {
  background: #fff;
  border: 1px solid #c9d8ec;
  border-radius: 12px;
}
html[data-skin="white"] .plan-buy-price { color: #1d7ad6; }
html[data-skin="white"] .log {
  background: #f7fbff;
  border-color: #c9d8ec;
  color: #3a5570;
}
html[data-skin="white"] .toast {
  background: #fff;
  border-color: #b7c9e3;
  color: #17324d;
}

/* 表格头 / 演示提示条：跟亮色底配套 */
html[data-skin="white"] .table th {
  background: #e8f2ff;
  color: #3b6a94;
  border-bottom: 1px solid #c9d8ec;
}
html[data-skin="white"] .table td {
  border-bottom-color: #e3eefc;
  color: #17324d;
}
html[data-skin="white"] .vi-demo-bar,
html[data-skin="white"] #viLock.is-on {
  background: #eaf3ff;
  border: 1px solid #b7c9e3;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(40, 90, 140, 0.08);
}
html[data-skin="white"] .vi-demo-bar-text strong { color: #1d7ad6; }
html[data-skin="white"] .vi-demo-bar-text span { color: #5f7a96; }
html[data-skin="white"] .vi-demo-bar .btn.primary {
  background: #1d7ad6;
  border-color: #1563b0;
  color: #fff;
  border-radius: 8px;
}