:root {
    --bg:#0d1117;
    --text:#e6edf3;
    --accent:#238636;
    --accent-pause:#39ff14;
    --box-bg:#161b22;
    --box-shadow:0 0 20px rgba(0,0,0,0.6);
}

.theme-dark { 
    --bg:#0d1117; 
    --text:#e6edf3; 
    --accent:#238636; 
    --accent-pause:#39ff14; 
    --box-bg:#161b22; 
}
.theme-nord { 
    --bg:#2E3440; 
    --text:#D8DEE9; 
    --accent:#81A1C1; 
    --accent-pause:#A3BE8C; 
    --box-bg:#3B4252; 
}
.theme-solar-dark { 
    --bg:#202020; 
    --text:#FFD700; 
    --accent:#FF4500; 
    --accent-pause:#00FF00; 
    --box-bg:#2C2C2C; 
}

body {
    background:var(--bg);
    color:var(--text);
    font-family:'Lucida Console', monospace;
    font-weight:900;
    margin:0;
    padding:0;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
}

.container {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:20px;
}

.box { 
    background:var(--box-bg); 
    padding:20px; 
    border-radius:12px; 
    box-shadow:var(--box-shadow); 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    margin:10px; 
}

.box h2, .box h3 { 
    margin:0 0 10px 0; 
    font-size:1.5rem; 
    letter-spacing:2px; 
    font-weight:900; 
}

#taktBox { width:100%; }

#mainTimer { 
    font-family:'Impact', sans-serif;
    font-size:25vw;
    font-weight:900;
    font-variant-numeric: tabular-nums;
    line-height:1;
    user-select:none;
    padding:0;
    border-radius:10px;
    text-align:center;
    display:flex;
    justify-content:center;
    min-width: 15ch;
}

#bottomBoxes { 
    display:flex; 
    justify-content:center; 
    gap:20px; 
    width:100%; 
    max-width:600px; 
    flex-wrap:wrap; 
}

#pauseBox, #faBox { 
    flex:1; 
    min-width:140px; 
    max-width:280px; 
    text-align:center; 
}

.countdownDisplay { 
    font-family:'Lucida Console', monospace; 
    font-size:2.5rem; 
    font-weight:900; 
    margin-top:5px; 
}

#settingsToggle { 
    position:fixed; 
    top:10px; 
    right:10px; 
    font-size:2rem; 
    cursor:pointer; 
    z-index:1001; 
}

#settingsPanel { 
    position:fixed; 
    top:0; 
    right:0; 
    width:100%; 
    max-width:350px; 
    height:100vh; 
    background:var(--box-bg); 
    padding:20px; 
    box-shadow:-4px 0 12px rgba(0,0,0,0.4); 
    display:none; 
    flex-direction:column; 
    gap:12px; 
    z-index:1000; 
    overflow-y:auto; 
}

label { 
    font-size:14px; 
    margin-top:6px; 
    display:block; 
    font-weight:900; 
}

input, textarea, select, button { 
    width:100%; 
    padding:10px; 
    border-radius:6px; 
    border:1px solid #30363d; 
    background:var(--box-bg); 
    color:var(--text); 
    font-size:16px; 
    margin-top:4px; 
    font-family:'Lucida Console', monospace; 
    font-weight:900; 
}

button { 
    background:var(--accent); 
    border:none; 
    font-weight:900; 
    cursor:pointer; 
    margin-top:6px; 
    font-size:16px; 
}

.setting-box { 
    padding:12px; 
    border:1px solid #30363d; 
    border-radius:8px; 
    margin-bottom:12px; 
    display:flex; 
    flex-direction:column; 
    gap:8px; 
    width:100%; 
}

.setting-box div { 
    display:flex; 
    gap:8px; 
}

.preset-item { 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    margin-bottom:4px; 
}

.preset-item span { 
    flex:1; 
    cursor:pointer; 
    font-weight:900; 
}

.preset-item button { 
    flex:none; 
    background:#b22222; 
    color:#fff; 
    padding:2px 6px; 
    border-radius:4px; 
    font-size:14px; 
    font-weight:900; 
}

#defaultMessage { 
    display:none; 
    font-size:3rem; 
    font-weight:900; 
    text-align:center; 
    margin-top:20px; 
}

@media (max-width:600px){
    #bottomBoxes { 
        flex-direction:column; 
        gap:10px; 
        align-items:center; 
    }
    .countdownDisplay { 
        font-size:2rem; 
    }
}

/* Pfeile bei number inputs entfernen */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
input[type=number] { 
    -moz-appearance: textfield; 
}