/* =========================================================
   AI Skills Store · 设计系统
   一套 token 驱动的现代 SaaS 风格，所有页面共用
   ========================================================= */

:root {
    /* 配色 —— 中性灰底 + 单一 indigo 强调色 */
    --bg:           #f7f8fa;
    --surface:      #ffffff;
    --surface-2:    #f1f3f7;
    --border:       #e6e8ee;
    --border-strong:#d4d7e0;

    --text:         #1a1d24;
    --text-2:       #5b6472;
    --text-3:       #8a93a3;

    --primary:      #4f46e5;   /* indigo-600 */
    --primary-soft: #eef2ff;
    --primary-hover:#4338ca;

    /* 语义色 */
    --amber:        #b45309;   --amber-soft: #fef3c7;
    --emerald:      #047857;   --emerald-soft: #d1fae5;
    --rose:         #be123c;   --rose-soft: #ffe4e6;
    --slate:        #475569;   --slate-soft: #e2e8f0;

    /* 阴影 */
    --shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
    --shadow:    0 4px 12px rgba(16,24,40,.06), 0 2px 4px rgba(16,24,40,.04);
    --shadow-lg: 0 12px 32px rgba(16,24,40,.10), 0 4px 8px rgba(16,24,40,.06);

    /* 圆角 */
    --r-sm: 8px;
    --r:    12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-pill: 999px;

    /* 半透明覆盖层（详情遮罩等） */
    --overlay:       rgba(15,23,42,.55);
    --primary-soft-2:#e0e7ff;   /* hover 态略深的 indigo-soft */

    /* 主题感知的玻璃/渐变（用变量以便深色模式覆盖） */
    --nav-bg:        rgba(255,255,255,.78);
    --hero-glow:     rgba(79,70,229,.10);
    --hero-text-top: #1a1d24;
    --hero-text-bot: #3a4252;
    --ring:          rgba(79,70,229,.12);

    /* 榜单奖牌色（金银铜，明色）—— 之前硬编码，改为变量供深色模式覆盖 */
    --gold-1:   #ffd700;
    --gold-2:   #ffb400;
    --gold-fg:  #6b4f00;
    --silver-1: #d7d7db;
    --silver-2: #b0b0b8;
    --silver-fg:#33363d;
    --bronze-1: #e0a06a;
    --bronze-2: #c47b3f;
    --bronze-fg:#4a2f12;

    /* hero 渐变两端，深色覆盖 */
    --hero-grad-1: rgba(79,70,229,.10);
    --hero-grad-2: rgba(124,58,237,.06);

    --maxw: 1200px;
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
            'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                    'PingFang SC', 'Microsoft YaHei', sans-serif;
    --mono: 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
}

/* =========================================================
   深色模式 —— GitHub 风格深色调色板
   ========================================================= */
:root[data-theme="dark"] {
    --bg:           #0d1117;
    --surface:      #161b22;
    --surface-2:    #21262d;
    --border:       #30363d;
    --border-strong:#484f58;

    --text:         #e6edf3;
    --text-2:       #9da7b8;
    --text-3:       #6e7681;

    --primary:      #6366f1;   /* indigo-500，深色下更亮 */
    --primary-soft: rgba(99,102,241,.16);
    --primary-hover:#818cf8;

    --amber:        #fbbf24;   --amber-soft: rgba(251,191,36,.14);
    --emerald:      #34d399;   --emerald-soft: rgba(52,211,153,.14);
    --rose:         #fb7185;   --rose-soft: rgba(251,113,133,.14);
    --slate:        #94a3b8;   --slate-soft: rgba(148,163,184,.16);

    --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.25);
    --shadow:    0 4px 12px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.3);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.4);

    --overlay:       rgba(0,0,0,.65);
    --primary-soft-2:rgba(99,102,241,.26);
    --nav-bg:        rgba(13,17,23,.78);
    --hero-glow:     rgba(99,102,241,.18);
    --hero-text-top: #e6edf3;
    --hero-text-bot: #9da7b8;
    --ring:          rgba(99,102,241,.28);

    /* 深色模式下的奖牌色：略提亮，文字用深底色保证对比 */
    --gold-1:   #ffd75e;
    --gold-2:   #ff9d3a;
    --gold-fg:  #1a1200;
    --silver-1: #e3e3e8;
    --silver-2: #c2c2cc;
    --silver-fg:#0d1117;
    --bronze-1: #f0b07a;
    --bronze-2: #d68a4c;
    --bronze-fg:#1a0d00;

    --hero-grad-1: rgba(99,102,241,.16);
    --hero-grad-2: rgba(124,58,237,.10);

    color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }

