/* RazorIDE — style.css  (Slate Pro × IDE redesign) */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Direction Control ───────────────────────────────────── */
.dir-ctrl{display:flex;align-items:center;gap:3px}
/* ป้ายเล็กกำกับกลุ่มปุ่ม Simulator (ทิศเริ่ม / มุมมอง) */
.ctrl-label{font-size:10px;color:var(--sub);font-weight:600;white-space:nowrap;
  letter-spacing:.02em;flex-shrink:0;margin:0 1px 0 4px;cursor:help}
.dir-label{font-size:11px;color:var(--sub);white-space:nowrap}
.dir-deg  {font-size:11px;color:var(--sub)}
.btn-dir  {padding:2px 7px !important;font-size:12px;line-height:1;border-radius:5px !important}
#inp-dir  {
  width:46px;text-align:center;
  background:var(--sur0);color:var(--text);
  border:1px solid var(--sur1);border-radius:6px;
  padding:2px 4px;font-size:12px;-moz-appearance:textfield}
#inp-dir::-webkit-inner-spin-button,
#inp-dir::-webkit-outer-spin-button{-webkit-appearance:none}
#inp-dir:focus{outline:1px solid var(--blue);border-color:var(--blue)}

:root{
  /* ── RazorIDE Identity Palette — Deep Electric Blue ── */
  --base:   #0a1628;   /* Rich Navy Blue (ไม่มืดเกิน) */
  --mantle: #0d1e35;   /* Panel — Blue-tinted dark */
  --crust:  #060f1e;   /* Deepest — True dark navy */
  --sur0:   #162236;   /* Surface 1 */
  --sur1:   #1e3352;   /* Surface 2 / Border */
  --ov0:    #5b7fa6;   /* Muted Blue-Gray */
  --text:   #e8f4ff;   /* Warm White with Blue tint */
  --sub:    #7da4c4;   /* Subtitle — Soft Blue */

  /* ── Signature Accent Colors ── */
  --blue:   #38bdf8;   /* Sky Blue — Primary Accent */
  --blue2:  #0ea5e9;   /* Cyan */
  --blue3:  #3b82f6;   /* Electric Blue */
  --green:  #10b981;   /* Emerald */
  --red:    #f43f5e;   /* Rose */
  --yellow: #f59e0b;   /* Amber */
  --mauve:  #a855f7;   /* Purple */
  --acc:    #38bdf8;

  /* ── Layout ── */
  --hdr:  56px;
  --act:  60px;
  --blkw: 248px;
  --sb:   24px;
  --glass-bg:   rgba(10, 22, 45, 0.85);
  --glass-bd:   rgba(56, 189, 248, 0.2);
  --glass-blur: blur(14px);
  --shadow-glow: 0 0 24px rgba(56, 189, 248, 0.2);
}

