/* ============================================================================
   并联两相冷板三维仿真 · 界面样式
   深色工程风；四路强调色由 --b1..--b4 统一驱动（曲线 / 标签 / 管道描边一致）
   ==========================================================================*/

:root{
  --bg:#070a0f;
  --panel:rgba(14,20,28,.84);
  --panel-solid:#0e141c;
  --line:rgba(120,165,210,.16);
  --line-2:rgba(120,165,210,.28);
  --tx:#d9e4f0;
  --tx-dim:#8296ab;
  --tx-mute:#7b8d9f;   /* 比原来亮一档，小字在深底上够 5:1 对比度 */
  --accent:#35c6e8;
  --warn:#ff4d3d;
  --ok:#3ddc97;

  --b1:#ff5a5f;
  --b2:#4ea8ff;
  --b3:#4ade80;
  --b4:#c084fc;

  --cb-h:212px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  background:
    radial-gradient(1200px 700px at 62% 18%, #14202e 0%, #0a1018 45%, var(--bg) 100%);
  color:var(--tx);
  font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
  font-size:13.5px;line-height:1.5;
  overflow:hidden;
  user-select:none;
}

/* 键盘可达性：所有可聚焦控件都要有可见焦点环 */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
input[type=range]:focus-visible{outline-offset:4px}

/* 深色滚动条（Windows 默认浅色太扎眼） */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(120,165,210,.22);border-radius:5px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(120,165,210,.38);background-clip:content-box}

/* ---------------- 加载遮罩 ---------------- */
#boot{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(900px 600px at 50% 40%,#101b27,#060a0f 70%);
  transition:opacity .45s ease, visibility .45s;
}
#boot.done{opacity:0;visibility:hidden;pointer-events:none}
.boot-box{text-align:center}
.boot-ring{
  width:34px;height:34px;margin:0 auto 14px;border-radius:50%;
  border:2px solid rgba(120,165,210,.18);border-top-color:var(--accent);
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.boot-title{font-size:14px;color:#cfe0ee;letter-spacing:.08em}
.boot-sub{margin-top:5px;font-size:12px;color:var(--tx-mute);letter-spacing:.04em}

#viewport{position:fixed;inset:0;z-index:0}
#scene{display:block;width:100%;height:100%;outline:none}

/* ---------------- 通用面板 ---------------- */
.panel{
  position:relative;z-index:20;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  box-shadow:0 12px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}

/* 左列：读数 + 曲线共用一条竖列，用 flex 分配高度，永远不会互相压住 */
#leftRail{
  position:fixed;left:16px;top:78px;bottom:calc(var(--cb-h) + 12px);
  width:320px;z-index:20;
  display:flex;flex-direction:column;gap:10px;
  pointer-events:none;
}
#leftRail>.panel{pointer-events:auto}
.p-head{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px 8px 12px;
  font-size:13.5px;font-weight:600;letter-spacing:.04em;
  color:var(--tx);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0));
}
.p-head>span:first-child{flex:1}
.p-sum{display:none;font-weight:500;font-size:12px;color:var(--tx-dim);
  font-variant-numeric:tabular-nums;letter-spacing:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-tip{font-weight:400;font-size:12px;color:var(--tx-mute);letter-spacing:0}
.p-body{padding:10px 12px}
.mini{
  width:24px;height:24px;line-height:1;border-radius:6px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--tx-dim);cursor:pointer;font-size:15px;padding:0;flex:none;
}
.mini:hover{color:var(--tx);border-color:var(--line-2);background:rgba(255,255,255,.09)}
.hidden{display:none!important}