.container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}

/* =========================================================
   顶部导航 —— 毛玻璃 sticky 顶栏
   ========================================================= */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--nav-bg);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
}
.navbar .container {
    display: flex;
    align-items: center;
    height: 64px;
    gap: 32px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 17px;
    color: var(--text);
    letter-spacing: -.01em;
}
.brand-mark {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
    display: grid; place-items: center;
    color: #fff; font-size: 15px;
    box-shadow: 0 2px 8px rgba(99,102,241,.35);
}
.nav-links {
    display: flex;
    gap: 4px;
    margin-left: auto;
}
.nav-links a {
    color: var(--text-2);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: var(--r-sm);
    transition: all .15s;
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-links a.active { color: var(--primary); background: var(--primary-soft); }

/* =========================================================
   Hero —— 首页大标题区（克制精致版：居中标题 + 内联统计）
   ========================================================= */
.hero {
    position: relative;
    padding: 72px 0 44px;
    text-align: center;
    background:
        radial-gradient(ellipse 70% 80% at 50% -20%, var(--hero-grad-1), transparent 60%),
        radial-gradient(ellipse 50% 60% at 50% 0%, var(--hero-grad-2), transparent 65%);
    overflow: hidden;
}
.hero::after {
    /* 底部细分割线，让 hero 和下方网格有清晰过渡 */
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
}
.hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    background: var(--primary-soft);
    color: var(--primary);
    border: 1px solid var(--primary-soft-2);
    border-radius: var(--r-pill);
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: .01em;
}
.hero .eyebrow .pulse {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 0 var(--ring);
    animation: hero-pulse 2.4s ease-out infinite;
}
@keyframes hero-pulse {
    0%   { box-shadow: 0 0 0 0 var(--ring); }
    70%  { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .hero .eyebrow .pulse { animation: none; }
}
.hero h1 {
    font-family: var(--font-display);
    font-size: 52px;
    line-height: 1.05;
    letter-spacing: -.035em;
    font-weight: 800;
    margin-bottom: 16px;
    color: var(--text);
}
.hero h1 .accent {
    background: linear-gradient(120deg, var(--primary), #7c3aed 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero p {
    font-size: 17px;
    color: var(--text-2);
    max-width: 560px;
    margin: 0 auto 28px;
    line-height: 1.6;
}
/* 内联统计行：纯文本，数字突出，无卡片盒子 */
.hero-inline-stats {
    display: inline-flex;
    align-items: baseline;
    gap: 14px;
    font-variant-numeric: tabular-nums;
}
.hero-inline-stats .his-item {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    color: var(--text);
}
.hero-inline-stats .his-item strong {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--primary);
}
.hero-inline-stats .his-link strong { color: var(--text); }
.hero-inline-stats .his-link:hover strong { color: var(--primary); }
.hero-inline-stats .his-link {
    text-decoration: none;
    transition: color .15s;
}
.hero-inline-stats .his-link .his-lab {
    transition: color .15s;
}
.hero-inline-stats .his-link:hover .his-lab { color: var(--primary); }
.hero-inline-stats .his-lab {
    font-size: 14px;
    color: var(--text-3);
    font-weight: 500;
}
.hero-inline-stats .his-sep {
    color: var(--border-strong);
    font-size: 18px;
    font-weight: 300;
    user-select: none;
}
@media (max-width: 860px) {
    .hero { padding: 52px 0 32px; }
    .hero h1 { font-size: 34px; }
    .hero p { font-size: 15px; }
    .hero-inline-stats .his-item strong { font-size: 22px; }
    .hero-inline-stats .his-lab { font-size: 13px; }
    .hero-inline-stats { gap: 10px; }
}

/* =========================================================
   按钮
   ========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--r-sm);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid transparent;
    white-space: nowrap;
}
.btn-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(99,102,241,.3), 0 4px 12px rgba(99,102,241,.25);
}
.btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); }

.btn-ghost {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--text-3); }

/* =========================================================
   统计条
   ========================================================= */
.stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 22px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-number {
    font-size: 32px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -.02em;
    line-height: 1.1;
}
.stat-label {
    color: var(--text-3);
    font-size: 13px;
    margin-top: 6px;
    font-weight: 500;
}

/* =========================================================
   资源卡（首页）
   ========================================================= */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
}
.resource-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 32px;
    box-shadow: var(--shadow-sm);
    transition: all .2s;
    position: relative;
    overflow: hidden;
}
.resource-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-strong);
}
.resource-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--primary), #7c3aed);
}
.resource-icon {
    width: 48px; height: 48px;
    border-radius: var(--r);
    background: var(--primary-soft);
    color: var(--primary);
    display: grid; place-items: center;
    font-size: 24px;
    margin-bottom: 18px;
}
.resource-title {
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text);
    letter-spacing: -.01em;
}
.resource-desc {
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 20px;
}
.resource-mini-stats {
    display: flex;
    gap: 24px;
    padding: 14px 0;
    margin-bottom: 20px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.resource-mini-stats .ms-num {
    font-size: 22px; font-weight: 700; color: var(--text);
    line-height: 1;
}
.resource-mini-stats .ms-lab {
    font-size: 12px; color: var(--text-3); margin-top: 4px;
}
.feature-list { list-style: none; margin-bottom: 24px; }
.feature-list li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; color: var(--text-2);
    padding: 5px 0;
}
.feature-list li::before {
    content: '';
    flex-shrink: 0;
    width: 18px; height: 18px;
    margin-top: 2px;
    background: var(--emerald-soft);
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
}

