/* ═══════════════════════════════════════════════════════════════
   QT Design · 蜻蜓设计规范落地层（对齐公司 Figma Dragonfly-mobile）
   加载顺序：style.css 之后 —— 同优先级下后定义的变量覆盖先定义的，
   全站 var(--primary) 等引用自动切换为 QT 规范色，无需改动旧样式。
   规范来源：工作区《QTDesign-设计规范.md》（2026-07-23 提取）
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── QT 原始 token · brand 品牌绿（50=key color） ── */
    --qt-brand-5:  #E8FFEF;  --qt-brand-10: #B2F3C9;  --qt-brand-20: #82E5A8;
    --qt-brand-30: #54DA8C;  --qt-brand-40: #2ACD74;  --qt-brand-50: #02C160;
    --qt-brand-60: #05A357;  --qt-brand-70: #02874B;  --qt-brand-80: #036A3E;
    --qt-brand-90: #004D2E;
    /* ── QT 原始 token · 功能色 ── */
    --qt-green-50: #51B242;  --qt-red-50: #E24F48;   --qt-orange-50: #EF8432;
    --qt-blue-50:  #4F8FF3;  --qt-gold-50: #EEBD47;  --qt-cyan-50:  #5DC6C8;
    --qt-gold-10:  #FCF5C5;  --qt-gold-60: #C49536;  --qt-gold-70:  #9B7027;
    /* ── QT 原始 token · 中性 ── */
    --qt-n-5: #FFFFFF;  --qt-n-10: #F8F8F8;  --qt-n-20: #F5F5F5;  --qt-n-30: #F0F0F0;
    --qt-n-40: #DDDDDD; --qt-n-60: #999999;  --qt-n-70: #666666;  --qt-n-90: #111111;
    /* ── QT 圆角（8px 基准 / 4px 浮动） ── */
    --qt-radius-s: 4px;  --qt-radius-m: 8px;  --qt-radius-l: 12px;  --qt-radius-xl: 16px;

    /* ══ 语义变量覆盖（旧 Tailwind emerald → 指定绿色系 #02C160 系） ══ */
    --primary:        var(--qt-brand-50);   /* #02C160 指定key color */
    --primary-600:    var(--qt-brand-60);   /* #05A357 */
    --primary-700:    var(--qt-brand-70);   /* #02874B */
    --primary-50:     var(--qt-brand-5);    /* #E8FFEF */
    --primary-100:    var(--qt-brand-10);   /* #B2F3C9 */
    --primary-200:    var(--qt-brand-20);   /* #82E5A8 */
    --emerald:        var(--qt-brand-50);
    --emerald-50:     var(--qt-brand-5);
    --violet:         var(--qt-brand-40);   /* 旧版误命名的浅绿 */

    /* 品牌渐变（QT 色阶重构） */
    --grad-brand: linear-gradient(135deg, var(--qt-brand-50) 0%, var(--qt-brand-60) 100%);
    --grad-hero:  linear-gradient(160deg, #0E2E1C 0%, var(--qt-brand-80) 34%, var(--qt-brand-70) 62%, var(--qt-brand-60) 100%);
    --grad-gold:  linear-gradient(135deg, var(--qt-gold-50), var(--qt-orange-50));

    /* 辅助色对齐 QT 功能色 */
    --accent:    var(--qt-gold-50);         /* 金 #EEBD47 */
    --accent-50: #FFFCEA;
    --rose:      var(--qt-red-50);
    --sky:       var(--qt-blue-50);

    /* 中性色微调（QT neutral） */
    --bg:            #F6F8F7;               /* 页面底·微绿调中性 */
    --text:          var(--qt-n-90);
    --text-600:      var(--qt-n-70);
    --text-400:      var(--qt-n-60);
    --text-300:      var(--qt-n-40);
    --border:        var(--qt-n-40);
    --border-light:  var(--qt-n-30);

    /* 阴影（光晕换 QT 绿） */
    --shadow-glow: 0 8px 24px rgba(2,193,96,0.28);

    /* 圆角保持 QT 梯度（旧值恰好符合 8 像素原则，仅别名对齐） */
    --r:     var(--qt-radius-xl);   /* 16 */
    --r-sm:  var(--qt-radius-l);    /* 12 */
    --r-xs:  var(--qt-radius-m);    /* 8 */

    /* 字体：PingFang SC 正文 + DIN 数字 */
    --font: "PingFang SC", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    --font-num: "DIN", "DIN Alternate", "Bahnschrift", "PingFang SC", sans-serif;

    /* QT 动效曲线 */
    --qt-ease: cubic-bezier(0.22, 1, 0.36, 1);      /* 缓出·互联网感 */
    --qt-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* 轻回弹 */
}

