/* Meoy · 二级域名分发系统
   风格：ARCADE / 二次元（参考台风模拟器那种粉白圆角卡片 UI）
   - 粉白半透明卡片 + 大圆角 + 柔和彩色阴影（游戏化、轻快）
   - 蓝紫 / 樱粉糖果色系，配初音未来 / GUMI 壁纸作底层
   - 圆润字体、胶囊徽章、渐变按钮；去掉 CRT 扫描线与霓虹直角角标 */

/* ══════════════════════════════════════════════════════════
   shadcn/ui 设计令牌（rose 主题 · light）
   采用 HSL 通道值，便于 hsl(var(--x) / opacity) 的写法
   ══════════════════════════════════════════════════════════ */
:root {
  /* 基底 */
  --background: 217 100% 97%;   /* v2 #eef5ff 系 */
  --foreground: 224 39% 25%;   /* v2 --ink #27345a */
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;

  /* 主色：rose（保留原来的樱花粉调性，但用 shadcn 的色标） */
  --primary: 217 100% 65%;   /* v2 --blue #4f9bff */
  --primary-foreground: 0 0% 100%;

  /* 次级 / 弱化 */
  --secondary: 214 100% 96%;   /* v2 --blue-soft #eaf3ff */
  --secondary-foreground: 240 5.9% 10%;
  --muted: 214 100% 96%;
  --muted-foreground: 221 20% 63%;  /* v2 --muted #8b97b5 */
  --accent: 338 100% 97%;   /* v2 --pink-soft */
  --accent-foreground: 240 5.9% 10%;

  /* 语义色 */
  --destructive: 348 100% 71%;   /* v2 --danger #ff6b8a */
  --destructive-foreground: 0 0% 98%;
  --success: 155 55% 53%;   /* v2 --ok #4cc38a */
  --success-foreground: 0 0% 98%;
  --warning: 33 100% 64%;   /* v2 --warn #ffb148 */
  --warning-foreground: 48 96% 89%;
  --info: 217 100% 65%;
  --info-foreground: 0 0% 98%;

  /* 描边 / 输入 / 聚焦环 */
  --border: 217 56% 94%;   /* v2 --line #e6edf9 */
  --input: 217 56% 94%;
  --ring: 217 91% 60%;

  /* ══ 深色主题（雪岭 domin.xueling.top 那种深蓝云雾科技风）══
     浅色 = DnsNeko 蓝白网格；深色 = 雪岭深蓝云雾。
     顶栏有切换按钮（localStorage 记忆 + 首次跟随系统）。 */
  --bg-glow-1: rgba(150, 190, 255, 0);
  --bg-glow-2: rgba(255, 170, 210, 0);
  --bg-dim: 0;

  --paw-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%227%22%20cy%3D%229%22%20r%3D%222.2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227.2%22%20r%3D%222.2%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%229%22%20r%3D%222.2%22%2F%3E%3Cpath%20d%3D%22M12%2012.5c3.2%200%205.8%202%205.8%204.4%200%202-1.7%203.3-3.9%203.3h-3.8C8%2020.2%206.2%2018.9%206.2%2016.9c0-2.4%202.6-4.4%205.8-4.4Z%22%2F%3E%3C%2Fsvg%3E");

  --radius: 22px;   /* v2 圆角 */
  /* ── v2 Nyan 配色（原始十六进制保留，供渐变/图标直接使用）── */
  --blue: #4f9bff; --blue2: #7cb8ff; --blue-soft: #eaf3ff;
  --pink: #ff8fbf; --pink-soft: #fff0f7; --lav: #b6a6ff;
  --ink: #27345a; --ink-muted: #8b97b5; --ink-line: #e6edf9;
  --ok: #4cc38a; --warn: #ffb148; --danger: #ff6b8a;
  --glass: rgba(255, 255, 255, .82);
  --shadow: 0 10px 30px rgba(79, 155, 255, .12), 0 2px 6px rgba(79, 155, 255, .06);
  --radius-s: calc(var(--radius) - 2px);
  --x: 0px;

  /* ── 兼容层：把旧变量名映射到 shadcn 令牌，避免逐处改 CSS ── */
  --ink: hsl(var(--foreground));
  --ink-2: hsl(var(--foreground) / .88);   /* 跟随主题，避免深色下仍是深灰 */
  --ink-3: hsl(var(--muted-foreground));
  --text: hsl(var(--foreground));
  --text-2: hsl(240 5% 34%);
  --muted: hsl(var(--muted-foreground));

  --c1: hsl(var(--primary));
  --c2: hsl(346.8 77.2% 62%);
  --c3: hsl(346.8 87% 88%);
  --c1-dim: hsl(346.8 77.2% 42%);
  --sky: hsl(var(--info));

  --panel: hsl(var(--card));
  --panel-2: hsl(var(--muted));
  --panel-hi: hsl(var(--card));

  --line: hsl(var(--border));
  --line-hi: hsl(240 5% 76%);
  --line-warm: hsl(var(--primary) / .5);

  --ok: hsl(var(--success));
  --warn: hsl(var(--warning));
  --danger: hsl(var(--destructive));
  --lock: hsl(262 83% 58%);

  /* shadcn 的阴影：极低饱和、近乎不可见 */
  --shadow: 0 1px 2px 0 hsl(240 6% 10% / .05);
  --shadow-md: 0 4px 6px -1px hsl(240 6% 10% / .08), 0 2px 4px -2px hsl(240 6% 10% / .06);
  --shadow-lg: 0 10px 15px -3px hsl(240 6% 10% / .08), 0 4px 6px -4px hsl(240 6% 10% / .06);
  --glow: 0 0 0 3px hsl(var(--ring) / .18);


  /* 字体
     · Redaction 35：拉丁与数字（像素/位图感，保留）
     · 正文中文：统一用系统级简体中文字体，不再混日文圆体
       （此前 Zen Maru Gothic / M PLUS Rounded 1c 是日文字体，
        简体特有字会掉回 Noto Sans SC，同一行里圆体黑体混排 → 显得杂）
     · 标题中文：站酷快乐体（简体圆体，圆润活泼），缺字回落系统字体 */
  --cn-body: 'ZCOOL KuaiLe', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --cn-display: 'ZCOOL KuaiLe', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --sans: 'Redaction 35', var(--cn-body);
  --cn: var(--cn-body);
  --display: 'Redaction 35', var(--cn-display);
  /* 等宽栈也改为 Redaction 35 优先 —— 用户要求全局统一字体。
     域名/记录值改用 tabular-nums 保持数字对齐，不再使用系统等宽字体。 */
  --mono: 'Redaction 35', var(--cn-body);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background: hsl(var(--background));
}

/* ---------- 背景：角色壁纸 + 网格 ---------- */
#bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: var(--bg-img, url('/img/sakura1.jpg'));
  background-size: cover;
  background-position: center 28%;
  /* 关键：不要用 background-attachment: fixed —— 它无法提升为合成层，
     每次滚动/重绘都要重画整张壁纸。#bg 本身已是 position: fixed 的独立层，
     直接 cover 即可达到同样的视差静止效果。 */
  transform: translateZ(0);
  will-change: auto;
}
/* 糖果光晕（二次元） */
#bg::before {
  content: '';
  position: absolute;
  inset: -2px;
  background-image:
    radial-gradient(28% 22% at 18% 24%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(24% 20% at 82% 16%, rgba(255, 214, 236, .5), transparent 70%),
    radial-gradient(30% 26% at 70% 88%, rgba(206, 226, 255, .5), transparent 70%);
  z-index: 1;
}
/* 压暗 + 霓虹染色，保证前景可读 */
#bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(90% 70% at 12% 4%, rgba(150, 190, 255, .38), transparent 60%),
    radial-gradient(80% 80% at 92% 96%, rgba(255, 170, 210, .4), transparent 62%),
    hsl(var(--background) / .82);   /* 中性遮罩：壁纸淡入背景，文字保持清晰 */
}

/* 无扫描线：糖果风不需要 CRT 质感 */
body::after { display: none; }

/* ---------- 排版 ---------- */
h1, h2, h3 { font-weight: 700; letter-spacing: -.2px; margin: 0; }
h1 {
  font-size: 19px;
  font-family: var(--mono);
  color: var(--ink);
}
h1::before { content: '> '; color: var(--c1); font-weight: 400; }
h2 {
  font-size: 13.5px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--c1);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
h2::after {
  content: ''; flex: 1; height: 1px;
  background: var(--line-hi);
}
h3 { font-size: 12.5px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .7px; color: var(--text); }

.sub { color: var(--muted); font-size: 12px; }
.dim { color: var(--muted); font-size: 12px; }
.mono, code { font-family: var(--mono); font-variant-numeric: tabular-nums; }

a { color: var(--c1); text-decoration: none; }
a:hover { text-decoration: underline; text-shadow: var(--glow); }

/* ---------- 布局 ---------- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 20px 20px 60px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.spacer { flex: 1; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 720px) { .grid2 { grid-template-columns: 1fr; } }

/* ---------- 卡片：粉白圆角 + 柔和彩色阴影 ---------- */
.card {
  position: relative;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: var(--radius);
  padding: 17px 18px;
  margin-bottom: 13px;
  box-shadow: var(--shadow);
  /* 卡片数量多时 backdrop-filter 是主要卡顿源；背景已有 88% 不透明度，
     取消模糊视觉差异极小。需要毛玻璃时单独加 .glass 类。 */
}
.card.glass {
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}
/* 顶部一道糖果高光，取代原来的霓虹角标 */
.card::before {
  content: '';
  position: absolute;
  left: 16px; right: 16px; top: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--c1);
  opacity: .55;
  pointer-events: none;
}
.card::after { display: none; }
.card.flat {
  background: var(--panel-2);
  box-shadow: none;
  border-color: rgba(255, 255, 255, .65);
}

