/* ============================================================
   sponsor.help Design System — shadcn 风格
   zinc 中性色 + near-black primary / 明暗双主题 / 精细组件层
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --background: #fafafa;
  --foreground: #09090b;
  --card: #ffffff;
  --card-foreground: #09090b;
  --popover: #ffffff;
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  --primary: #18181b;
  --primary-foreground: #fafafa;
  --secondary: #f4f4f5;
  --secondary-foreground: #18181b;
  --accent: #f4f4f5;
  --accent-foreground: #18181b;
  --brand: #c2401f;           /* 品牌点缀：朱砂（不用 AI 紫） */
  --brand-soft: #fbeae4;
  --success: #059669;
  --success-soft: #ecfdf5;
  --warning: #d97706;
  --warning-soft: #fffbeb;
  --destructive: #dc2626;
  --destructive-soft: #fef2f2;
  --border: #e4e4e7;
  --input: #e4e4e7;
  --ring: #a1a1aa;
  --radius: 0.625rem;
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08);
  --shadow-md: 0 6px 16px -6px rgb(0 0 0 / 0.12), 0 2px 6px -2px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 16px 40px -12px rgb(0 0 0 / 0.18);
  --font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
}
.dark {
  --background: #0c0c0e;
  --foreground: #fafafa;
  --card: #131316;
  --card-foreground: #fafafa;
  --popover: #18181b;
  --muted: #1c1c1f;
  --muted-foreground: #9d9da7;
  --primary: #fafafa;
  --primary-foreground: #18181b;
  --secondary: #1c1c1f;
  --secondary-foreground: #fafafa;
  --accent: #1c1c1f;
  --accent-foreground: #fafafa;
  --brand: #e07a5f;
  --brand-soft: #2c1a15;
  --success: #34d399;
  --success-soft: #0c2018;
  --warning: #fbbf24;
  --warning-soft: #231a06;
  --destructive: #f87171;
  --destructive-soft: #2a1212;
  --border: #26262a;
  --input: #2c2c31;
  --ring: #52525b;
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5);
  --shadow-md: 0 6px 16px -6px rgb(0 0 0 / 0.55);
  --shadow-lg: 0 16px 40px -12px rgb(0 0 0 / 0.6);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--background); color: var(--foreground);
  font-family: var(--font-sans); font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}
::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); }
a { color: inherit; text-decoration: none; }
img, svg { display: inline-block; vertical-align: middle; }
h1,h2,h3,h4,h5 { margin: 0; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
p { margin: 0; }
code, pre { font-family: var(--font-mono); font-size: 0.85em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 0; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: calc(var(--radius) - 4px); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted-foreground) 35%, transparent); border-radius: 8px; border: 3px solid var(--background); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Layout helpers ---------- */
.container-x { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }
.justify-center { justify-content: center; } .flex-wrap { flex-wrap: wrap; } .flex-col { flex-direction: column; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.grid { display: grid; }
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-5{margin-top:20px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}.mt-12{margin-top:48px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-5{margin-bottom:20px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}
.text-sm { font-size: 13px; } .text-xs { font-size: 12px; } .text-lg { font-size: 17px; }
.text-muted { color: var(--muted-foreground); }
.text-brand { color: var(--brand); }
.text-destructive { color: var(--destructive); }
.font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.w-full { width: 100%; }
.right { margin-left: auto; }
@media (min-width: 768px) {
  .md-flex { display: flex; } .md-items-center { align-items: center; } .md-justify-between { justify-content: space-between; }
}

/* ---------- Navbar ---------- */
.nav-root { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--background) 82%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.nav-inner { height: 60px; display: flex; align-items: center; gap: 24px; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15.5px; letter-spacing: -0.02em; min-width: 0; }
.logo-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo .mark { width: 26px; height: 26px; border-radius: 8px; background: var(--primary); color: var(--primary-foreground); display: grid; place-items: center; font-size: 13px; }
.nav-links { display: flex; align-items: center; gap: 2px; }
/* 右侧操作组：不参与收缩，靠 margin-left:auto 贴右（.nav-links 隐藏时仍能贴右） */
.nav-right { margin-left: auto; flex: none; }
.nav-link { padding: 6px 12px; border-radius: 8px; color: var(--muted-foreground); font-weight: 500; font-size: 13.5px; transition: .15s; }
.nav-link:hover { color: var(--foreground); background: var(--accent); }
.nav-link.active { color: var(--foreground); background: var(--muted); }

/* ---------- Button ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap;
  border-radius: calc(var(--radius) - 2px); border: 1px solid transparent; cursor: pointer; user-select: none;
  font-size: 13.5px; font-weight: 500; font-family: inherit; padding: 0 15px; height: 36px;
  transition: transform .12s ease, background .15s, border-color .15s, box-shadow .15s, color .15s; }
.btn:active { transform: scale(.975); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn i { font-size: 15px; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-xs); }
.btn-primary:hover { background: color-mix(in srgb, var(--primary) 88%, var(--foreground)); }
.btn-brand { background: var(--brand); color: #fff; box-shadow: var(--shadow-xs); }
.btn-brand:hover { filter: brightness(1.08); }
.btn-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.btn-secondary:hover { background: color-mix(in srgb, var(--secondary) 70%, var(--border)); }
.btn-outline { border-color: var(--input); background: var(--card); color: var(--foreground); box-shadow: var(--shadow-xs); }
.btn-outline:hover { background: var(--accent); }
.btn-ghost { background: transparent; color: var(--foreground); }
.btn-ghost:hover { background: var(--accent); }
.btn-destructive { background: var(--destructive); color: #fff; }
.btn-destructive:hover { filter: brightness(1.08); }
.btn-link { background: none; border: 0; color: var(--foreground); padding: 0 6px; height: auto; }
.btn-link:hover { color: var(--brand); }
.btn-sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: calc(var(--radius) - 4px); }
.btn-lg { height: 42px; padding: 0 22px; font-size: 14.5px; border-radius: var(--radius); }
.btn-icon { width: 34px; padding: 0; }

/* ---------- Input family ---------- */
.input, .textarea, .select { width: 100%; background: var(--card); border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px);
  color: var(--foreground); font-family: inherit; font-size: 13.5px; padding: 0 12px; height: 36px;
  transition: border-color .15s, box-shadow .15s; }
.textarea { padding: 9px 12px; height: auto; resize: vertical; line-height: 1.6; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent); }
.input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--muted-foreground) 75%, transparent); }
.input-sm { height: 30px; font-size: 12.5px; }

