@import url('/assets/css/design-system/design-tokens.css?v=p5-5-c3-b8r-20260618T120408Z');
@import url('/assets/css/design-system/base.css?v=p5-5-c3-b8r-20260618T120408Z');
@import url('/assets/css/design-system/components/button.css?v=p5-5-c3-b8r-20260618T120408Z');
@import url('/assets/css/design-system/components/card.css?v=p5-5-c3-b8r-20260618T120408Z');
@import url('/assets/css/design-system/components/menu.css?v=p5-5-c3-b8r-20260618T120408Z');
@import url('/assets/css/design-system/components/header.css?v=p5-5-c3-b8r-20260618T120408Z');
@import url('/assets/css/design-system/components/account.css?v=p5-5-c3-b8r-20260618T120408Z');
@import url('/assets/css/design-system/components/auth.css?v=p5-5-c3-b8r-20260618T120408Z');
@import url('/assets/css/design-system/components/support.css?v=p5-5-c3-b8r-20260618T120408Z');
@import url('/assets/css/design-system/components/auth-compat.css?v=p5-5-c3-b8r-20260618T120408Z');

/* =====================================================================
 * Global UI font unification (Phase 1) - 所有 UI 控件统一无衬线字体
 * UI controls: input / textarea / select / button / .account / .profile-menu 等
 * (--font-ui 定义在 design-tokens.css, 9 页面 auth_style.css?v=N 统一加载)
 * ===================================================================== */
input,
textarea,
select,
button,
.account,
.account-pill,
.profile-menu,
.profile-action,
.profile-action.strong,
.profile-action.logout,
.search-input,
.filter-select,
.form-control,
.btn,
.btn-primary,
.btn-login,
.btn-register,
.plan,
.plan button,
.payment-card,
.payment-card button {
    font-family: var(--font-ui);
}

/* =====================================================================
 * Member account avatar / dropdown / badge shared rules
 * Extracted from index.php (and duplicates in favorites.php,
 * telegram_feed.php) so that every page that loads auth_style.css —
 * including site_header.php callers (articles.php, my_invites.php,
 * payment.php, premium.php) — renders the member avatar consistently.
 * Source: index.php lines 139 + 146 (canonical).
 * All !important markers preserved so cascade precedence matches the
 * previous inline behaviour on index.php / favorites.php /
 * telegram_feed.php (inline !important still overrides auth_style.css
 * if a duplicate inline rule exists; no visual regression).
 * ===================================================================== */

/* ── Header pill + dropdown panel ── */
.nav{position:relative;z-index:80;flex-wrap:nowrap}
.account{position:relative;z-index:90}
.account-pill{gap:8px;padding:4px 11px 4px 5px!important;min-height:42px;font-family:var(--font-heading),-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
.account-name{max-width:110px;overflow:hidden;text-overflow:ellipsis}
.account-caret{color:#aeb8c7;font-size:14px}
.account[open] .account-caret{transform:rotate(180deg)}

/* 个人中心菜单设计 token (仅作用域 .profile-menu 内部, 不污染其它组件) */
.profile-menu{
    --nx-menu-width:300px;
    --nx-menu-padding:14px;
    --nx-menu-item-h:42px;
    --nx-menu-item-radius:12px;
    --nx-menu-item-px:14px;
    --nx-menu-cta-h:44px;
    --nx-menu-cta-radius:12px;
    --nx-menu-cta-mx:14px;
    --nx-menu-cta-my:8px;
    --nx-menu-divider:rgba(217,74,111,.14);
    --nx-menu-text:#e5e7eb;
    --nx-menu-text-strong:#f8fafc;
    --nx-menu-text-logout:#f2cad6;
    --nx-menu-rose:rgba(217,74,111,.96);
    --nx-menu-rose-dark:rgba(176,58,91,.96);
    --nx-menu-gold:rgba(251,191,36,.94);
    position:absolute;
    right:0;
    top:calc(100% + 12px);
    width:var(--nx-menu-width);
    max-width:calc(100vw - 24px);
    padding:0;
    overflow:hidden;
    border-radius:16px;
    background:rgba(9,11,22,.96)!important;
    border:1px solid rgba(217,74,111,.18)!important;
    box-shadow:0 24px 68px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.04)!important;
    backdrop-filter:blur(24px) saturate(140%);
    -webkit-backdrop-filter:blur(24px) saturate(140%);
    z-index:200!important;
    font-family:var(--font-heading),-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
}

@media(max-width:760px){
    .profile-menu{
        top:calc(70px + env(safe-area-inset-top))!important;
        right:12px!important;
        left:auto!important;
        width:min(300px,calc(100vw - 24px))!important;
        max-width:none!important;
        border-radius:14px;
    }
}

/* 头像区 (菜单顶部 - 居中 + 上下 padding 平衡) */
.profile-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:20px 16px 18px;
    text-align:center;
    background:linear-gradient(180deg,rgba(217,74,111,.10),rgba(217,74,111,0));
    border-bottom:1px solid var(--nx-menu-divider);
}