/* ---------- 表单 ---------- */
.field { margin-bottom: 12px; }
label, .field > label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--muted);
  margin-bottom: 5px;
}
input, textarea, select {
  width: 100%;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(15, 23, 42, .22);
  border-radius: var(--radius-s);
  color: var(--text);
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--sans);
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 62px; resize: vertical; font-family: var(--mono); font-size: 12px; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--line-hi);
  box-shadow: 0 0 0 3px rgba(15, 23, 42, .16);
}
input::placeholder, textarea::placeholder { color: #a79fbb; }
input[type="number"] { max-width: 160px; }
.hint { font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.55; }
.hint .mono { color: var(--c1-dim); }

.check { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.check input { width: auto; margin: 2px 0 0; accent-color: var(--c1); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  color: var(--c1-dim);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .3px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background .14s, color .14s, box-shadow .14s;
  white-space: nowrap;
}
.btn:hover { background: hsl(var(--secondary)); box-shadow: var(--glow); text-decoration: none; transform: translateY(-1px); }
.btn { transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.btn.primary {
  background: var(--c1);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: var(--float-2);
}
.btn.primary:hover { filter: brightness(1.07); color: #fff; box-shadow: var(--float-3); }
.btn.sm { padding: 5px 12px; font-size: 11.5px; border-radius: 999px; }
.btn.danger { border-color: rgba(242, 84, 91, .5); color: var(--danger); }
.btn.danger:hover { background: rgba(242, 84, 91, .12); box-shadow: 0 6px 16px rgba(242, 84, 91, .24); }
.btn.ok { border-color: rgba(34, 201, 138, .5); color: var(--ok); }
.btn.ok:hover { background: rgba(34, 201, 138, .12); }
.btn.ghost { border-color: rgba(15, 23, 42, .3); color: var(--text-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ---------- 徽章 ---------- */
.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 2px 7px;
  border-radius: var(--radius-s);
  border: 1px solid currentColor;
  line-height: 1.6;
  white-space: nowrap;
}
.badge.ok { color: #0f8f60; background: rgba(34, 201, 138, .16); }
.badge.warn { color: #a8620a; background: rgba(239, 148, 32, .16); }
.badge.danger { color: #c9323a; background: rgba(242, 84, 91, .14); }
.badge.inf { color: #4a3ecb; background: rgba(15, 23, 42, .14); }
.badge.lock { color: #6d3fd4; background: rgba(139, 92, 246, .14); }

/* ---------- 表格 ---------- */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-hi);
  white-space: nowrap;
}
td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(15, 23, 42, .1);
  font-size: 12.5px;
  vertical-align: middle;
}
tbody tr:hover td { background: rgba(15, 23, 42, .06); }
tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--c1); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.empty { text-align: center; color: var(--muted); padding: 26px 0; font-family: var(--mono); font-size: 12px; }
.fqdn { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink); font-weight: 600; }
tr.locked td { background: rgba(185, 140, 255, .1); }
tr.rejected td { background: rgba(255, 92, 114, .09); }

/* ---------- 提示条 ---------- */
.alert {
  border: 1px solid var(--line);
  border-left: 2px solid var(--c1);
  background: rgba(15, 23, 42, .07);
  border-radius: var(--radius-s);
  padding: 8px 11px;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.65;
}
.alert.warn { border-left-color: var(--warn); background: rgba(255, 209, 102, .08); border-color: rgba(255, 209, 102, .3); }
.alert.danger { border-left-color: var(--danger); background: rgba(255, 92, 114, .09); border-color: rgba(255, 92, 114, .32); }
.alert.info { border-left-color: var(--c3); background: rgba(139, 92, 255, .08); border-color: rgba(139, 92, 255, .28); }

/* ---------- 导航 ---------- */
.nav {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 20px 0;
  height: 52px;
}
.nav .logo { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.nav .logo img {
  filter: drop-shadow(0 3px 8px rgba(15, 23, 42, .3));
  border-radius: 8px;
}
.nav .logo-text { font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--ink); }
.nav .logo-text em {
  font-style: normal; font-size: 10.5px; color: var(--muted);
  margin-left: 6px; letter-spacing: .5px; text-transform: uppercase;
}
.nav .links { display: flex; gap: 2px; }
.navlink {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
}
.navlink:hover { color: var(--text); background: rgba(15, 23, 42, .07); border-color: var(--line); text-decoration: none; }
.navlink.active { color: var(--c1); border-color: var(--line-hi); background: rgba(15, 23, 42, .1); }

/* 壁纸切换：终端 tab 风 */
.bgswitch { display: inline-flex; gap: 0; }
.bgswitch button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .5px;
  padding: 3px 9px;
  cursor: pointer;
  text-transform: uppercase;
}
.bgswitch button + button { border-left: none; }
.bgswitch button.on { color: #04121a; background: var(--c1); border-color: var(--c1); font-weight: 700; }
.bgswitch button:hover:not(.on) { color: var(--c1); background: rgba(15, 23, 42, .08); }

/* ---------- 站点顶栏（登录页） ---------- */
.site-nav {
  background: rgba(6, 10, 16, .88);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.site-nav-in {
  max-width: 1120px; margin: 0 auto; height: 52px;
  display: flex; align-items: center; gap: 10px; padding: 0 20px;
}
.site-nav .brand { display: flex; align-items: center; gap: 9px; color: var(--text); }
.site-nav .brand:hover { text-decoration: none; }
.site-nav .brand img {
  width: 30px; height: 30px; object-fit: contain; border-radius: 3px;
  background: rgba(0, 0, 0, .5); border: 1px solid var(--line);
}
.site-nav .brand .brand-name { font-family: var(--mono); font-size: 15px; font-weight: 800; color: var(--ink); }
.site-links { display: flex; align-items: center; gap: 2px; }
.site-links a {
  color: var(--muted); font-family: var(--mono); font-size: 12px;
  padding: 5px 10px; border: 1px solid transparent; border-radius: var(--radius-s);
}
.site-links a:hover { color: var(--c1); background: rgba(15, 23, 42, .08); border-color: var(--line); text-decoration: none; }

/* ---------- 登录页 ---------- */
.auth-wrap {
  max-width: 1120px; margin: 0 auto; padding: 26px 20px 60px;
  display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 16px; align-items: start;
}
@media (max-width: 860px) { .auth-wrap { grid-template-columns: 1fr; } }

.auth-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.auth-card::before, .auth-card::after {
  content: ''; position: absolute; width: 9px; height: 9px; pointer-events: none;
}
.auth-card::before { top: -1px; left: -1px; border-top: 1px solid var(--c1); border-left: 1px solid var(--c1); }
.auth-card::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--c2); border-right: 1px solid var(--c2); }
.auth-title { font-size: 19px; font-family: var(--mono); margin: 14px 0 4px; color: var(--ink); }
.auth-title::after { content: '_'; color: var(--c1); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.auth-sub { color: var(--muted); font-size: 12px; margin: 0 0 16px; }
.btn.block { width: 100%; padding: 9px 14px; }

.auth-side { display: flex; flex-direction: column; gap: 10px; }
.side-mod {
  position: relative;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.side-mod h3 {
  font-size: 11.5px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .8px;
  margin: 0 0 8px; color: var(--c1);
}
.side-mod h3::before { content: '// '; color: var(--muted); }
.side-mod p, .side-mod li { font-size: 12.5px; color: var(--text-2); line-height: 1.75; margin: 0 0 6px; }
.side-mod ol { margin: 0 0 6px; padding-left: 20px; }
.side-mod ol li { padding-left: 2px; }
.side-mod .dim { color: var(--muted); font-size: 11.5px; margin: 6px 0 0; font-family: var(--mono); }
.side-mod.warn { border-color: rgba(255, 209, 102, .35); background: rgba(255, 209, 102, .06); }
.side-mod.warn h3 { color: var(--warn); }
.side-mod a { font-size: 12px; font-family: var(--mono); }

.svc { list-style: none; padding: 0; margin: 0; }
.svc li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 6px 0; border-bottom: 1px dashed rgba(255, 255, 255, .1);
}
.svc li:last-child { border-bottom: none; padding-bottom: 0; }
.svc b { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.svc span { font-size: 11.5px; color: var(--muted); text-align: right; font-family: var(--mono); }

/* ---------- 页签 ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.tab {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font-family: var(--mono); font-size: 12px;
  padding: 8px 13px; cursor: pointer; letter-spacing: .3px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--c1); border-bottom-color: var(--c1); }

/* ---------- Logo / 品牌 ---------- */
.brand-logo {
  width: 58px; height: 58px; object-fit: contain; border-radius: 3px;
  background: rgba(0, 0, 0, .5);
  border: 1px solid var(--line);
  box-shadow: 0 0 18px rgba(15, 23, 42, .22);
}
.brand-name { font-family: var(--mono); font-size: 19px; font-weight: 800; color: var(--ink); }
.brand-sub { font-size: 11.5px; color: var(--muted); font-family: var(--mono); }
.logo-preview {
  width: 72px; height: 72px; object-fit: contain; border-radius: 3px;
  background: rgba(0, 0, 0, .5);
  border: 1px solid var(--line);
}

/* ---------- 预设卡片 ---------- */
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.preset {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 8px 10px;
  cursor: pointer;
  background: rgba(2, 6, 11, .6);
  transition: border-color .14s, background .14s;
}
.preset:hover { border-color: var(--line-hi); background: rgba(15, 23, 42, .07); }
.preset.on { border-color: var(--c1); background: rgba(15, 23, 42, .12); box-shadow: inset 2px 0 0 var(--c1); }
.preset b { font-family: var(--mono); font-size: 12px; color: var(--ink); display: block; }
.preset span { font-size: 11px; color: var(--muted); font-family: var(--mono); }

/* ---------- 键值表 ---------- */
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; font-size: 12.5px; }
.kv .k { color: var(--muted); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
@media (max-width: 560px) { .kv { grid-template-columns: 1fr; } .kv .k { margin-top: 4px; } }

/* ---------- 模态 ---------- */
.modal {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(2, 5, 9, .82);
  align-items: center; justify-content: center; padding: 20px;
}
.modal.show { display: flex; }
.modal .box {
  background: var(--panel-hi);
  border: 1px solid var(--line-hi);
  border-radius: var(--radius);
  padding: 18px;
  max-width: 420px; width: 100%;
  max-height: 86vh; overflow-y: auto;
  box-shadow: 0 0 40px rgba(15, 23, 42, .18);
}

/* ---------- Toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 10000; display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.toast-item {
  background: var(--panel-hi);
  border: 1px solid var(--line-hi);
  border-left: 2px solid var(--c1);
  border-radius: var(--radius-s);
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .6);
}
.toast-item.err { border-left-color: var(--danger); border-color: rgba(255, 92, 114, .45); color: #ffd7dc; }

/* ---------- 其它 ---------- */
.hidden { display: none !important; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.stat {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 10px 12px;
  background: rgba(2, 6, 11, .55);
}
.stat b { display: block; font-family: var(--mono); font-size: 20px; color: var(--c1); line-height: 1.2; }
.stat span { font-family: var(--mono); font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }

/* 滚动条 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, .03); }
::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .28); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, .45); }
::selection { background: rgba(15, 23, 42, .3); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* ══════════════════════════════════════════════════════════
   站点骨架：紫蓝渐变顶栏 + 左侧功能导航（参考 DNSHE 控制台）
   ══════════════════════════════════════════════════════════ */

/* ---------- 顶栏：紫蓝渐变 ---------- */
.topbar {
  position: fixed;
  top: 0; left: 224px; right: 0;   /* left 必须让开侧栏宽度，否则会盖住侧栏品牌/logo */
  height: 64px;
  z-index: 300;
  background: #ffffff;   /* 顶栏：白色 + 底边细线，原蓝紫渐变已移除 */
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  /* 不能加 overflow: hidden —— 用户下拉菜单是 absolute 定位在顶栏下沿之外，
     加了会被裁掉，只露出一条。此前正是这个原因导致菜单/右侧被「截断」。 */
}
.topbar-in {
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ---------- 品牌区：Logo + 主标题 + 副标题 ---------- */
.top-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
  padding: 4px 8px 4px 4px;
  border-radius: 14px;
  transition: background .18s ease;
}
.top-brand:hover { background: rgba(242, 120, 159, .07); }
.top-brand img {
  width: 32px; height: 32px;
  flex: 0 0 32px;
  object-fit: cover;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(242, 120, 159, .22);
}
.brand-txt { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.brand-name {
  font-family: var(--cn);
  font-size: 15px; font-weight: 700;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-sub {
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: .3px;
}

/* ---------- 右侧：猫爪 + 用户胶囊 ---------- */
.top-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

/* 猫爪按钮 */
.theme-paw {
  position: relative;
  width: 34px; height: 34px;
  flex: 0 0 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(242, 120, 159, .1);
  color: var(--c1);
  cursor: pointer;
  transition: background .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.theme-paw svg { width: 19px; height: 19px; fill: currentColor; }
.theme-paw:hover { background: rgba(242, 120, 159, .18); transform: scale(1.1); }
.theme-paw.tapped { animation: pawTap .34s cubic-bezier(.34,1.56,.64,1); }
@keyframes pawTap {
  0% { transform: scale(1); } 45% { transform: scale(.82) rotate(-9deg); } 100% { transform: scale(1); }
}
/* 冒出的小爱心 */
.heart {
  position: absolute;
  left: 50%; top: 50%;
  font-size: 11px;
  font-style: normal;
  color: var(--c1);
  pointer-events: none;
  animation: heartUp .9s ease-out forwards;
}
@keyframes heartUp {
  0%   { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--hx)), calc(-50% + var(--hy))) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .heart, .theme-paw.tapped { animation: none; }
  .heart { display: none; }
}

/* 用户胶囊 */
.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 9px 0 4px;
  border-radius: 999px;
  background: rgba(242, 120, 159, .07);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
  user-select: none;
}
.user-chip:hover, .user-chip.on {
  background: #fff;
  border-color: rgba(242, 120, 159, .28);
  box-shadow: 0 2px 10px rgba(242, 120, 159, .16);
}
.avatar {
  width: 28px; height: 28px;
  flex: 0 0 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(140deg, #ff9ec0, #f2789f);
  color: #fff;
  font-family: var(--cn);
  font-size: 12.5px; font-weight: 700;
}
.u-meta { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.u-name {
  font-family: var(--cn);
  font-size: 12.5px; font-weight: 600;
  color: var(--ink);
  max-width: 150px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.u-role { font-size: 10px; color: var(--muted); letter-spacing: .3px; }
.chev { width: 15px; height: 15px; flex: 0 0 15px; fill: var(--muted); transition: transform .2s ease; }
.user-chip.on .chev { transform: rotate(180deg); }

/* ---------- 用户下拉菜单 ---------- */
.user-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  min-width: 206px;
  z-index: 400;
  background: #fff;
  border: 1px solid rgba(242, 120, 159, .18);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(61, 43, 61, .14);
  padding: 6px;
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s cubic-bezier(.22,.61,.36,1);
  transform-origin: 100% 0;
}
.user-menu.on { opacity: 1; transform: none; pointer-events: auto; }
.um-head {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px 11px;
  border-bottom: 1px solid rgba(242, 120, 159, .12);
  margin-bottom: 5px;
}
.um-name { font-family: var(--cn); font-size: 13px; font-weight: 700; color: var(--ink); }
.um-mail { font-size: 11px; color: var(--muted); word-break: break-all; }
.um-body { display: flex; flex-direction: column; }
.um-body a {
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--ink-2);
  font-size: 12.5px;
  font-family: var(--cn);
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.um-body a:hover { background: rgba(242, 120, 159, .1); color: var(--c1-dim); }
.um-foot { padding: 7px 6px 4px; border-top: 1px solid rgba(242, 120, 159, .12); margin-top: 5px; }
.um-foot .btn { width: 100%; justify-content: center; }

.topbar .btn { border-color: var(--line-hi); color: var(--ink-2); }
.topbar .btn:hover { background: rgba(15,23,42,.05); }
.topbar .btn.primary { background: var(--c1); color: #fff; border-color: var(--c1); }

/* ---------- 侧边导航 ---------- */
.sidebar {
  position: fixed;
  top: 62px; left: 0; bottom: 0;
  width: 208px;
  z-index: 250;
  /* 侧栏是常驻层，backdrop-filter 会在每次滚动/切页时重算模糊，开销持续存在。
     背景不透明度提到 .93，去掉模糊后视觉几乎一致。 */
  background: rgba(255, 253, 255, .93);
  border-right: 1px solid rgba(15, 23, 42, .14);
  overflow-y: auto;
  padding: 14px 10px;
}
.side-in { display: flex; flex-direction: column; gap: 16px; }
.side-group { display: flex; flex-direction: column; gap: 3px; }
.side-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  color: var(--ink-2);
  font-family: var(--cn);
  font-size: 13.5px;
  text-decoration: none;
  transition: background .18s cubic-bezier(.4,0,.2,1),
              color .18s cubic-bezier(.4,0,.2,1),
              transform .18s cubic-bezier(.4,0,.2,1);
}
.side-item:hover {
  background: hsl(var(--secondary));
  color: var(--ink);
  transform: translateX(3px);
}
.side-ico { width: 19px; height: 19px; flex: 0 0 19px; display: block; }
.side-ico svg { width: 100%; height: 100%; fill: currentColor; opacity: .75; transition: opacity .18s; }
.side-item:hover .side-ico svg { opacity: 1; }
.side-item.on {
  background: var(--c1);
  color: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .32);
}
.side-item.on .side-ico svg { opacity: 1; }
/* 选中项的左侧滑入指示条 */
.side-item.on::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 3px; height: 0;
  background: #fff; border-radius: 3px;
  transform: translateY(-50%);
  animation: barIn .28s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes barIn { to { height: 58%; } }

/* ---------- 主内容区 ---------- */
.main { margin-left: 208px; padding: 80px 22px 40px; }
.main-in { max-width: 1060px; margin: 0 auto; }
.side-toggle { display: none; }

/* ---------- 入场动画 ---------- */
.shell-ready .main-in > *:nth-child(1) { animation: riseIn .26s cubic-bezier(.22,.61,.36,1) backwards; }
.shell-ready .main-in > *:nth-child(2) { animation: riseIn .26s cubic-bezier(.22,.61,.36,1) .04s backwards; }
.shell-ready .main-in > *:nth-child(3) { animation: riseIn .26s cubic-bezier(.22,.61,.36,1) .08s backwards; }
/* 只动画前 3 个：更多元素同时动会让切换显得拖沓 */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- 响应式：侧栏变抽屉 ---------- */
@media (max-width: 860px) {
  .brand-sub { display: none; }
  .top-brand img { width: 28px; height: 28px; flex: 0 0 28px; }
  .topbar-in { padding: 0 12px; gap: 9px; }
  .u-meta { display: none; }        /* 小屏只留头像 */
  .user-chip { padding: 0 4px; }
  .user-chip .chev { display: none; }
  .theme-paw { display: none; }     /* 窄屏先让位给品牌与头像 */
  .sidebar {
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    width: 232px;
    box-shadow: 0 0 40px rgba(60, 40, 120, .2);
  }
  body.side-open .sidebar { transform: none; }
  .main { margin-left: 0; padding: 72px 14px 32px; }
  .side-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: 0 0 34px;
    background: rgba(15,23,42,.06);
    border: none; border-radius: 10px; cursor: pointer;
  }
  .side-toggle svg { width: 19px; height: 19px; fill: var(--ink); }
  body.side-open::after {
    content: ''; position: fixed; inset: 0; z-index: 240;
    background: rgba(30, 20, 60, .32);
    animation: fadeIn .22s ease;
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- 页面标题区 ---------- */
.page-head { margin-bottom: 16px; }
.page-title {
  font-family: var(--cn);
  font-size: 21px; font-weight: 700; color: var(--ink);
  margin: 0 0 5px;
}
.page-sub { font-size: 12.5px; color: var(--muted); margin: 0; }

/* ══════════════════════════════════════════════════════════
   域名详情：标签页 + 右侧快捷操作（参考 DNSHE 域名详情）
   ══════════════════════════════════════════════════════════ */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 224px;
  gap: 14px;
  align-items: start;
}
@media (max-width: 900px) {
  .detail-layout { grid-template-columns: minmax(0, 1fr); }
  .detail-side { order: -1; }
}

/* 标签页 */
.tabs {
  display: flex; gap: 4px;
  padding: 4px;
  background: var(--panel-2);
  border-radius: 14px;
  margin-bottom: 13px;
  border: 1px solid rgba(255, 255, 255, .7);
}
.tab {
  flex: 1;
  padding: 8px 12px;
  border: none; border-radius: 11px;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--cn);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .2s cubic-bezier(.4,0,.2,1),
              color .2s cubic-bezier(.4,0,.2,1),
              box-shadow .2s cubic-bezier(.4,0,.2,1);
}
.tab:hover { color: var(--ink); background: rgba(255, 255, 255, .55); }
.tab.on {
  background: var(--c1);
  color: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .3);
}

/* 面板切换 */
.tabpane { display: none; }
.tabpane.on { display: block; animation: paneIn .3s cubic-bezier(.22,.61,.36,1); }
@keyframes paneIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* 概览统计格 */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.stat {
  padding: 12px 13px;
  border-radius: 13px;
  background: rgba(15, 23, 42, .06);
  border: 1px solid rgba(15, 23, 42, .12);
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s;
}
.stat:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15, 23, 42, .16); }
.stat-k { font-size: 11px; color: var(--muted); margin-bottom: 4px; font-family: var(--cn); }
.stat-v { font-family: var(--cn); font-size: 15px; font-weight: 700; color: var(--ink); }
.stat-v.mono { font-family: var(--mono); }

/* 右侧快捷操作 */
.detail-side { position: sticky; top: 78px; }
.ops { display: flex; flex-direction: column; gap: 7px; }
.op-btn {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(15, 23, 42, .2);
  border-radius: 12px;
  background: rgba(255, 255, 255, .7);
  color: var(--ink);
  font-family: var(--cn);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background .18s cubic-bezier(.4,0,.2,1),
              transform .18s cubic-bezier(.4,0,.2,1),
              box-shadow .18s;
}
.op-btn span {
  width: 22px; height: 22px; flex: 0 0 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--c1);
  color: #fff; font-size: 12px;
}
.op-btn:hover {
  background: rgba(15, 23, 42, .1);
  transform: translateX(3px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .18);
}

/* ══════════════════════════════════════════════════════════
   樱花猫主题装饰：花瓣飘落 + 猫爪
   ══════════════════════════════════════════════════════════ */

/* ---------- 樱花飘落 ---------- */
#sakura {
  position: fixed;
  inset: 0;
  z-index: -1;              /* 在 #bg(-2) 之上、内容之下 */
  pointer-events: none;
  overflow: hidden;
}
.petal {
  position: absolute;
  top: -6vh;
  display: block;
  /* 花瓣形：三圆一角 */
  border-radius: 50% 50% 50% 0;
  background: #ffb7c5;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
  will-change: transform, opacity;
  /* 只动 transform / opacity —— 合成器属性，不触发重排重绘 */
  animation: petalFall linear infinite;
}
@keyframes petalFall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(.9); opacity: 0; }
  8%   { opacity: .9; }
  50%  { transform: translate3d(calc(var(--dx) * .5), 52vh, 0) rotate(180deg) scale(1); }
  92%  { opacity: .75; }
  100% { transform: translate3d(var(--dx), 108vh, 0) rotate(var(--rot)) scale(.85); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #sakura { display: none; }
}

/* ---------- 猫爪：顶栏吉祥物 ---------- */
.paw {
  display: inline-flex;
  width: 18px; height: 18px;
  flex: 0 0 18px;
  color: var(--c1);
  opacity: .9;
}
.paw svg { width: 100%; height: 100%; fill: currentColor; }

/* 站点名旁的猫爪轻轻摆动 */
.top-brand .paw { animation: pawWave 3.6s ease-in-out infinite; transform-origin: 50% 85%; }
@keyframes pawWave {
  0%, 82%, 100% { transform: rotate(0deg); }
  88%           { transform: rotate(-13deg); }
  94%           { transform: rotate(11deg); }
}
@media (prefers-reduced-motion: reduce) {
  .top-brand .paw { animation: none; }
}

/* ---------- 圆润活泼：卡片与按钮更 Q ---------- */
.card { border-radius: var(--radius); }
.btn { border-radius: 999px; }          /* 胶囊按钮 */
.btn.sm { border-radius: 999px; }
.badge { border-radius: 999px; }
input, select, textarea { border-radius: var(--radius-s); }

/* 卡片 hover：轻轻浮起 */
.card { transition: box-shadow .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1); }
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(242, 120, 159, .16), 0 14px 34px rgba(242, 120, 159, .12); }

