/* =========================================================================
   hsd.fakra.中国 —— 独立设计系统（hsd- 前缀，禁止与他站复用）
   主题：深空蓝底 + 电光紫 + 数据青，高速差分信号流视觉
   ========================================================================= */
:root{
  --bg:#070B16;
  --bg-2:#0B1222;
  --surface:#0F1626;
  --surface-2:#141E33;
  --line:#243049;
  --line-soft:#1A2336;
  --text:#E6ECF7;
  --text-dim:#9AA8C2;
  --text-mute:#6B7A98;
  --primary:#6C4DF6;      /* 电光紫 */
  --primary-2:#8B6CFF;
  --accent:#1FD9C4;       /* 数据青 */
  --accent-2:#37E8D2;
  --warn:#F5A623;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 14px 40px rgba(0,0,0,.45);
  --shadow-soft:0 6px 20px rgba(0,0,0,.30);
  --maxw:1200px;
  --nav-h:64px;
  --h2-inset:16px;        /* 面包屑/H2 左缘对齐基准（详情/列表页） */
  --font:"Segoe UI",-apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);line-height:1.75;font-size:16px;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1200px 600px at 80% -10%,rgba(108,77,246,.18),transparent 60%),
    radial-gradient(900px 500px at -10% 10%,rgba(31,217,196,.12),transparent 55%);
  background-attachment:fixed;
}
a{color:var(--accent);text-decoration:none;transition:color .2s;}
a:hover{color:var(--accent-2);}
img{max-width:100%;display:block;}
h1,h2,h3,h4,h5,h6{line-height:1.3;color:#fff;font-weight:700;margin:1.4em 0 .6em;}
h1{font-size:2rem;letter-spacing:-.5px;}
h2{font-size:1.5rem;margin-top:2em;border-left:4px solid var(--primary);padding-left:.6em;}
h3{font-size:1.2rem;color:var(--primary-2);}
h4{font-size:1.05rem;color:var(--accent);}
p{margin:.7em 0;}
code{font-family:var(--mono);background:var(--surface-2);padding:.1em .4em;border-radius:6px;font-size:.92em;color:var(--accent-2);}
hr{border:none;border-top:1px solid var(--line);margin:2em 0;}

/* ---------- 容器 ---------- */
.hsd-container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.hsd-page-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ---------- 顶部固定导航 ---------- */
.hsd-nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:60;
  background:rgba(7,11,22,.82);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
/* 内容居中：与页面容器同宽，两侧留白一致 */
.hsd-nav-inner{
  max-width:var(--maxw);margin:0 auto;height:var(--nav-h);
  display:flex;align-items:center;gap:18px;padding:0 24px;position:relative;
}
.hsd-brand{display:flex;align-items:center;gap:10px;font-weight:800;color:#fff;letter-spacing:.3px;}
.hsd-brand .hsd-dot{width:12px;height:12px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 0 14px var(--primary);}
.hsd-brand small{color:var(--text-dim);font-weight:500;font-size:12px;}
.hsd-nav-links{display:flex;align-items:center;gap:6px;margin-left:auto;}
.hsd-nav-links a{
  color:var(--text-dim);padding:8px 12px;border-radius:9px;font-size:14px;font-weight:600;
}
.hsd-nav-links a:hover,.hsd-nav-links a.active{color:#fff;background:var(--surface-2);}
.hsd-nav-toggle{display:none;margin-left:auto;background:var(--surface-2);border:1px solid var(--line);
  color:#fff;border-radius:9px;width:42px;height:40px;cursor:pointer;font-size:18px;}
.hsd-nav-sub{position:absolute;top:var(--nav-h);right:24px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:10px;min-width:200px;display:none;box-shadow:var(--shadow);}
.hsd-nav-sub.open{display:block;}
.hsd-nav-sub a{display:block;padding:8px 12px;border-radius:8px;color:var(--text-dim);font-size:14px;}
.hsd-nav-sub a:hover{background:var(--surface-2);color:#fff;}

/* ---------- 面包屑（左缘与 H2 严格对齐） ---------- */
.hsd-breadcrumb{padding-left:var(--h2-inset);margin:calc(var(--nav-h) + 18px) 0 10px;
  font-size:13px;color:var(--text-mute);}
.hsd-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;}
.hsd-breadcrumb li{display:flex;align-items:center;gap:6px;}
.hsd-breadcrumb li+li::before{content:"›";color:var(--text-mute);}
.hsd-breadcrumb a{color:var(--text-dim);}
.hsd-breadcrumb a:hover{color:var(--accent);}
.hsd-breadcrumb .sep{color:var(--text-mute);}

/* ---------- 布局栅格 ---------- */
.hsd-layout-grid{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:36px;
  max-width:var(--maxw);margin:0 auto;padding:0 24px 60px;align-items:start;}
.hsd-list-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:32px;
  max-width:var(--maxw);margin:0 auto;padding:0 24px 60px;align-items:start;}
/* M27：列表页侧栏在前，列序 240px minmax(0,1fr) */

.hsd-content-main{padding-left:var(--h2-inset);min-width:0;}
.hsd-page-main{padding-left:48px;min-width:0;}
.hsd-page-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 40px;box-shadow:var(--shadow-soft);}

/* ---------- 详情页目录（右侧 sticky） ---------- */
.hsd-toc-aside{position:sticky;top:calc(var(--nav-h) + 18px);align-self:start;
  max-height:calc(100vh - 100px);overflow:auto;}
.hsd-toc-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;}
.hsd-toc-panel summary{cursor:pointer;font-weight:700;color:#fff;list-style:none;padding:4px 0;}
.hsd-toc-panel summary::-webkit-details-marker{display:none;}
.hsd-toc-panel summary::after{content:"▾";float:right;color:var(--text-dim);transition:transform .2s;}
.hsd-toc-panel[open] summary::after{transform:rotate(180deg);}
.hsd-toc-panel ol{list-style:none;margin:10px 0 0;padding:0;counter-reset:toc;}
.hsd-toc-panel li{margin:2px 0;}
.hsd-toc-panel a{display:block;color:var(--text-dim);font-size:13.5px;padding:5px 8px;border-radius:7px;}
.hsd-toc-panel a:hover{background:var(--surface-2);color:var(--accent);}
.hsd-toc-panel ol ol a{padding-left:20px;font-size:12.5px;}

/* ---------- 列表页分类侧栏（原生 details） ---------- */
.hsd-cat-side{align-self:start;position:sticky;top:calc(var(--nav-h) + 18px);}
.hsd-cat-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;}
.hsd-cat-panel summary{cursor:pointer;font-weight:700;color:#fff;list-style:none;padding:6px 0;}
.hsd-cat-panel summary::-webkit-details-marker{display:none;}
.hsd-cat-panel summary::after{content:"▾";float:right;color:var(--text-dim);transition:transform .2s;}
.hsd-cat-panel[open] summary::after{transform:rotate(180deg);}
ul.hsd-category-list{list-style:none;margin:8px 0 0;padding:0;}
ul.hsd-category-list li{margin:1px 0;}
ul.hsd-category-list a{display:block;padding:9px 12px;border-radius:9px;color:var(--text-dim);
  font-size:14.5px;font-weight:600;border:1px solid transparent;}
ul.hsd-category-list a:hover,ul.hsd-category-list a.active{background:var(--surface-2);color:#fff;
  border-color:var(--line);}
.hsd-cat-content{min-width:0;}

/* ---------- 卡片网格 ---------- */
.hsd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;}
.hsd-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;transition:transform .2s,border-color .2s,box-shadow .2s;display:flex;flex-direction:column;}
.hsd-card:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:var(--shadow);}
.hsd-card h3{margin:.2em 0 .4em;font-size:1.12rem;}
.hsd-card h3 a{color:#fff;}
.hsd-card p{color:var(--text-dim);font-size:14px;flex:1;}
.hsd-card .hsd-meta{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.hsd-card .hsd-cat-tag{font-size:12px;color:var(--accent);background:rgba(31,217,196,.1);
  border:1px solid rgba(31,217,196,.3);padding:2px 9px;border-radius:20px;}
.hsd-card .hsd-date{font-size:12px;color:var(--text-mute);margin-left:auto;}

/* ---------- 表格（覆盖全部正文 table，含 Markdown 裸 table） ---------- */
.hsd-content-main table,.hsd-page-main table,table.hsd-spec{
  width:100%;border-collapse:collapse;margin:1.2em 0;font-size:14px;
  border:1px solid #cbd5e1;background:var(--surface);border-radius:10px;overflow:hidden;}
.hsd-content-main table th,.hsd-page-main table th,table.hsd-spec th{
  background:linear-gradient(135deg,var(--primary),#4a32c9);color:#fff;text-align:left;
  padding:10px 14px;font-weight:700;border:1px solid #cbd5e1;}
.hsd-content-main table td,.hsd-page-main table td,table.hsd-spec td{
  padding:9px 14px;border:1px solid #cbd5e1;color:var(--text);}
.hsd-content-main table tbody tr:nth-child(even),.hsd-page-main table tbody tr:nth-child(even),
table.hsd-spec tbody tr:nth-child(even){background:rgba(255,255,255,.03);}

/* ---------- 引用 / 结论块 ---------- */
.hsd-content-main blockquote,.hsd-page-main blockquote{
  border-left:4px solid var(--accent);background:rgba(31,217,196,.06);
  padding:12px 18px;margin:1.2em 0;border-radius:0 10px 10px 0;color:var(--text);}
.hsd-content-main blockquote p,.hsd-page-main blockquote p{margin:.3em 0;}
.hsd-callout{border:1px solid rgba(108,77,246,.4);background:rgba(108,77,246,.08);
  border-radius:12px;padding:14px 18px;margin:1.4em 0;}
.hsd-callout .hsd-callout-label{color:var(--primary-2);font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:.06em;}

/* ---------- 列表 ---------- */
.hsd-content-main ul,.hsd-page-main ul,.hsd-content-main ol,.hsd-page-main ol{
  padding-left:1.4em;margin:.6em 0;}
.hsd-content-main li,.hsd-page-main li{margin:.35em 0;}

/* ---------- 标签 ---------- */
.tag-text{display:inline-block;background:var(--surface-2);border:1px solid var(--line);
  color:var(--text-dim);font-size:12px;padding:2px 10px;border-radius:20px;margin:0 4px 4px 0;}

/* ---------- FAQ（裸 details） ---------- */
.hsd-content-main details,.hsd-page-main details{
  border:1px solid var(--line);border-radius:11px;margin:10px 0;background:var(--surface);overflow:hidden;}
.hsd-content-main details summary,.hsd-page-main details summary{
  cursor:pointer;padding:13px 18px;font-weight:600;color:#fff;list-style:none;
  display:flex;justify-content:space-between;align-items:center;}
.hsd-content-main details summary::-webkit-details-marker,.hsd-page-main details summary::-webkit-details-marker{display:none;}
.hsd-content-main details summary::after,.hsd-page-main details summary::after{
  content:"+";color:var(--accent);font-size:20px;transition:transform .2s;}
.hsd-content-main details[open] summary::after,.hsd-page-main details[open] summary::after{transform:rotate(45deg);}
.hsd-content-main details[open] summary,.hsd-page-main details[open] summary{border-bottom:1px solid var(--line);}
.hsd-content-main details p,.hsd-page-main details p{padding:0 18px 14px;color:var(--text-dim);}
.hsd-faq-title{font-size:1.2rem;color:var(--primary-2);margin-top:2.4em;}

/* ---------- 相关阅读 / 相关产品 ---------- */
.hsd-related{margin-top:2.4em;border-top:1px solid var(--line);padding-top:18px;}
.hsd-related h2{border-left:none;padding-left:0;}
.hsd-related ul{list-style:none;padding:0;display:grid;gap:10px;}
.hsd-related li{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:12px 16px;}
.hsd-related a{font-weight:600;color:#fff;}
.hsd-related span{display:block;color:var(--text-dim);font-size:13.5px;margin-top:3px;}

/* ---------- 悬浮工具胶囊 ---------- */
.hsd-float{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;gap:10px;}
.hsd-float button,.hsd-float a{
  width:54px;height:54px;border-radius:27px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;box-shadow:0 8px 24px rgba(108,77,246,.5);
  text-decoration:none;transition:transform .18s;}
.hsd-float button:hover,.hsd-float a:hover{transform:scale(1.08);color:#fff;}
.hsd-float .hsd-ico{font-size:18px;line-height:1;margin-bottom:2px;}

/* 名片弹层 */
.hsd-card-overlay{position:fixed;inset:0;z-index:90;background:rgba(3,6,14,.72);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);}
.hsd-card-overlay[hidden]{display:none;}
.hsd-card-overlay img{max-height:90vh;width:auto;border-radius:12px;box-shadow:var(--shadow);}
.hsd-card-close{position:absolute;top:24px;right:28px;background:var(--surface);
  border:1px solid var(--line);color:#fff;width:44px;height:44px;border-radius:50%;
  font-size:20px;cursor:pointer;}

/* ---------- 首页 Hero ---------- */
.hsd-hero{padding:calc(var(--nav-h) + 70px) 24px 60px;max-width:var(--maxw);margin:0 auto;}
.hsd-hero .hsd-kicker{color:var(--accent);font-weight:700;letter-spacing:.12em;font-size:13px;text-transform:uppercase;}
.hsd-hero h1{font-size:3rem;line-height:1.1;margin:.3em 0;
  background:linear-gradient(120deg,#fff,var(--primary-2) 50%,var(--accent));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.hsd-hero p{color:var(--text-dim);font-size:18px;max-width:760px;}
.hsd-hero .hsd-cta{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap;}
.hsd-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:30px;
  font-weight:700;font-size:15px;border:1px solid transparent;cursor:pointer;}
.hsd-btn-primary{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;}
.hsd-btn-ghost{background:transparent;border-color:var(--line);color:#fff;}
.hsd-btn:hover{transform:translateY(-2px);}

.hsd-section{max-width:var(--maxw);margin:0 auto;padding:40px 24px;}
.hsd-section h2{border-left:none;padding-left:0;}
.hsd-section-head{margin-bottom:22px;}
.hsd-section-head .hsd-kicker{color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;}
.hsd-section-head p{color:var(--text-dim);max-width:680px;}

.hsd-pill-row{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0;}
.hsd-pill{background:var(--surface);border:1px solid var(--line);border-radius:30px;
  padding:8px 16px;font-size:14px;color:var(--text);}
.hsd-pill b{color:var(--accent);}

.hsd-stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-top:10px;}
.hsd-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;}
.hsd-stat .n{font-size:2rem;font-weight:800;color:var(--primary-2);}
.hsd-stat .l{color:var(--text-dim);font-size:13.5px;margin-top:4px;}

/* ---------- 分类说明（列表/分类页头部） ---------- */
.hsd-cat-head{margin-bottom:24px;}
.hsd-cat-head h1{margin-top:0;}
.hsd-cat-head p{color:var(--text-dim);}

/* ---------- 页脚 ---------- */
.hsd-footer{background:var(--bg-2);border-top:1px solid var(--line);margin-top:40px;
  padding:40px 24px;color:var(--text-dim);font-size:14px;}
.hsd-footer .hsd-container{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;}
.hsd-footer a{color:var(--text-dim);}
.hsd-footer a:hover{color:var(--accent);}
.hsd-footer .hsd-fcols{display:flex;gap:48px;flex-wrap:wrap;}
.hsd-footer h4{color:#fff;font-size:14px;margin:0 0 10px;}
.hsd-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:6px;}

/* ---------- 分页 ---------- */
.hsd-pager{display:flex;gap:10px;margin-top:24px;}
.hsd-pager a,.hsd-pager span{padding:8px 14px;border-radius:9px;background:var(--surface);
  border:1px solid var(--line);color:var(--text-dim);font-size:14px;}
.hsd-pager .current{color:#fff;background:var(--surface-2);border-color:var(--primary);}

/* ---------- 404 / 归档 ---------- */
.hsd-archive-list{display:grid;gap:10px;}
.hsd-archive-item{display:flex;justify-content:space-between;gap:14px;padding:12px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;}
.hsd-archive-item a{color:#fff;font-weight:600;}
.hsd-archive-item .d{color:var(--text-mute);font-size:13px;white-space:nowrap;}

/* ---------- 响应式（断点 1024，与 responsive_folding 一致） ---------- */
@media (max-width:1024px){
  :root{--h2-inset:12px;}
  .hsd-nav-links{display:none;}
  .hsd-nav-toggle{display:block;}
  .hsd-layout-grid{grid-template-columns:1fr;gap:18px;}
  .hsd-list-layout{grid-template-columns:1fr;gap:18px;}
  .hsd-toc-aside{position:static;max-height:none;order:2;}
  .hsd-cat-side{position:static;order:0;}
  /* 折叠面板在手机端已收起，禁止 display:none 隐藏入口 */
  .hsd-hero h1{font-size:2.1rem;}
  .hsd-content-main,.hsd-page-main{padding-left:12px;}
  .hsd-page-card{padding:24px 18px;}
}
@media (max-width:600px){
  .hsd-grid{grid-template-columns:1fr;}
  .hsd-float{right:10px;gap:8px;}
  .hsd-float button,.hsd-float a{width:48px;height:48px;}
}