/* =====================================================================
 * Goaccount 统一账户认证中心 · 设计系统（goaccount.css）
 * ---------------------------------------------------------------------
 * 中性科技感 · 双主题（默认深色）· 零外部依赖
 *
 * 主题机制：
 *   - 默认深色：:root 即深色 tokens
 *   - 浅色覆盖：[data-theme="light"]（由 goaccount.js 在 <html> 上设置，
 *     并在页面渲染前由内联初始化脚本兜底，防闪白）
 *   - 持久化：localStorage 键 'ga_theme'（值 'dark' | 'light'，无值默认 dark）
 *
 * 命名约定：全部组件以 .ga- 前缀；颜色一律走 CSS 自定义属性，
 * 不在组件规则里散落硬编码色值（tokens 集中在下方两个块中）。
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 1. Design Tokens —— 深色（默认）
 * ------------------------------------------------------------------ */
:root {
    /* 色彩 · 中性深空灰蓝基调 */
    --ga-bg:            #0a0e14;  /* 页面底色 */
    --ga-bg-deep:       #070a0f;  /* 页面底色（渐变远端） */
    --ga-surface:       #10161f;  /* 卡片 / 浮层表面 */
    --ga-surface-2:     #151d29;  /* 输入框 / 次级表面 */
    --ga-surface-3:     #1b2534;  /* 三级表面 / hover 底色 */
    --ga-border:        #223040;  /* 常规描边 */
    --ga-border-strong: #2f3f55;  /* 强描边 / 按钮描边 */

    /* 文字 */
    --ga-text:   #e8eef6;  /* 主文字 */
    --ga-text-2: #9dabbd;  /* 次级文字 */
    --ga-text-3: #64748b;  /* 弱化 / 占位 */

    /* 强调色 · 克制的青蓝 */
    --ga-accent:        #38bdf8;
    --ga-accent-hover:  #5ecbfb;
    --ga-accent-active: #0ea5e9;
    --ga-accent-soft:   rgba(56, 189, 248, 0.12);
    --ga-accent-border: rgba(56, 189, 248, 0.35);
    --ga-on-accent:     #05233a;  /* 强调色底上的文字 */

    /* 状态色 */
    --ga-success: #34d399;
    --ga-warning: #fbbf24;
    --ga-danger:  #f87171;
    --ga-info:    #60a5fa;

    /* 背景氛围（细网格 + 微光晕，subtle） */
    --ga-glow-1:     rgba(56, 189, 248, 0.06);
    --ga-glow-2:     rgba(96, 165, 250, 0.04);
    --ga-grid-line:  rgba(148, 163, 184, 0.055);
    --ga-nav-bg:     rgba(10, 14, 20, 0.72);

    /* 阴影 */
    --ga-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
    --ga-shadow-2: 0 10px 30px rgba(0, 0, 0, 0.5);
    --ga-shadow-3: 0 24px 64px rgba(0, 0, 0, 0.55);

    /* 圆角 */
    --ga-radius-xs:   6px;
    --ga-radius-sm:   8px;
    --ga-radius-md:   12px;
    --ga-radius-lg:   16px;
    --ga-radius-full: 999px;

    /* 间距（4px 基准） */
    --ga-space-1: 4px;
    --ga-space-2: 8px;
    --ga-space-3: 12px;
    --ga-space-4: 16px;
    --ga-space-5: 24px;
    --ga-space-6: 32px;
    --ga-space-7: 48px;

    /* 字体 */
    --ga-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ga-font-mono: "SF Mono", "Cascadia Code", Consolas, "Courier New", monospace;

    /* 动效 */
    --ga-dur-fast: 0.15s;
    --ga-dur:      0.25s;
    --ga-dur-slow: 0.4s;
    --ga-ease:     cubic-bezier(0.4, 0, 0.2, 1);

    /* 状态色淡底 / 描边（徽标、alert 等用，避免散落 rgba） */
    --ga-success-soft:  rgba(52, 211, 153, 0.12);
    --ga-success-border: rgba(52, 211, 153, 0.35);
    --ga-warning-soft:  rgba(251, 191, 36, 0.12);
    --ga-warning-border: rgba(251, 191, 36, 0.35);
    --ga-danger-soft:   rgba(248, 113, 113, 0.12);
    --ga-danger-border:  rgba(248, 113, 113, 0.35);

    /* 状态色按钮上的文字 */
    --ga-on-warning: #241a02;
    --ga-on-danger:  #2b0a0a;

    /* 表格斑马纹行 */
    --ga-surface-alt: #131a24;

    /* 卡片内边距（ga-card-header 负边距跟随，保证贴边） */
    --ga-card-pad: var(--ga-space-5);

    /* 层级 */
    --ga-z-nav:   100;
    --ga-z-toast: 1000;
}

