*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

[hidden] { display: none !important; }

@font-face {
    font-family: Roboto-Regular; 
    src: url(../../fonts/Roboto-Regular.ttf);
}

@font-face {
    font-family: Roboto-Medium; 
    src: url(../../fonts/Roboto-Medium.ttf);
}

@font-face {
    font-family: Roboto-Bold; 
    src: url(../../fonts/Roboto-Bold.ttf);
}

@font-face {
    font-family: Inter-Regular; 
    src: url(../../fonts/Inter-Regular.otf);
}

@font-face {
    font-family: Inter-Medium; 
    src: url(../../fonts/Inter-Medium.otf);
}

@font-face {
    font-family: Inter-Bold; 
    src: url(../../fonts/Inter-Bold.otf);
}

@font-face {
    font-family: Inter-SemiBold; 
    src: url(../../fonts/Inter-SemiBold.otf);
}

body{
	background-color: var(--background);
	font-family: Inter-Regular;
	scrollbar-width: none;
	padding: 12px 16px 16px 16px;
	color:var(--header-color);
	user-select: none;
}

::-webkit-scrollbar {
  display: none;
}

a{
	text-decoration: none;
}

:root {
    --background: #121216;
    --background-fill: #19191F;
    --background-fill-hover: #17171C;
    --secondary-background-fill: #1d1d26;
    --background-input-focus: #17171C;
    --header-color: #D7DEEE;
    --secondary-header-color: #52B2FF;
    --description-color: #4E4F5E;
    --secondary-description-color: #4597da;
    --no-text-color: #40424d;
    --input-color: #313339;
    --outline-color: #1f2d3b;
    --title:#4d4f58;
    --page-pad: 16px;
}

/*Страница*/
.btnadd-page {
    color:var(--secondary-description-color);
    font-size:14px;
    font-family:Inter-SemiBold;
    border-radius:12px;
    padding: 12px 32px;
    background-color:var(--background-fill);
    cursor:pointer;
}

.btnadd-page:hover {
    background: var(--background-fill-hover);;
}

.content-page {
    display:grid;
    gap:9px;
}

.cont-page {
    display:grid;
    gap:6px;
}

.flex-page {
    padding:9px 6px 0 6px;
    display:flex;
    position: relative;
    gap:12px;
}

.flex-page img {
    width:32px;
    height:32px;
    border-radius:9px;
}

.fleximg-page {
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:var(--background-fill);
    border-radius:9px;
}

.fleximg-page svg path {
    fill:var(--secondary-description-color);
}

/* Сама ссылка — вне потока, занимает всю карточку */
.flex-page .stretched-link {
  position: absolute;
  inset: 0;                  /* top:0; right:0; bottom:0; left:0 */
  z-index: 1;                /* ниже кнопок, выше фона */
  display: block;
  color: inherit;
  text-decoration: none;
}

.allinfocont-page {
    display:flex;
    border-bottom:1px solid var(--background-fill);
    padding:0 0 12px 0;
    flex:1;
    align-items:center;
}

.infocont-page {
    display:grid;
    gap:2px;
}

.title-pageinfo {
    color:var(--header-color);
    font-size:14px;
    font-family:Inter-Bold;
}

.status-page {
    color:var(--secondary-description-color);
    font-size:11px;
    font-family:Inter-SemiBold;
}

.btncont-page {
    display:flex;
    gap:6px;
    margin-left:auto;
}

.btncont-page,
.btncont-page * {
  position: relative;
  z-index: 2;
}


.btnstatus-page {
    background-color:var(--background-fill);
    display:flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:6px;
    cursor:pointer;
}

.btnstatus-page:hover {
    background: var(--background-fill-hover);
}

.btnstatus-page.is-loading { opacity: .6; pointer-events: none; }

.btnstatus-page.is-on svg path { fill: var(--secondary-description-color);  }

