:root{--bg:#0f0f1e;--card:#181830;--surface:#1a1a2e;--primary:#6c63ff;--primary-dark:#3d2fb5;--primary-light:#9b59f5;--primary-subtle:#a89fff;--green:#6ce0a6;--orange:#ffb347;--red:#ff5c5c;--text-primary:#e8e8ff;--text-secondary:#ffffffbf;--text-tertiary:#ffffff73;--text-hint:#ffffff59;--radius-sm:8px;--radius-md:14px;--radius-lg:18px;--radius-xl:24px;--shadow-card:0 2px 12px #0000004d;--shadow-elevated:0 8px 32px #0006}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background-color:var(--bg);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}a{color:var(--primary-subtle);text-decoration:none}a:hover{text-decoration:underline}button{cursor:pointer;font-family:inherit}input,textarea{font-family:inherit}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--text-tertiary);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.auth-page{justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.auth-container{text-align:center;width:100%;max-width:400px}.auth-logo{background:linear-gradient(135deg, var(--primary-light), var(--primary-dark));color:#fff;border-radius:22px;justify-content:center;align-items:center;width:72px;height:72px;margin:0 auto 24px;font-size:32px;display:flex;box-shadow:0 8px 24px #6c63ff4d}.auth-title{color:var(--text-primary);margin-bottom:8px;font-size:28px;font-weight:800}.auth-subtitle{color:var(--text-secondary);margin-bottom:32px;font-size:15px}.auth-form{flex-direction:column;gap:14px;display:flex}.auth-input{border-radius:var(--radius-md);background:var(--card);width:100%;color:var(--text-primary);border:1px solid #ffffff1a;outline:none;padding:14px 18px;font-size:15px;transition:border-color .2s}.auth-input:focus{border-color:var(--primary)}.auth-input::placeholder{color:var(--text-hint)}.auth-button{border-radius:var(--radius-md);background:var(--primary);color:#fff;border:none;width:100%;margin-top:4px;padding:14px;font-size:16px;font-weight:600;transition:background .2s,transform .1s}.auth-button:hover:not(:disabled){background:var(--primary-light)}.auth-button:active:not(:disabled){transform:scale(.98)}.auth-button:disabled{opacity:.6;cursor:not-allowed}.auth-error{border:1px solid var(--red);border-radius:var(--radius-sm);color:var(--red);text-align:left;background:#ff5c5c1f;padding:10px 14px;font-size:13px}.auth-link{color:var(--text-secondary);margin-top:24px;font-size:14px}.auth-link a{color:var(--primary-subtle);font-weight:500}.progress-ring{flex-shrink:0}.progress-ring-bg{fill:none;stroke:#ffffff1a}.progress-ring-fill{fill:none;stroke:var(--green);stroke-linecap:round;transition:stroke-dashoffset .5s}.progress-ring-text{fill:var(--text-primary);font-size:12px;font-weight:700}.header-card{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated);padding:28px}.header-top{justify-content:space-between;align-items:flex-start;margin-bottom:24px;display:flex}.header-greeting{color:#fff;margin-bottom:4px;font-size:26px;font-weight:800}.header-email{color:#ffffffb3;font-size:14px}.header-avatar{color:#fff;background:#fff3;border-radius:14px;justify-content:center;align-items:center;width:48px;height:48px;font-size:20px;font-weight:700;display:flex}.header-stats{align-items:center;gap:20px;display:flex}.stat-item{flex-direction:column;align-items:center;display:flex}.stat-value{color:#fff;font-size:22px;font-weight:700}.stat-label{color:#fff9;margin-top:2px;font-size:12px}.stat-divider{background:#fff3;width:1px;height:36px}.filter-tabs{gap:8px;display:flex}.filter-tab{border:1px solid var(--text-tertiary);color:var(--text-tertiary);background:0 0;border-radius:20px;padding:8px 20px;font-size:13px;font-weight:600;transition:all .15s}.filter-tab.active{border-color:var(--primary);color:var(--primary-subtle);background:#6c63ff26}.filter-tab:hover:not(.active){border-color:var(--text-secondary);color:var(--text-secondary)}.tag-chip{text-transform:uppercase;letter-spacing:.5px;cursor:default;-webkit-user-select:none;user-select:none;border:1px solid;border-radius:20px;align-items:center;gap:5px;padding:3px 10px;font-size:11px;font-weight:600;display:inline-flex}.tag-chip-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px}.tag-chip-name{white-space:nowrap}.tag-chip-remove{color:inherit;opacity:.6;cursor:pointer;background:0 0;border:none;margin-left:2px;padding:0;font-size:14px;line-height:1}.tag-chip-remove:hover{opacity:1}.subtask-item{align-items:center;gap:10px;padding:6px 0;display:flex}.subtask-item.done .subtask-text{color:var(--text-hint);text-decoration:line-through}.subtask-checkbox{border:2px solid var(--text-tertiary);color:#fff;background:0 0;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;padding:0;font-size:12px;transition:all .15s;display:flex}.subtask-checkbox.checked{background:var(--green);border-color:var(--green)}.subtask-text{color:var(--text-primary);flex:1;font-size:14px}.subtask-text-input{color:var(--text-primary);border:none;border-bottom:1px solid var(--text-tertiary);background:0 0;outline:none;flex:1;padding:2px 0;font-size:14px}.subtask-text-input:focus{border-bottom-color:var(--primary)}.subtask-delete{color:var(--red);opacity:.5;background:0 0;border:none;padding:0;font-size:18px;line-height:1;transition:opacity .15s}.subtask-delete:hover{opacity:1}.todo-card{background:var(--card);border-radius:var(--radius-lg);cursor:pointer;box-shadow:var(--shadow-card);padding:16px;transition:transform .15s,box-shadow .15s}.todo-card:hover{box-shadow:var(--shadow-elevated);transform:translateY(-2px)}.todo-card-header{align-items:flex-start;gap:12px;display:flex}.todo-checkbox{border:2px solid var(--primary);color:#fff;background:0 0;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;margin-top:1px;padding:0;font-size:14px;transition:all .15s;display:flex}.todo-checkbox.checked{background:var(--primary)}.todo-card-content{flex:1;min-width:0}.todo-title{color:var(--text-primary);word-break:break-word;font-size:15px;font-weight:500;display:block}.todo-title.done{color:var(--text-hint);text-decoration:line-through}.todo-tags{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.todo-card-actions{flex-shrink:0;align-items:center;gap:6px;display:flex}.todo-expand-btn{color:var(--text-secondary);border-radius:var(--radius-sm);background:0 0;border:none;align-items:center;gap:4px;padding:4px 8px;font-size:12px;transition:background .15s;display:flex}.todo-expand-btn:hover{background:#ffffff0d}.subtask-count{font-size:12px;font-weight:500}.todo-delete-btn{color:var(--red);opacity:.5;border-radius:var(--radius-sm);background:0 0;border:none;padding:4px;transition:opacity .15s;display:flex}.todo-delete-btn:hover{opacity:1}.todo-card-subtasks{border-top:1px solid #ffffff0f;margin-top:12px;padding-top:12px}.subtask-progress-bar{background:#ffffff14;border-radius:2px;height:3px;margin-bottom:8px;overflow:hidden}.subtask-progress-fill{background:var(--green);border-radius:2px;height:100%;transition:width .3s}.empty-state{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:60px 20px;display:flex}.empty-emoji{margin-bottom:16px;font-size:48px}.empty-text{color:var(--text-secondary);font-size:16px}.todo-list-page{gap:24px;max-width:1400px;min-height:100vh;margin:0 auto;padding:24px;display:flex}.todo-list-sidebar{flex-direction:column;flex-shrink:0;align-self:flex-start;gap:20px;width:320px;max-height:calc(100vh - 48px);display:flex;position:sticky;top:24px;overflow-y:auto}.sidebar-section{background:var(--card);border-radius:var(--radius-lg);padding:16px}.sidebar-section-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.sidebar-section-header h3{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:14px;font-weight:600}.icon-btn{color:var(--text-secondary);border-radius:var(--radius-sm);background:0 0;border:none;padding:6px;transition:all .15s;display:flex}.icon-btn:hover{color:var(--text-primary);background:#ffffff0f}.tag-filter-list{flex-direction:column;gap:4px;display:flex}.tag-filter-item{border-radius:var(--radius-sm);color:var(--text-secondary);text-align:left;cursor:pointer;background:0 0;border:none;align-items:center;padding:6px 10px;font-size:13px;transition:background .15s;display:flex}.tag-filter-item:hover{background:#ffffff0a}.tag-filter-item.active{color:var(--primary-subtle);background:#6c63ff1a}.logout-btn{border-radius:var(--radius-md);color:var(--text-secondary);background:0 0;border:1px solid #ffffff14;align-items:center;gap:10px;padding:12px 16px;font-size:14px;transition:all .15s;display:flex}.logout-btn:hover{border-color:var(--red);color:var(--red)}.todo-list-main{flex:1;min-width:0;position:relative}.todo-list-toolbar{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.todo-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;display:grid}.fab{background:linear-gradient(135deg, var(--primary-light), var(--primary));color:#fff;z-index:100;border:none;border-radius:17px;justify-content:center;align-items:center;width:56px;height:56px;transition:transform .15s,box-shadow .15s;display:flex;position:fixed;bottom:32px;right:32px;box-shadow:0 6px 20px #6c63ff66}.fab:hover{transform:scale(1.06);box-shadow:0 8px 28px #6c63ff80}.new-todo-inline{background:var(--card);border-radius:var(--radius-lg);border:1px solid var(--primary);gap:10px;margin-bottom:20px;padding:16px;display:flex;box-shadow:0 0 0 3px #6c63ff26}.new-todo-input{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;font-size:15px}.new-todo-input::placeholder{color:var(--text-hint)}.new-todo-submit{border-radius:var(--radius-sm);background:var(--primary);color:#fff;border:none;padding:8px 20px;font-size:13px;font-weight:600}.new-todo-cancel{border-radius:var(--radius-sm);border:1px solid var(--text-tertiary);color:var(--text-secondary);background:0 0;padding:8px 16px;font-size:13px}.loading-page{justify-content:center;align-items:center;min-height:100vh;display:flex}.loading-spinner{border:3px solid #ffffff1a;border-top-color:var(--primary);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=900px){.todo-list-page{flex-direction:column}.todo-list-sidebar{width:100%;max-height:none;position:static}.todo-grid{grid-template-columns:1fr}}.detail-page{justify-content:center;min-height:100vh;padding:24px;display:flex}.detail-container{width:100%;max-width:700px}.detail-topbar{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.back-btn{color:var(--text-secondary);border-radius:var(--radius-sm);background:0 0;border:none;align-items:center;gap:8px;padding:8px 12px;font-size:14px;transition:all .15s;display:flex}.back-btn:hover{color:var(--text-primary);background:#ffffff0f}.save-btn{border-radius:var(--radius-sm);background:var(--primary);color:#fff;border:none;padding:8px 24px;font-size:14px;font-weight:600;transition:background .15s}.save-btn:hover:not(:disabled){background:var(--primary-light)}.save-btn:disabled{opacity:.6;cursor:not-allowed}.detail-content{flex-direction:column;gap:24px;display:flex}.detail-section{background:var(--card);border-radius:var(--radius-lg);padding:20px}.section-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;align-items:center;gap:8px;margin-bottom:14px;font-size:13px;font-weight:600;display:flex}.detail-title-input{width:100%;color:var(--text-primary);background:0 0;border:none;outline:none;margin-bottom:12px;font-size:22px;font-weight:700}.detail-title-input::placeholder{color:var(--text-hint)}.detail-note-input{width:100%;color:var(--text-primary);resize:vertical;background:0 0;border:none;outline:none;min-height:80px;font-size:15px;line-height:1.6}.detail-note-input::placeholder{color:var(--text-hint)}.due-date-row{align-items:center;gap:10px;display:flex}.date-input{border-radius:var(--radius-sm);background:var(--surface);color:var(--text-primary);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;border:1px solid #ffffff1a;outline:none;padding:10px 14px;font-size:14px}.date-input:focus{border-color:var(--primary)}.clear-date{color:var(--text-tertiary);background:0 0;border:none;border-radius:50%;padding:6px;transition:all .15s;display:flex}.clear-date:hover{color:var(--red);background:#ff5c5c26}.detail-tags{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.add-tag-wrapper{position:relative}.add-tag-btn{border:1px dashed var(--text-tertiary);color:var(--text-tertiary);background:0 0;border-radius:20px;align-items:center;gap:4px;padding:5px 12px;font-size:12px;font-weight:600;transition:all .15s;display:flex}.add-tag-btn:hover{border-color:var(--primary);color:var(--primary-subtle)}.tag-dropdown{background:var(--surface);border-radius:var(--radius-sm);z-index:10;min-width:200px;box-shadow:var(--shadow-elevated);border:1px solid #ffffff1a;flex-wrap:wrap;gap:6px;margin-top:6px;padding:8px;display:flex;position:absolute;top:100%;left:0}.tag-dropdown .tag-chip{cursor:pointer}.tag-dropdown .tag-chip:hover{opacity:.8}.subtask-list{margin-bottom:12px}.add-subtask-row{align-items:center;gap:10px;display:flex}.add-subtask-input{border-radius:var(--radius-sm);background:var(--surface);color:var(--text-primary);border:1px solid #ffffff1a;outline:none;flex:1;padding:10px 14px;font-size:14px}.add-subtask-input:focus{border-color:var(--primary)}.add-subtask-input::placeholder{color:var(--text-hint)}.add-subtask-btn{background:var(--primary);color:#fff;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;transition:background .15s;display:flex}.add-subtask-btn:hover:not(:disabled){background:var(--primary-light)}.add-subtask-btn:disabled{opacity:.4;cursor:not-allowed}.tag-manager-page{justify-content:center;min-height:100vh;padding:24px;display:flex}.tag-manager-container{width:100%;max-width:600px;position:relative}.tag-manager-topbar{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.tag-manager-title{color:var(--text-primary);font-size:20px;font-weight:700}.tag-list{flex-direction:column;gap:8px;display:flex}.tag-list-item{background:var(--card);border-radius:var(--radius-lg);align-items:center;gap:14px;padding:14px 18px;transition:transform .1s;display:flex}.tag-color-circle{border-radius:50%;flex-shrink:0;width:24px;height:24px}.tag-list-name{color:var(--text-primary);flex:1;font-size:15px;font-weight:500}.tag-list-actions{gap:4px;display:flex}.tag-action-btn{color:var(--text-tertiary);border-radius:var(--radius-sm);background:0 0;border:none;padding:6px;transition:all .15s;display:flex}.tag-action-btn:hover{color:var(--text-primary);background:#ffffff0f}.tag-action-btn.delete:hover{color:var(--red);background:#ff5c5c26}.tag-empty{text-align:center;color:var(--text-secondary);padding:40px}.dialog-overlay{z-index:200;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.dialog{background:var(--surface);border-radius:var(--radius-xl);width:100%;max-width:400px;box-shadow:var(--shadow-elevated);padding:28px}.dialog-title{color:var(--text-primary);margin-bottom:18px;font-size:18px;font-weight:700}.dialog-input{border-radius:var(--radius-md);background:var(--card);width:100%;color:var(--text-primary);border:1px solid #ffffff1a;outline:none;margin-bottom:18px;padding:12px 16px;font-size:15px}.dialog-input:focus{border-color:var(--primary)}.dialog-input::placeholder{color:var(--text-hint)}.color-palette{flex-wrap:wrap;gap:10px;margin-bottom:24px;display:flex}.color-btn{border:3px solid #0000;border-radius:50%;width:32px;height:32px;padding:0;transition:all .15s}.color-btn:hover{transform:scale(1.1)}.color-btn.selected{box-shadow:0 0 0 2px var(--primary);border-color:#fff}.dialog-actions{justify-content:flex-end;gap:10px;display:flex}.dialog-cancel{border-radius:var(--radius-sm);border:1px solid var(--text-tertiary);color:var(--text-secondary);background:0 0;padding:10px 20px;font-size:14px}.dialog-cancel:hover{border-color:var(--text-secondary)}.dialog-save{border-radius:var(--radius-sm);background:var(--primary);color:#fff;border:none;padding:10px 24px;font-size:14px;font-weight:600}.dialog-save:hover:not(:disabled){background:var(--primary-light)}.dialog-save:disabled{opacity:.4;cursor:not-allowed}