/* ============================================================
   大发指南 · 共享样式 /assets/site.css
   夜间控制面板：深墨蓝网格底 + 夜蓝分层 + 朱砂/鎏金/薄荷青状态色
   ============================================================ */

/* ---------- 0. 变量 ---------- */
:root{
  --df-ink:#0A1120;
  --df-ink-deep:#070C16;
  --df-panel:#121C30;
  --df-line:#22304A;
  --df-red:#E04A3F;
  --df-red-deep:#A8302A;
  --df-gold:#E9B85C;
  --df-gold-soft:#F6DCA0;
  --df-mint:#4FD6C4;
  --df-white:#F2F5FA;
  --df-muted:#9AA8BF;
  --df-paper:#F4F1EA;
  --df-font-head:"Arial Narrow","Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --df-font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",system-ui,sans-serif;
  --df-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  --df-w:1200px;
  --df-pad:20px;
  --df-ease:cubic-bezier(.22,.72,.28,1);
}

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,h5,p,ul,ol,li,figure,blockquote,dl,dd,hr{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
:focus{outline:none}
:focus-visible{outline:2px solid var(--df-mint);outline-offset:2px}
::selection{background:var(--df-red);color:#fff}

/* ---------- 2. 基础排版 ---------- */
body{
  background-color:var(--df-ink);
  background-image:
    linear-gradient(to right,rgba(34,48,74,.45) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(34,48,74,.45) 1px,transparent 1px);
  background-size:72px 72px;
  color:var(--df-white);
  font-family:var(--df-font-body);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
  min-height:100vh;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--df-font-head);font-weight:800;line-height:1.14;letter-spacing:-.02em;color:var(--df-white)}
h1{font-size:clamp(40px,7.4vw,104px);font-weight:900;letter-spacing:-.03em}
h2{font-size:clamp(26px,4.4vw,42px)}
h3{font-size:clamp(19px,2.4vw,24px)}
h4{font-size:17px}
p{max-width:40em}
strong{color:var(--df-white)}
.df-mono{font-family:var(--df-font-mono);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.df-skip{
  position:absolute;left:10px;top:-70px;z-index:300;
  padding:10px 18px;background:var(--df-gold);color:var(--df-ink);
  font-size:14px;letter-spacing:.06em;transition:top .2s var(--df-ease);
}
.df-skip:focus{top:10px}

/* ---------- 3. 容器与骨架 ---------- */
.df-container{width:100%;max-width:var(--df-w);margin:0 auto;padding:0 var(--df-pad)}
.df-main{display:block}
.df-main:focus{outline:none}
#main-content{scroll-margin-top:110px}
.df-section{padding:clamp(36px,6vw,72px) 0;border-top:1px solid var(--df-line);scroll-margin-top:110px}
.df-section:first-of-type{border-top:0}
.df-section__head{max-width:46rem;margin-bottom:26px}
.df-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--df-font-mono);font-size:12px;letter-spacing:.2em;
  color:var(--df-gold);margin-bottom:12px;
}
.df-eyebrow::before{content:"";width:20px;height:2px;background:var(--df-red)}
.df-title{font-size:clamp(26px,4.4vw,42px)}
.df-lede{margin-top:14px;font-size:16.5px;color:var(--df-muted);max-width:40em}
.df-note{
  margin:22px 0;padding:15px 20px;background:rgba(18,28,48,.72);
  border-left:2px solid var(--df-gold-soft);color:var(--df-white);font-size:15.5px;
}
.df-paper{background:var(--df-paper);color:#16202f;padding:24px;border:1px solid #ded7c9}
.df-paper h2,.df-paper h3,.df-paper h4,.df-paper strong{color:#0A1120}
.df-paper p{color:#3a4356}
.df-stack{display:flex;flex-direction:column;gap:14px}
.df-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.df-grid{display:grid;gap:16px}
.df-grid--2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.df-grid--3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.df-grid--4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

/* ---------- 4. 头部 ---------- */
.df-header{
  position:sticky;top:0;z-index:60;
  background:rgba(10,17,32,.94);
  border-bottom:1px solid var(--df-line);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.df-header__inner{position:relative;display:block}
.df-header__top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.df-brand{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto}
.df-brand__mark{position:relative;flex:0 0 auto;width:26px;height:26px;border:1px solid var(--df-gold)}
.df-brand__mark::before{content:"";position:absolute;left:6px;right:6px;top:6px;height:2px;background:var(--df-mint)}
.df-brand__mark::after{content:"";position:absolute;left:6px;bottom:6px;width:8px;height:8px;background:var(--df-red)}
.df-brand__text{display:flex;flex-direction:column;line-height:1.2}
.df-brand__name{font-family:var(--df-font-head);font-size:20px;font-weight:900;letter-spacing:.03em}
.df-brand__line{font-family:var(--df-font-mono);font-size:11px;letter-spacing:.14em;color:var(--df-muted)}
.df-nav{display:flex;align-items:center;gap:4px}
.df-nav__list{display:flex;align-items:center;gap:2px}
.df-nav__link{
  position:relative;display:block;padding:10px 12px;font-size:15px;color:var(--df-muted);
  border:1px solid transparent;
  transition:color .2s var(--df-ease),background-color .2s var(--df-ease);
}
.df-nav__link:hover{color:var(--df-white);background:rgba(18,28,48,.92)}
.df-nav__link[aria-current="page"]{color:var(--df-white)}
.df-nav__link[aria-current="page"]::after{
  content:"";position:absolute;left:12px;right:12px;bottom:5px;height:2px;background:var(--df-gold);
}
.df-cta{
  display:inline-flex;align-items:center;gap:9px;margin-left:12px;
  padding:9px 16px;background:var(--df-red);border:1px solid var(--df-red-deep);
  color:#fff;font-size:14px;letter-spacing:.08em;white-space:nowrap;
  transition:background-color .2s var(--df-ease),transform .15s var(--df-ease);
}
.df-cta::after{content:"";width:6px;height:6px;background:var(--df-gold-soft);transform:rotate(45deg)}
.df-cta:hover{background:var(--df-red-deep)}
.df-cta:active{transform:translateY(1px)}
.df-nav-toggle{
  display:none;align-items:center;gap:9px;
  padding:8px 13px;background:var(--df-panel);border:1px solid var(--df-line);
  color:var(--df-white);font-family:var(--df-font-mono);font-size:13px;letter-spacing:.12em;
}
.df-nav-toggle__bars{position:relative;width:16px;height:10px;border-top:2px solid var(--df-mint);border-bottom:2px solid var(--df-mint)}
.df-nav-toggle__bars::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;
  background:var(--df-mint);transition:opacity .2s var(--df-ease);
}
.df-header[data-open] .df-nav-toggle__bars::after{opacity:0}
.df-status{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  padding:7px 0;border-top:1px solid var(--df-line);
  font-size:12px;color:var(--df-muted);max-width:none;
}
.df-status__dot{
  flex:0 0 auto;width:7px;height:7px;background:var(--df-mint);
  animation:df-pulse 2.6s var(--df-ease) infinite;
}
.df-status__text{color:var(--df-white)}
.df-status__time{color:var(--df-muted);font-size:11.5px}
@keyframes df-pulse{
  0%{box-shadow:0 0 0 0 rgba(79,214,196,.55)}
  70%{box-shadow:0 0 0 8px rgba(79,214,196,0)}
  100%{box-shadow:0 0 0 0 rgba(79,214,196,0)}
}
.df-progress{
  position:absolute;left:0;bottom:-1px;z-index:2;
  width:100%;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--df-red),var(--df-gold));
  transform:scaleX(0);transform-origin:0 50%;
}

/* ---------- 5. 页脚 ---------- */
.df-footer{background:var(--df-ink-deep);border-top:1px solid var(--df-line);margin-top:72px}
.df-footer .df-container{padding-top:48px;padding-bottom:26px}
.df-footer__grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:28px;
  padding-bottom:34px;border-bottom:1px solid var(--df-line);
}
.df-footer__brand{font-family:var(--df-font-head);font-size:24px;font-weight:900;letter-spacing:.03em;color:var(--df-white)}
.df-footer__desc{margin-top:10px;font-size:13.5px;line-height:1.7;color:var(--df-muted);max-width:30ch}
.df-footer__badge{
  display:inline-block;margin-top:14px;padding:3px 9px;
  border:1px solid rgba(233,184,92,.35);color:var(--df-gold-soft);font-size:11px;letter-spacing:.12em;
}
.df-footer__title{
  margin-bottom:12px;font-family:var(--df-font-mono);font-size:12px;
  font-weight:400;letter-spacing:.18em;color:var(--df-gold);
}
.df-footer__list{display:flex;flex-direction:column;gap:8px;font-size:14px}
.df-footer__link{color:var(--df-muted);transition:color .2s var(--df-ease)}
.df-footer__link:hover{color:var(--df-white)}
.df-footer__note{margin-top:12px;font-size:12px;line-height:1.7;color:var(--df-muted);max-width:32ch}
.df-copy{
  display:inline-block;padding:0 0 2px;text-align:left;
  font-family:var(--df-font-mono);font-size:13px;color:var(--df-muted);
  border-bottom:1px dashed var(--df-line);
  transition:color .2s var(--df-ease),border-color .2s var(--df-ease);
}
.df-copy:hover{color:var(--df-mint);border-bottom-color:var(--df-mint)}
.df-footer__meta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 22px;
  padding-top:18px;font-family:var(--df-font-mono);font-size:12px;color:var(--df-muted);
}
.df-footer__legal,.df-footer__hours,.df-footer__copy{max-width:none;line-height:1.7}
.df-footer__legal{color:var(--df-muted)}
.df-footer__hours{color:var(--df-gold-soft)}

