@import url('https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Consolas&display=swap');

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

/* Grid & Scrollbars */
.ares-grid { background-image: radial-gradient(#333333 1px, transparent 1px); background-size: 8px 8px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0A0A0A; }
::-webkit-scrollbar-thumb { background: #3E3E42; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Toolbox */
.tool-item { transition: background 0.1s ease; border-left: 3px solid transparent; }
.tool-item:hover { background: #2D2D30; border-left: 3px solid #007ACC; }
.tool-item:active { cursor: grabbing; }

/* Canvas & Dropzone */
#canvas-dropzone { transition: background-color 0.2s ease; }
#canvas-dropzone.drag-over { background-color: rgba(0, 122, 204, 0.1); }
.canvas-item { box-sizing: border-box; overflow: hidden; }
.canvas-item.selected { box-shadow: 0 0 0 1px #007ACC !important; z-index: 100 !important; }
.has-shadow { box-shadow: 5px 5px 15px rgba(0,0,0,0.5); }
.canvas-item.selected.has-shadow { box-shadow: 0 0 0 1px #007ACC, 5px 5px 15px rgba(0,0,0,0.5) !important; }

/* Resize Handle */
.resize-handle {
    position: absolute; bottom: 0; right: 0;
    width: 6px; height: 6px; background-color: #FFFFFF;
    border: 1px solid #007ACC; cursor: nwse-resize; z-index: 101; opacity: 0;
}
.canvas-item.selected .resize-handle { opacity: 1; }

/* IDE Tabs */
.ide-tab { padding: 4px 12px; background: #2D2D30; color: #888; cursor: pointer; border-right: 1px solid #1E1E1E; }
.ide-tab.active { background: #1E1E1E; color: #007ACC; border-top: 2px solid #007ACC; }

/* Solution Explorer Tree */
.tree-item { cursor: pointer; padding-left: 12px; }
.tree-item:hover { background: #2D2D30; }
.tree-item.active { background: #3F3F46; color: #FFF; }