.btnstatus-page:not(.is-on) svg path { fill: var(--secondary-background-fill); } 

.btnedit-page {
    background-color:var(--background-fill);
    display:flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:6px;
    cursor:pointer;
}

.btnedit-page:hover {
    background: var(--background-fill-hover);;
}

.btnedit-page svg rect,
.btnedit-page svg path{
    fill:var(--secondary-description-color);
}

.btn-delete-format.is-disabled { opacity:.6; pointer-events:none; }


/*Загрузчик*/
.preloader{
  position: fixed;
  inset: 0;
  background: var(--background);
  display: grid;
  place-items: center;
  z-index: 9999;
  transition: opacity .3s ease, visibility .3s ease;
}
.preloader.preloader--hide{
  opacity: 0;
  visibility: hidden;
}

.spinner{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: var(--secondary-description-color);
  border-right-color: var(--secondary-description-color);
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .spinner{ animation-duration: 1.6s; }
}

header{
	font-size: 16px;
	height:52px;
	width:100%;
	color:white;
}

.first-head {
    display: flex;
    align-items: center;
    height:52px;
}

.logo-main {
    display: flex;
    align-items: center;
}

.logo-main svg .logo-svg {
  fill: var(--secondary-header-color);
}

.header-admininfo {
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:9px;
}

.header-name {
    color:var(--header-color);
    font-size:15px;
    font-family:Inter-Bold;
}

.header-admininfo img {
    width:32px;
    height:32px;
    border-radius:50%;
}
    
.main-cont {
    margin-top:16px;
    display:grid;
    gap:24px;
}

.title-cont {
    display:grid;
    gap:16px;
    justify-items:center;
}

.logo-page {
    width:96px;
    height:96px;
    background-color:var(--background-fill);
    border-radius:18px;
}

.title-page {
    font-family:Inter-SemiBold;
    font-size:16px;
    color:var(--secondary-header-color);
}

.content-cont {
    display:grid;
    gap:16px;
}

.dop-cont {
    display:grid;
    gap:9px;
}

.title-content {
    font-size:11px;
    font-family:Inter-SemiBold;
    color:var(--secondary-description-color);
}

.content-grid {
    display:grid;
    gap:6px;
    grid-template-columns: repeat(2, 1fr);
}

.valut-flex {
    display:flex;
    padding:9px 6px 0 6px;
    gap:9px;
}

.icon-index {
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:var(--background-fill);
    width:32px;
    height:32px;
    border-radius:9px;
}

.icon-index svg .index-color{
    fill:var(--secondary-description-color);
}


.valut-info {
    display:grid;
    gap:3px;
    padding:0 0 16px 0;
    border-bottom:1px solid var(--background-fill);
    flex:1;
}

.price-valut {
    font-family:Inter-Bold;
    font-size:14px;
    color:var(--header-color);
}

.name-valut {
    color:var(--secondary-description-color);
    font-family:Inter-SemiBold;
    font-size:11px;   
}

.chapter-flex {
    display:flex;
    gap:12px;
    align-items:center;
    padding:7px 6px;
    cursor:pointer;
    border-radius:9px;
}

.chapter-flex:hover {
    background: var(--background-fill-hover);
}

.icon-indexchapter {
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:var(--background-fill);
    width:32px;
    height:32px;
    border-radius:9px;
}

.icon-indexchapter svg path {
  fill: var(--secondary-description-color);
}

.title-chapter {
    font-size:14px;
    color:var(--header-color);
    font-family:Inter-Bold;
}

.tech-flex {
    display:flex;
    gap:9px;
    align-items:center;
    padding:9px 6px;
}

.tech-title {
    font-size:14px;
    font-family:Inter-SemiBold;
    color:var(--header-color:);
}

.settigns-switchlock-active {
    padding: 3px;
    width: 41px;
    height: 22px;                
    border-radius: 999px;
    background-color: var(--background-fill);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: background-color .2s ease;
    margin-left:auto;
}

