/* ============================================================
   数智星屿·共研 —— 品牌样式
   主题：赤焰书斋（深红基调 + 暖金点缀），庄重热忱
   ============================================================ */
:root {
  --gy-ink: #3b1c1c;        /* 主文字（深褐红） */
  --gy-deep: #300a0a;       /* 深红底色（Hero/页脚） */
  --gy-deep-2: #4a1010;     /* 深红渐变副色 */
  --gy-blue: #b3121f;       /* 主色（绯红） */
  --gy-blue-2: #d92332;     /* 主色亮阶 */
  --gy-cyan: #f0b429;       /* 暖金点缀 */
  --gy-bg: #ffeccd;         /* 页面底色（暖米色） */
  --gy-card: #ffffff;       /* 卡片 */
  --gy-line: #eeddd2;       /* 分隔线（暖调） */
  --gy-muted: #8a6f68;      /* 次要文字（暖灰褐） */
  --gy-radius: 12px;
}

/* ---------- 夜间模式（炭褐底 + 提亮红金） ---------- */
[data-theme="dark"] {
  --gy-ink: #f0e3da;        /* 正文：暖白，不刺眼 */
  --gy-deep: #120606;       /* 深色区压得更暗 */
  --gy-deep-2: #2a0b0b;     /* 渐变副色同步压暗 */
  --gy-blue: #e05a63;       /* 夜间红提亮，防止沉没 */
  --gy-blue-2: #ef7a81;     /* 悬停更亮一档 */
  --gy-cyan: #f5c453;       /* 暖金微调亮 */
  --gy-bg: #1f1512;         /* 页面底色：暖调炭褐 */
  --gy-card: #2b1e19;       /* 卡片：比底色亮一阶 */
  --gy-line: #3d2c26;       /* 分隔线（暗调） */
  --gy-muted: #b09a90;      /* 次要文字提亮保可读 */
}

