:root { --primary: #00f2ff; --danger: #ff4757; --warning: #ffa502; --bg: #121212; --card: #1e1e1e; }
body { background-color: var(--bg); color: white; font-family: 'Inter', sans-serif; display: flex; justify-content: center; padding: 40px 0; margin: 0; }
.todo-app { background: var(--card); width: 460px; padding: 25px; border-radius: 24px; box-shadow: 0 30px 60px rgba(0,0,0,0.7); }

/* Insights Styling */
.insights-container { background: #252525; padding: 15px; border-radius: 12px; margin-bottom: 20px; border-left: 4px solid var(--primary); }
.insights-container label { font-size: 9px; text-transform: uppercase; color: var(--primary); font-weight: bold; }
.insight-text { font-size: 0.85rem; color: #ccc; line-height: 1.4; font-style: italic; margin-top: 5px; }

/* Existing UI Styles */
.stats-container { display: flex; align-items: center; gap: 20px; background: rgba(255, 255, 255, 0.03); padding: 20px; border-radius: 18px; margin-bottom: 20px; }
.progress-circle-box { position: relative; width: 80px; height: 80px; }
.progress-circle { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--primary) 0deg, #333 0deg); transition: 0.5s; }
.progress-circle::after { content: ""; position: absolute; width: 64px; height: 64px; background: #1e1e1e; border-radius: 50%; }
#progressPercent { position: relative; z-index: 10; font-weight: 800; color: var(--primary); }
.stats-text { display: flex; flex-direction: column; gap: 10px; }
.stat-item label { font-size: 9px; text-transform: uppercase; color: #666; }
.stat-item span { font-size: 1.2rem; font-weight: 700; }

.ritual-dashboard { background: rgba(0, 242, 255, 0.05); padding: 15px; border-radius: 12px; margin-bottom: 20px; border: 1px dashed rgba(0, 242, 255, 0.2); }
.ritual-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ritual-buttons button { background: #252525; border: 1px solid #333; color: #eee; padding: 8px; border-radius: 8px; font-size: 0.75rem; cursor: pointer; }
.ritual-buttons button:hover { border-color: var(--primary); }

.scheduler-controls { display: flex; flex-direction: column; gap: 12px; margin-bottom: 25px; }
#taskInput, input, select { background: #252525; border: 1px solid #333; color: white; padding: 10px; border-radius: 10px; }
.add-btn { background: var(--primary); border: none; height: 38px; padding: 0 15px; border-radius: 10px; font-weight: bold; cursor: pointer; }
.task-item { background: #252525; padding: 15px; margin-bottom: 10px; border-radius: 14px; display: flex; justify-content: space-between; align-items: center; border-left: 5px solid transparent; }
.history-btn { width: 100%; background: transparent; border: 1px solid #252525; color: #555; padding: 12px; border-radius: 12px; margin: 10px 0; cursor: pointer; }
.history-list.hidden { display: none; }