:root {
    --bg-main: #121212; --bg-panel: #1a1a1a; --bg-card: #2d2d2d;
    --text-main: #ffffff; --text-muted: #aaaaaa;
    --accent: #007bff; --border: #333;
    --sidebar-width: 320px;
}

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

/* Login */
#login-screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #000; display: flex; align-items: center; justify-content: center; z-index: 1000; }
.login-box { background: var(--bg-panel); padding: 40px; border-radius: 12px; border: 1px solid var(--border); text-align: center; width: 300px; }

/* Layout */
#app-screen { display: flex; width: 100%; height: 100vh; }
#sidebar { width: var(--sidebar-width); background: var(--bg-panel); display: flex; flex-direction: column; border-right: 1px solid var(--border); flex-shrink: 0; transition: 0.3s; }
#sidebar.collapsed { width: 0; overflow: hidden; border: none; }

#right-column { flex: 1; display: flex; flex-direction: column; height: 100vh; background: var(--bg-main); overflow: hidden; }

/* Centrowanie kontentu */
#content { 
    flex: 1; overflow-y: auto; padding: 40px 20px; 
    display: flex; flex-direction: column; 
    align-items: center; /* Centrowanie w poziomie */
    scroll-behavior: smooth; 
}

#lyrics-display { width: 100%; max-width: 900px; display: flex; flex-direction: column; align-items: center; }

/* Pasek akcji MASTER (Edytuj, Dodaj do imprezy) */
#master-actions { 
    display: none; 
    justify-content: center; 
    align-items: center; 
    gap: 15px; 
    margin: 20px 0 30px 0; 
    width: 100%; 
}

#song-title { font-size: 3.5em; text-align: center; color: var(--accent); margin: 0; }
#song-metadata { margin-bottom: 20px; font-style: italic; color: var(--text-muted); text-align: center; }
#song-lyrics { font-size: 32px; line-height: 1.6; white-space: pre-line; color: var(--text-main); text-align: center; width: 100%; padding-bottom: 100px; }

/* Dolny Pasek */
#teleprompter-bar { height: 80px; background: var(--bg-panel); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: center; gap: 20px; flex-shrink: 0; }
#teleprompter-bar button { width: auto; padding: 10px 25px; border-radius: 20px; background: #28a745; color: #fff; border: none; font-weight: bold; cursor: pointer; }

/* Resizer */
#resizer { width: 8px; background: #000; cursor: col-resize; display: flex; align-items: center; justify-content: center; position: relative; }
#resizer-icon { width: 20px; height: 30px; background: var(--accent); color: white; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; position: absolute; left: -7px; }

/* Elementy listy */
.tabs { display: flex; background: #000; border-bottom: 1px solid var(--border); }
.tab-btn { flex: 1; padding: 12px; background: transparent; border: none; color: #777; cursor: pointer; font-size: 11px; font-weight: bold; border-bottom: 2px solid transparent; }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-content { display: none; flex-direction: column; padding: 15px; flex: 1; overflow-y: auto; }
.tab-content.active { display: flex; }
.item-btn { background: var(--bg-card); padding: 12px; border-radius: 6px; margin-bottom: 8px; cursor: pointer; border: 1px solid var(--border); }
input, select { background: var(--bg-card); color: #fff; border: 1px solid var(--border); padding: 10px; border-radius: 4px; width: 100%; margin-bottom: 10px; }