/* 亿发登录 · 共享样式表 /assets/site.css */

/* ---------- 1. 变量 ---------- */
:root{
  --yf-ink:#0B1B33;
  --yf-night:#071223;
  --yf-cream:#F4EDE0;
  --yf-paper:#FBF7EE;
  --yf-cyan:#35E0D6;
  --yf-teal:#0E8B87;
  --yf-amber:#FF8A3D;
  --yf-amber-ink:#B4551E;
  --yf-cocoa:#1B1410;
  --yf-slate:#7C8CA3;
  --yf-magenta:#E2557B;

  --yf-rail:88px;
  --yf-top:56px;
  --yf-mobile-top:96px;
  --yf-max:1200px;
  --yf-gap:24px;

  --yf-sans:"HarmonyOS Sans SC","Source Han Sans SC","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --yf-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;

  --yf-ease:cubic-bezier(.22,.61,.36,1);
  --yf-shadow-hard:10px 10px 0 0 rgba(53,224,214,.18);
}

/* ---------- 2. 重置与中文排版 ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--yf-top) + 20px);
}

body{
  margin:0;
  min-height:100vh;
  font-family:var(--yf-sans);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
  color:var(--yf-cream);
  background-color:var(--yf-ink);
  background-image:
    radial-gradient(1100px 620px at 10% -8%, rgba(53,224,214,.16), transparent 62%),
    radial-gradient(880px 520px at 92% 4%, rgba(255,138,61,.12), transparent 66%),
    linear-gradient(180deg,#0B1B33 0%, #071223 100%);
  background-attachment:fixed;
}

h1,h2,h3,h4{ margin:0 0 .5em; font-weight:800; line-height:1.15; letter-spacing:-.01em; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0 0 1em; padding-left:1.2em; }
img,svg,video{ max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:var(--yf-cyan); }

:focus-visible{ outline:3px solid var(--yf-cyan); outline-offset:3px; }
.yf-panel :focus-visible{ outline-color:var(--yf-teal); }

.yf-sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* ---------- 3. 页面骨架 ---------- */
.yf-shell{ min-height:60vh; }
body.yf-nav-open{ overflow:hidden; }

.yf-wrap{ width:100%; max-width:var(--yf-max); margin:0 auto; padding:0 20px; }
.yf-wrap--narrow{ max-width:760px; }

.yf-section{ padding:56px 0; }
.yf-section--tight{ padding:30px 0; }
.yf-stack{ display:grid; gap:28px; }

.yf-grid{ display:grid; gap:var(--yf-gap); grid-template-columns:repeat(4,1fr); }
.yf-c-4,.yf-c-6,.yf-c-8{ grid-column:1 / -1; }

@media (min-width:768px){
  .yf-grid{ grid-template-columns:repeat(8,1fr); }
  .yf-c-4{ grid-column:span 4; }
  .yf-c-6{ grid-column:span 8; }
  .yf-c-8{ grid-column:span 8; }
}

@media (min-width:1024px){
  .yf-shell{ margin-left:var(--yf-rail); padding-top:var(--yf-top); }
  .yf-wrap{ padding:0 32px; }
  .yf-section{ padding:84px 0; }
  .yf-stack{ gap:36px; }
  .yf-grid{ grid-template-columns:repeat(12,1fr); }
  .yf-c-4{ grid-column:span 4; }
  .yf-c-6{ grid-column:span 6; }
  .yf-c-8{ grid-column:span 8; }
}

@media (max-width:1023px){
  .yf-shell{ padding-top:var(--yf-mobile-top); }
  html{ scroll-padding-top:calc(var(--yf-mobile-top) + 16px); }
}

/* ---------- 4. 排版组件 ---------- */
.yf-display{
  margin:0;
  font-size:clamp(2.75rem,8vw,8.25rem);
  font-weight:300;
  line-height:1.02;
  letter-spacing:-.02em;
}
.yf-display .yf-num{ font-size:1.15em; }

.yf-lede{
  display:block;
  margin:16px 0 0;
  font-family:var(--yf-mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--yf-cyan);
}

.yf-h2{ font-size:clamp(1.5rem,3.2vw,3rem); }
.yf-h3{ font-size:clamp(1.125rem,2vw,1.5rem); }

