/* ═══════════════════════════════════════════════════════════════════
   ElecSimHub — 外壳（shell）
   用途：把 Hub 首页的顶栏 / 页脚统一包到 Configurator / Builder /
         Deliverables 等应用页上。
   原则：① 类名一律 hub- 前缀，不给应用页留全局样式，零污染；
         ② 色值直接取自 Hub 首页 site.css（ElecSimHub 设计系统）；
         ③ 只做顶栏 + 页脚 + 布局让位，不碰应用内部布局。
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --hub-bg: #0A1220; --hub-bg2: #0B1424; --hub-card: #0D1726;
  --hub-fg: #EEF3F8; --hub-muted: #9CB0C2; --hub-dim: #64788C;
  --hub-primary: #FFC933; --hub-blue: #5AA0F2; --hub-green: #4CD4A0; --hub-red: #F0645F;
  --hub-border: rgba(255,255,255,.09); --hub-border2: rgba(255,255,255,.16);
  --hub-barH: 64px;
  --hub-sans: 'Inter','Noto Sans SC','PingFang SC','Microsoft YaHei',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --hub-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
}

/* ── 顶栏（与 hub 首页同款：64px、饱和模糊、底部彩虹线）── */
.hub-topbar{position:sticky;top:0;z-index:9999;display:flex;align-items:center;gap:.9rem;
  height:var(--hub-barH);padding:0 1.1rem;border-bottom:1px solid var(--hub-border);
  background:rgba(10,18,32,.92);backdrop-filter:blur(14px) saturate(140%);
  font-family:var(--hub-sans);color:var(--hub-fg)}
.hub-topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,#5AA0F2 0 25%,#F0645F 25% 50%,#FFC933 50% 75%,#4CD4A0 75% 100%);opacity:.6}
.hub-brand{display:flex;align-items:center;gap:.6rem;flex:0 0 auto;text-decoration:none;color:inherit}
.hub-brand-mark{display:grid;place-items:center;width:38px;height:34px;border-radius:9px;padding:3px;
  background:#FFFFFF;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.55)}
.hub-brand-mark img{display:block;width:100%;height:100%;object-fit:contain}
.hub-brand-name{display:inline-flex;align-items:baseline;font-size:19px;font-weight:800;letter-spacing:-.022em;line-height:1}
.hub-brand-name i{font-style:normal}
.hub-brand-name i:nth-child(1){color:var(--hub-blue)}
.hub-brand-name i:nth-child(2){color:var(--hub-primary)}
.hub-brand-name i:nth-child(3){color:var(--hub-green)}
.hub-tagline{margin:0;padding-left:1rem;border-left:1px solid var(--hub-border2);
  font-size:12.5px;color:var(--hub-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1 1 auto;min-width:0}
.hub-tagline b{color:var(--hub-primary);font-weight:600}
.hub-nav{display:flex;gap:.1rem;flex:0 0 auto}
.hub-nav a{padding:.45rem .78rem;border-radius:.5rem;color:var(--hub-muted);font-size:14px;font-weight:500;
  transition:.15s;text-decoration:none;white-space:nowrap}
.hub-nav a:hover{background:rgba(255,255,255,.06);color:var(--hub-fg)}
.hub-nav a.hub-active{background:rgba(255,201,51,.14);color:var(--hub-primary);font-weight:700}
.hub-right{margin-left:.2rem;display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
.hub-btn{display:inline-flex;align-items:center;gap:.45rem;border-radius:.5rem;padding:.45rem .9rem;
  font-size:14px;font-weight:600;border:1px solid transparent;transition:.15s;white-space:nowrap;cursor:pointer;
  text-decoration:none;font-family:inherit}
.hub-btn-primary{background:var(--hub-primary);color:var(--hub-bg)}
.hub-btn-primary:hover{opacity:.9}
.hub-btn-ghost{border-color:var(--hub-border);color:var(--hub-fg);font-weight:500;background:none}
.hub-btn-ghost:hover{background:rgba(255,255,255,.05);border-color:var(--hub-border2)}
.hub-scheme{display:inline-flex;align-items:center;gap:.4rem;max-width:16rem;padding:.35rem .6rem;
  border:1px solid var(--hub-border);border-radius:.5rem;background:rgba(255,255,255,.03);
  font-family:var(--hub-mono);font-size:11px;color:var(--hub-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-scheme b{color:var(--hub-primary);font-weight:600}
.hub-scheme a{color:var(--hub-blue);text-decoration:none}
.hub-scheme a:hover{text-decoration:underline}

/* ── 页脚 ── */
.hub-footer{border-top:1px solid var(--hub-border);background:var(--hub-bg2);color:var(--hub-muted);
  font-family:var(--hub-sans);font-size:13px;padding:1.1rem 1.35rem}
.hub-footer-in{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;max-width:1400px;margin:0 auto}
.hub-footer .hub-brand-name{font-size:16px}
.hub-footer-links{display:flex;flex-wrap:wrap;gap:.9rem}
.hub-footer-links a{color:var(--hub-muted);text-decoration:none}
.hub-footer-links a:hover{color:var(--hub-fg)}
.hub-footer-meta{margin-left:auto;font-family:var(--hub-mono);font-size:11px;color:var(--hub-dim);text-align:right;line-height:1.5}

/* ── 布局让位：应用页被包住后，内容区要给顶栏留高度 ── */
html.hub-shelled body{padding-top:0}
/* 静态应用（配置器）：根容器若用 100vh，则减掉顶栏高度 */
html.hub-shelled .hub-app-100vh{height:calc(100vh - var(--hub-barH) - var(--hub-footerH, 0px)) !important}

@media (max-width:1080px){
  .hub-tagline{display:none}
  .hub-nav a{padding:.45rem .55rem;font-size:13px}
}
@media (max-width:820px){
  .hub-nav{overflow-x:auto;scrollbar-width:none}
  .hub-nav::-webkit-scrollbar{display:none}
  .hub-scheme{display:none}
}
@media print{
  .hub-topbar,.hub-footer{display:none !important}
}

/* ── 双语段落（GEO 自述段）：按 <html lang> 只显示对应语言，另一语言保留在 DOM 里给 AI 爬虫 ── */
[data-hub-lang]{display:none}
html[lang="en"] [data-hub-lang="en"]{display:block}
html[lang="en"] [data-hub-lang="zh"]{display:none}
html[lang="zh-CN"] [data-hub-lang="zh"],html[lang="zh"] [data-hub-lang="zh"]{display:block}
html[lang="zh-CN"] [data-hub-lang="en"],html[lang="zh"] [data-hub-lang="en"]{display:none}