/* =========================================================
   区块标题
   ========================================================= */
.section { padding: 24px 0; }
.section-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 22px;
}
.section-head h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
    display: flex; align-items: center; gap: 10px;
}
.section-head .count {
    color: var(--text-3);
    font-size: 14px;
    font-weight: 500;
}
.section-head .head-note {
    color: var(--text-3);
    font-size: 13px;
    margin-left: auto;
}
.section-divider {
    height: 1px;
    background: var(--border);
    margin: 40px 0;
}

/* 分类色点 */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* =========================================================
   工具条：搜索 + 筛选
   ========================================================= */
.toolbar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 28px;
}
.search-wrap {
    position: relative;
    margin-bottom: 16px;
}
.search-wrap svg {
    position: absolute;
    left: 16px; top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    pointer-events: none;
}
.search-box {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 15px;
    font-family: var(--font);
    background: var(--bg);
    transition: all .15s;
}
.search-box:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--ring);
}
.filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.filter-row + .filter-row { margin-top: 12px; }
.filter-label {
    font-size: 12px;
    color: var(--text-3);
    font-weight: 600;
    margin-right: 4px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.chip {
    padding: 7px 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.chip .n { opacity: .65; margin-left: 4px; font-weight: 600; }

.select {
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--border);
    background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a93a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center;
    border-radius: var(--r-sm);
    font-size: 14px;
    font-family: var(--font);
    color: var(--text);
    cursor: pointer;
    appearance: none;
}
.select:focus { outline: none; border-color: var(--primary); }

/* =========================================================
   技能卡片网格
   ========================================================= */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 16px;
}
.skill-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.skill-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--primary);
    opacity: 0;
    transition: opacity .2s;
}
/* 顶部 indigo 高光线，hover 才出现 */
.skill-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), #7c3aed);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.skill-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}
.skill-card:hover::before { opacity: 1; }
.skill-card:hover::after { transform: scaleX(1); }
.skill-card.local::before { background: var(--amber); }

/* 列表工具栏排序下拉 */
.sort-select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s;
}
.sort-select:hover { border-color: var(--primary); }
.sort-select:focus { outline: none; border-color: var(--primary); }

/* 卡片头部 stars 角标（小字、弱化） */
.stars-chip {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--amber);
    background: var(--amber-soft);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.skill-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.skill-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.01em;
    flex: 1;
    word-break: break-word;
}
.skill-badge {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.badge-official { background: var(--primary-soft); color: var(--primary); }
.badge-local    { background: var(--amber-soft);  color: var(--amber); }
.badge-builtin  { background: var(--slate-soft);  color: var(--slate); }
.badge-free     { background: var(--emerald-soft); color: var(--emerald); }

.skill-category {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px;
    color: var(--text-3);
    font-weight: 500;
    margin-bottom: 10px;
}
.skill-description {
    color: var(--text-2);
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 16px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.skill-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.skill-tag {
    background: var(--surface-2);
    color: var(--text-2);
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 500;
}
.skill-rating {
    color: #f59e0b;
    font-size: 12px;
    letter-spacing: 1px;
}

.skill-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 4px;
}
.skill-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 600;
    transition: all .15s;
    border: 1px solid transparent;
}
.skill-action-detail { background: var(--primary-soft); color: var(--primary); }
.skill-action-detail:hover { background: var(--primary-soft-2); }

