/* ============================================================
   苍野工作室 —— 门户样式表
   排版参考 mir13.com（吸顶毛玻璃导航 / 3D 轮播 / 分区标题 /
   卡片网格 / 悬浮联系面板 / 多主题 × 浅深模式）
   署名：小人物 QQ群 885462418 · 2026-10-26
   ============================================================ */

/* ---------------- 1. 设计令牌 ---------------- */
:root {
  --radius: 18px;
  --radius-sm: 12px;
  --page-max: 1220px;

  --grad: linear-gradient(135deg, var(--primary), var(--primary-dark));
  --grad-soft: linear-gradient(135deg, var(--primary-soft), rgba(255, 255, 255, 0));
  --ring: 0 0 0 3px var(--primary-soft);

  --topnav-bg: rgba(255, 255, 255, .78);
  --topnav-border: rgba(255, 255, 255, .55);
  --topnav-shadow: 0 6px 24px rgba(15, 40, 90, .08);
  --card-shadow: 0 8px 30px rgba(15, 40, 90, .07);
  --card-shadow-hover: 0 14px 38px rgba(15, 40, 90, .13);

  --ok: #16a34a;
  --danger: #dc2626;

  /* 兼容旧变量：工具页与后台的内联样式仍在引用这些名字 */
  --gold: var(--primary);
  --gold-soft: var(--primary-soft);
  --line: var(--border);
  --muted: var(--text-2);
  --muted-2: var(--text-2);
}

/* 经典蓝（默认） */
html[data-theme="classic-blue"] {
  --primary: #1677ff;
  --primary-dark: #0958d9;
  --primary-soft: #e6f4ff;
  --bg: #f0f5ff;
  --bg-2: #e6efff;
  --card: #ffffff;
  --text: #1c2536;
  --text-2: #57617a;
  --border: #d9e6ff;
  --glow: rgba(22, 119, 255, .22);
}
/* 翡翠绿 */
html[data-theme="emerald"] {
  --primary: #059669;
  --primary-dark: #047857;
  --primary-soft: #ecfdf5;
  --bg: #f3f8f5;
  --bg-2: #e7f1ec;
  --card: #ffffff;
  --text: #1e2b25;
  --text-2: #587066;
  --border: #dcebe3;
  --glow: rgba(5, 150, 105, .22);
}
/* 活力橙 */
html[data-theme="vibrant-orange"] {
  --primary: #ea580c;
  --primary-dark: #c2410c;
  --primary-soft: #fff3e9;
  --bg: #fbf6f1;
  --bg-2: #f4e9df;
  --card: #ffffff;
  --text: #2b2118;
  --text-2: #7a6552;
  --border: #efe2d6;
  --glow: rgba(234, 88, 12, .22);
}
/* 葡萄紫 */
html[data-theme="grape"] {
  --primary: #7c3aed;
  --primary-dark: #6d28d9;
  --primary-soft: #f3ecfd;
  --bg: #f7f4fc;
  --bg-2: #ece4f7;
  --card: #ffffff;
  --text: #241a30;
  --text-2: #6a5b78;
  --border: #e6ddf2;
  --glow: rgba(124, 58, 237, .22);
}
/* 黑金 */
html[data-theme="black-gold"] {
  --primary: #c8a24a;
  --primary-dark: #a8842f;
  --primary-soft: #faf3df;
  --bg: #f6f2ea;
  --bg-2: #efe7d8;
  --card: #ffffff;
  --text: #2a2418;
  --text-2: #6f6547;
  --border: #e7dcc6;
  --glow: rgba(200, 162, 74, .28);
}
/* 热血红金（保留之前的传奇热血风） */
html[data-theme="blood"] {
  --primary: #c81e2c;
  --primary-dark: #8c1019;
  --primary-soft: #fdeced;
  --bg: #fbf5f3;
  --bg-2: #f3e4e1;
  --card: #ffffff;
  --text: #2a1a1a;
  --text-2: #7a5b58;
  --border: #efd9d6;
  --glow: rgba(200, 30, 44, .25);
}

/* 深色模式：在任意主题色上覆盖底色与文字 */
html[data-mode="dark"] {
  --bg: #0f172a;
  --bg-2: #1e293b;
  --card: #1a2438;
  --text: #e6edf6;
  --text-2: #9fb0c3;
  --border: #2c3a52;
  --primary-soft: rgba(255, 255, 255, .08);
  --topnav-bg: rgba(15, 23, 42, .74);
  --topnav-border: rgba(255, 255, 255, .07);
  --topnav-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  --card-shadow: 0 8px 30px rgba(0, 0, 0, .35);
  --card-shadow-hover: 0 16px 40px rgba(0, 0, 0, .5);
}
html[data-mode="dark"][data-theme="blood"] {
  --bg: #0a0405;
  --bg-2: #170709;
  --card: #170c0d;
  --text: #f6e8e6;
  --text-2: #b99998;
  --border: #33191b;
}
html[data-mode="dark"][data-theme="black-gold"] {
  --bg: #0c0a06;
  --bg-2: #171208;
  --card: #171208;
  --text: #f7efd9;
  --text-2: #bda97c;
  --border: #33280f;
}

/* ---------------- 2. 基础 ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(1000px 520px at 12% -8%, var(--bg-2), transparent 60%),
    radial-gradient(900px 460px at 88% 0%, var(--bg-2), transparent 55%);
  background-attachment: fixed;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; }
p { margin: 0; }
::selection { background: var(--primary); color: #fff; }

/* 滚动条 */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

