/* 鲸落改枪码 / RBH 网页样式
 * 前台方案库、管理后台、用户个人中心共用这一份 CSS。
 * 深色侧栏 + 浅底内容区。
 */

:root {
  --primary: #2f6bff;
  --primary-hover: #4c82ff;
  --primary-active: #1d4ed8;
  --primary-soft: #edf3ff;
  --success: #16a34a;
  --warning: #d97706;
  --error: #e11d48;
  --heading: #111827;
  --text: #4b5563;
  --muted: #9ca3af;
  --border: #eef1f6;
  --border-input: #d8dee8;
  --bg: #f3f5f9;
  --card: #fff;
  --sider: #0b1220;
  --sider-text: rgba(255, 255, 255, 0.68);
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.05);
  --header-bg: rgba(255, 255, 255, 0.82);
  --input-bg: #fff;
  --chip-bg: #eef1f6;
  --thumb-from: #f8faff;
  --thumb-to: #eef2f8;
  --code-bg: #f4f7fb;
  --overlay: rgba(15, 23, 42, 0.45);
  --radius: 12px;
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
    "Noto Sans SC", sans-serif;
  --sider-w: 224px;
  --theme-x: 50%;
  --theme-y: 32px;
  --theme-r: 120vmax;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body, .pro-body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.57;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
a { color: var(--primary); }
img, svg {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* 整页布局：左侧栏 + 右侧内容 */
.pro-body { display: flex; min-height: 100vh; }

/* 左侧导航栏 */
.pro-sider {
  width: var(--sider-w);
  flex-shrink: 0;
  background: var(--sider);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  z-index: 20;
  user-select: none;
  -webkit-user-select: none;
}
.sider-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 64px;
  padding: 0 20px;
  text-decoration: none;
  color: #fff;
  font-weight: 650;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.sider-mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(145deg, #4096ff, #1677ff);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(22, 119, 255, 0.35);
}
.sider-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  background: #05080f;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}
/* 侧栏菜单按钮 */
.sider-menu {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.nav-link, .side-btn.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: var(--sider-text);
  font: inherit;
  text-align: left;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  text-decoration: none;
}
.nav-link:hover, .side-btn.nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-link.is-active, .side-btn.active {
  background: var(--primary) !important;
  color: #fff !important;
}
.nav-link.is-active .muted, .side-btn.active .muted { color: rgba(255,255,255,.8); }
.nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  background: #ff4d4f;
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  line-height: 18px;
  text-align: center;
}
.nav-badge:empty { display: none; }
.nav-link.is-active .nav-badge,
.side-btn.active .nav-badge {
  background: #fff;
  color: var(--primary);
}

.nav-ico { width: 18px; height: 18px; flex-shrink: 0; }
.sider-foot {
  padding: 16px 20px 20px;
  color: rgba(255,255,255,.38);
  font-size: 12px;
}

.pro-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* 顶栏 */
.pro-header {
  height: 64px;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 15;
}
.header-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  border: 0; background: transparent; color: var(--heading);
  font: inherit; cursor: pointer; padding: 6px 0;
}
.header-crumb {
  font-weight: 600;
  color: var(--heading);
  font-size: 15px;
}
.header-web-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.header-web-hint {
  font-size: 13px;
  color: var(--primary);
  max-width: min(420px, 36vw);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.header-user, .user-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--heading);
  font-size: 13px;
  padding: 4px 10px 4px 4px;
  background: var(--chip-bg);
  border-radius: 999px;
}
.account-menu { position: relative; }
.account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 3px 14px 3px 3px;
  border: 0;
  background: var(--chip-bg);
  border-radius: 999px;
  cursor: pointer;
}
.account-trigger:hover { background: var(--primary-soft); }
.account-trigger { overflow: visible; position: relative; }
.account-avatar-slot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
  overflow: visible;
}
.account-avatar-slot .avatar,
.account-avatar-slot .avatar-fallback {
  width: 32px;
  height: 32px;
  font-size: 13px;
}
.account-name {
  font-size: 14px;
  color: var(--heading);
  max-width: 9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.account-caret {
  width: 14px;
  height: 14px;
  color: #8c8c8c;
  flex-shrink: 0;
  transform: rotate(0deg);
  transition: transform 0.22s ease;
}
.account-trigger[aria-expanded="true"] .account-caret {
  transform: rotate(180deg);
}
.account-drop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 248px;
  padding: 6px;
  background: var(--card);
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  z-index: 30;
}
.account-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  color: var(--heading);
  font: inherit;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}
.account-item:hover { background: #f5f7fa; }
.account-item svg {
  width: 16px;
  height: 16px;
  color: #8c8c8c;
  flex-shrink: 0;
}
.account-sep {
  height: 1px;
  background: #f0f0f0;
  margin: 4px 6px;
}
.account-notice-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: #ff4d4f;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
.account-notice-badge:empty,
.account-notice-badge.hidden { display: none; }
.account-notices {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 4px 8px;
}
.account-notices.hidden { display: none; }
.account-notice-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: #fff7e6;
  color: var(--heading);
  font: inherit;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}
.account-notice-item:hover { background: #fff1cc; }
.account-notice-item.is-ok { background: #f6ffed; }
.account-notice-item.is-ok:hover { background: #d9f7be; }
.account-notice-item.is-no { background: #fff1f0; }
.account-notice-item.is-no:hover { background: #ffccc7; }
.account-notice-item b {
  font-weight: 650;
  font-size: 13px;
}
.account-notice-item span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #e8edf3;
}
.avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #4b5d73;
}
.avatar-lg {
  width: 72px;
  height: 72px;
  font-size: 26px;
}
.avatar-sm {
  width: 22px;
  height: 22px;
  font-size: 11px;
}
.avatar-box {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 12px 0 20px;
}
.avatar-wrap {
  --av: 32px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--av);
  height: var(--av);
  flex-shrink: 0;
  vertical-align: middle;
  overflow: visible;
}
.avatar-wrap.is-sm { --av: 18px; }
.avatar-wrap.is-lg { --av: 72px; }
.avatar-wrap.is-eval { --av: 188px; }
.avatar-wrap.is-podium { --av: 88px; }
.account-avatar-slot .avatar-wrap { --av: 32px; }
.meta-chip { overflow: visible; }
.meta-chip .avatar-wrap {
  --av: 18px;
  width: 18px;
  height: 18px;
  margin-right: 2px;
}
.meta-chip .avatar-wrap .avatar-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  z-index: 1;
  background: #d9dee6;
}
.meta-chip .avatar-wrap .avatar-frame {
  width: 18px;
  height: 18px;
  z-index: 2;
}
.detail-hero .avatar-wrap { --av: 88px; }
.podium-col .avatar-wrap { --av: 88px; margin: 2px 0 12px; }
.podium-col.place1 .avatar-wrap { --av: 112px; }
.author-rank-row .avatar-wrap { --av: 44px; }
.avatar-wrap .avatar-core {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58%;
  height: 58%;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 1;
}
.avatar-wrap .avatar,
.avatar-wrap .avatar-fallback,
.podium-col .avatar-wrap .podium-avatar,
.podium-col.place1 .avatar-wrap .podium-avatar,
.author-rank-row .avatar-wrap .avatar {
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  border: 0;
  box-shadow: none;
  object-fit: cover;
  border-radius: 50%;
}
.avatar-wrap .avatar-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}
.frame-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 20px;
}
.frame-opt {
  width: 88px;
  padding: 8px 6px 10px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font: inherit;
  font-size: 12px;
  color: var(--text);
}
.frame-opt img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  margin: 0 auto 6px;
}
.frame-opt.is-on,
.frame-opt:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}
.frame-admin-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.frame-admin-card {
  width: 140px;
  padding: 10px;
  background: var(--card);
  border-radius: 10px;
  box-shadow: var(--shadow);
  text-align: center;
}
.frame-admin-card img {
  width: 88px;
  height: 88px;
  object-fit: contain;
}
.frame-admin-card .name {
  margin: 6px 0 8px;
  font-size: 13px;
}
.user-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.user-row-click { cursor: pointer; }
.user-row-click:hover { background: var(--primary-soft, #f0f5ff); }
.user-row-click .invite-actions { cursor: default; }
.user-invite-sheet { width: min(560px, 100%); }
.meta-chip.author-chip {
  padding-left: 4px;
}
button.meta-chip.author-chip {
  border: 0;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
}
button.meta-chip.author-chip:hover {
  background: var(--primary-soft);
  color: var(--primary);
}
button.meta-chip.maker-chip:hover {
  background: #fff7e6;
  color: #d46b08;
}
.author-account {
  margin-left: 6px;
  color: var(--muted);
  font-weight: 500;
}
.author-count {
  margin-left: 6px;
  color: var(--primary);
  font-weight: 650;
}
.podium-account,
.author-rank-mid .account {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: #8a7a5a;
}
.meta-chip .avatar {
  width: 18px;
  height: 18px;
  margin-right: 2px;
}
.meta-chip .avatar-wrap .avatar,
.meta-chip .avatar-wrap .avatar-fallback {
  width: 12px !important;
  height: 12px !important;
  margin: 0;
  font-size: 8px;
  line-height: 12px;
}

/* 主内容区 */
.pro-content { padding: 24px 28px 48px; }
.content-inner { width: min(1180px, 100%); margin: 0 auto; }

.page { display: none; }
.page.is-active { display: block; }

/* 「网页」：主内容区铺满，与方案库同一套侧栏 + 顶栏 */
.pro-body.is-web-page {
  height: 100vh;
  overflow: hidden;
}
.pro-body.is-web-page .pro-wrap {
  min-height: 0;
  height: 100%;
}
.pro-body.is-web-page .pro-content {
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
}
.pro-body.is-web-page .content-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  flex: 1;
  min-height: 0;
}
#page-web.is-active {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-height: 0;
}
.web-frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: #fff;
  min-height: 0;
}

/* 大厅聊天：铺满主内容区 */
.pro-body.is-chat-page {
  height: 100vh;
  overflow: hidden;
}
.pro-body.is-chat-page .pro-wrap {
  min-height: 0;
  height: 100%;
}
.pro-body.is-chat-page .pro-content {
  flex: 1;
  min-height: 0;
  padding: 16px 20px 20px;
  overflow: hidden;
  display: flex;
}
.pro-body.is-chat-page .content-inner {
  width: min(1180px, 100%);
  max-width: none;
  margin: 0 auto;
  display: flex;
  flex: 1;
  min-height: 0;
}
#page-chat.is-active {
  display: flex;
  flex: 1;
  width: 100%;
  min-height: 0;
}
.chat-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 12px;
  flex: 1;
  min-height: 0;
  width: 100%;
}
.chat-main, .chat-side {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.chat-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.chat-head h1 { margin: 0; font-size: 20px; color: var(--heading); }
.chat-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.chat-head-online {
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}
.chat-head-online b { color: var(--primary); }
.chat-log {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-empty { color: var(--muted); font-size: 13px; margin: auto; }
.chat-msg {
  display: flex;
  gap: 8px;
  max-width: 82%;
  align-items: flex-start;
}
.chat-msg.is-mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.chat-msg .avatar-wrap { --av: 32px; flex-shrink: 0; }
.chat-bubble {
  background: #f5f7fa;
  border-radius: 12px;
  padding: 8px 12px;
  min-width: 0;
}
.chat-msg.is-mine .chat-bubble {
  background: var(--primary-soft);
}
.chat-bubble .who {
  font-size: 12px;
  font-weight: 600;
  color: var(--heading);
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-bubble .who .admin-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  background: #fff;
  border-radius: 999px;
  padding: 0 6px;
  height: 18px;
  line-height: 18px;
}
.chat-bubble .txt {
  margin-top: 4px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--heading);
  font-size: 14px;
  line-height: 1.5;
}
.chat-bubble .when {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}
.chat-del {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  margin-left: auto;
}
.chat-del:hover { color: var(--error); }
.chat-compose {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  align-items: flex-end;
}
.chat-compose textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  min-height: 40px;
  max-height: 120px;
  border: 1px solid var(--border-input);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
}
.chat-compose textarea:focus {
  outline: none;
  border-color: var(--primary);
}
.chat-side-title {
  padding: 14px 16px 10px;
  font-weight: 600;
  color: var(--heading);
  border-bottom: 1px solid var(--border);
}
.chat-online-list {
  padding: 10px 12px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-online-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--heading);
}
.chat-online-item .avatar-wrap { --av: 28px; }
.chat-online-item .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
  margin-left: auto;
}

/* 页面标题行 */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.page-head.page-head-guns {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  margin-bottom: 14px;
  position: relative;
}
.page-head-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 10px 6px 10px 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.2;
  background: var(--card);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.page-head-meta .meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 0 14px 0 12px;
  border-right: 1px solid rgba(15, 23, 42, 0.08);
}
.page-head-meta .meta-item:last-child {
  border-right: 0;
  padding-right: 16px;
}
.page-head-meta b {
  margin: 0;
  color: var(--heading);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-style: normal;
}
.page-head-meta em {
  margin: 0;
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
}
.page-head-meta .meta-online {
  align-items: center;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  color: inherit;
}
button.meta-item.meta-online:hover,
button.meta-item.meta-online[aria-expanded="true"] {
  color: var(--primary);
}
button.meta-item.meta-online:hover em,
button.meta-item.meta-online[aria-expanded="true"] em {
  color: var(--primary);
}
.page-head-meta .meta-online b.is-tick {
  display: inline-block;
  animation: online-tick 0.35s ease;
}
@keyframes online-tick {
  0% { transform: scale(1); }
  40% { transform: scale(1.28); }
  100% { transform: scale(1); }
}
.online-users-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  width: min(320px, calc(100vw - 48px));
  padding: 12px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}
.online-users-pop.hidden { display: none; }
.online-users-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.online-users-head strong {
  font-size: 14px;
  color: var(--heading);
}
.online-users-close {
  border: 0;
  background: #f3f5f8;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
}
.online-users-close:hover {
  color: var(--heading);
  background: #e8edf4;
}
.online-users-body {
  max-height: 280px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.online-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  background: #f7f9fc;
}
.online-user-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.online-user-role {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--muted);
}
.online-users-guest {
  margin: 0;
  padding: 8px;
  font-size: 13px;
  color: var(--muted);
}
.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #52c41a;
  box-shadow: 0 0 0 4px rgba(82, 196, 26, 0.16);
  animation: online-pulse 1.8s ease-in-out infinite;
  align-self: center;
}
@keyframes online-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(82, 196, 26, 0.16); }
  50% { box-shadow: 0 0 0 6px rgba(82, 196, 26, 0.08); }
}
.page-head.has-online {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.page-head.has-online > :first-child { justify-self: start; }
.page-head.has-online > .kpi-inline { justify-self: end; }
.online-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: center;
  padding: 8px 14px;
  background: var(--card);
  border-radius: 999px;
  box-shadow: var(--shadow);
  color: var(--heading);
  font-size: 13px;
  white-space: nowrap;
}
.online-pill b {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: inline-block;
}
.online-pill b.is-tick {
  animation: online-tick 0.35s ease;
}
.online-pill span {
  color: var(--muted);
  font-size: 12px;
}
.page-head h1, .page-intro h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -0.02em;
}
.page-head p, .page-intro p {
  margin: 4px 0 0;
  color: var(--muted);
}
.page-head.page-head-guns .page-head-meta {
  margin: 0;
}
.section-title {
  margin: 28px 0 12px;
  font-size: 16px;
  font-weight: 650;
  color: var(--heading);
}
.guide-feishu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(760px, 100%);
  min-height: 88px;
  margin: 0 0 22px;
  padding: 20px 32px;
  border-radius: 16px;
  background: linear-gradient(135deg, #4096ff 0%, #1677ff 46%, #0958d9 100%);
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(22, 119, 255, 0.42);
  animation: guide-feishu-pulse 1.6s ease-in-out infinite;
}
.guide-feishu-btn:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(22, 119, 255, 0.5);
}
@keyframes guide-feishu-pulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(22, 119, 255, 0.42); }
  50% { box-shadow: 0 10px 36px rgba(22, 119, 255, 0.7); }
}
.guide-jump {
  max-width: 420px;
  padding: 28px 24px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.guide-jump h1 {
  margin: 0 0 8px;
  font-size: 22px;
  color: var(--heading);
}
.guide-jump p {
  margin: 0 0 16px;
  color: var(--muted);
}
.guide-article {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
}
.guide-card {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px 18px;
}
.guide-card h2 {
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--heading);
}
.guide-card p, .guide-card li {
  margin: 0 0 8px;
  color: var(--text);
  line-height: 1.7;
}
.guide-card ol {
  margin: 0;
  padding-left: 20px;
}
.guide-card.warn {
  background: #fff7e6;
  box-shadow: none;
  border: 1px solid #ffe58f;
}
.guide-card.more {
  background: var(--primary-soft);
  box-shadow: none;
}
.guide-step {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
}

