/* ToolifyBox VS Code inspired editor layer — additive styles only */
:root{--vsc-bg:#0b1020;--vsc-panel:#111827;--vsc-panel-2:#151d2e;--vsc-line:#263247;--vsc-muted:#8b9bb4;--vsc-text:#e6edf7;--vsc-blue:#3794ff;--vsc-blue-soft:rgba(55,148,255,.16);--vsc-green:#89d185;--vsc-orange:#dcdcaa;--vsc-shadow:0 24px 80px rgba(2,8,23,.28)}
.code-editor-page .tool-workspace,.tool-workspace:has(.ace-editor-container){background:linear-gradient(145deg,#111827,#0b1220)!important;border:1px solid var(--vsc-line)!important;border-radius:14px!important;padding:10px!important;box-shadow:var(--vsc-shadow)!important;height:clamp(620px,78vh,900px)!important;min-height:620px!important;max-width:1320px!important}
.tool-workspace:has(.ace-editor-container) .editor-container{background:var(--vsc-bg)!important;border:1px solid #263247!important;border-radius:9px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important}
.tool-workspace:has(.ace-editor-container) .editor-header{background:linear-gradient(180deg,#171f31,#111827)!important;border-bottom:1px solid var(--vsc-line)!important;min-height:48px!important;padding:0 9px!important;direction:ltr}
.tool-workspace:has(.ace-editor-container) .tab-group{align-self:stretch;gap:2px;align-items:stretch}
.tool-workspace:has(.ace-editor-container) .tab-btn{position:relative;border-radius:0!important;border-right:1px solid transparent!important;padding:0 18px!important;min-width:104px;justify-content:center;background:transparent!important;color:#91a0b8!important;font-family:'Fira Code','Tajawal',monospace!important;font-size:.84rem!important;transition:background .18s,color .18s!important}
.tool-workspace:has(.ace-editor-container) .tab-btn:hover{background:rgba(255,255,255,.05)!important;color:#dbeafe!important}
.tool-workspace:has(.ace-editor-container) .tab-btn.active{background:#0b1020!important;color:#fff!important;box-shadow:none!important;border-top:2px solid var(--vsc-blue)!important}
.tool-workspace:has(.ace-editor-container) .tab-btn[data-lang="html"] i{color:#e44d26}.tool-workspace:has(.ace-editor-container) .tab-btn[data-lang="css"] i{color:#42a5f5}.tool-workspace:has(.ace-editor-container) .tab-btn[data-lang="js"] i{color:#f7df1e}
.tool-workspace:has(.ace-editor-container) .editor-actions{gap:3px;align-items:center;direction:ltr}
.tool-workspace:has(.ace-editor-container) .action-btn{width:32px!important;height:32px!important;border-radius:5px!important;background:transparent!important;border:1px solid transparent!important;color:#92a0b7!important;box-shadow:none!important}
.tool-workspace:has(.ace-editor-container) .action-btn:hover{background:var(--vsc-blue-soft)!important;border-color:rgba(55,148,255,.4)!important;color:#fff!important;transform:none!important}
.tool-workspace:has(.ace-editor-container) .preview-btn{background:#1f6feb!important;color:#fff!important;padding:0!important}
.tool-workspace:has(.ace-editor-container) .editor-body{position:relative;background:#0b1020!important;min-height:0!important;direction:ltr}
.tool-workspace:has(.ace-editor-container) .ace-editor-container{background:#0b1020!important;color:#d7e2f0!important;font-family:'Fira Code',Consolas,monospace!important;font-size:14px!important;line-height:1.65!important}
.tool-workspace:has(.ace-editor-container) .ace_gutter{background:#0b1020!important;color:#52627a!important;border-right:1px solid #1b2638!important}
.tool-workspace:has(.ace-editor-container) .ace_gutter-cell{padding-left:14px!important;padding-right:14px!important}
.tool-workspace:has(.ace-editor-container) .ace_gutter-active-line{background:rgba(55,148,255,.13)!important;color:#c6dcff!important}
.tool-workspace:has(.ace-editor-container) .ace_marker-layer .ace_active-line{background:rgba(55,148,255,.08)!important}
.tool-workspace:has(.ace-editor-container) .ace_marker-layer .ace_selection{background:rgba(55,148,255,.28)!important}
.tool-workspace:has(.ace-editor-container) .ace_cursor{color:#79c0ff!important;border-left:2px solid #79c0ff!important}
.tool-workspace:has(.ace-editor-container) .ace_scrollbar-v,.tool-workspace:has(.ace-editor-container) .ace_scrollbar-h{scrollbar-color:#34445e #0b1020}
.vscode-commandbar{display:flex;align-items:center;gap:8px;padding:7px 12px;background:#0f172a;border-bottom:1px solid #263247;color:#91a0b8;font:12px 'Fira Code',monospace;direction:ltr}
.vscode-commandbar .vscode-file{display:inline-flex;align-items:center;gap:7px;color:#dbeafe}.vscode-commandbar .vscode-file i{color:#e44d26}.vscode-commandbar .vscode-hint{margin-left:auto;color:#657692}
.vscode-statusbar{display:flex;align-items:center;gap:14px;min-height:27px;padding:0 12px;background:#1767b1;color:#eff6ff;font:11px 'Fira Code',monospace;direction:ltr}.vscode-statusbar .status-right{margin-left:auto;display:flex;gap:14px}.vscode-statusbar i{font-size:10px}
.vscode-shortcuts{display:flex;flex-wrap:wrap;gap:7px;padding:9px 12px;background:#111827;border-top:1px solid #263247;color:#7f90aa;font:11px 'Fira Code',monospace;direction:ltr}.vscode-shortcuts kbd{padding:3px 6px;border:1px solid #334155;border-radius:4px;background:#0b1020;color:#c7d2fe}
.preview-modal{border:1px solid #334155!important;border-radius:12px!important;background:#111827!important;box-shadow:0 28px 90px rgba(0,0,0,.5)!important}.modal-header{background:#171f31!important;border-bottom-color:#263247!important}.modal-title{font-family:'Tajawal',sans-serif!important}.preview-frame{background:#fff!important}
@media(max-width:760px){.tool-workspace:has(.ace-editor-container){height:72vh!important;min-height:540px!important;padding:6px!important}.tool-workspace:has(.ace-editor-container) .tab-btn{min-width:70px;padding:0 8px!important;font-size:.72rem!important}.tool-workspace:has(.ace-editor-container) .tab-btn span{display:none}.vscode-commandbar .vscode-hint{display:none}.vscode-shortcuts{font-size:10px}}