/* ---------- 文件上传控件：美化原生 input[type=file] ---------- */
.input[type="file"], input[type="file"].input {
  height: auto; min-height: 40px; padding: 5px 10px 5px 6px; line-height: 1.6;
  cursor: pointer; font-size: 12.5px; color: var(--muted-foreground);
  display: flex; align-items: center;
}
.input[type="file"]::file-selector-button {
  appearance: none; -webkit-appearance: none;
  flex: none; margin: 0; padding: 0 14px; height: 28px;
  border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
  border-radius: calc(var(--radius) - 3px);
  background: var(--brand-soft); color: var(--brand);
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.input[type="file"]:hover::file-selector-button {
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
}
.input[type="file"]:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent); outline: none; }
.input[type="file"].input-sm { min-height: 30px; padding: 3px 8px 3px 4px; }
.input[type="file"].input-sm::file-selector-button { height: 22px; padding: 0 10px; font-size: 11.5px; }

/* 拖拽式上传区（zip 模板包等） */
.dropzone {
  display: block; border: 2px dashed var(--input); border-radius: var(--radius);
  padding: 30px 20px; text-align: center; cursor: pointer;
  background: color-mix(in srgb, var(--muted) 45%, transparent);
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--brand); background: var(--brand-soft); }
.dropzone .dz-icon { font-size: 30px; color: var(--muted-foreground); }
.dropzone:hover .dz-icon, .dropzone.is-over .dz-icon { color: var(--brand); }
.dropzone .dz-title { font-size: 13.5px; font-weight: 600; margin-top: 8px; }
.dropzone .dz-hint { font-size: 11.5px; color: var(--muted-foreground); margin-top: 4px; line-height: 1.6; }
.dz-picked { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 10px 13px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--muted); font-size: 12.5px; }
.label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.help { font-size: 12px; color: var(--muted-foreground); margin-top: 5px; line-height: 1.5; }
.input-group { display: flex; }
.input-group .input { border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0; }
.input-group .addon { display: flex; align-items: center; padding: 0 12px; background: var(--muted); color: var(--muted-foreground);
  border: 1px solid var(--input); border-right: 0; border-radius: calc(var(--radius) - 2px) 0 0 calc(var(--radius) - 2px); font-size: 13px; white-space: nowrap; }

/* Switch */
.switch { position: relative; display: inline-flex; width: 36px; height: 20px; flex-shrink: 0; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .track { width: 100%; height: 100%; background: var(--input); border-radius: 99px; transition: .18s; }
.switch .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm); transition: .18s; }
.switch input:checked + .track { background: var(--primary); }
.switch input:checked + .track::after { transform: translateX(16px); }

/* Checkbox / radio */
.check { accent-color: var(--primary); width: 15px; height: 15px; cursor: pointer; }

/* Color input */
.input-color { width: 42px; height: 36px; padding: 3px; border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); background: var(--card); cursor: pointer; }

/* ---------- Card ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); }
.card-hover { transition: box-shadow .18s, transform .18s, border-color .18s; }
.card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: color-mix(in srgb, var(--ring) 55%, var(--border)); }
.card-pad { padding: 20px; }
.card-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-title { font-size: 14.5px; font-weight: 600; }
.card-desc { font-size: 12.5px; color: var(--muted-foreground); margin-top: 2px; }

/* ---------- Badge ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 99px;
  font-size: 11.5px; font-weight: 500; background: var(--secondary); color: var(--secondary-foreground); border: 1px solid transparent; white-space: nowrap; }
.badge i { font-size: 12px; }
.badge-brand { background: var(--brand-soft); color: var(--brand); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-destructive { background: var(--destructive-soft); color: var(--destructive); }
.badge-outline { background: transparent; border-color: var(--border); color: var(--muted-foreground); }
.badge-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Table ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--muted-foreground); padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: color-mix(in srgb, var(--muted) 55%, transparent); }

/* ---------- Alert ---------- */
.alert { display: flex; gap: 10px; padding: 11px 14px; border-radius: calc(var(--radius) - 2px); font-size: 13px; border: 1px solid; line-height: 1.55; }
.alert i { margin-top: 2px; }
.alert-info { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 25%, transparent); color: var(--brand); }
.alert-success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); color: var(--success); }
.alert-error { background: var(--destructive-soft); border-color: color-mix(in srgb, var(--destructive) 30%, transparent); color: var(--destructive); }
.alert-warn { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); color: var(--warning); }
.alert a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Tabs ---------- */
.tabs { display: inline-flex; background: var(--muted); padding: 3px; border-radius: calc(var(--radius) - 2px); gap: 2px; }
.tabs .tab { border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--muted-foreground); padding: 5px 14px; border-radius: calc(var(--radius) - 4px); transition: .15s; }
.tabs .tab:hover { color: var(--foreground); }
.tabs .tab.active { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-xs); }

/* ---------- Dropdown ---------- */
.dd { position: relative; }
.dd-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; background: var(--popover);
  border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); box-shadow: var(--shadow-lg);
  padding: 5px; z-index: 60; display: none; }
.dd.open .dd-menu { display: block; animation: ddIn .12s ease; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.dd-item { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--foreground); padding: 7px 10px; border-radius: 7px; text-align: left; transition: .12s; }
.dd-item:hover { background: var(--accent); }
.dd-item.danger { color: var(--destructive); }
.dd-sep { height: 1px; background: var(--border); margin: 5px -5px; }
.dd-label { font-size: 11px; color: var(--muted-foreground); padding: 6px 10px 3px; }

/* ---------- Sidebar ---------- */
.side { display: flex; flex-direction: column; gap: 2px; }
.side-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); padding: 12px 10px 4px; }
.side-item { display: flex; align-items: center; gap: 10px; padding: 7.5px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500;
  color: var(--muted-foreground); transition: .13s; }
.side-item i { font-size: 15px; width: 17px; text-align: center; }
.side-item:hover { color: var(--foreground); background: var(--accent); }
.side-item.active { color: var(--foreground); background: var(--muted); box-shadow: inset 2px 0 0 var(--brand); }
.side-item .n { margin-left: auto; font-size: 11px; background: var(--secondary); border-radius: 99px; padding: 1px 7px; color: var(--muted-foreground); }