.kpi-inline {
  display: flex;
  gap: 18px;
  padding: 10px 16px;
  background: var(--card);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.kpi-inline span {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}
.kpi-inline b {
  font-size: 18px;
  color: var(--heading);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 筛选卡片、后台面板容器 */
.filter-card, .ant-card, .panel {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.filter-card { padding: 14px 18px 10px; margin-bottom: 16px; }
.filter-card.compact { padding: 12px 18px; }
.panel { padding: 22px; }

.search-field {
  position: relative;
  display: block;
  margin-bottom: 14px;
}
.search-tools {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.search-tools .search-field {
  flex: 1 1 240px;
  min-width: 0;
  margin-bottom: 0;
}
.guns-view-toggle {
  flex-shrink: 0;
  user-select: none;
}
.guns-view-track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
.guns-view-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
  transition: left .32s cubic-bezier(.34,.9,.28,1);
  pointer-events: none;
  z-index: 0;
}
.guns-view-track.is-codes .guns-view-thumb {
  left: 50%;
}
.guns-view-opt {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  padding: 7px 16px;
  margin: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
  cursor: pointer;
  line-height: 20px;
  white-space: nowrap;
  min-width: 74px;
  text-align: center;
  transition: color .18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.guns-view-opt:hover {
  color: var(--heading);
}
.guns-view-opt.is-active {
  color: var(--primary);
}
.guns-source-toggle {
  cursor: pointer;
}
.guns-source-toggle:focus-visible {
  outline: 2px solid rgba(47, 107, 255, 0.45);
  outline-offset: 2px;
  border-radius: 999px;
}
.guns-source-toggle .guns-view-track {
  background: var(--chip-bg);
  border-color: var(--border);
  min-width: 168px;
}
.guns-source-toggle .guns-view-thumb {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 10px rgba(47, 107, 255, 0.1);
}
.guns-source-toggle .guns-view-opt {
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 700;
  min-width: 0;
  cursor: inherit;
}
.guns-source-toggle .guns-view-opt::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  background: currentColor;
  opacity: 0.75;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.guns-source-toggle .guns-view-opt[data-guns-view="weapons"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
}
.guns-source-toggle .guns-view-opt[data-guns-view="codes"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h6'/%3E%3C/svg%3E");
}
.guns-source-toggle .guns-view-opt.is-active {
  color: #1d4ed8;
}
.guns-source-toggle .guns-view-opt.is-active::before {
  opacity: 1;
}
#weaponGrid,
#gunsListView,
#gunsDetailView {
  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(.22,.8,.2,1);
}
#weaponGrid.is-view-out,
#gunsListView.is-view-out,
#gunsDetailView.is-view-out {
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  pointer-events: none;
}
#weaponGrid.is-view-in .weapon-card,
#weaponGrid.is-view-in .empty,
#gunsListView.is-view-in .weapon-card,
#gunsListView.is-view-in .empty,
#gunsDetailView.is-view-in .detail-panel,
#gunsDetailView.is-view-in .scheme-card,
#gunsDetailView.is-view-in .code-item {
  animation: guns-view-rise 0.42s cubic-bezier(.22,.8,.2,1) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}
.weapon-card.is-enter,
.empty.is-enter,
.scheme-card.is-enter,
.code-item.is-enter,
.detail-panel.is-enter {
  content-visibility: visible;
  animation: guns-view-rise 0.42s cubic-bezier(.22,.8,.2,1) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}
#weaponGrid.is-view-in .weapon-card,
#gunsListView.is-view-in .weapon-card {
  content-visibility: visible;
}
@keyframes guns-view-rise {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.doc-code-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.doc-code-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: center;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  cursor: pointer;
}
.doc-code-row:hover { background: #f7f9ff; }
.doc-code-no {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  font-size: 16px;
  letter-spacing: 0.02em;
}
.doc-code-title {
  font-weight: 700;
  color: var(--heading);
  font-size: 15px;
}
.doc-code-meta {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}
.doc-code-share {
  margin-top: 6px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  color: var(--primary);
  word-break: break-all;
  line-height: 1.45;
}
.doc-code-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
}
.doc-code-actions .review-fc {
  min-width: 132px;
}
.doc-code-actions .review-fc input {
  width: 100%;
  height: 32px;
}
@media (max-width: 720px) {
  .filter-row.filter-quick .filter-more-btn {
    margin-left: 0;
  }
  .filter-row.filter-quick .tag-list.price-chips {
    flex: 1 1 100%;
  }
}
.admin-body .doc-code-row { cursor: default; }
.admin-body .doc-code-no { min-width: 72px; }
.search-field svg {
  position: absolute;
  left: 12px; top: 50%;
  width: 16px; height: 16px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.search-field input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--border-input);
  border-radius: 8px;
  padding: 0 12px 0 36px;
  font: inherit;
  outline: none;
  background: var(--input-bg);
  margin: 0;
}
.search-field input:focus,
.field input:focus,
.field textarea:focus,
input:focus, textarea:focus {
  border-color: var(--primary);
  background: var(--input-bg);
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.15);
}

.search-tools + .filter-row {
  border-top: 0;
  padding-top: 2px;
}
.filter-row, .filter-block {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 6px 0;
  border-top: 1px dashed var(--border);
}
.filter-k, .filter-label {
  flex: 0 0 36px;
  color: var(--muted);
  padding-top: 5px;
  font-size: 13px;
}
.filter-row.filter-quick {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.filter-row.filter-quick .filter-k {
  padding-top: 0;
  line-height: 30px;
}
.filter-row.filter-quick .tag-list {
  flex: 0 1 auto;
}
.filter-row.filter-quick .tag-list.price-chips {
  flex: 1 1 200px;
  min-width: 0;
}
.filter-more-btn {
  flex: 0 0 auto;
  margin-left: auto;
  border: 1px solid var(--border-input);
  background: var(--card);
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 22px;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter-more-btn:hover {
  color: var(--primary);
  border-color: rgba(22, 119, 255, 0.35);
  background: var(--primary-soft);
}
.filter-more-btn.is-on {
  color: var(--primary);
  border-color: rgba(22, 119, 255, 0.45);
  background: var(--primary-soft);
}
.filter-row.filter-author {
  display: flex;
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-color: transparent;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    max-height 0.32s cubic-bezier(.22,.8,.2,1),
    opacity 0.22s ease,
    transform 0.28s cubic-bezier(.22,.8,.2,1),
    padding 0.28s ease,
    margin 0.28s ease,
    border-color 0.28s ease;
}
.filter-row.filter-author.is-open {
  max-height: min(48vh, 360px);
  opacity: 1;
  margin-top: 4px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-top-color: var(--border);
  pointer-events: auto;
  transform: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.tag-list.tag-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
.tag-list.tag-scroll .seg-item {
  flex: 0 0 auto;
}
.tag-list.authors {
  min-width: 0;
  flex: 1;
  flex-wrap: wrap;
  align-items: flex-start;
}
.tag-list.authors .seg-item {
  flex: 0 0 auto;
  white-space: nowrap;
}
.filter-row.has-price {
  flex-wrap: wrap;
}
.filter-row .tag-list.mode-inline,
.filter-row .tag-list.gold-inline {
  flex: 0 1 auto;
}
.filter-row .tag-list.price-chips {
  flex: 1 1 240px;
  min-width: 0;
}
.filter-hint {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--primary);
}

.tag-list, .seg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}
.seg-item, .chip {
  border: 0;
  background: var(--chip-bg);
  color: var(--text);
  font: inherit;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 22px;
}
.seg-item:hover, .chip:hover { color: var(--primary); background: var(--primary-soft); }
.seg-item.is-active, .chip.active {
  color: #fff;
  background: var(--primary);
  font-weight: 500;
}
.seg-item.is-active:hover, .chip.active:hover {
  color: #fff;
  background: var(--primary);
}

.seg.compact {
  display: flex;
  gap: 24px;
  background: none;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  padding: 0;
}
.seg.compact .seg-item {
  background: none;
  border-radius: 0;
  padding: 8px 0;
  color: var(--text);
  position: relative;
}
.seg.compact .seg-item.is-active {
  color: var(--primary);
  background: none;
}
.seg.compact .seg-item.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--primary);
}

.app-grid, .weapon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
/* 武器卡片（方案库 / 排行榜） */
.weapon-card, .app-card {
  background: var(--card);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  content-visibility: auto;
  contain-intrinsic-size: 0 188px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.weapon-card:hover, .app-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 35, 70, 0.08);
  border-color: #bae0ff;
}
.weapon-card .thumb-wrap, .app-card .thumb-wrap {
  height: 128px;
  background:
    radial-gradient(120px 60px at 50% 80%, rgba(22,119,255,.12), transparent 70%),
    linear-gradient(180deg, #f7f9fc, #eef2f6);
  display: grid;
  place-items: center;
  position: relative;
}
.weapon-card img, .app-card img {
  width: 82%;
  height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.12));
}
.card-count {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.card-count.likes {
  background: #cf1322;
  font-size: 12px;
  padding: 3px 9px;
}
.weapon-card .thumb-wrap .rank-n {
  position: absolute;
  top: 10px; left: 10px;
  font-weight: 800;
  font-size: 16px;
  color: var(--muted);
  line-height: 1;
}
.weapon-card.top1 .thumb-wrap .rank-n { color: #cf1322; }
.weapon-card.top2 .thumb-wrap .rank-n { color: #d48806; }
.weapon-card.top3 .thumb-wrap .rank-n { color: #1677ff; }
.weapon-card .name {
  justify-content: space-between;
}
.weapon-card .name > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-likes {
  color: #cf1322;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}
.author-rank {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}
.author-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  padding: 8px 0 0;
  background: transparent;
}
.podium-col {
  flex: 1;
  max-width: 210px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 12px 22px;
  cursor: pointer;
  transition: transform .18s ease;
}
.podium-col:hover { transform: translateY(-3px); }
.podium-col.place1 { min-height: 292px; z-index: 2; }
.podium-col.place2 { min-height: 246px; }
.podium-col.place3 { min-height: 220px; }
.podium-col.is-empty { cursor: default; opacity: .72; }
.podium-col.is-empty:hover { transform: none; }
.podium-icon { width: 48px; height: 36px; margin-bottom: 10px; }
.podium-col.place1 .podium-icon { width: 64px; height: 46px; }
.podium-crown { width: 100%; height: 100%; display: block; }
.podium-avatar {
  width: 56px;
  height: 56px;
  font-size: 22px;
  margin: 2px 0 12px;
  border: 2px solid #f0e6cc;
  box-shadow: 0 2px 8px rgba(160, 130, 60, .12);
}
.podium-col.place1 .podium-avatar {
  width: 72px;
  height: 72px;
  font-size: 26px;
  border-color: #e8c35a;
}
.podium-col.place2 .podium-avatar { border-color: #cfcbc3; }
.podium-col.place3 .podium-avatar { border-color: #d4a574; }
.podium-name {
  font-weight: 700;
  font-size: 18px;
  color: #3f3a34;
  line-height: 1.3;
  word-break: break-all;
}
.podium-col.place1 .podium-name { font-size: 20px; }
.podium-title {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #c4a35a;
}
.podium-col.place2 .podium-title { color: #9a958c; }
.podium-col.place3 .podium-title { color: #b07d4a; }
.author-rank-board {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.author-rank-row {
  display: grid;
  grid-template-columns: 40px 48px minmax(0, 1fr) 88px;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid #ead9b0;
  cursor: pointer;
}
.author-rank-row:last-child { border-bottom: 0; }
.author-rank-row:hover { background: #faf7f0; }
.author-rank-row.is-empty {
  cursor: default;
  opacity: .62;
}
.author-rank-row.is-empty:hover { background: transparent; }
.author-rank-row .avatar {
  width: 36px;
  height: 36px;
  font-size: 14px;
}
.rank-medal { width: 32px; height: 40px; display: block; }
.author-rank-mid { min-width: 0; }
.author-rank-mid .name {
  font-weight: 700;
  font-size: 16px;
  color: #3f3a34;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.place-badge {
  justify-self: end;
  padding: 5px 12px;
  border: 1px solid #d8c089;
  border-radius: 999px;
  color: #b08940;
  font-size: 13px;
  font-weight: 600;
  background: #fffdf8;
  white-space: nowrap;
}
.detail-hero .avatar-lg { width: 56px; height: 56px; font-size: 22px; }
.detail-hero .avatar-wrap .avatar,
.detail-hero .avatar-wrap .avatar-lg,
.detail-hero .avatar-wrap .avatar-fallback {
  width: 100% !important;
  height: 100% !important;
  background: #e8edf3;
  border-radius: 50%;
  object-fit: cover;
}
.weapon-card .card-body {
  padding: 12px 14px 14px;
}
.weapon-card .name, .app-card .name {
  font-weight: 650;
  font-size: 15px;
  color: var(--heading);
  display: flex;
  align-items: center;
  gap: 6px;
}
.weapon-card .meta, .app-card .meta {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.badge-rec {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 4px;
  padding: 0 5px;
  line-height: 18px;
}

.empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 16px;
  color: var(--muted);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.link-back, .back-btn {
  border: 0; background: transparent;
  color: var(--primary); font: inherit;
  cursor: pointer; padding: 0; margin-bottom: 14px;
}
.back-fab {
  position: fixed;
  /* 主内容区左上角（侧栏右侧），不要压在侧栏菜单上 */
  left: calc(var(--sider-w) + 24px);
  top: calc(66px + 12px + env(safe-area-inset-top, 0px));
  right: auto;
  bottom: auto;
  z-index: 120;
  border: 1px solid #c9daf8;
  background: #fff;
  color: #1d4ed8;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  padding: 12px 16px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  cursor: pointer;
  transition: transform 0.16s ease, opacity 0.16s ease, box-shadow 0.16s ease;
}
.back-fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
}
.back-fab:active {
  transform: translateY(0);
}
.back-fab[hidden] {
  display: none !important;
}
@media (max-width: 960px) {
  .back-fab {
    left: 14px;
  }
}
@media (max-width: 720px) {
  .back-fab {
    left: 14px;
    right: auto;
    top: calc(56px + 10px + env(safe-area-inset-top, 0px));
    bottom: auto;
    padding: 11px 14px;
    font-size: 13px;
  }
}
.detail-hero {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e7edf6;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.detail-hero-main {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.detail-hero > img,
.detail-hero-main > img {
  width: 72px;
  height: 54px;
  object-fit: contain;
  background: #f5f7fa;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid #eef2f7;
}
.detail-hero-text {
  min-width: 0;
}
.detail-hero h2,
.detail-hero-text h2 {
  margin: 0;
  font-size: 18px;
  color: var(--heading);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.detail-hero-text .muted {
  margin: 2px 0 0;
  font-size: 12px;
}
.detail-hero-stat {
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f3f7ff;
  border: 1px solid #dce8ff;
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.detail-hero-stat b {
  font-size: 15px;
  font-weight: 800;
  color: #1d4ed8;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.detail-hero-stat span {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}

/* 武器详情：头图 + 筛选合成一块 */
#gunsDetailView .detail-panel {
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid #e7edf6;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
#gunsDetailView .detail-panel > .detail-hero {
  margin: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #eef2f7;
  box-shadow: none;
  background: transparent;
  gap: 10px;
}
#gunsDetailView .detail-filters {
  padding: 6px 14px 8px;
}
#gunsDetailView .detail-filters .filter-row {
  border-top: 0;
  padding: 5px 0;
  align-items: center;
  gap: 10px;
}
#gunsDetailView .detail-filters .filter-row + .filter-row {
  border-top: 1px solid #f3f5f9;
}
#gunsDetailView .detail-filters .filter-k {
  flex: 0 0 36px;
  padding-top: 0;
  font-size: 12px;
  font-weight: 650;
  color: #64748b;
}
#gunsDetailView .detail-filters .tag-list {
  flex: 1 1 auto;
  min-width: 0;
}
#gunsDetailView .detail-filter-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}
#gunsDetailView .detail-tool-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
#gunsDetailView .detail-tool-group .filter-k {
  flex: 0 0 auto;
}
#gunsDetailView .detail-tool-group .tag-list {
  flex: 0 1 auto;
}
#gunsDetailView .detail-filters .seg-item,
#gunsDetailView .detail-filters .chip {
  padding: 3px 10px;
  font-size: 12px;
  line-height: 20px;
}
#gunsDetailView .detail-layout-toggle {
  margin-left: auto;
  flex-shrink: 0;
}
#gunsDetailView .filter-hint {
  margin: 0 0 4px;
  font-size: 12px;
}
@media (max-width: 640px) {
  .detail-hero {
    padding: 10px 12px;
    gap: 10px;
  }
  .detail-hero > img,
  .detail-hero-main > img {
    width: 60px;
    height: 45px;
  }
  .detail-hero h2,
  .detail-hero-text h2 {
    font-size: 16px;
  }
  #gunsDetailView .detail-filter-main {
    flex-direction: column;
    align-items: stretch;
  }
  #gunsDetailView .detail-layout-toggle {
    margin-left: 0;
    width: 100%;
  }
  #gunsDetailView .detail-layout-toggle .guns-view-track {
    width: 100%;
  }
}
.author-home-kicker {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--muted);
}
.author-home-stats {
  display: flex;
  gap: 18px;
  margin-top: 8px;
}
.author-home-stats span {
  color: var(--muted);
  font-size: 13px;
}
.author-home-stats b {
  color: var(--heading);
  font-size: 20px;
  font-weight: 700;
  margin-right: 4px;
}

