/* ==========================================================================
   layout.css — 壳层：侧栏 / 顶栏 / 内容区 / 页脚 / 手机两行顶栏 + 底栏 + 浮层
   搜索面板 / 登录注册弹窗 / cookie 横幅 / 客服抽屉 / 语言切换 / 用户菜单
   ========================================================================== */

.app { min-height: 100vh; background: var(--bg); color: var(--text-1); }

/* ---------- 侧栏（浮动卡片） ---------- */
.sidebar {
  position: fixed; top: var(--sidebar-inset); left: var(--sidebar-inset); bottom: var(--sidebar-inset);
  z-index: var(--z-sidebar); width: var(--sidebar-w); border-radius: var(--r-sidebar);
  transition: width var(--t-base);
  display: none;
}
.sidebar__inner {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: var(--sidebar-pad); border-radius: var(--r-sidebar-inner);
  background: var(--bg-sidebar); border: var(--card-border-w) solid var(--card-border);
}
html[data-theme="dark"] .sidebar__inner::before {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
  background: var(--border-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.sidebar__head { display: flex; align-items: flex-start; justify-content: space-between; height: 44px; padding-bottom: 12px; }
.sidebar__logo { display: flex; align-items: center; gap: 12px; height: 32px; }
.sidebar__logo .brand-mark { width: 35px; height: 32px; }
.sidebar__collapse { width: 30px; height: 30px; padding: 6px; border-radius: 8px; color: var(--collapse-btn); display: inline-flex; align-items: center; justify-content: center; }
.sidebar__collapse svg { width: 18px; height: 18px; }
.sidebar__collapse:hover { color: var(--collapse-btn-hover); }
.sidebar__scroll { flex: 1; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; overflow-x: hidden; border-top: 1px solid var(--divider); padding-top: 16px; scrollbar-width: none; }
.sidebar__scroll::-webkit-scrollbar { display: none; }
.nav { display: flex; flex-direction: column; gap: 16px; }
.nav__group { display: flex; flex-direction: column; gap: 4px; }
.nav__section { display: flex; align-items: center; gap: 16px; width: 100%; height: 25px; padding: 4px 0; color: var(--text-dim); transition: color var(--t-fast); }
.nav__section:hover { color: var(--text-dim-hover); }
.nav__section-label { font-size: 11px; font-weight: 600; line-height: 16.5px; letter-spacing: 0.55px; text-transform: uppercase; }
.nav__section-line { flex: 1; height: 1px; background: var(--divider); }
.nav__section svg { width: 16px; height: 16px; transition: transform 0.25s; }
.nav__group.is-collapsed .nav__section svg { transform: rotate(180deg); }
.nav__group.is-collapsed .nav__items { display: none; }
.nav__items { display: flex; flex-direction: column; gap: 4px; }
.nav__row { display: flex; align-items: center; border-radius: var(--r-nav); padding-right: 4px; transition: background var(--t-fast); }
.nav__row:hover { background: var(--nav-hover-bg); }
.nav__row .nav__item { flex: 1; }
.nav__row .nav__item:hover { background: transparent; }
.nav__item { display: flex; align-items: center; gap: 12px; height: var(--nav-item-h); padding: 8px 12px; border-radius: var(--r-nav); font-size: 14px; font-weight: 500; line-height: 20px; color: var(--nav-text); transition: background var(--t-fast), color var(--t-fast); width: 100%; text-align: left; white-space: nowrap; }
.nav__item svg, .nav__item .nav__icon { width: var(--nav-icon); height: var(--nav-icon); flex-shrink: 0; }
.nav__item:hover { background: var(--nav-hover-bg); }
.nav__item.is-active { background: var(--nav-active-bg); color: var(--nav-active-text); }
.nav__row.is-active { background: var(--nav-active-bg); }
.nav__row.is-active .nav__item { color: var(--nav-active-text); }
.nav__item--btn { justify-content: space-between; }
.nav__item--btn .nav__left { display: flex; align-items: center; gap: 12px; }
.nav__item .nav__chev { width: 16px; height: 16px; color: var(--nav-chevron); transition: transform 0.25s; margin-left: auto; }
.nav__expand { width: 28px; height: 28px; border-radius: var(--r-nav); display: inline-flex; align-items: center; justify-content: center; color: var(--nav-chevron); flex-shrink: 0; }
.nav__expand svg { width: 16px; height: 16px; transition: transform 0.25s; }
.nav__parent.is-open .nav__expand svg, .nav__parent.is-open .nav__chev { transform: rotate(180deg); }
.nav__children { display: none; flex-direction: column; gap: 4px; }
.nav__parent.is-open .nav__children { display: flex; }
.nav__children .nav__item { padding-left: 36px; }
.nav__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.sidebar__bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; border-top: 1px solid var(--divider); padding-top: 21px; }
.sidebar__bottom .btn--cta, .sidebar__bottom .btn--outline { width: 100%; }
.sidebar__bottom .btn--outline { min-height: 46px; padding: 12px 32px; gap: 6px; --btn-icon: 16px; }
.sidebar__bottom .btn--cta .btn__label, .sidebar__bottom .btn--outline .btn__label { white-space: nowrap; }
.sidebar__socials { display: flex; gap: 12px; }
.sidebar__social { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--social-icon); transition: background var(--t-fast); }
.sidebar__social svg { width: 16px; height: 16px; }
.sidebar__social:hover { background: var(--social-btn-bg); }

