:root:root .ct-item {
    position: relative;
    isolation: isolate;
    min-height: 48px;
    margin: 7px 0;
    padding-left: 18px;
    background: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    color: #fff;
}

:root:root .ct-item::before {
    content: "";
    position: absolute;
    inset: -3px -4px;
    z-index: -1;
    pointer-events: none;
    border: 0 solid transparent;
    border-width: 0 28px;
    border-image: url("../images/btn-menu.webp") 0 150 fill / 0 28px stretch;
    transition: opacity 0.18s ease;
}

:root:root .ct-item:hover::before,
:root:root .ct-item.on::before {
    border-image-source: url("../images/btn-menu-on.webp");
}

:root:root .ct-item:hover:not(.on)::before {
    opacity: 0.7;
}

:root:root .ct-item:hover,
:root:root .ct-item.on {
    background: none;
    box-shadow: none;
}

:root:root .ct-item.was-on::before {
    border-image-source: url("../images/btn-menu.webp");
}

:root:root .c-sidebar.is-collapsed .ct-item::before {
    border-width: 0 18px;
    border-image-width: 0 18px;
}

:root:root .c-nb-srv,
:root:root .c-locale__btn,
:root:root .c-notif__btn,
:root:root .c-user {
    position: relative;
    isolation: isolate;
    background: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
}

:root:root .c-nb-srv::before,
:root:root .c-locale__btn::before,
:root:root .c-notif__btn::before,
:root:root .c-user::before {
    content: "";
    position: absolute;
    inset: -4px -6px;
    z-index: -1;
    pointer-events: none;
    border: 0 solid transparent;
    border-width: 0 20px;
    border-image: url("../images/btn-chip.webp") 0 90 fill / 0 20px stretch;
}

:root:root .c-locale__btn,
:root:root .c-notif__btn {
    padding-inline: 18px;
}

:root:root .c-user__avatar {
    position: relative;
    border: 0;
    box-shadow: none;
}

:root:root .c-user__avatar::after {
    content: "";
    position: absolute;
    inset: -9px;
    background: url("../images/avatar-ring.webp") center / 100% 100% no-repeat;
    pointer-events: none;
}

:root:root .g-btn {
    position: relative;
    isolation: isolate;
    min-height: 40px;
    padding-inline: 30px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #fff;
}

:root:root .g-btn::before {
    content: "";
    position: absolute;
    inset: -2px -2px;
    z-index: -1;
    pointer-events: none;
    border: 0 solid transparent;
    border-width: 0 26px;
    border-image: url("../images/btn-red.webp") 0 160 fill / 0 26px stretch;
}

:root:root .g-btn:hover,
:root:root .g-btn--primary:hover,
:root:root .g-btn--action:hover {
    background: none;
    box-shadow: none;
    filter: none;
}

:root:root .g-btn:hover::before {
    border-image-source: url("../images/btn-red-hover.webp");
}

:root:root .g-btn--primary,
:root:root .g-btn--action {
    background: none;
    box-shadow: none;
}

:root:root .g-btn--icon {
    padding-inline: 12px;
}