/* =========================================================
   技能卡片底部 meta 行 —— 来源徽章 + 图标信息 + 进入箭头
   ========================================================= */
.skill-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px dashed var(--border);
    font-size: 12px;
    color: var(--text-3);
}
.skill-footer-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
}
/* 来源徽章（skillsllm / official / local / manual）复用 .source-badge */
.skill-footer .source-badge { font-size: 10.5px; padding: 2px 8px; }
/* 图标式信息：⭐stars · 📦附件 · 🌐翻译 */
.skill-icons {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-variant-numeric: tabular-nums;
}
.skill-icons .si {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--text-3);
}
.skill-icons .si.is-star { color: var(--amber); }
.skill-icons .si .si-ico { font-size: 12px; line-height: 1; }
.skill-go-arrow {
    color: var(--text-3);
    font-size: 14px;
    transition: transform .2s, color .15s;
    flex-shrink: 0;
}
.skill-card:hover .skill-go-arrow {
    color: var(--primary);
    transform: translateX(3px);
}

/* =========================================================
   空状态 / 加载
   ========================================================= */
.empty-state, .loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-3);
}
.empty-state .emoji { font-size: 40px; margin-bottom: 12px; display: block; }

/* =========================================================
   页脚
   ========================================================= */
.footer {
    margin-top: 80px;
    padding: 40px 0;
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-3);
    font-size: 13px;
}
.footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.footer a { color: var(--text-2); }
.footer a:hover { color: var(--primary); }
/* 备案链接：与版权信息同处一行，用分隔点隔开 */
.footer .footer-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.footer .footer-meta .sep {
    color: var(--border-strong);
    user-select: none;
}
.footer .footer-meta a { color: var(--text-3); }
.footer .footer-meta a:hover { color: var(--primary); }

/* 精简页脚：用于登录/注册等表单页，不占大块空间，仅居中显示备案 */
.footer-slim {
    padding: 20px 16px 28px;
    text-align: center;
    color: var(--text-3);
    font-size: 12.5px;
}
.footer-slim a { color: var(--text-3); }
.footer-slim a:hover { color: var(--primary); }

/* =========================================================
   响应式
   ========================================================= */
@media (max-width: 768px) {
    .hero { padding: 56px 0 40px; }
    .hero h1 { font-size: 32px; }
    .hero p { font-size: 16px; }
    .navbar .container { gap: 16px; }
    .nav-links { gap: 2px; }
    .nav-links a { padding: 6px 10px; font-size: 13px; }
    .skills-grid { grid-template-columns: 1fr; }
    .resource-grid { grid-template-columns: 1fr; }
    .container { padding: 0 16px; }
    .section-head h2 { font-size: 19px; }
    .auth-card { width: 100%; padding: 28px 22px; }
    .admin-table-wrap { font-size: 12px; }
}

/* =========================================================
   导航登录态
   ========================================================= */
.nav-links #navAuthSlot {
    display: flex;
    gap: 4px;
    align-items: center;
}
.nav-register {
    background: var(--primary) !important;
    color: #fff !important;
}
.nav-register:hover {
    /* 注册是实心主色按钮，hover 时保持原样：锁死背景与文字，避免被 .nav-links a:hover 覆盖 */
    background: var(--primary) !important;
    color: #fff !important;
}

/* 主题切换按钮 */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: 8px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}
.theme-toggle:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-soft);
}
.theme-toggle svg { width: 17px; height: 17px; }
/* 默认（浅色）显示月亮图标，隐藏太阳；深色反之 */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.nav-user { font-weight: 600 !important; }
.nav-admin {
    background: var(--amber-soft) !important;
    color: var(--amber) !important;
}

/* =========================================================
   认证页面（登录/注册/重置）—— 居中卡片表单
   ========================================================= */
.auth-wrap {
    min-height: calc(100vh - 64px);
    display: grid;
    place-items: center;
    padding: 56px 20px;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, var(--hero-glow), transparent 60%);
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 40px;
    box-shadow: var(--shadow-lg);
}
.auth-card h1 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 6px;
}
.auth-card .auth-sub {
    color: var(--text-3);
    font-size: 14px;
    margin-bottom: 26px;
}