/* 折叠态 */
html.sb-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
html.sb-collapsed .sidebar__head { justify-content: center; }
html.sb-collapsed .sidebar__logo .brand-wm, html.sb-collapsed .sidebar__collapse { display: none; }
html.sb-collapsed .nav__section-label, html.sb-collapsed .nav__section svg { display: none; }
html.sb-collapsed .nav__section { height: 1px; padding: 0; }
html.sb-collapsed .nav__item { justify-content: center; padding: 8px 0; width: 47px; height: 34px; margin: 0 auto; gap: 0; }
html.sb-collapsed .nav__label, html.sb-collapsed .nav__chev, html.sb-collapsed .nav__expand { display: none; }
html.sb-collapsed .nav__row { padding-right: 0; justify-content: center; }
html.sb-collapsed .nav__row .nav__item { flex: 0 0 47px; }
html.sb-collapsed .nav__children .nav__item { padding-left: 0; }
html.sb-collapsed .nav__item--btn .nav__left { gap: 0; }
html.sb-collapsed .sidebar__bottom .btn--cta { width: 47px; height: 40px; min-height: 40px; padding: 0; }
html.sb-collapsed .sidebar__bottom .btn--outline { width: 47px; height: 42px; min-height: 42px; padding: 0; }
html.sb-collapsed .sidebar__bottom .btn__label { display: none; }
html.sb-collapsed .sidebar__socials { flex-direction: column; }

/* ---------- 内容包裹 ---------- */
.content-wrap { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: var(--mobile-main-pb); transition: margin var(--t-base); }
.content-col { display: flex; flex-direction: column; flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; min-width: 0; overflow-x: clip; }
.content-col__body { flex: 1; }
.page { display: flex; flex-direction: column; gap: var(--section-gap-m); padding: 24px 16px; }
.page-title { font-size: 24px; font-weight: 600; line-height: 32px; }

/* ---------- 桌面顶栏 ---------- */
.topbar { display: none; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 24px 0; height: var(--header-h); }
.topbar__actions { display: flex; align-items: center; gap: 16px; }
.topbar .btn--icon svg { color: var(--text-1); }
html[data-theme="light"] .topbar .btn--icon svg { color: var(--primary); }

/* ---------- 手机两行顶栏 ---------- */
.m-topbar { display: flex; flex-direction: column; }
.m-topbar__row1 { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(env(safe-area-inset-top, 0px) + 28px) 16px 0; height: calc(env(safe-area-inset-top, 0px) + 70px); }
.m-topbar__left { display: flex; align-items: center; gap: 16px; }
.m-topbar__left .brand-mark { width: 35px; height: 32px; }
.m-topbar__right { display: flex; align-items: center; gap: 8px; }
.m-topbar__right .btn--ghost, .m-topbar__right .btn--primary { padding: 12px 16px; min-height: 42px; width: auto; }
.m-topbar__row2 { padding: 0 16px; height: 32px; display: flex; align-items: center; }
.m-topbar .btn--icon svg { color: var(--text-1); }
html[data-theme="light"] .m-topbar .btn--icon svg { color: var(--primary); }

