.todo-app-container{background:linear-gradient(to bottom,var(--neutral-50),var(--neutral-100));min-height:100vh}.todo-nav{background-color:#fff;border-bottom:1px solid var(--neutral-200);box-shadow:0 4px 12px #00000014}.todo-nav-container{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1200px;padding:.75rem .5rem;position:relative}@media (min-width:768px){.todo-nav-container{padding:.75rem 1rem}}.todo-nav-title{color:var(--color-text);font-size:1.5rem;font-weight:800;left:50%;letter-spacing:-.025em;position:absolute;transform:translate(-50%)}.todo-nav-spacer{width:6rem}.todo-main{padding:1.5rem}@media (min-width:768px){.todo-main{padding:1.5rem 2rem}}.todo-main-container{margin:0 auto;max-width:75rem}.auth-prompt{background:#fff;border-radius:1rem;box-shadow:0 10px 25px #00000014;margin-bottom:1.5rem;margin-left:auto;margin-right:auto;max-width:28rem;padding:1.5rem 1rem;text-align:center}.auth-prompt-text{color:var(--color-text-secondary);font-size:1rem;line-height:1.6;margin-bottom:.75rem}.todo-columns{display:grid;gap:1.25rem;grid-template-columns:1fr}@media (min-width:768px){.todo-columns{gap:1.5rem;grid-template-columns:repeat(2,1fr)}}.todo-column{background-color:#fff;border:1px solid var(--neutral-200);border-radius:1rem;box-shadow:0 10px 25px #00000014;display:flex;flex-direction:column;height:calc(100vh - 10rem);padding:1.25rem}.todo-column-title{color:var(--color-text);font-size:1.25rem;font-weight:700;letter-spacing:-.025em;margin-bottom:1rem;text-align:center}.todo-header{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:space-between;margin-bottom:1rem}.filter-buttons{display:flex;flex-wrap:wrap;gap:.375rem}.filter-button{background-color:#fff;border:2px solid var(--color-primary);border-radius:.5rem;color:var(--color-primary);cursor:pointer;font-size:.75rem;font-weight:500;padding:.25rem .5rem;transition:all .3s ease}.filter-button:hover{transform:translateY(-1px)}.filter-button-active,.filter-button:hover{background-color:var(--color-primary);box-shadow:0 4px 12px #00000026;color:#fff}.filter-button-blue{border-color:var(--color-primary);color:var(--color-primary)}.filter-button-blue:hover{transform:translateY(-1px)}.filter-button-blue-active,.filter-button-blue:hover{background-color:var(--color-primary);box-shadow:0 4px 12px #0000004d;color:#fff}.auth-info{align-items:center;color:var(--color-text-secondary);display:flex;flex-wrap:wrap;font-size:.875rem;gap:1rem}.auth-user-id{color:var(--color-text);font-weight:600}.user-count{color:var(--color-text-secondary);font-size:.875rem;font-weight:500}.todo-list{display:flex;flex:1;flex-direction:column;gap:.25rem;margin-bottom:1rem;overflow-y:auto;padding-right:.25rem}.todo-item{align-items:center;background:#fff;border:1px solid var(--neutral-200);border-radius:.5rem;display:flex;gap:.5rem;padding:.5rem .75rem;transition:all .2s ease}.todo-item:hover{border-color:var(--neutral-300);box-shadow:0 4px 12px #0000000d}.todo-item-readonly{background-color:var(--neutral-50)}.todo-text{flex:1;line-height:1.5}.todo-text-active{color:var(--color-text);font-weight:500}.todo-text-completed{color:var(--color-text-secondary);text-decoration:line-through}.todo-status-indicator{flex-shrink:0;height:1rem;width:1rem}.status-indicator{border-radius:.25rem;height:1rem;width:1rem}.status-indicator-complete{background-color:var(--success-500)}.status-indicator-active{background-color:var(--neutral-300)}.todo-user-info{align-items:center;color:var(--neutral-500);display:flex;font-size:.75rem;gap:.5rem;min-height:2rem}.empty-state,.loading-state{color:var(--color-text-secondary);font-size:1.125rem;padding:3rem;text-align:center}.empty-state{line-height:1.6}.todo-stats{background:var(--neutral-50);border-radius:.5rem;color:var(--color-text-secondary);font-size:.75rem;font-weight:500;margin-bottom:1rem;padding:.5rem;text-align:center}.todo-form{border-top:1px solid var(--neutral-200);margin-top:auto;padding-top:.75rem}.todo-form-row{display:flex;gap:.5rem}.todo-input{border:2px solid var(--neutral-200);border-radius:.5rem;flex:1;font-size:.875rem;line-height:1.5;min-height:2.5rem;padding:.5rem .75rem;transition:all .2s ease}.todo-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #0a0a0a1a}.button-loading:disabled{opacity:.5}