/* 表单 */
.form-field { margin-bottom: 18px; }
.form-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 6px;
}
.form-input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    font-size: 15px;
    font-family: var(--font);
    background: var(--surface);
    transition: all .15s;
}
.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--ring);
}
.form-input::placeholder { color: var(--text-3); }

/* 带"获取验证码"按钮的输入组 */
.input-group {
    display: flex;
    gap: 8px;
}
.input-group .form-input { flex: 1; }
.btn-code {
    flex-shrink: 0;
    padding: 11px 16px;
    background: var(--surface-2);
    color: var(--primary);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
}
.btn-code:hover:not(:disabled) { background: var(--primary-soft); border-color: var(--primary); }
.btn-code:disabled { color: var(--text-3); cursor: not-allowed; }

/* 表单按钮占满宽度 */
.btn-block {
    width: 100%;
    justify-content: center;
    padding: 12px;
    margin-top: 4px;
}

.form-foot {
    text-align: center;
    font-size: 13px;
    color: var(--text-3);
    margin-top: 20px;
}
.form-foot a { font-weight: 600; }

/* 表单错误/提示 */
.form-msg {
    padding: 10px 14px;
    border-radius: var(--r-sm);
    font-size: 13px;
    margin-bottom: 16px;
    display: none;
}
.form-msg.show { display: block; }
.form-msg.error { background: var(--rose-soft); color: var(--rose); }
.form-msg.success { background: var(--emerald-soft); color: var(--emerald); }

/* =========================================================
   后台
   ========================================================= */
.admin-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}
.admin-tab {
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-3);
    cursor: pointer;
    transition: all .15s;
    margin-bottom: -1px;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.admin-panel { display: none; }
.admin-panel.active { display: block; }

.admin-table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.data-table th {
    background: var(--surface-2);
    text-align: left;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--border);
}
.data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--surface-2); }
.data-table .col-actions { text-align: right; white-space: nowrap; }
.cell-mono { font-family: var(--mono); font-size: 13px; }
.cell-muted { color: var(--text-3); }

/* 小操作按钮（表格内） */
.btn-xs {
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    cursor: pointer;
    margin-left: 6px;
    transition: all .15s;
}
.btn-xs:hover { background: var(--surface-2); }
.btn-xs.danger { color: var(--rose); border-color: var(--rose-soft); }
.btn-xs.danger:hover { background: var(--rose-soft); }
.btn-xs.primary { color: var(--primary); border-color: var(--primary-soft); }
.btn-xs.primary:hover { background: var(--primary-soft); }

/* 后台分页 */
.pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-3);
}

/* 添加 skill 表单区 */
.add-skill-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}
.add-skill-box h3 {
    font-size: 16px;
    margin-bottom: 14px;
}
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 600px) {
    .grid-2 { grid-template-columns: 1fr; }
}

/* badge 内联 */
.tag-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 600;
}
.tag-pill.yes { background: var(--emerald-soft); color: var(--emerald); }
.tag-pill.no  { background: var(--surface-2); color: var(--text-3); }

/* ============================================================
   详情页样式（detail.html · 全页双栏布局）
   ============================================================ */
.detail-h1 {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 8px;
    line-height: 1.22;
    letter-spacing: -.02em;
    word-break: break-word;
}
.detail-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-2);
    margin: 0 0 18px;
    word-break: break-word;
}
.detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}
.detail-tags .skill-tag {
    font-size: 12px;
    padding: 3px 10px;
}
.skill-tag-muted {
    background: var(--surface-2) !important;
    color: var(--text-3) !important;
    border: 1px solid var(--border);
    text-transform: capitalize;
}
.detail-actions { margin-top: 4px; }
.detail-actions .btn { width: 100%; justify-content: center; }
/* 把按钮内容包成单一 flex item，内部 ⬇文字 与 (大小) 走 inline 基线对齐 */
.btn-label { display: inline-block; line-height: 1.2; }
.dl-size {
    font-size: 0.85em;
    font-weight: 500;
    opacity: 0.75;
}

/* 加载/空状态 */
.md-loading, .md-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-3);
    font-size: 15px;
}

/* ============================================================
   Markdown 正文排版（.md-body）
   ============================================================ */
