/* =========================================================
   博狗网入口 · 共享样式 /assets/site.css
   设计语言：规则手册 × 实时数字看板
   ========================================================= */

/* ---------- 1. 变量 ---------- */
:root{
  --ink:#0B1B2B;
  --ink-2:#122A44;
  --ink-3:#0E2338;
  --ink-4:#15304C;
  --amber:#FF9A1F;
  --amber-deep:#E86A17;
  --steel:#8FA6B8;
  --mist:#D7E0E8;
  --cyan:#2BE8D0;
  --paper:#F5F8FA;
  --alert:#FF5A5F;
  --grad-deep:linear-gradient(135deg,#0B1B2B 0%,#12385A 100%);
  --line:rgba(143,166,184,.24);
  --line-strong:rgba(143,166,184,.46);
  --grid-line:rgba(143,166,184,.07);
  --pill:999px;
  --shell:1240px;
  --t:160ms;
  --ease:ease-out;
  --font-title:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-body:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------- 2. 重置与基础 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  min-height:100%;
  background-color:var(--ink);
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:72px 72px,72px 72px;
  color:var(--mist);
  font-family:var(--font-body);
  font-size:clamp(16px,0.5vw + 14px,18px);
  font-weight:400;
  line-height:1.78;
  letter-spacing:.01em;
}
img,svg,video{max-width:100%;display:block;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--amber);color:var(--ink)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
[hidden]{display:none !important}

/* ---------- 3. 中文排版与容器 ---------- */
h1,h2,h3,h4,h5{font-family:var(--font-title);font-weight:800;color:var(--paper);line-height:1.2;margin:0 0 .6em;letter-spacing:.005em}
h1{font-size:clamp(2.5rem,6vw,5.5rem);line-height:1.06;letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,2.8vw,2.3rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.42rem)}
h4{font-size:1.05rem}
p{margin:0 0 1em}
ul,ol{margin:0}
strong{color:var(--paper);font-weight:700}
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:clamp(16px,3.2vw,28px)}
.section{padding-block:clamp(40px,6vw,88px)}
.section--tight{padding-block:clamp(22px,3.2vw,42px)}
.rule{height:1px;border:0;margin:0;background:var(--line)}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;color:var(--amber);text-transform:uppercase}
.eyebrow::before{content:"";flex:0 0 auto;width:22px;height:1px;background:var(--amber)}
.title--page{font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.16}
.lede{margin:0 0 1.2em;max-width:64ch;font-size:clamp(1.02rem,1.5vw,1.22rem);color:var(--mist)}

/* 12 列非对称网格 */
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.col-main{grid-column:span 7}
.col-aside{grid-column:span 3}
.col-wide{grid-column:span 9}
.col-full{grid-column:1/-1}