/* ═══════════════════ 全局细节质感 ═══════════════════ */
::selection { background: rgba(2,193,96,.25); color: var(--qt-brand-90); }

/* 滚动条（webkit） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--qt-n-40); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--qt-brand-50); border: 2px solid transparent; background-clip: content-box; }

/* 键盘焦点环（无障碍） */
:focus-visible { outline: 2px solid var(--qt-brand-50); outline-offset: 2px; border-radius: 4px; }

/* 数字场景 */
.hs-num, .stat-num, .qt-num { font-family: var(--font-num); letter-spacing: .5px; }

/* ═══════════════════ 动效 keyframes 库 ═══════════════════ */
@keyframes qtFadeUp {                          /* 进入·上浮渐显 */
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes qtFadeIn {
    from { opacity: 0; } to { opacity: 1; }
}
@keyframes qtFloat {                           /* 缓慢漂浮（装饰元素） */
    0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); }
}
@keyframes qtAurora {                          /* 极光流动（hero 光斑） */
    0%, 100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(40px,-30px) scale(1.15); }
    66%      { transform: translate(-30px,20px) scale(0.92); }
}
@keyframes qtGradientShift {                   /* 渐变流动（文字/背景） */
    0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }
}
@keyframes qtShimmer {                         /* 骨架扫光 */
    from { background-position: -200% 0; } to { background-position: 200% 0; }
}
@keyframes qtBorderSpin {                      /* 边框流光旋转 */
    to { transform: rotate(360deg); }
}
@keyframes qtPulseSoft {                       /* 柔光呼吸 */
    0%, 100% { box-shadow: 0 0 0 0 rgba(2,193,96,.35); }
    50%      { box-shadow: 0 0 0 10px rgba(2,193,96,0); }
}
@keyframes qtPopIn {                           /* 弹入（回弹） */
    0% { opacity: 0; transform: scale(.86); }
    100% { opacity: 1; transform: scale(1); }
}

/* ═══════════════════ 进入动画（JS 驱动） ═══════════════════ */
.qt-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s var(--qt-ease), transform .7s var(--qt-ease);
    transition-delay: var(--qt-d, 0s);         /* stagger 延迟由 JS 写入 */
    will-change: opacity, transform;
}
.qt-reveal.qt-in { opacity: 1; transform: translateY(0); }

/* ═══════════════════ 渐变文字（静态版，动画版与 background-clip:text 兼容性差已禁用） ═══════════════════ */
/* 注意：background animation + background-clip:text 在部分 Chromium 下会导致文字不渲染，
   因此只提供静态渐变版本，流动感由光斑/边框流光等其他元素承载 */
.qt-text-grad {
    text-shadow: none !important;
    background: linear-gradient(100deg, #ffffff 20%, var(--qt-brand-20) 55%, #DFF9E7 80%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.qt-text-grad-dark {
    text-shadow: none !important;
    background: linear-gradient(90deg, var(--qt-brand-70), var(--qt-brand-50));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ═══════════════════ 卡片聚光灯（Spotlight，鼠标跟踪高光） ═══════════════════ */
.qt-spot { position: relative; }
.qt-spot::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0;
    background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%),
                rgba(2,193,96,.12), transparent 45%);
    opacity: 0; transition: opacity .35s var(--qt-ease); pointer-events: none;
}
.qt-spot:hover::before { opacity: 1; }

/* ═══════════════════ 按钮涟漪 + 磁吸浮起 ═══════════════════ */
.qt-ripple { position: relative; overflow: hidden; }
.qt-ripple .qt-rip {
    position: absolute; border-radius: 50%; pointer-events: none;
    background: rgba(255,255,255,.45); transform: scale(0);
    animation: qtRip .55s var(--qt-ease) forwards;
}
@keyframes qtRip { to { transform: scale(2.6); opacity: 0; } }

.btn { transition: transform .25s var(--qt-ease), box-shadow .25s var(--qt-ease), background .2s, color .2s, border-color .2s; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(2,193,96,.38); }
.btn-primary:active { transform: translateY(0) scale(.97); }