/* ---------- Avatar ---------- */
.avatar { border-radius: 50%; object-fit: cover; background: var(--muted); }
.avatar-fb { border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 72%, #fff), var(--brand)); }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 56px 24px; }
.empty .ico { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 14px; background: var(--muted); display: grid; place-items: center; font-size: 22px; color: var(--muted-foreground); }
.empty h4 { font-size: 15px; margin-bottom: 4px; }
.empty p { font-size: 13px; color: var(--muted-foreground); margin-bottom: 18px; }

/* ---------- Toast ---------- */
#toast-box { position: fixed; bottom: 22px; right: 22px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast { display: flex; align-items: center; gap: 9px; background: var(--popover); border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px); box-shadow: var(--shadow-lg); padding: 11px 16px; font-size: 13px;
  animation: toastIn .22s cubic-bezier(.2,.9,.3,1.2); }
.toast i { color: var(--success); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.toast.out { opacity: 0; transform: translateY(6px); transition: .25s; }

/* ---------- 概览顶部公告轮播 ---------- */
.ann-carousel { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 18px; flex-wrap: wrap; }
.ann-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 30px;
  background: var(--brand-soft); color: var(--brand); font-size: 14px; }
.ann-roll { position: relative; flex: 1 1 220px; min-width: 0; height: 22px; overflow: hidden; cursor: pointer; }
.ann-item { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--foreground); opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease;
  pointer-events: none; }
.ann-item.on { opacity: 1; transform: none; pointer-events: auto; }
.ann-title { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ann-item:hover .ann-title { color: var(--brand); text-decoration: underline; }
/* 公告列表：整行可点（标题折叠，正文在详情页） */
a.ann-row { text-decoration: none; color: inherit; transition: background .15s; }
a.ann-row:hover { background: var(--muted) !important; }
a.ann-row:hover .uc-name > span.truncate { color: var(--brand); }
.ann-date { flex-shrink: 0; }
@media (max-width: 560px) { .ann-item .ann-date { display: none; } }
/* 后台公告列表：正文最多两行，可点展开看全文 */
.ann-text { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; cursor: pointer; white-space: normal; }
.ann-text.open { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible;
  cursor: auto; white-space: pre-wrap; }
.ann-more { font-size: 12px; color: var(--brand); cursor: pointer; user-select: none; }

/* ---------- 站内弹窗（替代浏览器原生 alert / confirm） ---------- */
.sh-modal-mask { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  background: rgba(9,9,11,.5); padding: 20px; animation: shFade .16s ease; }
.sh-modal { width: 100%; max-width: 410px; box-shadow: 0 24px 60px rgba(0,0,0,.28); animation: shPop .18s cubic-bezier(.2,.9,.3,1.1); }
.sh-modal-body { display: flex; gap: 14px; padding: 20px 20px 6px; }
.sh-modal-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 38px; font-size: 18px; }
.sh-modal-ico-brand { background: var(--brand-soft); color: var(--brand); }
.sh-modal-ico-warn { background: var(--warning-soft); color: var(--warning); }
.sh-modal-ico-error { background: var(--destructive-soft); color: var(--destructive); }
.sh-modal-ico-ok { background: var(--success-soft); color: var(--success); }
.sh-modal-main { min-width: 0; padding-top: 2px; }
.sh-modal-title { font-weight: 600; font-size: 15px; margin-bottom: 5px; }
.sh-modal-text { font-size: 14px; line-height: 1.75; color: var(--muted-foreground); white-space: pre-wrap; word-break: break-word; }
.sh-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px 18px; }
@keyframes shFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes shPop { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } }

/* ---------- Kbd / separator ---------- */
.kbd { display: inline-block; font-family: var(--font-mono); font-size: 11px; background: var(--muted); border: 1px solid var(--border);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; color: var(--muted-foreground); }
.sep { height: 1px; background: var(--border); }

/* ---------- Page header ---------- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h2 { font-size: 20px; }
.page-head .sub { color: var(--muted-foreground); font-size: 13px; margin-top: 3px; }

/* ---------- Config form ---------- */
.cfg-group { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); margin-bottom: 16px; overflow: visible; }
.cfg-group > .g-head { padding: 13px 18px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13.5px;
  display: flex; align-items: center; gap: 9px; }
.cfg-group > .g-head i { color: var(--brand); font-size: 14px; }
.cfg-group > .g-body { padding: 18px; }

/* ---- 模板设置：分组折叠（默认收起，点标题展开）---- */
.cfg-acc-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.cfg-acc-tools > .text-xs { margin-right: auto; }
.cfg-group.is-acc > .g-head { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--border);
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--foreground); text-align: left;
  cursor: pointer; transition: background .14s; }
.cfg-group.is-acc > .g-head:hover { background: var(--accent); }
.cfg-group.is-acc > .g-head:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; border-radius: var(--radius); }
.cfg-group.is-acc .acc-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-group.is-acc .acc-count { margin-left: auto; flex: none; font-size: 11.5px; font-weight: 500;
  color: var(--muted-foreground); background: var(--muted); padding: 2px 8px; border-radius: 999px; }
.cfg-group.is-acc .acc-chev { flex: none; font-size: 13px !important; color: var(--muted-foreground) !important;
  transition: transform .18s ease; }
.cfg-group.is-acc.collapsed > .g-head { border-bottom: 0; }
.cfg-group.is-acc.collapsed > .g-body { display: none; }
.cfg-group.is-acc:not(.collapsed) .acc-chev { transform: rotate(180deg); }
.cfg-row { margin-bottom: 18px; }
.cfg-row:last-child { margin-bottom: 0; }
.cfg-list-item { border: 1px dashed var(--input); border-radius: calc(var(--radius) - 2px); padding: 13px; margin-bottom: 10px; background: color-mix(in srgb, var(--muted) 45%, transparent); }
.cfg-list-item .li-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cfg-list-item .li-head span { font-size: 12px; font-weight: 600; color: var(--foreground); display: flex; align-items: center; gap: 7px; }
.img-preview { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--input); object-fit: cover; background: var(--muted); }

/* ---------- misc ---------- */
.mono { font-family: var(--font-mono); font-size: 12.5px; }
.link-u { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--foreground) 35%, transparent); }
.link-u:hover { text-decoration-color: var(--foreground); }
/* 页脚导航链接：与顶部导航同风格（无下划线，悬停变色）。
   网格布局：链接多时自动排成整齐的多行多列；min() 写法保证极窄屏也不溢出；
   单元格内允许换行（长邮箱折行显示，不截断不撑破）。 */