.md-body {
    font-size: 15px;
    line-height: 1.72;
    color: var(--text);
    max-width: 100%;
}
.md-body > *:first-child { margin-top: 0; }
.md-body > *:last-child { margin-bottom: 0; }

.md-body h1, .md-body h2, .md-body h3, .md-body h4 {
    font-weight: 650;
    line-height: 1.3;
    margin: 1.8em 0 0.7em;
    color: var(--text);
    scroll-margin-top: 84px;   /* 锚点跳转时给固定顶栏(64px)留空隙 */
}
.md-body h1 { font-size: 1.9em; padding-bottom: 0.3em; border-bottom: 1px solid var(--border); }
.md-body h2 { font-size: 1.5em; padding-bottom: 0.3em; border-bottom: 1px solid var(--border); }
.md-body h3 { font-size: 1.22em; }
.md-body h4 { font-size: 1.05em; }

.md-body p { margin: 0 0 1em; }
.md-body a { color: var(--primary); text-decoration: none; }
.md-body a:hover { text-decoration: underline; }

.md-body ul, .md-body ol { margin: 0 0 1em; padding-left: 1.6em; }
.md-body li { margin: 0.3em 0; }
.md-body li > ul, .md-body li > ol { margin: 0.3em 0; }

.md-body blockquote {
    margin: 0 0 1em;
    padding: 0.4em 1em;
    border-left: 3px solid var(--primary);
    background: var(--primary-soft);
    color: var(--text-2);
    border-radius: 0 6px 6px 0;
}
.md-body blockquote p { margin: 0.3em 0; }

.md-body code {
    font-family: var(--mono);
    font-size: 0.88em;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.1em 0.4em;
    color: var(--rose);
}
.md-body pre {
    margin: 0 0 1.1em;
    padding: 14px 16px;
    background: #0d1117;
    border-radius: 8px;
    overflow-x: auto;
    border: 1px solid var(--border);
}
.md-body pre code {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 0.86em;
    line-height: 1.55;
    color: #e6edf3;
}

.md-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 0.5em 0; }
.md-body hr { border: 0; border-top: 1px solid var(--border); margin: 1.6em 0; }

.md-body table {
    border-collapse: collapse;
    margin: 0 0 1.1em;
    width: 100%;
    display: block;
    overflow-x: auto;
}
.md-body th, .md-body td {
    border: 1px solid var(--border-strong);
    padding: 8px 13px;
    text-align: left;
}
.md-body th { background: var(--surface-2); font-weight: 600; }
.md-body tr:nth-child(even) td { background: var(--surface-2); }

/* GitHub README 常见的居中对齐容器 */
.md-body p[align="center"],
.md-body div[align="center"],
.md-body h1[align="center"],
.md-body h3[align="center"] {
    text-align: center;
}

/* ============================================================
   独立详情页（detail.html）—— 全页双栏布局
   ============================================================ */
.detail-page {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 32px 24px 64px;
}
.detail-page-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
    align-items: start;
}
.detail-page-aside {
    position: sticky;
    top: 88px;
    /* 左栏整体做成一张元信息卡，跟首页卡片语言一致 */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 22px 22px 20px;
}
.detail-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-3);
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    width: 100%;
    transition: color .15s, gap .15s;
}
.detail-back:hover { color: var(--primary); gap: 8px; }

.detail-page-aside .detail-h1 {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 10px;
    line-height: 1.2;
    letter-spacing: -.025em;
    word-break: break-word;
}
.detail-page-aside .detail-desc {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-2);
    margin: 0 0 18px;
    word-break: break-word;
}
.detail-page-aside .detail-tags { margin-bottom: 20px; }
.cat-tag-link {
    text-decoration: none;
    transition: filter .15s;
}
.cat-tag-link:hover { filter: brightness(.92); }

/* stars 行：⭐ + 数字 + GitHub 链接 */
.detail-stars-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    margin-bottom: 16px;
    border-top: 1px dashed var(--border);
    border-bottom: 1px dashed var(--border);
    font-size: 13px;
}
.detail-stars {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--amber);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.detail-stars .star-ico { font-size: 14px; line-height: 1; }
.detail-stars .star-num { color: var(--text); }
.detail-gh-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-3);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: color .15s;
    max-width: 60%;
    overflow: hidden;
}
.detail-gh-link:hover { color: var(--primary); }
.detail-gh-link svg { flex-shrink: 0; }
.detail-gh-link .gh-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 下载卡片区：按钮 + 提示信息整合成一块 */
.detail-actions { margin-top: 4px; }
.detail-actions .btn { width: 100%; justify-content: center; }
.detail-download-msg {
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    min-height: 0;
}
.detail-download-msg:empty { margin-top: 0; min-height: 0; }