/* ---------------- 3. 顶部导航 ---------------- */
.topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--topnav-bg);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--topnav-border);
  box-shadow: var(--topnav-shadow);
}
.topnav-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  height: 64px;
}
.topnav-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.topnav-logo {
  width: 34px; height: 34px; object-fit: contain;
  border-radius: 9px;
  box-shadow: 0 3px 10px var(--glow);
  background: var(--card);
}
.topnav-name {
  font-size: 19px; font-weight: 800; letter-spacing: .5px; white-space: nowrap;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.topnav-burger {
  display: none;
  flex-direction: column; gap: 5px;
  background: none; border: 0; padding: 8px; cursor: pointer;
}
.topnav-burger span {
  width: 22px; height: 2px; border-radius: 2px; background: var(--text);
  transition: transform .25s, opacity .25s;
}
.topnav-burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topnav-burger.active span:nth-child(2) { opacity: 0; }
.topnav-burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.topnav-nav { flex: 1; min-width: 0; }
.topnav-nav ul {
  display: flex; align-items: center; gap: 2px;
  margin: 0; padding: 0; list-style: none; flex-wrap: wrap;
}
.topnav-nav .nav-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  color: var(--text-2); font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: color .22s, background .22s, box-shadow .22s;
}
.topnav-nav .nav-item:hover { color: var(--primary); background: var(--primary-soft); }
.topnav-nav .nav-item.active { color: #fff; background: var(--grad); box-shadow: 0 4px 14px var(--glow); }
.topnav-nav .nav-icon { font-size: 15px; line-height: 1; }
html[data-mode="dark"] .topnav-nav .nav-item.active { color: #fff; }

.topnav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.topbar-search { position: relative; display: flex; align-items: center; }
.topbar-search input {
  width: 200px; height: 38px;
  padding: 0 40px 0 16px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--text);
  font-size: 13.5px; outline: none;
  transition: width .22s, border-color .22s, box-shadow .22s;
}
.topbar-search input::placeholder { color: var(--text-2); }
.topbar-search input:focus { width: 240px; border-color: var(--primary); box-shadow: var(--ring); }
.topbar-search button {
  position: absolute; right: 5px;
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  background: var(--grad); color: #fff;
  cursor: pointer; display: grid; place-items: center;
  transition: transform .2s;
}
.topbar-search button:hover { transform: scale(1.08); }
.topbar-search button::before {
  content: "";
  width: 15px; height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.3-4.3'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat; background-position: center;
}

.btn-login, .btn-register {
  display: inline-flex; align-items: center; height: 38px; padding: 0 18px;
  border-radius: 999px; font-size: 13.5px; font-weight: 600; white-space: nowrap;
  transition: all .22s;
}
.btn-login { color: var(--primary); background: var(--primary-soft); }
.btn-login:hover { color: #fff; background: var(--primary); }
.btn-register { color: #fff; background: var(--grad); box-shadow: 0 4px 14px var(--glow); }
.btn-register:hover { transform: translateY(-1px); box-shadow: 0 8px 20px var(--glow); }

/* ---------------- 4. 主体容器 ---------------- */
.portal-main {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 24px 20px 0;
  min-height: calc(100vh - 240px);
}

/* ---------------- 5. 3D 轮播 ---------------- */
.carousel-3d-wrapper {
  position: relative;
  height: 330px;
  margin: 8px 0 6px;
  perspective: 1200px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--grad);
  box-shadow: 0 18px 44px var(--glow);
}
.carousel-3d { position: absolute; inset: 0; transform-style: preserve-3d; }
.car3d-item {
  position: absolute;
  top: 22px; bottom: 22px;
  left: 50%;
  width: 72%; max-width: 820px;
  margin: 0;
  border-radius: 20px;
  background-size: cover; background-position: center;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .3);
  transition: transform .55s cubic-bezier(.22, .8, .36, 1), opacity .55s;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; z-index: 1;
  transform: translateX(-50%) scale(.7);
}
.car3d-item[data-pos="0"] {
  transform: translateX(-50%) scale(1);
  opacity: 1; z-index: 5; pointer-events: auto;
}
.car3d-item[data-pos="-1"] {
  transform: translateX(-50%) translateX(-48%) rotateY(26deg) scale(.84);
  opacity: .78; z-index: 4;
}
.car3d-item[data-pos="1"] {
  transform: translateX(-50%) translateX(48%) rotateY(-26deg) scale(.84);
  opacity: .78; z-index: 4;
}
.car3d-item[data-pos="-2"] {
  transform: translateX(-50%) translateX(-80%) rotateY(32deg) scale(.7);
  opacity: .38; z-index: 3;
}
.car3d-item[data-pos="2"] {
  transform: translateX(-50%) translateX(80%) rotateY(-32deg) scale(.7);
  opacity: .38; z-index: 3;
}
.car3d-overlay {
  width: 100%; padding: 30px 44px; text-align: center; color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .42));
  border-radius: 20px;
}
.car3d-badge {
  display: inline-block; margin-bottom: 10px;
  padding: 3px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .35);
  backdrop-filter: blur(4px);
}
.car3d-title { font-size: 30px; font-weight: 800; letter-spacing: 1px; text-shadow: 0 3px 14px rgba(0, 0, 0, .4); }
.car3d-subtitle { margin-top: 10px; font-size: 15px; opacity: .94; }
.car3d-btn {
  display: inline-block; margin-top: 18px;
  padding: 10px 28px; border-radius: 999px;
  background: #fff; color: var(--primary-dark);
  font-weight: 700; font-size: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  transition: transform .2s;
}
.car3d-btn:hover { transform: translateY(-2px) scale(1.03); }
.car3d-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 20;
  width: 42px; height: 42px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .85); color: var(--primary-dark);
  font-size: 24px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  transition: background .2s, transform .2s;
}
.car3d-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.1); }
.car3d-prev { left: 14px; }
.car3d-next { right: 14px; }
.carousel-3d-dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 20;
}
.car3d-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  cursor: pointer; transition: all .25s; border: 0; padding: 0;
}
.car3d-dot.active { width: 26px; border-radius: 999px; background: #fff; }

/* ---------------- 6. 分区标题 ---------------- */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 34px 0 16px;
}
.section-title {
  position: relative;
  font-size: 22px; font-weight: 800;
  padding-left: 16px;
}
.section-title::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 6px; height: 22px; border-radius: 4px;
  background: var(--grad);
}
.section-more {
  font-size: 13.5px; color: var(--text-2);
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border);
  white-space: nowrap;
  transition: all .22s;
}
.section-more:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }

