/* ============================================================
   渠源体育 · 统一设计系统
   - 全站颜色 / 字体 / 间距 / 阴影 / 动画 / 组件类
   - 在 _nav.html 里通过 <link> 引入；不和老页面的 :root 冲突
   ============================================================ */

:root {
    /* 颜色（暗金主题 - Linear/Vercel 现代专业感） */
    --qy-bg-0:        #0a0f1c;      /* 最深底层 */
    --qy-bg-1:        #0f172a;      /* 页面背景 */
    --qy-bg-2:        #131c2e;      /* 容器/卡片底 */
    --qy-bg-3:        #1e293b;      /* 卡片主体 */
    --qy-bg-4:        #334155;      /* 卡片内嵌 */
    --qy-bg-5:        #475569;      /* 悬浮提亮 */
    --qy-border-soft: #1e293b;
    --qy-border:      #2a3651;
    --qy-border-strong:#475569;

    --qy-text-0:      #ffffff;      /* 最亮 */
    --qy-text-1:      #f1f5f9;      /* 主文字 */
    --qy-text-2:      #cbd5e1;      /* 次文字 */
    --qy-text-3:      #94a3b8;      /* 弱化 */
    --qy-text-4:      #64748b;      /* 极弱 */

    --qy-brand:       #fbbf24;      /* 金色品牌主色 */
    --qy-brand-1:     #fde68a;      /* 浅金 */
    --qy-brand-2:     #f59e0b;      /* 深金 */
    --qy-brand-3:     #d97706;      /* 燃金 */
    --qy-brand-gradient: linear-gradient(135deg, #fde68a 0%, #fbbf24 50%, #f59e0b 100%);

    --qy-success:     #10b981;
    --qy-success-soft:#6ee7b7;
    --qy-warning:     #f59e0b;
    --qy-warning-soft:#fcd34d;
    --qy-danger:      #ef4444;
    --qy-danger-soft: #fca5a5;
    --qy-info:        #3b82f6;
    --qy-info-soft:   #93c5fd;
    --qy-purple:      #a855f7;
    --qy-purple-soft: #d8b4fe;

    /* 间距标尺（8 倍数体系） */
    --qy-sp-1: 4px;
    --qy-sp-2: 8px;
    --qy-sp-3: 12px;
    --qy-sp-4: 16px;
    --qy-sp-5: 20px;
    --qy-sp-6: 24px;
    --qy-sp-8: 32px;
    --qy-sp-10: 40px;
    --qy-sp-12: 48px;
    --qy-sp-16: 64px;

    /* 圆角 */
    --qy-r-sm:  6px;
    --qy-r:     10px;
    --qy-r-md:  14px;
    --qy-r-lg:  18px;
    --qy-r-xl:  24px;
    --qy-r-full: 999px;

    /* 阴影 */
    --qy-sh-1: 0 1px 2px rgba(0,0,0,.18);
    --qy-sh-2: 0 4px 12px rgba(0,0,0,.28);
    --qy-sh-3: 0 8px 24px rgba(0,0,0,.36);
    --qy-sh-4: 0 16px 48px rgba(0,0,0,.45);
    --qy-sh-glow: 0 0 32px rgba(251,191,36,.28);

    /* 字体 */
    --qy-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                     'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
    --qy-font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', Consolas,
                     'Liberation Mono', monospace;
    --qy-font-display: 'Kaiti SC', 'STKaiti', 'KaiTi', serif;

    /* 动画曲线（统一缓动） */
    --qy-ease:        cubic-bezier(.4, 0, .2, 1);     /* 标准 */
    --qy-ease-out:    cubic-bezier(.0, 0, .2, 1);     /* 入场 */
    --qy-ease-in:     cubic-bezier(.4, 0, 1, 1);      /* 离场 */
    --qy-ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* 弹性 */
    --qy-dur-fast: .12s;
    --qy-dur:      .2s;
    --qy-dur-slow: .35s;
}

/* ============================================================
   基础排版
   ============================================================ */

* {
    box-sizing: border-box;
}

body {
    font-family: var(--qy-font-sans);
    color: var(--qy-text-1);
    background: var(--qy-bg-1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 数字、技术性内容用等宽 */
.qy-mono,
.qy-num,
[class*="qy-num-"],
.qy-data {
    font-family: var(--qy-font-mono);
    font-feature-settings: "tnum";
}

/* 选中文字 */
::selection {
    background: rgba(251,191,36,.32);
    color: var(--qy-text-0);
}

/* 滚动条（暗主题） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--qy-bg-1); }
::-webkit-scrollbar-thumb {
    background: var(--qy-bg-4);
    border-radius: 5px;
    border: 2px solid var(--qy-bg-1);
}
::-webkit-scrollbar-thumb:hover { background: var(--qy-bg-5); }

/* ============================================================
   通用组件类（qy-* 前缀，不冲突老代码）
   ============================================================ */

/* 卡片 */
.qy-card {
    background: var(--qy-bg-3);
    border: 1px solid var(--qy-border);
    border-radius: var(--qy-r-md);
    padding: var(--qy-sp-5);
    box-shadow: var(--qy-sh-2);
    transition: border-color var(--qy-dur) var(--qy-ease),
                transform var(--qy-dur) var(--qy-ease),
                box-shadow var(--qy-dur) var(--qy-ease);
}
.qy-card.qy-hover:hover {
    border-color: var(--qy-border-strong);
    transform: translateY(-2px);
    box-shadow: var(--qy-sh-3);
}
.qy-card-glass {
    background: rgba(30, 41, 59, .72);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--qy-r-lg);
    box-shadow:
        0 24px 64px rgba(0,0,0,.5),
        0 1px 0 rgba(255,255,255,.06) inset;
    position: relative;
    overflow: hidden;
}
.qy-card-glass::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg,
        transparent, rgba(251,191,36,.6) 50%, transparent);
}

