.nav__item{
  display: grid;
  grid-template-columns: var(--icon-slot) 1fr;
  align-items: center;
  gap: 10px;
  height: var(--nav-item-h);
  padding: 0 10px;
  border-radius: var(--control-r);
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--text);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.nav__item:hover{
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-color: color-mix(in srgb, var(--text) 10%, transparent);
}

.nav__item.is-active{
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
}

.nav__icon{
  width: var(--icon-slot);
  height: var(--icon-slot);
  border-radius: var(--iconbtn-r);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex: 0 0 auto;
}

.nav__text{
  font-size: 14px;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav__item.is-active .nav__text{
  color: var(--text);
}

.icon{
  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
  background-color: var(--muted);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-mode: alpha;
}

.nav__item.is-active .icon{
  background-color: var(--text);
}

.logoMark{
  width: var(--logo-size);
  height: var(--logo-size);
  display: block;
  background-color: var(--text);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-mode: alpha;
  -webkit-mask-image: url("../img/logo_currentColor.svg");
  mask-image: url("../img/logo_currentColor.svg");
}

.icon--down{
  -webkit-mask-image: url("../img/banknote-arrow-down.svg");
  mask-image: url("../img/banknote-arrow-down.svg");
}

.icon--up{
  -webkit-mask-image: url("../img/banknote-arrow-up.svg");
  mask-image: url("../img/banknote-arrow-up.svg");
}

.icon--history{
  -webkit-mask-image: url("../img/history.svg");
  mask-image: url("../img/history.svg");
}

.icon--pencil{
  -webkit-mask-image: url("../img/pencil.svg");
  mask-image: url("../img/pencil.svg");
}

.icon--user{
  -webkit-mask-image: url("../img/user.svg");
  mask-image: url("../img/user.svg");
}

.icon--theme{
  -webkit-mask-image: url("../img/contrast.svg");
  mask-image: url("../img/contrast.svg");
}

.btn{
  height: var(--control-h);
  border-radius: var(--control-r);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  color: var(--text);
  font-weight: 600;
  letter-spacing: .1px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}

.input{
  width: 100%;
  height: var(--control-h);
  border-radius: var(--control-r);
  border: 1px solid var(--border);
  background: var(--input-bg);
  padding: 0 14px;
  color: var(--text);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.input:focus{
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  box-shadow: 0 0 0 6px var(--input-focus);
}

.card{
  width: 100%;
  max-width: 440px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--card-bg) 88%, transparent);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  padding: 22px;
}

.panel{
  max-width: 980px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card-bg);
  padding: 18px;
}