/* ══════════════════════════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:auto;background:#060A12;display:flex;align-items:center;justify-content:center;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text',system-ui,sans-serif;padding:20px;}

:root{
  --scheme:    #87CEFF;
  --scheme-8:  rgba(135,206,255,.08);
  --scheme-15: rgba(135,206,255,.15);
  --scheme-30: rgba(135,206,255,.30);
  --bg:        #0F0F11;
  --child:     #19191D;
  --header:    #1E1E22;
  --frame:     #202025;
  --frame-h:   #25252A;
  --frame-a:   #2A2A2F;
  --border:    rgba(255,255,255,.031);
  --border2:   rgba(255,255,255,.06);
  --text:      #FFFFFF;
  --dim:       #3F4555;
  --rounding:  5px;
  --child-rounding: 6px;
}

::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(135,206,255,.25);border-radius:99px}

/* ══════════════════════════════════════════════════════════════
   IMGUI WINDOW  605 × 476
══════════════════════════════════════════════════════════════ */
.imgui-win{
  width:605px;height:476px;
  background:var(--bg);
  border-radius:8px;
  display:flex;overflow:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.04);
  position:relative;
  user-select:none;
  contain:layout paint;
}

.imgui-nav{
  width:80px;flex-shrink:0;
  background:var(--bg);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  align-items:center;
}

.imgui-logo{
  width:62px;height:62px;
  margin-top:12px;margin-bottom:16px;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.imgui-logo img{width:52px;height:52px;border-radius:8px;object-fit:contain;display:block}

.nav-tabs{display:flex;flex-direction:column;gap:10px}

.nav-tab{
  width:45px;height:41px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border-radius:6px;
  position:relative;
  color:rgba(255,255,255,.28);
  transition:color .18s;
  flex-shrink:0;
}
.nav-tab:hover{color:rgba(255,255,255,.7)}
.nav-tab.active{color:var(--bg)}
.nav-tab.active::before{
  content:'';
  position:absolute;inset:0;border-radius:6px;
  background:var(--scheme);
  z-index:0;
}
.nav-tab.active::after{
  content:'';
  position:absolute;
  inset:-3px;border-radius:9px;
  background:var(--scheme-8);
  box-shadow:0 0 10px 3px var(--scheme-8);
  z-index:-1;
}
.nav-tab i{
  font-size:12px;position:relative;z-index:1;
}

/* Discord user avatar at bottom of nav */
.nav-user{
  margin-top:auto;
  margin-bottom:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width:100%;
  padding:0 8px;
}
.nav-avatar{
  width:38px;height:38px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  border:2px solid var(--scheme-30);
  box-shadow:0 0 8px rgba(135,206,255,.12);
  background:var(--frame);
}
.nav-username{
  font-size:10px;font-weight:600;
  color:var(--dim);
  max-width:64px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:center;
}

/* ── CONTENT ── */
.imgui-content{
  flex:1;min-width:0;
  background:var(--bg);
  display:flex;flex-direction:column;
  position:relative;
}

.content-bar{
  position:relative;
  flex-shrink:0;
  height:65px;
}
.content-title{
  position:absolute;left:30px;top:26px;
  font-size:25px;font-weight:700;
  color:var(--text);
  line-height:1;
  letter-spacing:-.01em;
}
.content-search{
  position:absolute;
  right:26px;top:19px;
  width:156px;height:39px;
  background:var(--frame);
  border:none;outline:none;
  border-radius:var(--rounding);
  padding:0 12px 0 32px;
  color:var(--text);
  font-size:13px;font-family:inherit;
  transition:background .15s;
}
.content-search:focus{background:var(--frame-h)}
.content-search::placeholder{color:var(--dim)}
.search-icon{
  position:absolute;right:162px;top:19px;
  width:39px;height:39px;
  display:flex;align-items:center;justify-content:center;
  color:var(--dim);font-size:11px;
  pointer-events:none;
}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

.content-subtabs{
  position:absolute;
  left:30px;top:65px;
  display:flex;gap:5px;
}
.subtab{
  height:30px;
  padding:0 10px;
  display:flex;align-items:center;
  cursor:pointer;border-radius:6px;
  font-size:13.5px;font-weight:500;
  color:rgba(255,255,255,.75);
  transition:color .15s,background .15s;
  white-space:nowrap;
}
.subtab:hover{color:var(--text)}
.subtab.active{
  background:rgba(135,206,255,.1);
  color:var(--scheme);
  font-weight:600;
}

.content-main{
  position:absolute;
  top:103px;left:0;right:0;bottom:0;
  overflow-y:auto;overflow-x:hidden;
  padding:0 10px 10px 10px;
}

.tab-pane{display:none}
.tab-pane.active{display:block}
.subtab-pane{display:none}
.subtab-pane.active{display:block}

.page-cols{display:flex;gap:10px;align-items:flex-start;}
.page-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}

