/* =========================================================================
 * 365Lab 网名生成器 - 样式 (style.css)
 * Candy-Toon 卡通贴纸风：单一默认配色 + 硬投影贴纸卡片
 * 纯静态零依赖，桌面/手机自适应。
 * ========================================================================= */

/* ---------- 默认配色 token（配色切换已下线，全站单一风格） ---------- */
:root {
  --a1: #22d3ee; --a2: #818cf8; --a3: #c084fc;
  --glow: 34,211,238; --glow2: 129,140,248;
  --grad: linear-gradient(135deg, #8b5cf6 0%, #6366f1 38%, #22d3ee 100%);
  --grad-warm: linear-gradient(135deg, #ff5fa2 0%, #ff8f5e 100%);
}

:root {
  --bg: #f4f1ff;
  --bg-soft: #ffffff;
  --surface: rgba(255,255,255,.92);
  --surface-2: rgba(243,239,255,.86);
  --surface-3: rgba(255,255,255,.7);
  --border: rgba(231,224,251,.9);
  --text: #2a2350;
  --text-soft: #6b6390;
  --muted: #8f88b3;
  --primary: #7450f2;
  --primary-d: #6244e0;
  --primary-soft: rgba(116,80,242,.12);
  --accent: #ff5fa2;
  --accent-2: #22d3ee;
  --accent-3: #ffb443;
  --ok: #19c37d;
  --err: #ff5470;
  --radius: 22px;
  --radius-sm: 14px;
  --radius-xs: 10px;
  --shadow: 0 14px 40px rgba(116,80,242,.12);
  --shadow-sm: 0 6px 18px rgba(116,80,242,.08);
  --shadow-pop: 0 22px 50px rgba(116,80,242,.22);
  --shadow-glow: 0 0 30px rgba(var(--glow),.22);
  --maxw: 1320px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151220;
    --bg-soft: #1c1830;
    --surface: rgba(30,26,51,.9);
    --surface-2: rgba(39,34,68,.86);
    --surface-3: rgba(45,40,75,.7);
    --border: rgba(60,52,98,.9);
    --text: #f0eeff;
    --text-soft: #b8b2dd;
    --muted: #8f88b3;
    --primary: #9d83ff;
    --primary-d: #b29dff;
    --primary-soft: rgba(157,131,255,.18);
    --shadow: 0 14px 40px rgba(0,0,0,.35);
    --shadow-sm: 0 6px 18px rgba(0,0,0,.25);
    --shadow-pop: 0 22px 50px rgba(0,0,0,.45);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  min-height: 100vh;
}
body.reduce-motion * { animation: none !important; transition: none !important; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; height: auto; }
button, input, select { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, .sym-chip:focus-visible, .sym-item:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}

/* ---------- 顶部导航 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--border);
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.header-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; gap: 14px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: var(--text); }
.brand-logo { width: 30px; height: 30px; display: block; filter: drop-shadow(0 2px 6px rgba(var(--glow),.35)); }
.brand span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-name { font-size: 17px; font-weight: 800; white-space: nowrap; }
.brand-name b { font-weight: 800; }
.header-right { display: flex; align-items: center; gap: 12px; }
.top-nav { display: flex; align-items: center; gap: 6px; }
.top-nav a {
  padding: 8px 14px; border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--text-soft);
  transition: background .15s, color .15s, box-shadow .15s;
  position: relative;
  white-space: nowrap;
}
.top-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.top-nav a.active { background: var(--primary-soft); color: var(--primary); }
.top-nav a.active::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  width: 16px; height: 3px; border-radius: 2px; background: var(--grad);
}
.lang-switch-wrap { display: flex; gap: 4px; align-items: center; position: relative; }
.lang-switch {
  padding: 6px 11px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-2); font-size: 12px; cursor: pointer; font-weight: 700;
  transition: background .15s, border-color .15s, transform .08s; color: var(--text-soft);
}
.lang-switch:hover { border-color: var(--primary); color: var(--primary); }
.lang-switch.active { background: var(--grad); color: #fff; border-color: transparent; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 44px 20px 36px;
  background: var(--grad);
  color: #fff;
  overflow: hidden;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  margin-bottom: 28px;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 30%, rgba(255,255,255,.22) 0%, transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(255,95,162,.28) 0%, transparent 30%),
    radial-gradient(circle at 70% 80%, rgba(34,211,238,.22) 0%, transparent 32%);
  filter: blur(8px);
  animation: aurora 10s ease-in-out infinite alternate;
}
@keyframes aurora {
  0% { opacity: .8; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.04); }
}
.hero-inner { position: relative; z-index: 2; text-align: center; max-width: 760px; margin: 0 auto; }
.hero h1 { font-size: clamp(26px, 4.5vw, 42px); margin: 0 0 10px; line-height: 1.15; font-weight: 800; text-shadow: 0 2px 12px rgba(0,0,0,.12); }
.hero p { font-size: 16px; opacity: .94; max-width: 640px; margin: 0 auto 22px; line-height: 1.6; }
.hero-actions { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--primary);
  padding: 12px 26px; border-radius: 30px; font-weight: 800; font-size: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
  transition: transform .12s, box-shadow .18s, filter .18s;
}
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.2); text-decoration: none; filter: brightness(1.02); }
.hero-cta.secondary {
  background: rgba(255,255,255,.14); color: #fff;
  border: 2px solid rgba(255,255,255,.78);
  box-shadow: none; backdrop-filter: blur(6px);
}
.hero-cta.secondary::before { content: none; display: none; }
.hero-cta.secondary:hover { background: rgba(255,255,255,.22); }
.hero-mascot {
  position: absolute; right: 5%; top: 50%; transform: translateY(-50%);
  width: 150px; height: 150px; opacity: .95; pointer-events: none;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.14));
}
.hero-decoration {
  position: absolute; left: 4%; top: 22%;
  width: 40px; height: 40px; opacity: .9; pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.12));
}

/* ---------- 主体两栏 ---------- */
.layout {
  display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start;
  padding-bottom: 44px;
}

/* ---------- 面板通用 ---------- */
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
}
.panel-title { margin: 0 0 16px; font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.panel-title::before {
  content: ""; width: 6px; height: 20px; border-radius: 3px; background: var(--grad);
}
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 800; color: var(--text-soft); margin-bottom: 7px; }
.field input[type="text"], .field select {
  width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2); color: var(--text); font-size: 14px;
  outline: none; transition: border-color .18s, box-shadow .18s, background .18s;
}
.field input:hover, .field select:hover { border-color: rgba(var(--glow),.35); }
.field input:focus, .field select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(var(--glow),.12); }
.field select { appearance: none; cursor: pointer; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.actions { display: flex; gap: 10px; margin: 8px 0 4px; }

/* ---------- 按钮 ---------- */
.btn {
  appearance: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 11px 18px; font-size: 15px; font-weight: 800; cursor: pointer;
  transition: transform .1s, background .18s, box-shadow .18s, filter .18s; color: #fff;
  position: relative; overflow: hidden;
}
.btn::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.18), transparent);
  opacity: 0; transition: opacity .18s;
}
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.primary { background: var(--grad); flex: 1; box-shadow: 0 4px 14px rgba(var(--glow),.35); }
.btn.primary:hover { filter: brightness(1.06); box-shadow: 0 6px 20px rgba(var(--glow),.45); }
.btn.ghost { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn.ghost:hover { background: rgba(var(--glow),.1); border-color: rgba(var(--glow),.4); }
.btn.small { padding: 7px 12px; font-size: 13px; background: var(--surface-2); color: var(--text); border-color: var(--border); font-weight: 700; }
.btn.small:hover { background: rgba(var(--glow),.1); border-color: rgba(var(--glow),.35); }
.btn.small.primary {
  background: var(--grad); color: #fff; border-color: transparent;
  box-shadow: 0 3px 10px rgba(var(--glow),.35);
}
.btn.small.primary:hover { filter: brightness(1.06); box-shadow: 0 5px 16px rgba(var(--glow),.45); }
.btn.small.secondary {
  background: var(--surface); color: var(--primary); border-color: var(--primary);
}
.btn.small.secondary:hover { background: rgba(var(--glow),.12); }
.btn.small.ghost { background: transparent; color: var(--text-soft); border-color: transparent; }
.btn.small.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.small.danger { background: var(--err); color: #fff; border-color: var(--err); }

/* ---------- Symbol panel ---------- */
.sym-panel { margin-top: 18px; border-top: 1px dashed var(--border); padding-top: 16px; }
.sym-head { font-size: 13px; color: var(--text-soft); font-weight: 800; margin-bottom: 10px; }
.sym-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; max-height: 150px; overflow-y: auto; }
.sym-chip {
  border: 1px solid var(--border); background: var(--surface-2); border-radius: 10px;
  font-size: 18px; line-height: 1; padding: 9px 0; cursor: pointer; color: var(--text);
  transition: background .15s, transform .1s, border-color .15s;
}
.sym-chip:hover { background: var(--primary-soft); border-color: var(--primary); transform: translateY(-1px); }
.sym-chip:active { transform: scale(.92); }
.sym-more { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; }

/* ---------- Results ---------- */
.results-area {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
}
.results-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: nowrap; }
.toolbar-right {
  display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; min-width: 0;
  --icon-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.023 9.348h4.992m-2.01 7.428c-1.331 3.818-5.18 6.074-9.06 5.048-3.882-1.026-6.207-4.96-5.18-8.843 1.026-3.882 4.96-6.207 8.843-5.18 1.45.383 2.703 1.148 3.685 2.19l-2.39 2.39h4.99V5.98'/%3E%3C/svg%3E");
  --icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237450f2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
  --icon-export: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6390' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
  --icon-random: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6390' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='8' cy='8' r='2'/%3E%3Ccircle cx='16' cy='16' r='2'/%3E%3Ccircle cx='16' cy='8' r='2'/%3E%3Ccircle cx='8' cy='16' r='2'/%3E%3C/svg%3E");
  --icon-favorite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6390' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}
.toolbar-right .btn { white-space: nowrap; flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.toolbar-right .btn::before {
  content: ""; display: inline-block; width: 15px; height: 15px;
  background: center/contain no-repeat;
  flex: none;
}
#regenToolbarBtn::before { content: none; display: none; }
#copyAllBtn::before { background-image: var(--icon-copy); }
#exportBtn::before { background-image: var(--icon-export); }
#randomBtn::before { background-image: var(--icon-random); }
#favAllBtn::before { background-image: var(--icon-favorite); }
.toolbar-right .btn.small.ghost { background: transparent; color: var(--text-soft); border-color: transparent; }
.toolbar-right .btn.small.ghost:hover { background: var(--surface-2); color: var(--text); }

.nick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px; }
.nick-card {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 14px; display: flex; flex-direction: column; gap: 12px;
  transition: border-color .18s, box-shadow .18s, transform .1s;
}
.nick-card:hover { border-color: rgba(var(--glow),.45); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.nick-text { font-size: 16px; font-weight: 700; word-break: break-all; min-height: 24px; }
.nick-actions { display: flex; gap: 8px; }
.btn-copy, .btn-fav {
  flex: 1; border: 1px solid var(--border); background: var(--surface);
  border-radius: 10px; padding: 8px 6px; font-size: 13px; cursor: pointer; color: var(--text-soft); font-weight: 700;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-copy:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-fav:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-fav.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.empty-state { text-align: center; color: var(--text-soft); padding: 28px; }
.empty-state p { margin: 6px 0 0; font-size: 14px; }
.result-count { font-size: 13px; color: var(--text-soft); margin: 0 0 12px; font-weight: 700; }

/* ---------- 收藏 ---------- */
.fav-section { padding-bottom: 44px; }
.fav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.fav-head .panel-title { margin: 0; }
.fav-count { font-size: 13px; color: var(--text-soft); font-weight: 700; margin-left: 6px; }
.fav-actions { display: flex; gap: 8px; }

/* ---------- 示例网名 ---------- */
.sample-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin: 14px 0 6px; }
.sample-chip {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 12px; font-size: 15px; font-weight: 700; color: var(--text);
  min-height: 50px; word-break: break-all;
  transition: border-color .18s, box-shadow .18s, transform .1s, background .18s;
  box-shadow: var(--shadow-sm); cursor: pointer;
}
.sample-chip:hover { border-color: rgba(var(--glow),.5); box-shadow: var(--shadow-glow); transform: translateY(-2px); background: var(--surface-3); }
.sample-chip:active { transform: scale(.97); }
.samples-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.samples-head .section-title { margin: 0; }
.samples-head .hint { margin: 0; }
.samples-head .btn { margin-left: auto; }

/* ---------- Section title ---------- */
.section-title { font-size: 22px; font-weight: 800; margin: 0 0 16px; color: var(--text); text-align: left; border-left: none; padding-left: 0; }
.section-title::before, .section-title::after { content: none; display: none; }

/* ---------- 首页特色 ---------- */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 18px 0 30px; }
.feature-card {
  display: grid; grid-template-columns: auto 1fr;
  column-gap: 14px; row-gap: 6px;
  align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 18px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .18s, border-color .18s;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(var(--glow),.4); }
.feature-ico {
  grid-column: 1; grid-row: 1;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(var(--glow),.12);
}
.feature-ico img { width: 26px; height: 26px; display: block; }
.feature-card h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 16px; font-weight: 800; }
.feature-card p { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 13px; color: var(--text-soft); line-height: 1.55; }