/* ---------- 6. 通用组件 ---------- */
.df-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 22px;background:var(--df-panel);border:1px solid var(--df-line);
  color:var(--df-white);font-size:15px;letter-spacing:.04em;
  transition:background-color .2s var(--df-ease),border-color .2s var(--df-ease),color .2s var(--df-ease),transform .15s var(--df-ease);
}
.df-btn:hover{border-color:var(--df-mint);color:var(--df-mint)}
.df-btn:active{transform:translateY(1px)}
.df-btn--primary{background:var(--df-red);border-color:var(--df-red-deep);color:#fff}
.df-btn--primary:hover{background:var(--df-red-deep);border-color:var(--df-red-deep);color:#fff}
.df-btn--gold{background:transparent;border-color:rgba(233,184,92,.45);color:var(--df-gold-soft)}
.df-btn--gold:hover{background:rgba(233,184,92,.1);border-color:var(--df-gold);color:var(--df-gold-soft)}
.df-btn--ghost{background:transparent}

.df-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  padding-top:18px;font-family:var(--df-font-mono);font-size:12px;letter-spacing:.06em;color:var(--df-muted);
}
.df-crumbs li{display:inline-flex;align-items:center;gap:9px}
.df-crumbs li+li::before{content:"/";color:var(--df-line)}
.df-crumbs a{transition:color .2s var(--df-ease)}
.df-crumbs a:hover{color:var(--df-mint)}
.df-crumbs [aria-current="page"]{color:var(--df-gold-soft)}

.df-panel{position:relative;background:var(--df-panel);border:1px solid var(--df-line);padding:20px}
.df-panel--accent{border-left:2px solid var(--df-red)}
.df-panel--gold{border-left:2px solid var(--df-gold)}
.df-panel__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--df-line);
}
.df-panel__head h3{font-size:18px}
.df-panel__body{font-size:15px;color:var(--df-muted)}

