/* ============================================================
   匠领学社 · 统一组件库（.jl-* 命名空间，避免与现有类冲突）
   文件：assets/jl-components.css  （须与 jl-tokens.css 配合）
   引入方式：在 jl-tokens.css 之后 <link>。
   迁移原则：新增功能强制用 .jl-*；老页按频率逐步替换散样式。
   ============================================================ */

/* ===== 按钮 ===== */
.jl-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--jl-sans);font-size:var(--jl-fs-body);font-weight:600;border:none;cursor:pointer;border-radius:var(--jl-r-pill);padding:12px 24px;transition:transform var(--jl-dur) var(--jl-ease),box-shadow var(--jl-dur),background var(--jl-dur)}
.jl-btn--primary{background:linear-gradient(135deg,var(--jl-gold),var(--jl-gold-dark));color:#231603;box-shadow:var(--jl-sh-gold)}
.jl-btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(184,125,43,.42)}
.jl-btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.32)}
.jl-btn--ghost:hover{border-color:var(--jl-gold);background:rgba(255,255,255,.06)}
.jl-btn--ink{background:var(--jl-ink);color:#fff}
.jl-btn--ink:hover{background:var(--jl-ink-mid);transform:translateY(-2px)}
.jl-btn--teal{background:linear-gradient(135deg,var(--jl-teal-dark),var(--jl-teal));color:#fff}
.jl-btn--teal:hover{transform:translateY(-2px)}
.jl-btn--soft{background:#fff;color:var(--jl-text-2);border:1px solid var(--jl-line-strong)}
.jl-btn--soft:hover{border-color:var(--jl-gold);color:var(--jl-gold-dark)}
.jl-btn--line{background:#fff;color:var(--jl-ink);border:1px solid var(--jl-line-strong)}
.jl-btn--line:hover{border-color:var(--jl-gold);color:var(--jl-gold-dark)}

/* ===== 卡片 ===== */
.jl-card{background:var(--jl-surface);border:1px solid var(--jl-line);border-radius:var(--jl-r-lg);box-shadow:var(--jl-sh-sm);transition:transform var(--jl-dur) var(--jl-ease),box-shadow var(--jl-dur),border-color var(--jl-dur)}
.jl-card:hover{transform:translateY(-5px);box-shadow:var(--jl-sh-lg);border-color:var(--jl-gold-light)}
.jl-card--pad{padding:var(--jl-s5)}

/* ===== 表单 ===== */
.jl-field{display:block;margin-bottom:var(--jl-s4)}
.jl-field>label{display:block;font-size:var(--jl-fs-s1);color:var(--jl-text-2);margin-bottom:6px}
.jl-input{width:100%;border:1px solid var(--jl-line-strong);background:#fff;border-radius:var(--jl-r);padding:11px 14px;font-size:var(--jl-fs-body);color:var(--jl-text);font-family:var(--jl-sans);transition:border-color var(--jl-dur-fast),box-shadow var(--jl-dur-fast)}
.jl-input:focus{outline:none;border-color:var(--jl-gold);box-shadow:0 0 0 3px rgba(201,162,75,.14)}

/* ===== 分段器 ===== */
.jl-seg{display:inline-flex;gap:4px;background:var(--jl-paper-2);border:1px solid var(--jl-line);border-radius:var(--jl-r-pill);padding:4px}
.jl-seg button{border:none;background:transparent;font-family:var(--jl-sans);font-size:var(--jl-fs-s1);color:var(--jl-text-2);padding:8px 16px;border-radius:var(--jl-r-pill);cursor:pointer;transition:.15s}
.jl-seg button.on{background:#fff;color:var(--jl-gold-dark);font-weight:600;box-shadow:var(--jl-sh-sm)}

/* ===== 数据卡 ===== */
.jl-stat{position:relative;overflow:hidden;background:var(--jl-surface);border:1px solid var(--jl-line);border-radius:var(--jl-r-lg);padding:var(--jl-s5);box-shadow:var(--jl-sh-sm);transition:transform var(--jl-dur) var(--jl-ease),box-shadow var(--jl-dur)}
.jl-stat:hover{transform:translateY(-3px);box-shadow:var(--jl-sh-md)}
.jl-stat b{font-family:var(--jl-serif);font-size:clamp(22px,2.4vw,30px);color:var(--jl-ink);display:block;line-height:1.1;font-variant-numeric:tabular-nums}
.jl-stat span{font-size:var(--jl-fs-s2);color:var(--jl-text-2)}
.jl-stat::after{content:"";position:absolute;right:-18px;top:-18px;width:84px;height:84px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,75,.12),transparent 70%)}

/* ===== 徽标 ===== */
.jl-badge{display:inline-block;font-size:var(--jl-fs-s2);font-weight:700;padding:3px 10px;border-radius:var(--jl-r-pill)}
.jl-badge.ok{color:var(--jl-ok);background:var(--jl-ok-bg)}
.jl-badge.danger{color:var(--jl-danger);background:var(--jl-danger-bg)}
.jl-badge.info{color:var(--jl-info);background:var(--jl-info-bg)}
.jl-badge.gold{color:var(--jl-gold-dark);background:var(--jl-gold-soft)}

/* ===== 区块节奏 ===== */
.jl-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:var(--jl-fs-s1);letter-spacing:.18em;color:var(--jl-gold-dark);font-weight:600;margin-bottom:var(--jl-s3)}
.jl-eyebrow::before{content:"";width:30px;height:1px;background:var(--jl-gold)}
.jl-sec{margin-bottom:var(--jl-s7)}
.jl-sec-h{display:flex;align-items:baseline;gap:12px;margin-bottom:var(--jl-s6);padding-bottom:12px;border-bottom:1px solid var(--jl-line)}
.jl-sec-h h2{font-family:var(--jl-serif);font-size:var(--jl-fs-h1);color:var(--jl-ink);letter-spacing:1px;margin:0;font-weight:700}
.jl-sec-h .cnt{margin-left:auto;font-size:var(--jl-fs-s1);color:var(--jl-text-2)}
.jl-sec-h .cnt b{color:var(--jl-gold-dark);font-weight:700}

/* ===== 顶栏（玻璃 + 金线）===== */
.jl-topnav{position:sticky;top:0;z-index:var(--jl-z-nav);background:rgba(14,26,43,.82);backdrop-filter:blur(12px);border-bottom:1px solid rgba(201,162,75,.2)}
.jl-topnav .in{max-width:var(--jl-maxw);margin:0 auto;display:flex;align-items:center;gap:16px;height:60px;padding:0 24px}
.jl-topnav .brand{display:flex;align-items:center;gap:8px;font-family:var(--jl-serif);color:#fff;font-size:18px;letter-spacing:2px}
.jl-topnav .brand .seal{width:30px;height:30px;border-radius:8px;border:1.5px solid var(--jl-gold);color:var(--jl-gold-light);display:inline-flex;align-items:center;justify-content:center;font-size:14px;background:rgba(201,162,75,.12);transform:rotate(-4deg)}
.jl-topnav .brand small{color:var(--jl-gold-light);font-size:11px;letter-spacing:.12em;font-weight:400}
.jl-topnav nav{display:flex;gap:6px;margin-left:14px}
.jl-topnav nav a{color:rgba(244,241,234,.8);font-size:var(--jl-fs-s1);padding:7px 14px;border-radius:var(--jl-r);transition:.2s}
.jl-topnav nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.jl-topnav nav a.on{background:var(--jl-gold);color:var(--jl-ink-deep);font-weight:600}
.jl-topnav .right{margin-left:auto;display:flex;gap:10px;align-items:center}

/* ===== 底部标签栏（沿用 SVG 呼吸态）===== */
.jl-tabbar{position:sticky;bottom:0;background:var(--jl-surface);border-top:1px solid var(--jl-line);display:flex;max-width:var(--jl-maxw);margin:0 auto}
.jl-tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0;border:none;background:none;color:var(--jl-text-3);font-size:var(--jl-fs-xs);cursor:pointer;font-family:var(--jl-sans)}
.jl-tabbar button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.jl-tabbar button.on{color:var(--jl-gold)}
.jl-tabbar button.on svg{animation:jl-breathe 2.4s ease-in-out infinite}
@keyframes jl-breathe{0%,100%{transform:translateY(-1px) scale(1.1)}50%{transform:translateY(-2px) scale(1.16)}}

/* ===== 区块标题通用排版 ===== */
.jl-serif{font-family:var(--jl-serif)}