/* 管理员评价榜：横排信息卡 */
.eval-page-head p {
  max-width: 42em;
}
.maker-review-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
  max-width: 1100px;
  margin: 0 auto;
}
.maker-review-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  padding: 16px 16px 12px;
  background:
    linear-gradient(135deg, rgba(47, 107, 255, 0.04), transparent 42%),
    var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  overflow: visible;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.maker-review-row:hover {
  border-color: #d5dff5;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}
.eval-card-body {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.eval-card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eval-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.eval-rate {
  flex-shrink: 0;
  text-align: right;
  line-height: 1.15;
}
.eval-rate b {
  display: block;
  font-size: 20px;
  font-weight: 750;
  color: var(--heading);
  letter-spacing: -0.02em;
}
.eval-rate span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}
.eval-crown {
  width: 56px;
  height: 40px;
  margin-bottom: 6px;
  line-height: 0;
}
.eval-crown-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.maker-avatar {
  position: relative;
  width: 112px;
  height: 112px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
  margin: 0;
}
.maker-avatar .avatar-wrap.is-eval {
  width: 112px;
  height: 112px;
  --av: 112px;
  overflow: hidden;
}
.maker-avatar > .eval-face {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  font-size: 40px;
  background: #f3f5f8;
  color: #8a97a8;
}
.maker-avatar .eval-face {
  border-radius: 50%;
  object-fit: cover;
  font-size: 40px;
  background: #f3f5f8;
  color: #8a97a8;
}
.maker-avatar .avatar-wrap.is-eval .avatar-core {
  width: 62%;
  height: 62%;
  border-radius: 50%;
}
.maker-avatar .avatar-wrap.is-eval .avatar,
.maker-avatar .avatar-wrap.is-eval .avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.shock-fx {
  position: absolute;
  inset: -14px;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
}
.shock-fx svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.shock-bolt {
  fill: none;
  stroke: #e8fbff;
  stroke-width: 1.7;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px #7df9ff) drop-shadow(0 0 6px #3ecbff);
}
.maker-avatar.is-shocked .avatar,
.maker-avatar.is-shocked .avatar-fallback,
.maker-avatar.is-shocked .avatar-core {
  animation: shock-idle 0.4s steps(2, end) infinite;
  box-shadow: 0 0 0 2px rgba(125, 249, 255, 0.45), 0 0 12px #3ecbff;
}
.maker-avatar.is-shocked .shock-fx {
  opacity: 1;
  animation: shock-fade var(--shock-ms, 6s) linear forwards;
}
.maker-avatar.is-shocked .shock-bolt.b1 { animation: shock-bolt 0.55s steps(2, end) infinite; }
.maker-avatar.is-shocked .shock-bolt.b2 { animation: shock-bolt 0.7s steps(2, end) infinite 0.08s; }
.maker-avatar.is-shocked .shock-bolt.b3 { animation: shock-bolt 0.48s steps(2, end) infinite 0.16s; }
.maker-avatar.is-shocked .shock-bolt.b4 { animation: shock-bolt 0.62s steps(2, end) infinite 0.22s; }
.maker-avatar.is-shocked {
  animation: shock-zap 0.35s ease infinite;
}
@keyframes shock-idle {
  0%, 100% { filter: brightness(1) contrast(1); transform: translate(0, 0); }
  25% { filter: brightness(1.55) contrast(1.35) saturate(0.55); transform: translate(-1px, 1px); }
  50% { filter: brightness(0.9) contrast(1.2); transform: translate(1px, -1px); }
  75% { filter: brightness(1.8) contrast(1.5) saturate(0.3); transform: translate(0, 1px); }
}
@keyframes shock-bolt {
  0%, 100% { opacity: 0.15; }
  18% { opacity: 1; }
  28% { opacity: 0.1; }
  46% { opacity: 0.85; }
  62% { opacity: 0.2; }
}
@keyframes shock-zap {
  0%, 100% { transform: translate(0, 0); }
  12% { transform: translate(-3px, 2px); }
  24% { transform: translate(3px, -2px); }
  36% { transform: translate(-2px, -1px); }
  48% { transform: translate(2px, 2px); }
  60% { transform: translate(-1px, 0); }
}
@keyframes shock-fade {
  0%, 88% { opacity: 1; }
  100% { opacity: 0; }
}
.maker-review-row .avatar,
.maker-review-row .avatar-wrap {
  cursor: default;
}
.eval-title {
  font-weight: 650;
  font-size: 15px;
  color: var(--heading);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1.35;
  min-width: 0;
}
.eval-sub {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
.eval-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  gap: 8px;
  margin: 0;
}
.eval-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--chip-bg);
  border: 1px solid transparent;
}
.eval-stat.is-good {
  background: #f4fbf6;
  border-color: #d9f0e0;
}
.eval-stat.is-bad {
  background: #fff7f7;
  border-color: #f5d9db;
}
.eval-stat span {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
.eval-stat b {
  display: block;
  margin-top: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}
.eval-stat.is-good b { color: #2f7d42; }
.eval-stat.is-bad b { color: #c43c4a; }
.maker-review-me {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 6px;
  padding: 1px 6px;
}
.maker-review-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  width: 100%;
  justify-content: stretch;
}
.btn-maker {
  flex: 1;
  height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--border-input);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn-maker.good:hover, .btn-maker.good.is-on {
  color: #2f7d42;
  border-color: #a8dbb4;
  background: #edf9f0;
}
.btn-maker.bad:hover, .btn-maker.bad.is-on {
  color: #c43c4a;
  border-color: #f0b4ba;
  background: #fff1f2;
}
.btn-maker:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.eval-hint {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e8ecf3;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}
.eval-comment-sheet {
  width: min(520px, 100%);
}
.eval-note-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  min-height: 80px;
}
.eval-note {
  padding: 12px 14px;
  background: var(--chip-bg);
  border-radius: 12px;
  text-align: left;
}
.eval-note-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.eval-note-head .avatar,
.eval-note-head .avatar-wrap {
  width: 28px;
  height: 28px;
  --av: 28px;
}
.eval-note-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}
.eval-note-who strong {
  font-size: 13px;
  color: var(--heading);
}
.eval-note-who span {
  font-size: 12px;
  color: var(--muted);
}
.eval-note-body {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.eval-note-body.is-empty {
  color: var(--muted);
}
.eval-vote-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  vertical-align: middle;
}
.eval-vote-pill.is-good {
  color: #389e0d;
  background: #f6ffed;
}
.eval-vote-pill.is-bad {
  color: #cf1322;
  background: #fff1f0;
}
.eval-note-gun {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.eval-modal-vote {
  margin: 4px 0 12px;
}
.eval-modal-hint {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
}
.eval-modal-vote .maker-review-actions {
  justify-content: flex-start;
}

.code-list { display: flex; flex-direction: column; gap: 12px; transition: opacity 0.16s ease, transform 0.16s ease; }
.code-list.is-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  align-items: stretch;
}
.code-list.is-layout-out {
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
}
.code-list.is-layout-in .scheme-card {
  animation: code-layout-rise 0.4s cubic-bezier(.22,.8,.2,1) both;
  animation-delay: calc(var(--i, 0) * 32ms);
}
@keyframes code-layout-rise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.code-layout-toggle {
  height: auto;
  cursor: pointer;
}
.code-layout-toggle:focus-visible {
  outline: 2px solid rgba(47, 107, 255, 0.45);
  outline-offset: 2px;
  border-radius: 999px;
}
.code-layout-toggle .guns-view-track {
  padding: 3px;
  background: var(--chip-bg);
  border-color: var(--border);
  min-width: 148px;
}
.code-layout-toggle .guns-view-thumb {
  background: var(--card);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.06),
    0 4px 10px rgba(47, 107, 255, 0.1);
  transition: left 0.32s cubic-bezier(.34,.9,.28,1);
}
.code-layout-toggle .guns-view-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 18px;
}
.code-layout-toggle .guns-view-opt::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  background: currentColor;
  opacity: 0.75;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.code-layout-toggle .guns-view-opt[data-code-layout="list"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E");
}
.code-layout-toggle .guns-view-opt[data-code-layout="cards"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%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");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%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");
}
.code-layout-toggle .guns-view-opt.is-active {
  color: #1d4ed8;
}
.code-layout-toggle .guns-view-opt.is-active::before {
  opacity: 1;
  transform: scale(1.06);
}
.code-layout-toggle .guns-view-opt:active {
  transform: scale(0.96);
}
#gunsDetailView .detail-layout-toggle .guns-view-opt {
  padding: 5px 11px;
  min-width: 0;
  font-size: 12px;
  line-height: 18px;
}
.scheme-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 12px;
  background: var(--card);
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  min-height: 100%;
  overflow: hidden;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.scheme-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #2f6bff, #7dd3fc);
  opacity: 0.85;
}
.scheme-card::after { content: none; }
.scheme-card:hover {
  border-color: #d5e2f7;
  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.05),
    0 12px 28px rgba(47, 107, 255, 0.08);
  transform: translateY(-2px);
}
.scheme-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-left: 4px;
}
.scheme-card-user {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.scheme-card-user .avatar,
.scheme-card-user .avatar-fallback {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--border);
}
.scheme-card-user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
  gap: 1px;
}
.scheme-card-author {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  color: var(--heading);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scheme-card-author:hover { color: var(--primary); }
.scheme-card-date {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.scheme-card-stat {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 650;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}
.scheme-card-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-left: 4px;
}
.scheme-card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.scheme-card-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--heading);
}
.scheme-card-fb {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  margin: 0;
  border: 1px solid #ddd6fe;
  border-radius: 999px;
  background: #f5f3ff;
  color: #6d28d9;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.scheme-card-fb:hover {
  background: #ede9fe;
  border-color: #c4b5fd;
  color: #5b21b6;
}
.scheme-card-media {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--chip-bg);
  border: 1px solid var(--border);
}
.scheme-card-media.is-multi {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
}
.scheme-card-img {
  width: 100%;
  height: auto;
  max-height: 200px;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  display: block;
  background: var(--chip-bg);
  cursor: zoom-in;
  transition: transform 0.3s ease;
}
.scheme-card:hover .scheme-card-img {
  transform: scale(1.01);
}
.scheme-card-media.is-multi .scheme-card-img {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  height: 148px;
  max-height: 148px;
  object-fit: contain;
  object-position: center;
}
.scheme-card-desc {
  margin: 0;
  padding: 0 2px 0 10px;
  border-left: 2px solid var(--primary);
  background: none;
  border-radius: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
}
.scheme-card-desc:empty { display: none; }
.scheme-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.scheme-tag {
  font-size: 11px;
  font-weight: 650;
  color: var(--text);
  background: var(--chip-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
}
.scheme-tag.is-mode-fenghuo {
  color: #1d4ed8;
  background: #eef4ff;
  border-color: #c9d9ff;
}
.scheme-tag.is-mode-quanmian {
  color: #c2410c;
  background: #fff5ee;
  border-color: #ffd8c2;
}
.scheme-tag.is-code {
  color: #2f6bff;
  background: #f0f5ff;
  border-color: #d0deff;
  font-variant-numeric: tabular-nums;
}
.scheme-card-codebox {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border-radius: 10px;
  background: #0f172a;
  border: 1px solid #1e293b;
  min-height: 52px;
}
.scheme-card-code {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 13px;
  line-height: 1.4;
  word-break: break-all;
  color: #7dd3fc;
  font-weight: 650;
}
.scheme-card-copy {
  flex: 0 0 auto;
  height: 38px;
  min-width: 72px;
  padding: 0 18px;
  border: 0;
  border-radius: 9px;
  background: #2f6bff;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(47, 107, 255, 0.32);
  transition: background 0.15s ease, transform 0.15s ease;
}
.scheme-card-copy:hover {
  background: #1f5aef;
  transform: translateY(-1px);
}
.scheme-card-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid #e8eef6;
}
.scheme-card-actions:has(> :nth-child(5):last-child) {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.scheme-card-actions:has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.scheme-card-actions:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.scheme-card-actions:has(> :only-child) {
  grid-template-columns: 1fr;
}
.scheme-card-actions .btn-download,
.scheme-card-actions .btn-import,
.scheme-card-actions .btn-fav,
.scheme-card-actions .btn-like,
.scheme-card-actions .btn-quick-fb {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 34px;
  min-width: 0;
  margin: 0;
  padding: 0 6px;
  border-radius: 8px;
  border: 1px solid #d7e0ef;
  background: #f5f8fd;
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155 !important;
  letter-spacing: 0.02em;
}
.scheme-card-actions .btn-download::before,
.scheme-card-actions .btn-import::before,
.scheme-card-actions .btn-fav::before,
.scheme-card-actions .btn-like::before,
.scheme-card-actions .btn-quick-fb::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.scheme-card-actions .btn-fav::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17.3l-6.2 3.3 1.2-7L2 8.8l7.1-1L12 1.5l2.9 6.3 7.1 1-5 4.8 1.2 7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17.3l-6.2 3.3 1.2-7L2 8.8l7.1-1L12 1.5l2.9 6.3 7.1 1-5 4.8 1.2 7z'/%3E%3C/svg%3E");
}
.scheme-card-actions .btn-fav.is-on::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 17.3l-6.2 3.3 1.2-7L2 8.8l7.1-1L12 1.5l2.9 6.3 7.1 1-5 4.8 1.2 7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 17.3l-6.2 3.3 1.2-7L2 8.8l7.1-1L12 1.5l2.9 6.3 7.1 1-5 4.8 1.2 7z'/%3E%3C/svg%3E");
}
.scheme-card-actions .btn-like::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11v10M14.5 21H18a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4.2l.8-4.2a2 2 0 0 0-1.9-2.4h-.2L9 8.5V11'/%3E%3Cpath d='M7 11H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11v10M14.5 21H18a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4.2l.8-4.2a2 2 0 0 0-1.9-2.4h-.2L9 8.5V11'/%3E%3Cpath d='M7 11H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h3'/%3E%3C/svg%3E");
}
.scheme-card-actions .btn-like.is-on::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M14.5 21H18a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4.2l.8-4.2A2 2 0 0 0 12.7 3.4h-.2L9 8.5V21h5.5zM7 11H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h3V11z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M14.5 21H18a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4.2l.8-4.2A2 2 0 0 0 12.7 3.4h-.2L9 8.5V21h5.5zM7 11H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h3V11z'/%3E%3C/svg%3E");
}
.scheme-card-actions .btn-download::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
}
.scheme-card-actions .btn-import::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V9'/%3E%3Cpath d='M7 13l5-5 5 5'/%3E%3Cpath d='M5 3h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V9'/%3E%3Cpath d='M7 13l5-5 5 5'/%3E%3Cpath d='M5 3h14'/%3E%3C/svg%3E");
}
.scheme-card-actions .btn-quick-fb::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3C/svg%3E");
}
.scheme-card-actions .btn-download {
  color: #1d4ed8 !important;
  background: #eef4ff;
  border-color: #c7d7ff;
}
.scheme-card-actions .btn-import {
  color: #047857 !important;
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.scheme-card-actions .btn-quick-fb {
  color: #7c3aed !important;
  background: #f5f3ff;
  border-color: #ddd6fe;
}
.scheme-card-actions .btn-download:hover,
.scheme-card-actions .btn-import:hover,
.scheme-card-actions .btn-fav:hover,
.scheme-card-actions .btn-like:hover,
.scheme-card-actions .btn-quick-fb:hover {
  background: #e8eef8;
  border-color: #b8c9e6;
  color: #0f172a !important;
}
.scheme-card-actions .btn-download:hover {
  background: #e0ebff;
  border-color: #93b4ff;
  color: #1e40af !important;
}
.scheme-card-actions .btn-import:hover {
  background: #d1fae5;
  border-color: #6ee7b7;
  color: #065f46 !important;
}
.scheme-card-actions .btn-quick-fb:hover {
  background: #ede9fe;
  border-color: #c4b5fd;
  color: #5b21b6 !important;
}
.scheme-card-actions .btn-expand {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 34px;
  min-width: 0;
  margin: 0;
  padding: 0 6px;
  border-radius: 8px;
  border: 1px solid #c7d7ff;
  background: #eef4ff;
  box-shadow: none;
  font-size: 12.5px;
  font-weight: 700;
  color: #1d4ed8 !important;
  letter-spacing: 0.02em;
  grid-column: 1 / -1;
}
.scheme-card-actions .btn-expand:hover {
  background: #e0ebff;
  border-color: #93b4ff;
  color: #1e40af !important;
}
.scheme-card-tags .scheme-tag.is-multi {
  background: #eef4ff;
  color: #1d4ed8;
  border-color: #c7d7ff;
  font-weight: 700;
}
.scheme-card-variants {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.scheme-card.has-variants.is-open .scheme-card-variants {
  display: flex;
}
.scheme-remark-modal {
  z-index: 72;
}
.scheme-remark-sheet {
  width: min(440px, 100%);
  max-height: min(78vh, 640px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 14px;
}
.scheme-remark-sheet .modal-head {
  gap: 10px;
}
.scheme-remark-sheet .modal-head h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
}
.scheme-remark-codebox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #0f172a;
}
.scheme-remark-codebox code {
  flex: 1 1 auto;
  min-width: 0;
  color: #7dd3fc;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 650;
  word-break: break-all;
}
.scheme-remark-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  min-height: 0;
  padding-right: 2px;
}
.scheme-remark-body .code-variant {
  margin: 0;
}
.scheme-remark-body .code-variant-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.scheme-remark-body .code-variant-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: auto;
  margin-left: auto;
  justify-content: flex-end;
}
.scheme-remark-body .code-variant-actions .btn {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
}
.scheme-remark-body .code-variant-actions .btn-quick-fb {
  border-color: #ddd6fe;
  background: #f5f3ff;
  color: #6d28d9 !important;
}
.scheme-remark-body .code-variant-actions .btn-quick-fb:hover {
  background: #ede9fe;
  border-color: #c4b5fd;
  color: #5b21b6 !important;
}
.scheme-card-variants .code-variant {
  margin: 0;
}
.scheme-card-variants .code-variant-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.scheme-card-variants .code-variant-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: auto;
  margin-left: auto;
  justify-content: flex-end;
}
.scheme-card-variants .code-variant-actions .btn {
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
}
.scheme-card-variants .code-variant-actions .btn-quick-fb {
  border-color: #ddd6fe;
  background: #f5f3ff;
  color: #6d28d9 !important;
}
.scheme-card-variants .code-variant-actions .btn-quick-fb:hover {
  background: #ede9fe;
  border-color: #c4b5fd;
  color: #5b21b6 !important;
}
.scheme-card-actions .btn-like.is-on {
  color: #b91c1c !important;
  background: #fff1f2;
  border-color: #fecdd3;
}
.scheme-card-actions .btn-fav.is-on {
  color: #b45309 !important;
  background: #fffbeb;
  border-color: #fde68a;
}
@keyframes scheme-action-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.12); }
  60% { transform: scale(0.94); }
  100% { transform: scale(1); }
}
@keyframes scheme-icon-pop {
  0% { transform: scale(1) rotate(0deg); }
  40% { transform: scale(1.45) rotate(-12deg); }
  70% { transform: scale(0.9) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes scheme-action-off {
  0% { transform: scale(1); }
  50% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.scheme-card-actions .btn-like.is-pop,
.scheme-card-actions .btn-fav.is-pop {
  animation: scheme-action-pop 0.45s cubic-bezier(.2,.8,.2,1);
}
.scheme-card-actions .btn-like.is-pop::before,
.scheme-card-actions .btn-fav.is-pop::before {
  animation: scheme-icon-pop 0.5s cubic-bezier(.2,.8,.2,1);
}
.scheme-card-actions .btn-like.is-pop-off,
.scheme-card-actions .btn-fav.is-pop-off {
  animation: scheme-action-off 0.28s ease;
}
@media (max-width: 720px) {
  .code-list.is-cards {
    grid-template-columns: 1fr;
  }
}

/* 方案卡片（改枪码列表） */
.code-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  background: var(--card);
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.code-item.has-img {
  grid-template-columns: auto 1fr auto;
}
.code-item > img,
.code-item .code-thumbs img {
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: 8px;
  background: #f5f7fa;
}
.code-thumbs, .review-thumbs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 64px;
  max-height: 210px;
  overflow-x: hidden;
  overflow-y: auto;
}
.code-thumbs img, .review-thumbs img {
  width: 64px;
  height: 64px;
}
img.js-zoom {
  cursor: zoom-in;
}
.code-item-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.code-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.code-top:empty { display: none; }
.code-item .title { font-weight: 650; color: var(--heading); }
.code-item .code {
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: #0f172a;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  color: #7dd3fc;
  word-break: break-all;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.45;
}
.meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
}
.meta-chip {
  font-size: 12px;
  background: #f5f7fa;
  color: var(--text);
  border-radius: 6px;
  padding: 2px 8px;
}
.meta-chip em { font-style: normal; color: var(--muted); margin-right: 4px; }
button.meta-chip.fb-quick-chip {
  border: 0;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  color: var(--primary);
  background: var(--primary-soft);
}
button.meta-chip.fb-quick-chip:hover {
  background: var(--primary);
  color: #fff;
}
.code-item-tags {
  margin: 0;
}
.code-reason {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 2px 0 10px;
  border-left: 2px solid #c9d9f5;
}
.code-reason-line {
  color: #5b6577;
  font-size: 13px;
  line-height: 1.5;
}
.code-reason-line .k {
  display: inline-block;
  margin-right: 6px;
  color: #8b95a7;
  font-size: 12px;
  font-weight: 650;
}
.code-reason-line.is-note {
  color: #475569;
}
.code-item .tags { margin-top: 6px; color: var(--text); font-size: 13px; line-height: 1.45; }
.code-item .tags .k {
  display: inline-block;
  margin-right: 6px;
  color: var(--muted);
  font-size: 12px;
}
.code-item .tags.note {
  background: var(--chip-bg);
  color: var(--text);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.review-body .tags {
  margin: 0;
  padding: 8px 10px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-left: 3px solid #ea580c;
  border-radius: 10px;
  color: #c2410c;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.review-body .tags .k {
  display: inline-block;
  margin-right: 6px;
  color: #ea580c;
  font-size: 12px;
  font-weight: 800;
}
.review-body .tags.note {
  background: #fff1f0;
  border: 1px solid #fecdd3;
  border-left: 3px solid var(--error);
  color: var(--error);
  padding: 4px 8px;
  border-radius: 6px;
}
.review-body .tags.note .k {
  color: #be123c;
}
.review-body .tags.is-empty {
  background: #f8fafc;
  border-color: var(--border);
  border-left-color: #94a3b8;
  color: #64748b;
}
.review-body .tags.is-empty .k,
.review-body .tags.is-empty .muted {
  color: #64748b;
  font-weight: 650;
}
.review-body .tags .doc-sheet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.doc-sheet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.doc-sheet-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #d6e4ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 650;
}

.pill {
  display: inline-block;
  font-size: 12px;
  padding: 0 8px;
  line-height: 20px;
  border-radius: 4px;
  background: #f0f0f0;
  color: var(--text);
}
.pill.rec { background: var(--primary-soft); color: var(--primary); }
.pill.gs { background: #fff7e6; color: var(--warning); }

.status-pill {
  display: inline-block;
  font-size: 12px;
  padding: 0 8px;
  line-height: 20px;
  border-radius: 10px;
  margin-right: 8px;
  background: #f0f0f0;
}
.status-pill.pending { color: var(--primary); background: var(--primary-soft); }
.maker-title-inp {
  width: 7.5em;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
}
.queue-no {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  color: #d48806;
  background: #fff7e6;
}
.status-pill.approved { color: var(--success); background: #f6ffed; }
.status-pill.rejected { color: var(--error); background: #fff1f0; }

/* 通用按钮 */
.btn, .btn.ghost, .btn.primary {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--border-input);
  background: var(--card);
  color: var(--text);
  border-radius: 6px;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  white-space: nowrap;
}
.btn:hover { color: var(--primary); border-color: var(--primary); }
.btn-sm { height: 32px; }
.btn-primary, .btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn-primary:hover, .btn.primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #fff;
}
.code-item .btn-primary, .code-item .btn.primary {
  height: 28px;
  padding: 0 10px;
}
.code-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  min-width: 128px;
  align-self: start;
}
.code-actions .btn,
.code-actions .btn-like,
.code-actions .btn-fav,
.code-actions .btn-download,
.code-actions .btn-import,
.code-actions .btn-expand {
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  min-width: 0;
}
.code-actions .btn-copy,
.code-actions .btn-primary.btn-copy,
.code-actions .btn.primary.btn-copy,
.code-actions .btn-expand {
  grid-column: 1 / -1;
}
.code-item-group .code-variants {
  display: none;
  margin-top: 12px;
  flex-direction: column;
  gap: 8px;
}
.code-item-group.is-open .code-variants {
  display: flex;
}
.code-item-group.is-open {
  align-items: start;
}
.code-variant {
  padding: 10px 12px;
  background: #f7f9fc;
  border-radius: 10px;
  text-align: left;
}
.code-variant-note {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 8px;
}
.code-variant-note .k {
  margin-right: 6px;
  color: var(--muted);
  font-size: 12px;
}
.code-variant-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
}
.code-variant-file + .code-variant-file {
  border-top: 1px solid #e8edf3;
  margin-top: 6px;
}
.code-variant-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.btn-expand {
  height: 32px;
  padding: 0 10px;
  background: var(--card);
  border: 1px solid var(--border-input);
  color: var(--text);
  white-space: nowrap;
}
.btn-expand:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}
.btn-download {
  height: 32px;
  padding: 0 14px;
  background: var(--card);
  border: 1px solid var(--primary);
  color: var(--primary);
}
.btn-download:hover {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--primary);
}
.btn-import {
  height: 32px;
  padding: 0 14px;
  background: var(--card);
  border: 1px solid var(--success);
  color: var(--success);
}
.btn-import:hover {
  background: #f6ffed;
  color: var(--success);
  border-color: var(--success);
}
.btn-like {
  height: 32px;
  padding: 0 14px;
  background: var(--card);
  border: 1px solid var(--border-input);
  color: var(--text);
}
.btn-like:hover, .btn-like.is-on {
  color: #cf1322;
  border-color: #ffa39e;
  background: #fff1f0;
}
.btn-fav {
  height: 32px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--border-input);
  color: var(--text);
}
.btn-fav:hover, .btn-fav.is-on {
  color: #d48806;
  border-color: #ffd591;
  background: #fffbe6;
}
.pill.rank {
  background: #fff7e6;
  color: #d48806;
  font-weight: 700;
}
.pill.rank.rank-top {
  background: #fff1f0;
  color: #cf1322;
}
.btn-ghost, .btn.ghost {
  border-color: transparent;
  background: transparent;
  color: var(--text);
}
.btn-ghost:hover, .btn.ghost:hover { color: var(--primary); background: var(--primary-soft); }
.btn-block { width: 100%; height: 40px; }
.btn.danger, .btn-danger {
  color: var(--error);
  border-color: #ffa39e;
  background: var(--card);
}
.btn.danger:hover { background: #fff1f0; color: var(--error); }

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--heading);
}
.field input, .field textarea, input, textarea {
  width: 100%;
  border: 1px solid var(--border-input);
  background: var(--input-bg);
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
  color: var(--heading);
  outline: none;
}
.field textarea { resize: vertical; min-height: 88px; }
#page-submit .field-title {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
#page-submit .field-title .req {
  margin-left: 4px;
}
.submit-share-row {
  display: grid;
  grid-template-columns: minmax(280px, 1.7fr) minmax(200px, 1fr);
  grid-template-areas:
    "code side"
    "hint .";
  gap: 6px 16px;
  align-items: stretch;
  margin-bottom: 16px;
}
.submit-share-code {
  grid-area: code;
  margin-bottom: 0;
  min-height: 0;
  height: 100%;
}
.submit-share-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.submit-share-side .field {
  margin-bottom: 0;
}
.submit-share-hint {
  grid-area: hint;
}
#submitText {
  width: 100%;
  max-width: none;
  flex: 1;
  min-height: 118px;
  height: 100%;
}
.field-row, .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.submit-scopes-wrap { min-width: 0; }
#submitScopes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 8px;
}
.scope-block {
  width: 168px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--chip-bg);
}
.scope-head {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.scope-head .field { flex: 1; margin: 0; min-width: 0; }
.scope-head .field span { font-size: 12px; padding: 2px 8px; }
.scope-head input.submit-scope {
  width: 100%;
  height: 32px;
}
#btnAddScope {
  width: fit-content;
  min-width: 108px;
  height: 36px;
  padding: 0 18px;
  margin: 6px 0 8px;
  font-weight: 600;
}
#btnAddScope:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.choice-row {
  display: flex;
  gap: 10px;
}
.choice-row .choice {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  margin: 0;
  border: 1px solid var(--border-input);
  border-radius: 8px;
  background: var(--card);
  color: var(--heading);
  cursor: pointer;
  font-size: 14px;
}
.choice-row .choice input {
  width: auto;
  margin: 0;
}
.choice-row .choice:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}
.field select,
.admin-panels select {
  width: 100%;
  height: 36px;
  border: 1px solid var(--border-input);
  border-radius: 8px;
  padding: 0 10px;
  font: inherit;
  color: var(--heading);
  background: var(--input-bg);
}
.live-doc-openapi {
  margin: 10px 0 14px;
}
.live-doc-openapi summary {
  cursor: pointer;
  color: var(--heading);
  margin-bottom: 8px;
}
.result-box, .result {
  margin-top: 12px;
  padding: 12px;
  background: var(--chip-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: auto;
  min-height: 1.2em;
}
.form-err, .err { color: var(--error); min-height: 1.2em; margin: 8px 0 0; }
.req { color: var(--error); font-style: normal; font-size: 12px; font-weight: 500; margin-left: 4px; }
.muted { color: var(--muted); font-size: 13px; font-weight: 400; }
.upload-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.submit-shot-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 12px;
}
.submit-shot-examples figure {
  margin: 0;
  width: 220px;
}
.submit-shot-examples img {
  display: block;
  width: 100%;
  height: 124px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  background: #111;
  cursor: zoom-in;
  border: 1px solid var(--border);
}
.submit-shot-examples figcaption {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.field input[type="file"] {
  padding: 6px 8px;
  max-width: 280px;
  cursor: pointer;
}
.upload-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.upload-preview-wrap {
  position: relative;
  display: inline-flex;
}
.upload-preview {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  background: #f5f7fa;
  border: 1px solid var(--border);
}
.upload-clear {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: #ff4d4f;
  color: #fff;
  font-size: 16px;
  line-height: 22px;
  cursor: pointer;
  padding: 0;
}
.upload-clear:hover { background: #d9363e; }
.field input[readonly] {
  background: #f5f7fa;
  color: var(--muted);
  cursor: default;
}
.check { display: flex; align-items: center; gap: 8px; margin: 10px 0; color: var(--text); }
.remember-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.remember-row input {
  width: 16px !important;
  height: 16px !important;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}
.login-form label.remember-row {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 16px;
}
.auth-extra {
  margin: 12px 0 0;
  text-align: center;
  font-size: 13px;
}
.auth-extra .linkish,
button.linkish {
  border: 0;
  background: none;
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-forgot-hint { margin: 0 0 12px; font-size: 13px; line-height: 1.5; }
.field-row.code-row {
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 12px;
}
.field-row.code-row .field.grow { margin: 0; }
.field-row.code-row .btn {
  height: 40px;
  white-space: nowrap;
}

.img-zoom {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  background: rgba(0, 0, 0, 0.78);
  cursor: zoom-out;
}
.img-zoom-stage {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(96vw, 1400px);
  max-height: 92vh;
  line-height: 0;
}
.img-zoom img {
  display: block;
  max-width: min(96vw, 1400px);
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  cursor: default;
  background: transparent;
}
.img-zoom-close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.img-zoom-close:hover { background: rgba(255, 255, 255, 0.28); }
.img-zoom-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: none;
  backdrop-filter: blur(4px);
}
.img-zoom.is-multi .img-zoom-nav { display: inline-flex; align-items: center; justify-content: center; }
.img-zoom-nav:hover { background: rgba(0, 0, 0, 0.62); }
.img-zoom-prev { left: 10px; }
.img-zoom-next { right: 10px; }
.img-zoom-counter {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  z-index: 2;
}
.img-zoom-counter[hidden] { display: none !important; }
body.zoom-open { overflow: hidden; }
@media (max-width: 720px) {
  .img-zoom { padding: 56px 10px 64px; }
  .img-zoom-nav { width: 36px; height: 36px; font-size: 24px; }
  .img-zoom-prev { left: 6px; }
  .img-zoom-next { right: 6px; }
}

/* 登录/确认弹窗 */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 21, 41, 0.45);
  backdrop-filter: blur(4px);
}
.modal-sheet {
  width: min(400px, 100%);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  padding: 24px 28px 28px;
  max-height: min(92vh, 720px);
  overflow: auto;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 {
  margin: 0 0 4px;
  font-size: 20px;
  color: var(--heading);
  font-weight: 700;
}
.icon-close {
  border: 0; background: transparent;
  font-size: 22px; line-height: 1;
  cursor: pointer; color: var(--muted);
}
.modal-body { display: flex; flex-direction: column; }

.modal.ui-ask { z-index: 70; }
.ui-ask-sheet { width: min(400px, 100%); }
.ui-ask-msg {
  margin: 8px 0 16px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.65;
}
.ui-ask-msg.hidden,
.ui-ask-field.hidden,
.ui-ask-field span.hidden,
.ui-ask-choices.hidden { display: none !important; }
.ui-ask-field { margin-bottom: 18px; }
.ui-ask-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 16px;
}
.ui-ask-choice {
  border: 1px solid var(--border-input);
  background: #fff;
  color: var(--text);
  border-radius: 999px;
  height: 30px;
  padding: 0 12px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.ui-ask-choice:hover {
  border-color: #91caff;
  background: var(--primary-soft);
  color: var(--primary);
}
.ui-ask-choice.is-on {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.ui-ask-field input {
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-input);
  background: #fff;
}
.ui-ask-field textarea {
  min-height: 96px;
  resize: vertical;
}
.ui-ask-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 底部短时提示 */
.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 60;
  background: rgba(0, 21, 41, 0.88);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
}