/* ---------- 支持的类型（新版卡片） ---------- */
.type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 30px; }
.type-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 18px 18px 18px 56px;
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
  transition: transform .15s, box-shadow .18s, border-color .18s;
}
.type-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(var(--glow),.4); }
.type-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--grad);
}
.type-item .type-icon {
  position: absolute; left: 14px; top: 18px;
  width: 30px; height: 30px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center; font-size: 16px;
  box-shadow: inset 0 1px 4px rgba(var(--glow),.12);
}
.type-item strong { color: var(--text); font-size: 15px; font-weight: 800; }
.type-item p { margin: 4px 0 0; color: var(--text-soft); font-size: 13.5px; line-height: 1.55; }

/* ---------- SEO 内容 ---------- */
.seo-content {
  max-width: 860px; margin: 36px auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 32px;
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.seo-content::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--grad);
}
.seo-content h2 { font-size: 22px; margin: 0 0 14px; font-weight: 800; }
.seo-content h3 { font-size: 16px; margin: 24px 0 12px; color: var(--primary); font-weight: 800; }
.seo-content ol {
  padding-left: 0; list-style: none; counter-reset: step;
  display: grid; gap: 10px; margin: 0 0 20px;
}
.seo-content li {
  color: var(--text-soft); font-size: 14.5px; line-height: 1.6;
  position: relative; padding-left: 34px;
}
.seo-content li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--grad); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  box-shadow: 0 2px 8px rgba(var(--glow),.35);
}
.seo-content p { color: var(--text-soft); font-size: 14.5px; line-height: 1.7; margin: 0 0 14px; }
.seo-content a { color: var(--primary); font-weight: 700; }
.seo-content strong { color: var(--text); }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 36px auto; }
.faq .section-title { margin-bottom: 16px; }
.faq-list { display: grid; gap: 12px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 4px 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, border-color .18s;
}
.faq-item:hover { border-color: rgba(var(--glow),.35); }
.faq-item summary { cursor: pointer; padding: 14px 0; font-weight: 800; font-size: 15px; color: var(--text); list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; color: var(--primary); font-size: 22px; line-height: 1; transition: transform .2s; }
.faq-item[open] summary::after { content: "+"; transform: rotate(45deg); }
.faq-item p { margin: 0 0 16px; color: var(--text-soft); font-size: 14px; line-height: 1.65; }