/* ---------------- 顶栏 ---------------- */
#topbar{
  position:fixed;top:0;left:0;right:0;z-index:25;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:14px 18px 0;pointer-events:none;
}
#topbar>*{pointer-events:auto}
.brand h1{
  margin:0;font-size:19px;font-weight:700;letter-spacing:.02em;
  background:linear-gradient(92deg,#e8f4ff,#8fd8ee 60%,#5fb6d8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 30px rgba(53,198,232,.18);
}
.brand p{margin:3px 0 0;font-size:12px;color:var(--tx-mute);letter-spacing:.06em}

.tools{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.tool-group{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.tbtn{
  font:inherit;font-size:13px;
  padding:6px 12px;border-radius:7px;cursor:pointer;
  color:var(--tx-dim);
  background:rgba(18,26,36,.78);
  border:1px solid var(--line);
  backdrop-filter:blur(10px);
  transition:.16s;
  white-space:nowrap;
}
.tbtn:hover{color:var(--tx);border-color:var(--line-2);background:rgba(30,44,60,.9)}
.tbtn.on{color:#04121a;background:var(--accent);border-color:var(--accent);font-weight:600}
.tbtn.primary{color:#04121a;background:var(--accent);border-color:var(--accent);font-weight:600}
.tbtn.ghost{background:transparent}
.tbtn:disabled{opacity:.4;cursor:not-allowed}

/* ---------------- 数据面板 ---------------- */
#dataPanel{flex:none;width:100%}
.globals{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:9px}
.g-item{
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  border-radius:7px;padding:6px 7px;
}
.g-item label{display:block;font-size:12px;color:var(--tx-mute);letter-spacing:.02em}
.g-item b{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;color:#eaf4ff}
.g-item i{font-size:11px;color:var(--tx-mute);font-style:normal;margin-left:2px}

.branch-head{
  display:grid;grid-template-columns:56px 1fr 1fr 1fr;gap:4px;
  font-size:12px;color:var(--tx-mute);padding:0 4px 4px;letter-spacing:.02em;
}
.branch-head span{text-align:right}
.branch-head span:first-child{text-align:left}

.brow{
  display:grid;grid-template-columns:56px 1fr 1fr 1fr;gap:4px;align-items:center;
  padding:5px 4px;border-radius:6px;font-variant-numeric:tabular-nums;
  transition:background .2s;
}
.brow+.brow{margin-top:1px}
.brow .bname{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--tx-dim)}
.brow .dot{width:8px;height:8px;border-radius:2px;flex:none;box-shadow:0 0 8px currentColor}
.brow .val{text-align:right;font-size:14.5px;font-weight:600;color:#e8f2fc}
.brow .val small{font-size:11px;color:var(--tx-mute);font-weight:400}
.brow.dry{background:rgba(255,60,40,.10);box-shadow:inset 0 0 0 1px rgba(255,60,40,.32)}
.brow.dry .val{color:#ff8f7a}
.brow .dry-tag{
  font-size:9.5px;color:#fff;background:var(--warn);
  border-radius:3px;padding:0 4px;margin-left:4px;vertical-align:1px;
  animation:blink 1.1s infinite;
}
@keyframes blink{50%{opacity:.35}}

.consv{margin-top:8px;font-size:12px;color:var(--ok);opacity:.85;letter-spacing:.02em}
.consv.bad{color:var(--warn)}

/* ---------------- 曲线面板 ---------------- */
#chartPanel{flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column}
#chartPanel .p-head{flex:none}
#chartPanel .p-body{
  flex:1;min-height:0;padding:8px;
  display:flex;flex-direction:column;gap:5px;
}
#chartPanel canvas{display:block;width:100%;height:auto;flex:1 1 0;min-height:44px;border-radius:5px}
#chartPanel.collapsed{flex:none}
#chartPanel.collapsed .p-body{display:none}
#dataPanel.collapsed .p-body{display:none}

/* ---------------- 部件说明卡 ---------------- */
#infoCard{right:16px;top:126px;width:280px;z-index:26}
#infoCard p{margin:0;font-size:12.5px;color:var(--tx-dim);line-height:1.62}
.info-live{margin-top:8px;font-size:12px;color:var(--accent);font-variant-numeric:tabular-nums}

/* ---------------- 底部控制条 ---------------- */
#controlbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  padding:10px 18px 6px;   /* 高度由内容决定，JS 再把真实高度写回 --cb-h */
  background:linear-gradient(180deg,rgba(10,15,21,.72),rgba(8,12,17,.97) 42%);
  border-top:1px solid var(--line);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  display:flex;flex-direction:column;gap:8px;
}
.cb-row{display:flex;align-items:center;gap:14px}
.cb-top{flex:none;flex-wrap:wrap}

.time-ctl{display:flex;align-items:center;gap:6px}
.speed{display:flex;gap:2px;background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:7px;padding:2px}
.speed button{
  font:inherit;font-size:12.5px;padding:4px 9px;min-height:24px;border-radius:5px;border:0;cursor:pointer;
  background:transparent;color:var(--tx-dim);
}
.speed button.on{background:var(--accent);color:#04121a;font-weight:600}
.clock{font-size:12.5px;color:var(--tx-mute);margin-left:4px;font-variant-numeric:tabular-nums}
.clock b{color:var(--tx);font-weight:600}

.scripts{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.scripts .lab{font-size:12.5px;color:var(--tx-mute);flex:none}
#scriptBtns{display:flex;gap:6px;flex-wrap:wrap}
#scriptBtns .tbtn{padding:5px 10px;font-size:12.5px}
#scriptBtns .tbtn.on{background:linear-gradient(180deg,#35c6e8,#1f9fbe)}

/* 四路滑条 */
.cb-sliders{flex:1;align-items:stretch;gap:10px;padding-bottom:4px}
.bcol{
  flex:1;min-width:0;
  background:linear-gradient(180deg,rgba(255,255,255,.038),rgba(255,255,255,.012));
  border:1px solid var(--line);border-left:3px solid var(--c);
  border-radius:8px;padding:7px 10px 8px;
  display:flex;flex-direction:column;gap:4px;
}
.bcol .btitle{
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;color:var(--tx-dim);letter-spacing:.04em;
}
.bcol .btitle b{color:var(--c);font-weight:600}
.bcol .btitle .dry-mini{color:var(--warn);font-size:11px;font-weight:600}

.sl{display:flex;align-items:center;gap:8px}
.sl label{font-size:13px;color:var(--tx-mute);width:62px;flex:none;white-space:nowrap}
.sl output{
  font-size:13px;font-variant-numeric:tabular-nums;color:var(--tx);
  width:56px;text-align:right;flex:none;
}

input[type=range]{
  -webkit-appearance:none;appearance:none;
  flex:1;min-width:0;height:24px;background:transparent;cursor:pointer;margin:0;
}
input[type=range]::-webkit-slider-runnable-track{
  height:5px;border-radius:3px;
  background:linear-gradient(90deg,var(--c) var(--p,50%),rgba(255,255,255,.11) var(--p,50%));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:50%;margin-top:-5px;
  background:#eef7ff;border:2px solid var(--c);
  box-shadow:0 0 8px color-mix(in srgb,var(--c) 60%,transparent);
  transition:transform .1s;
}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18)}
input[type=range]::-moz-range-track{height:4px;border-radius:3px;background:rgba(255,255,255,.11)}
input[type=range]::-moz-range-progress{height:4px;border-radius:3px;background:var(--c)}
input[type=range]::-moz-range-thumb{
  width:11px;height:11px;border-radius:50%;background:#eef7ff;border:2px solid var(--c);
}
.heat input[type=range]::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,#ff9d3c var(--p,50%),rgba(255,255,255,.11) var(--p,50%));
}
.heat input[type=range]::-webkit-slider-thumb{border-color:#ff9d3c;box-shadow:0 0 8px rgba(255,157,60,.5)}

/* ---------------- 页脚（控制条内最后一行，不浮层） ---------------- */
#footnote{
  flex:none;margin-top:2px;
  text-align:center;font-size:11.5px;color:var(--tx-mute);
  padding-top:6px;letter-spacing:.02em;
  border-top:1px solid rgba(255,255,255,.05);
  line-height:1.45;
}

/* ---------------- 讲解 ---------------- */
#tour{position:fixed;inset:0;z-index:40;pointer-events:none}
.tour-card{
  position:absolute;left:50%;bottom:calc(var(--cb-h) + 16px);
  transform:translateX(-50%);
  width:min(720px,calc(100vw - 40px));
  background:rgba(12,18,26,.93);
  border:1px solid var(--line-2);border-radius:12px;
  padding:16px 20px 14px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  backdrop-filter:blur(16px);
  pointer-events:auto;
}
.tour-progress{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,.08);border-radius:12px 12px 0 0;overflow:hidden}
.tour-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#35c6e8,#7ef0c0);transition:width .1s linear}
.tour-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.tour-head .ch{font-size:11.5px;color:var(--accent);letter-spacing:.1em;flex:none}
.tour-head h2{margin:0;font-size:18px;font-weight:700}
#tourText{margin:0;font-size:14.5px;line-height:1.72;color:#c7d6e6}
.tour-foot{display:flex;gap:8px;margin-top:12px;justify-content:flex-end}

/* ---------------- 弹窗 ---------------- */
.modal{
  position:fixed;inset:0;z-index:50;
  background:rgba(4,7,10,.66);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.modal-box{
  width:min(760px,100%);max-height:86vh;overflow:auto;
  background:var(--panel-solid);border:1px solid var(--line-2);
  border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.modal-box.narrow{width:min(520px,100%)}
.m-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.m-head h2{margin:0;font-size:16px}
.m-note{margin:12px 18px 0;font-size:12.5px;color:var(--tx-dim);line-height:1.68}
.m-note b{color:#ffce6a}
.m-foot{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px 16px}
.m-table{padding:10px 18px 0}
.m-table table{width:100%;border-collapse:collapse;font-size:13px}
.m-table th{
  text-align:left;font-weight:500;color:var(--tx-mute);font-size:11.5px;
  padding:6px 8px;border-bottom:1px solid var(--line);letter-spacing:.04em;
}
.m-table td{padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.045);color:var(--tx-dim)}
.m-table td.sym{color:#9fd8ea;font-family:ui-monospace,Consolas,monospace}
.m-table td.val{width:110px}
.m-table td.val input{
  width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:5px;color:var(--tx);font:inherit;font-variant-numeric:tabular-nums;
  padding:3px 6px;
}
.m-table td.unit{width:78px;color:var(--tx-mute);font-size:12px}
.help-list{margin:0;padding:14px 20px 18px 34px;font-size:13.5px;color:var(--tx-dim);line-height:1.95}
.help-list b{color:var(--accent);font-weight:600}

/* 手机上的参数表：表格改成两行式（符号+值+单位 / 含义），不然"含义"列被挤成两字一行 */
@media (max-width:560px){
  .m-table{padding:8px 12px 0}
  .m-table thead{display:none}
  .m-table table,.m-table tbody{display:block}
  .m-table tr{
    display:grid;grid-template-columns:58px 1fr 58px;gap:2px 8px;align-items:center;
    padding:7px 0;border-bottom:1px solid rgba(255,255,255,.045);
  }
  .m-table td{border:0;padding:0}
  .m-table td.sym{grid-column:1;grid-row:1}
  .m-table td.val{grid-column:2;grid-row:1;width:auto}
  .m-table td.unit{grid-column:3;grid-row:1;width:auto;text-align:right}
  .m-table td:last-child{grid-column:1 / 4;grid-row:2;font-size:11.5px;color:var(--tx-mute);line-height:1.4}
  .m-head{padding:12px 14px}
  .m-note{margin:10px 14px 0;font-size:12px}
  .m-foot{padding:10px 14px 14px}
}

/* ---------------- 悬浮提示 / toast ---------------- */
#tooltip{
  position:fixed;z-index:60;pointer-events:none;
  background:rgba(10,16,23,.95);border:1px solid var(--line-2);
  border-radius:7px;padding:6px 9px;font-size:12.5px;color:var(--tx);
  max-width:240px;line-height:1.5;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
#tooltip .tt-h{color:var(--accent);font-weight:600;margin-bottom:2px}
#tooltip .tt-v{font-variant-numeric:tabular-nums;color:#eaf4ff}

#toast{
  position:fixed;left:50%;top:78px;transform:translateX(-50%);
  z-index:60;background:rgba(12,20,28,.95);
  border:1px solid var(--line-2);border-left:3px solid var(--accent);
  border-radius:8px;padding:10px 16px;font-size:13.5px;color:var(--tx);
  max-width:min(560px,calc(100vw - 40px));
  box-shadow:0 14px 40px rgba(0,0,0,.55);
  transition:opacity .3s,transform .3s;
}
#toast b{color:var(--accent)}

/* ---------------- 窄屏 ---------------- */
@media (max-width:1180px){
  #leftRail{width:290px}
  #dataPanel{width:100%}
  .p-tip{display:none}   /* 面板窄了，提示会把标题挤成两行；曲线里自带轴标 */
}

/* 手机竖屏：顶栏压成两行（标题 + 可横向滑的一排按钮），滑条排成 2×2 */
@media (max-width:900px){
  :root{--cb-h:318px}
  #topbar{flex-direction:column;align-items:stretch;gap:6px;padding:8px 10px 0}
  .brand h1{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand p{display:none}
  .tools{flex-direction:row;align-items:center;gap:6px;width:100%;overflow-x:auto;overflow-y:hidden;padding-bottom:2px}
  .tools::-webkit-scrollbar{display:none}
  .tool-group{flex-wrap:nowrap;justify-content:flex-start;flex:none}
  .tbtn{padding:6px 10px;font-size:12.5px}

  #leftRail{left:10px;right:10px;top:auto;bottom:calc(var(--cb-h) + 8px);width:auto}
  #dataPanel{width:100%}
  #chartPanel{display:none}
  #infoCard{right:10px;top:auto;bottom:calc(var(--cb-h) + 8px);width:min(240px,calc(100vw - 20px))}

  .cb-sliders{display:grid;grid-template-columns:1fr 1fr;gap:6px;overflow:visible}
  .bcol{padding:5px 8px 6px}
  .bcol .btitle{font-size:12px}
  .sl{gap:6px}
  .sl label{width:52px;font-size:12px}
  .sl output{width:46px;font-size:12px}
  .scripts .lab{display:none}
  .time-ctl{flex-wrap:wrap;row-gap:6px}
  .cb-top{gap:8px}
  .time-ctl .tbtn{padding:5px 9px;font-size:12px}
  .speed button{padding:2px 7px;font-size:12px}
  .clock{font-size:11.5px}
  .clock.fps{display:none}   /* 手机上不显示帧率，省一行 */
  #scriptBtns{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-width:100%;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
  }
  #scriptBtns::-webkit-scrollbar{display:none}

  /* 手机上折叠时标题栏就是一条实时摘要；展开后四路排成四列，省一半高度 */
  .p-title{display:none}
  .p-sum{display:block;flex:1;min-width:0}
  .branch-head{display:none}
  #branchRows{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
  .brow{
    display:flex;flex-direction:column;align-items:flex-start;gap:1px;
    padding:5px 6px;background:rgba(255,255,255,.03);
    border:1px solid var(--line);border-radius:6px;
  }
  .brow .bname{font-size:12px}
  .brow .val{width:100%;text-align:left;font-size:13px}
  .brow .val::before{
    display:inline-block;width:13px;margin-right:3px;
    color:var(--tx-mute);font-size:10.5px;font-weight:400;
  }
  .brow .val:nth-child(2)::before{content:"m"}
  .brow .val:nth-child(3)::before{content:"x"}
  .brow .val:nth-child(4)::before{content:"T"}
  .brow .val:nth-child(2)::after{content:" g/s";font-size:9.5px;color:var(--tx-mute)}
  .brow .val:nth-child(4)::after{content:" ℃";font-size:9.5px;color:var(--tx-mute)}
  .brow .dry-tag{font-size:9px}

  .tour-card{bottom:calc(var(--cb-h) + 8px);padding:14px 16px 12px}
  .tour-head h2{font-size:16px}
  #tourText{font-size:13.5px}
}

/* 矮屏（手机横屏 / 投影）：控制条压扁，滑条回到一排，左列夹在顶栏与控制条之间可滚动 */
@media (max-height:620px){
  #leftRail{
    top:62px;bottom:calc(var(--cb-h) + 8px);
    overflow-y:auto;overflow-x:hidden;padding-right:2px;
  }
  .p-head{padding:6px 8px}
  .p-body{padding:7px 10px}
  .globals{gap:4px;margin-bottom:6px}
  .g-item{padding:4px 6px}
  .g-item b{font-size:15px}
  .branch-head{padding-bottom:2px}
  .brow{padding:3px 4px}
  .brow .val{font-size:13px}
  .consv{margin-top:5px;font-size:11.5px}

  .cb-sliders{display:flex;flex-wrap:nowrap;gap:8px}
  .bcol{padding:4px 7px 5px}
  .bcol .btitle{font-size:11.5px}
  .sl label{width:46px;font-size:11.5px}
  .sl output{width:42px;font-size:11.5px}
  input[type=range]{height:24px}
  .tour-card{bottom:calc(var(--cb-h) + 8px)}
}