.foot-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 10px 18px; flex: 1 1 300px; min-width: 0; max-width: 560px; }
.foot-links > a { min-width: 0; word-break: break-all; }
.foot-link { color: var(--muted-foreground); font-size: 13px; text-decoration: none; transition: .15s; }
.foot-link:hover { color: var(--foreground); }
.grad-text { background: linear-gradient(100deg, var(--foreground) 30%, var(--brand) 75%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grid-bg { background-image: linear-gradient(to right, color-mix(in srgb, var(--border) 60%, transparent) 1px, transparent 1px),
  linear-gradient(to bottom, color-mix(in srgb, var(--border) 60%, transparent) 1px, transparent 1px); background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 35%, transparent 75%); }
iframe.tpl-frame { width: 100%; border: 0; border-radius: 0 0 var(--radius) var(--radius); background: #fff; }
.embed-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.embed-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.embed-bar .url { flex: 1; background: var(--muted); border-radius: 6px; font-size: 11.5px; color: var(--muted-foreground);
  padding: 3px 10px; font-family: var(--font-mono); text-align: center; }

/* 表单操作区：提交按钮与上方内容保持稳定间距 */
.form-actions { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- 响应式 ---------- */
/* 后台两列网格：子项允许收缩，防止表格/长文本把页面撑出横向滚动 */
.dash-grid > section, .admin-grid > section { min-width: 0; }
.dash-grid, .admin-grid { min-width: 0; }
.card { min-width: 0; overflow-wrap: break-word; }
/* 后台侧边抽屉（移动端） */
.drawer-toggle { display: none; }
.drawer-mask { display: none; }
@media (max-width: 900px) {
  .dash-grid, .admin-grid { grid-template-columns: 1fr !important; }
  .side-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 268px; max-width: 84vw; z-index: 90;
    background: var(--card); border-right: 1px solid var(--border); transform: translateX(-105%);
    transition: transform .22s cubic-bezier(.3,.8,.3,1); overflow-y: auto; padding: 14px 12px;
    border-radius: 0; box-shadow: none; }
  .side-drawer.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .drawer-mask { display: block; position: fixed; inset: 0; background: rgba(9,9,11,.45); z-index: 85;
    opacity: 0; pointer-events: none; transition: opacity .2s; }
  .drawer-mask.open { opacity: 1; pointer-events: auto; }
  .drawer-toggle { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 16px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 11px 14px; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600;
    color: var(--foreground); box-shadow: var(--shadow-xs); }
  .drawer-toggle i.bi-list { font-size: 17px; color: var(--brand); }
  .drawer-toggle .chev { margin-left: auto; color: var(--muted-foreground); font-size: 12px; }
  .side-drawer .side { display: block; }
  .side-drawer .side .side-item { min-width: 0; border: 0; }
  .side-drawer .side .side-label { width: auto; }
  .side-drawer .card { border: 0; box-shadow: none; background: transparent; padding: 0; position: static !important; }
}
@media (min-width: 901px) {
  .side-drawer { position: sticky; top: 84px; }
}
@media (max-width: 768px) {
  .container-x { padding-left: 16px; padding-right: 16px; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .hero h1, .h-hero { font-size: 32px !important; }
  .cards-3 { grid-template-columns: 1fr !important; }
  .cards-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .stat-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-strip > div { border-bottom: 1px solid var(--border) !important; }
  .nav-links { display: none; }
  .nav-username { display: none; }
  /* 手机端保留「登录」按钮：三横杠只放后台配置的菜单，账号入口不能只依赖它 */
  .nav-inner { gap: 8px; }
  .nav-auth-link, .nav-cta { padding: 0 10px; height: 34px; font-size: 12.5px; }
  .nav-burger { display: inline-flex !important; }
  .page-head h2 { font-size: 18px !important; }
  .card-pad { padding: 16px; }
  .table th, .table td { padding: 10px 10px; }
  .stat-num { font-size: 22px !important; }
  main section[style*="padding:72px"] { padding-top: 44px !important; padding-bottom: 40px !important; }
  .embed-bar .url { font-size: 10.5px; }
  .grid[style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; }
  .grid[style*="repeat(2,1fr)"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 520px) {
  .cards-4 { grid-template-columns: 1fr !important; }
  .hero .claim-inline .input-group .input { min-width: 0; }
  .flex-wrap-btns { width: 100%; }
  .flex-wrap-btns .btn { flex: 1; }
}
/* 移动端折叠菜单 */
.nav-burger { display: none; }
.m-nav { display: none; flex-direction: column; padding: 6px 16px 12px; border-top: 1px solid var(--border); }
.m-nav.open { display: flex; }
.m-link { display: flex; align-items: center; gap: 10px; padding: 11px 10px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--foreground); }
.m-link:active { background: var(--accent); }
.m-link i { color: var(--muted-foreground); }
@media (min-width: 769px) { .m-nav { display: none !important; } }
/* 表格横向滚动包裹 */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap .table { min-width: 560px; }

/* 手机端卡片式列表（替代表格） */
.hide-desktop { display: none; }
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .hide-desktop { display: block; }
}
.ucard { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); align-items: flex-start; }
.ucard:last-child { border-bottom: 0; }
.ucard .uc-body { flex: 1; min-width: 0; }
.ucard .uc-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; font-size: 14px; }
.ucard .uc-mail { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; word-break: break-all; }
.ucard .uc-meta { font-size: 11.5px; color: var(--muted-foreground); margin-top: 2px; }
.ucard .uc-ops { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.ucard .uc-ops form { display: inline-flex; gap: 6px; }
.ucard .uc-ops .btn { height: 30px; font-size: 12px; }
.ucard .uc-pwd { display: flex; gap: 6px; margin-top: 8px; }

/* 地址卡片：字段块（标签 + 控件），替代裸 input 混排 */
.ucard .uc-field { margin-top: 12px; }
.ucard .uc-field .uc-field-label { font-size: 11.5px; color: var(--muted-foreground); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.ucard .uc-field .uc-field-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* 轻量动作行：文字按钮，与主操作（保存/改名）形成层级差 */
.ucard .uc-actions { display: flex; gap: 2px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.ucard .uc-actions .btn { height: 30px; font-size: 12px; padding: 0 9px; color: var(--muted-foreground); }
.ucard .uc-actions .btn:hover { color: var(--foreground); }
.ucard .uc-actions form { display: inline-flex; }
/* 危险操作折叠区：默认收起，避免误触 */
.ucard .uc-danger { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; }
.ucard .uc-danger > summary { font-size: 12px; color: var(--muted-foreground); cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 6px; padding: 3px 0; user-select: none; }
.ucard .uc-danger > summary::-webkit-details-marker { display: none; }
.ucard .uc-danger > summary:hover { color: var(--destructive); }
.ucard .uc-danger[open] > summary { color: var(--destructive); margin-bottom: 8px; }
.ucard .uc-danger form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ucard .uc-danger .input { flex: 1; min-width: 180px; }
/* 触控目标 */
@media (pointer: coarse) {
  .btn { height: 40px; }
  .btn-sm { height: 34px; }
  .input, .select { height: 40px; }
  .side-item, .m-link { padding-top: 12px; padding-bottom: 12px; }
  .ucard .uc-ops .btn, .ucard .uc-ops .btn-sm { height: 36px; }
  .ucard .uc-actions .btn { height: 36px; }
  .um-item { padding-top: 11px; padding-bottom: 11px; }
  .um-panel .input, .um-panel .input-sm { height: 40px; }
}

/* 全站公告条 */
.announce { display: flex; align-items: center; gap: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 16%, transparent), color-mix(in srgb, #2563eb 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--brand) 38%, transparent); border-radius: 999px; padding: 11px 22px;
  font-size: 13.5px; font-weight: 500; box-shadow: 0 6px 24px -8px color-mix(in srgb, var(--brand) 30%, transparent);
  backdrop-filter: blur(6px); }
.announce i { color: var(--brand); font-size: 15px; animation: megaphone 2.6s ease-in-out infinite; }
@keyframes megaphone { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-1px); } }

/* 图片上传区（保持克制：细虚线 + 中性色，不用品牌紫） */
.upload-zone { border: 1px dashed var(--border); border-radius: calc(var(--radius) - 2px); min-height: 96px;
  display: grid; place-items: center; cursor: pointer; transition: .15s;
  background: color-mix(in srgb, var(--muted) 45%, transparent); overflow: hidden; }
.upload-zone:hover, .upload-zone.drag { border-color: var(--muted-foreground); background: var(--accent); }
.upload-zone.drag { border-style: solid; }
.upload-zone .uz-ph { text-align: center; color: var(--muted-foreground); font-size: 12px; padding: 14px; line-height: 1.6; }
.upload-zone .uz-ph i { font-size: 19px; display: block; margin-bottom: 4px; color: var(--muted-foreground); }
.upload-zone:hover .uz-ph i, .upload-zone.drag .uz-ph i { color: var(--foreground); }
.upload-zone .uz-img { width: 100%; max-height: 190px; object-fit: cover; display: block; }
.upload-zone.has-img { border-style: solid; border-color: var(--border); background: var(--card); }
.upload-zone.has-img:hover .uz-img { opacity: .82; }
.uz-bar { display: flex; gap: 8px; margin-top: 8px; }
.uz-bar .input { flex: 1; }
.uz-spin { display: inline-block; animation: uzspin 1s linear infinite; }
@keyframes uzspin { to { transform: rotate(360deg); } }

/* 上传区媒体容器：同时容纳图片与 Font Awesome 图标（图标类字段） */
.uz-media { width: 100%; min-height: 40px; display: grid; place-items: center; }
.uz-media img { width: 100%; max-height: 190px; object-fit: cover; display: block; }
.uz-media i { font-size: 46px; color: var(--brand); line-height: 1; }
.upload-zone.uz-sm .uz-media img { max-height: 130px; }
.upload-zone.uz-sm .uz-media i { font-size: 34px; }

/* ---------- 平台内置图标选择器（Font Awesome，支持中文搜索） ---------- */
.icp-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.icp-or { font-size: 11px; color: var(--muted-foreground); }
.icp-thumbs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.icp-thumb { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 9px; padding: 5px;
  background: var(--card); cursor: pointer; transition: .12s; }
.icp-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.icp-thumb:hover { border-color: var(--brand); background: var(--brand-soft); }
.icp-overlay { position: fixed; inset: 0; background: rgba(9, 9, 11, .55); z-index: 90;
  display: grid; place-items: center; padding: 20px; backdrop-filter: blur(2px); }
.icp-panel { background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  width: 600px; max-width: 100%; max-height: 82vh; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .22); overflow: hidden; }
.icp-head { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border); }
.icp-title { font-weight: 600; font-size: 14.5px; }
.icp-body { overflow: auto; padding: 14px 16px 18px; }
.icp-sec { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--muted-foreground);
  margin: 14px 0 8px; }
