/* ============================================================
   Clash开源社区 · base.css
   设计令牌 / reset / 排版 / 按钮 / 头部导航 / 页脚 / 面板 / reveal / 响应式
   视觉基准:用户拍板的首页首屏稿(仓库主页风,纯白纸面+墨蓝顶栏,
   1px 浅灰描边 + 6px 圆角,零投影零渐变零光晕)
   ============================================================ */

:root{
  /* 纸面与面板层次 */
  --bg:#FFFFFF;
  --bg-panel:#F6F8FA;
  --bg-panel2:#EDF3EE;
  --border:#D8DEE4;

  /* 品牌绿(饱和绿只给主按钮与合并式操作) */
  --accent:#26A641;
  --accent-dark:#1A7F37;
  --on-accent:#FFFFFF;

  /* 文字 */
  --text:#1F2328;
  --text-muted:#59636E;
  --hash:#CDD6DE;

  /* issue 标签三色(琥珀/玫红/青蓝)与浅底 */
  --warn:#BF8700;
  --error:#CF2E5F;
  --info:#0969DA;
  --warn-bg:#FFF8E3;
  --error-bg:#FDEEF3;
  --info-bg:#EAF3FD;

  /* 墨蓝近黑导航条 */
  --ink:#0D1524;
  --nav-text:#E7EDF3;
  --nav-muted:#93A0B0;
  --nav-pill:#22314A;
  --nav-border:#33415C;

  /* 年度贡献热力图四级绿 */
  --heat-0:#DCF2E1;
  --heat-1:#8FD9A3;
  --heat-2:#42B45E;
  --heat-3:#1A7F37;

  /* 遮罩 */
  --veil:rgba(13,21,36,.45);

  /* 几何与间距 */
  --radius:6px;
  --radius-pill:999px;
  --gutter:36px;
  --nav-h:60px;

  /* 字体栈(fonts.css 提供本地字体) */
  --font-display:'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-mono:'JetBrains Mono','SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
}

/* ---------- reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.nav-open{overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.7}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit;font-size:inherit;color:inherit}
:target{scroll-margin-top:calc(var(--nav-h) + 18px)}
:focus-visible{outline:2px solid var(--accent-dark);outline-offset:2px}
::selection{background:var(--heat-1);color:var(--text)}

/* ---------- 版心(移动端防贴边:任何断点只改 --gutter,永不清零) ---------- */
.wrap{max-width:1320px;margin-left:auto;margin-right:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:880px;margin-left:auto;margin-right:auto;padding-inline:var(--gutter)}

/* ---------- 区块节奏(只声明纵向,严禁横向简写) ---------- */
.sec{padding-top:64px;padding-bottom:64px}
.sec-tight{padding-top:32px;padding-bottom:32px}
.sec-last{padding-top:6px;padding-bottom:90px}

/* ---------- 排版:渲染后 Markdown 标题体系 ---------- */
.md-h1{font-family:var(--font-display);font-size:clamp(32px,5vw,50px);line-height:1.24;font-weight:800;letter-spacing:.01em;color:var(--text)}
.md-h1 .hash{color:var(--hash);margin-right:.16em}
.h1-rule{height:1px;background:var(--border);margin:20px 0 22px}

.md-h2{font-family:var(--font-display);font-size:24px;font-weight:700;margin-bottom:16px}
.md-h2 .hash2{color:var(--hash);margin-right:.3em;font-weight:800}
.md-h2-rule{height:1px;background:var(--border);margin:0 0 22px}

.md-h3{font-family:var(--font-display);font-size:17px;font-weight:700;margin-bottom:10px}

.lead{font-size:16px;line-height:1.95;color:var(--text-muted);max-width:33em}
.lead strong{color:var(--text);font-weight:600}

.muted{color:var(--text-muted)}
.mono{font-family:var(--font-mono)}

/* ---------- 眉毛行与状态圆点 ---------- */
.eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:13px;color:var(--text-muted);margin-bottom:16px}
.eyebrow em{font-style:normal;color:var(--hash)}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}

