/* ==========================================================================
   YELIGZON ENGINE - UNITY-LIKE DARK THEME
   ========================================================================== */

:root{
  --bg: #111214;
  --panel: #1b1d20;
  --muted: #9aa7b2;
  --accent: #2ca8f4; /* cyan */
  --accent-2: #6bd6ff;
  --highlight: rgba(255,255,255,0.06);
}

*{box-sizing:border-box;margin:0;padding:0;font-family: Inter, Roboto, 'Segoe UI', system-ui, sans-serif;}

body{background:var(--bg);color:#dbe7ee;height:100vh;display:flex;flex-direction:column;}

/* TOOLBAR */
#toolbar{height:46px;background:linear-gradient(180deg,#222428,#1e2124);display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-bottom:1px solid rgba(255,255,255,0.03);}
#toolbar .logo{color:var(--accent);font-weight:700;letter-spacing:0.6px}
#toolbar .center{display:flex;gap:6px}
.btn{background:#151619;border:1px solid rgba(255,255,255,0.03);color:#e7f6fb;padding:6px 10px;border-radius:4px;cursor:pointer}
.btn.play{background:linear-gradient(180deg,#2a9df4,#1f7fc6);box-shadow:0 4px 12px rgba(42,157,244,0.12)}
.btn.pause{background:#2b2d30}
.btn.step{background:#2b2d30}
.btn.stop{background:#7d2f2f}
#mode-indicator{color:var(--muted);font-size:13px;margin-right:12px}
#py-status.offline{color:#ff6b6b;font-size:12px}
#py-status.online{color:#7ef2c5}

/* LAYOUT */
#editor-layout{display:flex;flex:1;min-height:0}

/* HIERARCHY & INSPECTOR */
#hierarchy,#inspector{width:260px;background:var(--panel);border-right:1px solid rgba(255,255,255,0.02);display:flex;flex-direction:column}
#inspector{border-left:1px solid rgba(255,255,255,0.02)}
.panel-header{padding:10px 12px;background:transparent;color:var(--accent);font-weight:700;font-size:12px;border-bottom:1px solid rgba(255,255,255,0.02)}
#scene-tree{list-style:none;padding:10px;flex:1;overflow:auto}
.tree-item{padding:8px 10px;margin-bottom:6px;background:transparent;border-radius:4px;cursor:pointer;color:var(--muted);}
.tree-item:hover{background:var(--highlight);color:#fff}
.tree-item.active{background:rgba(44,168,244,0.12);border-left:3px solid var(--accent);color:#fff;padding-left:7px}
.panel-footer{padding:10px;border-top:1px solid rgba(255,255,255,0.02)}
.btn.small{padding:6px 8px;font-size:13px}

/* VIEWPORT */
#viewport{flex:1;display:flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(180deg,#0d0f11,#0b0c0d)}
.viewport-header{position:absolute;left:8px;top:8px;color:var(--muted);font-size:12px}
#gameCanvas{background:linear-gradient(180deg,#081018,#08162a);border:1px solid rgba(255,255,255,0.03);box-shadow:0 8px 40px rgba(2,6,12,0.8)}
#gizmo-hint{position:absolute;right:14px;bottom:12px;color:var(--muted);font-size:12px}

/* SELECTED HIGHLIGHT */
.selection-outline{position:absolute;border:2px dashed rgba(107,214,255,0.6);pointer-events:none;border-radius:3px}

/* INSPECTOR */
.component-box{padding:12px;border-bottom:1px solid rgba(255,255,255,0.02)}
.property-group{display:flex;justify-content:space-between;align-items:center;margin:8px 0}
.property-group input[type=number]{width:80px;background:#0f1315;border:1px solid rgba(255,255,255,0.03);color:#dbe7ee;padding:6px;border-radius:3px}

/* CONSOLE */
#console-panel{height:120px;background:var(--panel);border-top:1px solid rgba(255,255,255,0.02);}
#console-logs{padding:10px;font-family:monospace;font-size:13px;overflow:auto;height:100%}
.log-entry.info{color:#6bd6ff}

/* RESPONSIVE */
@media (max-width:1000px){#hierarchy,#inspector{display:none}}