/* ---------------------------------------------------------------------
 * 2. Design Tokens —— 浅色（[data-theme="light"] 覆盖）
 * ------------------------------------------------------------------ */
[data-theme="light"] {
    --ga-bg:            #f3f6fa;
    --ga-bg-deep:       #e9edf3;
    --ga-surface:       #ffffff;
    --ga-surface-2:     #eef2f7;
    --ga-surface-3:     #e4eaf1;
    --ga-border:        #d9e0ea;
    --ga-border-strong: #c3cedb;

    --ga-text:   #101828;
    --ga-text-2: #475467;
    --ga-text-3: #667085;

    --ga-accent:        #0369a1;
    --ga-accent-hover:  #075985;
    --ga-accent-active: #0c4a6e;
    --ga-accent-soft:   rgba(3, 105, 161, 0.08);
    --ga-accent-border: rgba(3, 105, 161, 0.25);
    --ga-on-accent:     #ffffff;

    --ga-success: #047857;
    --ga-warning: #b45309;
    --ga-danger:  #b91c1c;
    --ga-info:    #1d4ed8;

    --ga-glow-1:    rgba(3, 105, 161, 0.05);
    --ga-glow-2:    rgba(29, 78, 216, 0.035);
    --ga-grid-line: rgba(15, 23, 42, 0.045);
    --ga-nav-bg:    rgba(243, 246, 250, 0.78);

    --ga-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06);
    --ga-shadow-2: 0 10px 30px rgba(15, 23, 42, 0.10);
    --ga-shadow-3: 0 24px 64px rgba(15, 23, 42, 0.14);

    --ga-success-soft:  rgba(4, 120, 87, 0.10);
    --ga-success-border: rgba(4, 120, 87, 0.28);
    --ga-warning-soft:  rgba(180, 83, 9, 0.10);
    --ga-warning-border: rgba(180, 83, 9, 0.28);
    --ga-danger-soft:   rgba(185, 28, 28, 0.10);
    --ga-danger-border:  rgba(185, 28, 28, 0.28);

    --ga-on-warning: #ffffff;
    --ga-on-danger:  #ffffff;

    --ga-surface-alt: #f7f9fc;

    --ga-card-pad: var(--ga-space-5);
}

/* ---------------------------------------------------------------------
 * 3. 基础
 * ------------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--ga-font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ga-text);
    background-color: var(--ga-bg);
    /* 细网格 + 双微光晕：中性科技感氛围，subtle 不花哨 */
    background-image:
        radial-gradient(1200px 600px at 12% -10%, var(--ga-glow-1), transparent 60%),
        radial-gradient(1000px 520px at 88% 112%, var(--ga-glow-2), transparent 60%),
        linear-gradient(var(--ga-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--ga-grid-line) 1px, transparent 1px);
    background-size:
        auto,
        auto,
        44px 44px,
        44px 44px;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--ga-dur) var(--ga-ease), color var(--ga-dur) var(--ga-ease);
}

::selection {
    background: var(--ga-accent-soft);
    color: var(--ga-text);
}

a {
    color: var(--ga-accent);
    text-decoration: none;
    transition: color var(--ga-dur-fast) var(--ga-ease);
}

a:hover {
    color: var(--ga-accent-hover);
}

:focus-visible {
    outline: 2px solid var(--ga-accent);
    outline-offset: 2px;
}

svg {
    display: block;
}

/* ---------------------------------------------------------------------
 * 4. 布局工具
 * ------------------------------------------------------------------ */
.ga-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding-left: var(--ga-space-4);
    padding-right: var(--ga-space-4);
}

.ga-section-title {
    display: flex;
    align-items: center;
    gap: var(--ga-space-3);
    margin: var(--ga-space-6) 0 var(--ga-space-4);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--ga-text-3);
}

