:root { --bg: #0d1117; --sidebar: #161b22; --border: #30363d; --text: #c9d1d9; --accent: #58a6ff; --green: #238636; --red: #da3633; --input-bg: #0d1117; }
body { margin: 0; font-family: 'Segoe UI', monospace; background: var(--bg); color: var(--text); height: 100vh; display: flex; overflow: hidden; font-size: 13px; }
.sidebar { width: 220px; background: var(--sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.main { flex: 1; display: flex; flex-direction: column; }
.split-view { flex: 1; display: flex; overflow: hidden; }
a { text-decoration: none; color: inherit; }
input, select, textarea { background: var(--input-bg); border: 1px solid var(--border); color: #fff; padding: 6px; border-radius: 4px; outline: none; font-family: monospace; }
input:focus, textarea:focus { border-color: var(--accent); }
button { background: var(--sidebar); border: 1px solid var(--border); color: var(--text); padding: 5px 10px; cursor: pointer; border-radius: 4px; }
button:hover { background: #21262d; }
button.primary { background: var(--green); border-color: var(--green); color: white; }
button.danger { color: var(--red); border-color: var(--red); }
.head { padding: 15px; border-bottom: 1px solid var(--border); font-weight: bold; color: var(--accent); display:flex; justify-content:space-between; }
.clist { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex:1; }
.clist li { padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #21262d; display: flex; justify-content: space-between; }
.clist li:hover { background: #21262d; }
.clist li.active { background: #1f6feb; color: white; }
.tabs { display: flex; background: var(--sidebar); border-bottom: 1px solid var(--border); }
.tab { padding: 10px 20px; cursor: pointer; border-right: 1px solid var(--border); }
.tab.active { background: var(--bg); border-bottom: 2px solid var(--accent); color: white; }
.req-list { width: 350px; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: #0d1117; }
.req-item { padding: 10px; border-bottom: 1px solid var(--border); cursor: pointer; display: flex; }
.req-item:hover { background: #161b22; }
.req-item.selected { background: #1f242c; border-left: 3px solid var(--accent); }
.req-info { flex:1; overflow:hidden;}
.req-method { font-weight: bold; color: var(--accent); }
.req-actions { display:flex; align-items:center; margin-left:10px;}
.btn-del-req { color: var(--border); font-size: 1.2em; padding: 2px 6px; }
.req-item:hover .btn-del-req { color: var(--red); }
.content-area { flex: 1; padding: 20px; overflow-y: auto; background: #0e1116; }
.string { color: #a5d6ff; } .number { color: #79c0ff; } .key { color: #7ee787; } .boolean { color: #ff7b72; } .null { color: #ff7b72; }
.action-card { background: #161b22; border: 1px solid var(--border); padding: 15px; border-radius: 6px; margin-bottom: 15px; }
.form-row { margin-bottom: 10px; }
.form-label { display: block; margin-bottom: 5px; color: #8b949e; }
.row-flex { display: flex; gap: 10px; }
.dynamic-row { display: flex; gap: 5px; margin-bottom: 5px; }
.login-body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0d1117; color: #c9d1d9; font-family: monospace; margin: 0; }
.login-box { background: #161b22; padding: 40px; border: 1px solid #30363d; text-align: center; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.login-input { background: #0d1117; border: 1px solid #30363d; color: #fff; padding: 10px; width: 200px; margin-bottom: 10px; text-align: center; }
/* Password Toggle Button */
button[title="Show/Hide"] {
    background: transparent;
    border: 1px solid var(--border);
    font-size: 1.2em;
    padding: 0 10px;
    cursor: pointer;
}
button[title="Show/Hide"]:hover {
    background: var(--sidebar);
    color: var(--accent);
}