.detail-page-main {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 40px 48px;
    box-shadow: var(--shadow-sm);
    min-height: 400px;
    position: relative;
}
.detail-page-main .md-body { font-size: 15.5px; }

/* 响应式：窄屏单栏，侧栏置顶 */
@media (max-width: 900px) {
    .detail-page-grid { grid-template-columns: 1fr; gap: 20px; }
    .detail-page-aside { position: static; }
    .detail-page-main { padding: 28px 22px; }
}
@media (max-width: 600px) {
    .detail-page { padding: 20px 16px 48px; }
}

/* ============================================================
   列表页侧边栏（index.html）
   ============================================================ */
.layout-with-sidebar {
    display: grid;
    grid-template-columns: 248px 1fr;
    gap: 24px;
    align-items: start;
}
/* 侧边栏外壳：吸顶、独立滚动、最大高度避免顶到底部 */
.cat-sidebar {
    position: sticky;
    top: 84px;                       /* 留出固定顶栏高度 */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 14px 0;
    max-height: calc(100vh - 104px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cat-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 16px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--border);
}
.cat-sidebar-more {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    text-transform: none;
    letter-spacing: 0;
}
.cat-sidebar-more:hover { text-decoration: underline; }
/* 列表区可滚动 */
.cat-nav-list {
    overflow-y: auto;
    padding: 6px 8px;
    flex: 1;
    /* 美化滚动条 */
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
.cat-nav-list::-webkit-scrollbar { width: 6px; }
.cat-nav-list::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 3px;
}
.cat-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    font-size: 14px;
    color: var(--text-2);
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none;
    position: relative;
}
.cat-nav-item:hover {
    background: var(--surface-2);
    color: var(--text);
}
.cat-nav-item.active {
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 600;
}
.cat-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 2px;
    background: var(--cat-accent, var(--primary));
}
.cat-nav-emoji {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--cat-accent-soft, var(--primary-soft));
    color: var(--cat-accent, var(--primary));
    display: grid; place-items: center;
    font-size: 15px;
    flex-shrink: 0;
}
.cat-nav-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cat-nav-count {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    background: var(--surface-2);
    padding: 2px 8px;
    border-radius: var(--r-pill);
    min-width: 28px;
    text-align: center;
}
.cat-nav-item.active .cat-nav-count {
    background: var(--primary);
    color: #fff;
}

/* 窄屏：侧边栏折叠为顶部水平滚动条 */
@media (max-width: 900px) {
    .layout-with-sidebar {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .cat-sidebar {
        position: static;
        max-height: none;
        padding: 0;
    }
    .cat-sidebar-head { display: none; }
    .cat-nav-list {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 12px 16px;
        scroll-snap-type: x mandatory;
    }
    .cat-nav-item {
        flex-shrink: 0;
        scroll-snap-align: start;
        padding: 8px 14px;
        background: var(--surface-2);
        border: 1px solid var(--border);
    }
    .cat-nav-item.active::before { display: none; }
    .cat-nav-emoji { width: 24px; height: 24px; font-size: 13px; }
    .cat-nav-count { display: none; }
}

/* ============================================================
   分类页面（categories.html）
   ============================================================ */
.cats-hero {
    position: relative;
    text-align: center;
    padding: 64px 0 36px;
    background:
        radial-gradient(ellipse 60% 70% at 50% -20%, var(--hero-grad-1), transparent 60%);
    overflow: hidden;
}
.cats-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
}
.cats-hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    background: var(--primary-soft);
    color: var(--primary);
    border: 1px solid var(--primary-soft-2);
    border-radius: var(--r-pill);
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 18px;
}
.cats-hero .eyebrow .dot-live {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--primary);
}
.cats-hero h1 {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -.03em;
    margin-bottom: 12px;
    color: var(--text);
    line-height: 1.1;
}
.cats-hero h1 .accent {
    background: linear-gradient(120deg, var(--primary), #7c3aed 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cats-hero p {
    font-size: 16px;
    color: var(--text-2);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.6;
}
.cats-hero p strong {
    color: var(--primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 40px;
}
/* 分类卡片重做：大色块顶条 + 彩色 emoji 块 + 右上角彩色数字徽章 */
.cat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 22px 22px 18px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s;
    display: flex;
    flex-direction: column;
    gap: 14px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}
/* 顶部彩色渐变高光线，hover 满格展开（同首页 skill-card 语言） */
.cat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cat-accent, var(--primary)), color-mix(in srgb, var(--cat-accent, var(--primary)) 50%, #7c3aed));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
/* 角落柔光晕（用分类色），hover 显现，制造彩色氛围 */
.cat-card::after {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--cat-accent-soft, var(--primary-soft)), transparent 70%);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
}
.cat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}
.cat-card:hover::before { transform: scaleX(1); }
.cat-card:hover::after { opacity: 1; }

