/* --- THEME VARIABLES --- */
:root {
    /* Default Dark (Green Focus) */
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --text-primary: #e0e0e0;
    --text-secondary: #aaaaaa;
    --accent-primary: #00b894; /* Stroke Green */
    --accent-running: #0984e3; /* Break Blue */
    --accent-paused: #ff4757;  /* Breaks Used Red */
    --input-bg: #333;
    --border-color: #444;
}

body.theme-steam {
    --bg-color: #171a21;
    --card-bg: #1b2838;
    --text-primary: #66c0f4;
    --text-secondary: #c7d5e0;
    --accent-primary: #4c6b22;
    --accent-running: #66c0f4;
    --accent-paused: #a33838;
}

body.theme-light {
    --bg-color: #f5f6fa;
    --card-bg: #ffffff;
    --text-primary: #2d3436;
    --text-secondary: #636e72;
    --accent-primary: #00b894;
    --accent-running: #0984e3;
    --accent-paused: #d63031;
}

body.theme-amber {
    --bg-color: #0f0b08;
    --card-bg: #1a140f;
    --text-primary: #ff9f43;
    --text-secondary: #ad7d52;
    --accent-primary: #ee5253;
    --accent-running: #feca57;
    --accent-paused: #ff4757;
}

/* --- BASE STYLES --- */
body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    transition: background 0.3s, color 0.3s;
}

.app-container { 
    width: 95%;
    max-width: 850px;
    padding: 20px;
}

/* --- TOP BAR --- */
.top-bar { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 20px; 
}

h2 { margin: 0; font-size: 1.2rem; opacity: 0.8; }

select {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}

/* --- THE MAIN TIMER CARD --- */
.timer-card {
    background-color: var(--card-bg);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    border-left: 8px solid var(--border-color);
    border-right: 8px solid var(--border-color);
    text-align: center;
    transition: all 0.3s ease;
}

/* --- PULSE ANIMATIONS --- */
@keyframes pulse-stroke {
    0% { box-shadow: 0 0 15px rgba(0, 184, 148, 0.2); border-color: var(--accent-primary); }
    50% { box-shadow: 0 0 40px rgba(0, 184, 148, 0.5); border-color: #55efc4; background-color: rgba(0, 184, 148, 0.05); }
    100% { box-shadow: 0 0 15px rgba(0, 184, 148, 0.2); border-color: var(--accent-primary); }
}

@keyframes pulse-rest {
    0% { box-shadow: 0 0 15px rgba(9, 132, 227, 0.2); border-color: var(--accent-running); }
    50% { box-shadow: 0 0 40px rgba(9, 132, 227, 0.5); border-color: #74b9ff; background-color: rgba(9, 132, 227, 0.05); }
    100% { box-shadow: 0 0 15px rgba(9, 132, 227, 0.2); border-color: var(--accent-running); }
}

.timer-card.running { animation: pulse-stroke 1.5s infinite ease-in-out; }
.timer-card.resting { animation: pulse-rest 3s infinite ease-in-out; }

/* --- DISPLAYS --- */
.timer-display { 
    font-size: clamp(4rem, 15vw, 7.5rem); 
    font-family: 'Courier New', Courier, monospace; 
    font-weight: 700;
    margin: 10px 0; 
    letter-spacing: -2px;
}

.mode-indicator {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 25px;
    text-transform: uppercase;
}

#total-clock { font-weight: bold; font-family: monospace; }

/* --- CONTROLS & BUTTONS --- */
.timer-controls { 
    display: flex; 
    gap: 12px; 
    justify-content: center; 
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.btn { 
    padding: 12px 20px; 
    border: none; 
    border-radius: 8px; 
    cursor: pointer; 
    font-weight: bold; 
    color: white; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-size: 1rem;
    transition: transform 0.1s, opacity 0.2s;
}

.btn:hover { opacity: 0.9; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-reset { 
    background: transparent; 
    color: var(--text-secondary); 
    border: 1px solid var(--border-color); 
}

/* --- SPLITS / LOGS --- */
.splits-list {
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 15px;
    text-align: left;
    font-family: monospace;
}

.split-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
}

.split-item:last-child { border-bottom: none; }
.split-item b { color: var(--text-primary); }

/* --- FOOTER --- */
footer { margin-top: 40px; text-align: center; }
.text-btn { 
    background: none; 
    border: none; 
    color: var(--text-secondary); 
    text-decoration: underline; 
    cursor: pointer; 
    font-size: 0.85rem;
}

/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 600px) {
    .timer-card { padding: 20px; }
    .timer-controls { gap: 8px; }
    .btn { padding: 10px 14px; font-size: 0.9rem; }
}