.icp-sec:first-child { margin-top: 0; }
.icp-search { width: 100%; margin-bottom: 10px; }
.icp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 7px; }
.icp-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 11px 4px 8px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  background: var(--card); transition: .12s; font-family: inherit; min-height: 64px; }
.icp-cell i { font-size: 20px; color: var(--foreground); line-height: 1; }
.icp-cell img { width: 24px; height: 24px; object-fit: contain; }
.icp-cell span { font-size: 10px; color: var(--muted-foreground); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icp-cell:hover { border-color: var(--brand); background: var(--brand-soft); }
.icp-cell:hover i { color: var(--brand); }
.icp-grid-img .icp-cell { min-height: 56px; }
.icp-empty { display: none; text-align: center; color: var(--muted-foreground); font-size: 13px; padding: 26px 0; }
.icp-hint { font-size: 11.5px; color: var(--muted-foreground); line-height: 1.7;
  border-top: 1px dashed var(--border); margin-top: 14px; padding-top: 10px; }

/* 头像上传美化 */
.avatar-up { position: relative; width: 96px; height: 96px; border-radius: 26px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.avatar-up img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-up .av-mask { position: absolute; inset: 0; background: rgba(9,9,11,.55); color: #fff; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px;
  opacity: 0; transition: .18s; }
.avatar-up .av-mask i { font-size: 18px; }
.avatar-up:hover .av-mask { opacity: 1; }

/* ---------- 用户管理：操作菜单（自包含，不受表格 overflow 裁剪） ---------- */
.um-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.um-user-txt { min-width: 0; }
.um-user-name { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 6px; line-height: 1.4; }
.um-user-name .badge { height: 17px; font-size: 10px; padding: 0 6px; }
.um-user-mail { font-size: 11.5px; color: var(--muted-foreground); margin-top: 2px; word-break: break-all; }
.um-table td, .um-table th { vertical-align: middle; }

.um-ops { display: inline-flex; align-items: center; gap: 6px; }
.um-ops form { display: inline-flex; }
/* 菜单锚点：触发器与菜单的共同定位容器 */
.um-wrap { position: relative; display: inline-flex; align-items: center; }

/* 触发器去掉默认 outline 的偏移感，保持与其它按钮一致 */
.um-ops .btn-icon { width: 32px; padding: 0; }

.um-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 232px;
  background: var(--popover); border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px);
  box-shadow: var(--shadow-lg); padding: 5px; z-index: 70; display: none; text-align: left; }