/* ---------- 4. 基础组件 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.15rem;border:1px solid transparent;border-radius:2px;
  font-family:var(--font-title);font-size:.95rem;font-weight:700;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;
  transition:background-color var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease);
}
.btn--pill{border-radius:var(--pill)}
.btn--primary{background:var(--amber);border-color:var(--amber);color:#12203A}
.btn--primary:hover{background:var(--amber-deep);border-color:var(--amber-deep);color:var(--ink);transform:translateY(-1px)}
.btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--mist)}
.btn--ghost:hover{border-color:var(--amber);color:var(--paper);background:rgba(255,154,31,.10)}

.card{
  position:relative;display:block;padding:clamp(18px,2.2vw,26px);
  background:var(--ink-2);border:1px solid var(--line);border-radius:2px;
  color:inherit;text-decoration:none;
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),background-color var(--t) var(--ease);
}
.card:hover,.card:focus-within{transform:translateY(-2px);border-color:var(--amber);background-color:var(--ink-4)}
.card__title{margin:0 0 .4rem;font-family:var(--font-title);font-size:1.1rem;font-weight:700;color:var(--paper)}
.card__note{margin:0;color:var(--steel);font-size:.94rem;line-height:1.7}
.panel{background:rgba(18,42,68,.55);border:1px solid var(--line);border-radius:2px;padding:clamp(16px,2vw,24px)}
.tag{
  display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .55rem;
  border:1px solid var(--line-strong);border-radius:2px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:var(--steel);
}
.tag--amber{border-color:rgba(255,154,31,.7);color:var(--amber)}
.tag--cyan{border-color:rgba(43,232,208,.6);color:var(--cyan)}
.num{display:block;font-family:var(--font-mono);font-weight:700;font-size:clamp(2rem,4.2vw,3.4rem);line-height:1;color:var(--amber);letter-spacing:-.02em}
.num--ghost{color:transparent;-webkit-text-stroke:1px var(--line-strong)}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0 0 1rem;padding:0;list-style:none;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;color:var(--steel)}
.breadcrumb li{display:flex;align-items:center;gap:.4rem}
.breadcrumb li + li::before{content:"/";color:var(--line-strong)}
.breadcrumb a{color:var(--steel);text-decoration:none;transition:color var(--t) var(--ease)}
.breadcrumb a:hover{color:var(--amber)}
.breadcrumb [aria-current="page"]{color:var(--paper)}

.prose{max-width:72ch;font-size:1.02rem}
.prose h2{margin:2em 0 .6em;font-size:clamp(1.35rem,2.4vw,1.9rem)}
.prose h3{margin:1.6em 0 .5em}
.prose p{margin:0 0 1.15em}
.prose a{color:var(--amber);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--amber-deep)}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.15em}
.prose li{margin-bottom:.5em}
.prose code{font-family:var(--font-mono);font-size:.88em;padding:.1em .4em;border:1px solid var(--line);background:rgba(143,166,184,.12)}
.prose blockquote{margin:1.5em 0;padding:.2em 0 .2em 1.1em;border-left:2px solid var(--amber);color:var(--steel)}

/* 图片容器（页面阶段放置真实图片） */
.media-frame{position:relative;overflow:hidden;background:var(--ink-3);border:1px solid var(--line);border-radius:2px}
.media-frame img{width:100%;height:100%;object-fit:cover}
.media-frame--16x9{aspect-ratio:16/9}
.media-frame--4x3{aspect-ratio:4/3}
.media-frame--1x1{aspect-ratio:1/1}
.media-frame--tall{aspect-ratio:3/4}
.media-frame__img--mono{filter:grayscale(.88) contrast(1.08)}
.media-frame__badge{position:absolute;left:0;top:0;padding:.3rem .6rem;background:var(--amber);color:#0B1B2B;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em}
.media-frame__caption{margin:0;padding:.7rem .9rem;border-top:1px solid var(--line);background:rgba(11,27,43,.72);color:var(--steel);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em}
.media-grid{display:grid;gap:clamp(12px,2vw,22px);grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* ---------- 5. 跳转链接 ---------- */
.skip-link{
  position:absolute;left:clamp(12px,2vw,24px);top:-72px;z-index:120;
  padding:.6rem 1rem;border-radius:2px;background:var(--amber);color:#0B1B2B;
  font-family:var(--font-title);font-weight:700;text-decoration:none;
  transition:top var(--t) var(--ease);
}
.skip-link:focus{top:14px}

/* ---------- 6. 头部：悬浮胶囊导航 ---------- */
.site-header{position:sticky;top:0;z-index:80;padding:12px clamp(10px,2.6vw,26px) 16px}
.site-header::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,27,43,.98) 0%,rgba(11,27,43,.86) 58%,rgba(11,27,43,0) 100%);
}
.site-header__grid{
  position:relative;z-index:1;display:flex;align-items:center;gap:clamp(8px,1.4vw,20px);
  max-width:var(--shell);margin-inline:auto;padding:8px 10px 8px 14px;
  background:rgba(18,42,68,.86);border:1px solid var(--line-strong);border-radius:var(--pill);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.site-header__brand{flex:0 0 auto;display:flex;align-items:center}

.brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--paper);text-decoration:none}
.brand__mark{position:relative;flex:0 0 auto;width:26px;height:26px;border:1px solid var(--amber)}
.brand__mark::before{content:"";position:absolute;left:6px;top:6px;width:12px;height:12px;background:var(--amber)}
.brand__mark::after{content:"";position:absolute;right:-3px;bottom:-3px;width:6px;height:6px;background:var(--cyan)}
.brand__text{display:flex;flex-direction:column;line-height:1.15}
.brand__name{font-family:var(--font-title);font-size:1.02rem;font-weight:800;letter-spacing:.04em}
.brand__tagline{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.18em;color:var(--steel)}