.circle-switch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--secondary-background-fill);
    transform: translateX(0); 
    transition: transform .22s ease, background-color .2s ease, box-shadow .2s ease;
}

.settigns-switchlock-active.is-on {
    background-color: var(--secondary-description-color);
}
.settigns-switchlock-active.is-on .circle-switch {
    transform: translateX(19px); 
    background-color: #fff;     
}

.settigns-switchlock-active:active .circle-switch {
    box-shadow: 0 0 0 8px rgba(0,0,0,.06);
}

@media (prefers-reduced-motion: reduce) {
    .settigns-switchlock-active, .circle-switch { transition: none !important; }
}


/*Раздел*/

.btnadd-section {
    color:var(--secondary-description-color);
    font-size:14px;
    font-family:Inter-SemiBold;
    border-radius:12px;
    padding: 12px 32px;
    background-color:var(--background-fill);
    cursor:pointer;
}

.btnadd-section:hover {
    background: var(--background-fill-hover);;
}

.content-section {
    display:grid;
    gap:9px;
}

.cont-section {
    display:grid;
    gap:6px;
}

.flex-section {
    padding:9px 6px 0 6px;
    display:flex;
    position: relative;
    gap:12px;
}

.flex-section img {
    width:32px;
    height:32px;
    border-radius:9px;
}

/* Сама ссылка — вне потока, занимает всю карточку */
.flex-section .stretched-link {
  position: absolute;
  inset: 0;                  /* top:0; right:0; bottom:0; left:0 */
  z-index: 1;                /* ниже кнопок, выше фона */
  display: block;
  color: inherit;
  text-decoration: none;
}

.flex-section.is-off {
  opacity: .5;
  transition: opacity .15s ease;
}

.allinfocont-section {
    display:flex;
    border-bottom:1px solid var(--background-fill);
    padding:0 0 12px 0;
    flex:1;
    align-items:center;
}

.infocont-section {
    display:grid;
    gap:2px;
}

.title-section {
    color:var(--header-color);
    font-size:14px;
    font-family:Inter-Bold;
}

.status-section {
    color:var(--secondary-description-color);
    font-size:11px;
    font-family:Inter-SemiBold;
}

.btncont-section {
    display:flex;
    gap:6px;
    margin-left:auto;
}

.btncont-section,
.btncont-section * {
  position: relative;
  z-index: 2;
}


.btnstatus-section {
    background-color:var(--background-fill);
    display:flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:6px;
    cursor:pointer;
}

.btnstatus-section:hover {
    background: var(--background-fill-hover);
}

.btnstatus-section svg path { fill: var(--secondary-description-color);  }

.btnedit-section {
    background-color:var(--background-fill);
    display:flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:6px;
    cursor:pointer;
}

.btnedit-section:hover {
    background: var(--background-fill-hover);;
}

.btnedit-section svg rect,
.btnedit-section svg path{
    fill:var(--secondary-description-color);
}

.btneditimg-section {
    position: relative;               /* ВАЖНО */
    background-color: var(--background-fill);
    display: inline-flex;             /* или flex, как нужно */
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden; 
}

.btneditimg-section:hover {
    background: var(--background-fill-hover);;
}

.btneditimg-section svg rect,
.btneditimg-section svg path{
    fill:var(--secondary-description-color);
}


/*Создание раздела*/

.mainsection-cont {
    margin-top:16px;
    display:grid;
    gap:auto;
}

.section-cont {
    display:grid;
    gap:20px;
}

.editinginfo-section {
    display:flex;
}

.firstcont-section {
    display:flex;
    align-items:center;
    gap:12px;
}

.img-section {
    width:48px;
    height:48px;
    border-radius:12px;
    background-color:var(--background-fill);
}

.editsect-info {
    display:grid;
    gap:6px;
}

.doptitle-input {
    display:grid;
    gap:8px;
}

