/* ============================================================
   后台管理样式 - 深色玻璃拟态，与前台风格统一
   ============================================================ */
:root {
  --bg: #0b1020;
  --bg-2: #11162b;
  --panel: rgba(255, 255, 255, 0.05);
  --panel-2: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.12);
  --text: #f5f7ff;
  --muted: rgba(245, 247, 255, 0.58);
  --accent: #6d8bff;
  --accent-2: #b06dff;
  --ok: #34d399;
  --warn: #fbbf24;
  --err: #f87171;
  --radius: 16px;
}

* { box-sizing: border-box; }

/* ============================================================
   全局滚动条美化（页面、侧栏、表格、下拉面板统一窄滚动条）
   ============================================================ */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .2);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(165, 184, 255, .5);
  background-clip: content-box;
}
::-webkit-scrollbar-corner { background: transparent; }

html, body { margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.6;
}

.bg-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(40% 38% at 18% 12%, rgba(109, 139, 255, 0.35), transparent 60%),
    radial-gradient(38% 40% at 85% 18%, rgba(176, 109, 255, 0.28), transparent 60%),
    radial-gradient(45% 45% at 50% 100%, rgba(52, 211, 153, 0.15), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

a { color: var(--accent); text-decoration: none; }
code { background: rgba(255,255,255,.08); padding: 1px 6px; border-radius: 6px; font-size: 12px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* ---------------- 布局 ---------------- */
/* 整体占满视口，不随内容增高，避免浏览器出现滚动条；滚动交给内容区 */
.layout { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  width: 160px;
  flex: 0 0 160px;
  padding: 0 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: rgba(255, 255, 255, 0.04);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  height: 100vh;
}

/* 负外边距抵消侧栏左右内边距，分割线拉通到侧栏边缘；左右 18px 保持内容原位置不变 */
/* 与顶部栏同高（60px），底部边线与其对齐；固定主轴尺寸，避免被内容撑高或压缩 */
.side-head {
  display: flex; align-items: center; gap: 10px; margin: 0 -12px;
  flex: 0 0 60px; height: 60px; padding: 0 18px;
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 2;
  /* 与顶部栏一致的边线下方阴影 */
  box-shadow: 0 8px 20px -14px rgba(0, 0, 0, .8);
}
.side-logo { width: 34px; height: 34px; border-radius: 10px; object-fit: contain; background: rgba(255,255,255,.08); }
.side-title { display: flex; flex-direction: column; line-height: 1.25; }
.side-title b { font-size: 15px; letter-spacing: .5px; }
.side-title small { color: var(--muted); font-size: 12px; }

/* 侧栏右上角工具按钮（整理数据库） */
.side-tool-form { margin-left: auto; display: flex; flex: 0 0 auto; }
.side-tool {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--border); color: var(--muted);
  transition: color .15s, background .15s, border-color .15s;
}
.side-tool:hover {
  color: var(--accent); background: rgba(109, 139, 255, .16); border-color: rgba(109, 139, 255, .4);
}
.side-tool:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109, 139, 255, .22); }
.side-tool svg { display: block; }

/* 导航项：背景横向拉通到侧栏两边缘，直角，不做胶囊；左侧内边距加大，图标与栏尾留出更多间距 */
.side-nav { display: flex; flex-direction: column; gap: 0; flex: 1; overflow-y: auto; overflow-x: hidden; margin: 0 -12px; }
.side-link {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 22px 11px 28px; border-radius: 0;
  color: rgba(245, 247, 255, 0.78);
  transition: background .18s, color .18s;
  font-size: 13.5px;
}
/* 文字统一占 4 字宽度，3 字项（如"仪表盘"）用两端对齐把字距拉开，右端与 4 字项齐平；
   排除图标(.ic)与角标(.nav-badge)，避免角标被撑成 4em 宽或换行 */