html,body{
  height:100%;
  height:100vh;
  height:100dvh;
  font-family:'Outfit', 'Inter', 'Noto Sans Thai', system-ui, -apple-system, sans-serif;
  background: var(--crust);
  /* Ambient gradient — ให้โปรแกรมไม่ดูมืดสม่ำเสมอ */
  background-image:
    radial-gradient(ellipse 80% 50% at 15% 0%, rgba(59,130,246,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 100%, rgba(168,85,247,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(14,165,233,0.04) 0%, transparent 70%);
  background-attachment: fixed;
  color:var(--text);
  overflow:hidden;
  /* กันการปัดเกินขอบ (rubber-band / pull-to-refresh) ของ iOS ที่ทำให้ทั้งหน้าขยับ
     — overflow:hidden อย่างเดียวบน iOS Safari กันไม่อยู่ */
  overscroll-behavior:none;
  touch-action:manipulation;
  /* ล็อกหน้าเว็บไม่ให้ขยับได้จริงระดับ layout (แรงกว่า overflow:hidden เฉยๆ)
     — จำเป็นเพราะ iOS Safari auto-scroll หน้าทั้งหน้าเองตอนโฟกัสช่องพิมพ์
     (เช่นแก้ค่าตัวเลขในบล็อก) เพื่อดันคีย์บอร์ดให้เห็นช่องนั้น ต่อให้ overflow:hidden
     ก็กันพฤติกรรมนี้ไม่อยู่ — position:fixed กันได้จริง โดยพื้นที่เลื่อนได้จริงในแอป
     (console, ป็อปอัพ, เมนู Block Editor) เป็น overflow:auto ของตัวเอง แยกออกมาแล้ว
     ไม่กระทบ */
  position:fixed;
  inset:0;
  top:0;left:0;right:0;bottom:0;
  width:100%;
  width:100vw;
  font-size:14px;
  letter-spacing:-0.01em;
}

/* ══════════════════════════════════════════════════════════
   HEADER — Glassmorphism & Glowing Ambient
══════════════════════════════════════════════════════════ */
header{
  height:var(--hdr);
  /* Premium Glassmorphic Dark Space theme with a hint of purple-cyan glow */
  background: rgba(10, 18, 36, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(56, 189, 248, 0.18);
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 40px rgba(124, 58, 237, 0.06); /* subtle purple bottom ambient glow */
  display:flex;align-items:center;
  padding:0;gap:0;
  user-select:none;flex-shrink:0;
  position:fixed;top:0;left:0;right:0;width:100%;z-index:99999;
  transition: background 0.3s ease, border-color 0.3s ease;
}
/* เส้นแสงนีออนไล่เฉดสีด้านบนสุดของ Header */
header::before {
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(168, 85, 247, 0.5) 15%, /* Purple Neon */
    rgba(56, 189, 248, 0.8) 50%,   /* Cyan Neon */
    rgba(59, 130, 246, 0.5) 85%,  /* Blue Neon */
    transparent 100%);
  z-index:1;
}

/* Brand */
.hdr-brand{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
  height:100%;padding:0 20px 0 16px;
  border-right:1px solid rgba(255, 255, 255, 0.08);
}
.logo-badge{
  width:26px;height:26px;border-radius:3px;
  background:var(--blue3);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;color:#fff;letter-spacing:-0.5px;
  box-shadow:none}
.logo-img{
  width:32px;height:32px;object-fit:contain;
  filter: drop-shadow(0 2px 8px rgba(56, 189, 248, 0.45));
  flex-shrink:0;
  transition: transform 0.3s ease;
}
.hdr-brand:hover .logo-img {
  transform: rotate(15deg) scale(1.1);
}
.logo-text{
  font-family: 'Outfit', sans-serif;
  font-size:16px;font-weight:800;
  background: linear-gradient(135deg, #ffffff 30%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing:.3px;
}
.project-name-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
}
.project-name-wrap:hover,
.project-name-wrap:focus-within {
  border-color: rgba(56, 189, 248, 0.5);
  background: rgba(56, 189, 248, 0.08);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
}
.project-name-input {
  background: transparent;
  border: none;
  color: #f1f5f9;
  font-family: 'Outfit', 'Noto Sans Thai', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  width: 110px;
  outline: none;
  text-overflow: ellipsis;
}
.project-name-input::placeholder {
  color: #64748b;
}
.project-edit-hint {
  font-size: 10px;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}
.project-name-wrap:hover .project-edit-hint {
  opacity: 0.9;
}

/* Center toolbar & Organized Zones */
.hdr-toolbar{
  position:relative;
  display:flex;align-items:center;gap:12px;flex:1;min-width:0;
  overflow-x:auto;padding:0 18px;scrollbar-width:none;
}
.hdr-toolbar::-webkit-scrollbar{display:none;}

/* ปุ่มลูกศรเลื่อนเมนูบน — โผล่เฉพาะตอนเมนูล้นจอ (จอแคบ/แท็บเล็ต) เพราะ
   แถบนี้เลื่อนได้แต่ scrollbar ถูกซ่อนไว้ ไม่งั้นผู้ใช้ไม่รู้ว่ามีเมนูซ่อนอยู่ */
.hdr-scroll-arrow{
  position:absolute;top:0;bottom:0;z-index:5;
  display:flex;align-items:center;
  width:30px;border:none;padding:0;cursor:pointer;
  color:#fff;opacity:.85;
  transition:opacity .15s}
.hdr-scroll-arrow:hover{opacity:1}
.hdr-scroll-left{
  left:0;justify-content:flex-start;padding-left:3px;
  background:linear-gradient(90deg, rgba(8,14,28,.92) 45%, transparent)}
.hdr-scroll-right{
  right:0;justify-content:flex-end;padding-right:3px;
  background:linear-gradient(270deg, rgba(8,14,28,.92) 45%, transparent)}

/* จอแคบ (แท็บเล็ต/iPad) — ซ่อนคำในปุ่มที่กินที่เยอะสุด เหลือแต่ไอคอน+title
   tooltip ไว้เผื่อ ปุ่มที่ความหมายไอคอนไม่ชัด (Robot/Open/Save ฯลฯ) คงคำไว้เหมือนเดิม */
@media (max-width: 1200px){
  .hdr-btn-label{display:none}
  #btn-open-map-popup{min-width:0;max-width:140px}
}

.hdr-zone{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}

.hdr-zone-exec{
  padding:3px 6px;
  background: rgba(255, 255, 255, 0.02);
  border-radius:12px;
  border:1px solid rgba(255, 255, 255, 0.06);
}

/* ── Unified Cyber Dock ── */
.unified-dock {
  display: flex;
  align-items: center;
  padding: 3px;
  background: rgba(15, 23, 42, 0.55);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  gap: 2px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.unified-dock button {
  border: none !important;
  box-shadow: none;
  border-radius: 7px; /* Inner radius slightly smaller than dock */
  padding: 6px 10px;
  font-family: 'Outfit', 'Inter', 'Noto Sans Thai', sans-serif;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.2s ease;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.unified-dock button:active:not(:disabled) {
  transform: scale(0.96);
}
.dock-divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 4px;
  flex-shrink: 0;
}

/* Run Button - Emerald to Cyan */
.unified-dock .btn-run {
  background: linear-gradient(135deg, #10b981 0%, #0ea5e9 100%);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.unified-dock .btn-run:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669 0%, #0284c7 100%);
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.45) !important;
  color: #fff;
}

/* Stop Button - Crimson Glow */
.unified-dock .btn-stop {
  background: transparent;
  color: #fda4af;
}
.unified-dock .btn-stop:not(:disabled) {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}
.unified-dock .btn-stop:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.25);
  color: #fff;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.35) !important;
}

/* Reset Button */
.unified-dock .btn-ghost {
  background: transparent;
  color: #94a3b8;
}
.unified-dock .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.unified-dock .btn-ghost:hover svg {
  animation: spin-anim 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes spin-anim {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.sep{
  width:1px;height:22px;
  background:rgba(255, 255, 255, 0.12);
  margin:0 2px;
  flex-shrink:0;
}

/* Right controls */
.hdr-right{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
  height:100%;padding:0 16px;
  background:rgba(15, 23, 42, 0.4);
  border-left:1px solid rgba(255, 255, 255, 0.08);
}

.btn-select-map{
  background:rgba(56, 189, 248, 0.08);
  border:1px solid rgba(56, 189, 248, 0.25);
  color:#7dd3fc;
  border-radius:8px;
  padding:5px 12px;
  font-weight:600;
}
.btn-select-map:hover{
  background:rgba(56, 189, 248, 0.18);
  border-color:rgba(56, 189, 248, 0.45);
  color:#f0f9ff;
}

.btn-guide{
  text-decoration:none !important;
  color:#94a3b8 !important;
}
.btn-guide:hover{
  color:#f8fafc !important;
}

/* Buttons — Standard Buttons fallback */
button{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid rgba(255, 255, 255, 0.07);
  border-radius:10px;
  font-family:'Outfit', 'Inter', sans-serif;
  font-size:12px;font-weight:600;cursor:pointer;
  transition:all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  white-space:nowrap;flex-shrink:0;padding:7px 15px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
button:active:not(:disabled){
  transform:scale(0.95) translateY(0);
}
button:disabled{opacity:.35;cursor:not-allowed}

/* Fallback buttons for non-dock (if any) */
.btn-run{
  background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
  border-color: rgba(168, 85, 247, 0.45);
  color:#ffffff;
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.3);
  font-weight:700;
}
.btn-run:hover:not(:disabled){
  background: linear-gradient(135deg, #8b5cf6 0%, #1d4ed8 100%);
  transform: translateY(-1.5px);
}
.btn-stop{
  background: rgba(244, 63, 94, 0.08);
  border-color: rgba(244, 63, 94, 0.25);
  color: #fda4af;
}
.btn-stop:hover:not(:disabled){
  background: rgba(244, 63, 94, 0.22);
  color: #ffffff;
  transform: translateY(-1.5px);
}
.btn-ghost{
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
}
.btn-ghost:hover:not(:disabled){
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  transform: translateY(-1.5px);
}

.btn-sm{
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: var(--sub); padding:4px 10px; font-size:11px; border-radius:6px;
}
.btn-sm:hover:not(:disabled){
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12) !important; color: var(--text);
}

.hdr-icon-btn{
  width:32px;height:32px;padding:0;border-radius:3px;
  background:transparent;border:none;color:var(--ov0);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;cursor:pointer}
.hdr-icon-btn:hover{color:var(--text);background:rgba(120,169,255,.1)}

.user-badge{
  width:30px;height:30px;border-radius:50%;padding:0;
  background:var(--blue3);
  border:2px solid rgba(120,169,255,.25);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;color:#fff;cursor:pointer}

select{
  background: rgba(15, 23, 42, 0.6);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 5px 10px;
  font-size:12px;
  cursor:pointer;
  outline:none;
  flex-shrink:0;
  transition: all 0.2s ease;
}
select:hover{border-color:rgba(56, 189, 248, 0.35)}
select:focus{border-color:var(--blue); box-shadow: 0 0 10px rgba(56, 189, 248, 0.25)}

/* ── Map selector button (header) ── */
.btn-select-map{
  display:flex;align-items:center;gap:8px;
  padding:6px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  color: var(--text); font-size:12px; font-weight:600;
  cursor:pointer; min-width:110px; max-width:220px; flex-shrink:0;
  transition: all 0.22s ease;
}
.btn-select-map:hover{
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}
.btn-select-map:active{background: rgba(255, 255, 255, 0.04); transform: translateY(0);}
#hdr-map-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}

.sep{width:1px;height:22px;background:var(--sur1);flex-shrink:0;margin:0 2px}
kbd{font-size:11px;color:var(--ov0);border:1px solid var(--sur1);
  border-radius:3px;padding:2px 8px;flex-shrink:0;font-family:inherit}

.status{
  padding:3px 12px;border-radius:3px;font-size:11px;font-weight:600;
  background:var(--sur0);color:var(--ov0);border:1px solid var(--sur1);
  transition:all .2s;flex-shrink:0;white-space:nowrap}
.status.running  {background:rgba(241,194,27,.12);color:var(--yellow);border-color:rgba(241,194,27,.3)}
.status.success  {background:rgba(66,190,101,.12);color:var(--green); border-color:rgba(66,190,101,.3)}
.status.error    {background:rgba(250,77,86,.12); color:var(--red);   border-color:rgba(250,77,86,.3)}
.status.compiling{background:rgba(120,169,255,.12);color:var(--blue); border-color:rgba(120,169,255,.3)}

/* ══════════════════════════════════════════════════════════
   APP BODY
══════════════════════════════════════════════════════════ */
/* ความสูงพื้นที่ทำงาน = เต็มจอ ลบ header ลบ status bar
   ⚠️ iOS Safari: 100vh = ความสูงจอ "ตอนซ่อนแถบ URL" ซึ่งสูงกว่าพื้นที่ที่เห็นจริง
   ตอนแถบ URL โผล่อยู่ → header+app-body+statusbar รวมกันสูงเกินจอ → หน้าเว็บ
   เลื่อนได้ พอปัดนิดเดียวเมนูด้านบนถูกดันหลุดจอหายไป (บั๊กที่เจอบน iPad)
   ใช้ 100dvh (ความสูงที่มองเห็นจริง ณ ตอนนั้น) แทน — บรรทัด 100vh ไว้ก่อน
   เป็น fallback ให้เบราว์เซอร์รุ่นเก่าที่ยังไม่รู้จัก dvh */
.app-body{
  display:flex;
  position:fixed;
  top:var(--hdr);
  bottom:var(--sb);
  left:0;
  right:0;
  width:100%;
  height:calc(100vh - var(--hdr) - var(--sb));
  height:calc(100dvh - var(--hdr) - var(--sb));
  overflow:hidden}

/* ══════════════════════════════════════════════════════════
   ACTIVITY BAR
══════════════════════════════════════════════════════════ */
.activity-bar{
  width:var(--act);flex-shrink:0;
  /* Activity bar — น้ำเงินเข้มมีเอกลักษณ์ */
  background: linear-gradient(180deg, #071224 0%, #060f1e 100%);
  border-right: 1px solid rgba(56,189,248,0.15);
  box-shadow: inset -1px 0 0 rgba(56,189,248,0.08), 2px 0 12px rgba(0,0,0,0.4);
  display:flex;flex-direction:column;align-items:center;
  padding:6px 0;gap:1px;z-index:5;
  position:relative;
}
/* เส้น accent ซ้ายสุด */
.activity-bar::before {
  content:'';
  position:absolute;
  left:0;top:20%;bottom:20%;
  width:2px;
  background: linear-gradient(180deg,
    transparent,
    rgba(56,189,248,0.7) 30%,
    rgba(168,85,247,0.7) 70%,
    transparent);
  border-radius:99px;
}

.act-item{
  width:52px;padding:7px 2px 5px;
  border:none;border-radius:6px;
  background:transparent;color:var(--ov0);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;transition:all 0.18s;flex-shrink:0;
  position:relative;
}
.act-item:hover{
  color:var(--blue);
  background:rgba(56,189,248,0.1);
  transform:translateY(-1px);
}
.act-item.active{
  color:#7dd3fc;
  background:rgba(59,130,246,0.18);
  box-shadow: 0 0 16px rgba(56,189,248,0.2);
}
.act-item.active::after {
  content:'';
  position:absolute;
  right:-1px;top:20%;bottom:20%;
  width:2px;
  background:var(--blue);
  border-radius:99px;
  box-shadow: 0 0 8px var(--blue);
}
.act-item:active{filter:brightness(.88)}
.act-item span{font-size:9px;font-weight:600;letter-spacing:.2px}
.act-item svg{width:18px;height:18px;flex-shrink:0}

.act-sep-h{width:32px;height:1px;background:rgba(56,189,248,0.15);margin:3px 0;flex-shrink:0}
.act-spacer{flex:1}

/* Status dot */
.act-status-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--green);box-shadow:0 0 6px var(--green);
  margin-bottom:6px}
.act-status-dot.idle   {background:var(--ov0);box-shadow:none}
.act-status-dot.running{background:var(--yellow);box-shadow:0 0 7px var(--yellow)}
.act-status-dot.error  {background:var(--red);box-shadow:0 0 7px var(--red)}

/* ══════════════════════════════════════════════════════════
   BLOCKS PANEL
══════════════════════════════════════════════════════════ */
.blocks-panel{
  width:var(--blkw);flex-shrink:0;
  background: linear-gradient(180deg, #0d1e35 0%, #0b1828 100%);
  border-right:1px solid rgba(56,189,248,0.12);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow: inset -1px 0 0 rgba(56,189,248,0.06);
}

.blk-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;
  background: linear-gradient(135deg, #071528 0%, #0a1a30 100%);
  border-bottom:1px solid rgba(56,189,248,0.15);
  font-size:11px;font-weight:700;letter-spacing:.5px;
  color:var(--blue);flex-shrink:0;
  text-shadow: 0 0 12px rgba(56,189,248,0.4);
}

.blk-search-wrap{
  padding:8px 10px;border-bottom:1px solid var(--sur0);flex-shrink:0}
.blk-search{
  width:100%;background:var(--sur0);border:1px solid var(--sur1);
  color:var(--text);border-radius:7px;padding:5px 10px;
  font-size:12px;outline:none}
.blk-search:focus{border-color:var(--blue)}
.blk-search::placeholder{color:var(--ov0)}

.blk-list{flex:1 1 auto;overflow-y:auto;padding:6px 0 12px}

.blk-cat-header{
  display:flex;align-items:center;gap:7px;
  padding:6px 12px 4px;
  font-size:10px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;cursor:pointer;
  margin-top:4px}
.blk-cat-header .cat-dot{
  width:10px;height:10px;border-radius:3px;flex-shrink:0}
.blk-cat-header span{flex:1}
.blk-cat-header .cat-arrow{font-size:9px;color:var(--ov0)}

.blk-item{
  display:flex;align-items:center;flex-wrap:wrap;gap:3px;
  padding:5px 8px;margin:1px 8px;
  border-radius:7px;cursor:pointer;
  font-size:11.5px;font-weight:500;user-select:none;
  transition:filter .1s,transform .1s}
.blk-item:hover{filter:brightness(1.12)}
.blk-item:active{transform:scale(.95)}

.blk-param{
  background:rgba(255,255,255,.22);
  border-radius:4px;padding:1px 6px;min-width:22px;
  text-align:center;font-weight:700;font-size:10px}

/* Category colors */
.blk-control  {background:#3730a3;color:#c7d2fe}
.blk-motion   {background:#9d174d;color:#fce7f3}
.blk-sensor   {background:#166534;color:#bbf7d0}
.blk-variable {background:#9a3412;color:#fed7aa}
.blk-other    {background:#374151;color:#d1d5db}

/* ══════════════════════════════════════════════════════════
   EDITOR PANE
══════════════════════════════════════════════════════════ */
.pane-editor{
  flex:1 1 56%;min-width:220px;
  display:flex;flex-direction:column}

.editor-tabs{
  display:flex;align-items:center;
  background:var(--mantle);border-bottom:1px solid var(--sur0);
  padding:0 4px;gap:0;flex-shrink:0;overflow-x:auto}
.editor-tab{
  display:flex;align-items:center;gap:5px;
  padding:7px 14px;font-size:12px;
  font-family:'Cascadia Code',Consolas,monospace;
  background:transparent;color:var(--sub);
  border:none;border-bottom:2px solid transparent;
  cursor:pointer;white-space:nowrap;transition:color .12s,background .12s;border-radius:0}
.editor-tab:hover{color:var(--text);background:rgba(120,169,255,.06)}
.editor-tab.active{color:var(--blue);border-bottom-color:var(--blue3);background:rgba(120,169,255,.08)}
.editor-tab .tab-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--blue);flex-shrink:0}
.editor-tab-add{
  padding:3px 10px;font-size:14px;background:transparent;color:var(--sur1);
  border:1px dashed var(--sur1);border-radius:2px;cursor:pointer;margin-left:4px}
.editor-tab-add:hover{color:var(--blue);border-color:var(--blue)}

.CodeMirror{
  flex:1 1 auto;height:100% !important;
  font-family:'Cascadia Code','Fira Code',Consolas,monospace !important;
  font-size:13px !important;line-height:1.7 !important;
  background:var(--base) !important}
.CodeMirror-scroll{overflow-y:scroll !important}
.CodeMirror-gutters{background:var(--mantle) !important;border-right:1px solid var(--sur0) !important}
.CodeMirror-linenumber{color:var(--ov0) !important;font-size:11px !important}
.CodeMirror-activeline-background{background:rgba(120,169,255,.05) !important}
.CodeMirror-cursor{border-left-color:var(--blue3) !important}

/* Editor status bar */
.editor-sb{
  height:22px;flex-shrink:0;
  background:var(--mantle);border-top:1px solid var(--sur0);
  display:flex;align-items:center;padding:0 10px;gap:0;
  font-size:10.5px;color:var(--ov0);overflow:hidden}
.editor-sb-item{
  padding:0 8px;white-space:nowrap;cursor:default;
  border-right:1px solid var(--sur1);height:100%;
  display:flex;align-items:center}
.editor-sb-item:last-child{border-right:none}
.editor-sb-item:hover{color:var(--text);background:rgba(120,169,255,.08)}
.editor-sb .ok-check{color:var(--green);font-weight:700}

/* ── Pane Resize Divider ───────────────────────────────── */
.pane-divider{
  width:5px;flex-shrink:0;
  background:var(--sur0);
  cursor:col-resize;
  position:relative;z-index:3;
  touch-action:none;
  transition:background .15s}
/* พื้นที่กดขยายล่องหน — ตัวจริงกว้าง 5px จับด้วยนิ้วยาก เลยขยาย hit-area
   ให้กว้างขึ้นด้วย pseudo-element (คลิก/แตะโดนก็ยังนับเป็นการกด .pane-divider ตัวจริง) */
.pane-divider::before{
  content:'';
  position:absolute;
  top:0;bottom:0;left:-11px;right:-11px}
.pane-divider::after{
  content:'';
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:1px;height:40px;
  background:var(--sur1);
  border-radius:1px;
  transition:background .15s,height .15s}
.pane-divider:hover,
.pane-divider.is-dragging{
  background:var(--blue3)}
.pane-divider:hover::after,
.pane-divider.is-dragging::after{
  background:rgba(255,255,255,.35);height:60px}

/* ══════════════════════════════════════════════════════════
   RIGHT PANE
══════════════════════════════════════════════════════════ */
.pane-right{
  flex:0 0 44%;min-width:280px;
  display:flex;flex-direction:column;overflow:hidden}

.pane-hdr{
  background:var(--mantle);border-bottom:1px solid var(--sur0);
  padding:6px 12px 6px 16px;font-size:10.5px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;color:var(--sub);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
  position:relative}
/* IBM-style: colored left accent bar on each panel header */
.pane-hdr::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--blue3)}

.pin-legend{
  font-size:9.5px;color:var(--sur1);letter-spacing:0;
  text-transform:none;font-weight:400;
  font-family:'Cascadia Code',Consolas,monospace}

.sensor-legend{font-size:10.5px;letter-spacing:0;text-transform:none;font-weight:400}
.sensor-legend::before{content:'';display:inline-block;width:7px;height:7px;
  border-radius:50%;background:#fa4d56;margin-right:3px;vertical-align:middle}
.sensor-legend::after{content:'';display:inline-block;width:7px;height:7px;
  border-radius:50%;background:#42be65;margin-left:7px;margin-right:3px;vertical-align:middle}

/* ── Simulator — ได้พื้นที่เต็มหลังลบ pane-data ── */
.pane-sim{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}

/* ── Mission HUD bar (นอก canvas) ── */
#mission-hud-bar,#ks-hud-bar,#yaku-hud-bar{
  display:flex;align-items:center;gap:0;flex-wrap:wrap;
  background:linear-gradient(90deg,#0f172a 0%,#1e1b4b 100%);
  border-bottom:1px solid rgba(99,102,241,.25);
  padding:4px 14px;flex-shrink:0;
  font-family:'Segoe UI',system-ui,sans-serif}
.mhud-btn{
  margin-left:8px;padding:2px 10px;font-size:11px;font-weight:700;
  color:#e0e7ff;background:rgba(99,102,241,.22);
  border:1px solid rgba(129,140,248,.5);border-radius:6px;cursor:pointer;
  transition:background .15s,opacity .15s}
.mhud-btn:hover{background:rgba(99,102,241,.4)}
.mhud-btn:disabled{opacity:.4;cursor:not-allowed}
.mhud-section{
  display:flex;align-items:center;gap:6px;
  padding:2px 14px}
.mhud-sep{
  width:1px;height:20px;
  background:rgba(255,255,255,.10);flex-shrink:0}
.mhud-icon{font-size:13px;line-height:1}
.mhud-val{
  font-size:14px;font-weight:700;
  color:#c7d2fe;font-variant-numeric:tabular-nums;min-width:38px}
.mhud-label{
  font-size:9px;font-weight:700;letter-spacing:.5px;
  color:rgba(148,163,184,.7);text-transform:uppercase}
.mhud-ammo-row{display:flex;align-items:center;gap:4px;line-height:1.6}
.mhud-ammo-lbl{
  font-size:9px;font-weight:700;color:rgba(148,163,184,.7);width:8px}
.mhud-dots{display:flex;gap:3px;align-items:center}
.mhud-dot{
  width:7px;height:7px;border-radius:50%;
  transition:background .2s}
.mhud-dot.on-f {background:#f59e0b;box-shadow:0 0 4px #f59e0b}
.mhud-dot.on-b {background:#60a5fa;box-shadow:0 0 4px #60a5fa}
.mhud-dot.off  {background:rgba(255,255,255,.15)}
.mhud-status{
  margin-left:auto;padding:2px 10px;border-radius:99px;
  font-size:11px;font-weight:700;letter-spacing:.3px;display:none}
.mhud-status.clear{
  display:block;background:rgba(74,222,128,.15);
  color:#4ade80;border:1px solid rgba(74,222,128,.3)}
.mhud-status.fail{
  display:block;background:rgba(248,113,113,.15);
  color:#f87171;border:1px solid rgba(248,113,113,.3)}
.sim-wrap{
  flex:1 1 auto;overflow:hidden;padding:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--base)}
#sim-canvas{
  display:block;border-radius:3px;
  box-shadow:0 0 0 1px rgba(120,169,255,.2),
             0 0 40px rgba(15,98,254,.12),
             0 4px 16px rgba(0,0,0,.6);
  border:1px solid rgba(120,169,255,.28);
  image-rendering:auto}

/* ── Data Panel (Sensors / Motors / Variables / Map) ── */
.pane-data{
  flex-shrink:0;
  height:28px;          /* collapsed = แค่ tabs strip */
  overflow:hidden;
  border-top:1px solid var(--sur0);
  display:flex;flex-direction:column;
  transition:height .2s cubic-bezier(.4,0,.2,1)}
.pane-data.is-open{
  height:106px}          /* tabs 28px + content 78px */

.data-tabs{
  display:flex;align-items:center;background:var(--mantle);
  border-bottom:1px solid var(--sur0);flex-shrink:0;height:28px}
.data-tabs-spacer{flex:1}
.data-tab{
  padding:5px 10px;font-size:10px;font-weight:700;
  background:transparent;border:none;color:var(--ov0);
  cursor:pointer;border-bottom:2px solid transparent;
  letter-spacing:.3px;text-transform:uppercase;height:100%;
  display:flex;align-items:center}
.data-tab:hover{color:var(--text);background:rgba(120,169,255,.05)}
.data-tab.active{color:var(--blue);border-bottom-color:var(--blue3)}

/* collapse/expand toggle */
.data-collapse-btn{
  width:28px;height:28px;padding:0;
  background:transparent;border:none;color:var(--ov0);
  font-size:10px;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-left:1px solid var(--sur0);border-radius:0;
  transition:color .15s,background .15s}
.data-collapse-btn:hover{color:var(--blue);background:rgba(120,169,255,.08)}
.pane-data.is-open .data-collapse-btn{color:var(--blue)}

.data-content{
  flex:1 1 auto;overflow-y:auto;
  display:flex;flex-direction:column}
.data-content.hidden{display:none}

/* Sensor cards — IBM Carbon data tile, compact */
.sensor-cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  flex:1 1 auto;padding:0;overflow:hidden;min-height:0;
  background:var(--sur1)}
.sensor-card{
  display:flex;flex-direction:column;align-items:flex-start;
  background:var(--sur0);
  padding:7px 8px 6px;gap:1px;min-width:0;
  position:relative;overflow:hidden}
.sensor-card.on-line::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--green)}
.sensor-card-label{font-size:9px;color:var(--ov0);text-transform:uppercase;letter-spacing:.4px;font-weight:600;line-height:1}
.sensor-card-pin  {font-size:8.5px;color:var(--ov0);font-family:'Cascadia Code',monospace;line-height:1}
.sensor-card-val  {
  font-size:20px;font-weight:400;
  font-family:'Cascadia Code',Consolas,monospace;
  color:var(--blue);line-height:1;margin-top:auto}
.sensor-card-unit {font-size:8px;color:var(--ov0)}
.sensor-bar-wrap  {width:100%;height:2px;background:var(--sur1);margin-top:3px}
.sensor-bar       {height:2px;background:var(--blue2);transition:width .15s}
.sensor-bar.on-line{background:var(--green)}

/* Motor display — compact */
.motor-cards{
  display:flex;gap:1px;flex:1;padding:0;overflow:hidden;
  background:var(--sur1)}
.motor-card{
  flex:1;display:flex;align-items:center;gap:10px;
  background:var(--sur0);padding:8px 12px}
.motor-label{font-size:9px;color:var(--ov0);font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.motor-val{
  font-size:22px;font-weight:400;
  font-family:'Cascadia Code',Consolas,monospace;color:var(--blue);line-height:1}
.motor-unit{font-size:8px;color:var(--ov0)}
.motor-arc-wrap{position:relative;width:52px;height:52px;flex-shrink:0}
.motor-arc-wrap canvas{display:block}
.motor-arc-text{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;font-family:'Cascadia Code',monospace;
  color:var(--blue)}

/* Variables / Map panels (placeholders) */
.data-placeholder{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--ov0);font-style:italic;padding:8px}

/* ── Console resize divider (แนวนอน) ── */
.console-divider{
  height:5px;flex-shrink:0;
  background:var(--sur0);
  cursor:row-resize;
  position:relative;z-index:3;
  transition:background .15s}
.console-divider::after{
  content:'';
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:40px;height:1px;
  background:var(--sur1);
  border-radius:1px;
  transition:background .15s,width .15s}
.console-divider:hover,
.console-divider.is-dragging{
  background:var(--blue3)}
.console-divider:hover::after,
.console-divider.is-dragging::after{
  background:rgba(255,255,255,.35);width:60px}

/* ── Console ── */
.pane-console{
  flex:1 1 160px;min-height:100px;
  border-top:2px solid var(--sur1);
  display:flex;flex-direction:column;overflow:hidden;background:var(--crust)}

.console-tabs{
  display:flex;align-items:center;
  background:var(--mantle);border-bottom:1px solid var(--sur0);
  flex-shrink:0;height:30px}
.console-tab{
  padding:0 14px;height:100%;font-size:10.5px;font-weight:600;
  background:transparent;border:none;color:var(--sub);
  cursor:pointer;border-bottom:2px solid transparent;
  letter-spacing:.2px;text-transform:uppercase;
  display:flex;align-items:center}
.console-tab:hover{color:var(--text);background:rgba(120,169,255,.05)}
.console-tab.active{color:var(--blue);border-bottom-color:var(--blue3)}
.console-tab-spacer{flex:1}

/* ── Sensor mini chips in console tab bar ── */
.sm-sensors{
  display:flex;align-items:center;gap:2px;
  padding:0 6px;border-left:1px solid var(--sur1)}
.sm-group-label{
  font-size:8.5px;font-weight:700;color:var(--ov0);
  letter-spacing:.5px;text-transform:uppercase;
  margin-right:4px;opacity:.7}
.sm-chip{
  display:inline-flex;align-items:baseline;gap:3px;
  padding:2px 6px;border-radius:2px;
  background:var(--sur0);
  border:1px solid transparent;
  transition:background .12s,border-color .12s;
  cursor:default}
.sm-chip.on-line{
  background:rgba(66,190,101,.13);
  border-color:rgba(66,190,101,.25)}
.sm-label{
  font-size:8.5px;font-weight:700;
  font-family:'Cascadia Code',monospace;
  color:var(--ov0);letter-spacing:.2px}
.sm-val{
  font-size:11px;font-weight:600;
  font-family:'Cascadia Code',monospace;
  color:var(--blue);min-width:27px;text-align:right;line-height:1}
.sm-chip.on-line .sm-label{color:rgba(66,190,101,.65)}
.sm-chip.on-line .sm-val  {color:var(--green)}

#console-output{
  flex:1 1 auto;overflow-y:auto;
  padding:6px 12px;
  font-family:'Cascadia Code',Consolas,monospace;
  font-size:12px;line-height:1.6}

.log-line        {color:var(--green)}
.log-line.error  {color:var(--red)}
.log-line.warn   {color:var(--yellow)}
.log-line.info   {color:var(--sub)}
.log-line.success{color:var(--blue)}

/* ══════════════════════════════════════════════════════════
   BOTTOM STATUS BAR — RazorIDE Identity Gradient
══════════════════════════════════════════════════════════ */
.app-statusbar{
  height:var(--sb);flex-shrink:0;
  background: linear-gradient(90deg,
    #0f2d5e 0%,
    #1a3a7a 30%,
    #1e2d6b 60%,
    #2a1a5e 100%);
  border-top: 1px solid rgba(56,189,248,0.25);
  box-shadow: 0 -1px 0 rgba(56,189,248,0.12), 0 -4px 16px rgba(0,0,0,0.4);
  display:flex;align-items:center;padding:0;
  font-size:10.5px;color:rgba(255,255,255,.85);
  overflow:hidden;
  position:fixed;bottom:0;left:0;right:0;width:100%;z-index:999;
}
.app-statusbar .sb-chip{
  padding:0 12px;height:100%;display:flex;align-items:center;
  border-right:1px solid rgba(255,255,255,.12);
  white-space:nowrap}
.app-statusbar .sb-chip:hover{background:rgba(255,255,255,.1);color:white;cursor:default}
.app-statusbar .sb-chip.accent{
  background:rgba(56,189,248,0.2);color:#7dd3fc;font-weight:700;
  border-right-color:rgba(56,189,248,0.25)}
.app-statusbar .sb-spacer{flex:1}
.app-statusbar .sb-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--green);box-shadow:0 0 5px var(--green);
  margin-right:8px;flex-shrink:0}
.app-statusbar .sb-dot.idle   {background:rgba(255,255,255,.4);box-shadow:none}
.app-statusbar .sb-dot.running{background:var(--yellow);box-shadow:0 0 5px var(--yellow)}
.app-statusbar .sb-dot.error  {background:#ff8389;box-shadow:0 0 5px #ff8389}

/* ══════════════════════════════════════════════════════════
   SCROLLBARS
══════════════════════════════════════════════════════════ */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sur1);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--ov0)}

/* ══════════════════════════════════════════════════════════
   MAP EDITOR MODAL
══════════════════════════════════════════════════════════ */
.me-overlay{
  position:fixed;inset:0;z-index:999;
  background:rgba(0,0,0,.72);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center}
.me-modal{
  background:var(--mantle);border:1px solid var(--sur0);border-radius:12px;
  display:flex;flex-direction:column;overflow:hidden;
  width:min(92vw,980px);height:min(90vh,660px);
  box-shadow:0 20px 72px rgba(0,0,0,.75),0 0 0 1px rgba(120,169,255,.06)}
.me-header{
  flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;background:var(--crust);border-bottom:1px solid var(--sur0);
  font-weight:700;font-size:15px;color:var(--blue)}
.me-toolbar{
  flex-shrink:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:7px 14px;border-bottom:1px solid var(--sur0);background:var(--base)}
.me-toolbar .btn-sm{padding:4px 10px}
.me-toolbar .btn-sm.active{
  background:var(--blue) !important;color:var(--crust) !important;
  border-color:var(--blue) !important}
.me-body{flex:1 1 auto;min-height:0;display:flex;overflow:hidden}
.me-canvas-wrap{
  flex:1 1 auto;min-width:0;min-height:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:10px;background:var(--base)}
#me-canvas{
  display:block;cursor:crosshair;border-radius:7px;
  box-shadow:0 0 22px rgba(15,98,254,.1),0 2px 16px rgba(0,0,0,.5);
  border:1px solid rgba(120,169,255,.14);max-width:100%;max-height:100%}
.me-panel{
  flex:0 0 212px;display:flex;flex-direction:column;gap:10px;
  padding:12px;border-left:1px solid var(--sur0);overflow:hidden}
.me-field{display:flex;flex-direction:column;gap:5px;flex-shrink:0}
.me-field-grow{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:5px}
.me-label{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ov0)}
.me-input{
  background:var(--sur0);border:1px solid var(--sur1);color:var(--text);
  border-radius:7px;padding:5px 8px;font-size:13px;outline:none;width:100%}
.me-input:focus{border-color:var(--blue)}
.me-saved-list{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.me-saved-row{
  display:flex;align-items:center;gap:5px;padding:5px 7px;
  background:var(--sur0);border-radius:7px;border:1px solid transparent;transition:border-color .12s}
.me-saved-row:hover{border-color:var(--sur1)}
.me-saved-row.editing{border-color:var(--blue)}
.me-saved-name{
  flex:1;font-size:12px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.me-saved-name:hover{color:var(--blue)}
.me-del-btn{
  flex-shrink:0;background:transparent;color:var(--red);
  border:1px solid var(--red) !important;
  padding:1px 5px;font-size:10px;border-radius:4px;opacity:.6;line-height:1.4}
.me-del-btn:hover{opacity:1 !important}
.me-empty{font-size:12px;color:var(--ov0);font-style:italic;padding:4px 2px}
.me-actions{display:flex;gap:6px;flex-shrink:0;padding-top:4px}
.me-actions button{padding:6px 8px;font-size:12px}
.me-hint{
  flex-shrink:0;padding:5px 16px;background:var(--crust);
  border-top:1px solid var(--sur0);font-size:10.5px;color:var(--sur1);text-align:center}
.me-header-sub{font-size:10.5px;font-weight:400;color:var(--ov0);margin-left:6px}
.me-tool-group-label{
  font-size:9.5px;color:var(--ov0);font-weight:600;
  letter-spacing:.4px;text-transform:uppercase;align-self:center;flex-shrink:0}
.me-dir-pick{display:flex;gap:5px}
.me-dir-btn{
  flex:1;aspect-ratio:1/1;padding:0;min-width:0;
  font-size:17px;line-height:1;
  background:var(--sur0);color:var(--sub);
  border:1px solid var(--sur1) !important;border-radius:8px}
.me-dir-btn:hover:not(:disabled){opacity:.75;transform:none}
.me-dir-btn.active{
  background:rgba(15,98,254,.22) !important;
  color:var(--blue) !important;border-color:var(--blue) !important}
.me-type-badge{
  flex-shrink:0;width:16px;height:16px;border-radius:4px;
  background:var(--sur1);color:var(--text);font-size:9px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  line-height:1;font-family:monospace;margin-right:2px}
.me-saved-row .me-type-badge{background:rgba(15,98,254,.28);color:var(--blue)}

/* Map-editor canvas cursors */
#me-canvas.tool-select        { cursor: default; }
#me-canvas.tool-select.hover  { cursor: move; }
#me-canvas.tool-select.resize-nw,
#me-canvas.tool-select.resize-se { cursor: nwse-resize; }
#me-canvas.tool-select.resize-ne,
#me-canvas.tool-select.resize-sw { cursor: nesw-resize; }
#me-canvas.tool-select.resize-n,
#me-canvas.tool-select.resize-s  { cursor: ns-resize; }
#me-canvas.tool-select.resize-e,
#me-canvas.tool-select.resize-w  { cursor: ew-resize; }

/* ══════════════════════════════════════════════════════════
   ROBOT CONFIG MODAL
══════════════════════════════════════════════════════════ */
.rc-overlay{
  position:fixed;inset:0;z-index:999;
  background:rgba(0,0,0,.7);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center}
.rc-modal{
  background:var(--mantle);border:1px solid var(--sur0);border-radius:12px;
  display:flex;flex-direction:column;overflow:hidden;
  width:min(92vw,420px);
  box-shadow:0 16px 64px rgba(0,0,0,.7)}
.rc-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;background:var(--crust);border-bottom:1px solid var(--sur0);
  font-weight:700;font-size:15px;color:var(--blue);flex-shrink:0}
.rc-header-sub{font-size:10.5px;font-weight:400;color:var(--ov0);margin-left:6px}
.rc-presets{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  padding:12px 14px 8px;flex-shrink:0}
.rc-preset-btn{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px 6px;border-radius:10px;cursor:pointer;
  background:var(--sur0);border:2px solid transparent !important;
  color:var(--sub);transition:border-color .15s,background .15s;
  white-space:normal;text-align:center;line-height:1.2}
.rc-preset-btn:hover:not(:disabled){background:var(--base);border-color:var(--sur1) !important}
.rc-preset-btn.active{background:rgba(15,98,254,.12);border-color:var(--blue) !important;color:var(--text)}
.rc-preset-icon{font-size:22px;line-height:1}
.rc-preset-name{font-size:10px;font-weight:700;color:inherit}
.rc-preset-desc{font-size:9px;color:var(--ov0);font-weight:400}
.rc-params{display:flex;flex-direction:column;gap:6px;padding:8px 14px 12px;flex-shrink:0}
.rc-param-row{display:grid;grid-template-columns:130px 1fr 44px;align-items:center;gap:8px}
.rc-param-label{font-size:11px;color:var(--sub);white-space:nowrap;text-align:right}
.rc-slider{width:100%;accent-color:var(--blue);cursor:pointer}
.rc-param-val{
  font-size:11px;font-weight:700;color:var(--blue);
  font-family:'Cascadia Code',Consolas,monospace;text-align:left;white-space:nowrap}
.rc-hint{
  flex-shrink:0;padding:6px 14px;background:var(--crust);
  border-top:1px solid var(--sur0);font-size:10px;color:var(--sur1);
  text-align:center;line-height:1.5}

/* ══════════════════════════════════════════════════════════
   DEBUG PANEL
══════════════════════════════════════════════════════════ */
#debug-panel{
  position:fixed;bottom:34px;right:12px;z-index:500;
  background:rgba(11,17,32,.95);border:1px solid var(--sur0);
  border-radius:10px;padding:8px 10px;min-width:220px;
  font-family:'Cascadia Code',Consolas,monospace;font-size:11px;
  color:var(--text);display:none;flex-direction:column;gap:3px;
  backdrop-filter:blur(8px);box-shadow:0 4px 24px rgba(0,0,0,.6)}
.dbg-header{
  display:flex;align-items:center;justify-content:space-between;
  font-weight:700;font-size:12px;color:var(--blue);margin-bottom:4px}
.dbg-close{
  background:transparent;color:var(--ov0);padding:0 4px;
  font-size:11px;border:none;cursor:pointer;border-radius:4px}
.dbg-close:hover{color:var(--red)}
.dbg-row{color:var(--sub);padding:1px 0;white-space:nowrap}
.dbg-check{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--sub)}
.dbg-check input{accent-color:var(--blue)}
.dbg-sep{
  color:var(--ov0);font-size:10px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;margin:5px 0 2px;border-top:1px solid var(--sur0);padding-top:4px}