/* ═══════════════════ 边框流光（featured 卡片） ═══════════════════ */
.qt-beam { position: relative; isolation: isolate; }
.qt-beam::after {
    content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1;
    background: conic-gradient(from var(--qt-angle, 0deg),
        transparent 0%, var(--qt-brand-40) 12%, transparent 26%,
        transparent 55%, var(--qt-gold-50) 68%, transparent 82%);
    animation: qtBorderSpin 4.5s linear infinite;
    opacity: .9;
}
@property --qt-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* ═══════════════════ 骨架屏扫光 ═══════════════════ */
.qt-shimmer {
    background: linear-gradient(90deg, var(--qt-n-20) 25%, var(--qt-n-5) 50%, var(--qt-n-20) 75%);
    background-size: 200% 100%;
    animation: qtShimmer 1.4s linear infinite;
    border-radius: var(--qt-radius-m);
}

/* ═══════════════════ 装饰：漂浮微动画 ═══════════════════ */
.qt-float { animation: qtFloat 5s ease-in-out infinite; }
.qt-float-d1 { animation: qtFloat 5s ease-in-out .8s infinite; }
.qt-float-d2 { animation: qtFloat 6s ease-in-out 1.6s infinite; }

/* ═══════════════════ Hero 极光光斑 ═══════════════════ */
.qt-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.qt-aurora i {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: .26;
    animation: qtAurora 12s ease-in-out infinite;
}
.qt-aurora i:nth-child(1) { width: 40vw; height: 40vw; min-width: 340px; min-height: 340px;
    background: radial-gradient(circle, rgba(84,218,140,.42), transparent 65%);
    top: -22%; right: -10%; }
.qt-aurora i:nth-child(2) { width: 30vw; height: 30vw; min-width: 260px; min-height: 260px;
    background: radial-gradient(circle, rgba(154,228,173,.30), transparent 65%);
    bottom: -26%; left: -8%; animation-delay: -4s; }
.qt-aurora i:nth-child(3) { width: 20vw; height: 20vw; min-width: 180px; min-height: 180px;
    background: radial-gradient(circle, rgba(93,198,200,.28), transparent 65%);
    top: 36%; left: 28%; animation-delay: -8s; }

/* Hero 内容层必须在光斑之上 */
.hero-v3 > *:not(.qt-aurora) { position: relative; z-index: 1; }

/* ══ Hero 去黄去灰：原黄绿照片底图+墨绿底混合后色调闷脏、文字不清 ══
   方案：QT 正翠绿渐变为主导（brand-90→80→70→60，饱和无黄味），
   底图大幅压低只留隐约纹理，遮罩统一用深翠绿（brand-90 基色） */
.hero-v3 {
    background: linear-gradient(155deg,
        #003A22 0%, var(--qt-brand-90) 35%,
        var(--qt-brand-80) 68%, var(--qt-brand-70) 100%) !important;
}
.hero-v3::before { opacity: 0.16 !important; }          /* 黄绿底图压低：只留纹理不见黄 */
.hero-v3::after {
    background: linear-gradient(180deg,
        rgba(0,58,34,0.46) 0%, rgba(0,58,34,0.28) 45%, rgba(0,44,26,0.70) 100%) !important;
}

