/* ============================================================
   365网址 服务中心 — 共享外壳样式表 /assets/site.css
   骨架：左侧 232px 深墨品牌轨道 + 右侧暖纸色内容区
   ============================================================ */

/* ---------- 1. 变量 ---------- */
:root{
  --ink:#0E1626;
  --ink-2:#0B2545;
  --blue:#1D4ED8;
  --blue-bright:#4C8DFF;
  --paper:#F5F1E8;
  --card:#FCFAF5;
  --orange:#F2761B;
  --mint:#2FB08A;
  --amber:#E0B44A;
  --gray:#6B7280;
  --line:#D8D2C4;

  --rail-w:232px;
  --topbar-h:60px;
  --maxw:1280px;
  --dur:.16s;

  --font-display:"Noto Serif SC","Source Han Serif SC","Songti SC",serif;
  --font-head:"HarmonyOS Sans SC","Noto Sans SC","PingFang SC",sans-serif;
  --font-body:system-ui,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-num:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  padding-left:var(--rail-w);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
img,svg,picture,video{max-width:100%}
h1,h2,h3,h4{margin:0;font-family:var(--font-head);font-weight:700;line-height:1.3}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--blue)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px}

/* ---------- 3. 通用元素 ---------- */
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.muted{color:var(--gray)}
.lede{font-size:18px;line-height:1.8;color:#2c3648;max-width:60ch}

.shell{max-width:var(--maxw);margin:0 auto;padding:0 28px}

.section{padding:72px 0;position:relative}
.section--tight{padding:44px 0}
.section__head{margin-bottom:32px;max-width:74ch}
.section__title{font-size:26px;letter-spacing:-.01em}
.section__note{margin-top:10px;font-size:15px;color:var(--gray);line-height:1.75}

.label{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.label__no{font-size:12px;color:var(--gray)}
.label__bar{display:block;width:26px;height:2px;background:var(--blue)}
.label__text{font-size:12.5px;letter-spacing:.16em;color:var(--gray);font-family:var(--font-num)}

.rule{height:1px;background:var(--line);border:0;margin:0}
.rule--dash{height:1px;border:0;margin:0;background-image:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px)}

/* ---------- 4. 网格 ---------- */
.grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.col-3{grid-column:span 3}
.col-4{grid-column:span 4}
.col-5{grid-column:span 5}
.col-6{grid-column:span 6}
.col-7{grid-column:span 7}
.col-8{grid-column:span 8}
.col-12{grid-column:span 12}
.col--drop{margin-top:24px}
.col--drop-lg{margin-top:48px}

/* ---------- 5. 面板 / 卡片 ---------- */
.panel{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  padding:24px;
}
.panel--cut{
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  transition:clip-path var(--dur) ease,border-color var(--dur) ease;
}
.panel--cut:hover{
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  border-color:var(--blue-bright);
}
.panel--ink{background:var(--ink-2);border-color:rgba(216,210,196,.22);color:var(--paper)}
.panel__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.panel__title{font-size:17px}
.panel__note{font-size:14px;line-height:1.7;color:var(--gray)}

/* ---------- 6. 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;
  border:1px solid transparent;
  background:none;
  font-family:var(--font-head);font-size:15px;font-weight:700;line-height:1.2;
  letter-spacing:.02em;text-decoration:none;cursor:pointer;
  transition:background-color var(--dur) ease,color var(--dur) ease,border-color var(--dur) ease,transform var(--dur) ease;
}
.btn--primary{background:var(--orange);border-color:var(--orange);color:#fff}
.btn--primary:hover{background:#d9660f;border-color:#d9660f;transform:translateX(2px)}
.btn--outline{border-color:var(--blue);color:var(--blue)}
.btn--outline:hover{background:rgba(29,78,216,.08);transform:translateX(2px)}
.btn--ghost{border-color:rgba(245,241,232,.34);color:var(--paper)}
.btn--ghost:hover{border-color:var(--paper);background:rgba(245,241,232,.08);transform:translateX(2px)}

/* ---------- 7. 标签 / 状态 ---------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;
  border:1px solid var(--line);
  background:var(--card);
  font-family:var(--font-num);font-size:12px;letter-spacing:.06em;
  white-space:nowrap;
}
.tag--entry{color:var(--orange);border-color:rgba(242,118,27,.5)}
.tag--state{color:#1f7d61;border-color:rgba(47,176,138,.55);background:rgba(47,176,138,.08)}
.tag--change{color:#5b4410;border-color:var(--amber);background:rgba(224,180,74,.18)}

/* ---------- 8. 图文容器 ---------- */
.figure{display:block;margin:0}
.figure__media{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/10;
  background:var(--card);
  border:1px solid var(--line);
  overflow:hidden;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.figure__media--wide{aspect-ratio:21/9}
.figure__media--tall{aspect-ratio:3/4}
.figure__media--square{aspect-ratio:1/1}
.figure__media--contain{padding:14px}
.figure__media img,.figure__media svg,.figure__media picture{display:block;width:100%;height:100%}
.figure__media img{object-fit:cover}
.figure__media--contain img,.figure__media--contain svg{object-fit:contain}
.figure__cap{margin-top:10px;font-family:var(--font-num);font-size:12.5px;letter-spacing:.04em;color:var(--gray)}

/* ---------- 9. 正文 / 面包屑 / 折叠 ---------- */
.prose{max-width:68ch;font-size:16px;line-height:1.85}
.prose h2{margin:36px 0 12px;font-size:21px}
.prose h3{margin:26px 0 10px;font-size:17px}
.prose p{margin:0 0 16px}
.prose ul{margin:0 0 18px;padding-left:0}
.prose li{position:relative;padding-left:18px;margin-bottom:8px}
.prose li::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:1px;background:var(--blue)}
.prose a{text-decoration:none;border-bottom:1px solid rgba(29,78,216,.4)}
.prose a:hover{border-bottom-color:var(--blue)}
.prose blockquote{margin:22px 0;padding:14px 20px;border-left:2px solid var(--orange);background:rgba(242,118,27,.06);color:#33405a}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--font-num);font-size:12.5px;letter-spacing:.04em;color:var(--gray)}
.crumbs a{color:var(--blue);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{border-bottom-color:var(--blue)}
.crumbs__sep{color:var(--line)}

.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  display:flex;gap:12px;align-items:flex-start;
  padding:16px 0;cursor:pointer;list-style:none;
  font-family:var(--font-head);font-weight:700;font-size:16px;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::before{content:"+";font-family:var(--font-num);color:var(--blue);line-height:1.4}
.faq__item[open] summary::before{content:"–"}
.faq__body{padding:0 0 18px 24px;font-size:15px;line-height:1.8;color:#33405a}

/* ---------- 10. TOC ---------- */
.toc{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line);padding-left:14px}
.toc__link{
  font-size:14px;line-height:1.6;color:var(--gray);text-decoration:none;
  padding:5px 0;border-left:2px solid transparent;margin-left:-16px;padding-left:14px;
  transition:color var(--dur) ease,border-color var(--dur) ease;
}
.toc__link:hover{color:var(--blue)}
.toc__link.is-current{color:var(--ink);border-left-color:var(--orange);font-weight:700}

/* ---------- 11. 显现 / 轨迹 ---------- */
.js [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-trace] path,.js [data-trace] line,.js [data-trace] polyline{
  stroke-dasharray:800;stroke-dashoffset:800;transition:stroke-dashoffset 1.2s ease;
}
.js [data-trace].is-in path,.js [data-trace].is-in line,.js [data-trace].is-in polyline{stroke-dashoffset:0}

/* ============================================================
   12. HEADER — 品牌轨道 + 框架式导航
   ============================================================ */
.skip-link{
  position:fixed;top:10px;left:50%;z-index:200;
  transform:translate(-50%,-220%);
  padding:10px 18px;
  background:var(--blue);color:#fff;
  font-family:var(--font-head);font-size:14px;font-weight:700;
  text-decoration:none;transition:transform var(--dur) ease;
}
.skip-link:focus{transform:translate(-50%,0)}

.site-header{
  position:fixed;top:0;left:0;bottom:0;
  width:var(--rail-w);
  z-index:80;
  display:flex;flex-direction:column;
  background:var(--ink);
  color:var(--paper);
  border-right:1px solid rgba(216,210,196,.16);
}

/* 顶部条：仅移动端可见 */
.topbar{display:none}

/* 轨道内胆 */
.rail{
  display:flex;flex-direction:column;gap:20px;
  height:100%;
  padding:26px 20px 24px;
  overflow-y:auto;
  scrollbar-width:thin;
}
.rail__brand{display:block;text-decoration:none;color:var(--paper)}
.rail__mark{
  display:block;
  font-family:var(--font-display);font-weight:900;font-size:40px;line-height:1;
  letter-spacing:-.02em;color:var(--paper);
}
.rail__wordmark{
  display:block;margin-top:8px;
  font-family:var(--font-head);font-weight:700;font-size:16px;letter-spacing:.04em;
}
.rail__desc{display:block;margin-top:4px;font-size:12px;line-height:1.6;color:rgba(245,241,232,.6)}

.rail__meta{
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  padding:10px 0;
  border-top:1px dashed rgba(216,210,196,.24);
  border-bottom:1px dashed rgba(216,210,196,.24);
  font-size:12px;color:rgba(245,241,232,.7);
}
.rail__version .num{color:var(--paper)}
.rail__status{display:inline-flex;align-items:center;gap:6px;color:var(--mint)}
.rail__pulse{display:block;width:6px;height:6px;background:var(--mint);border-radius:50%}

.rail__nav{position:relative;flex:1 1 auto}
.rail__nav::before{
  content:"";position:absolute;left:7px;top:8px;bottom:8px;width:1px;
  background-image:repeating-linear-gradient(180deg,rgba(216,210,196,.3) 0 4px,transparent 4px 10px);
}
.rail__list{display:flex;flex-direction:column;gap:2px}
.rail__link{
  display:flex;align-items:baseline;gap:10px;
  padding:9px 10px 9px 20px;
  color:rgba(245,241,232,.74);
  font-size:14.5px;line-height:1.45;text-decoration:none;
  border-left:2px solid transparent;
  transition:color var(--dur) ease,background-color var(--dur) ease,border-color var(--dur) ease;
}
.rail__link:hover{color:var(--paper);background:rgba(76,141,255,.12);border-left-color:var(--orange)}
.rail__link[aria-current="page"]{color:#fff;background:var(--blue);border-left-color:var(--blue-bright)}
.rail__no{font-size:11px;color:rgba(245,241,232,.5)}
.rail__link[aria-current="page"] .rail__no{color:rgba(255,255,255,.8)}
.rail__name{font-family:var(--font-head);font-weight:700;letter-spacing:.01em}

.rail__cta{display:flex;flex-direction:column;gap:10px}
.rail__cta .btn{width:100%}
.rail__note{font-size:11.5px;line-height:1.6;color:rgba(245,241,232,.5)}

.rail__progress{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:rgba(216,210,196,.14);
}
.rail__progress-bar{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--blue-bright),var(--orange));
}

/* 返回顶部 */
.to-top{
  position:fixed;right:24px;bottom:24px;z-index:90;
  padding:10px 16px;
  background:var(--ink);color:var(--paper);
  border:1px solid rgba(216,210,196,.34);
  font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.06em;
  cursor:pointer;
  transition:border-color var(--dur) ease,color var(--dur) ease,transform var(--dur) ease;
}
.to-top:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px)}
.to-top[hidden]{display:none}

