:root{--bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);--card-bg: #ffffff;--header-text: #2c3e50;--todo-text: #333333;--border-color: #f0f0f0;--input-border: #e0e0e0;--shadow: rgba(0, 0, 0, .1);--primary-color: #6c63ff;--error-color: #e74c3c;--success-color: #2ecc71;--icon-default: #7f8c8d}.dark{--bg-gradient: linear-gradient(135deg, #1a1c2c 0%, #2c3e50 100%);--card-bg: #2d3436;--header-text: #f5f7fa;--todo-text: #dfe6e9;--border-color: #3d4446;--input-border: #4a4a4a;--shadow: rgba(0, 0, 0, .4);--icon-default: #b2bec3}*{box-sizing:border-box;margin:0;padding:0;font-family:Segoe UI,Roboto,Helvetica,Arial,sans-serif;transition:background .3s ease,color .3s ease}html,body{overflow-x:hidden}body{background:var(--bg-gradient);min-height:100vh}.system-controls{position:absolute!important;top:20px;right:20px;display:flex;align-items:center;gap:12px;z-index:1000}.settings-btn,.theme-toggle-btn{background:var(--card-bg);border:2px solid var(--primary-color);color:var(--primary-color);width:45px;height:45px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 4px 10px var(--shadow)}.dark .theme-toggle-btn{color:#f1c40f;border-color:#f1c40f}.settings-menu{position:absolute;top:55px;right:0;background:var(--card-bg);border:1px solid var(--primary-color);padding:15px;border-radius:12px;box-shadow:0 10px 25px var(--shadow);min-width:220px}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;color:var(--header-text);font-weight:600;border-bottom:1px solid var(--border-color)}.setting-item:last-child{border-bottom:none}.setting-item.action{cursor:pointer;border-radius:8px;transition:.2s;padding:10px}.setting-item.action:hover{background:#6c63ff1a}.setting-item.logout{color:var(--error-color)}.switch{width:42px;height:22px;background:#bdc3c7;border-radius:20px;position:relative;cursor:pointer}.switch.on{background:var(--success-color)}.switch-handle{width:18px;height:18px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .3s}.switch.on .switch-handle{transform:translate(20px)}.login-container{display:flex;justify-content:center;padding:40px 20px}.login-card-mini{background:var(--card-bg);padding:30px;border-radius:16px;box-shadow:0 4px 20px var(--shadow);text-align:center;width:100%;max-width:400px}.auth-loading-inline{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--header-text);animation:fadeIn .35s ease-out}.auth-loading-spinner{width:18px;height:18px;border-radius:50%;border:2px solid rgba(0,0,0,.1);border-top-color:var(--primary-color);animation:spin .8s linear infinite}.auth-loading-text{font-size:14px;font-weight:600}.login-options{display:flex;justify-content:center;gap:30px;margin-top:20px}.login-option-item{display:flex;flex-direction:column;align-items:center;gap:6px}.login-option-item span{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--header-text)}.dark .login-option-item span{color:#dfe6e9}.login-icon-btn{width:60px;height:60px;border-radius:50%;border:1px solid var(--border-color);background:var(--card-bg);display:flex;align-items:center;justify-content:center;font-size:1.8rem;cursor:pointer;transition:.2s}.login-icon-btn:hover{transform:translateY(-3px);box-shadow:0 5px 15px var(--shadow)}.login-icon-btn{box-shadow:0 2px 6px var(--shadow),0 0 0 2px #0000000a}.dark .login-icon-btn{background:#fff;border-color:#ffffffe6;box-shadow:0 4px 12px #00000059,0 0 0 2px #8e8cffd9}.App{display:flex;flex-direction:column;align-items:center;padding:30px 10px}.app-loading-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-gradient);animation:fadeIn .4s ease-out}.app-loading-spinner{width:42px;height:42px;border-radius:50%;border:3px solid rgba(255,255,255,.3);border-top-color:var(--primary-color);animation:spin .9s linear infinite;margin-bottom:12px}.app-loading-text{color:var(--header-text);font-size:15px;font-weight:700;letter-spacing:.03em}.todo-header{margin-top:55px;margin-bottom:24px;font-size:38px;font-weight:900;letter-spacing:.12em;text-align:center;background:linear-gradient(90deg,#6c63ff,#ff6ec7);-webkit-background-clip:text;background-clip:text;color:transparent;position:relative;text-shadow:0 4px 10px rgba(0,0,0,.18)}.todo-header:before{content:"";position:absolute;left:50%;bottom:-8px;transform:translate(-50%);width:140px;height:4px;border-radius:999px;background:linear-gradient(90deg,#6c63ff,#ff6ec7);box-shadow:0 4px 12px #6c63ff66}.dark .todo-header{text-shadow:0 6px 14px rgba(0,0,0,.5)}.main{width:100%;max-width:550px;min-width:0;box-sizing:border-box;background-color:var(--card-bg);padding:25px;border-radius:16px;box-shadow:0 10px 30px var(--shadow);overflow-x:clip;overflow-y:visible}.todo-input{width:100%;padding:12px 5px;border:none;background:transparent;color:var(--todo-text);border-bottom:2px solid var(--input-border);font-size:16px;margin-bottom:15px;outline:none}.dark .todo-input::placeholder{color:#b2bec3!important;opacity:.8!important}.dark .todo-input::-webkit-input-placeholder{color:#b2bec3!important}.dark .todo-input::-moz-placeholder{color:#b2bec3!important}.dark .todo-input:-ms-input-placeholder{color:#b2bec3!important}.dark .todo-input:focus{border-bottom-color:var(--primary-color);color:#fff}.todo-create-button{width:100%;padding:15px;border:none;border-radius:8px;background-color:var(--primary-color);color:#fff;font-weight:700;cursor:pointer;transition:.3s}.todo-create-button:hover{opacity:.9;transform:translateY(-1px)}.progress-container{margin:20px 0}.progress-label{display:flex;justify-content:space-between;margin-bottom:8px;font-weight:700;color:var(--header-text)}.progress-bar-background{width:100%;height:10px;background-color:var(--border-color);border-radius:10px;overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#6c63ff,#a29bfe);transition:width .5s ease}.filter-wrapper{display:flex;flex-direction:column;gap:15px;margin:25px 0;min-width:0;overflow-x:clip;overflow-y:visible}.filter-container{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.filter-btn{flex:1;min-width:90px;padding:10px 8px;font-size:13px;font-weight:700;border:2px solid var(--border-color);border-radius:20px;background:transparent;color:var(--icon-default);cursor:pointer}.filter-btn.active{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.bulk-actions{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;min-width:0}.bulk-btn{flex:1;padding:10px;border-radius:8px;border:none;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}.clear-completed{background:#2ecc711a;color:var(--success-color)}.clear-all{background:#e74c3c1a;color:var(--error-color)}.complete-selected{background:#3498db1f;color:#2980b9}.selection-toggle{background:#6c63ff0d;color:var(--primary-color);border:1px solid rgba(108,99,255,.3)}.selection-toggle.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.dark .selection-toggle{background:#6c63ff26;color:#dfe6ff;border-color:#6c63ff80}.dark .selection-toggle.active{background:#8e8cff;color:#fff;border-color:#8e8cff}.selection-row{margin-top:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}.selection-all-btn{background:#6c63ff0f;border:1px solid rgba(108,99,255,.4);color:var(--primary-color);font-size:12px;cursor:pointer;padding:4px 10px;border-radius:999px;white-space:nowrap}.dark .selection-all-btn{background:#6c63ff2e;border-color:#6c63ffb3;color:#dfe6ff}.selection-info{flex:1;min-width:0;text-align:center;font-size:14px;opacity:.85;color:var(--icon-default)}.todo-row-container{display:flex;align-items:center;gap:12px;margin-top:15px}.todo-select-checkbox{display:flex;align-items:center;justify-content:center}.todo-select-checkbox input[type=checkbox]{width:18px;height:18px;cursor:pointer}.todo-lists{display:flex;justify-content:space-between;border:1px solid var(--border-color);padding:12px 18px;border-radius:12px;background-color:var(--card-bg);flex:1;box-shadow:0 2px 5px var(--shadow)}.truncated-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px;color:var(--todo-text)}.full-text{white-space:normal!important;word-break:break-word;max-height:200px;overflow-y:auto;display:block}.todo-icons-container{display:flex;align-items:center;gap:15px}.todo-icons{font-size:26px;cursor:pointer;color:var(--icon-default)}.icon-remove{color:var(--error-color)!important}.empty-text{padding:20px;border-radius:12px;border:1px dashed var(--primary-color);color:var(--icon-default);text-align:center;animation:fadeIn .5s ease}.dark .empty-text,.dark .main p,.dark .empty-state-text{color:var(--todo-text)!important;opacity:1!important}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:768px){.filter-wrapper{margin-left:0;margin-right:0}.bulk-actions{gap:8px}.bulk-btn{flex:1 1 auto;min-width:0;padding:8px 6px;font-size:12px}.bulk-btn span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.selection-row{width:100%}.selection-all-btn{flex-shrink:0;font-size:11px;padding:4px 8px}.selection-info{font-size:12px;overflow:hidden;text-overflow:ellipsis}}@media(max-width:480px){.main{padding-left:12px;padding-right:12px}.filter-btn{flex:1 1 calc(50% - 10px);min-width:110px;font-size:11px}.truncated-text{max-width:150px}.system-controls{top:10px;right:10px}.bulk-actions{gap:6px}.bulk-btn{flex:1 1 calc(50% - 5px);min-width:0;padding:8px 4px;font-size:11px;gap:4px}.bulk-btn svg{flex-shrink:0}.bulk-btn span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selection-toggle{flex:1 1 100%}.selection-row{gap:6px}.selection-all-btn{font-size:11px;padding:4px 8px}.selection-info{flex:1 1 100%;font-size:12px;text-align:center}.todo-lists:not(.expanded){max-height:90px;overflow:hidden;align-items:center}.todo-lists.expanded{max-height:none;overflow:visible;align-items:flex-start}}.wide-toast{width:90%!important;max-width:450px!important;text-align:center;border-radius:12px!important;margin:0 auto!important;font-size:14px!important}@media(max-width:480px){.wide-toast{width:100%!important;padding:10px 15px!important}}.user-avatar-small{width:35px;height:35px;border-radius:50%;object-fit:cover}.user-avatar-small.is-guest{border:2px dashed #ccc;padding:1px}.icon-blue{color:#4285f4!important}.footer{margin-top:40px;padding:20px;text-align:center;opacity:.9;transition:color .3s ease}.footer-name{color:var(--primary-color);font-weight:800}.dark .footer{color:var(--todo-text)!important}@media(max-width:480px){.footer{margin-top:20px;padding:10px;font-size:14px}}.shake{animation:shake-animation .25s both}@keyframes shake-animation{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.App:has(.filter-btn.active[data-filter=archive]) .main{border-top:5px solid #7d5fff;box-shadow:0 15px 35px #7d5fff33}.empty-text{background:#7d5fff0d;padding:20px;border-radius:12px;border:1px dashed var(--primary-color);color:var(--icon-default);text-align:center;animation:fadeIn .5s ease}.system-controls{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:15px;z-index:1000}.user-profile-mini{display:flex;align-items:center;background:var(--card-bg);padding:2px;border-radius:50px;border:2px solid var(--primary-color);box-shadow:0 4px 10px var(--shadow);transition:all .3s ease}.user-avatar-small{width:45px;height:45px;border-radius:50%;object-fit:cover;display:block}.user-avatar-small.is-guest{border:2px dashed #ccc;background:#f9f9f9}.settings-btn,.theme-toggle-btn{width:50px;height:50px}.dark .todo-lists input,.dark .todo-lists .truncated-text,.dark .todo-lists .full-text{color:#fff!important;-webkit-text-fill-color:#ffffff!important}.dark .todo-lists input:focus{color:#fff!important;-webkit-text-fill-color:#ffffff!important;background-color:transparent!important;outline:none!important}.dark .icon-remove{color:var(--error-color)!important}.date-css{font-size:10px;font-weight:300;margin-top:4px;display:block;transition:color .3s ease}.date-css{color:#7f8c8d;opacity:.7}.dark .date-css{color:#b2bec3!important;-webkit-text-fill-color:#b2bec3!important;opacity:.7!important;font-weight:500;font-size:13px}.dark .truncated-text,.dark .full-text,.dark .todo-lists input{color:#fff!important;-webkit-text-fill-color:#ffffff!important;font-size:16px!important;font-weight:500!important;opacity:1!important}.date-css{color:#a41ce4!important;-webkit-text-fill-color:#a41ce4!important;opacity:.7!important;font-weight:500;font-size:13px}.todo-row-container{touch-action:pan-y;cursor:grab}.todo-row-container:active{cursor:grabbing}.drag-handle{touch-action:none;cursor:grab;color:#6c63ff}.drag-handle:active{cursor:grabbing}.dark .drag-handle{color:#ffc857}.todo-list-container{user-select:none;-webkit-user-select:none}