.editname-section {
    color:var(--header-color);
    font-size:14px;
    font-family:Inter-Bold;
}

.titlecost-input {
    color:var(--header-color);
    font-family:Inter-Bold;
    font-size:15px;
    display:flex;
    align-items:center;
    gap:6px;
}

.editsect-status {
    font-size:12px;
    font-family:Inter-SemiBold;
    color:var(--secondary-description-color);
}

.secondcont-section {
    display:flex;
    gap:6px;
    align-items:center;
    margin-left:auto;
}

.dopgapinput-cont {
    display:grid;
    gap:16px;
}

.input-maincont {
    display:grid;
    gap:9px;
}

.input-cont {
    display:grid;
    gap:6px;
}

.input-contsection {
    display:flex;
    border-radius:12px;
    background-color:var(--background-fill);
    flex:1;
    padding:13.5px 12px;
    gap:16px;
}

.input-section {
    color:var(--header-color);
    border: 0;
    font-size:14px;
    font-family:Inter-SemiBold;
    outline: none;
    flex:1 1 auto;
    background-color: transparent;
}

.input-section::placeholder {
  color: var(--no-text-color);     
  opacity: 1;          
}

.input-section[type="number"]::-webkit-outer-spin-button,
.input-section[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-section[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.btnadd-input {
    display:flex;
    color:var(--secondary-description-color);
    font-size:14px;
    font-family:Inter-SemiBold;
    width:100%;
    text-align:center;
    justify-content:center;
    background-color:var(--background-fill);
    padding:13px 0;
    border-radius:12px;
    cursor:pointer;
}

.btnadd-input:hover {
    background: var(--background-fill-hover);
}

.btndelete-input {
    margin-left:auto;
    width:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    height:24px;
    border-radius:6px;
    background-color:var(--background-fill-hover);
    cursor:pointer;
}

.btndelete-input svg rect {
    fill:var(--secondary-description-color);
}

/* ====== КАСТОМНЫЙ SELECT ====== */
.custom-select{ position:relative; width:100%; }

.custom-select select{
  flex:1 1 auto;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:transparent; border:0; outline:none;
  font-size:14px; font-family:Inter-SemiBold;
  color:inherit;
}
.custom-select.cs-ready select{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; overflow:hidden; pointer-events:none;
}

.cs-trigger{
  flex:1 1 auto;
  display:inline-block;
  padding:0 34px 0 0;            /* место под стрелку справа */
  border:0; background:transparent; outline:none;
  text-align:left; cursor:pointer; user-select:none;
  font-size:14px; line-height:1.2;
  font-family:Inter-SemiBold;
  color:var(--no-text-color);     /* «плейсхолдер» до выбора */
  min-height:20px;
  -webkit-tap-highlight-color:transparent;
}
.custom-select.has-value .cs-trigger{ color:var(--header-color); }

.cs-arrow{
  position:absolute; right:14px; top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  pointer-events:none;
  transition:transform .15s ease;
}
.custom-select.is-open .cs-arrow{ transform:translateY(-50%) rotate(180deg); }

.cs-arrow svg path {
    fill:var(--secondary-description-color);
}

.cs-list{
  display:none;
  position:absolute;
  left:44px;        
  right:10px;                    
  top:calc(100% + 6px);
  z-index:1000;
  background:var(--background-fill);
  border-radius:10px;
  padding:6px 0;
  max-height:240px;
  overflow:auto;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
}
.custom-select.is-open .cs-list{ display:block; }

.cs-option{
  padding:8px 12px;
  color:var(--header-color);
  font-size:14px;
  font-family:Inter-SemiBold;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}

.switch-section {
    display:flex;
    align-items:center;
    padding:6px 12px;
}

.hidetitle-section {
    font-size:12px;
    font-family:Inter-SemiBold;
    color:var(--header-color);
}


.createsection-btn{
  position: fixed;
  inset-inline: var(--page-pad);    /* = left/right */
  bottom: 16px;                     /* твой отступ снизу */
}

.btn-section{
    color:var(--secondary-description-color);
    font-size:14px;
    font-family:Inter-SemiBold;
    background-color:var(--background-fill);
    border-radius:12px;
    border:0;
    padding:13px 0;
    width:100%;
    cursor:pointer;
}

.btn-section:hover {
    background: var(--background-fill-hover);
}

/*Категории*/

.cont-category {
    display:grid;
    gap:6px;
}

.itemcont-category {
    display:grid;
    gap:6px;
}

.item-category {
    padding:9px 6px 0 6px;
    display:flex;
    position: relative;
    gap:12px;
}

.item-category .stretched-link {
  position: absolute;
  inset: 0;                  /* top:0; right:0; bottom:0; left:0 */
  z-index: 1;                /* ниже кнопок, выше фона */
  display: block;
  color: inherit;
  text-decoration: none;
}

.item-category.is-off {
  opacity: .5;
  transition: opacity .15s ease;
}

.item-category img {
    width:32px;
    height:32px;
    border-radius:9px;
}

.mainbtncont-category {
    display:flex;
    gap:16px;
    margin-left:auto;
    align-items:center;
}

.btncont-category {
    display:flex;
    gap:6px;
    align-items:center;
}

.mainbtncont-category,
.mainbtncont-category * {
  position: relative;
  z-index: 2;
}

.cs-arrow-category svg path {
    fill:var(--secondary-description-color);
}

.cs-arrow-category { transition: transform .2s ease; cursor:pointer; }
.cs-arrow-category[aria-expanded="true"] svg { transform: rotate(180deg); }

.dopitemcont-category {
    padding-left:21px;
    display:grid;
    gap:6px;
}

/*Добавление категории*/

.input-continfocategory {
    display:flex;
    align-items:stretch;
    border-radius:12px;
    background-color:var(--background-fill);
    flex:1;
    padding:13.5px 12px;
    height:147px;
}

.input-infocategory {
    color:var(--header-color);
    border: 0;
    width:100%;
    height:100%; 
    font-size:14px;
    font-family:Inter-SemiBold;
    outline: none;
    flex:1 1 auto;
    background-color: transparent;
    resize:none;
    overflow-y:auto;
    overflow-x:hidden;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.input-infocategory::placeholder {
  color: var(--no-text-color);     
  opacity: 1;          
}

.warning-category {
    color:var(--description-color);
    font-size:11px;
    font-family:Inter-SemiBold;
    margin-top: 6px;
}

.notecont-category {
    display:grid;
    gap:9px;
}

.inputnotecont-category {
    display:grid;
    gap:12px;
}

.titlenote-category {
    font-family:Inter-SemiBold;
    font-size:11px;
    color:var(--secondary-description-color);
}

.inputnote-category {
    display:grid;
    gap:6px;
}

#infoList > .inputnote-category { margin-top: 10px; }
#infoList > .inputnote-category:first-child { margin-top: 0; }

.btnadd-category {
    display:flex;
    color:var(--secondary-description-color);
    font-size:14px;
    font-family:Inter-SemiBold;
    width:100%;
    text-align:center;
    justify-content:center;
    background-color:var(--background-fill);
    padding:14px 0;
    border-radius:12px;
    cursor:pointer;
}

.btnadd-category:hover {
    background: var(--background-fill-hover);
}

.tag-pill {
    display:flex;
    align-items:center;
    width:100%;
    padding:14px 12px;
    border-radius:12px;
    font-family:Inter-SemiBold;
    font-size:14px;
    color:var(--header-color);
    background-color:var(--background-fill);
}

.tag-pill__remove{
  margin-left: auto;           
  display: flex;
  align-items: center;         
  justify-content: center;     
  border: none;
  background: transparent;
  cursor: pointer;
}

.tag-pill__remove svg rect {
    fill:var(--secondary-description-color);
}


/*Курс валют*/

.svg-currency {
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:9px;
    background-color:var(--background-fill);
}


.svg-currency svg rect {
  fill: var(--secondary-description-color);
}

.allinfocont-currency {
    display:flex;
    border-bottom:1px solid var(--background-fill);
    padding:0 0 12px 0;
    flex:1;
    align-items:center;
}

.infocont-currency {
    display:grid;
    gap:2px;
}

.title-currency {
    color:var(--header-color);
    font-size:14px;
    font-family:Inter-Bold;
}

.date-currency {
    color:var(--secondary-description-color);
    font-size:11px;
    font-family:Inter-SemiBold;
}

.date-currency span{
    color:var(--description-color);
}

.currency-rates {
    display:flex;
    margin-left:auto;
    gap:12px;
    align-items:center;
}

.price-currency {
    font-family:Inter-Bold;
    font-size:15px;
    color:var(--header-color);
}

.btnedit-currency {
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;  
    background-color:var(--background-fill);
    cursor:pointer;
}

.btnedit-currency.is-disabled {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}
.btnedit-currency.is-disabled svg { opacity: .9; }

.btnedit-currency:hover {
    background: var(--background-fill-hover);
}


.btnedit-currency svg path {
    fill: var(--secondary-description-color);
}

/* Модалка */
.cm { position: fixed; inset: 0; display: none; z-index: 12000; }
.cm.cm--open { display: block; }
.cm__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.cm__dialog {
  position: relative; margin: 10vh auto 0; width: min(280px, 80vw);
  background: var(--background); color: var(--text-color);
  border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,.25);
  overflow: hidden; transform: translateY(8px); opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}
.cm.cm--open .cm__dialog { opacity: 1; transform: none; }

.cm__body { padding:16px; }
.cm__label { display:grid; gap:13px; font-size:13px; color: var(--secondary-description-color); }
.cm__input {
  padding: 10px 12px; border:1px solid var(--background-fill); border-radius:12px;
  background: var(--background); color: var(--header-color); font-size:14px; outline: none;
}
.cm__input:focus { border-color:#4597DA; box-shadow:0 0 0 3px rgba(69,151,218,.2); }

.cm__footer { display:flex; gap:8px; justify-content:center; padding:0 16px 16px; }
.cm__btn { padding:10px 14px; border:none; border-radius:12px; cursor:pointer; background:var(--background-fill); color:var(--secondary-description-color); font-family: Inter-SemiBold; }
.cm__btn--ghost { background:var(--background-fill); color:var(--secondary-description-color); }

.titleinput-currency {
    font-family:Inter-SemiBold;
    font-size:15px;
    color:var(--secondary-description-color);
    text-align:center;
}

.input-contcurrency {
    display:flex;
    border-radius:12px;
    background-color:var(--background-fill);
    flex:1;
    padding:10px 8px;
    gap:8px;
}

.input-contcurrency svg path {
    fill: var(--secondary-description-color);
}

.input-currency {
    color:var(--header-color);
    border: 0;
    font-size:14px;
    font-family:Inter-SemiBold;
    outline: none;
    flex:1 1 auto;
    background-color: transparent;
}

.input-currency::placeholder {
  color: var(--no-text-color);     
  opacity: 1;          
}

/*Товары*/

.mainbtncont-title {
    display:grid;
    gap:6px;
    width:100%;
}

.btncont-title {
    display:flex;
    gap:6px;
    width:100%;
}

.btntitle-category {
    display:flex;
    color:var(--secondary-description-color);
    font-size:14px;
    font-family:Inter-SemiBold;
    border-radius:12px;
    background-color:var(--background-fill);
    cursor:pointer;
    width:100%;
    align-items: center;
    padding: 11px 0;
    justify-content: center;
}

.btntitle-category:hover {
    background: var(--background-fill-hover);;
}