/* 按钮 */
.qy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--qy-sp-2);
    padding: 9px 18px;
    background: var(--qy-bg-4);
    color: var(--qy-text-1);
    border: 1px solid var(--qy-border-strong);
    border-radius: var(--qy-r);
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--qy-dur-fast) var(--qy-ease);
    text-decoration: none;
    line-height: 1.2;
}
.qy-btn:hover:not(:disabled) {
    background: var(--qy-bg-5);
    border-color: var(--qy-brand);
    color: var(--qy-text-0);
}
.qy-btn:disabled { opacity: .5; cursor: not-allowed; }
.qy-btn-primary {
    background: var(--qy-brand-gradient);
    color: #0f172a;
    border: none;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(251,191,36,.3), 0 1px 0 rgba(255,255,255,.4) inset;
    position: relative;
    overflow: hidden;
}
.qy-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(251,191,36,.45), 0 1px 0 rgba(255,255,255,.4) inset;
}
.qy-btn-primary::after {
    content: '';
    position: absolute; top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-25deg);
}
.qy-btn-primary:hover::after {
    left: 125%;
    transition: left .7s var(--qy-ease);
}
.qy-btn-ghost {
    background: transparent;
    border-color: var(--qy-border-strong);
}
.qy-btn-danger {
    background: var(--qy-danger);
    border-color: var(--qy-danger);
    color: #fff;
}
.qy-btn-sm { padding: 5px 12px; font-size: 12px; }

/* Chip / 标签 */
.qy-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--qy-r-sm);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    background: var(--qy-bg-4);
    color: var(--qy-text-2);
}
.qy-chip-brand { background: rgba(251,191,36,.14); color: var(--qy-brand); }
.qy-chip-success { background: rgba(16,185,129,.14); color: var(--qy-success-soft); }
.qy-chip-warning { background: rgba(245,158,11,.14); color: var(--qy-warning-soft); }
.qy-chip-danger { background: rgba(239,68,68,.14); color: var(--qy-danger-soft); }
.qy-chip-info { background: rgba(59,130,246,.14); color: var(--qy-info-soft); }
.qy-chip-purple { background: rgba(168,85,247,.14); color: var(--qy-purple-soft); }
.qy-chip-outline {
    background: transparent;
    border: 1px solid var(--qy-border-strong);
    color: var(--qy-text-3);
}

