:root{--primary-color: #4a90e2;--secondary-color: #f5f5f5;--error-color: #e74c3c;--success-color: #2ecc71;--text-color: #333;--border-radius: 8px;--transition-speed: .3s}.app-wrapper{display:flex;flex-direction:column;min-height:100vh}.content-wrapper{flex:1 0 auto}.auth-buttons{display:flex;gap:1rem}.header-content{display:flex;justify-content:space-between;align-items:center;padding:1rem;max-width:1200px;margin:0 auto}body{background-color:#f8f9fa;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M9 0h2v20H9V0zm25 0h2v20h-2V0zm25 0h2v20h-2V0zm25 0h2v20h-2V0zm25 0h2v20h-2V0zM9 20h2v20H9V20zm25 0h2v20h-2V20zm25 0h2v20h-2V20zm25 0h2v20h-2V20zm25 0h2v20h-2V20zM9 40h2v20H9V40zm25 0h2v20h-2V40zm25 0h2v20h-2V40zm25 0h2v20h-2V40zm25 0h2v20h-2V40zM9 60h2v20H9V60zm25 0h2v20h-2V60zm25 0h2v20h-2V60zm25 0h2v20h-2V60zm25 0h2v20h-2V60zM9 80h2v20H9V80zm25 0h2v20h-2V80zm25 0h2v20h-2V80zm25 0h2v20h-2V80zm25 0h2v20h-2V80zM9 100h2v20H9v-20zm25 0h2v20h-2v-20zm25 0h2v20h-2v-20zm25 0h2v20h-2v-20zm25 0h2v20h-2v-20z' fill='%234a90e2' fill-opacity='0.05'/%3E%3C/svg%3E");background-attachment:fixed;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color:var(--text-color)}.container{max-width:1200px;margin:0 auto;padding:2rem}.header{background-color:#fff;box-shadow:0 1px 3px #0000001a;margin-bottom:2rem}.header-title{font-size:1.5rem;font-weight:700;color:#1a1a1a;transition:transform var(--transition-speed)}.header-title:hover{transform:scale(1.05)}.user-info{display:flex;align-items:center;gap:1rem}.user-name{display:flex;align-items:center;gap:.5rem}.landing-page{min-height:100vh;background-color:#f8f9fa;background-image:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%234a90e2' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");background-attachment:fixed;display:flex;flex-direction:column}.hero-section{text-align:center;padding:3rem 1rem;max-width:800px;margin:0 auto;background:#ffffffe6;border-radius:var(--border-radius);box-shadow:0 4px 6px #0000001a;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);margin-top:2rem}.hero-title{font-size:3rem;font-weight:700;margin-bottom:1rem;color:#1a1a1a;animation:fadeInDown .8s ease-out}.hero-subtitle{font-size:1.25rem;color:#666;max-width:600px;margin:0 auto 2rem;animation:fadeInUp .8s ease-out}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;padding:2rem;max-width:1200px;margin:0 auto;margin-bottom:4rem}.feature-card{background:#fffffff2;padding:2rem;border-radius:var(--border-radius);box-shadow:0 4px 6px #0000001a;text-align:center;transition:all var(--transition-speed);transform:translateY(0);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.feature-card:hover{transform:translateY(-5px);box-shadow:0 8px 12px #00000026}.feature-icon{margin-bottom:1rem;transition:transform var(--transition-speed)}.feature-card:hover .feature-icon{transform:scale(1.1)}.feature-title{font-size:1.25rem;font-weight:600;margin-bottom:.5rem;color:#1a1a1a}.feature-description{color:#666}.todo-form{max-width:600px;margin:0 auto 2rem;background:#fff;padding:2rem;border-radius:var(--border-radius);box-shadow:0 4px 6px #0000001a;transition:transform var(--transition-speed)}.todo-form:hover{transform:translateY(-2px)}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:#1a1a1a}.form-group input,.form-group textarea{width:100%;padding:.75rem;border:2px solid #ddd;border-radius:var(--border-radius);font-size:1rem;box-sizing:border-box;transition:border-color var(--transition-speed),box-shadow var(--transition-speed)}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #4a90e21a}.todo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;padding:0 1rem}.todo-card{background:#fff;padding:1.5rem;border-radius:var(--border-radius);box-shadow:0 4px 6px #0000001a;transition:all var(--transition-speed)}.todo-card:hover{transform:translateY(-3px);box-shadow:0 6px 8px #00000026}.todo-card.partially-completed{opacity:.6}.todo-title{font-size:1.25rem;font-weight:600;margin-bottom:.5rem}.todo-description{color:#666;margin-bottom:1rem;white-space:pre-line}.todo-actions{display:flex;gap:.5rem;flex-wrap:wrap}.todo-card .btn{padding:.5rem .75rem;font-size:.75rem}.todo-card .btn svg{width:14px;height:14px}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border:none;border-radius:var(--border-radius);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition-speed);color:#fff;text-transform:uppercase;letter-spacing:.5px}.btn:hover{transform:translateY(-2px);box-shadow:0 4px 6px #0000001a}.btn-primary{background-color:var(--primary-color)}.btn-primary:hover{background-color:#357abd}.btn-danger{background-color:#dc3545}.btn-danger:hover{background-color:#c82333}.btn-warning{background-color:#ffc107}.btn-warning:hover{background-color:#e0a800}.btn-success{background-color:var(--success-color)}.btn-success:hover{background-color:#28a745}.todo-card.todo-status-not_started{background-color:#f9f9f9}.todo-card.todo-status-in_progress{background-color:#fff8e1}.todo-card.todo-status-completed{background-color:#e6ffe6}.todo-text-status-not_started{color:#000;font-weight:400;text-decoration:none;opacity:1}.todo-text-status-in_progress{color:orange;font-weight:700;text-decoration:none;opacity:1}.todo-text-status-completed{color:green;text-decoration:line-through;opacity:.7}.error-text{color:red;font-size:.85rem;margin-top:4px}.auth-container{max-width:400px;margin:2rem auto;padding:2.5rem;background:#fff;border-radius:var(--border-radius);box-shadow:0 8px 16px #0000001a;animation:slideUp .5s ease-out}.auth-container h2{text-align:center;font-size:2rem;margin-bottom:2rem;color:#1a1a1a}.auth-container .form-group{margin-bottom:1.5rem}.auth-container input{background-color:#f8f9fa;border:2px solid transparent;transition:all var(--transition-speed)}.auth-container input:focus{background-color:#fff;border-color:var(--primary-color);box-shadow:0 0 0 3px #4a90e21a}.btn-google{width:100%;background-color:#4285f4;margin-top:1rem;justify-content:center}.btn-google:hover{background-color:#3367d6}.toggle-auth{text-align:center;margin-top:1.5rem}.toggle-auth button{background:none;border:none;color:var(--primary-color);cursor:pointer;font-size:.875rem;transition:color var(--transition-speed);text-decoration:none;padding:.5rem 1rem}.toggle-auth button:hover{color:#357abd;text-decoration:underline}.error{color:var(--error-color);background-color:#e74c3c1a;padding:.75rem;border-radius:var(--border-radius);margin-bottom:1rem;font-size:.875rem;animation:shake .5s ease-in-out}.footer{flex-shrink:0;background-color:#1a1a1a;color:#fff;padding:1.5rem;text-align:center;width:100%}.footer-content{max-width:1200px;margin:0 auto}.loading-screen{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#ffffffe6}.loading-spinner{width:50px;height:50px;border:4px solid rgba(74,144,226,.1);border-left-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}.not-found{min-height:100vh;display:flex;justify-content:center;align-items:center;text-align:center;padding:2rem}.not-found-content{background:#fffffff2;padding:3rem;border-radius:var(--border-radius);box-shadow:0 8px 16px #0000001a;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:fadeInUp .8s ease-out}.not-found h1{font-size:6rem;font-weight:700;color:var(--primary-color);margin:0;line-height:1}.not-found h2{font-size:2rem;margin:1rem 0;color:#1a1a1a}.not-found p{color:#666;margin-bottom:2rem}*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input,textarea,button{-webkit-appearance:none;-moz-appearance:none;appearance:none}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 768px){.container{padding:1rem}.header-content{flex-direction:column;gap:1rem;text-align:center}.user-info{flex-direction:column;gap:.5rem}.hero-title{font-size:2rem}.hero-subtitle{font-size:1rem}.features-grid{grid-template-columns:1fr;padding:0 1rem}.todo-grid{grid-template-columns:1fr}.todo-form{padding:1rem}.todo-actions{justify-content:center}.btn{padding:.5rem 1rem;font-size:.75rem}.auth-container{margin:1rem;padding:1.5rem}}.success{color:var(--success-color);background-color:#2ecc711a;padding:.75rem;border-radius:var(--border-radius);margin-bottom:1rem;font-size:.875rem;animation:fadeIn .5s ease-in-out}.auth-links{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem;text-align:center}.btn-link{background:none;border:none;color:var(--primary-color);padding:.5rem;font-size:.875rem;cursor:pointer;transition:color var(--transition-speed)}.btn-link:hover{color:#357abd;text-decoration:underline}.btn-secondary{background-color:#6c757d}.btn-secondary:hover{background-color:#5a6268}.w-full{width:100%}.mt-4{margin-top:1rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