/* 管理后台 / 个人中心登录页 */
.admin-body { background: var(--bg); }
.login-wrap {
  min-height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 520px at 12% 8%, #4096ff 0%, transparent 52%),
    radial-gradient(700px 480px at 92% 88%, #003eb3 0%, transparent 48%),
    linear-gradient(135deg, #0958d9 0%, #1677ff 55%, #69b1ff 100%);
  position: relative;
  overflow: hidden;
}
.login-wrap::before,
.login-wrap::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
.login-wrap::before { width: 320px; height: 320px; left: -60px; top: 40px; }
.login-wrap::after { width: 220px; height: 220px; right: 8%; bottom: 10%; }

/* 登录卡片（左图右表单） */
.login-card {
  width: min(860px, 100%);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--card);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
  position: relative;
  z-index: 1;
}
.login-art {
  background: #05080f;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}
.login-art img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}
.login-art h2 { margin: 0; font-size: 28px; color: #003eb3; font-weight: 750; }
.login-art p { margin: 12px 0 0; color: #1677ff; }
.login-form {
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.login-form .brand-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--heading);
  text-align: center;
  margin-bottom: 4px;
}
.login-form .muted { text-align: center; margin-bottom: 18px; }
.login-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: var(--heading); margin-bottom: 12px;
}

.admin-main { display: block; padding: 0; max-width: none; margin: 0; }
.admin-side { display: none; }
.admin-panels { padding: 24px 28px; }
.admin-panels .panel {
  display: none;
  background: var(--card);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.admin-panels .panel.active { display: block; }
.admin-panels label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--heading);
  margin: 10px 0;
}
.admin-panels input:not([type="checkbox"]):not([type="file"]):not([type="search"]) {
  height: 36px;
  border: 1px solid var(--border-input);
  border-radius: 8px;
  padding: 0 10px;
  font: inherit;
}
.admin-panels .btn { margin: 6px 8px 6px 0; }
.admin-panels .code-actions .btn { margin: 0; }
#panel-disk hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
.upload-drop {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px dashed var(--border-input);
  border-radius: 8px;
  background: var(--chip-bg);
  margin: 8px 0 10px;
}
.upload-drop.is-over { border-color: var(--primary); background: var(--primary-soft); }
.file-queue { margin: 0 0 12px; font-size: 13px; }
.file-queue ul { margin: 6px 0 0; padding-left: 18px; color: var(--text); }
.file-queue li { margin: 4px 0; }

/* 后台工具栏与表格 */
.toolbar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.toolbar input[type="search"] { max-width: 380px; height: 36px; border-radius: 8px; }
.toolbar-label {
  color: var(--muted);
  font-size: 12px;
  margin-left: 4px;
}
.toolbar-label:first-child { margin-left: 0; }
.invite-filters { gap: 8px; }
.review-modes { margin: 0 0 14px; padding-top: 2px; border-top: 0; }
.review-modes .tag-list .seg-item .nav-badge {
  margin-left: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  line-height: 16px;
  font-size: 11px;
}
.review-modes .tag-list .seg-item.is-active .nav-badge {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.review-card.is-daily-hidden {
  opacity: 0.92;
}
.review-hidden-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--muted);
  font-size: 12px;
}
#panel-review > .toolbar,
#panel-docreview > .toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
#panel-review > .toolbar #reviewSearch,
#panel-docreview > .toolbar #docReviewSearch {
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 360px;
}