/* speed slider */
.speed-wrap{font-size:12px;color:var(--sub);display:flex;align-items:center;gap:5px;flex-shrink:0}
input[type=range]{accent-color:var(--blue);width:70px}

/* ── Block Editor (Blockly) ─────────────────────────────── */
#pane-editor-inner{
  display:flex;flex-direction:column;flex:1;overflow:hidden}
#block-editor-wrap{
  display:none;flex-direction:column;flex:1;overflow:hidden}
.block-editor-hdr{
  height:42px;flex-shrink:0;
  background: linear-gradient(135deg, #071830 0%, #0c1f3a 100%);
  border-bottom: 2px solid rgba(56,189,248,0.2);
  display:flex;align-items:center;gap:8px;padding:0 14px;
  position:relative;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.block-editor-hdr::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:3px;
  background: linear-gradient(180deg, var(--blue), var(--mauve));
  box-shadow: 0 0 8px var(--blue);
}
.block-editor-title{
  font-size:12px;font-weight:700;
  color:var(--blue);
  letter-spacing:.3px;
  text-shadow: 0 0 10px rgba(56,189,248,0.5);
}
#blocklyDiv{
  flex:1;width:100%;min-height:0}
/* Blockly — พื้น editor มีสีน้ำเงินเข้มอ่อนๆ */
.blocklySvg{background:#0a1628 !important}
.blocklyMainBackground{fill:#0a1628 !important}
.blocklyToolboxDiv{
  background:var(--mantle) !important;
  border-right:1px solid var(--sur0) !important;
  padding:6px !important;
  box-sizing:border-box !important}
.blocklyToolboxContents{
  display:flex !important;flex-direction:column !important;gap:4px !important}
/* ช่องว่างระหว่างกลุ่มหมวด (แทนเส้นคั่นเดิม) ให้เว้นเท่ากับ gap ปกติ */
.blocklyTreeSeparator{
  height:1px !important;margin:1px 0 !important;
  border:none !important;background:transparent !important}
.blocklyToolboxCategory{width:100%}

/* การ์ดหมวด — ไล่เฉดสีต่อหมวด (คำนวณจาก colour ใน TOOLBOX ผ่าน JS ใน block-editor.js) */
.blocklyTreeRow{
  display:flex !important;align-items:center !important;
  height:auto !important;min-height:32px;box-sizing:border-box;
  padding:6px 8px !important;
  border-radius:7px !important;
  border-left:none !important;
  box-shadow:0 1px 2px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08);
  cursor:pointer;
  transition:filter .12s,transform .12s,box-shadow .12s}
.blocklyTreeRow:hover{filter:brightness(1.12);transform:translateX(1px)}
.blocklyTreeRowContentContainer{
  display:flex !important;align-items:center !important;gap:6px !important;width:100%}

/* ไอคอนวงกลม — ตัวกลม (blocklyTreeIcon) + ไอคอน SVG mask (::before) ต่อหมวด
   ผ่าน cssConfig.icon ที่ผูกไว้ใน TOOLBOX (js/ui/block-editor.js) — เป็น SVG
   ล้วนๆ ไม่พึ่งฟอนต์อีโมจิของเครื่อง จึงหน้าตาเหมือนกันทุก OS/เบราว์เซอร์ */
.blocklyTreeIcon{
  width:19px !important;height:19px !important;flex-shrink:0;
  border-radius:50% !important;
  background:rgba(0,0,0,.24) !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  position:relative;
  visibility:visible !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.blocklyTreeIcon::before{
  content:'';display:block;width:11px;height:11px;flex-shrink:0;
  background:#fff;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}

.cat-ic-razors3::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='7' width='10' height='8' rx='2'/%3E%3Cpath d='M3 11H1M19 11h-2M5 15H3M17 15h-2'/%3E%3Crect x='7.3' y='3' width='5.4' height='3' rx='1'/%3E%3Ccircle cx='7.8' cy='11' r='1' fill='white' stroke='none'/%3E%3Ccircle cx='12.2' cy='11' r='1' fill='white' stroke='none'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='7' width='10' height='8' rx='2'/%3E%3Cpath d='M3 11H1M19 11h-2M5 15H3M17 15h-2'/%3E%3Crect x='7.3' y='3' width='5.4' height='3' rx='1'/%3E%3Ccircle cx='7.8' cy='11' r='1' fill='white' stroke='none'/%3E%3Ccircle cx='12.2' cy='11' r='1' fill='white' stroke='none'/%3E%3C/svg%3E")}

.cat-ic-motor::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='2.6'/%3E%3Cpath d='M10 2v2.6M10 15.4V18M2 10h2.6M15.4 10H18M4.5 4.5l1.8 1.8M13.7 13.7l1.8 1.8M4.5 15.5l1.8-1.8M13.7 6.3l1.8-1.8'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='2.6'/%3E%3Cpath d='M10 2v2.6M10 15.4V18M2 10h2.6M15.4 10H18M4.5 4.5l1.8 1.8M13.7 13.7l1.8 1.8M4.5 15.5l1.8-1.8M13.7 6.3l1.8-1.8'/%3E%3C/svg%3E")}

.cat-ic-launcher::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2.5v12M10 2.5l-4 5M10 2.5l4 5M5.5 17h9'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2.5v12M10 2.5l-4 5M10 2.5l4 5M5.5 17h9'/%3E%3C/svg%3E")}

.cat-ic-gripper::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3C4 5 3 8 3 11c0 2 1 3 2.5 3'/%3E%3Cpath d='M13 3c3 2 4 5 4 8c0 2-1 3-2.5 3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3C4 5 3 8 3 11c0 2 1 3 2.5 3'/%3E%3Cpath d='M13 3c3 2 4 5 4 8c0 2-1 3-2.5 3'/%3E%3C/svg%3E")}

.cat-ic-linepid::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M6 2v16' stroke-dasharray='3 2'/%3E%3Cpath d='M14 2v16' stroke-dasharray='3 2'/%3E%3Crect x='8.5' y='8.5' width='3' height='3' rx='0.6' fill='white' stroke='none'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M6 2v16' stroke-dasharray='3 2'/%3E%3Cpath d='M14 2v16' stroke-dasharray='3 2'/%3E%3Crect x='8.5' y='8.5' width='3' height='3' rx='0.6' fill='white' stroke='none'/%3E%3C/svg%3E")}

.cat-ic-advanced::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath d='M10 1v3M10 16v3M1 10h3M16 10h3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath d='M10 1v3M10 16v3M1 10h3M16 10h3'/%3E%3C/svg%3E")}

.cat-ic-sensors::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10' cy='15' r='1.2' fill='white' stroke='none'/%3E%3Cpath d='M6.3 12a5.5 5.5 0 0 1 7.4 0'/%3E%3Cpath d='M3 8.5a10 10 0 0 1 14 0'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10' cy='15' r='1.2' fill='white' stroke='none'/%3E%3Cpath d='M6.3 12a5.5 5.5 0 0 1 7.4 0'/%3E%3Cpath d='M3 8.5a10 10 0 0 1 14 0'/%3E%3C/svg%3E")}

.cat-ic-timing::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M10 5.5V10l3.2 2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7.5'/%3E%3Cpath d='M10 5.5V10l3.2 2'/%3E%3C/svg%3E")}

.cat-ic-sound::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h3l4.5-3.3v10.6L6 12H3z'/%3E%3Cpath d='M14 7.3a4.6 4.6 0 0 1 0 5.4' fill='none'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h3l4.5-3.3v10.6L6 12H3z'/%3E%3Cpath d='M14 7.3a4.6 4.6 0 0 1 0 5.4' fill='none'/%3E%3C/svg%3E")}

.cat-ic-serial::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='15' height='11' rx='1.5'/%3E%3Cpath d='M5.5 8.3 8 10l-2.5 1.7'/%3E%3Cpath d='M10.3 12h4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='15' height='11' rx='1.5'/%3E%3Cpath d='M5.5 8.3 8 10l-2.5 1.7'/%3E%3Cpath d='M10.3 12h4'/%3E%3C/svg%3E")}

.cat-ic-control::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6h4l10 8h1'/%3E%3Cpath d='M2.5 14h4l10-8h1'/%3E%3Cpath d='M15 4l2.5 2-2.5 2'/%3E%3Cpath d='M15 12l2.5 2-2.5 2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6h4l10 8h1'/%3E%3Cpath d='M2.5 14h4l10-8h1'/%3E%3Cpath d='M15 4l2.5 2-2.5 2'/%3E%3Cpath d='M15 12l2.5 2-2.5 2'/%3E%3C/svg%3E")}

.cat-ic-logic::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M10 2.5 17 10 10 17.5 3 10z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M10 2.5 17 10 10 17.5 3 10z'/%3E%3C/svg%3E")}

.cat-ic-math::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M10 4v12M4 10h12'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M10 4v12M4 10h12'/%3E%3C/svg%3E")}

.cat-ic-variables::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7' width='13' height='9' rx='1.5'/%3E%3Cpath d='M7.5 7V5.3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1V7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7' width='13' height='9' rx='1.5'/%3E%3Cpath d='M7.5 7V5.3a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1V7'/%3E%3C/svg%3E")}

.cat-ic-functions::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.8 3.3a3.3 3.3 0 0 0-4.3 4.3L4 13.1v2.9h2.9l5.5-5.5a3.3 3.3 0 0 0 4.3-4.3l-2.4 2.4-1.9-.5-.5-1.9z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.8 3.3a3.3 3.3 0 0 0-4.3 4.3L4 13.1v2.9h2.9l5.5-5.5a3.3 3.3 0 0 0 4.3-4.3l-2.4 2.4-1.9-.5-.5-1.9z'/%3E%3C/svg%3E")}

.blocklyTreeLabel{
  color:#fff !important;font-size:10.5px !important;font-weight:700 !important;
  text-transform:uppercase;letter-spacing:.2px;
  padding:0 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.4)}

/* หมวดที่เลือก: ขอบขาวเรืองรอบการ์ด แทนที่จะทับพื้นไล่เฉด */
.blocklyTreeSelected{
  box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.4) !important;
  border-left:none !important}
.blocklyTreeSelected .blocklyTreeLabel{color:#fff !important;font-weight:700 !important}

.blocklyFlyoutBackground{fill:#262626 !important;fill-opacity:1 !important}
.blocklyScrollbarHandle{fill:var(--sur1) !important}
.blocklyZoom>image,.blocklyZoom>svg{opacity:.5}
.blocklyZoom>image:hover,.blocklyZoom>svg:hover{opacity:1}
/* IBM grid dots on workspace */
.blocklyGridPattern circle,.blocklyGridPattern path{stroke:rgba(120,169,255,.08) !important}
/* Setup/Loop blocks — highlight */
.blocklyPath[fill='#0f62fe']{filter:drop-shadow(0 0 4px rgba(15,98,254,0.4))}


/* ══════════════════════════════════════════════════════════
   MAP SELECTOR POPUP
══════════════════════════════════════════════════════════ */
.map-popup-overlay{
  position:fixed;inset:0;z-index:9990;
  background:rgba(0,0,0,.7);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center}
.map-popup-overlay.hidden{display:none}

.map-popup-card{
  background:var(--mantle);
  border:1px solid var(--sur1);border-radius:6px;
  width:680px;max-width:96vw;max-height:90vh;
  overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.75);
  display:flex;flex-direction:column}

/* Header */
.map-popup-hdr{
  background:var(--base);
  border-bottom:1px solid var(--sur1);
  height:48px;padding:0 20px;flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between}
.map-popup-title{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:var(--text)}
.map-popup-close{
  width:28px;height:28px;border-radius:4px;
  background:transparent;border:none;
  color:var(--sub);font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.map-popup-close:hover{background:var(--sur1);color:var(--text)}

/* Body layout */
.map-popup-body{display:flex;overflow:hidden;flex:1}

/* Preview column */
.map-popup-preview-col{
  width:280px;flex-shrink:0;
  background:var(--base);border-right:1px solid var(--sur1);
  padding:20px;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px}
#map-preview-canvas{
  width:100%;height:auto;
  border:1px solid var(--sur1);border-radius:4px;
  background:var(--sur0);display:block}
.mp-preview-lbl{
  font-size:11px;color:var(--sub);text-align:center;
  word-break:break-all}

/* Controls column */
.map-popup-ctrl-col{
  flex:1;padding:20px;
  display:flex;flex-direction:column;gap:7px;
  overflow-y:auto;min-width:0}

/* ── Map popup tabs ── */
.mp-tabs{
  display:flex;gap:2px;
  padding:8px 12px 0;
  border-bottom:1px solid var(--sur1);
  background:var(--mantle)}
.mp-tab{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 14px;font-size:12px;font-weight:600;
  border:none;border-radius:6px 6px 0 0;
  background:transparent;color:var(--sub);cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color .12s,background .12s,border-color .12s;
  margin-bottom:-1px}
.mp-tab:hover{color:var(--text);background:rgba(120,169,255,.06)}
.mp-tab.active{
  color:var(--blue);
  background:rgba(15,98,254,.08);
  border-bottom:2px solid var(--blue)}
.mp-tab svg{opacity:.7;flex-shrink:0}
.mp-tab.active svg{opacity:1}

.mp-label{
  font-size:10px;font-weight:700;
  color:var(--sub);text-transform:uppercase;letter-spacing:.6px}
.mp-select{
  width:100%;
  background:var(--sur0);color:var(--text);
  border:1px solid var(--sur1);border-radius:4px;
  padding:7px 10px;font-size:13px;outline:none;cursor:pointer}
.mp-select:focus{border-color:var(--blue)}

.mp-divider{height:1px;background:var(--sur1);margin:4px 0}

/* Scale inputs */
.mp-scale-row{display:flex;align-items:center;gap:8px}
.mp-scale-field{display:flex;align-items:center;gap:5px;flex:1;min-width:0}
.mp-scale-sub{font-size:11px;color:var(--sub);min-width:30px}
.mp-scale-input{
  flex:1;min-width:0;
  background:var(--sur0);color:var(--text);
  border:1px solid var(--sur1);border-radius:4px;
  padding:6px 8px;font-size:13px;text-align:center;
  -moz-appearance:textfield;outline:none}
.mp-scale-input::-webkit-inner-spin-button,
.mp-scale-input::-webkit-outer-spin-button{-webkit-appearance:none}
.mp-scale-input:focus{border-color:var(--blue)}
.mp-scale-times{font-size:14px;color:var(--sub);flex-shrink:0}
.mp-scale-unit{font-size:12px;color:var(--sub);flex-shrink:0}
.mp-scale-hint{
  font-size:11px;color:var(--blue);
  background:rgba(15,98,254,.08);
  border:1px solid rgba(15,98,254,.18);
  border-radius:3px;padding:4px 9px;line-height:1.4}

/* Upload button */
.mp-upload-btn{
  display:flex;align-items:center;gap:8px;
  padding:8px 14px;width:100%;
  background:var(--sur0);border:1px solid var(--sur1);
  border-radius:4px;color:var(--sub);font-size:13px;cursor:pointer}
.mp-upload-btn:hover{background:var(--sur1);border-color:var(--ov0);color:var(--text)}

/* Delete button (สนามอัปโหลดเท่านั้น) */
.mp-delete-btn{
  width:100%;padding:7px 14px;margin-bottom:10px;
  background:transparent;border:1px solid rgba(239,68,68,.35);
  border-radius:4px;color:rgba(239,68,68,.75);
  font-size:12px;cursor:pointer;text-align:center;transition:all .15s}
.mp-delete-btn:hover{
  background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.65);
  color:#ef4444}

/* Footer */
.mp-footer{
  display:flex;gap:8px;
  margin-top:auto;padding-top:14px;
  border-top:1px solid var(--sur1);flex-shrink:0}
.mp-btn-cancel{flex:1;justify-content:center;padding:8px 0}
.mp-btn-save{
  flex:2;justify-content:center;padding:8px 0;
  display:flex;align-items:center;gap:6px}

/* ══════════════════════════════════════════════════════════
   ROBOT SELECTOR POPUP
══════════════════════════════════════════════════════════ */
.rs-overlay{
  position:fixed;inset:0;z-index:9991;
  background:rgba(3,8,18,.75);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center}
.rs-overlay.hidden{display:none}

@keyframes rsPopIn{
  from{opacity:0;transform:translateY(6px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.rs-card-popup{
  background:var(--mantle);
  border:1px solid var(--sur0);
  border-radius:14px;
  width:520px;max-width:96vw;
  max-height:90vh;
  display:flex;flex-direction:column;
  overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.6),0 0 0 1px rgba(56,189,248,.05);
  animation:rsPopIn .18s cubic-bezier(.2,.7,.3,1)}

/* ─ Header ──────────────────────────────────────────────── */
.rs-popup-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 18px;
  background:var(--crust);
  border-bottom:1px solid var(--sur0);flex-shrink:0}
.rs-popup-title{
  display:flex;align-items:center;gap:9px;
  font-size:14px;font-weight:700;color:var(--text);letter-spacing:.02em}
.rs-hdr-icon{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(145deg,var(--blue),var(--blue3));
  color:#04121f;
  box-shadow:0 2px 10px rgba(56,189,248,.35)}
.rs-popup-sub{
  font-size:11px;font-weight:400;color:var(--sub);margin-left:2px}
.rs-close-btn{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:7px;
  background:transparent;border:none;cursor:pointer;color:var(--sub);
  transition:background .15s,color .15s}
.rs-close-btn:hover{background:var(--sur0);color:var(--text)}

/* ─ Cards grid ──────────────────────────────────────────── */
.rs-cards-grid{
  display:flex;flex-wrap:wrap;gap:10px;
  padding:16px 18px;overflow-y:auto;flex-shrink:0;
  min-height:120px}
.rs-cards-grid::-webkit-scrollbar{width:8px}
.rs-cards-grid::-webkit-scrollbar-track{background:transparent}
.rs-cards-grid::-webkit-scrollbar-thumb{background:var(--sur1);border-radius:99px}
.rs-cards-grid::-webkit-scrollbar-thumb:hover{background:var(--ov0)}

.rs-card{
  width:138px;
  border:1.5px solid var(--sur0);
  border-radius:10px;
  background:var(--base);
  padding:10px 10px 8px;
  cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s,transform .1s;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  position:relative}
.rs-card:hover{border-color:var(--blue);background:var(--sur0);transform:translateY(-1px)}
.rs-card.active{
  border-color:var(--blue);
  background:linear-gradient(160deg,rgba(56,189,248,.14),rgba(56,189,248,.03));
  box-shadow:0 4px 18px rgba(56,189,248,.22)}

.rs-card-img{
  width:72px;height:72px;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:var(--sur0);
  color:var(--sub);overflow:hidden}
.rs-card-img img{width:100%;height:100%;object-fit:contain}
.rs-default-icon{width:44px;height:44px;opacity:.65}
.rs-card.active .rs-default-icon{opacity:.9;color:var(--blue)}

.rs-card-name{
  font-size:12px;font-weight:700;color:var(--text);
  text-align:center;line-height:1.2;margin-top:2px}
.rs-card-sub{
  font-size:10px;color:var(--sub);text-align:center;line-height:1.2}
.rs-card-badge{
  position:absolute;top:6px;right:6px;
  font-size:9px;font-weight:700;letter-spacing:.04em;
  background:linear-gradient(135deg,var(--blue),var(--blue2));color:#04121f;
  border-radius:99px;padding:2px 7px;
  box-shadow:0 2px 6px rgba(56,189,248,.4)}

/* ─ Info panel ──────────────────────────────────────────── */
.rs-info-panel{
  border-top:1px solid var(--sur0);
  background:var(--base);
  padding:12px 18px;
  flex-shrink:0;min-height:80px}
.rs-info-row{
  display:grid;grid-template-columns:64px 1fr;align-items:baseline;gap:10px;
  font-size:12.5px;color:var(--text);margin-bottom:5px}
.rs-info-lbl{
  color:var(--sub);font-size:11px}
.rs-info-val{color:var(--text);font-weight:500}
.rs-ver-tag{
  font-size:10px;background:var(--sur1);
  border-radius:99px;padding:1px 7px;
  color:var(--sub);font-weight:400;margin-left:4px}
.rs-info-desc{
  font-size:11px;color:var(--sub);
  padding-top:4px;line-height:1.5}
.rs-info-pins{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.rs-pin-tag{
  font-size:9.5px;font-family:'Cascadia Code',monospace;font-weight:600;
  background:rgba(120,169,255,.15);
  border:1px solid rgba(120,169,255,.25);
  color:var(--blue);border-radius:4px;
  padding:1px 6px}
.rs-pin-tof{
  background:rgba(66,190,101,.12);
  border-color:rgba(66,190,101,.25);
  color:var(--green)}
.rs-custom-tag{
  font-size:9px;font-weight:600;letter-spacing:.3px;
  background:rgba(241,194,27,.12);
  border:1px solid rgba(241,194,27,.25);
  color:var(--yellow);border-radius:4px;
  padding:1px 6px;margin-left:4px;text-transform:uppercase}

/* ─ Footer ──────────────────────────────────────────────── */
.rs-popup-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;
  background:var(--crust);
  border-top:1px solid var(--sur0);flex-shrink:0}
.rs-footer-right{display:flex;gap:8px}

.rs-btn-config{
  display:flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:7px;
  border:1px solid var(--sur0);background:var(--sur0);
  color:var(--sub);font-size:12px;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s}
.rs-btn-config:hover{border-color:var(--ov0);color:var(--text);background:var(--sur1)}

.rs-btn-cancel{
  padding:7px 16px;border-radius:7px;
  border:1px solid transparent;background:transparent;
  color:var(--sub);font-size:12px;cursor:pointer;
  transition:background .15s,color .15s}
.rs-btn-cancel:hover{background:var(--sur0);color:var(--text)}

.rs-btn-apply{
  padding:7px 22px;border-radius:7px;
  border:none;background:linear-gradient(135deg,var(--blue),var(--blue3));
  color:#04121f;font-size:12px;font-weight:700;cursor:pointer;
  box-shadow:0 3px 14px rgba(56,189,248,.35);
  transition:filter .15s,transform .1s}
.rs-btn-apply:hover{filter:brightness(1.08)}
.rs-btn-apply:active{transform:translateY(1px)}

/* ─ Robot Selector footer-left group ───────────────────── */
.rs-footer-left{display:flex;gap:8px}
.rs-btn-realism{color:var(--mauve)!important}
.rs-btn-realism:hover{border-color:var(--mauve)!important;color:var(--mauve)!important}

/* ══════════════════════════════════════════════════════════
   REALISM SETTINGS POPUP
══════════════════════════════════════════════════════════ */
.rl-overlay{
  position:fixed;inset:0;z-index:9993;
  background:rgba(0,0,0,.78);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center}
.rl-overlay.hidden{display:none}

.rl-popup{
  background:var(--mantle);
  border:1px solid var(--sur1);
  border-radius:12px;
  width:460px;max-width:96vw;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.6)}

/* Header */
.rl-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 18px;
  border-bottom:1px solid var(--sur1);
  background:var(--base)}
.rl-title{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--text)}
.rl-sub{font-size:10px;font-weight:400;color:var(--sub);margin-left:1px}
.rl-close-btn{
  background:none;border:none;color:var(--sub);cursor:pointer;
  padding:3px;border-radius:4px;display:flex;align-items:center}
