/* 所有页面都为滚动条预留位置：有无滚动条时导航宽度与位置保持一致（Windows 等经典滚动条） */
html{scrollbar-gutter:stable}
:root,
[data-theme="dark"]{
  --ccg-nav-bg:#000;
  --ccg-nav-border:#202020;
  --ccg-nav-text:#f5f5f5;
  --ccg-nav-muted:#b8b8b8;
  --ccg-nav-hover:#1f1f1f;
  --ccg-nav-active:#242424;
}
[data-theme="light"]{
  --ccg-nav-bg:#fff;
  --ccg-nav-border:#e5e7eb;
  --ccg-nav-text:#111827;
  --ccg-nav-muted:#4b5563;
  --ccg-nav-hover:#f3f4f6;
  --ccg-nav-active:#eef0f4;
}
html body .nav.ccg-global-nav{
  height:56px!important;
  min-height:56px!important;
  background:var(--ccg-nav-bg)!important;
  border-bottom:1px solid var(--ccg-nav-border)!important;
  color:var(--ccg-nav-text)!important;
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  padding:0 20px!important;
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
html body .ccg-global-nav .nav-logo{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  width:132px!important;
  min-width:132px!important;
  max-width:132px!important;
  height:40px!important;
  padding:0 10px!important;
  border-radius:10px!important;
  background:transparent!important;
  border:0!important;
  color:var(--ccg-nav-text)!important;
  text-decoration:none!important;
  font-size:16px!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:0!important;
  margin:0 4px 0 0!important;
  opacity:1!important;
  filter:none!important;
  box-shadow:none!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
html body .ccg-global-nav .nav-logo:hover{
  background:transparent!important;
  color:var(--ccg-nav-text)!important;
}
html body .ccg-global-nav .nav-logo img{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  min-height:28px!important;
  max-width:28px!important;
  max-height:28px!important;
  border-radius:7px!important;
  display:block!important;
  object-fit:cover!important;
  opacity:1!important;
  filter:brightness(1) saturate(1)!important;
  box-shadow:none!important;
  background:transparent!important;
  flex:0 0 28px!important;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),filter .18s ease!important;
}
html body .ccg-global-nav .nav-logo:hover img{
  transform:scale(1.08) rotate(-2deg)!important;
  filter:brightness(1.14) saturate(1.1)!important;
}
html body .ccg-global-nav .nav-logo span{
  display:inline-block!important;
  color:inherit!important;
  font:inherit!important;
  line-height:1!important;
}
html body .ccg-global-nav .nav-logo b{
  color:#c4b5fd!important;
  font:inherit!important;
}
html body .ccg-global-nav .nav-right{
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  height:34px!important;
}
html body .ccg-global-nav .nav-btn,
html body .ccg-global-nav .ccg-account-link{
  height:34px!important;
  min-height:34px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  border:1px solid transparent!important;
  background:transparent!important;
  color:var(--ccg-nav-muted)!important;
  box-shadow:none!important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:600!important;
  text-decoration:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  cursor:pointer!important;
  white-space:nowrap!important;
}
html body .ccg-global-nav .nav-btn:hover,
html body .ccg-global-nav .nav-btn.nav-btn-active,
html body .ccg-global-nav .ccg-account-link:hover,
html body .ccg-global-nav .ccg-account-link.is-current{
  background:var(--ccg-nav-active)!important;
  border-color:transparent!important;
  color:var(--ccg-nav-text)!important;
  box-shadow:none!important;
}
html body .ccg-global-nav .theme-toggle,
html body .ccg-global-nav .nav-mini{
  width:34px!important;
  min-width:34px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0!important;
  border-radius:999px!important;
  border:1px solid transparent!important;
  background:transparent!important;
  color:var(--ccg-nav-muted)!important;
  box-shadow:none!important;
  display:inline-grid!important;
  place-items:center!important;
  cursor:pointer!important;
}
html body .ccg-global-nav .theme-toggle:hover,
html body .ccg-global-nav .nav-mini:hover{
  background:var(--ccg-nav-hover)!important;
  color:var(--ccg-nav-text)!important;
}
html body .ccg-global-nav .theme-toggle svg{
  width:16px!important;
  height:16px!important;
  stroke:currentColor!important;
  stroke-width:2!important;
  fill:none!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  pointer-events:none!important;
}
html body .ccg-global-nav .ccg-avatar{
  width:26px!important;
  height:26px!important;
  min-width:26px!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(135deg,#7c3aed,#8b5cf6)!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:900!important;
  box-shadow:none!important;
}
html body .ccg-global-nav .nav-sub,
html body .ccg-global-nav .lang-toggle{
  display:none!important;
}

/* Unified CCG form selects.
   Native select popups remain browser-controlled, but the closed field must match the paint UI. */
:root,
[data-theme="dark"]{
  --ccg-select-bg:var(--panel2, var(--surface2, #202020));
  --ccg-select-border:var(--line, var(--border, #2c2c2c));
  --ccg-select-text:var(--text, #f5f5f5);
  --ccg-select-muted:var(--muted, var(--text-muted, #b8b8b8));
  --ccg-select-focus:rgba(124,58,237,.68);
  --ccg-select-ring:rgba(124,58,237,.16);
  --ccg-select-option-bg:var(--panel, var(--surface, #161616));
}
[data-theme="light"]{
  --ccg-select-bg:#ffffff;
  --ccg-select-border:#e5e7eb;
  --ccg-select-text:#111827;
  --ccg-select-muted:#4b5563;
  --ccg-select-focus:rgba(124,58,237,.58);
  --ccg-select-ring:rgba(124,58,237,.12);
  --ccg-select-option-bg:#ffffff;
}
html body select,
html body .select,
html body .ps-select,
html body .model-sel,
html body .toolbar-select,
html body .custom-select{
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  box-sizing:border-box!important;
  border:1px solid var(--ccg-select-border)!important;
  border-radius:12px!important;
  background-color:var(--ccg-select-bg)!important;
  color:var(--ccg-select-text)!important;
  box-shadow:none!important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1.2!important;
  letter-spacing:0!important;
  outline:none!important;
}
html body select{
  appearance:none!important;
  -webkit-appearance:none!important;
  padding:0 36px 0 12px!important;
  cursor:pointer!important;
  background-image:
    linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%)!important;
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%!important;
  background-size:5px 5px,5px 5px!important;
  background-repeat:no-repeat!important;
}
html body select::-ms-expand{
  display:none!important;
}
html body select:hover,
html body .select:hover,
html body .ps-select:hover,
html body .model-sel:hover,
html body .toolbar-select:hover,
html body .custom-select:hover{
  border-color:var(--ccg-select-focus)!important;
}
html body select:focus,
html body .select:focus,
html body .ps-select:focus,
html body .model-sel:focus,
html body .toolbar-select:focus,
html body .custom-select:focus{
  border-color:var(--ccg-select-focus)!important;
  box-shadow:0 0 0 3px var(--ccg-select-ring)!important;
}
html body select option{
  background:var(--ccg-select-option-bg)!important;
  color:var(--ccg-select-text)!important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif!important;
  font-size:13px!important;
}
@media(max-width:900px){
  html body .nav.ccg-global-nav{padding:0 12px!important;gap:8px!important}
  html body .ccg-global-nav .nav-logo{width:auto!important;min-width:0!important;max-width:none!important;padding:0!important}
  html body .ccg-global-nav .nav-btn:not(.nav-btn-active){display:none!important}
  html body .ccg-global-nav .nav-right{gap:6px!important}
  html body .ccg-global-nav .ccg-account-link span:last-child{max-width:92px;overflow:hidden;text-overflow:ellipsis}

  /* 触控目标 >=44px (WCAG 2.5.5)。导航栏 56px 高, 44px 控件仍余 12px, 不撑高导航 */
  html body .ccg-global-nav .nav-btn,
  html body .ccg-global-nav .ccg-account-link,
  html body .ccg-global-nav .ccg-topup-link,
  html body .ccg-global-nav .ccg-message-btn,
  html body .ccg-global-nav .lang-toggle,
  html body .ccg-global-nav .theme-toggle,
  html body .ccg-global-nav .nav-mini{
    min-height:44px!important;
    height:44px!important;
  }
  html body .ccg-global-nav .ccg-message-btn,
  html body .ccg-global-nav .lang-toggle,
  html body .ccg-global-nav .theme-toggle,
  html body .ccg-global-nav .nav-mini{
    min-width:44px!important;
    width:44px!important;
  }
  /* .nav-right 容器原为 height:34px 硬约束, 会压住子控件, 必须一起放开 */
  html body .ccg-global-nav .nav-right{
    height:auto!important;
    min-height:44px!important;
  }
  /* 图标本身不放大, 只扩大可点区域 */
  html body .ccg-global-nav .theme-toggle svg,
  html body .ccg-global-nav .lang-toggle svg,
  html body .ccg-global-nav .ccg-message-btn svg{
    width:18px!important;height:18px!important;
  }
  /* 键盘焦点可见 */
  html body .ccg-global-nav a:focus-visible,
  html body .ccg-global-nav button:focus-visible{
    outline:2px solid currentColor!important;
    outline-offset:2px!important;
  }
}

/* 2026-10-07 brand logo fit: the cartoon CCG mark needs 32px to read; its own tile is rounded (27/120), so the clip
   matches that radius, and a faint violet ring lifts the dark tile off the black bar. Text grows to balance it and
   "AI" takes the mark's lavender. Later rules win over the same selectors above. */
html body .ccg-global-nav .nav-logo{
  gap:9px!important;
  width:142px!important;
  min-width:142px!important;
  max-width:142px!important;
  padding:0 8px!important;
  font-size:17px!important;
  letter-spacing:-.01em!important;
}
html body .ccg-global-nav .nav-logo img{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  min-height:32px!important;
  max-width:32px!important;
  max-height:32px!important;
  flex:0 0 32px!important;
  border-radius:7.2px!important;
  object-fit:contain!important;
  box-shadow:0 0 0 1px rgba(196,184,255,.22),0 6px 16px -6px rgba(124,92,255,.7)!important;
}
html body .ccg-global-nav .nav-logo:hover img{
  transform:translateY(-1px) scale(1.04)!important;
  filter:brightness(1.08)!important;
}
html body .ccg-global-nav .nav-logo b{
  color:#c4b8ff!important;
  font-weight:inherit!important;
}
@media (max-width:768px){
  html body .ccg-global-nav .nav-logo{width:auto!important;min-width:0!important;max-width:none!important;padding:0!important}
}

/* 2026-10-07 UI refresh: frosted nav bar, a softer active pill with an accent underline, and a dropdown menu
   for narrow screens (before this, phones only saw the current page's link). Appended; rules above stay as-is. */
:root,
[data-theme="dark"]{
  --ccg-nav-bg:rgba(5,5,8,.96);
  --ccg-nav-border:rgba(255,255,255,.07);
  --ccg-nav-muted:#a3a3b4;
  --ccg-nav-hover:rgba(255,255,255,.06);
  --ccg-nav-active:rgba(139,123,255,.14);
  --ccg-nav-accent:#c4b8ff;
  --ccg-nav-panel:#111118;
}
[data-theme="light"]{
  --ccg-nav-bg:rgba(255,255,255,.94);
  --ccg-nav-border:rgba(17,17,34,.08);
  --ccg-nav-muted:#5c5c70;
  --ccg-nav-hover:rgba(17,17,34,.05);
  --ccg-nav-active:rgba(106,88,240,.10);
  --ccg-nav-accent:#5a48e0;
  --ccg-nav-panel:#ffffff;
}
html body .nav.ccg-global-nav{
  height:60px!important;
  min-height:60px!important;
  padding:0 24px!important;
  -webkit-backdrop-filter:saturate(1.6) blur(16px)!important;
  backdrop-filter:saturate(1.6) blur(16px)!important;
}
html body .ccg-global-nav .nav-right{gap:4px!important}
html body .ccg-global-nav .nav-btn{
  position:relative!important;
  padding:0 13px!important;
  font-size:14px!important;
  font-weight:550!important;
  transition:background .16s ease,color .16s ease!important;
}
html body .ccg-global-nav .nav-btn:hover{
  background:var(--ccg-nav-hover)!important;
}
html body .ccg-global-nav .nav-btn.nav-btn-active{
  background:var(--ccg-nav-active)!important;
  color:var(--ccg-nav-text)!important;
  font-weight:650!important;
}
html body .ccg-global-nav .theme-toggle{margin-left:6px!important}
html body .ccg-global-nav .ccg-account-link{
  margin-left:4px!important;
  padding:0 14px 0 4px!important;
  border:1px solid var(--ccg-nav-border)!important;
  background:var(--ccg-nav-hover)!important;
  color:var(--ccg-nav-text)!important;
}
html body .ccg-global-nav .ccg-account-link:not(:has(.ccg-avatar)){padding:0 16px!important}
html body .ccg-global-nav .ccg-account-link:hover{border-color:rgba(139,123,255,.45)!important}
html body .ccg-global-nav .ccg-avatar{background:linear-gradient(135deg,#9a8bff,#6f5cf5)!important}

html body .ccg-global-nav .ccg-menu-btn{
  display:none;
  width:44px;height:44px;padding:0;border-radius:12px;border:1px solid transparent;
  background:transparent;color:var(--ccg-nav-text);cursor:pointer;place-items:center;
}
html body .ccg-global-nav .ccg-menu-btn:hover{background:var(--ccg-nav-hover)}
html body .ccg-global-nav .ccg-menu-btn svg{
  width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;pointer-events:none;
}
html body .ccg-global-nav .ccg-menu-panel{display:none}
@media(max-width:900px){
  html body .nav.ccg-global-nav{padding:0 10px 0 14px!important}
  html body .ccg-global-nav .ccg-menu-btn{display:inline-grid}
  html body .ccg-global-nav .nav-btn.nav-btn-active{display:none!important}
  html body .ccg-global-nav .theme-toggle{margin-left:0!important}
  html body .ccg-global-nav .ccg-menu-panel:not([hidden]){
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;
    position:absolute;top:calc(100% + 1px);left:0;right:0;padding:12px 14px 16px;
    background:var(--ccg-nav-panel);border-bottom:1px solid var(--ccg-nav-border);
    box-shadow:0 24px 40px -20px rgba(0,0,0,.55);
    animation:ccgMenuIn .18s ease-out;
  }
  html body .ccg-global-nav .ccg-menu-link{
    display:flex;align-items:center;height:46px;padding:0 14px;border-radius:12px;
    font-size:15px;font-weight:600;color:var(--ccg-nav-text);text-decoration:none;
    background:var(--ccg-nav-hover);border:1px solid transparent;
  }
  html body .ccg-global-nav .ccg-menu-link.is-active{
    background:var(--ccg-nav-active);border-color:rgba(139,123,255,.35);color:var(--ccg-nav-accent);
  }
}
@keyframes ccgMenuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
[data-theme="light"] .ccg-global-nav .nav-logo b,
html[data-theme="light"] body .ccg-global-nav .nav-logo b{color:#6a58f0!important}

/* 导航底色不透明：不同页面背景不会透上来，所有页面导航颜色完全一致。
   2026-10-08 导航重设计：居中的胶囊链接组 + 滑动高亮块、右侧登录/注册、毛玻璃背景、滚动后加深。追加覆盖，以上规则保留。 */
:root,[data-theme="dark"]{
  --ccg-nav-bg:#08080d;
  --ccg-nav-bg-scrolled:#08080d;
  --ccg-nav-border:rgba(255,255,255,.07);
  --ccg-group-bg:rgba(255,255,255,.035);
  --ccg-group-border:rgba(255,255,255,.07);
  --ccg-ind-bg:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.05));
  --ccg-ind-ring:inset 0 0 0 1px rgba(255,255,255,.09),0 6px 16px -8px rgba(0,0,0,.7);
  --ccg-ind-active:linear-gradient(180deg,rgba(150,134,255,.30),rgba(124,108,255,.16));
  --ccg-ind-active-ring:inset 0 0 0 1px rgba(170,156,255,.35),0 8px 20px -10px rgba(124,108,255,.8);
}
[data-theme="light"]{
  --ccg-nav-bg:#fdfdff;
  --ccg-nav-bg-scrolled:#fdfdff;
  --ccg-nav-border:rgba(17,17,34,.07);
  --ccg-group-bg:rgba(17,17,34,.035);
  --ccg-group-border:rgba(17,17,34,.06);
  --ccg-ind-bg:#ffffff;
  --ccg-ind-ring:0 0 0 1px rgba(17,17,34,.06),0 1px 3px rgba(17,17,34,.08);
  --ccg-ind-active:#ffffff;
  --ccg-ind-active-ring:0 0 0 1px rgba(106,88,240,.22),0 2px 8px -2px rgba(106,88,240,.28);
}
html body nav.ccg-global-nav{
  height:64px!important;min-height:64px!important;padding:0 28px!important;
  background:var(--ccg-nav-bg)!important;border-bottom:1px solid var(--ccg-nav-border)!important;
  -webkit-backdrop-filter:saturate(1.7) blur(18px)!important;backdrop-filter:saturate(1.7) blur(18px)!important;
  transition:background .25s ease,box-shadow .25s ease!important;
}
html body nav.ccg-global-nav.is-scrolled{
  background:var(--ccg-nav-bg-scrolled)!important;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.55)!important;
}
[data-theme="light"] body nav.ccg-global-nav.is-scrolled{box-shadow:0 8px 24px -16px rgba(40,30,120,.25)!important}
html body nav.ccg-global-nav .nav-right{height:auto!important;gap:6px!important;flex:1!important}
html body nav.ccg-global-nav .ccg-links{
  position:relative;display:flex;align-items:center;gap:2px;margin:0 auto;padding:4px;border-radius:999px;
  background:var(--ccg-group-bg);border:1px solid var(--ccg-group-border);
}
@media (min-width:1240px){
  html body nav.ccg-global-nav .ccg-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
  html body nav.ccg-global-nav .theme-toggle{margin-left:auto!important}
}
html body nav.ccg-global-nav .ccg-ind{
  position:absolute;left:0;top:4px;height:calc(100% - 8px);width:0;border-radius:999px;pointer-events:none;opacity:0;
  background:var(--ccg-ind-bg);box-shadow:var(--ccg-ind-ring);
  transition:transform .38s cubic-bezier(.3,.75,.2,1),width .38s cubic-bezier(.3,.75,.2,1),background .25s,box-shadow .25s,opacity .2s;
}
html body nav.ccg-global-nav .ccg-ind.is-active{background:var(--ccg-ind-active);box-shadow:var(--ccg-ind-active-ring)}
html body nav.ccg-global-nav .ccg-links .nav-btn{
  position:relative!important;z-index:1!important;height:34px!important;min-height:34px!important;padding:0 15px!important;
  background:transparent!important;border:0!important;box-shadow:none!important;
  font-size:14px!important;font-weight:500!important;letter-spacing:.01em!important;color:var(--ccg-nav-muted)!important;
  transition:color .2s ease!important;
}
html body nav.ccg-global-nav .ccg-links .nav-btn:hover{background:transparent!important;color:var(--ccg-nav-text)!important}
html body nav.ccg-global-nav .ccg-links .nav-btn.nav-btn-active{background:transparent!important;color:var(--ccg-nav-text)!important;font-weight:650!important}
[data-theme="light"] body nav.ccg-global-nav .ccg-links .nav-btn.nav-btn-active{color:#4a38d8!important}
html body nav.ccg-global-nav .theme-toggle{width:36px!important;height:36px!important;min-width:36px!important;border-radius:10px!important}
html body nav.ccg-global-nav .ccg-account-link{
  height:36px!important;min-height:36px!important;margin-left:2px!important;padding:0 14px!important;
  border:0!important;background:transparent!important;color:var(--ccg-nav-text)!important;font-size:14px!important;font-weight:600!important;border-radius:10px!important;
}
html body nav.ccg-global-nav .ccg-account-link:hover{background:var(--ccg-nav-hover)!important}
html body nav.ccg-global-nav .ccg-account-link.is-current{padding:0 12px 0 4px!important;border:1px solid var(--ccg-nav-border)!important;background:var(--ccg-nav-hover)!important;border-radius:999px!important}
html body nav.ccg-global-nav .ccg-cta{
  display:inline-flex;align-items:center;height:36px;padding:0 18px;border-radius:10px;text-decoration:none;white-space:nowrap;
  font-size:14px;font-weight:650;color:#fff;
  background:linear-gradient(180deg,#9483ff,#7462fa);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 8px 20px -10px rgba(124,108,255,.9);
  transition:transform .16s ease,box-shadow .16s ease;
}
html body nav.ccg-global-nav .ccg-cta:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 12px 24px -10px rgba(124,108,255,1)}
html body nav.ccg-global-nav .ccg-cta[hidden]{display:none}
@media (max-width:900px){
  html body nav.ccg-global-nav{height:60px!important;min-height:60px!important;padding:0 10px 0 14px!important}
  html body nav.ccg-global-nav .ccg-links,html body nav.ccg-global-nav .ccg-cta{display:none!important}
  html body nav.ccg-global-nav .nav-right{justify-content:flex-end!important}
  html body nav.ccg-global-nav .ccg-account-link{height:44px!important;min-height:44px!important}
}


/* 2026-10-08 导航随屏幕缩放：--nav-u 由 ccg-nav.js 计算（首页由一屏适配脚本统一设置） */
html.ccg-fit body nav.nav.ccg-global-nav,html.ccg-navfit body nav.nav.ccg-global-nav{height:calc(var(--nav-u) * 60px)!important;min-height:calc(var(--nav-u) * 60px)!important;padding-left:calc(var(--nav-u) * 24px)!important;padding-right:calc(var(--nav-u) * 24px)!important}
html.ccg-fit body nav.nav.ccg-global-nav .nav-logo,html.ccg-navfit body nav.nav.ccg-global-nav .nav-logo{font-size:calc(var(--nav-u) * 17px)!important;width:calc(var(--nav-u) * 142px)!important;min-width:calc(var(--nav-u) * 142px)!important;max-width:calc(var(--nav-u) * 142px)!important;gap:calc(var(--nav-u) * 9px)!important}
html.ccg-fit body nav.nav.ccg-global-nav .nav-logo img,html.ccg-navfit body nav.nav.ccg-global-nav .nav-logo img{width:calc(var(--nav-u) * 32px)!important;min-width:calc(var(--nav-u) * 32px)!important;max-width:calc(var(--nav-u) * 32px)!important;height:calc(var(--nav-u) * 32px)!important;min-height:calc(var(--nav-u) * 32px)!important;max-height:calc(var(--nav-u) * 32px)!important;border-radius:calc(var(--nav-u) * 7.2px)!important;flex:0 0 calc(var(--nav-u) * 32px)!important}
html.ccg-fit body nav.nav.ccg-global-nav .ccg-links,html.ccg-navfit body nav.nav.ccg-global-nav .ccg-links{padding:calc(var(--nav-u) * 4px)!important;gap:calc(var(--nav-u) * 2px)!important}
html.ccg-fit body nav.nav.ccg-global-nav .ccg-links .nav-btn,html.ccg-navfit body nav.nav.ccg-global-nav .ccg-links .nav-btn{height:calc(var(--nav-u) * 34px)!important;min-height:calc(var(--nav-u) * 34px)!important;padding-inline:calc(var(--nav-u) * 15px)!important;font-size:calc(var(--nav-u) * 14px)!important}
html.ccg-fit body nav.nav.ccg-global-nav .theme-toggle,html.ccg-navfit body nav.nav.ccg-global-nav .theme-toggle{width:calc(var(--nav-u) * 36px)!important;min-width:calc(var(--nav-u) * 36px)!important;height:calc(var(--nav-u) * 36px)!important;min-height:calc(var(--nav-u) * 36px)!important;border-radius:calc(var(--nav-u) * 10px)!important}
html.ccg-fit body nav.nav.ccg-global-nav .theme-toggle svg,html.ccg-navfit body nav.nav.ccg-global-nav .theme-toggle svg{width:calc(var(--nav-u) * 16px)!important;height:calc(var(--nav-u) * 16px)!important}
html.ccg-fit body nav.nav.ccg-global-nav .ccg-account-link,html.ccg-navfit body nav.nav.ccg-global-nav .ccg-account-link{height:calc(var(--nav-u) * 36px)!important;min-height:calc(var(--nav-u) * 36px)!important;padding-inline:calc(var(--nav-u) * 16px)!important;font-size:calc(var(--nav-u) * 14px)!important;border-radius:calc(var(--nav-u) * 10px)!important}
html.ccg-fit body nav.nav.ccg-global-nav .ccg-cta,html.ccg-navfit body nav.nav.ccg-global-nav .ccg-cta{height:calc(var(--nav-u) * 36px)!important;min-height:calc(var(--nav-u) * 36px)!important;padding-inline:calc(var(--nav-u) * 18px)!important;font-size:calc(var(--nav-u) * 14px)!important;border-radius:calc(var(--nav-u) * 10px)!important}

/* 2026-10-08 防闪：导航脚本装好之前先占住导航的位置和底色；同站页面切换用淡入淡出过渡，导航保持不动 */
html:not(.ccg-nav-ready) body::before{content:"";display:block;flex:none;height:60px;background:var(--ccg-nav-bg);border-bottom:1px solid var(--ccg-nav-border);position:sticky;top:0;z-index:1000}
html.ccg-navfit:not(.ccg-nav-ready) body::before{height:calc(60px * var(--nav-u,1))}
html.ccg-nav-ready body nav.nav:not(.ccg-global-nav){display:none!important}
@view-transition{navigation:auto}
html body nav.ccg-global-nav{view-transition-name:ccg-nav}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s;animation-timing-function:ease}
::view-transition-group(ccg-nav){animation:none}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