/* CHILD */
.child{
  background:var(--child);
  border-radius:var(--child-rounding);
  overflow:hidden;
}
.child-header{
  height:40px;
  background:var(--header);
  border-radius:var(--child-rounding) var(--child-rounding) 0 0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 17px;
  cursor:pointer;
}
.child-title{font-size:14px;font-weight:600;color:var(--text);}
.child-arrow{color:var(--dim);font-size:10px;transition:transform .22s,color .15s;}
.child.collapsed .child-arrow{transform:rotate(-90deg)}
.child-header:hover .child-arrow{color:var(--scheme)}
.child-body{padding:17px 17px 6px;display:flex;flex-direction:column;}
.child.collapsed .child-body{display:none}

/* WIDGET ROW */
.widget-row{
  width:100%;display:flex;align-items:center;
  min-height:20px;padding-bottom:11.5px;margin-bottom:11.5px;
  border-bottom:1px solid var(--border);gap:8px;position:relative;
}
.widget-row:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none;}
.widget-label{
  font-size:14px;font-weight:500;color:var(--dim);
  flex:1;min-width:0;transition:color .15s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.widget-row:hover .widget-label,.widget-row.checked .widget-label{color:var(--text);}
.widget-right{
  display:flex;align-items:center;gap:5px;
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  padding-left:16px;
  background:linear-gradient(to right, transparent 0%, var(--child) 28%);
  pointer-events:none;
}
.widget-right > *{ pointer-events:auto; }

/* CHECKBOX */
.widget-row.type-checkbox{cursor:pointer}
.checkbox-box{
  width:20px;height:20px;border-radius:var(--rounding);
  background:var(--frame);flex-shrink:0;position:relative;
  transition:background .18s;margin-right:8px;order:-1;
}
.widget-row.checked .checkbox-box{
  background:var(--scheme);
  box-shadow:0 0 8px 3px rgba(135,206,255,.15);
}
.checkbox-box::after{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .18s;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 11 11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='1.5,5.5 4.5,8.5 9.5,2.5' fill='none' stroke='%230F0F11' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}
.widget-row.checked .checkbox-box::after{opacity:1}
.widget-row:not(.checked):hover .checkbox-box{background:var(--frame-h)}

/* COLOR SWATCH */
.color-swatch{
  width:19px;height:19px;border-radius:4px;cursor:pointer;flex-shrink:0;
  border:1px solid rgba(255,255,255,.08);transition:transform .1s,border-color .15s;
}
.color-swatch:hover{transform:scale(1.08);border-color:rgba(255,255,255,.18)}

/* HOTKEY */
.hotkey{
  height:20px;padding:0 6px;border-radius:4px;
  border:1px solid var(--frame-h);font-size:11px;font-weight:700;
  color:var(--dim);display:flex;align-items:center;cursor:default;
  white-space:nowrap;transition:color .15s,border-color .15s;
}
.hotkey.kb-interactive{cursor:pointer}
.hotkey.kb-interactive:hover{color:var(--text);border-color:rgba(135,206,255,.35)}
.hotkey.kb-listening{color:var(--scheme);border-color:var(--scheme);animation:kb-blink .65s infinite}
@keyframes kb-blink{0%,100%{opacity:1}50%{opacity:.35}}

/* KEYBIND MODE BADGE  (shown alongside key badge) */
.kb-mode{
  height:16px;padding:0 5px;border-radius:3px;
  border:1px solid rgba(255,255,255,.05);font-size:9px;font-weight:700;
  color:rgba(63,69,85,.75);display:flex;align-items:center;cursor:default;
  white-space:nowrap;letter-spacing:.05em;text-transform:uppercase;
  transition:color .15s,border-color .15s,background .15s;flex-shrink:0;
}
.kb-mode-interactive{cursor:pointer}
.kb-mode-interactive:hover{background:rgba(135,206,255,.07);color:rgba(200,215,235,.55);border-color:rgba(135,206,255,.18)}

/* SLIDER */
.slider-wrap{display:flex;align-items:center;gap:6px;flex-shrink:0;width:55%;}
.slider-track{
  flex:1;height:6px;border-radius:99px;background:var(--frame);
  position:relative;cursor:pointer;overflow:visible;
}
.slider-fill{
  height:100%;border-radius:99px;background:var(--scheme);
  position:relative;pointer-events:none;
}
.slider-fill::after{
  content:'';position:absolute;right:-3px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--scheme);
  box-shadow:0 0 6px 2px rgba(135,206,255,.4);opacity:0;transition:opacity .15s;
}
.slider-track:hover .slider-fill::after,.slider-track.dragging .slider-fill::after{opacity:1}
.slider-value{
  background:transparent;border:none;outline:none;color:var(--dim);
  font-size:12px;font-weight:600;width:32px;text-align:right;cursor:text;padding:0;
  transition:color .15s;
}
.slider-value:hover,.slider-value:focus{color:var(--text)}