/* ---------- 符号大全页 ---------- */
.sym-cat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 18px; margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}
.sym-cat:hover { border-color: rgba(var(--glow),.35); }
.sym-cat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--grad);
}
.sym-cat h2 { margin: 0 0 14px; font-size: 17px; font-weight: 800; padding-left: 12px; }
.sym-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sym-item {
  font-size: 22px; line-height: 1; cursor: pointer; color: var(--text);
  border: 1px solid var(--border); background: var(--surface-2); border-radius: 12px;
  padding: 10px 14px; min-width: 44px; text-align: center;
  transition: background .15s, transform .1s, border-color .15s, box-shadow .15s;
}
.sym-item:hover { background: var(--primary-soft); border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.sym-item:active { transform: scale(.92); }
.sym-item.copied { background: var(--ok); color: #fff; border-color: var(--ok); }
.sym-empty { text-align: center; color: var(--text-soft); padding: 30px; font-size: 15px; }

/* ---------- 页脚 ---------- */
footer {
  border-top: 1px solid var(--border); background: var(--surface);
  padding: 26px 20px; text-align: center; color: var(--text-soft); font-size: 13px;
  backdrop-filter: blur(8px);
}
footer a { color: var(--text-soft); margin: 0 6px; font-weight: 700; }
footer a:hover { color: var(--primary); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px);
  background: var(--text); color: #fff; padding: 12px 22px; border-radius: 12px;
  font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  z-index: 100; font-weight: 700; box-shadow: var(--shadow-pop);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 弹窗（app.js confirmDialog：.modal-mask > .modal-card） ---------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20,16,40,.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px; animation: modalFade .18s ease;
}
.modal-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; max-width: 420px; width: 100%; box-shadow: var(--shadow-pop);
  animation: modalPop .2s ease;
}
.modal-title { margin: 0 0 10px; font-size: 18px; font-weight: 800; color: var(--text); }
.modal-body { margin: 0 0 18px; color: var(--text-soft); font-size: 14px; line-height: 1.6; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- 法律页面 ---------- */
.legal {
  max-width: 840px; margin: 0 auto; padding: 32px 20px 56px;
}
.legal h1 { font-size: 28px; margin: 0 0 8px; font-weight: 800; }
.legal h2 { font-size: 19px; margin: 26px 0 12px; font-weight: 800; }
.legal p, .legal li { color: var(--text-soft); font-size: 14.5px; line-height: 1.7; }
.legal ul { padding-left: 22px; }
.legal a { color: var(--primary); font-weight: 700; }
.legal .about-block {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 20px; margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.legal .about-block h3 { margin: 0 0 10px; font-size: 17px; position: relative; padding-left: 14px; font-weight: 800; }
.legal .about-block h3::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px;
  border-radius: 2px; background: var(--grad);
}
.legal .about-block p { margin: 0; }
.email-copy {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800; color: var(--primary); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px; transition: background .15s;
}
.email-copy:hover { background: var(--primary-soft); }
.page-404 { text-align: center; padding: 70px 20px; }
.page-404 h1 { font-size: 36px; margin: 16px 0 10px; font-weight: 800; }
.page-404 p { color: var(--text-soft); margin: 0 0 22px; }
.about-site-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 800; color: var(--primary); text-decoration: none;
  border: 1px solid var(--border); background: var(--surface-2);
  padding: 10px 16px; border-radius: 12px; transition: background .15s, transform .15s;
}
.about-site-link:hover { background: var(--surface); transform: translateY(-1px); text-decoration: none; }
.about-grid { display: grid; gap: 22px; }

/* ---------- 无障碍 ---------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--primary); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0; font-weight: 800; }
.skip-link:focus { left: 0; text-decoration: none; }

/* ---------- 首页分区 / 设置区补充 ---------- */
.main { display: block; }
.home-section { margin: 32px 0; }
.hint { font-size: 13px; color: var(--text-soft); margin: 0 0 10px; }
.samples-hint { display: inline; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; margin-bottom: 6px; font-weight: 600; }
.check-row input { width: 16px; height: 16px; accent-color: var(--primary); }
.kbd-hint { font-size: 12px; color: var(--text-soft); margin: 10px 0 0; }
.style-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  border-radius: 999px; padding: 7px 15px; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.chip:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.chip.active { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 3px 10px rgba(var(--glow),.3); }
.hero .sub, .sub { font-size: 16px; opacity: .94; }

/* ---------- 双语法律块 / 页脚链接 ---------- */
.legal-zh, .legal-en { margin-top: 4px; }
.legal-en { opacity: .96; }

/* =========================================================================
 * R103 —— 双语法律块按当前语言只显示其一（about/privacy/terms 三页共用）
 * 旧「html[lang] 切换」规则在样式整表重写时丢失，导致中英两块同时渲染。
 * ========================================================================= */
.legal-en { display: none; }
html[lang="en"] .legal-zh { display: none; }
html[lang="en"] .legal-en { display: block; }
.foot-links { margin: 8px 0 0; }
.foot-links a { color: var(--text-soft); font-weight: 700; margin: 0 4px; }
.foot-links a:hover { color: var(--primary); }