.um-menu.open { display: block; animation: umIn .13s ease; }
@keyframes umIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.um-menu-head { font-size: 11px; color: var(--muted-foreground); padding: 6px 10px 6px;
  border-bottom: 1px solid var(--border); margin-bottom: 5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-item { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none;
  cursor: pointer; font-family: inherit; font-size: 13px; color: var(--foreground); padding: 7.5px 10px;
  border-radius: 7px; text-align: left; transition: .12s; line-height: 1.45; text-decoration: none; }
.um-item i { font-size: 14px; width: 16px; text-align: center; color: var(--muted-foreground); flex: none; }
.um-item:hover { background: var(--accent); }
.um-item:hover i { color: var(--foreground); }
.um-item.danger { color: var(--destructive); }
.um-item.danger i { color: var(--destructive); }
.um-item.danger:hover { background: var(--destructive-soft); }
.um-menu form { display: block; }
.um-sep { height: 1px; background: var(--border); margin: 5px 0; }
/* 小黑屋在押名单单行 */
.jail-row { display: flex; align-items: flex-start; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.jail-row:last-child { border-bottom: 0; }
/* 被封禁用户在列表中的封禁原因（单行截断，悬停看全文） */
.um-ban { margin-top: 5px; font-size: 11.5px; line-height: 1.5; color: var(--destructive);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
.um-ban i { margin-right: 3px; }

/* 折叠面板：点选动作后就地在该项下方展开表单，避免菜单被塞满 */
.um-panel { display: none; padding: 5px 8px 8px 12px; margin: 2px 0 5px 9px;
  border-left: 2px solid var(--border); border-radius: 4px; }
.um-panel.open { display: block; animation: umIn .13s ease; }
.um-panel form { display: grid; gap: 7px; }
.um-panel .um-panel-ft { display: flex; justify-content: flex-end; gap: 6px; margin-top: 2px; }
.um-hint { font-size: 11px; color: var(--muted-foreground); line-height: 1.5; margin: 0; }

/* 移动端：菜单跟随卡片内联展开 */
.um-menu-wide { position: static; width: 100%; margin-top: 10px; min-width: 0; box-shadow: var(--shadow-sm); }

/* 浮层不被容器裁剪：悬停行提升层级；容器允许溢出显示 */
.um-table tbody tr:hover, .um-table tbody tr:focus-within { z-index: 5; }
.um-table tbody tr:last-child .um-wrap .um-menu { top: auto; bottom: calc(100% + 6px); }
/* 菜单所在表格容器不放裁剪：菜单定位在 .um-wrap 内，需允许溢出 */
.hide-mobile:has(.um-wrap) .table-wrap { overflow: visible; }

/* 列表内的图片字段：横向紧凑一行（缩略图 + URL 输入），比大虚线框省地方得多 */
.uz-mini { display: flex; align-items: flex-start; gap: 10px; }
.upload-zone.uz-sm { width: 76px; height: 76px; min-height: 0; flex: none; border-radius: 10px; }
.upload-zone.uz-sm .uz-ph { font-size: 10.5px; padding: 4px; }
.upload-zone.uz-sm .uz-ph i { font-size: 15px; margin-bottom: 2px; }
.upload-zone .uz-ph span { display: block; margin-top: 2px; }
.upload-zone.uz-sm .uz-img { max-height: 76px; }
.uz-mini > .input { flex: 1; min-width: 0; }
.sp-ic svg, .sp-ic i { vertical-align: middle; }

/* ── 申领地址锁定卡片（注册页） ── */
.claim-lock {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.claim-lock::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--brand);
}
.cl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cl-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--brand);
  background: var(--brand-soft); border-radius: 999px; padding: 3px 10px;
}
.cl-edit {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; color: var(--muted-foreground);
  background: none; border: 0; cursor: pointer; padding: 3px 6px; border-radius: 7px;
  transition: color .15s ease, background .15s ease;
}
.cl-edit:hover { color: var(--brand); background: var(--muted); }
.cl-view { display: flex; align-items: baseline; flex-wrap: wrap; word-break: break-all; }
.cl-host { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; color: var(--muted-foreground); }
.cl-slug { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 16px; letter-spacing: -.01em; }
.cl-editbox .input-group { margin-top: 2px; }
.cl-editbox .addon { font-size: 12.5px; }
.cl-status { min-height: 18px; margin-top: 7px; font-size: 12.5px; display: flex; align-items: center; gap: 5px; }
.cl-status.is-wait { color: var(--muted-foreground); }
.cl-status.is-good { color: var(--success); }
.cl-status.is-bad { color: var(--destructive); }
.cl-actions { display: flex; gap: 8px; margin-top: 10px; }

/* ---------- 首页 hero 预览卡（跟随明暗主题） ---------- */
.hero-preview {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--muted) 62%, var(--card)),
    var(--card));
}
/* 伪收款码点阵：用主题色渲染，深色/浅色模式都自然 */
.qr-fake {
  height: 52px;
  border-radius: 8px;
  background-color: var(--card);
  background-image:
    repeating-linear-gradient(0deg, var(--qr, var(--foreground)) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(90deg, var(--qr, var(--foreground)) 0 3px, transparent 3px 7px);
  opacity: .5;
}
.qr-fake.is-blue { --qr: #2f6fed; }

/* ---------- 统一表单字段（模板设置 / 模块设置共用，SponsorForm 引擎） ---------- */
.mod-field { margin-top: 14px; }
.mod-field:first-child { margin-top: 0; }
.mod-label { font-size: 13px; font-weight: 500; display: block; margin-bottom: 6px; }
.mod-input { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--foreground); font: inherit; box-sizing: border-box; }
.mod-input:focus { outline: none; border-color: var(--brand); }
textarea.mod-input { resize: vertical; min-height: 70px; }
.mod-items { display: flex; flex-direction: column; gap: 10px; }
.mod-item-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.mod-btn { border: 1px solid var(--border); background: transparent; color: var(--foreground); border-radius: 6px; padding: 2px 8px; font-size: 11.5px; cursor: pointer; font-family: inherit; }
.mod-btn:hover { background: var(--muted); }
.mod-add { margin-top: 10px; width: 100%; padding: 8px; border: 1px dashed var(--border); border-radius: 8px; background: transparent; color: var(--foreground); cursor: pointer; font: inherit; font-size: 12.5px; }
.mod-add:hover { background: var(--muted); }
.mod-sw { position: relative; display: inline-block; width: 42px; height: 23px; flex: none; }
.mod-sw input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; position: absolute; z-index: 1; }
.mod-sw .tr { position: absolute; inset: 0; border-radius: 23px; background: var(--muted); transition: .18s; }
.mod-sw .tr:after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: .18s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.mod-sw input:checked + .tr { background: var(--brand); }
.mod-sw input:checked + .tr:after { left: 21px; }