/* ============================================================
   13. FOOTER — 深墨框架底
   ============================================================ */
.site-footer{
  position:relative;
  margin-top:0;
  background:var(--ink);
  color:rgba(245,241,232,.78);
  border-top:1px solid rgba(216,210,196,.18);
}
.footer__accent{
  position:absolute;top:-1px;left:0;width:180px;height:3px;
  background:linear-gradient(90deg,var(--blue) 0 60%,var(--orange) 60% 100%);
}
.footer__inner{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(0,2.6fr);
  gap:40px 48px;
  max-width:var(--maxw);
  margin:0 auto;
  padding:64px 28px 32px;
}
.footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.footer__mark{
  font-family:var(--font-display);font-weight:900;font-size:34px;line-height:1;
  letter-spacing:-.02em;color:var(--paper);
}
.footer__name{font-family:var(--font-head);font-weight:700;font-size:17px;color:var(--paper)}
.footer__desc{font-size:13px;color:rgba(245,241,232,.62)}
.footer__ver{margin-top:6px;font-size:13px;color:rgba(245,241,232,.62)}
.footer__ver .num{color:var(--paper)}
.footer__brand .btn{margin-top:14px}

.footer__nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.footer__col{min-width:0}
.footer__title{
  margin-bottom:14px;
  font-size:13px;letter-spacing:.14em;color:var(--paper);
  padding-bottom:8px;border-bottom:1px dashed rgba(216,210,196,.24);
}
.footer__list{display:flex;flex-direction:column;gap:9px}
.footer__link{
  display:inline-block;
  font-size:14px;line-height:1.6;
  color:rgba(245,241,232,.74);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--dur) ease,border-color var(--dur) ease,padding-left var(--dur) ease;
}
.footer__link:hover{color:var(--paper);border-bottom-color:var(--orange);padding-left:2px}