.yf-mono{
  font-family:var(--yf-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.yf-num{
  display:block;
  font-family:var(--yf-mono);
  font-size:clamp(2rem,5vw,4rem);
  font-weight:700;
  line-height:1;
  color:var(--yf-cyan);
}

.yf-rule{ display:block; width:56px; height:4px; margin:16px 0 0; background:var(--yf-cyan); }

.yf-tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px;
  font-family:var(--yf-mono); font-size:12px; letter-spacing:.08em;
  color:var(--yf-teal);
  border:1px solid currentColor; border-radius:2px;
  background:transparent;
}
.yf-tag--amber{ color:var(--yf-amber-ink); }
.yf-tag--magenta{ color:var(--yf-magenta); }

/* ---------- 5. 面板 ---------- */
.yf-panel{
  position:relative;
  padding:26px;
  background:var(--yf-cream);
  color:var(--yf-cocoa);
  border:2px solid var(--yf-night);
  border-radius:3px;
  box-shadow:var(--yf-shadow-hard);
}
.yf-panel--paper{ background:var(--yf-paper); }
.yf-panel--night{
  background:var(--yf-night);
  color:var(--yf-cream);
  border-color:rgba(53,224,214,.40);
  box-shadow:10px 10px 0 0 rgba(255,138,61,.16);
}
.yf-panel--amber{
  background:var(--yf-amber);
  color:var(--yf-night);
  border-color:var(--yf-night);
  box-shadow:10px 10px 0 0 rgba(11,27,51,.5);
}
.yf-panel--dots{
  background-image:radial-gradient(rgba(27,20,16,.12) 1px, transparent 1px);
  background-size:12px 12px;
}
.yf-panel--wide{ padding:34px; }
.yf-panel--narrow{ max-width:760px; }

.yf-panel__head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:10px 16px;
  margin-bottom:18px; padding-bottom:14px;
  border-bottom:2px solid rgba(27,20,16,.16);
}
.yf-panel--night .yf-panel__head{ border-bottom-color:rgba(53,224,214,.28); }
.yf-panel--amber .yf-panel__head{ border-bottom-color:rgba(11,27,51,.28); }

.yf-panel__kicker{
  margin:0;
  font-family:var(--yf-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--yf-teal);
}
.yf-panel--night .yf-panel__kicker{ color:var(--yf-cyan); }
.yf-panel--amber .yf-panel__kicker{ color:rgba(11,27,51,.72); }

.yf-panel__title{ margin:0; font-size:clamp(1.375rem,2.6vw,2.25rem); font-weight:800; letter-spacing:-.01em; }
.yf-panel__lead{ font-size:17px; line-height:1.7; margin:0 0 14px; }
.yf-panel__lead:last-child{ margin-bottom:0; }
.yf-panel__body{ font-size:16px; }
.yf-panel a{ color:var(--yf-teal); text-decoration:underline; text-underline-offset:3px; }
.yf-panel--night a{ color:var(--yf-cyan); }

/* ---------- 6. 按钮 ---------- */
.yf-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px;
  font-size:14px; font-weight:700; letter-spacing:.04em;
  text-decoration:none;
  color:var(--yf-cyan);
  background:transparent;
  border:2px solid var(--yf-cyan);
  border-radius:2px;
  box-shadow:4px 4px 0 0 rgba(53,224,214,.28);
  cursor:pointer;
  transition:transform .18s var(--yf-ease), box-shadow .18s var(--yf-ease), background-color .18s var(--yf-ease), color .18s var(--yf-ease), border-color .18s var(--yf-ease);
}
.yf-btn:hover{ transform:translateY(-2px); box-shadow:6px 6px 0 0 rgba(53,224,214,.5); }
.yf-btn--solid{ background:var(--yf-cyan); color:var(--yf-night); border-color:var(--yf-cyan); }
.yf-btn--amber{
  background:var(--yf-amber); color:var(--yf-night); border-color:var(--yf-amber);
  box-shadow:4px 4px 0 0 rgba(11,27,51,.55);
}
.yf-btn--amber:hover{ box-shadow:6px 6px 0 0 rgba(11,27,51,.7); }
.yf-btn--ghost{
  color:var(--yf-cream); border-color:rgba(244,237,224,.45); box-shadow:none;
}
.yf-btn--ghost:hover{ border-color:var(--yf-cream); box-shadow:4px 4px 0 0 rgba(244,237,224,.2); }
.yf-btn--sm{ padding:8px 12px; font-family:var(--yf-mono); font-size:12px; letter-spacing:.08em; }