.ga-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ga-border);
}

.ga-muted {
    color: var(--ga-text-2);
}

/* ---------------------------------------------------------------------
 * 5. 顶导航 .ga-topbar（吸顶毛玻璃；前台账户中心用）
 *    侧边导航见下方 .ga-nav（后台框架用）。
 *    命名约定：topbar=顶栏，nav=侧边菜单，二者语义分离、互不污染。
 * ------------------------------------------------------------------ */
.ga-topbar {
    position: sticky;
    top: 0;
    z-index: var(--ga-z-nav);
    background: var(--ga-nav-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ga-border);
}

.ga-topbar-inner {
    display: flex;
    align-items: center;
    gap: var(--ga-space-4);
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    height: 60px;
}

.ga-topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--ga-space-2);
    flex: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ga-text);
}

.ga-topbar-brand:hover {
    color: var(--ga-text);
}

.ga-topbar-brand svg {
    width: 26px;
    height: 26px;
    color: var(--ga-accent);
}

.ga-topbar-links {
    display: flex;
    align-items: center;
    gap: var(--ga-space-1);
    margin-left: var(--ga-space-4);
    overflow-x: auto;
    scrollbar-width: none;
}

.ga-topbar-links::-webkit-scrollbar {
    display: none;
}

.ga-topbar-link {
    flex: none;
    padding: var(--ga-space-2) var(--ga-space-3);
    border-radius: var(--ga-radius-sm);
    font-size: 14px;
    color: var(--ga-text-2);
    white-space: nowrap;
}

.ga-topbar-link:hover {
    color: var(--ga-text);
    background: var(--ga-surface-2);
}

.ga-topbar-link.is-active {
    color: var(--ga-accent);
    background: var(--ga-accent-soft);
}

.ga-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--ga-space-2);
    margin-left: auto;
    flex: none;
}

/* 主题切换按钮（太阳 / 月亮内联 SVG，随主题显隐） */
.ga-theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--ga-border);
    border-radius: var(--ga-radius-full);
    background: var(--ga-surface-2);
    color: var(--ga-text-2);
    cursor: pointer;
    transition: color var(--ga-dur-fast) var(--ga-ease),
        border-color var(--ga-dur-fast) var(--ga-ease), background var(--ga-dur-fast) var(--ga-ease);
}

.ga-theme-toggle:hover {
    color: var(--ga-accent);
    border-color: var(--ga-accent-border);
}

.ga-theme-toggle svg {
    width: 17px;
    height: 17px;
}

.ga-theme-toggle .ga-i-sun {
    display: none;
}

[data-theme="light"] .ga-theme-toggle .ga-i-sun {
    display: block;
}

[data-theme="light"] .ga-theme-toggle .ga-i-moon {
    display: none;
}

/* 登录态 / 游客态 */
.ga-topbar-user {
    display: inline-flex;
    align-items: center;
    gap: var(--ga-space-2);
    padding: var(--ga-space-1) var(--ga-space-3) var(--ga-space-1) var(--ga-space-1);
    border: 1px solid var(--ga-border);
    border-radius: var(--ga-radius-full);
    background: var(--ga-surface-2);
    color: var(--ga-text);
    font-size: 13px;
}

.ga-topbar-user:hover {
    border-color: var(--ga-accent-border);
    color: var(--ga-text);
}

.ga-topbar-nickname {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ga-avatar {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--ga-radius-full);
    background: var(--ga-accent-soft);
    border: 1px solid var(--ga-accent-border);
    color: var(--ga-accent);
    font-size: 12px;
    font-weight: 700;
    flex: none;
}

/* ---------------------------------------------------------------------
 * 5b. 侧边导航 .ga-nav（后台管理框架：垂直菜单）
 *    用法：<nav class="ga-nav"><a class="ga-nav-item">…</a>
 *              <a class="ga-nav-item ga-nav-active">…</a></nav>
 *    移动端自动转为横向可滑菜单（见响应式节）。
 * ------------------------------------------------------------------ */
.ga-nav {
    display: flex;
    flex-direction: column;
    gap: var(--ga-space-1);
    width: 224px;
    flex: none;
    padding: var(--ga-space-4) var(--ga-space-3);
    background: var(--ga-surface);
    border-right: 1px solid var(--ga-border);
}

