/* RoboBlocks — Arduino панелі (arduino.css)
   Негізгі (basic) дизайнға келтірілген: кремді neo-brutalist палитра.
   Палитра: қағаз #FBEEDB/#FFF8EC, сия #241E3B, бирюза #10A7AA,
   коралл #FF6B5B, күн #FFC53D, шөп #4CB944. Қатты көлеңкелер Npx Npx 0. */

.ard-panel{
  position:fixed; top:0; right:-460px; width:440px; max-width:92vw; height:100vh;
  background:#FFF8EC; border-left:3px solid #241E3B;
  box-shadow:-10px 0 0 rgba(36,30,59,.10), -16px 0 44px rgba(36,30,59,.22);
  display:flex; flex-direction:column; z-index:9000;
  transition:right .28s cubic-bezier(.34,1.3,.5,1); font-family:'Nunito',sans-serif;
  color:#241E3B;
}
.ard-panel.open{ right:0; }

.ard-head{
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  background:#10A7AA; border-bottom:3px solid #241E3B;
}
.ard-title{ font-family:'Rubik','Nunito',sans-serif; font-weight:800; color:#fff; font-size:16px; letter-spacing:-.01em; }
.ard-conn{
  font-size:11px; font-weight:900; padding:4px 10px; border-radius:8px; margin-left:auto;
  border:2.5px solid #241E3B; box-shadow:2px 2px 0 #241E3B; letter-spacing:.02em;
}
.ard-conn.off{ background:#FF6B5B; color:#fff; }
.ard-conn.on{ background:#4CB944; color:#fff; }
.ard-x{
  background:#fff; border:2.5px solid #241E3B; color:#241E3B; font-size:16px; font-weight:900;
  width:30px; height:30px; border-radius:9px; cursor:pointer; line-height:1;
  box-shadow:2px 2px 0 #241E3B; transition:transform .12s, box-shadow .12s;
}
.ard-x:hover{ transform:translate(-1px,-1px); box-shadow:3px 3px 0 #241E3B; background:#FFC53D; }
.ard-x:active{ transform:translate(2px,2px); box-shadow:0 0 0 #241E3B; }

.ard-actions{ display:flex; gap:9px; padding:14px 16px; flex-wrap:wrap; border-bottom:3px solid #241E3B; background:#FBEEDB; }

.ard-btn{
  font-family:'Rubik','Nunito',sans-serif; font-size:12.5px; font-weight:800;
  padding:9px 15px; border-radius:11px; cursor:pointer;
  background:#fff; color:#241E3B; border:2.5px solid #241E3B;
  box-shadow:3px 3px 0 #241E3B; transition:transform .12s, box-shadow .12s, background .12s;
}
.ard-btn:hover:not(:disabled){ transform:translate(-2px,-2px); box-shadow:5px 5px 0 #241E3B; background:#FFC53D; }
.ard-btn:active:not(:disabled){ transform:translate(2px,2px); box-shadow:1px 1px 0 #241E3B; }
.ard-btn:disabled{ opacity:.45; cursor:not-allowed; box-shadow:2px 2px 0 rgba(36,30,59,.4); }
.ard-btn.primary{ background:#10A7AA; color:#fff; }
.ard-btn.primary:hover:not(:disabled){ background:#0c8e90; }
.ard-btn.danger{ background:#FF6B5B; color:#fff; }
.ard-btn.danger:hover:not(:disabled){ background:#f0533f; }

.ard-code{
  flex:1; margin:14px 16px; padding:16px; overflow:auto;
  font-family:'JetBrains Mono',monospace; font-size:12.5px; line-height:1.6;
  color:#A7F0E4; background:#241E3B; white-space:pre; tab-size:2;
  border:3px solid #241E3B; border-radius:14px; box-shadow:4px 4px 0 #10A7AA;
}
.ard-code::-webkit-scrollbar{ width:9px; height:9px; }
.ard-code::-webkit-scrollbar-track{ background:transparent; }
.ard-code::-webkit-scrollbar-thumb{ background:#10A7AA; border-radius:6px; border:2px solid #241E3B; }

.ard-usb{ padding:16px; border-top:3px solid #241E3B; background:#F3E7CF; }
.ard-usb-title{ font-family:'Rubik','Nunito',sans-serif; font-size:12px; font-weight:900; color:#241E3B; margin-bottom:11px; letter-spacing:.04em; text-transform:uppercase; }
.ard-usb-row{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:11px; }
.ard-status{ font-size:11.5px; font-weight:700; color:#5C5570; line-height:1.45; min-height:16px; }

@media (max-width:520px){
  .ard-panel{ width:100vw; right:-100vw; }
}