/* ---------- 7. 面包屑 ---------- */
.yf-crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:0 0 18px; padding:0; list-style:none;
  font-family:var(--yf-mono); font-size:12px; letter-spacing:.08em;
  color:var(--yf-slate);
}
.yf-crumbs__item{ display:flex; align-items:center; gap:8px; }
.yf-crumbs__item + .yf-crumbs__item::before{ content:"/"; color:rgba(124,140,163,.6); }
.yf-crumbs__item a{ color:var(--yf-slate); text-decoration:none; }
.yf-crumbs__item a:hover{ color:var(--yf-cyan); }
.yf-crumbs__item[aria-current="page"]{ color:var(--yf-cyan); }

/* ---------- 8. 分段标签 ---------- */
.yf-tabs{ display:block; }
.yf-tabs__list{
  display:flex; flex-wrap:wrap; gap:8px;
  padding-bottom:12px; margin-bottom:20px;
  border-bottom:2px solid rgba(27,20,16,.18);
}
.yf-panel--night .yf-tabs__list{ border-bottom-color:rgba(53,224,214,.28); }
.yf-tabs__tab{
  padding:8px 14px;
  font-family:var(--yf-mono); font-size:13px; letter-spacing:.08em;
  color:var(--yf-cocoa);
  background:transparent;
  border:2px solid rgba(27,20,16,.25);
  border-radius:2px;
  cursor:pointer;
  transition:background-color .18s var(--yf-ease), color .18s var(--yf-ease), transform .18s var(--yf-ease), opacity .18s var(--yf-ease);
}
.yf-tabs__tab[aria-selected="true"]{ background:var(--yf-cocoa); border-color:var(--yf-cocoa); color:var(--yf-cream); }
.yf-tabs__panel[hidden]{ display:none; }
.yf-tabs__panel{ animation:yf-tab-in .18s var(--yf-ease) both; }