.ga-nav-item {
    display: flex;
    align-items: center;
    gap: var(--ga-space-2);
    padding: var(--ga-space-2) var(--ga-space-3);
    border-radius: var(--ga-radius-sm);
    font-size: 14px;
    color: var(--ga-text-2);
    white-space: nowrap;
    transition: background var(--ga-dur-fast) var(--ga-ease), color var(--ga-dur-fast) var(--ga-ease);
}

.ga-nav-item:hover {
    color: var(--ga-text);
    background: var(--ga-surface-2);
}

.ga-nav-item.is-active,
.ga-nav-active {
    color: var(--ga-accent);
    background: var(--ga-accent-soft);
    font-weight: 600;
}

/* ---------------------------------------------------------------------
 * 6. 按钮 .ga-btn
 * ------------------------------------------------------------------ */
.ga-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ga-space-2);
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--ga-radius-sm);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: background var(--ga-dur-fast) var(--ga-ease),
        border-color var(--ga-dur-fast) var(--ga-ease), color var(--ga-dur-fast) var(--ga-ease),
        transform var(--ga-dur-fast) var(--ga-ease), box-shadow var(--ga-dur-fast) var(--ga-ease);
}

.ga-btn svg {
    width: 17px;
    height: 17px;
    flex: none;
}

.ga-btn:disabled,
.ga-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* 主按钮 */
.ga-btn-primary {
    background: var(--ga-accent);
    color: var(--ga-on-accent);
}

.ga-btn-primary:hover {
    background: var(--ga-accent-hover);
    color: var(--ga-on-accent);
    transform: translateY(-1px);
    box-shadow: var(--ga-shadow-2);
}

.ga-btn-primary:active {
    background: var(--ga-accent-active);
    transform: translateY(0);
}

/* 幽灵按钮 */
.ga-btn-ghost {
    background: transparent;
    border-color: var(--ga-border-strong);
    color: var(--ga-text);
}

.ga-btn-ghost:hover {
    border-color: var(--ga-accent);
    color: var(--ga-accent);
    background: var(--ga-accent-soft);
}

/* Google 授权登录大按钮 */
.ga-btn-google {
    width: 100%;
    justify-content: center;
    padding: 12px 18px;
    font-size: 15px;
    background: var(--ga-surface-2);
    border-color: var(--ga-border-strong);
    color: var(--ga-text);
}

.ga-btn-google:hover {
    border-color: var(--ga-accent);
    color: var(--ga-text);
    transform: translateY(-1px);
    box-shadow: var(--ga-shadow-2);
}

/* 修饰符 */
.ga-btn-block {
    width: 100%;
}

/* 尺寸：sm 与 small 等价 */
.ga-btn-sm,
.ga-btn-small {
    padding: 6px 12px;
    font-size: 13px;
}

.ga-btn-lg {
    padding: 13px 22px;
    font-size: 15px;
}

/* 状态按钮（警告 / 危险） */
.ga-btn-warn {
    background: var(--ga-warning);
    color: var(--ga-on-warning);
}

.ga-btn-warn:hover {
    background: var(--ga-warning);
    color: var(--ga-on-warning);
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: var(--ga-shadow-2);
}

.ga-btn-danger {
    background: var(--ga-danger);
    color: var(--ga-on-danger);
}

.ga-btn-danger:hover {
    background: var(--ga-danger);
    color: var(--ga-on-danger);
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: var(--ga-shadow-2);
}

/* ---------------------------------------------------------------------
 * 7. 表单 .ga-field / .ga-input
 * ------------------------------------------------------------------ */
.ga-field {
    margin-bottom: var(--ga-space-4);
}

.ga-label {
    display: block;
    margin-bottom: var(--ga-space-2);
    font-size: 13px;
    font-weight: 500;
    color: var(--ga-text-2);
}

.ga-input {
    width: 100%;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ga-text);
    background: var(--ga-surface-2);
    border: 1px solid var(--ga-border);
    border-radius: var(--ga-radius-sm);
    transition: border-color var(--ga-dur-fast) var(--ga-ease),
        box-shadow var(--ga-dur-fast) var(--ga-ease);
}

.ga-input::placeholder {
    color: var(--ga-text-3);
}

