/* 共享页面留白与弹性导航。 */
main { flex: 1; max-width: var(--site-stage-max); width: calc(100% - (var(--site-stage-gutter) * 2)); margin: clamp(var(--space-5), 4vw, var(--space-7)) auto; padding: 0; box-sizing: border-box; }
footer { background: var(--footer-bg); color: var(--footer-text); padding: var(--space-7) clamp(var(--page-padding), 4vw, 64px) 26px; margin-top: auto; border: 0; }
.footer-content { max-width: 1232px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 30px; }
.footer-section h4 { color: var(--footer-heading); margin: 0 0 16px; font-size: 15px; font-weight: 500; }
.footer-section p, .footer-section li { font-size: 12px; line-height: 1.9; }
.copyright { text-align: center; margin-top: 32px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: 11px; color: var(--footer-text); }
footer p, footer li, footer a { color: var(--footer-text) !important; }
footer a:hover { color: #fff !important; }
.lang-switch, .theme-switch { border-color: transparent; background: var(--light-gray); border-radius: 20px; }
.login-trigger { border: 0; background: var(--primary-dark); color: var(--logo-text); border-radius: 20px; min-height: 36px; }
.login-trigger:hover { color: var(--logo-text); }
:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 4px; }
/* 全站内页沿用首页品牌导航和 A/B 主题切换。 */
.site-header { position: sticky; top: 0; z-index: 100; padding: 0 24px; background: var(--header-bg); box-shadow: var(--header-shadow); }
body:has(.dev-sidebar:not(.hidden)) .site-header { padding-left: 172px; }
.site-header .home-nav-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px; max-width: 1440px; min-height: 72px; margin: 0 auto; }
.site-header .home-brand { display: flex; align-items: center; gap: 12px; color: var(--ink-color); text-decoration: none; }
.site-header .home-brand strong { color: var(--ink-color); font-family: var(--font-family-display); font-size: 26px; font-weight: 600; }
.site-header .home-brand > span { padding-left: 12px; border-left: 1px solid var(--line-color); color: var(--muted-color); font-size: 11px; white-space: nowrap; }
.site-header .home-brand .brand-short { display: none; }
.site-header .home-brand strong span { display: inline; padding: 0; border: 0; color: inherit; font-size: inherit; white-space: normal; }
.site-header .home-nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.site-header .home-nav-links a { color: var(--text-color); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.site-header .home-nav-links a:hover { color: var(--primary-color); }
.site-header .home-nav-actions { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.site-header .home-lang-switch { display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px; border: 1px solid var(--line-color); border-radius: 999px; background: var(--paper-color); }
.site-header .home-lang-switch .lang-btn { padding: 3px 4px; border: 0; background: transparent; color: var(--muted-color); font: 500 10px var(--font-family-base); cursor: pointer; }
.site-header .home-lang-switch .lang-btn.active { color: var(--ink-color); font-weight: 700; }
.site-header .home-lang-switch .divider { display: none; }
.site-header .language-menu { position: static; flex: 0 0 auto; }
.site-header .language-menu summary { display: flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 11px; border: 1px solid var(--line-color); border-radius: 999px; background: var(--paper-color); color: var(--ink-color); font-size: 11px; font-weight: 600; list-style: none; cursor: pointer; white-space: nowrap; }
.site-header .language-menu summary::-webkit-details-marker { display: none; }
.site-header .language-menu-globe { width: 15px; height: 15px; fill: none; stroke: var(--primary-color); stroke-width: 1.25; stroke-linecap: round; }
.site-header .language-menu summary svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .18s ease; }
.site-header .language-menu-globe { width: 15px; height: 15px; }
.site-header .language-menu[open] summary > svg:last-child { transform: rotate(180deg); }
.site-header .language-menu-panel { position: absolute; top: calc(100% + 9px); right: 0; z-index: 120; box-sizing: border-box; width: min(286px, calc(100vw - 24px)); max-height: min(70vh, 440px); overflow: auto; padding: 7px; border: 1px solid var(--line-color); border-radius: 16px; background: var(--paper-color); box-shadow: 0 16px 42px rgba(22, 38, 58, .16); }
.site-header .language-menu-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 39px; padding: 0 10px; border-radius: 10px; color: var(--text-color); font-size: 12px; text-decoration: none; }
.site-header .language-menu-option[href]:hover { background: var(--light-gray); color: var(--primary-color); }
.site-header .language-menu-option.is-current { background: color-mix(in srgb, var(--primary-color) 9%, var(--paper-color)); color: var(--ink-color); font-weight: 650; }
.site-header .language-menu-option.is-pending { color: var(--muted-color); cursor: default; }
.site-header .language-menu-status { color: var(--muted-color); font-size: 10px; font-weight: 400; white-space: nowrap; }
.site-header .language-menu-option.is-pending .language-menu-status { opacity: .8; }
.site-header .language-menu-local { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 8px 10px 2px; border-top: 1px solid var(--line-color); color: var(--muted-color); font-size: 10px; }
.site-header .language-menu-local span { margin-right: auto; }
.site-header .language-menu-local button { min-width: 28px; height: 25px; border: 1px solid var(--line-color); border-radius: 7px; background: var(--paper-color); color: var(--text-color); font-size: 11px; cursor: pointer; }
.site-header .language-menu-local button:hover { border-color: var(--primary-color); color: var(--primary-color); }
.site-header .language-menu-local .lang-btn.active { border-color: var(--primary-color); background: var(--primary-color); color: var(--button-text); }
.site-header .home-style-switch { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line-color); border-radius: 999px; background: var(--light-gray); }
.site-header .home-style-switch .theme-btn { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted-color); cursor: pointer; }
.site-header .home-style-switch .theme-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.site-header .home-style-switch .theme-btn.active { background: var(--button-bg); color: var(--button-text); }
.site-header .home-login { min-width: 72px; min-height: 38px; padding: 0 16px; border: 1px solid var(--button-bg); border-radius: 999px; background: var(--button-bg); color: var(--button-text); font-weight: 600; cursor: pointer; }
.site-header .home-login:hover { background: var(--button-hover); }
body:has(.dev-sidebar:not(.hidden)) main,
body:has(.dev-sidebar:not(.hidden)) footer { margin-left: 172px; }
body:has(.dev-sidebar:not(.hidden)) main { width: calc(100% - 172px - (var(--site-stage-gutter) * 2)); }
body:has(.dev-sidebar:not(.hidden)) main { margin-left: calc(172px + var(--site-stage-gutter)); }
body:has(.dev-sidebar:not(.hidden)) footer:not(.home-footer) { width: calc(100% - 172px); }
body:not(.home-page):has(.dev-sidebar:not(.hidden)) main,
body:not(.home-page):has(.dev-sidebar:not(.hidden)) footer { margin-left: 172px; }
body:not(.home-page):has(.dev-sidebar:not(.hidden)) main { margin-left: calc(172px + var(--site-stage-gutter)); }
body:not(.home-page) .dev-sidebar ~ .dev-sidebar-expand-btn ~ #authModal,
body:not(.home-page) #authModal { position: fixed; }
body:not(.home-page) footer:not(.home-footer) { background: var(--footer-bg); color: var(--footer-text); }
.site-footer { width: 100%; box-sizing: border-box; margin-top: auto; padding: 24px clamp(var(--page-padding), 4vw, 64px); }
.site-footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; max-width: 1440px; margin: 0 auto; }
.site-footer-brand { color: var(--footer-heading); font-family: var(--font-family-display); font-size: 17px; text-decoration: none; }
.site-footer-brand span { margin-left: 9px; color: var(--footer-text); font-family: var(--font-family-base); font-size: 11px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.site-footer nav a { color: var(--footer-text); font-size: 12px; text-decoration: none; }
.site-footer nav a:hover { color: var(--secondary-color); }
.site-footer small { justify-self: end; color: var(--footer-text); font-size: 10px; text-align: right; }
.site-header .home-user-section { display: flex; align-items: center; }
.site-header .home-user-info { display: flex; align-items: center; gap: 8px; }
.site-header .site-user-quota { color: var(--muted-color); font-size: 11px; }
@media (max-width: 1280px) {
    .site-header .home-nav-inner { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
    .site-header .home-brand > span { display: none; }
    .site-header .home-nav-links { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 24px; padding-bottom: 12px; }
    .site-header .home-nav-actions { grid-column: 2; grid-row: 1; min-width: 0; }
    body:has(.dev-sidebar:not(.hidden)) .site-header { padding-left: 172px; }
    .nav-container { flex-wrap: wrap; gap: 12px 20px; padding: 16px 0; }
    .nav-container nav { order: 3; flex-basis: 100%; margin: 0; }
    .nav-container nav ul { gap: 26px; }
    .nav-actions { margin-left: auto; gap: 8px; }
    .logo a { font-size: 18px; }
}
@media (max-width: 860px) {
    body:has(.dev-sidebar:not(.hidden)) main,
    body:has(.dev-sidebar:not(.hidden)) footer { margin-left: 0; }
    body:has(.dev-sidebar:not(.hidden)) main { width: calc(100% - (var(--site-stage-gutter) * 2)); }
    body:not(.home-page):has(.dev-sidebar:not(.hidden)) main,
body:not(.home-page):has(.dev-sidebar:not(.hidden)) footer { margin-left: 0; }
    body:not(.home-page):has(.dev-sidebar:not(.hidden)) main { width: calc(100% - (var(--site-stage-gutter) * 2)); }
    body:not(.home-page):has(.dev-sidebar:not(.hidden)) main { margin-left: auto; }
    body:has(.dev-sidebar:not(.hidden)) footer:not(.home-footer) { width: 100%; }
    .site-header .home-nav-inner { grid-template-columns: 1fr auto; min-height: 68px; gap: 8px; }
    body:has(.dev-sidebar:not(.hidden)) .site-header { padding-left: 20px; }
    .site-header .home-nav-links { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 8px 24px; padding-bottom: 12px; }
    .site-header .home-nav-actions { grid-column: 2; grid-row: 1; }
    .site-header .home-lang-switch { gap: 1px; }
    .site-header .home-lang-switch .lang-btn { padding: 3px 2px; font-size: 9px; }
    body.home-page .home-footer { flex-wrap: wrap; justify-content: center; gap: 8px 14px; }
    body.home-page .home-footer .footer-brand { display: none; }
    body.home-page .home-footer nav { flex-wrap: wrap; justify-content: center; min-width: 0; }
    body.home-page .home-footer small { width: 100%; text-align: center; }
}
@media (max-width: 860px) {
    header, body:has(.dev-sidebar:not(.hidden)) header { padding: 0 20px; }
    main, body:has(.dev-sidebar:not(.hidden)) main { padding: 0; }
    .dev-sidebar-expand-btn { display: none !important; }
    .site-footer-inner { grid-template-columns: 1fr 1fr; }
    .site-footer nav { grid-column: 1 / -1; grid-row: 2; }
    .site-footer small { grid-column: 2; grid-row: 1; }
    .user-info { flex-wrap: wrap; gap: 4px; max-width: 150px; }
    #userQuota { display: none !important; }
}
@media (max-width: 520px) {
    .site-header { padding: 0 12px; }
    body:has(.dev-sidebar:not(.hidden)) .site-header { padding-left: 12px; }
    .site-header .home-brand > span { display: none; }
    .site-header .home-brand .brand-full { display: none; }
    .site-header .home-brand .brand-short { display: inline; }
    .site-header .home-nav-actions { gap: 7px; }
    .site-header .home-lang-switch { padding: 2px 3px; }
    .site-header .home-lang-switch .lang-btn { font-size: 8px; }
    .site-header .home-style-switch .theme-btn { width: 27px; height: 27px; }
    .site-header .home-nav-links { justify-content: center; gap: 6px 16px; }
    .site-header .home-nav-links a { font-size: 12px; }
    .site-footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .site-footer-brand span { display: block; margin: 3px 0 0; }
    .site-footer nav { grid-column: 1; grid-row: auto; justify-content: center; gap: 10px 16px; }
    .site-footer small { grid-column: 1; grid-row: auto; justify-self: center; text-align: center; }
    .nav-container { gap: 14px 8px; }
    .logo a { font-size: 16px; gap: 7px; }
    .logo a::before { width: 28px; height: 28px; font-size: 15px; }
    .nav-actions { gap: 6px; }
    .lang-switch { font-size: 11px; padding: 3px; }
    .lang-btn { padding: 2px 4px; }
    .lang-switch .divider { display: none; }
    .theme-btn { width: 26px; }
    .login-trigger { min-width: 46px; padding: 0 10px; font-size: 12px; }
    .nav-container nav ul { justify-content: space-between; gap: 6px; }
    .nav-container nav a { font-size: 12px; padding: 6px 0; }
}
@media (max-width: 380px) {
    .site-header .language-menu summary { gap: 4px; padding: 0 8px; }
    .site-header .language-menu-current { display: none; }
    .site-header .language-menu summary > svg:last-child { width: 9px; }
    .nav-actions { flex-basis: 100%; justify-content: flex-end; }
    .nav-container nav { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}