.user-check-th, .user-check-td {
  width: 36px;
  text-align: center;
  vertical-align: middle;
}
.user-check-th input, .user-check-td input {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--primary);
}
#userTable tr.is-checked td,
#inviteTable tr.is-checked td,
#inviteBanTable tr.is-checked td { background: #f4f8ff; }
.user-batch { gap: 8px; }
.table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 8px;
}
.table-hscroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  max-width: 100%;
}
.table-hscroll table,
.table-wrap > table {
  min-width: 560px;
  width: 100%;
}
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td {
  border-bottom: 1px solid var(--border);
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
}
th { color: var(--heading); font-weight: 600; background: #fafafa; }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: #f5faff; }
.thumb {
  width: 40px; height: 40px; object-fit: cover; border-radius: 6px;
  background: #f5f7fa; vertical-align: middle; margin-right: 8px;
}
.note-input { width: 100%; min-width: 140px; margin-bottom: 6px; height: 32px; }

.code-manage-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cm-count {
  color: var(--muted);
  font-size: 12px;
  padding: 0 2px;
}
.code-manage-card {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 88px minmax(200px, 1.3fr) minmax(160px, 1fr) auto;
  gap: 8px;
  align-items: center;
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 8px;
  padding: 8px 10px;
}
.code-manage-card:hover { border-color: #dbe7ff; }
.code-manage-card.is-doc-hidden {
  opacity: 0.72;
  background: #f8f9fb;
}
.cm-hidden-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #9a3412;
  background: #ffedd5;
  vertical-align: middle;
}
.cm-file-ro {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #eef0f3;
  border-radius: 6px;
  background: #f8fafc;
  color: var(--heading);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.code-manage-card input[readonly] {
  background: #f8fafc;
  color: var(--text);
  cursor: default;
}
.cm-weapon {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.cm-weapon strong {
  display: block;
  color: var(--heading);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-weapon p {
  margin: 1px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  word-break: break-word;
}
.cm-notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cm-notes input { width: 100%; }
.cm-thumb {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 6px;
  background: #f5f7fa;
  flex-shrink: 0;
}
.cm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
}
.cm-actions .btn,
.code-manage-card .btn { margin: 0; height: 28px; padding: 0 10px; font-size: 12px; }
.cm-upload { cursor: pointer; }
.code-manage-card input {
  width: 100%;
  height: 30px;
  border: 1px solid var(--border-input);
  border-radius: 6px;
  padding: 0 8px;
  color: var(--heading);
  background: #fafbfd;
  font-size: 12px;
}
.code-manage-card input:focus {
  outline: none;
  border-color: var(--primary);
  background: #fff;
}
.file-code-input { width: 88px; text-align: center; }
.gun-code-input { font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.02em; }
.cm-code-row { display: flex; gap: 6px; align-items: center; min-width: 0; }
.cm-code-row input { flex: 1; min-width: 0; }
/* 中等屏：方案管理卡片改为两列 */
@media (max-width: 1100px) {
  .code-manage-card {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  .cm-weapon, .cm-actions, .cm-code-row { grid-column: 1 / -1; }
  .cm-actions { justify-content: flex-start; }
}
#panel-feedback .page-head { margin-bottom: 10px; }
#panel-feedback .page-head h1 { font-size: 18px; }
#panel-feedback .page-head p { font-size: 12px; }
#panel-feedback .toolbar { margin-bottom: 10px; gap: 8px; }
.fb-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: start;
  padding: 8px 10px;
  background: var(--card);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.fb-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  background: #f5f7fa;
}
.fb-thumb.placeholder {
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--muted);
  border: 1px dashed var(--border);
}
.fb-main { min-width: 0; }
.fb-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
}
.fb-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 12px;
  color: var(--muted);
  min-width: 0;
  flex: 1 1 auto;
}
.fb-top .claim-badge {
  flex: 0 0 auto;
  margin-left: auto;
}
.fb-meta b { color: var(--heading); font-weight: 600; }
.fb-meta .status-pill { margin-right: 0; }
.fb-card.is-claimed-mine {
  box-shadow: 0 0 0 2px rgba(47, 111, 237, 0.22);
}
.fb-card.is-claimed-other {
  box-shadow: 0 0 0 2px rgba(224, 168, 0, 0.28);
}
.fb-kind-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  pointer-events: none;
  user-select: none;
}
.fb-kind-tag.is-site {
  background: #0369a1;
  color: #fff;
}
.fb-kind-tag.is-doc {
  background: #c2410c;
  color: #fff;
}
.fb-kind-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-input);
  border-radius: 999px;
  overflow: hidden;
  background: var(--chip-bg);
}
.fb-kind-btn {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  color: #64748b;
  background: transparent;
  line-height: 1.2;
}
.fb-kind-btn.is-on[data-kind="site"],
.fb-kind-btn.is-on[data-fb-kind="site"] {
  background: #0369a1;
  color: #fff;
}
.fb-kind-btn.is-on[data-kind="doc"],
.fb-kind-btn.is-on[data-fb-kind="doc"] {
  background: #c2410c;
  color: #fff;
}
.fb-kind-btn.is-guess.is-on {
  outline: 2px dashed #f59e0b;
  outline-offset: -2px;
}
.fb-kind-guess {
  color: #b45309;
  font-weight: 700;
  font-size: 11px;
}
.fb-kind-ok {
  color: #047857;
  font-weight: 700;
  font-size: 11px;
}
.fb-code-kind-field .fb-kind-switch { margin-top: 6px; }
.fb-code-kind-field .fb-kind-btn { padding: 8px 16px; font-size: 13px; }
.fb-text {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  word-break: break-word;
}
.fb-problem {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 4px 0 2px;
  padding: 4px 8px;
  background: #fff7e6;
  border: 1px solid #ffd591;
  border-radius: 6px;
  color: #ad4e00;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.fb-problem-k {
  flex: none;
  padding: 0 7px;
  border-radius: 4px;
  background: #fa8c16;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
}
.fb-problem-v { min-width: 0; word-break: break-word; }
.fb-warn {
  margin-top: 6px;
  padding: 7px 10px;
  background: #fff2f0;
  border: 1px solid #ffccc7;
  border-radius: 6px;
  color: #cf1322;
  font-size: 13px;
  font-weight: 700;
}
.fb-code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
}
.fb-code .code { color: var(--primary); cursor: pointer; }
.fb-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.fb-panel {
  margin-top: 6px;
  padding: 8px;
  background: var(--chip-bg);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
}
.fb-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px 10px;
}
.fb-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fb-field-tip {
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted, #64748b);
}
.fb-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
}
.fb-tools input,
.fb-field input {
  height: 28px;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border-input);
  border-radius: 6px;
  padding: 0 8px;
  font: inherit;
  font-size: 12px;
  background: #fff;
  box-sizing: border-box;
}
.fb-tools input[type="file"],
.fb-field input[type="file"] {
  display: none;
  height: 0;
  min-width: 0;
  padding: 0;
  border: 0;
}
@media (max-width: 820px) {
  .fb-grid { grid-template-columns: 1fr; }
}
.fb-drop {
  display: flex;
  align-items: center;
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border: 1px dashed var(--border-input);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
}
.fb-drop span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fb-drop.is-over,
.fb-drop.has-file { border-color: var(--primary); color: var(--heading); background: var(--primary-soft); }
.fb-tools .btn,
.fb-panel .btn {
  height: 28px;
  padding: 0 10px;
  margin: 0;
  font-size: 12px;
  white-space: nowrap;
}
.fb-reason { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.fb-reason input { width: 100%; height: 28px; }
.fb-panel .fb-field.hidden { display: none; }
.fb-panel .fb-field[data-fb-reason-box]:not(.hidden) {
  margin-top: 6px;
}
.review-list, #reviewList, #docReviewList { display: flex; flex-direction: column; gap: 10px; }
.review-layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  width: 100%;
}
#panel-review #reviewList,
#panel-docreview #docReviewList {
  flex: 1 1 720px;
  min-width: 0;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
}
#panel-docreview #docReviewList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.review-stage-mascot {
  position: sticky;
  top: 72px;
  flex: 0 0 148px;
  width: 148px;
  margin-left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.review-stage-hit {
  position: relative;
  width: 108px;
  height: 108px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
}
.review-stage-face {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: 10px auto 0;
}
.review-stage-av,
.review-stage-face .avatar-fallback.review-stage-av {
  width: 88px !important;
  height: 88px !important;
  font-size: 34px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}