/* 渐变文字 */
.qy-text-gradient {
    background: var(--qy-brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.qy-text-gradient-cool {
    background: linear-gradient(135deg, #fff 0%, var(--qy-brand) 50%, #fcd34d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 输入框 */
.qy-input {
    width: 100%;
    padding: 11px 14px;
    background: var(--qy-bg-1);
    color: var(--qy-text-1);
    border: 1.5px solid var(--qy-border-strong);
    border-radius: var(--qy-r);
    font-size: 14px;
    font-family: inherit;
    transition: all var(--qy-dur) var(--qy-ease);
}
.qy-input:focus {
    outline: none;
    border-color: var(--qy-brand);
    box-shadow: 0 0 0 3px rgba(251,191,36,.15);
    background: var(--qy-bg-2);
}
.qy-input::placeholder { color: var(--qy-text-4); }

/* 分隔 */
.qy-divider {
    height: 1px;
    background: var(--qy-border);
    margin: var(--qy-sp-5) 0;
}
.qy-divider-gradient {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--qy-border-strong) 30%, var(--qy-border-strong) 70%, transparent);
    margin: var(--qy-sp-6) 0;
}

/* Section title */
.qy-section-title {
    display: flex;
    align-items: baseline;
    gap: var(--qy-sp-3);
    margin-bottom: var(--qy-sp-4);
}
.qy-section-title h2 {
    font-size: 18px;
    font-weight: 800;
    color: var(--qy-text-1);
    margin: 0;
    letter-spacing: .3px;
}
.qy-section-title .qy-section-sub {
    color: var(--qy-text-3);
    font-size: 12px;
    letter-spacing: 2px;
    font-family: var(--qy-font-mono);
    text-transform: uppercase;
}

/* Pulse 状态点 */
.qy-pulse-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--qy-success);
    box-shadow: 0 0 8px var(--qy-success);
    animation: qy-pulse 2s ease-in-out infinite;
}
@keyframes qy-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(.8); }
}

/* 背景网格底纹 - 加在 body 上 */
.qy-bg-grid {
    background-image:
        radial-gradient(circle at center, rgba(251,191,36,.035) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: 0 0;
}

/* 通用动画 */
@keyframes qy-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes qy-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes qy-scale-in {
    from { opacity: 0; transform: scale(.96); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes qy-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.qy-anim-fade-in { animation: qy-fade-in .4s var(--qy-ease-out); }
.qy-anim-fade-up { animation: qy-fade-up .4s var(--qy-ease-out); }
.qy-anim-scale-in { animation: qy-scale-in .35s var(--qy-ease-spring); }

/* 骨架屏 */
.qy-skeleton {
    background: linear-gradient(90deg,
        var(--qy-bg-3) 25%,
        var(--qy-bg-4) 50%,
        var(--qy-bg-3) 75%);
    background-size: 200% 100%;
    animation: qy-shimmer 1.5s infinite;
    border-radius: var(--qy-r-sm);
}

/* 工具类 */
.qy-flex { display: flex; }
.qy-flex-center { display: flex; align-items: center; justify-content: center; }
.qy-flex-between { display: flex; align-items: center; justify-content: space-between; }
.qy-flex-1 { flex: 1; }
.qy-gap-1 { gap: var(--qy-sp-1); }
.qy-gap-2 { gap: var(--qy-sp-2); }
.qy-gap-3 { gap: var(--qy-sp-3); }
.qy-gap-4 { gap: var(--qy-sp-4); }
.qy-flex-wrap { flex-wrap: wrap; }
.qy-mb-1 { margin-bottom: var(--qy-sp-1); }
.qy-mb-2 { margin-bottom: var(--qy-sp-2); }
.qy-mb-3 { margin-bottom: var(--qy-sp-3); }
.qy-mb-4 { margin-bottom: var(--qy-sp-4); }
.qy-mb-6 { margin-bottom: var(--qy-sp-6); }
.qy-text-muted { color: var(--qy-text-3); }
.qy-text-brand { color: var(--qy-brand); }
.qy-text-success { color: var(--qy-success-soft); }
.qy-text-danger { color: var(--qy-danger-soft); }

/* 响应式：移动端默认更紧凑 */
@media (max-width: 768px) {
    .qy-card { padding: var(--qy-sp-4); }
}