:root {
    --bg: #0f0f23;
    --card: #1a1a3e;
    --accent: #e94560;
    --accent2: #0f3460;
    --text: #eee;
    --muted: #888;
    --success: #4ecca3;
    --radius: 16px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; }
.screen { display: none; padding: 20px; max-width: 480px; margin: 0 auto; min-height: 100vh; }
.screen.active { display: flex; flex-direction: column; }

/* HOME */
header { text-align: center; padding: 30px 0 20px; }
header h1 { font-size: 1.8rem; background: linear-gradient(135deg, var(--accent), #ff6b6b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.subtitle { color: var(--muted); margin-top: 4px; font-size: 0.95rem; }

.level-selector { display: flex; gap: 10px; margin-bottom: 20px; }
.level-btn { flex: 1; padding: 12px; border: 2px solid #333; background: var(--card); color: var(--text); border-radius: var(--radius); font-size: 0.95rem; cursor: pointer; transition: all 0.2s; }
.level-btn.active { border-color: var(--accent); background: rgba(233,69,96,0.15); }

.routine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.routine-card { background: var(--card); border-radius: var(--radius); padding: 16px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; border: 2px solid transparent; }
.routine-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(233,69,96,0.2); border-color: var(--accent); }
.routine-card .emoji { font-size: 2rem; margin-bottom: 8px; }
.routine-card h3 { font-size: 0.9rem; margin-bottom: 4px; }
.routine-card .meta { color: var(--muted); font-size: 0.8rem; }

.history-section { margin-top: auto; }
.history-section h3 { font-size: 1rem; margin-bottom: 12px; }
#weekly-stats { display: flex; gap: 8px; justify-content: center; }
.day-dot { width: 36px; height: 36px; border-radius: 50%; background: var(--card); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: var(--muted); flex-direction: column; }
.day-dot.done { background: var(--success); color: #fff; font-weight: bold; }
.day-dot .label { font-size: 0.55rem; }

/* WORKOUT */
.workout-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.icon-btn { background: none; border: none; color: var(--text); font-size: 1.1rem; cursor: pointer; padding: 8px; }
#workout-title { font-size: 0.9rem; color: var(--accent); font-weight: 600; }
#workout-round { font-size: 0.8rem; color: var(--muted); }

.exercise-card { text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.exercise-gif-container { width: 200px; height: 200px; margin: 0 auto 16px; border-radius: var(--radius); overflow: hidden; background: var(--card); }
.exercise-gif-container img { width: 100%; height: 100%; object-fit: cover; }
#exercise-name { font-size: 1.3rem; margin-bottom: 6px; }
.target-text { color: var(--accent); font-size: 0.85rem; margin-bottom: 8px; }
.instructions-text { color: var(--muted); font-size: 0.8rem; line-height: 1.4; max-height: 60px; overflow: hidden; }

.timer-section { text-align: center; padding: 20px 0; }
.timer-ring { position: relative; width: 120px; height: 120px; margin: 0 auto; }
.timer-ring svg { transform: rotate(-90deg); }
.timer-bg { fill: none; stroke: #333; stroke-width: 8; }
.timer-progress { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 339.292; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; }
.timer-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.8rem; font-weight: bold; font-variant-numeric: tabular-nums; }
.timer-label { color: var(--muted); font-size: 0.9rem; margin-top: 8px; }
.rest-phase .timer-progress { stroke: var(--success); }

.workout-controls { display: flex; gap: 12px; padding-bottom: 20px; }
.control-btn { flex: 1; padding: 14px; background: var(--card); border: 2px solid #333; color: var(--text); border-radius: var(--radius); font-size: 1rem; cursor: pointer; transition: all 0.2s; }
.control-btn:hover { border-color: var(--accent); }

/* DONE */
.done-content { text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.done-emoji { font-size: 4rem; margin-bottom: 16px; }
.done-content h2 { font-size: 1.8rem; margin-bottom: 8px; }
.done-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin: 20px 0; }
.stat-item { background: var(--card); border-radius: var(--radius); padding: 16px 8px; }
.stat-value { font-size: 1.5rem; font-weight: bold; color: var(--accent); }
.stat-label { font-size: 0.75rem; color: var(--muted); margin-top: 4px; }
.primary-btn { padding: 16px 32px; background: var(--accent); border: none; color: #fff; border-radius: var(--radius); font-size: 1.1rem; cursor: pointer; font-weight: 600; }