:root:root .c-field__input,
:root:root .c-cr-field__input,
:root:root .c-select__trigger {
    border: 0 solid transparent;
    border-width: 0 12px;
    border-image: url("../images/field.webp") 0 44 fill / 0 12px stretch;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

:root:root .c-field__input:focus,
:root:root .c-cr-field__input:focus,
:root:root .c-select__trigger:focus {
    box-shadow: none;
    border-image-source: url("../images/field.webp");
    filter: brightness(1.25);
}

:root:root .c-panel,
:root:root .c-card {
    isolation: isolate;
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
}

:root:root .c-panel::before,
:root:root .c-panel::after {
    content: none;
}

:root:root .c-panel::before {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
    pointer-events: none;
    border: 0 solid transparent;
    border-width: 30px;
    border-image: url("../images/frame-panel.webp") 190 fill / 30px stretch;
}

:root:root .c-panel__header {
    position: relative;
    background: none;
    border-bottom: 0;
}

:root:root .c-panel__header::after {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: -4px;
    height: 14px;
    background: url("../images/line.webp") center / 100% 100% no-repeat;
    pointer-events: none;
}

:root:root .c-stats > .c-card {
    --card-art: url("../images/card-bg-accounts.webp");
    background:
        linear-gradient(90deg, rgba(10, 3, 5, 0.82) 0%, rgba(10, 3, 5, 0.38) 45%, rgba(10, 3, 5, 0) 78%),
        var(--card-art) right center / cover no-repeat,
        #0d0507;
    border-radius: 8px;
}

:root:root .c-stats > .c-card:nth-child(2) {
    --card-art: url("../images/card-bg-characters.webp");
}

:root:root .c-stats > .c-card:nth-child(3) {
    --card-art: url("../images/card-bg-balance.webp");
}

:root:root .c-stats > .c-card:nth-child(4) {
    --card-art: url("../images/card-bg-support.webp");
}

:root:root .c-stats > .c-card::before {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: 0;
    pointer-events: none;
    border: 0 solid transparent;
    border-width: 20px;
    border-image: url("../images/frame-card.webp") 96 / 20px stretch;
}

:root:root .c-card__icon {
    background: rgba(8, 2, 3, 0.55);
    border: 1px solid rgba(217, 188, 129, 0.28);
    border-radius: 12px;
    box-shadow: none;
    color: #fff;
}

:root:root .c-mcard,
:root:root .c-create {
    position: relative;
    isolation: isolate;
    background: none;
    border: 0;
    box-shadow: none;
}

:root:root .c-mcard::before,
:root:root .c-create::before {
    content: "";
    position: absolute;
    inset: -10px;
    z-index: -1;
    pointer-events: none;
    border: 0 solid transparent;
    border-width: 54px;
    border-image: url("../images/frame-modal.webp") 200 fill / 54px stretch;
}

:root:root .c-empty-state {
    padding-top: 190px;
    background: url("../images/empty-art.webp") center 14px / auto 170px no-repeat;
}

:root:root .c-empty-state__ornament,
:root:root .c-empty-state__ring,
:root:root .c-empty-state__icon {
    display: none;
}

:root:root .c-divider {
    height: 22px;
    background: url("../images/line.webp") center / 100% 100% no-repeat;
}

:root:root .c-divider > * {
    display: none;
}

:root:root .c-panel__header {
    padding-top: 22px;
}

:root:root .c-stats > .c-card > * {
    position: relative;
    z-index: 2;
}

:root:root .c-panel > * {
    position: relative;
    z-index: 1;
}

:root:root .g-btn--primary::before,
:root:root .g-btn--action::before {
    border-image: url("../images/btn-menu-on.webp") 0 150 fill / 0 24px stretch;
}

:root:root .g-btn--primary:hover::before,
:root:root .g-btn--action:hover::before {
    border-image-source: url("../images/btn-red-hover.webp");
    border-image-slice: 0 160;
}

:root:root .g-btn--sm {
    min-height: 34px;
    padding-inline: 22px;
}

:root:root .g-btn--sm::before {
    border-width: 0 20px;
    border-image-width: 0 20px;
}

:root:root .ct-item {
    margin: 7px 14px 7px 2px;
}

:root:root .ct-item::before,
:root:root .g-btn::before,
:root:root .c-nb-srv::before,
:root:root .c-locale__btn::before,
:root:root .c-notif__btn::before,
:root:root .c-user::before {
    inset: 0;
}

:root:root .c-panel {
    padding: 16px 20px;
}

:root:root .c-panel::before {
    inset: 0;
    border-width: 28px;
    border-image-width: 28px;
}

:root:root .c-stats > .c-card::before {
    inset: 0;
    border-width: 18px;
    border-image-width: 18px;
}

:root:root .g-btn--sm {
    min-height: 32px;
    padding-inline: 14px;
    font-size: 0.78rem;
}

:root:root .g-btn--sm::before {
    border-width: 0 14px;
    border-image-width: 0 14px;
}

:root:root .c-card__action {
    margin-left: auto;
    flex: none;
}

:root:root .c-card__top {
    gap: 8px;
}

:root:root .c-card__meta {
    min-width: 0;
}

:root:root .c-card__footer .g-btn {
    width: 100%;
}

:root:root .c-sidebar {
    background:
        radial-gradient(ellipse 120% 40% at 50% 0%, rgba(150, 14, 24, 0.2), transparent 70%),
        linear-gradient(180deg, rgba(12, 3, 5, 0.62), rgba(6, 2, 3, 0.8)),
        url("../images/side-bg.webp") center / cover no-repeat,
        #060203;
    border-right: 1px solid rgba(217, 188, 129, 0.28);
    box-shadow: 10px 0 40px -10px rgba(0, 0, 0, 0.75), inset -1px 0 0 rgba(217, 188, 129, 0.08);
}

:root:root .c-sidebar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 90, 100, 0.55), transparent);
    pointer-events: none;
}