.review-stage-face .avatar-wrap.is-review-stage {
  --av: 104px;
  width: 104px;
  height: 104px;
}
.review-stage-face .avatar-wrap.is-review-stage .avatar-core {
  width: 78%;
  height: 78%;
}
.review-stage-name {
  max-width: 130px;
  font-size: 13px;
  font-weight: 650;
  color: var(--heading);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-stage-mascot .btn-sm {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}
.review-mascot-picker {
  width: 100%;
  max-height: 280px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.review-mascot-picker.hidden { display: none; }
.review-mascot-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f7f9fc;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.review-mascot-opt:hover,
.review-mascot-opt.is-on {
  border-color: #91caff;
  background: var(--primary-soft);
  color: var(--heading);
}
.review-mascot-opt .avatar,
.review-mascot-opt .avatar-fallback {
  width: 28px;
  height: 28px;
  font-size: 12px;
}
.review-stage-hit.is-hammering .hammer-fx {
  opacity: 1;
  animation: hammer-swing 0.55s cubic-bezier(.2,.8,.2,1) both;
}
.review-stage-hit.is-hammering .review-stage-face {
  animation: hammer-bonk 0.55s ease both;
}
.review-stage-hit.is-hammering .hammer-burst {
  animation: hammer-burst 0.55s ease both;
}
.review-stage-hit .hammer-fx {
  inset: -4px -8px auto auto;
  width: 88px;
  height: 88px;
}
#feedbackList.review-list { gap: 6px; }
.review-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 14px;
  align-items: start;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.review-card:hover {
  border-color: #d5e2f7;
  box-shadow: 0 4px 14px rgba(47, 107, 255, 0.06);
}
.review-card:has(.review-mascot) {
  grid-template-columns: minmax(0, 1fr);
}
.review-card:has(.review-side) {
  grid-template-columns: minmax(0, 1fr) 168px;
}
.review-card:has(.review-thumb),
.review-card:has(.review-thumbs) {
  grid-template-columns: 56px minmax(0, 1fr);
}
.review-card:has(.review-mascot):has(.review-thumb),
.review-card:has(.review-mascot):has(.review-thumbs) {
  grid-template-columns: 56px minmax(0, 1fr);
}
.review-card:has(.review-side):has(.review-thumb),
.review-card:has(.review-side):has(.review-thumbs) {
  grid-template-columns: 56px minmax(0, 1fr) 168px;
}
.review-card.is-drop-over {
  outline: 2px solid var(--primary);
  background: #f4f8ff;
}
.review-thumbs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.review-thumb {
  width: 48px; height: 48px;
  object-fit: cover;
  border-radius: 7px;
  background: #f5f7fa;
  border: 1px solid var(--border);
}
.review-thumb.placeholder {
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--muted);
  border: 1px dashed var(--border);
}
.review-thumb.placeholder[data-pick-img] { cursor: pointer; }
.review-thumb.placeholder[data-pick-img]:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}
.review-thumb-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.review-thumb-wrap .upload-clear {
  z-index: 2;
  top: 2px;
  right: 2px;
}
.review-file { display: none; }
.review-drop {
  flex: 1 1 140px;
  min-width: 120px;
  max-width: 220px;
  min-height: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px dashed var(--border-input);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
  box-sizing: border-box;
}
.review-drop.is-over,
.review-drop.has-file {
  border-color: var(--primary);
  color: var(--heading);
  background: var(--primary-soft);
}
.review-drop span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-upload-btn {
  width: auto;
  min-width: 88px;
  height: 32px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--border-input);
  background: var(--chip-bg);
  color: var(--heading);
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
}
.review-upload-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-soft);
}
.review-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.review-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.review-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  min-width: 0;
}
.review-meta span {
  background: var(--chip-bg);
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--text);
}
.review-meta .user-cell {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  background: transparent;
  color: var(--heading);
}
.review-meta .user-cell strong {
  font-weight: 700;
  font-size: 13px;
}
.review-meta .review-weapon {
  background: #eef4ff;
  color: #1d4ed8;
  border: 1px solid #c9d9ff;
  font-weight: 700;
}
.review-meta .review-daily-tip {
  font-size: 12px;
  white-space: nowrap;
}
.review-meta span.mode-fenghuo {
  background: #e6f4ff;
  color: #0958d9;
  border: 1px solid #91caff;
  font-weight: 650;
}
.review-meta span.mode-quanmian {
  background: #fff1e6;
  color: #d4380d;
  border: 1px solid #ffbb96;
  font-weight: 650;
}
.review-meta span.mode-gaoshou {
  background: #f9f0ff;
  color: #531dab;
  border: 1px solid #d3adf7;
  font-weight: 650;
}
.review-body .code {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: #f0f6ff;
  border: 1px solid #d6e4ff;
  color: #1d4ed8;
  word-break: break-all;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 650;
  text-decoration: none;
}
.review-body .code.copyable:hover {
  text-decoration: none;
  background: #e8f1ff;
  border-color: #b8d0ff;
}
.code-row .review-code-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #93c5fd;
  background: var(--input-bg);
  color: #1d4ed8;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.code-row [data-edit-code] {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
}
.code-row .k { color: var(--muted); font-size: 12px; }
.code-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  margin-top: 0;
}
.code-row .btn-copy {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  font-weight: 700;
}
.copyable { cursor: pointer; }
.copyable:hover { text-decoration: underline; }
.invite-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}
/* 激活状态卡片 */
.vip-box {
  margin: 12px 0 22px;
  padding: 14px 16px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px;
  background: #f8fafc;
}
.vip-box h3 { margin: 0 0 8px; }
.vip-box.is-expired {
  border-color: #ffccc7;
  background: #fff2f0;
}
.invite-gen-card {
  margin: 4px 0 18px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.invite-kinds {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.invite-kind {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border-input);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.invite-kind:hover {
  border-color: #91caff;
  background: var(--primary-soft);
}
.invite-kind.is-on {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.invite-kind strong {
  color: var(--heading);
  font-size: 15px;
  font-weight: 650;
}
.invite-kind span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.invite-kind.is-on strong { color: var(--primary); }
.invite-gen-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 14px;
}
.invite-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--heading);
  font-size: 13px;
}
.invite-count input {
  width: 72px;
  margin: 0;
  text-align: center;
}
.invite-gen-result {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: #f5f7fa;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.invite-gen-result:empty { display: none; }
.invite-gen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--heading);
  font-weight: 600;
}
.invite-gen-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.invite-gen-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.invite-gen-list code, .invite-cell code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 14px;
}
.btn-copy { height: 28px; padding: 0 10px; font-size: 12px; }
.review-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 168px;
  max-width: 100%;
  justify-self: end;
}
.review-side .btn {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  margin: 0;
  white-space: nowrap;
}
.review-fc { margin: 0; flex: 0 0 auto; }
.review-variant .review-fc.field {
  display: block;
  flex-direction: row;
  gap: 0;
  margin-bottom: 0;
  width: auto;
}
.review-fc > span:not(.sr-only) {
  display: block;
  color: var(--heading);
  font-size: 12px;
  line-height: 1.3;
  margin-bottom: 4px;
}
.review-fc input::placeholder {
  color: var(--muted);
  opacity: 1;
}
.fc-hint {
  display: inline-block;
  margin: 0;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  flex: 0 0 auto;
}
.fc-hint.is-used { color: #c23a3a; }
.fc-hint.is-disk { color: #b26a00; }
.fc-hint.is-free { color: #1a8a4a; }
.review-fc input.is-used {
  border-color: #e07a7a;
  background: #fff6f6;
}
.review-fc input.is-disk {
  border-color: #e0a800;
  background: #fffbeb;
}
.claim-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: auto;
  max-width: 160px;
  border: 1px dashed var(--border);
  background: #f7f8fa;
  color: var(--muted);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 0;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}
.review-side .claim-badge {
  width: 100%;
  max-width: none;
  border-radius: 8px;
  padding: 6px 8px;
  white-space: normal;
}
.claim-badge.is-mine {
  border-style: solid;
  border-color: #2f6fed;
  background: #eef4ff;
  color: #1d4ed8;
}
.claim-badge.is-other {
  border-style: solid;
  border-color: #e0a800;
  background: #fff8e6;
  color: #9a6700;
}
.review-card.is-claimed-mine {
  box-shadow: 0 0 0 2px rgba(47, 111, 237, 0.22);
}
.review-card.is-claimed-other {
  box-shadow: 0 0 0 2px rgba(224, 168, 0, 0.28);
}
.review-fc input, .review-fc select {
  height: 32px;
  width: 108px;
  border: 1px solid var(--border-input);
  border-radius: 8px;
  padding: 0 8px;
  font: inherit;
  color: var(--heading);
  background: var(--input-bg);
}
.review-variant .review-fc input,
.review-variant .field.review-fc input {
  width: 108px;
  padding: 0 8px;
  height: 32px;
}
.review-side .review-fc input,
.review-side .review-fc select {
  width: 100%;
}
.review-variants {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin: 0;
}
.review-body .review-variants {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.review-variant {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}
.review-variant.is-done {
  gap: 8px 12px;
}
.review-variant-tools {
  display: contents;
}
.review-reason-head {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0;
  min-width: 72px;
}
.review-reason-idx {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  flex-shrink: 0;
}
.review-reason-text {
  color: var(--heading);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
  word-break: break-word;
}
.review-variant .tags { margin: 0; }
.review-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid #eef2f7;
}
.review-btns {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.review-btns .btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 76px;
  height: 34px;
  padding: 0 16px;
  margin: 0;
  border-radius: 9px;
  font-weight: 700;
}
.review-btns .btn.primary {
  box-shadow: 0 4px 12px rgba(47, 107, 255, 0.22);
}
.review-btns .btn.danger {
  background: var(--card);
  border-color: #fca5a5;
  color: #dc2626;
}
.review-btns .btn.danger:hover {
  background: #fef2f2;
  border-color: #f87171;
}
.review-btns-with-fc {
  align-items: center;
  flex-wrap: wrap;
}
.review-btns-with-fc .review-fc {
  margin: 0;
}
.review-btns-with-fc .fc-hint {
  margin-right: 4px;
}
.review-card.has-variants .review-side {
  width: 168px;
}
.review-mascot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 112px;
  justify-self: end;
  user-select: none;
}
.review-mascot-hit {
  position: relative;
  width: 88px;
  height: 88px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
}
.review-mascot-face {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 8px auto 0;
}
.review-mascot-av,
.review-mascot .avatar-fallback.review-mascot-av {
  width: 72px !important;
  height: 72px !important;
  font-size: 28px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}
.review-mascot .avatar-wrap.is-review-mascot {
  --av: 88px;
  width: 88px;
  height: 88px;
}
.review-mascot .avatar-wrap.is-review-mascot .avatar-core {
  width: 72%;
  height: 72%;
}
.review-mascot-name {
  max-width: 104px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hammer-fx {
  position: absolute;
  inset: -8px -4px auto auto;
  width: 64px;
  height: 64px;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  transform-origin: 70% 80%;
  transform: rotate(-48deg) translate(18px, -28px);
}
.hammer-svg { width: 100%; height: 100%; overflow: visible; }
.hammer-burst {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  background: radial-gradient(circle, #fbbf24 0%, transparent 70%);
}
.review-mascot-hit.is-hammering .hammer-fx {
  opacity: 1;
  animation: hammer-swing 0.55s cubic-bezier(.2,.8,.2,1) both;
}
.review-mascot-hit.is-hammering .review-mascot-face {
  animation: hammer-bonk 0.55s ease both;
}
.review-mascot-hit.is-hammering .hammer-burst {
  animation: hammer-burst 0.55s ease both;
}
@keyframes hammer-swing {
  0% { opacity: 0; transform: rotate(-70deg) translate(28px, -36px); }
  35% { opacity: 1; transform: rotate(-52deg) translate(16px, -22px); }
  52% { opacity: 1; transform: rotate(12deg) translate(-2px, 6px); }
  70% { opacity: 1; transform: rotate(-8deg) translate(4px, 0); }
  100% { opacity: 0; transform: rotate(-40deg) translate(20px, -24px); }
}
@keyframes hammer-bonk {
  0%, 40% { transform: translate(0, 0) scale(1) rotate(0deg); }
  52% { transform: translate(2px, 6px) scale(1.05, 0.86) rotate(4deg); filter: brightness(1.15); }
  68% { transform: translate(-3px, -2px) scale(0.96, 1.04) rotate(-6deg); }
  82% { transform: translate(2px, 1px) scale(1.02, 0.98) rotate(2deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}
@keyframes hammer-burst {
  0%, 45% { opacity: 0; transform: scale(0.2); }
  55% { opacity: 1; transform: scale(2.4); box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.35); }
  100% { opacity: 0; transform: scale(3.2); }
}
.link-admin { color: var(--primary); text-decoration: none; font-size: 14px; }
.header-front {
  margin-right: 6px;
  white-space: nowrap;
  font-weight: 500;
}
.undo-done td { color: var(--muted); }
.undo-done .status-pill { opacity: .8; }

.pro-body.sider-open .pro-sider { transform: none; }

/* 窄屏：侧栏改为抽屉，点菜单滑出 */
@media (max-width: 960px) {
  .pro-body { display: block; }
  .pro-sider {
    position: fixed;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 8px 0 24px rgba(0,0,0,.2);
  }
  .pro-body.sider-open .pro-sider { transform: none; }
  .header-toggle { display: inline-flex; }
  .header-crumb { display: none; }
  .page-head,
  .page-head.has-online { display: flex; flex-direction: column; align-items: flex-start; }
  .page-head.page-head-guns { align-items: flex-start; }
  .guide-feishu-btn { min-height: 72px; font-size: 22px; letter-spacing: 0.04em; }
  .login-card { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .field-row, .form-row { grid-template-columns: 1fr; }
  .submit-share-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "code"
      "hint"
      "side";
  }
  .invite-kinds { grid-template-columns: 1fr; }
  .invite-gen-bar { justify-content: space-between; }
  .code-item, .code-item.has-img, .review-card, .review-card:has(.review-thumb), .review-card:has(.review-thumbs),
  .review-card:has(.review-side), .review-card.is-pending, .review-card:has(.review-mascot),
  .review-card:has(.review-side):has(.review-thumb), .review-card:has(.review-side):has(.review-thumbs),
  .review-card:has(.review-mascot):has(.review-thumb), .review-card:has(.review-mascot):has(.review-thumbs),
  .review-card.is-pending:has(.review-thumb), .review-card.is-pending:has(.review-thumbs), .fb-card {
    grid-template-columns: 1fr;
  }
  .code-actions {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    width: 100%;
  }
  .code-actions .btn-copy,
  .code-actions .btn-primary.btn-copy,
  .code-actions .btn.primary.btn-copy,
  .code-actions .btn-expand {
    grid-column: auto;
    flex: 0 1 auto;
  }
  .review-layout { flex-direction: column; }
  .review-stage-mascot {
    position: static;
    width: 100%;
    flex: none;
    order: -1;
  }
  .review-side { width: 100%; justify-self: stretch; }
  .review-mascot { width: 100%; justify-self: center; padding-top: 4px; }
  .review-top { flex-direction: column; align-items: stretch; }
  .claim-badge { max-width: none; }
  .review-foot { flex-direction: column; align-items: stretch; }
  .review-btns { margin-left: 0; width: 100%; }
  .review-btns .btn { flex: 1; }
  .review-drop { max-width: none; }
  .admin-panels, .pro-content { padding: 14px; }
  .pro-body.is-web-page .pro-wrap {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .pro-body.is-web-page .pro-content { padding: 0; }
  .pro-body.is-chat-page .pro-wrap {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .pro-body.is-chat-page .pro-content { padding: 10px; }
  .chat-shell { grid-template-columns: 1fr; }
  .chat-side { max-height: 120px; }
  .app-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .weapon-card .thumb-wrap { height: 96px; }
  .author-podium { padding: 4px 0 0; gap: 6px; }
  .podium-col { padding: 14px 6px 16px; }
  .podium-col.place1 { min-height: 236px; }
  .podium-col.place2 { min-height: 204px; }
  .podium-col.place3 { min-height: 186px; }
  .podium-avatar { width: 44px; height: 44px; font-size: 18px; }
  .podium-col.place1 .podium-avatar { width: 56px; height: 56px; font-size: 22px; }
  .podium-col .avatar-wrap { --av: 72px; }
  .podium-col.place1 .avatar-wrap { --av: 88px; }
  .author-rank-row .avatar-wrap { --av: 40px; }
  .podium-name { font-size: 14px; }
  .podium-col.place1 .podium-name { font-size: 15px; }
  .podium-title { font-size: 13px; }
  .author-rank-row { padding: 12px; grid-template-columns: 32px 32px minmax(0, 1fr) 72px; }
  .author-rank-row .avatar { width: 30px; height: 30px; }
  .author-rank-mid .name { font-size: 14px; }
  .place-badge { font-size: 12px; padding: 4px 8px; }
  .maker-review-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .maker-review-row {
    padding: 14px 12px 10px;
    border-radius: 14px;
  }
  .eval-card-body {
    gap: 10px;
  }
  .maker-avatar,
  .maker-avatar > .eval-face,
  .maker-avatar .avatar-wrap.is-eval {
    width: 88px;
    height: 88px;
    --av: 88px;
  }
  .maker-avatar > .eval-face {
    width: 56px;
    height: 56px;
    font-size: 32px;
  }
  .maker-avatar .eval-face { font-size: 32px; }
  .eval-title { font-size: 14px; }
  .eval-rate b { font-size: 17px; }
  .maker-review-actions {
    justify-content: stretch;
  }
}

.fb-file {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  padding: 4px 8px;
  background: #f0f5ff;
  border: 1px solid #d6e4ff;
  border-radius: 6px;
  color: var(--muted, #64748b);
  font-size: 12px;
}
.fb-file-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fb-dl-btn {
  flex: none;
  height: 26px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}

.pan-app { max-width: 980px; margin: 0 auto; padding: 20px 16px 48px; }
.pan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pan-name { color: var(--primary, #2563eb); text-decoration: none; word-break: break-all; }
.pan-name:hover { text-decoration: underline; }
.pan-link-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 8px 10px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}
.pan-link-box code { flex: 1; min-width: 160px; word-break: break-all; }
.pan-row-actions { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }

html, body.browse-body { height: 100%; margin: 0; }
.browse-body { background: #f4f6f9; }
.browse-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100vh;
}
.browse-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid var(--border, #e5e7eb);
  flex-wrap: wrap;
}
.browse-form {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 220px;
}
.browse-form input {
  flex: 1;
  min-width: 0;
  height: 36px;
  border: 1px solid var(--border-input, #d9d9d9);
  border-radius: 8px;
  padding: 0 12px;
  font: inherit;
}
.browse-quick {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--muted, #64748b);
  background: #fff;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.browse-tip { margin: 0; padding: 6px 12px; font-size: 12px; }
.browse-frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: #fff;
  min-height: 0;
}

/* 管理后台：ERP 分组布局，沿用原深色侧栏配色 */
.admin-body .pro-sider {
  width: 236px;
}
.admin-body .sider-brand {
  height: 58px;
  gap: 10px;
}
.admin-body .sider-menu {
  padding: 8px 0 calc(28px + env(safe-area-inset-bottom, 0px));
  gap: 2px;
}
.admin-body .sider-group {
  margin: 4px 0 2px;
}
.admin-body .sider-group-h {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 16px);
  margin: 0 8px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 8px 10px 6px;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}
.admin-body .sider-group-h:hover {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.04);
}
.admin-body .sider-group-h::after {
  content: "";
  width: 10px;
  height: 10px;
  margin-left: auto;
  flex: 0 0 10px;
  background: currentColor;
  opacity: 0.7;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  transition: transform 0.22s ease;
  transform: rotate(-90deg);
}
.admin-body .sider-group.is-open .sider-group-h::after {
  transform: rotate(0deg);
}
.admin-body .sider-group-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 6px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.2s ease, padding 0.2s ease;
}
.admin-body .sider-group.is-open .sider-group-body {
  max-height: 520px;
  opacity: 1;
  padding: 0 0 8px;
}
.admin-body .side-btn.nav-link {
  position: relative;
  border-radius: 10px;
  margin: 0 10px;
  width: calc(100% - 20px);
  padding: 8px 12px 8px 12px;
  font-size: 13px;
  font-weight: 600;
  gap: 8px;
}
.admin-body .side-btn.nav-link::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background: currentColor;
  opacity: 0.72;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.admin-body .side-btn.nav-link.active::before {
  opacity: 1;
}
.admin-body .side-btn.nav-link.active {
  box-shadow: 0 6px 16px rgba(47, 107, 255, 0.28);
}
.admin-body .side-btn.nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #fff;
  opacity: 0.9;
}
.admin-body .side-btn[data-panel="dash"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V9M10 19V5M16 19v-7M22 19H2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V9M10 19V5M16 19v-7M22 19H2'/%3E%3C/svg%3E");
}
.admin-body .side-btn[data-panel="site"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.4 4.9 5.4.8-3.9 3.8.9 5.4L12 15.9 7.2 17.9l.9-5.4L4.2 8.7l5.4-.8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.4 4.9 5.4.8-3.9 3.8.9 5.4L12 15.9 7.2 17.9l.9-5.4L4.2 8.7l5.4-.8z'/%3E%3C/svg%3E");
}
.admin-body .side-btn[data-panel="review"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");
}
.admin-body .side-btn[data-panel="docreview"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E");
}
.admin-body .side-btn[data-panel="renames"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
}
.admin-body .side-btn[data-panel="feedback"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3C/svg%3E");
}
.admin-body .side-btn[data-panel="codes"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9l-4 3 4 3M16 9l4 3-4 3M10 20l4-16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9l-4 3 4 3M16 9l4 3-4 3M10 20l4-16'/%3E%3C/svg%3E");
}
.admin-body .side-btn[data-panel="add"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.admin-body .side-btn[data-panel="io"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h11v4M17 17H6v-4M16 4l4 3-4 3M8 20l-4-3 4-3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h11v4M17 17H6v-4M16 4l4 3-4 3M8 20l-4-3 4-3'/%3E%3C/svg%3E");
}
.admin-body .side-btn[data-panel="disk"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
}
.admin-body .side-btn[data-panel="pan"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}
.admin-body .side-btn[data-panel="docfiles"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6l4 4v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M9 3v6h6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6l4 4v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M9 3v6h6'/%3E%3C/svg%3E");
}
.admin-body .side-btn[data-panel="backup"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8'/%3E%3Cpath d='M3 8l9-5 9 5-9 5z'/%3E%3Cpath d='M7.5 12.5 12 15l4.5-2.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8'/%3E%3Cpath d='M3 8l9-5 9 5-9 5z'/%3E%3Cpath d='M7.5 12.5 12 15l4.5-2.5'/%3E%3C/svg%3E");
}
.admin-body .side-btn[data-panel="users"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
.admin-body .side-btn[data-panel="makers"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11v10M14.5 21H18a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4.2l.8-4.2a2 2 0 0 0-1.9-2.4h-.2L9 8.5V11'/%3E%3Cpath d='M7 11H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11v10M14.5 21H18a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4.2l.8-4.2a2 2 0 0 0-1.9-2.4h-.2L9 8.5V11'/%3E%3Cpath d='M7 11H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h3'/%3E%3C/svg%3E");
}
.admin-body .side-btn[data-panel="online"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v4M12 18v4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M2 12h4M18 12h4M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v4M12 18v4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M2 12h4M18 12h4M4.9 19.1l2.8-2.8M16.3 7.7l2.8-2.8'/%3E%3C/svg%3E");
}
.admin-body .side-btn[data-panel="invites"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M4 8l8 6 8-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M4 8l8 6 8-6'/%3E%3C/svg%3E");
}
.admin-body .side-btn[data-panel="invitebans"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5 5l14 14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5 5l14 14'/%3E%3C/svg%3E");
}
.admin-body .side-btn[data-panel="undos"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7v6h6'/%3E%3Cpath d='M3 13a9 9 0 1 0 2.6-6.4L3 9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7v6h6'/%3E%3Cpath d='M3 13a9 9 0 1 0 2.6-6.4L3 9'/%3E%3C/svg%3E");
}
.admin-body .side-btn[data-panel="frames"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
}
.admin-body .side-btn[data-panel="account"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V20a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H4a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H10a1.7 1.7 0 0 0 1-1.5V4a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V10c.3.6.9 1 1.6 1H20a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V20a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H4a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H10a1.7 1.7 0 0 0 1-1.5V4a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V10c.3.6.9 1 1.6 1H20a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E");
}
.admin-body .sider-group-h .nav-badge {
  margin-left: 6px;
  margin-right: 0;
}
.admin-body .sider-menu > .side-btn.nav-link {
  margin-bottom: 2px;
}
.admin-body .pro-header {
  height: 56px;
}
.admin-body .header-crumb {
  display: block;
  font-weight: 500;
  font-size: 16px;
}
.admin-body .admin-panels {
  padding: 20px 24px 32px;
}
.admin-body .admin-panels .panel.active {
  background: var(--bg);
  border-radius: 10px;
  box-shadow: none;
  padding: 20px 22px 24px;
}
.admin-body .admin-panels .panel.panel-dash.active {
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.dash-root { display: flex; flex-direction: column; gap: 16px; }
.dash-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--card);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  padding: 10px 16px;
}
.dash-status-main {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--heading);
  font-size: 13px;
}
.dash-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(82, 196, 26, 0.18);
}
.dash-status.is-warn .dash-dot {
  background: var(--warning);
  box-shadow: 0 0 0 4px rgba(212, 136, 6, 0.2);
}
.dash-status.is-warn .dash-status-main { color: #ad6800; }
.dash-status-meta {
  color: var(--muted);
  font-size: 12px;
}
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.dash-kpis-hero {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dash-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  padding: 16px 18px 18px;
  min-width: 0;
  text-align: left;
}
.dash-card .k {
  color: var(--muted);
  font-size: 13px;
}
.dash-card .v {
  margin-top: 8px;
  color: var(--heading);
  font-size: 22px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.dash-card .s {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}
.dash-card .s.s-warn { color: #d48806; }
.dash-card .s.s-ok { color: #389e0d; }
.dash-card .s.s-info { color: #1677ff; }
.dash-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  width: 100%;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.dash-hero:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.dash-hero-text { min-width: 0; }
.dash-ico {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.dash-ico svg { width: 18px; height: 18px; }
.dash-ico.ico-warn { background: #fff7e6; color: #d48806; }
.dash-ico.ico-ok { background: #f6ffed; color: #52c41a; }
.dash-ico.ico-info { background: #e6f4ff; color: #1677ff; }
.dash-ico.ico-mute { background: #f5f5f5; color: #8c8c8c; }
.dash-ico.ico-rose { background: #fff1f0; color: #f5222d; }
.dash-ico.ico-live { background: #e6fffb; color: #13c2c2; }
.dash-bar {
  margin-top: 10px;
  height: 6px;
  border-radius: 99px;
  background: #f0f0f0;
  overflow: hidden;
}
.dash-bar > i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--primary);
  width: 0;
}
.dash-bar.is-ok > i { background: var(--success); }
.dash-bar.is-warn > i { background: var(--warning); }
.dash-bar.is-bad > i { background: var(--error); }
.dash-charts {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}
.dash-chart-box h3,
.dash-table-box h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--heading);
}
.dash-box-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.dash-box-h h3 { margin: 0; }
.dash-more {
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
.dash-chart-box canvas {
  width: 100%;
  height: 240px;
  display: block;
}
.dash-donut-box canvas {
  height: 180px;
  max-width: 220px;
  margin: 0 auto;
}
.dash-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: center;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
.dash-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}
.dash-tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.dash-table th,
.dash-table td {
  text-align: left;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
  color: var(--text);
}
.dash-table th {
  color: var(--muted);
  font-weight: 500;
}
.dash-table td:last-child,
.dash-table th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dash-path {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
}
.dash-tag {
  display: inline-block;
  min-width: 28px;
  padding: 1px 8px;
  border-radius: 4px;
  background: #e6f4ff;
  color: #1677ff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.dash-todos {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dash-todos li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
  font-size: 13px;
  color: var(--heading);
}
.dash-todos li:last-child { border-bottom: 0; }
.dash-todos button {
  flex: 1;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.dash-todos .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
  background: #d9d9d9;
}
.dash-todos .dot.warn { background: #faad14; }
.dash-todos .dot.bad { background: #ff4d4f; }
.dash-todos .dot.ok { background: #52c41a; }
.dash-todos .when {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
@media (max-width: 1200px) {
  .dash-kpis-hero { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-charts, .dash-tables { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dash-kpis { grid-template-columns: 1fr; }
}

.submit-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(90deg, #fff8e8, #fff);
  border: 1px solid rgba(212, 160, 48, 0.35);
  box-shadow: var(--shadow);
  transform: translateY(-6px);
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(.22,.8,.2,1);
}
.submit-banner.hidden { display: none; }
.submit-banner.is-show {
  opacity: 1;
  transform: none;
}
.submit-banner-k {
  flex-shrink: 0;
  margin-top: 1px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #6b4300;
  background: linear-gradient(180deg, #ffe9b0, #f0c14a);
}
.submit-banner-text {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  line-height: 1.55;
  color: #3b2a0a;
  font-size: 14px;
  word-break: break-word;
}
.submit-banner-code {
  display: inline-block;
  margin: 0;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(212, 160, 48, 0.4);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #5a3a00;
  cursor: pointer;
  line-height: 1.4;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
button.submit-banner-code:hover {
  background: #fff;
  border-color: rgba(212, 160, 48, 0.75);
}
button.submit-banner-code:active {
  transform: scale(0.98);
}
.submit-banner-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.submit-banner-name {
  font-size: 13px;
  font-weight: 700;
  color: #6b4300;
}
.submit-banner-fields {
  display: grid;
  gap: 12px;
  margin: 8px 0 16px;
}
.submit-banner-slot {
  display: grid;
  grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.submit-banner-slot label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  min-width: 0;
}
.submit-banner-slot input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--border-input);
  border-radius: 8px;
  padding: 0 12px;
  font: inherit;
  background: #fafbfc;
}
@media (max-width: 720px) {
  .submit-banner-slot {
    grid-template-columns: 1fr;
  }
  .submit-banner-slot .btn {
    justify-self: start;
  }
}
.gold-weapon-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  max-height: 420px;
  overflow: auto;
  padding: 10px;
  margin: 10px 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--chip-bg);
}
.gold-weapon-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  cursor: pointer;
}
.gold-weapon-item:hover { border-color: var(--primary); }
.gold-weapon-name { font-weight: 600; }
.honor-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  line-height: 20px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #6b4300;
  background: linear-gradient(180deg, #ffe9b0, #f0c14a);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 0 0 1px rgba(196, 140, 20, 0.35);
}
.honor-tag.is-empty {
  background: #f0f0f0;
  color: var(--muted);
  box-shadow: none;
  font-weight: 500;
}
.honor-fly {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  overflow: hidden;
}
.honor-fly-item {
  position: absolute;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(92vw, 520px);
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(28, 18, 6, 0.92), rgba(62, 38, 8, 0.82));
  border: 1px solid rgba(255, 214, 120, 0.55);
  box-shadow: 0 10px 28px rgba(160, 100, 16, 0.32);
  color: #fff7e6;
  white-space: nowrap;
  font-size: 14px;
  animation: honor-fly-move 7s linear forwards;
  will-change: transform;
}
.honor-fly-item .avatar-wrap,
.honor-fly-item .avatar,
.honor-fly-item .avatar-fallback {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.honor-fly-item .honor-tag {
  font-size: 13px;
  line-height: 24px;
  padding: 0 10px;
  flex-shrink: 0;
  max-width: 9em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.honor-fly-name {
  font-weight: 650;
  color: #fff;
  min-width: 0;
  max-width: 10em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.honor-fly-verb {
  color: rgba(255, 247, 230, 0.78);
  flex-shrink: 0;
}
@keyframes honor-fly-move {
  from { transform: translateX(-110%); }
  to { transform: translateX(100vw); }
}

/* ===== 2026 界面整理：间距、层次、动效，不改功能结构 ===== */
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
::selection { background: #dbe7ff; color: #111827; }
html[data-theme="dark"] ::selection { background: #2f4d8f; color: #f8fbff; }
body, .pro-body { letter-spacing: 0.01em; }
.pro-sider {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(47, 107, 255, 0.22), transparent 46%),
    linear-gradient(180deg, #10192c 0%, var(--sider) 42%);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}
.sider-brand {
  height: 68px;
  padding: 0 18px;
}
.sider-name {
  font-size: 17px;
  letter-spacing: 0.04em;
}
.sider-logo, .sider-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}
.sider-mark {
  background: linear-gradient(145deg, #6b93ff, var(--primary));
  box-shadow: 0 8px 18px rgba(47, 107, 255, 0.32);
}
.sider-menu { padding: 10px 12px 16px; gap: 6px; }
.nav-link, .side-btn.nav-link {
  padding: 10px 12px;
  border-radius: 10px;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.nav-link:hover, .side-btn.nav-link:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}
.nav-link.is-active, .side-btn.active {
  background: linear-gradient(180deg, #4c82ff, var(--primary)) !important;
  box-shadow: 0 8px 18px rgba(47, 107, 255, 0.28);
}
.pro-header {
  height: 66px;
  padding: 0 24px;
  background: var(--header-bg);
  border-bottom-color: var(--border);
}
.header-crumb { font-size: 16px; letter-spacing: 0.01em; }
.account-drop {
  border-radius: 14px;
  border-color: rgba(15, 23, 42, 0.06);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.14);
  padding: 8px;
}
.account-item { height: 40px; border-radius: 10px; }
.account-trigger {
  background: var(--chip-bg);
  transition: background .16s ease;
}
.pro-content { padding: 22px 24px 56px; }
.page-head { margin-bottom: 16px; }
.page-head.page-head-guns { margin-bottom: 12px; }
.page-head h1, .page-intro h1 {
  font-size: 24px;
  letter-spacing: -0.03em;
  color: var(--heading);
}
.page-head p, .page-intro p { color: var(--muted); }
.filter-card, .ant-card, .panel {
  border: 1px solid rgba(15, 23, 42, 0.04);
}
.filter-card { padding: 16px 18px 12px; border-radius: 14px; }
.search-field input {
  height: 42px;
  border-radius: 11px;
  background: var(--input-bg);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.search-field input:focus,
input:focus, textarea:focus, select:focus {
  border-color: #8fb0ff;
  box-shadow: 0 0 0 4px rgba(47, 107, 255, 0.12);
}
.seg-item, .chip {
  padding: 5px 13px;
  background: var(--chip-bg);
  transition: background .14s ease, color .14s ease, transform .14s ease;
}
.seg-item:hover, .chip:hover { transform: translateY(-1px); }
.weapon-card, .app-card {
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.weapon-card:hover, .app-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
  border-color: #c7d7ff;
}
.weapon-card .thumb-wrap, .app-card .thumb-wrap {
  background:
    radial-gradient(140px 70px at 50% 88%, rgba(47,107,255,.16), transparent 72%),
    linear-gradient(180deg, var(--thumb-from), var(--thumb-to));
}
.btn, .btn.ghost, .btn.primary {
  height: 34px;
  padding: 0 15px;
  border-radius: 9px;
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary, .btn.primary {
  box-shadow: 0 6px 14px rgba(47, 107, 255, 0.22);
}
.btn-primary:hover, .btn.primary:hover {
  box-shadow: 0 8px 18px rgba(47, 107, 255, 0.28);
}
.login-wrap {
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(47,107,255,.18), transparent 55%),
    radial-gradient(640px 360px at 110% 110%, rgba(14,165,233,.12), transparent 50%),
    var(--bg);
}
.login-card {
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.05);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.12);
}
.login-form .brand-name {
  letter-spacing: -0.03em;
}
.toolbar input[type="search"] {
  height: 38px;
  border-radius: 10px;
  padding: 0 12px;
  border: 1px solid var(--border-input);
}
.table-wrap {
  border-radius: 12px;
  border-color: rgba(15, 23, 42, 0.06);
  background: var(--card);
}
th {
  background: var(--chip-bg);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #6b7280;
}
tr:hover td { background: #f7f9ff; }
.status-pill {
  border-radius: 999px;
  font-weight: 650;
}
.admin-body .admin-panels .panel.active {
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.04);
  padding: 22px 24px 26px;
}
.admin-body .sider-group-h {
  color: rgba(255,255,255,.45);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.admin-body .side-btn.nav-link { margin: 0 10px; }
.modal-sheet {
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
}
.toast {
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}
.vip-box, .invite-gen-card, .code-manage-card {
  border-radius: 14px;
}
.code-item, .review-card, .fb-card {
  border-radius: 12px;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: #c9d0dc;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #aeb6c4; background-clip: padding-box; }

@media (max-width: 860px) {
  .pro-content { padding: 16px 14px 40px; }
  .page-head h1, .page-intro h1 { font-size: 22px; }
  .admin-body .admin-panels { padding: 14px; }
}

/* ===== 交互过渡（明显版：切页淡入上滑 + 按钮按压） ===== */
:root {
  --fx: 0.28s cubic-bezier(.22,.7,.2,1);
  --fx-slow: 0.45s cubic-bezier(.22,.7,.2,1);
}

@keyframes fx-rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fx-pop {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.fx-in {
  animation: fx-rise 0.32s cubic-bezier(.22,.8,.2,1);
  pointer-events: auto;
}
.admin-panels .panel.fx-in,
#userView .panel.fx-in {
  animation: fx-fade 0.28s ease;
}

/* 遮罩类：保留节点以便淡入淡出（覆盖 .hidden 的 display:none） */
.modal.hidden {
  display: grid !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: none;
}
.modal {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--fx-slow), visibility var(--fx-slow);
}
.modal .modal-sheet {
  transform: translateY(28px) scale(0.94);
  opacity: 0;
  transition: transform var(--fx-slow), opacity var(--fx);
}
.modal:not(.hidden) .modal-sheet {
  transform: none;
  opacity: 1;
}

.toast.hidden {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(24px);
}
.toast {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity var(--fx), transform var(--fx), visibility var(--fx);
}

.account-drop.hidden {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-12px) scale(0.96);
}
.account-drop {
  opacity: 1;
  visibility: visible;
  transform: none;
  transform-origin: top right;
  transition: opacity var(--fx), transform var(--fx), visibility var(--fx);
}

.img-zoom.hidden {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.img-zoom {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--fx-slow), visibility var(--fx-slow);
}
.img-zoom img {
  transform: scale(0.9);
  opacity: 0.35;
  transition: transform var(--fx-slow), opacity var(--fx);
}
.img-zoom:not(.hidden) img {
  transform: none;
  opacity: 1;
}
.img-zoom-close {
  transition: background var(--fx), transform var(--fx);
}
.img-zoom-close:hover { transform: rotate(90deg); }

.nav-link, .side-btn.nav-link {
  transition: background var(--fx), color var(--fx), box-shadow var(--fx);
}
.account-trigger {
  transition: background var(--fx), transform var(--fx), box-shadow var(--fx);
}
.account-trigger:hover { transform: translateY(-1px); }
.account-trigger:active { transform: scale(0.96); }
.account-item, .account-notice-item {
  transition: background var(--fx), transform var(--fx);
}
.account-item:hover, .account-notice-item:hover { transform: translateX(4px); }
.header-toggle { transition: color var(--fx), transform var(--fx); }
.header-toggle:active { transform: scale(0.94); }
.icon-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  transition: color var(--fx), background var(--fx), transform var(--fx);
}
.icon-close:hover {
  color: var(--heading);
  background: #f3f5f9;
  transform: rotate(90deg);
}

.btn, .btn.ghost, .btn.primary {
  transition: background var(--fx), border-color var(--fx), color var(--fx), box-shadow var(--fx), transform var(--fx);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.96); }
.seg-item, .chip, .chip-fold-btn {
  transition: background var(--fx), color var(--fx), transform var(--fx), box-shadow var(--fx);
}
.seg-item:hover, .chip:hover { transform: translateY(-2px) scale(1.03); }
.seg-item:active, .chip:active, .chip-fold-btn:active { transform: scale(0.95); }
input, textarea, select, .search-field input, .toolbar input[type="search"] {
  transition: border-color var(--fx), box-shadow var(--fx), background var(--fx), transform var(--fx);
}
.upload-drop, .upload-clear {
  transition: border-color var(--fx), background var(--fx), transform var(--fx);
}

.weapon-card, .app-card {
  transition: transform 0.28s cubic-bezier(.22,.7,.2,1), box-shadow 0.28s ease, border-color 0.28s ease;
}
.weapon-card:hover, .app-card:hover {
  transform: translateY(-8px) scale(1.02);
}
.weapon-card:active, .app-card:active { transform: translateY(-2px) scale(0.99); }
.podium-col { transition: transform var(--fx), box-shadow var(--fx); }
.podium-col:hover { transform: translateY(-8px); }
.code-item, .review-card, .fb-card, .code-manage-card, .dash-card, .dash-hero {
  transition: transform var(--fx), box-shadow var(--fx), border-color var(--fx), background var(--fx);
}
.code-item:hover, .review-card:hover, .fb-card:hover, .code-manage-card:hover {
  transform: translateY(-3px);
  border-color: #dbe7ff;
}
.dash-hero:hover, .dash-card:hover { transform: translateY(-4px); }
tbody tr { transition: background var(--fx); }
tbody tr:active td { background: #eef3ff; }

.code-item-group .code-variants {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  pointer-events: none;
  transition: max-height 0.4s ease, opacity var(--fx), margin-top var(--fx);
}
.code-item-group.is-open .code-variants {
  max-height: 2400px;
  opacity: 1;
  margin-top: 12px;
  pointer-events: auto;
}

@media (max-width: 960px) {
  .pro-sider {
    transition: transform var(--fx-slow);
  }
}

/* 不跟随系统「减少动态效果」，动画始终播放 */
@media (prefers-reduced-motion: reduce) {
  html {
    --fx: 0.28s cubic-bezier(.22,.7,.2,1);
    --fx-slow: 0.45s cubic-bezier(.22,.7,.2,1);
  }
  .fx-in {
    animation: fx-rise 0.32s cubic-bezier(.22,.8,.2,1) both !important;
  }
  .modal {
    transition: opacity var(--fx-slow), visibility var(--fx-slow) !important;
  }
  .modal .modal-sheet {
    transition: transform var(--fx-slow), opacity var(--fx) !important;
  }
  .toast, .account-drop {
    transition: opacity var(--fx), transform var(--fx), visibility var(--fx) !important;
  }
  .img-zoom {
    transition: opacity var(--fx-slow), visibility var(--fx-slow) !important;
  }
  .img-zoom img {
    transition: transform var(--fx-slow), opacity var(--fx) !important;
  }
  .btn, .btn.ghost, .btn.primary,
  .seg-item, .chip, .chip-fold-btn,
  .weapon-card, .app-card,
  .code-item, .review-card, .fb-card, .code-manage-card,
  .dash-card, .dash-hero, .podium-col,
  .nav-link, .side-btn.nav-link,
  .account-trigger, .account-item, .account-notice-item,
  .icon-close, .img-zoom-close, .header-toggle,
  input, textarea, select, .search-field input, .toolbar input[type="search"] {
    transition-duration: 0.28s !important;
    transition-delay: 0s !important;
    animation-duration: 0.32s !important;
    animation-delay: 0s !important;
    animation-play-state: running !important;
  }
  .code-item-group .code-variants {
    transition: max-height 0.4s ease, opacity var(--fx), margin-top var(--fx) !important;
  }
  .pro-sider {
    transition: transform var(--fx-slow) !important;
  }
}

/* ===== 浅色 / 深色主题 ===== */
html[data-theme="dark"] {
  --primary: #5b8cff;
  --primary-hover: #7aa3ff;
  --primary-active: #3d74f5;
  --primary-soft: rgba(91, 140, 255, 0.16);
  --success: #4ade80;
  --warning: #fbbf24;
  --error: #fb7185;
  --heading: #f1f5f9;
  --text: #cbd5e1;
  --muted: #8b9bb4;
  --border: #243044;
  --border-input: #334155;
  --bg: #0b111c;
  --card: #151c2b;
  --sider: #070b14;
  --sider-text: rgba(226, 232, 240, 0.72);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.28);
  --header-bg: rgba(11, 17, 28, 0.88);
  --input-bg: #101826;
  --chip-bg: #1c2536;
  --thumb-from: #1a2233;
  --thumb-to: #121926;
  --code-bg: #101826;
  --overlay: rgba(2, 6, 14, 0.72);
}
html[data-theme="dark"] .pro-sider {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(91, 140, 255, 0.18), transparent 46%),
    linear-gradient(180deg, #10182a 0%, var(--sider) 42%);
  border-right-color: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .admin-body .admin-panels .panel,
html[data-theme="dark"] .admin-body .admin-panels .panel.active {
  background: var(--bg);
  border-color: transparent;
  box-shadow: none;
}
html[data-theme="dark"] .admin-body .admin-panels .panel.panel-dash.active {
  background: transparent;
}
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .result-box,
html[data-theme="dark"] .result,
html[data-theme="dark"] .dash-status,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .account-drop,
html[data-theme="dark"] .vip-box,
html[data-theme="dark"] .invite-gen-card,
html[data-theme="dark"] .invite-kind,
html[data-theme="dark"] .choice-row .choice,
html[data-theme="dark"] .upload-drop,
html[data-theme="dark"] .fb-drop,
html[data-theme="dark"] .chat-bubble,
html[data-theme="dark"] .guide-jump,
html[data-theme="dark"] .review-stage-mascot {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .weapon-card:hover,
html[data-theme="dark"] .app-card:hover {
  border-color: #3b4d72;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .code-manage-card.is-doc-hidden {
  background: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] .cm-hidden-tag {
  color: #fdba74;
  background: rgba(154, 52, 18, 0.35);
}
html[data-theme="dark"] .cm-file-ro,
html[data-theme="dark"] .code-manage-card input[readonly] {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}
html[data-theme="dark"] .scheme-card,
html[data-theme="dark"] .code-item,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .fb-card,
html[data-theme="dark"] .code-manage-card,
html[data-theme="dark"] .dash-card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .modal-sheet,
html[data-theme="dark"] .filter-card,
html[data-theme="dark"] .ant-card,
html[data-theme="dark"] .panel {
  background: var(--card);
  border-color: var(--border);
  box-shadow: var(--shadow);
}
html[data-theme="dark"] .scheme-card:hover,
html[data-theme="dark"] .review-card:hover,
html[data-theme="dark"] .code-item:hover,
html[data-theme="dark"] .fb-card:hover {
  border-color: #3b4d72;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .search-field input,
html[data-theme="dark"] .toolbar input[type="search"],
html[data-theme="dark"] .admin-panels input,
html[data-theme="dark"] .admin-panels select,
html[data-theme="dark"] .review-fc input,
html[data-theme="dark"] .review-fc select,
html[data-theme="dark"] .code-row .review-code-input,
html[data-theme="dark"] .gun-code-input {
  background: var(--input-bg) !important;
  color: var(--heading) !important;
  border-color: var(--border-input) !important;
}
html[data-theme="dark"] .code-row .review-code-input,
html[data-theme="dark"] .gun-code-input,
html[data-theme="dark"] .review-body .code {
  color: #93c5fd !important;
}
html[data-theme="dark"] .review-body .tags {
  background: rgba(234, 88, 12, 0.16);
  border-color: rgba(251, 146, 60, 0.45);
  border-left-color: #fb923c;
  color: #fdba74;
}
html[data-theme="dark"] .review-body .tags .k {
  color: #fb923c;
}
html[data-theme="dark"] .review-body .tags.note {
  background: rgba(225, 29, 72, 0.12);
  border-color: rgba(251, 113, 133, 0.35);
  border-left-color: var(--error);
  color: #fb7185;
}
html[data-theme="dark"] .review-body .tags.note .k {
  color: #fb7185;
}
html[data-theme="dark"] .review-body .tags.is-empty,
html[data-theme="dark"] .review-body .tags.is-empty .k,
html[data-theme="dark"] .review-body .tags.is-empty .muted {
  background: var(--chip-bg);
  border-color: var(--border);
  border-left-color: #64748b;
  color: #94a3b8;
}
html[data-theme="dark"] .code-item .tags.note,
html[data-theme="dark"] .review-drop,
html[data-theme="dark"] .review-upload-btn,
html[data-theme="dark"] .review-mascot-opt,
html[data-theme="dark"] .doc-sheet-chip,
html[data-theme="dark"] .pill,
html[data-theme="dark"] .status-pill {
  background: var(--chip-bg);
  border-color: var(--border);
  color: var(--heading);
}
html[data-theme="dark"] .review-body .code,
html[data-theme="dark"] .review-body .code.copyable:hover {
  background: var(--code-bg);
  color: #93c5fd;
  border-color: var(--border);
}
html[data-theme="dark"] .btn:not(.primary):not(.btn-primary):not(.danger),
html[data-theme="dark"] .btn-expand,
html[data-theme="dark"] .btn-download,
html[data-theme="dark"] .btn-import,
html[data-theme="dark"] .btn-like,
html[data-theme="dark"] .btn-fav {
  background: var(--chip-bg);
  color: var(--heading);
  border-color: var(--border-input);
}
html[data-theme="dark"] .review-btns .btn.danger,
html[data-theme="dark"] .btn.danger {
  background: transparent;
  color: #fb7185;
  border-color: rgba(251, 113, 133, 0.45);
}
html[data-theme="dark"] .review-btns .btn.danger:hover,
html[data-theme="dark"] .btn.danger:hover {
  background: rgba(251, 113, 133, 0.12);
}
html[data-theme="dark"] .scheme-card-codebox,
html[data-theme="dark"] .scheme-card-code,
html[data-theme="dark"] .code.copyable,
html[data-theme="dark"] .code-row .code {
  background: var(--code-bg);
  color: #93c5fd;
  border-color: var(--border);
}
html[data-theme="dark"] .scheme-card-media,
html[data-theme="dark"] .scheme-card-img,
html[data-theme="dark"] .code-item > img,
html[data-theme="dark"] .code-item .code-thumbs img {
  background: var(--chip-bg);
  border-color: var(--border);
}
html[data-theme="dark"] .scheme-card-actions {
  border-top-color: var(--border);
}
html[data-theme="dark"] .scheme-card-actions .btn-download,
html[data-theme="dark"] .scheme-card-actions .btn-import,
html[data-theme="dark"] .scheme-card-actions .btn-fav,
html[data-theme="dark"] .scheme-card-actions .btn-like,
html[data-theme="dark"] .scheme-card-actions .btn-quick-fb,
html[data-theme="dark"] .scheme-card-actions .btn-expand {
  background: var(--chip-bg) !important;
  border-color: var(--border) !important;
  color: var(--heading) !important;
}
html[data-theme="dark"] .scheme-card-actions .btn-download,
html[data-theme="dark"] .scheme-card-actions .btn-expand {
  color: #93c5fd !important;
  background: rgba(47, 107, 255, 0.16) !important;
  border-color: rgba(91, 140, 255, 0.28) !important;
}
html[data-theme="dark"] .scheme-card-actions .btn-import {
  color: #6ee7b7 !important;
  background: rgba(4, 120, 87, 0.18) !important;
  border-color: rgba(110, 231, 183, 0.28) !important;
}
html[data-theme="dark"] .scheme-card-actions .btn-quick-fb,
html[data-theme="dark"] .scheme-card-fb {
  color: #c4b5fd !important;
  background: rgba(124, 58, 237, 0.18) !important;
  border-color: rgba(196, 181, 253, 0.28) !important;
}
html[data-theme="dark"] .scheme-card-actions .btn-download:hover,
html[data-theme="dark"] .scheme-card-actions .btn-import:hover,
html[data-theme="dark"] .scheme-card-actions .btn-fav:hover,
html[data-theme="dark"] .scheme-card-actions .btn-like:hover,
html[data-theme="dark"] .scheme-card-actions .btn-quick-fb:hover,
html[data-theme="dark"] .scheme-card-actions .btn-expand:hover {
  filter: brightness(1.12);
  color: var(--heading) !important;
}
html[data-theme="dark"] .scheme-tag.is-mode-fenghuo,
html[data-theme="dark"] .scheme-tag.is-code,
html[data-theme="dark"] .scheme-card-tags .scheme-tag.is-multi,
html[data-theme="dark"] .review-meta .review-weapon,
html[data-theme="dark"] .review-meta span.mode-fenghuo {
  color: #93c5fd;
  background: rgba(47, 107, 255, 0.16);
  border-color: rgba(91, 140, 255, 0.28);
}
html[data-theme="dark"] .scheme-tag.is-mode-quanmian,
html[data-theme="dark"] .review-meta span.mode-quanmian {
  color: #fdba74;
  background: rgba(194, 65, 12, 0.18);
  border-color: rgba(253, 186, 116, 0.28);
}
html[data-theme="dark"] .scheme-card-fb:hover {
  background: rgba(124, 58, 237, 0.28) !important;
  color: #ddd6fe !important;
}
html[data-theme="dark"] th { background: #121926; color: var(--heading); }
html[data-theme="dark"] td,
html[data-theme="dark"] table { border-color: var(--border); color: var(--text); }
html[data-theme="dark"] tr:hover td,
html[data-theme="dark"] tbody tr:active td,
html[data-theme="dark"] .doc-code-row:hover,
html[data-theme="dark"] #inviteBanTable tr.is-checked td {
  background: #1a2436;
}
html[data-theme="dark"] .account-item:hover { background: var(--chip-bg); }
html[data-theme="dark"] .account-sep { background: var(--border); }
html[data-theme="dark"] .account-trigger:hover { background: #243044; }
html[data-theme="dark"] .modal { background: var(--overlay); }
html[data-theme="dark"] .empty,
html[data-theme="dark"] .muted { color: var(--muted); }
html[data-theme="dark"] .page-head p,
html[data-theme="dark"] .page-intro p { color: var(--muted); }
html[data-theme="dark"] .detail-panel,
html[data-theme="dark"] .detail-hero,
html[data-theme="dark"] #gunsDetailView .detail-panel {
  background: var(--card);
  border-color: var(--border);
}
html[data-theme="dark"] .back-fab {
  background: var(--card);
  color: #93c5fd;
  border-color: #3b4d72;
}
html[data-theme="dark"] .toast {
  background: #1c2536;
  color: #f1f5f9;
  border-color: #334155;
}
html[data-theme="dark"] .meta-chip,
html[data-theme="dark"] .mode-tag,
html[data-theme="dark"] .queue-no,
html[data-theme="dark"] .status-pill.pending {
  background: var(--chip-bg);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .status-pill.approved {
  background: rgba(74, 222, 128, 0.14);
  color: #86efac;
}
html[data-theme="dark"] .status-pill.rejected,
html[data-theme="dark"] .review-body .tags.note {
  background: rgba(251, 113, 133, 0.12);
  color: #fb7185;
}
html[data-theme="dark"] .submit-banner,
html[data-theme="dark"] .gold-banner,
html[data-theme="dark"] .page-head-guns .meta-item {
  background: var(--card);
  border-color: var(--border);
  color: var(--heading);
}
html[data-theme="dark"] .guns-view-track,
html[data-theme="dark"] .code-layout-toggle .guns-view-track {
  background: #0f1724;
  border-color: var(--border);
}
html[data-theme="dark"] .guns-view-thumb,
html[data-theme="dark"] .code-layout-toggle .guns-view-thumb {
  background: #243044;
}
html[data-theme="dark"] .chat-msg.is-mine .chat-bubble {
  background: var(--primary-soft);
}


html[data-theme="dark"] .kpi-inline,
html[data-theme="dark"] .page-head-meta,
html[data-theme="dark"] .online-pill,
html[data-theme="dark"] .online-users-pop,
html[data-theme="dark"] .filter-more-btn,
html[data-theme="dark"] .guide-card,
html[data-theme="dark"] .guide-jump,
html[data-theme="dark"] .guide-card.more,
html[data-theme="dark"] .maker-review-row,
html[data-theme="dark"] .btn-maker,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .frame-opt,
html[data-theme="dark"] .frame-admin-card,
html[data-theme="dark"] .gold-weapon-item,
html[data-theme="dark"] .gold-weapon-list,
html[data-theme="dark"] .fb-card,
html[data-theme="dark"] .fb-panel,
html[data-theme="dark"] .scope-block,
html[data-theme="dark"] .vip-box,
html[data-theme="dark"] .eval-stat,
html[data-theme="dark"] .eval-note,
html[data-theme="dark"] .pan-link-box,
html[data-theme="dark"] .fb-kind-switch,
html[data-theme="dark"] .review-stage-mascot {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] .gold-weapon-list,
html[data-theme="dark"] .fb-panel,
html[data-theme="dark"] .scope-block,
html[data-theme="dark"] .eval-stat,
html[data-theme="dark"] .eval-note,
html[data-theme="dark"] .fb-kind-switch,
html[data-theme="dark"] .vip-box {
  background: var(--chip-bg) !important;
}
html[data-theme="dark"] .guide-card.warn {
  background: rgba(217, 119, 6, 0.16) !important;
  border-color: rgba(251, 191, 36, 0.32) !important;
  color: var(--text);
}
html[data-theme="dark"] .guide-card.warn h2,
html[data-theme="dark"] .guide-card.warn p,
html[data-theme="dark"] .guide-card.warn li,
html[data-theme="dark"] .guide-card p,
html[data-theme="dark"] .guide-card li {
  color: var(--text);
}
html[data-theme="dark"] .guide-card h2 { color: var(--heading); }
html[data-theme="dark"] .eval-stat.is-good {
  background: rgba(74, 222, 128, 0.12) !important;
  border-color: rgba(74, 222, 128, 0.28) !important;
}
html[data-theme="dark"] .eval-stat.is-bad {
  background: rgba(251, 113, 133, 0.12) !important;
  border-color: rgba(251, 113, 133, 0.28) !important;
}
html[data-theme="dark"] .eval-stat.is-good b { color: #86efac; }
html[data-theme="dark"] .eval-stat.is-bad b { color: #fb7185; }
html[data-theme="dark"] .btn-maker.good:hover,
html[data-theme="dark"] .btn-maker.good.is-on {
  background: rgba(74, 222, 128, 0.16) !important;
  color: #86efac;
  border-color: rgba(74, 222, 128, 0.4) !important;
}
html[data-theme="dark"] .btn-maker.bad:hover,
html[data-theme="dark"] .btn-maker.bad.is-on {
  background: rgba(251, 113, 133, 0.16) !important;
  color: #fb7185;
  border-color: rgba(251, 113, 133, 0.4) !important;
}
html[data-theme="dark"] .fb-problem {
  background: rgba(217, 119, 6, 0.16) !important;
  border-color: rgba(251, 191, 36, 0.32) !important;
  color: #fbbf24;
}
html[data-theme="dark"] .fb-warn {
  background: rgba(251, 113, 133, 0.12) !important;
  border-color: rgba(251, 113, 133, 0.28) !important;
  color: #fb7185;
}
html[data-theme="dark"] .fb-kind-btn { color: var(--muted); background: transparent; }
html[data-theme="dark"] .filter-more-btn { color: var(--text); }
html[data-theme="dark"] .gold-weapon-name { color: var(--heading); }
html[data-theme="dark"] .guns-source-toggle .guns-view-track {
  background: #0f1724 !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .guns-source-toggle .guns-view-thumb {
  background: #243044 !important;
}
html[data-theme="dark"] .frame-opt.is-on,
html[data-theme="dark"] .frame-opt:hover {
  background: var(--primary-soft) !important;
  color: var(--primary);
  border-color: var(--primary);
}

.theme-toggle {
  --theme-toggle-w: 52px;
  --theme-toggle-h: 30px;
  border: 1px solid var(--border-input);
  background: var(--chip-bg);
  width: var(--theme-toggle-w);
  height: var(--theme-toggle-h);
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  z-index: 120;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: var(--heading);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  view-transition-name: theme-toggle;
}
.theme-toggle:hover { transform: none; border-color: var(--primary); }
.theme-toggle-track {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 7px;
}
.theme-toggle .theme-ico {
  width: 14px;
  height: 14px;
  z-index: 1;
  opacity: 0.55;
  transition: opacity .7s ease, color .7s ease;
}
.theme-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
  transition: transform .85s cubic-bezier(.4, 0, .2, 1);
  z-index: 0;
}
html[data-theme="dark"] .theme-toggle-thumb {
  transform: translateX(22px);
  background: #2a364c;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
html[data-theme="light"] .theme-toggle .theme-ico-sun,
html:not([data-theme]) .theme-toggle .theme-ico-sun { opacity: 1; color: #d97706; }
html[data-theme="dark"] .theme-toggle .theme-ico-moon { opacity: 1; color: #fbbf24; }

html.theme-fade body,
html.theme-fade .pro-header,
html.theme-fade .pro-sider,
html.theme-fade .pro-content,
html.theme-fade .filter-card,
html.theme-fade .weapon-card,
html.theme-fade .scheme-card,
html.theme-fade .code-item,
html.theme-fade .review-card,
html.theme-fade .btn,
html.theme-fade input,
html.theme-fade textarea,
html.theme-fade .seg-item,
html.theme-fade .chip,
html.theme-fade .account-trigger,
html.theme-fade .account-drop,
html.theme-fade .modal-sheet {
  transition:
    background-color 1.6s ease,
    color 1.6s ease,
    border-color 1.6s ease,
    box-shadow 1.6s ease !important;
}

@property --theme-hole {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.theme-wave,
.theme-burst {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none !important;
}

.theme-wave {
  background: var(--wave-from, #0b111c);
  --theme-hole: 0px;
  -webkit-mask-image: radial-gradient(
    circle at var(--theme-x) var(--theme-y),
    transparent 0,
    transparent var(--theme-hole),
    #000 calc(var(--theme-hole) + 1px)
  );
  mask-image: radial-gradient(
    circle at var(--theme-x) var(--theme-y),
    transparent 0,
    transparent var(--theme-hole),
    #000 calc(var(--theme-hole) + 1px)
  );
  animation: theme-wave-expand 1.5s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes theme-wave-expand {
  from { --theme-hole: 0px; }
  to { --theme-hole: var(--theme-r); }
}

.theme-burst {
  background: var(--burst-color, #151c2b);
  clip-path: circle(0px at var(--theme-x) var(--theme-y));
  animation: theme-burst 1.5s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes theme-burst {
  0% {
    clip-path: circle(0px at var(--theme-x) var(--theme-y));
    opacity: 0.9;
  }
  55% {
    opacity: 0.55;
  }
  100% {
    clip-path: circle(var(--theme-r) at var(--theme-x) var(--theme-y));
    opacity: 0;
  }
}

::view-transition {
  pointer-events: none !important;
}
::view-transition-group(*),
::view-transition-image-pair(*),
::view-transition-old(*),
::view-transition-new(*) {
  pointer-events: none !important;
}
::view-transition-group(root) {
  animation-duration: 1.5s;
}
::view-transition-group(theme-toggle) {
  z-index: 2147483646;
  animation-duration: 0.001s;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  pointer-events: none !important;
  height: 100%;
  width: 100%;
}
::view-transition-old(root) {
  z-index: 1;
}
::view-transition-new(root) {
  z-index: 2;
  animation: theme-clip 1.5s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes theme-clip {
  from {
    clip-path: circle(0px at var(--theme-x) var(--theme-y));
  }
  to {
    clip-path: circle(var(--theme-r) at var(--theme-x) var(--theme-y));
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
  .theme-wave,
  .theme-burst { animation: none !important; display: none !important; }
  html.theme-fade body,
  html.theme-fade .pro-header,
  html.theme-fade .pro-content { transition: none !important; }
  .theme-toggle { view-transition-name: none; }
}