/* ==========================================================================
   Shadowrocket官方下载 · base.css
   设计令牌 / reset / 排版 / 页头 / 页脚 / 通用卡片 / reveal / 响应式
   ========================================================================== */

:root{
  /* ---------- 基底 ---------- */
  --bg:#ffffff;
  --bg-panel:#f2f4f2;
  --bg-panel2:#141715;
  --border:#e2e6e3;
  --border-strong:#ccd4cf;

  /* ---------- 强调 ---------- */
  --accent:#10c5a8;
  --accent-lite:#16d6b4;
  --accent-mid:#0f8f7e;
  --accent-dark:#0b3d2e;
  --accent-dark-hi:#0d4c39;

  /* ---------- 文字 ---------- */
  --text:#0e1211;
  --text-muted:#5b6562;

  /* ---------- 语义 ---------- */
  --success:#c9f24d;
  --warn:#e0a63c;
  --error:#cf4b3f;

  /* ---------- 透明派生 ---------- */
  --accent-06:rgba(16,197,168,.06);
  --accent-10:rgba(16,197,168,.10);
  --accent-18:rgba(16,197,168,.18);
  --accent-30:rgba(16,197,168,.30);
  --accent-38:rgba(16,197,168,.38);
  --accent-55:rgba(16,197,168,.55);
  --accent-60:rgba(16,197,168,.60);
  --grid-line:rgba(255,255,255,.08);
  --sweep-band:rgba(16,197,168,.14);
  --on-dark-06:rgba(255,255,255,.06);
  --on-dark-16:rgba(255,255,255,.16);
  --on-dark-26:rgba(255,255,255,.26);
  --on-dark-60:rgba(255,255,255,.60);
  --on-dark-72:rgba(255,255,255,.72);
  --deep-10:rgba(11,61,46,.10);
  --deep-13:rgba(11,61,46,.13);
  --deep-16:rgba(11,61,46,.16);
  --deep-24:rgba(11,61,46,.24);
  --deep-30:rgba(11,61,46,.30);
  --deep-85:rgba(11,61,46,.85);
  --ink-08:rgba(14,18,17,.08);
  --shadow-ink:rgba(4,24,17,.22);
  --shadow-deep:rgba(4,24,17,.24);
  --black-45:rgba(0,0,0,.45);
  --veil:rgba(4,24,17,.46);

  /* ---------- 字体栈 ---------- */
  --font-display:"Inter","Noto Sans SC","Noto Sans JP","Noto Sans KR",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans","Malgun Gothic",sans-serif;
  --font-body:"Inter","Noto Sans SC","Noto Sans JP","Noto Sans KR",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans","Malgun Gothic",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Noto Sans SC",monospace;

  /* ---------- 圆角 ---------- */
  --r-canvas:32px;
  --r-card:20px;
  --r-card-sm:14px;
  --r-shot:10px;
  --r-mark:10px;
  --r-pill:999px;

  /* ---------- 分层投影 ---------- */
  --shadow-canvas:0 2px 6px var(--deep-10),0 18px 38px var(--deep-16),0 46px 84px var(--deep-13);
  --shadow-card:0 1px 2px var(--ink-08),0 14px 30px var(--shadow-ink),0 40px 70px var(--shadow-deep);
  --shadow-phone:inset 0 0 0 1.5px var(--on-dark-26),inset 0 -70px 96px -34px var(--deep-85),0 34px 60px -18px var(--black-45);
  --shadow-btn:0 10px 24px var(--deep-24);
  --shadow-btn-hi:0 16px 34px var(--deep-30);
  --shadow-soft:0 1px 2px var(--ink-08),0 10px 24px var(--deep-10);
  --shadow-lift:0 2px 6px var(--ink-08),0 20px 44px var(--deep-16);
  --halo-chip:0 0 0 3px var(--accent-06);

  /* ---------- 尺寸节奏 ---------- */
  --head-h:68px;
  --peek-h:108px;
  --wrap:1240px;
  --head-wrap:1280px;
  --gutter:48px;
  --sec-y:96px;
}

/* ==========================================================================
   reset
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head-h) + 16px);
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none}

button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

ul,ol{margin:0;padding:0;list-style:none}

img{max-width:100%}

svg{display:block;flex-shrink:0}

[hidden]{display:none!important}

html.nav-open{overflow:hidden}

/* ==========================================================================
   排版
   ========================================================================== */
h1,h2,h3,h4,h5{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--text);
}

h1{font-size:clamp(34px,3.6vw,48px);line-height:1.08;letter-spacing:-.035em}
h2{font-size:clamp(26px,2.6vw,34px);line-height:1.18}
h3{font-size:clamp(19px,1.7vw,22px);line-height:1.35;letter-spacing:-.015em}
h4{font-size:17px;line-height:1.4;letter-spacing:-.01em}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

strong{font-weight:700}

code{
  font-family:var(--font-mono);
  font-size:.9em;
  overflow-wrap:anywhere;
  word-break:break-word;
}

p code,li code,dd code,td code,figcaption code{
  padding:2px 6px;
  border-radius:6px;
  background:var(--bg-panel);
  color:var(--text);
}