:root:root .ct-item {
    min-height: 54px;
    padding-left: 18px;
}

:root:root .ct-item::before {
    inset: 0;
    border: 11px solid transparent;
    border-image: url("../images/btn-menu.webp") 46 fill / 11px stretch;
    opacity: 1;
}

:root:root .ct-item:hover::before {
    border-image-source: url("../images/btn-menu-hover.webp");
    opacity: 1;
}

:root:root .ct-item:hover:not(.on)::before {
    opacity: 1;
}

:root:root .ct-item.on::before {
    border-image-source: url("../images/btn-menu-on.webp");
}

:root:root .ct-item.was-on::before {
    border-image-source: url("../images/btn-menu.webp");
}

:root:root .ct-item svg {
    width: 38px;
    height: 38px;
    flex: none;
    visibility: hidden;
}

:root:root .ct-item::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 38px;
    height: 38px;
    margin-top: -19px;
    background: var(--ic, none) center / contain no-repeat;
    pointer-events: none;
}

:root:root .ct-item[data-id="home"] {
    --ic: url("../images/icons/nav-home.webp");
}

:root:root .ct-item[data-id="rating"] {
    --ic: url("../images/icons/nav-rating.webp");
}

:root:root .ct-item[data-id="balance"] {
    --ic: url("../images/icons/nav-balance.webp");
}

:root:root .ct-item[data-id="wiki"] {
    --ic: url("../images/icons/nav-wiki.webp");
}

:root:root .ct-item[data-id="store"] {
    --ic: url("../images/icons/nav-store.webp");
}

:root:root .ct-item[data-id="inventory"] {
    --ic: url("../images/icons/nav-inventory.webp");
}

:root:root .ct-item[data-id="vote"] {
    --ic: url("../images/icons/nav-vote.webp");
}

:root:root .ct-item[data-id="files"] {
    --ic: url("../images/icons/nav-files.webp");
}

:root:root .ct-item[data-id="news"] {
    --ic: url("../images/icons/nav-news.webp");
}

:root:root .ct-item[data-id="roulette"] {
    --ic: url("../images/icons/nav-roulette.webp");
}

:root:root .ct-item[data-id="stream"] {
    --ic: url("../images/icons/nav-stream.webp");
}

:root:root .ct-item[data-id="forum"] {
    --ic: url("../images/icons/nav-forum.webp");
}

:root:root .ct-item[data-id="go_site"] {
    --ic: url("../images/icons/nav-go_site.webp");
}

:root:root .ct-item[data-id="admin_panel"] {
    --ic: url("../images/icons/nav-admin_panel.webp");
}


:root:root .c-sidebar.is-collapsed .ct-item::before {
    border-width: 11px;
    border-image-width: 11px;
}

:root:root .g-btn::before,
:root:root .g-btn--primary::before,
:root:root .g-btn--action::before {
    inset: 0;
    border: 10px solid transparent;
    border-image: url("../images/btn-red.webp") 46 fill / 10px stretch;
}

:root:root .g-btn:hover::before,
:root:root .g-btn--primary:hover::before,
:root:root .g-btn--action:hover::before {
    border-image-source: url("../images/btn-red-hover.webp");
    border-image-slice: 46;
}

:root:root .g-btn:active::before {
    border-image-source: url("../images/btn-red-press.webp");
}

:root:root .g-btn--sm::before {
    border-width: 9px;
    border-image: url("../images/btn-small.webp") 60 fill / 9px stretch;
}

:root:root .g-btn--sm:hover::before {
    border-image-source: url("../images/btn-small.webp");
    filter: brightness(1.3);
}

:root:root .g-btn--icon::before {
    border-width: 8px;
    border-image: url("../images/btn-icon.webp") 60 fill / 8px stretch;
}

:root:root .g-btn {
    min-height: 42px;
    padding-inline: 22px;
}

:root:root .g-btn--sm {
    min-height: 34px;
    padding-inline: 16px;
}

