/* ============================================================
   山途拼车 · 设计系统 (Outdoor Natural)
   户外自然高级感：深林绿 + 砂岩暖橙 + 岩石灰阶
   规范参考：Material 3 色彩系统 / Apple HIG 8pt 网格
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  /* 主色：深林绿 */
  --forest-900:#16351F;  --forest-800:#1E4630;  --forest-700:#2D6A4F;
  --forest-600:#3E8466;  --forest-500:#5A9C7F;  --forest-300:#A8CCB8;
  --forest-100:#E4EFE8;  --forest-50:#F1F7F3;

  /* 强调：砂岩暖橙 */
  --sand-700:#A8541F;  --sand-600:#C4652F;  --sand-500:#E07A3F;
  --sand-400:#F0A268;  --sand-100:#FBEBDD;  --sand-50:#FDF6EF;

  /* 中性：岩石灰阶 */
  --stone-900:#1F2A24; --stone-700:#374239; --stone-600:#4E5B52;
  --stone-500:#6B7B71; --stone-400:#93A199; --stone-300:#C2CCC4;
  --stone-200:#E2E7E3; --stone-100:#EFF2EF; --stone-50:#F7F5F0;

  /* 语义色 */
  --success:#2D6A4F; --warning:#B8730F; --danger:#C0392B;
  --info:#3A6B8A;

  /* 表面与文字 */
  --bg:var(--stone-50);
  --surface:#FFFFFF;
  --surface-alt:var(--stone-100);
  --text:var(--stone-900);
  --text-2:var(--stone-600);
  --text-3:var(--stone-500);
  --line:var(--stone-200);
  --line-soft:var(--stone-100);

  /* 圆角 */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-full:999px;

  /* 间距 8pt 网格 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;

  /* 阴影：克制、两层 */
  --sh-1:0 1px 2px rgba(31,42,36,.04), 0 2px 8px rgba(31,42,36,.04);
  --sh-2:0 2px 6px rgba(31,42,36,.05), 0 10px 24px rgba(31,42,36,.07);
  --sh-3:0 8px 20px rgba(31,42,36,.09), 0 22px 44px rgba(31,42,36,.10);
  --sh-brand:0 6px 18px rgba(45,106,79,.24);

  /* 字体 */
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --font-serif:Georgia,"Songti SC","Noto Serif SC",serif;

  /* 字号：clamp 响应式，避免断点堆叠 */
  --t-display:clamp(26px,6.4vw,38px);
  --t-h1:clamp(21px,5vw,26px);
  --t-h2:18px; --t-h3:16px;
  --t-body:15px; --t-sm:13px; --t-xs:12px; --t-2xs:11px;

  /* 动效 */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.2,0,0,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-4:480ms;

  /* 布局 */
  --page-max:480px;
  --nav-h:58px;
  --safe-b:env(safe-area-inset-bottom,0px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--t-body);
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--forest-600);outline-offset:2px;border-radius:var(--r-xs)}

/* ---------- 布局容器 ---------- */
.st-page{
  max-width:var(--page-max);
  margin:0 auto;
  min-height:100vh;
  background:var(--bg);
  position:relative;
  padding-bottom:calc(var(--nav-h) + var(--safe-b) + var(--s6));
}
.st-wrap{padding:0 var(--s4)}
.st-center-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--s6);
}

/* ---------- 顶部导航 ---------- */
.st-topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(247,245,240,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-2) var(--ease-out), background var(--dur-2);
}
.st-topbar.is-stuck{border-bottom-color:var(--line);background:rgba(247,245,240,.96)}
.st-topbar__inner{
  max-width:var(--page-max);margin:0 auto;
  height:52px;display:flex;align-items:center;gap:var(--s3);
  padding:0 var(--s4);
}
.st-brand{display:flex;align-items:center;gap:var(--s2);font-weight:700;font-size:var(--t-h3);letter-spacing:-.01em}
.st-brand__mark{
  width:30px;height:30px;border-radius:9px;
  background:linear-gradient(150deg,var(--forest-700),var(--forest-900));
  display:grid;place-items:center;font-size:15px;
  box-shadow:0 2px 8px rgba(45,106,79,.28);
}
.st-topbar__spacer{flex:1}
.st-topbar__title{font-weight:600;font-size:var(--t-h3);letter-spacing:-.01em}

/* 圆形图标按钮 */
.st-icon-btn{
  width:36px;height:36px;flex:none;border:0;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-full);display:grid;place-items:center;
  font-size:15px;color:var(--text-2);
  transition:transform var(--dur-1) var(--ease-out), background var(--dur-1), border-color var(--dur-1);
}
.st-icon-btn:hover{background:var(--forest-50);border-color:var(--forest-300)}
.st-icon-btn:active{transform:scale(.94)}

