:root {

--bg-color: #1a1a1a;

--text-color: #ffffff;

--accent-color: #ff6b6b;

--card-bg: #2d2d2d;

--transition-speed: 0.8s;

}

body {

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

background-color: var(--bg-color);

color: var(--text-color);

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

margin: 0;

transition: background-color var(--transition-speed) ease;

}

.container {

background-color: var(--card-bg);

padding: 2rem;

border-radius: 1.5rem;

box-shadow: 0 15px 40px rgba(0,0,0,0.6);

text-align: center;

width: 400px;

border: 1px solid rgba(255,255,255,0.1);

}

h1 { margin-bottom: 1rem; font-weight: 300; letter-spacing: 1px; font-size: 2rem; }

.stats-header {

display: flex;

justify-content: space-around;

padding-bottom: 1rem;

border-bottom: 1px solid rgba(255,255,255,0.1);

margin-bottom: 1rem;

}

.stat-item { display: flex; flex-direction: column; }

.stat-item span {

font-weight: 300;

font-size: 1.5rem;

color: var(--text-color);

}

.timer-wrapper {

display: flex;

align-items: center;

justify-content: center;

gap: 1.5rem;

margin: 1rem 0;

}

#timer {

font-size: 6rem;

font-weight: bold;

font-variant-numeric: tabular-nums;

text-shadow: 0 4px 10px rgba(0,0,0,0.3);

}

.adjust-btn {

font-size: 2rem;

padding: 0.2rem 0.8rem;

background-color: #444;

color: white;

border: none;

border-radius: 0.5rem;

cursor: pointer;

}

.adjust-btn:hover { background-color: #666; }

.modes {

display: flex;

gap: 0.5rem;

justify-content: center;

margin-bottom: 0.5rem;

}

button {

padding: 0.7rem 1.2rem;

border: none;

border-radius: 0.6rem;

cursor: pointer;

font-weight: bold;

transition: all 0.2s ease;

}

button:active { transform: scale(0.95); }

button:hover { opacity: 0.8; }

.mode-btn { background-color: #444; color: white; border: 1px solid transparent; }

.mode-btn.active { background-color: var(--accent-color); border-color: rgba(255,255,255,0.3); }

.preset-btns {

display: flex;

gap: 0.5rem;

justify-content: center;

margin-bottom: 1rem;

}

.preset-btn { background-color: #444; color: white; border: 1px solid transparent; }

.preset-btn.active { background-color: var(--accent-color); border-color: rgba(255,255,255,0.3); }

.reset-cycle-btn {

background-color: #95a5a6;

color: white;

}

.reset-cycle-btn:hover { background-color: #aab7b8; }

.controls { display: flex; gap: 0.7rem; justify-content: center; margin-bottom: 1.5rem; }

.start-btn { background-color: #2ecc71; color: white; }

.pause-btn { background-color: #e67e2e; color: white; }

.reset-btn { background-color: #95a5a6; color: white; }

.skip-btn { background-color: #3498db; color: white; }

.task-entry {

display: flex;

flex-direction: column;

gap: 0.8rem;

margin-top: 1.5rem;

text-align: center;

}

.entry-row {

display: flex;

justify-content: center;

gap: 0.5rem;

align-items: center;

}

#task-desc {

flex: 1;

padding: 0.6rem;

border-radius: 0.4rem;

border: 1px solid #444;

background: #1a1a1a;

color: white;

max-width: 280px;

}

.add-task-btn {

background-color: var(--accent-color);

color: white;

padding: 0.6rem 1rem;

min-width: 80px;

}

#task-list {

margin-top: 1.5rem;

list-style: none;

padding: 0;

max-height: 200px;

overflow-y: auto;

}

.task-item {

background: rgba(255,255,255,0.05);

padding: 0.8rem;

border-radius: 0.8rem;

margin-bottom: 0.6rem;

display: flex;

align-items: center;

gap: 0.8rem;

border: 1px solid rgba(255,255,255,0.05);

transition: transform 0.1s ease;

}

.task-item:hover { background: rgba(255,255,255,0.08); }

.sort-controls {

display: flex;

flex-direction: row;

gap: 2px;

}

.sort-btn {

padding: 0.2rem 0.4rem;

font-size: 1rem;

background-color: #444;

color: white;

border: none;

border-radius: 0.3rem;

cursor: pointer;

}

.edit-btn {

background-color: #f39c12;

padding: 0.4rem 0.7rem;

font-size: 0.8rem;

}

.accept-btn {

background-color: #2ecc71;

padding: 0.4rem 0.7rem;

font-size: 0.8rem;

}

.task-item.completed span {

text-decoration: line-through;

opacity: 0.5;

}

.delete-btn {

background-color: #c0392b;

padding: 0.4rem 0.7rem;

font-size: 0.8rem;

}

.action-area {

display: flex;

align-items: center;

gap: 0.4rem;

}

/* Timer-complete banner (fallback when browser notifications are unavailable) */

#pomodoro-toast {

position: fixed;

top: 1rem;

left: 50%;

transform: translateX(-50%) translateY(-200%);

background: #111;

color: #fff;

padding: 0.9rem 1.4rem;

border-radius: 0.6rem;

font-size: 1.1rem;

font-weight: bold;

box-shadow: 0 4px 18px rgba(0,0,0,0.5);

z-index: 9999;

transition: transform 0.3s ease;

max-width: 90vw;

}

#pomodoro-toast.visible {

transform: translateX(-50%) translateY(0);

}