/* 分类筛选胶囊 */
.cat-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card);
  color: var(--text-2); font-size: 13px; font-weight: 600;
  transition: all .22s;
}
.cat-chip:hover { color: var(--primary); border-color: var(--primary); }
.cat-chip .n {
  font-size: 11px; padding: 0 6px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary);
}
.cat-chip.active { color: #fff; background: var(--grad); border-color: transparent; box-shadow: 0 4px 14px var(--glow); }
.cat-chip.active .n { background: rgba(255, 255, 255, .25); color: #fff; }

/* ---------------- 7. 工具卡片网格 ---------------- */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.tool-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px;
  padding: 22px 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.tool-card::after {
  content: "";
  position: absolute; right: -40px; top: -40px;
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--primary-soft);
  opacity: 0; transition: opacity .25s;
}
.tool-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); border-color: var(--primary); }
.tool-card:hover::after { opacity: 1; }
.tool-card-icon {
  position: relative; z-index: 1;
  width: 76px; height: 76px; padding: 12px;
  border-radius: 20px;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid; place-items: center;
  transition: transform .25s;
}
.tool-card-icon svg { width: 100%; height: 100%; }
.tool-card:hover .tool-card-icon { transform: scale(1.06); }
.tool-card-body {
  position: relative; z-index: 1;
  width: 100%; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.tool-card-title {
  font-size: 15px; font-weight: 700; color: var(--text);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tool-card-desc-btn {
  display: inline-block; max-width: 100%;
  font-size: 12px; color: var(--primary);
  background: var(--primary-soft);
  padding: 3px 12px; border-radius: 999px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tool-card-desc {
  font-size: 12.5px; color: var(--text-2); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 38px;
}
.tool-card-badge {
  display: inline-block;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--primary-soft); color: var(--primary);
}
.tool-card-badge.badge-hot { background: rgba(220, 38, 38, .12); color: var(--danger); }

.empty-tip {
  padding: 44px 20px; text-align: center; color: var(--text-2);
  border: 1px dashed var(--border); border-radius: var(--radius);
  background: var(--card);
}

/* ---------------- 8. 工具页 ---------------- */
.tool-page { max-width: 980px; margin: 0 auto; }
.tool-head { margin: 8px 0 18px; }
.tool-head .back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 12px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card);
  font-size: 13px; color: var(--text-2);
  transition: all .22s;
}
.tool-head .back:hover { color: var(--primary); border-color: var(--primary); }
.tool-head h1 { font-size: 24px; font-weight: 800; }
.tool-head > p { margin-top: 8px; color: var(--text-2); font-size: 13.5px; }

.panel, .card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 22px;
}
.card { padding: 1rem 1.1rem; }

.tool-form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

input[type="text"], input[type="number"], input[type="password"], textarea, select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
html[data-mode="dark"] input[type="text"], html[data-mode="dark"] input[type="number"],
html[data-mode="dark"] input[type="password"], html[data-mode="dark"] textarea,
html[data-mode="dark"] select { background: rgba(255, 255, 255, .04); }
input:focus, textarea:focus, select:focus {
  border-color: var(--primary);
  box-shadow: var(--ring);
  background: var(--card);
}
textarea { min-height: 130px; resize: vertical; line-height: 1.6; font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

/* 分段选择（单选胶囊组） */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card);
  font-size: 13px; color: var(--text-2); cursor: pointer;
  transition: all .22s;
}
.seg label:hover { border-color: var(--primary); color: var(--primary); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) {
  color: #fff; background: var(--grad); border-color: transparent;
  box-shadow: 0 4px 14px var(--glow);
}
.seg label:has(input:checked) span { color: #fff; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 22px;
  border: 0; border-radius: 999px;
  background: var(--grad); color: #fff;
  font-size: 13.5px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px var(--glow);
  transition: transform .2s, box-shadow .2s, opacity .2s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px var(--glow); }
.btn.ghost {
  background: var(--card); color: var(--text-2);
  border: 1px solid var(--border); box-shadow: none;
}
.btn.ghost:hover { color: var(--primary); border-color: var(--primary); transform: none; }
.btn.danger { background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: 0 6px 18px rgba(220, 38, 38, .25); }

.hint { font-size: 12.5px; color: var(--text-2); line-height: 1.7; }

.result {
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--card-shadow);
}
.result-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: var(--primary-soft);
  font-size: 12.5px; font-weight: 700; color: var(--primary);
}
.result pre {
  margin: 0; padding: 16px;
  font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace;
  font-size: 13px; line-height: 1.75;
  white-space: pre-wrap; word-break: break-all;
  color: var(--text);
  max-height: 460px; overflow: auto;
}
.copy-btn {
  padding: 4px 14px;
  border: 1px solid var(--primary); border-radius: 999px;
  background: transparent; color: var(--primary);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all .2s;
}
.copy-btn:hover { background: var(--primary); color: #fff; }

/* ---------------- 9. 页脚 ---------------- */
.portal-footer {
  max-width: var(--page-max);
  margin: 44px auto 0;
  padding: 24px 20px 34px;
  text-align: center;
  color: var(--text-2);
  font-size: 13px;
  border-top: 1px dashed var(--border);
}
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; align-items: center; }
.footer-links a { color: var(--text-2); transition: color .2s; }
.footer-links a:hover { color: var(--primary); }
.footer-sign { margin-top: 10px; font-size: 12px; opacity: .8; }