.ga-input:focus {
    outline: none;
    border-color: var(--ga-accent);
    box-shadow: 0 0 0 3px var(--ga-accent-soft);
}

.ga-field-row {
    display: flex;
    gap: var(--ga-space-2);
}

.ga-field-row .ga-input {
    flex: 1;
    min-width: 0;
}

.ga-field-row .ga-btn {
    flex: none;
}

/* ---------------------------------------------------------------------
 * 8. 徽标 .ga-badge
 * 语义修饰符两套等价：--success/--warning/--danger 与
 * 后台惯用简写 --ok/--warn/--err（互为别名，任选其一）。
 * ------------------------------------------------------------------ */
.ga-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ga-space-1);
    padding: 3px 10px;
    border: 1px solid var(--ga-accent-border);
    border-radius: var(--ga-radius-full);
    background: var(--ga-accent-soft);
    color: var(--ga-accent);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.ga-badge--muted {
    background: var(--ga-surface-2);
    border-color: var(--ga-border);
    color: var(--ga-text-2);
}

.ga-badge--success,
.ga-badge-ok {
    background: var(--ga-success-soft);
    border-color: var(--ga-success-border);
    color: var(--ga-success);
}

.ga-badge--warning,
.ga-badge-warn {
    background: var(--ga-warning-soft);
    border-color: var(--ga-warning-border);
    color: var(--ga-warning);
}

.ga-badge--danger,
.ga-badge-err {
    background: var(--ga-danger-soft);
    border-color: var(--ga-danger-border);
    color: var(--ga-danger);
}

/* ---------------------------------------------------------------------
 * 9. 卡片 .ga-card / 网格 .ga-grid
 * ------------------------------------------------------------------ */
.ga-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--ga-space-4);
}

.ga-card {
    position: relative;
    padding: var(--ga-card-pad);
    background: var(--ga-surface);
    border: 1px solid var(--ga-border);
    border-radius: var(--ga-radius-lg);
    transition: transform var(--ga-dur) var(--ga-ease),
        border-color var(--ga-dur) var(--ga-ease), box-shadow var(--ga-dur) var(--ga-ease);
}

/* 卡片标题行（贴卡片边：负边距抵消卡片内边距，底部描边分隔） */
.ga-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ga-space-3);
    margin: calc(-1 * var(--ga-card-pad)) calc(-1 * var(--ga-card-pad)) var(--ga-card-pad);
    padding: var(--ga-space-4) var(--ga-card-pad);
    border-bottom: 1px solid var(--ga-border);
}

.ga-card-header > :first-child {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ga-text);
}

/* 可点击卡片（hover 微升） */
a.ga-card,
.ga-card--link {
    display: block;
    color: inherit;
    cursor: pointer;
}

a.ga-card:hover,
.ga-card--link:hover {
    transform: translateY(-3px);
    border-color: var(--ga-accent-border);
    box-shadow: var(--ga-shadow-2);
    color: inherit;
}

.ga-card-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--ga-space-4);
    border-radius: var(--ga-radius-md);
    background: var(--ga-accent-soft);
    color: var(--ga-accent);
}

.ga-card-icon svg {
    width: 22px;
    height: 22px;
}

.ga-card-title {
    margin: 0 0 var(--ga-space-2);
    font-size: 16px;
    font-weight: 600;
    color: var(--ga-text);
}

.ga-card-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ga-text-2);
}

.ga-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ga-space-2);
    margin-top: var(--ga-space-4);
}

.ga-card-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--ga-space-1);
    font-size: 13px;
    font-weight: 500;
    color: var(--ga-accent);
}

.ga-card-cta svg {
    width: 14px;
    height: 14px;
    transition: transform var(--ga-dur-fast) var(--ga-ease);
}

a.ga-card:hover .ga-card-cta svg,
.ga-card--link:hover .ga-card-cta svg {
    transform: translateX(3px);
}

/* 商户登陆卡（强调色边框 + 顶部微光线，视觉可区分） */
.ga-card--accent {
    border-color: var(--ga-accent-border);
    background:
        linear-gradient(180deg, var(--ga-accent-soft), transparent 42%),
        var(--ga-surface);
    overflow: hidden;
}

.ga-card--accent::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--ga-accent), transparent);
}