/* 空状态：猫爪装饰 */
.empty::before {
  content: '';
  display: block;
  width: 26px; height: 26px;
  margin: 0 auto 8px;
  background: var(--c3);
  opacity: .55;
  -webkit-mask: var(--paw-mask) center/contain no-repeat;
  mask: var(--paw-mask) center/contain no-repeat;
}

/* ══════════════════════════════════════════════════════════
   字体分工：Redaction 35（拉丁/数字）+ 系统简中（正文）+ 站酷快乐体（标题）
   ══════════════════════════════════════════════════════════ */
h1, h2, h3,
.page-title, .brand-name, .stat-v,
.op-btn, .tab, .side-txt {
  font-family: var(--display);
}
/* 数字与域名：保持 Redaction 35 的位图质感 + 等宽数字 */
.stat-v.mono, .fqdn, .mono, code { font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════
   DnsNeko 风格控制台：统计卡 + 快捷入口
   ══════════════════════════════════════════════════════════ */

/* ---------- 欢迎条 ---------- */
.welcome {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  margin-bottom: 13px;
  border-radius: var(--radius);
  background: linear-gradient(100deg, rgba(90,169,230,.1), rgba(239,125,166,.1));
  border: 1px solid rgba(90, 169, 230, .18);
}
.welcome .w-av {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(140deg, #f7a8c4, #ef7da6);
  color: #fff; font-size: 16px; font-weight: 700;
  font-family: var(--display);
}
.welcome .w-txt { min-width: 0; }
.welcome .w-hi { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--ink); }
.welcome .w-sub { font-size: 11.5px; color: var(--muted); }

/* ---------- 统计卡片 ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  margin-bottom: 13px;
}
@media (max-width: 860px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 顶栏：任何宽度都不换行、不溢出（此前窄屏会被挤到第二行） */
/* 顶栏：不换行；品牌区可收缩并省略号截断，右侧工具区不收缩（保证用户胶囊完整） */
.topbar-in { flex-wrap: nowrap; min-width: 0; }
.top-brand { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.brand-txt { min-width: 0; }
.top-right { flex: 0 0 auto; margin-left: auto; }
/* 中屏：品牌区优先让位，而不是把右侧挤出可视区 */
@media (max-width: 1100px) { .brand-sub { display: none; } }
@media (max-width: 720px) {
  .brand-txt { display: none; }            /* 只留 Logo */
  .top-brand { padding: 4px; gap: 0; }
  .topbar-in { gap: 8px; }
}
@media (max-width: 400px) {
  .topbar-in { padding: 0 8px; gap: 6px; }
  .user-chip .avatar { width: 26px; height: 26px; flex: 0 0 26px; }
}

.stat-card {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(36,48,68,.1); }

/* v2：统计卡改成实心渐变（与模板 .stat s1~s4 一致），比白底彩边更有活力 */
.stat-card {
  color: #fff;
  border: none;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.stat-card .sc-num { color: #fff; font-size: 30px; font-weight: 900; line-height: 1.1; }
.stat-card .sc-lbl { color: rgba(255, 255, 255, .92); font-size: 12px; font-weight: 700; }
.stat-card .sc-ico { background: rgba(255, 255, 255, .22) !important; color: #fff !important; }
.stat-card::after {
  content: ""; position: absolute; right: -30px; bottom: -30px;
  width: 96px; height: 96px; border-radius: 50%;
  background: rgba(255, 255, 255, .2);
}
.stat-card.sc-pink  { background: linear-gradient(135deg, #ff8fbf, #ffb4d3); }
.stat-card.sc-blue  { background: linear-gradient(135deg, #5aa8ff, #7fc0ff); }
.stat-card.sc-green { background: linear-gradient(135deg, #54c895, #7fdcae); }
.stat-card.sc-amber { background: linear-gradient(135deg, #ffb86b, #ffd28f); }
.stat-card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 14px 30px rgba(79, 155, 255, .22); }
.stat-card .sc-ico {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  font-size: 17px;
}
.stat-card .sc-ico svg { width: 19px; height: 19px; fill: currentColor; }
.sc-pink  .sc-ico { background: rgba(239,125,166,.13); color: var(--c1); }
.sc-blue  .sc-ico { background: rgba(90,169,230,.14);  color: var(--sky); }
.sc-green .sc-ico { background: rgba(47,179,122,.13);  color: var(--ok); }
.sc-amber .sc-ico { background: rgba(229,161,58,.15);  color: var(--warn); }
.stat-card .sc-num {
  font-family: var(--display);
  font-size: 21px; font-weight: 700; line-height: 1.15; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-card .sc-lbl { font-size: 11.5px; color: var(--muted); }

/* ---------- 快捷入口 ---------- */
.quick-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 13px;
}
@media (max-width: 860px) { .quick-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.quick {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 13px 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-2);
  text-decoration: none;
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s, color .18s, border-color .18s;
}
.quick:hover {
  transform: translateY(-2px);
  color: var(--c1-dim);
  border-color: rgba(239,125,166,.35);
  box-shadow: 0 6px 16px rgba(239,125,166,.16);
}
.quick .q-ico {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px;
  background: rgba(239,125,166,.1);
  color: var(--c1);
}
.quick .q-ico svg { width: 18px; height: 18px; fill: currentColor; }
.quick .q-txt { font-family: var(--display); font-size: 11.5px; text-align: center; }

/* ---------- 表格：DnsNeko 式清晰行 ---------- */
.tablewrap table { border-collapse: separate; border-spacing: 0; }
.tablewrap thead th {
  background: rgba(240, 246, 253, .7);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  white-space: nowrap;
}
.tablewrap tbody td { border-bottom: 1px solid var(--line); }
.tablewrap tbody tr:last-child td { border-bottom: none; }


/* ══════════════════════════════════════════════════════════
   中文字体全局兜底
   --cn-body / --cn-display 由后台「站点设置 · 全局字体」控制，
   前端 api.js 通过 CSS 变量覆盖，全站（含管理后台）立即生效。
   这里再兜一层：确保任何组件里的中文都不会掉回浏览器默认字体。
   ══════════════════════════════════════════════════════════ */
body, .card, .card *:not(.mono):not(.fqdn):not(code):not(.badge),
table, thead th, tbody td,
.btn, input, select, textarea, label, .hint, .sub, .dim,
.side-item, .top-brand, .user-chip, .user-menu, .um-body a,
.stat-card, .quick, .welcome, .alert, .tab, .op-btn, .field {
  font-family: var(--sans);
}
/* 标题与强调数字走 display 栈（中文标题字体 + Redaction 35） */
h1, h2, h3, .stat-v, .sc-num, .brand-name, .w-hi, .q-txt, .page-title {
  font-family: var(--display);
}
/* 域名/记录值等：Redaction 35 优先，中文回落到正文字体 */
.mono, .fqdn, code { font-family: var(--mono); }


/* ══════════════════════════════════════════════════════════
   shadcn 组件观感（在原有类名上收敛，不动结构）
   ══════════════════════════════════════════════════════════ */

/* Card：白底 + 1px 细边 + 极低饱和阴影 */
.card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: hsl(var(--card-foreground));
}
.card::before { display: none; }        /* 去掉糖果高光条 */
.card:hover { box-shadow: var(--shadow-md); transform: none; }

/* Button：shadcn 默认变体 —— 深色实心主按钮 */
.btn {
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow: var(--shadow);
  font-weight: 500;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.btn:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); transform: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / .35); }

.btn.primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
}
.btn.primary:hover { background: hsl(var(--primary) / .9); color: hsl(var(--primary-foreground)); }
.btn.primary:focus-visible { box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / .4); }

.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
.btn.ghost:hover { background: hsl(var(--accent)); }

.btn.danger {
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  border-color: hsl(var(--destructive));
}
.btn.danger:hover { background: hsl(var(--destructive) / .9); }

/* Input / Select / Textarea */
input, select, textarea {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  color: hsl(var(--foreground));
  border-radius: calc(var(--radius) - 2px);
  box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: hsl(var(--muted-foreground)); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring) / .18);
}

/* Badge：shadcn 三种变体 */
.badge {
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid transparent;
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  font-weight: 500;
}
.badge.ok { background: hsl(var(--success) / .12); color: hsl(var(--success)); border-color: hsl(var(--success) / .25); }
.badge.warn { background: hsl(var(--warning) / .14); color: hsl(38 92% 40%); border-color: hsl(var(--warning) / .3); }
.badge.danger { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / .25); }
.badge.inf { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); border-color: hsl(var(--primary) / .25); }
.badge.lock { background: hsl(262 83% 58% / .1); color: hsl(262 83% 50%); border-color: hsl(262 83% 58% / .25); }

/* Table：细分隔线 + hover 淡灰 */
.tablewrap table { border: 1px solid hsl(var(--border)); border-radius: var(--radius); overflow: hidden; }
.tablewrap thead th {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border-bottom: 1px solid hsl(var(--border));
}
.tablewrap tbody td { border-bottom: 1px solid hsl(var(--border)); }
.tablewrap tbody tr:hover td { background: hsl(var(--muted) / .6); }

/* 侧栏 / 顶栏 */
.topbar { background: hsl(var(--background)); border-bottom: 1px solid hsl(var(--border)); box-shadow: none; }
.sidebar { background: hsl(var(--background)); border-right: 1px solid hsl(var(--border)); }
.side-item.on { background: hsl(var(--secondary)); color: hsl(var(--foreground)); font-weight: 500; }
.side-item:hover { background: hsl(var(--accent)); }

/* 统计卡与快捷入口 */
.stat-card, .quick {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.stat-card:hover, .quick:hover {
  border-color: hsl(var(--primary) / .4);
  box-shadow: var(--shadow-md);
  transform: none;
}
.welcome { background: hsl(var(--muted) / .6); border: 1px solid hsl(var(--border)); }

/* Alert */
.alert { border-radius: var(--radius); border: 1px solid hsl(var(--border)); }
.alert.info { background: hsl(var(--info) / .08); border-color: hsl(var(--info) / .25); color: hsl(199 89% 35%); }
.alert.danger { background: hsl(var(--destructive) / .08); border-color: hsl(var(--destructive) / .25); color: hsl(var(--destructive)); }

/* 标签页：shadcn tabs 下划线式 */
.tab {
  border-radius: calc(var(--radius) - 2px);
  color: hsl(var(--muted-foreground));
}
.tab.active { background: hsl(var(--background)); color: hsl(var(--foreground)); border-color: hsl(var(--border)); box-shadow: var(--shadow); }

/* 弹层 */
.modal-card, .user-menu {
  background: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  color: hsl(var(--popover-foreground));
}

/* ══════════════════════════════════════════════════════════
   个人资料（参考 DnsNeko 用户卡片）
   ══════════════════════════════════════════════════════════ */
.profile-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 980px) { .profile-grid { grid-template-columns: 1fr; } }

.profile-card { padding: 0; overflow: hidden; }
.pc-banner {
  position: relative;
  height: 104px;
  overflow: hidden;
  background: hsl(var(--muted));
}
.pc-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-banner-mask {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, hsl(var(--background) / .1), hsl(var(--background) / .82));
}
.pc-body { padding: 0 18px 18px; }

.pc-av-wrap { position: relative; margin-top: -38px; margin-bottom: 8px; width: fit-content; }
.pc-av {
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 3px solid hsl(var(--background));
  background: hsl(var(--card));
  object-fit: cover;
  box-shadow: var(--shadow-md);
  display: block;
}
.pc-av-btn {
  position: absolute;
  right: -2px; bottom: -2px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.pc-av-btn:hover { background: hsl(var(--accent)); }

.pc-name {
  font-family: var(--display);
  font-size: 17px; font-weight: 700;
  color: hsl(var(--foreground));
  word-break: break-all;
}
.pc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 9px; }
.pc-bio {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
  margin-bottom: 10px;
  white-space: pre-wrap;
  word-break: break-word;
}
.pc-meta { font-size: 12px; }

/* 安全设置行 */
.sec-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid hsl(var(--border));
}
.sec-row:last-child { border-bottom: none; }
.sec-t { font-family: var(--display); font-size: 13px; color: hsl(var(--foreground)); }
.sec-d { font-size: 11.5px; color: hsl(var(--muted-foreground)); margin-top: 2px; }

/* 头像选择弹窗 */
.av-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding: 2px;
}
.av-item {
  position: relative;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  aspect-ratio: 1;
  transition: border-color .15s, transform .15s;
}
.av-item img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: var(--shadow);
}
.av-item:hover { transform: scale(1.06); }
.av-item.on { border-color: hsl(var(--primary)); }
.av-item.on::after {
  content: '✓';
  position: absolute;
  right: -2px; bottom: -2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}

/* ══════════════════════════════════════════════════════════
   工单系统 / 域名转移
   ══════════════════════════════════════════════════════════ */

