:root {
    --mxt-icon-ink: var(--mx-color-ink-900, var(--text-primary, #243330));
    --mxt-icon-sage: var(--mx-color-sage-500, var(--sage-primary, #738c81));
    --mxt-icon-jade: var(--mx-color-jade-500, var(--jade-primary, #698278));
    --mxt-icon-gold: var(--mx-color-gold-500, var(--gold-primary, #8a6f59));
    --mxt-icon-rose: var(--mx-color-rose-400, var(--coral-soft, #d5a4a1));
    --mxt-icon-surface: rgba(255, 255, 255, 0.78);
    --mxt-icon-surface-strong: rgba(255, 255, 255, 0.92);
    --mxt-icon-border: rgba(115, 140, 129, 0.2);
    --mxt-icon-glow: 0 14px 34px rgba(75, 101, 93, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.mxt-svg-icon {
    display: block;
    width: 1em;
    height: 1em;
    color: currentColor;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.mxt-icon-shell,
:where(.icon-container, .scale-icon, .feature-icon, .room-icon, .stat-icon, .history-icon, .landscape-icon, .stat-card-icon, .default-cover-icon, .type-icon, .comparison-icon) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mxt-icon-jade) !important;
    background:
        radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 42%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(239, 244, 240, 0.72) 54%, rgba(230, 224, 214, 0.56)) !important;
    border: 1px solid var(--mxt-icon-border) !important;
    box-shadow: var(--mxt-icon-glow) !important;
}

.mxt-icon-shell::before,
:where(.icon-container, .scale-icon, .feature-icon, .room-icon, .stat-icon, .history-icon, .landscape-icon, .stat-card-icon, .default-cover-icon, .type-icon, .comparison-icon)::before {
    content: "";
    position: absolute;
    inset: 5px;
    z-index: -1;
    border-radius: inherit;
    background:
        radial-gradient(circle at 68% 72%, rgba(138, 111, 89, 0.18), rgba(138, 111, 89, 0) 48%),
        radial-gradient(circle at 24% 24%, rgba(115, 140, 129, 0.18), rgba(115, 140, 129, 0) 52%);
    opacity: 0.84;
}

.mxt-icon-shell::after,
:where(.icon-container, .scale-icon, .feature-icon, .room-icon, .stat-icon, .history-icon, .landscape-icon, .stat-card-icon, .default-cover-icon, .type-icon, .comparison-icon)::after {
    content: "";
    position: absolute;
    inset: auto 16% 10% 16%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(138, 111, 89, 0.42), transparent);
    opacity: 0.56;
}

:where(.icon-container, .scale-icon, .feature-icon, .room-icon, .stat-icon, .history-icon, .landscape-icon, .stat-card-icon, .default-cover-icon, .type-icon, .comparison-icon) svg,
:where(.icon-container, .scale-icon, .feature-icon, .room-icon, .stat-icon, .history-icon, .landscape-icon, .stat-card-icon, .default-cover-icon, .type-icon, .comparison-icon) .mxt-svg-icon {
    position: relative;
    z-index: 1;
    width: 54%;
    height: 54%;
    color: currentColor !important;
    filter: drop-shadow(0 5px 10px rgba(75, 101, 93, 0.12));
}

.icon-container {
    color: var(--mxt-icon-jade) !important;
}

.scale-icon,
.feature-icon,
.room-icon {
    color: var(--mxt-icon-sage) !important;
}

.stat-icon,
.history-icon,
.stat-card-icon {
    color: var(--mxt-icon-gold) !important;
}

.landscape-icon,
.type-icon,
.comparison-icon {
    color: var(--mxt-icon-jade) !important;
}

.nav-item-icon {
    flex: 0 0 auto;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: rgba(75, 101, 93, 0.92) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(238, 244, 240, 0.46)) !important;
    border: 1px solid rgba(115, 140, 129, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    font-size: 18px;
    line-height: 1;
}

.nav-item-icon .mxt-svg-icon {
    width: 17px;
    height: 17px;
}

:where(.nav-item.active, .nav-item:hover) .nav-item-icon {
    color: var(--mxt-icon-gold) !important;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 44%),
        linear-gradient(145deg, rgba(255, 250, 240, 0.92), rgba(233, 225, 215, 0.62)) !important;
    border-color: rgba(138, 111, 89, 0.24);
}

.stat-card-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
    font-size: 22px;
}

.stat-card-icon .mxt-svg-icon {
    width: 23px;
    height: 23px;
}

.default-cover-icon {
    width: 100%;
    height: 100%;
    min-height: 132px;
    border-radius: inherit;
    font-size: clamp(34px, 6vw, 54px);
}

.default-cover-icon .mxt-svg-icon {
    width: 44px;
    height: 44px;
}

.mxt-inline-icon {
    display: inline-flex;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.2em;
    color: var(--mxt-icon-sage);
}

.mxt-inline-icon .mxt-svg-icon {
    width: 100%;
    height: 100%;
}

button .mxt-svg-icon,
a .mxt-svg-icon {
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    :where(.platform-card, .scale-card, .feature-card, .room-card, .stat-card):hover
    :where(.icon-container, .scale-icon, .feature-icon, .room-icon, .stat-icon, .history-icon, .landscape-icon, .stat-card-icon, .default-cover-icon) {
        transform: translateY(-2px);
        transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
        box-shadow: 0 18px 42px rgba(75, 101, 93, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
        border-color: rgba(138, 111, 89, 0.28) !important;
    }
}