* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 11px;
  user-select: none;
}

body, html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #d4d0c8; /* Windows XP Classic dialog grey */
}

#studio-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* =========================================
   1. SPRITE SHEET ICON SYSTEM (Icons.png)
   ========================================= */
.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('./ImageAssets/Icons.png'); /*[cite: 4] */
  background-repeat: no-repeat;
  vertical-align: middle;
}

/* Grid coordinate offsets for 16x16 icons inside Icons.png */
.icon-pointer   { background-position: -0px -0px; }
.icon-move      { background-position: -32px -0px; }
.icon-resize    { background-position: -48px -0px; }
.icon-rotate    { background-position: -64px -0px; }
.icon-cube      { background-position: -0px -16px; }
.icon-anchor    { background-position: -16px -16px; }
.icon-play      { background-position: -32px -16px; }
.icon-stop      { background-position: -48px -16px; }
.icon-folder    { background-position: -0px -32px; }
.icon-world     { background-position: -16px -32px; }
.icon-user      { background-position: -32px -32px; }
.icon-sun       { background-position: -48px -32px; }
.icon-properties{ background-position: -0px -48px; }
.icon-terminal  { background-position: -16px -48px; }

/* =========================================
   2. TOP MENU & TOOLBAR
   ========================================= */
#top-bar {
  display: flex;
  background: #ece9d8;
  border-bottom: 1px solid #999;
  padding: 2px 4px;
}

.menu-item {
  padding: 2px 8px;
  cursor: default;
}

.menu-item:hover {
  background-color: #316ac5;
  color: #fff;
}

#toolbar {
  display: flex;
  align-items: center;
  background: #f0f0f0;
  border-bottom: 1px solid #b2b2b2;
  padding: 3px 6px;
  gap: 4px;
}

.tool-group {
  display: flex;
  gap: 2px;
}

.divider {
  width: 1px;
  height: 22px;
  background: #ccc;
  margin: 0 4px;
}

.tool-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  background: #e1e1e1;
  border: 1px solid #7f9db9;
  border-radius: 2px;
  cursor: pointer;
}

.tool-btn:hover {
  background: #ffe8a6;
  border-color: #e6b800;
}

.tool-btn:active {
  background: #ffd87d;
}

/* =========================================
   3. WORKBENCH & PANELS
   ========================================= */
#workbench {
  display: flex;
  flex: 1;
  overflow: hidden;
  background: #808080;
}

.panel {
  width: 220px;
  background: #fff;
  border: 1px solid #848484;
  display: flex;
  flex-direction: column;
}

.panel-header {
  background: linear-gradient(to bottom, #eeeeee 0%, #cccccc 100%);
  padding: 4px 6px;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #a0a0a0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}

/* Explorer Tree */
.tree-item {
  padding: 2px 4px;
  cursor: pointer;
}

.tree-item:hover {
  background-color: #e8f0fe;
}

.tree-children {
  padding-left: 14px;
}

/* Properties Table */
#properties-table {
  width: 100%;
  border-collapse: collapse;
}

#properties-table th, #properties-table td {
  border: 1px solid #d9d9d9;
  padding: 3px 5px;
  text-align: left;
}

#properties-table th {
  background: #f0f0f0;
}

.empty-msg {
  color: #888;
  font-style: italic;
  text-align: center !important;
}

/* Viewport Canvas */
#viewport-container {
  flex: 1;
  position: relative;
  background: #000;
}

#render-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

#viewport-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-family: monospace;
  pointer-events: none;
}

/* Output Console */
#output-panel {
  height: 90px;
  background: #fff;
  border-top: 2px solid #a0a0a0;
  display: flex;
  flex-direction: column;
}

#console-logs {
  flex: 1;
  padding: 4px 8px;
  font-family: 'Consolas', 'Courier New', monospace;
  overflow-y: auto;
  background: #fafafa;
}

.log-info {
  color: #000;
}