@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";:root{--color-primary: #667eea;--color-primary-dark: #764ba2;--color-primary-hover: #5a6fd8;--color-primary-hover-dark: #6a5acd;--color-success: #2ecc71;--color-success-dark: #27ae60;--color-warning: #f39c12;--color-warning-dark: #e67e22;--color-accent: #9b59b6;--color-accent-dark: #8e44ad;--color-danger: #e74c3c;--color-text: #333;--color-text-muted: #666;--color-text-faint: #999;--color-text-disabled: #95a5a6;--color-surface: #ffffff;--color-surface-alt: #f8f9fa;--color-surface-hover: #f1f3f4;--color-border: #e9ecef;--color-border-muted: #f0f0f0;--color-bg: #f0f2f5;--color-badge-high-bg: #ffebee;--color-badge-high-fg: #c62828;--color-badge-mid-bg: #fff3e0;--color-badge-mid-fg: #ef6c00;--color-badge-low-bg: #e8f5e8;--color-badge-low-fg: #2e7d32;--color-check: #4caf50;--color-nav-danger: #dc3545;--color-nav-danger-bg: #f8d7da;--color-nav-danger-fg: #721c24;--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);--gradient-primary-reverse: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);--gradient-primary-hover: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-hover-dark) 100%);--gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);--gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);--gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);--gradient-surface: linear-gradient(135deg, var(--color-surface-alt) 0%, var(--color-surface) 100%);--radius-sm: 8px;--radius-md: 10px;--radius-lg: 12px;--radius-xl: 15px;--radius-2xl: 16px;--radius-3xl: 20px;--radius-pill: 999px;--transition-fast: all .2s;--transition-base: all .3s ease;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .1);--shadow-md: 0 4px 15px rgba(102, 126, 234, .3);--shadow-lg: 0 4px 20px rgba(0, 0, 0, .08);--shadow-xl: 0 8px 25px rgba(0, 0, 0, .15);--shadow-primary: 0 6px 20px rgba(102, 126, 234, .4);--shadow-page: 0 20px 60px rgba(0, 0, 0, .1);--shadow-focus: 0 0 0 3px rgba(102, 126, 234, .1);--shadow-focus-primary: 0 8px 30px rgba(102, 126, 234, .15)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Poppins,sans-serif;min-height:100vh;padding:20px;background:#f0f2f5;background:var(--color-bg)}.sidebar{width:280px;background:var(--color-surface-alt);padding:30px 20px;border-right:1px solid var(--color-border)}.sidebar-header{display:flex;align-items:center;gap:10px;margin-bottom:20px}.sidebar-header h2{color:var(--color-text);font-size:1.5em;font-weight:600}.sidebar-datetime{background:var(--gradient-primary);color:#fff;padding:15px;border-radius:var(--radius-lg);margin-bottom:25px;text-align:center}.sidebar-datetime .time{font-size:1.8em;font-weight:700;letter-spacing:1px}.sidebar-datetime .date{font-size:.9em;opacity:.9;margin-top:5px}.nav-section{margin-bottom:30px}.nav-section h3{color:var(--color-text-muted);font-size:.9em;font-weight:500;margin-bottom:15px;text-transform:uppercase;letter-spacing:.5px}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 15px;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast);margin-bottom:5px;font-size:.95em;color:#555}.nav-item:hover{background:var(--color-border)}.nav-item.active{background:var(--color-primary);color:#fff}.nav-item.danger{color:var(--color-nav-danger)}.nav-item.danger:hover{background:var(--color-nav-danger-bg);color:var(--color-nav-danger-fg)}.nav-item .icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}.stats-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:15px;margin-bottom:30px}.stat-card{background:var(--gradient-primary);color:#fff;padding:20px;border-radius:var(--radius-xl);text-align:center;transition:var(--transition-base)}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}.stat-card.total{background:var(--gradient-primary-reverse)}.stat-card.completed{background:var(--gradient-success)}.stat-card.pending{background:var(--gradient-warning)}.stat-card.storage{background:var(--gradient-accent)}.stat-card h3{font-size:2em;font-weight:700;margin-bottom:5px}.stat-card p{font-size:.9em;opacity:.9}.todo-input-container{display:none;flex-direction:column;gap:20px;margin-bottom:30px;padding:25px;background:var(--gradient-surface);border-radius:var(--radius-2xl);border:2px solid var(--color-border);box-shadow:var(--shadow-lg);transition:var(--transition-base);animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.todo-input-container.show{display:flex}.todo-input-container:focus-within{border-color:var(--color-primary);box-shadow:var(--shadow-focus-primary);transform:translateY(-2px)}.todo-input-row{display:flex;gap:20px;align-items:flex-end}.todo-input-group{flex:1;display:flex;flex-direction:column;gap:8px}.todo-input-group label{font-size:.9em;color:var(--color-text);font-weight:600;display:flex;align-items:center;gap:6px}.todo-input-group label:before{content:"";width:4px;height:4px;background:var(--color-primary);border-radius:50%}.required{color:var(--color-danger);font-weight:700}.optional{color:var(--color-text-disabled);font-size:.8em;font-weight:400}.todo-input,.priority-select,.difficulty-select,.time-input,.description-input{border:2px solid var(--color-border);background:#fffc;font-size:.95em;outline:none;color:var(--color-text);padding:12px 16px;border-radius:var(--radius-md);transition:var(--transition-base);font-family:inherit}.todo-input:focus,.priority-select:focus,.difficulty-select:focus,.time-input:focus,.description-input:focus{border-color:var(--color-primary);background:#fff;box-shadow:var(--shadow-focus);transform:translateY(-1px)}.description-input{resize:vertical;min-height:80px;line-height:1.5}.priority-select,.difficulty-select,.time-input{cursor:pointer;font-weight:500}.form-buttons{display:flex;gap:12px;justify-content:flex-end}.cancel-btn,.add-todo-btn{padding:12px 24px;border-radius:var(--radius-md);font-size:.95em;cursor:pointer;transition:var(--transition-base);font-weight:600;border:none}.cancel-btn{background:transparent;color:var(--color-text-muted);border:2px solid var(--color-border)}.cancel-btn:hover{background:var(--color-surface-alt);border-color:#ddd;color:var(--color-text);transform:translateY(-1px)}.add-todo-btn{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-md)}.add-todo-btn:hover{background:var(--gradient-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-primary)}.add-todo-btn:disabled{background:linear-gradient(135deg,#ccc,#bbb);cursor:not-allowed;transform:none;box-shadow:none}.todo-section{margin-top:40px}.todo-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{color:var(--color-text);font-size:1.4em;font-weight:600}.todo-filters{display:flex;gap:10px}.filter-tab{padding:8px 16px;border:1px solid var(--color-border);background:#fff;border-radius:var(--radius-sm);cursor:pointer;font-size:.9em;transition:var(--transition-base);color:var(--color-text-muted);font-weight:500}.filter-tab:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.filter-tab.active{color:#fff;border-color:transparent;transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.filter-tab.active.all{background:var(--gradient-primary-reverse)}.filter-tab.active.pending{background:var(--gradient-warning)}.filter-tab.active.completed{background:var(--gradient-success)}.todo-list{display:flex;flex-direction:column;gap:12px}.empty-state{text-align:center;padding:60px 20px;color:var(--color-text-muted)}.empty-state h3{font-size:1.5em;margin-bottom:10px;color:var(--color-text)}.todo-item{background:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:20px;transition:var(--transition-fast);cursor:pointer}.todo-item:hover{background:var(--color-surface-hover);transform:translate(5px)}.todo-item.completed{background:#e8f5e9;border-color:#c8e6c9}.todo-item.completed .todo-text{text-decoration:line-through;opacity:.6}.todo-content{display:flex;flex-direction:column;gap:12px}.todo-item-header{display:flex;align-items:center;gap:15px}.todo-checkbox{width:20px;height:20px;border:2px solid #ddd;border-radius:6px;position:relative;cursor:pointer;transition:var(--transition-fast);flex-shrink:0}.todo-checkbox.checked{background:var(--color-check);border-color:var(--color-check)}.todo-checkbox.checked:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}.todo-text{flex:1;font-size:1em;color:var(--color-text)}.todo-meta{display:flex;align-items:center;gap:15px;font-size:.85em;color:var(--color-text-muted);flex-wrap:wrap}.badge{padding:4px 8px;border-radius:var(--radius-lg);font-size:.8em;font-weight:500}.badge.high,.badge.hard{background:var(--color-badge-high-bg);color:var(--color-badge-high-fg)}.badge.medium{background:var(--color-badge-mid-bg);color:var(--color-badge-mid-fg)}.badge.low,.badge.easy{background:var(--color-badge-low-bg);color:var(--color-badge-low-fg)}.todo-actions{display:flex;gap:8px;opacity:0;transition:opacity .2s}.todo-item:hover .todo-actions{opacity:1}.action-btn{width:32px;height:32px;border:none;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:var(--transition-fast)}.edit-btn{background:var(--color-badge-mid-bg);color:var(--color-badge-mid-fg)}.edit-btn:hover{background:#ffe0b2}.delete-btn{background:var(--color-badge-high-bg);color:var(--color-badge-high-fg)}.delete-btn:hover{background:#ffcdd2}.todo-details{margin-left:35px}.todo-description{font-size:.9em;color:var(--color-text-muted);line-height:1.4;font-style:italic}.todo-timestamp{font-size:.8em;color:var(--color-text-faint);margin-left:35px}.calendar-controls{display:flex;align-items:center;gap:15px}.calendar-nav-btn{background:var(--color-surface-alt);border:2px solid var(--color-border);border-radius:var(--radius-sm);padding:8px 12px;cursor:pointer;font-size:1.2em;font-weight:700;color:var(--color-text-muted);transition:var(--transition-base)}.calendar-nav-btn:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.current-month-year{font-size:1.1em;font-weight:600;color:var(--color-text);min-width:150px;text-align:center}.calendar-container{background:#fff;border-radius:var(--radius-2xl);border:2px solid var(--color-border);overflow:hidden;box-shadow:var(--shadow-lg)}.calendar-header{display:grid;grid-template-columns:repeat(7,1fr);background:var(--color-surface-alt);border-bottom:1px solid var(--color-border)}.calendar-header>div{padding:15px 10px;text-align:center;font-weight:600;color:var(--color-text-muted);font-size:.9em}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{min-height:100px;padding:8px;border-right:1px solid var(--color-border-muted);border-bottom:1px solid var(--color-border-muted);position:relative;cursor:pointer;transition:var(--transition-base)}.calendar-day:hover{background:var(--color-surface-alt)}.calendar-day.other-month{background:#fafafa;color:#ccc}.calendar-day.today{background:#e3f2fd;font-weight:700}.calendar-day.has-todos{background:var(--color-badge-mid-bg)}.calendar-day.has-todos:after{content:"";position:absolute;top:5px;right:5px;width:8px;height:8px;background:#ff9800;border-radius:50%}.calendar-day-number{font-size:.9em;font-weight:600;margin-bottom:5px;color:var(--color-text)}.calendar-todos{font-size:.7em;color:var(--color-text-muted);line-height:1.2}.calendar-todo-item{background:var(--color-primary);color:#fff;padding:3px 5px;border-radius:4px;margin-bottom:3px;font-size:.65em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calendar-todo-item.more{background:#e0e7ff;color:#3730a3}@media (max-width: 768px){body{padding:10px}.sidebar{width:100%;padding:20px;border-right:none;border-bottom:1px solid var(--color-border)}.sidebar-datetime{margin-bottom:20px}.stats-container{grid-template-columns:repeat(2,1fr);gap:10px}.todo-input-container{padding:20px;gap:15px}.todo-input-row{flex-direction:column;gap:15px}.form-buttons{flex-direction:column;gap:10px}.add-todo-btn,.cancel-btn{width:100%}.todo-meta{flex-wrap:wrap;gap:8px}.todo-actions{opacity:1}.calendar-day{min-height:80px;padding:5px}.calendar-day-number{font-size:.8em}.calendar-todo-item{font-size:.55em;padding:2px 4px}}@media (max-width: 480px){.main-header h1{font-size:1.5em}.stats-container{grid-template-columns:1fr}.todo-filters{flex-wrap:wrap;gap:8px}.filter-tab{font-size:.85em;padding:6px 12px}}.app-container[data-v-4f39dc5d]{display:flex;min-height:700px;margin:0 auto;background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000001a;overflow:hidden}.main-content[data-v-4f39dc5d]{flex:1;padding:40px;background:#fff}.main-header[data-v-4f39dc5d]{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.main-header h1[data-v-4f39dc5d]{color:#333;font-size:2.2em;font-weight:600;margin-bottom:5px}.main-header p[data-v-4f39dc5d]{color:#666;font-size:1em}.add-activity-btn[data-v-4f39dc5d]{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 20px;border-radius:10px;font-size:.95em;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s;font-weight:500}.add-activity-btn[data-v-4f39dc5d]:hover{background:linear-gradient(135deg,#5a6fd8,#6a5acd);transform:translateY(-1px)}@media (max-width: 768px){.app-container[data-v-4f39dc5d]{flex-direction:column;margin:10px}.main-content[data-v-4f39dc5d]{padding:20px}}