/* ---------------- 10. 悬浮联系面板 ---------------- */
.contact-dock {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 900;
  display: flex; align-items: center;
}
.cd-toggle {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px;
  border: 1px solid transparent; border-left: 0;
  border-radius: 0 14px 14px 0;
  background: var(--grad); color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px var(--glow);
}
.cd-toggle-ico { font-size: 16px; line-height: 1; }
.cd-toggle-txt { writing-mode: vertical-rl; letter-spacing: 2px; font-size: 12.5px; }
.cd-panel {
  width: 0; padding: 0;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border); border-left: 0;
  border-radius: 0 16px 16px 0;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .14);
  transition: width .3s ease, padding .3s ease;
}
.contact-dock.open .cd-panel { width: 236px; padding: 14px; }
.cd-title { font-size: 13px; font-weight: 800; margin-bottom: 10px; white-space: nowrap; }
.cd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cd-item { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 11px; }
.cd-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.cd-ico { font-size: 13px; }
.cd-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.cd-value { font-size: 13px; font-weight: 700; white-space: nowrap; }
.cd-btn {
  padding: 3px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-2); font-size: 11.5px; cursor: pointer;
  white-space: nowrap;
}
.cd-btn-primary { background: var(--primary-soft); color: var(--primary); border-color: transparent; font-weight: 700; }

/* ---------------- 11. 主题切换器 ---------------- */
.theme-switcher {
  position: fixed; right: 18px; bottom: 18px;
  z-index: 950;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.theme-toggle {
  width: 46px; height: 46px;
  border: 0; border-radius: 50%;
  background: var(--grad); color: #fff;
  font-size: 18px; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 8px 24px var(--glow);
  transition: transform .2s;
}
.theme-toggle:hover { transform: rotate(18deg) scale(1.06); }
.theme-panel {
  display: none;
  width: 236px; padding: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
}
.theme-switcher.open .theme-panel { display: block; animation: tsIn .18s ease-out; }
@keyframes tsIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.theme-group + .theme-group { margin-top: 12px; }
.theme-label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 8px; }
.theme-swatches { display: flex; gap: 8px; }
.theme-swatch {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
  transition: transform .18s, border-color .18s;
}
.theme-swatch:hover { transform: scale(1.12); }
.theme-swatch.active { border-color: var(--text); transform: scale(1.12); }
.theme-modes { display: flex; gap: 6px; }
.theme-mode-btn {
  flex: 1; padding: 6px 0;
  font-size: 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--text-2);
  transition: all .2s;
}
.theme-mode-btn.active { background: var(--grad); color: #fff; border-color: transparent; }

/* ---------------- 12. 后台 ---------------- */
.admin-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat-card { padding: 18px; }
.stat-num { font-size: 30px; font-weight: 800; color: var(--primary); line-height: 1.1; }
.stat-label { font-size: 12.5px; color: var(--text-2); margin-top: 4px; }
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th, table.tbl td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.tbl th { font-size: 12.5px; color: var(--text-2); font-weight: 700; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tr:hover td { background: var(--primary-soft); }
.tool-cat { font-size: 12px; color: var(--text-2); }

/* ---------------- 13. 响应式 ---------------- */
@media (max-width: 1100px) {
  .tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .topnav-burger { display: flex; }
  .topnav-inner { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 10px; }
  .topnav-brand { order: 1; }
  .topnav-actions { order: 3; margin-left: auto; }
  .topnav-nav { display: none; order: 4; width: 100%; }
  .topnav-nav.open { display: block; }
  .topnav-nav ul { flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 0; }
  .topnav-nav .nav-item { padding: 10px 14px; }
  .topbar-search { order: 2; width: 100%; }
  .topbar-search input, .topbar-search input:focus { width: 100%; }
  .portal-main { padding: 16px 14px 0; }
  .carousel-3d-wrapper { height: 260px; }
  .car3d-item { width: 84%; }
  .car3d-title { font-size: 21px; }
  .car3d-subtitle { font-size: 13px; }
  .car3d-overlay { padding: 20px 18px; }
  .section-title { font-size: 19px; }
  .contact-dock { top: auto; bottom: 88px; transform: none; }
  .cd-toggle { padding: 9px 7px; }
  .cd-toggle-txt { font-size: 11.5px; }
  .contact-dock.open .cd-panel { width: 208px; }
}
@media (max-width: 820px) {
  .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tools-grid { grid-template-columns: 1fr; }
  .tool-card { flex-direction: row; text-align: left; align-items: center; padding: 14px; gap: 14px; }
  .tool-card-icon { width: 58px; height: 58px; padding: 10px; border-radius: 16px; }
  .tool-card-body { align-items: flex-start; }
  .tool-card-desc { min-height: 0; -webkit-line-clamp: 2; }
  .btn-login, .btn-register { padding: 0 13px; font-size: 13px; }
  .theme-panel { width: 208px; }
  .car3d-item[data-pos="-1"], .car3d-item[data-pos="1"] { opacity: .35; }
}

/* 打印/无 JS 兜底：让轮播至少显示首屏卡片 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------- 会员 / 登录注册 ---------------- */
.auth-wrap { max-width: 460px; margin: 2.4rem auto; padding: 0 16px; }
.auth-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--card-shadow);
  padding: 28px 26px;
}
.auth-card h1 { font-size: 22px; font-weight: 800; }
.auth-card .sub { color: var(--text-2); font-size: 13px; margin: 6px 0 20px; }
.auth-card .tool-form { gap: 14px; }
.auth-foot { margin-top: 18px; text-align: center; font-size: 13px; color: var(--text-2); }
.auth-foot a { color: var(--primary); font-weight: 700; }