/* ---------- 用户菜单（登录后） ---------- */
.user-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 4px 12px 4px 4px; border-radius: var(--r-full); background: var(--ghost-bg); color: var(--text-1); font-size: 14px; font-weight: 500; position: relative; }
.user-btn .avatar { width: 34px; height: 34px; }
.user-btn svg.chev { width: 14px; height: 14px; color: var(--text-3); }
html[data-theme="dark"] .user-btn::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none; background: var(--border-gradient); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.user-menu { min-width: 220px; }
.user-menu__head { display: flex; align-items: center; gap: 10px; padding: 8px 12px 10px; }
.user-menu__name { font-size: 14px; font-weight: 600; }
.user-menu__email { font-size: 12px; color: var(--text-3); }

/* ---------- 语言切换 ---------- */
.lang-btn { display: inline-flex; align-items: center; gap: 6px; }
.lang-menu { min-width: 180px; }
.lang-menu .lang-flag { font-size: 10px; font-weight: 700; width: 24px; height: 18px; border-radius: 4px; background: var(--chip-bg); color: var(--chip-text); display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.5px; }

/* ---------- 页脚 ---------- */
.footer { padding: var(--footer-pt) 16px var(--footer-pb); }
.footer__inner { display: flex; flex-direction: column; gap: 40px; max-width: var(--content-max); margin: 0 auto; }
.footer__top { display: flex; flex-direction: column; gap: 48px; }
.footer__brand { display: flex; flex-direction: column; gap: 16px; width: 230px; max-width: 100%; }
.footer__brand-logo { display: flex; align-items: center; gap: 10px; }
.footer__brand-logo .brand-mark { width: 30px; height: 27px; }
.footer__tagline { font-size: 14px; line-height: 20px; color: var(--footer-link); max-width: 230px; }
.footer__socials { display: flex; gap: 12px; }
.footer__social { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: var(--footer-social-bg); color: var(--social-icon); transition: background var(--t-fast); }
.footer__social svg { width: 20px; height: 20px; }
.footer__social:hover { background: var(--social-btn-hover); }
.footer__cols { display: flex; flex-wrap: wrap; gap: 32px 40px; }
.footer__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.footer__col-title { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--footer-title); }
.footer__col-title.is-placeholder { opacity: 0; user-select: none; }
.footer__col ul { display: flex; flex-direction: column; gap: 12px; }
.footer__col a, .footer__col button { font-size: 13px; line-height: 20px; color: var(--footer-link); text-align: left; transition: color var(--t-fast); white-space: nowrap; }
.footer__col a:hover, .footer__col button:hover { color: var(--footer-link-hover); }
.footer__scroll { overflow-y: auto; scrollbar-width: none; }
.footer__scroll::-webkit-scrollbar { display: none; }
.footer__scroll--88 { max-height: 88px; }
.footer__scroll--20 { max-height: 20px; }
.footer__bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 24px; border-top: 1px solid var(--footer-divider); text-align: center; }
.footer__legal { font-size: 13px; line-height: 20px; color: var(--footer-legal); }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.footer__links a { font-size: 12px; color: var(--footer-legal-link); text-decoration: underline; transition: color var(--t-fast); }
.footer__links a:hover { color: var(--footer-link-hover); }
.footer__copy { padding-top: 8px; font-size: 13px; color: var(--footer-legal-link); }

/* ---------- 手机底栏 ---------- */
.bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bottombar); background: var(--bottombar-bg); border-top: 1px solid var(--bottombar-border); box-shadow: var(--bottombar-shadow); padding-bottom: env(safe-area-inset-bottom, 0px); }
.bottombar__row { display: flex; align-items: stretch; height: 58px; padding: 0 6px; }
.bottombar__tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 4px; margin: 0 0; border-radius: 8px; color: var(--bottombar-text); font-size: 10px; line-height: 12px; transition: background var(--t-fast), color var(--t-fast); }
.bottombar__tab svg { width: 20px; height: 20px; }
.bottombar__tab.is-active { color: var(--bottombar-active); background: var(--bottombar-active-bg); }
.bottombar__pop { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px; width: 200px; padding: 8px; border-radius: 8px; background: var(--popover-bg); border: 1px solid var(--popover-border); box-shadow: var(--shadow-xl); text-align: left; animation: fadeSlideIn 0.15s ease-out; z-index: 2; }
.bottombar__pop-item { display: flex; align-items: center; gap: 12px; height: 40px; padding: 8px 12px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--popover-text); width: 100%; }
.bottombar__pop-item svg { width: 18px; height: 18px; }
.bottombar__pop-item:hover, .bottombar__pop-item.is-active { background: var(--nav-hover-bg); }
.bottombar__pop-item.is-active { color: var(--nav-active-text); }
.bottombar__pop-divider { height: 1px; background: var(--divider); margin: 6px 0; }
.bottombar__pop-earn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; width: 100%; border-radius: 8px; border: 1px solid var(--popover-earn-border); color: var(--popover-earn-text); font-size: 14px; font-weight: 600; }
.bottombar__pop-earn svg { width: 16px; height: 16px; }
.bottombar__tab:first-child .bottombar__pop { left: 0; transform: none; }
.bottombar__tab:last-child .bottombar__pop { left: auto; right: 0; transform: none; }