.profile-card strong{
    display:block;
    width:100%;
    margin:0;
    font-size:16px;
    font-weight:600;
    color:var(--nx-menu-text-strong);
    letter-spacing:0;
    line-height:1.3;
}

.profile-card span,.member-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:26px;
    margin:0;
    padding:0 14px;
    border-radius:999px;
    font-size:12px;
    font-weight:600;
    letter-spacing:.01em;
    line-height:1;
    background:rgba(255,255,255,.08);
    color:#cbd5e1;
}

/* 普通菜单项 (我的邀请 / 我的收藏 共用 - 统一对齐基准 + 行高 + hover) */
.profile-action{
    display:flex!important;
    align-items:center;
    justify-content:flex-start;
    min-height:var(--nx-menu-item-h)!important;
    margin:2px var(--nx-menu-padding);
    padding:0 var(--nx-menu-item-px)!important;
    border-radius:var(--nx-menu-item-radius)!important;
    color:var(--nx-menu-text)!important;
    font-size:14px;
    font-weight:500;
    letter-spacing:0;
    line-height:1.4;
    text-decoration:none!important;
    box-sizing:border-box;
    width:calc(100% - var(--nx-menu-padding) * 2)!important;
    transition:background-color .15s ease,color .15s ease;
    position:relative;
}

.profile-action:hover{
    background:rgba(217,74,111,.08)!important;
    color:var(--nx-menu-text-strong)!important;
}

.profile-action:active{
    background:rgba(217,74,111,.14)!important;
}

/* CTA "立即开通会员" 按钮 (强按钮 - 文字水平居中 + 箭头绝对定位不参与 flex 居中) */
.profile-action.strong{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    margin:var(--nx-menu-cta-my) var(--nx-menu-cta-mx)!important;
    min-height:var(--nx-menu-cta-h);
    padding:0 44px!important;
    border-radius:var(--nx-menu-cta-radius)!important;
    background:linear-gradient(135deg,var(--nx-menu-rose),var(--nx-menu-rose-dark))!important;
    color:#fff!important;
    font-size:14px;
    font-weight:600;
    letter-spacing:.005em;
    box-shadow:0 6px 18px rgba(217,74,111,.28),inset 0 1px 0 rgba(255,255,255,.12);
    width:calc(100% - var(--nx-menu-cta-mx) * 2)!important;
}

.profile-action.strong:hover{
    background:linear-gradient(135deg,rgba(217,74,111,1),rgba(176,58,91,1))!important;
    box-shadow:0 10px 24px rgba(217,74,111,.34),inset 0 1px 0 rgba(255,255,255,.14);
}

