/* =========================================================
   clashguanfang.com · 设计系统基座
   液态玻璃桌面:日落橙→珊瑚粉壁纸 + 暖白磨砂玻璃层
   ========================================================= */

/* ---------- 设计令牌 ---------- */
:root{
  /* 基础色 */
  --c-bg:#FCEEDD;
  --c-panel:#FFFDF9;
  --c-panel2:#FFF4E8;
  --c-border:#F1DCC8;
  --c-accent:#FF6A2F;
  --c-accent-dark:#E04E12;
  --c-text:#3A2A20;
  --c-muted:#8A705E;
  --c-ok:#2FA65A;
  --c-warn:#E8A013;
  --c-err:#D93B30;

  /* 壁纸色斑 */
  --wp-orange:#FF9A4D;
  --wp-coral:#FF7B8A;
  --wp-apricot:#FFC98A;

  /* 玻璃层 */
  --glass-bar:rgba(255,253,249,.55);
  --glass-win:rgba(255,253,249,.68);
  --glass-soft:rgba(255,253,249,.42);
  --glass-menu:rgba(255,253,249,.9);
  --edge-light:rgba(255,255,255,.72);
  --edge-light-soft:rgba(255,255,255,.45);
  --edge-strong:rgba(255,255,255,.45);

  /* 投影与晕染(暖褐墨色) */
  --ink-08:rgba(133,58,16,.08);
  --ink-12:rgba(133,58,16,.12);
  --ink-16:rgba(133,58,16,.16);
  --ink-22:rgba(133,58,16,.22);
  --veil:rgba(58,42,32,.28);
  --accent-glow:rgba(224,78,18,.4);
  --sh-win:0 34px 80px var(--ink-22),0 12px 30px var(--ink-16),inset 0 1px 0 var(--edge-light);
  --sh-bar:0 12px 34px var(--ink-12),inset 0 1px 0 var(--edge-light);
  --sh-dock:0 22px 50px var(--ink-22),0 6px 16px var(--ink-12),inset 0 1px 0 var(--edge-light);
  --sh-btn:0 14px 30px rgba(224,78,18,.38),inset 0 1px 0 rgba(255,255,255,.4);
  --sh-knob:0 1px 3px rgba(58,42,32,.35);

  /* 彩色浅衬 */
  --tint-accent:rgba(255,106,47,.15);
  /* 不透明版浅衬(= tint-accent 叠在 --c-panel 上的实色,供移动端抽屉等不允许透明的层使用) */
  --tint-accent-solid:#FFE7DB;
  --tint-ok:rgba(47,166,90,.14);
  --tint-warn:rgba(232,160,19,.16);
  --tint-err:rgba(217,59,48,.12);
  --tgl-off:rgba(58,42,32,.18);
  --row-alt:rgba(255,244,232,.6);

  /* 圆角 */
  --r-xl:30px;
  --r-lg:22px;
  --r-md:16px;
  --r-sm:10px;

  /* 字体 */
  --f-display:'Inter','Noto Sans SC',ui-rounded,-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --f-body:'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,'Courier New',monospace;

  /* 版心与间距 */
  --gutter:clamp(16px,5vw,32px);
  --head-h:62px;
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--f-body);
  font-size:16px;
  color:var(--c-text);
  min-height:100vh;
  overflow-x:hidden;
  background-color:var(--c-bg);
  background-image:
    radial-gradient(1150px 800px at 10% -10%, var(--wp-apricot) 0%, transparent 62%),
    radial-gradient(1350px 950px at 92% 4%, var(--wp-coral) 0%, transparent 60%),
    radial-gradient(1250px 900px at 46% 120%, var(--wp-orange) 0%, transparent 64%),
    radial-gradient(850px 650px at 80% 86%, var(--wp-coral) 0%, transparent 58%);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img{max-width:100%;height:auto}