/* ---------- 无障碍 ---------- */

/* ---------- 响应式 ---------- */
@media (max-width: 1020px) {
  .layout { grid-template-columns: 1fr; }
  .hero-mascot { display: none; }
  .hero-decoration { display: none; }
}
@media (max-width: 760px) {
  .header-inner { flex-wrap: wrap; gap: 8px; }
  .header-right { width: 100%; justify-content: space-between; }
  .top-nav { order: 2; width: 100%; justify-content: center; flex-wrap: wrap; }
  .lang-switch-wrap { order: 1; }
  .hero { border-radius: 0; margin-bottom: 18px; padding: 36px 18px 30px; }
  .hero h1 { font-size: 28px; }
  .features { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .layout { gap: 16px; }
  .results-area { padding: 16px; }
  .nick-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .nick-text { font-size: 15px; }
  .panel { border-radius: var(--radius-sm); padding: 16px; }
  .btn { width: 100%; }
  .actions { flex-direction: column; }
  .fav-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .fav-actions { width: 100%; }
  .fav-actions .btn { flex: 1; width: auto; }
  .samples-head .btn { margin-left: 0; width: 100%; }
  .type-grid { grid-template-columns: 1fr; }
  .seo-content { padding: 22px; margin: 26px auto; }
  .faq { margin: 26px auto; }
  footer { font-size: 12px; }
  }
@media (max-width: 520px) {
  .brand span { display: none; }
  .top-nav a { padding: 6px 10px; font-size: 13px; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-cta { width: 100%; justify-content: center; }
}

/* ---------- 工具栏响应式 ---------- */
@media (min-width: 881px) {
  .results-toolbar {
    position: sticky; top: 74px; z-index: 4;
    background: var(--surface);
    padding: 14px 0;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    backdrop-filter: blur(12px);
  }
  .results-toolbar .panel-title { font-size: 18px; white-space: nowrap; flex: none; margin: 0; }
}
@media (max-width: 1120px) and (min-width: 881px) {
  .results-toolbar { gap: 12px; }
  .toolbar-right { gap: 6px; }
  .toolbar-right .btn.small { padding: 7px 10px; font-size: 13px; }
}
@media (max-width: 960px) and (min-width: 881px) {
  .toolbar-right { gap: 4px; }
  .toolbar-right .btn.small { padding: 7px 10px; font-size: 12px; }
  .toolbar-right .btn.small.ghost { padding: 7px; font-size: 0; }
  .toolbar-right .btn.small.ghost::before { margin: 0; }
}
@media (max-width: 880px) {
  .results-toolbar { flex-wrap: wrap; gap: 10px; }
  .toolbar-right {
    width: 100%; justify-content: space-between;
    gap: 4px; overflow-x: auto;
  }
  .toolbar-right .btn.small.ghost { padding: 7px; font-size: 0; }
  .toolbar-right .btn.small.ghost::before { margin: 0; }
  .toolbar-right .btn.small { padding: 7px 10px; font-size: 12px; }
}

/* ---------- 打印 ---------- */
@media print {
  .site-header, .top-nav, .lang-switch-wrap, .hero, .panel, .results-toolbar, .fav-section, .fav-block, .features, .type-grid, .sample-grid, .samples-head, footer, .toast, .modal-mask, .hero-mascot, .hero-decoration { display: none !important; }
  .main-grid, .layout { display: block; }
  .results-area { box-shadow: none; border: none; padding: 0; }
  .nick-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .nick-card { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }
  .btn-copy, .btn-fav { display: none; }
}

/* ---------- 主 CTA 星标 ---------- */
#genBtn, .hero-cta { display: inline-flex; align-items: center; }
#genBtn::before, .hero-cta::before {
  content: ""; display: inline-block; width: 18px; height: 18px;
  margin-right: 7px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.8 5.9 21.4l1.4-6.8L2.2 9.9l6.9-.8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =========================================================================
 * R74 回归修复块：Aurora Glass 重写时丢失的功能样式 + 本次审计补齐
 * （确认弹窗已改用 .modal-mask 体系，见上方「弹窗」节）
 * ========================================================================= */

/* ---------- 空态 / 长度角标 / 复制高亮（JS 动态类） ---------- */
.empty { text-align: center; color: var(--text-soft); padding: 28px 10px; font-size: 14px; }
.len-badge {
  flex: none; align-self: center; font-size: 11px; font-weight: 800; line-height: 1.7;
  color: var(--text-soft); background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 9px;
}
.len-badge.over { color: #8a1c37; background: #ffe3ea; border-color: #f5a3b6; }
.nick-text { cursor: pointer; border-radius: 8px; transition: background .15s, color .15s, box-shadow .15s; }
.nick-text:hover { background: var(--primary-soft); }
.nick-text:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.nick-text.just-copied { color: #0e6b46; background: rgba(25,195,125,.16); }
.nick-card.just-copied { border-color: #14a06b; box-shadow: 0 0 0 3px rgba(20,160,107,.22); }
.btn-copy.just-copied, .btn-fav.just-copied { color: #0e6b46; background: rgba(25,195,125,.16); border-color: #14a06b; }

/* ---------- toast：固定深墨底保证明暗双主题对比；err 独立深红 ---------- */
.toast { background: #2a2350; }
.toast.err { background: #8a1c37; }

/* ---------- 暗色模式：头栏硬编码白底修正 ---------- */
@media (prefers-color-scheme: dark) {
  .site-header { background: rgba(28,24,48,.85); }
  .len-badge.over { color: #ffb1c4; background: rgba(255,84,112,.18); border-color: rgba(255,84,112,.5); }
  .nick-text.just-copied { color: #6fe3ac; background: rgba(25,195,125,.18); }
  .btn-copy.just-copied, .btn-fav.just-copied { color: #6fe3ac; background: rgba(25,195,125,.18); border-color: #14a06b; }
}

/* ---------- 动效偏好：系统级 reduced-motion 全局降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================================
 * R75 —— Candy-Toon 卡通炫酷换肤层
 * 贴纸感：粗墨描边 + 硬偏移投影 + 糖果波点纸底 + 歪斜贴纸卡 + 按压回弹
 * 本层只追加/覆盖视觉属性，不改任何结构选择器与功能样式。
 * ========================================================================= */
:root {
  --ink: #2b2052;
  --ink-b: rgba(43,32,82,.82);
  --hard: 6px 7px 0 rgba(43,32,82,.13);
  --hard-sm: 3px 4px 0 rgba(43,32,82,.13);
  --hard-btn: 4px 5px 0 rgba(43,32,82,.22);
  --bg: #fbf5ff;
  --radius: 26px;
  --radius-sm: 18px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17132a;
    --ink-b: rgba(186,170,255,.55);
    --hard: 6px 7px 0 rgba(0,0,0,.5);
    --hard-sm: 3px 4px 0 rgba(0,0,0,.5);
    --hard-btn: 4px 5px 0 rgba(0,0,0,.55);
  }
}

/* ---------- 波点纸底 + 糖果光晕氛围 ---------- */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle, rgba(116,80,242,.11) 1.6px, transparent 1.7px),
    radial-gradient(circle at 88% -4%, rgba(255,95,162,.16), transparent 42%),
    radial-gradient(circle at -6% 12%, rgba(34,211,238,.16), transparent 38%);
  background-size: 26px 26px, auto, auto;
}
@media (prefers-color-scheme: dark) {
  body {
    background-image:
      radial-gradient(circle, rgba(157,131,255,.10) 1.6px, transparent 1.7px),
      radial-gradient(circle at 88% -4%, rgba(255,95,162,.10), transparent 42%),
      radial-gradient(circle at -6% 12%, rgba(34,211,238,.10), transparent 38%);
    background-size: 26px 26px, auto, auto;
  }
}

/* ---------- 顶栏：贴纸粗底线 ---------- */
.site-header { border-bottom: 3px solid var(--ink-b); }
.top-nav a { border: 2px solid transparent; transition: background .15s, color .15s, border-color .15s, transform .1s; }
.top-nav a:hover { transform: translateY(-1px); }
.top-nav a.active {
  background: var(--grad); color: #fff; border-color: var(--ink-b);
  box-shadow: var(--hard-sm); border-radius: 999px;
}
.top-nav a.active::after { content: none; display: none; }
.lang-switch { border: 2px solid var(--ink-b); box-shadow: 2px 3px 0 rgba(43,32,82,.14); }
.lang-switch.active { box-shadow: 2px 3px 0 rgba(43,32,82,.25); }

/* ---------- Hero：漫画网点 + 描边标题 + 漂浮吉祥物 ---------- */
.hero { border-bottom: 4px solid var(--ink-b); padding: 54px 20px 44px; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 14px, transparent 14px 30px);
}
.hero h1 { font-weight: 900; letter-spacing: .5px; text-shadow: 0 2px 0 rgba(43,32,82,.35), 0 5px 16px rgba(0,0,0,.18); }
.hero p { text-shadow: 0 1px 0 rgba(43,32,82,.22); }
.hero-mascot { animation: mascotFloat 4.5s ease-in-out infinite; }
@keyframes mascotFloat {
  0%, 100% { transform: translateY(-52%); }
  50% { transform: translateY(-44%) rotate(2deg); }
}
.hero-cta {
  border: 2.5px solid var(--ink); color: var(--primary);
  box-shadow: 5px 6px 0 rgba(43,32,82,.3);
}
.hero-cta:hover { transform: translate(-1px,-2px); box-shadow: 7px 9px 0 rgba(43,32,82,.3); }
.hero-cta:active { transform: translate(3px,4px); box-shadow: 1px 1px 0 rgba(43,32,82,.3); }
.hero-cta.secondary { border-color: #fff; box-shadow: 4px 5px 0 rgba(43,32,82,.25); }

/* ---------- 面板 / 卡片：全部贴纸化 ---------- */
.panel, .results-area, .seo-content, .sym-cat, .faq-item, .modal-card,
.legal .about-block, .about-site-link, .email-copy {
  border: 2.5px solid var(--ink-b);
  box-shadow: var(--hard);
  background: var(--surface);
}
.feature-card, .type-item {
  border: 2.5px solid var(--ink-b);
  box-shadow: var(--hard);
  position: relative;
}
.feature-card:nth-child(2n) { rotate: .5deg; }
.feature-card:nth-child(2n+1) { rotate: -.5deg; }
.feature-card::before {
  content: ""; position: absolute; left: -2.5px; right: -2.5px; top: -2.5px; height: 7px;
  background: var(--grad); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.feature-card:nth-child(2n)::before { background: var(--grad-warm); }
.type-item::before { width: 9px; }
.type-item .type-icon, .feature-ico { border: 2px solid var(--ink-b); box-shadow: 2px 3px 0 rgba(43,32,82,.15); }
.type-item:nth-child(4n+1) { rotate: -.4deg; }
.type-item:nth-child(4n+4) { rotate: .4deg; }

/* ---------- 表单 / 按钮：按压缩进 ---------- */
.field input[type="text"], .field select {
  border: 2px solid var(--ink-b); border-radius: 14px; background: var(--surface);
}
.field input:focus, .field select:focus { box-shadow: 3px 4px 0 rgba(43,32,82,.15); border-color: var(--primary); }
.btn { border: 2.5px solid var(--ink-b); box-shadow: var(--hard-btn); transition: transform .09s, box-shadow .12s, background .18s, filter .18s; }
.btn:hover { transform: translate(-1px,-2px); box-shadow: 6px 8px 0 rgba(43,32,82,.22); }
.btn:active { transform: translate(2px,3px); box-shadow: 0 0 0 rgba(43,32,82,.22); }
.btn.ghost, .btn.small, .btn.small.ghost, .btn.small.secondary { border-color: var(--ink-b); }
.btn.small { box-shadow: var(--hard-sm); }
.btn.small:hover { box-shadow: 4px 5px 0 rgba(43,32,82,.18); }
.btn.small.ghost { background: var(--surface); color: var(--text-soft); }
.btn.small.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-copy, .btn-fav { border: 2px solid var(--ink-b); box-shadow: 2px 3px 0 rgba(43,32,82,.12); background: var(--surface); }
.btn-copy:hover, .btn-fav:hover { transform: translateY(-1px); }
.chip { border: 2px solid var(--ink-b); box-shadow: 2px 3px 0 rgba(43,32,82,.1); font-weight: 800; }
.chip.active { box-shadow: 2px 3px 0 rgba(43,32,82,.25); border-color: var(--ink-b); }

/* ---------- 结果卡：贴纸 + 歪斜 + 弹入 ---------- */
.nick-card {
  border: 2.5px solid var(--ink-b);
  box-shadow: var(--hard-sm);
  background: var(--surface);
  animation: cardPop .4s cubic-bezier(.18,.89,.32,1.25) backwards;
}
.nick-card:hover { transform: translateY(-3px) rotate(-.35deg); box-shadow: 5px 7px 0 rgba(43,32,82,.18); }
.nick-grid .nick-card:nth-child(6n+2) { rotate: .45deg; }
.nick-grid .nick-card:nth-child(6n+4) { rotate: -.5deg; }
.nick-grid .nick-card:nth-child(6n+6) { rotate: .3deg; }
.nick-card:nth-child(1)  { animation-delay: 0ms; }
.nick-card:nth-child(2)  { animation-delay: 28ms; }
.nick-card:nth-child(3)  { animation-delay: 56ms; }
.nick-card:nth-child(4)  { animation-delay: 84ms; }
.nick-card:nth-child(5)  { animation-delay: 112ms; }
.nick-card:nth-child(6)  { animation-delay: 140ms; }
.nick-card:nth-child(7)  { animation-delay: 168ms; }
.nick-card:nth-child(8)  { animation-delay: 196ms; }
.nick-card:nth-child(9)  { animation-delay: 224ms; }
.nick-card:nth-child(10) { animation-delay: 252ms; }
.nick-card:nth-child(11) { animation-delay: 280ms; }
.nick-card:nth-child(12) { animation-delay: 308ms; }
@keyframes cardPop { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.nick-text { font-weight: 800; font-size: 16.5px; letter-spacing: .3px; }

/* ---------- 首页示例芯片：糖果贴纸 ---------- */
.sample-chip {
  border: 2.5px solid var(--ink-b);
  box-shadow: var(--hard-sm);
  font-weight: 800;
}
.sample-chip:nth-child(odd) { rotate: -.7deg; }
.sample-chip:nth-child(even) { rotate: .7deg; }
.sample-chip:hover { transform: translateY(-2px) scale(1.03); box-shadow: 4px 6px 0 rgba(43,32,82,.2); }
.sample-chip:active { transform: translate(1px,2px) scale(.98); box-shadow: 1px 1px 0 rgba(43,32,82,.2); }

/* ---------- 符号页 ---------- */
.sym-item { border: 2px solid var(--ink-b); box-shadow: 3px 4px 0 rgba(43,32,82,.13); background: var(--surface); }
.sym-item:hover { transform: translate(-1px,-3px) rotate(-2deg); box-shadow: 4px 7px 0 rgba(43,32,82,.18); }
.sym-item.copied { border-color: var(--ink); }
.sym-chip { border: 2px solid var(--ink-b); }
.sym-chip:hover { transform: translateY(-2px) rotate(-2deg); }

/* ---------- FAQ：加号做成糖果按钮 ---------- */
.faq-item summary::after {
  content: "+"; float: right; width: 28px; height: 28px; margin-top: 2px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--grad); color: #fff; border: 2px solid var(--ink-b);
  box-shadow: 2px 3px 0 rgba(43,32,82,.2); font-weight: 900; font-size: 18px; line-height: 1;
  transition: transform .2s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item:hover { transform: translateY(-2px); }

/* ---------- 步骤数字 / 面板标题点缀 ---------- */
.seo-content::before, .sym-cat::before { background: var(--grad); }
.seo-content::before { height: 8px; }
.seo-content li::before { border: 2px solid var(--ink-b); box-shadow: 2px 3px 0 rgba(43,32,82,.18); font-weight: 900; }
.panel-title { font-weight: 900; letter-spacing: .3px; }
.panel-title::before { width: 8px; height: 22px; border: 2px solid var(--ink-b); border-radius: 4px; box-shadow: 2px 2px 0 rgba(43,32,82,.18); }
.section-title { font-size: 24px; font-weight: 900; letter-spacing: .4px; }

/* ---------- Toast / 弹窗 / 角标贴纸化（保留 R74 对比度结论） ---------- */
.toast { border: 2.5px solid rgba(255,255,255,.85); border-radius: 16px; box-shadow: 5px 6px 0 rgba(0,0,0,.28); }
.toast.err { border-color: #ffd7e1; }
.modal-card { border: 3px solid var(--ink-b); box-shadow: 9px 11px 0 rgba(43,32,82,.25); }
@media (prefers-color-scheme: dark) { .modal-card { box-shadow: 9px 11px 0 rgba(0,0,0,.55); } }
.len-badge { border: 2px solid var(--ink-b); background: var(--surface); }
.empty { font-weight: 700; }

/* ---------- 页脚 ---------- */
footer { border-top: 3px solid var(--ink-b); }

/* ---------- 移动端收紧硬阴影 ---------- */
@media (max-width: 760px) {
  :root { --hard: 4px 5px 0 rgba(43,32,82,.13); --hard-sm: 2px 3px 0 rgba(43,32,82,.13); --hard-btn: 3px 4px 0 rgba(43,32,82,.2); }
  .hero { padding: 40px 18px 34px; }
}

/* ---------- 打印：去掉贴纸投影避免脏页 ---------- */
@media print {
  .nick-card, .panel, .results-area { box-shadow: none !important; border: 1.5px solid #999 !important; rotate: none !important; }
  body { background-image: none !important; }
}

/* ---------- R75 视觉自查修正 ---------- */
/* hero 渐变底上的链接：白字加粗 + 悬停胶囊（全站禁下划线） */
.hero p a, .hero .sub a { color: #fff; font-weight: 800; border-radius: 8px; padding: 1px 6px; text-shadow: 0 1px 0 rgba(43,32,82,.3); transition: background .15s; }
.hero p a:hover, .hero .sub a:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,.24); }
/* 符号页返回链接：文案自带「←」，去掉伪元素重复箭头 */
/* 结果卡按钮防竖排：不换行 + 收窄，徽章行允许换行 */
.btn-copy, .btn-fav { white-space: nowrap; font-size: 12.5px; padding: 8px 5px; min-width: 0; }
.nick-actions { gap: 6px; flex-wrap: wrap; }
.len-badge { padding: 1px 7px; font-size: 10.5px; }

/* =========================================================================
 * R76 —— 描边精修层：用户反馈边框太粗，全线减重
 * 卡片/按钮 2.5~3px → 1.5px；通栏底线 3~4px → 2px；墨线调柔；投影保留
 * ========================================================================= */
:root { --ink-b: rgba(43,32,82,.5); }
@media (prefers-color-scheme: dark) {
  :root { --ink-b: rgba(186,170,255,.4); }
}
.site-header { border-bottom: 2px solid var(--ink-b); }
footer { border-top: 2px solid var(--ink-b); }
.hero { border-bottom: 2px solid var(--ink-b); }
.panel, .results-area, .seo-content, .sym-cat, .faq-item,
.legal .about-block, .about-site-link, .email-copy,
.feature-card, .type-item, .nick-card, .sample-chip, .modal-card {
  border-width: 1.5px;
}
.feature-card::before { left: -1.5px; right: -1.5px; top: -1.5px; height: 5px; }
.type-item::before { width: 6px; }
.seo-content::before { height: 5px; }
.sym-cat::before { width: 4px; }
.lang-switch { border-width: 1.5px; }
.top-nav a { border-width: 1.5px; }
.top-nav a.active { border-width: 1.5px; }
.btn { border-width: 1.5px; }
.btn.ghost, .btn.small, .btn.small.ghost, .btn.small.secondary { border-width: 1.5px; }
.btn-copy, .btn-fav { border-width: 1.5px; }
.chip { border-width: 1.5px; }
.chip.active { border-width: 1.5px; }
.sym-item, .sym-chip { border-width: 1.5px; }
.field input[type="text"], .field select { border-width: 1.5px; }
.len-badge { border-width: 1.5px; }
.toast { border-width: 1.5px; }
.modal-card { border-width: 2px; }
.type-item .type-icon, .feature-ico { border-width: 1.5px; }
.seo-content li::before { border-width: 1.5px; }
.faq-item summary::after { border-width: 1.5px; }
.panel-title::before { border-width: 1.5px; }
.sym-item.copied { border-color: var(--ink-b); }
.hero-cta { border-width: 1.5px; }
.hero-cta.secondary { border-color: rgba(255,255,255,.6); border-width: 1.5px; }

/* =========================================================================
 * R78 —— Hero 内容整体居中（用户红框点名：标题/副标题/按钮居中显示）
 * ========================================================================= */
.hero { text-align: center; }
.hero .wrap { max-width: 860px; }
.hero h1 { margin-left: auto; margin-right: auto; }
.hero p { margin-left: auto; margin-right: auto; }
.hero-actions { display: flex; justify-content: center; }

/* R79：白底 CTA 上的白星隐形留下空白 → 首页主按钮星标改品牌紫（#genBtn 渐变底仍用白星） */
.hero-cta::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237450f2'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.8 5.9 21.4l1.4-6.8L2.2 9.9l6.9-.8z'/%3E%3C/svg%3E");
}

/* =========================================================================
 * R81 —— 修复 Hero 光晕遮罩吞点击（诊断证实：CTA 中心 elementFromPoint 命中的
 * 是 .hero::before 覆盖层，pointer-events:auto + 内容层 static → 三页 Hero
 * 所有链接自 Aurora 重写起全部失效）；并按用户要求删除按钮星标图标。
 * ========================================================================= */
.hero::before, .hero::after { pointer-events: none; }
.hero .wrap, .hero > h1, .hero > p, .hero > .hero-actions { position: relative; z-index: 2; }
#genBtn::before, .hero-cta::before { content: none; display: none; }

/* =========================================================================
 * R82 —— 示例区：一行 6 个整行对齐；长名单行省略号（title 悬停看全名）
 * ========================================================================= */
.sample-grid { grid-template-columns: repeat(6, 1fr); }
.sample-chip {
  display: block; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 900px) { .sample-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .sample-grid { grid-template-columns: repeat(2, 1fr); } }

/* =========================================================================
 * R86 —— 用户点名四项：换一批恢复刷新图标 / 模式提示间距 / 结果卡一行两个 /
 * 类型卡新 SVG 图标尺寸；并同步打印列数契约
 * ========================================================================= */
#regenToolbarBtn::before { content: ""; display: inline-block; background-image: var(--icon-refresh); }
#modeHint { margin-top: 8px; margin-bottom: 0; }
.nick-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .nick-grid { grid-template-columns: 1fr; } }
@media print { .nick-grid { grid-template-columns: repeat(3, 1fr); } }
.type-item .type-icon img { width: 20px; height: 20px; display: block; }

/* =========================================================================
 * R87 —— 设置面板「数量/符号/按钮」区精修（用户红框点名美化）
 * ========================================================================= */
/* 下拉框统一加糖果箭头（appearance:none 已在基础规则） */
.field select {
  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='%237450f2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;
  font-weight: 700;
}
.field select:hover { border-color: var(--primary); }
/* 符号样式选择器：品牌紫描边胶囊，禁用时明确变暗 */
#symbolSel { border-color: var(--primary); color: var(--primary); font-weight: 800; border-radius: 999px; padding-left: 16px; }
#symbolSel:disabled { opacity: .45; color: var(--text-soft); border-color: var(--ink-b); }
/* 「添加特殊符号」勾选行做成小卡片 */
.check-row {
  background: var(--surface-2); border: 1.5px solid var(--ink-b); border-radius: 12px;
  padding: 8px 12px; box-shadow: var(--hard-sm); margin-bottom: 8px;
}
.check-row:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
/* 主按钮加大、字距拉开；换一批同高 */
.actions { margin-top: 16px; }
#genBtn { padding: 14px 18px; font-size: 16px; letter-spacing: 2px; border-radius: var(--radius-sm); }
#regenBtn { padding: 14px 18px; font-size: 15px; border-radius: var(--radius-sm); }
/* 快捷键提示做成虚线键帽条 */
.kbd-hint {
  display: inline-block; background: var(--surface-2); border: 1.5px dashed var(--ink-b);
  border-radius: 10px; padding: 4px 12px; font-size: 12px; color: var(--text-soft);
}

/* =========================================================================
 * R89 —— 收藏区迁入结果卡内（页底收藏区取消）
 * ========================================================================= */
.fav-block { margin-top: 28px; padding-top: 20px; border-top: 2px dashed var(--ink-b); }
.fav-block .fav-head { margin-bottom: 12px; }

/* =========================================================================
 * R90 —— 结果卡美化：名字居中加大、操作行居中（收藏卡同步）
 * ========================================================================= */
.nick-text { text-align: center; font-size: 17px; padding: 2px 4px; }
.nick-actions { justify-content: center; }
.nick-card { gap: 10px; }

/* =========================================================================
 * R80 —— 用户点名：删卡片装饰条 / 卡片全部摆正 / 支持的类型 4×2 对齐
 * ========================================================================= */
/* 1) 装饰条全删：功能卡顶条、类型卡左条、SEO 卡顶条、符号分类左条、面板标题小竖条 */
.feature-card::before, .type-item::before, .seo-content::before, .sym-cat::before,
.panel-title::before { content: none; display: none; }
/* 2) 卡片摆正：取消全部静态歪斜与悬停微旋 */
.feature-card:nth-child(2n), .feature-card:nth-child(2n+1),
.type-item:nth-child(4n+1), .type-item:nth-child(4n+4),
.nick-grid .nick-card:nth-child(6n+2), .nick-grid .nick-card:nth-child(6n+4), .nick-grid .nick-card:nth-child(6n+6),
.sample-chip:nth-child(odd), .sample-chip:nth-child(even) { rotate: none; }
.nick-card:hover { transform: translateY(-3px); }
.sym-item:hover { transform: translate(-1px, -3px); }
/* 3) 支持的类型：固定 4 列（8 项 = 2 整行），中屏 2 列、小屏 1 列均整除对齐 */
.type-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) and (min-width: 761px) { .type-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .type-grid { grid-template-columns: 1fr; } }

/* =========================================================================
 * R91 —— 白字彩底 WCAG AA 统一块（旧审计遗留：白/--accent 2.83、白/--err 3.11、
 * 白/--ok 2.30 不达标）。品牌糖果变量不动，仅压暗「白字规则」的底色到审定深版：
 * accent→#cc3379(4.86) err→#d6304f(4.78) ok→#12805a(4.93)。渐变底白字为品牌
 * 核心视觉（R45 已单独处理 hero 场景），不在本块范围。
 * ========================================================================= */
.btn-fav:hover, .btn-fav.active { background: #cc3379; border-color: #cc3379; color: #fff; }
.btn.small.danger { background: #d6304f; border-color: #d6304f; color: #fff; }
.sym-item.copied { background: #12805a; border-color: #12805a; color: #fff; }

/* =========================================================================
 * R93 —— 结果工具栏取消吸顶跟随（用户点名：固定原位，不随滚动移动）
 * ========================================================================= */
@media (min-width: 881px) {
  .results-toolbar {
    position: static; top: auto; z-index: auto;
    background: transparent; padding: 0; margin-bottom: 16px;
    border-bottom: none; border-radius: 0; backdrop-filter: none;
  }
}

/* =========================================================================
 * R94 —— 「添加符号」勾选与符号下拉同行（用户点名）
 * ========================================================================= */
.symbol-row { display: flex; align-items: center; gap: 10px; }
.symbol-row .check-row { margin-bottom: 0; flex: none; }
.symbol-row #symbolSel { flex: 1 1 auto; min-width: 0; margin-top: 0; }

/* =========================================================================
 * R95/R96 —— 工具栏按钮统一 secondary 样式；收藏改为「生成结果/我的收藏」页签切换
 * ========================================================================= */
/* R96 页签 */
.res-tabs { display: flex; gap: 4px; background: var(--surface-2); border: 1.5px solid var(--ink-b); border-radius: 999px; padding: 4px; flex: none; }
.res-tab { border: none; background: transparent; padding: 7px 16px; border-radius: 999px; font-size: 14px; font-weight: 800; color: var(--text-soft); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .15s, color .15s, box-shadow .15s; }
.res-tab:hover { color: var(--primary); }
.res-tab.active { background: var(--grad); color: #fff; box-shadow: 2px 3px 0 rgba(43,32,82,.2); }
.res-tab .fav-count { font-size: 12px; font-weight: 800; opacity: .95; }
.results-area .fav-block { display: none; }
.results-area.view-fav .fav-block { display: block; border-top: none; margin-top: 6px; padding-top: 0; }
.results-area.view-fav #results, .results-area.view-fav .result-count, .results-area.view-fav .toolbar-right { display: none; }
.fav-block .fav-head { flex-wrap: wrap; }
.fav-block .fav-head .hint { margin: 0; flex: 1 1 240px; }
/* 窄屏：工具栏按钮全部图标化防溢出（每个都有 ::before 图标） */
@media (max-width: 1020px) and (min-width: 881px) {
  .toolbar-right .btn.small { font-size: 0; padding: 7px 10px; gap: 0; }
  .toolbar-right .btn.small::before { margin: 0; }
}
@media (max-width: 880px) {
  .toolbar-right .btn.small { font-size: 0; padding: 7px; gap: 0; }
  .toolbar-right .btn.small::before { margin: 0; }
}

/* =========================================================================
 * R97 —— 收藏计数从页签移入下方提示行（用户点名页签不显数字）
 * ========================================================================= */
.fav-block .fav-count { color: var(--primary); font-weight: 800; }

/* =========================================================================
 * R98 —— 全站边框淡化（用户点名对齐参考站淡雅风）：1.5px→1px、墨线调淡
 * ========================================================================= */
:root { --ink-b: rgba(43,32,82,.28); }
@media (prefers-color-scheme: dark) {
  :root { --ink-b: rgba(186,170,255,.26); }
}
.panel, .results-area, .seo-content, .sym-cat, .faq-item, .modal-card,
.legal .about-block, .about-site-link, .email-copy, .feature-card, .type-item,
.nick-card, .sample-chip, .lang-switch, .top-nav a, .top-nav a.active,
.btn, .btn.ghost, .btn.small, .btn.small.ghost, .btn.small.secondary,
.btn-copy, .btn-fav, .chip, .chip.active, .sym-item, .sym-chip,
.field input[type="text"], .field select, .len-badge, .toast,
.hero-cta, .hero-cta.secondary, .type-item .type-icon, .feature-ico,
.seo-content li::before, .faq-item summary::after,
.check-row, .res-tabs, .kbd-hint { border-width: 1px; }

/* =========================================================================
 * R99 —— 品牌字标美化：365Lab 渐变加粗 + 「网名生成器」淡紫胶囊徽标
 * ========================================================================= */
.brand-name { font-size: 19px; font-weight: 900; letter-spacing: .3px; }
.brand .brand-badge {
  background: var(--primary-soft); color: var(--primary);
  -webkit-background-clip: border-box; background-clip: border-box;
  border: 1px solid rgba(116,80,242,.35); border-radius: 999px;
  padding: 2px 10px; font-size: 12px; font-weight: 800; letter-spacing: 1px;
  margin-left: 2px; white-space: nowrap; transition: background .15s;
}
.brand:hover .brand-badge { background: rgba(116,80,242,.2); }
@media (max-width: 520px) { .brand .brand-badge { display: none; } }

/* =========================================================================
 * R100 —— 品牌区再精修：悬停禁下划线（对齐全站规则）+ 徽标渐变淡染
 * ========================================================================= */
.brand, .brand:hover, .brand:focus, .brand:focus-visible,
.brand .brand-name, .brand .brand-badge { text-decoration: none; }
.brand .brand-badge {
  background: linear-gradient(135deg, rgba(116,80,242,.13), rgba(34,211,238,.16));
  border-color: rgba(116,80,242,.28);
}
.brand:hover .brand-badge { background: linear-gradient(135deg, rgba(116,80,242,.22), rgba(34,211,238,.26)); }
.brand-logo { transition: transform .15s; }
.brand:hover .brand-logo { transform: translateY(-1px) rotate(-4deg); }

/* =========================================================================
 * R102 —— 首页示例区新增「自定义生成」跳转按钮（换一批示例右侧）
 * ========================================================================= */
a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.samples-head .btn + .btn { margin-left: 0; }
@media (max-width: 760px) { .samples-head a.btn { justify-content: center; } }

/* =========================================================================
 * R105b —— 生成器操作区：生成网名 / 换一批 两钮等大，文字居中
 * ========================================================================= */
.actions > .btn {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; white-space: nowrap;
}

/* =========================================================================
 * R107 —— 生成器左栏面板随右列等高，底部对齐（≤1020px 单列时不受影响）
 * ========================================================================= */
.layout { align-items: stretch; }

/* =========================================================================
 * R112 —— 1021px+ 双列中间宽度：工具栏允许换行，杜绝横向溢出
 * ========================================================================= */
@media (min-width: 1021px) {
  .results-toolbar { flex-wrap: wrap; row-gap: 10px; }
  .toolbar-right { flex-wrap: wrap; justify-content: flex-end; }
}

/* =========================================================================
 * R112 —— 站点指纹（不可见、无布局影响）：整站样式/页面被克隆时随附来源标识
 * ========================================================================= */
.src-mark {
  position: fixed; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
:root { --site-origin: "365Lab name.365lab.top"; }

/* =========================================================================
 * R114 —— 左栏「常用特殊符号」向下伸展填满面板空白（基长 150px，超高内滚）
 * ========================================================================= */
.layout > .panel { display: flex; flex-direction: column; }
.layout > .panel > .sym-panel { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.layout > .panel .sym-grid { flex: 1 1 150px; max-height: none; min-height: 0; overflow-y: auto; }