@keyframes yf-tab-in{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- 9. 媒体容器 ---------- */
.yf-media{
  position:relative;
  display:block; width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border:2px solid rgba(53,224,214,.35);
  border-radius:3px;
  background-color:var(--yf-night);
  background-image:
    linear-gradient(rgba(53,224,214,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,224,214,.10) 1px, transparent 1px),
    radial-gradient(620px 320px at 18% 8%, rgba(53,224,214,.20), transparent 70%),
    radial-gradient(420px 240px at 86% 84%, rgba(255,138,61,.18), transparent 70%);
  background-size:32px 32px, 32px 32px, auto, auto;
}
.yf-media img,.yf-media svg,.yf-media video,.yf-media picture{ display:block; width:100%; height:100%; object-fit:cover; }
.yf-media--wide{ aspect-ratio:21 / 9; }
.yf-media--tall{ aspect-ratio:3 / 4; }
.yf-media--square{ aspect-ratio:1 / 1; }
.yf-media__badge{
  position:absolute; top:12px; left:12px;
  padding:5px 9px;
  font-family:var(--yf-mono); font-size:11px; letter-spacing:.08em;
  color:var(--yf-night); background:var(--yf-cyan);
  border-radius:2px;
}
.yf-media__caption{
  position:absolute; left:0; right:0; bottom:0;
  margin:0; padding:10px 14px;
  font-family:var(--yf-mono); font-size:12px; letter-spacing:.06em;
  color:var(--yf-cream);
  background:linear-gradient(0deg, rgba(7,18,35,.92), rgba(7,18,35,0));
}

/* ---------- 10. 顶部索引条 ---------- */
.yf-header{ position:relative; z-index:70; }

.yf-skip{
  position:absolute; top:8px; left:-9999px; z-index:200;
  padding:12px 20px;
  font-size:14px; font-weight:700;
  color:var(--yf-night); background:var(--yf-cyan);
  text-decoration:none; border-radius:2px;
}
.yf-skip:focus{ left:12px; }

.yf-topbar{
  position:fixed; top:0; left:var(--yf-rail); right:0;
  height:var(--yf-top);
  z-index:55;
  background:rgba(7,18,35,.94);
  border-bottom:2px solid rgba(53,224,214,.28);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.yf-topbar__inner{
  display:flex; align-items:center; gap:16px;
  height:100%; max-width:1600px; margin:0 auto; padding:0 20px;
}
.yf-topbar__label{
  flex:0 0 auto;
  padding-right:16px;
  font-family:var(--yf-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--yf-slate);
  border-right:1px solid rgba(124,140,163,.35);
}
.yf-topbar__list{
  display:flex; align-items:center; gap:4px;
  margin:0; padding:0; list-style:none;
}
.yf-topbar__link{
  display:inline-flex; align-items:baseline; gap:8px;
  padding:8px 12px;
  font-size:14px; white-space:nowrap;
  color:var(--yf-cream); text-decoration:none;
  border:1px solid transparent; border-radius:2px;
  transition:color .18s var(--yf-ease), border-color .18s var(--yf-ease);
}
.yf-index{ font-family:var(--yf-mono); font-size:11px; letter-spacing:.08em; color:rgba(53,224,214,.75); }
.yf-topbar__link:hover{ color:var(--yf-paper); border-color:var(--yf-cyan); }
.yf-topbar__link:hover .yf-index{ color:var(--yf-cyan); }
.yf-topbar__cta{ margin-left:auto; }

.yf-progress{ position:absolute; left:0; right:0; bottom:-2px; height:2px; overflow:hidden; }
.yf-progress i{
  display:block; width:100%; height:100%;
  transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg,var(--yf-teal),var(--yf-cyan));
}

.yf-mobile-lede{ display:none; }
.yf-burger{ display:none; }
.yf-burger__bar{ display:block; width:20px; height:2px; background:var(--yf-cream); transition:transform .2s var(--yf-ease), opacity .2s var(--yf-ease); }

.yf-scrim{
  position:fixed; inset:0; z-index:58;
  background:rgba(7,18,35,.72);
  opacity:0; pointer-events:none;
  transition:opacity .2s var(--yf-ease);
}
.yf-scrim[data-open]{ opacity:1; pointer-events:auto; }

/* ---------- 11. 左侧轨道导航 ---------- */
.yf-rail{
  position:fixed; top:0; left:0;
  width:var(--yf-rail); height:100vh; height:100dvh;
  display:flex; flex-direction:column; align-items:center;
  gap:20px;
  padding:14px 0 18px;
  background:var(--yf-night);
  border-right:2px solid rgba(53,224,214,.28);
  overflow-y:auto;
  z-index:60;
}
.yf-rail__brand{
  flex:0 0 auto;
  writing-mode:vertical-rl;
  padding:14px 8px;
  font-size:18px; font-weight:800; letter-spacing:.16em;
  color:var(--yf-night); background:var(--yf-cyan);
  text-decoration:none; border-radius:2px;
  box-shadow:4px 4px 0 0 rgba(255,138,61,.55);
}
.yf-rail__nav{ flex:1 1 auto; min-height:0; }
.yf-rail__list{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin:0; padding:0; list-style:none;
}
.yf-rail__link{
  display:block;
  writing-mode:vertical-rl;
  padding:12px 6px;
  font-size:14px; letter-spacing:.18em;
  color:var(--yf-slate); text-decoration:none;
  border:1px solid transparent; border-radius:2px;
  transition:color .18s var(--yf-ease), border-color .18s var(--yf-ease), background-color .18s var(--yf-ease);
}
.yf-rail__link:hover{ color:var(--yf-cream); border-color:rgba(53,224,214,.55); }
.yf-rail__link[aria-current="page"]{
  color:var(--yf-night); background:var(--yf-cyan);
  border-color:var(--yf-cyan); font-weight:700;
}
.yf-rail__foot{
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:62%; padding-top:14px;
  border-top:1px solid rgba(124,140,163,.28);
}
.yf-rail__num{ font-family:var(--yf-mono); font-size:10px; letter-spacing:.08em; color:var(--yf-slate); }
.yf-rail__cta{
  writing-mode:vertical-rl;
  font-size:12px; letter-spacing:.18em; font-weight:700;
  color:var(--yf-amber); text-decoration:none;
}
.yf-rail__cta:hover{ color:var(--yf-cream); }

/* ---------- 12. 页脚 ---------- */
.yf-footer{
  margin-top:56px;
  background:var(--yf-night);
  border-top:2px solid rgba(53,224,214,.3);
  color:var(--yf-cream);
}
.yf-footer__inner{
  display:grid; gap:36px;
  max-width:var(--yf-max); margin:0 auto;
  padding:52px 20px 28px;
}
.yf-footer__brand{ display:grid; gap:14px; align-content:start; justify-items:start; }
.yf-footer__mark{
  margin:0;
  font-size:clamp(1.5rem,3vw,2.25rem); font-weight:800; letter-spacing:-.01em;
  color:var(--yf-paper);
}
.yf-footer__tag{
  margin:0;
  font-family:var(--yf-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--yf-cyan);
}
.yf-footer__cols{ display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.yf-footer__col-title{
  margin:0 0 14px;
  font-family:var(--yf-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--yf-cyan);
}
.yf-footer__links{ display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.yf-footer__link{
  font-size:15px; color:var(--yf-cream); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .18s var(--yf-ease), border-color .18s var(--yf-ease);
}
.yf-footer__link:hover{ color:var(--yf-cyan); border-bottom-color:var(--yf-cyan); }
.yf-footer__contact{ display:grid; gap:16px; align-content:start; justify-items:start; }

.yf-contact{ display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.yf-contact__row{
  display:grid; gap:4px;
  padding-bottom:12px;
  border-bottom:1px dashed rgba(124,140,163,.35);
}
.yf-contact__label{ font-family:var(--yf-mono); font-size:11px; letter-spacing:.1em; color:var(--yf-slate); }
.yf-contact__value{ font-size:15px; color:var(--yf-cream); word-break:break-word; }

.yf-copy{
  justify-self:start;
  min-width:64px; padding:5px 10px;
  font-family:var(--yf-mono); font-size:11px; letter-spacing:.08em;
  color:var(--yf-cyan); background:transparent;
  border:1px solid rgba(53,224,214,.55); border-radius:2px;
  cursor:pointer;
  transition:background-color .18s var(--yf-ease), color .18s var(--yf-ease);
}
.yf-copy:hover{ background:var(--yf-cyan); color:var(--yf-night); }

.yf-footer__note{
  margin:0;
  max-width:34em;
  font-size:13px; line-height:1.7; color:var(--yf-slate);
}
.yf-footer__legal{
  display:flex; flex-wrap:wrap; gap:6px 24px; align-items:center; justify-content:space-between;
  max-width:var(--yf-max); margin:0 auto;
  padding:18px 20px 26px;
  border-top:1px solid rgba(124,140,163,.28);
  font-family:var(--yf-mono); font-size:12px; letter-spacing:.08em;
  color:var(--yf-slate);
}
.yf-footer__legal p{ margin:0; }
.yf-footer__icp{ color:var(--yf-cream); }
.yf-footer__copyright span[data-year]{ color:var(--yf-cyan); }

@media (min-width:768px){
  .yf-footer__inner{ grid-template-columns:1.1fr 1.6fr; }
  .yf-footer__contact{ grid-column:1 / -1; }
}
@media (min-width:1024px){
  .yf-footer{ margin-top:96px; margin-left:var(--yf-rail); }
  .yf-footer__inner{ grid-template-columns:1.1fr 1.5fr 1fr; padding:64px 32px 32px; }
  .yf-footer__contact{ grid-column:auto; }
  .yf-footer__legal{ padding:18px 32px 30px; }
}

/* ---------- 13. 移动端断点 ---------- */
@media (max-width:1023px){
  .yf-topbar{ left:0; height:auto; }
  .yf-topbar__inner{ flex-wrap:wrap; gap:0; padding:0; align-items:stretch; }

  .yf-mobile-lede{
    display:flex; order:1; flex:1 1 auto; align-items:center;
    height:44px; padding:0 16px;
    border-bottom:1px solid rgba(124,140,163,.25);
  }
  .yf-mobile-lede__brand{
    font-size:16px; font-weight:800; letter-spacing:.06em;
    color:var(--yf-paper); text-decoration:none;
    padding-left:10px; border-left:4px solid var(--yf-cyan);
  }

  .yf-burger{
    display:inline-flex; order:2; position:relative; z-index:70;
    flex-direction:column; align-items:center; justify-content:center; gap:5px;
    width:52px; height:44px;
    background:rgba(7,18,35,.6);
    border:0; border-left:1px solid rgba(124,140,163,.3); border-bottom:1px solid rgba(124,140,163,.25);
    cursor:pointer;
  }
  .yf-burger[aria-expanded="true"] .yf-burger__bar:nth-child(2){ transform:translateY(7px) rotate(45deg); }
  .yf-burger[aria-expanded="true"] .yf-burger__bar:nth-child(3){ opacity:0; }
  .yf-burger[aria-expanded="true"] .yf-burger__bar:nth-child(4){ transform:translateY(-7px) rotate(-45deg); }

  .yf-topbar__label,.yf-topbar__cta{ display:none; }

  .yf-topbar__list{
    order:3; flex:0 0 100%;
    height:48px; padding:0 8px;
    gap:8px;
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none;
    border-top:1px solid rgba(53,224,214,.18);
  }
  .yf-topbar__list::-webkit-scrollbar{ display:none; }
  .yf-topbar__link{
    flex:0 0 auto;
    padding:6px 10px;
    font-size:13px;
    background:rgba(53,224,214,.06);
  }

  .yf-rail{
    width:min(320px,84vw);
    align-items:stretch; gap:0; padding:0;
    border-right:2px solid var(--yf-cyan);
    box-shadow:12px 0 0 0 rgba(255,138,61,.22);
    transform:translateX(-104%);
    transition:transform .28s var(--yf-ease);
  }
  .yf-rail[data-open]{ transform:translateX(0); }

  .yf-rail__brand{
    writing-mode:horizontal-tb;
    display:block; padding:16px 20px;
    font-size:18px; letter-spacing:.1em;
    border-radius:0; box-shadow:none;
  }
  .yf-rail__nav{ flex:1 1 auto; overflow-y:auto; padding:8px 0; }
  .yf-rail__list{ align-items:stretch; gap:0; }
  .yf-rail__link{
    writing-mode:horizontal-tb;
    padding:15px 20px;
    font-size:17px; letter-spacing:.04em;
    border:0; border-bottom:1px solid rgba(124,140,163,.22);
    border-radius:0;
  }
  .yf-rail__link[aria-current="page"]{
    background:rgba(53,224,214,.14);
    color:var(--yf-cyan);
    box-shadow:inset 4px 0 0 var(--yf-cyan);
    font-weight:700;
  }
  .yf-rail__foot{
    width:100%; align-items:flex-start; gap:10px;
    padding:16px 20px 22px;
    border-top:1px solid rgba(124,140,163,.28);
  }
  .yf-rail__num{ font-size:11px; }
  .yf-rail__cta{
    writing-mode:horizontal-tb;
    display:block; width:100%;
    padding:11px 16px;
    text-align:center; font-size:14px;
    color:var(--yf-night); background:var(--yf-amber);
    border-radius:2px;
  }
  .yf-rail__cta:hover{ color:var(--yf-night); }
}

@media (min-width:1024px){
  .yf-scrim{ display:none; }
}

/* ---------- 14. 进入视口浮现 ---------- */
.yf-js [data-reveal]{
  opacity:0; transform:translateY(12px);
  transition:opacity .32s var(--yf-ease), transform .32s var(--yf-ease);
}
.yf-js [data-reveal].is-in{ opacity:1; transform:none; }

/* ---------- 15. 动效可访问性 ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .yf-js [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .yf-tabs__panel{ animation:none !important; }
  .yf-btn:hover{ transform:none; }
  .yf-rail{ transition:none; }
  .yf-scrim{ transition:none; }
  .yf-burger__bar{ transition:none; }
  .yf-progress i{ transition:none; }
}