.rl-close-btn:hover{color:var(--text);background:var(--sur1)}

/* Sections */
.rl-section{
  padding:14px 18px;
  border-bottom:1px solid var(--sur1)}

.rl-sec-hd{
  display:flex;align-items:center;gap:8px;
  margin-bottom:11px}
.rl-sec-label{
  font-size:10px;font-weight:700;letter-spacing:.08em;
  color:var(--sub);white-space:nowrap}
.rl-sec-hint{
  font-size:11px;font-weight:400;color:var(--ov0);
  flex:1}
.rl-reset-btn{
  margin-left:auto;font-size:10px;color:var(--sub);cursor:pointer;
  background:none;border:1px solid var(--sur1);
  border-radius:4px;padding:2px 8px;white-space:nowrap}
.rl-reset-btn:hover{color:var(--text);border-color:var(--ov0)}

/* Toggle button group */
.rl-toggle-group{display:flex;gap:6px;flex-wrap:wrap}
.rl-toggle{
  padding:6px 12px;border-radius:6px;
  border:1px solid var(--sur1);background:var(--base);
  color:var(--sub);font-size:12px;cursor:pointer;
  transition:border-color .1s,color .1s,background .1s}
.rl-toggle:hover{border-color:var(--ov0);color:var(--text)}
.rl-toggle.active{
  border-color:var(--blue2);background:rgba(69,137,255,.14);
  color:var(--blue)}
