/* =========================================================
   std.雷达连接器.中国  —— 独立骨架样式（rdc- 前缀）
   深空蓝底 + 雷达青 + 预警橙 + 电光蓝
   本文件与 render.py 行为逐项对齐（见 skeleton_contract.yaml）
   ========================================================= */

:root{
  --rdc-bg:        #0A1626;   /* 近黑深空蓝 */
  --rdc-bg-2:      #0F1E33;   /* 卡片面 */
  --rdc-bg-3:      #122236;   /* 次表面 */
  --rdc-line:      #25405E;   /* 边框（清晰可见） */
  --rdc-line-soft: #1B3047;
  --rdc-text:      #E6EDF5;   /* 正文 */
  --rdc-muted:     #9FB3C8;   /* 弱化 */
  --rdc-cyan:      #1FE0C0;   /* 雷达青（主信号色） */
  --rdc-orange:    #FF8A3D;   /* 预警橙（强调） */
  --rdc-blue:      #4D8DFF;   /* 电光蓝 */
  --rdc-cyan-dim:  rgba(31,224,192,.12);
  --rdc-radius:    14px;
  --rdc-maxw:      1200px;
  --rdc-nav-h:     64px;
  /* 面包屑左缘对齐 H2 文字左缘：详情/列表 = 16px，页面卡片 = 48px */
  --h2-inset:      16px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--rdc-bg); color:var(--rdc-text);
  font-family:"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  line-height:1.75; font-size:16px; -webkit-font-smoothing:antialiased;
}
a{color:var(--rdc-cyan); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;}
h1,h2,h3,h4{line-height:1.35; font-weight:700; scroll-margin-top:90px;}
h1{font-size:30px; margin:.2em 0 .5em; color:#fff;}
h2{font-size:23px; margin:1.8em 0 .7em; padding-left:var(--h2-inset);
   border-left:4px solid var(--rdc-cyan); color:#fff;}
h3{font-size:18px; margin:1.4em 0 .5em; color:var(--rdc-cyan);}
p{margin:.7em 0;}
ul,ol{margin:.6em 0; padding-left:1.4em;}
li{margin:.35em 0;}
blockquote{
  margin:1em 0; padding:.8em 1.1em; background:var(--rdc-bg-2);
  border-left:4px solid var(--rdc-orange); border-radius:8px; color:var(--rdc-muted);
}
code{background:var(--rdc-bg-3); padding:.1em .4em; border-radius:5px; color:var(--rdc-cyan); font-size:.92em;}

/* ---------- 布局容器 ---------- */
.rdc-container{max-width:var(--rdc-maxw); margin:0 auto; padding:0 20px;}

/* 顶部固定导航 */
.rdc-nav{position:fixed; top:0; left:0; right:0; height:var(--rdc-nav-h); z-index:200;
  background:rgba(10,22,38,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rdc-line);}
.rdc-nav .rdc-container{display:flex; align-items:center; height:100%; gap:22px;}
.rdc-logo{font-weight:800; font-size:18px; color:#fff; white-space:nowrap;}
.rdc-logo b{color:var(--rdc-cyan);}
.rdc-nav-links{display:flex; gap:18px; margin-left:auto; align-items:center; flex-wrap:wrap;}
.rdc-nav-links a{color:var(--rdc-muted); font-size:14px;}
.rdc-nav-links a:hover{color:var(--rdc-cyan);}
.rdc-burger{display:none; margin-left:auto; background:none; border:1px solid var(--rdc-line);
  color:var(--rdc-text); border-radius:8px; padding:6px 10px; cursor:pointer; font-size:18px;}

/* 移动端导航弹层 */
.rdc-nav-sub{display:none; position:fixed; top:var(--rdc-nav-h); right:0; width:240px; z-index:199;
  background:var(--rdc-bg-2); border:1px solid var(--rdc-line); border-top:none;
  border-radius:0 0 0 12px; padding:10px 14px;}
.rdc-nav-sub.open{display:block;}
.rdc-nav-sub a{display:block; padding:8px 6px; color:var(--rdc-muted); border-bottom:1px solid var(--rdc-line-soft);}
.rdc-nav-sub a:hover{color:var(--rdc-cyan);}

/* 主体间距 */
.rdc-main{padding-top:calc(var(--rdc-nav-h) + 28px); padding-bottom:60px;}

/* ---------- 首页 hero ---------- */
.rdc-hero{padding:54px 0 30px; background:
   radial-gradient(900px 380px at 80% -10%, rgba(31,224,192,.16), transparent 60%),
   radial-gradient(700px 320px at 0% 0%, rgba(77,141,255,.12), transparent 55%);}
.rdc-hero h1{font-size:40px; max-width:760px;}
.rdc-hero .rdc-sub{color:var(--rdc-muted); font-size:17px; max-width:680px;}
.rdc-hero .rdc-cta{margin-top:22px; display:flex; gap:14px; flex-wrap:wrap;}
.rdc-btn{display:inline-block; padding:11px 20px; border-radius:10px; font-weight:600; font-size:15px;}
.rdc-btn.primary{background:var(--rdc-cyan); color:#04121a;}
.rdc-btn.ghost{border:1px solid var(--rdc-line); color:var(--rdc-text);}
.rdc-btn:hover{text-decoration:none; filter:brightness(1.08);}

/* 区块标题 */
.rdc-section{padding:34px 0;}
.rdc-section h2.rdc-sectitle{border:none; padding-left:0; font-size:24px; color:#fff;
  display:flex; align-items:center; gap:10px;}
.rdc-section h2.rdc-sectitle::before{content:""; width:6px; height:22px; background:var(--rdc-orange); border-radius:3px;}

/* 卡片网格 */
.rdc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px;}
.rdc-card{background:var(--rdc-bg-2); border:1px solid var(--rdc-line); border-radius:var(--rdc-radius);
  padding:18px; transition:.18s;}
.rdc-card:hover{border-color:var(--rdc-cyan); transform:translateY(-3px);}
.rdc-card h3{margin:.1em 0 .4em; font-size:17px; color:#fff;}
.rdc-card p{color:var(--rdc-muted); font-size:14px; margin:.3em 0;}
.rdc-card .rdc-tag{display:inline-block; font-size:12px; color:var(--rdc-cyan);
  background:var(--rdc-cyan-dim); border:1px solid rgba(31,224,192,.3); padding:2px 8px; border-radius:20px;}

/* 四块首页核心 */
.rdc-pillars{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px;}
.rdc-pillar{background:linear-gradient(160deg,var(--rdc-bg-2),var(--rdc-bg-3));
  border:1px solid var(--rdc-line); border-radius:var(--rdc-radius); padding:20px;}
.rdc-pillar h3{color:var(--rdc-orange);}
.rdc-pillar ul{color:var(--rdc-muted); font-size:14px;}

/* ---------- 文章 / 产品详情布局 ---------- */
.rdc-article-layout, .rdc-product-layout{
  display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:36px; align-items:start;
}
.rdc-content-main{max-width:820px;}
.rdc-content-main .rdc-summary{background:var(--rdc-bg-2); border:1px solid var(--rdc-line);
  border-left:4px solid var(--rdc-blue); border-radius:10px; padding:14px 18px; color:var(--rdc-muted); margin:0 0 18px;}
.rdc-content-main .rdc-keywords{margin:10px 0 4px; display:flex; gap:8px; flex-wrap:wrap;}
.rdc-keywords .tag-text{font-size:12px; color:var(--rdc-cyan); background:var(--rdc-cyan-dim);
  border:1px solid rgba(31,224,192,.3); padding:2px 9px; border-radius:20px;}
.rdc-content-main time{display:block; color:var(--rdc-muted); font-size:13px; margin:6px 0 10px;}

/* TOC 悬浮（sticky，禁止 fixed） */
.rdc-toc-aside{position:sticky; top:calc(var(--rdc-nav-h) + 16px); max-height:calc(100vh - 100px); overflow:auto;}
.rdc-toc-panel{background:var(--rdc-bg-2); border:1px solid var(--rdc-line); border-radius:var(--rdc-radius); padding:14px 16px;}
.rdc-toc-panel summary{cursor:pointer; font-weight:700; color:#fff; list-style:none; padding:2px 0;}
.rdc-toc-panel summary::after{content:"▾"; float:right; color:var(--rdc-cyan); transition:.2s;}
.rdc-toc-panel[open] summary::after{transform:rotate(180deg);}
.rdc-toc-panel ol{margin:.6em 0 0; padding-left:1.2em; font-size:13px;}
.rdc-toc-panel ol li{margin:.3em 0;}
.rdc-toc-panel ol a{color:var(--rdc-muted);}
.rdc-toc-panel ol a:hover{color:var(--rdc-cyan);}

/* ---------- 列表 / 分类页布局（侧栏在前） ---------- */
.rdc-list-layout{display:grid; grid-template-columns:240px minmax(0,1fr); gap:36px; align-items:start;}
.rdc-list-layout .rdc-layout-grid{grid-column:1 / -1; display:grid; grid-template-columns:240px minmax(0,1fr); gap:36px; align-items:start;}
.rdc-cat-side{position:sticky; top:calc(var(--rdc-nav-h) + 16px);}
.rdc-cat-panel{background:var(--rdc-bg-2); border:1px solid var(--rdc-line); border-radius:var(--rdc-radius); padding:12px 14px; margin-bottom:18px;}
.rdc-cat-panel summary{cursor:pointer; font-weight:700; color:#fff; list-style:none;}
.rdc-cat-panel summary::after{content:"▾"; float:right; color:var(--rdc-cyan);}
.rdc-cat-panel[open] summary::after{transform:rotate(180deg);}
ul.rdc-category-list{list-style:none; margin:.6em 0 0; padding:0;}
ul.rdc-category-list li{margin:.2em 0;}
ul.rdc-category-list a{display:block; padding:7px 10px; border-radius:8px; color:var(--rdc-muted); font-size:14px; border:1px solid transparent;}
ul.rdc-category-list a:hover, ul.rdc-category-list a.active{background:var(--rdc-cyan-dim); color:var(--rdc-cyan); border-color:rgba(31,224,192,.3);}
.rdc-cat-content h1{margin-top:0;}
.rdc-list-item{background:var(--rdc-bg-2); border:1px solid var(--rdc-line); border-radius:var(--rdc-radius); padding:16px 18px; margin-bottom:14px;}
.rdc-list-item h3{margin:.1em 0 .35em; font-size:18px; color:#fff;}
.rdc-list-item p{color:var(--rdc-muted); font-size:14px; margin:.3em 0;}
.rdc-list-item .rdc-meta{color:var(--rdc-muted); font-size:12px; margin-top:6px;}

/* ---------- 面包屑（布局容器内，左缘对齐 H2 文字左缘 = var(--h2-inset)） ---------- */
.rdc-breadcrumb{padding:0 0 6px var(--h2-inset); margin:0 0 14px; font-size:13px; color:var(--rdc-muted);}
/* 列表页面包屑在内容栏内，与 h1/h3 同左缘（清零缩进） */
.rdc-cat-content .rdc-breadcrumb{padding-left:0;}
.rdc-breadcrumb ol{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0;}
.rdc-breadcrumb li::after{content:"›"; margin-left:6px; color:var(--rdc-line);}
.rdc-breadcrumb li:last-child::after{content:"";}
.rdc-breadcrumb a{color:var(--rdc-muted);}
.rdc-breadcrumb a:hover{color:var(--rdc-cyan);}
.rdc-breadcrumb span{color:var(--rdc-text);}

/* 页面卡片（about 等），面包屑左缘 = 48px */
.rdc-page-wrap{max-width:880px; margin:0 auto; --h2-inset:0px;}
.rdc-page-wrap .rdc-breadcrumb{padding-left:0;}

/* ---------- 表格（覆盖裸 MD 表 + rdc-spec） ---------- */
.rdc-content-main table, .rdc-page-main table, table.rdc-spec{
  width:100%; border-collapse:collapse; margin:1.1em 0; font-size:14px; background:var(--rdc-bg-2);
  border:1px solid var(--rdc-line);
}
.rdc-content-main table th, .rdc-page-main table th, table.rdc-spec th{
  background:var(--rdc-blue); color:#04121a; text-align:left; padding:9px 12px; border:1px solid var(--rdc-line); font-weight:700;
}
.rdc-content-main table td, .rdc-page-main table td, table.rdc-spec td{
  padding:8px 12px; border:1px solid var(--rdc-line); color:var(--rdc-text);
}
.rdc-content-main table tr:nth-child(even) td, .rdc-page-main table tr:nth-child(even) td, table.rdc-spec tr:nth-child(even) td{
  background:rgba(255,255,255,.03);
}

/* ---------- FAQ（裸 details） ---------- */
.rdc-content-main details, .rdc-page-main details{
  border:1px solid var(--rdc-line); border-radius:10px; margin:.7em 0; background:var(--rdc-bg-2); padding:0 14px;
}
.rdc-content-main details summary, .rdc-page-main details summary{
  cursor:pointer; font-weight:600; color:#fff; padding:12px 0; list-style:none;
}
.rdc-content-main details summary::after, .rdc-page-main details summary::after{
  content:"+"; float:right; color:var(--rdc-cyan); font-size:18px;
}
.rdc-content-main details[open] summary::after, .rdc-page-main details[open] summary::after{content:"−";}
.rdc-content-main details p, .rdc-page-main details p{color:var(--rdc-muted); margin:.2em 0 .9em;}

/* 实践经验 callout */
.rdc-case{background:linear-gradient(120deg,var(--rdc-bg-3),var(--rdc-bg-2));
  border:1px solid var(--rdc-orange); border-radius:12px; padding:14px 18px; margin:1.2em 0;}
.rdc-case b{color:var(--rdc-orange);}

/* 相关阅读 / 相关产品 */
.rdc-related{margin-top:2em; border-top:1px solid var(--rdc-line); padding-top:1em;}
.rdc-related h2{border-color:var(--rdc-orange);}
.rdc-related ul{list-style:none; padding:0;}
.rdc-related li{margin:.5em 0; padding:10px 14px; background:var(--rdc-bg-2); border:1px solid var(--rdc-line); border-radius:10px;}
.rdc-related a{color:var(--rdc-cyan); font-weight:600;}
.rdc-related span{display:block; color:var(--rdc-muted); font-size:13px; margin-top:3px;}

/* ---------- 悬浮胶囊 ---------- */
.rdc-float{position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:300;
  display:flex; flex-direction:column; gap:10px;}
.rdc-float button, .rdc-float a{
  display:flex; align-items:center; gap:8px; width:130px; justify-content:flex-start;
  background:linear-gradient(135deg,var(--rdc-cyan),var(--rdc-blue)); color:#04121a;
  border:none; border-radius:30px; padding:10px 14px; font-size:13px; font-weight:600; cursor:pointer;
  box-shadow:0 6px 20px rgba(31,224,192,.25);
}
.rdc-float button:hover, .rdc-float a:hover{filter:brightness(1.06); text-decoration:none;}
.rdc-float .rdc-ico{font-size:16px;}

/* 名片弹层 */
.rdc-card-overlay{display:none; position:fixed; inset:0; background:rgba(4,12,22,.8); z-index:400;
  align-items:center; justify-content:center;}
.rdc-card-overlay.open{display:flex;}
.rdc-card-overlay img{max-width:90vw; max-height:90vh; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.5);}
.rdc-card-overlay .rdc-card-close{position:absolute; top:18px; right:24px; background:none; border:none;
  color:#fff; font-size:30px; cursor:pointer;}

/* ---------- 页脚 ---------- */
.rdc-footer{border-top:1px solid var(--rdc-line); background:var(--rdc-bg-2); padding:34px 0 26px; margin-top:40px;}
.rdc-footer .rdc-cols{display:grid; grid-template-columns:2.2fr 1fr 1fr; gap:24px;}
.rdc-footer h4{color:var(--rdc-cyan); font-size:15px; margin:.2em 0 .8em;}
.rdc-footer a{color:var(--rdc-muted); font-size:14px; display:block; margin:.3em 0;}
.rdc-footer a:hover{color:var(--rdc-cyan);}
.rdc-footer .rdc-copy{margin-top:22px; color:var(--rdc-muted); font-size:13px; border-top:1px solid var(--rdc-line-soft); padding-top:14px;}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .rdc-nav-links{display:none;}
  .rdc-burger{display:block;}
  /* 响应式折叠：分类侧栏与目录手机端默认收起（由 JS 关闭 open）；禁止 display:none 隐藏 */
  .rdc-article-layout, .rdc-product-layout{grid-template-columns:1fr;}
  .rdc-toc-aside{position:static; max-height:none; margin-top:18px;}
  .rdc-list-layout, .rdc-list-layout .rdc-layout-grid{grid-template-columns:1fr;}
  .rdc-cat-side{position:static;}
  .rdc-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:680px){
  .rdc-hero h1{font-size:30px;}
  .rdc-grid{grid-template-columns:1fr;}
  .rdc-footer .rdc-cols{grid-template-columns:1fr;}
  .rdc-float{right:10px;}
  .rdc-float button, .rdc-float a{width:108px; font-size:12px;}
}