button{font-family:inherit;color:inherit}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px;border-radius:var(--r-sm)}
::selection{background:var(--tint-accent)}
html.nav-open{overflow:hidden}

/* ---------- 排版 ---------- */
h1,h2,h3,h4{font-family:var(--f-display);letter-spacing:-.01em;line-height:1.25}
h1{font-size:clamp(34px,5vw,52px);font-weight:800}
h2{font-size:clamp(24px,3.2vw,34px);font-weight:800}
h3{font-size:clamp(18px,2.2vw,22px);font-weight:700}
h4{font-size:16px;font-weight:700}
p{line-height:1.75}
code,kbd{
  font-family:var(--f-mono);font-size:.88em;
  background:var(--c-panel2);border-radius:6px;padding:2px 6px;
}
pre code{background:transparent;padding:0;border-radius:0}
.mono{font-family:var(--f-mono)}
.muted{color:var(--c-muted)}

/* ---------- 版心与区块节奏 ---------- */
.wrap{
  max-width:1160px;margin:0 auto;
  padding-left:var(--gutter);padding-right:var(--gutter);
}
.wrap-wide{
  max-width:1400px;margin:0 auto;
  padding-left:var(--gutter);padding-right:var(--gutter);
}
.sec{padding-top:64px;padding-bottom:64px}
.sec-tight{padding-top:36px;padding-bottom:36px}
.sec-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:12px;font-weight:600;
  letter-spacing:.14em;color:var(--c-muted);text-transform:uppercase;
}
.sec-kicker::before{
  content:"";width:7px;height:7px;border-radius:2px;
  background:var(--c-accent);flex-shrink:0;
}
.sec-title{margin-top:10px}
.sec-desc{margin-top:10px;color:var(--c-muted);max-width:640px}