/* ---------- Hero ---------- */
.st-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(158deg,var(--forest-800) 0%,var(--forest-700) 48%,var(--forest-600) 100%);
  color:#fff;
  padding:var(--s6) var(--s5) var(--s10);
  border-radius:0 0 var(--r-xl) var(--r-xl);
  box-shadow:0 10px 30px rgba(22,53,31,.20);
}
/* 山脊纹理：用径向渐变模拟，不依赖外部图片 */
.st-hero::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background:
    radial-gradient(120% 60% at 105% -10%, rgba(240,162,104,.30), transparent 60%),
    radial-gradient(80% 50% at -10% 110%, rgba(0,0,0,.28), transparent 60%);
}
.st-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:46px;
  background:
    linear-gradient(135deg, transparent 49.5%, rgba(247,245,240,.96) 50%) left/60% 100% no-repeat,
    linear-gradient(-135deg, transparent 49.5%, rgba(247,245,240,.96) 50%) right/60% 100% no-repeat;
}
.st-hero__inner{position:relative;z-index:1}
.st-hero__eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--t-2xs);font-weight:600;letter-spacing:.08em;
  padding:5px 11px;border-radius:var(--r-full);
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);
  margin-bottom:var(--s3);
}
.st-hero__title{
  font-size:var(--t-display);font-weight:800;line-height:1.18;
  letter-spacing:-.02em;margin-bottom:var(--s2);
}
.st-hero__sub{font-size:var(--t-sm);color:rgba(255,255,255,.82);line-height:1.55;max-width:32ch}

/* ---------- 卡片 ---------- */
.st-card{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:var(--s4);
  box-shadow:var(--sh-1);
  transition:box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.st-card--flat{box-shadow:none;background:var(--surface)}
.st-card--alt{background:var(--surface-alt);box-shadow:none}
.st-card--pad-lg{padding:var(--s5)}
a.st-card:hover,button.st-card:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
a.st-card:active,button.st-card:active{transform:translateY(0) scale(.995)}

/* ---------- 按钮 ---------- */
.st-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:0 var(--s5);
  border:0;border-radius:var(--r-md);
  font-size:var(--t-body);font-weight:600;letter-spacing:-.01em;
  cursor:pointer;white-space:nowrap;
  transition:transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2), background var(--dur-2), opacity var(--dur-2);
}
.st-btn:active{transform:scale(.972)}
.st-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

.st-btn--primary{background:var(--forest-700);color:#fff;box-shadow:var(--sh-brand)}
.st-btn--primary:hover{background:var(--forest-800)}
.st-btn--accent{background:var(--sand-500);color:#fff;box-shadow:0 6px 18px rgba(224,122,63,.28)}
.st-btn--accent:hover{background:var(--sand-600)}
.st-btn--secondary{background:var(--forest-50);color:var(--forest-800);border:1px solid var(--forest-100)}
.st-btn--secondary:hover{background:var(--forest-100)}
.st-btn--ghost{background:transparent;color:var(--text-2);border:1px solid var(--line)}
.st-btn--ghost:hover{background:var(--surface-alt)}
.st-btn--danger{background:var(--danger);color:#fff}
.st-btn--block{width:100%}
.st-btn--sm{min-height:36px;padding:0 var(--s4);font-size:var(--t-sm);border-radius:var(--r-sm)}
.st-btn--lg{min-height:50px;font-size:16px;border-radius:var(--r-md)}

/* ---------- 标签 ---------- */
.st-tag{
  display:inline-flex;align-items:center;gap:4px;
  font-size:var(--t-2xs);font-weight:700;letter-spacing:.02em;
  padding:4px 9px;border-radius:var(--r-xs);
  background:var(--stone-100);color:var(--stone-600);
  white-space:nowrap;
}
.st-tag--top{background:#FDECEA;color:var(--danger)}
.st-tag--hot{background:var(--sand-100);color:var(--sand-700)}
.st-tag--brand{background:var(--forest-100);color:var(--forest-800)}
.st-tag--muted{background:var(--stone-100);color:var(--stone-500)}
.st-tag--ok{background:var(--forest-100);color:var(--forest-700)}
.st-tag--warn{background:#FBF1DC;color:var(--warning)}
.st-tag--dot::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.75}

/* ---------- 区块标题 ---------- */
.st-section{margin:var(--s6) 0 var(--s3)}
.st-section__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.st-section__title{
  font-size:var(--t-h2);font-weight:700;letter-spacing:-.015em;
  display:flex;align-items:center;gap:var(--s2);
}
.st-section__title::before{
  content:"";width:3px;height:15px;border-radius:2px;
  background:linear-gradient(180deg,var(--forest-600),var(--sand-500));
}
.st-section__more{font-size:var(--t-xs);color:var(--forest-700);font-weight:600}

/* ---------- 列表项 ---------- */
.st-list{display:flex;flex-direction:column;gap:var(--s3)}
.st-listitem{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4);background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--r-md);
  box-shadow:var(--sh-1);
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2);
}
a.st-listitem:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}

