/* Phosphor Duotone — цветные иконки по всему сайту */
.ui-icon {
  display: inline-block;
  vertical-align: -0.125em;
  font-size: 1.15em;
  line-height: 1;
  speak: never;
}

.ui-icon--accent {
  --ph-duotone-color: #fe2c55;
  --ph-duotone-color-secondary: #ff8fab;
}

.ui-icon--cyan {
  --ph-duotone-color: #25f4ee;
  --ph-duotone-color-secondary: #67e8f9;
}

.ui-icon--amber {
  --ph-duotone-color: #fbbf24;
  --ph-duotone-color-secondary: #fde68a;
}

.ui-icon--violet {
  --ph-duotone-color: #a78bfa;
  --ph-duotone-color-secondary: #c4b5fd;
}

.ui-icon--rose {
  --ph-duotone-color: #fb7185;
  --ph-duotone-color-secondary: #fda4af;
}

.ui-icon--lime {
  --ph-duotone-color: #a3e635;
  --ph-duotone-color-secondary: #d9f99d;
}

.ui-icon--sky {
  --ph-duotone-color: #38bdf8;
  --ph-duotone-color-secondary: #7dd3fc;
}

.ui-icon--orange {
  --ph-duotone-color: #fb923c;
  --ph-duotone-color-secondary: #fdba74;
}

.ui-icon--mint {
  --ph-duotone-color: #34d399;
  --ph-duotone-color-secondary: #6ee7b7;
}

.panel-nav__icon .ui-icon,
.panel-hnav__item-icon .ui-icon,
.admin-tile__icon .ui-icon {
  font-size: 1.35rem;
}

.landing-icon-wrap {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--app-accent-soft);
  margin-bottom: 0.85rem;
}

.landing-icon-wrap .ui-icon {
  font-size: 1.65rem;
}

.landing-icon-wrap--cyan { background: rgba(37, 244, 238, 0.12); }
.landing-icon-wrap--violet { background: rgba(167, 139, 250, 0.14); }
.landing-icon-wrap--amber { background: rgba(251, 191, 36, 0.14); }
.landing-icon-wrap--sky { background: rgba(56, 189, 248, 0.14); }