/* ---------- 按钮 ---------- */
.btn-main{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--on-accent);font-size:15px;font-weight:600;padding:12px 24px;border-radius:var(--radius);border:none;cursor:pointer;transition:background-color .15s ease}
.btn-main:hover{background:var(--accent-dark)}
.btn-main svg{width:16px;height:16px;flex-shrink:0}

.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:var(--bg-panel);border:1px solid var(--border);color:var(--text);font-size:15px;font-weight:500;padding:11px 22px;border-radius:var(--radius);cursor:pointer;transition:border-color .15s ease}
.btn-ghost:hover{border-color:var(--text-muted)}
.btn-ghost svg{width:15px;height:15px;flex-shrink:0}

.btn-sm{padding:7px 14px;font-size:13.5px}
.btn-link{color:var(--accent-dark);border-bottom:1px solid var(--heat-1);font-weight:500}
.btn-link:hover{border-bottom-color:var(--accent-dark)}

.cta{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:26px}
.cta-note{font-family:var(--font-mono);font-size:12.5px;color:var(--text-muted);margin-top:14px}
.cta-note a{color:var(--accent-dark);border-bottom:1px solid var(--heat-1)}
.cta-note a:hover{border-bottom-color:var(--accent-dark)}

/* ---------- 顶部导航(墨蓝顶栏,pill 高亮当前项) ---------- */
.topnav{background:var(--ink);position:sticky;top:0;z-index:50}
.topnav-in{max-width:1320px;margin:0 auto;padding-inline:var(--gutter);height:var(--nav-h);display:flex;align-items:center;gap:22px}

.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand-logo{width:30px;height:30px;display:block;flex-shrink:0}
.crumb{font-family:var(--font-mono);font-size:14px;color:var(--nav-text);white-space:nowrap}
.crumb em{font-style:normal;color:var(--nav-muted);padding:0 5px}
.crumb b{font-weight:700}

.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links a{color:var(--nav-muted);font-size:14px;padding:6px 13px;border-radius:var(--radius-pill);white-space:nowrap;transition:color .15s ease,background-color .15s ease}
.nav-links a:hover{color:var(--nav-text)}
.nav-links a.on{background:var(--nav-pill);color:var(--on-accent);font-weight:600}

.nav-tools{display:flex;align-items:center;gap:10px;flex-shrink:0}

.lang-box{position:relative;flex-shrink:0}
.lang-btn{font-size:13px;color:var(--nav-muted);background:none;border:1px solid var(--nav-border);border-radius:var(--radius-pill);padding:5px 13px;white-space:nowrap;cursor:pointer;transition:color .15s ease}
.lang-btn:hover{color:var(--nav-text)}
.lang-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:70;min-width:152px;margin:0;padding:6px;list-style:none;background:var(--ink);border:1px solid var(--nav-border);border-radius:var(--radius)}
.lang-menu[hidden]{display:none}
.lang-menu a{display:block;padding:9px 12px;font-size:13.5px;color:var(--nav-muted);border-radius:var(--radius)}
.lang-menu a:hover{background:var(--nav-pill);color:var(--nav-text)}
.lang-menu a.cur{background:var(--nav-pill);color:var(--nav-text);font-weight:600}

.nav-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:44px;height:44px;min-width:44px;min-height:44px;background:none;border:1px solid var(--nav-border);border-radius:var(--radius);cursor:pointer}
.nb-line{display:block;width:18px;height:2px;background:var(--nav-text);border-radius:1px;transition:transform .15s ease,opacity .15s ease}
html.nav-open .nav-burger .nb-line:nth-child(1){transform:translateY(6px) rotate(45deg)}
html.nav-open .nav-burger .nb-line:nth-child(2){opacity:0}
html.nav-open .nav-burger .nb-line:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Hero(visual-right:左文案右仓库窗口) ---------- */
.hero{min-height:calc(100vh - 124px);display:flex;align-items:center;padding-top:34px;padding-bottom:30px}
.hero-grid{display:grid;grid-template-columns:45fr 55fr;gap:54px;align-items:center;width:100%}
.hero-grid>*{min-width:0}

