:root{--color-primary: #37adfc;--color-primary-hover: #8fd1fc;--color-primary-muted: #e5f3fc;--color-input-bg: #e5f1f9;--color-danger: red;--color-danger-hover: #fc8383;--color-label: darkgray;--color-surface: #fff;--font-sans: sans-serif;--icon-btn-size: 2rem;--bottom-btn-width: 8rem;--bottom-btn-height: 2.5rem}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:var(--font-sans)}h1{margin:0;font-size:2.5rem;font-weight:400}p{margin:0}ul,li{margin:0;padding:0;list-style:none}button{cursor:pointer}.contacts-wrapper{display:grid;grid-template-columns:.25fr 1fr;width:100vw;height:100vh}.left-sidebar-container{display:flex;flex-direction:column;width:100%;min-width:0;background-color:var(--color-primary-muted)}.main-content-wrapper{display:grid;grid-template-rows:1fr 5fr 1fr;padding-left:2rem}.contacts-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem}.contacts-list-container{width:100%}#contacts-list{display:flex;flex-direction:column}#sidebar-filter-input{margin:1rem}.contact{width:100%;padding:.5rem;border-radius:0px 1rem 1rem 0px/50%;font-size:1.25rem;cursor:pointer;transition:background-color .3s ease}.contact:hover{background-color:var(--color-primary-hover)}.contact.active{background-color:var(--color-primary)}#name-input-container{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:max-content;gap:.5rem;padding-top:5rem;margin-bottom:2rem}.field-label{color:var(--color-label);font-size:.75rem}.name-input{max-width:30vw;height:2rem;border:1px solid var(--color-primary-hover);background-color:var(--color-input-bg);font-size:1.25rem;border-radius:.25rem}#contacts-info-wrapper{display:flex;flex-direction:column;gap:1.5rem}#contacts-info-wrapper>section:not(:has(.record-list-item)){display:none}.record-list-item{display:flex;align-items:center;min-height:2rem}.record-list-item:hover .remove-btn{display:flex}#new-record-wrapper{display:flex;align-items:center}#add-record-text{padding-left:.5rem;color:var(--color-primary);cursor:pointer}.add-btn,.remove-btn{display:flex;align-items:center;justify-content:center;width:var(--icon-btn-size);height:var(--icon-btn-size);padding:0;padding-bottom:.15rem;border:none;border-radius:50%;color:var(--color-surface);font-size:1.5rem;line-height:1}.add-btn{background-color:var(--color-primary);transition:transform .2s ease}.add-btn:hover,#new-record-wrapper:hover .add-btn{transform:rotate(90deg)}.remove-btn{display:none;margin-left:1rem;background-color:var(--color-danger)}.remove-btn:hover{animation:remove-btn-wiggle .9s ease-in-out infinite}@keyframes remove-btn-wiggle{0%{transform:rotate(0)}33.333%{transform:rotate(20deg)}66.666%{transform:rotate(-20deg)}70%{transform:rotate(0)}to{transform:rotate(0)}}#bottom-btns-container{display:flex;align-items:center;justify-content:space-between;max-width:70vw}#save-and-cancel-container{display:flex;align-items:center}#save-and-cancel-container[hidden]{display:none!important}.bottom-btn{width:var(--bottom-btn-width);height:var(--bottom-btn-height);margin-left:1rem;font-size:1.25rem;transition:background-color .3s ease,color .3s ease,border-color .3s ease;border-radius:.25rem}#delete-btn{margin:0;border:1px solid var(--color-surface);background-color:var(--color-danger);color:var(--color-surface)}#delete-btn:hover{background-color:var(--color-danger-hover)}#cancel-btn,#new-record-cancel-btn,#delete-confirm-no-btn,#discard-confirm-no-btn{border:1px solid var(--color-primary);background-color:var(--color-surface)}#cancel-btn:hover,#new-record-cancel-btn:hover,#delete-confirm-no-btn:hover,#discard-confirm-no-btn:hover{background-color:var(--color-primary);color:var(--color-surface)}#save-btn,#new-record-add-btn{border:1px solid var(--color-surface);background-color:var(--color-primary);color:var(--color-surface)}#save-btn:hover,#new-record-add-btn:hover{border:1px solid var(--color-primary);background-color:var(--color-surface);color:var(--color-primary)}#delete-confirm-yes-btn,#discard-confirm-yes-btn{border:1px solid var(--color-surface);background-color:var(--color-danger);color:var(--color-surface)}#delete-confirm-yes-btn:hover,#discard-confirm-yes-btn:hover{background-color:var(--color-danger-hover)}#new-record-modal-wrapper,#delete-confirm-modal-wrapper,#discard-confirm-modal-wrapper{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background-color:#80808080}#new-record-modal-wrapper:not([hidden]),#delete-confirm-modal-wrapper:not([hidden]),#discard-confirm-modal-wrapper:not([hidden]){display:flex}.app-modal{display:flex;flex-direction:column;gap:.75rem;min-width:30vw;min-height:30vh;padding:1rem;border:1px solid var(--color-primary);background-color:var(--color-surface)}.app-modal .name-input{max-width:none;width:100%}#new-note-input{height:auto;resize:vertical;font-family:var(--font-sans)}.app-modal-actions{display:flex;align-items:center;justify-content:flex-end;margin-top:auto}#new-record-cancel-btn,#delete-confirm-no-btn,#discard-confirm-no-btn{margin-left:0}#new-record-add-btn{width:auto;min-width:var(--bottom-btn-width);padding:0 1rem}#delete-confirm-subheading,#discard-confirm-subheading{color:var(--color-label);font-size:1rem}.app-error{margin:0 0 .75rem;color:var(--color-danger);font-size:1rem}.noscript-banner{margin:0;padding:.75rem 1rem;background-color:var(--color-danger);color:var(--color-surface);text-align:center}