/* ---------- 搜索面板 ---------- */
.search-modal { max-width: 560px; border-radius: 24px; background: var(--modal-bg); border: 1px solid var(--modal-border); overflow: hidden; display: flex; flex-direction: column; max-height: 85vh; }
html[data-theme="dark"] .search-modal { background: #0f1424; }
.search-modal__input { display: flex; align-items: center; gap: 12px; height: 52px; padding: 12px 16px; border-bottom: 1px solid var(--border-modal); }
.search-modal__input > svg { width: 20px; height: 20px; color: var(--text-dim); flex-shrink: 0; }
.search-modal__input input { flex: 1; min-width: 0; background: transparent; font-size: 16px; color: var(--text-1); }
.search-modal__input input::placeholder { color: var(--text-dim); }
.search-modal__clear { display: none; width: 16px; height: 16px; color: var(--text-dim); }
.search-modal__clear svg { width: 16px; height: 16px; }
.search-modal.has-query .search-modal__clear { display: inline-flex; }
.search-modal__kbd { display: none; height: 22px; padding: 0 6px; font-size: 11px; font-weight: 500; border-radius: 6px; }
.search-modal__cancel { font-size: 14px; font-weight: 500; color: var(--primary); }
.search-modal__list { overflow-y: auto; padding: 8px 0; max-height: 60vh; }
.search-modal__group { padding: 8px 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.55px; text-transform: uppercase; color: var(--text-dim); }
.search-modal__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; height: 56px; text-align: left; transition: background var(--t-fast); }
.search-modal__item:hover, .search-modal__item.is-selected { background: rgba(142, 142, 255, 0.10); }
.search-modal__icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--glass-6); color: var(--text-subtle); flex-shrink: 0; overflow: hidden; }
.search-modal__icon svg { width: 16px; height: 16px; }
.search-modal__icon img { width: 22px; height: 22px; object-fit: contain; }
.search-modal__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.search-modal__title { font-size: 14px; font-weight: 500; color: var(--text-1); }
.search-modal__sub { font-size: 12px; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-modal__arrow { width: 14px; height: 14px; color: var(--text-subtle); opacity: 0; }
.search-modal__item.is-selected .search-modal__arrow { opacity: 1; }
.search-modal__foot { display: none; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--border-modal); font-size: 11px; color: var(--text-subtle); }
.search-modal__foot span { display: inline-flex; align-items: center; gap: 6px; }
.search-modal__empty { padding: 32px 16px; text-align: center; font-size: 14px; color: var(--text-3); }