/* ---------- 列表项折叠卡片（默认折叠，点标题栏展开） ---------- */
.mod-empty { padding: 16px 0; font-size: 12.5px; color: var(--muted-foreground); }
.mod-card {
  border: 1px solid var(--border); border-radius: 12px; background: var(--card);
  transition: border-color .15s, box-shadow .15s;
}
.mod-card:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.mod-card.is-open { border-color: var(--brand); }
.mod-card.is-dragging { opacity: .45; }
.mod-card.is-over { border-color: var(--brand); border-style: dashed; }

/* 折叠态标题栏 */
.mod-card-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.mod-grip {
  flex: none; width: 18px; height: 22px; display: flex; align-items: center; justify-content: center;
  color: var(--muted-foreground); cursor: grab; border-radius: 4px; touch-action: none;
}
.mod-grip:hover { background: var(--muted); color: var(--foreground); }
.mod-grip:active { cursor: grabbing; }
.mod-grip svg { width: 14px; height: 14px; display: block; }
.mod-card-toggle {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0; padding: 0; font: inherit; color: var(--foreground);
  text-align: left; cursor: pointer;
}
.mod-card-thumb { flex: none; width: 26px; height: 26px; border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mod-card-thumb img { width: 100%; height: 100%; object-fit: contain; }
.mod-card-thumb svg { width: 100%; height: 100%; }
.mod-card-title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-card-title.is-muted { color: var(--muted-foreground); font-weight: 400; }
.mod-card-chev { flex: none; color: var(--muted-foreground); transition: transform .18s; }
.mod-card.is-open .mod-card-chev { transform: rotate(180deg); }

/* 卡片展开内容区：不再限制高度，内容完整可见 */
.mod-card-body { padding: 4px 12px 12px; border-top: 1px solid var(--border); }
.mod-card-body.is-collapsed { display: none; }
.mod-card-body .mod-field:first-child { margin-top: 10px; }
.mod-panel.is-collapsed { display: none; }
.is-hidden { display: none !important; }
.mod-tools { display: flex; align-items: center; gap: 2px; padding: 6px 0 2px; flex-wrap: wrap; }
.mod-tool {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--muted-foreground); border-radius: 7px;
  cursor: pointer; font-size: 15px; position: relative; transition: background .12s, color .12s;
}
.mod-tool:hover { background: var(--muted); color: var(--foreground); }
.mod-tool.is-active { background: var(--brand); color: #fff; }
.mod-tool:disabled { opacity: .35; cursor: not-allowed; }
.mod-card-tail { display: flex; justify-content: flex-end; padding-top: 10px; }
.mod-card-tail .mod-del { color: var(--destructive); border-color: color-mix(in srgb, var(--destructive) 35%, var(--border)); display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; }
.mod-card-tail .mod-del:hover { background: color-mix(in srgb, var(--destructive) 10%, transparent); }

/* 展开的设置面板（灰底标题栏 + 关闭按钮，内容完整展开不裁切） */
.mod-panel { margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.mod-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; background: var(--muted); font-size: 13px; font-weight: 500;
  border-radius: 9px 9px 0 0;
}
.mod-panel-close { border: 0; background: transparent; color: var(--foreground); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 4px; }
.mod-panel-close:hover { background: color-mix(in srgb, var(--foreground) 12%, transparent); }
.mod-panel-body { padding: 14px 12px; }
.mod-panel-body .mod-field:first-child { margin-top: 0; }
/* 面板内的图标网格在窄容器里换行更紧凑 */
.mod-panel-body .mod-icon-grid, .mod-icon-grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }

/* 图片上传面板 */
.mod-up-empty {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 12px;
  border: 0; background: transparent; font: inherit; color: var(--foreground);
  cursor: pointer; text-align: left; border-radius: 8px;
}
.mod-up-empty:hover { background: var(--muted); }
.mod-up-plus {
  flex: none; width: 46px; height: 46px; border-radius: 8px; background: var(--muted);
  display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--muted-foreground);
}
.mod-up-shot { text-align: center; }
.mod-up-shot img { max-width: 100%; max-height: 150px; border-radius: 8px; display: block; margin: 0 auto; }
.mod-up-actions { display: flex; margin-top: 12px; border-top: 1px solid var(--border); }
.mod-up-actions button {
  flex: 1; padding: 11px 8px; border: 0; background: transparent; font: inherit; font-size: 13px;
  cursor: pointer; color: var(--foreground);
}
.mod-up-actions button + button { border-left: 1px solid var(--border); }
.mod-up-actions button:hover { background: var(--muted); }
.mod-up-actions .is-danger { color: var(--destructive); }
.mod-up-actions .is-primary { color: var(--brand); }
.mod-up-actions button:disabled { opacity: .5; cursor: not-allowed; }
/* 在线地址行：任何图片字段都可直接粘贴地址，与本地上传等价 */
.mod-url-row { display: flex; gap: 6px; margin-top: 10px; }
.mod-url-row .mod-input { flex: 1; min-width: 0; font-size: 12.5px; padding: 7px 10px; }
.mod-url-use {
  flex: none; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px;
  background: transparent; font: inherit; font-size: 12.5px; color: var(--brand); cursor: pointer;
}
.mod-url-use:hover { background: var(--muted); }

