*{box-sizing:border-box}html{min-height:100%}body{color:#0f172a;background:#eef6f3;min-height:100%;margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5}button,input,textarea{font-family:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline-offset:2px;outline:3px solid #2563eb47}.todo-page{justify-content:center;align-items:flex-start;min-height:100vh;padding:64px 20px;display:flex}.todo-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffe6;border:1px solid #e2e8f0e6;border-radius:8px;width:100%;max-width:720px;padding:32px;box-shadow:0 24px 60px #0f172a1f}.todo-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:28px;display:flex}.todo-header h1{letter-spacing:-.04em;color:#0f172a;margin:0;font-size:36px;font-weight:800}.todo-header p{color:#64748b;margin:8px 0 0;font-size:15px}.page-nav{flex-shrink:0;align-items:center;gap:12px;display:flex}.page-nav-tabs{background:#f1f5f9;border-radius:10px;gap:4px;padding:4px;display:flex}.page-nav-tab{color:#64748b;white-space:nowrap;border-radius:8px;padding:8px 16px;font-size:14px;font-weight:700;text-decoration:none}.page-nav-tab:hover{color:#334155}.page-nav-tab.active{color:#2563eb;background:#fff;box-shadow:0 1px 3px #0f172a1a}.page-nav-logout{color:#0f172a;white-space:nowrap;background:0 0;border:none;flex-shrink:0;padding:8px 4px;font-size:14px;font-weight:700}.page-nav-logout:hover{color:#b91c1c}.todo-form{grid-template-columns:1fr;gap:12px;margin-bottom:20px;display:grid}.todo-form input,.todo-form textarea{background:#fff;border:1px solid #cbd5e1;border-radius:8px;outline:none;width:100%;padding:14px 16px;font-size:15px;transition:all .2s}.todo-form textarea{resize:vertical;min-height:50px}.todo-form input:focus,.todo-form textarea:focus{border-color:#2563eb;box-shadow:0 0 0 4px #2563eb1f}.todo-form button{color:#fff;background:#2563eb;border:none;border-radius:8px;padding:14px 18px;font-size:15px;font-weight:700;transition:all .2s}.todo-form button:hover{background:#1d4ed8;transform:translateY(-1px)}.form-error{color:#b91c1c;flex-direction:column;gap:2px;margin-bottom:-4px;font-size:13px;font-weight:600;display:flex}.modal-backdrop{z-index:100;background:#0f172a8c;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{background:#fff;border-radius:12px;width:100%;max-width:480px;max-height:90vh;padding:24px;overflow-y:auto;box-shadow:0 24px 60px #0f172a40}.modal-header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;display:flex}.modal-header h2{color:#0f172a;margin:0;font-size:22px;font-weight:800}.modal-close{color:#334155;background:#f1f5f9;border:none;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;display:flex}.modal-close:hover{background:#e2e8f0}.todo-update-form{grid-template-columns:1fr;gap:12px;display:grid}.todo-update-form textarea{resize:vertical;background:#fff;border:1px solid #cbd5e1;border-radius:8px;outline:none;width:100%;min-height:72px;padding:14px 16px;font-size:15px;transition:all .2s}.todo-update-form textarea:focus{border-color:#2563eb;box-shadow:0 0 0 4px #2563eb1f}.checkbox-label{color:#334155;cursor:pointer;align-items:center;gap:8px;font-size:14px;font-weight:600;display:flex}.checkbox-label input{accent-color:#2563eb;width:16px;height:16px}.todo-update-form button[type=submit]{color:#fff;background:#2563eb;border:none;border-radius:8px;padding:14px 18px;font-size:15px;font-weight:700;transition:all .2s}.todo-update-form button[type=submit]:hover{background:#1d4ed8;transform:translateY(-1px)}.todo-storage-mode,.todo-status,.todo-error{margin:12px 0 0;font-size:13px}.todo-storage-mode{color:#475569}.todo-status{color:#2563eb}.todo-error{color:#b91c1c}.todo-summary{grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0;display:grid}.todo-summary-item{text-align:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;flex-direction:column;align-items:center;gap:4px;padding:16px 12px;display:flex}.todo-summary-item strong{color:#0f172a;font-size:24px;font-weight:800}.todo-summary-item span{color:#64748b;font-size:13px;font-weight:600}.profile-info{border-top:1px solid #e2e8f0;gap:0;margin:8px 0 20px;display:grid}.profile-info-row{border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;gap:12px;padding:16px 4px;display:flex}.profile-info-label{color:#64748b;font-size:14px;font-weight:600}.profile-info-value{color:#0f172a;font-weight:700}.profile-badge-verified,.profile-badge-unverified{border-radius:999px;align-items:center;padding:4px 12px;font-size:13px;font-weight:700;display:inline-flex}.profile-badge-verified{color:#15803d;background:#dcfce7}.profile-badge-unverified{color:#b91c1c;background:#fee2e2}.api-key-created-banner{background:#fefce8;border:1px solid #facc15;border-radius:8px;margin-bottom:20px;padding:16px}.api-key-created-banner p{color:#713f12;margin:0 0 10px;font-size:14px}.api-key-created-value{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.api-key-created-value code{word-break:break-all;background:#fff;border:1px solid #fde68a;border-radius:6px;flex:1;min-width:0;padding:8px 10px;font-size:13px}.api-key-created-value button{color:#fff;background:#ca8a04;border:none;border-radius:8px;flex-shrink:0;padding:10px 14px;font-weight:700}.api-key-created-value button:hover{background:#a16207}.api-key-list{gap:12px;margin:0;padding:0;list-style:none;display:grid}.api-key-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;justify-content:space-between;align-items:center;gap:12px;padding:14px;display:flex}.api-key-label{color:#0f172a;margin:0 0 4px;font-weight:700}.api-key-masked{color:#334155;background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:2px 8px;font-size:13px;display:inline-block}.api-key-date{color:#64748b;margin:6px 0 0;font-size:12px}.api-key-revoke{color:#b91c1c;background:#fee2e2;border:none;border-radius:8px;flex-shrink:0;padding:10px 14px;font-weight:700}.api-key-revoke:hover{background:#fecaca}.todo-filter{background:#f1f5f9;border-radius:10px;flex-wrap:wrap;gap:4px;margin-bottom:20px;padding:4px;display:inline-flex}.todo-filter button{color:#64748b;background:0 0;border:none;border-radius:8px;padding:8px 18px;font-size:14px;font-weight:700;transition:all .2s}.todo-filter button:hover{color:#334155}.todo-filter button.active{color:#2563eb;background:#fff;box-shadow:0 1px 3px #0f172a1a}.todo-list{gap:12px;margin:0;padding:0;list-style:none;display:grid}.todo-item{background:#fff;border:1px solid #e2e8f0;border-radius:8px;justify-content:space-between;align-items:flex-start;gap:16px;padding:16px;transition:all .2s;display:flex}.todo-item:hover{border-color:#93c5fd;transform:translateY(-1px);box-shadow:0 10px 30px #0f172a14}.todo-item label{flex:1;align-items:flex-start;gap:12px;min-width:0;display:flex}.todo-item input[type=checkbox]{accent-color:#2563eb;width:20px;height:20px;margin-top:2px}.todo-item-content{gap:6px;min-width:0;display:grid}.todo-item span{color:#0f172a;overflow-wrap:anywhere;white-space:pre-wrap;font-size:16px;font-weight:700}.todo-item span.completed{color:#94a3b8;text-decoration:line-through}.todo-item p{color:#64748b;overflow-wrap:anywhere;white-space:pre-wrap;margin:6px 0 0;font-size:14px;line-height:1.5}.todo-item-actions{flex-shrink:0;gap:8px;display:flex}.todo-item-edit,.todo-item-delete{border:none;border-radius:8px;padding:9px 14px;font-size:13px;font-weight:700;transition:all .2s}.todo-item-edit{color:#334155;background:#f1f5f9}.todo-item-edit:hover{background:#e2e8f0}.todo-item-delete{color:#b91c1c;background:#fee2e2}.todo-item-delete:hover{background:#fecaca}.empty-state{text-align:center;color:#64748b;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:8px;padding:40px 20px}.empty-state h3{color:#334155;margin:0 0 8px;font-size:20px}.empty-state p{margin:0;font-size:14px}.todo-card>button{color:#fff;background:#0f172a;border:none;border-radius:8px;width:100%;margin-top:20px;padding:13px 16px;font-weight:700;transition:all .2s}.todo-card>button:hover{background:#1e293b}.auth-page{justify-content:center;align-items:flex-start;min-height:100vh;padding:64px 20px;display:flex}.auth-card{background:#ffffffeb;border:1px solid #e2e8f0e6;border-radius:8px;width:100%;max-width:440px;padding:32px;box-shadow:0 24px 60px #0f172a1f}.auth-header h1{color:#0f172a;margin:0;font-size:32px}.auth-header p{color:#64748b;margin:8px 0 0;font-size:14px}.auth-form,.auth-field{gap:12px;display:grid}.auth-field input{background:#fff;border:1px solid #cbd5e1;border-radius:8px;outline:none;width:100%;padding:12px 14px;font-size:15px}.auth-form button{color:#fff;background:#2563eb;border:none;border-radius:8px;padding:13px 16px;font-weight:700}.auth-form button:disabled{cursor:not-allowed;opacity:.7}.auth-error{color:#b91c1c;margin:0;font-size:14px}.auth-switch a{color:#2563eb;font-weight:700}@media (width>=640px){.todo-form{grid-template-columns:1fr 1fr auto;align-items:center}}@media (width<=520px){.todo-card{padding:24px}.todo-header h1{font-size:30px}.todo-header{flex-direction:column}.page-nav{flex-wrap:wrap;width:100%}.page-nav-tabs{width:100%}.page-nav-tab{text-align:center;flex:1}.todo-summary{grid-template-columns:1fr}.todo-item{flex-direction:column}.todo-item-actions{width:100%}.todo-item-edit,.todo-item-delete{flex:1}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.auth-page{background:radial-gradient(circle at 0 0,#2563eb2e,#0000 34%),radial-gradient(circle at 100% 100%,#0ea5e929,#0000 30%),linear-gradient(135deg,#eff6ff,#f8fafc);justify-content:center;align-items:center;min-height:100vh;padding:48px 20px;display:flex}.auth-layout{grid-template-columns:1.1fr .9fr;align-items:stretch;gap:28px;width:100%;max-width:980px;display:grid}.auth-brand{color:#fff;background:linear-gradient(135deg,#2563eb,#0f172a);border-radius:24px;flex-direction:column;justify-content:center;padding:40px;display:flex;box-shadow:0 24px 60px #0f172a2e}.auth-badge{color:#dbeafe;background:#ffffff24;border-radius:999px;width:fit-content;margin:0 0 18px;padding:10px 12px;font-size:13px;font-weight:700}.auth-brand h1{letter-spacing:-.04em;margin:0;font-size:42px;line-height:1.05}.auth-brand p{color:#dbeafe;max-width:460px;margin:16px 0 0;font-size:15px;line-height:1.7}.auth-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffff0;border:1px solid #e2e8f0e6;border-radius:24px;padding:34px;box-shadow:0 24px 60px #0f172a1f}.auth-header{margin-bottom:26px}.auth-header h2{color:#0f172a;letter-spacing:-.03em;margin:0;font-size:32px}.auth-header p{color:#64748b;margin:8px 0 0;font-size:14px;line-height:1.6}.auth-form{gap:16px;display:grid}.auth-field{gap:8px;display:grid}.auth-field label{color:#334155;font-size:14px;font-weight:700}.auth-field input{color:#0f172a;background:#fff;border:1px solid #cbd5e1;border-radius:14px;outline:none;width:100%;padding:13px 15px;font-size:15px;transition:all .2s}.auth-field input::placeholder{color:#94a3b8}.auth-field input:focus{border-color:#2563eb;box-shadow:0 0 0 4px #2563eb1f}.auth-form button{color:#fff;background:#2563eb;border:none;border-radius:14px;margin-top:4px;padding:14px 16px;font-size:15px;font-weight:800;transition:all .2s}.auth-form button:hover{background:#1d4ed8;transform:translateY(-1px)}.auth-form button:disabled{cursor:not-allowed;opacity:.65;transform:none}.auth-error{color:#b91c1c;background:#fee2e2;border-radius:12px;margin:0;padding:12px 14px;font-size:14px;font-weight:600}.auth-success{color:#15803d;background:#dcfce7;border-radius:12px;margin:0;padding:12px 14px;font-size:14px;font-weight:600}.auth-form .auth-secondary-button{color:#334155;background:#e2e8f0;margin-top:-4px}.auth-form .auth-secondary-button:hover{background:#cbd5e1}.auth-switch{text-align:center;color:#64748b;margin:2px 0 0;font-size:14px}.auth-switch a{color:#2563eb;font-weight:800;text-decoration:none}.auth-switch a:hover{text-decoration:underline}.auth-forgot{text-align:right;margin:-6px 0 0;font-size:13px}.auth-forgot a{color:#2563eb;font-weight:700;text-decoration:none}.auth-forgot a:hover{text-decoration:underline}@media (width<=820px){.auth-layout{grid-template-columns:1fr}.auth-brand{padding:32px}.auth-brand h1{font-size:32px}}@media (width<=520px){.auth-page{align-items:flex-start;padding:28px 16px}.auth-card,.auth-brand{border-radius:20px;padding:24px}.auth-header h2,.auth-brand h1{font-size:28px}.auth-success{color:#15803d;background:#dcfce7;border-radius:12px;margin:0;padding:12px 14px;font-size:14px;font-weight:600}}