:root:root .c-nb-srv::before,
:root:root .c-locale__btn::before,
:root:root .c-notif__btn::before,
:root:root .c-user::before {
    inset: 0;
    border: 10px solid transparent;
    border-image: url("../images/btn-chip.webp") 46 fill / 10px stretch;
}

:root:root .c-nb-srv,
:root:root .c-locale__btn,
:root:root .c-notif__btn,
:root:root .c-user {
    padding: 6px 16px;
}

:root:root .c-field__input,
:root:root .c-cr-field__input,
:root:root .c-select__trigger {
    border: 9px solid transparent;
    border-image: url("../images/field.webp") 50 fill / 9px stretch;
    padding-top: 6px;
    padding-bottom: 6px;
}

:root:root .c-card__icon {
    width: 58px;
    height: 58px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent center / contain no-repeat;
    box-shadow: none;
}

:root:root .c-card__icon svg {
    visibility: hidden;
}

:root:root .c-stats > .c-card:nth-child(1) .c-card__icon {
    background-image: url("../images/icons/card-accounts.webp");
}

:root:root .c-stats > .c-card:nth-child(2) .c-card__icon {
    background-image: url("../images/icons/card-characters.webp");
}

:root:root .c-stats > .c-card:nth-child(3) .c-card__icon {
    background-image: url("../images/icons/card-balance.webp");
}

:root:root .c-stats > .c-card:nth-child(4) .c-card__icon {
    background-image: url("../images/icons/card-support.webp");
}

:root:root .g-btn::before,
:root:root .g-btn--primary::before,
:root:root .g-btn--action::before,
:root:root .g-btn--shimmer::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    transform: none;
    animation: none;
    opacity: 1;
    background: none;
    box-shadow: none;
    transition: none;
    pointer-events: none;
}

:root:root .g-btn::after,
:root:root .g-btn--shimmer::after {
    display: none;
}

:root:root .g-btn::before,
:root:root .g-btn--shimmer::before,
:root:root .g-btn--primary::before,
:root:root .g-btn--action::before {
    display: block;
}

:root:root .c-card__icon {
    width: 48px;
    height: 48px;
}

:root:root .c-card__top .g-btn--sm {
    min-height: 30px;
    padding-inline: 10px;
    font-size: 0.72rem;
}

:root:root .c-card__top .g-btn--sm::before {
    border-width: 7px;
    border-image-width: 7px;
}

:root:root .c-card__label {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

:root:root .c-panel::before,
:root:root .c-panel::after,
:root:root .c-mcard::before,
:root:root .c-create::before,
:root:root .c-stats > .c-card::before {
    content: none;
    border: 0;
    border-image: none;
}

:root:root .c-panel,
:root:root .c-mcard,
:root:root .c-create {
    padding: 0;
    background: linear-gradient(180deg, rgba(34, 10, 13, 0.8), rgba(13, 5, 7, 0.88));
    border: 1px solid rgba(217, 188, 129, 0.32);
    border-radius: 8px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 0 1px 0 rgba(217, 188, 129, 0.16),
        0 14px 34px -16px rgba(0, 0, 0, 0.9);
}

:root:root .c-panel > * {
    z-index: auto;
}

:root:root .c-panel__header {
    padding-top: 0;
    border-bottom: 1px solid rgba(217, 188, 129, 0.18);
}

:root:root .c-panel__header::after {
    content: none;
}

:root:root .c-stats > .c-card {
    border: 1px solid rgba(217, 188, 129, 0.28);
    border-radius: 8px;
    box-shadow:
        inset 0 1px 0 rgba(217, 188, 129, 0.14),
        0 12px 30px -16px rgba(0, 0, 0, 0.9);
}

:root:root .c-stats > .c-card:hover {
    border-color: rgba(217, 188, 129, 0.5);
}

:root:root .c-card__footer .g-btn::before {
    border-image: url("../images/btn-dark.webp") 46 fill / 10px stretch;
}

:root:root .c-card__footer .g-btn:hover::before {
    border-image-source: url("../images/btn-menu-hover.webp");
}

:root:root .c-divider {
    height: 18px;
}

:root:root .c-stats > .c-card {
    overflow: hidden;
}

:root:root .g-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
}

:root:root .g-btn > * {
    line-height: 1;
}

:root:root .ct-item {
    min-height: 43px;
    margin: 6px 14px 6px 2px;
    padding-top: 0;
    padding-bottom: 0;
}