.side-link > span:not(.ic):not(.nav-badge) {
  display: inline-block; width: 4em;
  text-align: justify; text-align-last: justify;
}
.side-link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.side-link.active {
  background: linear-gradient(90deg, rgba(109, 139, 255, 0.34), rgba(176, 109, 255, 0.2));
  color: #fff;
}
.side-link.danger:hover { background: rgba(248, 113, 113, .16); color: #fca5a5; }
/* 底部操作区：纯图标按钮，横向一排 */
.side-foot { border-top: 1px solid var(--border); padding-top: 17px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; }
.side-foot .side-tool-form { margin-left: 0; }
.side-foot .side-link, .side-foot .side-tool {
  width: 32px; height: 32px; flex: 0 0 32px; padding: 0; border-radius: 9px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, .05);
  color: rgba(245, 247, 255, .78);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: color .15s, background .15s, transform .08s;
}
.side-foot .side-link:hover, .side-foot .side-tool:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.side-foot .side-link.danger:hover { background: rgba(248, 113, 113, .16); color: #fca5a5; }
.side-foot .side-link:active, .side-foot .side-tool:active { transform: translateY(1px); }
.side-foot .side-tool svg { width: 15px; height: 15px; }
.side-foot .ic { width: 15px; height: 15px; flex: 0 0 15px; background-size: 15px 15px; }

.ic {
  width: 18px; height: 18px; flex: 0 0 18px;
  background-repeat: no-repeat; background-position: center; background-size: 18px 18px;
  opacity: .85;
}
.side-link.active .ic, .side-link:hover .ic { opacity: 1; }
.ic-grid { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b6d8' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.ic-gauge { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b6d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 12l4.5-3'/%3E%3Ccircle cx='12' cy='12' r='1.3' fill='%23a9b6d8' stroke='none'/%3E%3Cpath d='M12 3v1.5M3 12h1.5M21 12h-1.5M5.6 5.6l1 1M18.4 5.6l-1 1'/%3E%3C/svg%3E"); }
.ic-gamepad { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b6d8' stroke-width='2'%3E%3Crect x='2' y='7' width='20' height='12' rx='4'/%3E%3Cpath d='M7 11v4M5 13h4'/%3E%3Ccircle cx='16' cy='12' r='1' fill='%23a9b6d8'/%3E%3Ccircle cx='19' cy='14' r='1' fill='%23a9b6d8'/%3E%3C/svg%3E"); }
.ic-tag { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b6d8' stroke-width='2'%3E%3Cpath d='M20.6 13.4 12 22l-9-9 8.6-8.6a2 2 0 0 1 1.4-.6H20a2 2 0 0 1 2 2v6.2a2 2 0 0 1-.6 1.4z'/%3E%3Ccircle cx='16.5' cy='7.5' r='1.4'/%3E%3C/svg%3E"); }
.ic-sliders { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b6d8' stroke-width='2'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3Ccircle cx='9' cy='6' r='2'/%3E%3Ccircle cx='15' cy='12' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E"); }
.ic-chart { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a9b6d8'%3E%3Crect x='3' y='11' width='4' height='10' rx='1'/%3E%3Crect x='10' y='5' width='4' height='16' rx='1'/%3E%3Crect x='17' y='14' width='4' height='7' rx='1'/%3E%3C/svg%3E"); }
.ic-user { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b6d8' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
.ic-lock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b6d8' stroke-width='2'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.ic-eye { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b6d8' stroke-width='2'%3E%3Cpath d='M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.ic-out { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b6d8' stroke-width='2'%3E%3Cpath d='M15 17l5-5-5-5'/%3E%3Cpath d='M20 12H9'/%3E%3Cpath d='M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7'/%3E%3C/svg%3E"); }
.ic-shield { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b6d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
/* 意见反馈：对话气泡图标，沿用侧栏统一描边色 #a9b6d8 */
.ic-feedback { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b6d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E"); }

/* 主区域占满视口高度，顶部栏固定，下方内容区独立滚动 */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  flex: 0 0 60px; height: 60px; padding: 0 22px;
  background: rgba(11, 16, 32, 0.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  /* 边线下方一道柔和阴影，滚动时形成"顶栏浮起"的层次 */
  box-shadow: 0 8px 20px -14px rgba(0, 0, 0, .8);
}
.top-title { font-size: 16px; font-weight: 600; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.who { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
/* 弹性居中 + 清零 UA 默认内边距/行高，保证 ☰ 字形在方块内精确居中 */
.btn-menu {
  display: none; width: 36px; height: 32px; border-radius: 10px;
  align-items: center; justify-content: center; padding: 0; line-height: 1;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text); cursor: pointer;
}

/* 内容区：撑满主区域剩余高度并自行滚动，顶栏始终固定 */
.content { padding: 22px; display: flex; flex-direction: column; gap: 18px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* ---------------- 通用组件 ---------------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  backdrop-filter: blur(10px);
}
.panel.no-pad { padding: 0; overflow: hidden; }
/* 标题下一条拉通到面板边缘的分割线（负外边距抵消面板内边距） */
.panel-head {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  margin: -18px -18px 14px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.panel-head h2 { margin: 0; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; white-space: nowrap; }
/* 标题左侧图标：各板块使用对应的 SVG，颜色跟随主题强调色 */
.panel-head h2 > svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--accent); }
.panel-head .muted { margin-left: auto; }
/* 意见反馈页头右侧：文字说明 + 前端功能开关 */
.fb-head-right { display: flex; align-items: center; gap: 12px; }
.fb-head-right .muted { margin-left: 0; }
.link-more { margin-left: auto; font-size: 13px; }

.alert {
  padding: 11px 14px; border-radius: 12px; font-size: 13px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity .4s ease, transform .4s ease, margin .4s ease;
}
.alert.fade-out { opacity: 0; transform: translateY(-8px); }
.alert-ok { background: rgba(52, 211, 153, .14); border-color: rgba(52, 211, 153, .35); color: #a7f3d0; }
.alert-err { background: rgba(248, 113, 113, .14); border-color: rgba(248, 113, 113, .35); color: #fecaca; }
.alert-warn { background: rgba(251, 191, 36, .14); border-color: rgba(251, 191, 36, .35); color: #fde68a; }

/* ---------------- 顶部气泡提示（toast） ---------------- */
.toast-wrap {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 300; display: flex; flex-direction: column; gap: 10px;
  width: max-content; max-width: min(92vw, 540px); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 6px;
  padding: 11px 8px 11px 14px; border-radius: 14px; font-size: 13px; line-height: 1.5;
  background: rgba(23, 29, 54, .95); border: 1px solid var(--border); color: var(--text);
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .8);
  backdrop-filter: blur(14px); cursor: pointer;
  animation: toastIn .28s cubic-bezier(.22, 1.2, .36, 1);
}
.toast.fade-out { animation: toastOut .3s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-12px) scale(.97); } }
.toast > svg { flex: 0 0 auto; width: 17px; height: 17px; }
.toast-msg { word-break: break-all; }
.toast-ok { border-color: rgba(52, 211, 153, .42); }
.toast-ok > svg { color: #6ee7b7; }
.toast-err { border-color: rgba(248, 113, 113, .45); }
.toast-err > svg { color: #fca5a5; }
.toast-warn { border-color: rgba(251, 191, 36, .42); }
.toast-warn > svg { color: #fcd34d; }
.toast-x {
  flex: 0 0 auto; margin-left: -1px; width: 18px; height: 18px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 8px; background: transparent; color: var(--muted);
  font-size: 15px; line-height: 1; cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s;
}
.toast-x:hover { background: rgba(255, 255, 255, .12); color: var(--text); }

.btn, .btn-primary, .btn-ghost, .btn-mini {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 11px; cursor: pointer; font-size: 13px; font-family: inherit;
  padding: 9px 16px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); transition: filter .15s, background .15s;
}
.btn:hover, .btn-ghost:hover, .btn-mini:hover { background: rgba(255,255,255,.14); }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent; color: #fff; font-weight: 600;
  /* 扁平处理：不做内高光与发光，避免按钮从背景里"凸"出来 */
  box-shadow: 0 1px 2px rgba(11, 16, 32, .28);
  transition: filter .15s, background .15s, transform .08s;
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(109, 139, 255, .32); }
.btn-primary:disabled { opacity: .72; cursor: progress; transform: none; }
/* 工具栏「＋ 添加」按钮：弱化为浅色系，去掉渐变与高光，避免过于抢眼（表单主操作仍用强调色） */
.toolbar-row .btn-primary,
.inline-add .btn-primary,
.page-act .btn-primary {
  background: rgba(109, 139, 255, .12);
  border: 1px solid rgba(109, 139, 255, .32);
  color: #c7d2fe;
  font-weight: 500;
  box-shadow: none;
}
.toolbar-row .btn-primary:hover,
.inline-add .btn-primary:hover,
.page-act .btn-primary:hover {
  background: rgba(109, 139, 255, .2);
  filter: none;
}
/* 柔和主按钮：低饱和主色填充 + 描边，无渐变无高光，用于面板内普通提交/添加操作，不抢眼 */
.btn-soft {
  background: rgba(109, 139, 255, .12);
  border: 1px solid rgba(109, 139, 255, .32);
  color: #c7d2fe;
  font-weight: 500;
  box-shadow: none;
}
.btn-soft:hover { background: rgba(109, 139, 255, .2); filter: none; }
.btn-soft:active { filter: brightness(.96); transform: translateY(1px); }
/* 拉通整宽的分割线（如角色页两面板之间、顶部） */
.divider-full {
  border: none;
  border-top: 1px solid var(--border);
  margin: 22px 0;
}
/* 「保存权限」操作区顶部：拉通到面板边缘的分割线，与 .panel-head 下边线一致 */
.save-actions {
  margin: 16px -18px -18px;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--border);
}
.btn-mini { padding: 5px 10px; font-size: 12px; border-radius: 9px; }
/* 框内左侧标签：文字在输入框内左侧，输入区在右侧（如添加角色的名称） */
.dlg-form .field.field-inline {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--panel-2);
  padding: 0;
}
.field-inline > span {
  display: flex; align-items: center;
  padding: 0 12px;
  color: var(--muted); font-size: 13px; white-space: nowrap;
  border-right: 1px solid var(--border);
}
.dlg-form .field-inline > span { border-right: 1px solid var(--border); }
.field.field-inline input[type=text] {
  flex: 1; min-width: 0; width: auto;
  border: none; background: transparent; border-radius: 0;
  padding: 10px 12px;
  color: var(--text); font-family: inherit; font-size: 13px;
}
.field.field-inline input[type=text]:focus { outline: none; box-shadow: none; border: none; }
/* 选中态：淡强调色平铺 + 同色描边，不用高饱和渐变，避免在深色面板里凸出 */
.btn-mini.active {
  background: rgba(109, 139, 255, .16);
  border-color: rgba(109, 139, 255, .45);
  color: #c7d2fe;
  font-weight: 600;
}
.btn-mini.danger { color: #fca5a5; }
.btn-mini.danger:hover { background: rgba(248, 113, 113, .2); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: -8px; }
.stat-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px 16px; display: flex; flex-direction: column; gap: 4px; position: relative;
}
/* 卡片可点击：作为对应模块的快捷入口（无位移，悬停仅变色） */
a.stat-card {
  color: inherit; text-decoration: none;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
a.stat-card:hover {
  background: rgba(255, 255, 255, .07); box-shadow: 0 16px 32px -22px rgba(0, 0, 0, .95);
}
a.stat-card.c-game:hover  { border-color: rgba(167, 139, 250, .5); box-shadow: 0 16px 32px -22px rgba(167, 139, 250, .5); }
a.stat-card.c-tag:hover   { border-color: rgba(244, 114, 182, .5); box-shadow: 0 16px 32px -22px rgba(244, 114, 182, .5); }
a.stat-card.c-today:hover { border-color: rgba(52, 211, 153, .5); box-shadow: 0 16px 32px -22px rgba(52, 211, 153, .5); }
a.stat-card.c-total:hover { border-color: rgba(96, 165, 250, .5); box-shadow: 0 16px 32px -22px rgba(96, 165, 250, .5); }
a.stat-card.c-today.is-down:hover { border-color: rgba(248, 113, 113, .5); box-shadow: 0 16px 32px -22px rgba(248, 113, 113, .5); }
a.stat-card:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109, 139, 255, .22); }
/* 右上角语义图标 */
.stat-ic {
  position: absolute; top: 13px; right: 13px;
  width: 34px; height: 34px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}
.stat-ic svg { width: 18px; height: 18px; display: block; }
.stat-card.c-game  .stat-ic { background: rgba(167, 139, 250, .16); border: 1px solid rgba(167, 139, 250, .32); color: #a78bfa; }
.stat-card.c-tag   .stat-ic { background: rgba(244, 114, 182, .14); border: 1px solid rgba(244, 114, 182, .30); color: #f472b6; }
.stat-card.c-today .stat-ic { background: rgba(52, 211, 153, .16); border: 1px solid rgba(52, 211, 153, .34); color: #34d399; }
.stat-card.c-total .stat-ic { background: rgba(96, 165, 250, .14); border: 1px solid rgba(96, 165, 250, .30); color: #60a5fa; }
/* 底部细进度条 */
.stat-bar {
  margin-top: auto; padding-top: 10px; height: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); overflow: hidden;
}
.stat-bar i { display: block; height: 100%; border-radius: 999px; }
.stat-card.c-game  .stat-bar i { background: linear-gradient(90deg, #a78bfa, #7c5cf0); }
.stat-card.c-tag   .stat-bar i { background: linear-gradient(90deg, #f472b6, #ec4899); }
.stat-card.c-total .stat-bar i { background: linear-gradient(90deg, #60a5fa, #3b82f6); }
/* 今日访问：昨日（灰）+ 今日（涨绿 / 跌红）双段对比条 */
.stat-card.c-today .stat-bar { display: flex; gap: 2px; }
.stat-card.c-today .stat-bar i { border-radius: 999px; }
.stat-card.c-today .stat-bar i.prev { background: rgba(255, 255, 255, .22); }
.stat-card.c-today .stat-bar i.cur.up { background: linear-gradient(90deg, #34d399, #10b981); }
.stat-card.c-today .stat-bar i.cur.down { background: linear-gradient(90deg, #fb7185, #ef4444); }
.stat-label { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 日环比徽标：涨绿跌红 */
.delta {
  font-style: normal; font-weight: 600; font-size: 11px; letter-spacing: .2px;
  padding: 2px 7px; border-radius: 999px;
  display: inline-flex; align-items: center; line-height: 1.4;
}
.delta.up   { color: #6ee7b7; background: rgba(52, 211, 153, .14); border: 1px solid rgba(52, 211, 153, .32); }
.delta.down { color: #fca5a5; background: rgba(248, 113, 113, .14); border: 1px solid rgba(248, 113, 113, .34); }
.delta.flat { color: var(--muted); background: rgba(255, 255, 255, .07); border: 1px solid var(--border); }
.stat-value { font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -.5px; }
/* 数值颜色与右上角图标保持一致 */
.stat-card.c-game  .stat-value { color: #a78bfa; }
.stat-card.c-tag   .stat-value { color: #f472b6; }
.stat-card.c-total .stat-value { color: #60a5fa; }
/* 实时数据（今日访问）：上涨绿 / 下降红，图标与数值同步变色 */
.stat-card.c-today .stat-value {
  background: linear-gradient(135deg, #34d399, #10b981);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-card.c-today.is-down .stat-value {
  background: linear-gradient(135deg, #f87171, #ef4444);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-card.c-today.is-down .stat-ic {
  background: rgba(248, 113, 113, .16); border-color: rgba(248, 113, 113, .34); color: #f87171;
}
.stat-sub { color: var(--muted); font-size: 12px; }
.stat-card .stat-sub b { color: var(--text); font-weight: 600; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; align-items: stretch; }
.grid-2 > .panel { display: flex; flex-direction: column; }
.grid-2 > .panel .rank { flex: 1; justify-content: center; }

/* 三栏栅格（仪表盘：趋势 / 分类分布 / 热门榜），窄屏在响应式区折叠为一列 */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; align-items: stretch; }
.grid-3 > .panel { display: flex; flex-direction: column; }
.grid-3 > .panel .rank { flex: 1; justify-content: center; }

.rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rank li { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--panel-2); border-radius: 10px; font-size: 13px; }
.rank li b { color: var(--accent); }

/* 热门榜条目：名次 + 封面缩略图 + 名称 */
.rank.hot li { gap: 8px; padding: 7px 12px; }
/* 右侧进入次数：火焰图标 + 数字 */
.rank.hot li b { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.rank.hot li b svg { width: 12px; height: 12px; flex: 0 0 12px; }
.rank .hot-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rank .hot-no {
  flex: 0 0 18px; width: 18px; height: 18px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; font-style: normal;
  background: rgba(255, 255, 255, .08); color: var(--muted);
}
.rank .hot-no.top { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.rank .hot-cover {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 7px; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
}
.rank .hot-cover img { width: 100%; height: 100%; object-fit: cover; }
.rank .hot-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* 高度 200px 起，若所在面板被拉伸（如仪表盘 grid-2 等高布局）则自动撑满 */
.bars { position: relative; display: flex; align-items: stretch; gap: 10px; height: 200px; min-height: 200px; flex: 1 1 200px; padding-top: 20px; }
.bars.tall { height: 220px; min-height: 220px; gap: 8px; }
/* 柱状图基线：与柱子底部（.bar-zone 的 bottom）对齐，贯穿整个绘图区 */
.bars::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 20px; height: 1px;
  background: rgba(255, 255, 255, .2);
  pointer-events: none;
}
.bar-item {
  flex: 1; min-width: 0; height: 100%; position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: 20px;
}
/* 绘图区：占据除底部日期外的全部高度，柱底紧贴区域底部 */
.bar-zone {
  position: absolute; top: 0; left: 0; right: 0; bottom: 20px;
}
.bar {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 42px; max-width: 100%; min-height: 4px;
  border-radius: 0;
  background: linear-gradient(180deg, #7f9dff 0%, #8b8cf5 55%, #a78bfa 100%);
  box-shadow: 0 6px 16px -8px rgba(127, 157, 255, .8);
}
.bar span {
  position: absolute; top: -19px; left: 50%; transform: translateX(-50%);
  font-size: 11px; color: #cbd5e1; white-space: nowrap;
}
.bar-item small {
  position: absolute; bottom: 0; left: 0; right: 0;
  text-align: center; font-size: 10px; color: var(--muted);
}

/* 两端都为方角 */
.line-bar { height: 8px; border-radius: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); min-width: 2px; }

/* ---------------- 表格 ---------------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.11); vertical-align: middle; }
.table td { overflow-wrap: anywhere; }
.table code { word-break: break-all; }
.table th { color: var(--muted); font-weight: 500; font-size: 12px; background: rgba(255,255,255,.03); }.table tbody tr:hover { background: rgba(255,255,255,.03); }
.table tbody tr:last-child td { border-bottom: none; }
/* 游戏列表：最后一行也保留底部分割线（面板 no-pad 圆角裁剪，不会超出） */
.games-table tbody tr:last-child td { border-bottom: 1px solid rgba(255,255,255,.11); }

.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; background: rgba(255,255,255,.1); }
.badge-ok { background: rgba(52,211,153,.18); color: #6ee7b7; }
.badge-off { background: rgba(248,113,113,.18); color: #fca5a5; }
.badge-warn { background: rgba(251,191,36,.18); color: #fcd34d; }
.badge-info { background: rgba(109,139,255,.2); color: #a5b8ff; }
.badge-err { background: rgba(248,113,113,.18); color: #fca5a5; }
/* 状态徽章作为按钮时（如游戏上线/停用，点击直接切换） */
button.badge { border: none; font-family: inherit; line-height: inherit; cursor: pointer; transition: filter .15s; }
button.badge:hover { filter: brightness(1.18); }
button.badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mini-cover {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; font-size: 20px; overflow: hidden;
}
.mini-cover img { width: 100%; height: 100%; object-fit: cover; }

/* 表格内部滚动（固定高度、表头吸顶） */
.table-scroll {
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #171e34;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .1);
}
.table-scroll thead th:first-child { border-top-left-radius: 0; }

/* 操作列按钮组：inline-flex + vertical-align:middle，随单元格内容一起垂直居中；列宽随按钮数量自适应 */
.ops { display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; white-space: nowrap; vertical-align: middle; }
.ops .btn-mini { padding: 5px 8px; font-size: 12px; border-color: transparent; height: 28px; }
/* 图标按钮统一为 1:1 正方形 */
.btn-icon { width: 30px; height: 30px; padding: 0; min-width: 0; justify-content: center; }
.ops .btn-icon { width: 30px; height: 30px; padding: 0; }
.btn-mini svg { display: block; }

/* 游戏列表：封面 / 分类 / 状态 / 操作 列表头与整列居中对齐 */
.games-table th:nth-child(1), .games-table td:nth-child(1),
.games-table th:nth-child(3), .games-table td:nth-child(3),
.games-table th:nth-child(4), .games-table td:nth-child(4),
.games-table th:nth-child(5), .games-table td:nth-child(5),
.games-table th:nth-child(6), .games-table td:nth-child(6),
.games-table th:nth-child(7), .games-table td:nth-child(7) { text-align: center; }
.games-table td:nth-child(7) .ops { justify-content: center; }

/* 热门列：火焰图标 + 进入次数（0 次淡显） */
.hot-cell { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; white-space: nowrap; }
/* 数字不换行、不拆字，列宽按内容自动撑开（table 默认 auto 布局） */
.games-table th:nth-child(3),
.games-table td:nth-child(3) { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
.hot-cell svg { flex: 0 0 12px; }
.hot-cell b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.hot-cell.is-zero b { color: var(--muted); font-weight: 500; }

/* 游戏名称输入框内嵌「进入次数」编辑框：四边贴住输入框内边缘，不留间隙 */
.plays-suffix { position: relative; display: block; }
.plays-suffix > input[type=text] { padding-right: 116px; }
/* 底框（徽标）：贴住名称输入框内边缘 */
.plays-badge {
  position: absolute; right: 1px; top: 1px; bottom: 1px;
  transform: none;
  display: flex; align-items: center; gap: 5px;
  max-width: 72%;
  padding: 0 0 0 9px;
  border-radius: 0 10px 10px 0;
  background: rgba(109, 139, 255, .18); color: #c7d2fe;
  font-size: 12px; font-weight: 600; line-height: 1.5;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.plays-badge svg { width: 12px; height: 12px; flex: 0 0 12px; align-self: center; }
/* 内嵌数字输入框：需压过 .field input[type=number] 的 width:100% 与 padding，故用更高优先级选择器
   四边贴住底框（无间距），右边撑满、左侧不圆角 */
.field input.plays-input[type=number] {
  width: 78px; min-width: 0; max-width: 100%;
  height: auto; align-self: stretch; margin: 0;
  padding: 0 4px; border: 0; border-radius: 0 6px 6px 0;
  background: transparent; color: inherit;
  font: inherit; font-weight: 600; text-align: left;
  font-variant-numeric: tabular-nums;
}
.field input.plays-input[type=number]:focus {
  outline: none; background: rgba(255, 255, 255, .07);
}
.field input.plays-input[type=number]::-webkit-outer-spin-button,
.field input.plays-input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field input.plays-input[type=number] { -moz-appearance: textfield; }
.ops .btn-mini:hover, .ops .btn-mini:focus-visible { border-color: var(--border); }
.inline { display: inline-flex; margin: 0; }
.empty-mini { padding: 22px; text-align: center; color: var(--muted); font-size: 13px; }

/* ---------------- 意见反馈列表 ---------------- */
.fb-list { display: flex; flex-direction: column; }
.fb-item {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  transition: background .15s ease;
}
.fb-item:hover { background: rgba(255, 255, 255, .045); }
.fb-avatar {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  margin-left: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(109, 139, 255, .16);
  color: var(--accent);
}
.fb-avatar svg { width: 17px; height: 17px; display: block; }
.fb-body { flex: 1; min-width: 0; padding-right: 18px; }
.fb-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.fb-time { color: var(--text); font-size: 13px; font-weight: 600; }
.fb-ip { color: var(--muted); font-size: 12px; }
.fb-content {
  margin: 0;
  color: rgba(245, 247, 255, 0.92);
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
.fb-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.fb-ua {
  margin-right: auto;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 44px);
}

/* ---------------- 表单 ---------------- */
.toolbar-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
/* 筛选栏：输入框、按钮、下拉触发框高度统一 */
.toolbar-row .filter-form > input[type=text],
.toolbar-row .filter-form .cselect-btn,
.toolbar-row .filter-form .btn,
.toolbar-row > .btn-primary { height: 38px; }
.filter-form { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-form input, .filter-form select {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 11px; padding: 9px 12px; font-size: 13px; font-family: inherit; min-width: 150px;
}
.toolbar-row .btn-primary { margin-left: auto; }

.form-card { display: flex; flex-direction: column; gap: 18px; }
.edit-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: start; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* 颜色配置行（主题色 / 背景色 / 光影色）：三列收拢为内容宽度，间距收紧并靠左排列 */
.form-row.color-row { grid-template-columns: repeat(3, auto); gap: 16px; justify-content: start; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
/* 末尾字段不再重复留白，避免面板底部空出一大块 */
.panel > .field:last-child,
.form-row:last-child .field { margin-bottom: 0; }
.field > span { font-size: 13px; color: rgba(245,247,255,.6); font-weight: 500; }
/* 字段标题中括号内的补充说明：字号缩小一档 */
.field > span small, .checkbox > span small, .check-text small { font-size: 11px; color: var(--muted); }
.field input[type=text], .field input[type=password], .field input[type=number], .field select, .field textarea {
  background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--text);
  border-radius: 11px; padding: 10px 12px; font-size: 13px; font-family: inherit; width: 100%;
}
.field textarea { resize: vertical; }
/* 副标题输入框内右侧嵌入「电脑 / 手机」开关（复用 .input-switch 容器） */
.hd-input input[type=text] {
  flex: 1; min-width: 0; align-self: stretch; width: auto;
  border: 0; background: transparent; border-radius: 0;
  padding: 0 12px; color: var(--text); font-size: 13px;
}
.hd-input input[type=text]:focus { outline: none; }
/* 开关标签间距：第一组把开关推到右侧，后续组与前一组保持间距 */
.hd-input .switch-label { margin-left: auto; margin-right: 6px; }
.hd-input .switch + .switch-label { margin-left: 12px; margin-right: 6px; }
/* 窄屏放不下时隐藏文字标签，只留开关（title 提示用途） */
@media (max-width: 560px) {
  .hd-input .switch-label { display: none; }
  .hd-input .switch + .switch-label { margin-left: 8px; }
}
/* 分类显示设置弹窗：最后一行与底部按钮之间留出间距 */
.cat-limit-form { padding-bottom: 16px; }
/* 去掉数量输入框原生的加减（上下箭头） */
.cat-limit-form input[type=number]::-webkit-inner-spin-button,
.cat-limit-form input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cat-limit-form input[type=number] { -moz-appearance: textfield; }
/* 数量输入框 + 显示开关 一体化：输入框内右侧嵌入开关 */
.input-switch {
  display: flex; align-items: center; gap: 0; box-sizing: border-box; height: 40px;
  background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 11px; padding: 0 12px 0 0;
}
.input-switch .is-num { position: relative; flex: 0 0 auto; align-self: stretch; display: flex; align-items: stretch; }
/* 数字框默认就较宽、左对齐并留左间距；与“电脑/手机”标签同为顶/左/底贴边的分段，不随位数自动伸缩 */
.input-switch .is-num input[type=text] {
  width: 10ch; align-self: stretch; line-height: 22px; border: 0; background: rgba(0,0,0,.22);
  border-radius: 0; padding: 0 22px 0 12px; color: var(--text); font-size: 13px; text-align: left;
}
.input-switch .is-num input[type=text]:focus { outline: none; }
.input-switch .is-unit { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; line-height: 22px; white-space: nowrap; pointer-events: none; }
/* 电脑/手机 前缀标签：左/上/下贴边 + 右侧竖分割线，与输入框区分 */
.input-switch .is-prefix {
  font-size: 13px; color: var(--text); line-height: 22px; white-space: nowrap; align-self: stretch;
  display: flex; align-items: center; padding: 0 12px;
  margin: 0;
  background: rgba(255,255,255,.12); border-right: 1px solid var(--border);
  border-radius: 11px 0 0 11px;
}
.input-switch .switch-label { font-size: 13px; color: var(--text); line-height: 22px; white-space: nowrap; margin-left: auto; margin-right: 8px; }
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex: 0 0 auto; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: rgba(255,255,255,.18); border-radius: 999px; transition: background .2s; }
.switch .slider::before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(18px); }
/* 设置弹窗内的「开关 + 说明」一行（标签左、开关右） */
.fb-set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border: 1px solid var(--border); border-radius: 11px;
  background: rgba(255, 255, 255, .04); font-size: 13px; color: var(--text);
}
.fb-set-row .fb-set-label { line-height: 1.4; }
/* 输入框内的右侧单位（如「分钟」）：绝对定位贴在框内最右，并隐藏数字框原生上下箭头避免重叠 */
.with-unit { position: relative; }
.with-unit .form-input { padding-right: 48px; }
.with-unit .unit {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--muted); pointer-events: none; white-space: nowrap;
}
.with-unit input[type=number]::-webkit-inner-spin-button,
.with-unit input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.with-unit input[type=number] { -moz-appearance: textfield; }
/* 输入框/下拉框/多行文本聚焦时不显示高亮描边 */
input:focus, select:focus, textarea:focus { outline: none; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
}
.field small { font-size: 12px; }
.field input:disabled { opacity: .6; cursor: not-allowed; }
.checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
/* 表单行右侧并列的多个开关（如访问次数相关），窄屏自动换行 */
.check-col { display: flex; flex-direction: row; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
/* 开关行：整行可点（文字 + 滑块开关），与副标题输入框内嵌开关同风格 */
.check-line { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); line-height: 22px; cursor: pointer; white-space: nowrap; }
/* 与左侧输入框垂直居中对齐：隐形占位标签抵消字段标签高度，开关区撑满输入框同等高度并居中 */
.check-field .ghost { visibility: hidden; }
.check-field .check-col,
.check-field > .check-line { flex: 1; }
.checkbox input { width: 16px; height: 16px; accent-color: var(--accent); }
.form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* 面板内嵌表单操作区（如修改密码）：保留原有分隔线样式，不做底部固定 */
.form-card .form-actions {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
/* 表单页内容区：去掉底部内边距，让操作栏能贴住最底部 */
.page-settings .content,
.page-game_edit .content { padding-bottom: 0; }
/* 表单铺满内容区高度，短表单时操作栏也能沉到底部 */
.page-settings .content > .form-card,
.page-game_edit .content > .form-card { flex: 1 1 auto; }
/* 独立表单页（设置/游戏编辑）操作栏：固定在内容区底部，滚动时始终可见 */
form.form-card .form-actions {
  position: sticky;
  bottom: 0;
  z-index: 10;
  margin: auto -22px 0;       /* 顶部自动推开沉底，左右撑满内容区宽度 */
  padding: 14px 22px;
  background: rgba(11, 16, 32, 0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 -10px 24px rgba(4, 7, 18, .35);
}
.form-card .form-actions .btn,
.form-card .form-actions .btn-primary {
  min-height: 40px; padding: 0 20px; border-radius: 11px; font-size: 13.5px;
}
.form-card .form-actions .btn-ghost { color: rgba(245, 247, 255, .82); }
.form-card .form-actions .btn-ghost:hover { color: var(--text); }
/* 表单主按钮：收敛为低饱和主色填充 + 描边，去掉亮渐变与高光，不再"凸"在页面上 */
.form-card .form-actions .btn-primary {
  background: rgba(109, 139, 255, .24);
  border-color: rgba(109, 139, 255, .42);
  color: #eaeefc;
  box-shadow: none;
}
.form-card .form-actions .btn-primary:hover {
  background: rgba(109, 139, 255, .32);
  filter: none;
}
.form-card .form-actions .btn-primary:active { filter: brightness(.96); }
/* 提交中：按钮内旋转指示 */
.btn-spin {
  flex: none; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-spin { animation-duration: 2s; } }
/* 页面顶部的操作区（按钮 + 说明） */
.page-act { margin-bottom: 14px; }
.page-act .btn-primary { padding: 9px 18px; }
.page-act .muted { margin-left: 2px; }

/* 工具栏右侧按钮组：卡片设置 + 添加游戏（整体靠右） */
.toolbar-ops { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.toolbar-ops .btn-primary { margin-left: 0; }

.inline-add { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inline-add input, .inline-add select {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 11px; padding: 9px 12px; font-size: 13px; font-family: inherit;
}
.mini-input {
  background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 5px 8px; font-size: 12px; font-family: inherit; width: 74px;
}
.mini-input.wide { width: 100%; min-width: 120px; }

/* ---------------- 分类管理：卡片网格 ---------------- */
.tag-grid {
  display: grid; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.tag-card {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  transition: border-color .15s, background .15s;
}
.tag-card:hover { border-color: rgba(109, 139, 255, .38); background: rgba(255, 255, 255, .06); }
.tag-card-row { display: flex; align-items: center; gap: 8px; }
.tag-card .tag-sort { width: 52px; flex: 0 0 52px; text-align: center; }
.tag-card .tag-name { flex: 1 1 auto; width: auto; min-width: 0; padding: 7px 9px; font-size: 13px; height: 32px; box-sizing: border-box; }
.tag-card-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
/* 名称输入框内右侧显示游戏数量 */
.tag-card-name { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.tag-card-name .tag-name { width: 100%; padding-right: 72px; }
/* 游戏数徽标：输入框内右侧贴边、占满高度、直角、无内间距 */
.tag-card-name .tag-count {
  position: absolute; right: 0; top: 0; bottom: 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px; border: none; border-left: 1px solid var(--border);
  border-radius: 0 8px 8px 0; background: rgba(255, 255, 255, .06);
  color: var(--muted); pointer-events: none;
}
.tag-empty {
  grid-column: 1 / -1; padding: 24px; text-align: center;
  color: var(--muted); font-size: 13px;
  border: 1px dashed var(--border); border-radius: 12px;
}
/* 图标按钮（保存/删除等，通用：分类卡片、反馈列表等均可使用） */
.btn-ico {
  width: 32px; height: 32px; padding: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: rgba(255, 255, 255, .05);
  color: rgba(245, 247, 255, .78); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-ico svg { width: 15px; height: 15px; display: block; }
.btn-ico:hover { background: rgba(109, 139, 255, .18); color: #c7d2fe; border-color: rgba(109, 139, 255, .4); }
.btn-ico.danger:hover { background: rgba(248, 113, 113, .18); color: #fca5a5; border-color: rgba(248, 113, 113, .4); }
/* 名称输入框聚焦高亮，排序号柔和底色 */
.tag-card .tag-name { font-weight: 500; transition: border-color .15s, box-shadow .15s; }
.tag-card .tag-name:focus { outline: none; }
.tag-card .tag-sort { background: rgba(255, 255, 255, .04); }

/* Emoji 选择：输入框右侧按钮 + 弹出面板 */
.emoji-field { position: relative; }
.emoji-field > input[type=text] { padding-right: 74px; }
.emoji-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 3px;
  height: 30px; padding: 0 7px; border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--border); color: var(--muted);
  transition: color .15s, background .15s, border-color .15s;
}
.emoji-toggle:hover { color: var(--accent); background: rgba(109, 139, 255, .16); border-color: rgba(109, 139, 255, .4); }
.emoji-toggle:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109, 139, 255, .22); }
.emoji-toggle[aria-expanded="true"] { color: var(--accent); border-color: rgba(109, 139, 255, .5); background: rgba(109, 139, 255, .16); }
.emoji-toggle .ic-arrow { display: flex; transition: transform .18s ease; }
.emoji-toggle[aria-expanded="true"] .ic-arrow { transform: rotate(180deg); }

.emoji-pop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: #161c33; border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px; padding: 10px 10px 8px;
  box-shadow: 0 22px 48px -16px rgba(0, 0, 0, .8);
  display: none;
}
.emoji-pop.open { display: block; animation: csIn .16s ease; }
.emoji-pop-tabs {
  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px;
}
.emoji-tab {
  flex: 0 0 auto; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-family: inherit; cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--border); color: var(--muted);
  transition: color .12s, background .12s, border-color .12s;
}
.emoji-tab:hover { color: var(--text); background: rgba(255, 255, 255, .12); }
/* 选中态：淡强调色平铺 + 同色描边，不做高饱和渐变，避免在深色面板里凸出 */
.emoji-tab.active {
  background: rgba(109, 139, 255, .16);
  border-color: rgba(109, 139, 255, .45);
  color: #c7d2fe;
  font-weight: 600;
}
/* 弹性居中 + 清零 UA 默认内边距/行高，保证 emoji 字形在方块内精确居中 */
.emoji-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; line-height: 1;
  border-radius: 9px; font-size: 17px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--text);
}
/* 分类筛选靠 hidden 属性隐藏按钮：必须显式声明，
   否则上面的 display:inline-flex 会覆盖浏览器默认的 [hidden]{display:none} */
.emoji-btn[hidden] { display: none; }
.emoji-pop-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 4px; padding: 4px; max-height: 200px; overflow-y: auto; overscroll-behavior: contain;
}
.emoji-pop-grid .emoji-btn { justify-self: center; transition: background .12s, transform .12s, box-shadow .12s; }
/* 悬停不用位移（上浮会被网格容器裁切），改用内描边 + 底色反馈 */
.emoji-pop-grid .emoji-btn:hover {
  background: rgba(109, 139, 255, .24);
  box-shadow: inset 0 0 0 1px rgba(165, 184, 255, .5);
}
.emoji-pop-grid .emoji-btn.active {
  background: linear-gradient(135deg, rgba(109, 139, 255, .5), rgba(176, 109, 255, .38));
  box-shadow: 0 0 0 1px rgba(165, 184, 255, .55) inset;
}
.pop-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px; color: var(--muted);
}
.mini-ghost {
  background: rgba(255, 255, 255, .08); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s;
}
.mini-ghost:hover { background: rgba(248, 113, 113, .18); color: #fca5a5; border-color: rgba(248, 113, 113, .34); }

/* 主题色：自定义取色器 + 可折叠预设色板 */
.color-top { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; container-type: inline-size; }
/* 原生取色器缩为 1px 且不接收鼠标事件，只有点色块才由 JS 唤起 */
.color-picker {
  position: relative; display: inline-flex; flex: 0 0 auto;
  cursor: pointer; border-radius: 10px;
}
.color-picker input[type=color] {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
  padding: 0; border: none; background: none;
}
.color-picker:focus-visible { outline: none; }
.color-picker:focus-visible .color-chip { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109, 139, 255, .22); }
/* 色块 1:1 正方形（边长与右侧色值输入框等高 32px） */
.color-chip {
  width: 32px; height: 32px; border-radius: 8px; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 12px -6px rgba(0, 0, 0, .8);
  background: #6d8bff; transition: background .15s;
}
.color-picker:hover .color-chip { border-color: rgba(255, 255, 255, .4); }
.color-picker:focus-within .color-chip { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109, 139, 255, .22); }
.field input.color-hex {
  width: 96px; flex: 0 0 auto;
  font-family: ui-monospace, Consolas, Menlo, monospace; font-size: 12.5px;
  letter-spacing: .5px; text-align: center; text-transform: uppercase;
  height: 32px; padding: 0 8px; border-radius: 10px;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--border); color: var(--text);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.color-hex:hover { background: rgba(255, 255, 255, .12); }
.color-hex:focus {
  outline: none;
}
/* 空间不足时优先省略提示文字，保证「随机」「色板」按钮不被挤走 */
.color-hint { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.color-rand { margin-left: auto; flex: 0 0 auto; }
@container (max-width: 330px) {
  .color-hint { display: none; }
}

/* 色板展开按钮 + 弹出面板 */
.color-wrap { position: relative; flex: 0 0 auto; }
.color-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 8px; border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--border); color: var(--muted);
  transition: color .15s, background .15s, border-color .15s;
}
.color-toggle:hover { color: var(--accent); background: rgba(109, 139, 255, .16); border-color: rgba(109, 139, 255, .4); }
.color-toggle:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109, 139, 255, .22); }
.color-toggle[aria-expanded="true"] { color: var(--accent); background: rgba(109, 139, 255, .16); border-color: rgba(109, 139, 255, .5); }
.color-toggle .ic-arrow { display: flex; transition: transform .18s ease; }
.color-toggle[aria-expanded="true"] .ic-arrow { transform: rotate(180deg); }
.color-toggle .color-chip { width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }

.color-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  width: 302px; max-width: 76vw;
  background: #161c33; border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px; padding: 9px 9px 7px;
  box-shadow: 0 22px 48px -16px rgba(0, 0, 0, .8);
  display: none;
}
.color-pop.open { display: block; animation: csIn .16s ease; }
.color-pop-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
  gap: 7px; padding: 3px; max-height: 148px; overflow-y: auto; overscroll-behavior: contain;
}
.color-swatch {
  aspect-ratio: 1 / 1; border-radius: 9px; cursor: pointer; padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  transition: filter .12s, box-shadow .12s;
}
/* hover / 选中都用内描边，避免外扩描边被面板边缘或滚动条裁切 */
.color-swatch:hover { filter: brightness(1.14); }
.color-swatch.active {
  border-color: rgba(255, 255, 255, .9);
  box-shadow: inset 0 0 0 1.5px rgba(11, 16, 32, .9), inset 0 0 0 3px rgba(255, 255, 255, .92);
}
/* 封面：路径输入框 + 上传按钮合并为一个控件 */
.cover-field { position: relative; display: flex; align-items: center; }
.cover-field > input[type=text] { padding-right: 132px; }
/* 仅带左侧预览图标的输入框留出左内边距（如系统设置的 Logo / 分享封面） */
.cover-field.has-icon > input[type=text] { padding-left: 40px; }
/* 输入框左侧：Logo 预览（加载成功显示图片，失败则显示通用图片图标） */
.cover-field .field-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  color: var(--muted); pointer-events: none;
}
.cover-field .field-icon img { display: none; max-width: 100%; max-height: 100%; border-radius: 4px; object-fit: contain; }
.cover-field .field-icon img.ok { display: block; }
.cover-field .field-icon img.ok ~ svg { display: none; }
.cover-field .field-icon svg { width: 16px; height: 16px; }
.cover-picker {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px; max-width: 118px;
  height: 30px; padding: 0 10px; border-radius: 9px; cursor: pointer;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--border); color: var(--text);
  font-size: 12.5px; white-space: nowrap; overflow: hidden;
  transition: color .15s, background .15s, border-color .15s;
}
.cover-picker:hover { color: var(--accent); background: rgba(109, 139, 255, .16); border-color: rgba(109, 139, 255, .4); }
.cover-picker:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109, 139, 255, .22); }
.cover-picker svg { flex: 0 0 auto; }
.cover-picker span { overflow: hidden; text-overflow: ellipsis; }
.cover-picker input[type=file] {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
/* 主题色（系统设置）：色块按钮与输入框同高，仅点色块弹取色器 */
.theme-row { display: flex; align-items: center; gap: 10px; }
.theme-picker { position: relative; display: inline-flex; height: 39px; cursor: pointer; border-radius: 11px; }
.theme-picker input[type=color] {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px; opacity: 0; pointer-events: none; padding: 0; border: none;
}
/* 色块 1:1 正方形（边长与输入框等高 39px） */
.theme-chip {
  width: 39px; height: 39px; border-radius: 10px; pointer-events: none;
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 12px -6px rgba(0, 0, 0, .8);
  background: #0b1020; transition: background .15s, border-color .15s;
}
.theme-picker:hover .theme-chip { border-color: rgba(255, 255, 255, .4); }
.theme-picker:focus-visible { outline: none; }
.theme-picker:focus-visible .theme-chip { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109, 139, 255, .22); }
.field input.theme-hex {
  width: 104px; flex: 0 0 auto; font-family: ui-monospace, Consolas, Menlo, monospace; font-size: 12.5px;
  letter-spacing: .5px; text-align: center; text-transform: uppercase;
  height: 39px; padding: 0 10px; border-radius: 11px;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--border); color: var(--text);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.theme-hex:hover { background: rgba(255, 255, 255, .11); }
.theme-hex:focus {
  outline: none;
}

/* 分类标签：可输入的下拉（替代原生 datalist） */
.tag-field { position: relative; }
.tag-field > input[type=text] { padding-right: 42px; }
.tag-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--border); color: var(--muted);
  transition: color .15s, background .15s, border-color .15s;
}
.tag-toggle:hover, .tag-toggle[aria-expanded="true"] {
  color: var(--accent); border-color: rgba(109, 139, 255, .5); background: rgba(109, 139, 255, .16);
}
.tag-toggle .ic-arrow { display: flex; transition: transform .18s ease; }
.tag-toggle[aria-expanded="true"] .ic-arrow { transform: rotate(180deg); }

.tag-pop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: #161c33; border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px; padding: 8px 6px 6px;
  box-shadow: 0 22px 48px -16px rgba(0, 0, 0, .8);
  display: none;
}
.tag-pop.open { display: block; animation: csIn .16s ease; }
.tag-pop-list { max-height: 186px; overflow-y: auto; overscroll-behavior: contain; }
.tag-pop-list .cselect-opt { border-radius: 8px; }
.tag-none { color: var(--muted); font-size: 12.5px; cursor: default; justify-content: center; }
.tag-none:hover { background: none; color: var(--muted); }

.cover-picker.has-file { color: var(--ok); border-color: rgba(52, 211, 153, .42); background: rgba(52, 211, 153, .14); }

/* 只保留预览卡片本身，不加外框与标题（宽度对齐前台卡片 260px） */
/* 卡片外观调节：固定左右布局（左 = 预览卡，右 = 调节面板），不换行 */
.preview { margin-top: 10px; display: flex; gap: 20px; align-items: flex-start; flex-wrap: nowrap; }
/* 预览卡 + 下方开关 组成左列，右侧仍为参数调节区 */
.preview-side { flex: 0 0 240px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.preview-side .preview-card { width: 100%; flex: 0 0 auto; }
.preview-card { width: 240px; flex: 0 0 240px; border-radius: var(--card-radius, 14px); overflow: hidden; background: rgba(255,255,255,.07); border: 1px solid var(--border); }
/* 预览卡：与前台 .card-cover 完全一致（16:8 比例 + cover 铺满，支持调节高度/图标大小）
   flex 显式居中 + width:100% 锁定宽度，避免 grid 单项在 aspect-ratio/height 变量下错位 */
.preview-cover {
  position: relative; width: 100%;
  aspect-ratio: 16 / 8;
  height: var(--cover-h, auto);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: var(--emoji-size, 64px);
  background: linear-gradient(135deg, var(--pc, #6d8bff), transparent 120%);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}

/* 卡片外观调节面板：预览卡右侧，滑块 + 数字框双向同步 */
.preview-tuner {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.tuner-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.tuner-row > label { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
/* 滑块与数字框合并成一个胶囊控件 */
.tuner-ctl {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  height: 34px; padding: 0 10px 0 12px;
  background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 10px;
  transition: border-color .15s, background .15s;
}
.tuner-ctl:hover { background: rgba(255,255,255,.09); }
.tuner-ctl:focus-within { border-color: rgba(109,139,255,.5); background: rgba(109,139,255,.08); }
.tuner-ctl input[type=range] {
  flex: 1; min-width: 0; height: 20px; padding: 0; border: 0; background: transparent;
  accent-color: var(--accent); cursor: pointer;
}
.tuner-ctl .tuner-num {
  flex: 0 0 52px; width: 52px; height: 24px; padding: 0 2px;
  background: transparent; border: 0; color: var(--text);
  font-family: ui-monospace, Consolas, Menlo, monospace; font-size: 12.5px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.tuner-ctl .tuner-num:focus { outline: none; }
.tuner-ctl .tuner-num::-webkit-outer-spin-button,
.tuner-ctl .tuner-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tuner-ctl .tuner-num[type=number] { -moz-appearance: textfield; }
.tuner-unit { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); }
.preview-tuner > .btn-mini { align-self: flex-start; }
/* 底部操作行：恢复默认按钮 + 开始游戏按钮文字 */
.tuner-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
.tuner-foot > .btn-mini { margin-left: auto; height: 30px; padding: 0 12px; }
.tuner-text { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.tuner-text input[type=text] {
  width: 108px; height: 30px; padding: 0 10px;
  background: rgba(255,255,255,.07); border: 1px solid var(--border); border-radius: 9px;
  color: var(--text); font-family: inherit; font-size: 12.5px; text-align: center;
  transition: border-color .15s, background .15s;
}
.tuner-text input[type=text]:hover { background: rgba(255,255,255,.11); }
.tuner-text input[type=text]:focus { outline: none; border-color: rgba(109,139,255,.5); background: rgba(109,139,255,.08); }
/* 手机端底部操作行保持一排：不换行、收紧间距，输入框可收缩，恢复默认按钮不换行 */
@media (max-width: 620px) {
  .tuner-foot { flex-wrap: nowrap; gap: 8px; }
  .tuner-text { flex: 1 1 auto; min-width: 0; }
  .tuner-text input[type=text] { flex: 0 1 auto; min-width: 52px; }
  .tuner-foot > .btn-mini { flex: 0 0 auto; padding: 0 10px; white-space: nowrap; }
}
/* 超窄屏：隐藏「按钮文字」标签，给输入框和恢复默认按钮腾出位置，仍保持一排 */
@media (max-width: 380px) {
  .tuner-text > span { display: none; }
}
/* 顶部高光层，与前台一致 */
.preview-cover::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .18), transparent 60%);
  pointer-events: none;
}
.preview-cover .emoji {
  position: relative; z-index: 1;
  line-height: 1;                 /* 消除行盒基线偏移，保证字形几何居中 */
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
}
.preview-cover .tag { z-index: 2; }
/* 删除封面：悬停预览卡时出现在右上角 */
.preview-cover-del {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  width: 26px; height: 26px; border-radius: 8px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(6, 10, 22, .55); border: 1px solid rgba(255, 255, 255, .2);
  color: #fecaca; opacity: 0;
  transition: opacity .15s, background .15s, color .15s, transform .15s;
}
.preview-cover-del[hidden] { display: none; }
.preview-cover:hover .preview-cover-del,
.preview-cover-del:focus-visible { opacity: 1; }
.preview-cover-del:hover { background: rgba(248, 113, 113, .88); border-color: transparent; color: #fff; transform: scale(1.06); }
.preview-cover-del:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(248, 113, 113, .35); }
.preview-cover .tag { position: absolute; top: 8px; left: 8px; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.45); }
/* 按钮上下留白一致：上 = gap(5) + margin-top(6) = 11，下 = padding-bottom 11 */
.preview-body { padding: 12px 14px 11px; display: flex; flex-direction: column; gap: 5px; }
.preview-body b { font-size: 15px; }
.preview-body small { color: var(--muted); font-size: 12.5px; line-height: 1.6; }
/* 预览卡内的「开始游戏」按钮：默认显示；电脑/手机开关都关闭时由 .no-play 隐藏 */
.preview-play {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: stretch;
  margin-top: 6px; padding: 7px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: #dbe4ff;
  background: linear-gradient(135deg, rgba(109,139,255,.30), rgba(176,109,255,.24));
  border: 1px solid rgba(109,139,255,.40);
}
.preview-card.no-play .preview-play { display: none; }
/* 预览卡下方：「开始游戏」按钮 电脑/手机 显示开关 */
.preview-dev { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.preview-dev-t { margin-right: auto; white-space: nowrap; }
/* 开关行内的滑块缩小一档（不影响全站通用 .switch 尺寸） */
.preview-dev .switch { width: 32px; height: 18px; }
.preview-dev .switch .slider::before { height: 12px; width: 12px; left: 3px; top: 3px; }
.preview-dev .switch input:checked + .slider::before { transform: translateX(14px); }

/* 分段控件（7 天 / 30 天）：右侧与面板内容对齐，保留 18px 内边距间距 */
.seg { margin-left: auto; margin-right: 0; align-self: center; flex: 0 0 auto; display: flex; gap: 6px; }
.ua { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 窄屏时隐藏「打开方式」列，保证名称与操作列有足够空间 */
@media (max-width: 1200px) {
  .games-table th:nth-child(5),
  .games-table td:nth-child(5) { display: none; }
}
/* 游戏列表：名称与简介同一行，降低行高 */
.games-table .g-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.games-table .g-title b { font-size: 14px; }
.games-table .g-desc { font-size: 12px; }
.games-table .g-meta { font-size: 11px; margin-top: 2px; }
.games-table .mini-cover { width: 36px; height: 36px; font-size: 18px; }

/* ---------------- 列表页自适应高度（游戏 / 分类） ----------------
   页面撑满视口（内容区自行滚动）；列表面板占满剩余高度，
   表格行数超出时仅在表体内部滚动，表头吸顶固定 */
.page-games .layout, .page-tags .layout { height: 100vh; height: 100dvh; }
.page-games .sidebar, .page-tags .sidebar { overflow-y: auto; }
.page-games .main, .page-tags .main { overflow: hidden; }
.page-games .content, .page-tags .content { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 22px; gap: 12px; }
.page-games .fill-panel, .page-tags .fill-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page-games .fill-panel .table-wrap, .page-tags .fill-panel .table-wrap { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* ---------------- 意见反馈页：面板占满内容区高度，列表超出时仅在列表内部滚动 ---------------- */
.page-feedback .content { flex: 1; min-height: 0; overflow: hidden; padding: 22px; }
.page-feedback .panel { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.page-feedback .panel .fb-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; margin: 0 -18px -18px; }
.page-games .fill-panel .table thead th, .page-tags .fill-panel .table thead th {
  position: sticky; top: 0; z-index: 5;
  background: #171e34;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .1);
}
.page-games .games-count { white-space: nowrap; }

/* ---------------- 管理员页：收紧卡片纵向间距 ----------------
   工具栏与第一张卡片紧贴（间距 0）；卡片之间、卡片与底部说明之间保持 10px。
   注意：卡片之间夹有隐藏表单（display:none，不参与布局），相邻兄弟选择器不适用，故用 ~ */
.page-users .content { gap: 0; }
.page-users .user-card ~ .user-card { margin-top: 10px; }
.page-users .content > p { margin-top: 10px; }

/* ---------------- 自定义下拉菜单 ---------------- */
.cselect { position: relative; width: 100%; }
.cselect-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--border); color: var(--text);
  border-radius: 11px; padding: 10px 12px; font-size: 13px; font-family: inherit;
  cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s, background .15s;
}
.cselect-btn:hover { background: rgba(255, 255, 255, .1); }
/* 聚焦/展开均不高亮描边，仅靠下拉列表与箭头翻转指示展开状态 */
.cselect-btn:focus,
.cselect-btn:focus-visible,
.cselect.open .cselect-btn { outline: none; }
.cselect-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect-arrow { display: flex; color: var(--muted); transition: transform .18s ease; flex: 0 0 auto; }
.cselect.open .cselect-arrow { transform: rotate(180deg); color: var(--accent); }

.cselect-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: #161c33; border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px; padding: 6px 4px 6px 6px;
  box-shadow: 0 22px 48px -16px rgba(0, 0, 0, .8);
  max-height: 240px; overflow-y: auto;
  overscroll-behavior: contain;
  display: none;
}
.cselect.open .cselect-list { display: block; animation: csIn .16s ease; }
@keyframes csIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
.cselect-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
  font-size: 13px; color: rgba(245, 247, 255, .82);
  transition: background .12s, color .12s;
}
.cselect-opt:hover { background: rgba(109, 139, 255, .18); color: #fff; }
.cselect-check { display: none; color: #a5b8ff; flex: 0 0 auto; }
.cselect-opt.active {
  background: linear-gradient(135deg, rgba(109, 139, 255, .38), rgba(176, 109, 255, .28));
  color: #fff; font-weight: 600;
}
.cselect-hidden { display: none !important; }
/* 下拉宽度按文字自适应，不再固定 160px（「全部分类」这类短文案不再留大片空白） */
.filter-form .cselect { width: auto; }
/* 文字右侧预留约一个字的宽度，切换到更长选项时宽度变化不跳变 */
.filter-form .cselect-label { padding-right: 1em; }

/* ---------------- 管理员卡片 ---------------- */
.user-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr) auto;
  gap: 14px;
  align-items: end;
}
.user-grid .field { margin-bottom: 0; }
.user-card {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
}
.user-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.avatar {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: #fff;
}
.user-id { display: flex; flex-direction: column; line-height: 1.5; min-width: 0; }
.user-id b { font-size: 14px; }
.user-id small { color: var(--muted); font-size: 12px; }
.user-id .cur { color: var(--ok); }
/* 账号信息附加项：桌面端行内以「·」分隔，手机端各自独占一行 */
.user-line { display: inline; }
.user-line::before { content: ' · '; }
@media (max-width: 640px) {
  .user-line { display: block; }
  .user-line::before { content: ''; }
}
.user-actions { margin-left: auto; display: flex; gap: 8px; }
.hidden-form { display: none; }

@media (max-width: 1100px) {
  .user-grid { grid-template-columns: repeat(2, 1fr); }
  .user-grid .field:last-child, .user-grid .field:nth-last-child(2) { justify-self: start; }
}

/* ---------------- 登录页 ---------------- */
.login-body { display: flex; flex-direction: column; min-height: 100vh; }
.login-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card {
  width: 100%; max-width: 380px;
  transform: translateY(-28px);
  background: rgba(255,255,255,.06); border: 1px solid var(--border);
  border-radius: 20px; padding: 28px;
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
}
.login-head { text-align: center; margin-bottom: 20px; }
.login-logo { width: 52px; height: 52px; border-radius: 14px; object-fit: contain; background: rgba(255,255,255,.08); }
.login-head h1 { margin: 10px 0 2px; font-size: 20px; }
.login-head p { margin: 0; color: var(--muted); font-size: 13px; }
.login-card .btn-primary { width: 100%; margin-top: 6px; padding: 11px; }
.login-card-title { display: none; text-align: center; font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 20px; }
/* 桌面端：左右分栏布局（移动端默认隐藏左侧品牌栏，保持原样） */
.login-aside { display: none; }
/* 左侧品牌区：禁止选中、禁止图片拖拽 */
@media (min-width: 768px) {
  .login-aside {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .login-aside img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
  }
}
.login-split { display: contents; } /* 移动端：包裹层透明，布局与原来完全一致 */
@media (min-width: 768px) {
  .login-main {
    flex-direction: row;
    align-items: center;        /* 整体在页面中垂直居中 */
    justify-content: center;
    gap: 0;
  }
  .login-split {
    display: flex;              /* 桌面端拼接容器：高度由表单卡决定 */
    align-items: stretch;
    width: 720px;               /* 总宽固定，左右两栏各占一半等宽 */
    max-width: 90vw;
  }
  .login-aside {
    align-self: stretch;        /* 跟随右侧卡片高度，保持一体 */
    flex: 1 1 0;                /* 与右侧等宽 */
    box-sizing: border-box;     /* 内边距计入盒宽，避免右侧被撑宽 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 44px;
    border-radius: 22px 0 0 22px;
    background: linear-gradient(135deg, rgba(78,204,163,.20), rgba(99,102,241,.20));
    border: 1px solid var(--border);
    border-right: none;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
    position: relative;
    overflow: hidden;
  }
  .login-card {
    transform: none;            /* 去掉移动端的整体上移 */
    flex: 1 1 0;                /* 与左侧等宽 */
    box-sizing: border-box;     /* 内边距计入盒宽，左右严格等宽 */
    border-radius: 0 22px 22px 0;
    border-left: none;          /* 去掉中缝双线，视觉一体 */
    max-width: none;
    padding: 40px 44px;         /* 左右边距与左侧一致，内容更舒展且左右同款 */
    display: flex;
    flex-direction: column;
    justify-content: center;    /* 内容在右侧区域内整体垂直居中 */
  }
  .login-head { display: none; } /* 桌面端品牌信息已在左侧展示，避免重复 */
  .login-card-title { display: block; } /* 仅桌面端显示该标题 */
  .aside-inner { position: relative; z-index: 1; }
  .aside-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .aside-logo { width: 24px; height: 24px; border-radius: 7px; object-fit: contain; background: rgba(255,255,255,.12); flex: 0 0 auto; }
  .aside-site { font-size: 15px; font-weight: 500; color: var(--muted); }
  .aside-title {
    margin: 4px 0 26px;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 2px 16px rgba(78,204,163,.35);
  }
  .aside-feats { list-style: none; margin: 26px 0 0; padding: 0; }
  .aside-feats li {
    display: flex; align-items: center; gap: 10px;
    color: #e8e8ef; font-size: 14px; line-height: 1.5;
    padding: 7px 0;
  }
  .feat-dot {
    flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
    background: linear-gradient(135deg, #4ecca3, #6366f1);
    box-shadow: 0 0 8px rgba(78,204,163,.6);
  }
  .aside-glow {
    position: absolute; width: 240px; height: 240px; border-radius: 50%;
    background: radial-gradient(circle, rgba(78,204,163,.35), transparent 70%);
    top: -70px; right: -70px; pointer-events: none;
  }
}
.login-hint {
  margin-top: 16px; padding: 10px 12px; border-radius: 12px; font-size: 12px;
  background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.3); color: #fde68a; text-align: center;
}
.login-hint span { color: var(--muted); }
.login-back { display: block; text-align: center; margin-top: 16px; font-size: 13px; color: var(--muted); }
/* 登录页页脚（与首页底部一致） */
.login-footer { border-top: 1px solid var(--border); padding: 22px 0; text-align: center; color: var(--muted); font-size: 13px; }
.login-footer a { color: inherit; text-decoration: none; }
.input-icon { position: relative; }
.input-icon > svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--muted); pointer-events: none;
}
.field .input-icon input { padding-left: 38px; }

/* ---------------- 角色管理 ---------------- */
.roles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 18px; }
.role-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: rgba(255,255,255,.03); }
.role-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);  /* 头部下方拉通分割线，与卡片内边距对齐 */
}
.role-name { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.role-card-act { display: flex; align-items: center; gap: 6px; }
/* 角色卡片内的「全选」按钮：再缩小一点 */
.role-card-act .btn-mini { padding: 3px 9px; font-size: 11px; border-radius: 8px; }
.role-perms { display: flex; flex-direction: column; gap: 6px; }
.perm-row { display: flex; align-items: center; gap: 10px; }
.perm-mod { flex: 0 0 72px; color: var(--muted); font-size: 12.5px; }
.perm-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.perm-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; cursor: pointer; color: var(--text); }
.perm-check.disabled { opacity: .65; cursor: default; }
.perm-check input { accent-color: var(--accent); }
.role-del-form { display: inline-flex; }
.add-role-form .field { max-width: 320px; }
.badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; line-height: 1.6; background: rgba(109,139,255,.18); color: #aebfff; }
.badge-warn { background: rgba(251,191,36,.16); color: #fcd34d; }
.badge-ok { background: rgba(16,185,129,.16); color: #34d399; }


/* ---------------- 响应式 ---------------- */
@media (max-width: 980px) {
  .edit-grid, .grid-2, .grid-3, .form-row, .form-row.color-row { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 40;
    transform: translateX(-100%); transition: transform .22s ease;
    background: rgba(11,16,32,.96);
  }
  .sidebar.open { transform: translateX(0); }
  .btn-menu { display: inline-flex; }
  .content { padding: 16px; }
  /* 手机端保留管理员身份显示；名称过长时省略号截断，避免挤爆顶栏 */
  .top-right { min-width: 0; }
  .who-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  /* 游戏列表筛选栏：搜索框独占一行；分类/状态/筛选/重置合排一行（电脑端为自然流式换行，不受影响） */
  .filter-form { flex-wrap: wrap; }
  .filter-form > input[type=text] { flex: 1 1 100%; min-width: 0; }
  .filter-form .cselect { flex: 0 1 auto; min-width: 0; }
  .filter-form > .btn { flex: 0 0 auto; white-space: nowrap; }
  /* 手机端隐藏「状态」筛选（类名经 JS 透传到 .cselect 外层；select 仍随表单提交，已有筛选不丢失） */
  .filter-form .filter-st { display: none; }
  /* 分类添加行：输入框 + 添加分类 + 分类显示 合排一行（说明文字顺延下一行） */
  .inline-add > input[type=text] { flex: 1 1 auto; min-width: 0; text-overflow: ellipsis; }
  .inline-add .btn-primary,
  .inline-add .btn-ghost { flex: 0 0 auto; white-space: nowrap; padding: 9px 12px; font-size: 12.5px; }
  /* 手机端隐藏「最近添加的游戏」面板（信息与游戏管理页重复，窄屏优先看统计） */
  .panel-recent { display: none; }
  /* 手机端隐藏「最近登录记录」面板（明细可到访问统计页查看） */
  .panel-logins { display: none; }
  /* 手机端隐藏统计页的「每日明细 / 登录日志」长表格，桌面端保留 */
  .panel-daily, .panel-logs { display: none; }
  /* 手机端隐藏游戏简介（含分隔符），只保留 ID，窄列里更紧凑 */
  .games-table .g-desc { display: none; }
  /* 手机端隐藏纵向滚动条（保留滚动功能），电脑端正常显示 */
  .content, .sidebar, .side-nav, .table-wrap, .emoji-pop-grid, .color-pop-grid {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .content::-webkit-scrollbar, .sidebar::-webkit-scrollbar, .side-nav::-webkit-scrollbar,
  .table-wrap::-webkit-scrollbar, .emoji-pop-grid::-webkit-scrollbar, .color-pop-grid::-webkit-scrollbar {
    display: none;
  }
  /* 手机端表格不换行：单元格内容保持单行，避免窄列把文字拆成多行；
     超出部分由 .table-wrap 的横向滚动兜底 */
  .games-table th, .games-table td { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
  .games-table code { word-break: keep-all; }
}

/* ---------------- 确认弹窗（替代原生 confirm） ---------------- */
body.dlg-open { overflow: hidden; }
.dlg-mask {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(4, 7, 18, .62);
  backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.dlg-mask.show { display: flex; animation: dlgFade .16s ease; }
@keyframes dlgFade { from { opacity: 0; } to { opacity: 1; } }

.dlg {
  width: 100%; max-width: 400px;
  background: linear-gradient(180deg, rgba(32, 40, 72, .98), rgba(16, 21, 42, .99));
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 34px 70px -22px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255,255,255,.03) inset;
  animation: dlgPop .2s cubic-bezier(.22, 1.2, .36, 1);
}
@keyframes dlgPop {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to { opacity: 1; transform: none; }
}

/* 头部：图标跨两行垂直居中，标题与正文左对齐成组 */
.dlg-body {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 13px;
  align-items: center; padding: 22px 22px 18px;
}
.dlg-ic {
  grid-column: 1; grid-row: 1 / span 2;
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(251, 191, 36, .14); color: var(--warn); border: 1px solid rgba(251, 191, 36, .32);
}
.dlg.danger .dlg-ic { background: rgba(248, 113, 113, .14); color: var(--err); border-color: rgba(248, 113, 113, .34); }
.dlg.dlg-accent .dlg-ic { background: rgba(109, 139, 255, .16); color: var(--accent); border-color: rgba(109, 139, 255, .36); }
.dlg.out .dlg-ic { background: rgba(109, 139, 255, .16); color: var(--accent); border-color: rgba(109, 139, 255, .36); }
.dlg-text { grid-column: 2; min-width: 0; }
.dlg-title { font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.dlg-title:empty { display: none; }
.dlg-msg { font-size: 13px; color: var(--muted); line-height: 1.7; word-break: break-word; }
.dlg-msg:empty { display: none; }

/* 底部：细分隔线 + 按钮等分，整体更平衡 */
.dlg-foot {
  display: flex; gap: 10px;
  padding: 13px 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .18);
}
.dlg-btn {
  flex: 1; padding: 10px 18px; border-radius: 10px;
  font-size: 13px; font-family: inherit; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  transition: filter .15s, background .15s, border-color .15s, box-shadow .15s, transform .08s;
}
.dlg-btn:hover { background: rgba(255, 255, 255, .14); }
.dlg-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109, 139, 255, .22); }
/* 弹窗高度自适应视口：整体不超出屏幕，内容区超出时内部滚动，头部与底部按钮固定可见 */
.dlg-fit {
  display: flex; flex-direction: column;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
}
.dlg-fit .dlg-content {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
}
/* 弹窗主按钮：与表单底部 .form-card .form-actions .btn-primary 同一套配色 */
.dlg-btn.ok {
  background: rgba(109, 139, 255, .24);
  border-color: rgba(109, 139, 255, .42);
  color: #eaeefc; font-weight: 500;
  box-shadow: none;
}
.dlg-btn.ok:hover { background: rgba(109, 139, 255, .32); filter: none; }
.dlg-btn.ok:active { filter: brightness(.96); }
.dlg-btn.ok.danger {
  background: rgba(248, 113, 113, .22);
  border-color: rgba(248, 113, 113, .44);
  color: #fecaca;
  box-shadow: none;
}
.dlg-btn.ok.danger:hover { background: rgba(248, 113, 113, .3); filter: none; }

/* ---------------- 通用模态框（表单弹窗） ---------------- */
.dlg-wide { max-width: 640px; }
.dlg-desc { margin-top: 4px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
/* 弹窗头部与表单之间一条拉通的分割线（.dlg-content 仅表单弹窗有，确认框不受影响） */
.dlg-content { padding: 16px 20px 0; border-top: 1px solid var(--border); }
.dlg-content .field { margin-bottom: 0; }
.dlg-content .field + .field { margin-top: 12px; }
.dlg-content .checkbox { color: var(--text); }
.dlg-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* display:grid 会覆盖 [hidden] 的 UA 默认样式，需显式隐藏（否则弹窗表单会直接显示在页面上） */
.dlg-form[hidden] { display: none; }
.dlg-form .field { margin-bottom: 0; }
/* .field + .field 的 margin-top 会把右列整体压低、与左列错位；网格内间距统一由 gap 控制 */
.dlg-content .dlg-form .field + .field { margin-top: 0; }
/* 输入框与自定义下拉按钮统一高度，保证同一行左右顶端严格对齐 */
.dlg-form .field input[type=text],
.dlg-form .field input[type=password],
.dlg-form .cselect-btn { height: 38px; }
/* 标签与控件之间间距略放宽 */
.dlg-form .field { gap: 7px; }
.dlg-form .full { grid-column: 1 / -1; }
/* 表单底部（状态行）与弹窗操作按钮之间留出间距 */
.dlg-content .dlg-form { padding-bottom: 18px; }
@media (max-width: 620px) {
  .dlg-form { grid-template-columns: 1fr; }
  /* 窄屏放不下左右布局，回退为上下堆叠 */
  .preview { flex-direction: column; align-items: center; }
  .preview-card { width: 100%; flex: 0 0 auto; max-width: 300px; }
  /* 纵向排列时 flex-basis 表示「高度」，必须改成 auto，
     否则卡片高度被固定，封面调高后下面的简介/按钮会被裁掉 */
  .dlg-content .preview .preview-card { width: 100%; flex: 0 0 auto; max-width: 300px; }
  .preview-tuner { width: 100%; }
  .preview-body { padding: 10px 11px 10px; gap: 4px; }
  .preview-body b { font-size: 14px; }
  .preview-body small {
    font-size: 12px; line-height: 1.5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* 窄屏时左列（预览卡 + 开关）与右侧参数区一样占满宽度 */
  .preview-side { flex: 0 0 auto; width: 100%; max-width: 300px; }
}

/* 编辑页预览下方的引导提示（卡片外观已移到游戏管理页统一设置） */
.preview-tip { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.preview-tip a { color: var(--accent); }

/* 卡片设置弹窗：宽版 + 左右布局；各层允许收缩，绝不溢出弹窗 */
.dlg-content .card-style-form { padding-bottom: 24px; min-width: 0; }
.dlg-content .preview { gap: 16px; min-width: 0; }
.dlg-content .preview-tuner { min-width: 0; overflow: hidden; }
.dlg-content .preview-side { flex: 0 0 210px; }
.dlg-content .preview-side .preview-card { width: 100%; flex: 0 0 auto; }
.dlg-content .tuner-row { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }