/* 设备控制区（演示）。紧凑单行布局；橙色警示与全站中性配色区隔，
   避免被误认为可真实操作设备。 */
.ctrl-panel{border-color:var(--warn)}
.ctrl-panel h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding-top:11px;padding-bottom:11px;
  background:color-mix(in srgb,var(--warn) 10%,var(--panel2))}

.ctrl-notice{background:color-mix(in srgb,var(--warn) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 38%,transparent);
  border-radius:7px;padding:7px 11px;margin-bottom:14px;
  font-size:11.5px;line-height:1.6;color:var(--muted)}
.ctrl-notice strong{color:var(--warn)}

.ctrl-section{margin-bottom:14px}
.ctrl-section:last-of-type{margin-bottom:0}
.ctrl-label{font-size:11px;font-weight:640;color:var(--muted);
  letter-spacing:.4px;margin-bottom:8px}

/* 参数设定：一行一项，两列自适应 */
.ctrl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(370px,1fr));gap:8px}
.ctrl-item{display:flex;align-items:center;gap:9px;
  border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:var(--panel2)}
.ctrl-name{font-size:12.5px;font-weight:620;flex:1;min-width:74px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctrl-current{font-size:11px;color:var(--muted);white-space:nowrap;flex-shrink:0}
.ctrl-current b{color:var(--text);font-size:13.5px;font-weight:680;
  font-variant-numeric:tabular-nums;margin-left:3px}
.ctrl-current i{font-style:normal;margin-left:1px}

.ctrl-input{width:74px;flex-shrink:0;padding:5px 8px;border-radius:6px;
  border:1px solid var(--edge);background:var(--panel);color:var(--text);
  font-size:12.5px;font-variant-numeric:tabular-nums;text-align:right}
.ctrl-input:focus{border-color:var(--warn);
  outline:2px solid color-mix(in srgb,var(--warn) 28%,transparent);outline-offset:1px}

/* 按钮通用：图标 + 可选文字 */
.ctrl-apply,.ctrl-cmd,.ctrl-hist{display:inline-flex;align-items:center;gap:5px;
  border-radius:6px;font-weight:620;flex-shrink:0;line-height:1}
.ctrl-apply svg,.ctrl-cmd svg,.ctrl-hist svg{width:14px;height:14px;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.ctrl-apply{padding:5px 9px;font-size:11.5px;
  background:var(--warn);border:1px solid var(--warn);color:#fff}
.ctrl-apply:hover{filter:brightness(1.08);background:var(--warn);color:#fff}

.ctrl-hist{padding:5px;background:none;border:1px solid var(--edge);color:var(--muted)}
.ctrl-hist:hover{background:var(--active);border-color:var(--accent);color:var(--accent)}
.ctrl-hist.icon-only svg{width:15px;height:15px}

/* 遥控：图标按钮，竖向排布图标在上、短标签在下 */
.ctrl-buttons{display:flex;flex-wrap:wrap;gap:7px}
.ctrl-cmd{flex-direction:column;gap:5px;min-width:72px;padding:9px 10px;font-size:11px;
  background:var(--panel2);border:1px solid var(--edge);color:var(--text)}
.ctrl-cmd svg{width:19px;height:19px;stroke-width:1.75}
.ctrl-cmd:hover{border-color:var(--warn);color:var(--warn);
  background:color-mix(in srgb,var(--warn) 10%,var(--panel2))}
.ctrl-cmd-label{white-space:nowrap}
/* 开机/停机是最需要区分的一对，用语义色点出来 */
.ctrl-cmd[data-cmd="ControlRemoteStartBtn"]:hover{border-color:var(--ok);color:var(--ok);
  background:color-mix(in srgb,var(--ok) 10%,var(--panel2))}
.ctrl-cmd[data-cmd="ControlRemoteStopBtn"]:hover{border-color:var(--crit);color:var(--crit);
  background:color-mix(in srgb,var(--crit) 10%,var(--panel2))}

/* 模拟反馈：绿色只表示“界面已响应”，不代表设备执行 */
.ctrl-done,.ctrl-done:hover{background:var(--ok)!important;border-color:var(--ok)!important;
  color:#fff!important;filter:none}

/* 演示操作记录 */
.ctrl-log{margin-top:14px;padding-top:12px;border-top:1px dashed var(--edge)}
.ctrl-log ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ctrl-log li{font-size:11.5px;line-height:1.6;padding:4px 9px;border-radius:5px;
  background:var(--panel2);border:1px solid var(--line)}

@media(max-width:760px){
  .ctrl-grid{grid-template-columns:1fr}
  .ctrl-item{flex-wrap:wrap;gap:7px}
  .ctrl-name{flex-basis:100%}
  .ctrl-input{flex:1;width:auto}
  .ctrl-apply span{display:none}
  .ctrl-cmd{flex:1;min-width:66px}
}