.toast-container{z-index:9999;pointer-events:none;flex-direction:column;gap:.75rem;min-width:280px;max-width:380px;display:flex;position:fixed}.toast-container-top-right{top:1.25rem;right:1.25rem}.toast-container-top-left{top:1.25rem;left:1.25rem}.toast-container-top-center{top:1.25rem;left:50%;transform:translate(-50%)}.toast-container-bottom-right{bottom:1.25rem;right:1.25rem}.toast-container-bottom-left{bottom:1.25rem;left:1.25rem}.toast-container-bottom-center{bottom:1.25rem;left:50%;transform:translate(-50%)}.toast{pointer-events:auto;background:#fff;border-radius:12px;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);position:relative;overflow:hidden;box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #00000005}.toast-enter{animation:.3s forwards slide-in}.toast-exit{animation:.3s forwards slide-out}@keyframes slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.toast-container-top-left .toast-enter{animation:.3s forwards slide-in-left}.toast-container-bottom-right .toast-enter{animation:.3s forwards slide-in-right}.toast-container-bottom-left .toast-enter{animation:.3s forwards slide-in-left}.toast-container-top-center .toast-enter,.toast-container-bottom-center .toast-enter{animation:.3s forwards slide-in-down}@keyframes slide-in-left{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes slide-in-right{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slide-in-down{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}.toast-content{align-items:center;gap:.75rem;padding:1rem;display:flex}.toast-icon{flex-shrink:0;font-size:1.25rem}.toast-message{color:#1a202c;word-break:normal;overflow-wrap:anywhere;flex:1;font-size:.875rem;line-height:1.4}.toast-close{cursor:pointer;color:#718096;background:0 0;border:none;flex-shrink:0;padding:.25rem;font-size:1rem;transition:color .2s}.toast-close:hover{color:#2d3748}.toast-close:focus-visible{outline-offset:2px;border-radius:4px;outline:2px solid}.toast-progress{transform-origin:0;background:#0000001a;width:100%;height:3px}@media (prefers-reduced-motion:reduce){.toast-progress{transition:none}}.toast-success .toast-progress{background:#48bb78}.toast-error .toast-progress{background:#f56565}.toast-warning .toast-progress{background:#ed8936}.toast-info .toast-progress{background:#4299e1}.toast-success{border-left:4px solid #48bb78}.toast-error{border-left:4px solid #f56565}.toast-warning{border-left:4px solid #ed8936}.toast-info{border-left:4px solid #4299e1}@media (width<=640px){.toast-container{min-width:auto;max-width:calc(100% - 2rem);left:1rem;right:1rem}.toast-container-top-center,.toast-container-bottom-center{left:1rem;right:1rem;transform:none}.toast-container-top-center{top:1rem}.toast-container-bottom-center{bottom:1rem}}@media (prefers-reduced-motion:reduce){.toast-enter,.toast-exit{animation:none}}.sortable-container{width:100%;position:relative}.sortable-list{flex-direction:column;gap:.75rem;display:flex}.draggable-item{-webkit-user-select:none;user-select:none;touch-action:none;background:#fff;border-radius:12px;align-items:center;gap:1rem;padding:1rem;transition:all .2s;display:flex;box-shadow:0 1px 3px #0000001a}.draggable-item.dragging{opacity:.5;box-shadow:0 10px 15px -3px #0000001a}.draggable-item:hover:not(.dragging){transform:translate(4px);box-shadow:0 4px 6px -1px #0000001a}.drag-handle{cursor:grab;color:#a0aec0;background:#fff;border:none;flex-shrink:0;justify-content:center;align-items:center;transition:color .2s;display:flex}.drag-handle:hover{color:#4a5568}.drag-icon{width:20px;height:20px}.drag-content{flex:1}.drag-index{color:#a0aec0;text-align:center;background:#f7fafc;border-radius:20px;flex-shrink:0;min-width:32px;padding:.25rem .5rem;font-size:.875rem;font-weight:600}.drag-overlay{cursor:grabbing;opacity:.95;background:#fff;border-radius:12px;padding:1rem;transform:rotate(2deg)scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.drag-overlay .draggable-item{box-shadow:none;background:0 0}.saving-indicator{z-index:1000;background:#fff;border-radius:12px;align-items:center;gap:.75rem;padding:.75rem 1rem;animation:.3s slide-in-up;display:flex;position:fixed;bottom:1rem;right:1rem;box-shadow:0 10px 15px -3px #0000001a}.saving-spinner{border:2px solid #e2e8f0;border-top-color:#667eea;border-radius:50%;width:20px;height:20px;animation:.6s linear infinite spin}@keyframes slide-in-up{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@media (width<=768px){.draggable-item{padding:.75rem}.drag-icon{width:16px;height:16px}.drag-index{min-width:28px;padding:.125rem .375rem;font-size:.75rem}}@media (hover:none) and (pointer:coarse){.draggable-item{cursor:default}.drag-handle{cursor:default;margin:-.5rem;padding:.5rem}.draggable-item:hover{transform:none}}@media (prefers-reduced-motion:reduce){.draggable-item,.drag-overlay,.saving-indicator{transition:none;animation:none}}.draggable-item:focus-visible,.drag-handle:focus-visible{outline-offset:2px;outline:2px solid #667eea}*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.app{max-width:900px;margin:0 auto;padding:2rem 1rem}header{text-align:center;color:#fff;margin-bottom:2rem}header h1{text-shadow:2px 2px 4px #0000001a;margin-bottom:.5rem;font-size:2.5rem}header p{opacity:.95;font-size:1rem}.dashboard-content{flex-direction:column;gap:2rem;display:flex}.dragdrop-demo{background:#fff;border-radius:12px;margin:1rem 0;padding:1.5rem;box-shadow:0 1px 3px #0000001a}.dragdrop-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.dragdrop-header h3{color:#1a202c;margin:0}.dragdrop-controls{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}.reset-btn{cursor:pointer;background:#e2e8f0;border:none;border-radius:8px;padding:.5rem 1rem;font-weight:500;transition:all .2s}.reset-btn:hover{background:#cbd5e0;transform:translateY(-1px)}.dragdrop-instructions{color:#4a5568;align-items:center;gap:.25rem;font-size:.875rem;display:flex}.drag-icon-small{color:#a0aec0}.task-item{justify-content:space-between;align-items:center;gap:1rem;display:flex}.task-info{flex:1}.task-info h4{color:#1a202c;margin:0 0 .25rem;font-size:1rem}.task-info p{color:#4a5568;margin:0;font-size:.875rem}.task-priority{text-transform:uppercase;border-radius:20px;padding:.25rem .75rem;font-size:.75rem;font-weight:600}.priority-high{color:#c53030;background:#fed7d7}.priority-medium{color:#c05621;background:#feebc8}.priority-low{color:#276749;background:#c6f6d5}.dragdrop-footer{border-top:1px solid #e2e8f0;margin-top:1.5rem;padding-top:1rem}.dragdrop-note{color:#48bb78;margin-bottom:.5rem;font-size:.875rem}.dragdrop-tips{color:#4a5568;font-size:.875rem}.dragdrop-tips ul{margin:.5rem 0 0 1.5rem}.dragdrop-tips li{margin:.25rem 0}.dragdrop-loading{text-align:center;background:#fff;border-radius:12px;padding:2rem}.dragdrop-loading .spinner{border:3px solid #e2e8f0;border-top-color:#667eea;border-radius:50%;width:32px;height:32px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.dragdrop-demo-section{background:#f7fafc;border-radius:12px;margin-bottom:1.5rem;padding:1.5rem}.dragdrop-demo-section h3{color:#1a202c;margin-top:0;margin-bottom:.5rem}.dragdrop-demo-description{color:#4a5568;margin-bottom:1rem;font-size:.875rem;line-height:1.5}