.ga-card--accent:hover {
    border-color: var(--ga-accent);
    box-shadow: var(--ga-shadow-2), 0 0 24px var(--ga-accent-soft);
}

/* ---------------------------------------------------------------------
 * 10. 统计 .ga-stat
 * ------------------------------------------------------------------ */
.ga-stat,
.ga-stat-card {
    padding: var(--ga-space-5);
    background: var(--ga-surface);
    border: 1px solid var(--ga-border);
    border-radius: var(--ga-radius-lg);
}

.ga-stat-value {
    font-family: var(--ga-font-mono);
    font-size: 26px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--ga-text);
}

.ga-stat-value--accent {
    color: var(--ga-accent);
}

.ga-stat-label {
    margin-top: var(--ga-space-1);
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--ga-text-2);
}

/* ---------------------------------------------------------------------
 * 11. 表格 .ga-table
 * ------------------------------------------------------------------ */
.ga-table-wrap {
    overflow-x: auto;
    background: var(--ga-surface);
    border: 1px solid var(--ga-border);
    border-radius: var(--ga-radius-lg);
}

.ga-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    white-space: nowrap;
}

.ga-table th {
    padding: var(--ga-space-3) var(--ga-space-4);
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--ga-text-3);
    border-bottom: 1px solid var(--ga-border);
}

.ga-table td {
    padding: var(--ga-space-3) var(--ga-space-4);
    color: var(--ga-text-2);
    border-bottom: 1px solid var(--ga-border);
}

.ga-table tbody tr:last-child td {
    border-bottom: none;
}

.ga-table tbody tr:nth-child(even) td {
    background: var(--ga-surface-alt);
}

.ga-table tbody tr:hover td {
    background: var(--ga-surface-2);
    color: var(--ga-text);
}

/* 表格单元格允许换行（长文本列） */
.ga-cell-break {
    white-space: normal;
    word-break: break-all;
}

/* ---------------------------------------------------------------------
 * 12. 登录 / 注册页骨架 .ga-auth
 * ------------------------------------------------------------------ */
.ga-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 61px);
    padding: var(--ga-space-6) var(--ga-space-4);
}

.ga-auth-card {
    width: 100%;
    max-width: 440px;
    padding: var(--ga-space-6);
    background: var(--ga-surface);
    border: 1px solid var(--ga-border);
    border-radius: var(--ga-radius-lg);
    box-shadow: var(--ga-shadow-3);
}

.ga-auth-title {
    margin: 0 0 var(--ga-space-2);
    font-size: 22px;
    font-weight: 700;
    color: var(--ga-text);
}

.ga-auth-sub {
    margin: 0 0 var(--ga-space-5);
    font-size: 13px;
    color: var(--ga-text-2);
}

.ga-auth-foot {
    margin-top: var(--ga-space-5);
    text-align: center;
    font-size: 13px;
    color: var(--ga-text-2);
}

/* 分段切换 tabs */
.ga-tabs {
    display: flex;
    gap: var(--ga-space-1);
    padding: 3px;
    margin-bottom: var(--ga-space-5);
    background: var(--ga-surface-2);
    border: 1px solid var(--ga-border);
    border-radius: var(--ga-radius-sm);
}

.ga-tab {
    flex: 1;
    padding: var(--ga-space-2) var(--ga-space-3);
    border: none;
    border-radius: var(--ga-radius-xs);
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--ga-text-2);
    cursor: pointer;
    transition: background var(--ga-dur-fast) var(--ga-ease), color var(--ga-dur-fast) var(--ga-ease);
}

.ga-tab:hover {
    color: var(--ga-text);
}

.ga-tab.is-active {
    background: var(--ga-accent-soft);
    color: var(--ga-accent);
    font-weight: 600;
}

/* 分割线（中间带文字） */
.ga-divider {
    display: flex;
    align-items: center;
    gap: var(--ga-space-3);
    margin: var(--ga-space-5) 0;
    font-size: 12px;
    color: var(--ga-text-3);
}

.ga-divider::before,
.ga-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--ga-border);
}

/* ---------------------------------------------------------------------
 * 13. 首页 hero
 * ------------------------------------------------------------------ */
.ga-hero {
    padding: var(--ga-space-7) 0 var(--ga-space-5);
}

.ga-hero-title {
    margin: 0 0 var(--ga-space-2);
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--ga-text);
}