.alert { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.6; margin-bottom: 14px; }
.alert.err { background: rgba(220,38,38,.08); color: #b91c1c; border: 1px solid rgba(220,38,38,.25); }
.alert.ok  { background: rgba(22,163,74,.08);  color: #15803d; border: 1px solid rgba(22,163,74,.25); }
html[data-mode="dark"] .alert.err { color: #fca5a5; }
html[data-mode="dark"] .alert.ok  { color: #86efac; }

.member-wrap { max-width: 860px; margin: 2.2rem auto; padding: 0 16px; }
.member-grid { display: grid; grid-template-columns: 300px 1fr; gap: 18px; }
.member-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--card-shadow);
  padding: 24px; text-align: center;
}
.member-avatar {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 14px;
  display: grid; place-items: center; font-size: 30px; font-weight: 800; color: #fff;
  background: var(--grad); box-shadow: 0 8px 22px var(--glow);
}
.member-card h2 { font-size: 19px; font-weight: 800; }
.member-badge {
  display: inline-block; margin-top: 8px; padding: 3px 12px; font-size: 12px; font-weight: 700;
  color: #fff; border-radius: 999px; background: linear-gradient(135deg, #f59e0b, #d97706);
}
.member-meta { margin-top: 18px; text-align: left; font-size: 13.5px; }
.member-meta > div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px dashed var(--border); }
.member-meta > div:first-child { border-top: 0; }
.member-meta span:first-child { color: var(--text-2); }
.member-meta span:last-child { font-weight: 600; word-break: break-all; text-align: right; }

.member-main .panel { margin-bottom: 16px; }
.member-main h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.member-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.member-tool {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card);
  color: var(--text); text-decoration: none; font-size: 13.5px; transition: all .2s;
}
.member-tool:hover { border-color: var(--primary); box-shadow: var(--card-shadow-hover); transform: translateY(-1px); }
.member-tool .mt-ico { color: var(--primary); display: inline-flex; }

@media (max-width: 720px) {
  .member-grid { grid-template-columns: 1fr; }
}