/* ---------- 通用玻璃面板与卡片 ---------- */
.panel,.peek-panel{
  border-radius:var(--r-xl);
  background:var(--glass-win);
  -webkit-backdrop-filter:blur(26px) saturate(1.4);
  backdrop-filter:blur(26px) saturate(1.4);
  box-shadow:var(--sh-bar);
  padding:34px 40px 40px;
}
.card{
  border-radius:var(--r-lg);
  background:var(--glass-win);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:var(--sh-bar);
  padding:24px;
  min-width:0;
}
.grid{display:grid;gap:18px}
.grid>*{min-width:0}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 30px;border-radius:999px;
  font-family:var(--f-display);font-size:16px;font-weight:700;
  border:0;cursor:pointer;
}
.btn svg{flex-shrink:0}
.btn-main{
  color:var(--c-panel);
  background:linear-gradient(180deg,var(--c-accent),var(--c-accent-dark));
  box-shadow:var(--sh-btn);
}
.btn-main:hover{filter:brightness(1.06)}
.btn-ghost{
  color:var(--c-text);
  background:var(--glass-bar);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 var(--edge-light),0 8px 22px var(--ink-08);
}
.btn-ghost:hover{background:var(--glass-menu)}
.btn-sm{padding:9px 20px;font-size:14px}
.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* ---------- 站点头部(header.js 注入) ---------- */
.site-head{
  position:relative;z-index:40;
  background:var(--glass-bar);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:inset 0 1px 0 var(--edge-light),0 1px 0 var(--edge-light-soft);
}
.head-in{
  max-width:1400px;margin:0 auto;padding:0 48px;
  height:var(--head-h);display:flex;align-items:center;gap:36px;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-display);font-weight:800;font-size:17px;letter-spacing:.01em;
}
.brand-mark{width:28px;height:28px;display:block;flex-shrink:0}
.nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav-a{
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 15px;border-radius:999px;
  font-size:14.5px;font-weight:500;color:var(--c-text);
  border:0;background:transparent;font-family:var(--f-body);cursor:pointer;
}
.nav-a:hover{background:var(--glass-soft);box-shadow:inset 0 1px 0 var(--edge-light-soft)}
.nav-a.is-on{
  background:var(--tint-accent);color:var(--c-accent-dark);font-weight:700;
  box-shadow:inset 0 1px 0 var(--edge-light-soft);
}
.caret{font-size:10px;color:var(--c-muted)}
.nav-more{position:relative}
.more-panel{
  position:absolute;top:calc(100% + 10px);right:0;min-width:170px;
  padding:8px;border-radius:var(--r-md);
  background:var(--glass-menu);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  box-shadow:var(--sh-bar),0 20px 46px var(--ink-16);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  z-index:6;
}
.nav-more:hover .more-panel,
.nav-more:focus-within .more-panel,
.nav-more.open .more-panel{opacity:1;visibility:visible;transform:translateY(0)}
.more-panel a{
  display:block;padding:9px 14px;border-radius:var(--r-sm);
  font-size:14px;font-weight:500;
}
.more-panel a:hover{background:var(--tint-accent);color:var(--c-accent-dark)}
.more-panel a.is-on{background:var(--tint-accent);color:var(--c-accent-dark);font-weight:700}
.head-tools{display:flex;align-items:center;gap:8px;margin-left:6px}
.lang-box{position:relative}
.lang{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 15px;border-radius:999px;cursor:pointer;
  font-family:var(--f-body);font-size:13.5px;font-weight:500;color:var(--c-muted);
  background:var(--glass-soft);border:0;
  box-shadow:inset 0 1px 0 var(--edge-light-soft);
}
.lang:hover{color:var(--c-text)}
.lang-panel{
  position:absolute;top:calc(100% + 10px);right:0;min-width:158px;
  padding:8px;border-radius:var(--r-md);
  background:var(--c-panel);
  box-shadow:var(--sh-bar),0 20px 46px var(--ink-16);
  display:none;z-index:7;
}
.lang-box.open .lang-panel{display:block}
.lang-panel a{
  display:flex;align-items:center;min-height:40px;
  padding:8px 14px;border-radius:var(--r-sm);font-size:14px;
}
.lang-panel a:hover{background:var(--tint-accent);color:var(--c-accent-dark)}
.lang-panel a.is-cur{background:var(--c-panel2);color:var(--c-muted);cursor:default}
.burger{
  display:none;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;border:0;border-radius:var(--r-sm);
  background:var(--glass-soft);cursor:pointer;
  box-shadow:inset 0 1px 0 var(--edge-light-soft);
  color:var(--c-text);
}
.burger svg{width:22px;height:22px;display:block}
.nav-veil{
  display:none;position:absolute;top:100%;left:0;width:100%;height:100dvh;
  background:var(--veil);border:0;padding:0;cursor:default;z-index:1;
}

/* ---------- 仿 macOS 菜单栏(装饰 chrome,首页/预览用) ---------- */
.osbar{
  position:relative;z-index:30;
  background:var(--glass-soft);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:inset 0 1px 0 var(--edge-light-soft),0 1px 0 var(--edge-light-soft);
}
.osbar-in{
  max-width:1400px;margin:0 auto;padding:0 48px;
  height:34px;display:flex;align-items:center;gap:22px;
  font-size:13px;color:var(--c-text);
}
.osbar-in strong{font-weight:800;font-family:var(--f-display)}
.osbar-in .os-menu{color:var(--c-muted);font-weight:500}
.osbar-gap{flex:1}
.os-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.os-dot-ok{background:var(--c-ok)}
.os-dot-warn{background:var(--c-warn)}
.os-time{font-family:var(--f-mono);font-size:12px;color:var(--c-muted);margin-left:4px}