:root:root .ct-item svg {
    width: 31px;
    height: 31px;
}

:root:root .ct-item::after {
    left: 14px;
    width: 31px;
    height: 31px;
    margin-top: -15px;
}

:root:root .c-sidebar {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.66)),
        url("../images/side-bg.webp") center / cover no-repeat,
        #050505;
    border-right: 1px solid rgba(217, 188, 129, 0.16);
    box-shadow: none;
}

:root:root .c-sidebar::after {
    display: none;
}

:root:root .l-wrapper {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.26) 38%, rgba(0, 0, 0, 0.04) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.5)),
        var(--el-bg) right center / cover fixed no-repeat,
        #050505;
}

:root:root .c-navbar {
    height: 68px;
    min-height: 68px;
    padding-inline: 14px;
    background: linear-gradient(180deg, rgba(34, 10, 13, 0.8), rgba(13, 5, 7, 0.88));
    border: 1px solid rgba(217, 188, 129, 0.32);
    border-radius: 8px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 0 1px 0 rgba(217, 188, 129, 0.16),
        0 14px 34px -16px rgba(0, 0, 0, 0.9);
}

:root:root .l-wrapper {
    background:
        linear-gradient(rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.24)),
        linear-gradient(90deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.3) 38%, rgba(0, 0, 0, 0.08) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.5)),
        var(--el-bg) right center / cover fixed no-repeat,
        #050505;
}

:root:root .l-wrapper {
    background:
        linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)),
        linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.36) 38%, rgba(0, 0, 0, 0.12) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.52)),
        var(--el-bg) right center / cover fixed no-repeat,
        #050505;
}

:root:root .g-btn.g-btn--sm::before,
:root:root .g-btn.g-btn--sm:hover::before,
:root:root .g-btn.g-btn--sm:active::before,
:root:root .g-btn.g-btn--primary.g-btn--sm:hover::before {
    border-width: 9px;
    border-image: url("../images/btn-small.webp") 60 fill / 9px stretch;
}

:root:root .g-btn.g-btn--sm:hover::before {
    filter: brightness(1.3);
}

:root:root .c-card__top .g-btn.g-btn--sm::before,
:root:root .c-card__top .g-btn.g-btn--sm:hover::before,
:root:root .c-card__top .g-btn.g-btn--sm:active::before {
    border-width: 7px;
    border-image: url("../images/btn-small.webp") 60 fill / 7px stretch;
}

:root:root .g-btn.g-btn--icon::before,
:root:root .g-btn.g-btn--icon:hover::before,
:root:root .g-btn.g-btn--icon:active::before {
    border-width: 8px;
    border-image: url("../images/btn-icon.webp") 60 fill / 8px stretch;
}

:root:root .g-btn.g-btn--icon:hover::before {
    filter: brightness(1.3);
}

:root:root .c-divider {
    height: 46px;
    margin: 6px 0;
    background:
        url("../images/line.webp") center / auto 100% no-repeat,
        linear-gradient(90deg, transparent 0%, rgba(217, 188, 129, 0.38) 18%, rgba(217, 188, 129, 0.38) 82%, transparent 100%) center / 100% 1px no-repeat;
}

:root:root .c-panel__header {
    display: flex;
    align-items: center;
    min-height: 60px;
    padding: 14px 22px;
}

:root:root input[type="text"],
:root:root input[type="email"],
:root:root input[type="password"],
:root:root input[type="number"],
:root:root input[type="search"],
:root:root textarea,
:root:root select,
:root:root .c-field__input,
:root:root .c-cr-field__input,
:root:root .c-select__trigger {
    min-height: 46px;
    padding: 12px 16px;
    color: #fff;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.52), rgba(22, 7, 10, 0.62));
    border: 0;
    border-image: none;
    border-radius: 10px;
    box-shadow:
        inset 0 0 0 1px rgba(217, 188, 129, 0.22),
        inset 0 2px 8px rgba(0, 0, 0, 0.45);
    transition: box-shadow 0.18s ease;
}

:root:root input[type="password"],
:root:root .c-cr-field__input[type="password"] {
    padding-right: 46px;
}

