html, body { height: 100%; margin:0; font-family: "Fira Code", monospace; background:#1e1e1e; color:#d4d4d4; }
#tabs { display:flex; background:#2c2c2c; padding:0 10px; user-select:none; overflow-x:auto; }
.tab { padding:8px 15px; cursor:pointer; border-right:1px solid #444; white-space:nowrap; display:flex; align-items:center; position:relative; }
.tab.active { background:#1e1e1e; font-weight:bold; }
.tab .close { margin-left:8px; cursor:pointer; color:#888; }
#editor { width:100%; height:calc(100% - 40px); background:#1e1e1e; color:#d4d4d4; border:none; resize:none; font-family:"Fira Code", monospace; font-size:14px; padding:10px; outline:none; box-sizing:border-box; }
#search-bar, #picker-overlay { position:absolute; display:none; top:50px; right:20px; background:#2c2c2c; border:1px solid #444; color:#fff; padding:5px; font-family:monospace; }
#search-bar input, #picker-overlay input { background:#1e1e1e; border:none; color:#d4d4d4; outline:none; padding:3px 5px; width:200px; }
#picker-overlay { top:30%; left:50%; transform:translateX(-50%); width:300px; max-height:300px; overflow-y:auto; padding:10px; border-radius:5px; }
#picker-overlay div { padding:5px; cursor:pointer; border-radius:3px; }
#picker-overlay div.selected { background:#007acc; }

  /* Container */
  #top-right-buttons {
    position: absolute;
    top: 5px;
    right: 10px;
    display: flex;
    gap: 6px;
    z-index: 1000;
  }

  /* Buttons */
  .top-btn {
    background-color: #2c2c2c;
    color: #d4d4d4;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 4px 8px;
    font-family: monospace;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
  }

  /* Hover effect */
  .top-btn:hover {
    background-color: #3a3a3a;
    transform: scale(1.05);
  }

  /* Active overlay state (optional highlight) */
  .top-btn.active {
    background-color: #007acc;
    color: #fff;
  }