pre{
  margin:0 0 1.2em;
  padding:16px 18px;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-card-sm);
}

pre code{
  padding:0;
  background:none;
  color:var(--text);
  font-size:13px;
  line-height:1.75;
  white-space:pre;
  overflow-wrap:normal;
  word-break:normal;
}

hr{border:0;border-top:1px solid var(--border);margin:32px 0}

::selection{background:var(--accent-18);color:var(--text)}

/* ==========================================================================
   版心
   ========================================================================== */
.shell{
  width:100%;
  max-width:calc(var(--wrap) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.head-shell{
  width:100%;
  max-width:calc(var(--head-wrap) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{
  padding-top:var(--sec-y);
  padding-bottom:var(--sec-y);
}

.section--tight{
  padding-top:calc(var(--sec-y) * .55);
  padding-bottom:calc(var(--sec-y) * .55);
}

.section--panel{
  background:var(--bg-panel);
}

.section-head{
  max-width:760px;
  margin-bottom:44px;
}

.section-head p{
  margin-top:14px;
  color:var(--text-muted);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.eyebrow::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:var(--r-pill);
  background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-10);
  flex:0 0 auto;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:80;
  padding:10px 16px;
  border-radius:0 0 var(--r-card-sm) 0;
  background:var(--accent-dark);
  color:var(--bg);
  font-size:14px;
  font-weight:700;
}

.skip-link:focus{
  left:0;
}

/* ==========================================================================
   按钮
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 26px;
  border-radius:var(--r-pill);
  font-size:15.5px;
  font-weight:700;
  letter-spacing:-.005em;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}

.btn-primary{
  background:var(--accent-dark);
  color:var(--bg);
  box-shadow:var(--shadow-btn);
}

.btn-primary:hover{
  background:var(--accent-dark-hi);
  transform:translateY(-2px);
  box-shadow:var(--shadow-btn-hi);
}

.btn-primary svg{width:17px;height:17px}

.btn-ghost{
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--border);
}

.btn-ghost:hover{
  border-color:var(--accent-60);
  box-shadow:var(--halo-chip);
  transform:translateY(-2px);
}

.btn-ghost svg{width:15px;height:15px;color:var(--accent-dark)}

.btn-sm{
  min-height:44px;
  padding:0 20px;
  font-size:14.5px;
}

/* ==========================================================================
   页头:tab 条 + 3px 青绿指示条
   ========================================================================== */
.site-head{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}

.head-bar{
  display:flex;
  align-items:center;
  gap:clamp(18px,2.4vw,36px);
  height:var(--head-h);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  /* 可收缩:窄屏下品牌名先让位,不把页头工具/页脚栅格撑出视口 */
  flex:0 1 auto;
  min-width:0;
}

.brand-logo{
  display:block;
  width:34px;
  height:34px;
  flex:0 0 auto;
  border-radius:var(--r-pill);
  object-fit:contain;
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.25;
  min-width:0;
  overflow:hidden;
}

.brand-name{
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.brand-sub{
  font-size:11.5px;
  color:var(--text-muted);
  white-space:nowrap;
}

/* 页脚品牌名有纵向空间,窄屏折行而不是截断 */
.foot-brand .brand-name{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}

.nav-desktop{
  margin-left:auto;
  min-width:0;
}

.nav-list{
  display:flex;
  align-items:center;
  gap:26px;
  height:var(--head-h);
  margin:0;
  padding:0;
  list-style:none;
}

.nav-list li{
  display:flex;
  height:100%;
}

.nav-link{
  position:relative;
  display:flex;
  align-items:center;
  height:100%;
  padding:0 2px;
  font-size:14.5px;
  font-weight:600;
  color:var(--text-muted);
  white-space:nowrap;
  transition:color .18s ease;
}

.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:3px;
  border-radius:3px 3px 0 0;
  background:transparent;
  transition:background .18s ease;
}

.nav-link:hover{color:var(--text)}
.nav-link:hover::after{background:var(--accent-30)}
.nav-link[aria-current="page"]{color:var(--text)}
.nav-link[aria-current="page"]::after{background:var(--accent)}

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

.lang-wrap{position:relative}

.lang-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:38px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg);
  color:var(--text);
  font-size:13.5px;
  font-weight:600;
  white-space:nowrap;
  transition:border-color .18s ease,box-shadow .18s ease;
}

.lang-btn:hover{
  border-color:var(--accent-55);
  box-shadow:var(--halo-chip);
}

.lang-btn svg{
  width:12px;
  height:12px;
  color:var(--text-muted);
}

.lang-abbr{display:none}

.lang-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:50;
  min-width:190px;
  margin:0;
  padding:6px;
  list-style:none;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-card-sm);
  box-shadow:var(--shadow-lift);
}

.lang-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  color:var(--text);
  transition:background .18s ease,color .18s ease;
}

.lang-item:hover{background:var(--bg-panel)}

.lang-item[aria-current="true"]{color:var(--accent-dark)}

.lang-check{
  color:var(--accent);
  font-size:13px;
}