.rl-tag{font-size:10px;color:var(--ov0);margin-left:2px}
.rl-toggle.active .rl-tag{color:var(--blue)}
.rl-brake-icon{font-size:11px;line-height:1}

/* Bias sliders */
.rl-bias-row{
  display:flex;align-items:center;gap:10px;
  margin-bottom:8px}
.rl-bias-lbl{
  font-size:11px;color:var(--sub);
  width:42px;flex-shrink:0}
.rl-slider{
  -webkit-appearance:none;appearance:none;
  flex:1;height:4px;
  background:var(--sur1);border-radius:2px;cursor:pointer}
.rl-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:var(--blue2);cursor:pointer;
  box-shadow:0 0 0 3px rgba(69,137,255,.25)}
.rl-slider::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;border:none;
  background:var(--blue2);cursor:pointer}
.rl-bias-val{
  font-size:12px;font-weight:700;
  width:38px;text-align:right;flex-shrink:0;
  transition:color .1s}
.rl-bias-note{
  font-size:10px;color:var(--ov0);
  margin-top:2px;line-height:1.4}

/* Footer */
.rl-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 18px;background:var(--base)}
.rl-footer-note{font-size:10px;color:var(--ov0)}
.rl-btn-done{
  padding:7px 22px;border-radius:6px;
  border:none;background:var(--blue2);
  color:#fff;font-size:12px;font-weight:600;cursor:pointer}
.rl-btn-done:hover{background:var(--blue)}

/* ══════════════════════════════════════════════════════════
   3D VIEW TOGGLE
══════════════════════════════════════════════════════════ */
.view-toggle{display:flex;background:var(--sur0);border:1px solid var(--sur1);
  border-radius:3px;overflow:hidden;flex-shrink:0}
.view-btn{padding:3px 10px;font-size:10.5px;font-weight:700;letter-spacing:.3px;
  border:none;border-radius:0;background:transparent;color:var(--ov0);cursor:pointer;
  transition:background .12s,color .12s}
.view-btn:hover{background:var(--sur1);color:var(--text)}
.view-btn.active{background:var(--blue3);color:#fff}
.view-btn+.view-btn{border-left:1px solid var(--sur1)}
.cam-btns{display:flex;align-items:center;gap:2px;background:var(--sur0);
  border:1px solid var(--sur1);border-radius:3px;padding:2px;flex-shrink:0}
.cam-btn{width:24px;height:24px;padding:0;border:none;border-radius:2px;
  background:transparent;color:var(--ov0);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s}
.cam-btn:hover{background:var(--sur1);color:var(--text)}
.cam-btn.active{background:rgba(15,98,254,.25);color:var(--blue)}
#sim-3d-container{pointer-events:none}
#sim-3d-container.active{pointer-events:auto}
#sim-3d-container canvas{border-radius:0;display:block;width:100%;height:100%}

/* ══════════════════════════════════════════════════════════
   SIM HEADER polish
══════════════════════════════════════════════════════════ */
.sim-hdr{padding:0 10px 0 12px;justify-content:space-between}
.pane-hdr-title{font-size:10.5px;font-weight:700;color:var(--sub);
  letter-spacing:.6px;text-transform:uppercase}
.sim-hdr-right{display:flex;align-items:center;gap:5px;flex-wrap:nowrap;overflow:hidden}
.legend-dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0}
.legend-dot.on{background:var(--green)}
.legend-dot.off{background:var(--ov0)}
.legend-txt{font-size:9.5px;color:var(--ov0)}
.sensor-legend-row{display:flex;align-items:center;gap:4px;flex-shrink:0}

/* ══════════════════════════════════════════════════════════
   DATA PANEL — pro sensor cards + motor arcs
══════════════════════════════════════════════════════════ */
.sensor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:1px;background:var(--sur0)}
.sensor-card{background:var(--base);display:flex;flex-direction:column;
  align-items:flex-start;padding:6px 9px;gap:1px;min-width:0;
  position:relative;overflow:hidden;cursor:default}
.sensor-card::before{content:'';position:absolute;left:0;top:0;bottom:0;
  width:2px;background:var(--sur1);transition:background .15s}
.sensor-card.on-line::before{background:var(--green)}
.sensor-card-wide{grid-column:span 2}
.sensor-card-label{font-size:8.5px;color:var(--ov0);font-weight:600;
  text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.sensor-card-pin{font-size:8px;color:var(--sur1);font-family:'Cascadia Code',monospace;
  white-space:nowrap}
.sensor-card-val{font-size:17px;font-weight:400;
  font-family:'Cascadia Code',Consolas,monospace;
  color:var(--blue);line-height:1.1;margin-top:2px;transition:color .15s}
.sensor-card.on-line .sensor-card-val{color:var(--green)}
.sensor-bar-wrap{width:100%;height:2px;background:var(--sur1);
  margin-top:4px;border-radius:1px;overflow:hidden}
.sensor-bar{height:2px;background:var(--blue2);border-radius:1px;
  transition:width .12s,background .15s}
.sensor-bar.on-line{background:var(--green)}
.color-swatch{width:100%;height:4px;border-radius:2px;margin-top:4px;
  background:var(--sur1);transition:background .2s}

/* Variables */
.var-list{padding:4px 8px;display:flex;flex-direction:column;gap:1px}
.var-row{display:flex;justify-content:space-between;align-items:center;
  padding:3px 7px;border-radius:2px;background:var(--sur0)}
.var-row:hover{background:var(--sur1)}
.var-name{font-size:11px;font-family:'Cascadia Code',monospace;color:var(--sub)}
.var-val{font-size:11px;font-family:'Cascadia Code',monospace;
  color:var(--yellow);font-weight:600}
.data-empty{font-size:11px;color:var(--ov0);font-style:italic;
  padding:12px 10px;text-align:center}

/* Console flash */
.console-flash{animation:con-pulse .6s ease}
@keyframes con-pulse{0%,100%{border-top-color:var(--sur1)}50%{border-top-color:var(--blue3)}}

/* ══════════════════════════════════════════════════════════
   pane-data overrides (เปิด/ปิดผ่าน style="display")
══════════════════════════════════════════════════════════ */
#pane-data{
  flex:0 0 auto;max-height:190px;min-height:0;
  background:var(--crust);
  border-top:1px solid var(--sur0);
  display:none;flex-direction:column;overflow:hidden}
#pane-data .data-tabs{height:28px;flex-shrink:0;
  background:var(--mantle);border-bottom:1px solid var(--sur0)}
#pane-data .data-content{flex:1;overflow:auto;min-height:0}
#pane-data .data-content.hidden{display:none}
.data-close-btn{margin-right:6px;width:22px;height:22px;border-radius:2px;
  background:transparent;border:none;color:var(--ov0);font-size:11px;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.data-close-btn:hover{background:var(--sur1);color:var(--red)}

/* ── Block editor header hint ── */
.blk-hint{
  font-size:10px;color:var(--ov0);
  padding:2px 10px;border-radius:3px;
  background:rgba(15,98,254,.08);
  border:1px solid rgba(15,98,254,.15);
  flex-shrink:0;white-space:nowrap}
.blk-export-btn{
  font-size:11px;padding:4px 10px;
  color:var(--sub);gap:5px}
.blk-export-btn:hover{color:var(--blue)}

/* ══════════════════════════════════════════════════════════
   ROBOT CONFIG MODAL — Pro redesign
══════════════════════════════════════════════════════════ */
.rc-overlay{
  position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(6px) saturate(0.8);
  display:flex;align-items:center;justify-content:center}

.rc-modal{
  background:var(--mantle);
  border:1px solid var(--sur0);
  border-radius:8px;
  width:min(94vw,680px);
  max-height:90vh;
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 32px 80px rgba(0,0,0,.8),
             0 0 0 1px rgba(120,169,255,.06),
             inset 0 1px 0 rgba(255,255,255,.04)}

/* Header */
.rc-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
  background:var(--crust);
  border-bottom:1px solid var(--sur0);
  flex-shrink:0}
.rc-hdr-left{display:flex;align-items:center;gap:12px}
.rc-hdr-title{
  font-size:13px;font-weight:700;color:var(--text);
  letter-spacing:.1px}
.rc-hdr-sub{
  font-size:10px;color:var(--ov0);
  letter-spacing:.4px;text-transform:uppercase;margin-top:1px}
.rc-close-btn{
  width:28px;height:28px;border-radius:4px;
  background:transparent;border:1px solid transparent;
  color:var(--ov0);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .12s}
.rc-close-btn:hover{
  background:rgba(250,77,86,.12);
  border-color:rgba(250,77,86,.3);
  color:var(--red)}

/* Body layout */
.rc-body{
  display:flex;overflow:hidden;flex:1;min-height:0}

/* Left column — selectors */
.rc-left{
  flex:0 0 52%;border-right:1px solid var(--sur0);
  padding:14px 16px;overflow-y:auto;display:flex;
  flex-direction:column;gap:10px}

.rc-section-label{
  font-size:9.5px;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:var(--ov0);
  padding-bottom:4px;border-bottom:1px solid var(--sur0);
  margin-top:2px}

.rc-field{display:flex;flex-direction:column;gap:4px}
.rc-field-label{
  font-size:10.5px;font-weight:600;color:var(--sub);
  letter-spacing:.2px}
.rc-field-row{display:flex;gap:6px;align-items:center}

.rc-select{
  width:100%;height:30px;padding:0 8px;
  background:var(--sur0);
  border:1px solid var(--sur1);
  border-radius:4px;color:var(--text);
  font-size:12px;outline:none;
  transition:border-color .12s;cursor:pointer;
  appearance:auto}
.rc-select:hover{border-color:var(--ov0)}
.rc-select:focus{border-color:var(--blue);
  box-shadow:0 0 0 2px rgba(120,169,255,.12)}
.rc-select-sm{width:80px;flex-shrink:0}

.rc-tag{
  flex-shrink:0;padding:2px 8px;border-radius:3px;
  font-size:10px;font-weight:700;
  background:rgba(120,169,255,.1);
  border:1px solid rgba(120,169,255,.2);
  color:var(--blue);white-space:nowrap;font-family:'Cascadia Code',monospace}
.rc-tag-green{
  background:rgba(66,190,101,.1);
  border-color:rgba(66,190,101,.2);
  color:var(--green)}

.rc-divider{
  height:1px;background:var(--sur0);
  margin:4px 0}

/* Right column — specs */
.rc-right{
  flex:1;padding:14px 16px;
  overflow-y:auto;display:flex;
  flex-direction:column;gap:8px}

