:root { --primary: #007bff; --bg: #f4f7f6; --white: #ffffff; }
body { font-family: -apple-system, sans-serif; margin: 0; background: var(--bg); color: #333; padding-bottom: 80px; overflow-x: hidden; }

header { background: var(--primary); color: white; padding: 15px; text-align: center; position: sticky; top: 0; z-index: 100; }

/* Календарь */
.calendar-nav { display: flex; align-items: center; background: white; border-bottom: 1px solid #ddd; }
.calendar-strip { flex: 1; display: flex; overflow-x: auto; padding: 10px; gap: 8px; scrollbar-width: none; }
.nav-arrow { background: none; border: none; font-size: 20px; color: var(--primary); padding: 10px; font-weight: bold; }
.date-item { min-width: 42px; height: 55px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #eee; border-radius: 10px; }
.date-item.active { background: var(--primary); color: white; }

/* Задачи */
.task-list { padding: 15px; }
.task-card { background: white; padding: 12px; border-radius: 12px; margin-bottom: 10px; display: flex; align-items: flex-start; gap: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.task-info { flex: 1; }
.task-time-badge { background: var(--primary); color: white; padding: 2px 5px; border-radius: 4px; font-size: 11px; margin-right: 5px; }
.tag-badge { padding: 2px 8px; border-radius: 10px; font-size: 10px; color: white; margin-right: 4px; display: inline-block; margin-top: 5px; }
.delete-btn { background: none; border: none; color: #ccc; font-size: 18px; cursor: pointer; }
.completed { opacity: 0.6; }
.completed strong { text-decoration: line-through; }

/* Навигация */
.nav-bar { position: fixed; bottom: 0; width: 100%; height: 60px; background: white; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid #ddd; z-index: 100; }
.nav-bar button { background: none; border: none; font-size: 20px; color: #666; flex: 1; }
.add-nav-btn { background: var(--primary) !important; color: white !important; width: 50px; height: 50px; border-radius: 50%; font-size: 24px !important; margin-top: -30px; }

/* Форма */
.form-container { padding: 15px; display: flex; flex-direction: column; gap: 12px; }
input, select { padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; }
.row { display: flex; gap: 8px; }
.tag-chips-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip { padding: 6px 12px; border-radius: 15px; border: 1px solid #ddd; font-size: 13px; }
.tag-chip.selected { color: white; }
.btn-save { background: var(--primary); color: white; border: none; padding: 15px; border-radius: 8px; font-weight: bold; }

/* Аналитика */
.stat-section { background: white; padding: 15px; border-radius: 15px; margin-bottom: 15px; }
.heatmap { display: grid; grid-template-rows: repeat(7, 12px); grid-auto-flow: column; gap: 3px; overflow-x: auto; }
.heat-square { width: 12px; height: 12px; border-radius: 2px; }
.level-0 { background: #ebedf0; }
.level-1 { background: #9be9a8; }
.level-2 { background: #40c463; }
.level-3 { background: #30a14e; }
.level-4 { background: #216e39; }
.canvas-container { width: 100%; max-width: 250px; margin: 0 auto; }
.stats-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-card { background: white; padding: 15px; border-radius: 12px; text-align: center; }

.login-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.login-box {
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    text-align: center;
    width: 80%;
    max-width: 350px;
}

.login-box h2 { margin-top: 0; font-size: 20px; }
.login-box input { width: 100%; margin-bottom: 15px; box-sizing: border-box; }