/* ---------- 通用面板/卡片 ---------- */
.panel{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius)}
.panel-tinted{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius)}
.panel-green{background:var(--bg-panel2);border:1px solid var(--heat-1);border-radius:var(--radius)}
.panel-pad{padding:20px 22px}

.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.cards-grid>*{min-width:0}

/* ---------- 代码与命令 ---------- */
pre{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;overflow-x:auto;font-family:var(--font-mono);font-size:13px;line-height:1.75}
pre code{background:none;border:none;padding:0;font-size:inherit}
code{font-family:var(--font-mono);font-size:.9em;background:var(--bg-panel);border:1px solid var(--border);border-radius:4px;padding:1px 6px}

/* ---------- 页脚 ---------- */
.site-footer{border-top:1px solid var(--border);background:var(--bg-panel);margin-top:64px}
.footer-grid{display:grid;grid-template-columns:1.5fr .9fr 1.3fr .8fr;gap:36px;padding-top:48px;padding-bottom:36px}
.footer-grid>*{min-width:0}
.f-logo{display:inline-flex;align-items:center;gap:10px}
.f-logo img{width:28px;height:28px;flex-shrink:0}
.crumb-ink{font-family:var(--font-mono);font-size:14px;color:var(--text)}
.crumb-ink em{font-style:normal;color:var(--hash);padding:0 5px}
.crumb-ink b{font-weight:700}
.f-blurb{font-size:13.5px;color:var(--text-muted);margin-top:14px;max-width:30em}
.f-fact{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);margin-top:12px}
.f-head{font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:.08em;color:var(--text-muted);margin-bottom:12px}
.f-col a{display:block;padding-top:4px;padding-bottom:4px;font-size:13.5px;color:var(--text-muted);transition:color .15s ease}
.f-col a:hover{color:var(--accent-dark)}
.f-tags{display:flex;flex-wrap:wrap;gap:8px}
.f-tags a{display:inline-block;font-family:var(--font-mono);font-size:12px;color:var(--text-muted);border:1px solid var(--border);border-radius:var(--radius-pill);padding:3px 12px;background:var(--bg);max-width:100%;overflow:hidden;transition:border-color .15s ease,color .15s ease}
.f-tags a:hover{color:var(--accent-dark);border-color:var(--heat-1)}
.f-bottom{border-top:1px solid var(--border);padding-top:18px;padding-bottom:22px;display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
.f-bottom a{color:var(--text-muted)}
.f-bottom a:hover{color:var(--accent-dark)}

/* ---------- 滚动淡入 ---------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.reveal.shown{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- 响应式 ---------- */
@media (max-width:1180px){
  .nav-links a{padding:6px 10px;font-size:13.5px}
  .topnav-in{gap:14px}
}

@media (max-width:1060px){
  /* 导航收进抽屉:工具区自己补 margin-left:auto,防止悬在页中间 */
  .nav-burger{display:inline-flex}
  .nav-tools{margin-left:auto}
  .nav-links{display:none;position:fixed;top:var(--nav-h);left:0;right:0;z-index:60;margin-left:0;flex-direction:column;align-items:stretch;gap:2px;background:var(--ink);border-bottom:1px solid var(--nav-border);padding:10px var(--gutter) 16px;max-height:calc(100dvh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain}
  html.nav-open .nav-links{display:flex}
  .nav-links a{display:block;width:100%;padding:12px 14px;min-height:44px;font-size:15px;border-radius:var(--radius)}

  .hero{min-height:0;padding-top:46px;padding-bottom:36px}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
}

@media (max-width:640px){
  :root{--gutter:16px}
  body{font-size:14.5px}
  .sec{padding-top:44px;padding-bottom:44px}
  .lead{font-size:15px}
  .cta{gap:10px}
  .btn-main{padding:12px 20px}
  .btn-ghost{padding:11px 18px}
  .footer-grid{grid-template-columns:1fr;gap:28px;padding-top:36px}
}

@media (max-width:400px){
  .crumb{font-size:13px}
  .md-h1{font-size:30px}
}