/* Metric cards */
.rc-metric-card{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;
  background:var(--base);
  border:1px solid var(--sur0);
  border-radius:4px;
  transition:border-color .12s}
.rc-metric-card:hover{border-color:var(--sur1)}
.rc-metric-icon{
  width:28px;height:28px;border-radius:3px;
  background:var(--sur0);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0}
.rc-metric-body{flex:1;min-width:0}
.rc-metric-label{
  font-size:9.5px;font-weight:600;letter-spacing:.4px;
  text-transform:uppercase;color:var(--ov0)}
.rc-metric-val{
  display:flex;align-items:baseline;gap:3px;
  margin-top:1px}
.rc-metric-val span:first-child{
  font-size:18px;font-weight:400;
  font-family:'Cascadia Code',Consolas,monospace;
  color:var(--blue);line-height:1}
.rc-metric-unit{
  font-size:10px;color:var(--ov0);font-family:'Cascadia Code',monospace}

/* Sensor diagram */
.rc-sensor-diagram{
  background:var(--base);border:1px solid var(--sur0);
  border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  padding:8px;overflow:hidden}
#rc-sensor-canvas{display:block}

/* Apply button */
.rc-apply-btn{
  width:100%;height:34px;
  background:var(--blue3);
  border:none;border-radius:4px;
  color:#fff;font-size:12px;font-weight:700;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:background .12s,transform .1s;
  margin-top:auto;flex-shrink:0}
.rc-apply-btn:hover{background:var(--blue2)}
.rc-apply-btn:active{transform:scale(.98)}

/* Trail toggle row */
.rc-toggle-row{
  display:flex;align-items:center;gap:8px;
  cursor:pointer;user-select:none}
.rc-chk{
  width:14px;height:14px;
  accent-color:var(--blue3);cursor:pointer;flex-shrink:0}
.rc-toggle-txt{
  font-size:12px;color:var(--sub)}

/* ══════════════════════════════════════════════════════════
   MODE PILL — toggle button เดียว Code ↔ Blocks
══════════════════════════════════════════════════════════ */
.mode-pill-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:0 12px;height:30px;
  background:rgba(56,189,248,.1);
  border:1px solid rgba(56,189,248,.25);
  border-radius:99px;
  color:var(--blue);
  font-size:11.5px;font-weight:600;
  cursor:pointer;flex-shrink:0;
  transition:background .15s,border-color .15s,transform .08s;
  white-space:nowrap;user-select:none}
.mode-pill-btn:hover{
  background:rgba(56,189,248,.18);
  border-color:rgba(56,189,248,.45)}
.mode-pill-btn:active{transform:scale(.96)}

/* Run button adapts label */
#btn-compile-run{min-width:65px;justify-content:center}

/* ── Save split button ────────────────────────────────────── */
.save-split-btn{
  position:relative;display:inline-flex;align-items:center}
.save-split-btn .save-main{
  border-radius:99px 0 0 99px;border-right:none;padding-right:8px}
.save-split-btn .save-arrow{
  border-radius:0 99px 99px 0;padding:5px 7px;border-left:1px solid var(--sur1)}
.save-split-btn .save-arrow:hover{background:var(--sur1)}
.save-menu{
  position:absolute;top:calc(100% + 4px);left:0;
  background:var(--sur0);border:1px solid var(--sur1);
  border-radius:8px;padding:4px;z-index:200;
  min-width:140px;box-shadow:0 4px 16px rgba(0,0,0,.35)}
.save-menu button{
  display:block;width:100%;text-align:left;
  padding:6px 12px;font-size:11.5px;font-family:monospace;
  background:none;border:none;color:var(--text);
  border-radius:5px;cursor:pointer;white-space:nowrap}
.save-menu button:hover{background:var(--sur1)}

/* Block editor header — cleaner */
.blk-hdr-icon{
  width:26px;height:26px;border-radius:3px;
  background:rgba(15,98,254,.12);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0}
.blk-mode-hint{
  font-size:10px;color:var(--ov0);
  padding:2px 8px;border-radius:3px;
  border:1px solid var(--sur1);
  flex-shrink:0}
.blk-icon-btn{
  width:28px;height:28px;padding:0;
  display:flex;align-items:center;justify-content:center}

/* ══════════════════════════════════════════════════════════
   ROBOT DESIGNER MODAL
══════════════════════════════════════════════════════════ */
.rdes-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.72);
  display:flex;align-items:center;justify-content:center;
  z-index:3000;
  backdrop-filter:blur(4px)}

.rdes-modal{
  background:var(--mantle);
  border:1px solid var(--sur1);
  border-radius:12px;
  width:860px;max-width:96vw;
  max-height:90vh;
  display:flex;flex-direction:column;
  overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.6)}

.rdes-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--sur0);
  background:var(--base);
  flex-shrink:0}
.rdes-hdr-left{display:flex;align-items:center;gap:11px}
.rdes-hdr-title{font-size:14px;font-weight:700;color:var(--text);line-height:1.2}
.rdes-hdr-sub{font-size:10.5px;color:var(--ov0);margin-top:1px}
.rdes-close-btn{
  width:28px;height:28px;padding:0;
  border-radius:6px;background:none;border:1px solid var(--sur0);
  color:var(--ov0);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s}
.rdes-close-btn:hover{background:var(--sur1);color:var(--text)}

.rdes-body{
  display:flex;flex:1;overflow:hidden;min-height:0}

/* Left: canvas panel */
.rdes-canvas-panel{
  display:flex;flex-direction:column;
  width:400px;flex-shrink:0;
  border-right:1px solid var(--sur0);
  background:var(--base);
  padding:12px}
.rdes-canvas-hdr{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px}
.rdes-canvas-hint{
  font-size:9.5px;color:var(--ov0);white-space:nowrap}
.rdes-panel-label{
  font-size:9.5px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--ov0)}
#rdes-canvas{
  display:block;border-radius:8px;
  border:1px solid var(--sur1);
  cursor:crosshair;width:100%;height:auto}

.rdes-sensor-panel{margin-top:10px}
.rdes-sensor-hdr{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:6px}
.rdes-add-sensor-btn{
  padding:3px 10px;font-size:10.5px;font-weight:600;
  border-radius:5px;
  background:rgba(120,169,255,.12);
  border:1px solid rgba(120,169,255,.25);
  color:var(--blue);cursor:pointer;
  transition:background .12s}
.rdes-add-sensor-btn:hover{background:rgba(120,169,255,.22)}
.rdes-sensor-list{
  max-height:130px;overflow-y:auto;
  display:flex;flex-direction:column;gap:4px}
.rdes-sensor-row{
  display:flex;align-items:center;gap:6px;
  background:var(--mantle);border:1px solid var(--sur0);
  border-radius:5px;padding:5px 7px}
.rdes-sensor-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0}
.rdes-pin-sel{
  background:var(--sur0);border:1px solid var(--sur1);
  color:var(--text);font-size:11px;border-radius:4px;
  padding:1px 4px;cursor:pointer}
.rdes-sensor-pos{
  flex:1;font-size:10px;font-family:'Cascadia Code',monospace;
  color:var(--sub);text-align:right}
.rdes-sensor-del{
  width:20px;height:20px;padding:0;
  background:none;border:none;
  color:var(--ov0);cursor:pointer;
  border-radius:3px;font-size:11px;
  transition:color .1s,background .1s}
.rdes-sensor-del:hover{color:#f87171;background:rgba(248,113,113,.1)}
.rdes-no-sensor{
  font-size:11px;color:var(--ov0);text-align:center;
  padding:12px 0;line-height:1.6}

/* Right: form panel */
.rdes-form-panel{
  flex:1;overflow-y:auto;
  padding:14px 16px;
  display:flex;flex-direction:column}
.rdes-field{
  display:flex;flex-direction:column;gap:3px;
  margin-bottom:10px}
.rdes-field-label{
  font-size:10px;font-weight:600;letter-spacing:.3px;
  text-transform:uppercase;color:var(--ov0)}
.rdes-input{
  background:var(--base);border:1px solid var(--sur1);
  color:var(--text);font-size:12px;
  border-radius:5px;padding:5px 9px;
  outline:none;width:100%;
  transition:border-color .12s}
.rdes-input:focus{border-color:var(--blue)}
.rdes-input-sm{max-width:80px}
.rdes-input-num{max-width:80px;text-align:right}
.rdes-dim-row{display:flex;gap:8px;flex-wrap:nowrap}
.rdes-dim-row .rdes-field{flex:1}
.rdes-divider{height:1px;background:var(--sur0);margin:8px 0 12px}
.rdes-img-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.rdes-img-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;font-size:11px;font-weight:600;
  border-radius:5px;border:1px solid var(--sur1);
  background:var(--sur0);color:var(--text);
  cursor:pointer;transition:background .12s;white-space:nowrap}
.rdes-img-btn:hover{background:var(--sur1)}
.rdes-img-name{
  font-size:10.5px;color:var(--ov0);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rdes-tof-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
  margin-bottom:8px}
.rdes-tof-lbl{
  display:flex;align-items:center;gap:6px;
  font-size:11.5px;color:var(--text);
  background:var(--base);border:1px solid var(--sur0);
  border-radius:5px;padding:5px 10px;
  cursor:pointer;user-select:none;
  transition:border-color .12s}
.rdes-tof-lbl:hover{border-color:var(--sur1)}
.rdes-chk{accent-color:var(--blue);width:13px;height:13px}
.rdes-actions{
  display:flex;align-items:center;gap:6px;
  margin-top:auto;padding-top:14px;
  border-top:1px solid var(--sur0);
  flex-shrink:0}
.rdes-btn-ghost{
  padding:6px 12px;font-size:11.5px;font-weight:600;
  border-radius:5px;background:none;
  border:1px solid var(--sur0);
  color:var(--sub);cursor:pointer;
  transition:background .12s,border-color .12s}
.rdes-btn-ghost:hover{background:var(--sur0);border-color:var(--sur1)}
.rdes-btn-cancel{
  padding:6px 14px;font-size:12px;font-weight:600;
  border-radius:5px;background:none;
  border:1px solid var(--sur0);
  color:var(--sub);cursor:pointer;
  transition:background .12s}
.rdes-btn-cancel:hover{background:var(--sur0)}
.rdes-btn-save{
  padding:6px 18px;font-size:12px;font-weight:700;
  border-radius:5px;background:var(--blue3);
  border:none;color:#fff;cursor:pointer;
  display:flex;align-items:center;gap:6px;
  transition:background .12s,transform .1s}
.rdes-btn-save:hover{background:var(--blue2)}
.rdes-btn-save:active{transform:scale(.97)}

/* Robot Selector: "New robot" card + edit/delete overlay */
.rs-card-new{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;
  width:138px;min-height:110px;
  border:2px dashed rgba(120,169,255,.3);
  border-radius:10px;
  cursor:pointer;color:rgba(120,169,255,.6);
  transition:border-color .15s,color .15s,background .15s}
.rs-card-new:hover{
  border-color:rgba(120,169,255,.65);
  color:var(--blue);
  background:rgba(120,169,255,.06)}
.rs-card-new-icon{font-size:22px;line-height:1}
.rs-card-new-lbl{font-size:11px;font-weight:600}
.rs-card-wrap{position:relative;width:138px;flex-shrink:0}
.rs-card-wrap:hover .rs-card-actions{opacity:1}
.rs-card-actions{
  position:absolute;top:4px;right:4px;
  display:flex;gap:3px;
  opacity:0;transition:opacity .15s;
  pointer-events:all}
.rs-card-act-btn{
  width:22px;height:22px;padding:0;
  border-radius:4px;border:1px solid rgba(255,255,255,.15);
  background:rgba(15,15,15,.85);
  color:var(--sub);cursor:pointer;font-size:10px;
  display:flex;align-items:center;justify-content:center;
  transition:background .1s,color .1s,border-color .1s}
.rs-card-act-btn:hover{background:var(--sur1);color:var(--text)}
.rs-card-act-btn.del:hover{
  background:rgba(239,68,68,.2);
  color:#f87171;border-color:#f87171}
.blk-icon-btn:hover{color:var(--red)}

/* ╔═══════════════════════════════════════════════════════════
   ║  Serial Monitor Panel
   ╚═══════════════════════════════════════════════════════════ */

/* Serial tab dot */
.serial-conn-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: transparent;
  margin-left: 4px;
  vertical-align: middle;
  transition: background 0.3s;
}
.serial-conn-dot.live { background: #42be65; box-shadow: 0 0 4px #42be65; }

/* Panel container */
.serial-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--base);
  overflow: hidden;
}
.serial-content.hidden { display: none; }