/* ---------- 四步进度条 ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 700px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.step {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--background));
  color: hsl(var(--muted-foreground));
  transition: background .18s, border-color .18s, color .18s;
}
.s-num {
  width: 22px; height: 22px; flex: 0 0 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-family: var(--display);
  font-size: 11.5px; font-weight: 700;
}
.s-txt { font-family: var(--display); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step.done { border-color: hsl(var(--primary) / .4); color: hsl(var(--foreground)); }
.step.done .s-num { background: hsl(var(--primary) / .15); color: hsl(var(--primary)); }
.step.on {
  background: hsl(var(--primary) / .08);
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}
.step.on .s-num { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

/* 须知列表 */
.notice-list ol { margin: 0; padding-left: 20px; }
.notice-list li { font-size: 12.5px; color: hsl(var(--text-2)); margin-bottom: 6px; line-height: 1.7; }

/* ---------- 工单回复 ---- */
.reply-box {
  max-height: 320px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 9px;
  padding: 2px;
}
.reply {
  padding: 10px 12px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--background));
}
.reply.admin { background: hsl(var(--primary) / .05); border-color: hsl(var(--primary) / .28); }
.r-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.r-who {
  font-family: var(--display);
  font-size: 12px; font-weight: 700;
  color: hsl(var(--foreground));
}
.reply.admin .r-who { color: hsl(var(--primary)); }
.r-time { font-size: 11px; color: hsl(var(--muted-foreground)); }
.r-body { font-size: 12.5px; color: hsl(var(--text-2)); line-height: 1.7; word-break: break-word; }

/* 警告条（转移不可逆） */
.alert.warn {
  background: hsl(var(--warning) / .1);
  border-color: hsl(var(--warning) / .3);
  color: hsl(38 92% 38%);
}



/* ══════════════════════════════════════════════════════════
   落地首页 home.html（DnsNeko 版式：网格底 + 蓝白 + 二次元插画）
   全部走站点变量，与登录页 / 控制台同一套主题
   ══════════════════════════════════════════════════════════ */
.page-home { background: hsl(var(--background)); }
.page-home #bg::after { background: hsl(var(--background) / .94); }
.page-home #bg::before { opacity: .5; }

.home-grid-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, hsl(var(--primary) / .07) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(var(--primary) / .07) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 78%);
}

/* ---------- 顶栏 ---------- */
.home-top {
  position: sticky; top: 0; z-index: 300; height: 58px;
  background: hsl(var(--background) / .9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid hsl(var(--border));
}
.home-top-in {
  max-width: 1120px; height: 100%; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 12px;
}
.home-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); min-width: 0; }
.home-brand img { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; flex: 0 0 30px; }
.home-brand span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.home-brand b { font-family: var(--cn); font-size: 14.5px; }
.home-brand i { font-style: normal; font-size: 10px; color: hsl(var(--muted-foreground)); }
.home-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.home-nav a {
  font-size: 12.5px; color: hsl(var(--muted-foreground)); text-decoration: none;
  padding: 7px 11px; border-radius: 8px; white-space: nowrap;
  transition: background .16s, color .16s;
}
.home-nav a:hover { background: hsl(var(--secondary)); color: var(--ink); }

.nk-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.nk-sec { padding: 46px 0; }
.nk-sec-alt { background: hsl(var(--secondary) / .55); border-top: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); }
.nk-h2 { font-family: var(--display); font-size: 21px; font-weight: 700; color: var(--ink); text-align: center; margin: 0 0 20px; }
.nk-sub { text-align: center; font-size: 12.5px; color: hsl(var(--muted-foreground)); margin: 0 0 18px; }

/* ---------- Hero ---------- */
.nk-hero { padding: 42px 0 24px; }
.nk-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: center; }
@media (max-width: 900px) { .nk-hero-in { grid-template-columns: 1fr; } .nk-hero-art { max-width: 280px; margin: 0 auto; } }
.nk-h1 { font-family: var(--display); font-size: clamp(28px, 5vw, 42px); font-weight: 700; color: var(--ink); line-height: 1.22; margin: 0 0 12px; }
.nk-lead { font-size: 13.5px; color: hsl(var(--muted-foreground)); line-height: 1.85; margin: 0 0 22px; }
.nk-cta { display: flex; gap: 8px; flex-wrap: wrap; }
.nk-hero-art img { width: 100%; height: auto; display: block; }