.footer__contact{
  grid-column:1 / -1;
  display:grid;grid-template-columns:minmax(160px,auto) 1fr;
  gap:12px 32px;
  padding-top:24px;
  border-top:1px dashed rgba(216,210,196,.24);
}
.footer__contact-title{
  font-family:var(--font-head);font-size:13px;font-weight:700;
  letter-spacing:.12em;color:var(--paper);
}
.footer__contact-list{display:flex;flex-wrap:wrap;gap:8px 32px}
.footer__contact-item{font-size:14px;color:rgba(245,241,232,.78)}
.footer__contact-item .num{color:var(--paper)}
.footer__hours{grid-column:2 / -1;font-size:12.5px;color:rgba(245,241,232,.5)}

.footer__legal{
  max-width:var(--maxw);
  margin:0 auto;
  padding:20px 28px 28px;
  border-top:1px solid rgba(216,210,196,.14);
  display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;
}
.footer__legal-text{font-size:12.5px;line-height:1.7;color:rgba(245,241,232,.5)}
.footer__legal-text .num{color:rgba(245,241,232,.78)}

/* ============================================================
   14. 响应式
   ============================================================ */
@media (max-width:1180px){
  .footer__inner{grid-template-columns:1fr}
  .footer__contact{grid-template-columns:1fr}
  .footer__hours{grid-column:1 / -1}
}