.profile-action.strong:active{
    background:linear-gradient(135deg,rgba(217,74,111,.92),rgba(176,58,91,.92))!important;
    box-shadow:0 4px 12px rgba(217,74,111,.24),inset 0 1px 0 rgba(255,255,255,.10);
}

/* CTA 内的箭头 - 绝对定位到右侧, 不参与文字 flex 居中, 不让文字偏左 */
.profile-action.strong:after{
    content:"›";
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    color:rgba(255,255,255,.85);
    font-size:18px;
    font-weight:400;
    line-height:1;
    display:inline-flex;
    align-items:center;
}

/* premium 会员 CTA 变体 (金色渐变) */
.premium-account .profile-action.strong{
    background:linear-gradient(135deg,var(--nx-menu-gold),rgba(217,74,111,.88))!important;
    border:1px solid rgba(251,191,36,.32)!important;
    box-shadow:0 6px 18px rgba(251,191,36,.22),inset 0 1px 0 rgba(255,255,255,.14);
}

.premium-account .profile-action.strong:hover{
    background:linear-gradient(135deg,rgba(251,191,36,1),rgba(217,74,111,.94))!important;
    box-shadow:0 10px 24px rgba(251,191,36,.28),inset 0 1px 0 rgba(255,255,255,.16);
}

/* 退出登录 - 统一菜单项体系, 不再是色块 (用 ::before 细分割线 + 与普通项同 margin/height/radius) */
.profile-action.logout{
    margin:4px var(--nx-menu-padding) 10px !important;
    color:var(--nx-menu-text-logout)!important;
    font-weight:500;
}

.profile-action.logout::before{
    content:"";
    position:absolute;
    top:-7px;
    left:0;
    right:0;
    height:1px;
    background:var(--nx-menu-divider);
}

.profile-action.logout:hover{
    background:rgba(217,74,111,.10)!important;
    color:#fff!important;
}

/* ── Premium / normal variants ── */
.nav{gap:10px!important}
.account-pill{min-width:0;background:rgba(255,255,255,.08)!important}
.premium-account .account-pill{border-color:rgba(251,191,36,.52)!important;background:rgba(251,191,36,.09)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(251,191,36,.08)!important}
.premium-account[open] .account-pill{border-color:rgba(251,191,36,.68)!important;box-shadow:0 0 0 2px rgba(251,191,36,.16),inset 0 1px 0 rgba(255,255,255,.08)!important}
.premium-account .avatar-mini,.premium-card .avatar-large{border-color:#f8d47a!important;box-shadow:0 0 0 3px rgba(251,191,36,.14)}
.normal-account .account-pill{border-color:rgba(148,163,184,.2)!important}
.normal-card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01))!important}
.premium-card{background:linear-gradient(180deg,rgba(251,191,36,.14),rgba(217,74,111,.02))!important;border-bottom-color:rgba(251,191,36,.18)!important}

