* { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Segoe UI', sans-serif;
      background: #1e1e2e;
      color: #cdd6f4;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    header {
      padding: 12px 20px;
      background: #181825;
      border-bottom: 1px solid #313244;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    header h1 {
      font-size: 1rem;
      font-weight: 600;
      color: #cba6f7;
    }

    .controls {
      display: flex;
      gap: 8px;
      margin-left: auto;
    }

    button {
      padding: 6px 16px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.85rem;
      font-weight: 600;
      transition: opacity 0.15s;
    }

    button:hover { opacity: 0.85; }

    #run-btn {
      background: #a6e3a1;
      color: #1e1e2e;
    }

    #clear-btn {
      background: #313244;
      color: #cdd6f4;
    }

    #clear-console-btn {
      background: #313244;
      color: #cdd6f4;
    }

    .main {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    .pane {
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow: hidden;
    }

    .pane-label {
      padding: 6px 14px;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #6c7086;
      background: #181825;
      border-bottom: 1px solid #313244;
    }

    #editor {
      flex: 1;
      width: 100%;
      background: #1e1e2e;
      color: #cdd6f4;
      border: none;
      outline: none;
      resize: none;
      padding: 16px;
      font-family: 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
      font-size: 0.9rem;
      line-height: 1.6;
      tab-size: 2;
    }

    .divider {
      width: 4px;
      background: #313244;
      cursor: col-resize;
      flex-shrink: 0;
    }

    .divider:hover { background: #cba6f7; }

    #console-output {
      flex: 1;
      overflow-y: auto;
      padding: 12px 16px;
      font-family: 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
      font-size: 0.85rem;
      line-height: 1.7;
      background: #181825;
    }

    .log-entry { color: #cdd6f4; white-space: pre-wrap; word-break: break-word; }
    .log-error { color: #f38ba8; }
    .log-warn  { color: #f9e2af; }
    .log-info  { color: #89b4fa; }
    .log-meta  { color: #6c7086; font-style: italic; border-top: 1px solid #313244; margin-top: 8px; padding-top: 8px; }