.ga-hero-sub {
    margin: 0;
    font-size: 15px;
    color: var(--ga-text-2);
}

.ga-hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--ga-space-4);
    margin-top: var(--ga-space-5);
}

/* ---------------------------------------------------------------------
 * 14. Toast 轻提示
 * ------------------------------------------------------------------ */
.ga-toast-wrap {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--ga-z-toast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ga-space-2);
    pointer-events: none;
}

.ga-toast {
    display: flex;
    align-items: center;
    gap: var(--ga-space-2);
    min-width: 220px;
    max-width: min(90vw, 420px);
    padding: var(--ga-space-3) var(--ga-space-4);
    background: var(--ga-surface);
    border: 1px solid var(--ga-border);
    border-left: 3px solid var(--ga-accent);
    border-radius: var(--ga-radius-sm);
    box-shadow: var(--ga-shadow-2);
    color: var(--ga-text);
    font-size: 14px;
    animation: ga-toast-in var(--ga-dur) var(--ga-ease);
}

.ga-toast svg {
    width: 17px;
    height: 17px;
    flex: none;
    color: var(--ga-accent);
}

.ga-toast--success {
    border-left-color: var(--ga-success);
}

.ga-toast--success svg {
    color: var(--ga-success);
}

.ga-toast--danger {
    border-left-color: var(--ga-danger);
}

.ga-toast--danger svg {
    color: var(--ga-danger);
}

.ga-toast.is-out {
    animation: ga-toast-out var(--ga-dur) var(--ga-ease) forwards;
}

@keyframes ga-toast-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes ga-toast-out {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* ---------------------------------------------------------------------
 * 15. 页脚
 * ------------------------------------------------------------------ */
.ga-footer {
    margin-top: var(--ga-space-7);
    border-top: 1px solid var(--ga-border);
    padding: var(--ga-space-5) 0;
    font-size: 12px;
    color: var(--ga-text-3);
}

.ga-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ga-space-3);
}

.ga-footer a {
    color: var(--ga-text-2);
}

.ga-footer a:hover {
    color: var(--ga-accent);
}

/* ---------------------------------------------------------------------
 * 16. 后台管理框架与补充组件（与管理中心切片对齐）
 *     布局约定：body.ga-admin-body > .ga-topbar，
 *     下方用一个 flex 行容器包裹 .ga-nav（侧边）+ main.ga-main（主区）。
 * ------------------------------------------------------------------ */
.ga-admin-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 后台顶栏（.ga-topbar 见第 5 节；此处补品牌/用户微调） */
.ga-topbar {
    padding-left: var(--ga-space-4);
    padding-right: var(--ga-space-4);
}

.ga-topbar-brand {
    font-size: 15px;
}

.ga-topbar-user {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--ga-space-2);
    font-size: 13px;
    color: var(--ga-text-2);
}

.ga-topbar-nickname {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 主区 / 页头 */
.ga-main {
    flex: 1;
    min-width: 0;
    padding: var(--ga-space-5) var(--ga-space-4);
}

.ga-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ga-space-3);
    margin-bottom: var(--ga-space-4);
}

.ga-page-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--ga-text);
}

/* 登录页骨架（后台登录；前台登录用 .ga-auth 系列） */
.ga-login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--ga-space-5) var(--ga-space-4);
}

.ga-login-wrap {
    width: 100%;
    max-width: 400px;
}

.ga-login-card {
    padding: var(--ga-space-6);
    background: var(--ga-surface);
    border: 1px solid var(--ga-border);
    border-radius: var(--ga-radius-lg);
    box-shadow: var(--ga-shadow-3);
}

.ga-login-brand {
    display: flex;
    align-items: center;
    gap: var(--ga-space-2);
    margin-bottom: var(--ga-space-5);
    font-size: 16px;
    font-weight: 700;
    color: var(--ga-text);
}

.ga-login-brand svg {
    width: 30px;
    height: 30px;
    color: var(--ga-accent);
}

.ga-login-title {
    margin: 0 0 var(--ga-space-2);
    font-size: 22px;
    font-weight: 700;
    color: var(--ga-text);
}

.ga-login-tip {
    margin: 0 0 var(--ga-space-5);
    font-size: 13px;
    color: var(--ga-text-2);
}

