.auth-panel-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--background)}.auth-panel-card{width:100%;max-width:440px;border-radius:calc(var(--radius) * 2);background:var(--card);box-shadow:var(--shadow-2xl);padding:48px 40px;animation:slideUp .4s ease-out}.auth-panel-header{text-align:center;margin-bottom:32px}.auth-panel-icon{font-size:56px;margin-bottom:12px}.auth-panel-header h1{font-size:28px;margin-bottom:8px;color:var(--foreground)}.auth-panel-header p{color:var(--muted-foreground);font-size:15px}.auth-form{display:flex;flex-direction:column;gap:18px}.auth-field{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--muted-foreground)}.auth-field input{width:100%;padding:14px 16px;border-radius:calc(var(--radius) * 1.5);border:2px solid var(--input);background:var(--card);color:var(--foreground);font-size:16px;transition:border-color .2s ease,box-shadow .2s ease}.auth-field input:focus{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklch,var(--ring) 10%,transparent);outline:none}.auth-error{color:var(--destructive);font-size:13px;margin:-8px 0 0}.auth-submit{width:100%;padding:16px;border-radius:calc(var(--radius) * 1.5);background:var(--primary);color:var(--primary-foreground);font-size:16px;font-weight:600;border:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease}.auth-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.auth-submit:active:not(:disabled){transform:translateY(0)}.auth-submit:disabled{opacity:.6;cursor:not-allowed}.auth-footer{margin-top:24px;display:flex;justify-content:center;gap:6px;font-size:14px;color:var(--muted-foreground)}.auth-footer button{background:transparent;border:none;color:var(--primary);padding:0;font-size:14px;font-weight:600;cursor:pointer;text-decoration:underline}.auth-footer button:hover{color:var(--ring)}@media (max-width: 600px){.auth-panel-card{padding:36px 28px}.auth-panel-header h1{font-size:24px}}.skeleton-list{list-style:none;padding:0;margin:0}.skeleton-item{display:flex;align-items:center;gap:12px;padding:16px;background:#fff;border-radius:12px;margin-bottom:12px;box-shadow:0 2px 8px #0000000f;animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-checkbox{width:20px;height:20px;border-radius:6px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;flex-shrink:0}.skeleton-text{flex:1;display:flex;flex-direction:column;gap:8px}.skeleton-line{height:14px;border-radius:6px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite}.skeleton-line-1{width:85%}.skeleton-line-2{width:60%}.skeleton-actions{display:flex;gap:8px;flex-shrink:0}.skeleton-button{width:50px;height:32px;border-radius:6px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite}@keyframes skeleton-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.8}}.header-content{display:flex;align-items:center;justify-content:space-between;gap:24px}.session-info{display:flex;flex-direction:column;align-items:flex-end;gap:8px;font-size:14px}.session-email{font-weight:600}.logout-btn{background:#ffffff26;color:var(--primary-foreground);border:1px solid rgba(255,255,255,.3);padding:10px 18px;border-radius:calc(var(--radius) * 1.5);font-size:14px}.logout-btn:hover{opacity:.9;transform:translateY(-1px)}.logout-btn:active{transform:translateY(0)}@media (max-width: 640px){.header-content{flex-direction:column;align-items:flex-start}.session-info{width:100%;align-items:flex-start}}:root{--background: oklch(.973 .0133 286.1503);--foreground: oklch(.3015 .0572 282.4176);--card: oklch(1 0 0);--card-foreground: oklch(.3015 .0572 282.4176);--popover: oklch(1 0 0);--popover-foreground: oklch(.3015 .0572 282.4176);--primary: oklch(.596 .145 163.225);--primary-foreground: oklch(1 0 0);--secondary: oklch(.9174 .0435 292.6901);--secondary-foreground: oklch(.4143 .1039 288.1742);--muted: oklch(.958 .0133 286.1454);--muted-foreground: oklch(.5426 .0465 284.7435);--accent: oklch(.9221 .0373 262.141);--accent-foreground: oklch(.3015 .0572 282.4176);--destructive: oklch(.6861 .2061 14.9941);--destructive-foreground: oklch(1 0 0);--border: oklch(.9115 .0216 285.9625);--input: oklch(.9115 .0216 285.9625);--ring: oklch(.5417 .179 288.0332);--radius: .5rem;--shadow-sm: 0px 4px 10px 0px hsl(240 30% 25% / .12), 0px 1px 2px -1px hsl(240 30% 25% / .12);--shadow: 0px 4px 10px 0px hsl(240 30% 25% / .12), 0px 1px 2px -1px hsl(240 30% 25% / .12);--shadow-md: 0px 4px 10px 0px hsl(240 30% 25% / .12), 0px 2px 4px -1px hsl(240 30% 25% / .12);--shadow-lg: 0px 4px 10px 0px hsl(240 30% 25% / .12), 0px 4px 6px -1px hsl(240 30% 25% / .12);--shadow-xl: 0px 4px 10px 0px hsl(240 30% 25% / .12), 0px 8px 10px -1px hsl(240 30% 25% / .12);--shadow-2xl: 0px 4px 10px 0px hsl(240 30% 25% / .3)}.dark{--background: oklch(.1743 .0227 283.7998);--foreground: oklch(.9185 .0257 285.8834);--card: oklch(.2284 .0384 282.9324);--card-foreground: oklch(.9185 .0257 285.8834);--popover: oklch(.2284 .0384 282.9324);--popover-foreground: oklch(.9185 .0257 285.8834);--primary: oklch(.7162 .1597 290.3962);--primary-foreground: oklch(.1743 .0227 283.7998);--secondary: oklch(.3139 .0736 283.4591);--secondary-foreground: oklch(.8367 .0849 285.9111);--muted: oklch(.271 .0621 281.4377);--muted-foreground: oklch(.7166 .0462 285.1741);--accent: oklch(.3354 .0828 280.9705);--accent-foreground: oklch(.9185 .0257 285.8834);--destructive: oklch(.6861 .2061 14.9941);--destructive-foreground: oklch(1 0 0);--border: oklch(.3261 .0597 282.5832);--input: oklch(.3261 .0597 282.5832);--ring: oklch(.7162 .1597 290.3962)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--background);min-height:100vh;padding:20px;color:var(--foreground)}#root{width:100%;max-width:600px;margin:0 auto}.app-container{background:var(--card);border-radius:calc(var(--radius) * 2);box-shadow:var(--shadow-2xl);overflow:hidden;animation:slideUp .4s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.app-header{background:var(--primary);color:var(--primary-foreground);padding:32px 24px;text-align:center}.app-header h1{font-size:32px;font-weight:700;margin-bottom:8px;text-align:center}.subtitle{font-size:14px;opacity:.9;font-weight:400}.todo-input-wrapper{padding:24px;background:var(--muted);border-bottom:1px solid var(--border)}.todo-input{display:flex;gap:12px}input[type=text]{flex:1;padding:14px 16px;font-size:15px;border:2px solid var(--input);border-radius:calc(var(--radius) * 1.5);outline:none;transition:all .2s ease;background:var(--card);color:var(--foreground);font-family:inherit}input[type=text]:focus{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklch,var(--ring) 10%,transparent)}input[type=text]:disabled,input[type=text].loading{opacity:.6;cursor:not-allowed}button{padding:14px 24px;cursor:pointer;border:none;border-radius:calc(var(--radius) * 1.5);font-size:15px;font-weight:600;transition:all .2s ease;font-family:inherit;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px}button:disabled{opacity:.6;cursor:not-allowed}.todo-input button{background:var(--primary);color:var(--primary-foreground);min-width:100px}.todo-input button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg);opacity:.9}.todo-input button:active:not(:disabled){transform:translateY(0)}.button-loading{display:inline-flex;align-items:center;gap:8px}.spinner,.spinner-small{width:16px;height:16px;border:2px solid color-mix(in oklch,currentColor 30%,transparent);border-top-color:currentColor;border-radius:50%;animation:spin .8s linear infinite}.spinner-small{width:12px;height:12px;border-width:2px}@keyframes spin{to{transform:rotate(360deg)}}.todo-list-wrapper{padding:24px;min-height:200px}.empty-state{text-align:center;padding:60px 20px;color:var(--muted-foreground)}.empty-icon{font-size:64px;margin-bottom:16px;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.empty-text{font-size:18px;font-weight:600;margin-bottom:8px;color:var(--foreground)}.empty-hint{font-size:14px;color:var(--muted-foreground)}ul#todo-list{list-style:none;padding:0;margin:0}ul#todo-list li{display:flex;align-items:center;justify-content:space-between;padding:16px;background:var(--card);border:2px solid var(--border);border-radius:calc(var(--radius) * 1.5);margin-bottom:12px;transition:all .2s ease;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}ul#todo-list li:hover:not(.loading):not(.deleting){border-color:var(--ring);box-shadow:var(--shadow-md);transform:translateY(-2px)}ul#todo-list li.loading{opacity:.7;pointer-events:none}ul#todo-list li.deleting{opacity:.5;transform:scale(.98);animation:fadeOut .3s ease-out}@keyframes fadeOut{to{opacity:0;transform:scale(.95)}}ul#todo-list li.editing{border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklch,var(--ring) 10%,transparent)}.todo-content{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.checkbox-wrapper{position:relative;display:inline-block;cursor:pointer;flex-shrink:0}.checkbox-wrapper input[type=checkbox]{width:20px;height:20px;cursor:pointer;opacity:0;position:absolute}.checkmark{width:20px;height:20px;border:2px solid var(--border);border-radius:calc(var(--radius) * .75);background:var(--card);display:block;transition:all .2s ease;position:relative}.checkbox-wrapper input[type=checkbox]:checked~.checkmark{background:var(--primary);border-color:var(--primary)}.checkmark:after{content:"";position:absolute;display:none;left:6px;top:2px;width:5px;height:10px;border:solid var(--primary-foreground);border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-wrapper input[type=checkbox]:checked~.checkmark:after{display:block}.checkbox-wrapper input[type=checkbox]:disabled~.checkmark{opacity:.5;cursor:not-allowed}.todo-text{flex:1;font-size:15px;line-height:1.5;word-break:break-word;transition:all .2s ease}.todo-text.done{text-decoration:line-through;color:var(--muted-foreground);opacity:.7}li.editing .todo-content input[type=text]{flex:1;padding:8px 12px;font-size:15px;border:2px solid var(--ring);border-radius:var(--radius);outline:none;background:var(--card);color:var(--foreground);font-family:inherit}.todo-actions{display:flex;gap:8px;flex-shrink:0}.todo-actions button{padding:8px 16px;font-size:13px;font-weight:500;border-radius:var(--radius);transition:all .2s ease}button.edit-btn{background:var(--accent);color:var(--accent-foreground)}button.edit-btn:hover:not(:disabled){background:var(--secondary);transform:translateY(-1px)}button.save-btn{background:var(--primary);color:var(--primary-foreground)}button.save-btn:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}button.cancel-btn{background:var(--muted);color:var(--muted-foreground)}button.cancel-btn:hover:not(:disabled){background:var(--secondary);transform:translateY(-1px)}button.delete-btn{background:var(--destructive);color:var(--destructive-foreground)}button.delete-btn:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}.app-footer{padding:20px 24px;background:var(--muted);border-top:1px solid var(--border);text-align:center}.app-footer p{font-size:12px;color:var(--muted-foreground);margin:0}.app-footer strong{color:var(--foreground);font-weight:600}@media (max-width: 640px){body{padding:10px}.app-header{padding:24px 20px}.app-header h1{font-size:28px}.todo-input-wrapper,.todo-list-wrapper{padding:20px}.todo-actions{flex-direction:column;gap:6px}.todo-actions button{width:100%}}