/* ---------- 后缀卡片 ---------- */
.nk-suffix { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.nk-suf { position: relative; padding: 16px; overflow: hidden; }
.nk-hot {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .5px;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  padding: 2px 8px; border-radius: 999px;
}
.nk-suf-name { font-family: var(--mono); font-size: 17px; font-weight: 700; color: hsl(var(--primary)); margin-bottom: 6px; }
.nk-suf-desc { font-size: 12.5px; color: hsl(var(--muted-foreground)); margin-bottom: 10px; }
.nk-suf-tip {
  display: inline-block; font-size: 11.5px; color: hsl(142 60% 38%);
  background: hsl(142 60% 38% / .1); border: 1px solid hsl(142 60% 38% / .25);
  padding: 3px 9px; border-radius: 999px;
}
.nk-sk { text-align: center; color: hsl(var(--muted-foreground)); font-size: 12.5px; padding: 20px; }

/* ---------- 查询区 ---------- */
.nk-sec-search { padding-bottom: 50px; }
.nk-search-box {
  max-width: 760px; margin: 0 auto; padding: 24px;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}
.nk-s-tag {
  display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.2px;
  color: hsl(var(--primary)); background: hsl(var(--primary) / .1);
  border: 1px solid hsl(var(--primary) / .22);
  padding: 3px 10px; border-radius: 999px; margin-bottom: 12px;
}
.nk-sbar {
  display: flex; align-items: center; gap: 0;
  background: hsl(var(--background)); border: 1px solid hsl(var(--border));
  border-radius: 10px; padding: 4px 4px 4px 0; overflow: hidden;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.nk-sbar:focus-within { border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / .14); }
.nk-sbar-pre { padding: 0 8px 0 12px; font-family: var(--mono); font-size: 13px; color: hsl(var(--muted-foreground)); white-space: nowrap; }
.nk-sbar input { flex: 1 1 auto; min-width: 0; border: none; background: transparent; box-shadow: none; padding: 10px 4px; font-family: var(--mono); font-size: 14px; color: var(--ink); }
.nk-sbar input:focus { box-shadow: none; border-color: transparent; }
.nk-sbar-suf { padding: 0 10px; font-family: var(--mono); font-size: 13px; color: hsl(var(--primary)); white-space: nowrap; }
.nk-sbar .btn { flex: 0 0 auto; border-radius: 7px; }
@media (max-width: 560px) { .nk-sbar { flex-wrap: wrap; } .nk-sbar .btn { width: 100%; margin-top: 4px; } }

.nk-results { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.nk-res { padding: 14px; text-align: center; }
.nk-res-name { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 6px; word-break: break-all; }
.nk-res-state { font-size: 12.5px; margin-bottom: 10px; }
.nk-res.ok .nk-res-state { color: hsl(142 60% 38%); }
.nk-res.no .nk-res-state { color: hsl(var(--muted-foreground)); }
.nk-res.err .nk-res-state { color: hsl(var(--destructive)); }
.nk-res-dim { font-size: 11.5px; color: hsl(var(--muted-foreground)); }
.nk-res-empty { text-align: center; color: hsl(var(--muted-foreground)); font-size: 12.5px; padding: 14px; grid-column: 1 / -1; }

/* ---------- 核心服务 ---------- */
.nk-svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .nk-svc { grid-template-columns: 1fr; } }
.nk-svc-card { padding: 18px; text-align: center; }
.nk-svc-ico {
  width: 42px; height: 42px; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center; border-radius: 12px;
  background: hsl(var(--primary) / .1);
}
.nk-svc-ico svg { width: 22px; height: 22px; fill: hsl(var(--primary)); }
.nk-svc-card h3 { font-family: var(--display); font-size: 14.5px; font-weight: 700; margin: 0 0 6px; color: var(--ink); }
.nk-svc-card p { font-size: 12.5px; color: hsl(var(--muted-foreground)); margin: 0; line-height: 1.75; }

/* ---------- 蓝色特性条 ---------- */
.nk-bar { background: hsl(var(--primary)); padding: 14px 0; }
.nk-bar-in {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  font-size: 12.5px; color: hsl(var(--primary-foreground)); font-family: var(--cn);
}
.nk-bar-in span { opacity: .95; }

/* ---------- DNS 解析 ---------- */
.nk-dns3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 900px) { .nk-dns3 { grid-template-columns: 1fr; } }
.nk-dns3 .card { padding: 16px; }
.nk-dns3 h3 { font-family: var(--display); font-size: 14px; font-weight: 700; margin: 0 0 5px; color: var(--ink); }
.nk-dns3 p { font-size: 12.5px; color: hsl(var(--muted-foreground)); margin: 0; line-height: 1.7; }
.nk-tags { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.nk-tag {
  font-size: 11.5px; color: hsl(var(--primary));
  background: hsl(var(--primary) / .08); border: 1px solid hsl(var(--primary) / .2);
  padding: 3px 11px; border-radius: 999px;
}
.nk-tag-hidden { display: none; }
.nk-tag-hidden.show { display: contents; }
.nk-more { text-align: center; margin-top: 14px; }

/* ---------- 工具区 ---------- */
.nk-tools { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .nk-tools { grid-template-columns: 1fr; } }
.nk-term {
  background: #10151f; border-radius: 12px; overflow: hidden;
  border: 1px solid hsl(var(--border));
  box-shadow: 0 8px 24px hsl(240 10% 3.9% / .18);
}
.nk-term-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 13px; background: #1a2130; border-bottom: 1px solid #26304a;
}
.nk-term-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3b465e; }
.nk-term-bar i:nth-child(1) { background: #e05561; }
.nk-term-bar i:nth-child(2) { background: #d5a13b; }
.nk-term-bar i:nth-child(3) { background: #4faf5a; }
.nk-term-bar span { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: #6b7794; }
.nk-term-body {
  margin: 0; padding: 15px 16px; overflow-x: auto;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.85; color: #c9d4e6;
  white-space: pre; tab-size: 2;
}
.c-dim { color: #5d6a85; }
.c-cmd { color: #6ec3ff; }
.c-str { color: #9ad88f; }
.c-key { color: #7fb0e0; }
.c-num { color: #e0a76a; }
.nk-tool-list { display: grid; gap: 12px; }
.nk-tool-list .card { padding: 15px; }
.nk-tool-list h3 { font-family: var(--display); font-size: 13.5px; font-weight: 700; margin: 0 0 5px; color: var(--ink); }
.nk-tool-list p { font-size: 12.5px; color: hsl(var(--muted-foreground)); margin: 0; line-height: 1.75; }
.nk-tool-list a { color: hsl(var(--primary)); text-decoration: none; }
.nk-tool-list a:hover { text-decoration: underline; }

/* ---------- 深色页脚 ---------- */
.nk-foot { background: #10151f; color: #c9d4e6; padding: 34px 0 22px; margin-top: 20px; }
.nk-foot-in { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 24px; }
@media (max-width: 780px) { .nk-foot-in { grid-template-columns: 1fr; gap: 18px; } }
.nk-fbrand { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.nk-fbrand img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; }
.nk-fbrand span { font-family: var(--display); font-size: 15px; color: #fff; }
.nk-fdesc { font-size: 12px; color: #7f8ca6; line-height: 1.85; margin: 0; }
.nk-fcol h4 { font-family: var(--display); font-size: 13px; color: #fff; margin: 0 0 10px; font-weight: 700; }
.nk-fcol a { display: block; font-size: 12px; color: #7f8ca6; text-decoration: none; padding: 3px 0; transition: color .16s; }
.nk-fcol a:hover { color: #9ecbff; }
.nk-fdim { font-size: 12px; color: #5d6a85; }
.nk-fbottom {
  margin-top: 26px; padding-top: 16px; border-top: 1px solid #26304a;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px; font-size: 11.5px; color: #6b7794;
}
.nk-fbottom b { color: #c9d4e6; }
.nk-fbottom a { color: #7f8ca6; text-decoration: none; }
.nk-fbottom a:hover { color: #9ecbff; }

/* ══════════════════════════════════════════════════════════
   全站底部署名 .site-foot（由 js/api.js 自动注入）
   ══════════════════════════════════════════════════════════ */
.site-foot { margin-top: 40px; padding: 16px 20px 22px; border-top: 1px solid hsl(var(--border)); background: transparent; }
.site-foot-in {
  max-width: 1060px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: hsl(var(--muted-foreground));
}
.sf-brand { font-family: var(--display); color: var(--ink-2); }
.sf-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: hsl(var(--muted-foreground)); text-decoration: none;
  padding: 4px 9px; border-radius: 999px; border: 1px solid hsl(var(--border));
  transition: color .16s, border-color .16s, background .16s;
}
.sf-link:hover { color: hsl(var(--primary)); border-color: hsl(var(--primary) / .4); background: hsl(var(--primary) / .07); }
.sf-link svg { width: 13px; height: 13px; fill: currentColor; }
body:has(.main) .site-foot { margin-left: 208px; }
@media (max-width: 860px) { body:has(.main) .site-foot { margin-left: 0; } }

/* ══════════════════════════════════════════════════════════
   全站微动效
   ══════════════════════════════════════════════════════════ */
:root {
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .2s;
}
.card, .stat-card, .quick, .s3, .f2, .pane, .modal-card, .nk-suf, .nk-svc-card, .nk-res, .nk-tag {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover, .stat-card:hover, .quick:hover, .s3:hover, .f2:hover,
.nk-suf:hover, .nk-svc-card:hover, .nk-res:hover {
  transform: translateY(-2px);
  border-color: hsl(var(--primary) / .38);
  box-shadow: 0 6px 18px hsl(var(--primary) / .10);
}
.card:active, .stat-card:active, .quick:active { transform: translateY(0) scale(.995); }
.btn { transition: transform .14s var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.btn:active { transform: scale(.96); }
.btn:not(:disabled):hover { box-shadow: 0 4px 14px hsl(var(--primary) / .22); }
.btn.primary:not(:disabled):hover { filter: brightness(1.06); }
input, select, textarea { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
tbody tr { animation: rowIn .28s var(--ease) backwards; transition: background .16s var(--ease); }
tbody tr:nth-child(1) { animation-delay: .00s; }
tbody tr:nth-child(2) { animation-delay: .03s; }
tbody tr:nth-child(3) { animation-delay: .06s; }
tbody tr:nth-child(4) { animation-delay: .09s; }
tbody tr:nth-child(5) { animation-delay: .12s; }
tbody tr:nth-child(6) { animation-delay: .15s; }
tbody tr:nth-child(n+7) { animation-delay: .18s; }
tbody tr:hover { background: hsl(var(--primary) / .05); }
@keyframes popIn { 0% { opacity: 0; transform: scale(.86); } 60% { opacity: 1; transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
.badge, .stat-card .sc-num { animation: popIn .32s var(--ease) backwards; }
@keyframes secIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.main-in > * { animation: secIn .3s var(--ease) backwards; }
.main-in > *:nth-child(1) { animation-delay: .02s; }
.main-in > *:nth-child(2) { animation-delay: .06s; }
.main-in > *:nth-child(3) { animation-delay: .10s; }
.main-in > *:nth-child(n+4) { animation-delay: .14s; }
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.modal.show .modal-card, .modal-card { animation: modalIn .24s var(--ease) backwards; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.modal { animation: overlayIn .18s var(--ease); }
@keyframes toastItemIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.toast-item { animation: toastItemIn .26s var(--ease); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 14px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.toast.show { animation: toastIn .26s var(--ease); }
.side-item { transition: background .16s var(--ease), color .16s var(--ease), transform .16s var(--ease); }
.side-item:hover { transform: translateX(2px); }
.side-item.active::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 0;
  border-radius: 0 3px 3px 0; background: hsl(var(--primary));
  transform: translateY(-50%); animation: barGrow .26s var(--ease) forwards;
}
@keyframes barGrow { from { height: 0; } to { height: 60%; } }
@keyframes tabIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pane:not(.hidden) { animation: tabIn .22s var(--ease); }
.topbar, .home-top { transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.topbar.is-scrolled, .home-top.is-scrolled { box-shadow: 0 2px 12px hsl(240 10% 3.9% / .10); }
@keyframes spinOnce { to { transform: rotate(360deg); } }
.spin-once { animation: spinOnce .5s var(--ease); }
@keyframes breathe { 0%,100% { opacity: .55; } 50% { opacity: .9; } }
.empty, .loading { animation: breathe 1.6s ease-in-out infinite; }
/* 落地页分区入场 */
.page-home .nk-hero-txt > * { animation: secIn .38s var(--ease) backwards; }
.page-home .nk-hero-txt > *:nth-child(1) { animation-delay: .02s; }
.page-home .nk-hero-txt > *:nth-child(2) { animation-delay: .06s; }
.page-home .nk-hero-txt > *:nth-child(3) { animation-delay: .10s; }
.page-home .nk-hero-art img { animation: secIn .5s var(--ease) backwards .08s; }
.page-home .nk-suffix > * { animation: secIn .36s var(--ease) backwards; }
.page-home .nk-suffix > *:nth-child(1) { animation-delay: .04s; }
.page-home .nk-suffix > *:nth-child(2) { animation-delay: .10s; }
.page-home .nk-suffix > *:nth-child(3) { animation-delay: .16s; }
.page-home .nk-suffix > *:nth-child(n+4) { animation-delay: .22s; }
.nk-tag { transition: transform .16s var(--ease), background .16s var(--ease); }
.nk-tag:hover { transform: translateY(-2px); background: hsl(var(--primary) / .16); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ══════════════════════════════════════════════════════════
   深色主题（参考 domin.xueling.top 的深蓝云雾科技风）
   只覆盖令牌，组件样式无需改动 —— 保证浅/深两套皮肤同一套结构
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --background: 222 47% 7%;
  --foreground: 210 40% 96%;
  --card: 222 44% 11%;
  --card-foreground: 210 40% 96%;
  --popover: 222 44% 12%;
  --popover-foreground: 210 40% 96%;

  /* 主色：深色下提亮，保证对比度（雪岭的亮蓝） */
  --primary: 199 92% 58%;
  --primary-foreground: 222 47% 8%;

  --secondary: 217 33% 17%;
  --secondary-foreground: 210 40% 96%;
  --muted: 217 33% 17%;
  --muted-foreground: 215 20% 65%;
  --accent: 217 33% 20%;
  --accent-foreground: 210 40% 96%;

  --destructive: 0 72% 58%;
  --destructive-foreground: 210 40% 96%;
  --success: 142 65% 45%;
  --success-foreground: 210 40% 96%;
  --warning: 38 92% 58%;
  --warning-foreground: 222 47% 8%;
  --info: 199 89% 58%;
  --info-foreground: 222 47% 8%;

  --border: 217 25% 22%;
  --input: 217 25% 24%;
  --ring: 199 92% 58%;

  /* 云雾光晕：只在深色下出现（雪岭的深蓝云雾） */
  --bg-glow-1: rgba(120, 170, 255, .30);
  --bg-glow-2: rgba(90, 130, 220, .26);
  --bg-dim: .58;
}

/* 壁纸遮罩：深色下压得更暗，避免浅色壁纸刺眼 */
[data-theme="dark"] #bg::after {
  background:
    radial-gradient(90% 70% at 12% 4%, var(--bg-glow-1), transparent 60%),
    radial-gradient(80% 80% at 92% 96%, var(--bg-glow-2), transparent 62%),
    hsl(222 47% 6% / .80);
}
[data-theme="dark"] #bg::before { opacity: .25; }

/* 云雾纹理：深色下的层叠柔光（雪岭那种云雾感，不用硬渐变块） */
[data-theme="dark"] body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 34% at 16% 18%, rgba(120, 170, 255, .16), transparent 70%),
    radial-gradient(40% 30% at 84% 26%, rgba(160, 200, 255, .12), transparent 70%),
    radial-gradient(52% 38% at 62% 92%, rgba(80, 130, 220, .16), transparent 72%);
}

/* 深色下的网格线换成冷蓝 */
[data-theme="dark"] .home-grid-bg {
  background-image:
    linear-gradient(to right, rgba(130, 175, 235, .09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(130, 175, 235, .09) 1px, transparent 1px);
}

/* 深色下卡片轻微发光（科技感），以及终端/页脚保持深色 */
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .modal-card {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 8px 22px rgba(0, 0, 0, .28);
}
[data-theme="dark"] table thead th { background: hsl(217 33% 15%); }

/* 落地页深色下的局部调整 */
[data-theme="dark"] .page-home .home-top { background: hsl(222 47% 9% / .88); }
[data-theme="dark"] .page-home .nk-sec-alt { background: hsl(222 44% 9% / .6); }
[data-theme="dark"] .nk-bar { background: linear-gradient(90deg, hsl(199 92% 48%), hsl(215 90% 58%)); }

/* ── 主题切换按钮（雪岭顶栏同款：一个图标按钮）── */
.theme-btn {
  width: 32px; height: 32px; flex: 0 0 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; cursor: pointer;
  background: hsl(var(--secondary));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  transition: color .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.theme-btn:hover { color: hsl(var(--primary)); border-color: hsl(var(--primary) / .4); transform: translateY(-1px); }
.theme-btn:active { transform: scale(.94); }
.theme-btn svg { width: 16px; height: 16px; fill: currentColor; }
/* 默认显示「月亮」（点它进深色）；深色下显示「太阳」 */
.theme-btn .i-moon { display: inline-block; }
.theme-btn .i-sun { display: none; }
[data-theme="dark"] .theme-btn .i-moon { display: none; }
[data-theme="dark"] .theme-btn .i-sun { display: inline-block; }

/* 平滑过渡：切换主题时不闪（只过渡颜色，不动布局） */
html.theme-anim,
html.theme-anim body,
html.theme-anim .card,
html.theme-anim .topbar,
html.theme-anim .home-top,
html.theme-anim .nk-foot,
html.theme-anim .main,
html.theme-anim .sidebar {
  transition: background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}

/* ══════════════════════════════════════════════════════════
   天空蓝云层背景（public/js/cloud-shader.js）
   Aceternity 的 cloud-shader 是 React 组件，本项目是原生 HTML/JS，
   因此用同样的 FBM 体积云思路手写了一份 WebGL 版本。
   ══════════════════════════════════════════════════════════ */
.cloud-bg {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #4aa3e8 0%, #79c0f0 45%, #bfe3fb 100%);
}
/* 关键：canvas 必须留在 z-index:0，内容提到 z-index:1。
   canvas 是 position:absolute 且由 JS appendChild 到最后，
   同为 auto 时会盖住普通流内容 —— Hero 文字/插画会被云层吞掉。 */
.cloud-bg { isolation: isolate; }
.cloud-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.cloud-bg > *:not(canvas) { position: relative; z-index: 1; }
/* 无 WebGL 时的降级：静态天空渐变 + 柔和光斑 */
.cloud-bg.cloud-fallback {
  background:
    radial-gradient(60% 40% at 22% 22%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(50% 34% at 76% 30%, rgba(255, 255, 255, .42), transparent 72%),
    radial-gradient(70% 44% at 58% 82%, rgba(255, 255, 255, .38), transparent 74%),
    linear-gradient(180deg, #4aa3e8 0%, #79c0f0 45%, #bfe3fb 100%);
}
[data-theme="dark"] .cloud-bg {
  background: linear-gradient(180deg, #0b2545 0%, #16406b 55%, #1e4f7a 100%);
}
[data-theme="dark"] .cloud-bg.cloud-fallback {
  background:
    radial-gradient(60% 40% at 22% 22%, rgba(159, 192, 230, .18), transparent 70%),
    radial-gradient(70% 44% at 58% 82%, rgba(159, 192, 230, .14), transparent 74%),
    linear-gradient(180deg, #0b2545 0%, #16406b 55%, #1e4f7a 100%);
}

/* ---------- 落地页：天空蓝 Hero ---------- */
.nk-hero.cloud-bg { border-bottom: 1px solid hsl(var(--border)); }
.page-home.has-cloud #bg { opacity: 0; }         /* 有云层时隐藏壁纸，避免叠色 */
.page-home.has-cloud .home-grid-bg { opacity: .5; }
/* 云层上的文字加强可读性 */
.page-home.has-cloud .nk-h1,
.page-home.has-cloud .nk-lead { text-shadow: 0 1px 10px rgba(12, 48, 90, .35); }
/* 云层底色是深蓝，次级文字用中灰会看不清，提亮 */
[data-theme="dark"] .page-home.has-cloud .nk-lead { color: hsl(210 30% 82%); }
[data-theme="dark"] .page-home.has-cloud .nk-h1 { color: #fff; }
[data-theme="dark"] .page-home.has-cloud .nk-h1,
[data-theme="dark"] .page-home.has-cloud .nk-lead { text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
/* 插画浮在云层之上（现为透明 PNG，不再需要白底柔光托底） */
.page-home.has-cloud .nk-hero-art { position: relative; }
.page-home.has-cloud .nk-hero-art img,
.nk-hero-art img {
  filter: drop-shadow(0 8px 22px rgba(10, 40, 80, .22));
  animation: floatY 6s ease-in-out infinite;
}
[data-theme="dark"] .nk-hero-art img { box-shadow: var(--float-2), inset 0 0 0 1px hsl(0 0% 100% / .06); }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .nk-hero-art img { animation: none; }
}

/* ── 深色下侧栏可读性 ── */
[data-theme="dark"] .side-item { color: hsl(210 32% 88%); }
[data-theme="dark"] .side-item:hover { color: #fff; background: hsl(217 33% 22%); }
[data-theme="dark"] .side-item.on { background: hsl(var(--primary) / .18); color: hsl(var(--primary)); }
[data-theme="dark"] .side-item.active { color: #fff; }

/* ══════════════════════════════════════════════════════════
   浮动式界面（Floating UI）
   要求：界面和按钮都要「浮起来」——
   1) 卡片脱离背景：白底 + 双层柔和阴影 + 高光边
   2) 按钮有体积：渐变面 + 内高光 + 投影，hover 抬升，按下沉降
   3) 顶栏/侧栏半透明毛玻璃，内容在其上「漂浮」
   4) 只动 transform / box-shadow（合成器属性），不影响滚动性能
   ══════════════════════════════════════════════════════════ */
:root {
  /* 浮动阴影梯度：0=贴地，1=轻浮，2=明显浮起，3=悬停 */
  --float-0: 0 1px 2px hsl(220 20% 20% / .06);
  --float-1: 0 2px 6px hsl(220 20% 20% / .08), 0 6px 18px hsl(220 20% 20% / .06);
  --float-2: 0 4px 12px hsl(220 20% 20% / .10), 0 12px 32px hsl(220 20% 20% / .09);
  --float-3: 0 8px 20px hsl(220 20% 20% / .13), 0 22px 52px hsl(220 20% 20% / .12);
  /* 顶部高光边：让卡片看起来「有厚度」 */
  --bevel: inset 0 1px 0 hsl(0 0% 100% / .9), inset 0 0 0 1px hsl(220 15% 60% / .07);
}

/* ---------- 卡片：脱离背景浮起 ---------- */
.card,
.stat-card,
.quick,
.welcome,
.pane,
.modal-card,
.nk-suf,
.nk-svc-card,
.nk-res,
.nk-tool-list .card,
.nk-dns3 .card,
.nk-search-box {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / .8);
  border-radius: var(--radius);
  box-shadow: var(--float-1), var(--bevel);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card:hover,
.stat-card:hover,
.quick:hover,
.nk-suf:hover,
.nk-svc-card:hover,
.nk-res:hover,
.nk-tool-list .card:hover,
.nk-dns3 .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--float-3), var(--bevel);
  border-color: hsl(var(--primary) / .34);
}

/* ---------- 按钮：有体积的浮动键 ---------- */
.btn {
  position: relative;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  box-shadow: var(--float-0), inset 0 1px 0 hsl(0 0% 100% / .8);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease),
              filter .16s var(--ease), border-color .16s var(--ease);
}
.btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: var(--float-2), inset 0 1px 0 hsl(0 0% 100% / .9);
  border-color: hsl(var(--primary) / .38);
}
.btn:not(:disabled):active {
  transform: translateY(0) scale(.97);
  box-shadow: var(--float-0), inset 0 2px 5px hsl(220 20% 20% / .10);
}
/* 主按钮：渐变面 + 彩色投影（体积感更强） */
.btn.primary {
  background: linear-gradient(180deg,
    hsl(var(--primary) / .96) 0%,
    hsl(var(--primary)) 55%,
    hsl(var(--primary) / .92) 100%);
  border-color: hsl(var(--primary) / .9);
  box-shadow:
    0 1px 2px hsl(220 20% 20% / .10),
    0 4px 12px hsl(var(--primary) / .32),
    inset 0 1px 0 hsl(0 0% 100% / .28);
}
.btn.primary:not(:disabled):hover {
  filter: brightness(1.06) saturate(1.05);
  box-shadow:
    0 2px 4px hsl(220 20% 20% / .12),
    0 10px 26px hsl(var(--primary) / .42),
    inset 0 1px 0 hsl(0 0% 100% / .32);
}
.btn.primary:not(:disabled):active {
  box-shadow:
    0 1px 2px hsl(220 20% 20% / .14),
    inset 0 2px 6px hsl(220 30% 20% / .22);
}

/* ---------- 输入框：轻微内凹，衬托按钮的浮起 ---------- */
input, select, textarea {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  box-shadow: inset 0 1px 3px hsl(220 20% 20% / .05);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
input:focus, select:focus, textarea:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / .15), inset 0 1px 2px hsl(220 20% 20% / .04);
}

/* ---------- 顶栏 / 侧栏：毛玻璃托盘 ---------- */
.topbar {
  background: hsl(var(--background) / .82) !important;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid hsl(var(--border) / .7);
  box-shadow: var(--float-1);
}
.home-top {
  background: hsl(var(--background) / .82);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--float-1);
}
.sidebar {
  background: hsl(var(--background) / .78) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-right: 1px solid hsl(var(--border) / .7);
  box-shadow: var(--float-0);
}
/* 导航项选中时像一块浮起的牌子 */
.side-item.on {
  background: hsl(var(--card));
  box-shadow: var(--float-1), var(--bevel);
}
.side-item:hover { box-shadow: var(--float-1); }

/* ---------- 用户胶囊 / 下拉菜单 ---------- */
.user-chip { box-shadow: var(--float-0); }
.user-menu {
  box-shadow: var(--float-3);
  border: 1px solid hsl(var(--border) / .8);
}
.theme-btn, .theme-paw { box-shadow: var(--float-0); }
.theme-btn:hover, .theme-paw:hover { transform: translateY(-1px); box-shadow: var(--float-1); }

/* ---------- 徽章 / 标签：小体积浮起 ---------- */
.badge, .nk-tag, .nk-hot, .nk-suf-tip, .nk-s-tag {
  box-shadow: 0 1px 3px hsl(220 20% 20% / .08);
}

/* ---------- 表格容器：整块浮起 ---------- */
.tablewrap {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / .8);
  border-radius: var(--radius);
  box-shadow: var(--float-1), var(--bevel);
  overflow: hidden;
}

/* ---------- Toast：明显浮在页面之上 ---------- */
.toast-item { box-shadow: var(--float-3); }
.toast { box-shadow: var(--float-2); }

/* ---------- 弹窗 ---------- */
.modal-card { box-shadow: var(--float-3), var(--bevel); }

/* ---------- 深色下：投影转成发光，避免死黑 ---------- */
[data-theme="dark"] {
  --float-0: 0 1px 2px hsl(220 40% 4% / .40);
  --float-1: 0 2px 6px hsl(220 40% 4% / .45), 0 8px 22px hsl(220 40% 4% / .40);
  --float-2: 0 4px 14px hsl(220 40% 4% / .50), 0 14px 36px hsl(220 40% 4% / .45);
  --float-3: 0 8px 22px hsl(220 40% 4% / .55), 0 26px 58px hsl(220 40% 4% / .50);
  --bevel: inset 0 1px 0 hsl(0 0% 100% / .07), inset 0 0 0 1px hsl(0 0% 100% / .04);
}
[data-theme="dark"] .btn.primary {
  box-shadow:
    0 1px 2px hsl(220 40% 4% / .40),
    0 4px 14px hsl(var(--primary) / .38),
    inset 0 1px 0 hsl(0 0% 100% / .22);
}

/* ---------- 插画：白底，浮在云层之上 ---------- */
/* 插画：完整原图（不抠图），做圆角卡片浮在云层之上 */
.page-home.has-cloud .nk-hero-art img,
.nk-hero-art img {
  border-radius: 16px;
  box-shadow: var(--float-2), var(--bevel);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.nk-hero-art img:hover { transform: translateY(-4px); box-shadow: var(--float-3), var(--bevel); }

@media (prefers-reduced-motion: reduce) {
  .card, .btn, .stat-card, .quick, .nk-suf, .nk-svc-card, .nk-res,
  .nk-tool-list .card, .nk-dns3 .card, .nk-search-box {
    transition-duration: .001ms !important;
  }
  .card:hover, .btn:not(:disabled):hover, .stat-card:hover, .quick:hover,
  .nk-suf:hover, .nk-svc-card:hover, .nk-res:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════
   深色主题补丁：把仍写死白色的组件改成深色
   （这些是兼容层遗留的硬编码值，不跟随令牌，深色下会露白导致文字看不清）
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] .sidebar {
  background: hsl(222 47% 9% / .96);
  border-right-color: hsl(var(--border));
}
[data-theme="dark"] .topbar { background: hsl(222 47% 9% / .92); }
[data-theme="dark"] .home-top { background: hsl(222 47% 9% / .88); }
[data-theme="dark"] .user-menu { background: hsl(var(--popover)); border-color: hsl(var(--border)); }
[data-theme="dark"] .user-chip:hover,
[data-theme="dark"] .user-chip.on { background: hsl(var(--secondary)); }
[data-theme="dark"] .card { border-color: rgba(255, 255, 255, .06); }
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select { background: hsl(222 44% 13%); }
[data-theme="dark"] .tab:hover,
[data-theme="dark"] .op-btn { background: hsl(var(--secondary)); }
[data-theme="dark"] ::-webkit-scrollbar-track { background: hsl(222 44% 10%); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: hsl(217 25% 26%); }
[data-theme="dark"] .svc li { border-bottom-color: hsl(var(--border)); }
[data-theme="dark"] .tablewrap,
[data-theme="dark"] .card.flat { border-color: hsl(var(--border)); }
/* 硬编码的次级文字色：深色下提亮，否则中灰压在深底上几乎不可读 */
[data-theme="dark"] { --text-2: hsl(210 25% 78%); --line-hi: hsl(217 25% 26%); }

/* ══════════════════════════════════════════════════════════
   浮动布局：界面元素与按钮"浮"起来
   用多层柔和阴影营造高度差，hover 抬升、按下回落
   ══════════════════════════════════════════════════════════ */
:root {
  /* 三级高度：静止 / 悬停 / 按下 */
  --elev-0: 0 1px 2px rgba(16, 24, 40, .05),
            0 2px 6px rgba(16, 24, 40, .04);
  --elev-1: 0 2px 4px rgba(16, 24, 40, .06),
            0 8px 18px rgba(16, 24, 40, .07),
            0 18px 36px rgba(16, 24, 40, .05);
  --elev-2: 0 4px 8px rgba(16, 24, 40, .08),
            0 14px 28px rgba(16, 24, 40, .10),
            0 28px 56px rgba(16, 24, 40, .07);
}
[data-theme="dark"] {
  --elev-0: 0 1px 2px rgba(0, 0, 0, .35),
            0 2px 8px rgba(0, 0, 0, .28);
  --elev-1: 0 2px 6px rgba(0, 0, 0, .40),
            0 10px 22px rgba(0, 0, 0, .34),
            0 20px 40px rgba(0, 0, 0, .26);
  --elev-2: 0 6px 12px rgba(0, 0, 0, .46),
            0 16px 32px rgba(0, 0, 0, .38),
            0 32px 64px rgba(0, 0, 0, .30);
}

/* ---------- 卡片浮起 ---------- */
.card,
.stat-card,
.quick,
.modal-card,
.pane,
.tablewrap,
.nk-suf,
.nk-svc-card,
.nk-res,
.nk-tool-list .card,
.nk-dns3 .card {
  box-shadow: var(--elev-0);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
  will-change: transform;
}
.card:hover,
.stat-card:hover,
.quick:hover,
.nk-suf:hover,
.nk-svc-card:hover,
.nk-res:hover,
.nk-dns3 .card:hover,
.nk-tool-list .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--elev-2);
  border-color: hsl(var(--primary) / .40);
}
.card:active, .stat-card:active, .quick:active { transform: translateY(-1px); box-shadow: var(--elev-1); }

/* ---------- 按钮浮起 ---------- */
.btn {
  box-shadow: var(--elev-0);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  will-change: transform;
}
.btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-1);
}
.btn:not(:disabled):active {
  transform: translateY(0) scale(.97);
  box-shadow: var(--elev-0);
}
.btn.primary:not(:disabled):hover {
  box-shadow: 0 2px 6px hsl(var(--primary) / .30),
              0 10px 22px hsl(var(--primary) / .22);
}

/* ---------- 输入框：内凹但整体浮在页面上 ---------- */
input, textarea, select {
  box-shadow: var(--elev-0);
  transition: box-shadow .18s var(--ease), border-color .18s var(--ease);
}
input:focus, textarea:focus, select:focus {
  box-shadow: var(--elev-1), 0 0 0 3px hsl(var(--primary) / .16);
}

/* ---------- 顶栏 / 侧栏 / 下拉：浮在内容之上 ---------- */
.topbar, .home-top { box-shadow: var(--elev-0); }
.sidebar { box-shadow: var(--elev-1); }
.user-menu { box-shadow: var(--elev-2); }
.modal-card { box-shadow: var(--elev-2); }
.toast-item { box-shadow: var(--elev-1); }

/* ---------- 侧栏项：选中时抬起 ---------- */
.side-item {
  transition: background .18s var(--ease), color .18s var(--ease),
              transform .18s var(--ease), box-shadow .18s var(--ease);
}
.side-item:hover {
  transform: translateX(3px);
  background: hsl(var(--secondary));
  box-shadow: var(--elev-0);
}
.side-item.active {
  background: hsl(var(--primary) / .10);
  color: hsl(var(--primary));
  font-weight: 600;
  box-shadow: var(--elev-0);
}

/* ---------- 统计卡数字：轻微浮起 ---------- */
.stat-card .sc-num { text-shadow: 0 2px 8px hsl(var(--primary) / .18); }

/* ---------- 徽章 ---------- */
.badge { box-shadow: var(--elev-0); }

@media (prefers-reduced-motion: reduce) {
  .card:hover, .stat-card:hover, .quick:hover, .btn:not(:disabled):hover,
  .side-item:hover, .nk-suf:hover, .nk-svc-card:hover, .nk-res:hover {
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   骨架重做（参照后台面板模板）
   覆盖范围：侧栏 / 顶栏 / 卡片 / 按钮 / 表格 / 表单 / 标签页
   新增组件：分组标题、面包屑、公告条、提示条、开关、筛选胶囊、
            分段器、步骤条、空状态、页脚
   深色主题在末尾统一适配。
   ══════════════════════════════════════════════════════════════ */

/* ---------- 布局骨架 ---------- */
body { background: hsl(var(--background)); }
.sidebar {
  width: 204px;
  background: hsl(var(--card));
  border-right: 1px solid hsl(var(--border));
  flex-shrink: 0;
  position: fixed; top: 0; left: 0; bottom: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 0 0 20px;
  z-index: 250;
  box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.side-in { display: flex; flex-direction: column; gap: 0; padding: 0; }

/* 品牌头（模板 .brand） */
.side-brand {
  height: 54px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px;
  border-bottom: 1px solid hsl(var(--border));
  font-weight: 700; font-size: 17px;
  flex-shrink: 0;
}
.side-brand img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; flex: 0 0 30px; }
.side-brand b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-brand .sb-sub { font-size: 11px; font-weight: 400; color: hsl(var(--muted-foreground)); }

/* 分组标题（模板 .group） */
.side-group { display: flex; flex-direction: column; }
.side-gtitle {
  padding: 16px 16px 4px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
  font-weight: 600;
  letter-spacing: .3px;
}

/* 导航项（模板 .nav）：线性图标 + 文字，激活态实心主色 */
.side-item {
  display: flex; align-items: center; gap: 12px;
  width: calc(100% - 16px);
  margin: 4px 8px;
  padding: 11px 14px;
  border-radius: 10px;
  text-align: left;
  position: relative;
  color: hsl(var(--foreground));
  text-decoration: none;
  font-size: 14.5px;
  background: transparent;
  border: none;
  transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.side-item:hover { background: hsl(var(--primary) / .10); transform: none; box-shadow: none; }
.side-item.active,
.side-item.on {
  background: hsl(var(--primary));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 12px hsl(217 91% 60% / .30);
}
.side-item.active:hover, .side-item.on:hover { background: hsl(var(--primary)); transform: none; }
.side-item .side-ico { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; }
.side-item .side-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.side-item .side-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 未读小红点 */
.side-item .dot {
  position: absolute; right: 14px; top: 50%;
  width: 7px; height: 7px; border-radius: 50%;
  background: #ef4444; transform: translateY(-50%);
}
/* 激活项左侧指示条不再需要（模板用实心块表示激活） */
.side-item.active::before { display: none; }

/* ---------- 顶栏 ---------- */
.topbar {
  height: 54px;
  background: hsl(var(--card));
  border-bottom: 1px solid hsl(var(--border));
  position: sticky; top: 0; z-index: 300;
  box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.topbar-in {
  height: 100%;
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
}
.topbar.is-scrolled { box-shadow: 0 2px 10px hsl(220 20% 20% / .06); }

/* 面包屑 */
.crumb { font-weight: 600; flex: 1; min-width: 0; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb span { color: hsl(var(--muted-foreground)); margin: 0 8px; font-weight: 400; }
.crumb b { font-weight: 600; }

/* 搜索框（带快捷键提示） */
.top-search {
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  padding: 6px 12px;
  color: hsl(var(--muted-foreground));
  display: flex; gap: 10px; align-items: center;
  font-size: 14px; white-space: nowrap;
  background: hsl(var(--background));
  cursor: pointer;
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.top-search:hover { border-color: hsl(var(--primary) / .5); color: hsl(var(--primary)); }
.top-search kbd {
  border: 1px solid hsl(var(--border));
  border-radius: 5px; padding: 0 6px; font-size: 12px;
  font-family: var(--mono);
}

/* 铃铛 */
.bell { position: relative; width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; }
.bell svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; color: hsl(var(--muted-foreground)); }
.bell b {
  position: absolute; top: -2px; right: -4px;
  background: #ef4444; color: #fff;
  font-size: 11px; border-radius: 9px; padding: 0 5px; font-weight: 600;
  min-width: 18px; text-align: center;
}

/* 顶栏头像 */
.topbar .avatar,
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--primary) / .9), hsl(217 91% 70%));
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 14px;
  flex: 0 0 34px;
}

/* ---------- 公告条 ---------- */
.notice {
  margin: 16px 20px 0;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  font-size: 13.5px;
  color: hsl(var(--foreground) / .8);
}
.notice .n-ico {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px;
  background: hsl(var(--primary) / .12);
  display: grid; place-items: center;
}
.notice .n-ico svg { width: 15px; height: 15px; fill: hsl(var(--primary)); }

/* ---------- 内容区 ---------- */
.main {
  margin-left: 224px;
  /* 顶栏是 fixed（脱离文档流），必须手动让开 64px，否则内容顶部会被顶栏压住 / 整体下移错位 */
  padding: 64px 0 0;
  display: flex; flex-direction: column; min-height: 100vh;
}
.main-in { max-width: 1120px; margin: 0 auto; padding: 16px 20px; width: 100%; }
.content { padding: 16px 20px; flex: 1; }

/* ---------- 卡片 ---------- */
.card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / .8);
  border-radius: var(--radius);
  box-shadow: 0 2px 12px hsl(217 45% 30% / .06);
  padding: 22px;
}
.card:hover { transform: none; box-shadow: 0 2px 12px hsl(217 45% 30% / .06); }

/* ---------- 按钮（模板 .btn） ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: hsl(var(--primary));
  color: #fff;
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid transparent;
  box-shadow: 0 4px 10px hsl(217 91% 60% / .25);
  text-decoration: none;
}
.btn.ghost {
  background: #fff; color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border)); box-shadow: none;
}
.btn.sm { padding: 6px 14px; font-size: 13.5px; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn:not(:disabled):active { transform: translateY(0) scale(.98); }

/* ---------- 表单 ---------- */
label.f, .field-label {
  display: block; font-weight: 600; margin: 16px 0 8px; font-size: 14px;
}
.input, .textarea, input.input, textarea.textarea {
  width: 100%;
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  padding: 11px 14px;
  background: #fff;
  outline: none;
  font-size: 14px;
}
input, select, textarea {
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  padding: 11px 14px;
  background: #fff;
  font-size: 14px;
}
input:focus, select:focus, textarea:focus,
.input:focus, .textarea:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / .12);
}
input[disabled], .input[disabled] { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.textarea, textarea.textarea { min-height: 100px; resize: vertical; }
.hint { font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 6px; }

/* ---------- 表格 ---------- */
table { width: 100%; border-collapse: collapse; }
thead th, th {
  background: hsl(214 76% 96%);
  text-align: left;
  padding: 13px 14px;
  color: hsl(217 55% 28%);
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
}
td { padding: 13px 14px; border-bottom: 1px solid hsl(var(--border)); font-size: 14px; }
tbody tr:hover { background: hsl(var(--primary) / .04); }
.tablewrap {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 12px hsl(217 45% 30% / .06);
}

/* ---------- 空状态 ---------- */
.empty { text-align: center; color: hsl(var(--muted-foreground)); padding: 60px 0; font-size: 14px; }
.empty svg { width: 110px; height: 90px; opacity: .5; display: block; margin: 0 auto 10px; }

/* ---------- 提示条 ---------- */
.alert { border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; font-size: 13.5px; line-height: 1.6; }
.a-info { background: hsl(var(--primary) / .10); color: hsl(var(--primary)); font-weight: 600; }
.a-blue { background: hsl(var(--primary)); color: #fff; text-align: center; font-weight: 600; }
.a-red { background: hsl(var(--destructive)); color: #fff; text-align: center; font-weight: 600; }
.a-warn { background: hsl(var(--warning)); color: #fff; text-align: center; font-weight: 600; }

/* ---------- 开关 ---------- */
.switch {
  width: 46px; height: 24px; border-radius: 12px;
  background: hsl(220 10% 84%);
  position: relative; transition: .2s; cursor: pointer; display: inline-block; flex: 0 0 46px;
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .2s;
}
.switch.on { background: hsl(var(--primary)); }
.switch.on::after { left: 24px; }

/* ---------- 筛选胶囊 ---------- */
.pills { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.pill {
  border: 1px solid hsl(var(--border));
  border-radius: 10px; padding: 8px 18px;
  background: #fff; font-size: 14px; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.pill.active { background: hsl(var(--primary)); color: #fff; border-color: hsl(var(--primary)); font-weight: 600; }

/* ---------- 分段器 ---------- */
.seg { display: grid; grid-template-columns: repeat(3, 1fr); background: hsl(220 14% 94%); border-radius: 12px; padding: 5px; margin-bottom: 14px; }
.seg button { padding: 10px; border-radius: 9px; font-weight: 600; color: #666; font-size: 14px; }
.seg button.active { background: hsl(var(--primary)); color: #fff; }

/* ---------- 步骤条 ---------- */
.steps {
  display: flex; justify-content: space-between;
  max-width: 760px; margin: 10px auto 26px;
  padding: 22px 40px;
  border: 1px solid hsl(var(--border));
  border-radius: 18px;
  position: relative;
  background: hsl(var(--card));
}
.step {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 14px; color: hsl(var(--muted-foreground));
  z-index: 1; background: hsl(var(--card)); padding: 0 10px;
}
.step i {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid hsl(217 60% 88%);
  display: grid; place-items: center;
  font-style: normal; color: hsl(217 40% 72%); font-weight: 600; font-size: 13px;
}
.step.active { color: hsl(var(--primary)); font-weight: 600; }
.step.active i { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: #fff; box-shadow: 0 0 0 5px hsl(var(--primary) / .12); }
.step.done i { border-color: hsl(var(--success)); color: hsl(var(--success)); }
.steps::before {
  content: ''; position: absolute; left: 12%; right: 12%; top: 37px;
  height: 2px; background: hsl(217 60% 90%);
}

/* ---------- 标签页（模板 .tabs） ---------- */
.tabs { display: flex; gap: 34px; border-bottom: 2px solid hsl(var(--border)); margin-bottom: 20px; overflow-x: auto; }
.tab { padding: 10px 0; font-weight: 600; position: relative; font-size: 15px; white-space: nowrap; background: none; border: none; color: hsl(var(--foreground)); }
.tab.active { color: hsl(var(--primary)); }
.tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: hsl(var(--primary)); }

/* ---------- 徽章 / 标签 ---------- */
.badge {
  font-size: 12px; color: hsl(var(--primary));
  border: 1px solid hsl(217 70% 85%);
  border-radius: 6px; padding: 1px 8px;
  background: hsl(217 90% 97%);
  box-shadow: none;
}
.tag { font-size: 12px; padding: 2px 10px; border-radius: 12px; border: 1px solid; display: inline-block; }
.t-ok { color: hsl(var(--success)); background: hsl(100 60% 96%); border-color: hsl(100 50% 86%); }
.t-lv { color: hsl(350 80% 60%); background: hsl(350 100% 97%); border-color: hsl(350 80% 90%); }
.t-dm { color: hsl(var(--warning)); background: hsl(38 100% 96%); border-color: hsl(38 90% 85%); }

/* ---------- 区块标题行 ---------- */
.head-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.head-row h3 { font-size: 18px; font-weight: 700; }

/* ---------- 页脚 ---------- */
.main-foot {
  padding: 14px 20px;
  border-top: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  font-size: 13px;
  background: hsl(var(--card));
}
body:has(.main) .site-foot { margin-left: 204px; }

/* ---------- 移动端抽屉 ---------- */
.side-toggle { display: none; }
@media (max-width: 900px) {
  .sidebar { width: 64px; }
  .sidebar .side-txt, .sidebar .side-gtitle, .side-brand b, .side-brand .sb-sub { display: none; }
  .side-item { justify-content: center; padding: 11px; width: calc(100% - 16px); }
  .side-brand { justify-content: center; padding: 0 10px; }
  .main { margin-left: 64px; }
  body:has(.main) .site-foot { margin-left: 64px; }
  .top-search { display: none; }
}

/* ---------- 用户菜单（适配新顶栏：锚定头像） ---------- */
.topbar-in { position: relative; }
.user-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 16px;
  min-width: 208px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  box-shadow: 0 8px 28px hsl(217 45% 25% / .16);
  padding: 12px;
  z-index: 400;
  display: none;
}
.user-menu.on { display: block; animation: modalIn .18s var(--ease); }
.um-head { display: flex; align-items: center; gap: 10px; padding: 4px 6px 10px; }
.um-head .avatar { width: 38px; height: 38px; flex: 0 0 38px; font-size: 15px; }
.um-name { font-size: 13.5px; font-weight: 700; color: hsl(var(--foreground)); }
.um-mail { font-size: 11.5px; color: hsl(var(--muted-foreground)); word-break: break-all; }
.um-body { display: flex; flex-direction: column; }
.um-body a {
  padding: 9px 10px; border-radius: 8px; font-size: 13.5px;
  color: hsl(var(--foreground)); text-decoration: none;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.um-body a:hover { background: hsl(var(--primary) / .08); color: hsl(var(--primary)); }
.um-foot { padding: 8px 6px 2px; border-top: 1px solid hsl(var(--border)); margin-top: 5px; }
.um-foot .btn { width: 100%; justify-content: center; }
.user-chip { cursor: pointer; }

/* ---------- 顶栏图标按钮（主题 / 猫爪） ---------- */
.theme-btn, .theme-paw {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: inline-grid; place-items: center;
  border-radius: 10px; cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  color: hsl(var(--muted-foreground));
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.theme-btn:hover, .theme-paw:hover {
  background: hsl(var(--primary) / .10);
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / .25);
  transform: none;
}
.theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.theme-btn .i-moon { display: inline-block; }
.theme-btn .i-sun { display: none; }
[data-theme="dark"] .theme-btn .i-moon { display: none; }
[data-theme="dark"] .theme-btn .i-sun { display: inline-block; }
.theme-paw svg { width: 19px; height: 19px; fill: currentColor; }

/* ---------- 深色适配（新骨架） ---------- */
[data-theme="dark"] .sidebar { background: hsl(222 47% 9%); border-right-color: hsl(var(--border)); }
[data-theme="dark"] .topbar { background: hsl(222 47% 9%); border-bottom-color: hsl(var(--border)); }
[data-theme="dark"] .notice { background: hsl(var(--card)); }
[data-theme="dark"] .main-foot { background: hsl(222 47% 9%); }
[data-theme="dark"] th, [data-theme="dark"] thead th {
  background: hsl(217 33% 16%);
  color: hsl(210 40% 88%);
}
[data-theme="dark"] .card { background: hsl(var(--card)); }
[data-theme="dark"] .btn.ghost { background: hsl(var(--secondary)); color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
[data-theme="dark"] .pill { background: hsl(var(--secondary)); color: hsl(var(--foreground)); }
[data-theme="dark"] .seg { background: hsl(217 33% 15%); }
[data-theme="dark"] .seg button { color: hsl(var(--muted-foreground)); }
[data-theme="dark"] .switch { background: hsl(217 25% 30%); }
[data-theme="dark"] .steps, [data-theme="dark"] .step { background: hsl(var(--card)); }
[data-theme="dark"] .steps::before { background: hsl(217 25% 26%); }
[data-theme="dark"] .step i { border-color: hsl(217 25% 30%); color: hsl(var(--muted-foreground)); }
[data-theme="dark"] .empty svg { opacity: .35; }
[data-theme="dark"] .badge { background: hsl(var(--primary) / .15); border-color: hsl(var(--primary) / .35); color: hsl(199 92% 72%); }
[data-theme="dark"] .top-search { background: hsl(var(--secondary)); }

/* ══════════════════════════════════════════════════════════
   个人资料页（参照模板 .profile-grid / .cover / .big-avatar）
   补齐模板组件：封面、大头像、用户名、标签、签名、信息行
   ══════════════════════════════════════════════════════════ */
.profile-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .profile-grid { grid-template-columns: 1fr; } }

/* 封面：延伸到卡片边缘 */
.cover, .pc-banner {
  height: 180px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(120deg, hsl(214 95% 88%), hsl(226 100% 94%) 50%, hsl(340 100% 92%));
  margin: -22px -22px 0;
  background-size: cover;
  background-position: center;
}
/* 大头像：浮在封面上 */
.big-avatar {
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 4px solid #fff;
  margin: -42px auto 0;
  background: linear-gradient(135deg, hsl(217 91% 72%), hsl(217 91% 60%));
  position: relative; cursor: pointer;
  display: grid; place-items: center;
  color: #fff; font-size: 30px; font-weight: 700;
  box-shadow: 0 4px 14px hsl(217 45% 30% / .18);
}
.big-avatar:hover::after {
  content: '换';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .4);
  display: grid; place-items: center;
  font-size: 16px;
}
.pname { text-align: center; font-size: 22px; font-weight: 700; margin-top: 10px; }
.pname span { color: hsl(var(--primary)); }
.tags { display: flex; justify-content: center; gap: 8px; margin: 10px 0 16px; flex-wrap: wrap; }
.quote {
  background: hsl(220 14% 97%);
  border-radius: 12px; padding: 18px;
  text-align: center; color: hsl(var(--foreground) / .75);
  margin: 6px 0 14px; line-height: 1.7; font-size: 13.5px;
}
.quote small { display: block; text-align: right; color: hsl(var(--muted-foreground)); margin-top: 8px; }
.info-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 13px 4px;
  border-top: 1px solid hsl(var(--border));
  font-size: 13.5px;
}
.info-row span:first-child { color: hsl(var(--muted-foreground)); }
.info-row b { word-break: break-all; text-align: right; }

/* 头像选择弹窗（模板 .av-grid / .av） */
.av-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-height: 380px; overflow-y: auto; padding: 10px; }
.av {
  width: 78px; height: 78px; border-radius: 50%; margin: auto;
  cursor: pointer; border: 3px solid transparent;
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 22px;
  position: relative;
}
.av.sel { border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / .18); }
.av.sel::after {
  content: '✓'; position: absolute; right: -2px; bottom: -2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: hsl(var(--primary)); color: #fff; font-size: 12px;
  display: grid; place-items: center;
}
.modal-foot { display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px; }

/* 安全设置条目（模板 .sec-item） */
.sec-item {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid hsl(var(--border));
}
.sec-item:last-child { border: none; }
.sec-item p { color: hsl(var(--muted-foreground)); font-size: 13px; margin-top: 6px; }
.link { color: hsl(var(--primary)); font-weight: 600; background: none; border: none; cursor: pointer; font-size: 14px; }
.link.red { color: hsl(var(--destructive)); }

/* 单选组 */
.radio { display: flex; gap: 26px; margin: 4px 0 12px; flex-wrap: wrap; }
.radio label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }

[data-theme="dark"] .cover, [data-theme="dark"] .pc-banner {
  background: linear-gradient(120deg, hsl(217 50% 22%), hsl(226 45% 26%) 50%, hsl(340 40% 26%));
}
[data-theme="dark"] .quote { background: hsl(217 33% 15%); color: hsl(210 30% 82%); }
[data-theme="dark"] .big-avatar { border-color: hsl(222 47% 12%); }

/* ══════════════════════════════════════════════════════════════
   v2「Nyan」皮肤 —— 蓝粉渐变 + 毛玻璃 + 等高线装饰 + 猫娘吉祥物
   覆盖：背景、侧栏、顶栏、卡片、按钮、统计卡、标签页、表格、胶囊
   ══════════════════════════════════════════════════════════════ */

/* ---------- 背景：粉蓝渐变 + 等高线纹理 ---------- */
body {
  color: var(--ink);
  background:
    radial-gradient(900px 500px at 105% -10%, #ffe3f1 0, transparent 60%),
    radial-gradient(800px 500px at -10% 110%, #dcebff 0, transparent 60%),
    linear-gradient(160deg, #eef5ff, #f8f3ff 60%, #fff3f9);
  background-attachment: fixed;
  background-color: #f2f6ff;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420' fill='none' stroke='%239cc3ff' stroke-opacity='.35' stroke-width='1.2'><path d='M-10 80c60-40 110 30 170 0s90-70 150-30 90 20 130-10'/><path d='M-10 130c60-40 110 30 170 0s90-70 150-30 90 20 130-10'/><path d='M-10 180c60-40 110 30 170 0s90-70 150-30 90 20 130-10'/><path d='M-10 260c70 40 120-30 180 10s100 50 160 0 70-30 100-10'/><path d='M-10 310c70 40 120-30 180 10s100 50 160 0 70-30 100-10'/><path d='M-10 360c70 40 120-30 180 10s100 50 160 0 70-30 100-10'/></svg>");
}
/* 内容层必须高于装饰层 */
.topbar, .sidebar, .main, .footer, .site-foot { position: relative; z-index: 1; }
.sidebar { z-index: 250; }
.topbar { z-index: 300; }
.main { z-index: 1; }

/* ---------- 闪光装饰 ---------- */
.spark {
  position: fixed; z-index: 0; pointer-events: none;
  color: #fff; text-shadow: 0 0 8px var(--blue2);
  animation: tw 3s ease-in-out infinite;
}
@keyframes tw {
  0%, 100% { opacity: .2; transform: scale(.7) rotate(0); }
  50%      { opacity: 1;  transform: scale(1.15) rotate(20deg); }
}

/* ---------- 侧栏（毛玻璃） ---------- */
.sidebar {
  width: 224px;
  background: var(--glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 6px 0 30px rgba(79, 155, 255, .08);
  padding-bottom: 26px;
  height: 100vh; overflow-y: auto;
}
.side-brand {
  height: 64px;
  padding: 0 20px;
  font-weight: 900; font-size: 21px; letter-spacing: .5px;
  border-bottom: none;
}
.side-brand img {
  width: 36px; height: 36px; border-radius: 10px; object-fit: cover; flex: 0 0 36px;
  filter: drop-shadow(0 3px 6px rgba(79, 155, 255, .35));
}
.side-brand b {
  background: linear-gradient(90deg, var(--blue), var(--pink));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; font-weight: 900;
}

/* 分组标题：前面一个渐变小圆点 */
.side-gtitle {
  padding: 16px 22px 6px;
  font-size: 12px; color: var(--ink-muted);
  font-weight: 700; letter-spacing: 1px;
  display: flex; align-items: center; gap: 6px;
}
.side-gtitle::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--blue2));
  flex: 0 0 6px;
}

/* 导航项 */
.side-item {
  width: calc(100% - 20px);
  margin: 4px 10px;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 500;
}
.side-item:hover { background: var(--blue-soft); transform: translateX(3px); box-shadow: none; }
.side-item.active, .side-item.on {
  color: #fff;
  background: linear-gradient(135deg, #4f9bff, #7cb8ff);
  box-shadow: 0 8px 18px rgba(79, 155, 255, .38);
  font-weight: 700;
}
.side-item.active:hover, .side-item.on:hover { transform: none; }
.side-item .dot {
  right: 16px; width: 8px; height: 8px;
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(255, 107, 138, .2);
}

/* ---------- 顶栏 ---------- */
.topbar {
  left: 224px;                 /* 让开侧栏 */
  height: 64px;
  padding: 0 24px;
  background: var(--glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .9);
  box-shadow: none;
}
.topbar.is-scrolled { box-shadow: 0 6px 20px rgba(79, 155, 255, .10); }
.crumb { font-weight: 700; color: var(--ink-muted); }
.crumb b { color: var(--ink); }
.crumb span { margin: 0 8px; opacity: .5; }
.top-search {
  border: 1px solid var(--ink-line); border-radius: 14px;
  padding: 8px 14px; background: #fff;
}
.top-search kbd { border: 1px solid var(--ink-line); border-radius: 6px; background: #f6f9ff; }
/* 图标按钮 */
.iconbtn {
  position: relative; width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 12px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--ink-line);
  color: var(--ink-muted);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.iconbtn:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--blue); border-color: var(--blue2); }
.iconbtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.iconbtn b {
  position: absolute; top: -6px; right: -6px;
  background: var(--danger); color: #fff;
  font-size: 11px; border-radius: 10px; padding: 0 6px;
  box-shadow: 0 2px 6px rgba(255, 107, 138, .4);
  min-width: 18px; text-align: center;
}
.bell { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; background: #fff; border: 1px solid var(--ink-line); }
.bell svg { color: var(--ink-muted); }
.bell:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.bell b { top: -6px; right: -6px; border-radius: 10px; box-shadow: 0 2px 6px rgba(255, 107, 138, .4); }
/* 顶栏头像 */
.topbar .avatar, .top-av {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 3px 10px rgba(79, 155, 255, .3);
  background: linear-gradient(135deg, var(--pink), var(--blue2));
  font-size: 15px;
}
.theme-btn, .theme-paw { border-radius: 12px; background: #fff; border: 1px solid var(--ink-line); color: var(--ink-muted); }
.theme-btn:hover, .theme-paw:hover { color: var(--blue); border-color: var(--blue2); background: #fff; }

/* ---------- 公告条 ---------- */
.notice {
  margin: 18px 24px 0;
  background: linear-gradient(90deg, #fff, #f3f8ff);
  border: 1px solid #fff;
  box-shadow: var(--shadow);
  border-radius: 18px;
  padding: 12px 18px;
  color: #55617f;
  overflow: hidden; white-space: nowrap;
}
.notice .n-ico {
  background: linear-gradient(135deg, var(--blue), var(--lav));
  color: #fff;
}
.notice .n-ico svg { fill: #fff; }
.notice span { overflow: hidden; text-overflow: ellipsis; }

/* ---------- 卡片 ---------- */
.card, .modal-card {
  background: var(--glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 2px solid #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}
.card:hover { box-shadow: var(--shadow); border-color: #fff; transform: none; }
.tablewrap, .pane {
  background: var(--glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 2px solid #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- 统计卡（四色渐变） ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 20px; }
.stat {
  border-radius: 22px; padding: 20px; color: #fff;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .25s var(--ease);
}
.stat:hover { transform: translateY(-4px) rotate(-.4deg); }
.stat small { opacity: .9; font-weight: 700; font-size: 12px; display: block; }
.stat h2 { font-size: 34px; margin: 6px 0 2px; font-weight: 900; line-height: 1.1; }
.stat::after {
  content: ""; position: absolute; right: -24px; bottom: -24px;
  width: 100px; height: 100px; border-radius: 50%;
  background: rgba(255, 255, 255, .2);
}
.stat .em { position: absolute; right: 16px; top: 14px; font-size: 28px; opacity: .9; }
.s1 { background: linear-gradient(135deg, #5aa8ff, #7fc0ff); }
.s2 { background: linear-gradient(135deg, #ff8fbf, #ffb4d3); }
.s3 { background: linear-gradient(135deg, #a897ff, #c7b9ff); }
.s4 { background: linear-gradient(135deg, #ffb86b, #ffd28f); }
@media (max-width: 1000px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 按钮（胶囊渐变） ---------- */
.btn {
  border-radius: 30px;
  background: linear-gradient(135deg, #4f9bff, #7cb8ff);
  box-shadow: 0 8px 18px rgba(79, 155, 255, .35);
  padding: 11px 24px; font-weight: 700;
}
.btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(79, 155, 255, .45); filter: none; }
.btn.ghost { background: #fff; color: var(--ink); border: 2px solid var(--ink-line); box-shadow: none; }
.btn.sm { padding: 7px 16px; font-size: 14px; }

/* ---------- 标签页（胶囊） ---------- */
.tabs {
  display: flex; gap: 6px;
  background: #f0f5ff; padding: 6px;
  border-radius: 16px; margin-bottom: 22px;
  width: fit-content; max-width: 100%; overflow-x: auto;
  border-bottom: none;
}
.tab { padding: 9px 20px; border-radius: 12px; font-weight: 700; color: var(--ink-muted); }
.tab.active { background: #fff; color: var(--blue); box-shadow: 0 4px 12px rgba(79, 155, 255, .2); }
.tab.active::after { display: none; }

/* ---------- 表单 ---------- */
.input, .textarea, input, select, textarea {
  border: 2px solid var(--ink-line);
  border-radius: 14px;
  padding: 12px 16px;
  background: #fff;
}
input:focus, select:focus, textarea:focus,
.input:focus, .textarea:focus {
  border-color: var(--blue2);
  box-shadow: 0 0 0 4px rgba(79, 155, 255, .14);
}
input[disabled], .input[disabled] { background: #f4f7fc; color: #a9b3cc; }
label.f, .field-label { font-weight: 700; }
.hint { color: var(--ink-muted); }
/* 单选：选中整块高亮 */
.radio label {
  padding: 9px 16px; border-radius: 14px;
  background: #f4f8ff; border: 2px solid transparent;
  font-weight: 500;
}
.radio label:has(input:checked) {
  border-color: var(--blue2); background: #fff; color: var(--blue);
  box-shadow: 0 4px 12px rgba(79, 155, 255, .18);
}
.radio input { accent-color: var(--blue); }

/* ---------- 提示条 ---------- */
.alert { border-radius: 16px; padding: 13px 18px; font-weight: 700; }
.a-info { background: linear-gradient(90deg, #e6f1ff, #f1f6ff); color: var(--blue); }
.a-blue { background: linear-gradient(135deg, #4f9bff, #7cb8ff); color: #fff; box-shadow: 0 6px 16px rgba(79, 155, 255, .3); }
.a-red { background: linear-gradient(135deg, #ff7a95, #ff9db3); color: #fff; box-shadow: 0 6px 16px rgba(255, 107, 138, .3); }
.a-warn { background: linear-gradient(135deg, #ffae45, #ffc878); color: #fff; box-shadow: 0 6px 16px rgba(255, 177, 72, .35); }

/* ---------- 表格（圆角行） ---------- */
table { border-collapse: separate; border-spacing: 0 8px; }
thead th, th {
  background: #eaf2ff; color: #2c4a86;
  padding: 13px 16px; border-radius: 0;
}
th:first-child { border-radius: 14px 0 0 14px; }
th:last-child { border-radius: 0 14px 14px 0; }
td { padding: 14px 16px; background: #f9fbff; border-bottom: none; }
td:first-child { border-radius: 14px 0 0 14px; }
td:last-child { border-radius: 0 14px 14px 0; }
tbody tr:hover td { background: #f2f7ff; }

/* ---------- 筛选胶囊 ---------- */
.pill { border-radius: 30px; padding: 8px 18px; background: #fff; border: 2px solid var(--ink-line); font-weight: 700; color: var(--ink-muted); }
.pill:hover { border-color: var(--blue2); }
.pill.active {
  background: linear-gradient(135deg, #4f9bff, #7cb8ff);
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 14px rgba(79, 155, 255, .3);
}

/* ---------- 分段器 / 徽章 / 开关 ---------- */
.seg { background: #eef3fd; border-radius: 16px; padding: 5px; }
.seg button { border-radius: 12px; font-weight: 700; color: var(--ink-muted); }
.seg button.active { background: linear-gradient(135deg, #4f9bff, #7cb8ff); color: #fff; box-shadow: 0 5px 12px rgba(79, 155, 255, .3); }
.badge { background: #eaf3ff; color: var(--blue); border-radius: 8px; padding: 1px 9px; font-weight: 700; border: none; }
.switch { width: 50px; height: 28px; border-radius: 14px; background: #d6deee; flex: 0 0 50px; }
.switch::after { top: 3px; left: 3px; width: 22px; height: 22px; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); }
.switch.on { background: linear-gradient(135deg, var(--blue), var(--lav)); }
.switch.on::after { left: 25px; }

/* ---------- 步骤条 ---------- */
.steps { max-width: 780px; padding: 24px 44px; background: #fff; border-radius: 24px; box-shadow: var(--shadow); border: none; margin: 6px auto 28px; }
.steps::before { top: 39px; height: 3px; border-radius: 3px; background: #dce8fb; }
.step { background: #fff; font-weight: 700; }
.step i { width: 32px; height: 32px; border: 2px solid #cfe0fb; color: #9db8e6; background: #fff; font-weight: 900; }
.step.active i { background: linear-gradient(135deg, #4f9bff, #7cb8ff); border-color: transparent; color: #fff; box-shadow: 0 0 0 6px var(--blue-soft); }
.wizard .box { border: 2px dashed #ffd9a6; border-radius: 22px; background: #fffbf3; }
.checks { background: #fffaf0; border: 2px solid #ffeccc; border-radius: 20px; }

/* ---------- 空状态 ---------- */
.empty { color: var(--ink-muted); padding: 50px 0; }
.empty svg { width: 130px; height: 130px; }

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- 个人资料：封面 + 大头像 ---------- */
.profile-grid { grid-template-columns: 340px minmax(0, 1fr); gap: 22px; }
.cover, .pc-banner {
  height: 190px;
  border-radius: var(--radius) var(--radius) 0 0;
  margin: -24px -24px 0;
  background: linear-gradient(135deg, #b9d9ff, #e5dcff 55%, #ffd3e8);
}
.big-avatar {
  width: 104px; height: 104px;
  border: none;
  margin: -52px auto 0;
  box-shadow: 0 8px 20px rgba(79, 155, 255, .35);
  font-size: 32px;
}
.big-avatar::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--blue2), var(--lav));
  z-index: -1;
}
.pname { font-size: 24px; font-weight: 900; }
.pname span { color: var(--blue); display: inline-block; animation: spin 4s linear infinite; }
@keyframes spin {
  0%, 100% { transform: rotate(-12deg) scale(1); }
  50%      { transform: rotate(12deg) scale(1.2); }
}
.quote {
  background: linear-gradient(135deg, #f4f8ff, #fff4fa);
  border-radius: 18px; padding: 22px 20px 16px;
  color: #4a5677; font-size: 13.5px;
}
.quote::before { content: "❝"; position: absolute; left: 12px; top: 2px; font-size: 30px; color: var(--blue2); opacity: .6; }
.quote { position: relative; }
.info-row { border-top: 1px dashed #d6e3fa; padding: 14px 6px; }
.sec-item { padding: 22px 16px; border-radius: 18px; border-bottom: none; }
.sec-item:hover { background: #f5f9ff; }
.av-grid { gap: 18px; }

/* ---------- 页脚 ---------- */
.main-foot { border-top: none; color: var(--ink-muted); padding: 16px 24px; background: transparent; }
body .site-foot { margin-left: 224px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1000px) {
  .sidebar { width: 68px; }
  .sidebar .side-txt, .sidebar .side-gtitle, .side-brand b { display: none; }
  .side-item { justify-content: center; padding: 13px; }
  .side-brand { justify-content: center; padding: 0; }
  .topbar { left: 68px; }
  .main { margin-left: 68px; }
  body .site-foot { margin-left: 68px; }
  .profile-grid, .msg-grid, .two { grid-template-columns: 1fr; }
  .top-search { display: none; }
  .steps { padding: 20px 12px; }
}
@media (max-width: 1000px) { .main { margin-left: 68px; } }

/* ══════════════════════════════════════════════════════════
   深色主题 × v2 皮肤
   v2 是浅色毛玻璃风格，深色下需要：玻璃变暗、渐变降饱和、
   等高线纹理减弱，否则粉蓝渐变会把深色内容压得发灰。
   ══════════════════════════════════════════════════════════ */
[data-theme="dark"] body {
  background:
    radial-gradient(900px 500px at 105% -10%, rgba(255, 143, 191, .10) 0, transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(79, 155, 255, .12) 0, transparent 60%),
    linear-gradient(160deg, hsl(222 47% 8%), hsl(226 40% 11%) 60%, hsl(230 40% 10%));
  color: hsl(210 40% 94%);
}
[data-theme="dark"] body::before { opacity: .12; }
[data-theme="dark"] {
  --glass: hsl(222 47% 12% / .82);
  --shadow: 0 10px 30px rgba(0, 0, 0, .40), 0 2px 6px rgba(0, 0, 0, .28);
  --ink: hsl(210 40% 94%);
  --ink-muted: hsl(215 20% 68%);
  --ink-line: hsl(217 25% 24%);
  --blue-soft: hsl(217 40% 20%);
  --pink-soft: hsl(338 40% 20%);
}
[data-theme="dark"] .card,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .tablewrap,
[data-theme="dark"] .pane {
  background: var(--glass);
  border-color: hsl(217 25% 22%);
}
[data-theme="dark"] .sidebar,
[data-theme="dark"] .topbar {
  background: hsl(222 47% 10% / .86);
  border-color: hsl(217 25% 22%);
}
[data-theme="dark"] .side-brand b {
  background: linear-gradient(90deg, #7cb8ff, #ff8fbf);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="dark"] .side-item:hover { background: hsl(217 40% 18%); }
[data-theme="dark"] .top-search,
[data-theme="dark"] .iconbtn,
[data-theme="dark"] .bell,
[data-theme="dark"] .theme-btn,
[data-theme="dark"] .theme-paw {
  background: hsl(222 44% 15%);
  border-color: hsl(217 25% 26%);
  color: hsl(215 20% 72%);
}
[data-theme="dark"] .notice { background: linear-gradient(90deg, hsl(222 44% 13%), hsl(222 44% 16%)); border-color: hsl(217 25% 22%); color: hsl(210 30% 82%); }
[data-theme="dark"] td { background: hsl(222 44% 13%); }
[data-theme="dark"] tbody tr:hover td { background: hsl(222 44% 17%); }
[data-theme="dark"] th, [data-theme="dark"] thead th { background: hsl(217 33% 20%); color: hsl(210 40% 88%); }
[data-theme="dark"] .tab { color: hsl(215 20% 68%); }
[data-theme="dark"] .tab.active { background: hsl(222 44% 17%); color: hsl(199 92% 72%); }
[data-theme="dark"] .tabs { background: hsl(217 33% 15%); }
[data-theme="dark"] .stat-card { box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }
[data-theme="dark"] .stat-card.sc-pink  { background: linear-gradient(135deg, #b3567f, #d17d9d); }
[data-theme="dark"] .stat-card.sc-blue  { background: linear-gradient(135deg, #35709f, #5590c0); }
[data-theme="dark"] .stat-card.sc-green { background: linear-gradient(135deg, #2f7d5c, #4fa37a); }
[data-theme="dark"] .stat-card.sc-amber { background: linear-gradient(135deg, #a8763f, #cc9860); }
[data-theme="dark"] .steps, [data-theme="dark"] .step { background: hsl(var(--card)); }
[data-theme="dark"] .steps::before { background: hsl(217 25% 26%); }
[data-theme="dark"] .wizard .box { background: hsl(38 30% 12%); border-color: hsl(38 40% 30%); }
[data-theme="dark"] .checks { background: hsl(38 30% 12%); border-color: hsl(38 40% 28%); }
[data-theme="dark"] .a-info { background: hsl(217 40% 18%); color: hsl(199 92% 72%); }
[data-theme="dark"] .empty { color: hsl(215 20% 62%); }
[data-theme="dark"] .pill { background: hsl(222 44% 14%); border-color: hsl(217 25% 26%); color: hsl(215 20% 70%); }
[data-theme="dark"] .seg { background: hsl(217 33% 15%); }
[data-theme="dark"] .quote { background: linear-gradient(135deg, hsl(217 33% 16%), hsl(338 30% 17%)); color: hsl(210 30% 84%); }
[data-theme="dark"] .sec-item:hover { background: hsl(222 44% 15%); }
[data-theme="dark"] .info-row { border-top-color: hsl(217 25% 26%); }