.df-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border:1px solid var(--df-line);background:rgba(10,17,32,.5);
  font-family:var(--df-font-mono);font-size:11.5px;letter-spacing:.1em;color:var(--df-muted);
}
.df-chip--mint{color:var(--df-mint);border-color:rgba(79,214,196,.4)}
.df-chip--gold{color:var(--df-gold-soft);border-color:rgba(233,184,92,.4)}
.df-chip--red{color:#FFD8D4;border-color:rgba(224,74,63,.5);background:rgba(224,74,63,.12)}
.df-chip--solid{background:var(--df-mint);border-color:var(--df-mint);color:#06231F}

.df-table{width:100%;font-size:14.5px;border:1px solid var(--df-line)}
.df-table th,.df-table td{padding:10px 12px;border-bottom:1px solid var(--df-line);text-align:left;vertical-align:top}
.df-table th{
  font-family:var(--df-font-mono);font-size:12px;font-weight:400;letter-spacing:.14em;
  color:var(--df-gold);background:rgba(18,28,48,.7);
}
.df-table tr:last-child td{border-bottom:0}

.df-media{
  position:relative;overflow:hidden;border:1px solid var(--df-line);
  background:linear-gradient(145deg,#16233C 0%,#0D1526 58%,#0A1120 100%);
}
.df-media::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(34,48,74,.6) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,48,74,.6) 1px,transparent 1px);
  background-size:28px 28px;opacity:.7;
}
.df-media::after{content:"";position:absolute;left:0;top:0;width:34px;height:2px;background:var(--df-mint)}
.df-media img,.df-media svg{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.df-media--wide{aspect-ratio:16/9}
.df-media--square{aspect-ratio:1/1}
.df-media--tall{aspect-ratio:3/4}
.df-media--slice{aspect-ratio:2/5;max-width:220px}
.df-media--auto{min-height:180px}
.df-media__label{
  position:absolute;left:0;bottom:0;z-index:2;padding:6px 10px;
  background:rgba(10,17,32,.84);border-top:1px solid var(--df-line);border-right:1px solid var(--df-line);
  font-family:var(--df-font-mono);font-size:11px;letter-spacing:.14em;color:var(--df-muted);
}

.df-rail{position:relative}
.df-rail__track{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--df-line) transparent;
}
.df-rail__track::-webkit-scrollbar{height:6px}
.df-rail__track::-webkit-scrollbar-thumb{background:var(--df-line)}
.df-rail__item{flex:0 0 82%;max-width:340px;scroll-snap-align:start}
.df-rail__nav{display:flex;gap:8px;margin-top:8px}
.df-rail__btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;background:var(--df-panel);border:1px solid var(--df-line);
  color:var(--df-muted);font-family:var(--df-font-mono);font-size:15px;
  transition:border-color .2s var(--df-ease),color .2s var(--df-ease);
}
.df-rail__btn:hover:not([disabled]){border-color:var(--df-mint);color:var(--df-mint)}
.df-rail__btn[disabled]{opacity:.35;cursor:not-allowed}

