/* ============================================================
   ydckcode · Arduino 硬件编辑器（Mixly3 内核）外壳样式
   主色 #FFB800 / 高亮 #FF9538 / 按压 #e68430 / 黑 #000 / 白 #fff
   胶囊圆角 999px / 过渡 0.2s ease / 与全站橙色规范统一
   ============================================================ */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body.bodybg { background:#f7f7f7; display:flex; flex-direction:column; overflow:hidden; }
.xu-index-head { background-color:#FFB800 !important; background-image:none !important; flex:none; }
.xu-index-head .head-bg1, .xu-index-head .head-bg2, .xu-index-head .head-bg4 { display:none !important; }

/* ===== 工具栏：白色卡片 + 圆角 + 阴影 ===== */
.ard-toolbar {
  background:#fff; border-radius:14px; box-shadow:0 2px 10px rgba(0,0,0,.06);
  margin:12px 20px 0; padding:12px 16px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:none;
}
.ard-toolbar .ard-title-label { font-size:13px; color:#666; font-weight:700; white-space:nowrap; }
.ard-toolbar input, .ard-toolbar select {
  border:2px solid #ffe3c2; background:#fffaf5; border-radius:999px;
  padding:8px 16px; font-size:14px; color:#000; outline:none; transition:all .2s ease;
}
.ard-toolbar input { width:200px; }
.ard-toolbar input:focus, .ard-toolbar select:focus { border-color:#FF9538; }
/* 主按钮（保存）：橙底白字胶囊，最醒目 */
.ard-btn-primary {
  background:#FF9538; color:#fff; border:none; border-radius:999px;
  padding:9px 24px; font-size:14px; font-weight:800; cursor:pointer;
  transition:all .2s ease; box-shadow:0 3px 8px rgba(255,149,56,.35);
}
.ard-btn-primary:hover { opacity:.9; }
.ard-btn-primary:active { background:#e68430; transform:scale(.97); }
/* 次级按钮（示例/复制/下载/清空）：白底描边，hover 橙 */
.ard-btn-secondary {
  background:#fff; color:#333; border:1px solid #e0e0e0; border-radius:999px;
  padding:9px 18px; font-size:14px; font-weight:700; cursor:pointer;
  transition:all .2s ease;
}
.ard-btn-secondary:hover { border-color:#FF9538; color:#FF9538; background:#fff7ee; }
.ard-btn-secondary:active { background:#FF9538; color:#fff; }
/* 保存状态提示 */
.ard-save-state { font-size:12px; color:#999; white-space:nowrap; }
.ard-save-state.ok { color:#FF9538; }

/* ===== 主体：iframe 三栏编辑区 ===== */
.ard-main { flex:1; min-height:0; margin:12px 20px 20px; position:relative; }
.ard-main iframe {
  display:block; position:absolute; left:0; top:0; width:100%; height:100%;
  border:none; border-radius:14px; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.06);
}

/* ===== 响应式 ===== */
@media (max-width:1100px) {
  .ard-toolbar input { width:160px; }
}
@media (max-width:900px) {
  body.bodybg { overflow:auto; }
  .ard-main { min-height:520px; }
}

/* ===== 串口监视器面板（右侧抽屉，橙色规范） ===== */
.ard-serial-panel {
  position: fixed; right: 20px; top: 96px; bottom: 20px; width: 460px; z-index: 9999;
  background:#fff; border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,.18);
  display:flex; flex-direction:column; overflow:hidden; border:1px solid #ffe3c2;
}
.ard-serial-head {
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  background:#FFB800; flex:none;
}
.ard-serial-title { font-size:14px; font-weight:800; color:#000; margin-right:6px; white-space:nowrap; }
.ard-serial-head select {
  border:none; border-radius:999px; padding:6px 10px; font-size:13px; outline:none;
  background:#fff; color:#000;
}
.ard-btn-sm { padding:6px 14px; font-size:13px; }
.ard-serial-head .ard-btn-secondary { border-color:#fff; background:#fff; color:#333; }
.ard-serial-out {
  flex:1; min-height:0; overflow:auto; background:#1e1e2e; color:#7ce38b;
  font-family:Consolas,Menlo,"等线",monospace; font-size:13px; line-height:1.6;
  padding:12px 14px; white-space:pre-wrap; word-break:break-all;
}
.ard-serial-out::-webkit-scrollbar { width:8px; }
.ard-serial-out::-webkit-scrollbar-thumb { background:#3a3f4b; border-radius:4px; }
.ard-serial-send {
  display:flex; align-items:center; gap:8px; padding:10px 14px; flex:none;
  border-top:1px solid #f0f0f0;
}
.ard-serial-send input {
  flex:1; min-width:0; border:2px solid #ffe3c2; background:#fffaf5; border-radius:999px;
  padding:8px 14px; font-size:13px; color:#000; outline:none; transition:all .2s ease;
}
.ard-serial-send input:focus { border-color:#FF9538; }
.ard-serial-send select {
  border:2px solid #ffe3c2; background:#fffaf5; border-radius:999px; padding:8px 6px;
  font-size:12px; color:#000; outline:none;
}
.ard-serial-status { padding:6px 14px; font-size:12px; color:#999; flex:none; border-top:1px solid #f0f0f0; }
.ard-serial-status.ok { color:#FF9538; font-weight:700; }
.ard-serial-status.err { color:#e74c3c; }
@media (max-width:900px) {
  .ard-serial-panel { right:10px; left:10px; width:auto; }
}