:root:root input[type="text"]:focus,
:root:root input[type="email"]:focus,
:root:root input[type="password"]:focus,
:root:root input[type="number"]:focus,
:root:root input[type="search"]:focus,
:root:root textarea:focus,
:root:root select:focus,
:root:root .c-field__input:focus,
:root:root .c-cr-field__input:focus,
:root:root .c-select__trigger:focus {
    border: 0;
    filter: none;
    box-shadow:
        inset 0 0 0 1px rgba(217, 188, 129, 0.65),
        inset 0 2px 8px rgba(0, 0, 0, 0.45),
        0 0 0 3px rgba(217, 188, 129, 0.12);
}

:root:root .c-field__wrap,
:root:root .c-cr-field__wrap {
    background: none;
    border: 0;
    box-shadow: none;
}

:root:root .c-field__toggle,
:root:root .c-cr-field__toggle {
    right: 12px;
    color: var(--stone-500);
}

/* ---- final glossy button set (ica) ---- */
:root:root .ct-item::before {
    inset: 0;
    border: 0 solid transparent;
    border-width: 0 22px;
    border-image: url("../images/btn-menu.webp") 0 60 fill / 0 22px stretch;
    opacity: 1;
}

:root:root .ct-item:hover::before {
    border-image: url("../images/btn-menu-hover.webp") 0 60 fill / 0 22px stretch;
}

:root:root .ct-item.on::before {
    border-image: url("../images/btn-menu-on.webp") 0 60 fill / 0 22px stretch;
}

:root:root .ct-item.was-on::before {
    border-image: url("../images/btn-menu.webp") 0 60 fill / 0 22px stretch;
}

:root:root .ct-item svg {
    visibility: visible;
    width: 31px;
    height: 31px;
    flex: none;
    color: transparent;
    background: var(--ic, none) center / contain no-repeat;
}

:root:root .ct-item svg * {
    display: none;
}

:root:root .ct-item::after {
    content: "";
    position: absolute;
    top: -9px;
    bottom: -9px;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
    margin: 0;
    z-index: 2;
    pointer-events: none;
    background:
        url("../images/dia-menu-top.webp") center 3.7px / 22.5px auto no-repeat,
        url("../images/dia-menu-bottom.webp") center 47.4px / 22.5px auto no-repeat;
}

:root:root .ct-item:hover::after {
    background:
        url("../images/dia-hover-top.webp") center 3.7px / 22.5px auto no-repeat,
        url("../images/dia-hover-bottom.webp") center 47.4px / 22.5px auto no-repeat;
}

:root:root .ct-item.on::after {
    background:
        url("../images/dia-on-top.webp") center 1.7px / 22.5px auto no-repeat,
        url("../images/dia-on-bottom.webp") center 47.4px / 22.5px auto no-repeat;
}

:root:root .ct-item.was-on::after {
    background:
        url("../images/dia-menu-top.webp") center 3.7px / 22.5px auto no-repeat,
        url("../images/dia-menu-bottom.webp") center 47.4px / 22.5px auto no-repeat;
}

:root:root .g-btn::before,
:root:root .g-btn--primary::before,
:root:root .g-btn--action::before,
:root:root .g-btn--shimmer::before {
    border: 0 solid transparent;
    border-width: 0 21px;
    border-image: url("../images/btn-red.webp") 0 120 fill / 0 21px stretch;
    filter: none;
}

:root:root .g-btn:hover::before,
:root:root .g-btn--primary:hover::before,
:root:root .g-btn--action:hover::before,
:root:root .g-btn--shimmer:hover::before {
    border-image: url("../images/btn-red-hover.webp") 0 120 fill / 0 21px stretch;
}

:root:root .g-btn:active::before,
:root:root .g-btn--primary:active::before,
:root:root .g-btn--action:active::before,
:root:root .g-btn--shimmer:active::before {
    border-image: url("../images/btn-red-press.webp") 0 120 fill / 0 21px stretch;
}

:root:root .g-btn.g-btn--sm::before,
:root:root .g-btn.g-btn--sm:hover::before,
:root:root .g-btn.g-btn--sm:active::before,
:root:root .g-btn.g-btn--primary.g-btn--sm::before,
:root:root .g-btn.g-btn--primary.g-btn--sm:hover::before {
    border: 12px solid transparent;
    border-image: url("../images/btn-small.webp") 70 fill / 12px stretch;
}

:root:root .g-btn.g-btn--sm:hover::before {
    filter: brightness(1.3);
}