/* ---------- 表单 ---------- */
.st-field{margin-bottom:var(--s4)}
.st-field__label{
  display:block;font-size:var(--t-xs);font-weight:600;color:var(--text-2);
  margin-bottom:6px;letter-spacing:.01em;
}
.st-input,.st-select,.st-textarea{
  width:100%;min-height:46px;
  padding:11px var(--s4);
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:var(--r-md);
  font-size:var(--t-body);color:var(--text);
  transition:border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2);
  -webkit-appearance:none;appearance:none;
}
.st-textarea{min-height:96px;resize:vertical;line-height:1.6}
.st-input::placeholder,.st-textarea::placeholder{color:var(--stone-400)}
.st-input:focus,.st-select:focus,.st-textarea:focus{
  outline:none;border-color:var(--forest-600);
  box-shadow:0 0 0 3px rgba(45,106,79,.12);
}
.st-select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7B71' d='M1.4 0L6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:38px;
}
.st-row{display:flex;gap:var(--s3)}
.st-row>*{flex:1;min-width:0}
.st-hint{font-size:var(--t-xs);color:var(--text-3);margin-top:6px;line-height:1.5}

/* 勾选框 */
.st-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:var(--t-xs);line-height:1.6;color:var(--text-2)}
.st-check input{
  flex:none;width:18px;height:18px;margin-top:1px;
  accent-color:var(--forest-700);cursor:pointer;
}

