:root{--color-background:#f5f5f7;--color-card:#fff;--color-text-primary:#1d1d1f;--color-text-secondary:#86868b;--color-tertiary:#c7c7cc;--color-separator:#e5e5ea;--color-error:#ff3b30;--color-success:#34c759;--label-a:#34c759;--label-b:#007aff;--label-c:#8e8e93;--shadow-card:0 2px 8px #0000000a, 0 1px 2px #0000000f;--shadow-floating:0 8px 24px #00000014, 0 4px 8px #0000000a;--radius-sm:6px;--radius-md:12px;--radius-lg:16px;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;--transition-base:.2s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--color-background);color:var(--color-text-primary);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;font-weight:400;line-height:1.4}#root{flex-direction:column;min-height:100vh;display:flex}.container{max-width:600px;padding:var(--spacing-md);width:100%;margin:0 auto}.card{background:var(--color-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--spacing-md)}.button{background:var(--color-card);border-radius:var(--radius-md);padding:10px var(--spacing-md);font-family:var(--font-family);cursor:pointer;transition:opacity var(--transition-base);color:var(--color-text-primary);border:none;font-size:17px;font-weight:400}.button:active{opacity:.5}.button-primary{background:var(--label-b);color:#fff;font-weight:500}.button-primary:active{opacity:.7}.input{width:100%;padding:12px var(--spacing-md);font-size:17px;font-family:var(--font-family);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text-primary);transition:all var(--transition-base);border:none}.input::placeholder{color:var(--color-text-secondary)}.input:focus{background:#ebebf0;outline:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.task-form{gap:var(--spacing-sm);align-items:stretch;display:flex}.form-group{flex:1;margin:0}.task-input{width:100%;padding:12px var(--spacing-md);font-size:17px;font-family:var(--font-family);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text-primary);transition:all var(--transition-base);border:none}.task-input::placeholder{color:var(--color-text-secondary)}.task-input:focus{background:#ebebf0;outline:none}.form-actions{align-items:center;gap:var(--spacing-sm);display:flex}.label-selector{gap:var(--spacing-xs);display:flex}.label-button{min-width:32px;height:44px;padding:0 var(--spacing-sm);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);background:var(--color-background);color:var(--color-text-secondary);border:none;font-size:13px;font-weight:600}.label-button.selected{color:#fff;box-shadow:0 2px 8px #0000001a}.label-button.label-a.selected{background:var(--label-a)}.label-button.label-b.selected{background:var(--label-b)}.label-button.label-c.selected{background:var(--label-c)}.label-button:active:not(.selected){opacity:.6}.submit-button{height:44px;padding:0 var(--spacing-lg);background:var(--label-b);color:#fff;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;border:none;font-size:17px;font-weight:600;box-shadow:0 2px 8px #007aff4d}.submit-button:active{opacity:.8;transform:scale(.98)}.submit-button:disabled{opacity:.3;cursor:not-allowed;transform:none}@media (width<=480px){.task-form{flex-direction:column}.form-actions{justify-content:space-between}.label-selector{flex:1;justify-content:center}.submit-button{flex:none}}.task-card{background:var(--color-card);border-radius:var(--radius-lg);padding:var(--spacing-md);margin-bottom:var(--spacing-sm);cursor:grab;-webkit-user-select:none;user-select:none;box-shadow:var(--shadow-card);transition:all var(--transition-base);position:relative}.task-card:before{content:"";left:0;top:var(--spacing-md);bottom:var(--spacing-md);border-radius:2px 0 0 2px;width:3px;position:absolute}.task-card.label-a:before{background:var(--label-a)}.task-card.label-b:before{background:var(--label-b)}.task-card.label-c:before{background:var(--label-c)}.task-card:active{cursor:grabbing;transform:scale(.98)}.task-card .task-content{justify-content:space-between;align-items:flex-start;gap:var(--spacing-md);display:flex}.task-card .task-main{min-width:0;padding-left:var(--spacing-sm);flex:1}.task-card .task-title{color:var(--color-text-primary);margin-bottom:var(--spacing-xs);font-size:17px;font-weight:500;line-height:1.4}.task-card .task-meta{align-items:center;gap:var(--spacing-sm);display:flex}.task-card .task-label{border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;font-size:11px;font-weight:600}.task-card .task-label.label-a{color:var(--label-a);background:#34c75926}.task-card .task-label.label-b{color:var(--label-b);background:#007aff26}.task-card .task-label.label-c{color:var(--label-c);background:#8e8e9326}.task-card .task-description{color:var(--color-text-secondary);font-size:13px}.task-card .delete-button{width:32px;height:32px;color:var(--color-text-secondary);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-base);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.task-card .delete-button:active{color:var(--color-error);background:#ff3b301a}.task-card .delete-button svg{stroke-width:2px;width:18px;height:18px}.task-card .swipe-hint{margin-top:var(--spacing-sm);padding:var(--spacing-xs);text-align:center;border-radius:var(--radius-sm);font-size:12px;font-weight:500}.task-card .swipe-hint.hint-up{color:var(--label-a);background:#34c7591a}.task-card .swipe-hint.hint-down{color:var(--label-c);background:#8e8e931a}.task-list .task-card:last-child{margin-bottom:0}.empty-state{text-align:center;padding:var(--spacing-xl) var(--spacing-md)}.empty-state .empty-icon{margin-bottom:var(--spacing-md);opacity:.4;font-size:56px}.empty-state .empty-title{color:var(--color-text-primary);margin-bottom:var(--spacing-xs);font-size:17px;font-weight:500}.empty-state .empty-description{color:var(--color-text-secondary);font-size:15px}.task-filter{gap:var(--spacing-sm);margin-bottom:var(--spacing-md);-webkit-overflow-scrolling:touch;scrollbar-width:none;display:flex;overflow-x:auto}.task-filter::-webkit-scrollbar{display:none}.task-filter .filter-button{padding:8px var(--spacing-md);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;background:var(--color-card);color:var(--color-text-secondary);border:none;border-radius:20px;flex-shrink:0;font-size:15px;font-weight:500;box-shadow:0 1px 3px #0000000a}.task-filter .filter-button.active{color:#fff;box-shadow:0 2px 6px #0000001a}.task-filter .filter-button.filter-all.active{background:var(--color-text-primary)}.task-filter .filter-button.filter-a.active{background:var(--label-a)}.task-filter .filter-button.filter-b.active{background:var(--label-b)}.task-filter .filter-button.filter-c.active{background:var(--label-c)}.task-filter .filter-button .filter-label{margin-right:4px}.task-filter .filter-button .filter-count{opacity:.7;font-size:13px}.task-filter .filter-button:active{transform:scale(.97)}.api-key-manager{background:var(--color-card);border-radius:var(--radius-lg);padding:var(--spacing-md);margin-bottom:var(--spacing-md);box-shadow:var(--shadow-card)}.api-key-manager .header{margin-bottom:var(--spacing-md);justify-content:space-between;align-items:center;display:flex}.api-key-manager .header h3{margin:0;font-size:17px;font-weight:600}.api-key-manager .header .logout-button{color:var(--color-error);cursor:pointer;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);background:0 0;border:none;font-size:13px}.api-key-manager .header .logout-button:active{opacity:.5}.api-key-manager .current-key{padding:var(--spacing-sm) var(--spacing-md);background:var(--color-background);border-radius:var(--radius-md);margin-bottom:var(--spacing-md);font-size:13px}.api-key-manager .current-key .label{color:var(--color-text-secondary);margin-right:var(--spacing-sm)}.api-key-manager .current-key .key-text{color:var(--color-text-primary);font-family:monospace}.api-key-manager .auth-required{text-align:center;padding:var(--spacing-xl) var(--spacing-md)}.api-key-manager .auth-required .icon{margin-bottom:var(--spacing-md);font-size:48px}.api-key-manager .auth-required h3{margin-bottom:var(--spacing-xs);font-size:17px;font-weight:600}.api-key-manager .auth-required p{color:var(--color-text-secondary);margin-bottom:var(--spacing-md);font-size:15px}.api-key-manager .auth-required .auth-form{gap:var(--spacing-sm);display:flex}.api-key-manager .auth-required .auth-form .key-input{padding:10px var(--spacing-md);border:1px solid var(--color-separator);border-radius:var(--radius-md);background:var(--color-card);flex:1;font-size:15px}.api-key-manager .auth-required .auth-form .key-input:focus{border-color:var(--label-b);outline:none}.api-key-manager .auth-required .auth-form .submit-button{padding:10px var(--spacing-md);background:var(--label-b);color:#fff;border-radius:var(--radius-md);cursor:pointer;border:none;font-size:15px;font-weight:500}.api-key-manager .auth-required .auth-form .submit-button:active{opacity:.7}.api-key-manager .loading{text-align:center;padding:var(--spacing-lg);color:var(--color-text-secondary);font-size:15px}.api-key-manager .keys-list{margin-bottom:var(--spacing-md)}.api-key-manager .keys-list .empty{text-align:center;padding:var(--spacing-lg) var(--spacing-md);color:var(--color-text-secondary)}.api-key-manager .keys-list .empty p{margin-bottom:var(--spacing-md);font-size:15px}.api-key-manager .keys-list .empty .create-button{padding:8px var(--spacing-md);background:var(--label-b);color:#fff;border-radius:var(--radius-md);cursor:pointer;border:none;font-size:15px;font-weight:500}.api-key-manager .keys-list .key-item{padding:var(--spacing-sm) var(--spacing-md);background:var(--color-background);border-radius:var(--radius-md);margin-bottom:var(--spacing-sm);justify-content:space-between;align-items:center;font-size:13px;display:flex}.api-key-manager .keys-list .key-item .key-info{flex:1;min-width:0}.api-key-manager .keys-list .key-item .key-info .key-name{margin-bottom:2px;font-weight:600}.api-key-manager .keys-list .key-item .key-info .key-text{color:var(--color-text-secondary);word-break:break-all;margin-bottom:2px;font-family:monospace;font-size:12px}.api-key-manager .keys-list .key-item .key-info .key-meta{color:var(--color-tertiary);font-size:11px}.api-key-manager .keys-list .key-item .key-actions{gap:var(--spacing-xs);margin-left:var(--spacing-md);display:flex}.api-key-manager .keys-list .key-item .key-actions button{padding:6px var(--spacing-sm);border-radius:var(--radius-sm);cursor:pointer;border:none;font-size:12px}.api-key-manager .keys-list .key-item .key-actions button.set-current-button{background:var(--color-card);color:var(--label-b)}.api-key-manager .keys-list .key-item .key-actions button.set-current-button:active{opacity:.5}.api-key-manager .keys-list .key-item .key-actions button.delete-button{color:var(--color-error);background:#ff3b301a}.api-key-manager .keys-list .key-item .key-actions button.delete-button:active{background:#ff3b3033}.api-key-manager .create-button{background:var(--label-b);color:#fff;border-radius:var(--radius-md);cursor:pointer;border:none;width:100%;padding:12px;font-size:15px;font-weight:500}.api-key-manager .create-button:active{opacity:.7}.api-key-manager .create-form-overlay{z-index:1000;padding:var(--spacing-md);background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.api-key-manager .create-form-overlay .create-form{background:var(--color-card);border-radius:var(--radius-lg);padding:var(--spacing-md);width:100%;max-width:400px;box-shadow:var(--shadow-floating)}.api-key-manager .create-form-overlay .create-form h4{margin-bottom:var(--spacing-md);font-size:17px;font-weight:600}.api-key-manager .create-form-overlay .create-form .name-input{width:100%;padding:10px var(--spacing-md);border:1px solid var(--color-separator);border-radius:var(--radius-md);background:var(--color-background);margin-bottom:var(--spacing-md);font-size:15px}.api-key-manager .create-form-overlay .create-form .name-input:focus{border-color:var(--label-b);outline:none}.api-key-manager .create-form-overlay .create-form .form-actions{gap:var(--spacing-sm);display:flex}.api-key-manager .create-form-overlay .create-form .form-actions button{border-radius:var(--radius-md);cursor:pointer;border:none;flex:1;padding:10px;font-size:15px;font-weight:500}.api-key-manager .create-form-overlay .create-form .form-actions button.cancel-button{background:var(--color-background);color:var(--color-text-primary)}.api-key-manager .create-form-overlay .create-form .form-actions button.submit-button{background:var(--label-b);color:#fff}.api-key-manager .create-form-overlay .create-form .form-actions button.submit-button:disabled{opacity:.3;cursor:not-allowed}.api-key-manager .create-form-overlay .create-form .form-actions button:active:not(:disabled){opacity:.7}.app{flex-direction:column;min-height:100vh;animation:.3s fadeIn;display:flex}.content{padding:var(--spacing-md);flex:1;width:100%;max-width:600px;margin:0 auto;padding-bottom:120px}.form-container{padding:var(--spacing-md);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--color-separator);z-index:100;background:#ffffffe6;position:fixed;bottom:0;left:0;right:0}@media (width>=600px){.form-container .task-form{max-width:600px;margin:0 auto}}.error-banner{margin:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);border-left:3px solid var(--color-error);border-radius:var(--radius-sm);background:#ff3b301a;margin-bottom:0}.error-banner p{color:var(--color-error);margin:0;font-size:15px;font-weight:500}.loading-container{justify-content:center;align-items:center;min-height:100vh;display:flex}.loading-container .spinner{border:2px solid var(--color-separator);border-top-color:var(--label-b);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}.loading-container .text{margin-left:var(--spacing-md);color:var(--color-text-secondary);font-size:17px}@keyframes spin{to{transform:rotate(360deg)}}