:root{--bg-page:#090d16;--bg-card:#0f172a;--border:#1e293b;--border-focus:#3b82f6;--text-primary:#f8fafc;--text-secondary:#cbd5e1;--text-muted:#64748b;--primary:#3b82f6;--primary-hover:#2563eb;--danger:#ef4444;--success:#22c55e;--success-bg:#22c55e1a;--success-border:#22c55e4d;--error-bg:#ef44441a;--error-border:#ef44444d;color:var(--text-primary);background-color:var(--bg-page);box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*,:before,:after{box-sizing:inherit}body{background-color:var(--bg-page);justify-content:center;align-items:center;min-height:100vh;margin:0;padding:0;display:flex}#app{width:100%;max-width:640px;margin:40px 20px}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;width:100%;padding:32px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}h1{color:var(--text-primary);letter-spacing:-.02em;margin:0 0 4px;font-size:24px;font-weight:700}.subtitle{color:var(--text-secondary);margin:0 0 28px;font-size:14px}.form-group{text-align:left;margin-bottom:20px}.form-label{color:var(--text-secondary);margin-bottom:6px;font-size:13px;font-weight:600;display:block}.form-control{border:1px solid var(--border);width:100%;color:var(--text-primary);background:#090d16;border-radius:6px;padding:10px 12px;font-size:14px;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control:focus{border-color:var(--border-focus);outline:none;box-shadow:0 0 0 3px #3b82f640}textarea.form-control{resize:vertical;min-height:100px}.todos-container{flex-direction:column;gap:8px;margin-bottom:8px;display:flex}.todo-item{border:1px solid var(--border);background:#090d16;border-radius:6px;align-items:center;gap:8px;padding:8px 12px;display:flex}.todo-item input[type=text]{color:var(--text-primary);background:0 0;border:none;outline:none;flex:1;font-size:14px}.btn-remove-todo{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:2px;display:flex}.btn-remove-todo:hover{color:var(--danger)}.btn-add-todo{color:var(--text-secondary);cursor:pointer;background:#0f172a;border:1px dashed #334155;border-radius:6px;justify-content:center;align-items:center;gap:6px;width:100%;padding:8px 12px;font-size:13px;font-weight:500;display:inline-flex}.btn-add-todo:hover{color:var(--text-primary);background:#1e293b;border-color:#475569}.importance-header{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.importance-badge{color:var(--text-secondary);font-size:13px;font-weight:600}.slider-wrapper{align-items:center;gap:12px;display:flex}.slider-input{appearance:none;background:#1e293b;border-radius:3px;outline:none;width:100%;height:6px}.slider-input::-webkit-slider-thumb{appearance:none;background:var(--primary);cursor:pointer;border:2px solid #0f172a;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0000004d}.importance-number-input{text-align:center;width:64px}.upload-zone{text-align:center;cursor:pointer;background:#090d16;border:1px dashed #334155;border-radius:8px;flex-direction:column;align-items:center;gap:8px;padding:24px 16px;display:flex}.upload-zone:hover{background:#1e293b;border-color:#475569}.upload-icon{width:32px;height:32px;color:var(--text-secondary)}.upload-zone-text{color:var(--text-secondary);font-size:13px}.file-list{flex-direction:column;gap:6px;margin-top:12px;display:flex}.file-item{border:1px solid var(--border);background:#0f172a;border-radius:6px;justify-content:space-between;align-items:center;padding:6px 10px;font-size:13px;display:flex}.file-info{text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:6px;display:flex;overflow:hidden}.file-name{text-overflow:ellipsis;overflow:hidden}.file-size{color:var(--text-muted);font-size:11px}.btn-remove-file{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:2px;display:flex}.btn-remove-file:hover{color:var(--danger)}.size-progress-container{width:100%;margin-top:10px}.size-progress-text{color:var(--text-secondary);justify-content:space-between;margin-bottom:4px;font-size:11px;display:flex}.size-progress-bar{background:#1e293b;border-radius:2px;width:100%;height:4px;overflow:hidden}.size-progress-fill{background:var(--primary);height:100%}.size-progress-fill.overlimit{background:var(--danger)}.password-wrapper{position:relative}.btn-toggle-password{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.btn-submit{background:var(--primary);color:#fff;cursor:pointer;border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;gap:8px;width:100%;margin-top:24px;padding:12px;font-size:14px;font-weight:600;transition:background-color .15s ease-in-out;display:flex}.btn-submit:hover:not(:disabled){background-color:var(--primary-hover)}.btn-submit:disabled{color:#93c5fd;cursor:not-allowed;background-color:#1e3a8a}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.alert-box{background:var(--error-bg);border:1px solid var(--error-border);color:#fca5a5;border-radius:6px;align-items:flex-start;gap:8px;margin-bottom:18px;padding:10px 12px;font-size:13px;display:flex}.alert-box svg{flex-shrink:0;width:16px;height:16px;margin-top:1px}.inline-status{text-align:center;border-radius:8px;margin-bottom:24px;padding:24px}.inline-status.compressing,.inline-status.submitting{border:1px solid var(--border);background:#0f172a}.inline-status.success{background:var(--success-bg);border:1px solid var(--success-border);color:#86efac}.inline-status.error{background:var(--error-bg);border:1px solid var(--error-border);color:#fca5a5}.status-title{margin-bottom:6px;font-size:16px;font-weight:700}.status-message{margin-bottom:16px;font-size:13px;line-height:1.4}.btn-status-action{color:var(--text-primary);cursor:pointer;background:#1e293b;border:1px solid #334155;border-radius:6px;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:600;text-decoration:none;display:inline-flex}.btn-status-action:hover{background:#334155}.btn-status-action-primary{background:var(--primary);color:#fff;border-color:#0000}.btn-status-action-primary:hover{background:var(--primary-hover)}