.nav-pill{position:relative;margin-left:auto}
.nav-pill__list{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.nav-pill__item{display:block}
.nav-pill__link{
  display:block;padding:.5rem .8rem;border-radius:var(--pill);
  color:var(--mist);font-size:.94rem;font-weight:500;line-height:1.4;
  text-decoration:none;white-space:nowrap;
  transition:background-color var(--t) var(--ease),color var(--t) var(--ease);
}
.nav-pill__link:hover{background:rgba(215,224,232,.12);color:var(--paper)}
.nav-pill__link[aria-current="page"]{background:var(--amber);color:#0B1B2B;font-weight:700}
.nav-pill__link[aria-current="page"]:hover{background:var(--amber-deep);color:var(--ink)}

.site-header__actions{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
.site-header__cta{white-space:nowrap}

.nav-toggle{
  display:none;align-items:center;gap:.5rem;padding:.55rem .85rem;
  background:transparent;border:1px solid var(--line-strong);border-radius:var(--pill);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;color:var(--mist);cursor:pointer;
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease);
}
.nav-toggle:hover{border-color:var(--amber);color:var(--paper)}
.nav-toggle__bars{position:relative;display:block;flex:0 0 auto;width:16px;height:8px}
.nav-toggle__bars::before,.nav-toggle__bars::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;transition:transform var(--t) var(--ease)}
.nav-toggle__bars::before{top:0}
.nav-toggle__bars::after{bottom:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{transform:translateY(3px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{transform:translateY(-3px) rotate(-45deg)}
.nav-toggle__label{white-space:nowrap}

.scroll-meter{position:absolute;left:22px;right:22px;bottom:5px;height:2px;border-radius:var(--pill);background:rgba(215,224,232,.12);overflow:hidden;pointer-events:none}
.scroll-meter__bar{display:block;width:100%;height:100%;background:var(--amber);transform:scaleX(0);transform-origin:left center}

/* ---------- 7. 页脚 ---------- */
.site-footer{
  position:relative;margin-top:clamp(48px,7vw,110px);
  background:linear-gradient(180deg,rgba(8,19,31,0) 0%,rgba(8,19,31,.86) 20%,#08131F 100%);
  border-top:1px solid var(--line-strong);
}
.site-footer::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:8px;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(255,154,31,.85) 0 1px,transparent 1px 24px);
}
.site-footer__inner{max-width:var(--shell);margin-inline:auto;padding:clamp(34px,5vw,72px) clamp(16px,3.2vw,28px) clamp(20px,3vw,32px)}

.footer-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.9fr);gap:clamp(26px,4vw,64px)}
.footer-brand{min-width:0}
.footer-brand .brand{margin-bottom:1.1rem}
.footer-brand__line{margin:0 0 1.4rem;max-width:38ch;color:var(--steel);font-size:.95rem;line-height:1.8}

.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.contact-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.93rem;line-height:1.6}
.contact-row__key{flex:0 0 auto;padding:.1rem .4rem;border:1px solid var(--line);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;color:var(--steel)}
.contact-row__value{color:var(--paper);overflow-wrap:anywhere}

.copy-btn{
  display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .5rem;
  background:transparent;border:1px solid var(--line-strong);border-radius:2px;
  color:var(--steel);font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;cursor:pointer;
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease),background-color var(--t) var(--ease);
}
.copy-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.copy-btn[data-copied="true"]{border-color:var(--cyan);color:var(--cyan);background:rgba(43,232,208,.12)}
.copy-btn[data-copied="false"]{border-color:var(--alert);color:var(--alert);background:rgba(255,90,95,.12)}