/* ---------------- 群二维码（悬浮联系面板内） ---------------- */
.cd-qr {
  margin-top: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--border);
}
.cd-qr img {
  width: 152px; height: 152px;
  border-radius: 6px;
  image-rendering: pixelated;
}
.cd-qr-tip { font-size: 11px; color: var(--text-2); white-space: nowrap; }
html[data-mode="dark"] .cd-qr { background: #fff; }

/* ---------------- 14. 手机端适配（≤ 768px / ≤ 420px） ---------------- */
/* 关键字号：iOS 输入框字号 < 16px 会在聚焦时自动放大页面 */
@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { overflow-x: hidden; background-attachment: scroll; }

  /* 顶部导航：按钮放大到可点区域，品牌名不换行 */
  .topnav-inner { padding: 10px 12px; gap: 8px; }
  .topnav-brand { gap: 8px; min-width: 0; }
  .topnav-name { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topnav-burger { width: 40px; height: 40px; }
  .topnav-actions { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .btn-login, .btn-register {
    height: 38px; line-height: 38px; padding: 0 14px; font-size: 13.5px;
  }
  .topbar-search { padding: 0; }
  .topbar-search input { height: 42px; font-size: 16px; padding: 0 42px 0 14px; }
  .topnav-nav ul { gap: 4px; }
  .topnav-nav .nav-item { min-height: 44px; }

  /* 主体与卡片 */
  .portal-main { padding: 14px 12px 0; }
  .panel, .card { padding: 16px; border-radius: 14px; }
  .tool-head h1 { font-size: 20px; }
  .tool-head > p { font-size: 13px; }
  .section-header { gap: 8px; }
  .section-title { font-size: 18px; }
  .section-more { font-size: 12.5px; }

  /* 表单：统一 16px 防缩放，按钮满宽更好点 */
  input[type="text"], input[type="number"], input[type="password"],
  input[type="email"], input[type="search"], textarea, select {
    font-size: 16px; padding: 12px 14px;
  }
  textarea { min-height: 130px; }
  .tool-form .btn, .row .btn { min-height: 44px; }
  .row { gap: 8px; }
  .row > .btn { flex: 1 1 auto; }

  /* 结果区 */
  .result pre { font-size: 12.5px; padding: 12px; max-height: 340px; }

  /* 分类条横向滚动，避免多分类时挤成多行 */
  .cat-bar {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; margin-bottom: 12px;
    scrollbar-width: none;
  }
  .cat-bar::-webkit-scrollbar { display: none; }
  .cat-chip { flex: 0 0 auto; padding: 8px 15px; font-size: 13px; }

  /* 轮播：降低高度，弱化两侧卡片 */
  .carousel-3d-wrapper { height: 220px; border-radius: 14px; }
  .car3d-item { width: 90%; top: 14px; bottom: 14px; border-radius: 16px; }
  .car3d-overlay { padding: 16px 14px; border-radius: 16px; }
  .car3d-title { font-size: 19px; }
  .car3d-subtitle {
    font-size: 12.5px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .car3d-btn { margin-top: 12px; padding: 8px 20px; font-size: 13px; }
  .car3d-arrow { width: 34px; height: 34px; font-size: 19px; }
  .car3d-prev { left: 6px; }
  .car3d-next { right: 6px; }

  /* 悬浮联系面板：贴左下，面板宽度自适应，二维码不被裁 */
  .contact-dock { top: auto; bottom: 76px; transform: none; }
  .cd-toggle { padding: 10px 6px; border-radius: 0 12px 12px 0; }
  .contact-dock.open .cd-panel { width: min(78vw, 250px); padding: 12px; }
  .cd-panel { -webkit-overflow-scrolling: touch; max-height: 70vh; overflow-y: auto; }
  .cd-qr img { width: 140px; height: 140px; }
  .cd-btn { min-height: 30px; padding: 4px 12px; }

  /* 主题切换器：缩小并避开安全区 */
  .theme-switcher {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    gap: 8px;
  }
  .theme-toggle { width: 42px; height: 42px; font-size: 17px; }
  .theme-panel { width: min(78vw, 230px); }

  /* 会员 / 登录注册 */
  .auth-wrap, .member-wrap { margin: 1.4rem auto; padding: 0 12px; }
  .auth-card { padding: 20px 16px; }
  .auth-card h1 { font-size: 19px; }
  .member-card { padding: 18px 16px; }
  .member-avatar { width: 64px; height: 64px; font-size: 26px; }
  .member-tools { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }

  /* 后台表格：横向滑动 + 触摸惯性 */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  table.tbl { font-size: 13px; }
  table.tbl th, table.tbl td { padding: 9px 10px; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-num { font-size: 24px; }
  .admin-bar .btn { min-height: 42px; flex: 1 1 auto; }

  /* 页脚 */
  .portal-footer { padding: 18px 12px calc(20px + env(safe-area-inset-bottom)); }
  .footer-links { flex-wrap: wrap; gap: 6px 8px; font-size: 12.5px; justify-content: center; }
  .footer-sign { font-size: 11.5px; line-height: 1.7; padding: 0 4px; }
}

/* 超小屏（iPhone SE / 安卓小屏） */
@media (max-width: 420px) {
  .tools-grid { grid-template-columns: 1fr; }
  .tool-card { padding: 12px; gap: 12px; }
  .tool-card-icon { width: 50px; height: 50px; padding: 9px; border-radius: 14px; }
  .carousel-3d-wrapper { height: 196px; }
  .car3d-title { font-size: 17px; }
  .car3d-item[data-pos="-1"], .car3d-item[data-pos="1"],
  .car3d-item[data-pos="-2"], .car3d-item[data-pos="2"] { opacity: 0; pointer-events: none; }
  .topnav-name { font-size: 15px; }
  .cd-qr img { width: 126px; height: 126px; }
  .cd-toggle-txt { font-size: 11px; }
  .member-meta { font-size: 13px; }
}


/* ---------------- 15. 网址导航页（/links.php） ---------------- */
.links-page { max-width: 1100px; margin: 0 auto; }

.links-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 24px; margin: 6px 0 16px;
  border-radius: var(--radius);
  background: var(--grad);
  color: #fff;
  box-shadow: 0 16px 38px var(--glow);
}
.links-h1 { font-size: 26px; font-weight: 800; letter-spacing: 1px; }
.links-sub { margin-top: 8px; font-size: 13.5px; opacity: .94; }
.links-sub b { font-weight: 800; }
.links-hero-stat {
  flex: 0 0 auto; text-align: center;
  padding: 10px 18px; border-radius: 14px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .32);
}
.links-stat-num { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; }
.links-stat-label { display: block; font-size: 11.5px; opacity: .9; margin-top: 2px; }

.links-toolbar { margin-bottom: 18px; }
.links-search { position: relative; margin-bottom: 12px; }
.links-search input {
  width: 100%; height: 46px; padding: 0 44px 0 16px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--text); font-size: 14px;
  box-shadow: var(--card-shadow);
  -webkit-appearance: none; appearance: none;
}
.links-search input:focus { outline: 0; border-color: var(--primary); box-shadow: var(--ring); }
.links-search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.links-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.links-jump-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card);
  color: var(--text); font-size: 13px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(15, 40, 90, .05);
  transition: all .2s;
}
.links-jump-chip:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-1px); }
.lj-ico { font-size: 13px; }
.lj-n { font-size: 11px; padding: 0 6px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); }

.links-empty {
  padding: 26px; text-align: center; color: var(--text-2); font-size: 14px;
  border: 1px dashed var(--border); border-radius: var(--radius);
}

.links-sec {
  margin-bottom: 22px; padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  scroll-margin-top: 80px;
}
.links-sec-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}
.links-sec-title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; }
.ls-ico { font-size: 16px; }
.links-sec-count { font-size: 12px; color: var(--text-2); white-space: nowrap; }

.links-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}
.link-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; min-width: 0;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text); font-size: 13.5px;
  transition: all .18s;
}
.link-item:hover {
  color: var(--primary); background: var(--primary-soft);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 40, 90, .08);
}
.link-fav {
  position: relative; flex: 0 0 22px; width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  border-radius: 6px; overflow: hidden;
  background: var(--card);
  font-size: 11.5px; font-weight: 800; color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--border);
}
.link-fav::before { content: attr(data-l); position: absolute; inset: 0; display: grid; place-items: center; }
.link-fav img { position: relative; z-index: 1; width: 20px; height: 20px; object-fit: contain; }
.link-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.links-foot-tip {
  margin: 22px 0 8px; padding: 14px 18px;
  font-size: 12.5px; line-height: 1.8; color: var(--text-2);
  background: var(--primary-soft); border-radius: var(--radius-sm);
}
.links-foot-tip b { color: var(--primary); }