/* COMBO */
.combo-frame{
  flex-shrink:0;width:55%;height:21px;background:var(--frame);
  border-radius:var(--rounding);display:flex;align-items:center;
  position:relative;cursor:pointer;transition:background .15s;overflow:hidden;
}
.combo-frame:hover{background:var(--frame-h)}
.combo-frame.open{background:var(--frame-h)}
.combo-value{
  flex:1;min-width:0;font-size:12px;font-weight:600;color:var(--dim);
  padding:0 6px;overflow:hidden;white-space:nowrap;transition:color .15s;
}
.combo-frame:hover .combo-value,.combo-frame.open .combo-value{color:var(--text)}
.combo-fade{
  position:absolute;right:22px;top:0;bottom:0;width:14px;
  background:linear-gradient(to right,transparent,var(--frame));
  pointer-events:none;transition:background .15s;
}
.combo-arrow{
  width:22px;height:100%;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--dim);font-size:8px;transition:transform .18s,color .15s;
}
.combo-frame.open .combo-arrow{transform:rotate(180deg);color:var(--text)}

.combo-dropdown{
  position:absolute;z-index:200;background:var(--frame-h);
  border-radius:var(--rounding);border:none;
  box-shadow:0 4px 16px rgba(0,0,0,.5);overflow:hidden;
  display:none;min-width:90px;
  padding:5px 0;
}
.combo-dropdown.open{display:block}
.combo-option{
  padding:0 8px;height:30px;font-size:12px;font-weight:500;
  color:var(--dim);cursor:pointer;display:flex;align-items:center;gap:6px;
  transition:background .1s,color .1s;
}
.combo-option:hover{background:rgba(135,206,255,.07);color:var(--text)}
.combo-option.selected{color:var(--text)}
.combo-option.selected::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--scheme);flex-shrink:0;
}
.combo-option:not(.selected)::before{content:'';width:5px;flex-shrink:0}
.mc-check{
  width:13px;height:13px;border-radius:3px;
  background:var(--frame);border:1px solid var(--border2);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:8px;
}
.combo-option.selected .mc-check{background:var(--scheme);border-color:var(--scheme);color:#0F0F11;}

/* BUTTON */
.imgui-btn{
  width:100%;height:30px;background:var(--frame);
  border:1px solid transparent;border-radius:var(--rounding);
  color:var(--text);font-size:13px;font-weight:500;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s;
}
.imgui-btn:hover{background:var(--frame-h);border-color:rgba(135,206,255,.3);}
.imgui-btn.danger:hover{border-color:rgba(239,68,68,.4)}

/* INPUT */
.imgui-input{
  width:100%;height:28px;background:var(--frame);
  border:1px solid var(--border2);border-radius:var(--rounding);
  color:var(--text);font-size:13px;padding:0 10px;outline:none;
  margin-bottom:8px;
}
.imgui-input:focus{background:var(--frame-h);border-color:rgba(135,206,255,.3)}

/* LISTBOX */
.imgui-listbox{
  width:100%;background:var(--frame);border-radius:var(--rounding);
  overflow-y:auto;flex:1;
}
.imgui-selectable{
  height:28px;padding:0 12px;display:flex;align-items:center;
  font-size:13px;color:var(--dim);cursor:pointer;
  transition:background .1s,color .1s;
}
.imgui-selectable:hover{background:rgba(135,206,255,.05);color:var(--text)}
.imgui-selectable.selected{background:rgba(135,206,255,.09);color:var(--text)}

/* RESOURCE */
.resource-item{
  display:flex;align-items:center;justify-content:space-between;
  height:28px;padding:0 4px 0 8px;font-size:12px;color:var(--dim);
  border-bottom:1px solid var(--border);
}
.resource-item:last-child{border-bottom:none}
.resource-freeze{
  height:20px;padding:0 8px;background:var(--frame-h);
  border:1px solid rgba(239,68,68,.25);border-radius:4px;
  color:rgba(239,68,68,.7);font-size:11px;font-weight:600;cursor:pointer;
  transition:all .15s;
}
.resource-freeze:hover{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.5);color:#F87171}

/* WORLD LAYOUT */
.world-layout{display:flex;gap:10px}
.world-left{flex:1;min-width:0;display:flex;flex-direction:column}
.world-left .child-body{flex:1;display:flex;flex-direction:column;padding-bottom:8px}
.world-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.text-row{font-size:13px;color:var(--dim);padding:2px 0 11.5px;border-bottom:1px solid var(--border);margin-bottom:11.5px;}
.text-row:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.text-val{color:var(--text);float:right}

/* EXECUTOR */
.lua-editor{
  background:#0A0B0E;border-radius:var(--rounding);
  font-family:'Consolas','Courier New',monospace;font-size:13px;
  min-height:160px;position:relative;overflow:hidden;
  border-bottom:2px solid rgba(135,206,255,.35);
}
.lua-line-nums{position:absolute;left:0;top:0;bottom:0;width:36px;background:#0F1014;border-right:1px solid rgba(135,206,255,.07);padding:4px 0;}
.lua-line-num{height:16px;line-height:16px;text-align:right;padding-right:6px;color:#50607A;font-size:12px;}
.lua-code{margin-left:36px;padding:4px 8px;outline:none;min-height:160px;color:#D4D4D4;line-height:16px;white-space:pre;}

/* OVERLAY OFFLINE */
#sessionOfflineOverlay{
  position:fixed;inset:0;background:rgba(6,10,18,.85);
  backdrop-filter:blur(4px);z-index:999;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
#sessionOfflineOverlay > div{
  text-align:center;color:#fff;pointer-events:auto;
  background:#19191D;padding:32px 48px;border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}