/* Toolbar rows */
.serial-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--mantle);
  border-bottom: 1px solid var(--sur0);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.serial-upload-bar {
  background: color-mix(in srgb, var(--mantle) 85%, #0f62fe 15%);
}

/* Connect button */
.serial-connect-btn {
  padding: 4px 12px;
  border: 1px solid #42be65;
  border-radius: 6px;
  background: transparent;
  color: #42be65;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.serial-connect-btn:hover { background: rgba(66,190,101,0.12); }
.serial-connect-btn.connected {
  border-color: #fa4d56;
  color: #fa4d56;
}
.serial-connect-btn.connected:hover { background: rgba(250,77,86,0.12); }

/* Selects */
.serial-baud-sel, .serial-board-sel {
  padding: 3px 6px;
  background: var(--sur0);
  border: 1px solid var(--sur1);
  border-radius: 5px;
  color: var(--txt);
  font-size: 11px;
  cursor: pointer;
}
.serial-baud-sel { width: 90px; }
.serial-board-sel { flex: 1; min-width: 100px; max-width: 200px; }

/* Status chips */
.serial-status-chip {
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  background: var(--sur0);
  color: var(--sub);
  white-space: nowrap;
}
.serial-status-chip.ok  { background: rgba(66,190,101,0.18); color: #42be65; }
.serial-status-chip.err { background: rgba(250,77,86,0.15);  color: #fa4d56; }

.bridge-chip {
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  margin-left: auto;
}
.bridge-chip.ok  { background: rgba(66,190,101,0.18); color: #42be65; }
.bridge-chip.err { background: rgba(250,77,86,0.15);  color: #6b6b6b; }

.serial-autoscroll-lbl {
  font-size: 10px;
  color: var(--sub);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.serial-section-lbl {
  font-size: 10px;
  font-weight: 700;
  color: #78a9ff;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Upload button */
.serial-upload-btn {
  padding: 4px 12px;
  border: 1px solid #78a9ff;
  border-radius: 6px;
  background: rgba(120,169,255,0.1);
  color: #78a9ff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.serial-upload-btn:hover   { background: rgba(120,169,255,0.2); }
.serial-upload-btn:disabled { opacity: 0.5; cursor: default; }

/* Refresh port button */
.serial-refresh-btn {
  padding: 4px 7px;
  border: 1px solid var(--sur1);
  border-radius: 5px;
  background: var(--sur0);
  color: var(--sub);
  cursor: pointer;
  display: flex; align-items: center;
}
.serial-refresh-btn:hover { color: var(--txt); }

/* Clear button */
.serial-clear-btn {
  padding: 3px 8px;
  border: 1px solid var(--sur1);
  border-radius: 5px;
  background: transparent;
  color: var(--sub);
  font-size: 10px;
  cursor: pointer;
}
.serial-clear-btn:hover { color: var(--txt); }

/* Output area */
.serial-output {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  font-family: 'Cascadia Code', 'Consolas', monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: #c6c6c6;
  white-space: pre-wrap;
  word-break: break-all;
}
.srl-ok   { color: #42be65; }
.srl-err  { color: #fa4d56; }
.srl-info { color: #78a9ff; }
.srl-sent { color: #f1c21b; }
.srl-sep  { color: var(--sur1); }

/* Input row */
.serial-input-row {
  display: flex;
  gap: 5px;
  padding: 6px 8px;
  border-top: 1px solid var(--sur0);
  background: var(--mantle);
  flex-shrink: 0;
}
.serial-input {
  flex: 1;
  padding: 5px 10px;
  background: var(--sur0);
  border: 1px solid var(--sur1);
  border-radius: 6px;
  color: var(--txt);
  font-family: 'Cascadia Code', monospace;
  font-size: 12px;
}
.serial-input:disabled { opacity: 0.45; }
.serial-input:focus    { outline: none; border-color: #78a9ff; }
.serial-send-btn {
  padding: 5px 14px;
  border: 1px solid var(--sur1);
  border-radius: 6px;
  background: var(--sur0);
  color: var(--txt);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.serial-send-btn:hover    { border-color: #78a9ff; color: #78a9ff; }
.serial-send-btn:disabled { opacity: 0.4; cursor: default; }

/* ── Robot Designer: sensor-kind palette + wheel toggle + angle (multi-sensor) ── */
.rdes-kind-palette { display:flex; gap:6px; margin:0 0 8px; }
.rdes-kind-btn {
  display:flex; align-items:center; gap:5px;
  background:#15233b; border:1px solid #2a3b57; color:#cbd5e1;
  border-radius:6px; padding:5px 10px; font-size:12px; cursor:pointer; transition:.15s;
}
.rdes-kind-btn:hover { border-color:var(--kc); }
.rdes-kind-btn.active { background:color-mix(in srgb, var(--kc) 22%, #15233b); border-color:var(--kc); color:#fff; }
.rdes-kind-dot { width:9px; height:9px; border-radius:50%; background:var(--kc); display:inline-block; }

.rdes-wheel-toggle { display:flex; gap:6px; }
.rdes-wheel-btn {
  flex:1; background:#15233b; border:1px solid #2a3b57; color:#cbd5e1;
  border-radius:6px; padding:7px 0; font-size:13px; cursor:pointer; transition:.15s;
}
.rdes-wheel-btn:hover { border-color:var(--blue,#38bdf8); }
.rdes-wheel-btn.active { background:rgba(56,189,248,0.18); border-color:var(--blue,#38bdf8); color:#fff; font-weight:600; }

.rdes-sec-lbl {
  font-size:10px; letter-spacing:.04em; color:var(--kc,#94a3b8);
  margin:8px 0 4px; padding-left:6px; border-left:2px solid var(--kc,#94a3b8);
}
.rdes-angle-wrap { display:inline-flex; align-items:center; gap:2px; font-size:11px; color:#94a3b8; }
.rdes-angle-input {
  width:42px; background:#15233b; border:1px solid #2a3b57; color:#e2e8f0;
  border-radius:4px; padding:2px 4px; font-size:11px; text-align:right;
}
.rdes-hint-sm { font-size:10.5px; color:#64748b; margin-top:8px; line-height:1.4; }

/* ══════════════════════════════════════════════════════════
   MAP HUB — เลือกสนามแบบ rail + การ์ด (มืออาชีพ)
══════════════════════════════════════════════════════════ */
.map-popup-card.map-hub{ width:760px; height:564px; max-height:92vh; }
.mp-hdr-sub{ font-size:11px; color:var(--sub); font-weight:400; margin-left:8px; opacity:.85; }

.mp-hub-body{ display:flex; flex:1; min-height:0; }

/* ── rail ── */
.mp-rail{ width:188px; flex-shrink:0; background:var(--crust); border-right:1px solid var(--sur1);
  padding:12px 11px; display:flex; flex-direction:column; gap:4px; }
.mp-rail-item{ display:flex; align-items:center; gap:10px; padding:10px 11px; border-radius:8px;
  background:transparent; border:none; color:var(--sub); font-size:13px; font-family:inherit;
  cursor:pointer; text-align:left; width:100%; transition:background .14s,color .14s; }
.mp-rail-item svg{ width:17px; height:17px; flex-shrink:0; }
.mp-rail-item > span{ flex:1; }
.mp-rail-item:hover{ background:rgba(255,255,255,.05); color:var(--text); }
.mp-rail-item.active{ background:rgba(120,169,255,.14); color:var(--blue); }
.mp-rail-badge{ flex:0 0 auto; font-size:11px; min-width:20px; text-align:center;
  background:var(--sur1); color:var(--sub); padding:1px 7px; border-radius:20px; }
.mp-rail-item.active .mp-rail-badge{ background:rgba(120,169,255,.25); color:var(--blue); }
.mp-rail-badge:empty{ display:none; }
.mp-rail-spacer{ flex:1; }
.mp-rail-foot{ display:flex; align-items:center; gap:7px; font-size:11px; color:var(--ov0);
  padding:9px 11px; border-top:1px solid var(--sur1); }

/* ── content ── */
.mp-content{ flex:1; min-width:0; display:flex; flex-direction:column; padding:14px 16px; }
.mp-content-hd{ margin-bottom:12px; }
.mp-content-title{ font-size:14px; font-weight:600; color:var(--text); }
.mp-content-sub{ font-size:11.5px; color:var(--sub); margin-top:2px; }
.mp-grid{ flex:1; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; gap:11px;
  align-content:start; padding-right:4px; }

/* ── card ── */
/* .mp-card เป็น <button> → button{} ตัว global กำหนด align-items/flex-shrink ไว้
   ต้อง min-height ชัดเจน ไม่งั้น CSS Grid auto-row สับสนกับ intrinsic size ของปุ่ม
   ที่มี thumb (overflow:hidden → automatic min-size 0) ซ้อนอยู่ข้างใน แล้วบีบทั้งการ์ด
   เหลือแค่ ~60px จนภาพสนามหาย (thumb ถูกบีบจนแทบไม่เหลือความสูง) */
/* .mp-card เป็น <button> — global button{} ตั้ง align-items:center ไว้ (สำหรับปุ่มทั่วไป)
   ทับ align-items:stretch ที่ควรเป็นค่าเริ่มต้นของ flex column ทำให้ .mp-card-thumb
   ไม่มีความกว้างชัดเจนให้ยึด (ไม่มี content จริงในนั้น มีแต่ลูกที่กำหนดขนาดเป็น % ทั้งคู่)
   บาง browser คำนวณแล้วยุบเหลือ 0 กว้าง ต้องคืนเป็น stretch ให้ลูกเต็มความกว้างการ์ดเสมอ */
.mp-card{ position:relative; background:var(--sur0); border:1px solid var(--sur1); border-radius:9px;
  overflow:hidden; cursor:pointer; padding:0; text-align:left; font-family:inherit;
  display:flex; flex-direction:column; align-items:stretch; min-height:170px;
  transition:border-color .14s,transform .08s; }
.mp-card:hover{ border-color:var(--blue); }
.mp-card:active{ transform:scale(.99); }
.mp-card.sel{ border-color:var(--blue); box-shadow:0 0 0 1px var(--blue) inset; }
/* กล่องภาพสนาม — เดิมสูง 74px + object-fit:cover ทำให้สัดส่วนกล่อง (3.5:1) ไม่ตรงกับ
   ภาพสนามจริง (1.75-2:1) ภาพเลยโดนครอบตัดบน-ล่างทิ้ง เห็นสนามแค่ ~50% (ดู "แบน/ไม่เต็ม")
   แก้เป็น contain + สูงพอดีสัดส่วนสนาม 2:1 ที่ใช้บ่อยสุด → เห็นสนามครบทั้งใบเสมอ
   พื้นหลังขาวให้กลืนกับพื้นสนาม (ภาพสนามพื้นขาว) ขอบข้างจึงมองไม่เห็น */
.mp-card-thumb{ height:118px; flex-shrink:0; background:#fff; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
.mp-card-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.mp-thumb-grid{ background:
  repeating-linear-gradient(0deg,#2e2e2e 0 1px,transparent 1px 18px),
  repeating-linear-gradient(90deg,#2e2e2e 0 1px,transparent 1px 18px),#1c1c1c; }
.mp-card-tick{ position:absolute; top:6px; right:6px; width:18px; height:18px; border-radius:50%;
  background:var(--blue); color:#001; display:none; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; }
.mp-card.sel .mp-card-tick{ display:flex; }
.mp-card-info{ padding:8px 10px; }
.mp-card-name{ font-size:12.5px; font-weight:500; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-card-meta{ display:flex; align-items:center; gap:6px; margin-top:3px; font-size:10.5px; color:var(--sub); }
.mp-card-rule{ background:rgba(120,169,255,.16); color:var(--blue); padding:1px 6px; border-radius:5px; font-size:10px; }

/* ── upload / add card ── */
.mp-card-add{ background:transparent; border:1.5px dashed var(--sur1); border-radius:9px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:120px; color:var(--sub); cursor:pointer; font-family:inherit; font-size:12px; transition:border-color .14s,color .14s; }
.mp-card-add:hover{ border-color:var(--blue); color:var(--blue); }
.mp-card-add i{ font-size:22px; font-style:normal; line-height:1; }

.mp-empty{ grid-column:1/-1; text-align:center; color:var(--ov0); font-size:12.5px; padding:34px 0; }

/* ── detail strip (ขนาดจริง + ลบ) ── */
.mp-detail{ display:flex; align-items:center; gap:7px; margin-top:12px; padding-top:11px;
  border-top:1px solid var(--sur1); font-size:12px; color:var(--sub); flex-wrap:wrap; }
.mp-detail-input{ width:62px; background:var(--sur0); border:1px solid var(--sur1); border-radius:6px;
  color:var(--text); padding:4px 7px; font-size:12px; font-family:inherit; }
.mp-detail-input:focus{ outline:1px solid var(--blue); border-color:var(--blue); }
.mp-detail-x{ color:var(--ov0); }
.mp-detail-hint{ color:var(--ov0); font-size:11px; margin-left:4px; }
.mp-detail-del{ margin-left:auto; background:transparent; border:1px solid var(--sur1);
  color:var(--red); border-radius:6px; padding:4px 9px; font-size:11px; cursor:pointer; font-family:inherit; }
.mp-detail-del:hover{ background:rgba(250,77,86,.12); border-color:var(--red); }

/* ── footer ── */
.mp-hub-footer{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--sur1); }
.mp-foot-sel{ flex:1; font-size:12px; color:var(--sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-foot-sel span{ color:var(--text); }

/* ══════════════════════════════════════════════════════════
   FIELD EDITOR PRO (#mep-overlay)
══════════════════════════════════════════════════════════ */
.mep-overlay{ position:fixed; inset:0; z-index:9992; background:rgba(0,0,0,.66); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; }
.mep-modal{ width:min(1120px,95vw); height:min(728px,93vh); background:var(--mantle); border:1px solid var(--sur1); border-radius:12px; box-shadow:0 24px 64px rgba(0,0,0,.75); display:flex; flex-direction:column; overflow:hidden; }

/* header */
.mep-hd{ display:flex; align-items:center; gap:8px; padding:9px 14px; border-bottom:1px solid var(--sur1); }
.mep-hd-title{ font-size:13.5px; font-weight:600; color:var(--text); }
.mep-hd-sub{ font-size:11px; color:var(--sub); font-weight:400; margin-left:5px; }
.mep-hd-close{ width:27px; height:27px; border-radius:7px; background:transparent; border:1px solid var(--sur1); color:var(--sub); cursor:pointer; font-size:13px; }
.mep-hd-close:hover{ background:var(--sur0); color:var(--text); }

/* toolbar */
.mep-toolbar{ display:flex; align-items:center; gap:6px; padding:7px 12px; border-bottom:1px solid var(--sur1); flex-wrap:wrap; }
.mep-tb-lbl{ font-size:11px; color:var(--sub); }
.mep-tb-num{ width:54px; background:var(--sur0); border:1px solid var(--sur1); border-radius:6px; color:var(--text); padding:4px 6px; font-size:12px; text-align:center; }
.mep-tb-num:focus{ outline:1px solid var(--blue); border-color:var(--blue); }
.mep-tb-x{ color:var(--ov0); font-size:12px; }
.mep-tb-sep{ width:1px; height:18px; background:var(--sur1); margin:0 4px; }
.mep-tb-btn{ height:28px; min-width:28px; padding:0 9px; border-radius:7px; background:var(--sur0); border:1px solid var(--sur1); color:var(--sub); font-size:12px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:4px; }
.mep-tb-btn:hover:not(:disabled){ background:var(--sur1); color:var(--text); }
.mep-tb-btn:disabled{ opacity:.4; cursor:default; }
.mep-tb-btn.mep-toggle.on{ background:rgba(120,169,255,.16); border-color:rgba(120,169,255,.4); color:var(--blue); }
.mep-tb-zoom{ font-size:12px; color:var(--text); min-width:40px; text-align:center; }
.mep-tb-sel{ height:28px; background:var(--sur0); border:1px solid var(--sur1); border-radius:7px; color:var(--text); font-size:12px; padding:0 6px; cursor:pointer; }
.mep-tb-save{ height:28px; padding:0 14px; border-radius:7px; background:var(--blue3); border:none; color:#fff; font-size:12px; font-weight:500; cursor:pointer; }
.mep-tb-save:hover{ background:var(--blue2); }

/* body */
.mep-body{ display:flex; flex:1; min-height:0; }
.mep-rail{ width:52px; flex-shrink:0; background:var(--crust); border-right:1px solid var(--sur1); padding:9px 0; display:flex; flex-direction:column; align-items:center; gap:4px; }
.mep-tool{ width:36px; height:36px; border-radius:8px; background:transparent; border:1px solid transparent; cursor:pointer; font-size:17px; display:flex; align-items:center; justify-content:center; }
.mep-tool:hover{ background:var(--sur0); }
.mep-tool.on{ background:rgba(120,169,255,.16); border-color:rgba(120,169,255,.4); }

.mep-canvas-wrap{ flex:1; min-width:0; min-height:0; background:#15171d; position:relative; overflow:hidden; }
#mep-canvas{ position:absolute; top:0; left:0; touch-action:none; }

/* right panel */
.mep-panel{ width:200px; flex-shrink:0; background:var(--mantle); border-left:1px solid var(--sur1); padding:12px; overflow-y:auto; }
.mep-p-lbl{ display:block; font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--sub); margin:0 0 5px; }
.mep-p-input{ width:100%; background:var(--sur0); border:1px solid var(--sur1); border-radius:7px; color:var(--text); padding:6px 9px; font-size:12.5px; margin-bottom:11px; }
.mep-p-input:focus{ outline:1px solid var(--blue); border-color:var(--blue); }
.mep-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.mep-color{ width:34px; height:28px; padding:0; border:1px solid var(--sur1); border-radius:6px; background:none; cursor:pointer; }
.mep-range{ flex:1; }
/* ป้ายค่า analog ที่เซนเซอร์แสงจะอ่านจากโซน (สด) */
.mep-analog-readout{ font-size:11px; color:var(--sub); margin:2px 0 8px; display:flex; align-items:center; gap:4px; }
.mep-analog-readout b{ color:var(--text); font-family:'Cascadia Code',monospace; font-size:12px; }
.mep-analog-max{ opacity:.55; }
.mep-p-hint{ font-size:10.5px; color:var(--ov0); line-height:1.4; margin-bottom:10px; }
.mep-dir-row{ display:flex; gap:5px; margin-bottom:11px; }
.mep-dir-btn{ flex:1; height:30px; border-radius:7px; background:var(--sur0); border:1px solid var(--sur1); color:var(--sub); cursor:pointer; font-size:15px; }
.mep-dir-btn.on{ background:rgba(120,169,255,.18); border-color:var(--blue); color:var(--blue); }
.mep-p-divider{ height:1px; background:var(--sur1); margin:12px 0; }

#mep-props{ margin-bottom:4px; }
.mep-props-empty{ font-size:11.5px; color:var(--ov0); padding:4px 0; }
.mep-props-title{ font-size:12.5px; font-weight:600; color:var(--text); margin-bottom:6px; }
.mep-props-row{ font-size:11.5px; color:var(--sub); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
.mep-props-row b{ color:var(--text); font-weight:600; }
.mep-props-row input[type=color]{ width:28px; height:22px; padding:0; border:1px solid var(--sur1); border-radius:5px; background:none; cursor:pointer; }
.mep-props-del{ width:100%; margin-top:6px; padding:6px; border-radius:7px; background:transparent; border:1px solid var(--sur1); color:var(--red); font-size:11.5px; cursor:pointer; }
.mep-props-del:hover{ background:rgba(250,77,86,.12); border-color:var(--red); }
.mep-props-btn{ flex:1; padding:6px; border-radius:7px; background:var(--sur0); border:1px solid var(--sur1); color:var(--text); font-size:11.5px; cursor:pointer; }
.mep-props-btn:hover{ border-color:var(--blue); color:var(--blue); }

.mep-saved-list{ display:flex; flex-direction:column; gap:3px; }
.mep-empty{ font-size:11.5px; color:var(--ov0); font-style:italic; padding:4px 0; }
.mep-saved-row{ display:flex; align-items:center; gap:6px; padding:5px 8px; border-radius:7px; background:var(--sur0); border:1px solid transparent; }
.mep-saved-row:hover{ border-color:var(--sur1); }
.mep-saved-row.editing{ border-color:var(--blue); }
.mep-saved-name{ flex:1; font-size:12px; color:var(--text); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mep-saved-del{ width:20px; height:20px; border-radius:5px; background:transparent; border:none; color:var(--ov0); cursor:pointer; font-size:11px; }
.mep-saved-del:hover{ color:var(--red); }

/* status bar */
.mep-status{ display:flex; align-items:center; gap:16px; padding:6px 14px; border-top:1px solid var(--sur1); font-size:11px; color:var(--sub); }

/* reference image */
.mep-ref-upload{ width:100%; padding:7px; border-radius:7px; background:var(--sur0); border:1px dashed var(--sur1); color:var(--sub); font-size:12px; cursor:pointer; font-family:inherit; margin-bottom:6px; }
.mep-ref-upload:hover{ border-color:var(--blue); color:var(--blue); }
.mep-ref-lockrow{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--sub); margin:8px 0; cursor:pointer; }
.mep-ref-btn{ flex:1; padding:5px; border-radius:6px; background:var(--sur0); border:1px solid var(--sur1); color:var(--sub); font-size:11.5px; cursor:pointer; font-family:inherit; }
.mep-ref-btn:hover{ background:var(--sur1); color:var(--text); }
.mep-ref-btn.danger{ color:var(--red); }
.mep-ref-btn.danger:hover{ background:rgba(250,77,86,.12); border-color:var(--red); }

/* track presets */
.mep-preset-row{ display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-bottom:4px; }
.mep-preset-btn{ padding:7px 4px; border-radius:7px; background:var(--sur0); border:1px solid var(--sur1); color:var(--text); font-size:11.5px; cursor:pointer; font-family:inherit; }
.mep-preset-btn:hover{ border-color:var(--blue); color:var(--blue); }

/* layers */
.mep-layers{ display:flex; flex-direction:column; gap:2px; }
.mep-layer{ display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:6px; font-size:12px; color:var(--text); cursor:pointer; }
.mep-layer:hover{ background:var(--sur0); }
.mep-layer.off{ color:var(--ov0); }
.mep-layer-ic{ font-size:13px; width:16px; text-align:center; }

/* ══ IR sensor cards (dynamic, per-robot · หน้า/หลัง) ══ */
#ir-sensor-grid{ display:flex; flex-direction:column; gap:3px; margin-bottom:8px; }
.ir-grp-lbl{ font-size:10px; color:var(--sub); margin:3px 0 1px; letter-spacing:.02em; }
.ir-row{ display:grid; gap:3px; }
.ir-cell{ background:var(--sur0); border:1px solid var(--sur1); border-radius:5px;
  padding:3px 1px; display:flex; flex-direction:column; align-items:center; gap:2px; }
.ir-cell.on-line{ border-color:var(--green); background:rgba(66,190,101,.12); }
.ir-pin{ font-size:8px; color:var(--sub); font-family:'Cascadia Code',monospace; }
.ir-bar-wrap{ width:7px; height:26px; background:rgba(255,255,255,.06); border-radius:3px;
  display:flex; align-items:flex-end; overflow:hidden; }
.ir-bar{ width:100%; height:0%; background:var(--ov0); border-radius:3px; transition:height .12s,background .12s; }
.ir-bar.on-line{ background:var(--green); }
.ir-val{ font-size:8px; color:var(--text); font-family:'Cascadia Code',monospace; }
.ir-empty{ font-size:11px; color:var(--ov0); padding:8px; text-align:center; }

/* ══ Graph tab (live telemetry) ══ */
.graph-legend{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-bottom:6px; }
.gl-item{ display:flex; align-items:center; gap:4px; font-size:10px; color:var(--sub);
  cursor:pointer; user-select:none; }
.gl-item input{ width:11px; height:11px; margin:0; accent-color:var(--blue); cursor:pointer; }
.gl-item b{ color:var(--text); font-family:'Cascadia Code',monospace; min-width:26px; text-align:right; }
.gl-dot{ width:8px; height:8px; border-radius:2px; display:inline-block; }
.graph-clear-btn{ margin-left:auto; font-size:10px; padding:2px 8px; color:var(--sub);
  background:rgba(255,255,255,.05); border:1px solid var(--sur1); border-radius:5px; cursor:pointer; }
.graph-clear-btn:hover{ color:var(--text); background:rgba(255,255,255,.10); }
.graph-wrap{ width:100%; height:170px; background:#0b1220; border:1px solid var(--sur1);
  border-radius:6px; overflow:hidden; }
#graph-canvas{ display:block; width:100%; height:100%; }
.graph-hint{ font-size:9px; color:var(--ov0); margin-top:5px; line-height:1.4; }

/* ══════════════════════════════════════════════════════════
   MODERN PROGRAMMING MENU UI ENHANCEMENTS
══════════════════════════════════════════════════════════ */

/* Single Toggle Mode Switcher */
.btn-toggle-mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  padding: 6px 14px;
  font-family: 'Outfit', 'Inter', 'Noto Sans Thai', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  border: 1px solid transparent;
}

.btn-toggle-mode:active {
  transform: scale(0.96);
}

/* Blocks Mode Active Style - Purple Neon */
.btn-toggle-mode.mode-blocks-active {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.3);
  color: #c084fc;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.08);
}
.btn-toggle-mode.mode-blocks-active:hover {
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(168, 85, 247, 0.6);
  color: #f3e8ff;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.3);
}

/* C++ Code Mode Active Style - Cyan Neon */
.btn-toggle-mode.mode-code-active {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.08);
}
.btn-toggle-mode.mode-code-active:hover {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.6);
  color: #e0f2fe;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.3);
}

.btn-toggle-mode svg {
  transition: transform 0.3s ease;
}
.btn-toggle-mode:hover svg {
  transform: rotate(15deg) scale(1.1);
}

/* Glassmorphism Editor Header */
.block-editor-hdr {
  background: rgba(15, 23, 42, 0.85) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
  backdrop-filter: blur(10px);
  padding: 6px 14px !important;
}

.block-editor-title {
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  color: #38bdf8 !important;
}

/* Enhanced Editor Tabs */
.editor-tabs {
  background: rgba(15, 23, 42, 0.95) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
  padding: 4px 6px 0 !important;
  gap: 4px !important;
}

.editor-tab {
  border-radius: 6px 6px 0 0 !important;
  background: rgba(30, 41, 59, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: none !important;
  color: #94a3b8 !important;
  font-size: 11.5px !important;
  transition: all 0.15s ease !important;
}

.editor-tab:hover {
  background: rgba(51, 65, 85, 0.8) !important;
  color: #f1f5f9 !important;
}

.editor-tab.active {
  background: #0f172a !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
  color: #38bdf8 !important;
  font-weight: 600 !important;
  box-shadow: 0 -2px 8px rgba(56, 189, 248, 0.15);
}

/* Modern Status Bar & Pin Legend */
.editor-sb {
  background: #090d16 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 10.5px !important;
}

.editor-sb-item {
  color: #94a3b8 !important;
}

#esb-pin-legend {
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 4px;
  padding: 1px 8px;
  color: #7dd3fc !important;
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════
   VIP LOGIN SYSTEM — Premium Dark Design
══════════════════════════════════════════════════════════ */

/* ── Header Button ── */
.btn-vip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(168,85,247,0.1) !important;
  border: 1px solid rgba(168,85,247,0.3) !important;
  color: #c084fc !important;
  padding: 5px 13px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}
.btn-vip:hover {
  background: rgba(168,85,247,0.22) !important;
  border-color: rgba(168,85,247,0.55) !important;
  color: #f3e8ff !important;
  box-shadow: 0 0 18px rgba(168,85,247,0.35) !important;
  transform: translateY(-1px) !important;
}
.btn-vip.is-pro {
  background: linear-gradient(135deg,rgba(124,58,237,0.9),rgba(192,132,252,0.85)) !important;
  border-color: rgba(192,132,252,0.5) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 0 20px rgba(168,85,247,0.4) !important;
}
.vip-avatar-sm  { font-size: 14px; }
.vip-crown-sm   { font-size: 11px; }

/* ── Overlay Backdrop ── */
.vip-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(5,8,20,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ── ซ่อน modal เมื่อมี class hidden ── */
.vip-overlay.hidden { display: none !important; }


/* ── Modal Card ── */
.vip-card-popup {
  width: min(92vw, 420px);
  background: linear-gradient(160deg, #0d1425 0%, #0a1020 100%);
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 32px 80px rgba(0,0,0,0.85),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 50px rgba(168,85,247,0.15);
  animation: vipPopIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes vipPopIn {
  from { opacity:0; transform:scale(0.88) translateY(20px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}

/* ── Modal Header ── */
.vip-popup-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.vip-popup-title {
  font-size: 14px;
  font-weight: 700;
  color: #e2d9f3;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vip-popup-sub {
  font-size: 10px;
  font-weight: 400;
  color: #64748b;
  letter-spacing: 0.3px;
}
.vip-close-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: #64748b;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.vip-close-btn:hover { color: #fff; background: rgba(255,255,255,0.12); }

/* ── Modal Body ── */
.vip-popup-body { padding: 0; }

/* ════ LOGIN VIEW ════ */
.vip-login-view {
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.vip-login-icon {
  font-size: 40px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 16px rgba(168,85,247,0.6));
  animation: vipIconFloat 3s ease-in-out infinite;
}
@keyframes vipIconFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.vip-login-title {
  font-size: 22px;
  font-weight: 800;
  color: #f1e8ff;
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}
.vip-login-sub {
  font-size: 12px;
  color: #64748b;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 300px;
}

/* ── Auth Tabs (เข้าสู่ระบบ / สมัครสมาชิก) ── */
.vip-auth-tabs {
  display: flex;
  width: 100%;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(168,85,247,0.15);
  border-radius: 11px;
  padding: 4px;
  margin-bottom: 20px;
}
.vip-auth-tab {
  flex: 1;
  padding: 9px 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.vip-auth-tab.active {
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(124,58,237,0.4);
}
.vip-auth-tab:not(.active):hover { color: #e0d5ff; }

/* ── Input Field ── */
.vip-field-group {
  width: 100%;
  margin-bottom: 14px;
}
.vip-field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 7px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.vip-field-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.vip-field-icon {
  position: absolute;
  left: 13px;
  color: #4b5563;
  pointer-events: none;
  flex-shrink: 0;
}
.vip-field-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(168,85,247,0.2);
  border-radius: 11px;
  padding: 13px 14px 13px 40px;
  color: #f1f5f9;
  font-size: 14px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-weight: 600;
  letter-spacing: 1.5px;
  outline: none;
  transition: all 0.2s;
}
.vip-field-input::placeholder { color: #374151; font-weight: 400; letter-spacing: 0.5px; font-size:13px; }
.vip-field-input:focus {
  border-color: #a855f7;
  background: rgba(168,85,247,0.07);
  box-shadow: 0 0 0 3px rgba(168,85,247,0.15), 0 0 20px rgba(168,85,247,0.2);
}

/* ── Submit Button ── */
.vip-submit-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #c084fc 100%);
  border: none;
  border-radius: 11px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: all 0.2s;
  box-shadow: 0 4px 24px rgba(124,58,237,0.45);
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.vip-submit-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,rgba(255,255,255,0.1),transparent);
}
.vip-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(124,58,237,0.6);
}
.vip-submit-btn:active { transform: translateY(0); }
.vip-submit-btn.loading { opacity: 0.7; pointer-events: none; }

/* ── Spinner ── */
.vip-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vipSpin 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes vipSpin { to { transform: rotate(360deg); } }

/* ── Messages ── */
.vip-msg-area { width:100%; min-height:32px; text-align:center; }
.vip-msg-ok {
  padding: 10px 14px;
  background: rgba(74,222,128,0.1);
  border: 1px solid rgba(74,222,128,0.25);
  border-radius: 9px;
  color: #4ade80;
  font-size: 13px;
  font-weight: 600;
}
.vip-msg-err {
  padding: 10px 14px;
  background: rgba(248,113,113,0.1);
  border: 1px solid rgba(248,113,113,0.25);
  border-radius: 9px;
  color: #f87171;
  font-size: 13px;
  font-weight: 600;
}

/* ── Shake Animation ── */
.vip-shake {
  animation: vipShake 0.4s cubic-bezier(0.36,0.07,0.19,0.97);
}
@keyframes vipShake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}

/* ── Features Preview ── */
.vip-features-preview {
  width: 100%;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.vip-preview-title {
  font-size: 11px;
  color: #475569;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 10px;
  text-align: center;
}
.vip-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.vip-preview-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vip-preview-item span { font-size: 13px; }

/* ════ PROFILE VIEW ════ */
.vip-profile-view {
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vip-avatar-ring {
  position: relative;
  margin-bottom: 16px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vip-avatar-ring::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #ec4899, #f59e0b);
  animation: vipRingRotate 3s linear infinite;
}
.vip-avatar-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #0d1425;
}
@keyframes vipRingRotate {
  to { filter: hue-rotate(360deg); }
}
.vip-avatar-big {
  font-size: 38px;
  position: relative;
  z-index: 1;
}
.vip-online-dot {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid #0d1425;
  z-index: 2;
  animation: vipPulse 2s ease-in-out infinite;
}
@keyframes vipPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50%      { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}
.vip-profile-name {
  font-size: 20px;
  font-weight: 800;
  color: #f1e8ff;
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}
.vip-role-badge {
  display: inline-block;
  padding: 4px 14px;
  background: linear-gradient(135deg,rgba(124,58,237,0.3),rgba(192,132,252,0.2));
  border: 1px solid rgba(168,85,247,0.4);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  color: #c084fc;
  margin-bottom: 20px;
}
.vip-code-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 20px;
}
.vip-code-lbl {
  font-size: 10px;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.vip-code-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: #a855f7;
  background: rgba(168,85,247,0.1);
  border: 1px solid rgba(168,85,247,0.25);
  padding: 4px 16px;
  border-radius: 8px;
  letter-spacing: 1.5px;
}
.vip-feature-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-bottom: 24px;
}
.vip-feature-item {
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
}
.vip-feature-item.unlocked {
  background: rgba(74,222,128,0.08);
  border: 1px solid rgba(74,222,128,0.2);
  color: #86efac;
}
.vip-logout-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 9px;
  color: #fca5a5;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.vip-logout-btn:hover {
  background: rgba(239,68,68,0.2);
  border-color: rgba(239,68,68,0.45);
  color: #fff;
  transform: translateY(-1px);
}

/* ── Locked Robot Card ── */
.rs-card-locked {
  border-color: rgba(168,85,247,0.22) !important;
  cursor: pointer;
  position: relative;
}
.rs-card-locked .rs-card-img { filter: grayscale(0.55) brightness(0.75); }
.rs-card-locked .rs-card-name,
.rs-card-locked .rs-card-sub { opacity: 0.6; }
.rs-card-locked:hover {
  border-color: rgba(168,85,247,0.55) !important;
  background: rgba(168,85,247,0.06);
}
.rs-card-locked:hover .rs-card-img { filter: grayscale(0.3) brightness(0.9); }
.rs-lock-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  letter-spacing: 0.4px;
  box-shadow: 0 2px 8px rgba(124,58,237,0.45);
}
.rs-card-img { position: relative; }

/* ป้าย 🔒 บนปุ่มฟีเจอร์ VIP (เช่น วาดสนาม) — โชว์เฉพาะตอนยังไม่ล็อกอิน */
.vip-lock-badge { display: none; margin-left: 3px; font-size: 10px; line-height: 1; opacity: 0.85; }
.is-vip-locked .vip-lock-badge { display: inline; }

/* ── iOS iPad Safari / Chrome Keyboard Scroll & Auto-Zoom Fix ── */
@media screen and (max-width: 1366px) {
  input, select, textarea, .blocklyHtmlInput {
    /* บน iOS font-size < 16px จะทำให้ Safari/Chrome ทำการ Auto-Zoom และ Scroll จอเลื่อนขึ้น
       บังคับให้ font-size ขั้นต่ำ 16px บนจอทัชสกรีน/แท็บเล็ต เพื่อปิดการซูมและย้ายหน้าจอ */
    font-size: 16px !important;
  }
}
.blocklyWidgetDiv input,
#_sp_val,
#_vd_name,
#_vd_type {
  font-size: 16px !important;
}