/* Bigscreen dashboard spec helpers (static) */
.bs-top-line{height:2px;opacity:1;background:linear-gradient(180deg,rgba(1,19,47,0) 0%,#4D9BFF 55%,rgba(255,255,255,0) 100%);}
.bs-layout{width: 1594px; margin: 28px auto 0; position: relative;}
.bs-top{height:60px; display:flex; align-items:center; justify-content:center;
  background: rgba(149,195,255,0.1); box-shadow: inset 0 0 16px 0 #63A7FF; border-radius: 2px;}
.bs-main{display:flex; gap:16px; margin-top:12px;}
.bs-col{width:264px; display:flex; flex-direction:column; gap:8px;}
.bs-panel{height:179.67px; display:flex; align-items:center; justify-content:center;
  background: rgba(149,195,255,0.1); box-shadow: inset 0 0 16px 0 #63A7FF; border-radius: 2px;}
.bs-center{flex:1; display:flex; flex-direction:column; gap:8px;}
.bs-center-main{flex:1; min-height:555px; display:flex; align-items:center; justify-content:center;
  background: rgba(149,195,255,0.1); box-shadow: inset 0 0 16px 0 #63A7FF; border-radius: 2px;}
.bs-center-bottom{height:179.67px; display:flex; align-items:center; justify-content:center;
  background: rgba(149,195,255,0.1); box-shadow: inset 0 0 16px 0 #63A7FF; border-radius: 2px;}

.bs-demo-row{display:flex; gap:16px; flex-wrap:wrap;}
.bs-demo-card{background: rgba(149,195,255,0.06); border:1px solid rgba(99,167,255,0.35);
  box-shadow: inset 0 0 16px 0 rgba(99,167,255,0.35); border-radius: 6px; padding: 16px; margin: 16px 0;}
.bs-demo-card h3{margin:0 0 12px; font-size: 14px;}

.bs-btn{border:1px solid rgba(99,167,255,0.55); color:#CFE6FF; background: rgba(0,116,255,0.18);
  box-shadow: inset 0 0 14px rgba(99,167,255,0.65); border-radius: 2px; padding: 0 16px; margin-right: 12px;}
.bs-btn-ghost{background: rgba(149,195,255,0.06);}
.bs-btn-primary{background: rgba(0,116,255,0.18);}
.bs-h24{height:24px; line-height:24px;}
.bs-h28{height:28px; line-height:28px;}
.bs-h32{height:32px; line-height:32px;}

.bs-tag{display:inline-flex; align-items:center; justify-content:center; padding: 0 10px; height:24px; margin-right:10px;
  border:1px solid rgba(99,167,255,0.35); background: rgba(149,195,255,0.06); border-radius:2px; color:#CFE6FF;}
.bs-tag-active{border-color: rgba(0,116,255,0.7); background: rgba(0,116,255,0.18); box-shadow: inset 0 0 12px rgba(99,167,255,0.65);}
.bs-tag-disabled{opacity:.45;}

.bs-dialog{width: 420px; border:1px solid rgba(99,167,255,0.45); background: rgba(149,195,255,0.08);
  box-shadow: inset 0 0 20px rgba(99,167,255,0.5); border-radius: 6px;}
.bs-dialog-hd{display:flex; justify-content:space-between; padding:12px 14px; font-weight:600;}
.bs-dialog-bd{padding: 0 14px 14px; color: rgba(207,230,255,0.85);}
.bs-dialog-ft{display:flex; justify-content:flex-end; gap:10px; padding: 0 14px 14px;}
.bs-x{opacity:.7; cursor:pointer;}

.bs-alert{padding: 12px 14px; border-radius: 4px; margin-bottom: 10px; display:flex; justify-content:space-between; align-items:center;}
.bs-success{border:1px solid rgba(52,199,89,0.65); background: rgba(52,199,89,0.18);}
.bs-warning{border:1px solid rgba(255,204,0,0.65); background: rgba(255,204,0,0.12);}
.bs-danger{border:1px solid rgba(255,56,60,0.65); background: rgba(255,56,60,0.12);}

.bs-transfer{display:flex; align-items:center; gap:14px;}
.bs-transfer-col{width: 240px; height: 260px; border:1px solid rgba(99,167,255,0.35); background: rgba(149,195,255,0.06);
  box-shadow: inset 0 0 12px rgba(99,167,255,0.25); border-radius:4px; display:flex; align-items:center; justify-content:center;}
.bs-transfer-mid{width: 44px; height: 44px; border:1px solid rgba(0,116,255,0.6); background: rgba(0,116,255,0.18);
  box-shadow: inset 0 0 12px rgba(99,167,255,0.55); border-radius:4px; display:flex; align-items:center; justify-content:center;}

.bs-chart-box{height: 220px; border:1px dashed rgba(99,167,255,0.35); border-radius:6px; display:flex; align-items:center; justify-content:center; opacity:.8}
.bs-palette{display:flex; gap:10px; align-items:center;}
.bs-palette span{width:20px; height:20px; border-radius:4px; display:inline-block; box-shadow: 0 0 10px rgba(99,167,255,0.35);}


/* =========================
   Bigscreen Layout (pixel)
   ========================= */
.bs-layout-page{padding: 18px 0 40px;}
.bs-page-head{display:flex; align-items:flex-start; justify-content:space-between; margin: 6px 0 10px;}
.bs-brand{display:flex; align-items:flex-start; gap:10px;}
.bs-diamond{
  width: 10px; height: 10px;
  transform: rotate(45deg);
  margin-top: 6px;
  background: rgba(8, 188, 226, 0.7);
  box-shadow: 0 0 12px rgba(8,188,226,0.55);
}
.bs-brand-cn{font-size: 20px; font-weight: 600; letter-spacing: 1px;}
.bs-brand-en{font-size: 12px; opacity: .75; margin-top: 2px;}
.bs-page-no{
  font-size: 44px;
  font-weight: 800;
  letter-spacing: 2px;
  line-height: 1;
  opacity: .9;
  text-shadow: 0 0 24px rgba(99,167,255,0.35);
}
.bs-title{margin: 22px 0 18px;}
.bs-title-en{
  font-size: 22px;
  letter-spacing: 6px;
  opacity: .7;
}
.bs-title-cn{
  font-size: 20px;
  margin-top: 6px;
  font-weight: 600;
}
.bs-layout-stage{margin-top: 18px;}
.bs-layout-label{
  text-align:center;
  opacity: .85;
  margin: 10px 0 14px;
}
.bs-note{
  margin-top: 14px;
  font-size: 12px;
  opacity: .75;
  text-align:center;
}

/* 覆盖/强化布局比例（与你标注一致） */
.bs-layout{width:1292px; margin: 0 auto; }
.bs-panel{
  border: 1px solid rgba(99,167,255,0.22);
  border-radius: 4px;
  color: rgba(230,245,255,0.9);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 500;
  letter-spacing: .5px;
}
.bs-panel--header{height:60px;}
.bs-body{display:flex; gap:16px; margin-top:8px; height:555px;}
.bs-col{width:264px; display:flex; flex-direction:column; gap:8px;}
.bs-center{width:732px; display:flex; flex-direction:column; gap:8px;}
.bs-panel--cell{height:179.67px;}
.bs-panel--main{height:367.34px;}


/* =========================
   BigScreen - Font Spec (04)
   ========================= */
.bs-screen--font{
  position: relative;
  width: min(1400px, 100%);
  aspect-ratio: 16 / 9;
  margin: 24px auto;
  background: radial-gradient(1200px 700px at 50% 40%, rgba(10, 60, 140, .25) 0%, rgba(0, 16, 42, .95) 55%, rgba(0, 10, 28, 1) 100%);
  border-radius: 12px;
  overflow: hidden;
}
.bs-screen--font .bs-screen__topline{
  position:absolute; left:0; top:0; right:0; height:2px;
  background: linear-gradient(180deg, rgba(1, 19, 47, 0) 0%, #4D9BFF 55%, rgba(255, 255, 255, 0) 100%);
}
.bs-screen--font .bs-screen__brand{
  position:absolute; left:28px; top:22px;
  display:flex; align-items:flex-start; gap:10px;
  color:#EAF4FF;
}
.bs-screen--font .bs-screen__brand-dot{
  width:8px; height:8px; margin-top:10px;
  background: linear-gradient(180deg,#8FE9FF,#3FA6FF);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(99,167,255,.8);
}
.bs-screen--font .bs-screen__brand-title{
  font-family: var(--bs-font-body-cn, system-ui);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.1;
}
.bs-screen--font .bs-screen__brand-sub{
  font-family: var(--bs-font-body-cn, system-ui);
  font-size: 12px;
  opacity: .75;
  margin-top: 4px;
}
.bs-screen--font .bs-screen__no{
  position:absolute; right:34px; top:16px;
  font-family: var(--bs-font-display, system-ui);
  font-weight: 800;
  font-size: 72px;
  letter-spacing: 2px;
  color: rgba(170, 220, 255, .35);
  text-shadow: 0 0 18px rgba(72, 170, 255, .25);
}
.bs-screen--font .bs-screen__section{
  position:absolute; left:28px; top:140px;
  color:#CFE7FF;
}
.bs-screen--font .bs-screen__section-en{
  font-family: var(--bs-font-display, system-ui);
  font-size: 18px;
  letter-spacing: 6px;
  opacity: .45;
}
.bs-screen--font .bs-screen__section-cn{
  font-family: var(--bs-font-body-cn, system-ui);
  font-size: 22px;
  font-weight: 700;
  margin-top: 8px;
}
.bs-font-area{
  position:absolute;
  left: 120px;
  top: 310px;
  right: 120px;
  bottom: 70px;
}
.bs-font-group__title{
  color:#A8D7FF;
  font-family: var(--bs-font-body-cn, system-ui);
  font-weight: 700;
  margin: 0 0 12px 0;
}
.bs-font-table{
  border-top: 1px solid rgba(15, 60, 126, .8);
  padding-top: 14px;
}
.bs-font-table__head,
.bs-font-table__row{
  display:grid;
  grid-template-columns: 140px 160px 220px 1fr;
  column-gap: 24px;
  align-items:center;
}
.bs-font-table__head{
  color:#9CCBFF;
  font-size: 12px;
  padding: 8px 0 12px 0;
  opacity: .9;
}
.bs-font-table__row{
  color:#EAF4FF;
  font-size: 14px;
  padding: 10px 0;
}
.bs-font-table__row + .bs-font-table__row{
  border-top: 1px dashed rgba(15, 60, 126, .45);
}
.bs-font-group--numbers{ margin-top: 26px; }

.bs-font-h1{ /* 28px Regular（头部标题栏） */ font-family: var(--bs-font-title-cn, system-ui); font-size: 28px; font-weight: 400; }
.bs-font-title{ /* 16px Bold（标题） */ font-family: var(--bs-font-body-cn, system-ui); font-size: 16px; font-weight: 700; }
.bs-font-subtitle{ font-family: var(--bs-font-body-cn, system-ui); font-size: 14px; font-weight: 700; opacity: .95; }
.bs-font-body{ font-family: var(--bs-font-body-cn, system-ui); font-size: 14px; font-weight: 500; opacity: .95; }
.bs-font-help{ font-family: var(--bs-font-body-cn, system-ui); font-size: 12px; font-weight: 400; opacity: .9; }
.bs-font-number{ /* 32px Bold（数值/英文） */ font-family: var(--bs-font-display, system-ui); font-size: 32px; font-weight: 700; letter-spacing: .5px; }

@media (max-width: 1100px){
  .bs-font-area{ left: 40px; right: 40px; top: 280px; }
  .bs-font-table__head, .bs-font-table__row{ grid-template-columns: 120px 140px 200px 1fr; }
  .bs-screen--font .bs-screen__no{ font-size: 56px; }
}

/* ===== BigScreen Font 04: 背景辅助条（对齐设计稿） ===== */
.bs-screen--font .bs-content{position:relative;}
.bs-screen--font .bs-font{position:relative; z-index:1;}
.bs-screen--font .bs-font-bars{position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:0;}
.bs-screen--font .bs-font-bar{position:absolute; left:8.296%; /* 149.33 / 1800 approx */ height:1.94%; background:#EFF6FF; opacity:0.18; border-radius:999px;}
.bs-screen--font .bs-font-bar--1{top:28.26%; width:42.71%;}
.bs-screen--font .bs-font-bar--2{top:31.26%; width:38.33%;}
.bs-screen--font .bs-font-bar--3{top:34.26%; width:39.79%;}

/* ===== BigScreen / Font 04: 示例图（使用UI原图，响应式） ===== */
.bs-demo{margin: 16px 0 8px;}
.bs-demo-img{width:100%; height:auto; display:block; max-width: 1200px; margin: 0 auto; border-radius: 18px;}

.bs-ui-shot{width:100%;height:auto;display:block;max-width:1200px;margin:0 auto;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.12);} 



/* === BigScreen docs fixes: sidebar single-column, code wrapping === */
.VPSidebar .group .items .item,
.VPSidebar .group .items .VPSidebarItem,
.VPSidebarItem,
.VPSidebarItem .item,
.VPSidebarItem .item .link{
  display:block;
  width:100%;
}
.vp-doc pre,
.vp-doc code{
  word-break: break-word;
}
.vp-doc pre code{
  white-space: pre-wrap;
}

/* details block spacing */
.vp-details{margin:12px 0;border-radius:10px;background:#f3f4f6;}
.vp-details>summary{cursor:pointer;padding:14px 16px;font-weight:600;user-select:none;}
.vp-details__content{padding:0 16px 16px 16px;}

/* ===== BigScreen / Chart 10 ===== */
.hn-card{margin:16px 0; padding:16px; border-radius:14px; background:#ffffff; border:1px solid rgba(15,60,126,.18);}
.hn-card h1,.hn-card h2,.hn-card h3{margin:0 0 10px 0;}
.hn-code pre{margin:10px 0;}

.hn-chart-wrap{padding:12px; border-radius:12px; background:#f7fbff; border:1px dashed rgba(15,60,126,.18);}
.hn-chart-title{font-weight:700; margin-bottom:10px; color:#0f172a;}
.hn-chart-note{margin-top:10px; color:#334155; font-size:13px;}

/* 容器：约等于 UI 标注的 304x306 */
.hn-chart{ position:relative; width:304px; height:306px; background:linear-gradient(180deg, rgba(1,19,47,.03) 0%, rgba(1,19,47,0) 100%); border-radius:10px; overflow:hidden; }

/* 网格线 */
.hn-grid{position:absolute; inset:0; background-image: linear-gradient(to right, rgba(2,24,60,.07) 1px, transparent 1px), linear-gradient(to top, rgba(2,24,60,.07) 1px, transparent 1px); background-size: 38px 38px; opacity:.7; }

/* 柱子容器 */
.hn-bars{position:absolute; left:18px; right:18px; bottom:18px; top:18px; display:flex; align-items:flex-end; justify-content:space-between; gap:10px;}

/* 柱子默认态（rgba(0, 68, 255, 0.2)） */
.hn-bar{ width:30px; border-radius:0; background:rgba(0,68,255,.2); cursor:pointer; transition: all .12s ease; }
.hn-bar:hover{ background:rgba(0,116,255,.35); }

/* 选中态：提高亮度（可按你后续色号再细调） */
.hn-bar.is-active{ background:rgba(0,116,255,.65); box-shadow:0 0 0 1px rgba(0,238,255,.35) inset; }

/* Tooltip（按你给的标注：渐变描边 + 毛玻璃） */
.hn-tooltip{
  position:absolute; min-width:68px; border-radius:4px;
  padding:8px 12px 8px 8px;
  background: linear-gradient(0deg, rgba(10, 40, 82, 0.6), rgba(10, 40, 82, 0.6)), rgba(58, 119, 209, 0.4);
  box-sizing:border-box;
  border: 1px solid;
  border-image: linear-gradient(180deg, #1A4DDE 0%, #00EEFF 28%, #E8FDFE 46%, #439FFF 78%, #00EEFF 100%) 1;
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.92);
  display:none;
  box-shadow: 0 10px 24px rgba(2, 24, 60, .25);
}
.hn-tooltip.is-show{ display:block; }
.hn-tip-warning{font-size:12px; opacity:.9;}
.hn-tip-title{font-size:13px; font-weight:700; margin-top:2px;}
.hn-tip-lines{font-size:12px; margin-top:6px; line-height:1.55; opacity:.95;}

/* 色板 */
.hn-palette{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.hn-palette span{width:18px; height:18px; border-radius:6px; box-shadow: 0 0 0 1px rgba(0,0,0,.06) inset;}
.hn-tip{color:#475569; font-size:13px; margin-top:10px;}