/* 表单（与 .ga-field/.ga-label 等价的语义命名，可混用） */
.ga-form {
    display: block;
}

.ga-form-item {
    margin-bottom: var(--ga-space-4);
}

.ga-form-label {
    display: block;
    margin-bottom: var(--ga-space-2);
    font-size: 13px;
    font-weight: 500;
    color: var(--ga-text-2);
}

.ga-form-tip {
    margin-top: var(--ga-space-1);
    font-size: 12px;
    color: var(--ga-text-3);
}

/* 筛选区 */
.ga-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ga-space-3);
}

.ga-filter-form {
    flex: 1;
    min-width: 0;
}

.ga-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--ga-space-3);
    align-items: end;
}

/* 分页 */
.ga-paging {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ga-space-2);
    margin-top: var(--ga-space-4);
}

.ga-paging a,
.ga-paging span,
.ga-paging button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 6px 10px;
    border: 1px solid var(--ga-border);
    border-radius: var(--ga-radius-xs);
    background: var(--ga-surface-2);
    color: var(--ga-text-2);
    font-size: 13px;
}

.ga-paging a:hover {
    border-color: var(--ga-accent-border);
    color: var(--ga-accent);
}

/* 当前页：.current（TP 分页输出）/ .is-current / .is-active 均识别 */
.ga-paging .current,
.ga-paging .is-current,
.ga-paging .is-active {
    background: var(--ga-accent);
    border-color: var(--ga-accent);
    color: var(--ga-on-accent);
    font-weight: 600;
}

/* 空态 */
.ga-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ga-space-3);
    padding: var(--ga-space-7) var(--ga-space-4);
    color: var(--ga-text-3);
    font-size: 13px;
    text-align: center;
}

.ga-empty svg {
    width: 40px;
    height: 40px;
    opacity: 0.5;
}

/* 简易条形图：.ga-bar > span style="width:N%" */
.ga-bar {
    height: 8px;
    background: var(--ga-surface-2);
    border-radius: var(--ga-radius-full);
    overflow: hidden;
}

.ga-bar > span {
    display: block;
    height: 100%;
    background: var(--ga-accent);
    border-radius: inherit;
}

.ga-bar--success > span,
.ga-bar--ok > span {
    background: var(--ga-success);
}

.ga-bar--warning > span,
.ga-bar--warn > span {
    background: var(--ga-warning);
}

.ga-bar--danger > span,
.ga-bar--err > span {
    background: var(--ga-danger);
}

/* 提示条 */
.ga-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--ga-space-2);
    padding: var(--ga-space-3) var(--ga-space-4);
    border: 1px solid var(--ga-border);
    border-left: 3px solid var(--ga-accent);
    border-radius: var(--ga-radius-sm);
    background: var(--ga-surface);
    color: var(--ga-text);
    font-size: 13px;
}

.ga-alert--error,
.ga-alert-error {
    border-left-color: var(--ga-danger);
    background: var(--ga-danger-soft);
    color: var(--ga-danger);
}

/* ---------------------------------------------------------------------
 * 17. 响应式（移动端单列）
 * ------------------------------------------------------------------ */
@media (max-width: 720px) {
    .ga-grid {
        grid-template-columns: 1fr;
    }

    .ga-hero {
        padding: var(--ga-space-6) 0 var(--ga-space-4);
    }

    .ga-auth {
        min-height: calc(100vh - 57px);
        padding: var(--ga-space-4);
    }

    .ga-auth-card {
        padding: var(--ga-space-5);
    }

    /* 卡片内边距变量化，ga-card-header 负边距自动跟随 */
    .ga-card {
        --ga-card-pad: var(--ga-space-4);
    }

    .ga-topbar-inner {
        height: 56px;
    }

    .ga-topbar-links {
        margin-left: var(--ga-space-2);
    }

    .ga-topbar-nickname {
        display: none;
    }

    /* 侧边导航转横向可滑菜单 */
    .ga-nav {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--ga-border);
    }

    .ga-nav-item {
        flex: none;
    }

    .ga-main {
        padding: var(--ga-space-4);
    }

    .ga-login-card {
        padding: var(--ga-space-5);
    }

    .ga-toast-wrap {
        top: auto;
        bottom: 20px;
    }
}

/* 减少动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}