:root {
    --bg: #f7f7f7;
    --fg: #111;
    --accent: #0069d9;
    --hover: #0056b3;
    --border: #ddd;
}

/* Dark theme class for manual control */
body.dark-theme {
    --bg: #1e1e1e;
    --fg: #eee;
    --accent: #3794ff;
    --hover: #4da3ff;
    --border: #444;
}

/* Auto dark theme (only when no manual preference is set) */
@media (prefers-color-scheme: dark) {
    body:not(.dark-theme):not(.light-theme) {
        --bg: #1e1e1e;
        --fg: #eee;
        --accent: #3794ff;
        --hover: #4da3ff;
        --border: #444;
    }
}
*{box-sizing:border-box}
body{
    margin:0;display:flex;flex-direction:column;align-items:center;
    gap:1.2rem;font-family:system-ui,-apple-system,Segoe UI,Roboto;
    background:var(--bg);color:var(--fg);padding:2rem;
}
#content{
    width:100%;max-width:900px;margin:0 auto;
    display:flex;flex-direction:column;align-items:center;gap:1rem
}
header{
    display:flex;justify-content:center;align-items:center;
    position:relative;width:100%;max-width:600px
}
h1{margin:0;text-align:center}
#themeToggle{
    position:absolute;right:0;top:50%;transform:translateY(-50%);
    background:none;border:2px solid var(--fg);border-radius:50%;
    width:40px;height:40px;font-size:1.2rem;padding:0;
    min-height:40px;display:flex;align-items:center;justify-content:center
}
.status-message{
    font-size:1.2rem;text-align:center;padding:2rem;
    background:rgba(0,0,0,0.05);border-radius:0.5rem;margin:1rem 0
}
.status-message.error{background:rgba(255,0,0,0.1);color:#d32f2f}
#lyrics-box{
    font-size:2.5rem;text-align:center;height:8rem;
    width:90vw;max-width:800px;margin:0 auto;
    color:var(--accent);font-weight:600;padding:1rem;
    background:rgba(0,0,0,0.03);border-radius:0.5rem;
    cursor:grab;user-select:none;touch-action:pan-y;
    display:flex;align-items:center;justify-content:center;
    overflow-wrap:break-word;word-break:break-word;
    box-sizing:border-box;position:relative
}
#counter{font-size:.9rem;opacity:.7}
input[type=range]{
    accent-color:var(--accent);width:18rem;height:24px;
    touch-action:manipulation;-webkit-appearance:none;appearance:none
}
input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;width:24px;height:24px;
    background:var(--accent);border-radius:50%;cursor:pointer
}
input[type=range]::-moz-range-thumb{
    width:24px;height:24px;background:var(--accent);
    border-radius:50%;cursor:pointer;border:none
}
button{
    padding:1rem 2rem;font-size:1.1rem;border:0;border-radius:.5rem;
    background:var(--accent);color:#fff;cursor:pointer;
    min-height:48px;touch-action:manipulation
}
button:disabled{background:#888;cursor:default}
.secondary-btn{
    padding:0.75rem 1.5rem;font-size:1rem;background:transparent;
    border:2px solid var(--accent);color:var(--accent)
}
.secondary-btn:hover{background:var(--accent);color:#fff}
.lyrics-source{
    display:flex;gap:1rem;align-items:center;justify-content:center;
    flex-wrap:wrap;margin:1rem 0
}
.source-label{
    font-size:0.9rem;opacity:0.8;font-style:italic
}
section.auto,section.nav{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}

/* Mobile responsiveness */
@media (max-width: 768px) {
    body{padding:1rem}
    h1{font-size:1.5rem}
    #lyrics-box{
        font-size:1.75rem;padding:1rem;height:10rem;
        width:95%;max-width:none
    }
    input[type=range]{width:100%;max-width:18rem}
    section.auto,section.nav{justify-content:center}
    button{width:100%;max-width:200px}
    .lyrics-source{flex-direction:column}
    .secondary-btn{width:100%;max-width:300px}
}