/* ══ Footer 去黄去灰：深翠绿纯色渐变 + 底图压到极限 + 文字提亮 ══ */
.footer {
    background: linear-gradient(175deg, #035628 0%, var(--qt-brand-90) 55%, #003A22 100%) !important;
    color: rgba(255,255,255,0.82) !important;
}
.footer::before { opacity: 0.05 !important; }           /* 纹理几乎不可见，杜绝黄味 */
.footer-brand .fb-slogan { color: rgba(255,255,255,0.72) !important; }
.footer-col a { color: rgba(255,255,255,0.74) !important; }
.footer-col a:hover { color: #fff !important; }
.footer-col p { color: rgba(255,255,255,0.68) !important; }
.footer-bottom { color: rgba(255,255,255,0.58) !important; }
.footer-grid { border-bottom-color: rgba(255,255,255,0.16) !important; }

/* ═══════════════════ 导航栏质感升级 ═══════════════════ */
.navbar {
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
}
.nav-links a, .nav-drop-btn {
    position: relative; transition: color .2s var(--qt-ease);
}
.nav-links a::after, .nav-drop-btn::after {
    content: ""; position: absolute; left: 50%; bottom: 2px; width: 0; height: 2.5px;
    border-radius: 2px; background: var(--grad-brand);
    transform: translateX(-50%); transition: width .28s var(--qt-ease);
}
.nav-links a:hover::after, .nav-links a.active::after,
.nav-drop-btn:hover::after, .nav-drop-btn.active::after { width: 60%; }

/* 热门徽章微光 */
.nav-hot { animation: qtPulseSoft 2.6s ease-in-out infinite; border-radius: 6px; }

/* ═══════════════════ 卡片类通用质感 ═══════════════════ */
.cat-card, .tool-card, .job-card {
    transition: transform .3s var(--qt-ease), box-shadow .3s var(--qt-ease), border-color .3s;
}
.cat-card:hover, .tool-card:hover, .job-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px -10px rgba(45,105,66,.20), 0 4px 10px -4px rgba(15,23,42,.06);
    border-color: var(--qt-brand-30);
}
.cat-card .cc-img img, .tool-card .tc-img img { transition: transform .45s var(--qt-ease); }
.cat-card:hover .cc-img img, .tool-card:hover .tc-img img { transform: scale(1.06); }

/* 热门行业标签 */
.job-tag { transition: all .22s var(--qt-ease); }
.job-tag:hover { border-color: var(--qt-brand-50); color: var(--qt-brand-70); background: var(--qt-brand-5); transform: translateY(-1px); }

/* ═══════════════════ 降级与性能 ═══════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .qt-reveal { opacity: 1; transform: none; }
}
/* 移动端关闭模糊滤镜保帧率 */
@media (max-width: 768px) {
    .qt-aurora i { filter: blur(46px); opacity: .38; }
    .navbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ═══════════════════════════════════════════════════════════════
   UI 升级 1 期 · 全站设计 token 地基（2026-08-10 方案 §5.1/§5.2）
   加载顺序全站最后，同优先级下覆盖 style.css 与前文同名变量。
   新增代码一律使用以下变量；旧硬编码值由 scripts/ui_token_map.py 收敛。
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* ── 品牌 ── */
    --brand:        #05a357;   /* 主绿：合并 #02c160/#15c872/#0ca678 */
    --brand-strong: #02874b;   /* 深绿（hover/强调） */
    --brand-50:     #e7f8f0;   /* 浅绿底 */
    --navy:         #1e3a5f;   /* 藏青：合并 #16386b/#14456b */
    --ink:          #1f2937;   /* 正文 */
    --ink-2:        #4b5563;   /* 次要（合并 #6b7280） */
    --ink-3:        #9ca3af;   /* 辅助 */
    --gold:         #c9a254;   /* 会员/高级：合并 #d4af69/#c9a44f/#c49536 */
    --gold-deep:    #b8860b;

    /* ── 专题主题色槽位（保留专题性格，纳入 token 管理） ── */
    --topic-civil:    #c0392b; /* 考公红：合并 #c62828 */
    --topic-kaoyan:   #2e7d4f; /* 考研绿 */
    --topic-soe:      #14456b; /* 央国企蓝 */
    --topic-zsb:      #05a357; /* 专升本 */
    --topic-qbank:    #9a927d; /* 题库米纸 */
    --topic-qbank-bg: #f7f3e8;

    /* ── 语义 ── */
    --success: #05a357;
    --warning: #b8860b;
    --danger:  #c0392b;
    --info:    #2f5fd0;
    --bg:   #f6f8fa;
    --card: #ffffff;
    --line: #eef0f4;           /* 合并 #e5e7eb */

    /* ── 字阶（收敛 14 档，废除半像素） ── */
    --fs-xs: 11px;  --fs-sm: 12.5px; --fs-md: 14px; --fs-lg: 16px;
    --fs-xl: 18px;  --fs-2xl: 22px;  --fs-3xl: 28px;

    /* ── 间距（4 基数） ── */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
    --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

    /* ── 圆角（收敛 13 种） ── */
    --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;

    /* ── 阴影（三级） ── */
    --shadow-sm: 0 2px 8px rgba(20,30,70,.05);
    --shadow-md: 0 8px 24px rgba(20,30,70,.08);
    --shadow-lg: 0 16px 48px rgba(20,30,70,.12);

    /* ── 容器 ── */
    --container:        1160px;  /* 宽页 */
    --container-narrow: 760px;   /* 阅读页 */
}