/* ---------- 登录 / 注册弹窗（始终深色） ---------- */
.auth-modal { max-width: 500px; max-height: 92vh; overflow-y: auto; border-radius: 24px; background: var(--auth-card-bg); border: 1px solid var(--auth-card-border); color: #fff; }
.auth-modal__banner { width: 100%; height: 238px; background: radial-gradient(circle at 50% 50%, #2b2255 0%, #131629 60%, #0f1320 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.auth-modal__banner-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; padding: 18px; opacity: 0.55; }
.auth-modal__banner-grid span { display: block; aspect-ratio: 1; border-radius: 12px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.12), inset -2px -2px 3px rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; }
.auth-modal__banner-grid img { width: 60%; height: 60%; object-fit: contain; }
.auth-modal__banner-pill { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; background: linear-gradient(180deg, #2a2660, #15142e); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 0 40px rgba(136, 116, 255, 0.35); }
.auth-modal__banner-pill .brand-mark { width: 34px; height: 31px; }
.auth-modal__body { display: flex; flex-direction: column; gap: 24px; padding: 24px 40px 32px; }
.auth-modal__title { font-size: 24px; font-weight: 700; line-height: 32px; text-align: center; }
.auth-modal .field__label { color: #fff; }
.auth-modal .btn--outline { border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; min-height: 47px; border-radius: 52px; --btn-icon: 18px; }
.auth-modal .btn--outline:hover { color: #fff; }
.auth-modal .btn--telegram { min-height: 47px; border-radius: 52px; --btn-icon: 18px; }
.auth-modal .btn--primary { min-height: 45px; }
.auth-modal__terms { font-size: 14px; font-weight: 300; line-height: 21px; color: rgba(255, 255, 255, 0.5); text-align: center; }
.auth-modal__terms a { text-decoration: underline; color: rgba(255, 255, 255, 0.5); }
.auth-modal__terms a:hover { color: #fff; }
.auth-modal__referral { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 12px; color: #8874ff; }
.auth-modal__referral svg { width: 12px; height: 12px; transition: transform 0.2s; }
.auth-modal__referral.is-open svg { transform: rotate(90deg); }
.auth-modal__referral:hover { color: #a594ff; }
.auth-modal .or-divider { color: rgba(255, 255, 255, 0.5); }
.auth-modal .or-divider::before, .auth-modal .or-divider::after { background: rgba(255, 255, 255, 0.1); }
.auth-modal .field__error { color: #fb3748; }
.auth-modal .field.is-error .field__label { color: #fb3748; }
.auth-modal__code { display: flex; gap: 8px; justify-content: center; }
.auth-modal__code input { width: 44px; height: 52px; text-align: center; font-size: 20px; font-weight: 600; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; }
.auth-modal__code input:focus { border-color: #8874ff; }
.auth-modal__hint { font-size: 13px; color: rgba(255, 255, 255, 0.5); text-align: center; }
.auth-modal__hint a, .auth-modal__hint button { color: #8874ff; }
@media (max-width: 767px) { .auth-modal__body { padding: 20px; gap: 16px; } .auth-modal__title { font-size: 20px; line-height: 28px; } .auth-modal__banner { height: 180px; } }

/* ---------- Cookie 横幅 ---------- */
.cookie { position: fixed; z-index: var(--z-cookie); left: 16px; right: 16px; bottom: calc(var(--bottombar-h) + 12px + env(safe-area-inset-bottom, 0px)); padding: 16px; border-radius: 20px; background: var(--cookie-bg); box-shadow: var(--cookie-shadow); backdrop-filter: blur(35.5px); -webkit-backdrop-filter: blur(35.5px); animation: slideUp 0.3s var(--ease-out); }
.cookie::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none; background: var(--border-gradient); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.cookie__text { font-size: 13px; line-height: 19px; color: var(--cookie-text); }
.cookie__text a { color: var(--cookie-link); }
.cookie__text a:hover { text-decoration: underline; }
.cookie__actions { display: flex; gap: 8px; margin-top: 12px; }
.cookie__actions .btn { flex: 1; padding: 9px 14px; min-height: 37px; font-size: 14px; }

/* ---------- 客服抽屉（自建，替代 Intercom） ---------- */
.support { position: fixed; z-index: var(--z-support); left: 16px; right: 16px; bottom: calc(var(--bottombar-h) + 12px + env(safe-area-inset-bottom, 0px)); height: min(704px, calc(100vh - 140px)); border-radius: 24px; background: var(--bg-card); box-shadow: 0 5px 40px rgba(9, 14, 21, 0.9); display: flex; flex-direction: column; overflow: hidden; animation: slideUp 0.25s var(--ease-out); border: 1px solid var(--divider); }
html[data-theme="light"] .support { background: #fff; box-shadow: 0 5px 40px rgba(42, 39, 78, 0.25); }
.support__head { position: relative; padding: 24px 20px 28px; background: var(--support-header); color: #fff; }
.support__head-row { display: flex; align-items: center; justify-content: space-between; }
.support__logo { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); }
.support__logo img { width: 22px; height: 20px; }
.support__close { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.2); }
.support__close svg { width: 16px; height: 16px; }
.support__hi { margin-top: 24px; font-size: 24px; font-weight: 700; line-height: 30px; }
.support__hi2 { font-size: 24px; font-weight: 700; line-height: 30px; opacity: 0.85; }
.support__body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; margin-top: -14px; }
.support__card { border-radius: 16px; padding: 16px; background: var(--bg-card2); border: 1px solid var(--divider); }
html[data-theme="dark"] .support__card { background: #161c32; }
.support__card--dark { background: #0b0e19; color: #fff; }
.support__card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; cursor: pointer; }
.support__card-row svg { width: 18px; height: 18px; color: var(--primary); }
.support__card-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.support__articles { display: flex; flex-direction: column; margin-top: 8px; }
.support__article { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid var(--divider-row); font-size: 13px; color: var(--text-1); text-align: left; width: 100%; }
.support__article svg { width: 14px; height: 14px; color: var(--text-3); }
.support__article:hover { color: var(--primary); }
.support__tabs { display: flex; border-top: 1px solid var(--divider); background: var(--bg-card); }
html[data-theme="light"] .support__tabs { background: #fff; }
.support__tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 12px; font-size: 11px; font-weight: 500; color: var(--text-3); }
.support__tab svg { width: 20px; height: 20px; }
.support__tab.is-active { color: var(--primary); }
.support__chat { display: flex; flex-direction: column; gap: 10px; }
.support__msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 20px; }
.support__msg--bot { align-self: flex-start; background: var(--glass-6); border-bottom-left-radius: 4px; }
.support__msg--me { align-self: flex-end; background: var(--primary-gradient); color: #fff; border-bottom-right-radius: 4px; }
.support__msg-time { font-size: 10px; color: var(--text-3); margin-top: 2px; }
.support__input { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--divider); }
.support__input input { flex: 1; min-width: 0; background: transparent; font-size: 14px; color: var(--text-1); }
.support__send { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-gradient); color: #fff; box-shadow: var(--primary-glow); }
.support__send svg { width: 16px; height: 16px; }
.support__collections { display: flex; flex-direction: column; }
.support__collection { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--divider-row); text-align: left; width: 100%; }
.support__collection-title { font-size: 14px; font-weight: 600; color: var(--text-1); }
.support__collection-desc { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.support__collection-count { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.support__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; flex: 1; text-align: center; padding: 40px 16px; }
.support__empty-title { font-size: 16px; font-weight: 600; }
.support__empty-desc { font-size: 13px; color: var(--text-3); }

/* ---------- 404 / 占位 ---------- */
.notfound { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 50vh; text-align: center; }
.notfound__code { font-size: 72px; font-weight: 700; line-height: 1; background: var(--primary-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.notfound__title { font-size: 24px; font-weight: 600; }
.notfound__desc { font-size: 14px; color: var(--text-3); max-width: 420px; }
.placeholder-page { display: flex; flex-direction: column; gap: 16px; }

/* Profile 未登录页 */
.profile-guest { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 64px 16px; text-align: center; }
.profile-guest__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--glass-6); display: flex; align-items: center; justify-content: center; color: var(--text-1); }
.profile-guest__icon svg { width: 26px; height: 26px; }
.profile-guest__title { font-size: 24px; font-weight: 600; line-height: 32px; }
.profile-guest__desc { font-size: 14px; color: var(--text-3); max-width: 420px; }
.profile-guest__actions { display: flex; gap: 12px; margin-top: 8px; }

/* ==========================================================================
   响应式：≥768 平板（侧栏可折叠）、≥1280 桌面（侧栏固定 240... 原站 280）
   ========================================================================== */
@media (min-width: 768px) {
  .sidebar { display: block; }
  .content-wrap { margin-left: var(--main-ml); padding-bottom: 0; }
  html.sb-collapsed .content-wrap { margin-left: var(--main-ml-collapsed); }
  .topbar { display: flex; }
  .m-topbar, .bottombar { display: none; }
  .page { gap: var(--section-gap); padding: 24px; }
  .footer { padding-left: 24px; padding-right: 24px; }
  .search-modal__kbd { display: inline-flex; }
  .search-modal__cancel { display: none; }
  .search-modal__foot { display: flex; }
  .cookie { left: auto; right: 24px; bottom: 24px; width: 360px; }
  .support { left: 20px; right: auto; bottom: 80px; width: 400px; height: min(704px, calc(100vh - 100px)); }
}
@media (min-width: 1024px) {
  .footer__top { flex-direction: row; justify-content: space-between; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  /* 平板：默认折叠可由用户切换，宽度沿用变量 */
}