/* ---------- 提示条 ---------- */
.st-alert{
  display:flex;gap:10px;align-items:flex-start;
  padding:var(--s3) var(--s4);border-radius:var(--r-md);
  font-size:var(--t-sm);line-height:1.55;margin-bottom:var(--s3);
  border:1px solid transparent;
}
.st-alert--ok{background:var(--forest-50);border-color:var(--forest-100);color:var(--forest-800)}
.st-alert--error{background:#FDECEA;border-color:#F8D7D3;color:#8E2B20}
.st-alert--warn{background:#FBF1DC;border-color:#F3E2C0;color:#7A4E0A}
.st-alert--info{background:#EAF2F7;border-color:#D6E6EF;color:#28536B}
.st-alert__icon{flex:none;font-size:15px;line-height:1.4}

/* 免责声明条 */
.st-disclaimer{
  margin:var(--s6) 0 var(--s2);
  padding:var(--s3) var(--s4);
  background:var(--surface-alt);
  border:1px solid var(--line);
  border-left:3px solid var(--sand-500);
  border-radius:var(--r-sm);
  font-size:var(--t-2xs);color:var(--text-3);line-height:1.7;
}
.st-disclaimer a{color:var(--forest-700);font-weight:700;text-decoration:underline}

/* ---------- 空状态 ---------- */
.st-empty{
  text-align:center;padding:var(--s12) var(--s5);
  color:var(--text-3);
}
.st-empty__icon{
  font-size:40px;margin-bottom:var(--s3);opacity:.6;
  filter:grayscale(.2);
}
.st-empty__title{font-size:var(--t-body);font-weight:600;color:var(--text-2);margin-bottom:6px}
.st-empty__desc{font-size:var(--t-xs);line-height:1.6}

/* ---------- 底部导航 ---------- */
.st-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding-bottom:var(--safe-b);
  pointer-events:none;
}
.st-nav__inner{
  max-width:var(--page-max);margin:0 auto;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(31,42,36,.06);
  pointer-events:auto;
}
.st-nav__item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:var(--nav-h);font-size:10px;font-weight:600;
  color:var(--stone-400);
  transition:color var(--dur-2) var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.st-nav__item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.st-nav__item.is-active{color:var(--forest-700)}
.st-nav__item.is-active svg{stroke-width:2.1}
.st-nav__item:active{opacity:.7}

/* ---------- 弹层 ---------- */
.st-modal{
  position:fixed;inset:0;z-index:80;
  display:none;align-items:flex-end;justify-content:center;
  background:rgba(22,42,31,.42);
  backdrop-filter:blur(2px);
}
.st-modal.is-open{display:flex}
.st-modal__sheet{
  width:100%;max-width:var(--page-max);
  background:var(--surface);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:var(--s3) var(--s5) calc(var(--s6) + var(--safe-b));
  box-shadow:var(--sh-3);
  animation:st-sheet-up var(--dur-3) var(--ease-out);
  max-height:88vh;overflow-y:auto;
}
@keyframes st-sheet-up{from{transform:translateY(28px);opacity:.6}to{transform:translateY(0);opacity:1}}
.st-modal__handle{width:38px;height:4px;border-radius:2px;background:var(--stone-300);margin:0 auto var(--s4)}
.st-modal__title{font-size:var(--t-h2);font-weight:700;letter-spacing:-.015em;margin-bottom:4px}
.st-modal__desc{font-size:var(--t-xs);color:var(--text-3);margin-bottom:var(--s5);line-height:1.6}

/* ---------- 数字统计 ---------- */
.st-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.st-stat{
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-md);padding:var(--s4);text-align:center;
  box-shadow:var(--sh-1);
}
.st-stat__num{font-size:22px;font-weight:800;color:var(--forest-700);letter-spacing:-.02em;line-height:1.2}
.st-stat__label{font-size:var(--t-2xs);color:var(--text-3);margin-top:2px}

/* ---------- 加载动画 ---------- */
.st-skeleton{
  background:linear-gradient(90deg,var(--stone-100) 25%,var(--stone-200) 37%,var(--stone-100) 63%);
  background-size:400% 100%;
  animation:st-shimmer 1.3s var(--ease-in-out) infinite;
  border-radius:var(--r-sm);
}
@keyframes st-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* 入场交错动画 */
.st-fade-up{animation:st-fade-up var(--dur-4) var(--ease-out) both}
@keyframes st-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.st-delay-1{animation-delay:60ms}
.st-delay-2{animation-delay:120ms}
.st-delay-3{animation-delay:180ms}
.st-delay-4{animation-delay:240ms}

/* ---------- 登录页 ---------- */
.login-shell{width:100%;max-width:360px}
.login-brand{text-align:center;margin-bottom:var(--s8)}
.login-mark{
  width:56px;height:56px;margin:0 auto var(--s4);
  border-radius:16px;display:grid;place-items:center;font-size:26px;
  background:linear-gradient(150deg,var(--forest-700),var(--forest-900));
  box-shadow:var(--sh-brand);
}
.login-brand h1{font-size:var(--t-h1);font-weight:800;letter-spacing:-.02em}
.login-brand p{font-size:var(--t-xs);color:var(--text-3);margin-top:4px}
.login-card{padding:var(--s6)}
.login-foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:var(--s5);font-size:var(--t-xs);color:var(--text-3);
}
.login-foot a{color:var(--forest-700);font-weight:600}
.login-tip{font-size:var(--t-2xs);color:var(--stone-400)}

/* ---------- 内联 SVG 默认尺寸 ---------- */
.st-btn svg,.st-icon-btn svg,.st-hint svg,.st-tag svg{
  width:17px;height:17px;flex:none;
  stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.st-btn--sm svg{width:15px;height:15px}
.st-hint svg{width:15px;height:15px;margin-top:2px}

/* ---------- 工具类 ---------- */
.st-mt-2{margin-top:var(--s2)} .st-mt-3{margin-top:var(--s3)}
.st-mt-4{margin-top:var(--s4)} .st-mt-6{margin-top:var(--s6)} .st-mt-8{margin-top:var(--s8)}
.st-mb-3{margin-bottom:var(--s3)} .st-mb-4{margin-bottom:var(--s4)}
.st-flex{display:flex} .st-between{display:flex;align-items:center;justify-content:space-between}
.st-gap-2{gap:var(--s2)} .st-gap-3{gap:var(--s3)}
.st-text-sm{font-size:var(--t-sm)} .st-text-xs{font-size:var(--t-xs)}
.st-text-2{color:var(--text-2)} .st-text-3{color:var(--text-3)}
.st-strong{font-weight:700}
.st-divider{height:1px;background:var(--line);margin:var(--s5) 0}
.st-mono{font-variant-numeric:tabular-nums}
.st-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-clamp-2{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.st-clamp-3{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.st-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- 无障碍与降级 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
@media (prefers-color-scheme:dark){
  /* 保持浅色品牌底色，仅微调表面，避免破坏户外明亮调性 */
  :root{--surface:#FFFFFF}
}