/* 全站颜色过渡（主题切换时不闪变） */
body, .site-header, .site-footer, .hero, .page-banner,
.card, .article-item, .member-card, .member-popover, .family-list,
.more-list a, .empty-tip, .article-body, .contact-card {
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: .3s;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* 页面骨架：header/main/footer 纵向排布，短内容页页脚贴底 */
html, body { min-height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  color: var(--gy-ink);
  background: var(--gy-bg);
  line-height: 1.7;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
main { flex: 1; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------- 顶部导航 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gy-line);
}
[data-theme="dark"] .site-header { background: rgba(31, 21, 18, .92); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { width: 40px; height: 40px; object-fit: contain; }
.brand-logo.small { width: 34px; height: 34px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 15px; }
.brand-text em { font-style: normal; font-size: 11px; letter-spacing: 4px; color: var(--gy-muted); }

.site-nav { display: flex; align-items: center; gap: 22px; font-size: 14.5px; }
.site-nav > a { padding: 4px 2px; color: var(--gy-ink); border-bottom: 2px solid transparent; transition: .15s; }
.site-nav > a:hover { color: var(--gy-blue); border-bottom-color: var(--gy-blue); }
.nav-divider { width: 1px; height: 16px; background: var(--gy-line); }

/* 工坊/云栈兄弟站入口：按钮化 */
.site-nav .external {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 14px; border-radius: 999px;
  font-size: 13px; color: var(--gy-blue);
  background: #fdf1ea; border: 1px solid #f0d6cb;
  transition: all .22s ease; cursor: pointer;
  border-bottom-width: 1px; /* 覆盖普通导航的下划线 hover */
}
.site-nav .external:hover {
  color: #fff; background: var(--gy-blue); border-color: var(--gy-blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(179, 18, 31, .35);
}
/* 两个按钮各自的品牌色区分 */
.site-nav .external.gf:hover {
  background: linear-gradient(135deg, #1d4ed8, #22d3ee);
  border-color: transparent;
}
.site-nav .external.yz:hover {
  background: linear-gradient(135deg, #15803d, #4ade80);
  border-color: transparent;
}
/* 夜间：外部按钮底色转暗 */
[data-theme="dark"] .site-nav .external { background: #332420; border-color: #45332c; }
.site-nav .external .arrow { transition: transform .22s ease; display: inline-block; }
.site-nav .external:hover .arrow { transform: translate(2px, -2px); }

/* ---------- 主题切换按钮 ---------- */
.theme-toggle {
  width: 34px; height: 34px; margin-left: 6px;
  border-radius: 50%; border: 1px solid var(--gy-line);
  background: var(--gy-card); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; color: var(--gy-muted);
  transition: all .22s ease; vertical-align: middle;
}
.theme-toggle:hover { transform: translateY(-2px); color: var(--gy-cyan); border-color: var(--gy-cyan); }
/* 白天显示月亮（点击进入夜间），夜间显示太阳（点击回到白天） */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }
[data-theme="dark"] .theme-toggle .icon-sun { display: inline; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ---------- 移动端汉堡按钮 + 全屏品牌化菜单（≤760px 启用，桌面端不可见） ---------- */
.nav-burger {
  display: none; width: 42px; height: 42px; margin-left: 10px;
  border: 1px solid var(--gy-line); border-radius: 10px;
  background: var(--gy-card); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  transition: border-color .18s;
}
.nav-burger:active { border-color: var(--gy-blue); }
.nav-burger span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--gy-ink);
  transition: transform .28s ease, opacity .2s;
}
/* 打开时三道杠变 X */
html.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
html.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
html.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 全屏菜单的关闭按钮：只在移动端菜单形态下显示 */
.nav-close { display: none; }
/* 退出登录圆形按钮：仅移动端全屏菜单内显示（桌面端隐藏） */
.m-logout-btn { display: none; }

/* 遮罩（全屏菜单本身不透明，此层仅作开合过渡的兜底背景） */
.nav-mask {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 8, 6, .45);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s;
}
html.nav-open .nav-mask { opacity: 1; visibility: visible; }

@media (max-width: 760px) {
  .nav-burger { display: inline-flex; }

  /* ⚠ 根治错位：backdrop-filter 会让内部的 fixed 子元素以顶栏为定位基准
     （CSS 规范行为），全屏菜单会缩成顶栏大小。窄屏停用毛玻璃换实底。 */
  .site-header { backdrop-filter: none; background: rgba(255, 255, 255, .97); }
  [data-theme="dark"] .site-header { background: rgba(31, 21, 18, .97); }

  /* 全屏品牌化菜单：与 Hero 同源的深红渐变 + 暖金/绯红光晕，日夜皆宜 */
  .site-nav {
    position: fixed; inset: 0; z-index: 230;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px; padding: 84px 24px 116px;
    background:
      radial-gradient(ellipse 60% 40% at 75% 12%, rgba(240, 180, 41, .15), transparent),
      radial-gradient(ellipse 50% 45% at 18% 88%, rgba(217, 35, 50, .22), transparent),
      linear-gradient(160deg, #2a0b0b 0%, #4a1010 55%, #5c1414 100%);
    color: #ffeee4;
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
    overflow-y: auto;
  }
  html.nav-open .site-nav { opacity: 1; visibility: visible; }

  /* 菜单项：居中大字，逐项上浮进场 */
  .site-nav > a {
    display: flex; align-items: center; justify-content: center;
    min-height: 52px; padding: 10px 18px;
    font-size: 20px; letter-spacing: 3px; color: #ffeee4;
    border-bottom: none;
    opacity: 0; transform: translateY(16px);
    transition: opacity .35s ease, transform .35s ease, color .18s;
  }
  html.nav-open .site-nav > a { opacity: 1; transform: none; }
  /* 进场节奏：自上而下逐项浮现（仅展开时生效，收起即时复位不拖沓） */
  html.nav-open .site-nav a:nth-of-type(1) { transition-delay: .05s, .05s, 0s; }
  html.nav-open .site-nav a:nth-of-type(2) { transition-delay: .09s, .09s, 0s; }
  html.nav-open .site-nav a:nth-of-type(3) { transition-delay: .13s, .13s, 0s; }
  html.nav-open .site-nav a:nth-of-type(4) { transition-delay: .17s, .17s, 0s; }
  html.nav-open .site-nav a:nth-of-type(5) { transition-delay: .21s, .21s, 0s; }
  html.nav-open .site-nav a:nth-of-type(6) { transition-delay: .25s, .25s, 0s; }
  html.nav-open .site-nav a:nth-of-type(7) { transition-delay: .29s, .29s, 0s; }
  html.nav-open .site-nav a:nth-of-type(8) { transition-delay: .33s, .33s, 0s; }
  html.nav-open .site-nav a:nth-of-type(9) { transition-delay: .37s, .37s, 0s; }
  .site-nav > a:hover, .site-nav > a:active { color: #f5c453; }

  /* 工坊/云栈：深底上的品牌色胶囊 */
  .site-nav .external {
    margin-top: 10px; font-size: 15px;
    background: rgba(255, 255, 255, .07);
  }
  .site-nav .external.gf { color: #7cb0ff; border-color: rgba(34, 211, 238, .4); }
  .site-nav .external.yz { color: #6fd89a; border-color: rgba(74, 222, 128, .4); }
  .site-nav .external:hover { transform: none; color: #fff; }
  .site-nav .external.gf:hover { background: linear-gradient(135deg, #1d4ed8, #22d3ee); }
  .site-nav .external.yz:hover { background: linear-gradient(135deg, #15803d, #4ade80); }

  /* 主题切换：菜单底部左侧（右侧对称位留给退出按钮，见 .m-logout-btn） */
  .site-nav .theme-toggle {
    position: absolute; left: 26px; bottom: 38px; margin: 0;
    border-color: rgba(255, 238, 228, .35);
    background: rgba(255, 255, 255, .08); color: #ffeee4;
  }
  /* 退出登录：菜单底部右侧圆形图标按钮（与主题切换对称），点击弹居中确认框 */
  .site-nav .m-logout-btn {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; right: 26px; bottom: 38px;
    width: 34px; height: 34px; margin: 0;
    font-size: 15px; line-height: 1;
    border-radius: 50%; border: 1px solid rgba(255, 238, 228, .35);
    background: rgba(255, 255, 255, .08); color: #ffeee4;
    cursor: pointer; transition: all .22s ease;
  }
  .site-nav .m-logout-btn:hover { color: #ff8585; border-color: rgba(255, 133, 133, .55); transform: none; }

  /* 关闭按钮：右上角圆形 ✕ */
  .site-nav .nav-close {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 16px; right: 16px;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(255, 238, 228, .35);
    background: rgba(255, 255, 255, .08);
    color: #ffeee4; font-size: 17px; cursor: pointer;
    transition: background .18s;
  }
  .site-nav .nav-close:active { background: rgba(255, 255, 255, .2); }

  /* ⚠ 菜单打开时抬升顶栏整体层级：否则遮罩(200)压在顶栏(100)之上，
     所有点击都会落在遮罩上触发"关闭菜单"——交互失灵的根源。
     240 > 200，顶栏连同内部的全屏菜单(z 230)整体浮到遮罩上方。 */
  html.nav-open .site-header { z-index: 240; }

  /* 菜单项间的细分隔线：暖白低透明度，融入深红渐变底 */
  .site-nav .nav-divider {
    width: 148px; height: 1px; margin: 10px 0 6px;
    background: rgba(255, 238, 228, .22);
  }
}

/* ---------- 首页大屏 ---------- */
.hero {
  background:
    radial-gradient(ellipse 60% 50% at 75% 20%, rgba(240, 180, 41, .16), transparent),
    radial-gradient(ellipse 40% 60% at 15% 85%, rgba(217, 35, 50, .2), transparent),
    linear-gradient(160deg, var(--gy-deep) 0%, var(--gy-deep-2) 55%, #5c1414 100%);
  color: #ffeee4;
  padding: 96px 0 88px;
}
[data-theme="dark"] .hero {
  background:
    radial-gradient(ellipse 60% 50% at 75% 20%, rgba(240, 180, 41, .14), transparent),
    radial-gradient(ellipse 40% 60% at 15% 85%, rgba(217, 35, 50, .18), transparent),
    linear-gradient(160deg, var(--gy-deep) 0%, var(--gy-deep-2) 55%, #3d0f0f 100%);
}
.hero-inner { max-width: 720px; }
.hero-kicker { color: var(--gy-cyan); letter-spacing: 6px; font-size: 14px; margin-bottom: 18px; }
.hero-title { font-size: 44px; line-height: 1.25; font-weight: 700; letter-spacing: 2px; }
.hero-sub { margin: 22px 0 34px; color: #d9b8ae; font-size: 15.5px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.btn {
  display: inline-block; padding: 11px 26px; border-radius: 999px;
  font-size: 14.5px; transition: .18s; cursor: pointer; border: 1px solid transparent;
}
.btn-primary { background: var(--gy-blue); color: #fff; }
.btn-primary:hover { background: var(--gy-blue-2); transform: translateY(-1px); }
.btn-ghost { border-color: rgba(243, 221, 212, .9); color: #f3ddd4; }
.btn-ghost:hover { border-color: #ff8a8a; color: #ff8a8a; }
/* Hero 场景的幽灵按钮固定用暖亮色，不受控制台深色版本影响 */
.hero-actions .btn-ghost { color: #f3ddd4; border-color: rgba(243, 221, 212, .9); }
.hero-actions .btn-ghost:hover { color: #ff8a8a; border-color: #ff8a8a; }

/* ---------- 主线卡片（Magic Card 风格，借鉴 Uiverse mRcOol7） ---------- */
.grid-mainlines {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: -44px; padding-bottom: 8px;
}
.magic-card {
  position: relative; z-index: 1;
  padding: 6px; border-radius: 1rem;
  background: linear-gradient(135deg, var(--gy-blue) 0%, var(--gy-cyan) 100%);
  transition: transform .25s ease;
}
.magic-card::before,
.magic-card::after {
  content: ""; position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 1rem; z-index: -1;
  transition: opacity .35s ease;
}
.magic-card::before {
  background: linear-gradient(to bottom right, #f6d365 0%, #fda085 100%);
  transform: rotate(2deg);
}
.magic-card::after {
  background: linear-gradient(to top right, #84fab0 0%, #8fd3f4 100%);
  transform: rotate(-2deg);
}
.magic-card .card-info {
  background: #ffffff;
  border-radius: .7rem;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  min-height: 176px; padding: 26px 22px;
  text-align: center;
  position: relative; z-index: 2;
}
[data-theme="dark"] .magic-card .card-info { background: #2b1e19; }
.magic-card .card-icon {
  font-size: 22px; color: var(--gy-blue);
  display: inline-block; margin-bottom: 10px;
}
.magic-card h3 { font-size: 17px; margin-bottom: 6px; transition: color .5s; }
.magic-card p { font-size: 13.5px; color: var(--gy-muted); }
.magic-card:hover { transform: translateY(-4px); }
.magic-card:hover::before,
.magic-card:hover::after { opacity: 0; }
.magic-card:hover .card-info h3 { color: var(--gy-blue); }
.card {
  background: var(--gy-card); border: 1px solid var(--gy-line);
  border-radius: var(--gy-radius); padding: 24px;
  transition: .18s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(59, 28, 28, .09); border-color: #e6c4b2; }
[data-theme="dark"] .card:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .35); border-color: #5a4438; }
.card h3 { font-size: 17px; margin-bottom: 6px; }
.card p { font-size: 13.5px; color: var(--gy-muted); }
.card.sibling { background: linear-gradient(150deg, #fffdfb, #fbeeec); }
[data-theme="dark"] .card.sibling { background: linear-gradient(150deg, #2e211b, #291c17); }
.tag {
  display: inline-block; font-size: 11px; color: var(--gy-cyan);
  border: 1px solid currentColor; border-radius: 999px; padding: 0 8px; margin-left: 4px;
}

/* ---------- 品牌家族区（轻量清单式，与正文同一视觉语言） ---------- */
.family-band { margin-top: 64px; padding: 0 24px 72px; }
.family-head { margin-bottom: 18px; }
.family-head h2 { font-size: 22px; letter-spacing: 1px; margin-bottom: 6px; }
.family-head p { font-size: 13.5px; color: var(--gy-muted); }
.family-list {
  border: 1px solid var(--gy-line);
  border-radius: var(--gy-radius);
  overflow: hidden;             /* 让行的悬停色收在圆角内 */
  background: var(--gy-card);
}
.family-row {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  transition: background .18s ease;
}
.family-row + .family-row { border-top: 1px solid var(--gy-line); }
.family-row:hover { background: #fdf5f0; }
[data-theme="dark"] .family-row:hover { background: #332420; }
.family-dot {
  width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0;
}
.family-row.gf .family-dot { background: linear-gradient(135deg, #1d4ed8, #22d3ee); }
.family-row.yz .family-dot { background: linear-gradient(135deg, #15803d, #4ade80); }
.family-name { font-size: 15.5px; font-weight: 600; flex-shrink: 0; }
.family-desc { font-size: 13px; color: var(--gy-muted); }
.family-row .tag { margin-left: auto; flex-shrink: 0; }
.family-row:hover .family-name { color: var(--gy-blue); }

/* ---------- 栏目区 ---------- */
.home-section { padding: 46px 24px 56px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
.section-head h2 { font-size: 24px; letter-spacing: 1px; }
.more-link { font-size: 13.5px; color: var(--gy-blue); }
.more-link:hover { color: var(--gy-blue-2); }

.article-list { display: flex; flex-direction: column; gap: 14px; }
.article-item {
  display: flex; gap: 18px; background: var(--gy-card);
  border: 1px solid var(--gy-line); border-radius: var(--gy-radius);
  padding: 18px 20px; transition: .16s;
}
.article-item:hover { border-color: #e6c4b2; box-shadow: 0 6px 18px rgba(59, 28, 28, .07); }
[data-theme="dark"] .article-item:hover { border-color: #5a4438; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.article-cover { width: 168px; height: 104px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.article-info h3 { font-size: 17px; margin-bottom: 6px; }
.article-info p { font-size: 13.5px; color: var(--gy-muted); margin-bottom: 8px; }
.article-meta { font-size: 12.5px; color: #a08a80; }
.empty-tip { color: var(--gy-muted); background: var(--gy-card); border: 1px dashed var(--gy-line);
  border-radius: var(--gy-radius); padding: 34px; text-align: center; }

/* ---------- 栏目页横幅 ---------- */
.page-banner {
  background: linear-gradient(150deg, var(--gy-deep), var(--gy-deep-2));
  color: #ffeee4; padding: 56px 0 48px;
}
.page-banner h1 { font-size: 32px; letter-spacing: 2px; margin-bottom: 8px; }
.page-banner p { color: #d9b8ae; font-size: 14.5px; }

/* ---------- 文章详情 ---------- */
.article-page { padding: 48px 24px 72px; max-width: 860px; }
.article-crumb { font-size: 13px; color: var(--gy-muted); margin-bottom: 14px; }
.article-crumb a { color: var(--gy-blue); }
.article-head h1 { font-size: 30px; line-height: 1.4; margin-bottom: 10px; }
.article-head .article-meta { font-size: 13px; }
/* 标题行：标题 + 返回列表按钮（右侧） */
.head-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.head-title-row h1 { flex: 1; }
.btn-back-list {
  flex-shrink: 0; margin-top: 8px; user-select: none;
  font-size: 13.5px; padding: 7px 16px; border-radius: 999px;
  border: 1px solid #d98a76; color: #d98a76; background: transparent;
  text-decoration: none; white-space: nowrap;
  transition: color .2s, border-color .2s, transform .2s;
}
.btn-back-list:hover { color: #ff8a8a; border-color: #ff8a8a; transform: translateX(-2px); }
[data-theme="dark"] .btn-back-list { border-color: #c07a68; color: #e8a795; }
[data-theme="dark"] .btn-back-list:hover { color: #ff9d8a; border-color: #ff9d8a; }

/* 点赞：空心红心 → 实心红心 */
.like-bar { display: flex; justify-content: center; gap: 14px; margin: 30px 0 6px; }
#like-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 26px; border-radius: 999px;
  border: 1px solid #e6b8ac; background: var(--gy-card);
  font-size: 14.5px; color: var(--gy-muted);
  transition: transform .15s, border-color .2s, color .2s;
}
#like-btn:hover:not(:disabled) { transform: translateY(-2px); border-color: #e04848; color: #e04848; }
#like-btn:active:not(:disabled) { transform: scale(0.92); }
#like-btn .heart-icon {
  width: 21px; height: 21px; fill: none; stroke: #e04848; stroke-width: 2;
  transition: fill .25s, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
#like-btn.liked { border-color: #e04848; color: #e04848; cursor: default; }
#like-btn.liked .heart-icon { fill: #e04848; }
#like-btn.liked .like-label { display: none; }  /* 已赞后只留红心+数字，更醒目 */
#like-btn .like-count { font-weight: 600; min-width: 1em; }
[data-theme="dark"] #like-btn { background: var(--gy-card); border-color: #5a3a30; }
[data-theme="dark"] #like-btn:hover:not(:disabled) { border-color: #ff6b6b; }
[data-theme="dark"] #like-btn.liked { border-color: #ff6b6b; color: #ff8f8f; }
[data-theme="dark"] #like-btn.liked .heart-icon { fill: #ff5252; stroke: #ff5252; }

/* 分享按钮：与点赞同一形态语言，链接图标中性色 */
#share-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 26px; border-radius: 999px;
  border: 1px solid #e6b8ac; background: var(--gy-card);
  font-size: 14.5px; color: var(--gy-muted);
  transition: transform .15s, border-color .2s, color .2s;
}
#share-btn:hover { transform: translateY(-2px); border-color: var(--gy-blue); color: var(--gy-blue); }
#share-btn:active { transform: scale(0.92); }
#share-btn .share-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; }
#share-btn.copied { border-color: #256c39; color: #256c39; }
[data-theme="dark"] #share-btn { border-color: #5a3a30; }
[data-theme="dark"] #share-btn.copied { border-color: #a9d8b2; color: #a9d8b2; }
.article-hero-image { margin: 26px 0; border-radius: var(--gy-radius); overflow: hidden; }

.article-body {
  background: var(--gy-card); border: 1px solid var(--gy-line);
  border-radius: var(--gy-radius); padding: 34px 38px; margin-top: 26px;
  font-size: 18px; /* 与编辑器默认字号一致，所见即所得 */
}
.prose h2 { font-size: 21px; margin: 26px 0 12px; }
.prose h3 { font-size: 17.5px; margin: 20px 0 10px; }
.prose p { margin: 10px 0; font-size: 15.5px; }
/* 文章正文页的段落跟随 18px 默认字号（.prose p 的 15.5px 仅用于关于页等站内文案） */
.article-body.prose p { font-size: 18px; }
.prose ul, .prose ol { padding-left: 24px; margin: 10px 0; }
.prose a { color: var(--gy-blue); }
.prose img { border-radius: 8px; margin: 14px 0; }
.prose code { background: #f8efe7; padding: 2px 6px; border-radius: 5px; font-size: 13.5px; }
.prose blockquote { border-left: 3px solid var(--gy-cyan); padding: 6px 16px; color: var(--gy-muted); margin: 14px 0; background: #fbf4ec; border-radius: 0 8px 8px 0; }

.doc-list-mode .doc-intro { color: var(--gy-muted); font-size: 14.5px; margin-bottom: 18px; }
.doc-download-card { margin-top: 24px; padding: 18px 20px; background: #fdf0ea; border: 1px solid #f2d8cc; border-radius: 10px; }
/* 夜间：暖色浅底转暗 */
[data-theme="dark"] .prose code { background: #3a2b25; }
[data-theme="dark"] .prose blockquote { background: #331f1a; }
[data-theme="dark"] .doc-download-card { background: #332420; border-color: #45332c; }
.doc-download-card h3 { font-size: 15px; color: var(--gy-blue); margin-bottom: 6px; }
.doc-download-note { font-size: 12.5px; color: var(--gy-muted); margin-top: 6px; }

.attachment-box {
  display: flex; align-items: center; gap: 16px; margin-top: 22px;
  background: #fdf0ea; border: 1px solid #f2d8cc; border-radius: var(--gy-radius); padding: 18px 22px;
}
[data-theme="dark"] .attachment-box { background: #332420; border-color: #45332c; }
.attachment-icon { font-size: 22px; color: var(--gy-blue); }
.attachment-name { font-size: 14px; margin-bottom: 8px; color: var(--gy-ink); }

.more-articles { margin-top: 44px; }
.more-articles h2 { font-size: 19px; margin-bottom: 14px; }
.more-list { display: flex; flex-direction: column; gap: 8px; }
.more-list a {
  font-size: 14.5px; padding: 12px 16px; background: var(--gy-card);
  border: 1px solid var(--gy-line); border-radius: 9px; transition: .15s;
}
.more-list a:hover { color: var(--gy-blue); border-color: #e6c4b2; }
[data-theme="dark"] .more-list a:hover { border-color: #5a4438; }

/* ---------- 关于 / 联系 ---------- */
.about-page { max-width: 820px; }
.about-page h2 { margin-top: 28px; }
/* 关于页段落分割线：1px 若隐若现，宽度与内容区一致 */
.soft-divider {
  border: none;
  height: 1px;
  margin: 34px 0 0;
  background: linear-gradient(to right, transparent, var(--gy-line) 12%, var(--gy-line) 88%, transparent);
}
.contact-page { max-width: 720px; }
.contact-card p { font-size: 14.5px; color: var(--gy-muted); margin: 10px 0; }
.contact-list { list-style: none; margin: 14px 0; }
.contact-list li { padding: 12px 0; border-bottom: 1px solid var(--gy-line); font-size: 14.5px; }
.contact-list span { display: inline-block; min-width: 90px; color: var(--gy-muted); }
.contact-note { font-size: 12.5px; color: #a08a80; }

/* ---------- 即将上线页 ---------- */
.soon-page { text-align: center; padding: 90px 24px 70px; }
.soon-star { font-size: 34px; color: var(--gy-cyan); margin-bottom: 18px; }
.soon-page h1 { font-size: 28px; margin-bottom: 12px; }
.soon-desc { color: var(--gy-muted); margin-bottom: 30px; }
.soon-links { display: flex; justify-content: center; gap: 16px; margin-bottom: 34px; flex-wrap: wrap; }
.soon-links .card { width: 300px; text-align: left; }

/* ---------- 页脚 ---------- */
.site-footer {
  margin-top: 60px; background: var(--gy-deep); color: #d9b8ae;
  padding: 40px 0 30px;
}
.footer-inner { display: flex; flex-direction: column; gap: 20px; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-name { font-size: 16px; color: #ffeee4; font-weight: 600; }
.footer-slogan { font-size: 12.5px; color: #c4988e; letter-spacing: 1px; }
.footer-nav { display: flex; align-items: center; gap: 14px; font-size: 13.5px; }
.footer-nav a:hover { color: var(--gy-cyan); }
.footer-sep { color: rgba(196, 152, 142, .4); user-select: none; }
.footer-bottom {
  border-top: 1px solid rgba(196, 152, 142, .2); margin-top: 22px; padding-top: 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.footer-copy { font-size: 12.5px; color: #a9837a; }
.footer-beian { font-size: 12.5px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.footer-beian a {
  color: #a9837a; display: inline-flex; align-items: center; gap: 5px;
  transition: color .18s;
}
.footer-beian a:hover { color: #d9b8ae; }
.beian-sep { color: rgba(169, 131, 122, .5); font-size: 11px; }
.beian-icon { width: 14px; height: 14px; display: inline-block; opacity: .9; }

@media (max-width: 640px) {
  .footer-bottom { flex-direction: column; gap: 8px; }
}

/* 横幅区返回首页（B 方案：banner 右侧） */
.banner-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.banner-back {
  color: rgba(243, 221, 212, .85); font-size: 13.5px; white-space: nowrap;
  padding: 7px 16px; border: 1px solid rgba(243, 221, 212, .45);
  border-radius: 999px; transition: all .18s; margin-bottom: 4px;
}
.banner-back:hover { color: #ff8a8a; border-color: #ff8a8a; transform: translateX(-2px); }

@media (max-width: 640px) {
  .banner-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .banner-back { margin-bottom: 0; }
}

/* 返回顶部：滚动后出现，弹性动画 */
#back-top {
  position: fixed; right: 28px; bottom: 32px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--gy-blue); color: #fff;
  font-size: 19px; line-height: 1;
  border: none; cursor: pointer;
  box-shadow: 0 6px 18px rgba(48, 10, 10, .25);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.8);
  transition: opacity .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1),
              visibility .3s, background .18s;
}
#back-top.visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
#back-top:hover { background: var(--gy-blue-2); transform: translateY(-3px) scale(1.06); }
#back-top:active { transform: translateY(0) scale(.92); }

/* 法务文档页 */
.legal-page { padding: 48px 0 64px; }
.legal-page .container { max-width: 820px; }
.legal-updated { color: var(--gy-muted); font-size: 13.5px; margin-bottom: 28px; }
.legal-page h2 {
  font-size: 19px; color: var(--gy-ink); margin: 34px 0 12px;
  padding-left: 12px; border-left: 3px solid var(--gy-blue);
}
.legal-page p {
  font-size: 15px; line-height: 1.85; color: var(--gy-ink-soft);
  margin: 0 0 10px; text-align: justify;
}
.legal-page p strong { color: var(--gy-ink); }

/* ---------- 成员卡片（可点击，button 实现） ---------- */
.member-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
}
.member-card {
  background: var(--gy-card); border: 1px solid var(--gy-line);
  border-radius: var(--gy-radius); padding: 20px 16px; text-align: center;
  transition: .18s; cursor: pointer;
  font: inherit; color: inherit;            /* 重置 button 默认样式 */
  display: block; width: 100%;
}
.member-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(59, 28, 28, .1); border-color: #e6c4b2; }
[data-theme="dark"] .member-card:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, .35); border-color: #5a4438; }
.member-card:focus-visible { outline: 2px solid var(--gy-blue); outline-offset: 2px; }
.member-card img {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 12px; border: 3px solid #f6e0d4;
}
[data-theme="dark"] .member-card img { border-color: #45332c; }
.member-card h3 { font-size: 15.5px; margin-bottom: 4px; }
.member-card p { font-size: 12.5px; color: var(--gy-muted); }
.section-hint { font-size: 12.5px; color: var(--gy-muted); }

/* 滚动条槽位按需预留（theme.js 自动检测）：
   - html.scroll-gutter：页面实际出现滚动条时挂上（滚动条本来就占着这个位置，
     视觉零成本）；成员弹层锁定滚动摘掉滚动条时，槽位仍在 → 页面不横跳
     （与当初全局方案的防跳行为完全一致，只是收窄了生效范围）
   - html.scroll-locked：锁定瞬间兜底（about.js 同步挂载）
   - 无滚动条页面（首页短内容时、登录页等）两个类都没有 → 不再出现右侧空白 */
html.scroll-gutter,
html.scroll-locked { scrollbar-gutter: stable; }

/* ---------- 成员详情：聚焦遮罩 + 侧弹小抽屉 ---------- */
/* 背景虚化遮罩（景深效果） */
.member-focus-mask {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(20, 8, 6, .35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .3s ease;
}
.member-focus-mask.open { opacity: 1; }

/* 聚焦态成员卡片：放大 + 抬升，浮在遮罩之上 */
.member-card { position: relative; z-index: 1; }
.member-card.is-active {
  z-index: 160;
  transform: scale(1.25);
  box-shadow: 0 18px 44px rgba(20, 8, 6, .4);
  border-color: var(--gy-blue);
}

/* 侧弹小抽屉：层级在卡片之下，从卡片侧后方翻出 */
.member-popover {
  position: fixed; z-index: 155;
  width: 500px;
  background: #ffeccd;
  border: 1px solid #f0ddba;
  border-radius: var(--gy-radius);
  box-shadow: 0 18px 44px rgba(12, 26, 48, .22);
  overflow: hidden;
  transform: translateX(-28px) scaleX(0); opacity: 0;
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .45s ease;
}
/* 夜间小抽屉：暖褐深色镜像版 */
[data-theme="dark"] .member-popover { background: #33261f; border-color: #45332c; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
.member-popover.flip { transform-origin: right center; transform: translateX(28px) scaleX(0); }
.member-popover.below { transform-origin: center top; transform: scaleY(0); }
.member-popover.open { transform: translateX(0) scaleX(1); opacity: 1; }
.member-popover.below.open { transform: scaleY(1); }
.member-popover .pop-intro {
  height: 100%;
  margin: 0;
  padding: 18px 20px;
  overflow-y: auto;
  font-size: 13.5px; line-height: 1.9; color: var(--gy-ink);
}
/* 夜间小抽屉文字配色 */
[data-theme="dark"] .member-popover .pop-intro { color: #e8d9c3; }

/* 技术支持署名（关于页底部，弱化展示） */
.tech-credit {
  text-align: center; font-size: 11.5px; color: #a08a80;
  margin: 40px 0 0; letter-spacing: 1px;
}

/* ---------- 移动端成员详情：克隆卡片停靠顶部 + 详情下方慢弹 ----------
   手机上卡片位置不可控，侧弹详情极易出屏。统一交互：
   点卡片 → 原卡片原地不动（栅格不塌），克隆卡片飞到顶栏下方停靠，
   详情抽屉等停靠完成后再从其下方缓缓展开（scaleY，中心顶部为轴）。 */
.member-clone {
  position: fixed; top: 69px; left: 50%; z-index: 160;   /* 顶栏 64px + 5px */
  width: min(320px, calc(100vw - 48px));
  margin-left: calc(min(320px, calc(100vw - 48px)) / -2);
  pointer-events: none; cursor: default;
  animation: clone-dock .5s cubic-bezier(.22, .8, .36, 1);
  box-shadow: 0 14px 34px rgba(20, 8, 6, .3);
}
@keyframes clone-dock {
  from { opacity: 0; transform: translateY(28px) scale(.92); }
}
.member-clone.clone-leaving {
  opacity: 0; transform: translateY(12px) scale(.96);
  transition: opacity .32s ease, transform .32s ease;
}

@media (max-width: 760px) {
  /* 弹层宽度兜底：500px 固定宽在手机上必出屏 */
  .member-popover { width: min(500px, calc(100vw - 24px)); }
  /* 等克隆卡片停靠完成（约 .5s 的前半段）再开始展开，节奏更从容 */
  .member-popover.open { transition-delay: .24s; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  .grid-mainlines { grid-template-columns: 1fr; margin-top: 20px; }
  .hero { padding: 64px 0 56px; }
  .hero-title { font-size: 32px; }
  .article-item { flex-direction: column; }
  .article-cover { width: 100%; height: 180px; }
  .article-body { padding: 24px 20px; }
  /* 窄屏：返回按钮换行到标题下方（与站内"返回首页"按钮的响应式策略一致） */
  .head-title-row { flex-direction: column; align-items: flex-start; }
  .btn-back-list { margin-top: 0; align-self: flex-start; }
}

@media (max-width: 640px) {
  /* 窄屏收紧全局留白，给内容让宽度。
     ⚠ 只收水平：写成 padding: 0 16px 会把 .home-section/.article-page 等
     与 .container 组合的区块的上下内边距一并清零（横幅贴卡片的问题根源） */
  .container { padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   控制台（登录/创作中心/管理控制台）—— 全部走品牌变量，自动适配夜间
   ============================================================ */

/* ---------- 顶栏 ---------- */
.console-topbar { background: var(--gy-card); border-bottom: 1px solid var(--gy-line); }
.console-topbar-inner { display: flex; align-items: center; gap: 14px; height: 52px; }
.console-badge { font-weight: 700; color: var(--gy-blue); font-size: 14px; letter-spacing: 1px; }
.console-user { font-size: 13px; color: var(--gy-muted); }
.console-links { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 13.5px; }
.console-links a:hover { color: var(--gy-blue); }
.console-body { padding: 28px 0 60px; }

.inline-form { display: inline; }
.linklike {
  background: none; border: none; cursor: pointer; padding: 0;
  font: inherit; color: var(--gy-blue);
}
.linklike:hover { text-decoration: underline; }
.linklike.ok { color: #1f8a4d; }
.linklike.danger { color: var(--gy-blue-2); }
.muted { color: var(--gy-muted); font-size: 13px; }

/* ---------- 登录页 ---------- */
.auth-wrap { display: flex; justify-content: center; padding: 80px 24px 120px; }

/* 滑块验证码品牌色（.auth-card 前缀提高优先级，不受样式表加载顺序影响） */
.auth-card .xy-captcha { --xy-brand: var(--gy-blue); }
.auth-card {
  width: min(380px, 100%); background: var(--gy-card);
  border: 1px solid var(--gy-line); border-radius: var(--gy-radius);
  padding: 40px 36px 30px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 12px 32px rgba(48, 10, 10, .08);
}
.auth-card h1 { font-size: 24px; letter-spacing: 2px; text-align: center; }
.auth-sub { font-size: 12.5px; color: var(--gy-muted); text-align: center; margin-bottom: 6px; }
.auth-foot { font-size: 12px; color: var(--gy-muted); text-align: center; margin-top: 4px; }

/* ---------- 表单 ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 13.5px; color: var(--gy-ink); font-weight: 500; }
.field input, .field select, .field textarea,
.account-create-form input, .search-form input {
  font: inherit; padding: 10px 12px;
  border: 1px solid var(--gy-line); border-radius: 8px;
  background: var(--gy-bg); color: var(--gy-ink);
}
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .account-create-form input,
[data-theme="dark"] .search-form input { background: #241813; }
.field input:focus, .field select:focus, .field textarea:focus,
.account-create-form input:focus, .search-form input:focus {
  outline: none; border-color: var(--gy-blue);
  box-shadow: 0 0 0 3px rgba(224, 90, 99, .15);
}
.field-err { color: var(--gy-blue-2); font-size: 12px; font-style: normal; }

/* 摘要：固定 100px 高、不可手动拉伸、内容溢出时出滚动条 */
.article-form textarea[name="summary"] { height: 100px; resize: none; overflow: auto; }

/* ---------- 展示模板：缩略图卡片选择器 ---------- */
.template-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.template-card {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  cursor: pointer; padding: 12px 8px 10px;
  background: var(--gy-card); border: 1.5px solid var(--gy-line); border-radius: 10px;
  transition: border-color .15s, background .15s, transform .15s;
}
.template-card:hover { border-color: #e0a48e; transform: translateY(-2px); }
.template-card:has(input:checked) {
  border-color: var(--gy-blue); background: rgba(224, 90, 99, .06);
  box-shadow: 0 0 0 3px rgba(224, 90, 99, .1);
}
.template-card input[type="radio"] { margin: 0; accent-color: var(--gy-blue); }
.tpl-thumb { width: 72px; height: 50px; display: block; }
.tpl-thumb svg { width: 100%; height: 100%; display: block; }
.tt-strong { fill: #c9705f; }
.tt-soft { fill: #eccdbd; }
.tt-accent { fill: #e0a48e; }
[data-theme="dark"] .tt-strong { fill: #a35a4b; }
[data-theme="dark"] .tt-soft { fill: #5a4034; }
[data-theme="dark"] .tt-accent { fill: #7d5344; }
[data-theme="dark"] .template-card:has(input:checked) { background: rgba(224, 90, 99, .12); }
.tpl-name { font-size: 12.5px; color: var(--gy-ink); }
@media (max-width: 560px) { .template-options { grid-template-columns: 1fr; } }
.form-alert {
  background: #fbe3e0; border: 1px solid #efc4bf; color: #8a2a20;
  border-radius: 8px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px;
}
[data-theme="dark"] .form-alert { background: #3a221e; border-color: #5c322c; color: #f0b9b3; }
.form-alert.ok { background: #e8f3e9; border-color: #c4dfc8; color: #256c39; }
[data-theme="dark"] .form-alert.ok { background: #1e2f22; border-color: #2f4d36; color: #a9d8b2; }

.btn-primary, .btn-ghost {
  display: inline-block; font: inherit; font-size: 14px; cursor: pointer;
  padding: 10px 22px; border-radius: 8px; text-align: center; transition: all .2s;
}
.btn-primary {
  background: var(--gy-blue); color: #fff; border: 1px solid var(--gy-blue);
}
.btn-primary:hover { background: var(--gy-blue-2); border-color: var(--gy-blue-2); transform: translateY(-1px); }
.btn-ghost { background: none; color: var(--gy-ink); border: 1px solid var(--gy-blue); }
.btn-ghost:hover { border-color: var(--gy-blue-2); color: var(--gy-blue-2); }
.btn-block { display: block; width: 100%; }

/* ---------- 附件下载授权选择块（创作表单内醒目提示） ---------- */
.attachment-consent {
  border: 1.5px dashed #e0a48e; border-radius: 10px;
  background: #fdf1ec; padding: 16px 18px; margin-bottom: 14px;
}
[data-theme="dark"] .attachment-consent { border-color: #6b4335; background: #2e201b; }
.consent-title { font-size: 14px; font-weight: 600; color: var(--gy-ink); }
.consent-req { color: var(--gy-blue-2); font-style: normal; font-weight: 400; font-size: 12px; }
.consent-note { font-size: 12.5px; color: var(--gy-muted); margin: 6px 0 10px; line-height: 1.6; }
.consent-options { display: flex; flex-direction: column; gap: 8px; }
.consent-options label {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13.5px; color: var(--gy-ink);
  padding: 9px 12px; background: var(--gy-card);
  border: 1px solid var(--gy-line); border-radius: 8px; transition: .15s;
}
.consent-options label:hover { border-color: #e0a48e; }
.consent-options input[type="radio"] { accent-color: var(--gy-blue); width: 15px; height: 15px; }

/* ---------- Quill 编辑器定制 ----------
   选项文字：snow.css 自带 [data-label]::before { content: attr(data-label) }，
   会直接显示模板里 <option> 的中文文本，无需我们干预。
   这里只做两件事：① 未选择时的默认标签（snow 默认是英文 Sans Serif/Normal）
   ② header 下拉的中文翻译（header 的 select 为空，由主题自动填充英文清单） */
#editor-toolbar .ql-picker.ql-font .ql-picker-label:not([data-label])::before,
#editor-toolbar .ql-picker.ql-size .ql-picker-label:not([data-label])::before { content: '默认'; }
#editor-toolbar .ql-picker.ql-header .ql-picker-label::before,
#editor-toolbar .ql-picker.ql-header .ql-picker-item::before { content: '正文'; }
#editor-toolbar .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
#editor-toolbar .ql-picker.ql-header .ql-picker-item[data-value='1']::before { content: '标题 1'; }
#editor-toolbar .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
#editor-toolbar .ql-picker.ql-header .ql-picker-item[data-value='2']::before { content: '标题 2'; }
#editor-toolbar .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
#editor-toolbar .ql-picker.ql-header .ql-picker-item[data-value='3']::before { content: '标题 3'; }

/* A+/A- 快捷字号按钮（文字按钮，放宽默认宽度） */
#editor-toolbar .ql-size-plus,
#editor-toolbar .ql-size-minus {
  width: auto; min-width: 36px; padding: 0 8px;
  font-size: 13px; font-weight: 600; color: var(--gy-ink, #444);
}

/* 字体：仅引用用户系统预装字体（font-family 名称引用，不嵌入字体文件，无版权风险）
   编辑器内与前台文章正文（.article-body）共用这些 class */
.ql-font-yahei { font-family: 'Microsoft YaHei', 'PingFang SC', 'Heiti SC', sans-serif; }
.ql-font-songti { font-family: 'SimSun', 'Songti SC', serif; }
.ql-font-kaiti { font-family: 'KaiTi', 'STKaiti', 'Kaiti SC', serif; }
.ql-font-fangsong { font-family: 'FangSong', 'STFangsong', serif; }
.ql-font-heiti { font-family: 'SimHei', 'PingFang SC', 'Heiti SC', sans-serif; }
.ql-font-mono { font-family: ui-monospace, Consolas, 'Courier New', monospace; }

/* ---------- OSS 直传状态行（文件输入框下方） ---------- */
.upload-status { font-style: normal; font-size: 12.5px; }
.upload-status.busy { color: var(--gy-muted); }
.upload-status.ok { color: #256c39; }
[data-theme="dark"] .upload-status.ok { color: #a9d8b2; }
.upload-status.err { color: var(--gy-blue-2); }

/* ---------- 面板与表格 ---------- */
.panel {
  background: var(--gy-card); border: 1px solid var(--gy-line);
  border-radius: var(--gy-radius); padding: 24px; margin-bottom: 20px;
}
.form-narrow { max-width: 480px; margin-left: auto; margin-right: auto; }
/* 表单底部按钮行：同尺寸按钮横向居中（修改密码等窄表单通用） */
.form-actions { display: flex; justify-content: center; gap: 14px; margin-top: 4px; }
.form-actions .btn-primary, .form-actions .btn-ghost { min-width: 132px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 16px; gap: 12px; flex-wrap: wrap; }
.panel-head h2 { font-size: 20px; }
.panel-title { font-size: 17px; margin-bottom: 14px; }
.center-panel { text-align: center; padding: 48px 24px; }
.center-panel h2 { font-size: 18px; margin-bottom: 10px; }
.center-panel .muted { margin-bottom: 20px; }

.data-table {
  width: 100%; border-collapse: collapse;
  background: var(--gy-card); border: 1px solid var(--gy-line);
  border-radius: var(--gy-radius); overflow: hidden;
}
.data-table thead th {
  text-align: left; font-size: 12.5px; color: var(--gy-muted);
  padding: 12px 16px; background: rgba(224, 90, 99, .06);
  border-bottom: 1px solid var(--gy-line);
}
[data-theme="dark"] .data-table thead th { background: rgba(224, 90, 99, .1); }
.data-table td { padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--gy-line); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: rgba(224, 90, 99, .04); }
.cell-title { font-weight: 500; max-width: 320px; }
.cell-time { color: var(--gy-muted); font-size: 12.5px; white-space: nowrap; }
.cell-actions { white-space: nowrap; }
.cell-actions .inline-form, .cell-actions > * { display: inline-flex; vertical-align: middle; }
.cell-actions .sep { color: var(--gy-line); margin: 0 2px; user-select: none; }
/* 用户管理：行内角色分配下拉 */
.role-form { gap: 6px; }
.role-form select {
  font: inherit; font-size: 12.5px; padding: 3px 6px;
  border: 1px solid var(--gy-line); border-radius: 7px;
  background: var(--gy-card); color: var(--gy-ink);
}
.role-form select:focus { outline: none; border-color: var(--gy-blue); }
.empty-cell { text-align: center; color: var(--gy-muted); padding: 32px 0 !important; }

/* 状态徽标 */
.status-dot {
  display: inline-block; font-size: 12px; padding: 2px 10px;
  border-radius: 999px; border: 1px solid currentColor;
}
.status-dot.status-draft { color: var(--gy-muted); }
.status-dot.status-pending { color: #c47f00; }
.status-dot.status-published { color: #1f8a4d; }
.status-dot.status-rejected { color: var(--gy-blue-2); }
.reject-tip { font-size: 12px; color: var(--gy-blue-2); cursor: help; }

/* ---------- 管理控制台 ---------- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card {
  background: var(--gy-card); border: 1px solid var(--gy-line);
  border-radius: var(--gy-radius); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 4px; transition: .18s;
}
.stat-card:hover { transform: translateY(-2px); border-color: var(--gy-blue); box-shadow: 0 8px 20px rgba(48, 10, 10, .08); }
.stat-card strong { font-size: 28px; color: var(--gy-ink); }
.stat-card span { font-size: 13px; color: var(--gy-muted); }
.stat-card.warn strong { color: #c47f00; }

.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-tabs a {
  font-size: 13px; padding: 5px 14px; border-radius: 999px;
  border: 1px solid var(--gy-line); color: var(--gy-muted); transition: .15s;
}
.filter-tabs a:hover { border-color: var(--gy-blue); color: var(--gy-blue); }
.filter-tabs a.on { background: var(--gy-blue); border-color: var(--gy-blue); color: #fff; }

.account-create-form { display: flex; gap: 10px; flex-wrap: wrap; }
.account-create-form input { flex: 1; min-width: 140px; }
.search-form { display: flex; gap: 8px; }
.search-form input { width: 200px; }

/* 驳回弹窗（inset+margin:auto 显式视口居中——全局 reset 会清掉 dialog 原生 margin:auto，导致贴左上角） */
dialog {
  position: fixed; inset: 0; margin: auto;
  border: 1px solid var(--gy-line); border-radius: var(--gy-radius);
  background: var(--gy-card); color: var(--gy-ink);
  padding: 0; max-width: 440px; width: 90vw;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .3);
  height: fit-content;
}
dialog::backdrop { background: rgba(20, 8, 6, .45); backdrop-filter: blur(2px); }
dialog .panel { margin: 0; }
dialog h3 { font-size: 17px; margin-bottom: 6px; }
dialog .logout-confirm-tip { margin: 8px 0 16px; color: var(--gy-muted); }
dialog .del-account-tip { margin: 8px 0 16px; color: var(--gy-muted); line-height: 1.7; }

/* Quill 编辑器适配 */
#editor { background: #fff; border-radius: 0 0 8px 8px; min-height: 320px; color: #3b1c1c; }
[data-theme="dark"] #editor { background: #241813; color: #f0e3da; }
/* .ql-editor 是真正可编辑区：不给最小高度时它只有一行高，
   点到下方空白不会出现光标；snow.css 默认字号 13px，这里提到 18px */
#editor .ql-editor { min-height: 300px; font-size: 18px; }
#editor-toolbar { border-radius: 8px 8px 0 0; }
.ql-toolbar.ql-snow { border-color: var(--gy-line); border-radius: 8px 8px 0 0; }
.ql-container.ql-snow { border-color: var(--gy-line) !important; }
[data-theme="dark"] .ql-toolbar.ql-snow, [data-theme="dark"] .ql-container.ql-snow { background: #2b1e19; }
[data-theme="dark"] .ql-snow .ql-stroke { stroke: #d9c4ba; }
[data-theme="dark"] .ql-snow .ql-fill { fill: #d9c4ba; }
[data-theme="dark"] .ql-snow .ql-picker-label { color: #d9c4ba; }

@media (max-width: 760px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  /* 控制台顶栏：固定两行——第一行"区域+用户"，第二行链接整行换行。
     margin-left:auto 的原布局在 360px 级屏幕+安卓字体放大下会溢出两侧 */
  .console-topbar-inner {
    flex-wrap: wrap; height: auto; min-height: 52px;
    padding: 8px 0; row-gap: 2px;
  }
  .console-badge { font-size: 13px; }
  .console-links {
    margin-left: 0; flex-basis: 100%;
    flex-wrap: wrap; gap: 6px 16px; font-size: 13px;
  }

  /* 数据表 → 卡片式堆叠：标题做卡片头，其余字段"标签: 值"两端对齐，
     操作单独成行。彻底告别横向滚动和竖排字 */
  .data-table { display: block; border: none; background: none; }
  .data-table thead { display: none; }
  .data-table tbody { display: block; }
  .data-table tr {
    display: block; background: var(--gy-card);
    border: 1px solid var(--gy-line); border-radius: var(--gy-radius);
    padding: 12px 16px 10px; margin-bottom: 10px;
  }
  .data-table td {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 5px 0; font-size: 13.5px; text-align: right;
  }
  .data-table td::before {
    content: attr(data-label);
    color: var(--gy-muted); font-size: 12.5px; flex-shrink: 0;
  }
  /* 标题：卡片头样式，不带标签 */
  .data-table .cell-title {
    display: block; max-width: none; font-size: 15px; line-height: 1.5;
    padding: 0 0 8px; margin-bottom: 5px;
    border-bottom: 1px dashed var(--gy-line);
  }
  .data-table .cell-title::before { content: none; }
  .data-table .cell-time { white-space: normal; }
  /* 操作行：独立分区，允许换行 */
  .data-table .cell-actions {
    display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px 16px;
    padding-top: 8px; margin-top: 4px;
    border-top: 1px dashed var(--gy-line); white-space: normal;
  }
  .data-table .cell-actions::before { content: none; }
  /* 空状态提示：整块居中 */
  .data-table .empty-cell { display: block; text-align: center; }
  .data-table .empty-cell::before { content: none; }
}

/* ---------- 顶栏用户菜单（登录后账号区，三站同款交互） ---------- */
.user-menu { position: relative; }
.user-menu-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--gy-blue); background: none; border: none; cursor: pointer;
  padding: 4px 2px; white-space: nowrap; max-width: 160px;
}
.user-menu-btn .user-avatar { font-size: 15px; }
.user-menu-btn:hover { color: var(--gy-blue-2); }
.user-menu-drop {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  width: 248px; padding: 0; z-index: 120;
  flex-direction: column; overflow: hidden;
  background: var(--gy-card); border: 1px solid var(--gy-line);
  border-radius: 14px; box-shadow: 0 18px 40px rgba(48, 10, 10, .16);
}
/* 悬浮桥：贴着头像下方补一片透明热区，鼠标移向卡片不中断。
   注意不能挂在卡片自身的 ::before 上——卡片 overflow:hidden 会把它裁掉 */
.user-menu::after {
  content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 10px;
}
/* 悬浮展开（CSS）+ 点击固定展开（JS 维护 .open 类）双通道 */
.user-menu:hover .user-menu-drop,
.user-menu.open .user-menu-drop { display: flex; }

/* 卡片头部：问候语 + 身份徽标 */
.um-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background:
    radial-gradient(circle at 90% 20%, rgba(240, 180, 41, .20) 0 44px, transparent 45px),
    linear-gradient(135deg, rgba(217, 35, 50, .10), rgba(240, 180, 41, .12));
  border-bottom: 1px solid var(--gy-line);
}
.um-avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
  background: linear-gradient(135deg, var(--gy-blue), var(--gy-blue-2));
  box-shadow: 0 4px 10px rgba(217, 35, 50, .28);
}
.um-hello { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.um-hello strong {
  font-size: 14px; color: var(--gy-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.um-hello small { font-size: 12px; color: var(--gy-muted); }

/* 功能入口：模块化小卡片，带品牌花纹底 */
.um-grid {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 12px 6px;
}
.um-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--gy-ink);
  background: linear-gradient(135deg, rgba(217, 35, 50, .05), rgba(240, 180, 41, .08));
  border: 1px solid var(--gy-line);
  transition: color .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.um-item:hover {
  color: var(--gy-blue); border-color: var(--gy-blue);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(217, 35, 50, .12);
}
.um-icon {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  background: linear-gradient(135deg, rgba(217, 35, 50, .14), rgba(240, 180, 41, .22));
}
/* 底部：退出登录独立成区 */
.um-foot {
  margin: 6px 12px 12px; padding-top: 10px;
  border-top: 1px dashed var(--gy-line);
}
.um-logout {
  display: block; width: 100%; text-align: center;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--gy-muted); background: none; border: none; cursor: pointer;
  padding: 6px; border-radius: 8px; transition: color .15s, background .15s;
}
.um-logout:hover { color: #d92332; background: rgba(217, 35, 50, .08); }

[data-theme="dark"] .user-menu-drop { box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
[data-theme="dark"] .um-head {
  background:
    radial-gradient(circle at 90% 20%, rgba(245, 196, 83, .10) 0 44px, transparent 45px),
    linear-gradient(135deg, rgba(224, 90, 99, .14), rgba(245, 196, 83, .08));
}
[data-theme="dark"] .um-item {
  background: linear-gradient(135deg, rgba(224, 90, 99, .08), rgba(245, 196, 83, .05));
}
[data-theme="dark"] .um-item:hover {
  color: var(--gy-blue-2); border-color: var(--gy-blue-2);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .um-icon {
  background: linear-gradient(135deg, rgba(224, 90, 99, .20), rgba(245, 196, 83, .12));
}
[data-theme="dark"] .um-logout:hover { color: #ef7a81; background: rgba(224, 90, 99, .12); }

/* 移动端全屏菜单内：平铺展开为菜单项组，不再悬浮定位 */
@media (max-width: 760px) {
  .site-nav .user-menu-btn {
    color: #ffeee4; font-size: 18px; font-weight: 500;
    letter-spacing: 2px; max-width: none; padding: 6px 0;
  }
  .site-nav .user-menu-drop {
    display: flex; position: static; width: auto;
    background: none; border: none; box-shadow: none;
    padding: 0; border-radius: 0; overflow: visible;
  }
  .site-nav .user-menu::after { content: none; }
  .site-nav .um-head { display: none; } /* 移动端菜单已有用户名按钮，问候区省去 */
  .site-nav .um-grid { padding: 0; gap: 0; }
  .site-nav .um-item {
    justify-content: center; padding: 5px 12px;
    color: #e3c9bb; background: none; border: none;
    font-weight: 500; letter-spacing: 2px; box-shadow: none;
  }
  .site-nav .um-item:hover { color: #f5c453; background: none; transform: none; box-shadow: none; }
  .site-nav .um-icon { display: none; }
  .site-nav .um-foot { display: none; } /* 退出已移至菜单底部右侧图标按钮，文字版隐藏 */
}

/* ---------- 账号资料页（三站共用模板，随主题变量变色） ---------- */
.profile-card { width: min(460px, 100%); }
.profile-card textarea { resize: vertical; min-height: 96px; }

/* ---------- 交互组件文字不可选取（全站） ----------
   按钮/导航/标签/表单选择项/可点卡片等交互组件，防止拖动操作时误选文字泛蓝；
   仅作用于交互组件，正文段落、文章、表格数据等内容文字不受影响，仍可选取。 */
button, label, select, summary, nav a,
.btn, .btn-primary, .btn-ghost, .btn-block, .btn-back-list, .lab-btn, .linklike, .more-link,
.site-nav a, .footer-nav a, .banner-back, .article-crumb a, .stage-top a, .console-links a,
.um-item, .member-card, .template-card, .filter-tabs,
.app-tag, .lab-tag, .tag, .lab-switch {
  user-select: none;
  -webkit-user-select: none;
}
/* 豁免：表单输入内容必须保持可选取可编辑（label 禁选会继承进控件） */
input, textarea {
  user-select: text;
  -webkit-user-select: text;
}

/* ---------- 子栏目体系（站点管理 / 发文表单 / 前台展示） ---------- */
/* 前台：板块页栏目筛选条 */
.column-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.column-chip {
  padding: 6px 16px; border-radius: 999px; font-size: 13.5px;
  background: var(--gy-card); border: 1px solid var(--gy-line);
  color: var(--gy-muted); transition: all .18s ease;
}
.column-chip:hover { color: var(--gy-blue); border-color: var(--gy-blue); transform: translateY(-1px); }
.column-chip.on { background: var(--gy-blue); border-color: var(--gy-blue); color: #fff; }
/* 前台：卡片与详情页的子栏目标签 */
.col-tag {
  font-style: normal; font-size: 12px; padding: 1px 8px;
  border-radius: 999px; color: var(--gy-blue);
  background: rgba(179, 18, 31, .08); border: 1px solid rgba(179, 18, 31, .18);
}
[data-theme="dark"] .col-tag { background: rgba(224, 90, 99, .12); border-color: rgba(224, 90, 99, .3); }

/* 控制台：审核列表里的申请徽章 */
.col-request {
  display: inline-block; margin-left: 6px; font-size: 12px;
  padding: 1px 8px; border-radius: 999px;
  color: #92400e; background: #fef3c7; border: 1px solid #fde68a;
}
[data-theme="dark"] .col-request { color: #fbbf24; background: rgba(251, 191, 36, .1); border-color: rgba(251, 191, 36, .35); }

/* 发文表单：子栏目选择器 */
.column-picker .column-mode ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.column-picker .column-mode li label { display: flex; align-items: center; gap: 8px; font-weight: normal; cursor: pointer; }
.column-picker .column-row select,
.column-picker .column-row input[type="text"] { width: 100%; }
.column-picker .col-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--gy-muted); font-style: normal; }

/* 站点管理：栏目增删 */
.page-tip { margin: -6px 0 14px; font-size: 13px; }
.column-create { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
/* .field 默认 margin-bottom 会参与 flex-end 对齐，把输入框抬高、按钮沉底，须清零 */
.column-create .field { min-width: 160px; margin-bottom: 0; }
.column-create .field.grow { flex: 1; min-width: 220px; }
.column-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
@media (max-width: 760px) { .column-groups { grid-template-columns: 1fr; } }
.column-groups h3 { font-size: 15px; margin-bottom: 10px; }
.column-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.column-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--gy-line);
  border-radius: 10px; background: var(--gy-card);
}
.column-list .col-name { font-weight: 600; }
.column-list .col-count { color: var(--gy-muted); font-size: 12.5px; margin-right: auto; }

/* ============================================================
   下载防护 · 验证模态（附件下载前置人机验证，与工坊站同款交互）
   ============================================================ */
/* 下载行从 <a> 改为 <button>：复位浏览器默认字体，外观与原按钮一致 */
button.att-dl { font-family: inherit; }
@keyframes dl-pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.dl-mask {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(30, 8, 8, .5);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.dl-mask[hidden] { display: none; }
.dl-box {
  background: var(--gy-card); border: 1px solid var(--gy-line);
  border-radius: var(--gy-radius); box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  width: min(380px, 88vw); padding: 22px 24px 18px; text-align: center;
  animation: dl-pop .18s ease;
  user-select: none; -webkit-user-select: none;
}
.dl-title { font-size: 15px; font-weight: 700; color: var(--gy-ink); margin: 0 0 6px; }
.dl-sub { font-size: 12.5px; color: var(--gy-muted); margin: 0 0 16px; }
.dl-qa { display: flex; align-items: center; gap: 10px; }
.dl-question {
  flex: 1; min-width: 0; text-align: center;
  font-size: 18px; font-weight: 700; letter-spacing: .06em; color: var(--gy-ink);
  background: rgba(179, 18, 31, .06); border: 1px dashed var(--gy-line);
  border-radius: 10px; padding: 12px 10px; white-space: nowrap;
}
[data-theme="dark"] .dl-question { background: rgba(224, 90, 99, .1); }
.dl-answer {
  width: 86px; flex-shrink: 0; text-align: center;
  font-size: 16px; font-weight: 600; color: var(--gy-ink);
  background: var(--gy-bg); border: 1px solid var(--gy-line);
  border-radius: 10px; padding: 11px 8px; outline: none; transition: .16s;
  user-select: text; -webkit-user-select: text;
}
.dl-answer:focus { border-color: var(--gy-blue); box-shadow: 0 0 0 3px rgba(179, 18, 31, .12); }
[data-theme="dark"] .dl-answer:focus { box-shadow: 0 0 0 3px rgba(224, 90, 99, .18); }
.dl-refresh {
  flex-shrink: 0; width: 40px; height: 42px; border: 1px solid var(--gy-line);
  border-radius: 10px; background: none; cursor: pointer;
  font-size: 17px; color: var(--gy-muted); transition: .16s;
  user-select: none; -webkit-user-select: none;
}
.dl-refresh:hover {
  border-color: var(--gy-blue); color: var(--gy-blue);
  background: rgba(179, 18, 31, .06); transform: rotate(180deg);
}
[data-theme="dark"] .dl-refresh:hover { background: rgba(224, 90, 99, .12); }
.dl-err { font-size: 12.5px; color: #c62828; line-height: 1.7; margin: 12px 0 0; word-break: break-all; }
[data-theme="dark"] .dl-err { color: #ef6a6a; }
.dl-actions { display: flex; gap: 12px; justify-content: center; margin-top: 18px; }
.dl-cancel, .dl-go {
  min-width: 116px; padding: 9px 0; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600; transition: .16s;
  user-select: none; -webkit-user-select: none;
}
.dl-cancel { background: none; border: 1px solid var(--gy-line); color: var(--gy-muted); }
.dl-cancel:hover { border-color: #e8b4b8; color: var(--gy-ink); background: rgba(179, 18, 31, .05); }
[data-theme="dark"] .dl-cancel:hover { border-color: #6b3a3e; background: rgba(224, 90, 99, .08); }
.dl-go { border: none; background: var(--gy-blue); color: #fff; }
.dl-go:hover { filter: brightness(1.12); box-shadow: 0 4px 14px rgba(179, 18, 31, .35); }
.dl-go:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

/* ---------- 控制台 · 站点管理：下载限额卡（仅站长可见） ---------- */
.guard-limit-panel { margin-top: 18px; }
.guard-limit-panel h3 { font-size: 15px; margin-bottom: 8px; }
.guard-limit-tip { margin: 0 0 12px; line-height: 1.8; }
.guard-limit-form { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.guard-limit-form label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--gy-muted); white-space: nowrap;
}
.guard-limit-form input {
  width: 72px; text-align: center; font-size: 13px; font-weight: 600;
  color: var(--gy-ink); background: var(--gy-bg);
  border: 1px solid var(--gy-line); border-radius: 8px;
  padding: 7px 6px; outline: none; transition: .16s;
}
.guard-limit-form input:focus { border-color: var(--gy-blue); }