@charset "UTF-8";*{padding:0;margin:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background-color:var(--gray-200)}:root{--primary: #2563eb;--primary-light: #60a5fa;--primary-dark: #1d4ed8;--secondary: #64748b;--secondary-light: #94a3b8;--secondary-dark: #475569;--accent: #d946ef;--accent-light: #e879f9;--accent-dark: #c026d3;--white: #ffffff;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-500: #6b7280;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827;--black: #000000;--success: #10b981;--warning: #f59e0b;--error: #ef4444;--error-dark: #dc2626;--background: var(--white);--surface: var(--gray-50);--border: var(--gray-200);--text: var(--gray-900);--text-muted: var(--gray-500);--shadow: 0 1px 3px 0 rgb(0 0 0 / .1);--radius: .5rem}.not-found-page{min-height:100vh;display:flex;flex-direction:column}.not-found-container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin-top:5rem;flex:1;padding:2rem}.circle-container{width:min(50vmin,400px);height:min(50vmin,400px);border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 10px 40px #dc354533;transition:transform .3s ease,box-shadow .3s ease}.circle-container:hover{transform:scale(1.05);box-shadow:0 15px 50px #dc35454d}.circle-container img{max-width:70%;max-height:70%;-o-object-fit:contain;object-fit:contain;border-radius:50%}@media (max-width: 768px){.circle-container{width:60vmin;height:60vmin}.not-found-container{margin-top:3rem}}.contacts{min-height:100vh;background-color:var(--gray-200)}.contacts-body{width:70%;max-width:1200px;margin:0 auto;padding:0 2rem 2rem}.contacts-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 2rem;min-height:400px}.contacts-empty-state .contacts-empty-icon{margin-bottom:1.5rem;color:var(--gray-400);opacity:.7;animation:fadeInUp .6s ease-out}.contacts-empty-state .contacts-empty-icon svg{width:64px;height:64px}.contacts-empty-state h3{font-size:1.5rem;font-weight:600;color:var(--text);margin:0 0 .5rem;animation:fadeInUp .6s ease-out .1s both}.contacts-empty-state p{font-size:1rem;color:var(--text-muted);margin:0 0 2rem;max-width:400px;line-height:1.5;animation:fadeInUp .6s ease-out .2s both}.contacts-empty-state .contacts-empty-button{background:var(--primary);color:#fff;border:none;border-radius:var(--radius);padding:.875rem 1.5rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #007aff33;animation:fadeInUp .6s ease-out .3s both}.contacts-empty-state .contacts-empty-button:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 6px 20px #007aff4d}.contacts-empty-state .contacts-empty-button:active{transform:translateY(0);box-shadow:0 2px 8px #007aff33}.contacts-letter-group{margin-bottom:1.5rem}.contacts-letter-divider{position:relative;margin:1.5rem 0;display:flex;align-items:center;color:var(--text-muted);font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.contacts-letter-divider:before,.contacts-letter-divider:after{content:"";flex:1;height:1px;background:var(--border)}.contacts-letter-divider span{position:relative;z-index:1;color:var(--primary);font-size:.75rem;background:var(--gray-200);border-radius:1rem;padding:.25rem .75rem;border:1px solid var(--border)}.header-btn{display:flex;align-items:center;gap:10px;transition:all .3s ease}.header-btn input{width:0;opacity:0;transition:all .3s ease;padding:0;border:none;background:transparent;color:#fff;font-size:16px;outline:none;border-bottom:1px solid transparent}.header-btn input::-moz-placeholder{color:#ffffffb3}.header-btn input::placeholder{color:#ffffffb3}.header-btn.searching input{width:200px;opacity:1;padding:.3rem;border:1px solid var(--primary-light);border-radius:15px;color:var(--gray-500);font-weight:600}.header-btn.searching input:focus{padding:1rem;width:200%;border-radius:30px}.header-btn.searching input::-moz-placeholder{color:var(--gray-400);opacity:1;font-weight:400}.header-btn.searching input::placeholder{color:var(--gray-400);opacity:1;font-weight:400}.header-btn button{background:none;border:none;padding:5px;transition:transform .2s ease}.header-btn button:hover{cursor:pointer;transform:scale(1.1)}.header-btn button img{display:block}.header-btn .logout-text-btn{background:none;border:none;color:var(--primary);font-weight:600;padding:.5rem 1rem;border-radius:8px;transition:all .2s ease;cursor:pointer}.header-btn .logout-text-btn:hover{background-color:var(--primary-light);color:#fff}.header-btn .logout-text-btn:active{transform:scale(.95)}@keyframes searchExpand{0%{width:0;opacity:0;margin-right:-10px}to{width:200px;opacity:1;margin-right:0}}@keyframes searchCollapse{0%{width:200px;opacity:1;margin-right:0}to{width:0;opacity:0;margin-right:-10px}}@keyframes iconRotate{0%{transform:rotate(0)}to{transform:rotate(90deg)}}.contacts-header-btn.searching-active input{animation:searchExpand .3s ease-out forwards;display:block!important}.contacts-header-btn.searching-active button:first-child img{animation:iconRotate .3s ease forwards}.contacts-header-btn.searching-inactive input{animation:searchCollapse .25s ease-in forwards;display:block!important}.contacts-header-btn.searching-inactive button:first-child img{animation:iconRotate .25s ease reverse forwards}.contacts-header-btn input{position:relative;margin-left:10px;animation-fill-mode:forwards}.contact-banner{background-color:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin-bottom:.75rem;display:flex;align-items:flex-start;gap:1rem;box-shadow:var(--shadow);transition:all .2s ease;cursor:pointer;min-height:80px}.contact-banner:hover{background-color:var(--gray-100);border-color:var(--primary-light);transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.contact-banner-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:clamp(1rem,2.5vw,1.25rem);flex-shrink:0}.contact-banner-content{flex:1;min-width:0;overflow:hidden}.contact-banner-name{font-size:clamp(1rem,3vw,1.125rem);font-weight:600;color:var(--text);margin:0 0 .25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.contact-banner-username{font-size:clamp(.8rem,2.5vw,.875rem);color:var(--primary);margin:0 0 .25rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-banner-phoneNumber{font-size:clamp(.75rem,2.5vw,.875rem);color:var(--primary-dark);margin:0 0 .25rem;display:flex;align-items:center;gap:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-banner-phoneNumber:before{content:"";display:inline-block;width:14px;height:14px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23007aff"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/></svg>');background-repeat:no-repeat;opacity:.8;flex-shrink:0}.contact-banner-email{font-size:clamp(.75rem,2.5vw,.875rem);color:var(--text-muted);margin:0 0 .5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-banner-address{font-size:clamp(.7rem,2vw,.75rem);color:var(--text-muted);margin:0 0 .25rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.contact-banner-relationship{font-size:clamp(.7rem,2vw,.75rem);color:var(--text-muted);margin:0;text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-banner-actions{display:flex;gap:.5rem;flex-shrink:0;align-items:flex-start}.contact-banner-action{width:32px;height:32px;border-radius:50%;background-color:var(--gray-100);border:none;display:flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:pointer;transition:all .2s ease;touch-action:manipulation}.contact-banner-action:hover{background-color:var(--primary);color:#fff;transform:scale(1.1)}.contact-banner-action:active{transform:scale(.95)}.contact-banner-action-edit:hover{background-color:var(--primary);color:#fff}.contacts-actions{display:flex;justify-content:center;align-items:center;gap:1rem;padding:1rem 0}.contacts-actions button{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem 1.5rem;font-size:.875rem;font-weight:600;color:var(--text);cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow);min-width:120px;position:relative;overflow:hidden}.contacts-actions button:hover{background-color:var(--primary);color:#fff;border-color:var(--primary);transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.contacts-actions button:active{transform:translateY(0);box-shadow:0 2px 4px #0000001a}.contacts-actions button:focus{outline:none;box-shadow:0 0 0 3px #007aff33}.contacts-actions button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .3s ease}.contacts-actions button:hover:before{left:100%}.contacts-actions button:first-child{background:var(--primary);color:#fff;border-color:var(--primary)}.contacts-actions button:first-child:hover{background:var(--primary-dark);border-color:var(--primary-dark)}.contacts-actions button:last-child{background:var(--gray-100);color:var(--text-muted);border-color:var(--gray-300)}.contacts-actions button:last-child:hover{background:var(--gray-200);color:var(--text);border-color:var(--gray-400)}@media (max-width: 768px){.contacts-body{width:85%;padding:0 1rem 1rem}.contacts-empty-state{padding:3rem 1rem;min-height:300px}.contacts-empty-state .contacts-empty-icon{margin-bottom:1rem}.contacts-empty-state .contacts-empty-icon svg{width:48px;height:48px}.contacts-empty-state h3{font-size:1.25rem}.contacts-empty-state p{font-size:.9rem;margin-bottom:1.5rem}.contacts-empty-state .contacts-empty-button{padding:.75rem 1.25rem;font-size:.85rem}.contacts-letter-divider{margin:1rem 0}.contacts-letter-divider span{font-size:.7rem;padding:.2rem .6rem}.contact-banner{padding:.75rem;gap:.75rem;margin-bottom:.5rem}.contact-banner-avatar{width:40px;height:40px;font-size:1rem}.contact-banner-content{flex:1}.contact-banner-name{font-size:1rem;margin-bottom:.125rem}.contact-banner-username,.contact-banner-phoneNumber{font-size:.8rem;margin-bottom:.125rem}.contact-banner-phoneNumber:before{width:12px;height:12px}.contact-banner-email{font-size:.8rem;margin-bottom:.25rem}.contact-banner-address{font-size:.7rem;margin-bottom:.125rem}.contact-banner-relationship{font-size:.7rem}.contact-banner-actions{gap:.25rem}.contact-banner-action{width:36px;height:36px}.contacts-actions{flex-direction:column;gap:.75rem;padding:.75rem 0}.contacts-actions button{width:100%;max-width:280px;padding:.875rem 1.5rem;font-size:.9rem}}@media (max-width: 480px){.contacts-body{width:95%;padding:0 .5rem .5rem}.contacts-empty-state{padding:2rem 1rem;min-height:250px}.contacts-empty-state .contacts-empty-icon svg{width:40px;height:40px}.contacts-empty-state h3{font-size:1.125rem}.contacts-empty-state p{font-size:.85rem}.contacts-letter-divider{margin:.75rem 0}.contacts-letter-divider span{font-size:.65rem;padding:.15rem .5rem}.contact-banner{padding:.5rem;gap:.5rem;flex-direction:row;align-items:flex-start}.contact-banner-avatar{width:36px;height:36px;font-size:.9rem}.contact-banner-name{font-size:.9rem}.contact-banner-username,.contact-banner-phoneNumber,.contact-banner-email{font-size:.75rem}.contact-banner-address,.contact-banner-relationship{font-size:.65rem}.contact-banner-actions{flex-direction:column;gap:.25rem}.contact-banner-action{width:32px;height:32px}.contacts-actions{gap:.5rem;padding:.5rem 0}.contacts-actions button{padding:.75rem 1.25rem;font-size:.85rem;min-width:100px}}@media (max-width: 768px) and (orientation: landscape){.contact-banner-address{-webkit-line-clamp:1}}@media (hover: none) and (pointer: coarse){.contact-banner:hover,.contact-banner-action:hover{transform:none}.contact-banner-action:active{background-color:var(--primary);color:#fff;transform:scale(.95)}.contacts-actions button{padding:1rem 1.5rem}.contacts-actions button:hover{transform:none}.contacts-actions button:active{background-color:var(--primary-dark);transform:scale(.98)}.contacts-actions button:last-child:active{background-color:var(--gray-300)}}header{position:sticky;top:0;z-index:10;background-color:#fff;border-bottom-left-radius:20px;border-bottom-right-radius:20px;margin-bottom:2rem}header .header-wrapper{width:70%;max-width:1200px;margin:0 auto;text-align:center;padding:1.5rem 1rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}header .header-name-kop{color:var(--primary);font-weight:900;font-size:clamp(2rem,5vw,3rem);line-height:1.2}header .header-name-small{color:var(--primary-light);font-size:clamp(.9rem,2.5vw,1rem)}@media (max-width: 768px){header{margin-bottom:1rem;border-bottom-left-radius:15px;border-bottom-right-radius:15px}header .header-wrapper{width:95%;padding:1rem .5rem;flex-direction:column;text-align:center;gap:.5rem}header .header-name-kop{font-size:2rem}header .header-name-small{font-size:.85rem}}@media (max-width: 480px){header{border-bottom-left-radius:10px;border-bottom-right-radius:10px}header .header-wrapper{width:100%;padding:.75rem .25rem}header .header-name-kop{font-size:1.75rem}header .header-name-small{font-size:.8rem}}@media (min-width: 769px) and (max-width: 1024px){header .header-wrapper{width:85%;padding:1.75rem 1rem}header .header-name-kop{font-size:2.5rem}}.auth-page{display:flex;flex-direction:column;min-height:100vh;background:linear-gradient(135deg,#f5f7fa,#e4e8f0);font-family:Poppins,sans-serif;overflow:hidden;position:relative}.auth-page:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 30%,rgba(100,108,255,.1) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(168,85,247,.1) 0%,transparent 50%),radial-gradient(circle at 50% 10%,rgba(100,108,255,.05) 0%,transparent 50%);animation:floatingBg 20s ease-in-out infinite;z-index:0}@keyframes floatingBg{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(1deg)}}.auth-container{display:flex;justify-content:center;align-items:center;flex:1;padding:2rem;position:relative;z-index:1}.auth-card{width:100%;max-width:420px;background:#fff;border-radius:16px;padding:2.5rem;box-shadow:0 15px 30px #0000000d;transform:translateY(20px);opacity:0;transition:all .6s cubic-bezier(.4,0,.2,1);animation:slideInUp .8s ease-out forwards;position:relative;overflow:hidden}.auth-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,transparent 50%);pointer-events:none;z-index:1}.auth-card:hover{transform:translateY(-8px);box-shadow:0 25px 50px #0000001f}@keyframes slideInUp{to{transform:translateY(0);opacity:1}}.card-header{position:relative;margin-bottom:2.5rem;z-index:2}.card-header .decoration-circle{position:absolute;width:60px;height:60px;background:linear-gradient(45deg,#646cff,#a855f7);border-radius:50%;top:-15px;right:-15px;opacity:.15;z-index:0;animation:pulseGlow 3s ease-in-out infinite}.card-header .decoration-circle:before{content:"";position:absolute;top:50%;left:50%;width:80px;height:80px;background:linear-gradient(45deg,#646cff,#a855f7);border-radius:50%;opacity:.1;transform:translate(-50%,-50%);animation:pulseGlow 3s ease-in-out infinite reverse}@keyframes pulseGlow{0%,to{transform:scale(1);opacity:.15}50%{transform:scale(1.05);opacity:.25}}.auth-title{font-size:1.75rem;font-weight:600;color:#1a1a1a;margin-bottom:.5rem;position:relative;z-index:1;animation:fadeInDown .6s ease-out .2s both}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.auth-form{display:flex;flex-direction:column;gap:1.75rem;position:relative;z-index:2}.form-group{position:relative;animation:fadeInUp .6s ease-out both}.form-group:nth-child(1){animation-delay:.3s}.form-group:nth-child(2){animation-delay:.4s}.form-group:nth-child(3){animation-delay:.5s}.form-group.floating .form-input{padding:1rem .75rem .5rem;background:transparent;border:none;border-bottom:1px solid #e0e0e0;border-radius:0;transition:all .3s cubic-bezier(.4,0,.2,1)}.form-group.floating .form-input:not(:-moz-placeholder-shown)~.form-label{transform:translateY(-1.25rem) scale(.85);color:#646cff}.form-group.floating .form-input:focus~.form-label,.form-group.floating .form-input:not(:placeholder-shown)~.form-label{transform:translateY(-1.25rem) scale(.85);color:#646cff}.form-group.floating .form-input:not(:-moz-placeholder-shown)~.underline{transform:scaleX(1)}.form-group.floating .form-input:focus~.underline,.form-group.floating .form-input:not(:placeholder-shown)~.underline{transform:scaleX(1)}.form-group.floating .form-input:focus{border-bottom-color:transparent}.form-group.floating .form-label{position:absolute;left:.75rem;top:1rem;color:#888;font-weight:400;pointer-events:none;transition:all .3s cubic-bezier(.4,0,.2,1);transform-origin:left top;font-size:1rem}.form-group.floating .underline{position:absolute;bottom:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,#646cff,#a855f7);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.4,0,.2,1)}.form-group.floating:hover .form-input:not(:focus){border-bottom-color:silver}.form-input{width:100%;padding:.75rem;font-size:1rem;border:1px solid #e0e0e0;border-radius:8px;transition:all .3s cubic-bezier(.4,0,.2,1)}.form-input:focus{outline:none;border-color:#646cff;box-shadow:0 0 0 3px #646cff33}.submit-btn{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem;background:linear-gradient(45deg,#646cff,#a855f7);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;position:relative;animation:fadeInUp .6s ease-out .6s both}.submit-btn span{position:relative;z-index:1;transition:transform .3s ease}.submit-btn svg{width:20px;height:20px;transition:transform .3s cubic-bezier(.4,0,.2,1)}.submit-btn:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,#a855f7,#646cff);opacity:0;transition:opacity .3s ease}.submit-btn:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#fff3;border-radius:50%;transform:translate(-50%,-50%);transition:width .6s ease,height .6s ease}.submit-btn:hover{box-shadow:0 12px 24px #646cff4d;transform:translateY(-2px)}.submit-btn:hover span{transform:translate(-3px)}.submit-btn:hover svg{transform:translate(8px)}.submit-btn:hover:before{opacity:1}.submit-btn:active{transform:translateY(0)}.submit-btn:active:after{width:300px;height:300px}.message{margin-top:1.5rem;padding:1rem;border-radius:8px;text-align:center;font-size:.9rem;animation:slideInFade .4s ease-out;transition:all .3s ease}.message.error{background-color:#fee;color:#f44;border-left:4px solid #ff4444}.message.success{background-color:#efe;color:#4a4;border-left:4px solid #44aa44}@keyframes slideInFade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.action-btn{background:none;border:none;color:#555;cursor:pointer;font-size:.9rem;padding:.5rem 1rem;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.action-btn p{margin:0;transition:transform .3s ease}.action-btn span{color:#646cff;font-weight:500;text-decoration:underline;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative}.action-btn span:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:linear-gradient(90deg,#646cff,#a855f7);transition:width .3s ease}.action-btn:hover{transform:translateY(-1px)}.action-btn:hover p{transform:translate(2px)}.action-btn:hover span{color:#a855f7}.action-btn:hover span:after{width:100%}.github-btn{background:none;border:none;cursor:pointer;padding:.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border-radius:8px}.github-btn img{width:24px;height:24px;transition:all .3s cubic-bezier(.4,0,.2,1)}.github-btn:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,#646cff,#a855f7);opacity:0;border-radius:8px;transition:opacity .3s ease}.github-btn:hover{transform:scale(1.1) rotate(5deg)}.github-btn:hover img{filter:brightness(1.2)}.github-btn:hover:before{opacity:.1}.github-btn:active{transform:scale(.95) rotate(0)}.user{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:480px;margin:0 auto;padding:24px 16px;gap:16px}.user-avatar{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:500;font-size:48px;flex-shrink:0;margin-bottom:24px;box-shadow:0 8px 16px #00000026;transition:all .3s cubic-bezier(.4,0,.2,1)}.user-avatar:hover{transform:translateY(-2px);box-shadow:0 12px 24px #0003}.user-section{background-color:var(--surface);border:none;border-radius:12px;padding:24px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;box-shadow:0 2px 8px #0000001a;transition:all .3s cubic-bezier(.4,0,.2,1);min-height:120px;width:100%;position:relative;overflow:hidden}.user-section:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--primary-light))}.user-section:hover{transform:translateY(-4px);box-shadow:0 8px 24px #00000026}.user-section-sub{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}@media (min-width: 480px){.user-section-sub{flex-direction:row;justify-content:center;gap:32px}}.user .user-input{background:transparent;border:none;padding:8px 4px;font-size:inherit;color:var(--text);width:100%;transition:all .3s ease;text-align:center}.user .user-input:focus{outline:none;border-bottom-color:var(--primary);background:#00000005}.user .user-input::-moz-placeholder{color:var(--text-muted);opacity:.6}.user .user-input::placeholder{color:var(--text-muted);opacity:.6}.user .name-input{font-size:28px;font-weight:600;border-bottom-width:3px;text-align:center}.user .address{background-color:var(--surface);border-radius:8px;padding:16px;margin:16px 0;box-shadow:0 1px 4px #00000014;width:100%;max-width:400px}.user .address h3{font-size:18px;font-weight:600;color:var(--text);margin:0 0 12px;display:flex;align-items:center;gap:8px}.user .address h3:before{content:"📍";font-size:16px}.user .address .user-input{text-align:left;margin-bottom:8px}.user .address-row{display:flex;gap:8px}.user .address-row .user-input{flex:1}.user .option-btn{display:flex;justify-content:space-evenly;gap:15px}@media (max-width: 480px){.user .option-btn{flex-direction:column;align-items:center;width:100%}}.user .btn{color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:16px;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #0000001a}.user .btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.user .btn:active{transform:translateY(0)}@media (max-width: 480px){.user .btn{width:100%}}.user .save-button{background:var(--primary)}.user .save-button:hover{background:var(--primary-dark)}.user .delete-button{background:var(--error)}.user .delete-button:hover{background:var(--error-dark)}.user-section{position:relative;overflow:hidden}.user-section:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 70%);transform:translate(-50%,-50%);transition:width .6s,height .6s;border-radius:50%;pointer-events:none}.user-section:active:after{width:300px;height:300px}.new-contact{min-height:100vh;background-color:var(--gray-200)}.new-contact-body{width:70%;max-width:800px;margin:0 auto;padding:2rem}.new-contact-title{text-align:center;font-size:2rem;font-weight:600;color:var(--text);margin-bottom:2rem;animation:fadeInUp .6s ease-out}.new-contact-form{background-color:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow);animation:fadeInUp .6s ease-out .1s both}.new-contact-form-section{margin-bottom:2rem}.new-contact-form-section:last-child{margin-bottom:0}.new-contact-form-section-title{font-size:1.25rem;font-weight:600;color:var(--text);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid var(--primary-light);display:flex;align-items:center;gap:.5rem}.new-contact-form-section-title:before{content:"";width:4px;height:1.25rem;background:var(--primary);border-radius:2px}.new-contact-form-section-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.new-contact-form-group{display:flex;flex-direction:column;gap:.5rem}.new-contact-form-group.full-width{grid-column:1/-1}.new-contact-form-group label{font-weight:600;color:var(--text);font-size:.9rem;display:flex;align-items:center;gap:.5rem}.new-contact-form-group label .required{color:var(--error, #ef4444);font-size:.8rem}.new-contact-form-group input,.new-contact-form-group select,.new-contact-form-group textarea{padding:.75rem 1rem;border:1px solid var(--border);border-radius:var(--radius);font-size:1rem;background-color:var(--surface);color:var(--text);transition:all .2s ease;outline:none}.new-contact-form-group input:focus,.new-contact-form-group select:focus,.new-contact-form-group textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px #007aff1a}.new-contact-form-group input:hover,.new-contact-form-group select:hover,.new-contact-form-group textarea:hover{border-color:var(--primary-light)}.new-contact-form-group input::-moz-placeholder,.new-contact-form-group select::-moz-placeholder,.new-contact-form-group textarea::-moz-placeholder{color:var(--text-muted)}.new-contact-form-group input::placeholder,.new-contact-form-group select::placeholder,.new-contact-form-group textarea::placeholder{color:var(--text-muted)}.new-contact-form-group input.error,.new-contact-form-group select.error,.new-contact-form-group textarea.error{border-color:var(--error, #ef4444);box-shadow:0 0 0 3px #ef44441a}.new-contact-form-group textarea{resize:vertical;min-height:80px;font-family:inherit}.new-contact-form-group select{cursor:pointer;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none}.new-contact-form-group .error-message{color:var(--error, #ef4444);font-size:.8rem;margin-top:.25rem;display:flex;align-items:center;gap:.25rem;animation:fadeIn .2s ease-out}.new-contact-form-group .error-message:before{content:"⚠";font-size:.7rem}.new-contact-form-group .help-text{color:var(--text-muted);font-size:.8rem;margin-top:.25rem}.new-contact-form-actions{display:flex;gap:1rem;justify-content:center;margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border)}.new-contact-form-actions button{padding:.875rem 2rem;border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;border:1px solid var(--border);min-width:140px;position:relative;overflow:hidden}.new-contact-form-actions button:focus{outline:none;box-shadow:0 0 0 3px #007aff33}.new-contact-form-actions button:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.new-contact-form-actions button.primary{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 12px #007aff33}.new-contact-form-actions button.primary:hover:not(:disabled){background:var(--primary-dark);border-color:var(--primary-dark);transform:translateY(-1px);box-shadow:0 6px 20px #007aff4d}.new-contact-form-actions button.primary:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px #007aff33}.new-contact-form-actions button.secondary{background:var(--surface);color:var(--text);border-color:var(--border)}.new-contact-form-actions button.secondary:hover:not(:disabled){background:var(--gray-100);border-color:var(--gray-300);transform:translateY(-1px)}.new-contact-form-actions button.secondary:active:not(:disabled){transform:translateY(0)}.new-contact-form-actions button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .3s ease}.new-contact-form-actions button:hover:before{left:100%}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 768px){.new-contact-body{width:95%;padding:1rem}.new-contact-title{font-size:1.5rem;margin-bottom:1.5rem}.new-contact-form{padding:1.5rem}.new-contact-form-section{margin-bottom:1.5rem}.new-contact-form-section-title{font-size:1.125rem}.new-contact-form-section-grid{grid-template-columns:1fr;gap:1rem}.new-contact-form-group label{font-size:.85rem}.new-contact-form-group input,.new-contact-form-group select,.new-contact-form-group textarea{padding:.625rem .875rem;font-size:.9rem}.new-contact-form-actions{flex-direction:column;gap:.75rem;margin-top:1.5rem;padding-top:1.5rem}.new-contact-form-actions button{width:100%;padding:.75rem 1.5rem;font-size:.9rem;min-width:auto}}@media (max-width: 480px){.new-contact-body{width:100%;padding:.5rem}.new-contact-title{font-size:1.25rem;margin-bottom:1rem}.new-contact-form{padding:1rem}.new-contact-form-section{margin-bottom:1rem}.new-contact-form-section-title{font-size:1rem;margin-bottom:.75rem}.new-contact-form-section-grid{gap:.75rem}.new-contact-form-group{gap:.375rem}.new-contact-form-group label{font-size:.8rem}.new-contact-form-group input,.new-contact-form-group select,.new-contact-form-group textarea{padding:.5rem .75rem;font-size:.85rem}.new-contact-form-group textarea{min-height:60px}.new-contact-form-actions{margin-top:1rem;padding-top:1rem;gap:.5rem}.new-contact-form-actions button{padding:.625rem 1.25rem;font-size:.85rem}}@media (hover: none) and (pointer: coarse){.new-contact-form-group input,.new-contact-form-group select,.new-contact-form-group textarea{padding:.875rem 1rem;font-size:16px}.new-contact-form-actions button{padding:1rem 2rem}.new-contact-form-actions button:hover{transform:none}.new-contact-form-actions button:active:not(:disabled){transform:scale(.98)}}