@media (max-width:1100px){
  .grid-12{grid-template-columns:repeat(8,1fr)}
  .col-4,.col-5,.col-6{grid-column:span 4}
  .col-7,.col-8{grid-column:span 8}
}

@media (max-width:960px){
  body{padding-left:0;padding-top:var(--topbar-h)}

  .site-header{
    right:0;bottom:auto;
    width:auto;height:var(--topbar-h);
    flex-direction:row;align-items:center;justify-content:space-between;
    padding:0 16px;
    border-right:0;border-bottom:1px solid rgba(216,210,196,.18);
  }
  .topbar{
    display:flex;align-items:center;gap:12px;
    width:100%;
  }
  .topbar__brand{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--paper)}
  .topbar__mark{font-family:var(--font-display);font-weight:900;font-size:22px;line-height:1}
  .topbar__name{font-family:var(--font-head);font-weight:700;font-size:15px}
  .topbar__ver{margin-left:auto;font-size:12px;color:rgba(245,241,232,.62)}

  .nav-toggle{
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 12px;
    background:none;border:1px solid rgba(216,210,196,.34);
    color:var(--paper);cursor:pointer;
  }
  .nav-toggle__bars{position:relative;display:block;width:16px;height:2px;background:var(--paper);transition:background-color var(--dur) ease}
  .nav-toggle__bars::before,.nav-toggle__bars::after{
    content:"";position:absolute;left:0;width:16px;height:2px;background:inherit;
    transition:transform var(--dur) ease,background-color var(--dur) ease;
  }
  .nav-toggle__bars::before{top:-5px}
  .nav-toggle__bars::after{top:5px}
  .nav-toggle__label{font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.06em}
  .site-header[data-open] .nav-toggle{border-color:var(--orange)}
  .site-header[data-open] .nav-toggle__bars{background:transparent}
  .site-header[data-open] .nav-toggle__bars::before{transform:translateY(5px) rotate(45deg);background:var(--orange)}
  .site-header[data-open] .nav-toggle__bars::after{transform:translateY(-5px) rotate(-45deg);background:var(--orange)}

  .rail{
    position:fixed;top:var(--topbar-h);left:0;right:0;
    height:auto;max-height:calc(100vh - var(--topbar-h));
    padding:20px 18px 26px;
    border-bottom:1px solid rgba(216,210,196,.2);
    background:var(--ink);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity var(--dur) ease,transform var(--dur) ease,visibility var(--dur) ease;
  }
  .site-header[data-open] .rail{opacity:1;visibility:visible;transform:none}
  .rail__nav{flex:0 0 auto}
  .rail__nav::before{bottom:auto;height:calc(100% - 16px)}
  .rail__cta{flex-direction:row;flex-wrap:wrap}
  .rail__cta .btn{width:auto;flex:1 1 150px}

  .rail__progress{left:0;right:0}
  .to-top{right:14px;bottom:14px}
}

@media (max-width:720px){
  .shell{padding:0 20px}
  .grid-12{grid-template-columns:1fr;gap:18px}
  [class*="col-"]{grid-column:1 / -1}
  .col--drop,.col--drop-lg{margin-top:0}
  .section{padding:52px 0}
  .section--tight{padding:34px 0}
  .section__title{font-size:22px}
  .footer__inner{padding:44px 20px 24px;gap:32px}
  .footer__nav{grid-template-columns:1fr;gap:24px}
  .footer__legal{padding:18px 20px 24px;flex-direction:column;gap:6px}
  .panel{padding:20px}
}

/* ---------- 15. 动效降级 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js [data-reveal]{opacity:1;transform:none}
  .js [data-trace] path,.js [data-trace] line,.js [data-trace] polyline{stroke-dashoffset:0}
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}