/* 导航页手机端 */
@media (max-width: 768px) {
  .links-hero { padding: 16px; gap: 10px; border-radius: 14px; }
  .links-h1 { font-size: 20px; }
  .links-sub { font-size: 12.5px; margin-top: 6px; }
  .links-hero-stat { padding: 8px 12px; }
  .links-stat-num { font-size: 20px; }
  .links-stat-label { font-size: 10.5px; }
  .links-search input { height: 44px; font-size: 16px; }
  .links-jump {
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; scrollbar-width: none;
  }
  .links-jump::-webkit-scrollbar { display: none; }
  .links-jump-chip { flex: 0 0 auto; padding: 8px 12px; font-size: 12.5px; }
  .links-sec { padding: 14px; border-radius: 14px; margin-bottom: 14px; }
  .links-sec-title { font-size: 15.5px; }
  .links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .link-item { padding: 8px 9px; font-size: 12.5px; gap: 7px; }
  .link-fav { flex-basis: 20px; width: 20px; height: 20px; }
  .link-fav img { width: 18px; height: 18px; }
  .links-foot-tip { font-size: 12px; padding: 12px 14px; }
}
@media (max-width: 380px) {
  .links-grid { grid-template-columns: 1fr; }
}

/* ---------------- 16. 后台：网址导航管理 ---------------- */
.admin-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 16px; margin-bottom: 20px; }
.admin-h3 { font-size: 15px; font-weight: 800; margin-bottom: 14px; }
.admin-cat { margin-bottom: 16px; padding: 18px 20px; }
.admin-cat-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.admin-cat-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; }
.admin-cat-count {
  font-size: 11.5px; font-weight: 700; color: var(--primary);
  background: var(--primary-soft); border-radius: 999px; padding: 1px 9px;
}
.admin-cat-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-inline-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.admin-inline-form input[type="text"] { height: 36px; padding: 6px 10px; font-size: 13px; }
.admin-inline-form select { width: auto; height: 36px; padding: 6px 10px; font-size: 13px; }
.inp-ico { width: 56px; text-align: center; flex: 0 0 56px; }

.btn.mini {
  height: 32px; padding: 0 12px;
  font-size: 12.5px; border-radius: 999px;
  box-shadow: none;
}
.btn.mini.danger { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.btn.mini:hover { transform: none; }

.admin-links-tbl { font-size: 13px; }
.admin-links-tbl td { vertical-align: middle; }
.admin-url a { color: var(--text-2); font-size: 12.5px; }
.admin-url a:hover { color: var(--primary); }
.admin-ops { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.admin-ops form, .admin-cat-actions form, .admin-move form { display: inline-block; }
.admin-move { white-space: nowrap; }
.mv {
  width: 26px; height: 26px; line-height: 1;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); color: var(--text-2);
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.mv:hover:not([disabled]) { color: var(--primary); border-color: var(--primary); }
.mv[disabled] { opacity: .35; cursor: not-allowed; }
.is-editing td { background: var(--primary-soft); }

@media (max-width: 768px) {
  .admin-grid { grid-template-columns: 1fr; }
  .admin-cat { padding: 14px; }
  .admin-cat-head { align-items: flex-start; }
  .admin-inline-form input[type="text"] { font-size: 16px; height: 40px; }
  .admin-inline-form select { font-size: 16px; height: 40px; }
  .btn.mini { height: 36px; padding: 0 14px; font-size: 13px; }
  .mv { width: 30px; height: 30px; }
}

/* 手机端顶栏压缩：登录态收进汉堡菜单，顶栏只留 品牌 + 搜索 */
.only-mobile { display: none !important; }
@media (max-width: 900px) { .only-mobile { display: block !important; } }

@media (max-width: 560px) {
  .topnav-actions { order: 2; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; width: 100%; }
  .topbar-search { order: 2; flex: 1 0 100%; }
  .topnav-actions > .btn-login, .topnav-actions > .btn-register { display: none; }
  .topnav-inner { padding: 8px 12px; gap: 8px; }
  .contact-dock { bottom: 66px; }
  .cd-toggle { opacity: .92; }
  .cd-toggle:active { opacity: 1; }
}

/* ---------------- 17. 后台：站点改名 / 图标 ---------------- */
.adm-tag {
  flex: 0 0 auto;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
  color: var(--primary); background: var(--primary-soft);
}
.adm-tip { flex: 0 0 auto; font-size: 11.5px; color: var(--text-2); }
.adm-preview {
  flex: 0 0 26px; width: 26px; height: 26px;
  display: inline-grid; place-items: center;
  border-radius: 7px; overflow: hidden;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--border);
}
.adm-preview img { width: 22px; height: 22px; object-fit: contain; }
.admin-links-tbl .admin-inline-form input[type="file"] {
  flex: 0 0 auto; max-width: 168px;
  font-size: 11.5px; color: var(--text-2);
}
.admin-links-tbl .admin-inline-form input[type="file"]::file-selector-button {
  height: 28px; padding: 0 10px; margin-right: 6px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--text);
  font-size: 11.5px; cursor: pointer;
}
.admin-ico-cell { text-align: center; }
.adm-ico {
  position: relative; display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 7px; overflow: hidden;
  background: var(--card);
  font-size: 12px; font-weight: 800; color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--border);
}
.adm-ico::before { content: attr(data-l); position: absolute; inset: 0; display: grid; place-items: center; }
.adm-ico img { position: relative; z-index: 1; width: 22px; height: 22px; object-fit: contain; }
.btn.mini.on { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.admin-ops { flex-wrap: wrap; }

@media (max-width: 768px) {
  .admin-links-tbl .admin-inline-form input[type="file"] { max-width: 100%; flex: 1 0 100%; }
  .adm-tip { display: none; }
  .admin-links-tbl .admin-inline-form input[type="text"] { font-size: 16px; }
  .admin-ops { gap: 5px; }
  .btn.mini { height: 34px; padding: 0 11px; font-size: 12.5px; }
}

/* ---------------- 18. 后台：会员管理 ---------------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stat-cell {
  padding: 12px 10px; text-align: center;
  border-radius: var(--radius-sm);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--border);
}
.stat-cell b { display: block; font-size: 22px; font-weight: 800; color: var(--primary); line-height: 1.2; }
.stat-cell b.warn { color: #ef4444; }
.stat-cell span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-2); }

.ub {
  display: inline-block; padding: 2px 9px;
  border-radius: 999px; font-size: 11.5px; font-weight: 700;
}
.ub-on { color: #16a34a; background: rgba(22, 163, 74, .12); }
.ub-off { color: #dc2626; background: rgba(220, 38, 38, .12); }

.pass-once {
  display: inline-block; margin: 0 4px; padding: 1px 9px;
  border-radius: 6px; letter-spacing: 1px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  background: var(--card); border: 1px dashed var(--primary);
  color: var(--primary); user-select: all;
}
.pass-tip { display: block; margin-top: 6px; font-size: 12.5px; opacity: .85; }
.muted { color: var(--text-2); }

.admin-users-tbl td { white-space: nowrap; }
.admin-users-tbl td.admin-url { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 768px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-cell b { font-size: 19px; }
  .admin-users-tbl { font-size: 12.5px; }
  .admin-users-tbl td { white-space: normal; word-break: break-all; }
  .admin-users-tbl td.admin-url { max-width: none; }
}

/* ---------------- 19. 前台：公告条 / 广告位 / Banner / 软件下载 / 说明书 ---------------- */

/* 公告条 */
.site-notice {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--text); font-size: 13px; line-height: 1.6;
  box-shadow: inset 0 0 0 1px var(--primary);
}
.sn-ico { flex: 0 0 auto; font-size: 14px; }

