body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
  :root {
    --bg:       #0a0c0e;
    --panel:    #0e1114;
    --border:   #1e2830;
    --amber:    #e8a020;
    --amber2:   #f0c060;
    --amber-dim:#7a4a08;
    --green:    #3ddc84;
    --red:      #ff4d4d;
    --blue:     #5aafff;
    --text:     #c8cdd6;
    --text-dim: #556070;
    --menu-h:   26px;
    --toolbar-h:40px;
    --status-h: 24px;
    --sidebar-w:220px;
    --console-h:200px;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: var(--bg); color: var(--text);
    font-family: 'Share Tech Mono', monospace;
    height: 100vh; display: flex; flex-direction: column; overflow: hidden;
    background-image: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.08) 2px,rgba(0,0,0,0.08) 4px);
  }

  /* TITLE BAR */
  #titlebar {
    height: var(--toolbar-h); background: var(--panel);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; padding: 0 14px; gap: 10px;
    flex-shrink: 0; position: relative;
  }
  #titlebar::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,var(--amber-dim),transparent);
  }
  .logo { font-family:'Orbitron',sans-serif; font-weight:900; font-size:14px; color:var(--amber); letter-spacing:2px; text-shadow:0 0 12px var(--amber-dim); flex-shrink:0; }
  .logo span { color:var(--amber2); }
  .toolbar-sep { width:1px; height:20px; background:var(--border); flex-shrink:0; }
  .tb-btn {
    background:none; border:1px solid var(--border); color:var(--text-dim);
    font-family:'Share Tech Mono',monospace; font-size:11px; padding:3px 11px;
    cursor:pointer; letter-spacing:1px; transition:all 0.15s;
    display:flex; align-items:center; gap:5px; flex-shrink:0;
  }
  .tb-btn:hover { border-color:var(--amber); color:var(--amber); }
  .tb-btn.primary { border-color:var(--amber-dim); color:var(--amber); background:rgba(232,160,32,0.05); }
  .tb-btn.primary:hover { background:rgba(232,160,32,0.15); box-shadow:0 0 8px rgba(232,160,32,0.2); }
  .tb-btn.danger { color:var(--red); border-color:#4a1515; }
  .tb-btn.danger:hover { border-color:var(--red); background:rgba(255,77,77,0.08); }
  #compiler-status-badge {
    font-size:10px; padding:2px 8px; border:1px solid var(--border);
    color:var(--text-dim); display:flex; align-items:center; gap:5px;
    cursor:pointer; transition:all 0.15s; letter-spacing:1px;
  }
  #compiler-status-badge:hover { border-color:var(--amber); color:var(--amber); }
  #compiler-dot { width:6px; height:6px; border-radius:50%; background:#334; transition:background 0.3s; }
  #compiler-dot.online  { background:var(--green); box-shadow:0 0 6px var(--green); }
  #compiler-dot.offline { background:var(--red); }
  #compiler-dot.checking { background:var(--amber); animation:pulse 0.8s infinite; }
  .spacer { flex:1; }
  .badge { font-family:'Orbitron',sans-serif; font-size:9px; color:var(--text-dim); border:1px solid var(--border); padding:2px 8px; }

  /* MENU BAR */
  #menubar {
    height:var(--menu-h); background:#0b0e11;
    border-bottom:1px solid var(--border);
    display:flex; align-items:stretch; flex-shrink:0; user-select:none;
  }
  .menu-item { position:relative; display:flex; align-items:center; }
  .menu-label {
    padding:0 12px; font-size:11px; letter-spacing:1px; color:var(--text-dim);
    cursor:pointer; height:100%; display:flex; align-items:center; transition:all 0.1s;
  }
  .menu-label:hover, .menu-item.open .menu-label { color:var(--amber); background:rgba(232,160,32,0.07); }
  .menu-dropdown {
    display:none; position:absolute; top:100%; left:0;
    background:#111518; border:1px solid var(--border);
    border-top:1px solid var(--amber-dim); min-width:210px; z-index:200;
    box-shadow:0 8px 24px rgba(0,0,0,0.6);
  }
  .menu-item.open .menu-dropdown { display:block; }
  .menu-entry {
    padding:6px 16px; font-size:11px; color:var(--text-dim); cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    transition:all 0.1s; white-space:nowrap;
  }
  .menu-entry:hover { color:var(--amber); background:rgba(232,160,32,0.07); }
  .menu-entry .shortcut { color:var(--text-dim); font-size:10px; opacity:0.5; }
  .menu-entry:hover .shortcut { opacity:0.8; }
  .menu-sep { height:1px; background:var(--border); margin:3px 0; }
  .menu-section { padding:4px 16px 2px; font-size:9px; color:var(--amber-dim); letter-spacing:2px; }

  /* LAYOUT */
  #layout { flex:1; display:flex; overflow:hidden; }

  /* SIDEBAR */
  #sidebar {
    width:var(--sidebar-w); flex-shrink:0; background:var(--panel);
    border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden;
  }
  .sidebar-header {
    padding:7px 12px; font-size:10px; color:var(--text-dim); letter-spacing:2px;
    border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between;
  }
  .sidebar-header button { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:14px; }
  .sidebar-header button:hover { color:var(--amber); }
  #file-list { flex:1; overflow-y:auto; padding:4px 0; }
  .file-item {
    padding:5px 12px 5px 22px; font-size:12px; cursor:pointer; color:var(--text-dim);
    display:flex; align-items:center; gap:6px; transition:all 0.1s; position:relative;
  }
  .file-item:hover { color:var(--text); background:rgba(255,255,255,0.03); }
  .file-item.active { color:var(--amber); }
  .file-item.active::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--amber); }
  .folder-item {
    padding:5px 12px 5px 8px; font-size:12px; cursor:pointer; color:#8899aa;
    display:flex; align-items:center; gap:5px; transition:all 0.1s; position:relative;
    user-select:none; font-weight:bold; letter-spacing:0.5px;
  }
  .folder-item:hover { color:#aabbcc; background:rgba(255,255,255,0.03); }
  .folder-arrow { font-size:9px; width:10px; display:inline-block; transition:transform 0.15s; cursor:pointer; }
  .folder-arrow.open { transform:rotate(90deg); }
  .folder-children { overflow:hidden; }
  .drag-over-folder { background:rgba(232,160,32,0.15) !important; outline:1px solid rgba(232,160,32,0.5); }
  .drag-over-root   { background:rgba(232,160,32,0.08); outline:1px dashed rgba(232,160,32,0.4); }
  .file-item.dragging { opacity:0.4; }
  .snippets-section { border-top:1px solid var(--border); flex-shrink:0; }
  .snippet-item { padding:5px 12px 5px 20px; font-size:11px; cursor:pointer; color:var(--text-dim); transition:color 0.1s; }
  .snippet-item:hover { color:var(--amber2); }

  /* EDITOR */
  #editor-area { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
  #tabs {
    height:34px; background:var(--bg); border-bottom:1px solid var(--border);
    display:flex; align-items:flex-end; flex-shrink:0; overflow-x:auto;
  }
  #tabs::-webkit-scrollbar { display:none; }
  .tab {
    height:26px; padding:0 12px; font-size:12px; display:flex; align-items:center; gap:7px;
    cursor:pointer; border:1px solid transparent; border-bottom:none; color:var(--text-dim);
    white-space:nowrap; transition:all 0.1s; position:relative; top:1px; background:var(--bg); flex-shrink:0;
  }
  .tab:hover { color:var(--text); background:var(--panel); }
  .tab.active { color:var(--amber); background:var(--panel); border-color:var(--border); border-bottom-color:var(--panel); }
  .tab .close-tab { background:none; border:none; color:inherit; cursor:pointer; font-size:14px; opacity:0.4; line-height:1; padding:0; }
  .tab .close-tab:hover { opacity:1; color:var(--red); }
  .add-tab { padding:0 10px; color:var(--text-dim); cursor:pointer; font-size:18px; align-self:center; }
  .add-tab:hover { color:var(--amber); }
  #editor-wrapper { flex:1; overflow:hidden; position:relative; }
  #monaco-container { position:absolute; inset:0; }

  /* CONSOLE */
  #console-panel {
    height:var(--console-h); flex-shrink:0; background:#060809;
    border-top:1px solid var(--border); display:flex; flex-direction:column; position:relative;
  }
  #console-panel::before {
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,var(--amber-dim),transparent);
  }
  .console-tabs { display:flex; border-bottom:1px solid var(--border); flex-shrink:0; }
  .console-tab {
    padding:4px 13px; font-size:11px; cursor:pointer; color:var(--text-dim);
    letter-spacing:1px; border-right:1px solid var(--border); transition:color 0.1s;
  }
  .console-tab.active { color:var(--amber); }
  .console-tab:hover { color:var(--text); }
  #console-output { flex:1; overflow-y:auto; padding:7px 12px; font-size:12px; line-height:1.6; }
  #console-output::-webkit-scrollbar { width:4px; }
  #console-output::-webkit-scrollbar-thumb { background:var(--border); }
  .console-line { display:flex; gap:8px; }
  .console-line .prompt { color:var(--amber-dim); flex-shrink:0; }
  .console-line.error .text   { color:var(--red); }
  .console-line.warning .text { color:#ffaa00; }
  .console-line.success .text { color:var(--green); }
  .console-line.info .text    { color:var(--blue); }
  .console-line.text .text    { color:var(--text); }
  .console-resize { position:absolute; top:-3px; left:0; right:0; height:6px; cursor:ns-resize; z-index:10; }

  /* STATUS BAR */
  #statusbar {
    height:var(--status-h); background:var(--amber-dim);
    display:flex; align-items:center; padding:0 12px; gap:16px;
    font-size:10px; letter-spacing:1px; flex-shrink:0;
  }
  .status-item { color:rgba(255,220,120,0.8); display:flex; align-items:center; gap:4px; }
  .status-item strong { color:#fff4cc; }
  #status-indicator { width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0; }
  #status-indicator.running { background:var(--amber); animation:pulse 0.8s infinite; }
  #status-indicator.error   { background:var(--red); }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

  /* MODALS */
  .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:300; align-items:center; justify-content:center; }
  .modal-overlay.show { display:flex; }
  .modal-box { background:var(--panel); border:1px solid var(--border); position:relative; padding:24px; }
  .modal-box::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--amber),transparent); }
  .modal-box h3 { font-family:'Orbitron',sans-serif; font-size:12px; color:var(--amber); letter-spacing:2px; margin-bottom:14px; }
  .modal-box label { font-size:10px; color:var(--text-dim); letter-spacing:1px; display:block; margin-bottom:4px; }
  .modal-box input, .modal-box select {
    width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text);
    font-family:'Share Tech Mono',monospace; font-size:12px; padding:7px 10px; margin-bottom:12px; outline:none;
  }
  .modal-box input:focus, .modal-box select:focus { border-color:var(--amber); }
  .modal-box select option { background:var(--panel); }
  .modal-btns { display:flex; gap:8px; justify-content:flex-end; margin-top:4px; }
  .modal-btns button {
    background:none; border:1px solid var(--border); color:var(--text-dim);
    font-family:'Share Tech Mono',monospace; font-size:11px; padding:6px 16px; cursor:pointer; letter-spacing:1px; transition:all 0.1s;
  }
  .modal-btns button:hover   { border-color:var(--amber); color:var(--amber); }
  .modal-btns button.confirm { border-color:var(--amber-dim); color:var(--amber); }
  .setting-row { display:flex; gap:8px; align-items:flex-end; }
  .setting-row input { margin-bottom:0; flex:1; }
  .setting-row button { background:none; border:1px solid var(--border); color:var(--text-dim); font-family:'Share Tech Mono',monospace; font-size:11px; padding:7px 12px; cursor:pointer; white-space:nowrap; margin-bottom:12px; }
  .setting-row button:hover { border-color:var(--amber); color:var(--amber); }
  .info-box { background:rgba(90,175,255,0.05); border:1px solid rgba(90,175,255,0.2); padding:10px 12px; font-size:11px; color:var(--blue); line-height:1.8; margin-bottom:12px; }
  .info-box code { background:rgba(90,175,255,0.1); padding:0 4px; font-family:'Share Tech Mono',monospace; }
  .conn-result { font-size:11px; margin-bottom:12px; min-height:16px; }
  .conn-result.ok  { color:var(--green); }
  .conn-result.err { color:var(--red); }
  .ai-thinking { color:var(--blue); animation:blink 1s step-end infinite; }
  @keyframes blink { 50%{opacity:0} }
  #file-list::-webkit-scrollbar { width:3px; }
  #file-list::-webkit-scrollbar-thumb { background:var(--border); }