/* 维度页共享样式（技术/行业/场景/职业/官方组织）— 与首页视觉一致 */
:root{
  --paper:#F5F7FA; --surface:#FFFFFF; --surface-soft:#EEF2F7; --line:#E4E9F0;
  --ink-strong:#0F1B24; --ink-mid:#3A4A57; --ink-soft:#7A8A97;
  --accent-strong:#11B3A3; --accent-cool:#2C7BE5; --accent-warm:#F2A33C;
  --grad:linear-gradient(135deg,#11B3A3 0%,#2C7BE5 100%);
  --radius-lg:18px; --radius-md:12px; --radius-sm:8px;
  --shadow-card:0 1px 2px rgba(15,27,36,.04),0 8px 24px rgba(15,27,36,.06);
  --shadow-pop:0 12px 32px rgba(17,179,163,.18),0 4px 12px rgba(44,123,229,.12);
  --maxw:1200px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--paper);color:var(--ink-mid);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink-strong);font-size:18px;letter-spacing:.3px}
.brand .logo{width:34px;height:34px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--shadow-pop)}
.brand small{font-size:11px;color:var(--ink-soft);font-weight:500;letter-spacing:1px}
.nav{display:flex;gap:6px;margin-left:8px;flex-wrap:wrap}
.nav a{padding:8px 14px;border-radius:10px;font-size:14px;font-weight:500;color:var(--ink-mid);transition:.2s}
.nav a:hover{background:var(--surface-soft);color:var(--ink-strong)}
.nav a.active{background:var(--grad);color:#fff}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:0 18px;height:38px;border-radius:10px;font-size:14px;font-weight:600;border:none;cursor:pointer;transition:.2s}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--shadow-pop)}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink-mid);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--surface-soft)}

.hero{position:relative;overflow:hidden;padding:72px 0 48px;text-align:center}
.hero::before{content:"";position:absolute;inset:0;background:
    radial-gradient(620px 320px at 18% 0%,rgba(17,179,163,.16),transparent 60%),
    radial-gradient(560px 300px at 86% 12%,rgba(44,123,229,.16),transparent 60%);pointer-events:none}
.hero-in{position:relative}
.hero h1{font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:.5px;color:var(--ink-strong);margin-bottom:12px;line-height:1.18}
.hero h1 .hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{font-size:clamp(14px,1.6vw,17px);color:var(--ink-soft);max-width:680px;margin:0 auto}

.section{padding:30px 0 60px}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.sec-title{display:flex;flex-direction:column;gap:6px}
.sec-title .bar{width:34px;height:4px;border-radius:4px;background:var(--grad)}
.sec-title h2{font-size:22px;font-weight:800;color:var(--ink-strong);letter-spacing:.3px}
.sec-title small{font-size:13px;color:var(--ink-soft)}

.cat-group{margin-bottom:30px}
.cat-group .gtop{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.cat-group .glabel{font-size:13px;font-weight:700;color:var(--ink-soft);letter-spacing:1px;text-transform:uppercase}
.cat-group .gcount{font-size:12px;color:var(--ink-soft)}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.cat{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:16px;transition:.22s;cursor:pointer}
.cat:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:#d3dde9}
.cat .row1{display:flex;align-items:center;gap:12px}
.cat .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none;box-shadow:0 6px 14px rgba(15,27,36,.12);font-weight:800;font-size:18px}
.cat:nth-child(6n+1) .ic{background:linear-gradient(135deg,#11B3A3,#0E8F8F)}
.cat:nth-child(6n+2) .ic{background:linear-gradient(135deg,#2C7BE5,#1E5FC4)}
.cat:nth-child(6n+3) .ic{background:linear-gradient(135deg,#F2A33C,#E07B1F)}
.cat:nth-child(6n+4) .ic{background:linear-gradient(135deg,#7C5CFC,#5B3FD6)}
.cat:nth-child(6n+5) .ic{background:linear-gradient(135deg,#EF5DA8,#C93B86)}
.cat:nth-child(6n+6) .ic{background:linear-gradient(135deg,#22C55E,#15924A)}
.cat .meta b{display:block;font-size:15px;font-weight:700;color:var(--ink-strong)}
.cat .meta .en{font-size:11px;color:var(--ink-soft);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.cat .meta .num{font-size:12px;color:var(--accent-cool);font-weight:600;margin-top:2px}
.cat .desc{font-size:12px;color:var(--ink-soft);line-height:1.45}
.cat .sublabel{font-size:11px;font-weight:700;color:var(--ink-soft);letter-spacing:.5px;margin-top:2px}
.cat .subs{display:flex;flex-direction:column;gap:0;margin-top:2px}
.cat .subs .srow{display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:4px 0;border-bottom:1px dashed var(--line)}
.cat .subs .srow:last-child{border-bottom:none}
.cat .subs .sn{color:var(--ink-mid)}
.cat .subs .sc{color:var(--accent-cool);font-weight:700;font-variant-numeric:tabular-nums}
.cat .tags{display:flex;flex-wrap:wrap;gap:6px}
.cat .tags span{font-size:11px;color:var(--ink-mid);background:var(--surface-soft);border:1px solid var(--line);padding:2px 8px;border-radius:10px}
.cat.planned{opacity:.92}
.cat .planned-badge{display:inline-block;font-size:10px;font-weight:700;color:var(--ink-soft);background:var(--surface-soft);border:1px solid var(--line);padding:1px 8px;border-radius:10px;margin-top:2px}

.feed-tabs{display:flex;gap:8px}
.feed-tabs button{border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font-size:13px;font-weight:600;padding:7px 16px;border-radius:20px;cursor:pointer;transition:.2s;font-family:inherit}
.feed-tabs button.on{background:var(--grad);color:#fff;border-color:transparent}

.feed{margin-top:18px}
.feed-title{font-size:18px;font-weight:800;color:var(--ink-strong);margin-bottom:2px}
.feed-sub{font-size:12px;color:var(--ink-soft);margin-bottom:14px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:.22s;cursor:pointer}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:#d3dde9}
.card .cover{height:96px;background:var(--grad);position:relative;display:flex;align-items:center;justify-content:center}
.card .cover .badge{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:12px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);font-size:11px;font-weight:600;color:var(--ink-strong)}
.card .cover .glyph{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:20px}
.card .body{padding:16px 18px 6px;flex:1}
.card .cn{font-size:16px;font-weight:700;color:var(--ink-strong)}
.card .en{font-size:12px;color:var(--ink-soft);margin-top:2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.card .ds{font-size:13px;color:var(--ink-mid);margin-top:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.card .foot{display:flex;align-items:center;justify-content:space-between;padding:12px 18px 16px;border-top:1px solid var(--line);margin-top:8px}
.card .installs{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-soft);font-weight:600}
.card .install-cmd{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:9px;background:var(--surface-soft);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--accent-cool);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;transition:.2s;cursor:pointer}
.card .install-cmd:hover{background:var(--grad);color:#fff;border-color:transparent}
.card .cover .rank{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;background:rgba(15,27,36,.5);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}

.empty{text-align:center;color:var(--ink-soft);padding:40px 0;font-size:14px}
.loading{text-align:center;color:var(--ink-soft);padding:30px 0;font-size:14px}

.footer{background:linear-gradient(135deg,#0F1B24 0%,#16313f 100%);color:#cdd9e3;margin-top:40px;padding:48px 0 28px;position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(17,179,163,.35),transparent 70%)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;position:relative}
.foot-brand .brand{color:#fff;margin-bottom:12px}
.foot-brand p{font-size:13px;color:#8ba0b0;max-width:300px}
.foot-col h4{font-size:13px;color:#fff;margin-bottom:14px;font-weight:700;letter-spacing:.5px}
.foot-col a{display:block;font-size:13px;color:#9fb2c0;padding:5px 0;transition:.2s}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:#7c93a3;position:relative}
.foot-bottom .ver{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:rgba(255,255,255,.08);padding:3px 10px;border-radius:8px;color:#bcd0de}

/* 技能详情弹窗样式已统一至 /assets/skill-modal.css（tpl.js <head> 直接引用，modal.js 亦注入） */

.back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--accent-cool);margin-bottom:14px}
.back-link:hover{text-decoration:underline}

@media(max-width:860px){
  .nav{display:none}
  .hdr-right .btn-ghost{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .hero{padding:52px 0 36px}
}
@media(max-width:640px){
  .cat-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .cards{grid-template-columns:1fr}
}
/* （技能详情弹窗增强样式已移至 /assets/skill-modal.css，tpl.js <head> 引用，此处不再内联） */