/* 广告位 */
.ad-row { margin: 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
.ad-slot { border-radius: var(--radius-sm); overflow: hidden; text-align: center; }
.ad-slot img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
.ad-row-foot { margin: 18px 0 0; }

/* Banner 轮播（后台可配） */
.banner-strip {
  position: relative;
  margin: 0 0 18px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--card-shadow);
}
.banner-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.banner-track::-webkit-scrollbar { display: none; }
.banner-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: block;
  aspect-ratio: 1200 / 400;
  background: var(--bg);
}
.banner-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-dots {
  position: absolute; left: 0; right: 0; bottom: 10px;
  display: flex; justify-content: center; gap: 6px;
  pointer-events: none;
}
.bn-dot {
  pointer-events: auto;
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
  cursor: pointer; transition: all .2s;
}
.bn-dot.active { width: 18px; border-radius: 5px; background: #fff; }

/* 软件下载 */
.sw-hero { background: linear-gradient(135deg, #1f6feb, #0b4fb3); }
.sw-chip { cursor: pointer; font-family: inherit; }
.sw-chip.active { color: #fff; background: var(--grad); border-color: transparent; }
.sw-chip.active .lj-n { background: rgba(255, 255, 255, .24); color: #fff; }

.sw-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}
.sw-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 15px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.sw-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 14px 30px rgba(15, 40, 90, .1);
}
.sw-top { display: flex; align-items: flex-start; gap: 10px; }
.sw-ico {
  position: relative; flex: 0 0 36px; width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  border-radius: 9px; overflow: hidden;
  background: var(--bg);
  font-size: 14px; font-weight: 800; color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--border);
}
.sw-ico::before { content: attr(data-l); position: absolute; inset: 0; display: grid; place-items: center; }
.sw-ico img { position: relative; z-index: 1; width: 34px; height: 34px; object-fit: contain; }
.sw-titles { min-width: 0; flex: 1 1 auto; }
.sw-name {
  margin: 0; font-size: 14.5px; font-weight: 800; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-meta {
  margin-top: 3px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--text-2);
}
.sw-tag {
  padding: 1px 7px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary); font-weight: 700;
}
.sw-dot { opacity: .5; }
.sw-summary {
  margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sw-foot { margin-top: auto; }
.sw-dl {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 18px; width: 100%;
  border-radius: 999px;
  background: var(--grad); color: #fff;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 6px 16px var(--glow);
  transition: opacity .16s;
}
.sw-dl:hover { opacity: .9; }
.sw-dl.disabled {
  background: var(--bg); color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--border);
  cursor: not-allowed;
}

/* 说明书 */
.mn-hero { background: linear-gradient(135deg, #0f766e, #115e59); }
.mn-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.mn-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid transparent;
  color: var(--text);
  transition: all .18s;
}
.mn-item:hover {
  color: var(--primary); background: var(--primary-soft);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 40, 90, .08);
}
.mn-ico {
  flex: 0 0 30px; width: 30px; height: 30px;
  display: inline-grid; place-items: center;
  border-radius: 8px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--border);
  font-size: 14px;
}
.mn-main { flex: 1 1 auto; min-width: 0; }
.mn-title {
  display: block; font-size: 13.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mn-meta { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-2); }
.mn-go { flex: 0 0 auto; font-size: 12px; color: var(--text-2); }
.mn-item:hover .mn-go { color: var(--primary); }

/* 页脚备案链接 */
.icp-link { color: inherit; opacity: .85; }
.icp-link:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 768px) {
  .banner-slide { aspect-ratio: 4 / 3; }
  .sw-grid { grid-template-columns: 1fr; gap: 10px; }
  .sw-card { padding: 13px 14px; }
  .mn-list { grid-template-columns: 1fr; }
  .site-notice { font-size: 12.5px; padding: 9px 12px; }
  .banner-dots { bottom: 7px; }
}

/* 会员徽章：VIP 态 */
.member-badge.vip {
  background: linear-gradient(135deg, #f7d774, #e8a33d);
  color: #5a3a00;
  box-shadow: 0 4px 12px rgba(232, 163, 61, .35);
}