@font-face{font-family:Circe;src:url(/contact-book-app/assets/fonts/circe-b9675b56.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Circe;src:url(/contact-book-app/assets/fonts/circe_bold-30479b12.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}:root{--color-primary: #005BFE;--color-primary-hover: #0047cc;--color-danger: #F81155;--color-danger-hover: #d4003c;--color-white: #FFFFFF;--color-black: #000000;--color-gray-light: #F6F7F9;--color-gray: #E0E0E0;--color-gray-dark: #9E9E9E;--color-success: #28a745;--color-error: #dc3545;--color-warning: #ffc107;--color-info: #17a2b8;--color-overlay: rgba(0, 0, 0, .3);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .05);--shadow-md: 0px 4px 20px rgba(0, 0, 0, .05);--shadow-lg: 0 8px 30px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 40px rgba(0, 0, 0, .15);--shadow-popup: 0px 2px 8px rgba(0, 0, 0, .15);--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-xxl: 48px;--font-family: "Circe", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-size-xs: 12px;--font-size-sm: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 24px;--font-size-xxl: 32px;--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .35s ease}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth;height:100%}body{font-family:var(--font-family);font-weight:400;font-size:var(--font-size-md);line-height:1.5;color:var(--color-black);background-color:var(--color-white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;min-height:100vh;position:relative}:focus{outline:2px solid var(--color-primary);outline-offset:2px}:focus:not(:focus-visible){outline:none}.container{width:100%}.hidden{display:none!important}.visible{display:block!important}.app{min-height:100vh;display:flex;flex-direction:column;position:relative}.menu{background-color:var(--color-white);box-shadow:0 4px 20px #0000000d;height:70px;top:0;z-index:1000;transition:all var(--transition-base);width:100%}.menu__container{height:100%;display:flex;align-items:center;justify-content:space-between}.menu__logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;position:relative}.menu__logo:hover{opacity:.9}.menu__icon{width:18px;height:22px;object-fit:contain;display:block}.menu__title{font-size:var(--font-size-lg);font-weight:700;color:var(--color-primary);line-height:22px;white-space:nowrap}.menu__buttons{display:flex;gap:var(--spacing-md);align-items:center}.menu__buttons .menu__btn-add-contact{display:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:10px 14px;border:none;border-radius:var(--radius-md);font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:700;line-height:1.3;cursor:pointer;transition:all var(--transition-base);text-align:center;text-decoration:none;white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;height:38px}.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.6;cursor:not-allowed;pointer-events:none}.btn__icon{width:18px;height:18px;object-fit:contain;display:block;flex-shrink:0}.btn__text{display:block;line-height:1}.btn--primary{background-color:var(--color-primary);color:var(--color-white)}.btn--primary:hover{background-color:var(--color-primary-hover)}.btn--secondary{background-color:var(--color-primary);color:var(--color-white)}.btn--secondary:hover{background-color:var(--color-primary-hover)}.btn--danger{background-color:var(--color-danger);color:var(--color-white)}.btn--danger:hover{background-color:var(--color-danger-hover)}.btn--outline{background-color:transparent;border:2px solid var(--color-gray);color:var(--color-black)}.btn--outline:hover{border-color:var(--color-primary);color:var(--color-primary);background-color:#005bfe0d}.content{flex:1;padding:0;width:100%;position:relative}.content .container{animation:fadeIn var(--transition-slow)}.contacts{position:relative;padding:0;width:100%;min-height:calc(100vh - 70px);display:flex;flex-direction:column}.contacts__empty{position:absolute;width:184px;height:23px;left:calc(50% - 92px);top:calc(50% - 11.5px);font-family:Circe;font-style:normal;font-weight:400;font-size:18px;line-height:130%;color:#000;opacity:.3;text-align:center}.contacts__empty p{width:100%;height:100%;margin:0}.contacts__list{width:100%;padding:94px 16px 16px;display:flex;flex-direction:column;gap:16px}.contacts__list.empty,.contacts__add-btn-mobile{display:none}.contacts-group{margin-bottom:16px;width:100%;position:relative}.contacts-group:last-child{margin-bottom:0}.contacts-group__header{background-color:var(--color-white);box-shadow:0 4px 20px #0000000d;border-radius:6px;padding:24px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:all var(--transition-base);margin-bottom:0;border:none;width:100%;text-align:left;position:relative;height:70px}.contacts-group__header:hover{box-shadow:0 4px 20px #00000014}.contacts-group__header.expanded{border-radius:6px 6px 0 0;box-shadow:0 4px 20px #0000000d}.contacts-group__header.expanded .contacts-group__title{color:var(--color-primary)}.contacts-group__header.expanded .contacts-group__arrow{transform:rotate(180deg)}.contacts-group__header.expanded .contacts-group__arrow svg{transform:rotate(180deg)}.contacts-group__title{font-size:18px;font-weight:700;color:var(--color-black);margin:0;line-height:22px;font-family:Circe}.contacts-group__count{font-size:var(--font-size-sm);color:var(--color-gray-dark);background-color:var(--color-gray-light);padding:2px 8px;border-radius:10px;font-weight:500}.contacts-group__arrow{width:24px;height:24px;opacity:.5;transition:transform var(--transition-base)}.contacts-group__arrow svg{width:100%;height:100%;stroke:currentColor;transition:transform var(--transition-base)}.contacts-group__content{background-color:var(--color-white);box-shadow:0 4px 20px #0000000d;border-radius:0 0 6px 6px;overflow:hidden;display:none}.contacts-group__content.expanded{display:block}.contacts-group__list{list-style:none;padding:0;margin:0}.contacts-group__item{padding:24px;border-bottom:1px solid rgba(0,0,0,.1);display:flex;justify-content:space-between;align-items:center;transition:background-color var(--transition-fast);height:77px;box-sizing:border-box}.contacts-group__item:hover{background-color:#00000005}.contacts-group__item:last-child{border-bottom:none}.contacts-group__item--empty{padding:48px 24px;text-align:center;color:var(--color-gray-dark);font-size:var(--font-size-md);opacity:.5}.contacts-group__item-info{display:flex;flex-direction:column;justify-content:space-between;gap:16px;width:100%}.contacts-group__item-name-container{display:flex;flex-direction:column;gap:0;width:500px}.contacts-group__item-name{font-size:18px;font-weight:400;color:var(--color-black);opacity:.5;line-height:23px;font-family:Circe}.contacts-group__item-phone{display:flex;justify-content:space-between;align-items:center;width:100%}.contacts-group__item-phone-number{font-size:18px;font-weight:400;color:var(--color-black);line-height:23px;font-family:Circe;margin:0 auto}.contacts-group__item-actions{display:flex;gap:8px;flex-shrink:0}.contacts-group__item-action{background:none;border:1px solid rgba(0,0,0,.1);border-radius:6px;cursor:pointer;padding:8px;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;width:38px;height:38px;box-sizing:border-box}.contacts-group__item-action:hover .contacts-group__item-icon{opacity:.3}.contacts-group__item-action:active{transform:scale(.95)}.contacts-group__item-action:focus{outline:2px solid var(--color-primary);outline-offset:1px}.contacts-group__item-action--edit:hover .contacts-group__item-icon,.contacts-group__item-action--delete:hover .contacts-group__item-icon{opacity:.3}.contacts-group__item-icon{width:24px;height:24px;fill:#000;opacity:.3;transition:all var(--transition-fast)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:2000;display:none}.modal.active{display:block}.modal__overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-overlay);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal__content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--color-white);border-radius:var(--radius-md);box-shadow:var(--shadow-popup);width:90%;max-width:393px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}.modal__header{display:flex;justify-content:center;align-items:center;padding:23px 24px 24px;border-bottom:1px solid rgba(0,0,0,.1);position:relative;min-height:70px}.modal__title{font-size:var(--font-size-lg);font-weight:700;color:var(--color-black);margin:0;line-height:1.2;text-align:center;width:100%}.modal__close{background:none;border:none;cursor:pointer;padding:8px;border-radius:var(--radius-md);transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;width:36px;height:36px;position:absolute;right:12px;top:12px}.modal__close:hover{background-color:#0000000d}.modal__close:active{transform:scale(.95)}.modal__close:focus{outline:2px solid var(--color-primary);outline-offset:1px}.modal__close-icon{width:24px;height:24px;object-fit:contain;opacity:.3}.modal__body{padding:40px}.modal__body p{margin:0;color:var(--color-black);line-height:1.4;font-size:var(--font-size-sm);text-align:center}.modal__form{padding:40px}.modal__buttons{display:flex;gap:12px;justify-content:center;padding:0 40px 40px}.modal__buttons .btn{min-width:104px;height:38px}.modal__buttons .btn:first-child{min-width:96px}.modal.modal--contact .modal__content{width:312px;height:100vh;max-width:none;max-height:none;border-radius:0;top:0;left:0;transform:none;box-shadow:none}.modal.modal--contact .modal__header{height:70px;padding:23px 24px}.modal.modal--contact .modal__form{padding:24px;flex:1;overflow-y:auto}.modal.modal--contact .modal__buttons{padding:24px;border-top:1px solid rgba(0,0,0,.1);background:var(--color-white);flex-shrink:0}.modal.modal--contact .form-group{margin-bottom:24px}.modal.modal--contact .form-group:last-child{margin-bottom:0}.modal.modal--contact .form-group__label{display:none}.modal.modal--contact .form-group__input{background-color:#0000000d;border:none;padding:10px 16px;border-radius:var(--radius-md)}.modal.modal--contact .form-group__input:focus{background-color:#00000014;box-shadow:none;border:none}.modal.modal--contact .form-group__input::placeholder{color:var(--color-black);opacity:.5}.modal.modal--contact .form-group__input.error{border:1px solid var(--color-error)}.modal.modal--contact .form-group__input.error:focus{border:1px solid var(--color-error)}.modal.modal--contact .custom-dropdown__toggle{background-color:#0000000d;border:none;padding:10px 16px;border-radius:var(--radius-md)}.modal.modal--contact .custom-dropdown__toggle:hover,.modal.modal--contact .custom-dropdown__toggle:focus{background-color:#00000014;box-shadow:none;border:none}.modal.modal--contact .custom-dropdown__toggle.error{border:1px solid var(--color-error)}.modal.modal--contact .custom-dropdown__selected.placeholder{color:var(--color-black);opacity:.5}.modal.modal--confirm .modal__content{width:393px}.modal.modal--confirm .modal__header{height:70px;padding:40px 40px 24px;border-bottom:none;display:flex;justify-content:center;align-items:center;position:relative}.modal.modal--confirm .modal__title{font-size:var(--font-size-lg);font-weight:700;text-align:center;margin:0}.modal.modal--confirm .modal__close{position:static;width:36px;height:36px;padding:8px}.modal.modal--confirm .modal__close:hover{background-color:#0000000d}.modal.modal--confirm .modal__body{padding:0 40px 24px;text-align:center}.modal.modal--confirm .modal__body p{font-size:var(--font-size-sm);line-height:1.2;color:var(--color-black);opacity:.8}.modal.modal--confirm .modal__buttons{padding:0 40px 40px;gap:12px}.modal.modal--confirm .modal__buttons .btn{min-width:104px;height:38px}.modal.modal--confirm .modal__buttons .btn:first-child{min-width:96px}.form-group{margin-bottom:var(--spacing-lg)}.form-group:last-child{margin-bottom:0}.form-group__label{display:block;margin-bottom:var(--spacing-sm);font-size:var(--font-size-sm);font-weight:600;color:var(--color-black)}.form-group__label:after{content:" *";color:var(--color-danger);opacity:.8}.form-group__input{width:100%;padding:var(--spacing-sm) var(--spacing-md);border:2px solid var(--color-gray);border-radius:var(--radius-md);font-family:var(--font-family);font-size:var(--font-size-md);color:var(--color-black);background-color:var(--color-white);transition:all var(--transition-fast);height:38px}.form-group__input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #005bfe1a}.form-group__input:disabled{background-color:var(--color-gray-light);cursor:not-allowed;opacity:.7}.form-group__input::placeholder{color:var(--color-gray-dark);opacity:.7}.form-group__input.error{border-color:var(--color-error)}.form-group__input.error:focus{box-shadow:0 0 0 3px #dc35451a}.form-group__error{display:none;margin-top:var(--spacing-xs);font-size:var(--font-size-xs);color:var(--color-error);font-weight:500;line-height:1.4}.form-group__error.active{display:block}.custom-dropdown{position:relative;width:100%}.custom-dropdown__toggle{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border:2px solid var(--color-gray);border-radius:var(--radius-md);background-color:var(--color-white);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-family);font-size:var(--font-size-md);color:var(--color-black);text-align:left;height:38px}.custom-dropdown__toggle:hover{border-color:var(--color-primary)}.custom-dropdown__toggle:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #005bfe1a}.custom-dropdown__toggle.active{border-color:var(--color-primary)}.custom-dropdown__toggle.active .custom-dropdown__arrow{transform:rotate(180deg)}.custom-dropdown__toggle.error{border-color:var(--color-error)}.custom-dropdown__selected{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.custom-dropdown__selected.placeholder{color:var(--color-gray-dark);opacity:.7}.custom-dropdown__arrow{width:12px;height:7px;color:var(--color-black);transition:transform var(--transition-fast);flex-shrink:0;opacity:.5}.custom-dropdown__menu{position:absolute;top:calc(100% + var(--spacing-xs));left:0;width:100%;background-color:var(--color-white);border:2px solid var(--color-gray);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:1100;max-height:200px;overflow-y:auto;display:none}.custom-dropdown__menu.open{display:block}.custom-dropdown__item{padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;transition:all var(--transition-fast);font-size:var(--font-size-sm);color:var(--color-black);border:none;background:#F2F2F2;width:100%;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.custom-dropdown__item:hover{background-color:#e4e3e3}.custom-dropdown__item:focus{outline:none;background-color:#e4e3e3}.custom-dropdown__item.selected{background-color:var(--color-primary);color:var(--color-white);font-weight:600}.custom-dropdown__item.selected:hover{background-color:var(--color-primary-hover)}.custom-dropdown__item:not(:last-child){border-bottom:1px solid var(--color-gray-light)}.toast-container{position:fixed;top:var(--spacing-lg);right:var(--spacing-lg);z-index:3000;display:flex;flex-direction:column;gap:var(--spacing-sm);max-width:400px;width:calc(100% - var(--spacing-lg) * 2)}.toast{padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-md);transition:all var(--transition-base);position:relative;overflow:hidden}.toast:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%}.toast--success{background-color:#d4edda;border:1px solid #c3e6cb;color:#155724}.toast--success:before{background-color:#28a745}.toast--error{background-color:#f8d7da;border:1px solid #f5c6cb;color:#721c24}.toast--error:before{background-color:#dc3545}.toast--info{background-color:#d1ecf1;border:1px solid #bee5eb;color:#0c5460}.toast--info:before{background-color:#17a2b8}.toast--warning{background-color:#fff3cd;border:1px solid #ffeaa7;color:#856404}.toast--warning:before{background-color:#ffc107}.toast.closing{animation:slideOutRight var(--transition-base) forwards}.toast__message{flex:1;font-size:var(--font-size-sm);line-height:1.5;color:inherit;margin-right:var(--spacing-sm);word-break:break-word}.toast__close{background:none;border:none;cursor:pointer;padding:var(--spacing-xs);transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--radius-sm);flex-shrink:0}.toast__close:hover{background-color:#0000001a}.toast__close:active{transform:scale(.95)}.toast__close:focus{outline:2px solid currentColor;outline-offset:1px}.toast__close-icon{width:16px;height:16px;object-fit:contain;display:block;color:inherit}.groups-sidebar{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1500;display:none}.groups-sidebar.active{display:block}.groups-sidebar__overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-overlay);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.groups-sidebar__panel{position:absolute;top:0;left:0;width:312px;height:100%;background-color:var(--color-white);box-shadow:var(--shadow-lg);display:flex;flex-direction:column}.groups-sidebar__header{padding:23px 24px;border-bottom:1px solid rgba(0,0,0,.1);display:flex;justify-content:space-between;align-items:center;height:70px;flex-shrink:0}.groups-sidebar__title{font-size:var(--font-size-lg);font-weight:700;color:var(--color-black);margin:0;line-height:1.2}.groups-sidebar__close{background:none;border:none;cursor:pointer;padding:8px;border-radius:var(--radius-md);transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;width:36px;height:36px}.groups-sidebar__close:hover{background-color:#0000000d}.groups-sidebar__close:active{transform:scale(.95)}.groups-sidebar__close:focus{outline:2px solid var(--color-primary);outline-offset:1px}.groups-sidebar__close-icon{width:24px;height:24px;object-fit:contain;opacity:.3}.groups-sidebar__content{flex:1;padding:24px;overflow-y:auto}.groups-sidebar__add{display:flex;gap:8px;margin-bottom:24px}.groups-sidebar__input{flex:1;padding:10px 16px;border:none;border-radius:var(--radius-md);background-color:#0000000d;font-family:var(--font-family);font-size:var(--font-size-sm);color:var(--color-black);transition:all var(--transition-fast);height:38px}.groups-sidebar__input:focus{outline:none;background-color:#00000014}.groups-sidebar__input::placeholder{color:var(--color-black);opacity:.5}.groups-sidebar__add-btn{min-width:80px;padding:10px 16px;font-weight:700;color:var(--color-primary);border-color:transparent;background-color:transparent;height:38px}.groups-sidebar__add-btn:hover{background-color:#005bfe1a;border-color:transparent;color:var(--color-primary)}.groups-sidebar__list{display:flex;flex-direction:column;gap:16px}.groups-sidebar__footer{padding:24px;display:flex;gap:12px;flex-shrink:0}.groups-sidebar__footer .btn{flex:1;padding:10px 16px;font-weight:700;height:38px}.groups-sidebar__cancel{color:var(--color-primary);border-color:transparent;background-color:transparent}.groups-sidebar__cancel:hover{background-color:#005bfe1a;border-color:transparent;color:var(--color-primary)}.groups-sidebar__save{min-width:104px}.sidebar-group-item{display:flex;align-items:center;gap:8px;transition:all var(--transition-fast)}.sidebar-group-item:hover{background-color:#00000014}.sidebar-group-item:hover .sidebar-group-item__delete-icon{opacity:.5}.sidebar-group-item.editing{background-color:#005bfe1a}.sidebar-group-item.editing .sidebar-group-item__name-input{display:block}.sidebar-group-item.editing .sidebar-group-item__name-text{display:none}.sidebar-group-item__name{flex:1;position:relative;padding:7px 12px;background-color:#0000000d;border-radius:var(--radius-md)}.sidebar-group-item__name-text{font-size:var(--font-size-sm);font-weight:400;color:var(--color-black);line-height:1.3;word-break:break-word}.sidebar-group-item__name-input{display:none;width:100%;padding:4px 8px;border:1px solid var(--color-primary);border-radius:var(--radius-sm);background-color:var(--color-white);font-family:var(--font-family);font-size:var(--font-size-sm);color:var(--color-black)}.sidebar-group-item__name-input:focus{outline:none;box-shadow:0 0 0 2px #005bfe33}.sidebar-group-item__delete{background:none;border:1px solid rgba(0,0,0,.1);border-radius:var(--radius-md);cursor:pointer;padding:8px;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0}.sidebar-group-item__delete:hover{background-color:#0000000d;border-color:#0003}.sidebar-group-item__delete:active{transform:scale(.95)}.sidebar-group-item__delete:focus{outline:2px solid var(--color-primary);outline-offset:1px}.sidebar-group-item__delete-icon{width:25px;height:25px;object-fit:contain;opacity:.3;transition:opacity var(--transition-fast)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px);max-height:0}to{opacity:1;transform:translateY(0);max-height:1000px}}@media (max-width: 480px){body{background-color:#f6f7f9;width:100%;min-height:100vh}.app{width:100%;min-height:100vh;position:relative;background:#F6F7F9}.menu{position:fixed;top:0;left:0;width:100%;height:70px;background:#FFFFFF;box-shadow:0 4px 20px #0000000d;z-index:1000}.menu__container{width:100%;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;position:relative}.menu__logo{position:absolute;width:167px;height:22px;left:16px;top:24px;display:flex;align-items:center;pointer-events:none}.menu__icon{position:absolute;left:0;width:18px;height:22px;display:block;pointer-events:none}.menu__title{position:absolute;left:30px;width:133px;height:22px;font-family:Circe;font-style:normal;font-weight:700;font-size:18px;line-height:120%;color:#005bfe;white-space:nowrap;pointer-events:none}.menu__buttons{position:absolute;width:82px;height:38px;right:16px;top:16px}.menu__buttons .menu__btn-add-contact{display:none}.menu__buttons .menu__btn-groups{width:100%;height:100%;background:#005BFE;border-radius:6px;padding:0;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}.menu__buttons .menu__btn-groups .btn__text{font-family:Circe;font-style:normal;font-weight:700;font-size:14px;line-height:130%;color:#fff;text-align:center;width:100%}.content{flex:1;padding-top:24px;width:100%;position:relative;min-height:calc(100vh - 70px);background:#F6F7F9}.container{padding:0;width:100%;max-width:none}.contacts{width:100%;min-height:calc(100vh - 70px);padding:0;position:relative;background:#F6F7F9;display:flex;flex-direction:column}.contacts__empty{position:absolute;width:184px;height:23px;left:calc(50% - 92.5px);top:calc(50% - 12px);font-family:Circe;font-style:normal;font-weight:400;font-size:18px;line-height:130%;color:#000;opacity:.3;text-align:center;z-index:1}.contacts__empty p{width:184px;height:23px;margin:0}.contacts__list{width:100%;padding:156px 0 16px;display:flex;flex-direction:column;gap:16px}.contacts__list.empty{display:none}.contacts__add-btn-mobile{display:flex;position:absolute;width:343px;height:50px;left:16px;top:74px;background:#F81155;border-radius:6px;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;transition:background-color var(--transition-fast);z-index:900}.contacts__add-btn-mobile:hover{background-color:var(--color-danger-hover)}.contacts__add-btn-mobile .btn__text{font-weight:700;font-size:14px;line-height:1.3;color:#fff;width:126px;height:18px}.contacts__add-btn-mobile .btn__icon{width:18px;height:18px;filter:brightness(0) invert(1)}.contacts-group{width:343px;margin:0 auto 16px;position:relative;background:#FFFFFF;box-shadow:0 4px 20px #0000000d;border-radius:6px}.contacts-group__header{width:343px;height:70px;padding:24px;border-radius:6px;background:#FFFFFF;box-shadow:0 4px 20px #0000000d;display:flex;justify-content:space-between;align-items:center;cursor:pointer;border:none;position:relative}.contacts-group__header.expanded{border-radius:6px 6px 0 0}.contacts-group__header.expanded .contacts-group__title{color:#005bfe}.contacts-group__header.expanded .contacts-group__arrow svg{transform:rotate(180deg)}.contacts-group__title{font-family:Circe;font-style:normal;font-weight:700;font-size:18px;line-height:120%;color:#000;margin:0;display:flex;align-items:center;gap:8px}.contacts-group__count{font-size:14px;color:#9e9e9e;background-color:#f6f7f9;padding:2px 8px;border-radius:10px;font-weight:500}.contacts-group__arrow{width:24px;height:24px;opacity:.5}.contacts-group__arrow svg{width:100%;height:100%;stroke:currentColor;transition:transform var(--transition-base)}.contacts-group__content{width:343px;background-color:#fff;box-shadow:none;border-radius:0 0 6px 6px;overflow:hidden;display:none;padding:24px 24px 0}.contacts-group__content.expanded{display:block}.contacts-group__list{padding:0;margin:0;list-style:none;display:flex;flex-direction:column;gap:24px}.contacts-group__item{padding:0 0 24px;height:77px;border:none;display:flex;border-bottom:1px solid rgba(0,0,0,.1)}.contacts-group__item-info{display:flex;flex-direction:column;gap:16px;margin:0}.contacts-group__item-name{font-family:Circe;font-style:normal;font-weight:400;font-size:18px;line-height:130%;color:#000;opacity:.5;height:23px;margin:0;padding:0 0 10px;max-width:220px}.contacts-group__item-name-container{width:200px;padding:0 0 15px}.contacts-group__item-phone{display:flex;justify-content:space-between;align-items:center;margin:0}.contacts-group__item-phone-number{font-family:Circe;font-style:normal;font-weight:400;font-size:18px;line-height:130%;color:#000;width:184px;text-align:center;margin:0 auto}.contacts-group__item-actions{display:flex;gap:8px;width:84px;height:38px;margin:0}.contacts-group__item-action{width:38px;height:38px;border:1px solid rgba(0,0,0,.1);border-radius:6px;background:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;position:relative}.contacts-group__item-action--edit .contacts-group__item-icon{position:absolute;left:18.42%;right:18.42%;top:18.42%;bottom:18.42%;width:20px;height:20px}.contacts-group__item-action--delete .contacts-group__item-icon{position:absolute;left:16.67%;right:16.67%;top:16.67%;bottom:16.67%;width:22px;height:22px}.contacts-group__item-icon{width:100%;height:100%;fill:#000;opacity:.3}.modal{position:absolute;left:63px;width:312px}.modal__content{width:95%;max-height:95vh}.modal.modal--contact .modal__content{width:100%}.modal.modal--contact .modal__form{padding:20px}.modal.modal--contact .modal__buttons{padding:20px;flex-direction:row;justify-content:space-between;position:fixed;bottom:0;right:0;gap:32px}.modal.modal--contact .modal__buttons .btn{min-width:120px;height:40px}.modal.modal--contact .active .modal__content{animation:slideUp .3s ease-out}.modal.modal--confirm .modal__content{width:90%;max-width:343px}.modal.modal--confirm .modal__close{position:absolute;top:10px;right:10px}.modal.modal--confirm .modal__body{padding:0 0 24px}.modal.modal--confirm .modal__buttons{padding:0 50px 24px;flex-direction:row;justify-content:space-between}.modal.modal--confirm .modal__buttons .btn{height:40px}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.form-group{margin-bottom:var(--spacing-md)}.form-group__input,.custom-dropdown__toggle{height:40px;font-size:var(--font-size-md)}.groups-sidebar__panel{position:absolute;left:63px;width:312px}.groups-sidebar__content{padding:20px}.groups-sidebar__footer{padding:20px;flex-direction:column}.groups-sidebar__footer .btn{width:100%}.toast-container{top:var(--spacing-sm);right:var(--spacing-sm);left:var(--spacing-sm);width:auto;max-width:none}.toast{padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-sm);width:100%}.btn{font-size:var(--font-size-sm)}.btn--sm{height:32px}.btn--lg{height:44px}}@media (min-width: 769px){.app{margin:0 auto}.menu{position:sticky}.menu__container{max-width:1160px;margin:0 auto}.menu__logo{position:static;width:auto;height:auto;left:auto;top:auto;display:flex;align-items:center;gap:12px}.menu__icon{position:static;width:18px;height:22px}.menu__title{position:static;width:auto;height:auto;left:auto;top:auto;font-size:var(--font-size-lg);color:var(--color-primary)}.menu__buttons{position:static;width:auto;height:auto;right:auto;top:auto;display:flex;gap:var(--spacing-md)}.menu__buttons .menu__btn-add-contact{display:flex!important}.menu__buttons .menu__btn-groups{width:auto;height:38px;padding:10px 14px}.content{padding-top:0}.content .container{max-width:1160px;margin:0 auto}.contacts{padding:var(--spacing-xl) 0;min-height:auto}.contacts__empty{position:relative;left:auto;top:auto;transform:none;width:auto;height:auto;margin:100px auto}.contacts__empty p{font-size:var(--font-size-lg);color:var(--color-gray-dark);opacity:.3;width:auto;height:auto}.contacts__list{max-width:1160px;margin:0 auto;padding:0}.contacts__add-btn-mobile{display:none!important}.contacts-group{max-width:1160px;margin:0 auto 16px;width:100%}.contacts-group__header{width:100%;padding:24px}.contacts-group__content{width:100%}.contacts-group__item{flex-direction:row;align-items:center;justify-content:space-between;height:70px}.contacts-group__item-info{width:100%;flex-direction:row;align-items:center;gap:24px;margin:0}.contacts-group__item-name{min-width:200px;opacity:.5}.contacts-group__item-phone{justify-content:flex-end;width:auto}.contacts-group__item-phone-number{margin:0;text-align:right;width:auto}.contacts-group__item-actions{margin-left:24px}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:rgba(0,0,0,.05);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.3)}::selection{background-color:#005bfe33;color:var(--color-black)}