.cat-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    position: relative;
    z-index: 1;
}
.cat-emoji {
    width: 48px; height: 48px;
    border-radius: var(--r);
    background: var(--cat-accent-soft, var(--primary-soft));
    color: var(--cat-accent, var(--primary));
    display: grid; place-items: center;
    font-size: 24px;
    flex-shrink: 0;
    transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.cat-card:hover .cat-emoji { transform: scale(1.08) rotate(-4deg); }
.cat-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--cat-accent, var(--primary));
    background: var(--cat-accent-soft, var(--primary-soft));
    padding: 4px 11px;
    border-radius: var(--r-pill);
    font-variant-numeric: tabular-nums;
}
.cat-card-body { position: relative; z-index: 1; }
.cat-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.01em;
    line-height: 1.3;
}
.cat-name-en {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-3);
    margin-top: 3px;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cat-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
    font-size: 12.5px;
    color: var(--text-3);
    position: relative;
    z-index: 1;
}
.cat-desc {
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.cat-go {
    font-weight: 600;
    color: var(--cat-accent, var(--primary));
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap .15s;
}
.cat-card:hover .cat-go { gap: 8px; }

@media (max-width: 768px) {
    .cats-hero { padding: 44px 0 28px; }
    .cats-hero h1 { font-size: 30px; }
    .cats-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   来源标签优化（列表卡片用）
   ============================================================ */
.source-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    flex-shrink: 0;
}
.source-badge::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.source-official  { background: var(--primary-soft); color: var(--primary); }
.source-skillsllm { background: var(--slate-soft);  color: var(--slate); }
.source-local     { background: var(--amber-soft);  color: var(--amber); }
.source-manual    { background: var(--emerald-soft); color: var(--emerald); }

/* ============================================================
   卡片内的分类标签（点击可筛选）
   ============================================================ */
.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    background: var(--cat-accent-soft, var(--primary-soft));
    color: var(--cat-accent, var(--primary));
    cursor: pointer;
    transition: filter .15s, transform .15s;
    text-decoration: none;
}
.cat-chip:hover {
    filter: brightness(.92);
    transform: translateY(-1px);
}
.cat-chip span { font-size: 13px; line-height: 1; }


/* ============================================================
 * 首页榜单展示区（featured-section）—— 卡片网格 + 序号徽章
 * ============================================================ */
.featured-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px 24px;
    margin-bottom: 24px;
}
.featured-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.featured-section-head h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.featured-trophy { font-size: 20px; line-height: 1; }

.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.featured-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 14px 16px;
    text-decoration: none;
    color: var(--text);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.featured-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* 序号徽章 */
.featured-rank {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--r-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-2);
}
.featured-rank.rank-1 {
    background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
    color: var(--gold-fg);
    border-color: transparent;
}
.featured-rank.rank-2 {
    background: linear-gradient(135deg, var(--silver-1), var(--silver-2));
    color: var(--silver-fg);
    border-color: transparent;
}
.featured-rank.rank-3 {
    background: linear-gradient(135deg, var(--bronze-1), var(--bronze-2));
    color: var(--bronze-fg);
    border-color: transparent;
}

.featured-body { min-width: 0; flex: 1; }
.featured-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 6px;
}
.featured-name > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.featured-name .cat-chip {
    flex-shrink: 0;
    font-size: 11px;
    padding: 2px 8px;
    cursor: default;
}
.featured-desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;       /* 最多两行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 640px) {
    .featured-section { padding: 16px; }
    .featured-grid { grid-template-columns: 1fr; }
}


/* ============================================================
 * 后台榜单配置：skill 搜索浮层条目
 * ============================================================ */
.feat-picker-row {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.feat-picker-row:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
}