/* ---------- 页脚(footer.js 注入) ---------- */
.site-foot{
  margin-top:48px;
  padding-top:56px;padding-bottom:30px;
  background:var(--glass-bar);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:inset 0 1px 0 var(--edge-light);
}
.foot-in{max-width:1400px;margin:0 auto;padding-left:48px;padding-right:48px}
.foot-grid{display:grid;grid-template-columns:1.4fr .9fr 1.6fr .9fr;gap:36px}
.foot-grid>*{min-width:0}
.foot-blurb{margin-top:14px;font-size:14px;line-height:1.75;color:var(--c-muted);max-width:340px}
.foot-h{
  font-size:12.5px;font-weight:800;letter-spacing:.1em;
  color:var(--c-muted);margin-bottom:14px;font-family:var(--f-display);
}
.foot-nav a,.foot-langs a{
  display:block;padding:6px 0;font-size:14px;color:var(--c-text);
}
.foot-nav a:hover,.foot-langs a:hover{color:var(--c-accent-dark)}
.foot-langs a.is-cur{color:var(--c-muted);cursor:default}
.foot-hot{display:flex;flex-wrap:wrap;gap:8px}
.foot-hot a{
  display:inline-flex;align-items:center;max-width:100%;
  padding:6px 13px;border-radius:999px;
  background:var(--glass-soft);
  box-shadow:inset 0 1px 0 var(--edge-light-soft);
  font-size:12.5px;font-weight:600;color:var(--c-muted);
  overflow:hidden;
}
.foot-hot a:hover{background:var(--tint-accent);color:var(--c-accent-dark)}
.foot-legal{
  margin-top:38px;padding-top:18px;
  box-shadow:inset 0 1px 0 var(--edge-light-soft);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;
  font-size:13px;color:var(--c-muted);
}
.foot-legal a:hover{color:var(--c-accent-dark)}
.foot-legal .foot-gap{flex:1}

/* ---------- 滚动淡入 ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.shown{opacity:1;transform:translateY(0)}

/* ---------- 响应式 ---------- */
@media (max-width:1180px){
  .head-in,.osbar-in,.foot-in{padding-left:24px;padding-right:24px}
}

@media (max-width:900px){
  :root{--head-h:56px}
  .head-in{gap:12px}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    display:none;flex-direction:column;align-items:stretch;gap:2px;
    margin:0;padding:10px 14px 18px;
    background:var(--c-panel);
    box-shadow:0 26px 50px var(--ink-16);
    border-radius:0 0 var(--r-lg) var(--r-lg);
    max-height:calc(100dvh - var(--head-h));
    overflow-y:auto;overscroll-behavior:contain;
    z-index:5;
  }
  html.nav-open .nav{display:flex}
  html.nav-open .nav-veil{display:block}
  .nav-a{
    display:flex;width:100%;min-height:46px;align-items:center;
    padding:11px 14px;border-radius:var(--r-sm);font-size:15px;
  }
  /* 抽屉内所有层必须实色,不能让正文透上来 */
  .nav-a:hover{background:var(--c-panel2)}
  .nav-a.is-on{background:var(--tint-accent-solid)}
  .nav-more{width:100%}
  .nav-more-btn{display:none}
  .more-panel{
    position:static;min-width:0;padding:0;
    background:var(--c-panel);box-shadow:none;
    opacity:1;visibility:visible;transform:none;transition:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .more-panel a{
    display:flex;width:100%;min-height:46px;align-items:center;
    padding:11px 14px;border-radius:var(--r-sm);font-size:15px;
  }
  .more-panel a:hover{background:var(--c-panel2)}
  .more-panel a.is-on{background:var(--tint-accent-solid)}
  .head-tools{margin-left:auto}
  .burger{display:inline-flex}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .sec{padding-top:44px;padding-bottom:44px}
  .panel,.peek-panel{padding:24px 20px 28px;border-radius:var(--r-lg)}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .head-in,.osbar-in,.foot-in{padding-left:20px;padding-right:20px}
  .osbar-in{gap:14px}
  .osbar-in .os-menu:nth-of-type(n+4){display:none}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .btn{padding:13px 24px;font-size:15px}
}

/* ---------- 动效停摆 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
  .reveal{opacity:1;transform:none}
}