.footer-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px)}
.footer-col{min-width:0}
.footer-col__title{display:flex;align-items:center;gap:.55rem;margin:0 0 1rem;font-family:var(--font-title);font-size:.98rem;font-weight:700;letter-spacing:.06em;color:var(--paper)}
.footer-col__title::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
.footer-col__index{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;color:var(--amber)}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.footer-links a{display:inline-block;color:var(--steel);font-size:.95rem;text-decoration:none;border-bottom:1px solid transparent;transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.footer-links a:hover{color:var(--amber);border-bottom-color:var(--amber)}

.footer-bottom{
  margin-top:clamp(30px,4vw,60px);padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem clamp(1rem,3vw,2.4rem);
}
.footer-note{flex:1 1 340px;margin:0;max-width:62ch;color:var(--steel);font-size:.82rem;line-height:1.75}
.footer-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;margin-left:auto}
.footer-legal{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.05em;color:var(--mist)}
.footer-copy{font-size:.8rem;color:var(--steel)}

.to-top{
  position:fixed;right:clamp(12px,2.4vw,28px);bottom:clamp(12px,2.4vw,28px);z-index:70;
  display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .85rem;
  background:rgba(18,42,68,.94);border:1px solid var(--line-strong);border-radius:2px;
  color:var(--mist);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;cursor:pointer;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease);
}
.to-top::before{content:"↑";font-size:.95em;color:var(--amber)}
.to-top:hover{border-color:var(--amber);color:var(--paper)}
.to-top[data-visible="false"]{opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none}

/* ---------- 8. 动效与显现 ---------- */
[data-reveal]{transition:opacity 120ms var(--ease),transform 120ms var(--ease)}
html.js-reveal [data-reveal]{opacity:0;transform:translateY(4px)}
html.js-reveal [data-reveal].is-in{opacity:1;transform:none}
@keyframes navIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- 9. 响应式 ---------- */
@media (max-width:1080px){
  .site-header__grid{flex-wrap:wrap}
  .nav-pill{flex:1 1 100%;order:3;margin-left:0}
  .nav-pill__list{flex-wrap:wrap}
  html.js-nav .nav-toggle{display:inline-flex}
  html.js-nav .nav-pill{
    position:absolute;top:calc(100% + 10px);left:0;right:0;display:none;
    padding:10px;background:var(--ink-3);border:1px solid var(--line-strong);border-radius:2px;
    box-shadow:0 18px 44px rgba(4,12,20,.6);
  }
  html.js-nav .nav-pill[data-open="true"]{display:block;animation:navIn var(--t) var(--ease) both}
  html.js-nav .nav-pill__list{flex-direction:column;align-items:stretch;gap:2px}
  html.js-nav .nav-pill__link{padding:.75rem .9rem;border-radius:2px;font-size:1rem}
  html.js-nav .nav-pill__link[aria-current="page"]{color:#0B1B2B}
}
@media (max-width:900px){
  .footer-top{grid-template-columns:1fr}
}
@media (max-width:760px){
  .site-header{padding:10px 10px 14px}
  .site-header__grid{padding:7px 8px 7px 12px;gap:8px}
  .brand__mark{width:22px;height:22px}
  .brand__mark::before{left:5px;top:5px;width:10px;height:10px}
  .brand__name{font-size:.98rem}
  .brand__tagline{display:none}
  .site-header__cta{padding:.6rem .85rem;font-size:.86rem}
  .scroll-meter{left:16px;right:16px;bottom:4px}
  .grid-12{grid-template-columns:repeat(6,minmax(0,1fr))}
  .col-main,.col-aside,.col-wide{grid-column:1/-1}
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-meta{margin-left:0}
}
@media (max-width:520px){
  .nav-toggle{padding:.55rem .65rem}
  .nav-toggle__label{display:none}
  .site-header__cta{padding:.55rem .7rem;font-size:.82rem}
  .footer-cols{grid-template-columns:1fr}
  .contact-row__value{font-size:.9rem}
}

/* ---------- 10. 可访问性偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html.js-reveal [data-reveal]{opacity:1;transform:none}
  .card:hover,.card:focus-within{transform:none}
  .btn--primary:hover{transform:none}
}