/* 图标选择器 */
.mod-icon-cur {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px; margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--muted);
}
.mod-icon-cur-box { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.mod-icon-cur-box img, .mod-icon-cur-box svg { width: 100%; height: 100%; object-fit: contain; }
.mod-icon-cur-box i { font-size: 16px; color: var(--muted-foreground); }
.mod-icon-cur-txt { font-size: 12.5px; color: var(--muted-foreground); }
.mod-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 4px; }
.mod-icon-cell {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; font: inherit; cursor: pointer; color: var(--muted-foreground); font-size: 11.5px;
}
.mod-icon-cell:hover { background: var(--muted); }
.mod-icon-cell.is-on { border-color: var(--brand); color: var(--foreground); }
.mod-icon-box { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 7px; overflow: hidden; }
.mod-icon-box img { width: 100%; height: 100%; object-fit: contain; }
.mod-icon-box svg { width: 100%; height: 100%; }
.mod-icon-box.is-plain { background: var(--muted); color: var(--muted-foreground); font-size: 17px; }
.mod-icon-sec { font-size: 12.5px; font-weight: 500; margin: 12px 0 8px; }
.mod-icon-sec:first-child { margin-top: 0; }
.mod-icon-hint { font-size: 12px; color: var(--muted-foreground); margin-top: 6px; }

/* 颜色 + 文本的行内组合 */
.mod-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }

/* 圆形色盘：左侧圆点（点开系统取色器），右侧可手填 / 粘贴色值 */
.mod-color { display: flex; align-items: center; gap: 10px; }
.mod-color-dot {
  flex: none; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border);
  border-radius: 50%; cursor: pointer; background: transparent; overflow: hidden;
  -webkit-appearance: none; appearance: none;
}
.mod-color-dot::-webkit-color-swatch-wrapper { padding: 0; }
.mod-color-dot::-webkit-color-swatch { border: 0; border-radius: 50%; }
.mod-color-dot::-moz-color-swatch { border: 0; border-radius: 50%; }
.mod-color-dot:hover { border-color: var(--brand); }
.mod-color-txt { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ===================== 资源管理（后台 /admin/assets、用户 /dashboard/files 共用） ===================== */
.am-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--border); }
.am-chips { display:flex; gap:6px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--border); }
.am-chip {
  padding:5px 11px; border:1px solid var(--border); border-radius:999px; background:transparent;
  font-size:12.5px; color:var(--muted-foreground); text-decoration:none; white-space:nowrap;
}
.am-chip:hover { background:var(--muted); }
.am-chip.is-on { background:var(--brand); border-color:var(--brand); color:var(--brand-foreground); }
.am-chip .n { opacity:.75; margin-left:4px; font-variant-numeric:tabular-nums; }

.am-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:12px; padding:16px; }
.am-cell {
  position:relative; border:1px solid var(--border); border-radius:10px; overflow:hidden;
  background:var(--card); cursor:pointer;
}
.am-cell:hover { border-color:var(--brand); }
.am-cell.is-picked { border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb, var(--brand) 22%, transparent); }
.am-thumb { height:104px; display:grid; place-items:center; background:var(--muted); overflow:hidden; }
.am-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.am-thumb i { font-size:26px; color:var(--muted-foreground); }
.am-meta { padding:8px 10px; border-top:1px solid var(--border); }
.am-name { font-size:12.5px; line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.am-sub { font-size:11.5px; color:var(--muted-foreground); margin-top:3px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.am-pick { position:absolute; top:7px; left:7px; width:17px; height:17px; accent-color:var(--brand); cursor:pointer; }
.am-del { position:absolute; top:6px; right:6px; width:24px; height:24px; display:grid; place-items:center;
  border:0; border-radius:6px; background:rgba(0,0,0,.45); color:#fff; cursor:pointer; font-size:12px; opacity:0; }
.am-cell:hover .am-del { opacity:1; }
.am-del:hover { background:var(--destructive); }
.am-tag { font-size:11px; padding:1px 6px; border-radius:5px; }
.am-tag.used { background:color-mix(in srgb, var(--brand) 14%, transparent); color:var(--brand); }
.am-tag.free { background:var(--muted); color:var(--muted-foreground); }

.am-cats { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.am-cat { display:block; padding:18px; border:1px solid var(--border); border-radius:12px; background:var(--card); text-decoration:none; color:inherit; }
.am-cat:hover { border-color:var(--brand); }
.am-cat-ico { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--muted); color:var(--muted-foreground); font-size:18px; }
.am-cat-n { font-size:22px; font-weight:600; margin-top:12px; font-variant-numeric:tabular-nums; }

/* 详情弹窗 */
.am-mask { position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.5); display:grid; place-items:center; padding:20px; }
.am-modal { width:min(640px,100%); max-height:86vh; overflow:auto; background:var(--card); border:1px solid var(--border); border-radius:14px; }
.am-modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border); }
.am-modal-body { padding:18px; }
.am-prev { border:1px solid var(--border); border-radius:10px; background:var(--muted); display:grid; place-items:center; overflow:hidden; margin-bottom:16px; }
.am-prev img { max-width:100%; max-height:300px; display:block; }
.am-prev i { font-size:44px; color:var(--muted-foreground); padding:38px 0; }
.am-kv { display:grid; grid-template-columns:88px 1fr; gap:9px 14px; font-size:13px; }
.am-kv dt { color:var(--muted-foreground); }
.am-kv dd { margin:0; word-break:break-all; }
.am-refs { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.am-ref { display:flex; gap:8px; align-items:flex-start; font-size:12.5px; padding:6px 0; }
.am-ref i { color:var(--brand); margin-top:2px; }

/* ===================== 模板商城：搜索 + 分页 ===================== */
.tpl-search {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card);
  position: relative;
}
.tpl-search > i.bi-search {
  position: absolute; left: 24px; color: var(--muted-foreground); font-size: 13px; pointer-events: none;
}
.tpl-search input[type=text] {
  flex: 1; min-width: 180px; padding: 7px 10px 7px 30px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--background); color: inherit; font-size: 13px; outline: none;
}
.tpl-search input[type=text]:focus { border-color: var(--brand); }
.tpl-search-count { font-size: 12px; color: var(--muted-foreground); margin-left: 2px; }

.tpl-pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--border);
}

/* ===================== 后台模板管理：展示排序输入 ===================== */
.tpl-sort-input {
  width: 76px; padding: 4px 8px; text-align: center;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--background); color: inherit; font-size: 13px;
  font-variant-numeric: tabular-nums; outline: none;
}
.tpl-sort-input:focus { border-color: var(--brand); }