:root{--color-text:#333;--color-text-strong:#1e293b;--color-text-muted:#64748b;--color-text-subtle:#64748b;--color-text-label:#374151;--color-text-heading:#475569;--color-surface:#fff;--color-surface-muted:#f8fafc;--color-surface-soft:#f1f5f9;--color-border:#e2e8f0;--color-border-strong:#d1d5db;--color-primary:#4f46e5;--color-primary-deep:#7c3aed;--color-primary-soft:#4f46e51a;--color-primary-glow:#4f46e54d;--color-page-start:#667eea;--color-page-end:#764ba2;--color-danger:#ef4444;--color-danger-deep:#dc2626;--color-danger-soft:#fef2f2;--color-danger-border:#fecaca;--color-secondary-text:#64748b;--color-secondary-text-hover:#475569;--color-shadow:#0000001a;--color-shadow-strong:#00000040;--color-backdrop:#00000080;--space-page:20px;--auth-shell-width:480px;--radius-control:12px;--radius-surface:20px}*,:before,:after{box-sizing:border-box}html{margin:0;padding:0}h1,h2,h3,h4,h5,h6,p,ul,ol,figure{margin:0}ul,ol{padding:0;list-style:none}body{color:var(--color-text);background:linear-gradient(135deg, var(--color-page-start) 0%, var(--color-page-end) 100%);min-height:100dvh;padding:var(--space-page,20px);margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.btn{border-radius:var(--radius-control,12px);cursor:pointer;border:none;justify-content:center;align-items:center;gap:8px;padding:15px 30px;font-family:inherit;font-size:1rem;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s,background-color .2s,border-color .2s,opacity .2s;display:inline-flex;position:relative}.btn[data-variant=primary]{background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);color:var(--color-surface)}.btn[data-variant=primary]:hover:not(:disabled){box-shadow:0 10px 20px var(--color-primary-glow);transform:translateY(-2px)}.btn[data-variant=secondary]{background:var(--color-surface-soft);color:var(--color-text-muted);border:2px solid var(--color-border)}.btn[data-variant=secondary]:hover:not(:disabled){background:var(--color-border);color:var(--color-text-heading)}.btn[data-variant=danger]{background:var(--color-danger);color:var(--color-surface)}.btn[data-variant=danger]:hover:not(:disabled){background:var(--color-danger-deep);transform:translateY(-1px)}.btn:disabled{opacity:.75;cursor:not-allowed;transform:none!important}.btn-text{align-items:center;display:inline-flex}.btn-loading{justify-content:center;align-items:center;display:none}.btn[data-loading] .btn-text{visibility:hidden}.btn[data-loading] .btn-loading{justify-content:center;align-items:center;display:inline-flex;position:absolute;inset:0}.btn-spinner{border:2px solid #0000;border-top-color:currentColor;border-radius:50%;width:1.125rem;height:1.125rem;animation:.9s linear infinite btn-spin}.btn-sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.btn-spinner{opacity:.85;border-top-color:currentColor;animation:none}}.btn[data-block]{width:100%;margin-top:12px}@keyframes btn-spin{to{transform:rotate(360deg)}}.form-group{margin-bottom:20px}.form-group .field-label{color:var(--color-text-label);margin-bottom:8px;font-weight:600;display:block}.field-required{margin-left:.15em;font-weight:700}.form-hint{color:var(--color-text-muted);margin-top:6px;font-size:.875rem}.form-error{color:var(--color-danger-deep);margin-top:6px;font-size:.875rem}.form-group .form-control{border:2px solid var(--color-border);border-radius:var(--radius-control,10px);box-sizing:border-box;width:100%;padding:12px;font-family:inherit;font-size:1rem;transition:border-color .2s,box-shadow .2s}.form-group .form-control:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft);outline:none}.form-group .form-control[aria-invalid=true]{border-color:var(--color-danger)}.checkbox-input{width:1.25rem;height:1.25rem;accent-color:var(--color-primary);cursor:pointer;flex-shrink:0}.checkbox-field{cursor:pointer;color:var(--color-text-label);align-items:center;gap:10px;font-weight:600;display:flex}.checkbox-field .checkbox-input{margin:0}.error-boundary-root-page{box-sizing:border-box;min-height:100vh;padding:var(--space-page,20px);justify-content:center;align-items:center;margin:0;display:flex}.error-boundary-root-section{margin:20px 30px}.error-boundary{background:var(--color-danger-soft);border:1px solid var(--color-danger-border);color:var(--color-danger-deep);border-radius:12px;max-width:36rem;padding:15px 30px}.error-boundary-title{margin:0 0 12px;font-size:1.125rem;font-weight:600;line-height:1.4}.error-boundary-actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.container{background:var(--color-surface);max-width:800px;box-shadow:0 20px 40px var(--color-shadow);border-radius:20px;margin:0 auto;overflow:hidden}.app-gate{flex-direction:column;justify-content:center;align-items:center;min-height:280px;padding:56px 30px 72px;display:flex}.app-gate-status{text-align:center;flex-direction:column;align-items:center;gap:14px;max-width:22rem;display:flex}.app-gate-spinner{border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;width:2.25rem;height:2.25rem;animation:.9s linear infinite app-gate-spin}@keyframes app-gate-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.app-gate-spinner{border-top-color:var(--color-border);opacity:.75;animation:none}}.app-gate-title{color:var(--color-text-heading);margin:0;font-size:1.35rem;font-weight:600}.app-gate-lede{color:var(--color-text-muted);margin:0;font-size:1rem;line-height:1.55}.app-gate .error-message{width:100%;max-width:36rem;margin:0}header{background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-deep) 100%);color:var(--color-surface);padding:0}.header-brand{text-align:left;padding:40px 30px 28px}.account-bar{background:#00000024;border-top:1px solid #ffffff2e;padding:12px 30px}.account-menu{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;font-size:.95rem;display:flex}.account-menu-identity{flex:12rem;align-items:center;gap:12px;min-width:0;display:flex}.account-menu-actions{flex-wrap:wrap;flex:auto;justify-content:flex-end;align-items:center;gap:10px 14px;display:flex}.account-badge{background:#ffffff38;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;font-size:1rem;font-weight:700;display:inline-flex}.account-email{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.account-menu-link{color:var(--color-surface);border-radius:8px;padding:8px 12px;font-weight:500;text-decoration:none;transition:background-color .2s}.account-menu-link-label-short{display:none}@media (hover:hover){.account-menu-link:hover{background:#ffffff1f;text-decoration:underline}}.account-menu-btn.btn{color:var(--color-surface);background:#ffffff24;border:2px solid #ffffff59;padding:8px 18px;font-size:.9rem}@media (hover:hover){.account-menu-btn.btn[data-variant=secondary]:hover:not(:disabled){color:var(--color-surface);box-shadow:none;background:#ffffff3d;border-color:#ffffff80;transform:none}}.account-menu-skeleton{pointer-events:none}.skeleton-account-button{border-radius:var(--radius-control);width:5.5rem;height:2.25rem}header h1{margin-bottom:10px;font-size:2.5rem;font-weight:700}header p{opacity:.9;font-size:1.1rem}.add-todo-section{background:var(--color-surface-muted);border-bottom:1px solid var(--color-border);padding:30px}.input-group{flex-direction:column;display:flex}.filters{background:var(--color-surface);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding:20px 30px;display:flex}.filter-buttons{border:0;gap:10px;min-inline-size:0;margin:0;padding:0;display:flex}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.filter-btn{border:2px solid var(--color-border);background:var(--color-surface);cursor:pointer;border-radius:20px;padding:8px 16px;font-size:.9rem;font-weight:500;transition:background-color .2s,color .2s,border-color .2s}.filter-btn[data-active=true]{background:var(--color-primary);color:var(--color-surface);border-color:var(--color-primary)}@media (hover:hover){.filter-btn:hover:not([data-active=true]){background:var(--color-surface-soft);border-color:var(--color-primary)}}.todo-count{color:var(--color-text-muted);font-size:.9rem;font-weight:500}.todos-container{min-height:400px;position:relative}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton{border-radius:var(--radius-control);background:linear-gradient(90deg, var(--color-surface-soft) 0%, var(--color-border) 50%, var(--color-surface-soft) 100%);background-size:200% 100%;animation:1.2s ease-in-out infinite skeleton-shimmer}.skeleton-on-inverse{background:linear-gradient(90deg,#ffffff2e 0%,#ffffff61 50%,#ffffff2e 100%) 0 0/200% 100%}@media (prefers-reduced-motion:reduce){.skeleton{background:var(--color-surface-soft);animation:none}.skeleton-on-inverse{background:#ffffff47;animation:none}}.skeleton-app-title{border-radius:12px;width:min(220px,70%);height:2.5rem;margin-bottom:10px}.skeleton-app-tagline{border-radius:8px;width:min(280px,85%);height:1.1rem}.skeleton-avatar{border-radius:999px;width:2rem;height:2rem}.skeleton-account-email{border-radius:6px;width:10rem;height:.95rem}.skeleton-account-link{border-radius:6px;width:6.5rem;height:.95rem}.skeleton-field-label{border-radius:6px;width:3.5rem;height:.875rem;margin-bottom:8px}.skeleton-field-label-short{width:9rem;margin-top:4px}.skeleton-input{border-radius:var(--radius-control);width:100%;height:3rem}.skeleton-input-tall{height:4.5rem}.skeleton-button{border-radius:var(--radius-control);width:7.5rem;height:2.75rem}.skeleton-filter-row{gap:10px;display:flex}.skeleton-filter-pill{border-radius:20px;width:4.5rem;height:2.25rem}.skeleton-todo-count{border-radius:6px;width:5.5rem;height:.9rem}.todo-item-skeleton{pointer-events:none}.todo-item-skeleton:hover{background:0 0}.skeleton-checkbox{border-radius:4px;flex-shrink:0;width:1.25rem;height:1.25rem;margin-top:4px}.skeleton-line{border-radius:6px;height:.875rem}.skeleton-line-title{width:min(240px,75%);height:1.125rem;margin-bottom:8px}.skeleton-line-desc{width:min(360px,90%);margin-bottom:8px}.skeleton-line-date{width:7rem;height:.75rem}.skeleton-action{border-radius:10px;width:2.5rem;height:2.5rem}.error-message{background:var(--color-danger-soft);border:1px solid var(--color-danger-border);color:var(--color-danger-deep);border-radius:12px;align-items:center;gap:10px;margin:20px 30px;padding:15px 30px;display:flex}.empty-state{color:var(--color-text-muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:80px 30px;display:flex}.empty-icon{opacity:.5;margin-bottom:20px;font-size:4rem}.empty-state h2{color:var(--color-text-heading);margin-bottom:10px;font-size:1.5rem}.todos-list{padding:0;list-style:none}.todo-item{border-bottom:1px solid var(--color-surface-soft);align-items:flex-start;gap:15px;padding:20px 30px;transition:background-color .2s;display:flex;position:relative}.todo-item:hover{background:var(--color-surface-muted)}.todo-item[data-completed=true]{opacity:.85}.todo-item[data-completed=true] .todo-title{color:var(--color-text-subtle);text-decoration:line-through}.todo-item .checkbox-input{margin-top:4px}.todo-content{flex:1;min-width:0}.todo-title{color:var(--color-text-strong);overflow-wrap:break-word;margin-bottom:5px;font-size:1.1rem;font-weight:600}.todo-description{color:var(--color-text-muted);overflow-wrap:break-word;font-size:.95rem;line-height:1.5}.todo-actions{opacity:1;flex-shrink:0;gap:8px;display:flex}@media (hover:hover){.todo-actions{opacity:.35;transition:opacity .2s}.todo-item:hover .todo-actions,.todo-item:focus-within .todo-actions{opacity:1}}.action-btn{cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;font-size:.9rem;transition:all .3s;display:flex}.edit-btn{background:var(--color-surface-soft);color:var(--color-primary)}.edit-btn:hover{background:var(--color-primary);color:var(--color-surface)}.delete-btn{background:var(--color-danger-soft);color:var(--color-danger-deep)}.delete-btn:hover{background:var(--color-danger-deep);color:var(--color-surface)}.todo-date{color:var(--color-text-subtle);margin-top:8px;font-size:.8rem}.modal{background:var(--color-backdrop);z-index:1000;backdrop-filter:blur(4px);justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;inset:0}.modal>dialog.modal-content{inset:unset;background:var(--color-surface);width:90%;max-width:500px;max-height:90vh;box-shadow:0 25px 50px var(--color-shadow-strong);border:none;border-radius:20px;margin:0;padding:0;position:static;overflow-y:auto}.modal-header{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding:25px 30px;display:flex}.modal-header h2{color:var(--color-text-strong);font-size:1.5rem}.close-btn{cursor:pointer;color:var(--color-text-subtle);background:0 0;border:none;border-radius:8px;padding:5px;font-size:1.5rem;transition:all .3s}.close-btn:hover{background:var(--color-surface-soft);color:var(--color-text-muted)}.modal-form,.modal-form-body{padding:30px}.modal-actions{justify-content:flex-end;gap:15px;margin-top:30px;display:flex}@media (width<=768px){body{padding:10px}.container{border-radius:15px}header{padding:0}.header-brand{padding:30px 20px 22px}.account-bar{padding:10px 16px}.account-menu{flex-flow:row;justify-content:space-between;align-items:center;gap:8px}.account-menu-identity{flex:auto;gap:8px;min-width:0}.account-badge{width:1.75rem;height:1.75rem;font-size:.85rem}.account-email{font-size:.85rem}.account-menu-actions{flex-flow:row;flex:none;justify-content:flex-end;align-items:center;gap:6px}.account-menu-link{white-space:nowrap;padding:6px 8px;font-size:.8125rem}.account-menu-link-label-long{display:none}.account-menu-link-label-short{display:inline}.account-menu-btn.btn{white-space:nowrap;width:auto;padding:6px 12px;font-size:.8125rem}.account-menu-error{flex:100%;margin:0;font-size:.8125rem}header h1{font-size:2rem}.add-todo-section{padding:20px}.filters{flex-direction:column;align-items:stretch;gap:15px;padding:15px 20px}.filter-buttons{justify-content:center}.todo-item{padding:15px 20px}.modal>dialog.modal-content{width:95%;max-height:calc(100vh - 40px)}.modal-form{padding:20px}.modal-actions{flex-direction:column-reverse}}