*{box-sizing:border-box}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#213547;background-color:#f9fafb;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}#root{min-height:100vh}[data-theme=dark]{color:#ffffffde;background-color:#242424}.search-bar{position:relative;flex:1;min-width:250px}.search-input{width:100%;padding:.875rem 1rem .875rem 3rem;font-size:1rem;border:2px solid #e5e7eb;border-radius:12px;outline:none;transition:all .3s ease;background-color:#fff;box-sizing:border-box}.search-input:focus{border-color:#646cff;box-shadow:0 0 0 3px #646cff1a}.search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:1.25rem;height:1.25rem;color:#9ca3af;pointer-events:none}[data-theme=dark] .search-input{background-color:#1e1e1e;border-color:#374151;color:#fff}[data-theme=dark] .search-input:focus{border-color:#646cff}.contact-card{display:flex;align-items:center;gap:1.5rem;padding:1.5rem;background-color:#fff;border:1px solid #e5e7eb;border-radius:12px;transition:all .3s ease;position:relative;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:default}.contact-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a;border-color:#646cff}.contact-avatar{width:64px;height:64px;border-radius:50%;border:3px solid #646cff;flex-shrink:0}.contact-info{flex:1;text-align:left;min-width:0}.contact-name{margin:0 0 .75rem;font-size:1.25rem;font-weight:600;color:#1f2937}.contact-details{display:flex;flex-direction:column;gap:.5rem}.contact-detail{display:flex;align-items:center;gap:.5rem;color:#6b7280;font-size:.875rem}.contact-icon{width:1rem;height:1rem;flex-shrink:0;color:#9ca3af}.contact-detail span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-actions{display:flex;gap:.5rem;margin-left:auto;flex-shrink:0}.action-btn{width:36px;height:36px;border-radius:8px;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;padding:0}.action-btn svg{width:18px;height:18px}.edit-btn{background-color:#eff6ff;color:#3b82f6}.edit-btn:hover{background-color:#dbeafe;transform:scale(1.1)}.delete-btn{background-color:#fef2f2;color:#ef4444}.delete-btn:hover{background-color:#fee2e2;transform:scale(1.1)}[data-theme=dark] .contact-card{background-color:#1e1e1e;border-color:#374151}[data-theme=dark] .contact-card:hover{box-shadow:0 4px 12px #0000004d}[data-theme=dark] .contact-name{color:#f9fafb}[data-theme=dark] .contact-detail{color:#d1d5db}[data-theme=dark] .edit-btn{background-color:#1e3a5f;color:#60a5fa}[data-theme=dark] .edit-btn:hover{background-color:#1e40af}[data-theme=dark] .delete-btn{background-color:#4c1d1d;color:#f87171}[data-theme=dark] .delete-btn:hover{background-color:#7f1d1d}@media(max-width:640px){.contact-card{flex-direction:column;text-align:center}.contact-info{text-align:center}.contact-details{align-items:center}}.contact-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1.5rem;margin-top:1rem}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;gap:1rem}.spinner{width:48px;height:48px;border:4px solid #e5e7eb;border-top-color:#646cff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-container p{color:#6b7280;font-size:1rem}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center}.empty-icon{width:80px;height:80px;color:#d1d5db;margin-bottom:1rem}.empty-state h3{margin:0 0 .5rem;color:#1f2937;font-size:1.5rem}.empty-state p{color:#6b7280;font-size:1rem;margin:0}[data-theme=dark] .spinner{border-color:#374151;border-top-color:#646cff}[data-theme=dark] .loading-container p{color:#9ca3af}[data-theme=dark] .empty-icon{color:#4b5563}[data-theme=dark] .empty-state h3{color:#f9fafb}[data-theme=dark] .empty-state p{color:#9ca3af}@media(max-width:768px){.contact-list{grid-template-columns:1fr}}.add-contact-form-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.add-contact-form-container{background-color:#fff;padding:2rem;border-radius:16px;width:100%;max-width:500px;box-shadow:0 20px 25px -5px #0000001a}.add-contact-form-container h2{margin:0 0 1.5rem;color:#1f2937;font-size:1.5rem}.add-contact-form{display:flex;flex-direction:column;gap:1.25rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-weight:500;color:#374151;font-size:.875rem}.form-group input{padding:.75rem;font-size:1rem;border:2px solid #e5e7eb;border-radius:8px;outline:none;transition:all .3s ease;font-family:inherit}.form-group input:focus{border-color:#646cff;box-shadow:0 0 0 3px #646cff1a}.form-group input.error{border-color:#ef4444}.error-message{color:#ef4444;font-size:.75rem;margin-top:-.25rem}.image-upload-container{position:relative}.file-input{display:none}.image-upload-label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:2rem;border:2px dashed #d1d5db;border-radius:8px;cursor:pointer;transition:all .3s ease;background-color:#f9fafb}.image-upload-label:hover{border-color:#646cff;background-color:#f3f4f6}.image-upload-label svg{width:48px;height:48px;color:#9ca3af}.image-upload-label span{font-size:.875rem;color:#6b7280;font-weight:500}.upload-hint{font-size:.75rem!important;color:#9ca3af!important;font-weight:400!important}.image-preview{position:relative;width:150px;height:150px;margin:0 auto;border-radius:50%;overflow:hidden;border:3px solid #646cff}.image-preview img{width:100%;height:100%;object-fit:cover}.remove-image-btn{position:absolute;top:0;right:0;width:32px;height:32px;background-color:#ef4444;border:2px solid white;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;padding:0}.remove-image-btn:hover{background-color:#dc2626;transform:scale(1.1)}.remove-image-btn svg{width:16px;height:16px;color:#fff}.form-actions{display:flex;gap:1rem;margin-top:.5rem}.btn-cancel,.btn-submit{flex:1;padding:.75rem 1.5rem;font-size:1rem;font-weight:500;border-radius:8px;border:none;cursor:pointer;transition:all .3s ease;font-family:inherit}.btn-cancel{background-color:#f3f4f6;color:#374151}.btn-cancel:hover{background-color:#e5e7eb}.btn-submit{background-color:#646cff;color:#fff}.btn-submit:hover{background-color:#535bf2}[data-theme=dark] .add-contact-form-container{background-color:#1e1e1e}[data-theme=dark] .add-contact-form-container h2{color:#f9fafb}[data-theme=dark] .form-group label{color:#d1d5db}[data-theme=dark] .form-group input{background-color:#2d2d2d;border-color:#374151;color:#fff}[data-theme=dark] .btn-cancel{background-color:#374151;color:#d1d5db}[data-theme=dark] .btn-cancel:hover{background-color:#4b5563}[data-theme=dark] .image-upload-label{background-color:#2d2d2d;border-color:#4b5563}[data-theme=dark] .image-upload-label:hover{background-color:#374151;border-color:#646cff}[data-theme=dark] .image-upload-label svg{color:#6b7280}[data-theme=dark] .image-upload-label span{color:#9ca3af}@media(max-width:640px){.add-contact-form-overlay{padding:.5rem}.add-contact-form-container{padding:1.5rem}.form-actions{flex-direction:column}}.delete-modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.delete-modal-container{background-color:#fff;padding:2rem;border-radius:16px;width:100%;max-width:400px;box-shadow:0 20px 25px -5px #0000001a;text-align:center}.delete-modal-icon{width:64px;height:64px;margin:0 auto 1.5rem;background-color:#fef2f2;border-radius:50%;display:flex;align-items:center;justify-content:center}.delete-modal-icon svg{width:36px;height:36px;color:#ef4444}.delete-modal-container h2{margin:0 0 1rem;color:#1f2937;font-size:1.5rem}.delete-modal-container p{margin:0 0 .75rem;color:#6b7280;font-size:1rem;line-height:1.5}.delete-modal-container strong{color:#1f2937;font-weight:600}.warning-text{font-size:.875rem!important;color:#ef4444!important;font-weight:500}.delete-modal-actions{display:flex;gap:1rem;margin-top:1.5rem}.delete-modal-actions .btn-cancel,.delete-modal-actions .btn-delete{flex:1;padding:.75rem 1.5rem;font-size:1rem;font-weight:500;border-radius:8px;border:none;cursor:pointer;transition:all .3s ease;font-family:inherit}.delete-modal-actions .btn-cancel{background-color:#f3f4f6;color:#374151}.delete-modal-actions .btn-cancel:hover{background-color:#e5e7eb}.delete-modal-actions .btn-delete{background-color:#ef4444;color:#fff}.delete-modal-actions .btn-delete:hover{background-color:#dc2626}[data-theme=dark] .delete-modal-container{background-color:#1e1e1e}[data-theme=dark] .delete-modal-icon{background-color:#4c1d1d}[data-theme=dark] .delete-modal-container h2{color:#f9fafb}[data-theme=dark] .delete-modal-container p{color:#9ca3af}[data-theme=dark] .delete-modal-container strong{color:#f9fafb}[data-theme=dark] .delete-modal-actions .btn-cancel{background-color:#374151;color:#d1d5db}[data-theme=dark] .delete-modal-actions .btn-cancel:hover{background-color:#4b5563}@media(max-width:640px){.delete-modal-actions{flex-direction:column}}.pagination-container{margin-top:3rem;padding-top:2rem;border-top:2px solid #e5e7eb}.pagination-info{text-align:center;margin-bottom:1.5rem}.pagination-info p{margin:0;color:#6b7280;font-size:.875rem}.pagination-info strong{color:#1f2937;font-weight:600}.pagination{display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap}.pagination-btn{display:flex;align-items:center;gap:.5rem;padding:.625rem 1rem;background-color:#fff;border:1px solid #e5e7eb;border-radius:8px;color:#374151;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .3s ease;font-family:inherit}.pagination-btn:hover:not(:disabled){background-color:#f9fafb;border-color:#646cff;color:#646cff}.pagination-btn:disabled{opacity:.5;cursor:not-allowed}.pagination-btn svg{width:16px;height:16px}.pagination-numbers{display:flex;gap:.5rem;align-items:center}.pagination-number{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background-color:#fff;border:1px solid #e5e7eb;border-radius:8px;color:#374151;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .3s ease;font-family:inherit}.pagination-number:hover{background-color:#f9fafb;border-color:#646cff;color:#646cff}.pagination-number.active{background-color:#646cff;border-color:#646cff;color:#fff}.pagination-dots{padding:0 .5rem;color:#9ca3af;font-weight:500}[data-theme=dark] .pagination-container{border-top-color:#374151}[data-theme=dark] .pagination-info p{color:#9ca3af}[data-theme=dark] .pagination-info strong{color:#f9fafb}[data-theme=dark] .pagination-btn{background-color:#1e1e1e;border-color:#374151;color:#d1d5db}[data-theme=dark] .pagination-btn:hover:not(:disabled){background-color:#2d2d2d;border-color:#646cff;color:#646cff}[data-theme=dark] .pagination-number{background-color:#1e1e1e;border-color:#374151;color:#d1d5db}[data-theme=dark] .pagination-number:hover{background-color:#2d2d2d;border-color:#646cff;color:#646cff}[data-theme=dark] .pagination-number.active{background-color:#646cff;border-color:#646cff;color:#fff}[data-theme=dark] .pagination-dots{color:#6b7280}@media(max-width:640px){.pagination{flex-direction:column;gap:1rem}.pagination-btn{width:100%;justify-content:center}.pagination-numbers{order:-1}}.theme-toggle{width:44px;height:44px;border-radius:50%;border:2px solid #e5e7eb;background-color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;padding:0;position:relative}.theme-toggle svg{width:20px;height:20px;color:#646cff;transition:all .3s ease}.theme-toggle:hover{transform:rotate(15deg) scale(1.1);border-color:#646cff;box-shadow:0 4px 12px #646cff4d}.theme-toggle:active{transform:rotate(15deg) scale(.95)}[data-theme=dark] .theme-toggle{background-color:#1e1e1e;border-color:#374151}[data-theme=dark] .theme-toggle svg{color:#fbbf24}[data-theme=dark] .theme-toggle:hover{border-color:#fbbf24;box-shadow:0 4px 12px #fbbf244d}@media(max-width:768px){.theme-toggle{width:40px;height:40px}.theme-toggle svg{width:18px;height:18px}}.sort-button-container{position:relative;display:inline-block}.sort-button{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background:linear-gradient(135deg,#646cff,#535bf2);border:none;border-radius:10px;color:#fff;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap;box-shadow:0 2px 8px #646cff4d}.sort-button:hover{transform:translateY(-2px);box-shadow:0 4px 16px #646cff66;background:linear-gradient(135deg,#535bf2,#646cff)}.sort-button:active{transform:translateY(0);box-shadow:0 2px 8px #646cff4d}.sort-icon{width:1.25rem;height:1.25rem;flex-shrink:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.1))}.chevron-icon{width:1.125rem;height:1.125rem;flex-shrink:0;transition:transform .3s ease;opacity:.9}.chevron-icon.open{transform:rotate(180deg)}.sort-dropdown{position:absolute;top:calc(100% + .75rem);left:0;min-width:220px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 40px #646cff26,0 2px 8px #0000001a;z-index:1000;overflow:hidden;animation:dropdownFadeIn .3s cubic-bezier(.16,1,.3,1)}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.sort-section{padding:.5rem}.sort-section-title{padding:.5rem .75rem;font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;background:#fff}.sort-option{width:100%;display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;background:#fff;border:none;border-radius:6px;color:#213547;font-size:.875rem;cursor:pointer;transition:all .15s ease;text-align:left;position:relative}.sort-option:hover{background:#f3f4f6}.sort-option.active{background:#e0e7ff;color:#646cff;font-weight:500}.sort-option svg:first-child{width:1.125rem;height:1.125rem;flex-shrink:0}.sort-option span{flex:1}.check-icon{width:1.125rem;height:1.125rem;flex-shrink:0;color:#646cff}.sort-divider{height:1px;background:#e5e7eb;margin:.25rem 0}[data-theme=dark] .sort-button{background:linear-gradient(135deg,#646cff,#535bf2);box-shadow:0 2px 8px #646cff66}[data-theme=dark] .sort-button:hover{box-shadow:0 4px 16px #646cff80}[data-theme=dark] .sort-dropdown{background:#1e1e1e;border-color:#374151;box-shadow:0 10px 40px #0006,0 2px 8px #646cff33}[data-theme=dark] .sort-section-title{color:#9ca3af;background:#1e1e1e}[data-theme=dark] .sort-option{background:#1e1e1e;color:#ffffffde}[data-theme=dark] .sort-option:hover{background:#2a2a2a}[data-theme=dark] .sort-option.active{background:#312e81;color:#818cf8}[data-theme=dark] .sort-divider{background:#374151}@media(max-width:640px){.sort-button{padding:.5rem .875rem;font-size:.8125rem}.sort-button span{display:none}.sort-icon{width:1rem;height:1rem}.sort-dropdown{right:0;left:auto;min-width:180px}}.app{max-width:1400px;margin:0 auto;padding:2rem}.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:2px solid #e5e7eb;flex-wrap:wrap;gap:1rem}.header-actions{display:flex;align-items:center;gap:1rem}.header-content h1{margin:0;font-size:2.5rem;background:linear-gradient(135deg,#646cff,#535bf2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{margin:.25rem 0 0;color:#6b7280;font-size:1rem}.add-contact-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background-color:#646cff;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #646cff4d}.add-contact-btn:hover{background-color:#535bf2;transform:translateY(-2px);box-shadow:0 4px 12px #646cff66}.add-contact-btn svg{width:1.25rem;height:1.25rem}.app-main{margin-top:2rem}.controls-container{display:flex;gap:1rem;margin-bottom:1.5rem;align-items:center;flex-wrap:wrap}.results-info{margin-bottom:1rem;color:#6b7280;font-size:.875rem}.results-info p{margin:0}[data-theme=dark] .app-header{border-bottom-color:#374151}[data-theme=dark] .subtitle,[data-theme=dark] .results-info{color:#9ca3af}@media(max-width:768px){.app{padding:1rem}.app-header{flex-direction:column;align-items:flex-start}.header-content h1{font-size:2rem}.header-actions{width:100%;flex-direction:row}.add-contact-btn{flex:1;justify-content:center}}