:root:root .c-card__top .g-btn.g-btn--sm::before,
:root:root .c-card__top .g-btn.g-btn--sm:hover::before,
:root:root .c-card__top .g-btn.g-btn--sm:active::before {
    border: 9px solid transparent;
    border-image: url("../images/btn-small.webp") 70 fill / 9px stretch;
}

:root:root .g-btn.g-btn--icon::before,
:root:root .g-btn.g-btn--icon:hover::before,
:root:root .g-btn.g-btn--icon:active::before {
    border: 12px solid transparent;
    border-image: url("../images/btn-icon.webp") 110 fill / 12px stretch;
}

:root:root .g-btn.g-btn--icon:hover::before {
    filter: brightness(1.3);
}

:root:root .c-card__footer .g-btn::before,
:root:root .c-card__footer .g-btn:hover::before,
:root:root .c-card__footer .g-btn:active::before {
    border-image: url("../images/btn-dark.webp") 0 120 fill / 0 21px stretch;
}

:root:root .c-card__footer .g-btn:hover::before {
    filter: brightness(1.35);
}

:root:root .c-nb-srv::before,
:root:root .c-locale__btn::before,
:root:root .c-notif__btn::before,
:root:root .c-user::before {
    border: 0 solid transparent;
    border-width: 0 20px;
    border-image: url("../images/btn-chip.webp") 0 100 fill / 0 20px stretch;
}

/* ---- caps tuned to exact plate proportions ---- */
:root:root .ct-item::before {
    border-width: 0 23px;
    border-image: url("../images/btn-menu.webp") 0 70 fill / 0 23px stretch;
}

:root:root .ct-item:hover::before {
    border-image: url("../images/btn-menu-hover.webp") 0 74 fill / 0 23px stretch;
}

:root:root .ct-item.on::before {
    border-image: url("../images/btn-menu-on.webp") 0 61 fill / 0 23px stretch;
}

:root:root .ct-item.was-on::before {
    border-image: url("../images/btn-menu.webp") 0 70 fill / 0 23px stretch;
}

:root:root .g-btn::before,
:root:root .g-btn--primary::before,
:root:root .g-btn--action::before,
:root:root .g-btn--shimmer::before,
:root:root .c-card__footer .g-btn::before {
    border-width: 0 22px;
    border-image: url("../images/btn-red.webp") 0 110 fill / 0 22px stretch;
    filter: none;
}

:root:root .g-btn:hover::before,
:root:root .g-btn--primary:hover::before,
:root:root .g-btn--action:hover::before,
:root:root .g-btn--shimmer:hover::before,
:root:root .c-card__footer .g-btn:hover::before {
    border-image: url("../images/btn-red-hover.webp") 0 87 fill / 0 22px stretch;
    filter: none;
}

:root:root .g-btn:active::before,
:root:root .g-btn--primary:active::before,
:root:root .g-btn--action:active::before,
:root:root .g-btn--shimmer:active::before,
:root:root .c-card__footer .g-btn:active::before {
    border-image: url("../images/btn-red-press.webp") 0 100 fill / 0 22px stretch;
}

:root:root .g-btn.g-btn--sm::before,
:root:root .g-btn.g-btn--sm:hover::before,
:root:root .g-btn.g-btn--sm:active::before,
:root:root .g-btn.g-btn--primary.g-btn--sm::before,
:root:root .g-btn.g-btn--primary.g-btn--sm:hover::before {
    border: 9px solid transparent;
    border-image: url("../images/btn-small.webp") 55 fill / 9px stretch;
}

:root:root .c-card__top .g-btn.g-btn--sm::before,
:root:root .c-card__top .g-btn.g-btn--sm:hover::before,
:root:root .c-card__top .g-btn.g-btn--sm:active::before {
    border: 8px solid transparent;
    border-image: url("../images/btn-small.webp") 55 fill / 8px stretch;
}

:root:root .g-btn.g-btn--icon::before,
:root:root .g-btn.g-btn--icon:hover::before,
:root:root .g-btn.g-btn--icon:active::before {
    border: 9px solid transparent;
    border-image: url("../images/btn-icon.webp") 55 fill / 9px stretch;
}

:root:root .c-nb-srv::before,
:root:root .c-locale__btn::before,
:root:root .c-notif__btn::before,
:root:root .c-user::before {
    border-width: 0 24px;
    border-image: url("../images/btn-chip.webp") 0 100 fill / 0 24px stretch;
}