/* css/base.css */
:root {
    --bg-dark: #1e1e1e;
    --bg-panel: #252526;
    --bg-hover: #2a2d2e;
    --bg-active: #04395e; 
    --border: #3e3e42;
    --accent: #007acc;
    --text: #d4d4d4;
    --text-muted: #858585;
    --chord: #ff6b6b; 
    --btn-green: #28a745;
    --btn-red: #d32f2f;
    --btn-blue: #007acc;
    --btn-grey: #666;
    --link-blue: #3794ff;
}

body { 
    margin: 0; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background: var(--bg-dark); 
    color: var(--text); 
    height: 100vh; 
    overflow: hidden; 
}

.container { display: flex; height: 100%; width: 100%; }

/* --- SCROLLBARS --- */
::-webkit-scrollbar { width: 8px; background: var(--bg-panel); }
::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* --- GLOBAL BUTTONS --- */
.btn { padding: 6px 14px; border: none; border-radius: 3px; color: white; cursor: pointer; font-size: 13px; }
.btn-del { background: var(--btn-red); }
.btn-del:hover { background: #b71c1c; }
.btn-blue { background: var(--btn-blue); }
.btn-blue:hover { background: #005a9e; }
.btn-green { background: var(--btn-green); }
.btn-green:hover { background: #218838; }
.btn-grey { background: var(--btn-grey); }
.btn-grey:hover { background: #555; }
.btn-xs { padding: 4px 10px; font-size: 11px; border-radius: 2px; }

/* --- RESIZER (Drag Handle) --- */
#resizer {
    width: 5px;
    background: #1e1e1e;
    cursor: col-resize;
    flex-shrink: 0;
    z-index: 10;
    transition: background 0.2s;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}
#resizer:hover, #resizer.active { background: var(--accent); }