.member-badge{display:inline-flex!important;align-items:center;justify-content:center;min-height:26px;padding:0 14px!important;border-radius:999px!important;font-weight:600!important;font-size:11.5px!important;letter-spacing:.01em;line-height:1}
.gray-badge{background:rgba(148,163,184,.14)!important;border:1px solid rgba(148,163,184,.22);color:#cbd5e1!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.gold-badge{background:rgba(251,191,36,.16)!important;border:1px solid rgba(251,191,36,.38);color:#f8d47a!important;box-shadow:0 0 18px rgba(251,191,36,.10),inset 0 1px 0 rgba(255,255,255,.06)}
.profile-action.gold-action{background:rgba(251,191,36,.12)!important;border:1px solid rgba(251,191,36,.2);color:#ffe6a3!important}
.profile-action.gold-action:after{color:#f8d47a!important}

/* ── Mobile refinement for account pill ── */
@media(max-width:760px){
  .nav{margin-left:0!important}
  .account{margin-left:auto}
  .account-pill{max-width:172px}
  .account-name{max-width:92px}
}

/* =====================================================================
 * Body padding-top for fixed site header
 * The site header (site_header.php) is rendered as
 * position:fixed;top:0 (~62-72px tall depending on topbar padding +
 * brand-icon height + safe-area-inset-top). Every page that calls
 * nx_render_site_header() needs this body padding so its content does
 * not slide under the fixed header.
 *
 * Unified responsive scale (matches favorites.php breakpoints):
 *   desktop (>760px):    86px
 *   tablet  (≤760px):    74px
 *   phone   (≤480px):    70px
 * Previously only my_invites.php + favorites.php had inline rules
 * (86/68 or 86/74/70). premium.php + payment.php were MISSING the
 * rule, causing their content to be obscured by the fixed header.
 * ===================================================================== */
body{padding-top:86px}
@media(max-width:760px){
  body{padding-top:74px}
}
@media(max-width:480px){
  body{padding-top:70px}
}

/* =====================================================================
 * Phase 2A: CSS micro-motion (NO JS, NO Anime.js, NO DOM change)
 *
 * Scope (this section only adds micro-interaction feedback on top of
 *         existing styles; nothing here alters layout / colors / DOM):
 *   1) Buttons  - hover lift (desktop only) + active press
 *   2) Inputs   - focus glow (rose) with :focus-visible preserved
 *   3) Cards    - hover lift (excludes .plan / .article-card which
 *                 carry pre-existing inline rules protected by this task)
 *   4) Menu     - SKIPPED (see MENU_MOTION_SKIPPED_DETAILS_ELEMENT)
 *   5) Reduced-motion global fallback
 *
 * Constraints (enforced):
 *   - transition property is EXPLICIT (never `all`)
 *   - desktop hover wrapped in @media (hover: hover) and (pointer: fine)
 *     to avoid sticky-hover on touch devices
 *   - :disabled / .is-disabled / .is-loading NEVER transform
 *   - :focus-visible remains visible — we only add a ring, never strip
 *     the focus indicator entirely
 *   - 150-220ms duration band; translateY -1px to -2px; scale 0.985
 *     (well within the -2..-4px / 0.975..0.995 spec window, conservative
 *      to avoid clashing with premium.php inline .plan:hover -6/-8px
 *      which is pre-existing and intentionally left untouched)
 * ===================================================================== */

/* ── 1. Buttons: base transition + desktop hover + active press ── */
.btn,
.btn-login,
.btn-register,
.btn-primary,
.pill:not(.account-pill),
.copy-btn,
.favorite-btn,
.support-send-btn,
.pay-back,
.filter-form button,
.article-arrow,
.pagination a,
.close,
.article-all-link,
.article-dot-btn,
.viewer-nav,
.card-nav,
.support-toggle,
.backtop-toggle,
.support-upload,
.support-close,
.article-nav-btn,
.detail-actions > .button {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):not(.is-disabled):not(.is-loading):hover,
  .btn-login:not(:disabled):not(.is-disabled):not(.is-loading):hover,
  .btn-register:not(:disabled):not(.is-disabled):not(.is-loading):hover,
  .btn-primary:not(:disabled):not(.is-disabled):not(.is-loading):hover,
  .pill:not(.account-pill):not(:disabled):not(.is-disabled):not(.is-loading):hover,
  .copy-btn:not(:disabled):not(.is-disabled):not(.is-loading):hover,
  .favorite-btn:not(:disabled):not(.is-disabled):not(.is-loading):hover,
  .support-send-btn:not(:disabled):not(.is-disabled):not(.is-loading):hover,
  .pay-back:not(:disabled):not(.is-disabled):not(.is-loading):hover,
  .filter-form button:not(:disabled):not(.is-disabled):not(.is-loading):hover,
  .article-arrow:not(:disabled):not(.is-disabled):not(.is-loading):hover,
  .pagination a:hover,
  .close:not(:disabled):not(.is-disabled):not(.is-loading):hover,
  .article-all-link:hover,
  .article-dot-btn:hover,
  .viewer-nav:hover,
  .card-nav:hover,
  .support-toggle:hover,
  .backtop-toggle:hover,
  .support-upload:hover,
  .support-close:hover,
  .article-nav-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(217, 74, 111, .18);
  }
}

.btn:active:not(:disabled):not(.is-disabled):not(.is-loading),
.btn-login:active:not(:disabled):not(.is-disabled):not(.is-loading),
.btn-register:active:not(:disabled):not(.is-disabled):not(.is-loading),
.btn-primary:active:not(:disabled):not(.is-disabled):not(.is-loading),
.pill:active:not(.account-pill):not(:disabled):not(.is-disabled):not(.is-loading),
.copy-btn:active:not(:disabled):not(.is-disabled):not(.is-loading),
.favorite-btn:active:not(:disabled):not(.is-disabled):not(.is-loading),
.support-send-btn:active:not(:disabled):not(.is-disabled):not(.is-loading),
.pay-back:active:not(:disabled):not(.is-disabled):not(.is-loading),
.filter-form button:active:not(:disabled):not(.is-disabled):not(.is-loading),
.article-arrow:active:not(:disabled):not(.is-disabled):not(.is-loading),
.pagination a:active,
.close:active:not(:disabled):not(.is-disabled):not(.is-loading),
.article-all-link:active,
.article-dot-btn:active,
.viewer-nav:active,
.card-nav:active,
.support-toggle:active,
.backtop-toggle:active,
.support-upload:active,
.support-close:active,
.article-nav-btn:active {
  transform: scale(.985);
}

/* Positioned carousel controls must retain their vertical centering on hover/press. */
@media (hover: hover) and (pointer: fine) {
  .card-nav:hover,
  .article-nav-btn:hover {
    transform: translateY(-50%) !important;
  }
}
.card-nav:active,
.article-nav-btn:active {
  transform: translateY(-50%) scale(.97) !important;
}

/* Disabled / loading 守卫 — 任何 transform / filter / hover-shadow 都不应出现 */
button:disabled,
button[disabled],
.btn:disabled,
.btn[disabled],
.btn-login:disabled,
.btn-register:disabled,
.btn-primary:disabled,
.is-disabled,
.is-loading {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* ── 2. Inputs: focus glow with :focus-visible preserved ───────── */
input,
textarea,
select,
.form-control,
.search-input,
.filter-select,
.support-form input[type="text"],
.filter-form input,
.filter-form select {
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.form-control:focus-visible,
.search-input:focus-visible,
.filter-select:focus-visible,
.support-form input[type="text"]:focus-visible,
.filter-form input:focus-visible,
.filter-form select:focus-visible {
  outline: none;
  border-color: rgba(217, 74, 111, .6) !important;
  box-shadow:
    0 0 0 3px rgba(217, 74, 111, .18),
    inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

/* ── 3. Card hover lift (避让 .plan / .article-card 已有 inline 规则) ── */
@media (hover: hover) and (pointer: fine) {
  /* 这些容器下的 .card 在 index.php / favorites.php / telegram_feed.php 共用 */
  /* 明确排除: .plan (premium.php inline -6/-8px), .article-card (articles.php inline -3px) */
  .gallery > .card,
  .favorite-grid > .card,
  .feed-grid > .card,
  .invite-grid > .card {
    transition:
      transform 200ms ease,
      box-shadow 200ms ease,
      border-color 200ms ease;
  }
  .gallery > .card:hover,
  .favorite-grid > .card:hover,
  .feed-grid > .card:hover,
  .invite-grid > .card:hover {
    transform: translateY(-2px);
    box-shadow:
      0 20px 50px rgba(0, 0, 0, .22),
      inset 0 1px 0 rgba(255, 255, 255, .05);
  }
}

/* ── 4. Reduced motion global fallback ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}