.burger{
  display:none;
  position:relative;
  width:44px;
  height:44px;
  flex:0 0 auto;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg);
  color:var(--text);
  transition:border-color .18s ease,box-shadow .18s ease;
}

.burger:hover{
  border-color:var(--accent-55);
  box-shadow:var(--halo-chip);
}

.burger-bars{
  position:absolute;
  inset:0;
  margin:auto;
  width:18px;
  height:12px;
}

.burger-bars span{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .2s ease,opacity .2s ease;
}

.burger-bars span:nth-child(1){top:0}
.burger-bars span:nth-child(2){top:5px}
.burger-bars span:nth-child(3){top:10px}

.burger[aria-expanded="true"] .burger-bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-bars span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger-bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.drawer-veil{
  position:fixed;
  inset:var(--head-h) 0 0 0;
  z-index:30;
  background:var(--veil);
}

.drawer{
  position:fixed;
  top:var(--head-h);
  left:0;
  right:0;
  bottom:0;
  z-index:35;
  max-height:calc(100dvh - var(--head-h));
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:6px var(--gutter) 48px;
  background:var(--bg);
  border-top:1px solid var(--border);
}

.drawer:not([hidden]){animation:drawer-in .22s ease both}

@keyframes drawer-in{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}

.drawer-list{
  margin:0;
  padding:0;
  list-style:none;
}

.drawer-list li + li{border-top:1px solid var(--border)}

.drawer-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:54px;
  padding:14px 4px;
  font-size:16px;
  font-weight:600;
  color:var(--text);
}

.drawer-link[aria-current="page"]{color:var(--accent-dark)}

.drawer-arrow{
  width:16px;
  height:16px;
  color:var(--text-muted);
}

.drawer-langs{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--border);
}

.drawer-langs-title{
  margin:0 0 6px;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.drawer-lang{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:48px;
  padding:12px 4px;
  font-size:15px;
  font-weight:600;
  color:var(--text);
}

.drawer-lang[aria-current="true"]{color:var(--accent-dark)}

/* ==========================================================================
   页脚
   ========================================================================== */
.site-foot{
  margin-top:0;
  padding-top:64px;
  padding-bottom:28px;
  background:var(--bg-panel);
  border-top:1px solid var(--border);
}

.foot-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:40px;
}

.foot-brand{min-width:0}

.foot-note{
  margin:18px 0 0;
  max-width:38ch;
  font-size:14px;
  line-height:1.7;
  color:var(--text-muted);
}

.foot-title{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.foot-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}

.foot-list a{
  font-size:14.5px;
  color:var(--text);
  transition:color .18s ease;
}

.foot-list a:hover{color:var(--accent-dark)}

.foot-keywords{
  flex-direction:row;
  flex-wrap:wrap;
  gap:8px 18px;
}

.foot-keywords a{
  font-size:13.5px;
  color:var(--text-muted);
}

.foot-keywords a:hover{color:var(--accent-dark)}

.foot-base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 26px;
  margin-top:52px;
  padding-top:20px;
  border-top:1px solid var(--border-strong);
}

.foot-base p{
  margin:0;
  font-size:13px;
  color:var(--text-muted);
}

.foot-legal{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:0;
  padding:0;
  list-style:none;
}

.foot-legal a{
  font-size:13px;
  color:var(--text-muted);
  text-decoration:underline;
  text-underline-offset:3px;
}

.foot-legal a:hover{color:var(--accent-dark)}

/* ==========================================================================
   通用卡片 / 面板
   ========================================================================== */
.card{
  padding:24px;
  min-width:0;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-soft);
}

.card--flat{box-shadow:none}

.card--pad-lg{padding:clamp(24px,3vw,36px)}

.grid-2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.grid-2 > *,.grid-3 > *{min-width:0}

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

.reveal.shown{
  opacity:1;
  transform:none;
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width:1120px){
  :root{--gutter:32px}

  .nav-list{gap:20px}
  .nav-link{font-size:13.5px}
  .brand-sub{display:none}
}

@media (max-width:960px){
  :root{--gutter:24px;--sec-y:64px}

  .nav-desktop{display:none}
  .head-tools{margin-left:auto}
  .burger{display:block}
  .drawer,.drawer-veil{display:block}
  .drawer[hidden],.drawer-veil[hidden]{display:none}

  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width:961px){
  .drawer,.drawer-veil{display:none!important}
}

@media (max-width:768px){
  h1{font-size:clamp(24px,7vw,30px);letter-spacing:-.03em}
  h2{font-size:clamp(22px,6vw,26px)}
  .section-head{margin-bottom:32px}
}

@media (max-width:640px){
  :root{--gutter:20px;--sec-y:56px}

  body{font-size:16px}

  .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .foot-base{margin-top:36px}
  .btn{width:100%;padding:0 20px}
  .btn-block-auto{width:auto}
}

@media (max-width:520px){
  .lang-full{display:none}
  .lang-abbr{display:inline}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }

  .drawer:not([hidden]){animation:none}

  *{transition-duration:.01ms!important}
}