.df-tabs{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--df-line);padding-bottom:2px}
.df-tab{
  padding:10px 16px;font-family:var(--df-font-mono);font-size:13px;letter-spacing:.08em;
  color:var(--df-muted);border-bottom:2px solid transparent;white-space:nowrap;
  transition:color .2s var(--df-ease),border-color .2s var(--df-ease),background-color .2s var(--df-ease);
}
.df-tab:hover{color:var(--df-white)}
.df-tab[aria-selected="true"]{color:var(--df-white);background:rgba(18,28,48,.85);border-bottom-color:var(--df-gold)}
.df-tabpanel{padding-top:20px}
.df-tabpanel[hidden]{display:none}

.df-fold{border:1px solid var(--df-line);background:var(--df-panel)}
.df-fold+.df-fold{margin-top:10px}
.df-fold>summary{
  display:flex;align-items:center;gap:11px;padding:14px 16px;
  font-size:15.5px;color:var(--df-white);cursor:pointer;list-style:none;
}
.df-fold>summary::-webkit-details-marker{display:none}
.df-fold>summary::before{
  content:"";flex:0 0 auto;width:8px;height:8px;
  border-right:2px solid var(--df-mint);border-bottom:2px solid var(--df-mint);
  transform:rotate(-45deg);transition:transform .2s var(--df-ease);
}
.df-fold[open]>summary::before{transform:rotate(45deg)}
.df-fold__body{padding:0 16px 16px;font-size:15px;color:var(--df-muted)}

.df-toast{
  position:fixed;left:50%;bottom:28px;z-index:320;
  padding:10px 18px;background:var(--df-panel);border:1px solid var(--df-mint);
  color:var(--df-white);font-family:var(--df-font-mono);font-size:13px;letter-spacing:.06em;
  opacity:0;transform:translate(-50%,14px);pointer-events:none;
  transition:opacity .24s var(--df-ease),transform .24s var(--df-ease);
}
.df-toast[data-show]{opacity:1;transform:translate(-50%,0)}

/* ---------- 7. 动效 ---------- */
.df-js [data-reveal]{opacity:0;transform:translateY(12px)}
.df-js [data-reveal]{
  transition:opacity .42s var(--df-ease),transform .42s var(--df-ease);
}
.df-js [data-reveal].is-visible{opacity:1;transform:none}

/* ---------- 8. 响应式 ---------- */
@media (max-width:1120px) and (min-width:981px){
  .df-nav__link{padding:10px 8px;font-size:14px}
  .df-cta{margin-left:8px;padding:8px 13px;font-size:13px}
  .df-brand__line{display:none}
}
@media (max-width:980px){
  .df-nav-toggle{display:inline-flex}
  .df-nav{
    position:absolute;left:0;right:0;top:100%;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    background:var(--df-panel);border-top:1px solid var(--df-line);border-bottom:1px solid var(--df-line);
    max-height:calc(100vh - 130px);overflow-y:auto;padding:6px 0 14px;
  }
  .df-header[data-open] .df-nav{display:flex}
  .df-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .df-nav__link{
    padding:13px var(--df-pad);font-size:16px;
    border-left:3px solid transparent;border-right:0;border-top:0;border-bottom:0;
  }
  .df-nav__link:hover{background:rgba(10,17,32,.65)}
  .df-nav__link[aria-current="page"]::after{display:none}
  .df-nav__link[aria-current="page"]{
    border-left-color:var(--df-gold);background:rgba(233,184,92,.07);
  }
  .df-cta{margin:12px var(--df-pad) 0;justify-content:center}
  .df-footer__grid{grid-template-columns:1fr 1fr;gap:24px}
  .df-footer__col--brand{grid-column:1/-1}
}
@media (max-width:700px){
  .df-rail__item{flex-basis:84%}
  .df-section{padding:36px 0}
}
@media (max-width:560px){
  :root{--df-pad:16px}
  .df-footer__grid{grid-template-columns:1fr}
  .df-footer__meta{flex-direction:column;align-items:flex-start}
  .df-grid--2,.df-grid--3,.df-grid--4{grid-template-columns:1fr}
}

/* ---------- 9. 可访问性偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    transition-delay:0ms!important;
  }
  .df-js [data-reveal]{opacity:1!important;transform:none!important}
  .df-status__dot{animation:none;box-shadow:0 0 0 3px rgba(79,214,196,.22)}
  .df-progress{transition:none}
}
